CRUD Laravel 11 – Show Detail Data dari Database

Dwi Purnomo
Posted by Dwi Purnomo 16 Oktober 2024
CRUD Laravel 11 - Show Detail Data dari Database
CRUD Laravel 11 - Show Detail Data dari Database

CRUD Laravel 11 – Show Detail Data dari Database – Operasi Show atau menampilkan detail data adalah bagian penting dalam pengelolaan data di aplikasi web. Dalam Laravel 11, kita dapat dengan mudah mengambil data spesifik dari database dan menampilkannya di halaman detail. Dengan memanfaatkan Eloquent ORM, kita bisa mengambil data berdasarkan ID atau parameter lainnya, kemudian menampilkan informasi tersebut ke view.

Dalam artikel ini, kita akan membahas langkah-langkah untuk menampilkan detail data dari database di Laravel 11, mulai dari menyiapkan route, controller, hingga membuat view yang menampilkan data tersebut.

 

Show Detail Data dari Database

1. Menambahkan Buttton Show

Pertama, kita perlu membuat button show detail untuk mengarahkan ke form show sesuai id data yang dipilih. Pada umumnya, form show terdapat pada view tabel index.php, kemudian saat diklik maka akan diarahkan ke view show beserta data sesuai id pada button. Untuk membuatnya tambahkan menjadi seperti ini :

<table class="table" border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Judul</th>
            <th>Konten</th>
            <th>Tanggal Dibuat</th>
            <th>Opsi</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($posts as $post)
            <tr>
                <td>{{ $post->id }}</td>
                <td>{{ $post->title }}</td>
                <td>{{ $post->content }}</td>
                <td>{{ $post->created_at }}</td>
                <td>
                    <a href="/posts/{{ $post->id }}/" class="btn btn-success">Detail</a>
                    <a href="/posts/{{ $post->id }}/edit" class="btn btn-warning">Edit</a>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

2. Menambahkan Method Show

Setelah menambahkan route, langkah berikutnya adalah menambahkan logika di controller untuk mengambil data dari database berdasarkan ID. Di file PostController.php, tambahkan metode show:

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class PostController extends Controller
{
    /**
     * Display the specified resource.
     */
    public function show(string $id)
    {
        // Mengambil data post berdasarkan ID
        $post = Post::findOrFail($id);

        // Menampilkan view edit dengan data post
        return view('posts.show', compact('post'));
    }
}

Pada metode ini, kita menggunakan fungsi findOrFail() untuk mengambil data dari database berdasarkan ID. Jika data dengan ID yang diberikan tidak ditemukan, Laravel akan otomatis mengembalikan halaman 404.

3. Membuat View untuk Menampilkan Detail Data

Setelah controller siap, langkah berikutnya adalah membuat view yang akan menampilkan detail data. Buat file show.blade.php di dalam folder resources/views/posts/:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detail Post</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>Detail Post</h1>

        <div class="form-group">
            <label for="title">Judul:</label>
            <input type="text" id="title" class="form-control" name="title"
                value="{{ old('title', $post->title) }}" disabled>
        </div>

        <div class="form-group">
            <label for="content">Konten:</label>
            <textarea id="content" class="form-control" name="content" disabled>{{ old('content', $post->content) }}</textarea>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
        </script>
    </div>
</body>

</html>

4. Uji Coba Detail Data dari Database

Setelah semua dibuat, sekarang kita akan melakukan uji coba mulai dari button show detail apakah sudah sesuai menampilkan data di form show atau tidak.

Menampilkan detail post - Inovasicode.com
Menampilkan detail post

 

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda sudah berhasil menampilkan detail data dari database menggunakan Laravel 11. Operasi ini merupakan bagian dari fungsi Read dalam prinsip CRUD yang sangat penting untuk memberikan informasi lengkap kepada pengguna terkait data yang tersimpan di aplikasi Anda.

 

Part Selanjutnya

 

Tags: