Cara Filter data Menggunakan Ajax

Pengertian AJAX

AJAX adalah singkatn dari Asynchronous JavaScript And XML merupakan istilah dalam teknik pemrograman web, AJAX dperkenalkan oleh Jesse James Garret pada bulan februari 2005, teknik pemrograman ini memungkinkan developer untuk membuat aplikasi web rasa desktop/seperti halnya aplikasi desktop.

Apakah AJAX diperlukan

Penggunaan AJAX diperlukan jika sang pengembang menginginkan aplikasi yang dibangun terasa lebih responship seperti halnya aplikasi desktop berbasis client server, dengan menggunakan AJAX aplikasi tidak akan reload halaman ketika melakukan suatu proses dalam menyajikan data.

AJAX menggunakan Yii2 Framework

Pada contoh kali ini kita fokuskan bagaimana menggunakan AJAX pada Yii2 Framework, buatlah sebuah database pada contoh yang akan dibuat nama database nya adalah perpustakaan kemudian import source sql berikut :


ketika dijalankan makan akan muncul dua buah tabel yaitu tabel buku dan kategori.

langkah berikut nya adalah melakukan instalasi Yii Framework anda dapat melihat tutorial instalasi disini :

Cara instalasi Yii2 Framework

atau anda juga dapat membuat nya pada aplikasi yang sudah ada, langkah berikutnya adalah melakukan Konfigurasi agar database terkoneksi dengan aplikasi yang sudah kita install.

Cara Konfigurasi Ke Database

setelah terkoneksi gunakan Gii untuk untuk mengenarate tabel menajadi sebuah model, akses aplikasi anda ke url http://localhost/perpustakaan/index.php?r=gii (perpustakaan merupakan nama aplikasi yang terinstall, disesuaikan jika nama project nya berbeda). sehingga akan muncul halaman Gii seperti berikut :

 

klik tombol start pada menu model generator kemudian nanti akan muncul :

pada contoh diatas kita akan mengenarate tabel buku (gunakan huruf kapital untuk nama awal model calss name) kemudian tekan tombol preview yang terletak dibawah,kemudian tekan tombol generate. lakukan hal yang sama untuk tabel kategori. setelah berhasil maka akan bertambah dua buah model yaitu Buku dan Kategori. 

Langkah berikutnya kita akan membuat sebuah controller buku, karena contoh yang akan dibuat kita akan menampilkan data buku, untuk membuat controller buku kita juga bisa memanfaatkan Fitur Gii yaitu pada menu controller generator, tekan tombol start pada menu tersebut kemudian isi kolomnya seperti gambar berikut :

Kemudian tekan tombol preview dan generate. hasil generate berupa file baru yaitu BukuController.php pada folder Controller dan file index.php pada folder views/buku.

Buka file BukuController untuk modifikasi source code agar data bisa tampil pada halaman views/buku/index.php berikut adalah coding pada BukuController.php

Kemudian modifikasi index.php yang berada pada views/buku/index.php menjadi

Sekarang saatnya kita membuat coding ajax agar ketika dilakukan filter menggunakan dropdownlist halaman tidak melakukan reload.

Coding ajax dapat kita buat dalam sebua folder yang dinamakan dengan js/main.js pada folder root aplikasi. atau folder nya berada disini:

 

coding main.js seperti berikut :

daftarkan main.js yang ada pada folder web/assets/AppAsset.php
Tambahkan sebuah file baru dengan nama _index.php untuk menampilkan data hasil pencarian pada views/buku/_index.php berikut adalah source code nya :

Sekarang buka aplikasi anda pada url berikut :
localhost/perpustakaan/index.php?r=buku
atau
localhost/perpustakaan/web/index.php?r=buku
halaman yang akan tampil :

data akan muncul sesuai dengan kategori yang dipilih.

catatan:

1. isi beberapa data terlebih dahulu secara manual pada mysql sebagai contoh pada tabel buku dan kategori. 
2. isi komentar jika ada yang belum jelas.

Sekian

Terimakasih.