Extjs Grid Panel dengan Fitur Tambah Edit dan Hapus

Untuk membuat sebuah list data digunakan sebuah komponen grid. Dimana grid ini akan di tambahkan tombol tambah, edit, dan hapus. Serta menambahkan komponen sel model berupa check box dimana akan digunakan untuk pilih data/record apabila ingin dihapus atau diedit.

 
Download


Selalu ada 2 bagian dalam membuatnya yaitu:

A. Bagian Server.
Bagian server merupakan aktifitas yang berkaitan dengan server seperti database dan pemrograman server seperti buka data, simpan data, dan hapus data. Pada bagian server yang harus dilakukan adalah sebagai berikut:

1. Membuat database dan table. Didalam contoh ini saya menggunakan mySql sehingga untuk membuat database dan tablenya adalah sebagai berikut:

CREATE DATABASE `program_example`;
CREATE TABLE `program_example`.`tabel_user` (
`id` INT( 4 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nama` VARCHAR( 50 ) NOT NULL ,
`email` VARCHAR( 50 ) NOT NULL ,
`alamat` TEXT NOT NULL
);

Perintah diatas adalah perintah mysql untuk membuat database program_example dan tabel tabel_user didalam database program_example.

2. Membuat file untuk menampilkan list data pada tabel_user dengan keluaran JSON. Saya beri nama filenya userDataStore.php.

3. Membuat file untuk menyimpan data pada tabel_user untuk tambah data baru. Saya beri nama file nya userSave.php. Keluarannya adalah JSON dengan memberikan status sukses true atau false.

4. Membuat file untuk menyimpan data pada tabel_user untuk edit data sesuai dengan data yang dikeluarkan oleh file userDataLoad.php. Saya beri nama file nya userUpdate.php. Keluarannya adalah JSON dengan memberikan status sukses true atau false.

5. Membuat file untuk menghapus data pada tabel_user. disini akan menghapus data yang dipilih. Filenya sayaberi nama dengan userDelete.php. Keluarannya adalah JSON dengan memberikan status sukses true atau false.

Sekarang sudah lengkap semua yang harus dilakukan pada bagian server. Kemudian dilanjutkan ke bagian client.

B. Bagian Client
Bagian Client adalah semua yang berkaitan dengan interface/tampilan pada user. Pada bagian inilai extjs kita gunakan.

1. Membuat model data. Saya beri nama filenya userDataMode.js. Model data inilah yang akan menterjemahkan data yang dikeluarkan dari server untuk diberikan kepada view/tampilan di client.

2. Membuat kelas jon data store. Saya beri nama dengan jsonDataStore.js. Kelas ini berfungsi untuk mengambil data dari server dalam keluaran JSON.

3. Membuat interface/view untuk list data dengan menggunakan komponen grid panel. Saya beri nama dengan file userDataGrid.js

4. Membuat interface/view untuk tambah atau edit data yaitu berupa komponen window. Saya beri nama userDataEdit.js

5. Membuat file index.html sebagai halaman pembuka.

Contoh ini tidak menggunakan metode mvc sehingga tidak ada file controller khusus untuk mengontrol view. Jadi untuk fungsi handlernya ada pada event di kelas view masing-masing yaitu di no. 3 dan 4.

Berikut ini Struktur file yang harus diperhatikan:

grid_update_data

2 thoughts on “Extjs Grid Panel dengan Fitur Tambah Edit dan Hapus”

Tinggalkan Balasan

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