Belajar pemrograman berbasis web menggunakan dhtmlx 2

Belajar Pemrograman Berbasis
Web menggunakan DHTMLX,
PHP dan MySQL Part 2
CRUD
(SOURCE CODE)

CRUD
• Create - INSERT
- Menambah record
• Read - SELECT
- Menampilkan record
• Update - UPDATE
- Mengubah record
• Delete - DELETE
- Menghapus record
Proses CRUD pada DHTMLX kali ini, akan digunakan beberapa komponen, yaitu:
1. dhtmlxGrid – menampilkan data berupa tabel
2. dhtmlxForm – menampilkan data berupa Form( text input, tombol dan sebagainya)
3. dhtmlxLayout – untuk meletakkan dhtmlxGrid (kiri) dan dhtmlxForm (kanan)
4. dhtmlxMessage – menampilkan pesan
Ini merupakan lanjutan dari tulisan sebelumnya yaitu:
http://www.slideshare.net/tobingmanuppak/belajar-pemrograman-berbasis-web-
menggunakan-dhtmlx-php-dan-mysql
Pada tulisan tersebut proses CRUD hanya melibatkan satu komponen saja yaitu Grid. Pada
proses CRUD kali ini, Grid diset READ ONLY (ro). Jadi Grid hanya untuk menampilkan data saja
(SELECT). Sedangkan proses INSERT, UPDATE dan DELETE tidak dilakukan pada komponen
Grid, tetapi pada komponen Form. Sebelum UPDATE atau DELETE kita memilih terlebih dahulu
record yang mau di-UPDATE/DELETE pada Grid (onRowSelect), karena Form tidak bisa
melakukan UPDATE /DELETE jika tidak ada record yang dipilih, berbeda dengan INSERT yang
menambah record baru.

Setelah proses INSERT, UPDATE dan DELETE, komponen dhtmlxMessage akan menampilkan
pesan apakah proses tersebut berhasil atau gagal
Berikutnya adalah gambar diagram interaksi antar komponen :
KODE PROGRAM
Kode program/script ditulis dalam 3 file terpisah, yaitu:
1. index.html (tampilan utama – View)
2. grid.php (interaksi komponen Grid dengan database)
3. form.php (interaksi komponen Form dengan database)
Penulis membandingkan dengan contact form yang ditulis menggunakan framework laravel di
http://www.easylaravelbook.com/blog/2015/02/09/creating-a-contact-form-in-laravel-5-using-
the-form-request-feature/ (meskipun tidak sama karena disini menggunakan grid, tetapi

keduanya mirip). Nanti akan kelihatan seberapa simple dan sederhana kode yang ditulis
menggunakan dhtmlx (link untuk source code dari aplikasi ini ada pada bagian penutup tulisan
ini)
1. index.html
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>DHTMLX Web Apps</title>
5. <style>
6. html,body {
7. width: 100%;
8. height: 100%;
9. margin: 0px;
10. overflow: hidden;
}
11. </style>
12. <link rel="stylesheet" href="../../codebase/dhtmlx.css">
13. <script src="../../codebase/dhtmlx.js"></script>
14. </head>
15. <body>
16. <p><a href="http://tobingvps.com">Kembali ke HOME</a></p>
17. <p></p>
18. <p></p>
19. <div id="myID" style="width: 800px; height: 400px"></div>
20.
21. <script>
22. //SCRIPT DIMULAI DARI SINI-------------------------------------------------
23.
24. //Buat Layout untuk menempatkan Grid dan Form
25. var myLayout = new dhtmlXLayoutObject({
26. parent: "myID",
27. pattern: "2U", //pola kiri kanan
28. cells: [
29. {id: "a", text: "Grid"}, //kiri
30. {id: "b", text: "Form"} //kanan
31. ]
32. });
33.
34. //Tempatkan Grid pada myLayout a
35. var myGrid = myLayout.cells("a").attachGrid();
36. myGrid.setHeader("Nama,Alamat");
37. myGrid.setColTypes("ro,ro");
38. myGrid.attachHeader("#text_filter,#text_filter");
39. myGrid.init();
40.
41. myGrid.load("grid.php"); //memuat data dari database ke dalam Grid
42.
43. //Event saat salah satu baris pada grid diklik
44. myGrid.attachEvent("onRowSelect", function(id) {
45. myForm.load("form.php?id="+myGrid.getSelectedRowId());
46. });
47.
48. //Tempatkan Form pada myLayout b
49. var myForm = myLayout.cells("b").attachForm([
50. {type: "fieldset", offsetLeft: 30, offsetTop: 30, label: "Form", list: [
51. {type: "input", name: "nama", label: "Nama", labelWidth: 80, inputWidth:
180},
52. {type: "input", name: "alamat", label: "Alamat", labelWidth: 80,
inputWidth: 180},

53. {type: "block", offsetTop: 20, list: [
54. {type: "button", name: "tambah", value: "Tambah"},
55. {type: "newcolumn"},
56. {type: "button", name: "hapus", value: "Hapus"},
57. {type: "newcolumn"},
58. {type: "button", name: "simpan", value: "Simpan"}
59. ]}
60. ]}
61. ]);
62.
63. var myFormDP = new dataProcessor("form.php");
64. myFormDP.init(myForm);
65.
66. myForm.attachEvent("onButtonClick", function(name) {
67. switch (name) {
68. case "tambah":
69. myForm.resetDataProcessor("inserted");
70. myForm.save();
71. break;
72. case "hapus":
73. myForm.resetDataProcessor("deleted");
74. myForm.save();
75. break;
76. case "simpan":
77. myForm.resetDataProcessor("updated");
78. myForm.save();
79. break;
80. }
81. });
82.
83. myFormDP.attachEvent("onAfterUpdate", function(id,action,tid,tag) {
84. switch (action) {
85. case "deleted":
86. dhtmlx.message("Berhasil menghapus data");
87. myGrid.clearAndLoad("grid.php");
88. break;
89. case "inserted":
90. dhtmlx.message("Berhasil menambah data");
92. break;
93. case "updated":
94. dhtmlx.message("Berhasil mengubah data");
96. break;
97. case "error":
98. var message = tag.firstChild.data;
99. dhtmlx.message({type: "error", text: "Gagal memproses
data<br>"+message, expire: 10000});
101. break;
102. }
103. });
104. </script>
105. </body>
PENJELASAN index.html berdasarkankomponen:
- Komponen Layout (untuk meletakkan Grid dan Form)
//Buat Layout untuk menempatkan Grid dan Form
var myLayout = new dhtmlXLayoutObject({

parent: "myID",
pattern: "2U", //pola kiri kanan
cells: [
{id: "a", text: "Grid"}, //kiri
{id: "b", text: "Form"} //kanan
]
});
- Komponen Grid
//Tempatkan Grid pada myLayout a
var myGrid = myLayout.cells("a").attachGrid();
myGrid.setHeader("Nama,Alamat");
myGrid.setColTypes("ro,ro");
myGrid.attachHeader("#text_filter,#text_filter");
myGrid.init();
myGrid.load("grid.php"); //memuat data dari database ke dalam Grid
//Event saat salah satu baris pada grid diklik
myGrid.attachEvent("onRowSelect", function(id) {
myForm.load("form.php?id="+myGrid.getSelectedRowId());

})
- Komponen Form
//Tempatkan Form pada myLayout b
var myForm = myLayout.cells("b").attachForm([
{type: "fieldset", offsetLeft: 30, offsetTop: 30, label: "Form", list: [
{type: "input", name: "nama", label: "Nama", labelWidth: 80, inputWidth: 180},
{type: "input",name: "alamat",label: "Alamat",labelWidth: 80,inputWidth: 180},
{type: "block", offsetTop: 20, list: [
{type: "button", name: "tambah", value: "Tambah"},
{type: "newcolumn"},
{type: "button", name: "hapus", value: "Hapus"},
{type: "newcolumn"},
{type: "button", name: "simpan", value: "Simpan"}
]}
]}
]);

- AttachEvent (maksudnyalakukan aksi apabila xxx)
Pada Grid yaitu saat salah satu baris diklik, maka muat data tersebut ke dalam Form
myGrid.attachEvent("onRowSelect", function(id) {
myForm.load("form.php?id="+myGrid.getSelectedRowId());
});
Pada Form yaitu saat masing-masing tombol Tambah, Hapus dan Simpan diklik
myForm.attachEvent("onButtonClick", function(name) {
switch (name) {
case "tambah":
myForm.resetDataProcessor("inserted");
myForm.save();
break;
case "hapus":
myForm.resetDataProcessor("deleted");
myForm.save();
break;
case "simpan":
myForm.resetDataProcessor("updated");
myForm.save();
break;

}
});
Pada dataProcessor yaitu apakah Tambah, Hapus dan Simpan berhasil atau gagal
myFormDP.attachEvent("onAfterUpdate", function(id,action,tid,tag) {
switch (action) {
case "deleted":
dhtmlx.message("Berhasil menghapus data");
myGrid.clearAndLoad("grid.php");
break;
case "inserted":
dhtmlx.message("Berhasil menambah data");
break;
case "updated":
dhtmlx.message("Berhasil mengubah data");
break;
case "error":
var message = tag.firstChild.data;
dhtmlx.message({type: "error", text: "Gagal memproses
data<br>"+message, expire: 10000});
break;
}
});
2. grid.php
1. <?php
2. include ("../../codebase/connector/grid_connector.php");
3. include ("../../codebase/connector/db_pdo.php");
4.
5. $dbtype = "mysql"; // mysql or pgsql
6. $dbhost = "127.0.0.1"; // database server
7. $dbname = "test"; // database name
8. $dbuser = "root"; // database user
9. $dbpassword = ""; // database password
10. $dbcharset = "utf8"; // database charset
11.
12. $dsn = "mysql:host=$dbhost;dbname=$dbname;charset=$dbcharset";

13. $dbconn = new PDO($dsn, $dbuser, $dbpassword);
14.
15. $data = new GridConnector($dbconn, "PDO");
16. $sql = "SELECT id,nama,alamat FROM alamat";
17.
18. $data->render_sql($sql, "id", "nama,alamat");
19. ?>
3. form.php
1. <?php
2. include ("../../codebase/connector/form_connector.php");
3. include ("../../codebase/connector/db_pdo.php");
4.
5. $dbtype = "mysql"; // mysql or pgsql
6. $dbhost = "127.0.0.1"; // database server
7. $dbname = "test"; // database name
8. $dbuser = "root"; // database user
9. $dbpassword = ""; // database password
10. $dbcharset = "utf8"; // database charset
11.
12. $dsn = "mysql:host=$dbhost;dbname=$dbname;charset=$dbcharset";
13.
14. $dbconn = new PDO($dsn, $dbuser, $dbpassword);
15.
16. $data = new FormConnector($dbconn, "PDO");
17.
18. function doOnDBError($action, $ex) {
19. $error_message = $ex->getMessage();
20. $action->set_response_text($error_message);
21.
22. }
23.
24. $data->event->attach("OnDBError", doOnDBError);
25.
26. $data->render_table("alamat", "id", "nama,alamat");
27.
28. ?>
PENUTUP
Demikianlah pembahasan aplikasi CRUD sederhana dengan DHTMLX, PHP dan MySQL.
• Demo dari aplikasi bisa dilihat di http://dhxapps.web.id/tutorial/2
• Source code dapat diperoleh di http://dhxapps.web.id/tutorial/2/crud.zip
PENULIS
Manuppak L. Tobing
Masih Newbie dalam DHTMLX Programming
http://dhxapps.web.id – Membahas DHTMLX, PHP dan MySQL
Email: lumban.tobing.m@gmail.com

Belajar pemrograman berbasis web menggunakan dhtmlx 2

More Related Content

What's hot (20)

Similar to Belajar pemrograman berbasis web menggunakan dhtmlx 2 (20)

Recently uploaded (8)

Belajar pemrograman berbasis web menggunakan dhtmlx 2