Scribd
Unggah
58 tayangan4 halaman

Implementasi Modul Upload File Menggunakan Hayageek Jquery Upload File Pada Codeigniter 3 Part 1

Tulisan ini memberikan panduan lengkap untuk mengimplementasikan modul upload file menggunakan library Hayageek jQuery Upload File pada Codeigniter 3. Tulisan ini menjelaskan cara menginstall library, membuat controller dan view, serta menambahkan script jQuery dan CSS yang dibutuhkan untuk membuat form upload file. Langkah selanjutnya adalah membuat fungsi upload pada controller.

Diunggah oleh

Firman Qodry
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
58 tayangan4 halaman

Implementasi Modul Upload File Menggunakan Hayageek Jquery Upload File Pada Codeigniter 3 Part 1

Tulisan ini memberikan panduan lengkap untuk mengimplementasikan modul upload file menggunakan library Hayageek jQuery Upload File pada Codeigniter 3. Tulisan ini menjelaskan cara menginstall library, membuat controller dan view, serta menambahkan script jQuery dan CSS yang dibutuhkan untuk membuat form upload file. Langkah selanjutnya adalah membuat fungsi upload pada controller.

Diunggah oleh

Firman Qodry
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 4

Implementasi Modul Upload File

Menggunakan Hayageek Jquery Upload File


Pada Codeigniter 3 - Part 1
Oleh: Firman Qodry

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 Fr...

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"></sc
ript>
<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.

Tentang Penulis
Firman Qodry
Halo, saya Firman dan saya adalah seorang programmer web yang masih
terus dan akan terus belajar. Saya senang akan ilmu-ilmu baru seputar
web dan mobile programming.

Anda mungkin juga menyukai