Tested : php 5.5 - 5.6 - 7.0 - 7.2 - 7.3 - 7.4
MySQL 5.5 - 5.6 - 5.7 & MariaDB 10.3
Manual DHTMLX (13MB) disini
Source dan Demo dirancang untuk php 5.5
karena itu beberapa diantaranya tidak bisa berjalan sebagaimana mestinya.
 
 

3. Toko Online

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
 

 

DEMO

SOURCE (termasuk versi complex)

 

 

 

Add comment

Tutorial DHTMLX

15 Mar 2019 13:05
1. Konstruksi DHTMLX
22 Mar 2019 13:54
2. CRUD sederhana
15 Mar 2019 13:03
3. Toko Online
15 Mar 2019 13:02
4. Galeri Gambar
22 Mar 2019 13:53
5. Grafik
25 Des 2019 09:20
6. Export Grid

Komponen DHTMLX - Javascript Web UI