Mengunggah gambar merupakan fitur yang hampir selalu ada dalam aplikasi web saat ini. Laravel 11, dengan berbagai fitur dan tools-nya, membuat proses ini menjadi lebih mudah dan efisien. Dalam tutorial ini, kita akan belajar cara mengimplementasikan fitur upload image, mulai dari persiapan awal hingga menampilkan gambar yang telah diunggah.
Persiapan Awal
1. Instalasi Laravel
Sebelum memulai, pastikan Anda sudah memiliki Composer diinstal pada sistem Anda. Setelah itu, instal Laravel 11 dengan menjalankan perintah berikut di terminal:
composer create-project --prefer-dist laravel/laravel nama_project
2. Konfigurasi Database
Langkah selanjutnya adalah mengkonfigurasi database. Buka file .env pada root direktori project Laravel Anda dan sesuaikan konfigurasi database dengan pengaturan server lokal Anda.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nama_database
DB_USERNAME=username_database
DB_PASSWORD=password_database
Membuat Model dan Migration
Setelah konfigurasi database selesai, kita perlu membuat model dan migration untuk tabel yang akan menyimpan data gambar. Jalankan perintah berikut:
php artisan make:model Image -m
Buka file migration yang baru dibuat di direktori database/migrations dan tambahkan kolom untuk menyimpan nama file gambar:
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('filename');
$table->timestamps();
});
Jangan lupa untuk menjalankan migration dengan perintah:
php artisan migrate
Membuat Controller
Selanjutnya, buat controller yang akan menangani logika upload gambar. Gunakan artisan untuk membuat controller:
php artisan make:controller ImageController
Buka file ImageController.php yang baru dibuat dan tambahkan method untuk menampilkan form dan menangani proses upload:
use Illuminate\Http\Request;
use App\Models\Image;
class ImageController extends Controller
{
public function form()
{
return view('upload');
}
public function upload(Request $request)
{
$request->validate([
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$imageName = time().'.'.$request->image->extension();
$request->image->move(public_path('images'), $imageName);
$image = new Image();
$image->filename = $imageName;
$image->save();
return back()
->with('success','You have successfully uploaded an image.')
->with('image', $imageName);
}
}
Membuat Form Upload Image
Buat view baru dengan nama upload.blade.php di direktori resources/views untuk form upload:
<!DOCTYPE html>
<html>
<head>
<title>Laravel Image Upload Tutorial</title>
</head>
<body>
@if ($message = Session::get('success'))
<div>
<strong>{{ $message }}</strong>
</div>
<div>
<img src="images/{{ Session::get('image') }}">
</div>
@endif
@if ($errors->any())
<div>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('image.upload') }}" method="POST" enctype="multipart/form-data">
@csrf
<div>
<label for="image">Choose image:</label>
<input type="file" id="image" name="image">
</div>
<div>
<button type="submit">Upload Image</button>
</div>
</form>
</body>
</html>
Menangani Upload Image
Pada langkah ini, Anda sudah memiliki semua komponen yang dibutuhkan untuk mengunggah gambar. Namun, jangan lupa untuk mendaftarkan route pada web.php:
use App\Http\Controllers\ImageController;
Route::get('image-upload', [ImageController::class, 'form'])->name('image.upload.form');
Route::post('image-upload', [ImageController::class, 'upload'])->name('image.upload');
Menampilkan Gambar
Setelah gambar berhasil diunggah, Anda dapat menampilkan gambar tersebut di halaman web dengan mengakses direktori public/images.
Kesimpulan
Mengunggah gambar di Laravel 11 tidaklah sulit. Dengan mengikuti langkah-langkah yang telah diuraikan di atas, Anda dapat dengan mudah menambahkan fitur upload gambar pada aplikasi Laravel Anda. Ingatlah untuk selalu mengikuti kaidah SEO yang baik dan benar dalam pembuatan artikel atau tutorial untuk memastikan konten Anda mudah ditemukan dan bermanfaat bagi pembaca.
Dengan mengikuti tutorial ini, Anda tidak hanya belajar cara mengunggah gambar tetapi juga memahami bagaimana Laravel menangani file dan menyimpan informasi tentang file tersebut di database. Ini merupakan skill penting bagi pengembang web yang menggunakan Laravel dalam proyek mereka.
