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)
