Konstruksi DHTMLX Suite

Untuk mempelajari DHTMLX kita membutuhkan DHTMLX Suite Standar Edition yang bisa didownload dari http://dhtmlx.com/x/download/regular/dhtmlxSuite.zip. File yang diperoleh adalah berupa file terkompres bernama dhtmlxSuite_xxx_std.zip (xxx ini berarti versi). Setelah didekompres/extract akan diperoleh seperti gambar di bawah ini

 

  • codebase (inti dari DHTMLX, dhtmlx.js dan dhtmlx.css nanti akan di-include dalam index.html)
  • docs (manual atau tutorial yang nantinya diarahkan ke website www.dhtmlx.com)
  • samples (berisi contoh-contoh pemakaian DHTMLX lengkap dengan kode sekaligus)
  • skins (berisi tema atau style)
  • sources (berisi komponen DHTMLX secara terpisah)

 

Copy folder/directory codebase, samples, skins ke root directory web server, misalkan bila memakai XAMPP copy ketiga folder ini ke htdocs

Konstruksi DHTMLX PHP Connector

Untuk mengakses database dengan lebih mudah, team DHTMLX telah menyediakan DHTMLX PHP Connector yang berisi Class-class dan Function-function PHP. DHTMLX PHP Connector bisa didownload dari https://github.com/DHTMLX/connector-php. File yang diperoleh adalah berupa file terkompres bernama connector-php-master.zip. Setelah didekompres/extract akan diperoleh seperti gambar di bawah ini

Rename folder/directory codebase menjadi connector lalu copy folder connector dan MASUKKAN dalam folder codebase (Konstruksi DHMLX diatas), misalkan bila memakai XAMPP copy ke htdocs/codebase dan akan menjadi htdocs/codebase/connector

 

 

 

 

 

 

Maka struktur folder/directory akan menjadi seperti ini

 

 

 

 

 

 

 

 

File index.html dari suatu DHTMLX Web Apps

Dengan begini kita sudah siap untuk beraksi. Untuk mencoba apakah konfigurasi kita sudah berjalan semestinya silahkan membuat file index.html (atau apapun namanya terserah anda) pada folder htdocs. Copy lalu paste script di bawah ini (Script ini mutlak untuk semua aplikasi DHTMLX)

 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/codebase/dhtmlx.css">
        <script src="/codebase/dhtmlx.js"></script>
        <title>Web Apps</title>
        <style>
            html,body {
                width: 100%;
                height: 100%;
                margin: 0px;
                overflow: hidden;                   
            }               
        </style>
    </head>

    <body>
    <div id="output" style="width=300px;height=300px"></div>
        <script>     
        //Script ditulis disini
           
        </script>   
    </body>
</html>  

Keterangan :

  • pada baris link rel="stylesheet" dan script src merupakan include komponen utama DHTMLX
  • pada baris <style>htmlx,body agar aplikasi web kita menempati ruang penuh (full screen) pada web browser dan menghilangkan scrolling

Note: file dhtmlx.js berkisar sekitar 1,2 MB karena itu loading untuk pertama kali membutuhkan waktu

Tool lain yang dibutuhkan (Windows):

  1. Mozilla Firefox dengan Firebug addon
  2. Editor Sublime Text atau Notepad++
  3. Xampp untuk web server

 

Test Drive DHTMLX

Copy kode dibawah ini lalu paste ke Text Area kemudian klik Run

//Blok start Window dipasang pada div id=output
var myWins = new dhtmlXWindows();
myWins.attachViewportTo("output");
    var win1 = myWins.createWindow({
    id: "win1",
    text: "Hello Window",
    width: 300,
    height: 200,
    top: 10,
    left:10
});

//Blok start menu dipasang pada Window win1
var myMenu = win1.attachMenu({
    items:[
        {id:"file", text:"File", items:[
            {id:"open", text:"Open"},
            {id:"exit", text:"Exit"}
        ]},
        {id:"edit", text:"Edit", items:[
            {id:"undo", text:"Undo"},
            {id:"redo", text:"Redo"}
        ]}
    ]
})
myMenu.setOpenMode("win") //win atau web

//Saat menu undo diklik, tampilkan alert
myMenu.attachEvent("onClick", function(id) {
	switch (id) {
		case "undo":
			dhtmlx.alert("Undo diklik");
			break;
		case "redo":
			dhtmlx.message("Redo diklik");
			break;
		case "open":
			if ( myWins.isWindow("win2") == false) {
				var win = myWins.createWindow("win2", 100, 50, 400, 200);
			}
			break;
		case "exit":
			dhtmlx.message({type: "error", text: "Exit", expire: -1})
			break;
	}
    
});

 

 

 

Text Area

Output
 

 

Isi lengkap dari file index.html untuk menampilkan seperti di atas adalah:
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/codebase/dhtmlx.css">
        <script src="/codebase/dhtmlx.js"></script>
        <title>Web Apps</title>
        <style>
            html,body {
                width: 100%;
                height: 100%;
                margin: 0px;
                overflow: hidden;                   
            }               
        </style>
    </head>

    <body>
    <div id="output" style="width=300px;height=300px"></div>
        <script>          
            //Blok start Window dipasang pada div id=output
			var myWins = new dhtmlXWindows();
			myWins.attachViewportTo("output");
			    var win1 = myWins.createWindow({
			    id: "win1",
			    text: "Hello Window",
			    width: 300,
			    height: 200,
			    top: 10,
			    left:10
			});

			//Blok start menu dipasang pada Window win1
			var myMenu = win1.attachMenu({
			    items:[
			        {id:"file", text:"File", items:[
			            {id:"open", text:"Open"},
			            {id:"exit", text:"Exit"}
			        ]},
			        {id:"edit", text:"Edit", items:[
			            {id:"undo", text:"Undo"},
			            {id:"redo", text:"Redo"}
			        ]}
			    ]
			})
			myMenu.setOpenMode("win") //win atau web

			//Saat menu undo diklik, tampilkan alert
			myMenu.attachEvent("onClick", function(id) {
				switch (id) {
					case "undo":
						dhtmlx.alert("Undo diklik");
						break;
					case "redo":
						dhtmlx.message("Redo diklik");
						break;
					case "open":
						if ( myWins.isWindow("win2") == false) {
							var win = myWins.createWindow("win2", 100, 50, 400, 200);
						}
						break;
					case "exit":
						dhtmlx.message({type: "error", text: "Exit", expire: -1})
						break;
				}
			    
			});

        </script>   
    </body>
</html> 

 

 

 

 

Comments  
Tobing
0 #2 Tobing 2017-09-03 20:00
Quoting rudi kurniawan:
Saya sudah coba di komputer saya, gak tampil Pak.
Kalo yang tutorial 2 (CRUD Sederhana berhasil)


Coba dilihat posisi library dhtmlx udah bener apa belom
Quote
rudi kurniawan
0 #1 rudi kurniawan 2017-09-03 18:17
Saya sudah coba di komputer saya, gak tampil Pak.
Kalo yang tutorial 2 (CRUD Sederhana berhasil)
Quote
Add comment

Tutorial DHTMLX

15 Mar 2019 13:05
1. Konstruksi DHTMLX
22 Mar 2019 13:54
2. CRUD sederhana
15 Mar 2019 13:03
3. Toko Online
15 Mar 2019 13:02
4. Galeri Gambar
22 Mar 2019 13:53
5. Grafik
22 Mar 2019 13:52
6. Export Grid

Komponen DHTMLX - Javascript Web UI