Hướng dẫn hiển thị sản phẩm ra trang chủ (home page)
Dựa trên bài số 7 (đã 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. Tạo HomeController
Nếu chưa có, bạn tạo controller:
php artisan make:controller HomeController
Bước 2. Code trong HomeController
app/Http/Controllers/HomeController.php
namespace App\Http\Controllers;
use App\Models\Product;
class HomeController extends Controller
{
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'));
}
}
Bước 3. Khai báo Route cho Trang chủ
routes/web.php
use App\Http\Controllers\HomeController;
Route::get('/', [HomeController::class, 'home'])->name('home');
Bước 4. Tạo View home.blade.php
📄 resources/views/home.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Trang chủ</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<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('storage/'.$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>
</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('storage/'.$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>
</div>
</div>
</div>
@endforeach
</div>
</div>
</body>
</html>
Bước 5. Start server chạy thử
php artisan serve
Truy cập http://127.0.0.1:8000/ sẽ thấy danh sách sản phẩm.