Tutorial Programming

Tutorial Dasar Pengunaan jQuery UI

Apa itu Jquery?
Jquery adalah libary javascript. Maksdud dari libary disini bukan perpustakaan kayak di sekolah yah. Tapi libary disini adalah kode siap pakai yang langsung bisa kita terapkan. Sehingga kita tidak perlu membuat kode dari nol lagi.
Apa itu Jquery UI?
Jquery UI adalah plugin dari jquery yang berguna untuk membuat efek-efek interaktif pada halaman web. Karena Jquery UI adalah bagian tambahan dari Jquery, maka kita tidak bisa menggunakan Jquery UI sendiri. Hubungannya seperti gula dan semut dah. Ibaratnya ada Jquery UI, harus ada Jquery pula.
Jadi kalau begitu kita harus pelajari Jquery-nya dulu?
Tidak perlu juga sob. Karena pada pembahasan kali ini kita langsung pembelajaran praktisnya saja. Saya akan tunjukan betapa mudahnya penggunaan Jquery UI dengan begitu Anda sudah memiliki pengetahuan dasarnya. Nanti kalau Anda berhasil lalu masih penasaran, makin bertambah motivasi buat belajar lebih dalam kan.
Oke deh, kita praktik saja. Pertama-tama buat folder latihan dengan nama ui pada folderhtdocs. Lalu copy tiga file dari file sertaan yaitu jquery.js, jquery-ui.min.js dan jquery-ui.min.css kedalam folder ui. Selanjutnya didalam folder ui tersebut buat file baru dengan nama index.html. Buat kode seperti berikut
<html>
 
    <head>
 
    </head          
 
    <body>
 
    </body>
 
</html>
Selanjutnya kita akan melakukan instalasi komponen jquery di file index.html dengan menambahkan kode berikut tepat sebelum tag </head>
<link rel="stylesheet" href="jquery-ui.min.css">
 
<script src="jquery.js"></script>
 
<script src="jquery-ui.min.js"></script>
Setelah menyertakan file yang diperlukan, Anda dapat menambahkan kode widget Jquery. Dalam contoh ini, kita akan membuat salah satu widget yaitu datepicker. terlebih kita akan buat elemen input teks seperti ini:
<input type="text" name="date" id="date">
 Kode diatas ditulis setelah tag pembuka <body>. Perhatikan kode yang saya cetak tebal, itu nanti akan digunakan pada kode Jquerynya.
Lalu pada bagian tag <head> tulis kode berikut
<script>
 
    $(function() {
 
           $( "#date" ).datepicker();
 
           });
 
   </script>
Lihat tulisan yang saya cetak tebal, nah karena pada seblumnya saya menuliskan atribut id. Maka pada kode javascriptnya saya menuliskan #.
 jaja

Oke hasil dari kode diatas akan seperti ini
date
.
Bagaimana? Cukup mudah bukan? Hanya mengetikan beberapa baris kode sudah bisa menciptkan efek atraktif seperti itu. Bagi yang pernah merasakan belajar CSS dan Javascript manual, pasti penuh perjuangan menciptakan efek seperti itu.
Oke itulah dasar penerapan Jquery UI dengan widget Datepicker. Selain Date picker masih banyak loh widget yang tersedia. Berikut daftar widget yang tersedia
Ingat yah,beda widget beda penerapan kodingnya juga. Contoh lagi nih saya akan menggunakan widget Accordion. Seperti ini contoh kodingannya
<html>
  <head> 
       <link rel="stylesheet" href="jquery-ui.min.css">
       <script src="jquery.js"></script>
       <script src="jquery-ui.min.js"></script>
       <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    Test 1
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Bagaimana? Cukup mudah bukan? Hanya mengetikan beberapa <br>
    baris kode sudah bisa menciptkan efek atraktif seperti itu. <br>
    Bagi yang pernah merasakan belajar CSS dan Javascript manual<br>
    pasti penuh perjuangan menciptakan efek seperti itu.<br>
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    Test 3
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
</div>
</body>
</html>
Untuk widget accordion ini, penerapannya menggunakan elemen div dengan id accordion. Hasilnya akan nampak seperti gambar berikut
accordio

Terlihat biasa aja? Yah kalau Anda sudah praktikan pasti akan takjub juga dengan hasilnya. Maka dari itu langsung praktikan, (ketahuan masih baca doang, hehe).
Nah itulah penerapan dasar dari Jquery UI. Sederhana? Terlalu biasa? Nanti pada artikel selanjutnya (entah kapan) saya  berikan contoh penerapannya pada sistem website yang sudah jadi. Terima kasih atas kehadirannya disini, semoga bisa bermanfaat.

No comments:

Post a Comment

Tutorial Programming Designed by Templateism | Ary EJFA Copyright © 2015

Theme images by richcano. Powered by Blogger.