Memperindah tampilan Form dengan Ajax menggunakan Jquery

Ngak terasa neh dah lama ngak ngeupdate blog, apa karena ane orang sibuk kali ya, wkwkwkwkwkwk :p Ya udah pada postingan kali ini saya akan memperkenalkan penggunaan ajax kepada teman” sekalian. Nah bagi yang belum tau apa itu ajax, cekidot yg satu ini. 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. (http://id.wikipedia.org/wiki/AJAX). Nah udah pada tau kan apa itu Ajax, sekarang mari kita bahas penggunaanya, kali ini saya akan menggunakan Ajax untuk memperindah tampilan program input berita.

File – file yang nanti akan kita butuhkan adalah :

  • config.php => file untuk koneksi ke databasenya
  • input_form_ajax.html => file untuk menginput data yg sudah diperindah dengan file jquery
  • jquery-1.2.3.min.js => file ajax untuk memperindah tampilan formnya
  • koneksi.php => file yg memproses penginputan data ke dalam database

Download semua file diatas disini, lalu ekstrak di direktori c:\xampp\htdocs\, yg natinya direktori file tersebut menjadi seperti ini  c:\xampp\htdocs\ajax\. Ok persiapan udah mantap😉 sekarang tinggal proses pengeksekusiannya, ini dia langkah – langkah membuat formnya :

1. Pertama kita mesti membuat database dulu, untuk membuat database pastikan kamu telah menginstall xampp atau wamp. Kalau belum diinstal download dulu xampp disini. Kalau udah diinstal jalankan xamppnya, buka browser kamu lalu masukkan url http://localhost/phpmyadmin/, kemudian buat sebuah database bernama “berita“.

2. Lalu buat sebuah tabel bernama ajaxform dengan jumlah field sebanyak 3.

3. Kemudian atur table ajaxformnya sesuai tampilan berikut :

4. Nah persiapan databasenya udah, sekarang tinggal membuat file config.php, agar bisa melakukan koneksi ke database. Silahkan edit filenya sesuaikan dengan pengaturan database kamu.


<?php
$my['host'] = "localhost";
$my['user'] = "root";
$my['pass'] = "";/* isi dengan password database kamu */
$my['dbs'] = "berita";

$koneksi = mysql_connect($my['host'], $my['user'], $my['pass']);
if (!$koneksi) {
 echo "Gagal koneksi bos !!!";
 mysql_error();
}

mysql_select_db($my['dbs'])
 or die ("Databasenya ngak ada bos !!!".mysql_error());

?>

5. Sekarang kita coba jalankan filenya, buka http://localhost/ajax/input_form_ajax.html, nanti tampilannya seperti ini :

6. Coba masukkan sembarang data lalu klik simpan, maka fungsi ajaxnya akan keluar sehingga tampilannya menjadi seperti ini

Gimana bagus bukan tampilannya ? bagi kamu web designer yg ingin mempercatik web kamu, tidak ada salahnya mencobanya, akhir kata saya ucapkan Semoga tidak berhasil ya, supaya kamu mampir lagi di blog ane, wkwkwkwkwk🙂

2 comments on “Memperindah tampilan Form dengan Ajax menggunakan Jquery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s