CI #5 – Codeigniter Multiple Upload Full Tutorial

Pada tutorial kali ini, ilmucoding.com akan membahas codeigniter multiple upload yang akan berguna untuk para coder apabila membutuhkan fitur upload banyak file / gambar dalam sekali klik saja.

Tutorial kali ini akan digabungkan dengan mysql. File atau gambar yang akan diupload akan masuk ke dalam folder dan database.

Oke, mari langsung saja mulai coding bersama. Let’s Go!

Step #1 – Persiapan Membuat Fitur Multiple Upload dengn Codeigniter

Pada step ini coder perlu mempersiapkan software yang dibutuhkan, yaitu:

1. XAMPP
2. Text Editor Pilihan (Visual Studio Code, Atom, Sublime Text, Etc)

Step #2 – Download File Codeigniter

Coder bisa langsung mendownload framework codeigniter di situs resminya atau bisa langsung kunjungi di sini: codeigniter 3.

Setelah mendownloadnya, silahkan extract file zip di dalam direktori xampp/htdocs

Setelah diextract, rename file menjadi ci_multiple_upload

Step #3 – Mengatur File Config dan Autoload

Pada step ini silahkan coder buka file config.php yang ada di dalam direktori application/config/config.php

Cari code $config[‘base_url’] = ”; lalu ubah menjadi

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

Selanjutnya buka file autoload.php pada direktori application/config/autoload.php.

Setelah itu tambahkan code ini di dalam library dan helper.

$autoload['helper'] = array('url', 'form');
$autoload['libraries'] = array('database');

Step #4 – Membuat Database ci_multiple_upload

Silahkan buka Phpmyadmin lalu buat database bernama ci_multiple_upload lalu buat table yang bernama upload. Berikut isi tablenya:

CREATE TABLE uploads(
    `id` BIGINT AUTO_INCREMENT,
    `upload` VARCHAR(255) NOT NULL,
    PRIMARY KEY(`id`));

Step #5 – Membuat File Controller Upload

Pada step ini kita akan membuat controller yang bernama Upload.php lalu disimpan ke direktori application/controllers

Adapun codenya adalah:

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

   public function index() { 

      $this->load->view('form_upload');
   
   }
   
   public function send()
   {
      $data = [];

      $count = count($_FILES['files']['name']);
   
      for($i=0;$i > $count;$i++){
   
         if(!empty($_FILES['files']['name'][$i])){
   
            $_FILES['file']['name'] = $_FILES['files']['name'][$i];
            $_FILES['file']['type'] = $_FILES['files']['type'][$i];
            $_FILES['file']['tmp_name'] = $_FILES['files']['tmp_name'][$i];
            $_FILES['file']['error'] = $_FILES['files']['error'][$i];
            $_FILES['file']['size'] = $_FILES['files']['size'][$i];

            $config['upload_path'] = 'uploads/'; 
            $config['allowed_types'] = 'jpg|jpeg|png|gif';
            $config['max_size'] = '5000';
            $config['file_name'] = $_FILES['files']['name'][$i];

            $this->load->library('upload',$config); 
   
            if($this->upload->do_upload('file')){

               $uploadData = $this->upload->data();
               // mendefinisikan data array dari hasil upload
               $filename = $uploadData['file_name'];
               $image[$i] =  $filename;
               // membuat data array untuk disimpan ke database
               $content = [
                  'image' => $image[$i]
               ];
               $this->upload_model->simpan("upload", $content);
               // Untuk menampilkan jumlah data yang diupload
               $data['totalFiles'][] = $filename;
            }
         }
      }
      return $this->load->view('form_upload', $data);
   } 
} 
?>

Step #6 – Membuat File Model Upload

Pada step kali ini kita akan membuat file yang bernama Upload_model.php dan disimpan di direktori application/models

Berikut kodenya:

<?php

class Upload_model extends CI_Model
{
    public function simpan($table, $data)
    {
        return $this->db->insert($table, $data);
    }
}

Step #7 – Membuat File View

Step kali ini silahkan coder membuat file bernama form_upload.php dan disimpan ke dalam direktori application/ views

Berikut kodenya:

<!doctype html>
<html>
  <head>
   <title>Tutorial Codeigniter #5- Membuat Fitur Multiple File dan Image - Ilmucoding.com</title>
  </head>
<body>
    <strong>
      <?php if(isset($totalFiles)) echo "Berhasil upload ".count($totalFiles)." files"; ?>
    </strong>
    <?= form_open_multipart('upload/send') ?>
   
      <input type='file' name='files[]' multiple="">
<br/>
     <input type='submit' value='Upload' name='upload' />
   
    <?= form_close() ?>
   
</body>
</html>

Step #8 – Pengujian

Sekarang silahkan coder membuka browser lalu ketikan url berikut (pastikan apache dan mysql sudah diaktifkan):

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

Hasilnya:

Jika coder melakukan upload tampilannya akan seperti ini:

Jika berhasil upload maka akan muncul pesan sukses seperti ini:

Dan data telah masuk ke dalam database.

Kesimpulan

Sekarang coder sudah belajar bagaimana cara mengupload banyak file atau gambar di codeigniter. Besar harapan kami tutorial ini akan membantu para coder dalam mengembangkan aplikasi yang sedang dibuat. Aamiin.

Selanjutnya coder bisa mempelajari bagaimana upload menggunakan jquery / ajax di codeigniter agar semakin terasah kemampuannya.

Baca Juga: Membuat Fitur Export Data ke PDF dengan Codeigniter

Terima kasih sudah membaca artikel ini. Ayo ngoding bersama! Karena #CodeIsEasy

Related posts:

Tutorial CRUD Codeigniter 4 dengan Firebase dan Bootstrap

Tutorial Cara Upload Project Codeigniter 4 ke Hosting

Tutorial Lengkap Cara Membuat Slug di Codeigniter 4