Belajar pemrograman berbasis web menggunakan dhtmlx part 3 toko online

Belajar Pemrograman Berbasis

Web menggunakan DHTMLX,

PHP dan MySQL Part 3 “Konsep Toko Online”

(SOURCE CODE)

KONSEP TOKO ONLINE MENGGUNAKAN DHTMLX

Tulisan kali ini akan membahas bagaimana menggunakan DHTMLX untuk toko online. Secara

sederhana saja, yaitu “UNTUK MENAMPILKAN KATALOG PRODUK”.

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

1. index.html 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>DHTMLX Web Apps</title> 5. <style> 6. html,body { 7. width: 100%; 8. height: 100%; 9. margin: 0px; 10. overflow: hidden; 11. } } 12. </style>

13. <link rel="stylesheet" href="../../skins/web/dhtm lx.css"> 14. <script src="../../codebase/dhtmlx.js"></script> 15. </head> 16. <body onload="doOnLoad()"> 17. <p><a href="http://tobingvps.com">Kembali ke HOME< /a></p> 18. <p></p> 19. <div id="myDataViewID" style="width: 800px; height : 600px"></div> 20. <script> 21. function doOnLoad() { 22. var myDataView = new dhtmlXDataView({ 23. container: "myDataViewID", 24. type:{ 25. template: "#bimg#<span

class='dhx_strong'>#bnama#</span>#splayar#<br/> Har ga: #bharga#", 26. height: 140, 27. width: 250 28. } 29. }); 30. 31. myDataView.load("dataview-basic.php"); //muat da tabase 32. 33. //Saat pointer mouse diletakkan pada item 34. myDataView.attachEvent("onMouseMove", function(i d) { 35. dhtmlx.message({text: "Mouse Over<br>Item "+id} ); 36. }); 37. 38. //Saat tombol mouse diklik pada item 39. myDataView.attachEvent("onItemClick", function(i d) { 40. dhtmlx.message({type: "alert", text: "Klik <br> Item

"+id}); 41. }); 42. 43. } 44. 45. 46. </script> 47. </body>

Penjelasan index.html

- Baris 23 “container” maksudnya dataView diletakkan pada div “myDataViewID”. .

- Baris 25 “template” #bimg# merupakan data dari field “bimg” pada tabel barang. Dan

untuk menampilkan gambar tentu harus ditambahkan <img src=’images/#bimg#’>

2. dataview.php 1. <?php 2. include ("../../codebase/connector/dataview_connec tor.php"); 3. include ("../../codebase/connector/db_pdo.php"); 4. 5. $dbtype = "mysql"; // mysql or pgsql 6. $dbhost = "127.0.0.1"; // database server 7. $dbname = "test"; // database name 8. $dbuser = "root"; // database user 9. $dbpassword = ""; // database password 10. $dbcharset = "utf8"; // database charset 11. 12. $dsn = "mysql:host=$dbhost;dbname=$dbname;charset= $dbcharset"; 13. $dbconn = new PDO($dsn, $dbuser, $dbpassword); 14.

15. $data = new DataViewConnector($dbconn, "PDO"); 16. 17. $sql = "SELECT bid,bnama,prnama,bharga,bimg,splaya r FROM barang"; 18. 19. $data->dynamic_loading(10); 20. $data->render_sql($sql, "bid", "bnama,prnama,bharg a,bimg,splayar"); 21. 22. ?>

Penjelasan dataview.php

- Baris 19 “dynamic_loading” memuat data secara bertahap dalam hal ini 10 data

pertama, lalu saat scroll ke bawah muat 10 data lagi begitu seterusnya

- Baris 20 “render_sql” digunakan hanya untuk query SELECT sehingga bisa digunakan

JOIN untuk relasi dengan tabel lainnya. Sebelumnya “render_table” digunakan untuk

SELECT,INSERT,UPDATE,DELETE untuk SATU TABEL saja

HASIL YANG DIDAPAT

Demikianlah cara untuk menampilkan katalog dari toko online dengan DHTMLX Framework,

Selanjutnya bagaimana memisahkan produk dengan menggunakan bantuan dhtmlxSidebar

(menu pada sisi kiri). dhtmlxSidebar merupakan komponen terbaru pada DHTMLX versi 4.2

Lanjutan dengan versi yang lebih complex,

- Sidebar yang akan ditempatkan pada div.

- dataView produk akan ditempatkan pada Sidebar

- Event onItemClick ditiadakan

- dataView kanan untuk keranjang

- Memungkinkan Drag and Drop, pilih Item lalu seret ke Keranjang

-

1. index.html 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>DHTMLX Web Apps</title> 5. <style> 6. html,body { 7. width: 100%; 8. height: 100%; 9. margin: 0px; 10. overflow: hidden; 11. } 12. #mySideBarID { 13. height: 600px; 14. width: 65%; 15. float: left; 16. } 17. #keranjangID { 18. height: 400px; 19. width: 30%; 20. float: left; 21. border: 2px solid black; 22. } 23. </style> 24. <link rel="stylesheet" href="../../skins/web/dhtm lx.css"> 25. <script src="../../codebase/dhtmlx.js"></script> 26. </head> 27. <body onload="doOnLoad()"> 28. <p><a href="http://tobingvps.com">Kembali ke HO ME</a></p> 29. <p></p> 30. <div> 31. <div id="mySideBarID"></div> 32. <p>Pilih Item lalu drag ke DataView Kanan (ke ranjang)</p> 33. <div id="keranjangID"></div> 34. </div> 35. <script> 36. function doOnLoad() { 37. var mySideBar = new dhtmlXSideBar({ 38. icons_path: "icons/", 39. parent: "mySideBarID", 40. template: "tiles", 41. width: 180, 42. items: [ 43. {id: "semua", text: "Semua", icon: "semua.pn g", selected: true}, 44. {id: "nokia", text: "Nokia", icon: "nokia.pn g"}, 45. {id: "samsung", text: "Samsung", icon: "noki a.png"}, 46. ] 47. }); 48. 49. //untuk Semua

50. var semuaDataView = mySideBar.cells("semua").att achDataView({ 51. type:{ 52. template: "<img src='images/#bimg#' height=' 80' width='80'><span

class='dhx_strong'>#bnama#</span> #splayar#<br/> Ha rga: #bharga# ", 53. height: 140, 54. width: 250 55. }, 56. drag: true 57. }); 58. 59. semuaDataView.load("dataview-complex.php"); 60. 61. semuaDataView.attachEvent("onMouseMove", functi on(id) { 62. dhtmlx.message({text: "Mouse Over<br>Item "+id }); 63. }); 64. 65. //untuk Nokia 66. var nokiaDataView = mySideBar.cells("nokia").att achDataView({ 67. type:{ 68. template: "<img src='images/#bimg#' height=' 80' width='80'><span

class='dhx_strong'>#bnama#</span> #splayar#<br/> Ha rga: #bharga# ", 69. height: 140, 70. width: 250 71. }, 72. drag : true 73. }); 74. 75. nokiaDataView.load("dataview-complex.php?brand=' nokia'"); 76. 77. nokiaDataView.attachEvent("onMouseMove", functio n(id) { 78. dhtmlx.message({text: "Mouse Over<br>Nokia Ite m "+id}); 79. }); 80. 81. //untuk Samsung 82. var samsungDataView = mySideBar.cells("samsung") .attachDataView({ 83. type:{ 84. template: "<img src='images/#bimg#' height=' 80' width='80'><span

class='dhx_strong'>#bnama#</span> #splayar#<br/> Ha rga: #bharga# ", 85. height: 140, 86. width: 250 87. }, 88. drag : true 89. }); 90. 91. samsungDataView.load("dataview-complex.php?brand ='samsung'"); 92. 93. samsungDataView.attachEvent("onMouseMove", funct ion(id) { 94. dhtmlx.message({text: "Mouse Over<br>Samsung I tem "+id}); 95. }); 96. 97. //Keranjang 98. var keranjangDataView = new dhtmlXDataView({ 99. container: "keranjangID", 100. type:{ 101. template: "<img src='images/#bimg#' height='8 0' width='80'><span

class='dhx_strong'>#bnama#</span> #splayar#<br/> Ha rga: #bharga# ", 102. height: 140, 103. width: 250 104. }, 105. drag: true 106. }); 107. 108. }

109. 110. </script> 111. </body>

Penjelasan index.html

- Baris 75 dan 91 “brand” menjadi input GET pada dataview.php

2. dataview.php

1. <?php 2. include ("../../codebase/connector/dataview_conne ctor.php"); 3. include ("../../codebase/connector/db_pdo.php"); 4. 5. $dbtype = "mysql"; // mysql or pgsql 6. $dbhost = "127.0.0.1"; // database server 7. $dbname = "test"; // database name 8. $dbuser = "root"; // database user 9. $dbpassword = ""; // database password 10. $dbcharset = "utf8"; // database charset 11. 12. $dsn = "mysql:host=$dbhost;dbname=$dbname;charset =$dbcharset"; 13. 14. $dbconn = new PDO($dsn, $dbuser, $dbpassword); 15. $data = new DataViewConnector($dbconn, "PDO"); 16. 17. $brand = $_GET['brand']; 18. 19. if ($brand != "") { 20. $sql = "SELECT bid,bnama,prnama,bharga,bimg,spl ayar FROM barang WHERE

prnama=$brand"; 21. } else { 22. $sql = "SELECT bid,bnama,prnama,bharga,bimg,spl ayar FROM barang"; 23. } 24. 25. $data->dynamic_loading(10); 26. $data->render_sql($sql, "bid", "bnama,prnama,bhar ga,bimg,splayar"); 27. ?>

HASIL YANG DIDAPAT

PENUTUP

Demikianlah pembahasan konsep toko online dengan DHTMLX, PHP dan MySQL.

• Demo dari aplikasi bisa dilihat di

- Simple: http://tobingvps.com/tutorial/3/index-basic.html

- Complex: http://tobingvps.com/tutorial/3/index-complex.html

• Source code dapat diperoleh di http://tobingvps.com/tutorial/3/toko-online.zip

Database “barang” credited to:

http://sedotcode.blogspot.com/2015/03/source-code-toko-online-telepon.html

PENULIS

Manuppak L. Tobing

Masih Newbie dalam DHTMLX Programming

http://tobingvps.com – Membahas DHTMLX, PHP dan MySQL

Email: [email protected]

Technology

Belajar pemrograman berbasis web menggunakan dhtmlx part 3 toko online