Tutorial Codeigniter: Upload file dengan Codeigniter dan

Ajax
 11 January 2018
 M Fikri Setiadi
 Ajax
 13,653 kali di baca
 25 Komentar

Saya pikir Anda akan setuju jika saya mengatakan ini:

“Sangatlah SULIT untuk membuat upload file dengan Codeigniter dan AJAX Jquery.”

Kabar baiknya:

Nah, ternyata, Anda dapat dengan mudah membuat upload file dengan Codeigniter dan AJAX
Jquery, Sekarang juga.!

Ini adalah cara yang saya gunakan beberapa bulan yang lalu untuk project saya, dan saya telah
membandingkan dengan cara lain dari situs barat sana.

Dan tidak ada cara yang lebih simple dari ini.

Hari ini, dalam artikel ini, saya akan jelaskan secara detail bagaimana membuat upload file
dengan Codeigniter dan Ajax jquery serta menginput nama file yang diupload kedalam database.

Tidak hanya itu!

Sekaligus, bagaimana meng-enkripsi nama file (file name) yang diupload.

Secara STEP-BY-STEP!

Bagaimana saya menemukan cara sederhana untuk upload file dengan Codeigniter dan
Ajax Jquery

Sebelum saya menjelaskan bagaimana membuat upload file dengan codeigniter dan ajax jquery,
izinkan saya berbagi cerita singkat dengan Anda.

Beberapa bulan yang lalu saya tertarik untuk membuat upload file image dengan codeigniter dan
ajax jquery.

Akhirnya, saya mulai berselancar di google.

Dan saya menemukan artikel yang sangat menarik dari tutplus.com.

Berikut screenshoot artikelnya:

Source: https://code.tutsplus.com/tutorials/how-to-upload-files-with-codeigniter-and-ajax--net-
21684

Pertama kali saya melihat artikel ini, saya langsung ingin mencoba menerapkannya.

Setelah saya baca kembali, ternyata dia menggunakan sebuah library tambahan yaitu
AjaxFileUpload.
Ketika saya klik link AjaxFileUpload, ternyata saya menemukan broken link.

Dan akhirnya saya memutuskan untuk membuat upload file dengan codeigniter dan ajax jquery
tanpa library AjaxFileUpload.

Ternyata, tanpa library AjaxFileUpload pun, tetap mudah membuat upload file dengan ajax dan
codeigniter.

Bahkan lebih mudah untuk di sesuaikan (customize) di kemudian hari.

Lalu, bagaimana membuat upload file dengan Codeigniter dan Ajax jquery tanpa library
tambahan AjaxFileUpload?

Mari kita mulai!

Kebanyakan pemula mengalami kesulitan dalam membuat upload file dengan codeigniter dan
Ajax jquery.

Sebagian besar dari Anda mungkin telah berhasil memuat upload file dengan codeigniter.

Akan tetapi,

Untuk membuat upload file dengan Codeigniter + Ajax Jquery banyak menemukan kesulitan.

Inillah masalahnya:

Kebanyakan pemula kesulitan mengambil value (nilai) dari input file yang di submit (kirim)
menggunakan Ajax Jquery.

Itu karena,

Untuk melakukan submit form upload file, harus menggunakan form_open_multipart.

Form_open_multipart hanya dapat anda gunakan jika upload file tanpa Ajax Jquery.

Akan tetapi,

Jika Anda ingin menggunkan Ajax Jquery, Anda harus menggunakan FormData().

Mungkin terdengar rumit, tetapi sebenarnya tidak.

Apa itu FormData?

Bagaimana penggunaannya?
Berikut step by step bagaimana membuat upload file dengan codeigniter dan Ajax Jquery.

Dengan mengikuti step by step berikut, Anda akan segera mengerti apa itu FormData dan
bagaimana penggunaannya.

Stay tuned!

Step 1. Pesiapan

Ini penting!

Jika Anda melewatkan step ini, artinya Anda melewatkan keseluruhan dari artikel ini.

Pesiapan yang baik akan menentukan keberhasilan Anda mengikuti artikel ini. Semakin baik
persiapan Anda, maka akan semakin besar kemungkinan anda berhasil mengikuti artikel ini.

Jangan melewatkan step ini, meskipun terasa kompleks.

Jadi, apa saja yang perlu Anda persiapkan?

Berikut listnya:

1. Framework Codeigniter (www.codeigniter.com)

Codeigniter merupakan framework php utama yang akan kita gunakan pada tutorial kali ini. Jika
anda belum memilikinya, silahkan download di situs resminya: www.codeigniter.com 

2. Bootstrap (www.getbootstrap.com)

Bootstrap merupakan framework untuk mempercantik user interface (UI). Jika Anda belum
memilikinya, silahkan download terlebih dahulu di situs resminya: www.getbootstrap.com  

3. Jquery (www.jquery.com)

Ini penting!

Jquery merupakan framework javascript yang berfungsi untuk membantu mempermudah dalam
penulisan script berbasis AJAX.

Jika Anda belum memilikinya silahkan download di situs resminya: www.jquery.com

Wajib hukumnya bagi Anda untuk memiliki 3 hal berikut:

Ok, Mari kita lanjutkan!

Step 2. Pembuatan struktur database

Pada artikel ini, saya menggunakan mysql sebagai Database Management System (DBMS).

Jika Anda juga menggunakan mysql, anda akan menyukai artikel ini.

Tetapi,

Jika anda menggunakan DBMS yang lain seperti Oracle, SQL Server, Maria DB atau lainnya.

No, Problem!

Asalkan Anda mengerti bahasa SQL (Structured Query Language)  dengan baik.

Ok, mari kita lanjut!

Buat sebuah database, disini saya membuat sebuah database dengan nama db_upload.

Jika Anda membuat database dengan nama yang sama itu lebih baik.

Silahkan eksekusi query berikut untuk membuat database:

1CREATE DATABASE db_upload;

Query diatas akan menghasilkan sebuah database dengan nama db_upload.

Selanjutnya,

Buat table dengan nama tbl_galeri dengan struktur seperti gambar berikut:

Untuk membuat struktur table seperti gambar diatas,

Silahkan eksekusi query berikut:

1CREATE TABLE tbl_galeri(

2id INT(11) PRIMARY KEY AUTO_INCREMENT,
3judul VARCHAR(50),
4gambar VARCHAR(40)
)ENGINE=INNODB;
5

Step 3. Installasi Codeigniter

Selanjutnya,

Extract codeigniter yang sudah di download sebelumnya ke folder www (jika menggunakan
Wampserver) atau htdocs (jika menggunakan XAMPP).

Karena saya menggunakan wampserver, jadi saya mengextract-nya di c:/wamp/www/

Kemudian rename (ganti nama) project codeigniter Anda sesuai dengan project Anda. Disini
saya memberi nama ci_upload.

Seperti gambar berikut:

Buka folder ci_upload dan buat folder assets sejajar dengan folder application dan system,
kemudian sertakan file bootstrap dan jquery didalam folder assets.

Kemudian,

Buat sebuah folder lagi didalam folder assets, dan beri nama images.

Folder images ini berfungsi untuk menampung file image yang di upload nantinya.

Sehingga terlihat struktur project kita seperti berikut:

Pada gambar diatas dapat dilihat, bahwa didalam folder assets terdapat folder css, images, dan
js.

Didalam folder css, terdapat file bootstrap.css

Didalam folder js, terdapat file bootstrap.js dan file jquery-3.2.1.js

Step 4. Konfigurasi Codeigniter

Langkah selanjutnya adalah konfigurasi pada codeigniter.

Berikut beberapa file yang perlu Anda konfigurasi:

 

1. Autoload.php

Untuk melakukan konfigurasi pada file autoload.php, silahkan buka folder:

ci_upload/application/config/autoload.php

seperti berikut gambar berikut:

Buka file autoload.php dengan text editor (notepad++, sublime text, atau lainnya).

Kemudian temukan kode berikut:

1$autoload['libraries'] = array();
2$autoload['helper'] = array();

Atur menjadi seperti berikut:

1$autoload['libraries'] = array('database');
2$autoload['helper'] = array('url');

2. Config.php

Untuk melakukan konfigurasi pada file config.php, silahkan buka folder:

ci_upload/application/config/config.php

seperti berikut gambar berikut:

Buka file config.php dengan text editor, kemudian temukan kode berikut:

1$config['base_url'] = '';

Atur menjadi seperti berikut:

1$config['base_url'] = 'http://localhost/ci_upload/';

3. Database.php

Untuk melakukan konfigurasi pada file database.php, silahkan buka folder:

ci_upload/application/config/database.php

seperti berikut gambar berikut:

Buka file database.php dengan text editor, kemudian temukan kode berikut:

1
2
3 $active_group = 'default';
$query_builder = TRUE;
4
5  $db['default'] = array(
6     'dsn'   => '',
7     'hostname' => 'localhost',
8     'username' => '',
9     'password' => '',
10    'database' => '', //sesuaikan dengan database anda!
    'dbdriver' => 'mysqli',
11    'dbprefix' => '',
12    'pconnect' => FALSE,
13    'db_debug' => (ENVIRONMENT !== 'production'),
14    'cache_on' => FALSE,
15    'cachedir' => '',
    'char_set' => 'utf8',
16    'dbcollat' => 'utf8_general_ci',
17    'swap_pre' => '',
18    'encrypt' => FALSE,
19    'compress' => FALSE,
20    'stricton' => FALSE,
    'failover' => array(),
21    'save_queries' => TRUE
22);
23
24

Atur menjadi seperti berikut:

1
2
3
4
5
6
7
8
9
1 $active_group = 'default';
0 $query_builder = TRUE;
1  
1 $db['default'] = array(
1     'dsn'   => '',
2     'hostname' => 'localhost',
    'username' => 'root',
1     'password' => '',
3     'database' => 'db_upload', //sesuaikan dengan database anda!
1     'dbdriver' => 'mysqli',
4     'dbprefix' => '',
1     'pconnect' => FALSE,
    'db_debug' => (ENVIRONMENT !== 'production'),
5     'cache_on' => FALSE,
1     'cachedir' => '',
6     'char_set' => 'utf8',
1     'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
7     'encrypt' => FALSE,
1     'compress' => FALSE,
8     'stricton' => FALSE,
1     'failover' => array(),
9     'save_queries' => TRUE
);
2
0
2
1
2
2
2
3
2
4

Step 5. Membuat Controller

Controller bertugas sebagai jembatan antara model dan view.

Controller akan merespon HTTP request yang datang dari user (melalui browser), dari request ini
Controller akan menetukan apa yang harus dilakukan.

Mungkin terdengar sedikit rumit, tapi sebenarnya tidak.

Anda akan segera mengerti setalah mempraktekkan tutorial ini secara keseluruhan.

Controller ini, akan menghandle proses upload file ke server dan mengirimkan value (nilai) yang
dikirim ke model untuk di simpan ke database.

Ok, langsung saja!

Buat sebuah Controller dengan nama Upload.php

Dengan kode sebagai berikut:

1 <?php
2 class Upload extends CI_Controller{
    function __construct(){
3         parent::__construct();
4         $this->load->model('m_upload');
5          
6     }
7  
8     function index(){
9         $this->load->view('v_upload');   
    }
10 
11 
12    function do_upload(){
13        $config['upload_path']="./assets/images";
14        $config['allowed_types']='gif|jpg|png';
15        $config['encrypt_name'] = TRUE;
16         
        $this->load->library('upload',$config);
17        if($this->upload->do_upload("file")){
18            $data = array('upload_data' => $this->upload->data());
19 
20            $judul= $this->input->post('judul');
21            $image= $data['upload_data']['file_name'];
22             
23            $result= $this->m_upload->simpan_upload($judul,$image);
            echo json_decode($result);
24        }
25 
26     }
27     
28}
29
30
31
32

Penjelasan Kode:

Ini penting!

Pada controller Upload.php, terdapat 3 function.

Yaitu: function __construct(), function index(), dan function do_upload().

1. Function __construct()

1function __construct(){
2    parent::__construct();
3    $this->load->model('m_upload');
4}

Function __construct(), berfungsi sebagai konstruktor.

Dimana setiap pemanggilan model, library, helper, atau apapun yang dipanggil melalui function
__construct(), maka akan siap digunakan untuk setiap function di dalam suatu kelas.

Pada kasus diatas, Anda dapat melihat ada pemanggilan model m_upload pada function
__construct().

Artinya, model m_upload siap digunakan untuk setiap function dalam kelas Upload.

2. Function index()

1function index(){
2    $this->load->view('v_upload');   
3}

Function index, merupakan function yang di panggilan otomatis saat disuatu file atau kelas di
panggil.

Pada kasus ini, function index memanggil sebuah view dengan nama v_upload.

3. Function do_upload()

1 function do_upload(){
        $config['upload_path']="./assets/images"; //path folder file upload
2
        $config['allowed_types']='gif|jpg|png'; //type file yang boleh di
3 upload
4         $config['encrypt_name'] = TRUE; //enkripsi file name upload
5          
6
7
8
9         $this->load->library('upload',$config); //call library upload
1         if($this->upload->do_upload("file")){ //upload file
            $data = array('upload_data' => $this->upload->data()); //ambil
0 file name yang diupload
1  
1             $judul= $this->input->post('judul'); //get judul image
1             $image= $data['upload_data']['file_name']; //set file name ke
2 variable image
1              
            $result= $this->m_upload->simpan_upload($judul,$image); //kirim
3
value ke model m_upload
1             echo json_decode($result);
4         }
1 }
5
1
6

Function do_upload ini merupakan function yang berfungsi untuk menghandle proses upload file
ke server, serta mengirimkan file name ke model untuk proses penyimpanan data.

Step 6. Membuat Model

Selanjutnya,

Buat sebuah model dengan nama M_upload.php

Kemudian ketikkan kode berikut:

1
2 <?php
3 class M_upload extends CI_Model{
4      function simpan_upload($judul,$image){
5         $data = array(
6                 'judul' => $judul,
7                 'gambar' => $image
8             ); 
        $result= $this->db->insert('tbl_galeri',$data);
9         return $result;
10    }
11     
12}
13
Pada model M_upload terdapat satu function. Yaitu function simpan_upload.

Function ini berfungsi untuk menyimpan value yang dikirim dari controller untuk disimpan ke
database.

Step 7. Membuat View

Selanjutnya,

Buat sebuah view dengan nama v_upload.php

Kemudian ketikkan kode berikut:

1 <!DOCTYPE html>
<html lang="id">
2 <head>
3     <meta charset="utf-8">
4     <title>Upload dengan Codeigniter dan Ajax</title>
5     <link rel="stylesheet" type="text/css" href="<?php echo
6 base_url().'assets/css/bootstrap.css'?>">
</head>
7 <body>
8     <div class="container">
9         <div class="col-sm-4 col-md-offset-4">
1         <h4>Upload dengan Codeigniter dan Ajax</h4>
0             <form class="form-horizontal" id="submit">
                <div class="form-group">
1                     <input type="text" name="judul" class="form-control"
1 placeholder="Judul">
1                 </div>
2                 <div class="form-group">
                    <input type="file" name="file">
1                 </div>
3
 
1                 <div class="form-group">
4                     <button class="btn btn-success" id="btn_upload"
1 type="submit">Upload</button>
5                 </div>
            </form>  
1         </div>
6     </div>
1 <script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-
7 3.2.1.js'?>"></script>
1 <script type="text/javascript" src="<?php echo
base_url().'assets/js/bootstrap.js'?>"></script>
8 <script type="text/javascript">
1     $(document).ready(function(){
9  
2         $('#submit').submit(function(e){
0             e.preventDefault();
                 $.ajax({
2                      url:'<?php echo
base_url();?>index.php/upload/do_upload',
1
                     type:"post",
2                      data:new FormData(this),
2                      processData:false,
2                      contentType:false,
3                      cache:false,
                     async:false,
2                       success: function(data){
4                           alert("Upload Image Berhasil.");
2                    }
5                  });
2             });
6          
2  
    });
7
     
2 </script>
8 </body>
2 </html>
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
4
6
4
7
4
8
4
9
5
0
5
1
5
2

View v_upload ini berfungsi untuk menampilkan sebuah form untuk upload file.

View ini juga berfungsi untuk melakukan submit form file upload menggunakan AJAX.

Jika Anda perhatikan pada bagian script, terdapat fungsi Ajax.

Seperti berikut:

1 $('#submit').submit(function(e){
            e.preventDefault();
2
                 $.ajax({
3                      url:'<?php echo
4 base_url();?>index.php/upload/do_upload', //URL submit
5                      type:"post", //method Submit
6                      data:new FormData(this), //penggunaan FormData
                     processData:false,
7                      contentType:false,
8                      cache:false,
9                      async:false,
1                       success: function(data){
0                           alert("Upload Image Berhasil."); //alert jika
upload berhasil
1                    }
1                  });
1 });
2
1
3
1
4
1
5

Silahkan perhatikan baris kode yang saya beri komentar untuk penjelasan kode!

Testing Program:

Buka bowser Anda, dan kunjungi url berikut:

http://localhost/ci_upload/index.php/upload

maka akan tampil form seperti gambar berikut:

Kemudian input judul, dan telusuri (browse) file image yang akan di upload.

Lalu, klik tombol upload.

Jika berhasil maka akan terlihat alert seperti gambar berikut:

Untuk meng-cek hasil file image yang di upload, silahkan buka folder images.

Seperti gambar berikut:

Selamat, Anda berhasil membuat upload file dengan codeigniter dan ajax.

Rekomendasi Tutorial:

1. Multiple Upload Image dengan Codeigniter

2. Upload dan Resize Image Menggunakan Codeigniter

3. Upload Image dengan Dropify Menggunakan Codeigniter

35