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 Web Apps

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) {
    if (id == "undo") {
        dhtmlx.alert("Undo diklik");
    }
});

 

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) {
                if (id == "undo") {
                    dhtmlx.alert("Undo diklik");
                }
            });

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