Najwa Latifah
2310631180143
5E
Framework
Upload Gambar dengan Preview di Laravel 10
Pada eksplorasi mandiri Framework kali ini saya mengambil tema Upload Gambar dengan Preview selain itu saya juga menambah sedikit materi tentang Dark Mode Toggle di Blade Template.
Sebelum kita masuk ke pembahasan utama mengenai cara membuat fitur upload gambar dengan preview di Laravel 10, mari kita pahami dulu apa itu Framework.
Framework adalah kerangka kerja atau struktur konseptual yang menyediakan fondasi, standar, dan alat bantu untuk membangun aplikasi perangkat lunak, atau sistem dengan lebih cepat, terstruktur, dan efisien.
Nah, fitur Upload Gambar dengan Preview sendiri adalah sebuah fungsi yang memungkinkan pengguna untuk mengunggah gambar ke sistem, sekaligus melihat pratinjau (preview) dari gambar tersebut sebelum benar-benar disimpan. Fitur ini sangat berguna untuk memastikan file yang dipilih sudah sesuai, misalnya saat mengunggah foto profil, gambar produk, atau dokumen visual lainnya.
Mengapa fitur Upload Gambar dengan Preview penting?
1. Meminimalisir kesalahan: Preview memudahkan pengguna untuk dapat melihat filenya sebelum di upload.
2. Meningkatkan kepuasan pengguna: Fitur ini memberi rasa aman dan nyaman karena pengguna dapat langsung melihat hasil pilihannya.
3. Lebih profesional dan modern: Aplikasi yang menyediakan preview gambar terlihat lebih interaktif, modern, dan sesuai standar aplikasi masa kini.
4. Mendukung Berbagai Kebutuhan Aplikasi: Mulai dari upload foto profil, gambar produk, banner, hingga dokumen visual lain, semua bisa memanfaatkan fitur ini.
Setelah mengetahui apa itu Framework dan kenapa fitur Upload Gambar dengan Preview penting sekarang kita akan masuk kecara pembuatannya
Upload Gambar dengan Preview
1. Buat projek Laravel 10
Composer create-project laravel/laravel nama-proyek
2. Buat database
Masuk ke phpMyAdmin, kemudian buat database baru
3. Atur koneksi database pada projek laravel kamu di .env, sambungkan ke database yang sudah kamu buat tadi
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
4. Buat controller
php artisan make:controller ImageController
5. Masuk ke ImageController yang sudah dibuat tadi
app/http/controller/ImageController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ImageController extends Controller
{
public function index () {
return view('image-upload');
}
public function store(Request $request)
{
$validated = $request->validate([
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$file = $request->file('image');
$filename = time().'.'.$file->extension();
$file->move(public_path('images'), $filename);
return back()
->with('success', 'Gambar berhasil diupload')
->with('image', $filename);
}
}
5. Tambahkan Routes
Masuk ke routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
use App\Http\Controllers\ImageController;
Route::get('/image-upload', [ImageController::class, 'index']);
Route::post('/image-upload', [ImageController::class, 'store'])->name('image.store');
6. Buat blade views dengan preview
reseurce/views kemudian buat file baru image-upload.blade.php
masuk ke file yang sudah dibuat tadi
reseurce/views/image-upload.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload Gambar dengan Preview</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Dark Mode Styles */
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
.dark-mode .card,
.dark-mode .alert,
.dark-mode .form-control {
background-color: #1e1e1e;
color: #fff;
}
.dark-mode .btn-primary {
background-color: #3f51b5;
border-color: #3f51b5;
}
.dark-mode .btn-secondary {
background-color: #666;
border-color: #666;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="d-flex justify-content-between align-items-center mb-3">
<h2>Upload Gambar dengan Preview</h2>
<button id="toggle-dark" class="btn btn-secondary">🌙 Dark Mode</button>
</div>
@if(session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
<div class="mb-3">
<strong>Gambar:</strong><br>
<img src="{{ asset('images/' . session('image')) }}" width="200px">
</div>
@endif
<form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label for="image" class="form-label">Pilih Gambar:</label>
<input type="file" name="image" id="imageInput"
class="form-control @error('image') is-invalid @enderror">
@error('image')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>
<div class="mb-3">
<img id="previewImage" src="#" alt="Preview Gambar" style="display: none; max-width: 300px; margin-top:10px;">
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
</div>
<script>
// Preview gambar sebelum upload
document.getElementById('imageInput').addEventListener('change', function(event) {
const [file] = this.files;
if (file) {
const preview = document.getElementById('previewImage');
preview.src = URL.createObjectURL(file);
preview.style.display = 'block';
}
});
// Toggle Dark Mode
const toggleBtn = document.getElementById('toggle-dark');
toggleBtn.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
toggleBtn.textContent =
document.body.classList.contains('dark-mode') ? "☀️ Light Mode" : "🌙 Dark Mode";
// Simpan preferensi ke localStorage
localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
});
// Load preferensi dari localStorage
if (localStorage.getItem('dark-mode') === 'true') {
document.body.classList.add('dark-mode');
toggleBtn.textContent = "☀️ Light Mode";
}
</script>
</body>
</html>
nah disini saya menambahkan fitur darkmode agar pengguna dapat menyesuaikan tampilan sesuai dengan kenyamanan pengguna
Kode untuk Blade View dengan Preview
<div class="container mt-5">
<div class="d-flex justify-content-between align-items-center mb-3">
<h2>Upload Gambar dengan Preview</h2>
<button id="toggle-dark" class="btn btn-secondary">🌙 Dark Mode</button>
</div>
@if(session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
<div class="mb-3">
<strong>Gambar:</strong><br>
<img src="{{ asset('images/' . session('image')) }}" width="200px">
</div>
@endif
<form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label for="image" class="form-label">Pilih Gambar:</label>
<input type="file" name="image" id="imageInput"
class="form-control @error('image') is-invalid @enderror">
@error('image')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>
<div class="mb-3">
<img id="previewImage" src="#" alt="Preview Gambar" style="display: none; max-width: 300px; margin-top:10px;">
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
</div>
<script>
// Preview gambar sebelum upload
document.getElementById('imageInput').addEventListener('change', function(event) {
const [file] = this.files;
if (file) {
const preview = document.getElementById('previewImage');
preview.src = URL.createObjectURL(file);
preview.style.display = 'block';
}
});
Kode CSS untuk Dark Mode
<style>
/* Dark Mode Styles */
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
.dark-mode .card,
.dark-mode .alert,
.dark-mode .form-control {
background-color: #1e1e1e;
color: #fff;
}
.dark-mode .btn-primary {
background-color: #3f51b5;
border-color: #3f51b5;
}
.dark-mode .btn-secondary {
background-color: #666;
border-color: #666;
}
</style>
Kode untuk tombol toggle
<button id="toggle-dark" class="btn btn-secondary">🌙 Dark Mode</button>
Kode untuk JavaScript toggle
// Toggle Dark Mode
const toggleBtn = document.getElementById('toggle-dark');
toggleBtn.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
toggleBtn.textContent =
document.body.classList.contains('dark-mode') ? "☀️ Light Mode" : "🌙 Dark Mode";
// Simpan preferensi ke localStorage
localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
});
// Load preferensi dari localStorage
if (localStorage.getItem('dark-mode') === 'true') {
document.body.classList.add('dark-mode');
toggleBtn.textContent = "☀️ Light Mode";
}
7. Jalankan dan uji fitur yang sudah kita buat
php artisan serve
Fitur Upload Gambar dengan Preview di Laravel 10 memudahkan pengguna melihat gambar sebelum diunggah, sehingga lebih aman dan praktis. Ditambah dengan Dark Mode Toggle, aplikasi jadi lebih modern, interaktif, dan nyaman digunakan sesuai preferensi pengguna.
Untuk tutorial berbentuk video kalian bisa lihat disini: https://youtu.be/S0eauzMtm8k
