MODUL 9 jQuery (Plugin) -...

Praktikum Pemasaran Berbasis Web

[email protected]

MODUL 9

jQuery (Plugin)

Laboratorium Komputer

STIMIK PPKIA Pradnya Paramita Malang

2016


[email protected]

Pertemuan 99.1 Tujuan : 1. Mahasiswa dapat memahami mengenai jQuery core, jQuery ui dan

jQuery tool2. Mahasiswa dapat menggabungkan minimal 2 item jQuery

.9.2 Materi :

1. Java Script2. jQuery3. CSS

9.3 Dasar Terori :

plugin merupakan salah satu factor utama yang membuat jQuery begitu cepat naik daun(popular), dua pembuat plugin yang paling popular yaitu jQuery UI dan JQuery Tools.

A. jQuery UI = jQuery UI (user Interface) merupakan plugin yang paling populardikalangan programmer jQuery. JQuery UI dibuat untuk menciptakan efek – efek yangcanggih dari komponen library pelengkap jQuery, diantara : accordion, datepicker,dialog, slider, dll

Instalasi jQuery UI1. Download jQuery UI di http://jqueryui.com/download/, maka akan tampil halaman

downloadnya, klik aja langsung link Current (stable), maka file jQuery UI akantersimpan dikomputer anda.

2. Filenya masih berbentuk kompresi, maka ekstrak dahulu.3. Untuk mencobanya, silahkan klik versi demonya ada di file index.html

Prinsip Menggunakan jQuery UI (sebagai contoh jquery-ui-1.7.2.custom)1. Copykan folder jquery ui ke folder utama website kita, contoh folder jquery-ui2. Panggil file CSS utama jQuery UI, contoh : ui.all.css

Skrip : <link rel=”stylesheet” type=”text/css” Href=”development-bundle/themes/base/ui.all.css”>

3. Panggil library jQuery, contoh : jquery-1.3.2 yang terdapat pada folder development-bundle.Skripnya : <script type=”text/javascript” src=”development-bundle/jquery-1.3.2.js”></script>

4. Panggil library utama jQuery UI, yaitu ui.core.js yang terdapat di folder development-bundle/ui/ skripnya : <script type=”text/javascript” src=”development-bundle/ui/ui.core.js”></script>

5. Terakhir panggil library komponen jQuery UI yang ingin digunakan. Contohdatepicker. Skrip : <script type=”text/javascript” src=”development-bundle/ui/ui.datepicker.js”></script>

a. Percantik Tanggal dengan Datepicker

Skrip :

<html><head>

Panggil Css utama library jQuery ui


[email protected]

<link type="text/css" href="development-bundle/themes/base/ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>

<script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>

<script type="text/javascript" src="development-bundle/ui/ui.datepicker.js"></script>

<script type="text/javascript">$(document).ready(function(){$("#tanggal").datepicker({

dateFormat:"dd-MM-yy"changeMonth : true ,chaneYear : true

});}); </script>

</head><body style="font-size:65%;">MASUKKAN TANGGAL: <input id="tanggal" type="text">

</body></html>

hasilnya : Datepicker dengan tambahan fungsi bulan dan tahun bisa dirubah

b. AccordionKomponen menarik jQuery UI lainnya adalah accordion, accordion berfungsi untukmengelompokkan content dalam panel – panel terpisah, dimana pengunjung dapatmembuka / menutup panel – panel yang diinginkan. Disamping itu accordion bisadigunakan untuk mengelompokkan menu – menu yang sejenis.Contoh :<html><head><link type="text/css" href="development-bundle/themes/hot-sneaks/ui.all.css"

rel="stylesheet" />

Panggil library jQuery

Panggil library Utama Query

Panggil library Komponen

Untuk format tanggal

Untuk mengeluarkan pengubahanbulan


[email protected]

<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script><script type="text/javascript" src="development-bundle/ui/ui.core.js"></script><script type="text/javascript" src="development-bundle/ui/ui.accordion.js"></script><script type="text/javascript">$(document).ready(function(){

$("#isi").accordion({active : 1

});});

</script></head><body style="font-size:65%;"><div id="isi"><h2><a href="#">Web Designer</a></h2><div>Web designer bertugas sebagai juru gambar, yaitu mendesain website.</div>

<h2><a href="#">Web Programmer</a></h2><div>Web programmer bertugas sebagai juru coding, yaitu melakukan pemrogramanwebsite.</div><h2><a href="#">Web Administrator</a></h2><div>Web administrator bertugas sebagai juru maintenance, yaitu melakukanpemeliharaan dan penjagaan website.</div>

</div></body>

</html>

c. Alert (Kotak dialog)Biasanya untuk menampilkan pesan singkat atau memberikan peringatan ataumemberikan pengunjung suatu pertanyaan digunakan fungsi kotak dialog dari JavaScript,seperti alert dan confirm. Dengan kotak dialog jQuery UI lebih mudah menampilkanpesan.Contoh skrip :<html><head><link rel="stylesheet" type="text/css" href="development-bundle/themes/le-

frog/ui.all.css"><script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script><script type="text/javascript" src="development-bundle/ui/ui.core.js"></script><script type="text/javascript" src="development-bundle/ui/ui.dialog.js"></script><script type="text/javascript">$(document).ready(function(){$("#kotakdialog").dialog({

[email protected]

position: ["right", "bottom"]});

});</script>

</head><body style="font-size:95%;"><div id="kotakdialog" title="Pesan Hari Ini">Kalau Anda terlahir miskin, itu bukan

salah Anda. Tapi, kalau Anda mati sebagai orang miskin, itu salah Anda.</div></body>

</html>

B. JQuery ToolsKehadiran jQuery Tools memberikan warna yang berbeda, memberikan suasana websiteyang lebih indah dan elegan.a. Tabs

Efisiensi content dengan tabs, tabs berfungsi memasukkan banyak content ke dalamsatu halaman, kemudian merapikannya atau mengelompokkannya dalam bentuk tab,dan setiap content dapat ditampilkan dengan mengklik tab tersebut.

Contoh skrip :<html><head><link type="text/css" href="css/tabs-1.css" rel="stylesheet" /><script type="text/javascript" src="jquery.tools.min.js"></script><script type="text/javascript">$(document).ready(function(){

$("ul.tabs").tabs("div.panes > div");});

</script></head><body><ul class="tabs">

<li><a class="current" href="#">Tab 1</a></li><li><a class="" href="#">Tab 2</a></li><li><a class="" href="#">Tab 3</a></li>

</ul>

<div class="panes">

<div style="display: block;">Content untuk Tab 1.</div><div style="display: none;">Content untuk Tab 2.</div>

<div style="display: none;">Content untuk Tab 3.</div>

[email protected]

</div></body>

</html>

b. TooltipBagi yang sering surfing di internet tentu pernah bersentuhan dengan tooltip,misalkan kita mengarahkan mouse ke atas suatu link, maka akan tampil info atauketerangan tambahan mengenai link tersebut. Itulah yang disebut tooltip.

Contoh skrip :<html><head>

<link rel="stylesheet" type="text/css" href="css/tips-form.css"><script type="text/javascript" src="jquery.tools.min.js"></script>

<script type="text/javascript">$(document).ready(function(){// pilih semua input dan terapkan tooltip pada semua input$("#myform :input").tooltip({// letakkan posisi tooltip di bagian/sebelah kanan

position: "center right",// mengatur letak posisi berdasarkan koordinat

offset: [-2, 10],// pakai efek fade (memudar perlahan-lahan)effect: "fade",

// setting ketajaman objekopacity: 0.7,// gunakan elemen tooltiptip: '.tooltip'

});});</script>

</head><body><div style="opacity: 0.7; position: absolute; top: 298px; left: 338px; display:

none;" class="tooltip"></div><form id="myform" action="#"><h3>Formulir Pendaftaran</h3><div id="inputs"><label for="username">Username</label>

<input id="username" title="Username minimal 8 karakter."/><br /><label for="password">Password</label>

[email protected]

<input id="password" type="password" title="Kombinasikan angka dan huruf untukmembuat password yang sulit ditebak." /><br />

<label for="email">Email</label><input id="email" title="Email harus mengandung karakter titik (.) dan @." /><br />

<label for="body">Pesan</label><textarea id="body" title="Tulis pesan Anda"></textarea><br />

<label for="where">Pilihan</label><select id="where" title="Pilih salah satu pilihan">

<option>-- pilihan pertama --</option><option>-- pilihan kedua --</option><option>-- pilihan ketiga --</option>

</select><br /></div>

<label>Saya menyatakan data sudah benar.<input type="checkbox" id="check" title="Berikan tanda cek agar proses dapat dilanjutkan "/>

</label><p><button type="button" title="Klik tombol untuk proses data">Proses</button></p>

</form></body>

</html>

c. overlayPada Contoh pertama kita akan mencoba menerapkan overlay pada gallery foto,

dimana apabila salah satu foto diklik, maka foto tersebut akan memebesar danditampilkansecara apik sebagai foto paling depan. Untuk lebih jelasnya, coba skrip dibawah ini :

<html><head><link rel="stylesheet" type="text/css" href="css/overlay-basic.css"><script type="text/javascript" src="jquery.tools.min.js"></script>

<script type="text/javascript">$(document).ready(function(){

$("img[rel]").overlay();});

</script></head><body><div id="photos">

[email protected]

<img src="images/spy_small.jpg" rel="#mies1"><img src="images/khan_small.jpg" rel="#mies2">

</div>

<div class="simple_overlay" id="mies1"><div class="close"></div>

<img src="images/spy.jpg">

<div class="details"><h3>Spy Next Door</h3><br />

<p>Bob Ho (Jackie Chan), seorang ahli mata-mata CIA memutuskan menyudahi karirnyauntuk menata hidupnya bersama tetangga sekaligus kekasihnya, Gillian

(Amber Valletta).</p><p>Namun Bob masih mempunyai satu misi yang harus ia selesaikan sebelum Gillianbersedia menikahinya,

yaitu memenangkan hati anak-anaknya yang keras kepala dan tidak merestuihubungan mereka berdua.</p>

</div></div>

<div class="simple_overlay" id="mies2"><div class="close"></div><img src="images/khan.jpg">

<div class="details"><h3>My Name is Khan</h3><br />

<p>Film dimulai saat seorang anak, Rizwan Khan (Tanay Chheda), seorang muslimyang mengidap sindrom Asperger,

hidup bersama ibunya (Zarina Wahab) di wilayah Borivali di Mumbai.</p><p>Saat ia dewasa (Shahrukh Khan), Rizwan pindah ke San Fransisko dan hidup

bersama adik dan iparnya.Selama disana, ia jatuh cinta kepada Mandira (kajol). Mereka menikah dan

memulai usaha disana.Saat peristiwa 9/11, barulah konflik film dimulai.</p>

</div></div>

</body></html>

C. Penggabungan JQuerya. Accordion dalam alert(Kotak dialog)


[email protected]

Kita bisa mengkolaborasikan dua buah komponen jQuery sekaligus, contohnya padapembahasan ini dicontohkan komponen accordion dimasukkan ke dalam komponenkotak dialog.Contoh skrip :ml><head><link rel="stylesheet" type="text/css" href="development-bundle/themes/hot-

sneaks/ui.all.css"><script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script><script type="text/javascript" src="development-bundle/ui/ui.core.js"></script><script type="text/javascript" src="development-bundle/ui/ui.dialog.js"></script>

<script type="text/javascript" src="development-bundle/ui/ui.accordion.js"></script><script type="text/javascript">$(document).ready(function(){$("#kotakdialog").dialog();

$("#isi").accordion();});

</script></head><body style="font-size:65%;"><div id="kotakdialog" title="Kotak Dialog Accordion"><div id="isi"><h2><a href="#">Web Designer</a>

</h2><div>Web designer bertugas sebagai juru gambar, yaitu mendesainwebsite.</div>

<h2><a href="#">Web Programmer</a></h2><div>Web programmer bertugas sebagai juru coding, yaitu melakukan pemrogramanwebsite.</div>

<h2><a href="#">Web Administrator</a></h2><div>Web administrator bertugas sebagai juru maintenance, yaitu melakukanpemeliharaan dan penjagaan website.</div>

</div></div>

</body></html>

b. Datepicker dan tooltip pada formContoh skrip :

[email protected]

<html><head>

<link rel="stylesheet" type="text/css" href="css/tips-form.css"><link type="text/css" href="development-bundle/themes/base/ui.all.css"

rel="stylesheet" /><script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>

<script type="text/javascript" src="jquery.tools.min.js"></script><script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>

<script type="text/javascript" src="development-bundle/ui/ui.datepicker.js"></script><script type="text/javascript">$(document).ready(function(){// pilih semua input dan terapkan tooltip pada semua input

$(".t").tooltip({

// letakkan posisi tooltip di bagian/sebelah kananposition: "center right",

// mengatur letak posisi berdasarkan koordinatoffset: [-2, 10],

// pakai efek fade (memudar perlahan-lahan)effect: "fade",

// setting ketajaman objekopacity: 0.7,

// gunakan elemen tooltiptip: '.tooltip'

});});

</script><script type="text/javascript">$(document).ready(function(){$("#tanggal").datepicker({

dateFormat:"dd-MM-yy"});

});</script>

</head><body><div style="opacity: 0.7; position: absolute; top: 298px; left: 338px; display: none;"

class="tooltip"></div><form id="myforma" action="#"><h3>Formulir Pendaftaran</h3><div id="inputs"><label for="username">Username</label>

<input class="t" id="username" title="Username minimal 8 karakter."/><br />


[email protected]

<label for="password">Password</label><input class="t" id="password" type="password" title="Kombinasikan angka dan huruf

untuk membuat password yang sulit ditebak." /><br /><label for="tanggal">Tanggal Lahir</label><input id="tanggal" name= "tanggal" title="masukkan tanggal lahir anda." /><br />

<label for="email">Email</label><input class = "t" id="email" title="Email harus mengandung karakter titik (.) dan @."

/><br /><label for="website">Website</label>

<input class="t" id="website" title="Tulis Alamat email anda."/><br /><label for="no_telp">No_Telp</label>

<input class="t" id="no_telp" title="isi dengan nomor telpon anda yang aktif."/><br /></div>

<label>Saya menyatakan data sudah benar.<input type="checkbox" id="check" title="Berikan tanda cek agar proses dapat dilanjutkan "/>

</label><p><button type="button" title="Klik tombol untuk proses data">Proses</button></p>

</form></body>

</html>

TUGAS

Buatlah penggabungan minimal 2 buah item jQuery

MODUL 9 jQuery (Plugin) -...

Documents

Transcript of MODUL 9 jQuery (Plugin) -...