Menampilkan Katalog Produk pada Toko Online
Berikut akan membahas bagaimana menggunakan DHTMLX untuk menampilkan katalog produk untuk toko online.
Komponen utama yang digunakan yaitu:
- dhtmlxDataView (menampilkan data berkelompok, cocok untuk toko online dan galeri gambar)
Kali ini akan digunakan skin/tema “web”. Kalau pada tulisan sebelumnya dipakai skin/tema standar yaitu “skyblue”. Untuk memperoleh skin sesuai yang kita inginkan bisa menggunakan tool dhtmlxSkinBuilder yang disediakan oleh team DHTMLX secara online pada http://dhtmlx.com/docs/products/skinBuilder/
Kita menulis kode program pada 2 file terpisah yaitu:
1. index.html (untuk view)
2. dataview.php (untuk controller)
Langsung saja pada kode program, anda akan melihat seberapa singkatnya kode yang ditulis. Untuk database, yaitu tabel barang (handphone) dengan definisi sebagai berikut:
CREATE TABLE `barang` ( `bid` INT(11) NOT NULL AUTO_INCREMENT, `bnama` VARCHAR(50) NOT NULL, `prnama` VARCHAR(64) NULL DEFAULT NULL, `bharga` FLOAT NULL DEFAULT NULL, `bimg` VARCHAR(64) NULL DEFAULT NULL, `splayar` VARCHAR(50) NULL DEFAULT NULL, PRIMARY KEY (`bid`) ) COLLATE='latin1_swedish_ci' ENGINE=InnoDB
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 onload="doOnLoad()"> <p></p> <div id="myDataViewID" style="width: 800px; height: 600px"></div> <script> function doOnLoad() { var myDataView = new dhtmlXDataView({ container: "myDataViewID", type:{ template: "#bimg#<span class='dhx_strong'>#bnama#</span>#splayar#<br/> Harga: #bharga#", height: 140, width: 250 } }); myDataView.load("dataview-basic.php"); //muat database //Saat pointer mouse diletakkan pada item myDataView.attachEvent("onMouseMove", function(id) { var data = myDataView.get(id); dhtmlx.message({text: "Mouse Over<br>Item "+data.bnama}); }); //Saat tombol mouse diklik pada item myDataView.attachEvent("onItemClick", function(id) { var data = myDataView.get(id); dhtmlx.message({type: "alert", text: "Klik <br>Item "+data.bnama}); }); } </script> </body>
dataview.php
<?php include ("../../codebase/connector/dataview_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 DataViewConnector($dbconn, "PDO"); $sql = "SELECT bid,bnama,prnama,bharga,bimg,splayar FROM barang"; $data->dynamic_loading(10); $data->render_sql($sql, "bid", "bnama,prnama,bharga,bimg,splayar"); ?>
Test Drive DHTMLX
Copy kode dibawah ini lalu paste ke Text Area kemudian klik Run
var myDataView = new dhtmlXDataView({ container: "output3", type:{ template: "#bimg#<span class='dhx_strong'>#bnama#</span>#splayar#<br/> Harga: #bharga#", height: 140, width: 250 } }); myDataView.load("../tutorial/3/dataview-basic.php"); //muat database
Text Area
Output
SOURCE (termasuk versi complex)