Jquery AJax File Upload Codeigniter Oleh: Dimas Agung Noviyanto Pada tutorial kali ini, kita akan belajar membuat form upload file pada codeigniter dengan jquery ajax. Pertama, pastikan kalian mempunya file ajaxfileupload.js, dapat diunduh disini Selanjutnya siapkan file codeigniter dan tempatkan pada localhost masing-masing. Buat folder ajaxupload didalam folder h... Upload file dengan php mungkin suatu hal yang tidak terlalu menjadi momok "menyeramkan" untuk para programer website, namun jika kalian pernah coba membuat uploader file dengan codeigniter, hal ini dapat menjadi pengalaman yang menjengkelkan dan memusingkan. Pada tutorial ini, saya akan berbagi bagaimana membuat uploader dengan codeigniter dan ajax yang tidak hanya bekerja dengan optimal, namun tetap pada faedah MVC. Pertama, pastikan kalian mempunya Codeigniter, jquery, dan script AjaxFileUpload yang dapat kalian copy pada tutorial ini. Pada tutorial ini kalian diharapkan telah mengerti dan dapat menggunakan codeigniter dan jquery, jika belum silahkan pelajari kedua hal tersebut terlebih dahulu. Buat sebuah databse dan sebuah tabel dengan nama files. CREATE TABLE `files` ( `id` int NOT NULL AUTO_INCREMENT PRIMARY KEY, `filename` varchar(255) NOT NULL, `title` varchar(100) NOT NULL ); Tahap 1 Buat form upload
Pertama, kita perlu membuat form upload sebagai interface untuk upload file, copy kode berikut dan simpan dengan nama upload.php <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></s cript> <script src="<?php echo base_url()?>js/site.js"></script> <script src="<?php echo base_url()?>js/ajaxfileupload.js"></script> <link href="<?php echo base_url()?>css/style.css" rel="stylesheet" /> </head> <body> <h1>upload File</h1> <form method="post" action="" id="upload_file"> <label for="title">title</label> <input type="text" name="title" id="title" value="" /> <label for="userfile">file</label> <input type="file" name="userfile" id="userfile" size="20" /> <input type="submit" name="submit" id="submit" /> </form> <h2>files</h2> <div id="files"></div> </body> </html> Tahap 2 Buat controller Buat sebuah controller sebagai jembatan antara file view dan model, copy kode berikut, simpan dengan nama upload.php
class Upload extends CI_Controller public function construct() parent:: construct(); $this->load->model('files_model'); $this->load->database(); $this->load->helper('url'); public function index() $this->load->view('upload'); Tahap 3 Buat Custom Javascript Untuk menangani submit form pada view, kita buat sebuah file javascript yang nantinya akan digunakan untuk memproses inputan dari pengguna. Copy kode berikut dan simpan dengan nama site.js $(function() $('#upload_file').submit(function(e) e.preventdefault(); $.ajaxfileupload( url :'./upload/upload_file/', secureuri :false, fileelementid :'userfile', datatype : 'json', data : 'title' : $('#title').val(), success : function (data, status) if(data.status!= 'error') $('#files').html('<p>reloading files...</p>'); refresh_files(); $('#title').val(''); alert(data.msg); ); return false;
); ); Pada bagian ini kita membuat form handler dengan javascript pada sisi client server, dan mengirimkan konten data via ajax. Jika tidak terjadi error, kita refresh file list, clear title dan kita tampilkan alert respon. Tahap 4 Membuat fungsi untuk upload file Controller Untuk upload file, url yang akan digunakan adalah /upload/upload_file/, jadi kita harus membuat method baru di controller upload, copy code berikut dan tempatkan pada controller upload yang telah kita buat sebelumnya. public function upload_file() $status = ""; $msg = ""; $file_element_name = 'userfile'; if (empty($_post['title'])) $status = "error"; $msg = "Please enter a title"; if ($status!= "error") $config['upload_path'] = './files/'; $config['allowed_types'] = 'gif jpg png doc txt'; $config['max_size'] = 1024 * 8; $config['encrypt_name'] = TRUE; $this->load->library('upload', $config); if (!$this->upload->do_upload($file_element_name)) $status = 'error'; $msg = $this->upload->display_errors('', ''); else $data = $this->upload->data(); $file_id = $this->files_model->insert_file($data['file_name'], $_POST['title']); if($file_id) $status = "success";
$msg = "File successfully uploaded"; else unlink($data['full_path']); $status = "error"; $msg = "Something went wrong when saving the file, please try again."; @unlink($_files[$file_element_name]); echo json_encode(array('status' => $status, 'msg' => $msg)); Kita buat pengecekan sederhana untuk memastikan apakah inputan title berisi sebuah value atau tidak. Jika value title tidak kosong kita load librari upload bawaan codeigniter. Selanjutnya. kita coba upload file. Jika berhasil, kita simpan judul dan nama file ke dalam databse. Model Sesuai dengan konsep MVC, kita buat sebuah model untuk menangani fungsi-fungsi yang terkait dengan database. Copy kode berikut dan simpan dengan nama files_model.php class Files_Model extends CI_Model public function insert_file($filename, $title) $data = array( 'filename' => $filename, 'title' => $title ); $this->db->insert('files', $data); return $this->db->insert_id(); Folder Upload Selanjutnya kita buat folder untuk menampung file-file yang akan di upload pada folder web root kita dengan nama files, pastikan folder tersebut dapat diakses(writable) oleh server. Tahap 5 Buat Daftar file upload
Buka file site.js yang telah kita buat sebelumnya, kemuadian masukkan kode berikut: function refresh_files() $.get('./upload/files/').success(function (data) $('#files').html(data); ); fungsi ini akan memasukan data kedalam varibale file yang terdapat pada view untuk menampilkan daftar file yang diupload, kita harus memanggil fungsi ini pada awal ketika load halaman untuk menampilkan daftar file upload. Untuk itu kita harus menempatkan fungsi ini pada document.ready.function di bagian atas file. refresh_files(); Controller Untuk menampilkan daftar file upload, url yang akan digunakan adalah /upload/files/, jadi kita harus membuat method baru di controller upload, copy code berikut dan tempatkan pada controller upload yang telah kita buat sebelumnya. public function files() $files = $this->files_model->get_files(); $this->load->view('files', array('files' => $files)); Model Untuk retrieve data file upload dari database, kita buat fungsi get_files, masukkan kode berikut ke dalam files_model.php yang telah kita buat sebelumnya. public function get_files()
return $this->db->select() ->from('files') ->get() ->result(); View Kita perlu membuat view untuk menampilkan daftar file upload, buat file baru dengan nama files.php, dan paste kode berikut: <?php if (isset($files) && count($files))?> <ul> <?php foreach ($files as $file)?> <li class="image_wrap"> <a href="#" class="delete_file_link" data-file_id="<?php echo $file->id?>">delete</a> <strong><?php echo $file->title?></strong> <br /> <?php echo $file->filename?> </li> <?php?> </ul> </form> <?php else?> <p>no Files Uploaded</p> <?php?> Melalui view ini kita akan menampilkan judul dan nama file masing-masing. Kita juga menambahkan link untuk menghapus file, yang masing-masing memiliki atribut ID dari file yang tersimpan dalam database. Delete File Untuk dapat menghapus file yang telh kita upload, kita buat fungsi baru untuk menangani hal
tersebut. Javascript Copy dan masukkan kode berikut pada document.ready.function: $('.delete_file_link').live('click', function(e) e.preventdefault(); if (confirm('are you sure you want to delete this file?')) var link = $(this); $.ajax( url : './upload/delete_file/' + link.data('file_id'), datatype : 'json', success : function (data) files = $(#files); if (data.status === "success") link.parents('li').fadeout('fast', function() $(this).remove(); if (files.find('li').length == 0) files.html('<p>no Files Uploaded</p>'); ); else alert(data.msg); ); ); Ketika link delete di click, kita tampilkan dialog konfirmasi penghapusan. Jika konfirmasi ok maka kita panggil fungsi /upload/delete_file. Controller Seperti penjelasan diatas, url yang akan kita akses untuk menghapus file adalah /upload/delete_file, jadi kita buat fungsi delete_file, masukkan kode berikut pada controller upload. public function delete_file($file_id)
if ($this->files_model->delete_file($file_id)) $status = 'success'; $msg = 'File successfully deleted'; else $status = 'error'; $msg = 'Something went wrong when deleteing the file, please try again'; echo json_encode(array('status' => $status, 'msg' => $msg)); Model Buka files_model.php dan masukkan kode berikut: public function delete_file($file_id) $file = $this->get_file($file_id); if (!$this->db->where('id', $file_id)->delete('files')) return FALSE; unlink('./files/'. $file->filename); return TRUE; public function get_file($file_id) return $this->db->select() ->from('files') ->where('id', $file_id) ->get() ->row(); Karena kita hanya mengirimkan ID, kita perlu untuk mendapatkan nama file, jadi kita membuat metode baru untuk memuat file. Setelah dimuat, kita menghapus record dan menghapus file dari server. Selesai! Jika Anda menjalankannya, Anda harus dapat meng-upload file, melihatnya muncul, dan kemudian menghapusnya.
Tentang Penulis Dimas Agung Noviyanto