CodeIgniter 4 sudah memiliki kelas Manipulasi Gambar untuk menyesuaikan gambar. Dengan ini, Anda dapat mengubah ukuran, mengubah kualitas, memutar, memotong, dan menambahkan watermark ke gambar. Ini didukung oleh pustaka GD dan ImageMagick. Dalam tutorial ini, saya menunjukkan bagaimana Anda dapat upload dan mengubah ukuran dimensi gambar di CodeIgniter 4.
Langkah 1: Membuat Controller
Pertama kita buat terlebih dahulu ImagesController dengan perintah berikut ini.
php spark make:controller ImagesController
Buka file app/Controllers/ImagesController.php dan buat 2 method seperti dibawah.
- index() – load index view
- uploadfile() – method untuk memanggil form submit
Tentukan validasi untuk file. Jika file tidak divalidasi kemudian kembali ke halaman dengan pesan kesalahan. Jika divalidasi kemudian upload file ke folder uploads.
Setelah file terupload, langkah selanjutnya yaitu kita akan me-resize gambar. Buat objek \Config\Services::image(). Di $resize_location tetapkan lokasi penyimpanan file ukuran gambar. Periksa apakah lokasi tersedia atau tidak. Jika tidak tersedia maka buatlah.
$image = \Config\Services::image();
$image->withFile('../public/uploads/'.$newName)
->resize(320, 240, true, 'width')
->save('../public/thumbnail/'.$newName);Di withFile(), lewati jalur file yang diunggah.
Dalam resize() berikan 4 parameter seperti berikut:
- Gambar lebar baru.
- Gambar ketinggian baru.
- Setel ke true jika Anda ingin mempertahankan rasio aspek gambar.
- Menurut sumbu mana Anda ingin mempertahankan rasio aspek. Dibutuhkan lebar atau tinggi sebagai parameter. Jika yang ke-3 disetel ke false maka tidak akan ada efek dari parameter ke-4 ini.
Panggil save() untuk menyimpan file yang dibuat.
Berikut untuk full code langkah pertama.
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
class ImagesController extends BaseController
{
public function index(){
return view('index');
}
public function uploadfile(){
$request = service('request');
## Validation
$validation = \Config\Services::validation();
$input = $validation->setRules([
'file' => 'uploaded[file]|max_size[file,2048]|ext_in[file,jpeg,jpg,png],'
]);
if ($validation->withRequest($this->request)->run() == FALSE){
$data['validation'] = $this->validator;
return redirect()->back()->withInput()->with('validation', $this->validator);
}else{
if($file = $this->request->getFile('file')) {
if ($file->isValid() && ! $file->hasMoved()) {
// Get file name and extension
$filename = $file->getName();
$ext = $file->getClientExtension();
// Get random file name
$newName = $file->getRandomName();
// Store file in public/uploads/ folder
$upload_location = "../public/uploads/";
$file->move($upload_location, $newName);
// File path to display preview
$filepath = base_url()."/uploads/".$newName;
// Resize image
$resize_location = "../public/thumbnail/";
if (!is_dir($resize_location)) {
mkdir($resize_location, 0777, TRUE);
}
$image = \Config\Services::image();
$image->withFile($upload_location.$newName)
->resize(320, 240, true, 'width')
->save($resize_location.$newName);
// Set Session
session()->setFlashdata('message', 'File uploaded successfully.');
session()->setFlashdata('alert-class', 'alert-success');
}else{
// Set Session
session()->setFlashdata('message', 'File not uploaded.');
session()->setFlashdata('alert-class', 'alert-danger');
}
}else{
// Set Session
session()->setFlashdata('message', 'File not uploaded.');
session()->setFlashdata('alert-class', 'alert-danger');
}
}
return redirect()->route('/');
}
}Langkah 2: Setting Routes
Langkah yang selanjutnya kita perlu mendefinisikan 2 routes antara lain untuk menampilkan upload form dan proses menyimpan upload file. Caranya yaitu dengan membuka app/Config/Routes.php dan definisikan routes baru seperti dibawah ini.
$routes->get('/', 'ImagesController::index');
$routes->post('image/uploadfile', 'ImagesController::uploadfile');Langkah 3: Membuat View
Langkah terakhir yang perlu kita lakukan adalah membuat halaman tampilan untuk upload gambar. Kita perlu membuat file index.php di foleder app/Views
Kita akan menggunakan bootstrap alert jika terdapat SESSION. Disini kita buat form dan mengatur action ke site_url(‘image/uploadfile’). Di dalam tag form kita buat file element untuk menerima upload image dan submit button.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to Upload and Resize Image in CodeIgniter 4</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 mt-5" style="margin: 0 auto;">
<?php
// Display Response
if(session()->has('message')){
?>
<div class="alert <?= session()->getFlashdata('alert-class') ?>">
<?= session()->getFlashdata('message') ?>
</div>
<?php
}
?>
<?php $validation = \Config\Services::validation(); ?>
<form method="post" action="<?=site_url('image/uploadfile')?>" enctype="multipart/form-data">
<?= csrf_field(); ?>
<div class="form-group mb-4">
<label class="control-label col-sm-2" for="file">File:</label>
<div class="col-sm-10">
<input type="file" class="form-control" id="file" name="file" >
</div>
<!-- Error -->
<?php if( $validation->getError('file') ) {?>
<div class='text-danger mt-2'>
* <?= $validation->getError('file'); ?>
</div>
<?php }?>
</div>
<div class="form-group ">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-info">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>Selamat kita telah berhasil meng-upload dan resize gambar di Codeigniter 4. Jika ada kesulitan, Anda bisa langsung tulis di kolom komentar dibawah ini.