Selamat Datang

Pengenalan dan Tutorial Kendo UI – Jquery HTML5 Framework

Jquery bukan hal asing lagi ditelinga kita, jquery datang dengan banyak efek untuk website kita dan hampir menggantikan flash yang dulu juga di gunakan agar website kita terasa hidup dengan efek yang bisa kita ciptakan.

kendo-ui

Seiring banyaknya peminat jquery banyak juga developer yang mengembangkan dan membuat framework jquery sendiri, seperti JqueryUI, JqueryTools, Kendo UI dan masih banyak lagi.

Sekarang saya bukan mau menjelaskan secara detail apa itu jquery tapi hanya salah satu framework yang saya juga suka memakainya yaitu Kendo UI.

Kendo UI adalah framework html5 & jquery yang cukup lengkap plugin-pluginnya untuk dipasang diwebsite kita.Contoh :

  1. AutoComplete.
  2. Grid (Data Table).
  3. Editor WYSIWYG
  4. ListView
  5. Dan masih banyak lagi.

Kendo UI menyediakan produk yang gratis(free) dan berbayar(komersil), untuk kendo UI yang gratis hanya disediakan untuk website dan untuk yang berbayar disediakan untuk Mobile UI, DataViz, Dan Server Wrapper.
Untuk contoh dan melihat secara lengkap fitur/plugin dari Kendo UI, teman-teman bisa langsung melihat ke website Kendo UI.

DEMO :
http://demos.kendoui.com/

Download :
http://www.kendoui.com/download.aspx

Pilih download yang open source dan gratis.

Sekarang saya akan jelaskan memakai kendoUI pada website kita.
Pertama teman-teman extract dahulu file Kendo UI yang sudah teman-teman download di folder website teman-teman. Lalu masukan kode ini untuk melakukan import komponen dari Kendo UI.

Dimana CSS Kendo UI sama seperti Bootstrap, MetroUI dll, yaitu memiliki style untuk button dan form.
Oke setelah kita melakukan import komponen Kendo UI. Saatnya kita beralih ke plugin Kendo UI.
Kali ini saya akan memberi contoh plugin yaitu plugin DateTimePicker.

Masukan kode Ini Sebelum  :

[js] $(function() {
$("#time").kendoTimePicker();
$("#date").kendoDatePicker();
});[/js]

Lalu untuk tampilan pluginnya masukan kode ini :

Date :

Kode diatas akan menampilkan form yang siap dipakai untuk memilih tanggal.
Date adalah ID untuk memanggil fungsi data date picker Kendo UI yang dideklarasikan diatasnya : $(“#date”).kendoDatePicker();

contoh1

Untuk contoh lain,Kendo UI masih banyak menyediakan example / contoh plugin didalam file zip yang teman-teman download.
Ini adalah full script diatas :


<html>
 <head>

<link href="examples/content/shared/styles/examples-offline.css" rel="stylesheet"/>

<!--Base CSS styles and primitives-->
 <link href="styles/kendo.common.min.css" rel="stylesheet"/>

<!--Theme specific styles-->
 <link href="styles/kendo.default.min.css" rel="stylesheet"/>
 </head>

<script src="js/jquery.min.js"></script>
 <script src="js/kendo.web.min.js"></script>
 <script src="examples/content/shared/js/console.js"></script>
 <script type="text/javascript">
 $(function() {
 $("#time").kendoTimePicker();
 $("#date").kendoDatePicker();
 });
 </script>

<body>
 <div id="example" class="k-content">
 Date : <input id="date" />
 </div>
 </body>
 </html>

DEMO :

http://demos.kendoui.com/web/datepicker/index.html

Script path diatas seperti : js/jquery.js sudah saya defaultkan penempatannya dengan path atau penempatan Kendo UI.
Script diatas juga sedikit diedit dari demo untuk mempermudah pemahaman.
Sama seperti
Saya cukupkan artikel kali ini,semoga bermanfaat untuk teman-teman semua :) .
Terima kasih atas perhatiannya.Salam.

Ide Tulisan : Buku Proyek Website Super Wow Dengan PHP & Jquery Oleh Lukmanul Hakim





Comments

One thought on “Pengenalan dan Tutorial Kendo UI – Jquery HTML5 Framework

  1. As Sabiluna says:

    ada versi gratis juga ya… kalu ada crack nya boleh dikongsi mas?

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development