February 29, 2016

Menggunakan Ajax dengan Jquery dan Yii2

Share this
  •  
  •  
  •  
  •  
  •  
  •  

Assalamualaikum wr wb artikel kali ini saya akan share mengenai cara Menggunakan Ajax dengan Jquery dan Yii2. Tetapi sebelum itu saya akan memberikan penjelasan mengenai ajax. Ajax merupakan kepanjangan dari Asynchronous JavaScript and XMLHTTP, sebuah teknik pemrograman yang membuat aplikasi lebih interaktif. Dengan menggunakan ajax, proses data akan lebih cepat karena untuk akses data pada server, bisa dilakukan pada client tanpa harus merefresh atau pindah halaman.

Cara penggunaannya juga cukup mudah, ajax bisa di triger melalui sebuah event, atau ketika load sebuah halaman. Pada contoh berikut akan saya praktekan dengan melanjutkan project saya yang kemarin biar lebih cepat hehe 😀 .

Menggunakan Ajax dengan Jquery dan Yii2

Disini saya akan mencoba menampilkan data tabel blog dengan filter kategori, untuk struktur tabelnya seperti berikut.

tabel tb_blog.

tabel tb_kategori.

Kemudian pertama-tama terlebih dahulu kita buat sebuat action pada controller sites yang berfungsi untuk menampilkan data blog pada Gridview  sesuai dengan filter kategori.

Jangan lupa untuk menampilkan view menggunakan render ajax karena action di akses melalui ajax 😀 , kemudian buat view nya dengan nama _dataBlog.php pada folder sites.

Untuk memunculkan dropdown kategori pada halaman sites/index, pada action index kita buat terlebih dahulu variabel yang berisi data array (menggunakan array helper) untuk data kategori dan jangan lupa variabel terebut di render ke view.

Pada view dataBlog.php saya menampilkan dropdown dengan menggunakan widget dari Yii2, dropdown ini saya kasih element id kategori.

Kemudian bungkus gridview pada halaman utama dataBlog.php dengan <div>, element inilah yang nantinya akan di replace dengan tabel yang di munculkan dengan menggunakan ajax, element tersebut saya kasih id tabel.

Kemudian buat fungsi ajax untuk mereplace element tabel dengan event on change pada dropdown kategori, jangan lupa untuk meregister asset js nya di Yii2.

Secara lengkap dataBlog.php akan seperti ini.

Coba tes dan lihat hasilnya, data pada tabel akan muncul susuai dengan filter dropdown yang kita pilih 😀 sangat mudah bukan.

Menggunakan Ajax dengan Jquery dan Yii2

Menggunakan Ajax dengan Jquery dan Yii2

Menggunakan Ajax dengan Jquery dan Yii2

Menggunakan Ajax dengan Jquery dan Yii2

Untuk belajar pemograman sebenarnya sangat mudah, yang penting anda tahu konsep dasarnya, jangan takut untuk mencoba hal hal baru. Sekian tutorial saya mengenai cara Menggunakan Ajax dengan Jquery dan Yii2. Semoga artikel ini bermanfaat Terima Kasih.

Agus Wiji Suhariono

Memulai menulis Blog pada bulan November dari Tahun 2015. Penulis merupakan alumni dari Politeknik Negeri Malang angkatan 2011 Program Studi Manajemen Informatika, Jurusan Elektro. Penulis memulai menekuni dunia programming mulai tahun 2014 dan sekarang bekerja di Pemerintahan sebagai IT Staff.

You may also like...