Nama: Cynthia Angelina Pardede

NPM:    2310631170130

Kelas:   5D Informatika

     Eksplorasi mandiri yang saya ambil berfokus pada pembuatan fitur Upload Gambar menggunakan Laravel. Tujuannya adalah agar pengguna yang sudah login dapat mengunggah gambar beserta judul gambarnya, lalu menyimpannya dan menampilkannya kembali dalam bentuk galeri sederhana. Seluruh proses dilakukan menggunakan terminal (Laragon CMD atau terminal di Visual Studio Code).

Note: Buat fitur Login/Register terlebih dahulu sebelum ke fitur upload gambar.

Tahap 1: Membuat Model dan Migration

• Buka terminal di dalam project Laravel, lalu arahkan ke project yang sudah ada:

Ketik: [cd C:\laragon\www\nama_project](cd [alamat project disimpan]
Lalu jalankan:
[php artisan make:model Image -m]

Perintah ini akan membuat model Image dan file migration.

• Selanjutnya, buka file migration di database/migrations/xxxx_create_galleries_table.php dan masukkan code berikut:
  
  <?php

• 
  

• use Illuminate\Database\Migrations\Migration;

• use Illuminate\Database\Schema\Blueprint;

• use Illuminate\Support\Facades\Schema;

• 
  

• return new class extends Migration

• {

•     /**

•      * Run the migrations.

•      */

•     public function up(): void

•     {

•         Schema::create('galleries', function (Blueprint $table) {

•             $table->id();

•             $table->string('title');

•             $table->string('file_path');

•             $table->timestamps();

•     });

• 
  

• }

• 
  

•     /**

•      * Reverse the migrations.

•      */

•     public function down(): void

•     {

•         Schema::dropIfExists('galleries');

•     }

• };

Setelah itu jalankan perintah:
[php artisan migrate]

Tahap 2: Membuat Controller

<?php

namespace App\Http\Controllers;

use App\Models\Gallery;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\

Storage;

use Illuminate\Support\Facades\Log;

class GalleryController extends Controller

{

    public function index()

    {

        $galleries = Gallery::all();

        return view('galleries.index', compact('galleries'));

    }

    public function create()

    {

        return view('galleries.create');

    }

    public function store(Request $request)

    {

        $request->validate([

            'title' => 'required|string|max:255',

            'image' => 'required|image|mimes:jpg,jpeg,png,gif|max:5120', // max 5MB

        ]);

        // Pastikan ada file & valid

        if (!$request->hasFile('image') || !$request->file('image')->isValid()) {

            return redirect()->back()->with('error', 'Gagal mengupload, file tidak valid.');

        }

        try {

            $file = $request->file('image');

            // Buat nama file aman: timestamp + nama asli

            $filename = time() . '_' . preg_replace('/\s+/', '_', $file->getClientOriginalName());

            // Simpan ke storage/app/public/galleries

            $path = $file->storeAs('galleries', $filename, 'public');

            // hasil: galleries/20250925_namafile.jpg

            // Simpan ke database (pastikan tabel punya kolom file_path)

            $gallery = Gallery::create([

                'title'     => $request->input('title'),

                'file_path' => $path,

            ]);

            return redirect()

                ->route('galleries.index')

                ->with('success', 'Gambar berhasil tersimpan.');

        } catch (\Exception $e) {

    Log::error('Gallery store error: '.$e->getMessage());

    return redirect()

        ->back()

        ->with('error', 'Gagal mengupload, coba lagi.');}

}

}

Note: sesuaikan dengan tampilan sistem yang diinginkan.

Tahap 3: Menambahkan Route

Buka routes/web.php dan tambahkan kode berikut:

<?php

use App\Http\Controllers\GalleryController;

use App\Http\Controllers\ProfileController;

use Illuminate\Support\Facades\Route;

// Halaman utama (public)

Route::get('/', function () {

    return view('welcome');

});

// Dashboard hanya untuk user yang login & verified

Route::get('/dashboard', function () {

    return view('dashboard');

})->middleware(['auth', 'verified'])->name('dashboard');

// Semua route ini hanya bisa diakses kalau user sudah login

Route::middleware('auth')->group(function () {

    // Profile routes

    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');

    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');

    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');

    // Gallery routes (RESTful: index, create, store, show, edit, update, destroy)

    Route::resource('galleries', GalleryController::class);

});

require __DIR__.'/auth.php';

1. File create.blade.php:

<x-app-layout>

    <x-slot name="header">

        <h2 class="font-semibold text-xl text-gray-800">

            {{ __('Upload Gambar Baru') }}

        </h2>

    </x-slot>

    <div class="py-6">

        <form action="{{ route('galleries.store') }}" method="POST" enctype="multipart/form-data">

            @csrf

            <div>

                <x-input-label for="title" :value="__('Judul Gambar')" />

                <x-text-input id="title" name="title" type="text" class="block mt-1 w-full" required />

            </div>

            <div class="mt-4">

                <x-input-label for="image" :value="__('Pilih File Gambar')" />

                <input type="file" name="image" id="image" class="block mt-1 w-full" required>

            </div>

            <x-primary-button class="mt-4">Upload</x-primary-button>

        </form>

    </div>

</x-app-layout>

2. File index.blade.php:

@extends('layouts.app')

@section('content')

<div class="container">

    <h1 class="text-2xl font-bold mb-4">Gallery</h1>

    {{-- Pesan sukses/error akan otomatis muncul dari layout --}}

    {{-- Form Upload --}}

    <div class="bg-white p-6 rounded-lg shadow-md mb-6">

        <h2 class="text-xl font-semibold mb-3">Upload Gambar Baru</h2>

        <form action="{{ route('galleries.store') }}" method="POST" enctype="multipart/form-data">

            @csrf

            <div class="mb-3">

                <label class="block mb-1 font-medium">Judul Gambar</label>

                <input type="text" name="title" class="w-full border rounded p-2" required>

            </div>

            <div class="mb-3">

                <label class="block mb-1 font-medium">Pilih File</label>

                <input type="file" name="image" accept="image/*" required>

            </div>

            <button type="submit" class="btn btn-primary">

            Upload

            </button>

        </form>

    </div>

    {{-- List Gambar --}}

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">

        @forelse($galleries as $gallery)

            <div class="bg-gray-50 rounded shadow p-2">

                <img src="{{ asset('storage/'.$gallery->file_path) }}"

                     alt="{{ $gallery->title }}" class="rounded mb-2">

                <p class="text-center font-medium">{{ $gallery->title }}</p>

            </div>

        @empty

            <p class="col-span-4 text-center text-gray-500">

                Belum ada gambar yang diupload.

            </p>

        @endforelse

    </div>

</div>

@endsection

Tahap 5: Membuat Storage Link

Agar gambar bisa diakses dari folder public, jalankan perintah:

php artisan storage:link

Tahap 6: Uji Coba Upload Gambar

1. Jalankan server:
   [php artisan serve]

2.  Login ke aplikasi. (register terlebih dahulu bila belum)

   
   

   3. Disamping tab Dashboard, click tab Gallery

   
   

   Disini kita sudah bisa upload gambar yang ingin kita simpan. Dengan memasukkan judul gambar untuk membedakan gambarnya. Dan choose file untuk ambil gambar dari device masing-masing. Setelahnya tekan button Upload.

   4. Maka dengan ini gambar berhasil disimpan dan dapat kita lihat kembali.

   
   

   Kesimpulan

   Dengan langkah-langkah di atas, saya berhasil membuat fitur Upload Gambar di Laravel. Proses dimulai dari membuat model dan migration, controller, routing, view, hingga menghubungkan storage ke public agar gambar dapat diakses. Hasil akhirnya berupa galeri gambar sederhana yang hanya bisa diakses oleh user yang sudah login.