Selamat datang pada tutorial hari ini.
Kali ini saya mau membagikan panduan gimana caranya melakukan upload banyak foto sekaligus dengan menggunakan framework Codeigniter, dan tentunya proses uploadnya melalui ajax.
Btw alasan saya membuat tutorial ini adalah dikarenakan sejak pertama kali saya publish Apricot CMS, saya banyak menerima pesan masuk dari teman teman yang sebagian besar menanyakan tentang komponen kompenen didalamnya.
Dan salah satu yang sering ditanyakan adalah tentang fitur drag dan drop upload gambar yang ada pada halaman admin Apricot CMS.
Contoh area upload pada yang ada pada halaman administrator Apricot CMS
Kepada semua yang bertanya, sebenarnya saja sudah saya arahkan untuk langsung melihat source codenya. Tapi banyak yang masih bingung, mungkin karena praktiknya sudah lumayan kompleks dan juga karena code codenya sudah sesak sesakan dengan code code komponen lain.
Untuk itu, kali ini saya mau buatkan tutorialnya. Saya harapkan setelah selesai membaca dan mengikuti tutorial ini, kamu sudah bisa memahami dan dapat mempraktikanya ke dalam kasus yang lebih kompeks lagi.
Sebenarnya pembuatannya cukup mudah dan sederhana dikarenakan pada kasus ini kita akan menggunakan sebuah plugin javascript yang bernama Dropzone.js.
(Silahkan kan download pluginnya disini atau download contoh yang sudah jadi pada bagian akhir artikel ini).
Plugin ini nantinya menghandle proses pengiriman/upload data keserver (melalui Ajax). Setelah itu, pada sisi server, kita akan menggunakan Codeigniter untuk mempeoses penyimpanan file dan penyimpanan database.
Persiapan
1. Buat directory baru pada localhost kamu dengan nama upload
2. Didalam directory upload
, buat dua directory bernama upload-foto
dan assets
3. Ekstrak semua file file Codeigniter didalam directory upload
, sehingga menjadi seperti ini
4. DIdalam folder assets
, masukan semua file Dropzone bersama file jQuery.
5. Buat Controller baru didalam directory application/controllers
bernama Upload.php.
6. Buat View baru didalam directory application/views
bernama upload_view.php.
7. Buka file application/config/config.php
lalu atur base url menjadi $config['base_url'] = 'http://localhost/upload/'
8. Buka phpmyadmin lalu buat database baru bernama upload
.
9. Buatlah table baru didalamnya
CREATE TABLE `foto` (
`id` int(11) PRIMARY KEY AUTO_INCREMENT,
`nama_foto` varchar(250),
`token` varchar(100)
)
Akan dapat seperti ini
10. Buka file application/config/database.php
lalu atur nama databasenya
Coding
Pada file upload_view.php, masukan kode berikut ini
<!DOCTYPE HTML>
<html>
<head>
<title>Multiple Upload</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/dropzone.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/basic.min.css') ?>">
<script type="text/javascript" src="<?php echo base_url('assets/jquery.js') ?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/dropzone.min.js') ?>"></script>
<style type="text/css">
body{
background-color: #E8E9EC;
}
.dropzone {
margin-top: 100px;
border: 2px dashed #0087F7;
}
</style>
</head>
<body>
<div class="dropzone">
<div class="dz-message">
<h3> Klik atau Drop gambar disini</h3>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
dan pada file Upload.php
class Upload extends CI_Controller
{
function __construct(){
parent::__construct();
$this->load->database();
$this->load->helper(array('url','file'));
}
function index(){
$this->load->view('upload_view');
}
}
Buka browser lalu masukan alamat ini http://localhost/upload/index.php/upload
Ini hasilnya
Namun masih belum bisa mengupload gambar.
Masih pada file upload_view.php, tambahkan code berikut didalam tag javascript
nya
Dropzone.autoDiscover = false;
var foto_upload= new Dropzone(".dropzone",{
url: "<?php echo base_url('index.php/upload/proses_upload') ?>",
maxFilesize: 2,
method:"post",
acceptedFiles:"image/*",
paramName:"userfile",
dictInvalidFileType:"Type file ini tidak dizinkan",
addRemoveLinks:true,
});
//Event ketika Memulai mengupload
foto_upload.on("sending",function(a,b,c){
a.token=Math.random();
c.append("token_foto",a.token); //Menmpersiapkan token untuk masing masing foto
});
Dan pada file Upload.php, masukan code PHP berikut ini
class Upload extends CI_Controller
{
function __construct(){
parent::__construct();
$this->load->database();
$this->load->helper(array('url','file'));
}
function index(){
$this->load->view('upload_view');
}
function proses_upload(){
$config['upload_path'] = FCPATH.'/upload-foto/';
$config['allowed_types'] = 'gif|jpg|png|ico';
$this->load->library('upload',$config);
if($this->upload->do_upload('userfile')){
$token=$this->input->post('token_foto');
$nama=$this->upload->data('file_name');
$this->db->insert('foto',array('nama_foto'=>$nama,'token'=>$token));
}
}
}
Sekarang refresh browser kamu , lalu drag beberapa foto didalamnya. Kini area upload sudah berfungsi
Foto foto nya sudah berhasil terupload dan sudah ada didalam folder upload.
Dan juga nama nama foto sudah tersimpan didalam database
Sampai disini semuanya sudah berjalan dengan baik.
Tapi masih ada satu hal lagi. Gimana jika kita ingin membatalkan foto yang sudah terupload dan sudah tersimpan didatabase?
Tentu itu bisa dilakukan. Jika kamu perhatikan dibawah thumbnail gambar terdapat anchor link "Remove File". Jika kamu klik link itu, gambar akan menghilang dari area upload. Namun file yang sudah terupload akan tetap ada dan tidak akan terhapus. Begitupun data yang telah tersimpan didatabase, masih tetap akan ada didatabase.
Jadi, bagaimana caranya agar data yang ada diserver ikut terhapus ketika kita mengklik "Remove File"? SIlahkan tambahkan code code berikut ini.
Pada file upload_view.php , dibagian javascriptnya tambahkan beberapa code sehingga menjadi seperti ini
Dropzone.autoDiscover = false;
var foto_upload= new Dropzone(".dropzone",{
url: "<?php echo base_url('index.php/upload/proses_upload') ?>",
maxFilesize: 2,
method:"post",
acceptedFiles:"image/*",
paramName:"userfile",
dictInvalidFileType:"Type file ini tidak dizinkan",
addRemoveLinks:true,
});
//Event ketika Memulai mengupload
foto_upload.on("sending",function(a,b,c){
a.token=Math.random();
c.append("token_foto",a.token); //Menmpersiapkan token untuk masing masing foto
});
//Event ketika foto dihapus
foto_upload.on("removedfile",function(a){
var token=a.token;
$.ajax({
type:"post",
data:{token:token},
url:"<?php echo base_url('index.php/upload/remove_foto') ?>",
cache:false,
dataType: 'json',
success: function(){
console.log("Foto terhapus");
},
error: function(){
console.log("Error");
}
});
});
Terakhir, pada file Upload.php, tambahkan juga beberapa code didalamnya, hingga menjadi seperti ini
class Upload extends CI_Controller
{
function __construct(){
parent::__construct();
$this->load->database();
$this->load->helper(array('url','file'));
}
function index(){
$this->load->view('upload_view');
}
//Untuk proses upload foto
function proses_upload(){
$config['upload_path'] = FCPATH.'/upload-foto/';
$config['allowed_types'] = 'gif|jpg|png|ico';
$this->load->library('upload',$config);
if($this->upload->do_upload('userfile')){
$token=$this->input->post('token_foto');
$nama=$this->upload->data('file_name');
$this->db->insert('foto',array('nama_foto'=>$nama,'token'=>$token));
}
}
//Untuk menghapus foto
function remove_foto(){
//Ambil token foto
$token=$this->input->post('token');
$foto=$this->db->get_where('foto',array('token'=>$token));
if($foto->num_rows()>0){
$hasil=$foto->row();
$nama_foto=$hasil->nama_foto;
if(file_exists($file=FCPATH.'/upload-foto/'.$nama_foto)){
unlink($file);
}
$this->db->delete('foto',array('token'=>$token));
}
echo "{}";
}
}
Demikianlah keseluruhan tutorial uploade mutiple foto dengan codeigniter.
Karena sudah mempelajari dasar dasar ini, silahkan dikembangkan dan buat untuk kepentingan yang lebih kompleks lagi .
Silahkan download contoh project yang sudah jadi, jangan lupa dibuat dulu databasenya.
DOWNLOAD
Mohon dikoreksi jika ada kesalahan pada tutorial ini. Dan jika ada komentar atau pertanyaa, silahkan tinggalkan pesan kamu pada form komentar dibawah :)