Pelatihan j query

437 views

Published on

latihan

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
437
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
50
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Pelatihan j query

  1. 1. JQueryPenggunaan dan PerkembanganjQuery merupakan suatu framework (library) javascript yang menekankan interaksi antarajavascript dan HTML, atau bisa disebut juga sebagai cara baru dalam menuliskan kodejavascript. jQuery akan mempercepat dan meringkaskan library javascript sehingga denganmenggunakan jQuery kita dapat mempercepat perpindahan dokumen HTML, penangananevent (event handling), pembuatan animasi didalam web sehingga web kita tampak sepertiflash, dan juga interaksi AJAX untuk pengembangan web yang modern dan cepat. Jquerymemiliki slogan “write less, do more” yang kurang lebih maksudnya adalah kesederhanaandalam penulisan code, tapi dengan hasil yang lebih banyak.jQuery mempunyai lisensi dibawah GNU General Public License dan MIT License artinya jQuerymerupakan aplikasi yang Open Source dan bebas di publikasikan oleh siapapun. Ukurannya jugacukup kecil yaitu sebesar 56 KB (compressed) sehingga menggunakan jQuery menjadi jauh lebihcepat dan mudah daripada menggunakan framework yang lain atau menggunakan JavascriptKonvensional.Beberapa hal yang bisa dilakukan dengan JQuery. 1. Mengakses bagian halaman tertentu dengan mudah 2. Mengubah tampilan bagian halaman tertentu 3. Mengubah isi dari halaman 4. Merespon interaksi user dalam halaman dan menambahkan animasi ke halaman 5. Mengambil informasi dari server tanpa me-refresh seluruh halaman 6. Menyederhanakan penulisan Javascript biasa.Mengenai perkembangan versi dari JQuery sendiri saat ini (November 2011) telah ada jQueryversi 1.7 (Release Notes). Perkembangan versi jQuery: 1. JQuery versi 1.0 (1.0.1, 1.0.2, 1.0.3, 1.0.4) 2. JQuery versi 1.1 (1.1.1, 1.1.2, 1.1.3, 1.1.3.1, 1.1.4) 3. JQuery versi 1.2 (1.2, 1.2.1, 1.2.2, 1.2.3, 1.2.4, 1.2.5, 1.2.6) 4. JQuery versi 1.3 (1.3.1, 1.3.2) 5. JQuery versi 1.4 (1.4.1, 1.4.2, 1.4.3, 1.4.4) 6. JQuery versi 1.5 (1.5.1, 1.5.2) 7. JQuery versi 1.6 (1.6.1, 1.6.2, 1.6.3, 1.6.4) Sumber : http://www.jquery.com [Computer and Communication] | JQuery 1
  2. 2. Perbedaan versi pada Jquery.Versi baru biasanya terdapat penambahan fungsi baru dari fungsi jquery yang sebelumnya.Tetapi pasti memiliki besar kapasitas yang lebih besar dari versi yang sebelumnya sehinggadengan versi yang baru dapat memperberat beban dan loading pada aplikasi website yangdibuat. Maka dari itu kita harus mempertimbangkan ketika kita memakai versi jquery yang kitaakan gunakan.Perbedaan Jquery.js (tanpa min) dengan jquery.min.js(menggunkan min).Dari keduanya mempunyai kegunaan dan fungsi sama. Penggunaan “min” menandakan bahwajquery tersebut telah dikompres (compress) sehingga muatan atau bebanya telah terkurangidengan tujuan untuk mempercepat waktu loading. Compress jquery dilakukan denganmenghilangkan beerapa keterangan dan spasi yang sebenarnya berfungsi untuk memudahkanpengguna saat membuat desain baru dengan memanfaatkan jquery. Maka dari itu jika sekedarpengguna lebih baik menggunakan jquery.min.js agar loading lebih cepat.Struktur penggunaan jqueryJquery merupakan library yang berupa file javascript. Jquery dapat mempermudah kita dalammemanfaatkan dan menggunakan javascript. Sebelum dapat digunakan, jquery harus diinclude-kan terlebih dahulu. Letak dari script includenya pun berada pada tag <head></head>. <head> <script type=”text/javascipt" src=”jquery-1.4.4.min.js”> </script> </head>Salah satu keuntungan menggunakan jquery adalah kemudahan dalam mengaksesDOM(Document Object Model). Untuk dapat mengakses DOM denga sempurna tentu semuaDOM harus sudah siap untuk diakses. Untuk memastikan semua DOM telah siap diakses, Jquerymenyediakan event. $(document) .ready()Event ini hampir sama dengan onLoad yang dimiliki oleh native javascript. Bedanya fungsi didalam $(document).ready() akan tertrigger saat semua DOM telah siap, sedangkan padaonLoad, semua elemen yang ada dalam halaman harus telah selesai terdownload terlebihdahulu, termasuk file gambar. [Computer and Communication] | JQuery 2
  3. 3. salah satu contoh penggunaanya: <style type=”text/css”> .jalankan{ background-color: red; } </style> <script type=”text/javascript”> $(document).ready(function(){ $(“p#content”).addClass(“jalankan”); }); </script> <script type="text/javascript"> //Tempat script javascript $(document).ready(function(){ $("p#content").addClass("highlight"); }); </script>$(“p#content”).addClass(“highlight”) akan dijalankan saat semua DOM telah siap p#contentmerupakan selector jquery yang sebenarnya sama dengan selector CSS. Script diatas akanmenambahkan class highlight kedalam blok p yang memiliki id content.PenggunaanPada penggunaan jQuery ini tidak terlepas dengan javascript karena library atau frameworkjquery ini ditulis menggunakan bahasa javascript. Sebenarnya ada beberapa cara teknikpenulisan. Tata cara penulisan yang biasa digunakan adalah seperti ini. 1. Pendefinisia jQuery sendiri, kode yang digunakan bisa berupa jQuery() atau $(). 2. Selector, selector biasanya disisipkan pada pendefinisian diatas misalkan seperti ini jQuery(‘#kotak’) . selector merupakan perintah yang digunakan untuk membuat manipulasi pada selector HTML yang didefinisikan diatas. Selector yang umum digunakan biasanya adalah tag HTML itu sendiri, nama ID, nama CLASS, dan atribut- atribut yang ada pada HTML. Selector disini bisa kita sebut juga sebagai target. Target dari manipulasi jQuery pada tampilan HTML. 3. Method, pada method disini diletakan setelah selector. Pada method ini merupakan fungsi untuk memanipulasi selector yang menjadi target jQuery tersebut. Method disini bisa berupa event, manipulasi data, memberikan effect tampilan atau mendapatkan informasi dari suatu object. Kebanyakan didalam function method ini terdapat beberapa macam properties atau function lagi untuk pemilihan dari karakter dari method tersebut. [Computer and Communication] | JQuery 3
  4. 4. Berikut merupakan contoh struktur penulisanya: jQuery(‘#kotak’).show( ); Pendefinisian Selecto Metho jquery r dPada script diatas bisa kita jelaskan bahwa jquery ini berfungsi untuk menampilkan selectoratau HTML yang memiliki ID “kotak” yang mana HTML yang memiliki ID kotak sebelumnyaadalah hide atau tidak tampil.Membuat fuction JQuery.Jquery adalah satu framewok javascript yang mendukung pluggin dengan sangat mudah. Sehinggabanyak kita dapat dengan mudah men jumpai plugin-plugin yang berada diinternet. Contoh plugin yangterkenal adalah plugin yang dikembangan oleh jQuery UI. Sebenarnya kita juga bias mendevelop suatuplugin sendiri. Disini akan dijelaskan sedikit mengenai pembuatan plugin dan fungsi didalam jQuery.Untuk penulisan jQuery secara sederhana adalah sebagai berikut jQuery.fn.myPlugin = function() { // Do your awesome plugin stuff here };Jika kita menggunakan script diatas, kelemahanya adalah function jQuery tersebut dapat terjadi bentrokdengan plugin jQuery yang lain. Karena didalam perintah function tersebut, harus dituliskanmenggunakan jQuery juga untuk pendefinisian jQuery-nya. Untuk masalah diatas dapat ditanggulangidengan menggunakan perintah berikut: (function( $ ) { $.fn.myPlugin = function() { // Do your awesome plugin stuff here }; })( jQuery ); Dengan pemformatan penulisan function diatas, kita dapat menggunakan symbol dollar ‘$’ untukdapat meloloskan dari function jQuery lain. Untuk lebih jelasnya mengenai penggunaan function jQueryyang sederhana bias menggunakan contoh berikut ini, (function( $ ){ $.fn.maxHeight = function() { var max = 0; this.each(function() { max = Math.max( max, $(this).height() ); }); return max; Kemudian kita dapat menjalankan perintahnya dengan cara berikut ini: }; })( jQuery ); [Computer and Communication] | JQuery 4
  5. 5. jQuery(document).ready(function(){ var tallest=$(div).maxHeight(); alert(tallest); }); Hasil keluaran dari script diatas akan menujukan nilai tinggi dari tag HTML div melalui notifikasi perintah alert. Dari fungsi yang kita buat, yang perlu kita soroti adalah fungsi this dan $(this). Untuk fungsi this.each sendiri, memang harus ditulis this seperti itu bukan dengan $(this). Jika kita tuliskan $(this) disitu maka javascript akan mengeluarkan perintah error atau tidak jalan. Karena jQuery sendiri akan mendefinisikan perintah berikut sebagai $($(this)). Jadi kita tidak perlu menuliskan perintah $(this).each akan tetapi this saja. Kemudian setelah this didalam fungsi each(). Kita akan menjumpai dengan $(this). Kalo pada bagian ini, kita tuliskan secara default atau seperti biasa. Karena perintah $(this) menerangkan target yang sedang diseleksi oleh fungsi each(). Selain itu, didalam penulisan function ini kita bisa membuat fungsi yang dapat kita berikan options dan default dalam membuat framework fungsi buatan kita sendiri. Contoh scriptnya adalah seperti ini. (function( $ ){ $.fn.tooltip = function( options ) { //Create some defaults, extending them with any options that were provided var settings = $.extend( { location : top, background-color : blue }, options); return this.each(function() { // Tooltip plugin code here }); }; })( jQuery ); Jika kita function tersebut dengan perintah berikut ini. $(div).tooltip({ location : left }); Maka isi kandungan informasi fungsi tooltip tersebut adalah. { location : left, background-color : blue } Hal tersebut terjadi karena, funsi yang kita set adalah location left dan default yang ada adalahbackground-color:blue dan location:top. Kedua nilai tersebut, default dan nilai function yang kita set kitalakukan fungsi extends di jQuery maka, menampilkan isi darifungsi diatas. Dimana nilai default akantereplace dengan nilai yang kita set. jika yang kita set hanya sebagian argument dari fungsi tersebut,maka nilai yang lainya akan terset secara default. [Computer and Communication] | JQuery 5
  6. 6. Berikut merupakan contoh jadi dari program yang telah dibuat.<html><head><title>Untitled Document</title><script src="jquery-1.4.js" type="text/javascript"></script><script>(function( $ ){ $.fn.tooltip = function( options ) { var settings = $.extend( { position: absolute, backg : blue, data:Nilai Default, top:2px, right:10px, width:200px }, options); $(.tip).show(); $(.tip).css({position:settings.position,background-color:settings.backg,top:settings.top,right:settings.right,width:settings.width}); $(.tip).text(settings.data); };})( jQuery );jQuery(document).ready(function(){ $(div).hover( function(){ jQuery(.tip).tooltip({top:1px,right:2px,backg:red,width:100px}); },function(){ jQuery(.tip).hide(); });});</script><style>#tool{ width:260px; position:relative;}#tool img{ height:40px; width:260px; height:200px;}</style></head> [Computer and Communication] | JQuery 6
  7. 7. <body> <div id="tool"> <img src="Copy of DSC_0133.jpg" /> <span class="tip" style="display:none">INI ADALAH TOOLTIP SEDERHANA</span> </div> </body> </html>Apabila kursor kita gerakan pada gambar, maka akan muncul tooltip yang terblock warna merahtersebut.Event yang ada pada javascript. 1. .keypress() Merupakan Event pemicu untuk mengikat fungsi dari perintah tombol dari element yangdipilih.$( selector ).keypress() //memicu keypress untuk pemilihan item$( selector ).keypress( function ) // Optional. Menjalankan fungsi yangspesifik ketika ada pemicu berupa penekanan tombol keyboard.Dari sekian tombol yang ada pada keyboard,akan memiliki devinisi kode yang berbeda-beda.Devinisi kode dapat dilihat dalam table berikut: [Computer and Communication] | JQuery 7
  8. 8. Key Code Key Code Key CodeBackspace 8 O 79 Num lock 144Tab 9 P 80 Scroll lock 145Enter 13 Q 81 Semi-colon 186Shift 16 R 82 Equal sign 187Ctrl 17 S 83 Comma 188Alt 18 T 84 Dash 189Pause/Break 19 U 85 Period 190Caps Lock 20 V 86 Forward slash 191Escape 27 W 87 Grave accent 192Page Down 33 X 88 Open bracket 219End 35 Y 89 Back slash 120Home 36 Z 90 Close braket 221Left Arrow 37 Left window key 91 Sinle quote 222Up Arrow 38 Right window key 92Right Arrow 39 Select key 93Down Arrow 40 Numpad 0 96Insert 45 Numpad 1 97Delete 46 Numpad 2 980 48 Numpad 3 991 49 Numpad 4 1002 50 Numpad 5 1013 51 Numpad 6 1024 52 Numpad 7 1035 53 Numpad 8 1046 54 Numpad 9 1057 55 Multiply 1068 56 Add 1079 57 Substract 109A 65 Decimal Point 110B 66 Divide 111C 67 F1 112D 68 F2 113E 69 F3 114F 70 F4 115G 71 F5 116H 72 F6 117I 73 F7 118J 74 F8 119K 75 F9 120L 76 F10 121M 77 F11 122N 78 F12 123 [Computer and Communication] | JQuery 8
  9. 9. Contoh : Perintah ketika kita memberian fungsi ketika ada pemicu pada penekanan kode 27 = Esc. $(document).keypress(function(){ if(keyCode==27){ $("#background").fadeOut("slow"); $("#large").fadeOut("slow"); } }); 2. Click() Digunakan untuk memicu event pada element HTML saat user mengklik elemen yang mempunyai fungsi click() ini. Event click dikirim ke elemen saat pointer mouse diatas elemen dan tombol mouse ditekan lalu dilepaskan. <script type=”text/javascript”> $(document).ready(function(){ $(“p”).click(function(){ $(this).hide(); }); }); </script> $(“p”).click() kode ini berarti bahwa JQuery mencari tag <p> HTML dan menunggu diklik olehuser. $(this).hide() kode ini berarti bahwa isi dari paragraph dihide. 3. fadeIn() Digunakan untuk menampilkan elemen dengan efek pudar. $(‘selector’).fadeIn(‘durasi’,’callback’) Keterangan: Selector digunakan untuk memilih elemen yang akan dikenakan efek fadeIn. ‘durasi’ adalah waktu yang menunjukkan berapa lama efek fade ini akan berlangsung. [Computer and Communication] | JQuery 9
  10. 10. Contoh: <script> $(document).ready(function(){ $(“p”).hide(); $(“.tekan”).click(function(){ $(“p”).fadeIn(); }); }); </script>4. Css(); jQuery juga mempunyai kemampuan dalam hal memanipulasi CSS. Ada 3 fungsi utama dalam jQuery untuk melakukan manipulasi. $(selector).css(name,value) $(selector).css({properties}) $(selector).css(name) Fungsi css() berguna untuk mendapatkan atau set sebuah properti CSS atau lebihuntuk elemen yang dipilih. Jika parameter name dan value diisi, artinya kita me-set nilai dari properti CSS.Untuk me-set nilai-nilai untuk properti CSS lebih dari satu, bisa gunakan {properties}Jika hanya untuk mendapat nilai dari properti CSS yang diinginkan dari elemen yangdipilih cukup isi parameter name saja. <script type=”text/javascript”> $(document).ready(function(){ $("#tombol1").click(function(){ $(".p1").css("color","red"); $(".p2").css({"color":"white","backgroundcolor":"# ff8954","font-family":"Arial","fontsize":" 20px","padding":"5px"}); }); $("#tombol2").click(function(){ var nilai = $(".p1").css("color"); alert(nilai); }); }); <script> [Computer and Communication] | JQuery 10
  11. 11. 1. Foto popUp Yang dibutuhkan:  File library jquery-1.4.4.min.js  File foto (terserah .jpg, .PNG) Langkah Pembuatan: 1. Menampilkan image yang ada didalam folder kita ke dalam browser. Index.html <html> <title>Image popUp</title> <head></head> <body> <div align=”center”> <a href=”#”><img src=”images/sm.jpg”/></a> <div> </body> <html> <a href=”#”> menandakan bahwa, tidak ada peralihan kehalaman lain setelah gambar tersebut di klik. Kemudian simpan terserah.html, pada modul ini kita akan menamainya dengan nama index.html. Kemudian file index.html kita buka dengan Browser, maka akan tampil seperti gambar dibawah ini. [Computer and Communication] | JQuery 11
  12. 12. Tetapi setelah di klik pada gambar tersebut, tidak akan terjadi perubahan peralihan halaman. Karena tidak memberikan tujuan pada <a href=”#”></a>.2. Menampilkan overlay ketika image di klik. Tambahkan script dibawah pada halaman Index.html. <html> <title>Image popUp</title> <head></head> <body> <div align=”center”> <div id=”eksekusi”> <a href=”#”><img src=”images/sm.jpg”/></a> </div> <div id=”background”></div> <div id=”large”></div> </div> </body> <html> Setelah itu kita menyisipkan script dibawah ini untuk menghubungkan file library JQuery dengan file index.html. misalkan kita memakai jquery-1.4.4.min.js. Sisipkan diantara tag <head> </head>. <head> <script type=”text/javascript” src=”jquery- 1.4.4.min.js”></script> </head> [Computer and Communication] | JQuery 12
  13. 13. Tambahkan script dibawah ini untuk mendiskripsikan script dari javascript, yang nantinyakita memanggil fungsi dari library file JQuery. Tulis script ini setelah pemanggilan fileJQuerynya. <script type="text/javascript" language="javascript"> jQuery.fn.cnclab = function () { $(this).css("position","absolute"); $(this).css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); $("#background").css("width", ( $(window).width() +$(window).scrollLeft() + "px")); $("#background").css("height", ( $(window).height() +$(window).scrollTop() + "px")); $(this).css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); return this; } $(document).ready(function() { $("#eksekusi img").click(function(e){ $("#background").css({"opacity" : "0.7"}) .fadeIn("slow"); $("#large").html("<img src="+$(this).attr("src")+"/>") .cnclab() .fadeIn("slow"); return false; }); }); </script>Maka setelah gambar tersebut di klik akan tampil seperti ini. Overlay masih dalam tampilansederhana, dan belum menyamarkan gambar yang berada di belakangnya. [Computer and Communication] | JQuery 13
  14. 14. 3. Menampilkan overlay dengan background gelap (agar gambar pada bagian belakang disamarkan dengan cara penggelapan background) ketika image di klik. Untuk menampilkan background gelap, kita harus mendiskripsikan CSS dari selector #background dan mendiskripsikan selector #large. Tambahkan script ini dibawah pendiskripsian script javascriptnya. Dan masih berada didalam tag <head></head>. [Computer and Communication] | JQuery 14
  15. 15. <style> img { border: none; position: relative; } #large { display: none; position: absolute; background: #FFFFFF; padding: 5px; color: #336699; } #background{ display: none; position: absolute; height: 100%; top: 0; left: 0; background: #000000; } </style>Setelah CSS selctor di deskripsikan, maka akan tampil seperti ini setelah di klik pada gambartersebut. [Computer and Communication] | JQuery 15
  16. 16. 4. Menerapkan script ketika kita klik di sekitar image saat #large akan kembali ke halaman image awal. Tulis script dibawah ini pada tag <script></script> pada pendiskripsian javascript. $("#background").click(function(){ $("#background").fadeOut("slow"); $("#large").fadeOut("slow"); });5. Script ketika kita klik pada gambar pada saat #large akan kembali ke halaman image awal dan kita dapat menggunakan tombol Esc untuk mengembalikanya. $(document).keypress(function(e){ if(e.keyCode==27){ $("#background").fadeOut("slow"); $("#large").fadeOut("slow"); } });6. <html> <head> <script type="text/javascript" src="jquery- 1.4.4.min.js"></script> <script type="text/javascript" language="javascript"> jQuery.fn.cnclab = function () { $(this).css("position","absolute"); $(this).css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); $("#background").css("width", ( $(window).width() +$(window).scrollLeft() + "px")); $("#background").css("height", ( $(window).height() +$(window).scrollTop() + "px")); $(this).css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); return this; } $(document).ready(function() { $("#eksekusi img").click(function(){ $("#background").css({"opacity" : "0.7"}) .fadeIn("slow"); [Computer and Communication] | JQuery 16
  17. 17. $("#large").html("<img src="+$(this).attr("src")+"/>") .cnclab() .fadeIn("slow"); return false; });Script keseluruhan. Index.html $(document).keypress(function(e){ if(e.keyCode==27){ $("#background").fadeOut("slow"); $("#large").fadeOut("slow"); } }); $("#background").click(function(){ $("#background").fadeOut("slow"); $("#large").fadeOut("slow"); }); }); </script> <style> img { border: none; position: relative; } #large { display: none; position: absolute; background: #FFFFFF; padding: 5px; color: #336699; } [Computer and Communication] | JQuery 17
  18. 18. #background{ display: none; position: absolute; height: 100%; top: 0; left: 0; background: #000000; } </style> </head> <body> <div align="center"> <div id="eksekusi"> <a href="#"><img src="images/sm.jpg"/></a> </div> <div id="large"></div> <div id="background"></div> </div> </body> </html>2. Form Validate Yang dibutuhkan:  jquery-1.4.js ( Library )  jquery.validate.js [Computer and Communication] | JQuery 18
  19. 19. Langkah Pembuatan:1. Pertama, buatlah form ( form.html ): <html> <head></head> <body> <form id= “form1”> Username : <input type=text name=username> <br> Nama : <input type=text name=nama > <br> </form> </body> <html>2. Setelah itu kita menyisipkan script dibawah ini untuk menghubungkan file library JQuery dengan file form.html. Hal ini agar kita dapat menggunakan Jquery tersebut. misalkan kita memakai jquery-1.4.js. Sisipkan diantara tag <head> </head>. <script type="text/javascript" src="jquery-1.4.js"></script> <script type="text/javascript" src="jquery.validate.js"></script>3. Mengatur validasi Masih pengetikan di <head></head>, ketik scipt di bawah ini. <script type="text/javascript"> Untuk tahap ke 4 </script>4. Mengaktifkan validasi Pengetikan di antara <script></script>, ketik script di bawah ini. $(document).ready(function(){ $("#form1").validate( { Untuk tahap 5 }); });5. Mengecek ada tidaknya text di dalam suatu form Pengetikan di antara $("#form1").validate, ketik scipt di bawah ini. [Computer and Communication] | JQuery 19
  20. 20. Rules : //Aturan { nama: "required", username: "required", } Message: //Pesan yang akan muncul { nama: { required: . Nama harus di isi }, username: { required: . Username harus di isi }, } success: //Jika berhasil { function(label) { label.text(OK!).addClass(valid); } }6. Mengatur password Buat form password dan ulang password. Letakkan scipt di bawah form Nama. Password : <input name="password" id="password" type="password"><br> Ulang Password : <input name="cpassword" id="cpassword" type="password"><br>7. Memvalidasi panjang form password dan form ulang password yang harus sama dengan password. Tambahkan scipt di bawah ini di dalam rules, message. Rules : { password: { required: true, minlength: 8 }, cpassword:{ required: true, equalTo: "#password" }, } message : { password: { required : . Password harus di isi, minlength: . Password minimal 8 karakter }, cpassword: { required: . Ulangi Password harus di isi, equalTo : . Isinya harus sama dengan Password }, } [Computer and Communication] | JQuery 20
  21. 21. 8. Mengatur email dan telepon Tambahkan form email dan telepon. Email : <input name="email" id="email" type="text"><br> Telepon : <input name="telp" id="telp" type="text"> <br> 9. Mengatur validasinya. Tambahkan scipt di bawah ini di dalam rules, message. Rules : { email: { required: true, email: true }, telp: { required: true, number: true }, } mesage : { email: { required: . Email harus di isi, email : . Email harus valid }, telp: { required: . telepon harus di isi, number : . Hanya boleh di isi Angka }, } 3. Slideshow Slideshow merupakan suatu plugin aplikasi yang sering kita jumpai di web berita akhir-akhir ini. Dengan menampilkan slideshow, user mungkin akan lebih tertarik untuk melihatnyadari pada informasi tulisan berjalan saja. Karena dengan adanya slideshow suatu informasidapat dilihat lebih oleh user. Karena animasi yang dikemas dalam slideshow itu biasanyadisertai gambar yang menarik. Kegunaan slideshow selain untuk memberikan flash news padahalaman web berita, juga digunakan untuk image gallery. Dengan adanya slideshow ini usertidak harus menekan tombol next untuk melihat foto selanjutnya akan tetapi akan berubahsecara otomatis berdasarkan setingan waktu pada slideshow tersebut. [Computer and Communication] | JQuery 21
  22. 22. Untuk membuat slideshow skill yang dibutuhkan adalah HTML,CSS,Javascript danFramework Jquery. Untuk HTML sendiri, temen-temen cukup harus paham membuat TAGHTML yaitu DIV,IMG dan Anchor. Kemudian temen-temen harus mengerti juga masalah CSS.Nah yang ini penting, karena CSS ini yang akan menentukan tampilan dari plugins yang akankita buat. Jika kita salah dalam mendesai css. Bisa saja plugins yang kita buat tidak sesuaidengan yang kita harapkan. Karena css ini menurut penulis adalah komponen yang pembacaharus benar-benar pahami. Kemudian selanjutnya adalah javascrip, javascript disini temen-temen diharapkan cukupmengerti cara penggunaan function, variable, pendefinisian suatu variabel dan event objectsaja. Kemudian adalah framework Jquery. Framework jQuery ini memang utama dari pelatihanini, akan tetapi jquery yang kita gunakan disini tidak begitu rumit. Semoga saja bisa dicernadengan mudah dan dapat dipahami secara jelas. 1. pelathihan1 Pada pelathian yang pertama ini, kita akan belajar menggunakan function,variable dan pendefinisian object. Pelathian1.html <html> <head> <script type="text/javascript" src="jquery-1.4.js"></script> <script> function coba(x,y){ var kata=(x!=)?x:tidak ada kata-kata; var selector=y; jQuery(selector).text(kata); } </script></head> <body> <a id="tombol" href="javascript:;" onclick="coba(TERKIRIM,#tombol)">KLIK</a> </body> </html> [Computer and Communication] | JQuery 22
  23. 23. Pada script diatas maka akan tampil seperti berikut. Sebelum diklick Sesudah diklickGambar diatas menujukan sebelum dan sesudah gambar tersbut diclick maka akan muncultulisan tersebut.<a id="tombol" href="javascript:;" onclick="coba(TERKIRIM,#tombol)">KLIK</a>Script yang membuat tampilan berubah saat diclick adalah element dari tulisan yang berwarnamerah. Script tersebut sering dituliskan atau dikatakan sebagai event. Dan untuk script yangberwarna hijau memberikan definisi id untuk selector dari link tersebut. Sehingga tag HTML inilah yang nanti akan menjadi target. Kemudian saat kita click maka script diatas maka akanmecari function javascript yang bernama coba dengan argument ‘terkirim’ dan ‘#tombol’.Kemudian kedua argument tersebut akan menjalankan sesuai perintahnya yang berada padafunction coba. Dimana didalam function coba terdapat perintah berikut: function coba(x,y){ var kata=(x!=)?x:tidak ada kata-kata; var selector=y; jQuery(selector).text(kata); } [Computer and Communication] | JQuery 23
  24. 24. Yang mana argument x=’terkirim’ dan y=’#tombol’ , kemudian untuk membaca baris selanjutnya yaitu var kata=(x!=)?x:tidak ada kata-kata;Maka var kata akan bernilai =x jika x!=’’ dan akan bernilai ‘tidak ada kata-kata’ jika tidakmemenuhi x!=’’. maka jika program itu dijalankan akan bernilai var kata=’terkirim’ karenax=’terkirim’. Kemudian var selector=’#tombol’ . kemudian untuk line yang terakhir akan bernilaiseperti berikut jQuery(‘#tombol’).text(‘terkirim’); yang artinya adalah akan mengubah text padatag HTML yang memiliki id = tombol.Note : var artinya adalaha pendifinisian suatu variable.Saya kira belajar function dijavascript dan jQuery sudah cukup. Maka kita lanjutkan saja keprogram utamanya. Mari kita tulis script berikut<style>#kotak_foto{ position:relative; width:400px; margin:0 auto; background-color:#F0F0F0; border:1px solid #666666; height:360px;}#foto{ margin:5px;}#foto img{ width:390px; height:350px;}#tombol a{ float:left; padding:5px; width:15px; text-align:center; font-weight:bold; font-family:Arial, Helvetica, sans-serif; text-decoration:none; margin-left:2px; background-color:#FF0000; color:#FFFFFF;} [Computer and Communication] | JQuery 24
  25. 25. #tombol{ position:absolute; bottom:5px; margin-right:2px; right:5px;}</style><div id="kotak_foto"> <div id="foto"> <div id="gambar1"><img src="Copy of 26052011(002).jpg"/></div> <div style="display:none" id="gambar2"><img src="Copy ofDSC_0051.JPG" /></div> <div style="display:none" id="gambar3"><img src="Copy ofDSC_0133.JPG" /></div> </div> <div id="tombol"><a id="pertama" href="javascript:;">1</a><a href=" javascript:;">2</a><a href="#">3</a></div></div>Maka tampilanya akan seperti gambar berikut [Computer and Communication] | JQuery 25
  26. 26. Maka jika kita bedah tampilan jadinya akan kita tunjukan dengan prototype yang digambarkan di bawah position:relative;width:400px; #kotak_foto margin:0 auto;background- GAMBAR IMAGE color:#F0F0F0;border:1px solid #666666; height:360px; #foto Margin:5px; position:absolute; #tombol bottom:5px; margin-right:2px; right:5px;Kemudian jika kita lanjutkan untuk penulisan program jQuery-nya maka yang pertama kita buat adalahmembuat trigger di html dan pada .ready jQuery-nya. Sehingga menjadi seperti ini.<script src="jquery-1.4.js" type="text/javascript"></script><script> jQuery(document).ready(function(){ mainkan(#pertama,#gambar1); });</script><div id="kotak_foto"> <div id="foto"> <div id="gambar1"><img src="Copy of 26052011(002).jpg"/></div> <div style="display:none" id="gambar2"><img src="Copy ofDSC_0051.JPG" /></div> <div style="display:none" id="gambar3"><img src="Copy ofDSC_0133.JPG" /></div> </div> <div id="tombol"><a id="pertama" href="javascript:;" onclick=”mainkan(this,’#gambar1’)”>1</a><a href=" javascript:;" onclick=”mainkan(this,’#gambar2’)”>2</a><a href="javascript:;" onclick=”mainkan(this,’#gambar3’)”>3</a></div></div>Jika sudah kita buat maka trigger sudah siap kita buat, maka sekarang adalah membuat fungsisaat trigger itu berjalan. [Computer and Communication] | JQuery 26
  27. 27. Nama fungsi-nya sudah di buat yatu dengan nama mainkan(argument1,argument2). Kemudiankita tambahkan saja fungsinya sehingga sintaxnya menjadi seperti ini.<script> var timer=null; function mainkan(tombol,gambar){ jQuery(#tombol a).each(function(){ jQuery(this).css({background-color:white,color:black}); }); jQuery(#foto div).hide(); jQuery(gambar).fadeIn(slow); jQuery(tombol).css({background-color:red,color:white}); if(timer!=null){clearTimeout(timer);} timer=setTimeout(function(){ varnextanchor=(jQuery(tombol).next(a).text()==)?jQuery(a#pertama):jQuery(tombol).next(a); nextanchor.click(); },3000); } jQuery(document).ready(function(){ mainkan(#pertama,#gambar1); });</script> [Computer and Communication] | JQuery 27
  28. 28. Sehingga tulisan script lengkapnya akan menjadi seperti ini.<html><head><title>Untitled Document</title><script src="jquery-1.4.js" type="text/javascript"></script><script>var timer=null; function mainkan(tombol,gambar){ jQuery(#tombol a).each(function(){ jQuery(this).css({background-color:white,color:black}); }); jQuery(#foto div).hide(); jQuery(gambar).fadeIn(slow); jQuery(tombol).css({background-color:red,color:white}); if(timer!=null){clearTimeout(timer);} timer=setTimeout(function(){varnextanchor=(jQuery(tombol).next(a).text()==)?jQuery(a#pertama):jQuery(tombol).next(a); nextanchor.click(); },3000); } jQuery(document).ready(function(){ mainkan(#pertama,#gambar1); });</script><style> #kotak_foto{ position:relative; margin:20px auto; border:1px solid #666666; padding:5px; width:400px; } #foto img{ width:400px; } #tombol{ bottom:20px; right:25px; position:absolute; } #tombol a{ border-radius:5px; font-weight:bold; text-decoration:none; color:#000000; [Computer and Communication] | JQuery 28
  29. 29. background-color:#FFFFFF; padding:5px; }</style></head><body><div id="kotak_foto"> <div id="foto"> <div id="gambar1"><img src="Copy of 26052011(002).jpg" /></div> <div style="display:none" id="gambar2"><img src="Copy ofDSC_0051.jpg" /></div> <div style="display:none" id="gambar3"><img src="Copy ofDSC_0133.jpg" /></div> </div> <div id="tombol"> <a href="javascript:;" onclick="mainkan(this,#gambar1)"id="pertama">1</a> <a href="javascript:;" onclick="mainkan(this,#gambar2)">2</a> <a href="javascript:;" onclick="mainkan(this,#gambar3)">3</a> </div></div></body></html>Maka tampilan jadinya akan seperti ini. [Computer and Communication] | JQuery 29

×