Tutorial Laravel 13 #6: Menampilkan Detail Data By ID

• Langkah 1 - Menambahkan Method show di Controller
• Langkah 2 - Membuat View Detail Data Product
• Langkah 3 - Uji Coba Menampilkan Detail Data Product
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara melakukan insert data ke dalam database beserta proses upload gambar. Pada tutorial kali ini, kita akan belajar bagaimana cara menampilkan detail data berdasarkan ID di Laravel 13.

Dengan memahami materi ini, teman-teman akan dapat menampilkan informasi lengkap dari sebuah produk berdasarkan ID yang dipilih oleh pengguna.

Langkah 1 - Menambahkan Method show di Controller

Untuk menampilkan detail produk, kita akan menggunakan method show di dalam ProductController.php. Method ini akan mengambil data produk berdasarkan ID dan mengirimkannya ke view untuk ditampilkan.

Silahkan buka file app/Http/Controllers/ProductController.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.

app/Http/Controllers/ProductController.php

<?php

namespace App\Http\Controllers;

//import model product
use App\Models\Product; 

//import return type View
use Illuminate\View\View;

//import return type redirectResponse
use Illuminate\Http\RedirectResponse;

//import Http Request
use Illuminate\Http\Request;

class ProductController extends Controller
{
    /**
     * index
     *
     * @return void
     */
    public function index() : View
    {
        //get all products
        $products = Product::latest()->paginate(10);

        //render view with products
        return view('products.index', compact('products'));
    }

    /**
     * create
     *
     * @return View
     */
    public function create(): View
    {
        return view('products.create');
    }

    /**
     * store
     *
     * @param  mixed $request
     * @return RedirectResponse
     */
    public function store(Request $request): RedirectResponse
    {
        //validate form
        $request->validate([
            'image'         => 'required|image|mimes:jpeg,jpg,png|max:2048',
            'title'         => 'required|min:5',
            'description'   => 'required|min:10',
            'price'         => 'required|numeric',
            'stock'         => 'required|numeric'
        ]);

        //upload image
        $image = $request->file('image');
        $image->storeAs('products', $image->hashName(), 'public');

        //create product
        Product::create([
            'image'         => $image->hashName(),
            'title'         => $request->title,
            'description'   => $request->description,
            'price'         => $request->price,
            'stock'         => $request->stock
        ]);

        //redirect to index
        return redirect()->route('products.index')->with(['success' => 'Data Berhasil Disimpan!']);
    }
    
   /**
   * show
   *
   * @param  mixed $id
   * @return View
   */
  public function show(string $id): View
  {
      //get product by ID
      $product = Product::findOrFail($id);

      //render view with product
      return view('products.show', compact('product'));
  }

}

Dari penambahan kode di atas, kita menambahkan method baru dengan nama show dan di dalam parameternya kita berikan variable $id.

public function show(string $id): View
{
    //...
}

Di dalam method di atas, kita akan melakukan get data dari database melalui Model Product dengan method findOrFail.

//get product by ID
$product = Product::findOrFail($id);

Jika data berhasil didapatkan, selanjutnya kita kirimkan ke dalam view menggunakan fungsi compact.

//render view with product
return view('products.show', compact('product'));

Langkah 2 - Membuat View Detail Data Product

Setelah menambahkan method show di ProductController.php, sekarang kita akan membuat halaman tampilan untuk menampilkan detail produk.

Silahkan teman-teman buat file baru di dalam folder resources/views/products/ dengan nama show.blade.php.

Kurang lebih struktur folder-nya akan terlihat seperti ini:

resources
└── views
    └── products
        ├── index.blade.php
        ├── create.blade.php
        └── show.blade.php

Sekarang, buka file show.blade.php dan masukkan kode berikut ini di dalamnya.

NOTE: UI-nya kita samakan seperti sebelumnya dan menggunakan Tailwind CSS via CDN.

resources/views/products/show.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>Show Products - SantriKoding.com</title>

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">

    <div class="max-w-6xl mx-auto px-4 py-10">
        <div class="text-center">
            <h3 class="text-2xl font-bold mb-2">Tutorial Laravel 13 untuk Pemula</h3>
            <h5 class="text-sm">
                <a href="https://santrikoding.com" class="text-blue-600 hover:underline">www.santrikoding.com</a>
            </h5>
            <hr class="my-6 border-gray-200">
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-gray-200">
            <div class="p-6">

                <div class="flex items-center justify-between mb-6">
                    <h4 class="text-lg font-semibold text-gray-900">Detail Product</h4>
                    <a href="{{ route('products.index') }}"
                       class="px-4 py-2 rounded-lg bg-gray-900 text-white text-sm font-semibold hover:bg-gray-800 transition">
                        BACK
                    </a>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
                    <div class="md:col-span-4">
                        <div class="border border-gray-200 rounded-2xl overflow-hidden">
                            <img
                                src="{{ asset('/storage/products/'.$product->image) }}"
                                class="w-full"
                                alt="{{ $product->title }}"
                            >
                        </div>
                    </div>

                    <div class="md:col-span-8">
                        <div class="border border-gray-200 rounded-2xl p-6">
                            <h3 class="text-xl font-bold text-gray-900">{{ $product->title }}</h3>
                            <hr class="my-4 border-gray-200">

                            <p class="text-gray-700 font-semibold">
                                {{ "Rp " . number_format($product->price,2,',','.') }}
                            </p>

                            <div class="mt-4">
                                <div class="text-sm font-semibold text-gray-700 mb-2">DESCRIPTION</div>
                                <div class="prose max-w-none text-gray-700">
                                    {!! $product->description !!}
                                </div>
                            </div>

                            <hr class="my-4 border-gray-200">

                            <p class="text-gray-700">
                                Stock : <span class="font-semibold">{{ $product->stock }}</span>
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</body>
</html>

Dari penambahan kode di atas, kita menampilkan detail data-nya dengan cara memanggil objek dari $product, yaitu: menampilkan gambar, title, harga, description, dan stock.

• Menampilkan gambar:

  <img src="{{ asset('/storage/products/'.$product->image) }}">
  

• Menampilkan title:

  {{ $product->title }}
  

• Menampilkan harga:

  {{ "Rp " . number_format($product->price,2,',','.') }}
  

  Di atas, kita gunakan function number_format dari PHP untuk memformat harga product.

• Menampilkan description:

  {!! $product->description !!}
  

  Karena di dalam description terdapat sintaks HTML, maka kita harus me-render nya menggunakan {!! !!}.

• Menampilkan stock:

  {{ $product->stock }}
  

Langkah 3 - Uji Coba Menampilkan Detail Data Product

Setelah kita membuat method show di ProductController.php dan menyiapkan halaman view show.blade.php, sekarang saatnya menguji apakah fitur ini sudah berjalan dengan baik.

Silahkan teman-teman klik button SHOW pada salah satu data produk yang sudah ada. Jika berhasil, maka halaman akan menampilkan detail data produk berdasarkan ID yang dipilih.

Kesimpulan

Pada tutorial ini, kita telah belajar bagaimana cara menampilkan detail produk berdasarkan ID di Laravel 13, yaitu dengan menambahkan method show di controller, serta membuat view detail produk menggunakan Tailwind CSS.

Pada tutorial berikutnya, kita akan belajar bagaimana cara Meng-edit dan meng-Update Data Produk di Laravel 13.

Terima kasih