0b6bf modul 9 praktikum pemasaran berbasis web070616
MODUL 9
jQuery (Plugin)
Laboratorium Komputer
STIMIK PPKIA Pradnya Paramita Malang
2016
(2)
Pertemuan 9
9.1 Tujuan: 1. Mahasiswa dapat memahami mengenai jQuery core, jQuery ui dan jQuery tool
2. Mahasiswa dapat menggabungkan minimal 2 item jQuery .
9.2 Materi :
1. Java Script 2. 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 popular
dikalangan programmer jQuery. JQuery UI dibuat untuk menciptakan efek efek yang canggih dari komponen library pelengkap jQuery, diantara : accordion, datepicker, dialog, slider, dll
Instalasi jQuery UI
1. Download jQuery UI di http://jqueryui.com/download/, maka akan tampil halaman downloadnya, klik aja langsung link Current (stable), maka file jQuery UI akan tersimpan 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-ui 2. 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. Contoh datepicker. Skrip : <script type= text/javascript src= development-bundle/ui/ui.datepicker.js ></script>
a. Percantik Tanggal dengan Datepicker Skrip :
<html>
(3)
<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. Accordion
Komponen menarik jQuery UI lainnya adalah accordion, accordion berfungsi untuk mengelompokkan content dalam panel panel terpisah, dimana pengunjung dapat membuka / menutup panel panel yang diinginkan. Disamping itu accordion bisa digunakan 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 pengubahan bulan
(4)
<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 pemrograman website.</div>
<h2><a href="#">Web Administrator</a></h2>
<div>Web administrator bertugas sebagai juru maintenance, yaitu melakukan pemeliharaan dan penjagaan website.</div>
</div> </body> </html>
c. Alert (Kotak dialog)
Biasanya untuk menampilkan pesan singkat atau memberikan peringatan atau memberikan pengunjung suatu pertanyaan digunakan fungsi kotak dialog dari JavaScript, seperti alert dan confirm. Dengan kotak dialog jQuery UI lebih mudah menampilkan pesan.
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({
(5)
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 Tools
Kehadiran jQuery Tools memberikan warna yang berbeda, memberikan suasana website yang lebih indah dan elegan.
a. Tabs
Efisiensi content dengan tabs, tabs berfungsi memasukkan banyak content ke dalam satu 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> <!-- tabs --> <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>
<!-- panes (content untuk masing-masing tab) --> <div class="panes">
<div style="display: block;">Content untuk Tab 1.</div> <div style="display: none;">Content untuk Tab 2.</div>
(6)
</div> </body> </html>
b. Tooltip
Bagi yang sering surfing di internet tentu pernah bersentuhan dengan tooltip, misalkan kita mengarahkan mouse ke atas suatu link, maka akan tampil info atau keterangan 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 objek opacity: 0.7,
// gunakan elemen tooltip tip: '.tooltip'
}); }); </script> </head>
<body>
<!-- tooltip -->
<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>
(7)
<input id="password" type="password" title="Kombinasikan angka dan huruf untuk membuat 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. overlay
Pada Contoh pertama kita akan mencoba menerapkan overlay pada gallery foto, dimana apabila salah satu foto diklik, maka foto tersebut akan memebesar danditampilkan secara 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>
<!-- elemen foto --> <div id="photos">
(8)
<img src="images/spy_small.jpg" rel="#mies1"> <img src="images/khan_small.jpg" rel="#mies2"> </div>
<!-- overlays -->
<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 karirnya untuk menata hidupnya bersama tetangga sekaligus kekasihnya, Gillian (Amber Valletta).</p>
<p>Namun Bob masih mempunyai satu misi yang harus ia selesaikan sebelum Gillian bersedia menikahinya,
yaitu memenangkan hati anak-anaknya yang keras kepala dan tidak merestui hubungan 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 muslim yang 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 JQuery
(9)
Kita bisa mengkolaborasikan dua buah komponen jQuery sekaligus, contohnya pada pembahasan ini dicontohkan komponen accordion dimasukkan ke dalam komponen kotak 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 mendesain website.</div>
<h2><a href="#">Web Programmer</a></h2>
<div>Web programmer bertugas sebagai juru coding, yaitu melakukan pemrograman website.</div>
<h2><a href="#">Web Administrator</a></h2>
<div>Web administrator bertugas sebagai juru maintenance, yaitu melakukan pemeliharaan dan penjagaan website.</div>
</div> </div> </body> </html>
b. Datepicker dan tooltip pada form
(10)
<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 kanan position: "center right",
// mengatur letak posisi berdasarkan koordinat offset: [-2, 10],
// pakai efek fade (memudar perlahan-lahan) effect: "fade",
// setting ketajaman objek opacity: 0.7,
// gunakan elemen tooltip tip: '.tooltip'
}); }); </script>
<script type="text/javascript"> $(document).ready(function(){
$("#tanggal").datepicker({
dateFormat:"dd-MM-yy" });
}); </script> </head>
<body>
<!-- tooltip -->
<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>
(11)
<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
(1)
</div> </body> </html>
b. Tooltip
Bagi yang sering surfing di internet tentu pernah bersentuhan dengan tooltip, misalkan kita mengarahkan mouse ke atas suatu link, maka akan tampil info atau keterangan 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 objek opacity: 0.7,
// gunakan elemen tooltip tip: '.tooltip'
}); }); </script> </head>
<body>
<!-- tooltip -->
<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>
(2)
<input id="password" type="password" title="Kombinasikan angka dan huruf untuk membuat 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. overlay
Pada Contoh pertama kita akan mencoba menerapkan overlay pada gallery foto, dimana apabila salah satu foto diklik, maka foto tersebut akan memebesar danditampilkan secara 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>
<!-- elemen foto --> <div id="photos">
(3)
<img src="images/spy_small.jpg" rel="#mies1"> <img src="images/khan_small.jpg" rel="#mies2"> </div>
<!-- overlays -->
<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 karirnya untuk menata hidupnya bersama tetangga sekaligus kekasihnya, Gillian (Amber Valletta).</p>
<p>Namun Bob masih mempunyai satu misi yang harus ia selesaikan sebelum Gillian bersedia menikahinya,
yaitu memenangkan hati anak-anaknya yang keras kepala dan tidak merestui hubungan 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 muslim yang 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 JQuery
(4)
Kita bisa mengkolaborasikan dua buah komponen jQuery sekaligus, contohnya pada pembahasan ini dicontohkan komponen accordion dimasukkan ke dalam komponen kotak 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 mendesain website.</div>
<h2><a href="#">Web Programmer</a></h2>
<div>Web programmer bertugas sebagai juru coding, yaitu melakukan pemrograman website.</div>
<h2><a href="#">Web Administrator</a></h2>
<div>Web administrator bertugas sebagai juru maintenance, yaitu melakukan pemeliharaan dan penjagaan website.</div>
</div> </div> </body> </html>
b. Datepicker dan tooltip pada form Contoh skrip :
(5)
<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 kanan position: "center right",
// mengatur letak posisi berdasarkan koordinat offset: [-2, 10],
// pakai efek fade (memudar perlahan-lahan) effect: "fade",
// setting ketajaman objek opacity: 0.7,
// gunakan elemen tooltip tip: '.tooltip'
}); }); </script>
<script type="text/javascript"> $(document).ready(function(){
$("#tanggal").datepicker({
dateFormat:"dd-MM-yy" });
}); </script> </head>
<body>
<!-- tooltip -->
<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>
(6)
<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