Belajar pemrograman web menggunakan dhtmlx dan php part 4 galeri gambar & uploader

Belajar Pemrograman Web

menggunakan DHTMLX Part 4 “Galeri Gambar & Uploader”

(SOURCE CODE)

GALERI GAMBAR & UPLOADER MENGGUNAKAN DHTMLX

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,

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="../../codebase/dht mlx.css"> 14. <script src="../../codebase/dhtmlx.js"></script > 15. </head> 16. <body onload="doOnLoad()"> 17. <p><a href="http://tobingvps.com">Kembali ke HO ME</a></p> 18. <p></p> 19. <div id="myDataViewID" style="width: 800px; hei ght: 600px"></div> 20. <script> 21. function doOnLoad() { 22. var myWins = new dhtmlXWindows(); 23. myWins.attachViewportTo(document.body); 24. 25. var gambarWindows = myWins.createWindow({ 26. id: "gbrwin", 27. text: "Galeri Gambar", 28. width: 800, 29. height: 500, 30. center: true 31. }); 32. 33. gambarWindows.keepInViewport(true); 34. 35. var myToolbar = gambarWindows.attachToolbar({ 36. items: [ 37. {id: "upload", type: "button", text: "Upload Gamb ar", img:

"icons/upload.png"} 38. ] 39. }); 40. 41. var myPopup = new dhtmlXPopup({toolbar: myToolba r, id: "upload"}); 42. 43. var myForm = myPopup.attachForm([ 44. {type: "fieldset", label: "Popup Uploader", li st: [ 45. {type: "upload", name: "upload_gambar", inpu tWidth: 300, url:

"upload/dhtmlxform_item_upload.php", _swfLogs: "ena bled", swfPath: "uploader.swf", swfUrl: "upload/dhtmlxform_item_upl oad.php"}

46. ]} 47. ]); 48. 49. myForm.attachEvent("onBeforeFileAdd", function(f ilename, size){ 50. var ext = filename.split('.').pop(); 51. if (ext == "jpg" || ext == "jpeg" || ext == "J PG" || ext == "JPEG" ||

ext == "png" || ext == "PNG" || ext == "bmp" || ext == "BMP" || ext == "gif" || ext == "GIF") {

52. if (size > 500000) { 53. dhtmlx.message({type: "error", text:'Tidak boleh melebihi 500

KB'}); 54. } else return true 55. } else {

56. dhtmlx.message({type: "error", text:'Hanya g ambar saja<br>png,jpg,bmp,gif'});

57. } 58. }); 59. 60. myForm.attachEvent("onUploadComplete", function( count) { 61. dhtmlx.message("Upload "+count+" file berhasil "); 62. semuaDataView.clearAll(); 63. semuaDataView.load("dataview-basic.php"); 64. }) 65. 66. var semuaDataView = gambarWindows.attachDataView ({ 67. type:{ 68. template: "<img src='upload/uploaded/#filena me#' height='110'

width='90'><span class='dhx_strong'>#filename#</spa n>Size: #size# bytes<br/>", 69. height: 140, 70. width: 250 71. } 72. }); 73. 74. var semuaDataViewDP = new dataProcessor("datavie w-basic.php"); 75. semuaDataViewDP.init(semuaDataView); 76. 77. semuaDataView.load("dataview-basic.php"); 78. 79. var myContextMenu = new dhtmlXMenuObject({ 80. parent: "contextArea", 81. items:[ 82. {id:"hapus", text: "Hapus", img: "icons/dele te.png"} 83. ], 84. context: true 85. }); 86. 87. var selectedItem; 88. var data; 89. semuaDataView.attachEvent("onBeforeContextMenu", function(id,e) { 90. myContextMenu._doOnContextBeforeCall(e,{id:id} ); 91. semuaDataView.select(id); 92. selectedItem = id; 93. data = semuaDataView.get(id); 94. return false; 95. }); 96. 97. myContextMenu.attachEvent("onClick", function(id ) { 98. if (id == "hapus") { 99. semuaDataView.remove(selectedItem); 100. dhx4.ajax.post("gambardelete.php?filename="+d ata.filename); 101. } 102. }) 103. } 104. </script> 105. </body>

Penjelasan index.html

- Baris 22-31 Buat komponen Window dan tempatkan pada document.body.

- Baris 33 Window tidak boleh keluar dari document.body

- Baris 35 Tempatkan Toolbar Upload pada Window

- Baris 41 Tempatkan Popup untuk upload pada Toolbar

- Baris 43 Tempatkan Form Uploader pada Toolbar, dhtmlxform_item_upload.php

merupakan script untuk upload data ke server

- Baris 49 “onBeforeFileAdd” event saat file dipilih dan sebelum diupload ke server

- Baris 51, cek hanya file gambar saja

- Baris 52, file gambar tidak boleh melebihi 500KB

- Baris 60 “onUploadComplete” event setelah proses upload selesai

- Baris 79, ContextMenu merupakan menu yang muncul apabila saalah satu item pada

DataView diklik-kanan

- Baris 89 “onBeforeContextMenu” event sesaat sebelum context menu tampil

- Baris 97, Event saat context menu (hapus) diklik

2. dataview.php 1. <?php 2. include ("../../codebase/connector/dataview_connec tor.php"); 3. include ("../../codebase/connector/db_filesystem.p hp"); 4. 5. $data = new DataViewConnector("", "FileSystem"); 6. $fileTypes = FileSystemTypes::getInstance(); 7. $fileTypes->setType('image'); 8. $data->render_table("upload/uploaded", "safe_name" ,

"filename,full_filename,size,name,extension,date,is _folder"); 9. 10. ?>

Penjelasan dataview.php

- Baris 6-7 fileTypes hanya untuk file gambar saja

- Baris 8 “upload/uploaded” letak dari file-file gambar tersebut

3. dhtmlxform_item_upload.php (terletak di dalam folder UPLOAD) 1. <?php 2. 3. if (@$_REQUEST["mode"] == "html5" || @$_REQUEST["mo de"] == "flash") { 4. $name = $_FILES["file"]["name"]; 5. $extension = end((explode(".", $name))); # extra () to prevent notice 6. 7. $filename = time() . '_' . rand(100, 999) . '.' . $extension; 8. move_uploaded_file($_FILES["file"]["tmp_name"],"u ploaded/".$filename); 9. 10. header("Content-Type: text/json"); 11. print_r("{state: true, name:'".str_replace("'","\ \'",$filename)."', extra:

{info: 'just a way to send some extra data', param: 'some value here'}}"); 12. 13. } 14. ?>

Penjelasan dhtmlxform_item_upload.php

- Baris 3 Tipe uploader yang disediakan dhtmlx, bisa juga html4

- Baris 7 Nama file secara acak

- Baris 8 Pindahkan file ke lokasi yang ditentukan

- Baris 10-11 Respon setelah proses upload

-

4. Gambar_delete.php 1. <?php 2. $filename = $_GET['filename']; 3. unlink('upload/uploaded/'.$filename); 4. ?>

Penjelasan gambar_delete.php

- Baris 3 “unlink” perintah php untuk menghapus file

HASIL YANG DIDAPAT

Demikianlah pembahasan Galeri Gambar dan Uploader dengan DHTMLX.

• Demo tidak disediakan berhubung “upload file ke server”

• Source code dapat diperoleh di http://tobingvps.com/tutorial/4/galeri-gambar.zip

PENULIS

Manuppak L. Tobing

Masih Newbie dalam DHTMLX Programming

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

Email: [email protected]

Belajar pemrograman web menggunakan dhtmlx dan php part 4 galeri gambar & uploader

Technology

Transcript of Belajar pemrograman web menggunakan dhtmlx dan php part 4 galeri gambar & uploader