Lửng Code - Bài 9: Hướng dẫn hiển thị chi tiết sản phẩm (product detail)

Hướng dẫn hiển thị chi tiết sản phẩm (product detail)

Dựa trên bài số 9 (đã có login, dashboard, route group admin). Bà này sẽ kế thừa thêm phần HomeController và hiển thị sản phẩm ở trang chủ.

Bước 1. Mở controller HomeController

Nếu chưa có, bạn tạo controller:

php artisan make:controller HomeController

Bước 2. Code trong HomeController (chú ý phương thức `product`)

app/Http/Controllers/HomeController.php

namespace App\Http\Controllers;

use App\Models\Product;

<?php 
namespace App\Http\Controllers;

use App\models\Product;

class HomeController extends Controller {

    // phương thức trong một class
    public function home() {

         // Lấy 4 sản phẩm mới nhất
         $newProducts = Product::orderBy('created_at','DESC')->take(4)->get();

         // Lấy 4 sản phẩm có giá cao nhất
         $hotProducts = Product::orderBy('price','DESC')->take(4)->get();
 
         return view('home', compact('newProducts','hotProducts'));
    }

    public function product(Product $product) {
        return view('product', compact('product'));
    }
}

Bước 3. Khai báo Route chi tiết sản phẩm

routes/web.php

các route khác giữ nguyên, bổ sung thêm route này

<?php

use App\Http\Controllers\CategoryController;
use App\Http\Controllers\ProductController;
use App\Http\Controllers\HomeController;
use App\Http\Controllers\AuthController;
use App\Http\Controllers\DashboardController;
use Illuminate\Support\Facades\Route;

Route::get('/', [HomeController::class, 'home'])->name('home');

// 👉Bổ sung route này dưới home
Route::get('/chi-tiet-san-pham/{product}', [HomeController::class, 'product'])->name('product'); // 👈 Bổ sung route này

# các route khác vẫn giữ nguyên

Bước 4. Tạo master View site.blade.php

📄 resources/views/master/site.blade.php

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title Page</title>

        <!-- Bootstrap CSS -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    </head>
    <body>
        <header>
            <div class="container">
                <h1>Shopper</h1>
            </div>
        </header>
        <nav class="navbar navbar-inverse">
           <div class="container">
           <a class="navbar-brand" href="#">Title</a>
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="{{route('home')}}">Trang chủ</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
            </ul>
           </div>
        </nav>

        <div class="container">
            @yield('body')
        </div>

        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Bootstrap JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

Bước 5. Tạo View product.blade.php

📄 resources/views/product.blade.php

@extends('master.site')
@section('body')
<div class="row">
    <div class="col-md-5">
        <a href="#" class="thumbnail">
            <img src="{{url('uploads/products/'.$product->image)}}" alt="">
        </a>
    </div>
    <div class="col-md-7">
        <h1>{{$product->name}}</h1>
        <h2>Giá: {{ number_format($product->price) }} <sup>vnđ</sup></h2>
        <h2>Mô tả</h2>
        <p>
        Với chúng tôi, những thiết kế thể thao và trang phục may thủ công của Polo dành cho nam là sự giao thoa giữa phong cách Ivy Leagues cổ điển cùng thời trang dạo phố may mặc lâu đời tại Anh Quốc, kết hợp vẻ đẹp Mỹ đầy năng động, trẻ trung. Bên cạnh đó, dòng Polo dành cho nữ đại diện cho sự cô đọng giữa phong cách Mỹ vượt thời gian đầy biểu tượng và sắc thái đương đại mới mẻ cùng một chút đột phá đầy thú vị.
        </p>
        
        <form action="" method="POST" class="form-inline" role="form">
            <div class="form-group">
                <input type="number" class="form-control" name="quantity" placeholder="1,...">
            </div> 
            <button type="submit" class="btn btn-success">Thêm vào giỏ</button>
        </form>
    </div>
</div>
@stop

Bước 6. Start server chạy thử

php artisan serve

Truy cập http://127.0.0.1:8000/chi-tiet-san-pham/1 sẽ thấy chi tiết của 1 sản phẩm.

Lưu ý: 1 là id của sản phẩm

Bước 7. Đặt link tại danh sách sản phẩm đã có để có thể click vào xem chi tiết sản phẩm

Lưu ý: bạn phải hoàn thành lab 8 mới có danh sách sản phẩm

📄 Mở lại file resources/views/home.blade.php và đặt route cho các sản phẩm, ở trong vòng lặp như sau

@extends('master.site')
@section('body')

<h2 class="text-center">Sản phẩm mới nhất</h2>
    <div class="row">
        @foreach($newProducts as $p)
        <div class="col-md-3">
            <div class="thumbnail">
                @if($p->image)
                    <img src="{{ asset('uploads/products/'.$p->image) }}" alt="{{ $p->name }}" style="height:150px; object-fit:cover;">
                @else
                    <img src="https://via.placeholder.com/150" alt="No Image">
                @endif
                <div class="caption text-center">
                    <h4>{{ $p->name }}</h4>
                    <p>Giá: {{ number_format($p->price) }} đ</p>
                    <!-- 👉 Link route cho chi tiết sản phẩm -->
                    <a href="{{route('product', $p->id)}}" class="btn btn-sm btn-primary">Chi tiết</a>
                    <a href="" class="btn btn-sm btn-success">Giỏ hàng</a>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <h2 class="text-center">Sản phẩm nổi bật</h2>
    <div class="row">
        @foreach($hotProducts as $p)
        <div class="col-md-3">
            <div class="thumbnail">
                @if($p->image)
                    <img src="{{ asset('uploads/products/'.$p->image) }}" alt="{{ $p->name }}" style="height:150px; object-fit:cover;">
                @else
                    <img src="https://via.placeholder.com/150" alt="No Image">
                @endif
                <div class="caption text-center">
                    <h4>{{ $p->name }}</h4>
                    <p>Giá: {{ number_format($p->price) }} đ</p>
                    <!-- 👉 Link route cho chi tiết sản phẩm -->
                    <a href="{{route('product', $p->id)}}" class="btn btn-sm btn-primary">Chi tiết</a>
                    <a href="" class="btn btn-sm btn-success">Giỏ hàng</a>
                </div>
            </div>
        </div>
        @endforeach
    </div>
@stop

Bước 8: Truy cập lại trang chủ, bây giờ sẽ thấy nút bấm `Chi tiết` nhấn vào đó để xem chi tiết sản phẩm

Truy cập http://127.0.0.1:8000 sẽ thấy nút Chi tiết nhấn vào đó.