Tutorial Codeigniter: Upload file dengan Codeigniter dan Ajax

Tutorial Codeigniter: Upload file dengan Codeigniter dan Ajax

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:

CREATE 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:

CREATE TABLE tbl_galeri(
id INT(11) PRIMARY KEY AUTO_INCREMENT,
judul VARCHAR(50),
gambar VARCHAR(40)
)ENGINE=INNODB;

 

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:

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

Atur menjadi seperti berikut:

$autoload['libraries'] = array('database');
$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:

$config['base_url'] = '';

Atur menjadi seperti berikut:

$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:

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => '',
        'password' => '',
        'database' => '', //sesuaikan dengan database anda!
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

Atur menjadi seperti berikut:

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'db_upload', //sesuaikan dengan database anda!
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

 

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:

<?php
class Upload extends CI_Controller{
        function __construct(){
                parent::__construct();
                $this->load->model('m_upload');
                
        }

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


        function do_upload(){
        $config['upload_path']="./assets/images";
        $config['allowed_types']='gif|jpg|png';
        $config['encrypt_name'] = TRUE;
        
        $this->load->library('upload',$config);
            if($this->upload->do_upload("file")){
                $data = array('upload_data' => $this->upload->data());

                $judul= $this->input->post('judul');
                $image= $data['upload_data']['file_name']; 
                
                $result= $this->m_upload->simpan_upload($judul,$image);
                echo json_decode($result);
        }

     }
        
} 

Penjelasan Kode:

Ini penting!

Pada controller Upload.php, terdapat 3 function.

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

1. Function __construct()

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

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()

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

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()

function do_upload(){
        $config['upload_path']="./assets/images"; //path folder file upload
        $config['allowed_types']='gif|jpg|png'; //type file yang boleh di upload
        $config['encrypt_name'] = TRUE; //enkripsi file name upload
        
        $this->load->library('upload',$config); //call library upload 
            if($this->upload->do_upload("file")){ //upload file
                $data = array('upload_data' => $this->upload->data()); //ambil file name yang diupload

                $judul= $this->input->post('judul'); //get judul image
                $image= $data['upload_data']['file_name']; //set file name ke variable image
                
                $result= $this->m_upload->simpan_upload($judul,$image); //kirim value ke model m_upload
                echo json_decode($result);
        }
}

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:

<?php
class M_upload extends CI_Model{

        function simpan_upload($judul,$image){
                $data = array(
                        'judul' => $judul,
                        'gambar' => $image
                );  
            $result= $this->db->insert('tbl_galeri',$data);
            return $result;
        }
        
}

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:

<!DOCTYPE html>
<html lang="id">
<head>
        <meta charset="utf-8">
        <title>Upload dengan Codeigniter dan Ajax</title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
        <div class="container">
                <div class="col-sm-4 col-md-offset-4">
                <h4>Upload dengan Codeigniter dan Ajax</h4>
                        <form class="form-horizontal" id="submit">
                                <div class="form-group">
                                        <input type="text" name="judul" class="form-control" placeholder="Judul">
                                </div>
                                <div class="form-group">
                                        <input type="file" name="file">
                                </div>

                                <div class="form-group">
                                        <button class="btn btn-success" id="btn_upload" type="submit">Upload</button>
                                </div>
                        </form>   
                </div>
        </div>
<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-3.2.1.js'?>"></script>
<script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
<script type="text/javascript">
        $(document).ready(function(){

                $('#submit').submit(function(e){
                    e.preventDefault(); 
                         $.ajax({
                             url:'<?php echo base_url();?>index.php/upload/do_upload',
                             type:"post",
                             data:new FormData(this),
                             processData:false,
                             contentType:false,
                             cache:false,
                             async:false,
                              success: function(data){
                                  alert("Upload Image Berhasil.");
                           }
                         });
                    });
                

        });
        
</script>
</body>
</html>

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:

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

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

Download Source

Share:




LAINNYA UNTUK ANDA


Komentar (30)

Zeldianto Eka Putra, 13 January 2018 01:30 - Reply

Baru aja mau nanya tentang ini di FB, eh udah di bikinin tutorial.. wkwkwk makasi banyak bg Fikri, sangat membantu dan bermanfaat. Good Job

M Fikri, 13 January 2018 08:10 - Reply

Sama-sama Zel,
Thanks atas responnya.!

Diaku, 31 January 2018 16:17 - Reply

G mau masuk data nya om.. No error dsb

M Fikri, 14 February 2018 10:57 - Reply

Download aja source codenya gan!
pelajari lebih detail di sana!

Dilan, 29 March 2018 09:45 - Reply

ada yang perlu di garis bawahi sebenernya yang wajib itu bukan yang 3 di atas (CodeIgniter, Bootstrap, Jquery) namun yang wajib itu salat 5 waktu.

Qolby Adha, 08 April 2018 00:12 - Reply

Mau nanya gan. Kalu munculin path image pada saat kita mau update imagenya gimana?

M Fikri, 10 April 2018 07:24 - Reply

Untuk update data, Caranya dengan memasukan filename image dari database ke input type hidden pada form edit.
kemudian di controller-nya baru di validasi jika input file pada form edit kosong maka filenamenya diambil dari input type hidden tersebut.
tetapi jika input file pada form edit tidak kosong, maka hapus image yang ada di path dengan fungsi unlink dengan mengambil filename dari input hidden tadi.
Setelah itu baru jalankan fungsi update dan upload image yang baru.

Mungkin terdegar rumit, tapi sebenarnya tidak. Hanya butuh sedikit pemahaman.

M. Rizki Eka Saputra, 16 April 2018 11:19 - Reply

cara ngambil gambar agar muncul setelah kita upload gimana ya? jadi abis kita upload langsung muncul dibawahnya tanpa refresh halaman..

M Fikri, 22 April 2018 08:11 - Reply

Anda bisa gunakan DROPIFY gan!
silahkan cek post saya sebelumnya tentang "DROPIFY"!

Jack sparrow, 16 May 2018 14:39 - Reply

Sangat berterima kasih, gw sering belajar disini.. sangat membantu bang. selalu jadi Solusi :D

M Fikri, 22 July 2018 09:03 - Reply

Thank you.

suherman, 04 June 2018 07:57 - Reply

kalau upload beberapa gambar sekaligus?

M Fikri, 22 July 2018 09:07 - Reply

Coba cek tutorial saya sebelumnya tentang "Multiple upload Image"!

Agung Hermawan , 25 June 2018 22:36 - Reply

Klo nampilin gambarnya dari database dengan Ajax juga ada gk om tutornya

Hoedha, 15 July 2018 19:58 - Reply

kalo upload video gimana ya gan?

Firman Adi Wicaksono, 15 August 2018 16:31 - Reply

Mantap gan tutorialnya mudah dimengerti dan jelas, bisa jadi refrensi baru. Terimakasih

Muhammad Subhan, 09 September 2018 23:58 - Reply

selamat malam mas Fikri, saya sudah coba ikutin source code dan langkah"nya. tapi kenapa masih belum berhasil upload ya ? alert "berhasil upload" tidak muncul. terima kasih mas :)

M Fikri, 12 September 2018 06:39 - Reply

Memang tidak muncul, tapi uploadnya berhasil.
Silahkan cek hasil uploadnya di folder assets/images/

Wulan Dilla Akpa, 18 September 2018 15:15 - Reply

mas library upload tuh dari mana ya

Rama Novaris A.P, 12 November 2018 10:23 - Reply

Kalo mau uploadnya pake modal gimana?

M Fikri, 21 November 2018 11:19 - Reply

Mas Rama, tinggal buat form upload-nya di modal

Anonim, 23 December 2018 00:40 - Reply

Bang coba bikin tutorial cara membuat website berbagi video atau mp3 :D

Ruang Mahasiswa, 07 January 2019 04:13 - Reply

Udah coba tutorial sana sini, baru ini yang work gan. Makasih banyak ya

MewreD, 10 March 2019 01:12 - Reply

bisa dipake buat upload pdf ga ?

M Fikri, 11 March 2019 09:59 - Reply

Bisa mbak Isil, tinggal atur allowed typenya seperti ini:

 $config['allowed_types']='gif|jpg|png|pdf';

 

daniel, 16 May 2019 21:53 - Reply

pengaruh sama versi PHP atau XAMPP nya ga kak?? soalnya di sy gabisa upload ka, gamuncul keterangan apa2 di databasenya jg ga bertambah datanya.. sblmnya sy jg download sama yg kyk gini jg tpi bhs.inggrs tpi sama gabisa juga..

M Fikri, 25 May 2019 21:34 - Reply

Coba cek di console apakah terdapat error?

Leave a Comment