Membuat Upload File di Codeigniter 3

Bingung bagaimana cara membuat upload file di Codeigniter 3. Ikuti cara berikut ini dijamin bisa langsung paham.

Codeigniter dapat mengupload beberapa jenis file dan gambar. Selain itu, kita juga bisa mengatur size dari file yang ingin diterima. Oleh karena itu, codeigniter akan mempermudah kita dalam mengupload sebuah file untuk website.

Download Codeigniter 3

Langkah pertama pastikan kalian telah mendownload terlebih dahulu codeigniter 3. Kalian bisa mendownloadnya melalui link berikut ini.

Setalah itu, taruh hasil download tadi ke folder htdocs yang berada di dalam xampp. Dan jangan lupa untuk extract terlebih dahulu.

Kemudian, kita ganti nama folder menjadi upload-file-codeigniter3. Setelah itu, buka folder tersebut ke dalam text editor.

Kita hapus terlebih dahulu folder user_guide karena tidak akan kita pakai dan hanya berisi panduan penggunaan aja.

Setup Config

Hal pertama yang akan kita lakukan yaitu setup config. Buka terlebih dahulu application/config/config.php dan ubah base_url menjadi nama folder dengan tambahan localhost sebagai awalan.

$config['base_url'] = 'http://localhost/codeigniter3-uploadfile/';
$config['index_page'] = '';

Kita juga menghapus index.php pada index_page dan jadikan kosong seperti diatas. Agar dapat berfungsi kita perlu membuat file .htaccess di root folder. Setelah itu, isi dengan code berikut.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

Setelah selesai mensetup bagian config lalu kita lanjut ke bagian autoload. Kalian bisa membuka terlebih dahulu di application/config/autoload.php dan kita akan membutuhkan beberapa libraries serta helper.

$autoload['libraries'] = array('form_validation', 'session');
$autoload['helper'] = array('url', 'file');

Untuk setup yang terakhir yaitu bagian route. Pada bagian tersebut kita akan membuat controller employee yang nantinya akan dibuat menjadi default. Kita akan mengubah bagian welcome menjadi employee seperti berikut.

$route['default_controller'] = 'employee';

buat Controller

Lanjut ke langkah selanjutnya yaitu membuat controller. Kita akan memberi nama controller dengan nama Employee.php yang di dalamnya terdapat 2 method yang pertama index() untuk menghandle views yang akan digunakan dan juga upload() untuk mengupload sebuah file.

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

class Employee extends CI_Controller
{
  public function index()
  {

    $this->load->view('employee/index');
  }

  public function upload()
  {
    // jika ada gambar yang diupload
    $upload_image = $_FILES['image']['name'];

    if ($upload_image) {
      $config['allowed_types'] = 'jpeg|jpg|png';
      $config['max_size'] = '100';
      $config['upload_path'] = './assets/img/';

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

      if ($this->upload->do_upload('image')) {
        $this->upload->data('file_name');
      } else {
        $this->session->set_flashdata('message', '<div class="alert alert-danger" role="alert">' . $this->upload->display_errors() . '</div>');
        redirect('employee');
      }

      $this->session->set_flashdata('message', '<div class="alert alert-success" role="alert">Gambar berhasil diupload</div>');
      redirect('employee');
    }
  }
}

Berdasarkan code diatas kita telah mengatur jenis file yang akan diizinkan untuk diupload yaitu jpeg, jpg, dan png dengan maksimal sizenya yaitu 100kb. Setelah berhasil maka foto yang kita upload akan disimpan di assets/img

Tetapi karena kita belum membuat folder tersebut kita harus membuat terlebih dahulu agar fotonya berhasil disimpan. Sehingga tampilan root folder nantinya akan seperti ini.

Buat Views

Dalam membuat tampilan kali ini kita akan dibantu dengan bootstrap 5 yang akan memudahkan kita dalam membuat tampilan yang responsive.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <title>Belajar Upload File Codeigniter</title>
</head>

<body>
  <div class="container">
    <h1 class="text-center mt-5">Belajar Upload File Codeigniter</h1>
    <div class="row justify-content-center">
      <div class="col-lg-6 grid-margin stretch-cards">
        <div class="card">
          <div class="card-body">
            <?= $this->session->flashdata('message') ?>
            <?= form_open_multipart('employee/upload') ?>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label">Picture</label>
              <div class="col-sm-10">
                <div class="row">
                  <div class="col-sm-9">
                    <div class="custom-file">
                      <input type="file" class="custom-file-input" id="image" name="image">
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-group row justify-content-end">
              <div class="col-sm-10">
                <button type="submit" class="btn btn-primary">Save</button>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>

</html>

Setelah mengikuti langkah demi langkah diatas mari kita coba terlebih dahulu dengan mengupload gambar kurang dari 100kb. Kalian bisa melihat gambar yang diupload di assets/img

Sekian tutorial kali ini, jika ada kesulitan kalian bisa komentar dibawah sini.

Download Codeigniter 3

Setup Config

buat Controller

Buat Views

Leave a Comment Cancel Reply