Cara Mengubah Ukuran Gambar Dengan Paket Intervention Image
Halo semuanya, selamat beraktivitas coders :)
Panduan langkah demi langkah ini akan menunjukkan kepada Anda cara mengunggah dan mengubah ukuran gambar di aplikasi laravel Anda menggunakan paket PHP Intervention Image .
Mengubah ukuran gambar, secara teori, adalah proses mengubah dimensi gambar. Anda sering menjelajahi berbagai situs web, termasuk jejaring sosial, e-niaga, dan situs lain tempat Anda perlu memposting gambar. Dalam beberapa kasus, mungkin perlu membuat atau menghasilkan gambar mini.
Oleh karena itu, kita perlu mengembangkan fungsi pengubahan ukuran file untuk memperkecil ukuran dan dimensi gambar. Rekomendasi ini berlaku untuk versi Laravel 6, Laravel 7, Laravel 8, dan Laravel 9.
Mari masuk ke detailnya
Buat project Laravel
Dari awal buka terminal, ketik perintah dan tekan enter. composer akan menginstal aplikasi Laravel baru.
composer create-project --prefer-dist laravel/laravel laravel-example
Setelah aplikasi dibuat, masuk ke dalam direktori aplikasi dengan menjalankan perintah berikut:
cd laravel-example
Tambahkan paket intervention Image
Langkah ini menjelaskan cara menjalankan perintah di terminal Anda dan menjalankannya untuk menginstal plugin menggunakan paket PHP intervention Image dalam aplikasi Laravel Anda.
composer require intervention/image
Daftar Intervention Image
Untuk menggunakan paket tersebut di Laravel, Anda perlu inject kelas paket Anda ke dalam array providers dan alias.
Buka file config/app.php dan perbarui kode berikut dalam file.
<?php
return [
......
$providers => [
......,
'Intervention\Image\ImageServiceProvider'
],
$aliases => [
......,
'Image' => 'Intervention\Image\Facades\Image'
]
]
Konfigurasi Controller
Selanjutnya, kita perlu menjalankan perintah berikut untuk membuat file controller baru. File ini berisi logika yang mengelola fungsi pengunggahan dan pengubahan ukuran file.
php artisan make:controller ResizeController
Template tampilan blade dirender menjadi tampilan melalui fungsi index(). Sebaliknya, fungsi resizeImage() memvalidasi gambar, membatasi jumlah maksimum file yang dapat diunggah, menyimpan gambar berukuran besar untuk diunggah, dan menyimpan gambar yang diperkecil dan diubah ukurannya ke folder thumbnail.
Untuk menyimpan foto dan thumbnail, Anda juga perlu membuat dua folder di area publik utama. Buat direktori publik/upload dan publik/thumnail juga.
Selain itu, perbarui kode yang ditentukan dalam file app/Http/Controllers/ResizeController.php.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Image;
class ResizeController extends Controller
{
public function index()
{
return view('welcome');
}
public function resizeImage(Request $request)
{
$this->validate($request, [
'file' => 'required|image|mimes:jpg,jpeg,png,gif,svg|max:2048',
]);
$image = $request->file('file');
$input['file'] = time().'.'.$image->getClientOriginalExtension();
$destinationPath = public_path('/thumbnail');
$imgFile = Image::make($image->getRealPath());
$imgFile->resize(150, 150, function ($constraint) {
$constraint->aspectRatio();
})->save($destinationPath.'/'.$input['file']);
$destinationPath = public_path('/uploads');
$image->move($destinationPath, $input['file']);
return back()
->with('success','Image has successfully uploaded.')
->with('fileName',$input['file']);
}
}
Setelah memperbarui model dan file konfigurasi migrasi, jalankan migrasi untuk menyiapkan tabel baru di database.
php artisan migrate
Buat dan konfigurasikan controller
Buat controller baru menggunakan perintah artisan berikut:
php artisan make:controller ProgressBarController
Sekarang kita siap untuk menentukan metode Laravel untuk menampilkan dan mengelola permintaan posting untuk progress Bars upload file.
Tambahkan kode ke file app/Http/Controllers/ProgressBarController.php.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\FileUpload;
class ProgressBarController extends Controller
{
public function index()
{
return view('welcome');
}
public function uploadToServer(Request $request)
{
$request->validate([
'file' => 'required',
]);
$name = time().'.'.request()->file->getClientOriginalExtension();
$request->file->move(public_path('uploads'), $name);
$file = new FileUpload;
$file->name = $name;
$file->save();
return response()->json(['success'=>'Successfully uploaded.']);
}
}
buat Route
Kita perlu menambahkan Route di file route/web.php untuk mengelola permintaan GET dan POST untuk pengubahan ukuran gambar.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SocialShareButtonsController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/
Route::get('/file-resize', [ResizeController::class, 'index']);
Route::post('/resize-file', [ResizeController::class, 'resizeImage'])->name('resizeImage');
Lakukan Set Up pada Blade viem
Mari buat tampilan blade yang mengontrol pengubahan ukuran dan pengunggahan file. Anda dapat menggunakan file template blade selamat datang sebagai titik awal. Sebelum menggunakan Bootstrap untuk membuat komponen pengunggahan file sederhana, mari kita terapkan CSS Bootstrap ke file ini terlebih dahulu.
Buka file resources/views/welcome.blade.php dan tambahkan kode berikut.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<title>Laravel Image Resize Example</title>
</head>
<body>
<div class="container mt-5" style="max-width: 550px">
<h2 class="mb-5">Laravel Image Resize Example</h2>
<form action="{{route('resizeImage')}}" method="post" enctype="multipart/form-data">
@csrf
@if ($message = Session::get('success'))
<div class="alert alert-success">
<strong>{{ $message }}</strong>
</div>
<div class="col-md-12 mb-3">
<strong>Grayscale Image:</strong><br />
<img src="/uploads/{{ Session::get('fileName') }}" width="550px" />
</div>
@endif
@if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="custom-file">
<input type="file" name="file" class="custom-file-input" id="chooseFile">
<label class="custom-file-label" for="chooseFile">Select file</label>
</div>
<button type="submit" name="submit" class="btn btn-outline-danger btn-block mt-4">
Upload
</button>
</form>
</div>
</body>
</html>
start aplikasi Laravel
Terakhir, panggil server pengembangan laravel dan lihat aplikasi di browser Anda menggunakan URL di bawah ini.
php artisan server
Terimakasih sudah membaca :) semoga bermanfaat yaa..