Belajar PHP Untuk Pemula |21. Live Search(AJAX)

  Belajar Bahasa PHP Untuk Pemula Part 21

Di artikel kali ini kita masih melengkapi lagi fitur di aplikasi yang sudah kita buat.

Yaitu fitur Live Search atau fitur pencarian yang hasilnya ditampilkan langsung.

Dengan menggunakan live search pada saat kita mengketikan keyword pencarian datanya otomatis tampil,jadi kita tidak membutuhkan tombol cari.

Untuk menerapkan fungsi live search ini kita akan menggunakan konsep ajax.

Singkatan dari ajax adalah(Asynchronous Javascript and XML),tapi sekarang aja adalah sebuah istilah bukan lagi singkatan lagi.

Asynchronous bisa diartikan tidak sinkron,

Javascript dan XML,pada saat kita mengakses sebuah website contohnya website kita,pasti punya proses request dan respon.

Pada saat kita mengakses sebuah halaman itu artinya mengrequest isi halaman tersebut ke server.Pada saat mencari itu sama kita request ke server,lalu server akan merespon hasil pencarian-nya.

Proses request dan respon yang kita lakukan sebelumnya itu kita sebut sinkron,karena begitu meminta sesuatu ke server dan server mengembalikan hasilnya,maka halaman itu akan di refresh seluruh kontennya.

Itu disebut Synchronous semua dikirimkan ke kita bersamaan ada html-nya,gambar kalau ada,script-nya dan itu cenderung lama.

Nah yang akan kita pakai adalah Asynchronous yang bisa melakukan request ke server hanya sebagian kecil dari halaman kita atau hanya mengembalikan bagian tertentunya saja dan itu lebih cepat karena server nya tidak usah mengembalikan html,gambar,script,dll.

Untuk menggunakan ajax ini kita membutuhkan sebuah object yang disebut XMLHttpRequest() yang nantinya akan mengelolah request kita menggunakan teknik ajax dan object ini sudah ada didalam kebanyakan browser,seperti Google Chrome,Mozila Firefox mempunyai object itu.

Lalu untuk memahami konsep ajax ini kalian harus paham beberapa hal

1.Javascript Dasar

2.DOM(Document Object Model)yang dimana kita bisa memanipulasi element html yang ada didalam halaman kita menggunakan Javascript.

Langsung saja kita akan mengimplementasikan ajax ke halaman kita.

Seperti biasa kita akan mengduplikat pertemuan 17,kenapa tidak pertemuan18?

Karena pagination yang kita buat tapi bukan untuk fasilitas cari dan pagination kita tidak akan jalan ketika melakukan pencarian.

Dan beri nama duplikat tersebut pertemuan19 dan buka di kode editor masing-masing.

Kita lihat hasilnya di web browser-nya

Nanti kita akan menambahkan fitur itu di kolom pencarian dan jika kita mengketikan salah satu siswa maka akan langsung muncul datanya tanpa menggunakan tombol cari-nya.

Sekarang kita akan membuka halaman index.php karena carinya ada di index dan akan membuat file javascript untuk melakukan ajaxnya dengan menambahkan text script di halaman html kita.

Kita simpan sebelum tutup body,seperti ini

Save dan buat folder baru di pertemuan19,beri nama js dan didalamnya buat file script.js

Kita lihat apakah javascript kita sudah berhasil dipanggil htmlnya atau belum,seperti ini

Hasilnya

Kalian bisa inspect(CTRL+Shift+i) untuk melihat apakah consolenya sudah berjalan.

Lalu kita cari di halaman index di bagian form karena nanti yang akan kita lakukan adalah supaya javascript-nya gampang mengambil element-element di html-nya,kita bisa menandai tiap element yang kita butuhkan,seperti ini

Lalu saya akan tandai ditempat dimana datanya akan berubah

Save lalu kembali di halaman javascript untuk mengambil element yang dibutuhkan

Untuk menjalankan ajax kita membutuhkan trigered,yaitu sebuah aksi untuk menjalankan ajaxnya.

Contohnya ketika kita memencet tombol,mengubah sebuah element, dll.Itu namanya aksi dan di javascript namanya adalah event.

Nah saya akan menambahkan event ketika keyword ditulis

Hasilnya

Itu sudah benar dan eventnya sudah jalan.

Kalau saya ingin mengambil apa yang saya tuliskan didalam inputnya,kita bisa tambahkan console.log

Dan sekarang kita akan lakukan ajax-nya

Kita buat folder ajax dan didalamnya buat file coba.txt

Kita kembali lagi ke browsernya untuk mengecek ajax-nya jalan apa tidak

Nah setiap kita memencet tombol di keyboard ada request menggunakan ajax.

Sekarang saya tidak akan menampilkan ajax ok kedalam console,tapi saya akan mencoba menampilkan apapun isi dari file coba.txt.

Maka ganti console itu menjadi container.innerHTML

Kita coba

Darimana Hello World itu muncul?itu dari coba.txt yang dipanggil oleh xhr.responseText.

Tinggal sekarang kita ganti tidak menggunakan request file text lagi tapi requestnya ke file PHP.

Kita bisa buang file coba.txt-nya dan buat file baru dalam folder ajax dengan nama siswa.php

Lalu kita ganti isi dari xhr.open-nya

Ganti ajax/coba.txt menjadi ajax/siswa.php

Hasilnya

Kita sudah berhasil mengambil data dari siswa.php.

Sekarang di halaman siswa.php-nya saya akan menghubungkan ke halaman function kita.

Kita sudah request menggunakan ajax,tinggal bagaimana kita memanipulasi query-nya supaya sesuai dengan permintaan kita.

Kita ke index.php dan copy seluruh isi dari table

Lalu paste di dalam siswa.php

Yang kita butuhkan adalah mengambil apapun yang diketikan menjadi keyword pencarian

Jadi kita gampang mencari data diri siswa di dalam kolom pencarian.

Itu adalah Live Search,keren kan?

Sampai disini dulu pembahasan mengenai Live Search(AJAX)

Dan terima kasih sudah meluangkan waktu untuk membaca artikel ini  dan sampai jumpa di artikel selajutnya