Latar Belakang :

Saya coba memahami dan mempelajari tentang AJAX, dan hasilnya saya tuliskan kembali dalam Blog ini.

Tutorial ini saya akan membahas tentang pencarian kata (search) dengan menggunakan AJAX, PHP, dan MySQL dalam sebuah kasus bukutamu.

Adapun cara kerja dari aplikasi ini adalah :

1. User menginput kata yang dicari.
2. Dengan “event handling” à onkeyup, setiap user memasukan kata, maka program akan menjalankan fungsi pencarian.
3. Hasil pencarian akan ditampilkan dalam table.

File-file yang dibutuhkan :

Dalam membuat aplikasi ini ada beberapa file yang dibutuhkan yaitu :

1. index.php berisi form untuk memasukan kata yang dicari.
2. ajax.js berisi fungsi untuk membuat koneksi asynchronous dengan server.
3. proses.php berfungsi untuk memproses kata yang dicari dan menampilkannya kembali ke halaman (file) index.php.

Pertanyaan :

Bagaimana cara ajax menampilkan data yang sudah di proses ke dalam halaman utama aplikasi??

Cari disini :

ajax menampilkan data hasil proses ke dalam tag yang sudah di definisikan didalam halaman utama aplikasi yaitu  

. dan tag tersebut sudah dicantumkan didalam file ajax yaitu             var obj=document.getElementById(“pencarian”);

Konsepku :

Dari penjelasan diatas dapat diketahui alurnya adalah :

Index.php ———–ajax.js ———-proses.php

1. Dimana, file index.php mengirim data melalui file ajax.js (tanpa melakukan refresh halaman).
2. File ajax.js meneruskan pengiriman data dengan tujuan file proses.php
3. File proses.php mengolah data dan menampilkan data kedalam file index.php dengan bantuan tag
   .

Pencarian Ajax Gambar

http://www.4shared.com/file/cSGN87x3/pencarian_gambar.html

Download file Pencarian PHP Ajax :

http://www.4shared.com/file/210806500/f94a9752/search.html

Referensi Pencarian PHP biasa :

http://www.4shared.com/file/QaN7abkl/pencarian.html

Demo :

http://labhouse.co.cc/index.php?page=search

Sekian tutorial dari saya yang ngalor-ngidul. Semoga Anda tidak tambah pusing dengan penjelasan tentang AJAX dari saya  . Dan kurang lebihnya saya ucapkan terimakasih, semoga tutorial ini berguna untuk Anda 

Membuat Shoutbox dengan AJAX

Fungsi :

Aplikasi berbasis AJAX yang digunakan sebagai shoutbox (seperti bukutamu kecil). Dengan dilengkapi dengan paging..

File-File :

1. Conn.php untuk file koneksi ke database.
2. Style.css untuk manangani tampilan.
3. Ajax.js untuk file ajax, koneksi assyncronous ke server.
4. Index.php untuk tampilan awal aplikasi.
5. Proses.php untuk menyimpan dan menampilkan pesan.

Download

http://www.4shared.com/file/210803656/58c68849/shoutbox.html

Demo

http://labhouse.co.cc

Semoga aplikasi ini bermanfaat untuk Anda dan silahkan di kembangkan demi ilmu pengetahuan.

Membuat Combobox dengan AJAX

Aplikasi AJAX kali ini adalah sebuah combobox dinamis, berdasarkan kategori Fakultas. Jika user memilih Fakultas Teknologi Industri, maka di bagian Jurusannya akan muncul combobox jurusan Teknik Informatika, Teknik Industri, dan Teknik Elektro.

Datanya diambil dari sebuah database “ri32-ajax” dengan tabel-tabel sebagai berikut 

Adapun file-filenya adalah :

1. ajax.js untuk file ajaxnya
2. index.php untuk halaman utamanya.
3. proses.php berhubungan dengan file ajax.js untuk menampilkan jurusan dan menampilkan rincian dari data yang di input user.
4. style.css untuk tampilan halaman.
5. conn.php untuk konfigurasi koneksi php ke database mysql

Download :

http://www.4shared.com/file/218124418/2b61c052/combo.html

Demo :

http://labhouse.co.cc/index.php?page=combo

Semoga turial ini bermanfaat untuk anda…

Membuat Chating LAN dengan AJAX

Tutorial kali ini saya membuat sebuah aplikasi chating via LAN. Konsepnya hampir sama seperti guestbook. Dimana logikanya adalah :

1. User memasukan nama (tidak boleh ada nama yang sama)
2. User masuk ke halaman chating.
3. User menginput pesan.
4. Aplikasi otomatis menampilkan pesan terakhir setiap detik dengan AJAX..
5. Ketika user “keluar”, data chating user tersebut di hapus..
6. Selesai.

Databasenya “chatlan” dengan 2 table yaitu :

Sedangkan file-filenya adalah :

1. Conn.php untuk koneksi database.
2. Index.php untuk halaman utama.
3. Proses.php berhubungan dengan file ajax
4. Ajax-chat.js untuk aplikasi asynchronous nya.
5. Logout.php untu keluar.
6. Chatlan.sql.zip file databasenya yang harus di import.

Download :

http://www.4shared.com/file/222511782/d920bc05/chatlan.html

Semoga artikel ini bermanfaat untuk anda.