Selamat pagi para coders...
Pada tutorial kali ini, kita akan melanjutkan tutorial sebelumnya, yaitu AJAX dengan jQuery Part 2. Pada part 3 ini, kita akan belajar bagaimana mengirim data POST dari sebuah form dan dikirim dengan metode AJAX dengan menggunakan jQuery. Untuk persiapannya, pastikan kamu sudah me-load file jquery di lokal maupun langsung link ke sini: http://code.jquery.com/jquery-1.7.2.min.js (ada di tutorial-tutorial sebelumnya). Jadi untuk tutorial kali ini, diasumsikan bahwa tag <html>, <head>, dan <body> sudah dibuat. Kenapa harus begitu? soalnya biar temen-temen ngikut tutorial dari awal hehe..
Ok langsung aja kita mulai, pertama-tama kita harus membutuhkan sebuah form, form yang akan dipakai sebagai inputan dari data yang akan dimasukkan. Sebenarnya cara untuk membuat form supaya tampil rapi adalah menggunakan table atau menggunakan div. Jika kamu tidak menggunakan CSS, sebetulnya menggunakan table juga bagus, tetapii katanya "table layouting is old school in a website". Jadi, kita pakai div aja, nanti saya buat juga styling sederhana menggunakan CSS untuk form tersebut.
Membuat Halaman Client
Kita buat form registrasi yang berisi nama, alamat, email, dan jenis kelamin. Buatlah kode HTML seperti di bawah ini, dan beri nama registrasi.html:
<h2>Form Registrasi</h2> <div id="container"> <form id="FormInput"> <div> <label>Nama:</label> <input name="nama" /> </div> <div> <label>Alamat:</label> <input name="alamat" /> </div> <div> <label>E-Mail:</label> <input name="email" /> </div> <div> <label>Jenis Kelamin:</label> <select name="jenis_kelamin"> <option value="Pria">Pria</option> <option value="Wanita">Wanita</option> </select> </div> <input type="submit" /> </form> </div>
Browser akan menampilkan sebuah form yang berisi field-field di atas. Untuk jenis kelamin, kita menggunakan select, karena jenis kelamin tidak boleh diisi, harus dipilih. Form di atas berada di dalam div container, div ini tidak akan berisi form tersebut ketika disubmit. Coba lihat baik-baik, bentuk form itu acak2an atau tidak? Yup, pasti acak2an. Oh iya, pada form di atas kita tidak menambahkan atribut method = POST di form, karena kita menentukan itu di jQuerynya. Ok, kita tambahkan terlebih dahulu css internal sederhana seperti di bawah ini, disimpan di dalam <head></head>:
<style>
form > div{
border-bottom: 1px solid #eee;
margin-bottom: 10px;
}
form label{
display: block;
}
</style>
Membuat Kode untuk Server
Ok selanjutnya kita buat sebuah halaman sederhana yang kita letakkan di dalam file php. Copy kode di bawah ini dan beri nama registrasi_ajax.php:
<table> <tr> <td>Nama Lengkap:</td> <td><?php echo $_POST['nama'] ?></td> </tr> <tr> <td>Alamat:</td> <td><?php echo $_POST['alamat'] ?></td> </tr> <tr> <td>E-Mail:</td> <td><?php echo $_POST['email'] ?></td> </tr> <tr> <td>Jenis Kelamin:</td> <td><?php echo $_POST['jenis_kelamin'] ?></td> </tr> </table>
Mirip sama tutorial sebelumnya? Ya, memang cuma diganti pekerjaan dengan E-Mail dan jenis kelamin. Juga diganti metode pengambilan variablenya. Jika tutorial sebelumnya dengan menggunakan metode GET, sekarang kita mulai menggunakan metode POST. Intinya, proses ini adalah proses standar untuk menampilkan variable $_POST, tetapi proses yang dikirimkan melalui HTTP Request (AJAX).
Untuk melakukan request, kita perlu menambahkan jQuery di dalam <head></head> pada file registrasi.html seperti tutorial-tutorial sebelumnya. Silakan copas kode di bawah ini:
<script>
$().ready(function(){
$('#FormInput').submit(function(e){
e.preventDefault();
$.ajax({
'type': 'POST',
'url': 'registrasi_ajax.php',
'data': $(this).serialize(),
'success': function(html){
$('#container').html(html);
}
});
});
});
</script>
Saya akan jelaskan arti dari kode di atas.
preventDefault() berfungsi untuk mencegah supaya form tidak bisa disubmit. Simpelnya/kasarnya, browser 'memblok' submit dari form #FormInput. Setelah diblok, maka selanjutnya perintah ajax pun dilakukan. Kita inisialisasikan bahwa typenya adalah POST, bukan GET. URL yang diisikan adalah registrasi_ajax.php. Untuk data, kita menggunakan serialize(), yang artinya data mengikuti isi inputan dari form tersebut. Jadi kita tidak perlu mendefinisikan setiap field pada sebuah form. Kita cukup menggunakan function serialize(). Kemudian setelah HTTP Request sukses, maka selanjutnya isi dari div yang id-nya container adalah hasil yang dikeluarkan oleh file registrasi_ajax.php, yaitu muncul detail hasil registrasi.
Saya rasa sih cukup. Untuk mencobanya, kamu bisa buka link ini: http://localhost/ajax/registrasi.html.
Kode Lengkap
Males mempelajari? Ya udah, saya kasih kode lengkapnya deh, hehe...
registrasi.html
<!DOCTYPE html>
<html>
<head>
<title>Contoh AJAX 3 - AJAX Post</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$().ready(function(){
$('#FormInput').submit(function(e){
e.preventDefault();
$.ajax({
'type': 'POST',
'url': 'registrasi_ajax.php',
'data': $(this).serialize(),
'success': function(html){
$('#container').html(html);
}
});
});
});
</script>
<style>
form > div{
border-bottom: 1px solid #eee;
margin-bottom: 10px;
}
form label{
display: block;
}
</style>
</head>
<body>
<h2>Form Registrasi</h2>
<div id="container">
<form id="FormInput">
<div>
<label>Nama:</label>
<input name="nama" />
</div>
<div>
<label>Alamat:</label>
<input name="alamat" />
</div>
<div>
<label>E-Mail:</label>
<input name="email" />
</div>
<div>
<label>Jenis Kelamin:</label>
<select name="jenis_kelamin">
<option value="Pria">Pria</option>
<option value="Wanita">Wanita</option>
</select>
</div>
<input type="submit" />
</form>
</div>
</body>
</html>
registrasi_ajax.php
<table> <tr> <td>Nama Lengkap:</td> <td><?php echo $_POST['nama'] ?></td> </tr> <tr> <td>Alamat:</td> <td><?php echo $_POST['alamat'] ?></td> </tr> <tr> <td>E-Mail:</td> <td><?php echo $_POST['email'] ?></td> </tr> <tr> <td>Jenis Kelamin:</td> <td><?php echo $_POST['jenis_kelamin'] ?></td> </tr> </table>
OK selamat mencoba mencoba sahabat2 JACO... Untuk pertanyaan dkk, silakan komentar aja
~ cheyuz@jagocoding.com
Stand By With Me,
cheyuz@jagocoding.com
