AJAX dengan jquery Part 2 Oleh: Cecep Yusuf Kita akan belajar bagaimana cara membuat AJAX dengan response data HTML memakai metode GET dan dimasukkan ke dalam elemen yang ditentukan pada halaman utama. Oke kali ini saya akan melanjutkan tutorial yang dipublish beberapa hari yang lalu tentang AJAX dengan jquery. Tutorial AJAX dengan jquery Part 1 menjelaskan bagaimana ajax bekerja dan mempraktikan membuat aplikasi request sederhana dengan menggunakan metode AJAX. Sebelum masuk pada tutorial JSON, maka pada tutorial lanjutan ini kita akan sama-sama belajar bagaimana cara membuat request dengan respon berupa data HTML dengan metode GET dan dimasukkan ke dalam elemen yang ditentukan pada halaman utama beserta contoh parsing variable dari server ke client (halaman utama html). Membuat Halaman Client Pastikan server sudah dijalankan dengan benar, setelah itu maka buatlah sebuah halaman HTML yang berisi kode-kode HTML seperti di bawah ini: <!DOCTYPE html> <html> <head> <title>contoh AJAX 2 - Response HTML</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <body> <button id="tombol">klik di sini!</button> <div id="tampilan"></div> </body> </html> Simpan file tersebut dengan nama client.html dan simpen di folder /htdocs/ajax/ Maka hasilnya setelah kita lihat di browser (localhost/ajax/client.html) adalah terdapat sebuah tombol bertulisan "Klik di sini!", seperti di bawah ini: Klik di sini!
Membuat Halaman Server Nah, kita ingin mendapatkan data html dari server dan data tersebut dimasukkan ke dalam div yang mempunyai id="tampilan". Sebelumnya kita buat terlebih dahulu file server.php dan simpan di dalam direktori yang sama, yaitu /htdocs/ajax/ Isikan file server.php tersebut dengan kode di bawah ini: <?php $nama = 'Cecep Yusuf'; $alamat = 'Jakarta'; $pekerjaan = 'Programmer';?> <table> <td>nama Lengkap:</td> <td><?php echo $nama?></td> <td>alamat:</td> <td><?php echo $alamat?></td> <td>pekerjaan:</td> <td><?php echo $pekerjaan?></td> </table> File tersebut berisi contoh html yaitu tabel yang membentuk detail dari profil sederhana seseorang. Nantinya, profil ini akan muncul di client dan dimasukkan ke dalam div yang idnya "tampilan". Cara meload data tersebut ketika tombol diklik adalah dengan menggunakan javascript di bawah ini dan diletakkan sebelum tag </head>: <script> $().ready(function(){ $('#tombol').click(function(){ $.ajax({ url: 'server.php', success: function(html){ $('#tampilan').html(html); } </script> arti script di atas adalah:
Ketika ready/html telah semua terload, maka deklarasikan bahwa jika button yang mempunyai id="tombol" diklik, maka program akan melakukan proses HTTP request kepada file server.php. Setelah request sukses dan berjalan dengan baik, maka ambil semua isi html dari server dan masukkan ke dalam div yang mempunyai id="tampilan". Untuk mencobanya, silakan buka http://localhost/ajax/client.html dan coba klik tombolnya. Maka yang terjadi kini si div kosong tersebut (tampilan) akan terisi oleh table yang didefinisikan di server.php. Nah, sekarang kita akan belajar bagaimana server mengambil data dari client, yang kemudian data tersebut diolah diserver dan dikirim balik ke client dengan hasil olahan data tersebut? Simpelnya, variable nama, alamat, dan pekerjaan kita tentukan di client memakai javascript. Langkah yang harus dilakukan adalah dengan menambahkan option/atribut data yang mana berisi nilai data yang akan dikirim ke server. Type request adalah get, tambahkan juga atribut type, isikan dengan get. Data berbentuk Javascript annotation atau bisa berupa query string. Contoh kodenya: <script> $().ready(function(){ $('#tombol').click(function(){ $.ajax({ url: 'server.php', type: 'get', data: { nama: "Cecep Yusuf", alamat: "Jakarta", pekerjaan: "Programmer" }, success: function(html){ $('#tampilan').html(html); } </script> Kemudian, di server.php isikan kode HTML dan PHP berikut ini: <table> <td>nama Lengkap:</td> <td><?php echo $_GET['nama']?></td> <td>alamat:</td> <td><?php echo $_GET['alamat']?></td> <td>pekerjaan:</td> <td><?php echo $_GET['pekerjaan']?></td>
</table> Di server ada perubahan dibandingkan dengan isi kode sebelumnya. Jika tadi kita mengambil variable dari file server.php itu sendiri, kali ini data diambil dari client.php dengan menggunakan javascript. Kemudian setelah itu, di server kita menggunakan $_GET yang artinya mengambil data dari request GET. Hasil akhir, coba refresh halaman client.html dan klik tombolnya. Apa yang terjadi? Yup, hasil yang sama. Bedanya adalah, kita bisa menentukan nilai berdasarkan permintaan dari client.. Biasanya data diterapkan pada form-form yang ada yang kemudian nanti server akan menangkap data tersebut dan diolah, dijadikan timbal balik HTML di client.html Kode lengkap: client.html <!DOCTYPE html> <html> <head> <title>contoh AJAX 2 - Response HTML</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $().ready(function(){ $('#tombol').click(function(){ $.ajax({ url: 'server.php', type: 'get', data: { nama: "Cecep Yusuf", alamat: "Jakarta", pekerjaan: "Programmer" }, success: function(html){ $('#tampilan').html(html); } </script> </head> <body> <button id="tombol">klik di sini!</button> <div id="tampilan"></div> </body> </html> server.php
<table> <td>nama Lengkap:</td> <td><?php echo $_GET['nama']?></td> <td>alamat:</td> <td><?php echo $_GET['alamat']?></td> <td>pekerjaan:</td> <td><?php echo $_GET['pekerjaan']?></td> </table> OK selamat mencoba mencoba sahabat2 JACO... Untuk pertanyaan dkk, silakan komentar aja :) ~ cheyuz@jagocoding.com Stand By With Me, cheyuz@jagocoding.com Tentang Penulis Cecep Yusuf Hi, my name is Cecep Yusuf. However, in the virtual world I am more likely to use the name Cheyuz, which is an abbreviation of two words "Cecep" and "Yusuf". I am founder of Jagocoding.com, u can view more of me in Cheyuz.com