Belajar Ajax dengan jQuery, Simple Project

Dah lama nggak bikin tutorial coding, yok mari belajar ajax dengan jquery? Eittzz, sebelumnya sudah pada tahu belum ajax itu apa??

Nih sedikit kutipan dari wikipedia:

 

Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability. Selengkapnya Lha terus? jQuery itu apa?

Nah, ini sedikit contekan dari wikipedia lagi:

jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan GPL. Selengkapnya  

Lha terus itu fungsinya buat apa?

sek sek,, tunggu sebentar,, pernah pesbukan (main facebook), twitter, koprol atau socmed lainya? nah itu rata rata memakai ajax. mungkin kita tidak sadar akan adanya fungsi ajax, cir ciri web yang memakai ajax adalah sedikit reload halaman.

Oke sekarang kita mulai menulis skript2 aneh yang bikin pusing… nggak juga kok :lagi lebay: =))

sebenarnya kalau belajar ajax mentahan (tanpa jquery) mungkin agak belimet, soalnya harus sedikit menguasai xml (menurut saya sih, soalnya belum coba juga ;)) ). untung ada jQuery yang akan memudahkan coding kita nanti.

kita akan coba buat suatu form yang akan mengirim 2 input data, biasanya kalau cuma html dan php mungkin setelah form kita submit, maka halaman akan melakukan proses dengan load halaman “action” yang di tujukan, kalau halaman “action” adalah diri sendiri maka akan di submit seperti refresh halaman.

contoh form http biasa:

[html] <form action=‘kirim.php’ method=‘post’>

Nama : <input type=‘text’ name=‘nama’><br> Alamat : <input type=‘text’ name=‘alamat’><br> <input type=‘submit’ value=‘Kirim’>

</form>

[/html] Jadinya seperti ini:

Alamat :

Nah, ketika di klik kirim maka browser akan melakukan direct/mengirim data menuju file action. tapi berbeda dengan ajax. ajax akan menghandle pengiriman data tanpa kita sadari bahwa data terkirim ke file action. sebenarnya tetep loading juga, tapi kita tidak tahu. jadi dengan fitur ini kita tidak perlu banyak loading / reload halaman yang akan menghabiskan bandwith.

Berikut script yang akan kita buat eksperiment. ;))

[html]

<script type=‘text/javascript’ src=‘jq.js’></script> <script type=‘text/javascript’> $(document).ready(function(){ $("#panel").hide(); $("#klik").click(function(){ $("#panel").toggle(); }) }) $(document).ready(function(){ //$(function(){

$("#frm-ajax").submit(function(){ $.ajax ({ url:‘kirim.php’, type:‘POST’, data: $(this).serialize(), success: function(data){ $("#panel").show(1000); $("#panel").html(data); //alert(‘adsfasdf’); }

}) }) })

//}) </script> [/html]

*mohon penulisan $.ajax ({ harap di gandeng (tanpa spasi) soalnya bentrok sama emoticon x( kalau langsung saya tulis gandeng di sini.. hehe

Skrip berikut menandakan bahwa saya mengambil/me-linkkan halaman saya dengan script jquery.js yang saya rename menjadi jq.js, script library dapat di download di sini: http://docs.jquery.com/Downloading_jQuery [html]<script type=‘text/javascript’ src=‘jq.js’></script>[/html]

Selanjutnya:

[html]

<b id=‘klik’>Toogle</b> <div id=‘panel’ style=‘background-color: green; padding: 10px;'>Disini hasil akan di munculkan, tapi di sembunyikan jQuery saat load halaman</div> <hr> <form id=‘frm-ajax’ onsubmit=‘return false’> Nama : <input type=‘text’ name=‘nama’><br> Alamat : <input type=‘text’ name=‘alamat’><br> <input type=‘submit’ value=‘Kirim’> </form> [/html]

Scritp di atas di tulis di satu file misal **index.php **dan jadikan satu dengan file **jquery.js **selanjutnya kita buat file pemroses datanya.

[php]

<?php echo “Nama : “.$_POST[‘nama’]."<br>Alamat : “.$_POST[‘alamat’]."<br>Berhasil di Simpan !!"; ?> [/php]

Simpan file tersebut dengan nama **kirim.php **atau dapat di sesuaikan dengan keinginan masing masing. jadi dalam satu folder nanti ada 3 file, yaitu file yang berisi form, file library jquery, dan file pemroses data. kalau punya saya nama filenya adalah: index.php, kirim.php, jq.js

Nah, di dalam file kirim tersebut dapat di ubah logikanya, misal di simpan ke database dan sebagainya. kalau males copas/nulis, dapat donlot project saya yang dia tas: https://suciptoblog.files.wordpress.com/2012/06/jquery-sucipto-net.odt  *file ekstensi **.odt di rename menjadi ** .zip terlebih dahuulu.. hehe =))