Cookie Consent by Free Privacy Policy Generator 📌 CRUD Laravel 10 dan Bootstrap 5 #2: Menampilkan Data


✅ CRUD Laravel 10 dan Bootstrap 5 #2: Menampilkan Data


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

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: Persiapan Awal

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

favicon 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/[email protected]/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/[email protected]/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:

CRUD Laravel 10 dan Bootstrap 5: Route 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.

CRUD Laravel 10 dan Bootstrap 5: Halaman Index

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!

CRUD Laravel 10 dan Bootstrap 5: Menambahkan Data

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

favicon blog.riseku.com
...

✅ CRUD Laravel 10 dan Bootstrap 5 #2: Menampilkan Data


📈 98.59 Punkte

✅ CRUD Laravel 10 dan Bootstrap 5 #4: Mengupdate Data


📈 60.28 Punkte

✅ CRUD Laravel 10 dan Bootstrap 5 #5: Menghapus Data


📈 60.28 Punkte

✅ CRUD Laravel 10 dan Bootstrap 5 #1: Persiapan Awal


📈 57.26 Punkte

✅ FastAPI Beyond CRUD Part 6 - CRUD With Async SQLModel (An Introduction to Dependency Injection)


📈 31.38 Punkte

✅ FastAPI Beyond CRUD Part 3 - Buiding a CRUD REST API


📈 31.38 Punkte

✅ rConfig up to 3.9.4 lib/crud/search.crud.php Command privilege escalation


📈 31.38 Punkte

✅ Low CVE-2020-25091: Ecommerce-codeigniter-bootstrap project Ecommerce-codeigniter-bootstrap


📈 29.91 Punkte

✅ Low CVE-2020-25092: Ecommerce-codeigniter-bootstrap project Ecommerce-codeigniter-bootstrap


📈 29.91 Punkte

✅ Low CVE-2020-25093: Ecommerce-codeigniter-bootstrap project Ecommerce-codeigniter-bootstrap


📈 29.91 Punkte

✅ Nmap Bootstrap XSL - A Nmap XSL Implementation With Bootstrap


📈 29.91 Punkte

✅ SuperB Bootstrap: OS bootstrap-system/dotfiles-manager framework want to add support for your Linux-distro


📈 29.91 Punkte

✅ Low CVE-2020-25086: Ecommerce-codeigniter-bootstrap project Ecommerce-codeigniter-bootstrap


📈 29.91 Punkte

✅ Low CVE-2020-25087: Ecommerce-codeigniter-bootstrap project Ecommerce-codeigniter-bootstrap


📈 29.91 Punkte

✅ Low CVE-2020-25089: Ecommerce-codeigniter-bootstrap project Ecommerce-codeigniter-bootstrap


📈 29.91 Punkte

✅ Low CVE-2020-25090: Ecommerce-codeigniter-bootstrap project Ecommerce-codeigniter-bootstrap


📈 29.91 Punkte

✅ Low CVE-2020-25088: Ecommerce-codeigniter-bootstrap project Ecommerce-codeigniter-bootstrap


📈 29.91 Punkte

✅ Laravel Livewire CRUD with Breeze & Tailwind CSS


📈 27.32 Punkte

✅ MongoDB with Laravel - Simple CRUD app


📈 27.32 Punkte

✅ Laravel for Beginners #3 - The CRUD Operations


📈 27.32 Punkte

✅ Using the booted Method in Laravel Eloquent Models for CRUD Event Listening and Cache Resetting


📈 27.32 Punkte

✅ CRUD Backpack up to 3.4.8 on Laravel Select Field cross site scripting


📈 27.32 Punkte

✅ Laravel 11 + Inertia JS (VUE) CRUD Example: Part 2


📈 27.32 Punkte

✅ Laravel 11 + Inertia JS (VUE) CRUD Example: Part 1


📈 27.32 Punkte

✅ Generate a Laravel CRUD (Create, Read, Update, Delete) in 5 minutes.


📈 27.32 Punkte

✅ Cara dan Langkah-Langkah Instalasi OAuth Google pada LaraveL


📈 26.61 Punkte

✅ Penjelasan Lengkap tentang Fungsi Midtrans Payment Gateway dan Integrasinya dengan Laravel


📈 26.61 Punkte

✅ 10 Metode Terbaik untuk Menjaga Kode Laravel Tetap Bersih dan Terstruktur


📈 26.61 Punkte

✅ Membuat CI/CD Workflow Menggunakan GitHub Action dan Deployer pada Framework Laravel


📈 26.61 Punkte

✅ Tutorial Laravel 11 Auth con Bootstrap


📈 26.58 Punkte

✅ Middleware registration in bootstrap/app.php Laravel 11


📈 26.58 Punkte

✅ Hosting a simple Laravel application using Turso on Laravel Forge


📈 23.25 Punkte











matomo

Datei nicht gefunden!