Cara Upload File Dengan Codeigniter Dengan Mudah

Pada tutorial kali ini kita akan membahas bagaimana cara upload file dengan codeigniter dan menyimpan ke database, file yang dimaksudnya dapat berupa file dokumen ataupun gambar, dan menyimpannya ke dalam database sehingga mudah untuk di tampilkan dan di unduh kembali.

Cara Upload Dengan Codeigniter

Berikut ini adalah cara upload file dengan codeigniter dan menyimpannya ke dalam database. Tutorial ini akan dibahas step-by-step beserta gambar untuk mempermudah dalam belajar upload file dengan codeigniter.

Step 1: Download Codeigniter & Install Codeigniter

Langkah pertama adalah siapkan dulu codeigniter, karna ditutorial kali ini menggunakan codeigniter versi 3 maka silahkan anda download codeigniter versi 3.

http://codeigniter.com/download

Perhatikan gambar dibawah ini:

Jika sudah selesai mengunduh codeigniter versi 3 selanjutnya silahkan ekstrak file tersebut didalam folder web server anda, dan beri nama folder tersebut dengan nama ci-upload, sehingga nantinya akan bisa di akses dengan url localhost/ci-upload.

Jika sudah anda ekstrak dan diletakan didalam folder web server maka anda silahkan ketik di url browser dengan url localhost/ci-upload, jika sudah berhasil maka seharusnya akan muncul seperti tampilan dibawah ini.

tampilan pembuka codeigniter - cara upload dengan codeigniter

Step 2: Membuat Database Upload

Jika codeigniter sudah berhasil anda install selanjutnya membuat database untuk menyimpan data-data file yang akan di upload, sehingga dapat di tampilkan.

Buatlah database dengan nama ci_upload:

CREATE DATABASE ci_upload;

Lalu buat tabel dengan script dibawah ini:

CREATE TABLE upload(
     id INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
     nama_file VARCHAR(200) NOT NULL,
     tipe_file VARCHAR(50) NOT NULL,
     ukuran_file VARCHAR(10) NOT NULL,
     tanggal_upload TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

Step 3: Mengatur Konfigurasi

Pertama-tama yang perlu kita lakukan adalah mengatur konfigurasi, pada tutorial ini sangat mudah sekali tidak tidak perlu memerlukan banyak konfigurasi, kecuali jika proyek anda sudah besar tentunya akan banyak konfigurasi-konfigurasi yang diperlukan sesuai dengan kebutuhan. Didalam tutorial ini hanyalah membutuhan modul session dan database sehingga anda hanya perlu menentukan path session dimana lokasi session akan disimpan dan sambungan database anda.

Buka file /application/config/config.php, lalu cari $config['sess_save_path'] dan ubah seperti kode dibawah ini:

$config['sess_save_path'] = sys_get_temp_dir();Code language: PHP (php)

Selanjutnya membuat konfigurasi database.

Buka file /application/config/autoload.php lalu cari kode $autoload['libraries'] dan ubah menjadi seperti dibawah ini:

$autoload['libraries'] = array('database');Code language: PHP (php)

Selanjutnya buka file /application/config/database.php lalu atur konfigurasi database anda.

$db['default'] = array(
     ...
     'hostname' => 'localhost',
     'username' => 'username database anda',
     'password' => 'password database anda',
     'database' => 'ci_upload',
     ...
);Code language: PHP (php)

Step 4: Membuat Controller

Buatlah sebuah file dengan nama Upload_Controller.php di folder /application/controllers/ lalu masukkan kode dibawah ini:

<?php if(!defined('BASEPATH')) exit ('No direct script access allowed');

class Upload_Controller extends CI_Controller 
{
     public function __construct()
     {
          parent::__construct();

          // Load models
          $this->load->model('upload_model');

          // Load helpers
          $this->load->helper('url');

          // Load libraries
          $this->load->library('session');
          $this->load->library('form_validation');
     }

     public function index()
     {
          $data['uploads'] = $this->upload_model->all();

          $this->load->view('upload_view', $data);
     }

     public function upload()
     {
          $config['upload_path'] = './upload';
          $config['allowed_types'] = 'jpg|jpeg|png|svg';
          $config['max_size'] = 3000;

          $this->load->library('upload', $config);

          if($this->upload->do_upload('file')) {

               $fileData = $this->upload->data();

               $upload = [
                    'nama_file' => $fileData['file_name'],
                    'tipe_file' => $fileData['file_type'],
                    'ukuran_file' => $fileData['file_size'],
               ];

               if($this->upload_model->insert($upload)) {
                    $this->session->set_flashdata('success', '<p>Selamat! Anda berhasil mengunggah file <strong>'. $fileData['file_name'] .'</strong></p>');
               } else {
                    $this->session->set_flashdata('error', '<p>Gagal! File '. $fileData['file_name'] .' tidak berhasil tersimpan di database anda</p>');
               }

               redirect(base_url('upload'));
          } else {
               $this->session->set_flashdata('error', $this->upload->display_errors());
               redirect(base_url('upload'));
          }
     }
}Code language: HTML, XML (xml)

Perhatikan pada bagian $config['upload_path'] = './upload', letak lokasi file-file yang anda update akan tersimpan dan berada di dalam folder root CI anda dengan nama folder /upload maka dari itu silahkan buat folder nama nama upload didalam folder root CI anda.

Lalu pada bagian $config['allowed_types'] = 'jpg|jpeg|png|svg' anda dapat menentukan filter jenis-jenis file apa saja yang boleh di upload dengan cara menambahkan |ekstensi_file sesuai denga keinginan anda.

Step 5: Membuat Model

Pada step ini kita akan membuat model yang fungsinya untuk melakukan penulisan data di dalam database upload anda. Buatlah file dengan nama Upload_Model.php di folder /application/models/ setelah itu masukkan kode dibawah ini:

<?php if(!defined('BASEPATH')) exit('No direct script access allowed');

class Upload_model extends CI_Model
{
     public function all()
     {
          $this->db->select('*');
          $this->db->from('upload');
          $this->db->order_by('tanggal_upload', 'DESC');

          return $this->db->get();
     }

     public function insert($data)
     {
          $this->db->insert('upload', $data);

          return ($this->db->affected_rows() > 0) ? true : false;
     }
}Code language: HTML, XML (xml)

Step 6: Membuat Tampilan Form Upload

Pada step terakhir ini adalah bagian tampilan, untuk memudahkan penggunaan penulis membuat tampilan antar muka yang sangat sederhana, dengan tujuan agar mudah di modifikasi oleh anda.

Buatlah sebuah file dengan nama upload_view.php didalam folder /application/view lalu masukkan kode dibawah ini:

<!DOCTYPE html>
<html>
<head>
     <title>Tutorial Cara Upload Dengan Codeigniter</title>
     <style type="text/css">
          *, *::before, *::after {
               box-sizing: border-box;
          }
          body {
               margin: 0;
               padding: 0;
          }
          h1 {
               text-align: center;
          }
          form {
               position: relative;
               width: 50%;
               margin: 20px auto;
               padding: 20px;
               background-color: #f1f1f1;
               border: 1px solid #eeeeee;
               margin: 0 auto;
               border-radius: 4px;
               text-align: center;
          }
          .alert-success,
          .alert-danger {
               border-radius: 4px;
               padding: 5px 20px;
               width: 50%;
               margin: 20px auto 0 auto;
               color: #ffffff;
          }
          .alert-success {
               background-color: #5cb85c;
          }
          .alert-danger {
               background-color: #d9534f;
          }
          .file-list {
               width: 50%;
               margin: 20px auto;
          }
          .file-list table {
               width: 100%;
               margin: 0;
               padding: 0;
          }
          .file-list table thead tr th {
               border-top: 1px solid #dddddd;
               border-bottom: 1px solid #dddddd;
               border-left: 1px solid #dddddd;
               background-color: #f1f1f1;
               padding: 5px 10px;
          }
          .file-list table thead tr th:last-child {
               border-right: 1px solid #dddddd;
          }
          .file-list table tbody tr td {
               border-bottom: 1px solid #dddddd;
               border-left: 1px solid #dddddd;
               padding: 5px 10px;
          }
          .file-list table tbody tr td:last-child {
               border-right: 1px solid #dddddd;
          }
     </style>
</head>
<body>
     <h1>Cara Upload Dengan Codeigniter</h1>
     <form method="POST" action="<?php echo base_url('upload/upload') ?>" enctype="multipart/form-data">
          <input type="file" name="file">
          <button type="submit">Upload</button>
     </form>
     <?php if($this->session->flashdata('success')): ?>
          <div class="alert-success">
               <?php echo $this->session->flashdata('success'); ?>
          </div>
     <?php endif; ?>
     <?php if($this->session->flashdata('error')): ?>
          <div class="alert-danger">
               <?php echo $this->session->flashdata('error'); ?>
          </div>
     <?php endif; ?>
     <div class="file-list">
          <table cellpadding="0" cellspacing="0">
               <thead>
                    <tr>
                         <th style="width: 5%; text-align: center; vertical-align: middle;">No</th>
                         <th style="width: 80%; text-align: left; vertical-align: middle;">Nama File</th>
                         <th style="width: 15%; text-align: center; vertical-align: middle;">Download</th>
                    </tr>
               </thead>
               <tbody>
               <?php if($uploads->num_rows() > 0): ?>
                    <?php $nomor = 1; ?>
                    <?php foreach($uploads->result() as $file): ?>
                          <tr>
                              <td style="text-align: center; vertical-align: middle;"><?php echo $nomor++; ?></td>
                              <td style="text-align: left; vertical-align: middle;"><?php echo $file->nama_file; ?></td>
                              <td style="text-align: center; vertical-align: middle;">
                                   <a href="<?php echo base_url('upload/' . $file->nama_file) ?>" download>Download</a>
                               </td>
                         </tr>
                    <?php endforeach; ?>
               <?php else: ?>
                    <tr>
                         <td style="text-align: center; vertical-align: middle;" colspan="3">Tidak ada data</td>
                    </tr>
                <?php endif; ?>
               </tbody>
          </table>
     </div>
</body>
</html>Code language: HTML, XML (xml)

Step 6: Mengatur Routes Codeigniter

Selanjutnya mengatur route, fungsi route ini adalah untuk menentukan atau memanipulasi url yang ditampilkan pada url browser.

Buka file routes.php di dalam folder /application/config/ lalu masukkan kode dibawah ini di paling akhir di dalam file routes tersebut.

$route['upload'] = 'upload_controller/index';
$route['upload/upload'] = 'upload_controller/upload';Code language: PHP (php)

Step 7: Melakukan Pengetesan

Selanjutnya pada step terakhir adalah anda hanya tinggal melakukan testing pada kode yang tadi anda buat, berikut ini tampilan apabila anda mengaksesnya melalui http://localhost/ci-upload:

Tampilan upload codeigniter - cara upload dengan codeigniter

Tampilan tersebut sangat sederhana sekali, karena memang tujuan penulis adalah agar anda dapat melakukan perubahan, modifikasi yang lebih baik lagi yang mungkin berguna untuk proyek anda kedepannya, semoga tutorial cara upload dengan codeigniter ini dapat bermanfaat.