Oke. Sebelumnya, saya mau kenalin diri dulu karena ini pos pertama saya di blog ini. Nggak usah disebutkan namanya karena toh nanti di bawah juga ada namanya. Yang jelas, di IT Club mungkin saya hanyalah anak bawang yang nggak bisa apa-apa, cuma asal ngikut aja. Tapi sebisa mungkin saya mau membantu teman-teman yang lagi kesulitan, khususnya para pembaca blog ini.
Nah, di pos pertama saya ini, saya mau bahas seputar jQuery. Saya nulis tentang jQuery ini karena konon katanya, saya itu sedikit ahli di bidang ngeweb. Baik, mungkin langsung saja to the point ya.....
Dikutip dari BNI (Belajar Ngeweb ID) jQuery merupakan kerangka kerja (atau biasa disebut dengan framework) yang dibuat sedemikian rupa agar penggunaan javascript menjadi lebih ringkas dan bisa mengerjakan yang lainnya yang lebih banyak, seperti di motto-nya "write less, do more", kurangi nulis, banyakin tingkah, eh.
Fungsinya jQuery ini sendiri yaitu buat manipulasi konten, memberikan suatu efek dan animasi, dan memroses inputan form menggunakan ajax yang nantinya akan diproses dengan PHP.
Mulai Memakai jQuery
Sebelum menggunakan jQuery, sobat diharuskan untuk memiliki library-nya terlebih dahulu yang bisa diunduh di seberang => http://bangsat-ria.hol.es/url/wy8rw. Jika sudah diunduh, sisipkan dengan tag <script> di bagian <head>. Seperti contoh berikut ini.
<script type="text/javascript" src="jquery.js"></script>
atau
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.js"></script>
atau
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.js"></script>
Pada contoh pertama, value dari src tergantung versi yang mau digunakan. Misalnya mau pakai jquery versi 3.2.0 ya ditulis src="jquery-3.2.0.js". Juga tergantung pada lokasi diletakkan. Contohnya ditaruh di folder inc, nulisnya jadi src="inc/jquery-3.2.0.js".
Setelah jquery berhasil disisipkan dan tidak ada error ketika di Inspect Element. Langkah berikutnya yaitu membuat pembukaan pada jquery agar bisa jalan. Script-nya seperti ini.
<script type="text/javascript">
$(document).ready(function() {
// Kode diletakkan disini
alert('Hai sayang');
});
</script>
$(document).ready(function() {
// Kode diletakkan disini
alert('Hai sayang');
});
</script>
Perlu diingat, agar script bisa berjalan dengan lancar, diperlukan tag pembuka seperti di atas. Harus ada fungsi document ready-nya. Kalau salah penulisan saja, script jQuery tidak akan berjalan seperti yang diharapkan. Kemudian, script jQuery yang akan dijalankan diletakkan di bagian seperti pada komentar.
Memunculkan dan Menghilangkan Elemen dengan jQuery
Seperti yang sudah saya katakan di atas, jQuery ini memiliki fungsi untuk memanipulasi elemen laman web. Yang dimaksud manipulasi ini adalah mengatur konten sesuai yang diinginkan oleh pengguna, apakah ingin ada atau tidak. Jika inginnya elemennya dihilangkan, klik tombol yang sudah dikasih fungsi lalu elemennya hilang. Nah, gitu itu gimana sih? Gini lo script-nya.
$("#tombol").click(function() {
sembunyi("#elemen", 500);
});
sembunyi("#elemen", 500);
});
Sebelum menjalankan script di atas, pastikan jquery dan framework siMery sudah disisipkan. Juga kode diatas berada di dalam pembukaan jQuery. Sekilas mengenai siMery. siMery (singkatan dari simple Menulis jQuery) merupakan sebuah framework-nya jQuery yang bisa semakin memudahkan kita untuk menuliskan jQuery. siMery ini hadir dengan menggunakan bahasa Indonesia. Dan berikut ini adalah cara untuk menyisipkan siMery di laman web sobat.
<script type="text/javascript" src="http://belajarnge.web.id/alat/simery.js"></script>
Untuk sementara ini, fungsi pada framework siMery ini masih sangat sederhana. Fungsi-fungsinya antar lain sebagai berikut.
timbul(selector, waktu); // memunculkan elemen memakai teknik fadeIn();
luntur(selector, waktu); // menghilangkan elemen memakai teknik fadeOut();
geserAt(selector, waktu); // menghilangkan elemen memakai teknik slideUp();
geserBa(selector, waktu); // memunculkan elemen memakai teknik slideDown();
muncul(selector, waktu); // memunculkan elemen memakai metode show();
sembunyi(selector, waktu); // menyembunyikan elemen menggunakan hide();
toggle(selector, waktu); // fungsi toggle();
fdTog(selector, waktu); // fungsi fadeToggle();
slTog(selector, waktu); // fungsi slideToggle();
ajax(pemroses, data); // fungsi mengirimkan inputan form dengan ajax
luntur(selector, waktu); // menghilangkan elemen memakai teknik fadeOut();
geserAt(selector, waktu); // menghilangkan elemen memakai teknik slideUp();
geserBa(selector, waktu); // memunculkan elemen memakai teknik slideDown();
muncul(selector, waktu); // memunculkan elemen memakai metode show();
sembunyi(selector, waktu); // menyembunyikan elemen menggunakan hide();
toggle(selector, waktu); // fungsi toggle();
fdTog(selector, waktu); // fungsi fadeToggle();
slTog(selector, waktu); // fungsi slideToggle();
ajax(pemroses, data); // fungsi mengirimkan inputan form dengan ajax
Untuk penggunaannya sendiri bisa seperti contoh yang ada di atas. Selector ini adalah ID atau class sebuah elemen yang akan diberi fungsi / efek. Jadi, agar work dan fungsinya tidak ngefek pada semua elemen, elemen yang ingin diberi fungsi ini harus dikasih ID atau class yang bisa membedakan dengan elemen yang lainnya.
Memroses Data dengan Ajax
Dengan memakai siMery, kita tidak perlu lagi menuliskan perintah ajax yang terdiri dari sedikitnya 8 baris. Hanya dengan 1 baris yang simpel saja data sudah terkirim di database. Nah, berhubung saya lagi males nulis karena sudah pernah saya tulis, penggunaan ajax memakai siMery ini bisa sobat intip di Tutorial Insert Data Menggunakan Ajax jQuery oleh BNI.
Tidak ada komentar:
Posting Komentar