Assalamu’alaikum warahmatullahi wabarakatuh
Bismillahirrahmanirrahim
Hai semuanya, setelah sekian lama saya tidak menulis karena kesibukan pekerjaan dan perkuliahan pada kesempatan kali ini saya akan memberikan sebuah tutorial yang mungkin berguna untuk pembaca setia website/blog ini. Kali ini saya akan membahas tutorial yang sebelumnya telah diminta oleh salah satu teman kita yaitu mengenai upload banyak gambar (multiple) menggunakan DropzoneJS yang datanya disimpan didalam database MySQL dan bisa ditampilkan (preview) setelah gambarnya diupload dan pastinya juga bisa dihapus.
DropzoneJS adalah library open source yang bisa melakukan upload banyak gambar sekaligus dengan cara drag atau drop dengan preview gambar terlebih dahulu sebelum diupload ke dalam sistem.
Biasanya fitur upload banyak gambar digunakan saat sobat sekalian ingin membuat sebuah galeri gambar tapi disini saya tidak membahas tentang membuat galeri gambar melainkan tentang tehnik melakukan upload banyak gambar dengan DropzoneJS. Oke langsung saja simak dengan seksama tutorial dibawah ini, ingat ketelitian itu penting :).
Langkah Pertama
Untuk bisa lancar mengikuti tutorial ini sobat harus mendownload file-file yang dibutuhkan disini, setelah sobat mendownload semeua filenya pastikan sobat melihat folder css, js dan images.
Langkah Kedua
Silahkan buat database dengan nama yang sobat inginkan dan eksekusi query sql dibawah ini
1CREATE TABLE `aguzrybu_dbtutorial`.`dropzone` ( `id` INT(10) NOT NULL AUTO_INCREMENT , `image` VARCHAR(200) NOT NULL , `created_at` TIMESTAMP NOT NULL , `updated_at` TIMESTAMP NOT NULL , PRIMARY KEY (`id`)) ENGINE = MyISAM;
Langkah Ketiga
Extract file-file yang sobat telah download ke dalam folder root web server local milik sobat jangan lupa untuk membuat folder dengan nama dropzonejs atau sesuai dengan keinginan sobat, karena saya menggunakan windows folder saya ada di C:\xampp\htdocs\dropzonejs.
Langkah Keempat
Buatlah file dengan nama index.php, kemudian ketik atau dikopi juga boleh kode dibawah ini, setelah itu simpan (save), file ini digunakan sebagai centarl dari data upload DropzoneJS.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117<!--
Author : Aguzrybudy
Created : Sabtu, 30-Maret-2019
Title : Upload Gambar Menggunakan Dropzone
-->
<!doctype html>
<html lang="en">
<head>
<title>Aguzrybudy.com | Upload Gambar Menggunakan Dropzone Js</title>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport"/>
<meta content="Aguzrybudy" name="author"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/dropzone.js"></script>
<link rel="stylesheet" href="css/dropzone.css">
<style>
.wrapper{
margin-top:2%;
}
.dropzone .dz-preview .dz-image img{
width:100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="jumbotron">
<h1 class="display-6">Upload Gambar Menggunakan Dropzone Js</h1>
<p class="lead">Upload Gambar Menggunakan Dropzone Js By Aguzrybudy, Sabtu 30 April 2019</p>
<hr class="my-4">
<!-- Change /upload-target to your upload address -->
<form id="frmdropzone" action="#" class="dropzone"></form>
<div class="text-center mt-3">
<button type="button" id="btnsubmit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function($) {
Dropzone.autoProcessQueue = false; //setting dropzone agar tidak ototmatis upload file
Dropzone.autoDiscover = false; //setting dropzone agar tidak ototmatis upload file
var myDropzone = new Dropzone('#frmdropzone', {
url: "upload.php",
autoProcessQueue: false,
parallelUploads: 8, //maksimal jumlah upload
uploadMultiple: false,
maxFilesize: 2, //ukuran file 2MB
addRemoveLinks: true,
acceptedFiles:'image/jpeg,image/png,image/jpg',
init: function() {
thisDropzone = this;
this.on("uploadprogress", function(file, progress) {
console.log("File progress", progress);
});
this.on("complete", function(file) {
//pesan jika upload success
});
//menampilkan file dari database menggunakan ajax
$.get('read.php', { id: '0' }, function(data) {
$.each(data, function(key,value){
var mockFile = { name: value.name, size: value.size, id: value.id };
thisDropzone.options.addedfile.call(thisDropzone, mockFile);
thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "images/"+value.name);
});
});
},
//Menghapus file dari database menggunakan ajax
removedfile: function(file) {
var name = file.name;
var id = file.id;
if (confirm("Are you sure want to delete?")) {
$.ajax({
type: 'POST',
url: 'delete.php',
data: {id: id, name: name},
sucess: function(data){
console.log('success: ' + data);
alert('Gambar telah di dihapus');
}
});
var ref;
if((ref = file.previewElement) != null){
return ref.parentNode.removeChild(file.previewElement);
}
return false;
}
},
});
$("#btnsubmit").on("click", function(e) {
//fungsi untuk mengupload gambar ke database
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
}
$('#frmdropzone').submit();
alert('Gambar telah di upload');
window.location.href="index.php";
return false;
});
})(jQuery)
</script>
</body>
</html>
Langkah Kelima
Buatlah file dengan nama koneksi.php, kemudian ketik atau dikopi juga boleh kode dibawah ini, setelah itu simpan (save), file ini berguna untuk menghubungkan kedalam database MySQL.
12345678910<?php
$host="localhost";
$user="root"; //user database
$pass=""; //password database
$database="dbphp7"; //nama database
$mysqli=new mysqli($host,$user,$pass,$database);
if (mysqli_connect_errno()) {
trigger_error('Koneksi ke database gagal: ' . mysqli_connect_error(), E_USER_ERROR);
}
?>
Langkah Keenam
Buatlah file dengan nama upload.php, kemudian ketik atau dikopi juga boleh kode dibawah ini, setelah itu simpan (save), file ini berguna untuk menyimpan data upload yang kita submit.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<?php
include "koneksi.php";
$ds = DIRECTORY_SEPARATOR; //fungsinya untuk membuat garis /
$storeFolder = 'images';
$time = time()."-";
if (!empty($_FILES)) {
$errors = array();
$maxsize = 2097152; //2MB convert jadi byte
$acceptable = array(
'image/jpeg',
'image/jpg',
'image/png'
);
if(($_FILES['file']['size'] >= $maxsize) || ($_FILES["file"]["size"] == 0)) {
$errors[] = 'File too large. File must be less than 2 megabytes.';
}
if(!in_array($_FILES['file']['type'], $acceptable) && (!empty($_FILES["file"]["type"]))) {
$errors[] = 'Invalid file type. Only PDF, JPG, GIF and PNG types are accepted.';
}
if(count($errors) === 0) {
$tempFile = $_FILES['file']['tmp_name'];
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
$targetFile = $targetPath.$time.$_FILES['file']['name'];
move_uploaded_file($tempFile,$targetFile);
$image_name = $time.$_FILES['file']['name'];
$created_at = date('Y-m-d H:i:s');
$updated_at = date('Y-m-d H:i:s');
$mysqli->query("INSERT INTO dropzone (image,created_at,updated_at) VALUES ('$image_name','$created_at','$updated_at')");
$result = array('status'=> 'sucesss');
header('Content-type: text/json');
header('Content-type: application/json');
echo json_encode($result);
} else {
foreach($errors as $error) {
echo '<script>alert("'.$error.'");</script>';
}
die();
}
} else {
$result = array('status'=> 'error');
header('Content-type: text/json');
header('Content-type: application/json');
echo json_encode($result);
}
?>
Langkah Ketujuh
Buatlah file dengan nama read.php, kemudian ketik atau dikopi juga boleh kode dibawah ini, setelah itu simpan (save), file ini berguna untuk membaca/menampilkan data yang telah kita upload.
1234567891011121314151617181920<?php
include "koneksi.php";
$ds = DIRECTORY_SEPARATOR;
$result = array();
$storeFolder ="images";
$query=$mysqli->query("SELECT * FROM dropzone");
if($query->num_rows> 0){
while($file=mysqli_fetch_array($query)){
if ( '.'!=$file && '..'!=$file) {
$obj['name'] = $file['image'];
$obj['size'] = filesize($storeFolder.$ds.$file['image']);
$obj['id'] = $file['id'];
$result[] = $obj;
}
}
}
header('Content-type: text/json');
header('Content-type: application/json');
echo json_encode($result);
?>
Langkah Ketujuh
Buatlah file dengan nama delete.php, kemudian ketik atau dikopi juga boleh kode dibawah ini, setelah itu simpan (save), file ini berguna untuk menghapus data gambar dari folder dan database.
123456789101112131415161718192021222324<?php
include "koneksi.php";
$hapus=$mysqli->query("select*from dropzone where id='$_POST[id]'");
// memilih gambar untuk dihapus
$nama_gambar=mysqli_fetch_array($hapus);
// nama field gambar
$lokasi=$nama_gambar['image'];
// alamat tempat gambar
$hapus_gambar="images/$lokasi";
// script delete gambar dari folder
unlink($hapus_gambar);
// script delete gambar dari tabel database
$mysqli->query("DELETE FROM dropzone WHERE id='$_POST[id]'");
// script untuk cek status setelah delete
$result = array('status'=> 'success');
header('Content-type: text/json');
header('Content-type: application/json');
echo json_encode($result);
// untuk pindah kehalaman lain gunakan script dibawah ini
//header('location:index.php');
?>
Langkah Kedelapan
Jalankan atau eksekusi script yang telah sobat buat, kemudian lihat hasilnya akan terlihat seperti gambar dibawah ini.
Screenshoot Belum tersedia silahkah lihat demo dengan mengklik link dibawah ini
Tutorial ini tidak disertai dengan edit gambar yang telah diupload, meskipun saya belum buat tutorialnya tapi saya akan beritahu salah satu caranya. Caranya yaitu dengan menggunakan modal bootstrap 4 (saat ini yang saya gunakan), sobat hanya perlu mengambil parameter id dari gambar menggunakan jQuery dan mengganti gambar dengan file input biasa atau lainnya.
NB: Script saya tulis menggunakan PHP version 7+, database MySQL dan Ajax
Sampai disini dulu tutorial dari saya , Semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan, untuk download source dan demo dari code diatas bisa klik link dibawah ini.
0 Comments
Berkomentarlah dengan baik dan sopan
Klik gambar emo untuk melihat kodenya
Untuk menyisipkan emoticon, beri satu spasi sebelum memasukkan kode