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

php artisan make:migration create_images_table

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:

php artisan migrate

5. Buat controller untuk meng-handle form dan upload gambar, jalankan perintah dibawah ini untuk membuat controller baru

php artisan make:controller ImageController

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:

php artisan serve

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.

Sahretech

Cara Upload Gambar di Laravel Mudah dan Cepat

Cara Upload Gambar di Laravel

No comments

Kategori Pemrograman

Popular

Facebook