CRUD Laravel 10 dan Bootstrap 5 #2: Menampilkan Data

Hai, Sobat Risereaders!

Pada artikel sebelumnya, kita telah membahas langkah-langkah persiapan awal untuk memulai pembuatan aplikasi CRUD sederhana dengan menggunakan Laravel 10 dan Bootstrap 5.

CRUD Laravel 10 dan Bootstrap 5 #1: Persiapan Awal

Tutorial cara mudah membuat aplikasi CRUD untuk mengelola data buku dengan Laravel 10 dan Bootstrap 5 bagian pertama.

blog.riseku.com

Kita sudah belajar bagaimana membuat model dan migrasi untuk projek, sekaligus menjalankan migrasi. Sekarang, kita akan beralih ke tahap selanjutnya dalam proses pengembangan, yaitu menampilkan data.

Cara Menampilkan Data Aplikasi CRUD

Langkah-langkah menampilkan data buku aplikasi CRUD dalam bentuk tabel:

1. Membuat Controller dan Method

Langkah pertama adalah membuat controller bernama BookController. Buka terminal kamu, jalankan perintah berikut:

php artisan make:controller BookController

Cari controller BookController di dalam folder app/Http/Controllers. Kemudian, mari kita buat method index untuk menampilkan data buku kita dari database:

// app/Http/Controllers/BookController.php

<?php

namespace App\Http\Controllers;

// import class Book
use App\Models\Book;
use Illuminate\Http\Request;

class BookController extends Controller
{
    public function index(Request $request)
    {
        // mengambil title dari form pencarian
        $title = $request->input('search');

        // mengambil data buku dari database
        $books = Book::where('title', 'like', "%$title%") // filter data berdasarkan title
            ->orderByDesc('id') // urutkan data berdasarkan id secara descending
            ->paginate(5); // menampilkan 5 data per halaman

        // mengirim data buku ke view index
        return view('books.index', compact('books'));
    }
}

2. Membuat Layout

Selanjutnya, kita akan membuat layout untuk view. Buatlah file baru app.blade.php di dalam folder resources/views/layouts.

<!-- resources/views/layouts/app.blade.php -->

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- Mengambil judul halaman dari child template -->
    <title>@yield('title')</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
</head>

<body class="bg-light">
    <div class="container my-5">

        <!-- Mengambil konten halaman dari child template -->
        @yield('content')
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

    <script>
        // Menampilkan pesan sukses atau error dari session
        @if (session()->has('success'))
            toastr.success('{{ session('success') }}', 'BERHASIL!');
        @elseif (session()->has('error'))
            toastr.error('{{ session('error') }}', 'GAGAL!');
        @endif
    </script>
</body>

</html>

Dengan menggunakan layout, kita dapat memisahkan struktur tampilan dari konten yang dinamis, sehingga memudahkan dalam pengelolaan dan perawatan kode.

3. Membuat View Index

Selanjutnya, kita perlu membuat view books.index. Buatlah file baru index.blade.php di dalam folder resources/views/books.

<!-- resources/views/books/index.blade.php -->

<!-- Meng-extend layout dari 'layouts.app' -->
@extends('layouts.app')

<!-- Judul halaman -->
@section('title', 'Daftar Buku')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <!-- Menampilkan judul halaman yang telah diset -->
        <h2>@yield('title')</h2>
        <a href="{{ route('books.create') }}" class="btn btn-primary">Tambah Buku</a>
    </div>

    <form action="" method="get">
        <div class="input-group mb-4">
            <input type="text" class="form-control" placeholder="Cari buku..." name="search"
                value="{{ request('search') }}">
            <button class="btn btn-secondary" type="submit">Cari</button>
        </div>
    </form>

    <div class="card">
        <div class="card-body table-responsive p-0">
            <table class="table table-striped mb-0">
                <thead>
                    <tr>
                        <th style="width: 150px">Cover</th>
                        <th>Judul</th>
                        <th>Deskripsi</th>
                        <th style="width: 150px" class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Mulai pengulangan untuk setiap buku -->
                    @forelse ($books as $book)
                        <tr>
                            <td>
                                <img src="{{ asset('storage/books/' . $book->cover) }}" class="img-fluid border rounded">
                            </td>
                            <td>
                                <h5>{{ $book->title }}</h5>
                            </td>
                            <td>
                                {{ $book->description }}
                            </td>
                            <td class="text-center">
                                <a href="{{ route('books.edit', $book) }}" class="btn btn-sm btn-warning">Edit</a>
                                <form action="{{ route('books.destroy', $book) }}" method="post" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-danger"
                                        onclick="return confirm('Apakah Anda yakin ingin menghapus data ini?')">Hapus</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <!-- Jika tidak ada buku yang tersedia -->
                        <tr>
                            <td colspan="4" class="text-center">Tidak ada data</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            <!-- Menampilkan navigasi halaman jika ada halaman lain -->
            @if ($books->hasPages())
                <div class="m-3 mb-0">
                    {{ $books->links('vendor.pagination.bootstrap-5') }}
                </div>
            @endif
        </div>
    </div>
@endsection

4. Publish Pagination

Pada halaman books.index, kita menggunakan pagination Bootstrap 5, namun viewnya belum dipublikasikan.

Untuk menggunakan pagination tersebut, perlu untuk mempublikasikan viewnya terlebih dahulu. Jalankan perintah berikut di terminal:

php artisan vendor:publish --tag=laravel-pagination

Setelah proses ini selesai, kita dapat menggunakan pagination Bootstrap 5 dalam aplikasi Laravel kita.

5. Mendefinisikan Route

Langkah terakhir adalah mendefinisikan route untuk menampilkan data. Buka file routes/web.php dan tambahkan route berikut:

<?php

// import class BookController
use App\Http\Controllers\BookController;
use Illuminate\Support\Facades\Route;

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

// menambahkan route resource books
Route::resource('books', BookController::class);

Di sini, kita mendefinisikan route resource books yang akan menghasilkan beberapa route untuk menangani berbagai aksi CRUD.

Route ini akan otomatis menghasilkan routes untuk methods yang diperlukan, seperti index, create, store, edit, update, dan destroy. Dengan demikian, kita tidak perlu mendefinisikan routenya satu per satu secara manual.

Berikut adalah hasil route yang menggunakan resource:

6. Menjalankan Aplikasi

Sekarang, saatnya untuk menjalankan aplikasi kita dan melihat hasilnya. Gunakan perintah berikut untuk menjalankan aplikasi:

php artisan serve

Setelah itu, kita dapat mengakses localhost:8000/books dan melihat tampilan tabel yang berisi data dari tabel books di database.

Penutup

Pada artikel ini, kita telah mempelajari cara menampilkan data dengan menggunakan Laravel 10 dan Bootstrap 5. Langkah-langkah yang kita pelajari meliputi definisi route, pembuatan controller dan method, serta pembuatan tampilan untuk menampilkan data.

Selanjutnya, pada artikel berikutnya, kita akan membahas langkah-langkah untuk menambahkan data baru ke dalam database. Semoga tutorial ini memberikan manfaat!