Tutorial Upload Image di Codeigniter 4

Pada tutorial sebelumnya admin sudah membahas bagaimana cara menampilkan data multi tabel di codeigniter 4 dan kali ini admin membahas tentang cara membuat upload file gambar dengan codeigniter 4

Pada setiap aplikasi web biasanya mempunyai fitur upload gambar. Dan dengan menggunakan framework codeigniter 4 dapat mempermudah para development web untuk mempercepat dalam membuat fitur-fitur di web. Karena didalam codeigniter 4 sudah menyediakan fungsi untuk upload gambar maupun file mari kita bahas langkah-langkahnya berikut ini :

Membuat Database

Database yang akan kita gunakan adalah database mysql jika kalian menggunakan database yang lainnya silahkan bisa menyesuaikan .

Jika kalian belum tahu tentang database mysql silahkan baca artikel yang kemarin tentang Pengenalan Database Mysql

membuat database dengan nama ci4_upload

create database ci4_upload;

Kemudian kita buat tabel dengan nama upload

create table upload_gambar (
    -> id int(5) not null,
    -> judul varchar(40),
    -> gambar varchar(50),
    -> PRIMARY KEY(id)
    -> );

Installasi Codeigniter 4

Jika belum paham tentang cara instalasi Codeigniter 4 bisa baca artikel Cara Installasi Codeigniter 4

Konfigurasi Database Mysql

Cara Membuat Koneksi database di codeigniter 4 ada dua cara yaitu cara pertama dengan merename file env menjadi .env yang ada di folder root project atau dengan file Database.php yang ada di folder app/config dan admin menggunakan file .env

 database.default.hostname = localhost
 database.default.database = ci4_upload
 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 File Models

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

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

Dari kode diatas terdapat beberpa kode dengan fungsi menampilkan data (public function getGambar) dan juga fungsi kode menyimpan data (public function simpan_gambar).

Membuat Controller

Sekarang buat file baru dengan nama Upload.php kemudian simpan di folder app/Controller kemudian masukan kode berikut ini :

<?php namespace App\Controllers;
 
use CodeIgniter\Controller;
use App\Models\ModelsUpload;
 
class Upload extends BaseController
{
    public function index()
    {
        helper('form');
        $model = new ModelsUpload();
        if (!$this->validate([]))
        {
            $data['validation'] = $this->validator;
            $data['gambar'] = $model->getGambar();
            echo view('view_list',$data);
        }
    }
    public function proses() {
        $model = new ModelsUpload();
        if ($this->request->getMethod() !== 'post') {
            return redirect()->to('upload');
        }
        $validation = $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 ($validation == FALSE) {
            
            return $this->index();
        } else {
            $upload = $this->request->getFile('file_upload');
            $upload->move(WRITEPATH . '../public/assets/images/');
        $data = array(
            'judul'  => $this->request->getPost('judul'),
            'gambar' => $upload->getName()
        );
        $model->simpan_gambar($data);
        return redirect()->to('./upload')->with('berhasil', 'Data Berhasil di Simpan');
        }
    }
}

Dari kode diatas terdapat beberapa fungsi, mulai dari menampilkan data (public function index()) dengan memanggil fungsi dari Model ($model = new ModelsUpload();).  Fungsi menyimpan data dan upload file (public function proses) yang diteruskan ke model ($model->simpan_gambar($data);) dan juga tempat penyimpanan untuk gambar yang kita upload ($upload->move(WRITEPATH . '../public/assets/images/');) silahkan buat folder baru assets/images di dalam foder public

Membuat Tampilan View

Sekarang kita buat untuk tampilan list data dan juga form uploadnya kita buat file baru dengan nama view_list.php kemudian simpan di folder "app/view" kemudian ketikan 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"> 
</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 Gambar </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('upload/proses')); ?>
    		<div class="row">
    			<div class="col-md-4">
    				<label>Judul</label>
    				<div class="form-group">
                   		 <input type="text" name="judul" class="form-control"> 
                	</div>	
    			</div>
    			<div class="col-md-4">
    				<label>File</label>
    				<div class="form-group">
                   		 <input type="file" name="file_upload" class="form-control"> 
                	</div>	
    			</div>
    			<div class="col-md-4">
    				<label>Aksi</label>
    				<div class="form-group">
                   		  <?= form_submit('Send', 'Simpan') ?> 
                	</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>Judul</th>
		            <th>Gambar</th>
		        </tr>
		        	<?php foreach($gambar as $row):?>
		        <tr>
		        	<td><?=$row['id'];?></td>
		            <td><?=$row['judul'];?></td>
		            <td><img src="<?=base_url('assets/images/'.$row['gambar']);?>" width="100"></td>
		        </tr>
		        <?php endforeach;?>
		    </table>
		</div>
	</div>
</body>
</html>

Jika sudah silahkan simpan lalu jalankan projectnya ketikan diterminal php saprk serve kemudian buka web browser kita ketikan alamat http://localhost:8080/upload maka tampilannya akan seperti dibawah ini :

Kesimpulan

Dari tutorial diatas kita sudah berhasil membuat sebuah fitur upload image dengan codeigniter 4 untuk membuat fitur upload file di codeigniter 4 ini lebih kodenya simple dari pada di codeigniter versi sebelumnya. 

Semoga tutorial membuat upload images/file/gambar ini dapat bermanfaat dan dapat dijadikan refrensi dalam pembuatan aplikasi dengan codeigniter 4..