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.
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
namespace AppHttpControllers;
// import class Book
use AppModelsBook;
use IlluminateHttpRequest;
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.
lang="id">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
http-equiv="X-UA-Compatible" content="ie=edge">
</span>@yield('title')<span class="nt">
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
class="bg-light">
class="container my-5">
@yield('content')