CRUD Laravel 10 dan Bootstrap 5 #2: Menampilkan Data
Tags: laravel, bootstrap, webdev
Published: 2024-04-26 00:00:00

**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.

{% embed https://blog.riseku.com/crud-laravel-10-dan-bootstrap-5-persiapan-awal/ %}

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_:

```php
// 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`.

```php
<!-- 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`.

```php
<!-- 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
<?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_:

![CRUD Laravel 10 dan Bootstrap 5: Route Resource](https://blog.riseku.com/content/images/size/w1000/2024/03/crud-laravel-10-dan-bootstrap-5-route-resource.webp)

### 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](http://localhost:8000/books) dan melihat tampilan tabel yang berisi data dari tabel `books` di `database`.

![CRUD Laravel 10 dan Bootstrap 5: Halaman Index](https://blog.riseku.com/content/images/size/w1000/2024/03/crud-laravel-10-dan-bootstrap-5-halaman-index-1.webp)

## 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!

{% embed https://blog.riseku.com/crud-laravel-10-dan-bootstrap-5-menambahkan-data/ %}