Anggit TSSetelah sebelumnya pada seri Belajar Laravel Bagian 24 kita telah berhasil membuat fitur upload file ke direktori Laravel, kini saatnya melangkah lebih jauh. Pada seri Belajar Laravel Bagian 25 ini, kita akan membahas cara membuat fitur upload file ke dalam database, sehingga file dapat dikelola dan dipanggil kembali dengan lebih mudah dan terstruktur.
Metode ini merupakan pengembangan dari tutorial sebelumnya, sehingga fitur upload menjadi lebih lengkap dan terstruktur. Menarik, bukan? Yuk, langsung saja kita ikuti langkah-langkahnya!
Membuat Fitur Upload File ke Database
Berikut langkah demi langkah untuk membuat fitur upload file ke database di Laravel.
Step 1. Konfig Database
Silakan membuat database terlebih dahulu seperti pembahasan tutorial laravel bagian 5. Selanjutnya edit file .env menggunakan nama database yang telah Anda buat. Misalnya;
DB_DATABASE=laravel_upload
DB_USERNAME=root
DB_PASSWORD=Step 2. Buat Migration & Model
Selanjutnya, kita akan membuat tabel menggunakan fitur Migration Laravel. Langkahnya, kita buat tabel files melalui model untuk menyimpan nama/path file. Perintah artisan untuk membuat model adalah sebagai berikut.
php artisan make:model File -m
Selanjutnya, edit file database/migrations/xxxx_xx_xx_create_files_table.php. Lalu, tambahkan baris perintah berikut.
public function up(): void
{
Schema::create('files', function (Blueprint $table) {
$table->id();
$table->string('name'); // nama asli file
$table->string('path'); // path file di storage
$table->timestamps();
});
}Kemudian, jalankan perintah artisan berikut:
php artisan migrate
Step 3. Buat Controller
Di langkah ini, kita akan membuat controller dengan nama File Controller. Perintah artisannya:
php artisan make:controller FileController
Silakan edit file app/Http/Controllers/FileController.php. Sesuaikan dengan code program berikut.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\File;
class FileController extends Controller
{
public function index()
{
$files = File::all();
return view('upload', compact('files'));
}
public function store(Request $request)
{
// Validasi
$request->validate([
'file' => 'required|mimes:jpg,jpeg,png,pdf|max:2048'
]);
// Simpan file ke storage/app/public/uploads
$path = $request->file('file')->store('uploads', 'public');
// Simpan data ke database
$file = new File();
$file->name = $request->file('file')->getClientOriginalName();
$file->path = $path;
$file->save();
return back()->with('success', 'File berhasil diupload!');
}
}
Step 4. Tambah Route
Buat route untuk mendeteksi url website saat diakses. Route untuk keperluan ini yang perlu disiapkan 2, index dengan store.
Silakan edit file routes/web.php:
use App\Http\Controllers\FileController;
Route::get('/upload', [FileController::class, 'index']);
Route::post('/upload', [FileController::class, 'store']);Step 5. Buat View (Bootstrap)
Sekarang buat tampilan upload. Kita lanjutkan menggunakan Bootstrap. Silakan buat file resources/views/upload.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>Upload File Laravel ke Database</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4">Upload File ke Database</h2>
{{-- Pesan sukses --}}
@if(session('success'))
<div class="alert alert-success">{{ session('success') }}</div>
@endif
{{-- Error --}}
@if($errors->any())
<div class="alert alert-danger">
<ul class="mb-0">
@foreach ($errors->all() as $err)
<li>{{ $err }}</li>
@endforeach
</ul>
</div>
@endif
<!-- Form Upload -->
<div class="card shadow mb-4">
<div class="card-body">
<form action="/upload" method="POST" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label class="form-label">Pilih File</label>
<input type="file" name="file" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
</div>
</div>
<!-- List File -->
<h4>Daftar File</h4>
<table class="table table-bordered">
<thead class="table-dark">
<tr>
<th>No</th>
<th>Nama File</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
@foreach($files as $index => $f)
<tr>
<td>{{ $index+1 }}</td>
<td>{{ $f->name }}</td>
<td>
@php $ext = pathinfo($f->path, PATHINFO_EXTENSION); @endphp
@if(in_array($ext, ['jpg','jpeg','png']))
<img src="{{ asset('storage/'.$f->path) }}" class="img-thumbnail" style="max-width:100px;">
@elseif($ext == 'pdf')
<a href="{{ asset('storage/'.$f->path) }}" target="_blank" class="btn btn-danger btn-sm">Lihat PDF</a>
@else
<a href="{{ asset('storage/'.$f->path) }}" target="_blank" class="btn btn-secondary btn-sm">Download</a>
@endif
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Step 6. Storage Link
Terakhir, silakan buat symbolic link supaya file yang telah diupload bisa diakses via browser. Silakan gunakan perintah artisan berikut.
php artisan storage:linkStep 7. Pengujian
Saatnya melakukan testing upload file untuk memastikan aplikasi yang kita buat telah berfungsi dengan baik. Langkahnya sebagai berikut:
- Buka
http://127.0.0.1:8000/upload - Kemudian, silakan upload file dengan jenis berikut (jpg/png/pdf).
- Data tersimpan di database (files table). File tersimpan di storage/app/public/uploads. Tabel menampilkan daftar file + preview.
Penutup
Sampai tahap ini, Anda telah berhasil menyelesaikan proses upload file ke database menggunakan Laravel. Dengan langkah ini, data file kini dapat tersimpan dan dikelola dengan lebih rapi serta mudah diakses kapan pun dibutuhkan.
Ke depannya, Anda bisa mengembangkan fitur ini lebih lanjut, seperti menambahkan validasi yang lebih ketat, menampilkan file yang telah diunggah melalui dashboard, atau mengintegrasikannya dengan layanan penyimpanan cloud. Dengan kombinasi teknik dari Bagian 24 dan 25 ini, Anda sudah memiliki fondasi yang kuat untuk membangun sistem upload file yang profesional.
Demikian tutorial Belajar Laravel bagian 25 tentang cara membuat fitur upload file ke Database dalam Laravel, semoga bermanfaat.
