CRUD Laravel 9 #2: Set up Layout dan Menampilkan Data dari Database
• 4 min read • 7296 views
CRUD Laravel 9 - Melanjutkan artikel sebelumnya, pada artikel ini saya akan membahas bagaimana cara menampilkan data dari database di laravel 9. Pada tutorial kali ini, mungkin tidak akan langsung menampilkan data, karena kita memang belum melakukan insert data ke database. Jadi, pada artikel ini, saya hanya akan menunjukkan sedikit langkah-langkah bagaimana cara membuat layout dan menampilkan data.
Oke, mari kita langsung ke step by stepnya 👇
Step 1: Setup Controller
public function index()
{
$posts = Post::latest()->paginate(10);
return view('posts.index',compact('posts'));
}Pada step pertama, silahkan buka file PostController.php yang terletak pada direktori app/Http/Controllers. Pada method index(), silahkan ubah kodenya menjadi seperti di atas. Jadi, dengan kode seperti di atas, kita akan menampilkan data dari table posts pada file view index.blade.php yang akan kita buat pada langkah selanjutnya. Selain itu, kita juga menggunakan pagination, dimana kita akan menampilkan 10 data per halaman.
Step 2: Setup Layout
resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html lang="en">
<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">
<title>CRUD Laravel 9</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
@yield('styles')
</head>
<body>
<div class="container my-5">
<div class="row">
@yield('content')
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
@stack('scripts')
</body>
</html>Lanjut ke layout. Silahkan buat folder baru dengan nama layouts di dalam direktori resources/views. Kemudian, masuk ke dalam folder layouts, dan buat file view baru dengan nama app.blade.php, lalu copy code di atas dan paste pada file app.blade.php yang baru saja dibuat tersebut.
Jadi, file dengan kode seperti di atas bisa dikatakan sebagai file master view yang akan kita gunakan nantinya di beberapa file view lainnya.
resources/views/posts/index.blade.php
@extends('layouts.app')
@section('content')
<div>
<a href="{{ route('posts.create') }}" class="btn btn-primary mb-3">Create</a>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Cover</th>
<th scope="col">Title</th>
<th scope="col">Content</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
@php
$no = 0;
@endphp
@forelse ($posts as $post)
<tr>
<th scope="row">{{ ++ $no }}</th>
<td>
<img src="{{ asset('storage/'.$post->cover) }}" alt="" class="rounded-3" height="100" width="auto">
</td>
<td>{{ $post->title }}</td>
<td>{{ Str::limit($post->content, 50) }}</td>
<td>
{{-- TBA --}}
</td>
</tr>
@empty
<tr>
<td colspan="5" class="text-center">
<div class="alert alert-danger" role="alert">
No posts found!
</div>
</td>
</tr>
@endforelse
{{ $posts->links() }}
</tbody>
</table>
@endsectionOke, lanjut lagi di view lainnya. Kali ini kita perlu membuat tampilan index untuk menampilkan data-data dari table posts. Silahkan masuk ke dalam direktori resources/views kemudian buat folder baru dengan nama posts. Kemudian masuk ke folder posts yang baru saja dibuat tersebut dan buat file view baru dengan nama index.blade.php, lalu copy code di atas dan paste di file index.blade.php yang baru saja dibuat tersebut.
Perhatikan kode di atas, disini saya menggunakan @forelse untuk loopingnya. Jadi, jika terdapat data dari table posts maka akan ditampilkan, tapi jika tidak ada data maka akan menampilkan alert dengan pesan No posts found!.
Step 3: Testing
Setelah melakukan setup method index pada PostController.php dan membuat layout untuk menampilkan data dari database, maka selanjutnya kita dapat melakukan testing. Silahkan jalankan laravel project kamu dengan menjalankan perintah php artisan serve, lalu buka pada browser dengan URL 127.0.0.1:{post}/posts atau dengan crud-laravel9.test/posts, maka hasilnya akan seperti gambar di atas. Karena memang belum terdapat data pada table posts, maka yang akan tampil hanya alert.
- Tutorial CRUD (Create, Read, Update and Delete) Laravel 9
- CRUD Laravel 9 #2: Set up Layout dan Menampilkan Data dari Database
- CRUD Laravel 9 #3: Insert Data ke Database dan Implementasi Form Request Validation
- CRUD Laravel 9 #4: Edit & Update Data dari Database
- CRUD Laravel 9 #5: Delete Data dari Database & Implementasi Sweetalert2
- CRUD Laravel 9 #6: Implementasi Softdelete
- CRUD Laravel 9 #7: Membuat Fitur Pencarian dengan Laravel Scout Database Driver
Last updated on June 03, 2026
