Membuat Login Pop Up Dengan JqueryUI Oleh: Dadan Berawal dari maraknya tayangan goyang di telivisi. Terinspirasi juga untuk membuat efek goyang pada website saya. Hehe kagak nyambung nih ilustrasi ceritanya :D. Tapi yah memang kali ini pembahasannya tidak akan jauh dari kata goyang. Masa sih? Iya lah, pada kali ini saya akan menunjukan bahwa tak hanya ma... Berawal dari maraknya tayangan goyang di telivisi. Terinspirasi juga untuk membuat efek goyang pada website saya. Hehe kagak nyambung nih ilustrasi ceritanya :D. Tapi yah memang kali ini pembahasannya tidak akan jauh dari kata goyang. Masa sih? Iya lah, pada kali ini saya akan menunjukan bahwa tak hanya manusia aja yang bisa goyang. Tapi form login pada website bisa di buat goyang. Penasaran kan? (biasa aja tuh -_-) Sebelum mengikuti panduan ini, diharapkan Anda sudah mengerti dasar-dasar tentang html,css, dan Jquery. Bagi yang belum monggo belajar dulu daripada bingung di tengah-tengah. :D Kalau Anda ingin membuat pengunjung website sedikit terkesima, salah satu cara dengan membuat login popup bergoyang. Keuntungan dari membuat login pop-up ini adalah website Anda akan terlihat atraktif di mata pengunjung. Selain itu dengan login pop-up fokus mata pengunjung akan lebih meningkat ke tengah layar sehingga memudahkan pengunjung untuk mengisi form login. Yah, itulah pada topik kali ini saya akan membahas tentang login pop-up. Anda sebenarnya bisa membuat pop menggunakan tekhnik CSS. Namun kekurangannya kalau CSS tidak bisa di animasikan. Biar bisa di animasikan kita harus memakai Jquery-UI agar pop-up loginnya bisa di beri
efek animasi ketika di buka maupun di tutup. Bagi Anda yang sudah menggunakan Jquery-UI pasti sudah tahu cara menggunakan widget dialog pop up. Namun widget dialog default yang di sediakan oleh Jquery-UI kesannya hanya standar saja. Sedangkan kita inginnya biar lebih atraktif gitu. He-he Pertama-tama silahkan Anda cari desain form login kesukaan Anda di internet. Kalau Saya baru saja mendapat desin form login dari internet yang gambarnya seperti ini Desain diatas saya dapatkan dari link ini. Anda juga bisa mendapatkan desain login lainnya dari link itu. Mumpung Gratis J WUIh, keren juga kalau desain diatas bisa di pop up animasi bergoyang dengan Jquery UI. Hanya saja bagaimana caranya? Ternyata caranya hanya dengan menambah script Jquery-UI dan beberapa kode CSS untuk mengkaburkan halaman utama. Dalam hal ini kita mesti teliti dalam menambah kode CSS yang akan di timpa dan tahu selector mana yang harus di sesuaikan. Berikut ringkasan langkah-langkahnya jika Anda sudah mendapatkan desain login Anda sendiri : 1. 2. 3. 4. 5. Sisipkan style class gelap Tambahkan script Jquery dan Jquery-UI Bungkus kode login-form dengan tag div Tambahkan tombol pemicu agar form login muncul. Buat kode inti Jquery UI Bagi yang mau coba silahkan di download dulu bahan-bahannya disini. Oke, setelah bahan-bahannya sudah siap bisa Anda lihat di folder login-form-paper-style, di situ ada file HTML dengan nama yang sama. Lihat index.html Buka file utama desain loginnya yang bernama index.html Pertama-tama kita siapkan dulu layar hitamnya (wuih serem). Maksudnya tambahkan kode CSS berikut sebelum tag </style>.gelap{display: none;
background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.8; z-index: 999;} Kode diatas ibarat lampu redup. Tahu kan kalau kita nonton bioskop ketika film di mulai, semua lampu pada mati kecuali layar. Nah kode diatas gunanya seperti itu, dia berguna mematikan semua lampu agar nanti mata pengunjung bisa nyaman ke pop-up login kita. Lalu tambahkan kode untuk menyisipkan file Jquery.js dan Jquery-UI.js pada bagian head. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> Selanjutnya kita bungkus div container login dengan kode <div id=dialog-login> setelah tag pembuka < body>. Lalu tutup dengan tag </div> sebelum tag </body>. Maksudnya untuk apa sih kita menambahkan div ini? Begini, nantinya div dialog-login ini akan kita tambahkan atribut style yang valuenya sebagai berikut style="display:none; margin:0 auto; z-index: 99999; position:relative;" nah jadi atribut diatas kita tambahkan ke div dialog login sehingga akan seperti ini <div id=dialog-login style="display:none; margin:0 auto; z-index: 99999; position:fixed;"> Kalau Anda menjalankannya dengan benar maka form loginnya akan hilang karena efek dari atribut style tadi. Lalu kita tambah sebuah tombol ber ID bukalogin sebagai pemicu agar dialog loginnya terbuka Taruh kode berikut pada sebelum tag </body> <button id="bukalogin">buka login</button> Silahkan klik tombol buka login, maka tampilannya akan seperti ini
Button di atas akan bertindak sebagai pemicu ledakan bergoyang. Hehe, jadi ketika itu di klik akan keluar deh efek pop-up login bergoyangnya. Namun sekarang kalau Anda klik belum akan terjadi apa-apa. Sabar yah!! Oke terakhir silahkan tambahkan kode berikut persis sebelum tag </body> <script type="text/javascript"> $("#bukalogin" ).click(function() { $('body').append('<div class="gelap"></div>'); $('.gelap').fadein(300); $("#utama" ).show( "bounce", 3000 ); }); $("#tutup" ).click(function() { $("#utama" ).hide( "bounce", 3000 ); $('.gelap').fadeout(300); }); </script> Bagi Anda yang pernah menggunakan Jquery-UI pasti sudah tahu kode diatas. Yah, kode diatas adalah kode inti untuk menjalankan efek dialog pop-upnya. Biasanya kalau dulu kode ini di tempatkannya pada bagian head. Namun zaman sekarang penempatannya memang harus di dalam tag body agar kodenya dapat berjalan. Juga penempatannya harus setelah kode form login juga yah. Sekarang bisa Anda test lagi di browser. Jangan lupa jalani ritual refresh browser dulu agar efeknya jalan. Kode diatas di bagi dalam dua bagian besar, yakni ketika tombol link di klik dan tombol close dialog
pop up di klik. Biar lebih afdol akan saya jelaskan beberapa bagian kode tersebut. Tapi bagian kode yang penting saja, sisanya walau tanpa penjelasan itu tetap di tulis. $("#bukalogin" ).click(function() { Kode diatas memberi tahu kalau elemen ber id bukalogin(dalam hal ini tag button) di klik akan menjalankan perintah selanjutnya. $('body').append('<div class="gelap"></div>'); Perintah diatas untuk mempersiapkan layar hitam untuk menimpa elemen body. $('.gelap').fadein(300); Perintah untuk memunculkan layar hitam $("#utama" ).show( "bounce", 3000 ); Perintah untuk menampilkan form pop-up login $("#tutup" ).click(function() {{ kode diatas menunjukan kalau elemen ber id tutup(dalam hal initulisan tutup) di klik akan menjalankan perintah selanjutnya. $("#utama" ).hide( "bounce", 3000 ); perintah untuk menyembunyikan layar hitam $('.gelap').fadeout(300); -perintah untuk menyembunyikan pop-up login Silahkan coba saja di browser. Bagaimana hasilnya? Benarkan kan efeknya bergoyang. Kenapa bisa bergoyang? Jawabannya terletak pada kode $("#utama" ).show( "bounce", 3000 ); dan $("#utama" ).hide( "bounce", 3000 );
Lihat pada ketikan show dan hide saya menggunakan efek yang sama yaitu bounce. Pada tulisan bounce sebenarnya bisa Anda ubah dengan efek lainnya. Efek lainnya yang tersedia seperti Blind, clip, drop, explode, fade, fold, highlight, puff, dll. Lengkapnya Anda bisa cek efek-efek yang tersedia pada situs Jquery UI. Terakhir bagaimana nih cara balikin lagi? Gak mungkin kan kalau di munculin terus-terusin. Biasanya kalau sebuah pop-up itu ada tombol closenya. Berhubungan ini kita buat dari nol, kita buat sendiri saja. Kalau di form login yang sedang saya gunakan, saya tinggal mengubah tulisan link Download menjadi Tutup dan menambahkan id CSS tutup sebagai pemicu. Berikut kodenya sebelumnya <a href="#">download source file</a> Diubah menjadi <a id="tutup" href="#">tutup</a> Nah seperti itulah jadinya. Apa yang sudah saya sampaikan adalah dasarnya. Anda kembangkan lebih lanjut sesuai kebutuhan. Jika Ada yang ingin berkonsultasi lebih lanjut silahkan komentar aja. Jangan lupa halaman ini di bookmark yah. :) Tentang Penulis Dadan Saya adalah pria biasa saja yang tumbuh semakin besar di lingkungan yang serba biasa, Semoga kehadiran saya disini bisa membantu Anda. ^_^