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

Multiple Upload Image dengan Codeigniter 4

4 min read

Tutorial Multiple Upload Gambar dengan Codeigniter 4

Pada kesempatan kali ini Ilmu Coding akan sharing tutorial multiple upload image dengan Codeigniter 4.

Tutorial ini sangat penting untuk Anda pelajari. Sebab, dalam suatu aplikasi terkadang membutuhkan beberapa upload image sekaligus.

Misalnya dalam suatu kasus upload galery ataupun product.

Biasanya akan membutuhkan lebih dari 1 gambar yang akan diupload.

Oleh sebab itu mari kita mulai saja pembahasan multiple upload image dengan Codiegniter 4 ini.

Let’s go!

Install Codeigniter 4

Pada tutorial sebelumnya, Ilmu Coding sudah membuatkan tutorial cara install codeigniter 4.

Jika Anda belum install codeigniter 4, kami menyarankan untuk membaca artikel berikut ini:

Baca: Tutorial Install Codeigniter 4

Ubah Environment ke Development

Silahkan baca artikel di bawah ini untuk pembahasan lengkap bagaimana mengubah environment dari production jadi development:

Baca: Cara Ubah Env Production ke Development

Jika sudah, silahkan buka file .env kemudian cari baris kode berikut ini:

# CI_ENVIRONMENT = production

Ubah menjadi:

CI_ENVIRONMENT = development

Buat Database Baru

Silahkan buat database dengan nama ci4_multiple_upload di PHPmyadmin atau sejenisnya.

Kemudian buka kembali file .env dan cari kode berikut ini:

# database.default.hostname = localhost
# database.default.database = ci4
# database.default.username = root
# database.default.password = root
# database.default.DBDriver = MySQLi

Ubah menjadi:

database.default.hostname = localhost
database.default.database = ci4_multiple_upload
database.default.username = root
database.default.password = 
database.default.DBDriver = MySQLi

Oke, setting database sudah selesai.

Selanjutnya ke tahap pembuatan table.

Let’s go!

Design Table

Di tutorial ini kami akan membuat 2 table, yaitu:

  1. Table uploads
  2. Table galeries

Tampilannya seperti ini:

Multiple upload image dengan codeigniter 4 - 1

Untuk membuat table seperti pada gambar di atas, pertama-tama silahkan ketik command berikut ini:

php spark migrate:create uploads

Kemudian buka file yang ujungnya _uploads.php di dalam direktori app/Database/Migrations.

Pada function up(), silahkan modifikasi kodenya seperti gambar di bawah ini:

$this->forge->addField([
	'id'			=> [
		'type'           => 'INT',
		'constraint'     => 11,
		'unsigned'       => TRUE,
		'auto_increment' => TRUE
	],
	'title'	=> [
		'type'           => 'VARCHAR',
		'constraint'     => '250',
	],
]);
$this->forge->addKey('id', TRUE);
$this->forge->createTable('uploads');

Kemudian ketik command berikut ini (lagi) untuk membuat table galeries:

php spark migrate:create galeries

Kemudian buka file yang ujungnya _galeries.php di dalam direktori app/Database/Migrations.

Pada function up(), silahkan modifikasi kodenya seperti gambar di bawah ini:

$this->forge->addField([
	'id'			=> [
		'type'           => 'INT',
		'constraint'     => 11,
		'unsigned'       	=> TRUE,
		'auto_increment' 	=> TRUE
	],
	'upload_id'	=> [
		'type'           => 'INT',
		'constraint'     => 11,
		'unsigned'       => TRUE,
		'null'			 => TRUE
	],
	'gambar'	=> [
		'type'           => 'VARCHAR',
		'constraint'     => 250,
	],
]);
$this->forge->addKey('id', TRUE);
$this->forge->addForeignKey('upload_id','uploads','id','CASCADE','CASCADE');
$this->forge->createTable('galeries');

Terakhir, silahkan ketik command berikut ini agar 2 table yang kita buat akan di migration ke database ci4_multiple_upload:

php spark migrate

Jika berhasil, maka akan tampil seperti gambar berikut ini:

tutorial Multiple upload image dengan codeigniter 4 gambar 2

Membuat Model Upload dan Galery

Silahkan buat file baru bernama Upload_model.php dan kemudian simpan di direktory app/Models.

Ketik kode berikut ini:

<?php namespace App\Models;

use CodeIgniter\Model;

class Upload_model extends Model
{
    protected $table = "uploads";

    public function insertUpload($data)
    {
        return $this->db->table($this->table)->insert($data);
    }
}

Simpan.

Kemudian buat file baru lagi bernama Galery_model.php dan kemudian simpan di direktory app/Models.

Kodenya sebagai berikut:

<?php namespace App\Models;

use CodeIgniter\Model;

class Galery_model extends Model
{
    protected $table = "galeries";

    public function insertGalery($data)
    {
        return $this->db->table($this->table)->insert($data);
    }
}

Simpan.

Membuat Controller Upload

Silahkan buat file baru bernama Upload.php dan simpan di dalam direktori app/Controllers.

Kemudian ketik kode berikut ini:

<?php namespace App\Controllers;

use App\Models\Upload_model;
use App\Models\Galery_model;

class Upload extends BaseController
{
    public function __construct()
    {
        $this->upload = new Upload_model();
        $this->galery = new Galery_model();
    }

	public function index()
	{
        helper('form');
		echo view('v_multiple_upload');
    }

    public function process()
    {
        $title = $this->request->getPost('title');
        // dapatkan input file berupa array
        $files = $this->request->getFiles();

        if($files){
            
            // buat value id random di table uploads
            $random = rand(000, 999);
            
            $data_uploads = [
                'id' => $random,
                'title' => $title
            ];

            $this->upload->insertUpload($data_uploads);

            // ulangi insert gambar ke table galery menggunakan foreach
            foreach($files['file_upload'] as $img){

                $data_galery = [
                    'upload_id' => $random,
                    'gambar' => $img->getRandomName()
                ];

                $this->galery->insertGalery($data_galery);
                // upload dengan random name
                $img->move(ROOTPATH . 'public/uploads', $img->getRandomName());
            
            }
            session()->setFlashdata('success', 'Berhasil upload '.count($files['file_upload']).' files');
            return redirect()->to('/upload');
        
        }
    }
}

Simpan.

Buat View untuk Upload

Silahkan buat file baru bernama v_multiple_upload.php dan simpan di direktory app/Views.

Ketik kode 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 Multiple 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 Multiple Upload Gambar Menggunakan Codeigniter 4 - Ilmu Coding</h4>
    </div>
    <div class="container">

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

            <div class="card-body">

                <?php if(!empty(session()->getFlashdata('success'))){ ?>

                    <div class="alert alert-success">
                        <?php echo session()->getFlashdata('success');?>
                    </div>     
                
                <?php } ?>

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

                <div class="form-group">
                    <label for="">Topik</label>
                    <input type="text" name="title" placeholder="Enter topik" class="form-control"> 
                </div>
                
                <div class="form-group">
                <label for="">Files</label>
                    <input type="file" name="file_upload[]" multiple> 
                </div>

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

                <?= form_close() ?>

            </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>

Simpan.

Buat Folder Uploads

Silahkan buat folder baru bernama uploads di dalam direktory public.

Testing Multiple Upload Image dengan Codeigniter 4

Pertama-tama silahkan ketik command berikut ini:

php spark serve

Buka browser Anda kemudian ketik URL berikut ini:

localhost:8080/upload

Jika berjalan dengan baik, maka akan tampil seperti gambar di bawah ini:

tutorial Multiple upload image dengan codeigniter 4 gambar 3

Silahkan masukan topik dan beberapa gambar pada form tersebut.

Seperti pada gambar di bawah ini:

tutorial Multiple upload image dengan codeigniter 4 gambar 4

Pada gambar di atas, saya mencoba upload 5 gambar.

Silahkan klik send.

Jika berjalan lancar maka akan tampil gambar seperti ini:

tutorial Multiple upload image dengan codeigniter 4 gambar 5

Selesai.

Download Source Code Multiple Upload Codeigniter 4

Silahkan download full source code multiple upload codeigniter 4 pada link Github di bawah ini:

Penutup

Alhamdulillah telah selesai tutorial multiple upload image dengan codeigniter 4 ini.

Tapi jangan puas dulu…

… Mungkin Anda masih membutuhkan tutorial membuat CRUD REST API Codeigniter 4.

Jika ia, silahkan kunjungi halaman itu ya.

Oh iya, jika terjadi error, silahkan bertanya melalui kolom komentar di bawah artikel ini ya.

Semoga bermanfaat.

Aamiin.

Selamat belajar …

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

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.