Galeri Gambar

Pada tulisan-tulisan DHTMLX sebelumnya umumnya pembahasan mengenai manipulasi data dari database. Pada tulisan kali ini akan membahas bagaimana menggunakan DHTMLX untuk mengakses file system. File system berhubungan dengan file dan folder/direktori. Perlu diperhatikan path/lokasi dari file/folder berbeda antara system operasi Windows dan *nix (UNIX, Linux), yaitu penggunaan slash dan backslash. Lalu permission terhadap file/folder pada system operasi *nix juga perlu diperhatikan (chmod, chown, 755 – Silahkan cari di Wikipedia).

DHTMLX menyediakan filesystem_connector.php untuk proses manipulasi terhadap file system. Seperti pada tulisan-tulisan sebelumnya conector ini sangat membantu dan memberi kemudahan bagi developer PHP untuk mengembangkan aplikasi berbasis web tanpa menulis kode program yang panjang dan rumit.

Disini akan dibahas mengenai Galeri Gambar & Uploader yang cukup sederhana. Hal-hal yang berhubungan diantaranya menampilkan gambar, upload gambar (unggah), hapus gambar dan sama sekali tidak berhubungan dengan database.

Komponen utama yang digunakan yaitu:
- dhtmlxWindow ( seperti Windows Form pada VB)
- dhtmlxDataView (menampilkan data berkelompok, cocok untuk toko online dan galeri gambar)
- dhtmlxForm untuk uploader gambar
- dhtmlxMenu (Context Menu saat item pada DataView di-klik kanan)
- dhtmlxPopup

Kita menulis kode program pada 3 file terpisah yaitu:
1. index.html (untuk view)
2. dataview.php (untuk controller)
3. dhtmlxform_item_upload.php (ini disediakan oleh DHTMLX, kita hanya mengubah nama dan lokasi upload sesuai yang kita inginkan)
4. gambar_delete.php (untuk menghapus gambar dari file system)

Langsung saja pada kode program,

 

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="output" style="width: 800px; height: 600px"></div>
	<script>
		function doOnLoad() {
			var myWins = new dhtmlXWindows();
			myWins.attachViewportTo(document.body);
			
			var gambarWindows = myWins.createWindow({
				id: "gbrwin",
				text: "Galeri Gambar",
				width: 800,
				height: 500,
				center: true
			});
			gambarWindows.keepInViewport(true);

			var myToolbar = gambarWindows.attachToolbar({
				items: [
					{id: "upload", type: "button", text: "Upload Gambar", img: "icons/upload.png"}
				]
			});

			var myPopup = new dhtmlXPopup({toolbar: myToolbar, id: "upload"});

			var myForm = myPopup.attachForm([
				{type: "fieldset", label: "Popup Uploader", list: [
					{type: "upload", name: "upload_gambar", inputWidth: 300, url: "upload/dhtmlxform_item_upload.php", 
					_swfLogs: "enabled", swfPath: "uploader.swf", swfUrl: "upload/dhtmlxform_item_upload.php"}
				]}				
			]);

			myForm.attachEvent("onBeforeFileAdd", function(filename, size){
			    var ext = filename.split('.').pop();
			    if (ext == "jpg" || ext == "jpeg" || ext == "JPG" || ext == "JPEG" || ext == "png" || ext == "PNG" || 
			    	ext == "bmp" || ext == "BMP" || ext == "gif" || ext == "GIF") {
			    	if (size > 500000) {
			    		dhtmlx.message({type: "error", text:'Tidak boleh melebihi 500 KB'});
			    	} else return true							    	
			    } else {
			    	dhtmlx.message({type: "error", text:'Hanya gambar saja<br>png,jpg,bmp,gif'});										    	
			    }		
			});

			myForm.attachEvent("onUploadComplete", function(count) {
				dhtmlx.message("Upload "+count+" file berhasil");
				semuaDataView.clearAll();
				semuaDataView.load("dataview-basic.php");
			})

			var semuaDataView = gambarWindows.attachDataView({
				type:{
					template: "<img src='upload/uploaded/#filename#' height='110' width='90'>
					<span class='dhx_strong'>#filename#</span>Size: #size# bytes<br/>",
					height: 140,
					width: 250
				}
			});

			var semuaDataViewDP = new dataProcessor("dataview-basic.php");
			semuaDataViewDP.init(semuaDataView);

			semuaDataView.load("dataview-basic.php");

			var myContextMenu = new dhtmlXMenuObject({
				parent: "contextArea",
				items:[
			        {id:"hapus", text: "Hapus", img: "icons/delete.png"}
			    ],
			    context: true
			});

			var selectedItem;
			var data;
			semuaDataView.attachEvent("onBeforeContextMenu", function(id,e) {
				myContextMenu._doOnContextBeforeCall(e,{id:id});
				semuaDataView.select(id);
				selectedItem = id;
				data = semuaDataView.get(id);
				return false;
			});

			myContextMenu.attachEvent("onClick", function(id) {
				if (id == "hapus") {
					semuaDataView.remove(selectedItem);
					dhx4.ajax.post("gambardelete.php?filename="+data.filename);
				} 
			})
		}
	</script>
</body>
</html>

Penjelasan index.html
- Baris 22-30 Buat komponen Window dan tempatkan pada document.body.
- Baris 31 Window tidak boleh keluar dari document.body
- Baris 33 Tempatkan Toolbar Upload pada Window
- Baris 39 Tempatkan Popup untuk upload pada Toolbar
- Baris 41 Tempatkan Form Uploader pada Toolbar, dhtmlxform_item_upload.php merupakan script untuk upload data ke server
- Baris 48 “onBeforeFileAdd” event saat file dipilih dan sebelum diupload ke server
- Baris 50, cek hanya file gambar saja
- Baris 52, file gambar tidak boleh melebihi 500KB
- Baris 60 “onUploadComplete” event setelah proses upload selesai
- Baris 80, ContextMenu merupakan menu yang muncul apabila saalah satu item pada DataView diklik-kanan
- Baris 90 “onBeforeContextMenu” event sesaat sebelum context menu tampil
- Baris 98, Event saat context menu (hapus) diklik

 

dataview.php

<?php
	include ("../../codebase/connector/dataview_connector.php");
	include ("../../codebase/connector/db_filesystem.php");

	$data = new DataViewConnector("", "FileSystem");
	$fileTypes = FileSystemTypes::getInstance();
	$fileTypes->setType('image');
	$data->render_table("upload/uploaded", "safe_name", "filename,full_filename,size,name,extension,date,is_folder");
?>

 

dhtmlx_item_upload.php (terletak di dalam folder UPLOAD)

<?php
	if (@$_REQUEST["mode"] == "html5" || @$_REQUEST["mode"] == "flash") {

		$name = $_FILES["file"]["name"];
		$extension = end((explode(".", $name))); # extra () to prevent notice

		$filename = time() . '_' . rand(100, 999) . '.' . $extension;
		move_uploaded_file($_FILES["file"]["tmp_name"],"uploaded/".$filename);

		header("Content-Type: text/json");
		print_r("{state: true, name:'".str_replace("'","\\'",$filename)."', extra: {info: 'just a way to send some extra data', param: 'some value here'}}");
	}
?>

gambar_delete.php

<?php
	$filename = $_GET['filename'];
	unlink('upload/uploaded/'.$filename);
?>

 

Tidak disertai DEMO karena UPLOAD FILE KE SERVER, silahkan download SOURCE CODE

Add comment


Security code
Refresh

Tutorial DHTMLX

29 Agu 2015 07:33
1. Konstruksi DHTMLX
30 Agu 2015 07:33
2. CRUD sederhana
01 Sep 2015 10:08
3. Toko Online
02 Sep 2015 10:11
4. Galeri Gambar
03 Sep 2015 05:30
5. Grafik
04 Sep 2015 07:33
6. Export Grid

Visitor

Indonesia 79.3% Indonesia
United States 9.3% USA
Singapore 2.6% Singapore

Total:

56

Countries
002890
Today: 9
This Week: 9
This Month: 122