Belajar Pemrograman berbasis Web menggunakan DHTMLX Javascript Framework, PHP dan Database MySQL

1. Belajar Pemrograman Berbasis
Web menggunakan DHTMLX,
PHP dan MySQL
Part 1

2. Apa itu DHTMLX
• DHTMLX merupakan satu dari sekian banyak javascript framework yang ada saat
ini. Dengan DHTMLX memungkinkan kita membuat aplikasi berbasis web yang
memiliki fitur seperti aplikasi desktop. DHTMLX sering dikatakan DHTMLX Suite
karena tersusun dari beberapa widget diantaranya DHTMLX Layout, Window,
Form, Tabbar, Accordion dan lainnya
• Untuk mempelajari DHTMLX paling tidak harus mempunyai pengetahuan dasar
seputar HTML, Javascript dan CSS. Sedangkan untuk interaksi dengan database
sendiri, pihak DHTMLX menyediakan connector yang ditulis dalam 4 bahasa
berbeda, diantaranya PHP, ASP, Java dan ColdFusion. Jadi bisa memilih
menggunakan bahasa yang paling kita kuasai. Dalam tulisan ini hanya akan dibahas
connector PHP.
• Jadi sebelum merancang aplikasi berbasis web menggunakan DHTMLX dibutuhkan
yang pertama DHTMLX Suite untuk merancang interface front end, yang kedua
DHTMLX PHP Connector yang merupakan kumpulan class-class PHP untuk
memudahkan operasi CRUD terhadap database, dan yang ketiga adalah sistem
database. Sistem Database yang akan digunakan disini adalah MySQL.

3. Mengapa DHTMLX
Mengapa harus DHTMLX bukan yang lain? Jawabnya adalah KEMUDAHAN.
Kemudahan baik itu bagi developer/pengembang maupun bagi user/pengguna
aplikasi web itu sendiri
- Single vs Mixed Code (bagi developer)
DHTMLX menggunakan pola single, maksudnya penulisan kode terpisah antara
Javascript dan PHP. Jd setiap interaksi dengan database, Javascript memanggil satu file
PHP secara AJAX. Mungkin sering kali kita menjumpai kode yg tersusun dari campur
aduk HTML dan PHP, itulah mixed code. Misalnya:
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
<?php } ?>
Terkadang kita susah mencari tanda } untuk menutup function php yang mana

4. Mengapa DHTMLX
- Simple Code (bagi developer)
Dengan penulisan kode yang hanya beberapa baris kita sudah bisa membuat aplikasi
berbasis web, jika dibandingkan dengan apabila kita menggunakan framework lainnya
- Kemudahan User Interface (bagi user)
Seringkali dijumpai aplikasi web dimana user harus masuk sampai beberapa level
untuk mengakses halaman tertentu. Setelah selesai memasukkan data kita harus
kembali ke halaman sebelumnya lalu ulangi memasukkan data yang lain kemudian
kembali lagi, selalu berulang-ulang. Tetapi tidak demikian dengan DHTMLX yang
keseluruhan widget memanfaatkan prinsip AJAX..Apabila anda pernah memakai
aplikasi desktop seperti itu juga halnya dengan DHTMLX

5. Memulai DHTMLX
• Sebelum memulai membuat aplikasi web dengan DHTMLX Framework, terlebih
dahulu kita membutuhkan 2 komponen utama, yaitu DHTMLX Suite Standard
version lisensi GPL dan DHTMLX PHP Connector. Untuk DHTMLX Suite bias diunduh
dari http://dhtmlx.com/x/download/regular/dhtmlxSuite.zip sedangkan untuk PHP
Connector bias diunduh dari https://github.com/DHTMLX/connector-php
• Setelah kita memperoleh kedua file ini (format zip) terdapat:
- DHTMLX Suite

6. Memulai DHTMLX
- DHTMLX PHP Connector

7. Instalasi - Pemasangan DHTMLX
• Jika menggunakan XAMPP tempatkan di htdocs:
1. DHTMLXSuite, Copy codebase lalu paste di dalam htdocs
2. DHTMLX PHP Connector, Rename codebase menjadi connector, lalu paste
connector di dalam codebase
• Maka akan menjadi seperti ini:

8. Aplikasi Sederhana DHTMLX
Kita akan mencoba membuat aplikasi web sederhana dengan hanya menggunakan 1
Widget DHTMLX, yaitu DHTMLX Grid. Widget Grid bisa digunakan untuk menampilkan
data berupa tabel. Aplikasi web kita berisi tentang alamat seseorang
Karena cuma terdiri dari Grid, maka semua operasi CRUD terhadap database terjadi di
Grid ini. Biasanya kita membuat operasi CRUD menggunakan Form, dengan method
POST atau GET
Aplikasi ini terdiri dari 2 file, yaitu index.html untuk tampilan di client dan grid.php
untuk mengakses database. Output dari grid.php berupa xml. Dan untuk database
akan memakai MySQL, yang terdiri dari 3 kolom id,nama,alamat
DHTMLX PHP Connector sangat membutuhkan ID selalu AUTOINCREMENT

9. Aplikasi Sederhana DHTMLX
MySQL Database
CREATE TABLE `alamat` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`nama` VARCHAR(100) NOT NULL COLLATE 'utf8_bin',
`alamat` VARCHAR(100) NOT NULL COLLATE 'utf8_bin',
PRIMARY KEY (`id`)
)
COLLATE='utf8_bin'
ENGINE=InnoDB
;

10. Aplikasi Sederhana DHTMLX
index.html
<!DOCTYPE html>
<html>
<head>
<title>DHTMLX Web Apps</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js"></script>
</head>
<body>
<div id=“myID”></div>

11. Aplikasi Sederhana DHTMLX
<script>
var myGrid = new dhtmlXGridObject(“myID”);
myGrid.setHeader(“nama,alamat”);
myGrid.attachHeader(“#text_filter,#text_filter”);
myGrid.init();
myGrid.load(“grid.php”); //muat database ke grid
var myGridDP = new dataProcessor(“grid.php”);
myGridDP.init(myGrid);
function hapus() {
myGrid.deleteSelectedItem();
}

12. Aplikasi Sederhana DHTMLX
function tambah() {
var newId = (new Date()).valueOf(); //membuat id unik
myGrid.addRow(newId,"nama,alamat",myGrid.getRowsNum());
myGrid.selectRowById(newId); //pilih baris baru tersebut
}
</script>
<p><a href="javascript:void(0)" onclick="hapus()">Hapus baris</a></p>
<p><a href="javascript:void(0)" onclick="tambah()">Tambah baris</a></p>
</body>

13. Aplikasi Sederhana DHTMLX
grid.php
<?php
include ("../../codebase/connector/grid_connector.php");
include ("../../codebase/connector/db_pdo.php");
$dbtype = "mysql“; // mysql or pgsql
$dbhost = "127.0.0.1"; // database server
$dbname = "test"; // database name
$dbuser = "root"; // database user
$dbpassword = "“; // database password
$dbcharset = "utf8"; // database charset
$dsn = "mysql:host=$dbhost;dbname=$dbname;charset=$dbcharset“;
$dbconn = new PDO($dsn, $dbuser, $dbpassword);
$data = new GridConnector($dbconn, "PDO");
$data->render_table("alamat", "id", "nama,alamat");
?>

14. Tampilan index.html Pada Browser

15. Tampilan grid.php Pada Browser

16. PENUTUP
• Demo dari aplikasi bisa dilihat di http://tobingvps.com/tutorial/1
• Tulisan selanjutnya akan memakai beberapa widget, diantaranya
1. DHTMLX Grid (untuk menampilkan data dan hapus)
2. DHTMLX Form (untuk proses tambah dan ubah data)
3. DHTMLX Layout (untuk meletakkan Grid dan Form)
4. DHTMLX Message (menampilkan pesan apakah proses gagal atau berhasil)
PENULIS
Manuppak L. Tobing
Masih Newbie dalam DHTMLX Programming
http://tobingvps.com – Membahas DHTMLX, PHP dan MySQL
Email : lumban.tobing.m@gmail.com