Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial Upload Gambar Menggunakan Codeigniter 4

14 min read

Ilmucoding.com – Tutorial Upload Gambar Menggunakan Codeigniter 4. Upload gambar di codeigniter 4 merupakan salah satu hal yang paling banyak dicari. Sejak kemunculannya, framework ini menimbulkan banyak tanda tanya cara menggunakannya.

Beberapa hari yang lalu saya berupaya mengulik framework ini dan bagaimana cara kerja upload gambar. Dan alhamdulillah, kemarin sudah mendapatkan pencerahan. Sehingga saya sudah tidak sabar untuk berbagi kepada Anda semuanya.

Oke, sekarang mari kita mulai mempelajarinya.

Let’s go!

Cara Upload Gambar Menggunakan Codeigniter 4

Saya akan menjabarkan dan menjelaskannya step by step. Harapannya, tutorial ini akan semakin mudah Anda pahami.

Mari kita mulai.

Step #1 – Download Codeigniter 4

Anda bisa download file Codeigniter di sini.

Setelah di download silahkan pindahkan ke htdocs dan rename menjadi ci4_uploads. (Saya asumsikan Anda menggunakan XAMPP. Jika bukan, silahkan menyesuaikan)

Step #2 – Membuat Table Uploads dan Konfigurasi Database

Buat database bernama ci4_uploads di phpmyadmin.

Kemudian ketik command di bawah ini pada direktori project:

php spark migrate:create uploads

Cari file yang berujung _uploads.php di direktori app/Database/Migrations

Setelah Anda buka, modifikasi pada function up() seperti code di bawah ini:

public function up()
{
    $this->forge->addField([
        'id'            => [
            'type'           => 'INT',
            'constraint'     => 11,
            'unsigned'       => TRUE,
            'auto_increment' => TRUE
        ],
        'gambar'    => [
            'type'           => 'VARCHAR',
            'constraint'     => '250',
        ],
    ]);
    $this->forge->addKey('id', TRUE);
    $this->forge->createTable('uploads');
} 

Jangan lupa untuk mengkonfigurasikan databasenya ya.

Silahkan buka app/Config/Database.php. Cari kode di bawah ini:

public $default = [
    'DSN'      => '',
    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',
    'DBDriver' => 'MySQLi',
    'DBPrefix' => '',
    'pConnect' => false,
    'DBDebug'  => (ENVIRONMENT !== 'production'),
    'cacheOn'  => false,
    'cacheDir' => '',
    'charset'  => 'utf8',
    'DBCollat' => 'utf8_general_ci',
    'swapPre'  => '',
    'encrypt'  => false,
    'compress' => false,
    'strictOn' => false,
    'failover' => [],
    'port'     => 3306,
]; 

Ubah menjadi:

 public $default = [
    'DSN'      => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'ci4_uploads',
    'DBDriver' => 'MySQLi',
    'DBPrefix' => '',
    'pConnect' => false,
    'DBDebug'  => (ENVIRONMENT !== 'production'),
    'cacheOn'  => false,
    'cacheDir' => '',
    'charset'  => 'utf8',
    'DBCollat' => 'utf8_general_ci',
    'swapPre'  => '',
    'encrypt'  => false,
    'compress' => false,
    'strictOn' => false,
    'failover' => [],
    'port'     => 3306,
]; 

Sekarang Anda sudah bisa migrate table uploads ke database.

Silahkan ketik command ini di terminal pada direktori project:

php spark migrate

Step #3 – Membuat Model Upload

Buat file bernama UploadModel.php dan simpan di direktori app/Models.

Kemudian modifikasi UploadModel.php seperti kode di bawah ini:

<?php namespace App\Models;

use CodeIgniter\Model;

class UploadModel extends Model
{
    protected $table;

    public function __construct() {

        parent::__construct();
        $db = \Config\Database::connect();
        $this->table = $this->db->table('uploads');
    }

    public function get_uploads()
    {
        return $this->table->get()->getResultArray();
    }
    public function insert_gambar($data)
    {
        return $this->table->insert($data);
    }
} 

Penjelasan:

Function get_uploads() digunakan untuk mengambil dari dari table uploads dan diresult dengan output array. Bagian ini sangat penting untuk halaman view index.

Sedangkan function insert_gambar() digunakan untuk menginput hasil dari form ke database.

Step #4 – Membuat Controller Upload

Ada perbedaan dari contoh project lainnya seperti tutorial crud codeigniter 4, dan pagination codeigniter 4 terutama bagian controller.

Di controller ini saya menggunakan validation.

Oke, silahkan buat file bernama Upload.php dan simpan di app/Controllers.

Kemudian ketik controller seperti di bawah ini:

<?php namespace App\Controllers;

// Tambahkan Upload Model di sini
use App\Models\UploadModel;

class Upload extends BaseController
{

    protected $model_upload;

    public function __construct() {

        // Memanggil form helper
        helper('form');
        // Menyiapkan variabel untuk menampung upload model
        $this->model_upload = new UploadModel();
    }

    public function index()
    {
        if (!$this->validate([]))
        {
            $data['validation'] = $this->validator;
            $data['uploads'] = $this->model_upload->get_uploads();
            echo view('form_upload', $data);
        }
    }
 
    public function process()
    {

        if ($this->request->getMethod() !== 'post') {
            return redirect()->to(base_url('upload'));
        }

        $validated = $this->validate([
            'file_upload' => 'uploaded[file_upload]|mime_in[file_upload,image/jpg,image/jpeg,image/gif,image/png]|max_size[file_upload,4096]'
        ]);
 
        if ($validated == FALSE) {
            
            // Kembali ke function index supaya membawa data uploads dan validasi
            return $this->index();

        } else {

            $avatar = $this->request->getFile('file_upload');
            $avatar->move(ROOTPATH . 'public/uploads');

            $data = [
                'gambar' => $avatar->getName()
            ];
    
            $this->model_upload->insert_gambar($data);
            return redirect()->to(base_url('upload'))->with('success', 'Upload successfully'); 
        }

    }

}

 

Penjelasan:

Perhatikan code di bawah ini:

$avatar = $this->request->getFile('file_upload');
$avatar->move(ROOTPATH . 'public/uploads'); 

File disimpan di root public / uploads. Jadi jangan lupa untuk membuat folder uploads di public ya.

Step #6 – Membuat Halaman View

Langkah berikutnya adalah membuat halaman view dengan tampilan validation.

Silahkan buat file form_upload.php di dalam direktori app/Views

Ketik code berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tutorial Upload Gambar Menggunakan Codeigniter 4 - Ilmu Coding</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
</head>
<body>

    <div class="container mt-5 mb-5 text-center">
        <h4>Tutorial Upload Gambar Menggunakan Codeigniter 4 - Ilmu Coding</h4>
    </div>
    <div class="container">
        
        <!-- Success Upload -->
        <?php if(!empty(session()->getFlashdata('success'))){ ?>
            <div class="alert alert-success">
                <?php echo session()->getFlashdata('success');?>
            </div>
        <?php } ?>
        
        <?php 
            $errors = $validation->getErrors();
            if(!empty($errors))
            {
                echo $validation->listErrors('my_list');
            }
        ?>

        <div class="card">
        
            <div class="card-header">Form Upload</div>

            <div class="card-body">

                <?= form_open_multipart(base_url('upload/process')); ?>

                <div class="form-group">
                    <input type="file" name="file_upload" id=""> 
                </div>

                <div class="form-group">
                    <?= form_submit('Send', 'Send') ?>
                </div>

                <?= form_close() ?>

                <div class="table-responsive">
                    <table class="table table-bordered table-hovered">
                        <thead>
                            <tr>
                                <th width="10">No</th>
                                <th>Gambar</th>
                                <th width="200" class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach($uploads as $key => $data) { ?>
                            <tr>
                                <td><?= $key + 1 ?></td>
                                <td><img src=" <?= base_url('uploads/'.$data['gambar']) ?> " width="100"></td>
                                <td>
                                    <div class="btn-group">
                                        <a href="" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i></a>
                                        <a href="" class="btn btn-secondary btn-sm"><i class="fa fa-eye"></i></a>
                                        <a href="" class="btn btn-danger btn-sm"><i class="fa fa-trash-alt"></i></a>
                                    </div>
                                </td>
                            </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                </div>
            </div>            

        </div>
        
        
    
    </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html> 

Step #7 – Testing Upload Gambar dengan Codeigniter 4

Jalankan command ini:

php spark serve

Sekarang buka URL ini di browser Anda:

localhost:8080/upload

Hasilnya:

Tutorial Upload Gambar Menggunakan Codeigniter 4

By default jika Anda klik send tanpa ada file yang dipilih atau tidak sesuai dengan validasi di controller, maka akan tampil:

Tutorial Upload Gambar Menggunakan Codeigniter 4

Jika Anda ingin mengcustom dengan tampilan bootstrap, caranya dengan:

Buat file baru bernama _list_errors.php di app/Views

Ketik code berikut:

<div class="alert alert-danger" role="alert">
    <ul>
    <?php foreach ($errors as $error) : ?>
        <li><?= esc($error) ?></li>
    <?php endforeach ?>
    </ul>
</div> 

Kemudian daftarkan _list_errors.php di app/Config/Validation.php

Cari baris:

public $templates = [
    'list'   => 'CodeIgniter\Validation\Views\list',
    'single' => 'CodeIgniter\Validation\Views\single',
]; 

Ubah menjadi:

 public $templates = [
    'list'   => 'CodeIgniter\Validation\Views\list',
    'single' => 'CodeIgniter\Validation\Views\single',
    'my_list' => '_list_errors'
]; 

Terakhir modifikasi form_upload.php pada bagian:

echo $validation->listErrors(); 

Menjadi:

echo $validation->listErrors('my_list'); 

Sekarang tampilan validationnya sudah berubah menjadi:

Tutorial Upload Gambar Menggunakan Codeigniter 4

Sekarang cobalah upload salah satu gambar dan jika tidak ada yang error, maka hasilnya:

Tutorial Upload Gambar Menggunakan Codeigniter 4

Hasil dari upload gambar akan masuk ke direktori ci4_uploads/writable/uploads

Lihat:

Tutorial Upload Gambar Menggunakan Codeigniter 4

Penutup

Apakah belajarnya sudah cukup sampai di sini?

Tentu belum.

Masih ada serial lainnya seperti CRUD Upload Gambar dengan Codeigniter 4 yang akan hadir setelahnya.

Doakan ya.

Bersambung dulu …

Download Source Code

Semoga bermanfaat ya. Aamiin.

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

6 Replies to “Tutorial Upload Gambar Menggunakan Codeigniter 4”

  1. *Cara alternatif*
    Karena disitu menggunakan “move”, kita bisa taroh file upload di “public”, ex: $files->move(ROOTPATH . “public/uploads”);

    sehingga kita bisa ambil gambar : base_url(‘uploads/’ . $fileName);

    **
    untuk yang writable blm explore jauh, tp bisa menggunakan “store”, dah otomatis masuk folder “writeable/uploads” 😀

    1. Wah mantab. Thanks infonya.

      Untuk store kita bisa bikin folder “lagi” di folder “writable/uploads”. Itu yang saya pahami sih. Kalau folder uploads memang sudah otomatis tanpa harus pakai store pun.

  2. Terima kasih tutorialnya gan.
    Kalo validasi file upload untuk REST API caranya gmna ya ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.