AJAX dengan jquery Part 3

AJAX dengan jQuery Part 3 Oleh: Cecep Yusuf

Pada tutorial ini, kita akan belajar bagaimana mengirim data POST dari sebuah form dan dikirim dengan metode AJAX post dengan menggunakan jQuery.

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 , , dan 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:

Form Registrasi

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 : <style> form > div{ border-bottom: 1px solid #eee; margin-bottom: 10px; } form label{ display: block; }

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:

Nama Lengkap:
Alamat:
E-Mail:
Jenis Kelamin:

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 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); } }); }); }); 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, http://localhost/ajax/registrasi.html.

Kode Lengkap

kamu

bisa

buka

link

ini:

Males mempelajari? Ya udah, saya kasih kode lengkapnya deh, hehe... registrasi.html <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"> <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); } }); }); }); <style> form > div{ border-bottom: 1px solid #eee; margin-bottom: 10px; } form label{ display: block; }

Form Registrasi

registrasi_ajax.php

Nama Lengkap:
Alamat:
E-Mail:
Jenis Kelamin:

OK selamat mencoba mencoba sahabat2 JACO... Untuk pertanyaan dkk, silakan komentar aja :) ~ [email protected] Stand By With Me, [email protected]

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