Halo semuanya, kembali lagi di sahretech. Laravel, sebagai salah satu
framework PHP yang populer, menyediakan berbagai alat dan kemudahan untuk
mengelola file upload, termasuk gambar. Pada artikel ini, kita akan membahas
langkah-langkah untuk membuat fitur upload gambar di Laravel, termasuk
bagaimana menyimpan gambar di folder public
dan menyimpan
informasi gambar tersebut di dalam database.
Cara Upload Gambar di Laravel
1. Siapkan framework laravel, teman-teman bisa menggunakan versi berapapun. Dan pastikan juga sudah terkoneksi dengan database.
2. Jalankan perintah di bawah ini untuk membuat migration images
3. Edit file migrasi di database/migrations/{timestamp}_create_images_table.php seperti berikut:
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateImagesTable extends Migration
{
public function up()
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('image_name');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('images');
}
}
4. Jalankan perintah berikut untuk membuat tabelnya:
5. Buat controller untuk meng-handle form dan upload gambar, jalankan perintah dibawah ini untuk membuat controller baru
6. Edit file app/Http/Controllers/ImageController.php sebagai berikut:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class ImageController extends Controller
{
public function create()
{
$images = DB::table('images')->get();
return view('upload_image', [
'images' => $images
]);
}
public function store(Request $request)
{
//lakukan validasi
$request->validate([
'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',
]);
// Generate nama file yang unik
$imageName = time() . '.' . $request->image->extension();
// Simpan gambar di folder public/images
$request->image->move(public_path('images'), $imageName);
// Simpan informasi gambar ke database menggunakan DB Query
DB::table('images')->insert([
'image_name' => $imageName,
'created_at' => now(),
'updated_at' => now(),
]);
//kembali dan berikan pesan sukses
return back()->with('success', 'Image uploaded successfully.');
}
}
7. Buat view form upload di resources/views/upload_image.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Image in Laravel</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="text-center">Upload Image in Laravel</h2>
@if ($message = Session::get('success'))
<div class="alert alert-success">
{{ $message }}
</div>
@endif
<!-- Form untuk upload gambar -->
<form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label for="image">Select Image:</label>
<input type="file" class="form-control" id="image" name="image" required>
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
<!-- Tampilkan gambar yang telah di-upload -->
<h3 class="mt-5">Uploaded Images</h3>
<div class="row">
@foreach($images as $image)
<div class="col-md-3">
<div class="card mb-4">
<img src="{{ asset('images/' . $image->image_name) }}" class="card-img-top" alt="Image" style="height: 200px; object-fit: cover;">
</div>
</div>
@endforeach
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
8. Buat route untuk menampilkan form dan memproses upload gambar. Tambahkan ini di file routes/web.php
use App\Http\Controllers\ImageController;
Route::get('/upload-image', [ImageController::class, 'create'])->name('upload.image');
Route::post('/upload-image', [ImageController::class, 'store'])->name('image.store');
9. Lakukan uji coba. Jalankan server Laravel:
Hasil akhir
Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat fitur
upload gambar di Laravel. Gambar dapat diunggah dan disimpan dengan aman di
folder public
, dan informasi tentang gambar tersebut tersimpan di
dalam database. Proses ini tidak hanya memungkinkan Anda untuk menambahkan
fitur penting dalam aplikasi, tetapi juga memberi fleksibilitas dalam
menampilkan gambar dengan rapi menggunakan Bootstrap. Dengan kemudahan yang
disediakan Laravel, pengelolaan file upload menjadi lebih efisien dan
terstruktur, membantu Anda mengembangkan aplikasi web yang interaktif dan
responsif.
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi