Belajar Pemrograman Web menggunakan DHTMLX Part 7

“Join Tabel CRUD”

TULISAN UTAMA I(SOURCE CODE)

JOIN TABLES

PERHATIAN: TULISAN INI MEMBUTUHKAN DASAR-DASAR DHTMLX, SILAHKAN IKUTI MULAI DARI TULISAN PERTAMA SERI BELAJAR PEMROGRAMAN WEB MENGGUNAKAN DHTMLX, PHP DAN MYSQL

Pada tulisan-tulisan sebelumnya kita hanya membahas data dari satu tabel saja, kali ini akan dibahas bagaimana CRUD dengan JOIN TABEL pada DHTMLX. Ini merupakan TULISAN UTAMA YANG PERTAMA karena hampir seluruh aplikasi web (web app) khususnya DHTMLX berdasarkan pada tulisan ini. Pada tulisan ini akan dibahas:

- Menampilkan data pada Grid dari 2 tabel atau lebih- Mengisi combo/select komponen dengan data dari database- Operasi CRUD (delete pada Grid, insert & update pada Form)

Pada DHTMLX query dapat dilakukan dengan beberapa cara, yaitu:

1. render_table (SELECT,INSERT,UPDATE,DELETE pada satu tabel saja)

$grid->render_table(“nama_tbl”, “id_kolom”, “kolom1,kolom2”, “extra1, extra2”)

2. render_sql (SELECT JOIN beberapa tabel)

$grid->render_query(“$sql”, “id_kolom”, “kolom1,kolom2”)

3. render_complex_sql (Untuk memanggil store procedure + query rumit)

$grid->render_complex_sql(“$complex_sql”, “id_kolom”, “kolom1,kolom2”)

Pada tulisan ini akan digunakan komponen-komponen DHTMLX:

1. dhtmlXLayout (untuk menempatkan komponen). Method showView digunakan untuk menempatkan komponen yang berbeda di layout yang sama. Dalam tulisan ini menempatkan Grid dan Form pada Layout cells (“a”)

2. dhtmlXGrid (tampilkan data berupa tabel)3. dhtmlXMenu (untuk tombol TAMBAH, HAPUS dan UBAH)4. dhtmlxCombo (komponen untuk memilih (select), dengan terlebih dahulu memuat data

dari database)5. dhtmlXForm

DATABASE

- karyawan

- departemen

- jabatan

xconn.php (koneksi database)

LAYOUT

Tempatkan Layout pada document.body

FORM

- Tempatkan Form pada myLayout.cells(“a”). Ini posisi yang sama dengan Grid, agar tidak bentrok (tumpang-tindih) satu sama lain digunakan method myLayout.showView().

- Ada 3 combo, jenis_kelamin (data bukan dari database), departemen ( data dari departemen_combo.php) dan jabatan ( data dari jabatan_combo.php)

- Data Processor terhadap myForm yaitu myFormDP untuk operasi CRUD (dengan interaksi karyawan_form.php)

- Event yang terjadi pada MyForm dilakukan dengan myForm.attachEvent()

Event pada Form, yaitu saat Tombol Tambah,Simpan, Batal di-klik, dengan terlebih dahulu memeriksa/validasi input yang dimasukkan (required: true) -> tidak boleh kosong

Event Data Processor, Setelah proses terhadap database apakah inserted, updated atau error. serverMessage merupakan respon yang didapat dari karyawan_form.php (dalam hal ini nama_karyawan), Setelah proses muat ulang Grid (refresh data terbaru)

karyawan_form.php

Event

- OnDBError -> jika terjadi error Database (untuk tes, silahkan rename nama tabel - table not found)

- AfterInsert -> setelah proses insert/tambah- AfterUpdate -> setelah proses update/ubah

GRID

- Tempatkan karyawanGrid pada myLayout.cells(“a”). Ini posisi yang sama dengan Form, agar tidak bentrok (tumpang-tindih) satu sama lain digunakan method myLayout.showView().

karyawan_grid.php

Event

- OnDBError -> jika terjadi error Database- AfterDelete -> setelah proses delete/hapus

- Data Processor terhadap karyawanGrid yaitu karyawanGridDP untuk operasi SELECT,DELETE (dengan interaksi karyawan_grid.php)

- Event Data Processor, Setelah proses terhadap database apakah deleted atau error. serverMessage merupakan respon yang didapat dari karyawan_grid.php (dalam hal ini kolom pertama grid yaitu nama_karyawan), Setelah proses muat ulang Grid (refresh data terbaru)

MENU (Untuk Tombol Tambah, Hapus, Ubah dengan Icon)

- Tempatkan karyawanMenu pada myLayout.cells(“a”). dhtmlXMenu,dhtmlXToolbar bisa ditempatkan tanpa method myLayout.showView().

- Event pada Menu, saat tombol di-klik1. Tambah

Menimpa Grid dengan Form, sembunyikan tombol Ubah pada Form

2. Hapus

Jika ada baris yang dipilih tampilkan pesan peringatan terlebih dahulu sebelum dihapus. Jika tidak ada baris yang dipilih, tampilkan error

3. Ubah

Menimpa Grid dengan Form, sembunyikan tombol Tambah pada Form

COMBO

- departemen_combo.php

- jabatan_combo.php

Kode lengkap secara berurutan silahkan download source code.

• Demo bisa dicoba di http://tobingvps.com/tutorial/7/index.php

• Source code dapat diperoleh di http://tobingvps.com/tutorial/7/tablesjoin.zip

PENULIS

Manuppak L. Tobing

Masih Newbie dalam DHTMLX Programming

http://tobingvps.com – Membahas DHTMLX, PHP dan MySQL

Email: lumban.tobing.m@gmail.com