Halo teman-teman Jagocoding, perkenalkan nama saya Firman. Saya seorang “kuli program” web hehehe, pada ngerti kan maksud saya. Dan ini adalah tutorial pertama saya di Jagocoding.com. Kali ini saya akan coba perlihatkan bagaimana caranya menggunakan library hayageek jQuery upload file pada Framework Codeigniter versi 3, dan yang saya gunakan pada tutorial ini yaitu versi 3.0.6.
Pertama-tama siapkan sebuah halaman web menggunakan framework CI versi 3.0.6. Lakukan setting base_url pada file config.php sesuai dengan nama web kalian.
Lalu buatlah controller (Fileupload.php) dan view (view_fileupload.php). Pastikan controller kalian sudah seperti contoh di bawah ini:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Fileupload extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->helper(array('url','file'));
}
public function index() {
$this->fileupload();
}
function fileupload() {
$data['title'] = "Codekiddies Lab | File Upload";
$this->load->view('view_fileupload',$data);
}
function upload() {
//upload function here!
}
}
Dan file view_fileupload.php kalian sudah seperti di bawah ini:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title><?php echo $title; ?></title> </head> <body> </body> </html>
Kemudian sertakan file CSS dan JS berikut ini pada tag head halaman web kalian:
<link href="http://hayageek.github.io/jQuery-Upload-File/4.0.10/uploadfile.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://hayageek.github.io/jQuery-Upload-File/4.0.10/jquery.uploadfile.min.js"></script>
Kemudian pada tag awalan body, berikan tag div dengan nama id seperti di bawah ini:
<h1>Hayageek jQuery File Upload</h1> <div id="file_upload">Upload</div>
Lalu tambahkan javascript di akhir tag body seperti di bawah ini:
<script>
var base_url = "<?php echo base_url(); ?>";
$(document).ready(function() {
$("#file_upload").uploadFile({
url: base_url + '/fileupload/upload',
fileName: "file_upload"
});
});
</script>
Silahkan akses ke halaman web kalian dan Tadaaa~ form upload sudah siap digunakan. Tetapi sampai sini kalian belum dapat melakukan proses upload file dikarenakan kita belum membuat fungsi upload pada controller. Tutorial selanjutnya akan saya bahas mengenai pembuatan fungsi upload dan option-option tambahan yang dapat kita gunakan untuk mempercantik form upload yang sudah kita buat.
Sampai jumpa lagi di tutorial selanjutnya.
