MUDAHNYA MEMBUAT CRUD PHP MYSQL DENGAN JQUERY EASYUI

jquery Easy UI adalah plugin jquery yang dapat membantu kita dalam membangun aplikasi berbasis web, terdapat banyak komponen yang sudah siap anda gunakan. pada tutorial ini kita akan belajar membuat aplikasi CRUD sederhana dengan PHP MySQL dan Jquery EasyUI.

Mempersiapkan Database
kita akan menggunakan database MySQL sebagai media untuk menyimpan data, silahkan buat sebuah database baru dengan nama test, lalu buat sebuah tabel dengan nama users dengan struktur seperti berikut :

tabe-pelanggan

Membuat Datagrid Untuk Menampilkan Data Pelanggan

Langkah selanjutnya kita akan membuat sebuah tabel dengan datagrid untuk menampilkan data pelanggan.

selanjutnya buatlah sebuah file baru dengan nama conn.php yang akan menyimpan script koneksi php ke database MySQL, berikut scriptnya :

lalu buat sebuah file baru dengan nama file get_users.php yang akan kita gunakan untuk menggenerate data pelanggan dalam format Json, berikut adalah script nya :

lalu silahkan akses proyek anda, jika berhasil maka akan muncul tampilan seperti ini :

jeasyui-crud-show

Membuat Form Untuk Input Dan Edit Data

sekarang kita lanjutnya dengan membuat sebuah form yang akan kita gunakan sebagai interface untuk input dan update data. form ini nantinya akan muncul sebagai pop up ketika diklik :

Membuat Fungsi Untuk Memanggil Form

sampai pada tahap ini button untuk selanjutnya kita akan membuat fungsi untuk menambah data baru belum bekerja, kita harus membuat sebuah perintah script untuk mengtriger agar ketika button diklik maka akan memunculkan pop up form, berikut script nya :

selanjutnya kita akan menulis script untuk menyimpan data yang di input ke database, silahkan buat sebuah file dengan nama save_users.php dan tulis script berikut :

lalu silahkan akses proyek anda, jika berhasil maka akan muncul tampilan seperti ini :

jeasyui-crud-add

selanjutnya kita akan masuk ke proses edit, dimana ketika users memilih salah satu data dalam grid lalu klik button edit maka akan muncul form dengan membawa data pelanggan yang dipilih :

lalu kita akan membuat file baru dengan nama update_user.php, file ini akan menghadle jika ada request untuk menampilkan data pada form dan proses update data, berikut script nya :

lalu silahkan akses proyek anda, jika berhasil maka akan muncul tampilan seperti ini :

jeasyui-crud-edit

Menyimpan Data Pelanggan

Langkah selanjutnya kita akan membuat sebuah function javascript yang akan bertugas menghandle perintah untuk menyimpan data pelanggan, function ini akan dijalankan ketika pengguna melakukan klik pada button submit.

Fungsi Untuk Menghapus Data Pelanggan

selanjutnya kita akan membuat sebuah function javascript untuk menghadle jika pengguna ingin menghapus data pelanggan, berikut script nya :

 

selanjutnya kita akan membuat sebuah file baru dengan nama destroy_user.php yang akan menghandle jika ada request untuk menghapus data, berikut ini script nya :

Script Lengkap Untuk Index

Jika mungkin tadi anda masih bingung dengan potongan potongan script di atas, maka sekarang saya menyertakan kesuluruhan dari script index nya :

selamat, sampai pada tahap ini anda sudah bisa membuat aplikasi CRUD sederhana dengan PHP MySQL dan jQuery EasyUI.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *