Tutorial Laravel 13 untuk Pemula #4 – Index Data

Belajar Laravel 13 dan Tailwind CSS dari dasar hingga tingkat lanjut dengan tutorial lengkap dan mudah dipahami. Laravel 12 adalah framework PHP yang powerful untuk membangun aplikasi web modern, sementara Tailwind CSS adalah framework CSS yang fleksibel dan efisien untuk desain antarmuka yang responsif.

Kurnia Andi Nugroho

✅ Telah dilihat 190 kali

Rating: 5.00 ⭐

17 March 2026, 23:26

Index

Secara umum didalam controller, fungsi index digunakan untuk menampilkan daftar data yang berasal dari database maupun data statis dari controller itu sendiri, dalam hal ini kita akan mengambil semua gambar dari database, mengurutkannya dari yang terbaru, lalu menampilkan daftar gambar pada halaman images.index. Silakan teman-teman buka file ImageController.php yang terletak didalam folder app/Http/Controller/ kemudian pada function index, masukan kode berikut ini:

public function index()
    {
        $images = Image::latest()->get();
        return view('images.index', compact('images'));
    }

$images = Image::latest()->get();
Image::latest() → Mengambil semua data dari tabel images, diurutkan dari yang terbaru ke terlama (berdasarkan kolom created_at).
get() → Menjalankan query dan mengambil semua hasilnya dalam bentuk koleksi data.
return view('images.index', compact('images'));

view('images.index') → Menampilkan halaman resources/views/images/index.blade.php.
compact('images') → Mengirimkan data $images ke dalam view dengan nama variabel yang sama.

Layout

Silakan buat folder baru didalam resources/views. Buat dengan nama folder layouts. Didalam folder layouts, tambahkan file baru dengan nama app.blade.php , pada file inilah kita akan membuat kerangka untuk view aplikasi kita. Silakan Buka file app.blade.php, kemudian sesuaikan menjadi seperti berikut ini:

resources/
│── views/
│   ├── layouts/
│   │   ├── app.blade.php  <-- (File utama kerangka tampilan)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 13 CRUD - LagiKoding.com</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-8">
        @yield('content')
    </div>
</body>
</html>

Script diatas berfungsi sebagai layout utama dalam aplikasi kita, di mana halaman lain dapat menggunakan Blade Template Inheritance untuk mengisi kontennya menggunakan @section('content').

View

Silakan buat folder baru didalam folder resources/views, buat dengan nama folder images, lalu didalam folder images, tambahkan sebuah file baru dengan nama index.blade.php.

resources/
│── views/
│   ├── layouts/
│   │   ├── app.blade.php
│   ├── images/
│   │   ├── index.blade.php  <-- (File untuk menampilkan daftar gambar)

Silakan Buka file index.blade.php, kemudian sesuaikan menjadi seperti berikut ini:

@extends('layouts.app')

@section('content')
<div class="flex justify-between items-center mb-4">
    <h1 class="text-2xl font-bold">Laravel 13 - Image Gallery</h1>
    <a href="{{ route('images.create') }}" class="bg-blue-500 text-white px-4 py-2 rounded">Upload Image</a>
</div>

@if(session('success'))
    <div class="bg-green-200 p-3 mb-4 rounded">{{ session('success') }}</div>
@endif

<div class="grid grid-cols-3 gap-4">
    @foreach ($images as $image)
        <div class="bg-white p-4 shadow rounded">
            <img src="{{ asset('storage/'.$image->image) }}" class="w-full h-40 object-cover rounded mb-2">
            <h2 class="text-lg font-semibold">{{ $image->title }}</h2>
            <div class="flex gap-2 mt-2">
                <a href="{{ route('images.edit', $image->id) }}" class="bg-yellow-500 text-white px-3 py-1 rounded">Edit</a>
                <form action="{{ route('images.destroy', $image->id) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="bg-red-500 text-white px-3 py-1 rounded">Delete</button>
                </form>
            </div>
        </div>
    @endforeach
</div>
@endsection

script diatas adalah halaman galeri gambar aplikasi Laravel kita, yang akan kita gunakan untuk mengunggah, melihat, mengedit, dan menghapus gambar.

Menampilkan daftar gambar dalam format grid (3 kolom).
Menampilkan tombol "Upload Image" untuk menambahkan gambar baru.
Menampilkan notifikasi sukses jika ada session success.
Setiap gambar memiliki opsi "Edit" dan "Delete" untuk pengelolaan gambar.
Gambar ditampilkan dari storage, menggunakan asset('storage/'.$image->image).

Konfigurasi Rute

Silakan buka file web.php yang terletak didalam folder routes, kemudian ubah menjadi seperti berikut ini:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;

Route::get('/', function () {
    return view('welcome');
});

Route::resource('images', ImageController::class);

Route::resource('images', ImageController::class); digunakan untuk membuat semua route CRUD secara otomatis untuk ImageController.

GET /images → Menampilkan daftar gambar (index)
GET /images/create → Menampilkan form upload gambar (create)
POST /images → Menyimpan gambar baru (store)
GET /images/{id} → Menampilkan detail gambar (show)
GET /images/{id}/edit → Menampilkan form edit gambar (edit)
PUT/PATCH /images/{id} → Memperbarui gambar (update)
DELETE /images/{id} → Menghapus gambar (destroy)

Start the app

Pastikan apache dan mysql didalam XAMPP sudah dijalankan, kemudian jalankan aplikasi dengan cara menjalankan perintah

php artisan serve

Kemudian akses rute images yang sudah kita konfigurasi melalui url berikut ini:

http://127.0.0.1:8000/images

Maka akan terlihat seperti berikut ini:

Terlihat kita sudah berhasil membuat index dan view dengan laravel 13, pada materi berikutnya, kita akan membuat fitur create data, yakni insert data title dan image kedalam database.