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) {
    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> 

 

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


Security code
Refresh

Tutorial DHTMLX

29 Agu 2015 07:33
1. Konstruksi DHTMLX
30 Agu 2015 07:33
2. CRUD sederhana
01 Sep 2015 10:08
3. Toko Online
02 Sep 2015 10:11
4. Galeri Gambar
03 Sep 2015 05:30
5. Grafik
04 Sep 2015 07:33
6. Export Grid

Visitor

Indonesia 78.0% Indonesia
United States 10.2% USA
Singapore 2.8% Singapore

Total:

53

Countries
002536
Today: 2
This Week: 32
This Month: 134