Tutorial kali ini, kita akan membuat halaman frontend. Untuk mengatur tampilan frontend secara terstruktur, kita bisa membuat controller khusus untuk frontend agar tidak tercampur dengan controller di bagian admin. Berikut adalah langkah-langkahnya:
1. Membuat Frontend Controller
Buat controller baru yang akan mengelola tampilan frontend. Kita akan menyebutnya FrontendController, dan di dalamnya terdapat fungsi-fungsi yang dibutuhkan seperti menampilkan halaman home, detail produk, dan halaman kategori.
php artisan make:controller FrontendController
2. Mengatur Kode di FrontendController
Buka file FrontendController.php di app/Http/Controllers dan tambahkan fungsi untuk menampilkan halaman home dengan produk dan kategori dari database.
<?php
namespace App\Http\Controllers;
use App\Models\Product;
use App\Models\Category;
use Illuminate\Http\Request;
class FrontendController extends Controller
{
/**
* Tampilkan halaman utama (home) dengan daftar produk.
*/
public function home()
{
// Mengambil semua produk dan kategori
$products = Product::with('brand')->latest()->get();
$categories = Category::all();
return view('frontend.home', compact('products', 'categories'));
}
/**
* Tampilkan detail produk berdasarkan ID atau slug produk.
*/
public function showProduct($slug)
{
$categories = Category::all();
$product = Product::with('brand')->where('slug', $slug)->firstOrFail();
return view('frontend.product-detail', compact('product', 'categories'));
}
/**
* Tampilkan produk berdasarkan kategori.
*/
public function showCategory($slug)
{
$categories = Category::all();
$category = Category::where('slug', $slug)->firstOrFail();
$products = Product::whereHas('categories', function ($query) use ($slug) {
$query->where('categories.slug', $slug);
})->get();
return view('frontend.category-products', compact('categories','category', 'products'));
}
}
3. Membuat Route di web.php
Buka file routes/web.php dan tambahkan route untuk frontend yang mengarah ke FrontendController.
use App\Http\Controllers\FrontendController;
Route::get('/', [FrontendController::class, 'home'])->name('home');
Route::get('/product/{slug}', [FrontendController::class, 'showProduct'])->name('product.show');
Route::get('/category/{slug}', [FrontendController::class, 'showCategory'])->name('category.show');
4. Membuat Views untuk Frontend
Di dalam folder resources/views, buat folder frontend dan buat file untuk halaman yang sudah kita definisikan di controller:
a. resources/views/frontend/home.blade.php
Kode untuk halaman home.blade.php. Halaman ini berisi tampilan produk dengan kategori di navbar. Isi dengan code berikut:
<!-- resources/views/frontend/home.blade.php -->
@extends('layouts.frontend')
@section('content')
<div class="container mt-5">
<!-- Categories as Navbar Links -->
<div class="categories-section d-flex justify-content-center mb-5">
<ul class="nav">
@foreach ($categories as $category)
<li class="nav-item">
<a href="{{ route('category.show', $category->slug) }}" class="nav-link text-secondary">{{ $category->name }}</a>
</li>
@endforeach
</ul>
</div>
<!-- Products Section -->
<h2 id="products" class="text-center text-secondary font-weight-bold mb-4">Featured Products</h2>
<div class="row">
@foreach ($products as $product)
<div class="col-md-4 mb-4">
<div class="card product-card shadow-sm border-0 h-100">
<div class="card-img-container position-relative">
<img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="card-img-top img-fluid product-image rounded-top">
<div class="overlay d-flex align-items-center justify-content-center">
<a href="{{ route('product.show', $product->slug) }}" class="btn btn-outline-light btn-sm">View Details</a>
</div>
</div>
<div class="card-body text-center">
<h5 class="card-title">{{ $product->name }}</h5>
<p class="card-text">{{ Str::limit($product->description, 60) }}</p>
<p class="text-primary font-weight-bold">${{ number_format($product->price, 2) }}</p>
</div>
</div>
</div>
@endforeach
</div>
</div>
@endsection
b. resources/views/frontend/product-detail.blade.php
Halaman ini akan menampilkan detail dari sebuah produk.
<!-- resources/views/frontend/product-detail.blade.php -->
@extends('layouts.frontend')
@section('content')
<div class="container mt-5">
<div class="card shadow-sm">
<img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="card-img-top">
<div class="card-body">
<h1 class="card-title">{{ $product->name }}</h1>
<p class="card-text">{{ $product->description }}</p>
<p><strong>Brand:</strong> {{ $product->brand ? $product->brand->name : 'N/A' }}</p>
<p><strong>Price:</strong> ${{ number_format($product->price, 2) }}</p>
</div>
</div>
</div>
@endsection
c. resources/views/frontend/category-products.blade.php
Halaman ini akan menampilkan produk berdasarkan kategori.
<!-- resources/views/frontend/category-products.blade.php -->
@extends('layouts.frontend')
@section('content')
<div class="container mt-5">
<h1 class="mb-4 text-primary">{{ $category->name }}</h1>
<div class="row">
@foreach ($products as $product)
<div class="col-md-4 mb-4">
<div class="card h-100 shadow-sm">
<img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="card-img-top product-image">
<div class="card-body">
<h5 class="card-title">{{ $product->name }}</h5>
<p class="card-text">{{ Str::limit($product->description, 60) }}</p>
<p><strong>Price:</strong> ${{ number_format($product->price, 2) }}</p>
<a href="{{ route('product.show', $product->slug) }}" class="btn btn-primary mt-2 w-100">View Details</a>
</div>
</div>
</div>
@endforeach
</div>
</div>
@endsection
5. Layout Frontend
Buat file frontend.blade.php di folder views/layouts, kemudian isi berikut:
<!-- resources/views/layouts/frontend.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'MyCommerce - Premium Products')</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
/* Global Styles */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
/* Navbar Styling */
.navbar {
background-color: #4A90E2;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
font-weight: bold;
color: #fff;
font-size: 1.5rem;
}
.navbar-nav .nav-link {
color: #fff !important;
transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover {
color: #c2e9fb !important;
}
/* Banner Section */
.banner {
background: url('/images/banner.jpg') no-repeat center center/cover;
padding: 120px 0;
color: #fff;
text-align: center;
}
.banner h1 {
font-size: 3rem;
font-weight: bold;
}
.banner p {
font-size: 1.2rem;
}
.btn-banner {
background-color: #ffc107;
border: none;
color: #333;
font-weight: bold;
transition: background-color 0.3s ease;
}
.btn-banner:hover {
background-color: #e0a800;
}
/* Footer Styling */
footer {
background-color: #4A90E2;
color: #fff;
padding: 40px 0;
}
footer .footer-links a {
color: #c2e9fb;
text-decoration: none;
margin-right: 15px;
transition: color 0.3s ease;
}
footer .footer-links a:hover {
color: #fff;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="{{ route('home') }}">MyCommerce</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="{{ route('home') }}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<!-- Dropdown for categories -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="categoriesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Categories
</a>
<ul class="dropdown-menu" aria-labelledby="categoriesDropdown">
@foreach ($categories as $category)
<li><a class="dropdown-item" href="{{ route('category.show', $category->slug) }}">{{ $category->name }}</a></li>
@endforeach
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- Banner Section -->
<section class="banner">
<div class="container">
<h1>Welcome to MyCommerce</h1>
<p>Explore the best deals on top-quality products</p>
<a href="#products" class="btn btn-banner mt-3">Shop Now</a>
</div>
</section>
<!-- Main Content -->
<div class="container mt-5" id="products">
@yield('content')
</div>
<!-- Footer -->
<footer class="text-center">
<div class="container">
<p>© 2024 MyCommerce. All rights reserved.</p>
<div class="footer-links">
<a href="#">About Us</a>
<a href="#">Contact</a>
<a href="#">Privacy Policy</a>
</div>
</div>
</footer>
<!-- Bootstrap & FontAwesome JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
6. Testing
Jalankan Aplikasi: Pastikan aplikasi berjalan dengan baik dan periksa halaman frontend di http://localhost:8000/.
Dengan langkah ini, frontend kita sudah tertata dengan controller dan view terpisah, memudahkan manajemen dan meningkatkan skalabilitas proyek ke depan.