Halo teman-teman semuanya, di artikel sebelumnya kita telah berhasil belajar bagaimana cara membuat dan menjalankan model beserta migration. Dan pada artikel kali ini kita semua akan belajar bagaimana cara menampilkan data dari database di Laravel 9. Dan untuk mempercantik halaman kita akan menggunakan CSS Bootstrap.
Langkah 1 - Membuat Controller Post
Pertama, kita akan membuat controller terlebih dahulu. Dan untuk teman-teman semuanya, jika membuat controller pastikan menggunakan kata tunggal atau singular ya. Karena Best Practice dalam pembuatan controller menggunakan kata tunggal/singular.
REFERENSI : https://santrikoding.com/laravel-best-practices
Silahkan jalankan perintah berikut ini di dalam terminal/CMD :
php artisan make:controller PostController
Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1 file controller baru dengan nama PostController.php yang berada di dalam folder app/Http/Controllers.
Silahkan buka file tersebut dan ubah kode-nya menjadi seperti berikut ini :
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
/**
* index
*
* @return void
*/
public function index()
{
//get posts
$posts = Post::latest()->paginate(5);
//render view with posts
return view('posts.index', compact('posts'));
}
}
Dari perubahan kode di atas, pertama kita import model Post terlebih dahulu.
use App\Models\Post;
Setelah itu, kita buat 1 method baru dengan nama index.
public function index()
{
//...
}
Di dalam method index, pertama kita get data posts dari daatabase melalui model Post.
//get posts
$posts = Post::latest()->paginate(5);
Di atas, kita tambahkan metod latest, yang bertujuan untuk mengurutkan data yang ditampilkan dari yang paling terbaru. Dan untuk method paginate digunakan untuk membatasi data yang ditampilkan perhalaman sejumlah angka yang ditentukan di dalam method tersebut.
Setelah itu, kita return ke dalam sebuah view dengan nama index.blade.php yang berada di dalam folder resources/views/posts. Jika kita lihat memang belum ada, karena kita akan membuatnya nanti.
Dan kita juga mengirimkan data posts tersebut ke dalam view melalui method bawaan dari PHP, yaitu compact.
//render view with posts
return view('posts.index', compact('posts'));
Langkah 2 - Menambahkan Route
Sekarang kita akan lanjutkan menambahkan sebuah route di Laravel 9. Disini kita akan menggunakan route dengan type resource, yang artinya route tersebut akan berisi beberapa route-route untuk kebutuhan CRUD. Seperti index, create, store, show, edit, update dan destroy. Ini akan menghemat waktu kita dibandingkan membuatnya secara manual satu persatu.
Sekarang, silahkan buka file routes/web.php, kemudian ubah semua kode-nya menjadi seperti berikut ini :
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
//route resource
Route::resource('/posts', \App\Http\Controllers\PostController::class);
Di atas, kita menambahkan route baru dengan jenis resource. Untuk memastikan apakah route yang kita tambahkan sudah berhasil, kita bisa menjalankan perintah berikut ini di dalam terminal/CMD :
php artisan route:list
Langkah 3 - Membuat View dan Menampilkan Data
Kita lanjutkan membuat sebuah view yang akan kita gunakan untuk menampilkan data. Silahkan buat folder baru dengan nama posts di dalam folder resources/views dan di dalam folder posts silahkan buat file baru dengan nama index.blade.php dan masukkan kode berikut ini di dalamnya.
<!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>Data Posts - SantriKoding.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body style="background: lightgray">
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 shadow rounded">
<div class="card-body">
<a href="{{ route('posts.create') }}" class="btn btn-md btn-success mb-3">TAMBAH POST</a>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">GAMBAR</th>
<th scope="col">JUDUL</th>
<th scope="col">CONTENT</th>
<th scope="col">AKSI</th>
</tr>
</thead>
<tbody>
@forelse ($posts as $post)
<tr>
<td class="text-center">
<img src="{{ Storage::url('public/posts/').$post->image }}" class="rounded" style="width: 150px">
</td>
<td>{{ $post->title }}</td>
<td>{!! $post->content !!}</td>
<td class="text-center">
<form onsubmit="return confirm('Apakah Anda Yakin ?');" action="{{ route('posts.destroy', $post->id) }}" method="POST">
<a href="{{ route('posts.edit', $post->id) }}" class="btn btn-sm btn-primary">EDIT</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-sm btn-danger">HAPUS</button>
</form>
</td>
</tr>
@empty
<div class="alert alert-danger">
Data Post belum Tersedia.
</div>
@endforelse
</tbody>
</table>
{{ $posts->links() }}
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
//message with toastr
@if(session()->has('success'))
toastr.success('{{ session('success') }}', 'BERHASIL!');
@elseif(session()->has('error'))
toastr.error('{{ session('error') }}', 'GAGAL!');
@endif
</script>
</body>
</html>
Dari penambahan kode di atas, kita melakukan perulangan untuk menampilkan data yang dikirimkan melalui controller. Dan untuk perulangan, kita menggunakan direktif @forelse, dimana jika data ada maka akan dilakukan looping dan jika data tidak tersedia, maka akan menampilkan pesan/message.
@forelse ($posts as $post)
//menampilkan data
@empty
//menampilkan pesan data belum tersedia
@endforelse
Dan untuk menampilkan pagination, kita bisa menggunakan kode berikut ini :
{{ $posts->links() }}
Langkah 4 - Uji Coba Menampilkan Data
Sekarang, kita bisa mencoba membukanya di dalam URL http://localhost:8000/posts dan jika berhasil maka akan menampilkan halaman seperti berikut ini :
Di atas menampilkan pesan Data Post belum Tersedia., karena kita memang belum memiliki data apapun di dalam table posts. Di artikel selanjutnya kita akan belajar bagaimana cara melakukan proses insert / memasukkan data baru ke dalam table posts.
Terima Kasih