Membuat Aplikasi Pencarian dengan AJAX



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??

<form>

<b>Cari disini : </b><input type=”text” size=”25″ />

</form>

<br />

<div id=”pencarian”></div>

ajax menampilkan data hasil proses ke dalam tag yang sudah di definisikan didalam halaman utama aplikasi yaitu  <div></div>. dantag 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 <div></div>.

Download

Referensi Buku :

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

Depok, 25 Januari 2010

noname

About these ads

20 Responses

  1. nice posting gan , tapi pada tag input pencarian menurut saya lebih baik ditambahkan atribut autocomplete=”off” gan.

  2. Itu gunanya untuk apa gan??

    udah saya kasih, tapi gak ada bedanya sama aplikasi yang awal!

    mohon pencerahannya :D

  3. hmm…

    klo pencarian di peta menggunakan ajax blh ga???

    trus klo dibikin versi mobilenya boleh ga???

    mohon bimbingannya….

    thanks..

    God Bless…

    • “klo pencarian di peta menggunakan ajax blh ga???”

      boleh kok, emang ini di buatnya pake ajax. kalo versi mobilenya pake J2ME (java midlet)

  4. sip kk, keren tampilannya..
    tp klo kyak d tampilan FB itu sama aj g,,?

  5. emm…sama, yang beda itu mungkin CSS nya biar data hasil pencarian nya ditampilkan di bawah textbox nya. seperti “google suggest”….belum saya coba sech…hehehe :D

    ingsyalloh nanti saya coba…

  6. mas ikut nanya ni,, kalo menampilkan hasil pencariannya dari 2 tabel yang berbeda tapi masih dlam satu dtabase gmn?? aq dah coba tapi lom brhasil,,trims

  7. emm..coba kreza baca2 artikel ini :

    http://blog.rosihanari.net/cara-membuat-query-sql-untuk-relasi-tabel

    bagus, untuk masalah table nya. bisa pakai 2,3 atau lebih tabel. asal sudah paham konsepnya :)

    semangat yach!!!!

  8. Mas mau nanya juga……..
    kalo pencarian peta untuk J2ME gmna ya???
    tolong bantuanya……….

  9. Mas gimana cara’y. waktu pencarian data yg kita cari ada limit’y. pasti perlu paging…..
    n gimana cara’y waktu cari data tang munculnya nya saja tidak , jangan sm .
    artikel’y bermnfaat.
    mohon bantuannya mas.

  10. mas minta tlng dibuatkan tutorial tabel yg ada checkbox ,q mau buat sms broadcast dng gammu sg studi kasusx :
    1. Tabel A terdiri : id_nohp,nama,message.
    tbl B terdiri :destination,messege.
    gimana script php bila tbl A bl di centang akan mengirim data di tbl B dan script php bila tbl A di centang akan terhapus,trim”s ats followupx dan tutorial yang ada di blog ini sangat bagus dan bermanfaat sbg sarana belajar,majuuuuuu truuuus ku tunggu artikel-artikel berikutnya

  11. http://ri32.wordpress.com/2010/06/17/membuat-program-input-dan-delete-data-menggunakan-checkbox-di-php/

  12. mohon solusi buar ada filternya seperti lokasi atau pa gtu dengan radio buton atau drop down ke

  13. thank’s gan atas artikel dan contohnya. saia baru belajar. maju terus gan pantang mundur.he.h.ehe.h :) kayak mau perang yach

  14. Mantap maz artikel nya,
    sudah saya coba berhasil, tapi aQ pingin kembangin lagi belum bisa.
    jadi BEG-gini :
    aQ pingin DATA nya sudah tampil di GRID / TABEL nya dulu (dibawah TEXT FielD) => nah ketika di input NAMA di TEXT Filed nya data secara Otomatis berkurang (Sesuai dengan kriteria Pencariannya) gimana ya…. aQ coba2 malah Ga bisa.

  15. mas…. bisa di upload ulang gak file pencarian AJAXnya? kok invalid link download? trims…

  16. mz kalo mau ditambahi untuk pilihan kategotine pye yah??

  17. mantap gan numpang sedot ilmunya yach

  18. Terima kasih infonya,
    walaupun saya masih kurang mengerti, :D :p

  19. wah mantab oke lah gan..

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

Follow

Get every new post delivered to your Inbox.

Join 536 other followers

%d bloggers like this: