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 Toko Online Sederhana DHTMLX Click to collapse

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

DEMO

SOURCE (termasuk versi complex)