Belajar Pemrograman Berbasis Web menggunakan DHTMLX,

PHP dan MySQLPart 1

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.

Mengapa DHTMLX

Mengapa harus DHTMLX bukan yang lain? Jawabnya adalah KEMUDAHAN.Kemudahan baik itu bagi developer/pengembang maupun bagi user/penggunaaplikasi web itu sendiri

- Single vs Mixed Code (bagi developer)

DHTMLX menggunakan pola single, maksudnya penulisan kode terpisah antaraJavascript dan PHP. Jd setiap interaksi dengan database, Javascript memanggil satu filePHP secara AJAX. Mungkin sering kali kita menjumpai kode yg tersusun dari campuraduk 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

Mengapa DHTMLX

- Simple Code (bagi developer)

Dengan penulisan kode yang hanya beberapa baris kita sudah bisa membuat aplikasiberbasis web, jika dibandingkan dengan apabila kita menggunakan framework lainnya

- Kemudahan User Interface (bagi user)

Seringkali dijumpai aplikasi web dimana user harus masuk sampai beberapa leveluntuk mengakses halaman tertentu. Setelah selesai memasukkan data kita haruskembali ke halaman sebelumnya lalu ulangi memasukkan data yang lain kemudiankembali lagi, selalu berulang-ulang. Tetapi tidak demikian dengan DHTMLX yangkeseluruhan widget memanfaatkan prinsip AJAX..Apabila anda pernah memakaiaplikasi desktop seperti itu juga halnya dengan DHTMLX

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

Memulai DHTMLX

- DHTMLX PHP Connector

Instalasi - Pemasangan DHTMLX

• Jika menggunakan XAMPP tempatkan di htdocs:1. DHTMLXSuite, Copy codebase lalu paste di dalam htdocs2. DHTMLX PHP Connector, Rename codebase menjadi connector, lalu paste

connector di dalam codebase

• Maka akan menjadi seperti ini:

Aplikasi Sederhana DHTMLX

Kita akan mencoba membuat aplikasi web sederhana dengan hanya menggunakan 1Widget DHTMLX, yaitu DHTMLX Grid. Widget Grid bisa digunakan untuk menampilkandata berupa tabel. Aplikasi web kita berisi tentang alamat seseorang

Karena cuma terdiri dari Grid, maka semua operasi CRUD terhadap database terjadi diGrid ini. Biasanya kita membuat operasi CRUD menggunakan Form, dengan methodPOST atau GET

Aplikasi ini terdiri dari 2 file, yaitu index.html untuk tampilan di client dan grid.phpuntuk mengakses database. Output dari grid.php berupa xml. Dan untuk databaseakan memakai MySQL, yang terdiri dari 3 kolom id,nama,alamat

DHTMLX PHP Connector sangat membutuhkan ID selalu AUTOINCREMENT

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;

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>

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();

}

Aplikasi Sederhana DHTMLX

function tambah() {var newId = (new Date()).valueOf(); //membuat id unikmyGrid.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>

Aplikasi Sederhana DHTMLX

grid.php

<?phpinclude ("../../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");

?>

Tampilan index.html Pada Browser

Tampilan grid.php Pada Browser

PENUTUP

• Demo dari aplikasi bisa dilihat di http://tobingvps.com/tutorial/1

• Tulisan selanjutnya akan memakai beberapa widget, diantaranya1. 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)

PENULISManuppak L. TobingMasih Newbie dalam DHTMLX Programminghttp://tobingvps.com – Membahas DHTMLX, PHP dan MySQLEmail : lumban.tobing.m@gmail.com