Multiple Upload File dengan Codeigniter 4

Di era modern ini saat kita membuka sebuah halaman form yang ada di website terdapat beberapa fitur di antaranya fitur upload  image, fitur ini merupakan fitur yang sangat penting jika kalian membuat sebuah website untuk menampilkan berita maupun sebuah artikel, apalagi kalian seorang back-end development pasti tidak jauh-jauh untuk fitur ini.

Framework Codeigniter merupakan sebuah kerangka kerja PHP yang banyak di gunakan saat ini karena penggunaan yang mudah di pahami dan digunakan, selain itu codeigniter mempunyai banyak library helper yang lengkap.

Pada kesempatan kali ini admin akan berbagi tutorial membuat multiple upload dengan codeigniter 4 atau fitur banyak upload image/file/gambar dengan codeigniter 4 dalam satu kali upload.

Pada tutorial sebelumnya admin juga sudah membahas cara membuat upload image dengan codeigniter 4 dan juga CRUD dengan fitur upload image.

OK langsung saja kita ke pokok materi cara membuat multiple upload image dengan codeigniter 4

Membuat Database

Database merupakan sebuah kumpulan data yang disimpan secara sistematis yang ada didalam komputer. Contoh beberapa database yang sering digunakan cukup populer diantaranya adalah MySQL, SQL Server, Oracle dan kawan-kawanya.

Kali ini admin menggunakan database MySQL dengan tools phpmyadmin silahkan buat database baru dengan nama galery dan tabel gambar seperti struktur berikut ini :

Install Codeigniter 4

Langkah pertama yang harus kita lakukan adalah melakukan installasi codeigniter 4, dalam melakukan installasi codeigniter 4 ada dua cara yaitu secara manual atau dengan composer, dan admin sudah membahasnya di tutorial sebelumnya silahkan anda baca Cara Installasi Codeigniter 4

Membuat Koneksi Database dengan file env

Dalam membuat koneksi database ada dua cara yaitu dengan mengedit file Database.php atau dengan menggunakan file env dan kali ini admin menggunakan file env. Silahkan buka file env yang ada di folder root kemudian rename menhjadi .env (tambah titik di depan huruf env) dan buka file tersebut kemudian cari dan ubah kode berikut ini 

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

Cari kode diatas kemudian edit hilangkan tanda pagarnya (#) lalu sesuaikan dengan host,username,password dan nama database kalian kemudian simpan jangan lupa juga ubah juga CI_ENVIRONMENT = development 

Membuat Model

Silahkan buat file baru dengan nama GaleryModels.php masukan kode berikut ini kemudian simpan di folder app/models

<?php namespace App\Models;
use CodeIgniter\Model;
 
class GaleryModels extends Model
{
    protected $table = 'upload_galery';
     
    public function getGalery()
    {
        return $this->findAll();  
    }
    public function simpan_galery($data)
    {
        $query = $this->db->table($this->table)->insert($data);
        return $query;
    }
 }

Membuat Controller

Setelah file models kita buat, kita buat file baru lagi untuk controllers beri nama Galery.php masukan kode berikut ini kemudian simpan di folder  app/Controllers

<?php namespace App\Controllers;
 
use CodeIgniter\Controller;
use App\Models\GaleryModels;
 
class Galery extends BaseController
{
    public function index()
    {
        helper('form');
        $model = new GaleryModels();
        if (!$this->validate([]))
        {
            $data['validation'] = $this->validator;
            $data['gambar'] = $model->getGalery();
            echo view('view_list',$data);
        }
    }
    public function proses() {
        $model = new GaleryModels();
        $upload = $this->request->getFiles();
        $judul = $this->request->getPost('judul');

        foreach ($upload['file_upload'] as $upl) {

        $data = array(
            'Judul_Galery'  => $judul,
            'Gambar' => $upl->getName()
        );
        
        $upl->move(WRITEPATH . '../public/assets/images');
        $model->simpan_galery($data);
        
        }
        return redirect()->to('./galery')->with('berhasil', 'Data Berhasil di Simpan Sejumlah '.count($upload['file_upload']).' files');
    }
}

Dalam file controller diatas kita sudah memanggil file models untuk menghubungkan fungsi tampil ($model->getGalery();) dan juga input data ($model->simpan_galery($data);)  ke database, Selain itu kita juga menggunakan perulangan foreach untuk melakukan perulangan jumlah upload file kita.

Dan Jangan lupa untuk membuat folder assets dan images di dalam folder public sebagai tempat penyimpanan images/gambar yang kita upload.

Membuat View

View ini yang digunakan untuk membuat tampilannya yang terhubung dengan controller dan models, silahkan buat file baru dengan nama view_list.php simpan di folder app/view kemudian masukan kode berikut ini 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Menampilkan Data Multi Join Tabel</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
        $(document).ready(function(){
            $('#add').click(function(event){
                var tambahfile = $('#file');
                event.preventDefault(); 
                $('<div id="box"><input type="file" name="file_upload[]" class="form-control" /><button id="remove">Hapus</button></div>').appendTo(tambahfile);     
            });
            
            $('body').on('click','#remove',function(){  
                $(this).parent('div').remove(); 
            });     
        });
        </script>
</head>
<body style="width: 70%; margin: 0 auto; padding-top: 30px;">
	<div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Upload Galery </h2>
            </div>
        </div>
    </div>
    <hr>
    <div class="row">
    	<div class="col-lg-12">
    		 <!-- Success Upload -->
	        <?php if(!empty(session()->getFlashdata('berhasil'))){ ?>
	            <div class="alert alert-success">
	                <?php echo session()->getFlashdata('berhasil');?>
	            </div>
	        <?php } ?>
	        
	        <?php 
	            $errors = $validation->getErrors();
	            if(!empty($errors))
	            {
	                echo $validation->listErrors('list');
	            }
	        ?>
    		<?= form_open_multipart(base_url('galery/proses')); ?>
            <div class="row">
                <div class="col-md-12">
                    <label>Judul Galery</label>
                    <div class="form-group">
                         <input type="text" name="judul" class="form-control"> 
                    </div>  
                </div>
            </div>
    		<div class="row">

    			<div class="col-md-12">
    				<label>Gambar</label>
    				<div class="form-group">
                   		 <input type="file" name="file_upload[]" class="form-control" multiple> 
                         <div id="file"></div>
                	</div>	
    			</div>
                <div class="col-md-12">
                    <div class="form-group">
                        <button id="add" class="add">Tambah File</button>
                    </div>  
                </div>
    			<div class="col-md-12">
    				<div class="form-group">
                          <button class="btn btn-primary">Simpan Galery</button>
                	</div>	
    			</div>
    		</div>
    		<?= form_close() ?>
    	</div>
    </div>
    <div class="row">
        <div class="col-lg-12 margin-tb">
			<table class="table table-bordered">
		        <tr>
		            <th>No</th>
		            <th>Gambar</th>
                    <th>Judul Galery</th>
		        </tr>
		        	<?php foreach($gambar as $row):?>
		        <tr>
		        	<td><?=$row['id'];?></td>
		            <td><img src="<?=base_url('assets/images/'.$row['Gambar']);?>" width="100"></td>
                    <td><?=$row['Judul_Galery'];?></td>
		        </tr>
		        <?php endforeach;?>
		    </table>
		</div>
	</div>
</body>
</html>

Dari kode diatas kita sudah membuat sebuah form yang digunakan untuk multiple upload file dengan tambahan jquery untuk button tambah file yang jadinya lebih menarik.

Kemudian buka komposer masuk ke folder root codeigniter 4 kemudian ketikan php spark serve lalu buka web broser dan ketikan alamat : http://localhost:8080/galery kemudian kita mencoba untuk mengupload beberapa file jika berhasil maka tampilannya akan seperti berikut ini :

Kesimpulan

Dari tutuorial diatas kita bisa membuat sebuah fitur multiple upload image/gambar maupun file dengan menggunakan codeigniter 4.

Framework codeigniter merupakan kerangka kerja (PHP) yang mudah digunakan untuk development aplikasi web.

Semoga dengan tutorial diatas diharapkan bisa membuat sebuah aplikasi sederhana dengan menggunakan fitur multiple upload file maupun gambar/image. dan semoga dapat bermanfaat bagi kita semua.