Pendahuluan
Sejenak kita meninggalkan kegiatan untuk merangkai fitur dari sisi administrator dan beralih pada sisi etalase toko yang bisa dilihat oleh customers atau visitors ketika mengunjungi aplikasi tersebut. Jika dilihat dari judulnya, maka bisa ditebak bahwa artikel ini terbilang materi yang cukup ringan karena hanya proses templating dan menampilkan data produk saja.
Fokus kita adalah membuat dua buah halaman yakni home page atau dengan url http://localhost:8000/ untuk menampilkan apa yang seharusnya ditampilkan beserta data produk-nya. Kemudian halaman selanjutnya adalah http://localhost:8000/product untuk meng-handle data produk secara lebih spesifik dimana terdapat filter berdasarkan kategori pada sisi kiri. Hanya saja filter tersebut untuk saat ini tidak akan dibahas agar artikelnya tidak terlalu panjang.
Baca Juga: Aplikasi E-Commerce Laravel 6 #5: Mass Upload Products
Templating E-Commerce
Kegiatan ini hampir sama dengan proses templating pada artikel seri ke-2 yang membahas tentang Templating & Authentication. Adapun perbedaan diantara keduanya hanyalah dari segi tujuannya saja, jika sebelumnya digunakan untuk halaman administrator, maka seri kali ini akan digunakan untuk etalase toko yang akan tampil pada pengguna atau customers yang sedang menggunakan aplikasi kamu.
Pertama, buat file ecommerce.blade.php dan letakkan didalam folder resources/views/layouts, kemudian tambahkan rangkaian code HTML berikut
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="img/favicon.png" type="image/png">
@yield('title')
<link rel="stylesheet" href="{{ asset('ecommerce/css/bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('ecommerce/vendors/linericon/style.css') }}">
<link rel="stylesheet" href="{{ asset('ecommerce/css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ asset('ecommerce/vendors/owl-carousel/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ asset('ecommerce/vendors/lightbox/simpleLightbox.css') }}">
<link rel="stylesheet" href="{{ asset('ecommerce/vendors/nice-select/css/nice-select.css') }}">
<link rel="stylesheet" href="{{ asset('ecommerce/vendors/animate-css/animate.css') }}">
<link rel="stylesheet" href="{{ asset('ecommerce/vendors/jquery-ui/jquery-ui.css') }}">
<link rel="stylesheet" href="{{ asset('ecommerce/css/style.css') }}">
<link rel="stylesheet" href="{{ asset('ecommerce/css/responsive.css') }}">
</head>
<body>
<!--================Header Menu Area =================-->
<header class="header_area">
<div class="top_menu row m0">
<div class="container-fluid">
<div class="float-left">
<p>Call Us: 012 44 5698 7456 896</p>
</div>
<div class="float-right">
<ul class="right_side">
<li><a href="login.html">Login/Register</a></li>
<li><a href="#">My Account</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="{{ url('/') }}">
<img src="https://daengweb.id/front/dw-theme/images/logo-head.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<div class="row w-100">
<div class="col-lg-7 pr-0">
@include('layouts.ecommerce.module.menu')
</div>
<div class="col-lg-5">
<ul class="nav navbar-nav navbar-right right_nav pull-right">
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-user" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="lnr lnr lnr-cart"></i>
</a>
</li>
<hr>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>
<!--================Header Menu Area =================-->
@yield('content')
<!--================ Subscription Area ================-->
<section class="subscription-area section_gap">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-title text-center">
<h2>Subscribe for Our Newsletter</h2>
<span>We won’t send any kind of spam</span>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-6">
<div id="mc_embed_signup">
<form target="_blank" novalidate action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&id=92a4423d01"
method="get" class="subscription relative">
<input type="email" name="EMAIL" placeholder="Email address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email address'"
required="">
<!-- <div style="position: absolute; left: -5000px;">
<input type="text" name="b_36c4fd991d266f23781ded980_aefe40901a" tabindex="-1" value="">
</div> -->
<button type="submit" class="newsl-btn">Get Started</button>
<div class="info"></div>
</form>
</div>
</div>
</div>
</div>
</section>
<!--================ End Subscription Area ================-->
<!--================ start footer Area =================-->
<footer class="footer-area section_gap">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6 class="footer_title">About Us</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6 class="footer_title">Newsletter</h6>
<p>Stay updated with our latest trends</p>
<div id="mc_embed_signup">
<form target="_blank" action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&id=92a4423d01"
method="get" class="subscribe_form relative">
<div class="input-group d-flex flex-row">
<input name="EMAIL" placeholder="Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Address '"
required="" type="email">
<button class="btn sub-btn">
<span class="lnr lnr-arrow-right"></span>
</button>
</div>
<div class="mt-10 info"></div>
</form>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget instafeed">
<h6 class="footer_title">Instagram Feed</h6>
<ul class="list instafeed d-flex flex-wrap">
<li>
<img src="{{ asset('ecommerce/img/instagram/Image-01.jpg') }}" alt="">
</li>
<li>
<img src="{{ asset('ecommerce/img/instagram/Image-02.jpg') }}" alt="">
</li>
<li>
<img src="{{ asset('ecommerce/img/instagram/Image-03.jpg') }}" alt="">
</li>
<li>
<img src="{{ asset('ecommerce/img/instagram/Image-04.jpg') }}" alt="">
</li>
<li>
<img src="{{ asset('ecommerce/img/instagram/Image-05.jpg') }}" alt="">
</li>
<li>
<img src="{{ asset('ecommerce/img/instagram/Image-06.jpg') }}" alt="">
</li>
<li>
<img src="{{ asset('ecommerce/img/instagram/Image-07.jpg') }}" alt="">
</li>
<li>
<img src="{{ asset('ecommerce/img/instagram/Image-08.jpg') }}" alt="">
</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget f_social_wd">
<h6 class="footer_title">Follow Us</h6>
<p>Let us be social</p>
<div class="f_social">
<a href="#">
<i class="fa fa-facebook"></i>
</a>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<a href="#">
<i class="fa fa-dribbble"></i>
</a>
<a href="#">
<i class="fa fa-behance"></i>
</a>
</div>
</div>
</div>
</div>
<div class="row footer-bottom d-flex justify-content-between align-items-center">
<p class="col-lg-12 footer-text text-center">
Copyright ©<script>document.write(new Date().getFullYear());</script>
All rights reserved | This template is made with
<i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://daengweb.id" target="_blank">Daengweb</a>
</p>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<script src="{{ asset('ecommerce/js/jquery-3.2.1.min.js') }}"></script>
<script src="{{ asset('ecommerce/js/popper.js') }}"></script>
<script src="{{ asset('ecommerce/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('ecommerce/js/stellar.js') }}"></script>
<script src="{{ asset('ecommerce/vendors/lightbox/simpleLightbox.min.js') }}"></script>
<script src="{{ asset('ecommerce/vendors/nice-select/js/jquery.nice-select.min.js') }}"></script>
<script src="{{ asset('ecommerce/vendors/isotope/imagesloaded.pkgd.min.js') }}"></script>
<script src="{{ asset('ecommerce/vendors/isotope/isotope-min.js') }}"></script>
<script src="{{ asset('ecommerce/vendors/owl-carousel/owl.carousel.min.js') }}"></script>
<script src="{{ asset('ecommerce/js/jquery.ajaxchimp.min.js') }}"></script>
<script src="{{ asset('ecommerce/vendors/counter-up/jquery.waypoints.min.js') }}"></script>
<script src="{{ asset('ecommerce/vendors/flipclock/timer.js') }}"></script>
<script src="{{ asset('ecommerce/vendors/counter-up/jquery.counterup.js') }}"></script>
<script src="{{ asset('ecommerce/js/mail-script.js') }}"></script>
<script src="{{ asset('ecommerce/js/theme.js') }}"></script>
</body>
</html>
Note: Adapun penjelasan dari pemenggalan code diatas sama dengan penjelasan pada artikel seri ke-2 yang pada intinya adalah kita membuat sebuah code html yang sifatnya statis sehingga dapat digunakan berulangkali sebagai master template.
Jika kita perhatikan, pada code html diatas terdapat code @include('layouts.ecommerce.module.menu'), fungsinya adalah untuk meng-handle menu sehingga lebih mudah untuk di-maintenance. Buat file menu.blade.php dan letakkan didalam folder /layouts/ecommerce/module, lalu tambahkan code
<ul class="nav navbar-nav center_nav pull-right">
<li class="nav-item active">
<a class="nav-link" href="{{ route('front.index') }}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('front.product') }}">Produk</a>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="category.html">Shop Category</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
Note: Jadi kita memiliki 4 buah menu, akan tetapi hanya ada 2 menu yang digunakan, yakni: home dan produk.
Bagian terakhir adalah menempatkan assets berupa css, js dan image. Download semua asset-nya pada repository kami di Github. Kemudian simpan ke-dalam folder public/ecommerce.
Display Products In Your Store
Ada dua buah page yang akan menampilkan data produk untuk saat ini, yakni home page dan produk page. Bagian pertama, kita akan meng-handle page home terlebih dahulu. Pada command line, jalankan command berikut untuk men-generate controller.
php artisan make:controller Ecommerce/FrontController
Command diatas akan membuat sebuah folder bernama Ecommerce didalam folder Controllers dan menyimpan file FrontController didalam folder Ecommerce tersebut. Kemudian buka file FrontController.php dan tambahkan method berikut.
public function index()
{
//MEMBUAT QUERY UNTUK MENGAMBIL DATA PRODUK YANG DIURUTKAN BERDASARKAN TGL TERBARU
//DAN DI-LOAD 10 DATA PER PAGENYA
$products = Product::orderBy('created_at', 'DESC')->paginate(10);
//LOAD VIEW INDEX.BLADE.PHP DAN PASSING DATA DARI VARIABLE PRODUCTS
return view('ecommerce.index', compact('products'));
}
Jangan lupa untuk menambahkan use statement
use App\Product;
Selanjutnya definisikan route-nya, buka file routes/web.php dan tambahkan code berikut
Route::get('/', 'Ecommerce\FrontController@index')->name('front.index');
Jangan lupa untuk menghapus route berikut
Route::get('/', function () {
return view('welcome');
});
Selanjutnya adalah meng-handle view-nya. Buat file index.blade.php dan tempatkan kedalam folder resources/views/ecommerce, lalu masukkan code berikut
@extends('layouts.ecommerce')
@section('title')
<title>DW Ecommerce - Pusat Belanja Online</title>
@endsection
@section('content')
<!--================Home Banner Area =================-->
<section class="home_banner_area">
<div class="overlay"></div>
<div class="banner_inner d-flex align-items-center">
<div class="container">
<div class="banner_content row">
<div class="offset-lg-2 col-lg-8">
<h3>Fashion for
<br />Upcoming Winter</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<a class="white_bg_btn" href="#">View Collection</a>
</div>
</div>
</div>
</div>
</section>
<!--================End Home Banner Area =================-->
<!--================Hot Deals Area =================-->
<section class="hot_deals_area section_gap">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="hot_deal_box">
<img class="img-fluid" src="{{ asset('ecommerce/img/product/hot_deals/deal1.jpg') }}" alt="">
<div class="content">
<h2>Hot Deals of this Month</h2>
<p>shop now</p>
</div>
<a class="hot_deal_link" href="#"></a>
</div>
</div>
<div class="col-lg-6">
<div class="hot_deal_box">
<img class="img-fluid" src="{{ asset('ecommerce/img/product/hot_deals/deal1.jpg') }}" alt="">
<div class="content">
<h2>Hot Deals of this Month</h2>
<p>shop now</p>
</div>
<a class="hot_deal_link" href="#"></a>
</div>
</div>
</div>
</div>
</section>
<!--================End Hot Deals Area =================-->
<!--================Feature Product Area =================-->
<section class="feature_product_area section_gap">
<div class="main_box">
<div class="container-fluid">
<div class="row">
<div class="main_title">
<h2>Produk Terbaru</h2>
<p>Tampil trendi dengan kumpulan produk kekinian kami.</p>
</div>
</div>
<div class="row">
<!-- PERHATIAKAN BAGIAN INI, LOOPING DATA PRODUK -->
@forelse($products as $row)
<div class="col col1">
<div class="f_p_item">
<div class="f_p_img">
<!-- KEMUDIAN TAMPILKAN IMAGENYA DARI FOLDER /PUBLIC/STORAGE/PRODUCTS -->
<img class="img-fluid" src="{{ asset('storage/products/' . $row->image) }}" alt="{{ $row->name }}">
<div class="p_icon">
<a href="{{ url('/product/' . $row->slug) }}">
<i class="lnr lnr-cart"></i>
</a>
</div>
</div>
<!-- KETIKA PRODUK INI DIKLIK MAKA AKAN DIARAHKAN KE URL DIBAWAH -->
<!-- HANYA SAJA URL TERSEBUT BELUM DISEDIAKAN PADA ARTIKEL KALI INI -->
<a href="{{ url('/product/' . $row->slug) }}">
<!-- TAMPILKAN NAMA PRODUK -->
<h4>{{ $row->name }}</h4>
</a>
<!-- TAMPILKAN HARGA PRODUK -->
<h5>Rp {{ number_format($row->price) }}</h5>
</div>
</div>
@empty
@endforelse
</div>
<!-- GENERATE PAGINATION UNTUK MEMBUAT NAVIGASI DATA SELANJUTNYA JIKA ADA -->
<div class="row">
{{ $products->links() }}
</div>
</div>
</div>
</section>
<!--================End Feature Product Area =================-->
@endsection
Halaman diatas sudah bisa diakses, apabila terjadi error itu disebabkan oleh menu yang menggunakan helper route('front.product'), dimana pada saat ini route tersebut belum tersedia. Jika ingin me-load-nya saat ini juga, komentar saja tag html yang menggunakan route tersebut.
Page selanjutnya adalah product, dimana page ini berfungsi untuk menampilkan data produk secara kesuluruhan. Buka FrontController dan tambahkan method berikut
public function product()
{
//BUAT QUERY UNTUK MENGAMBIL DATA PRODUK, LOAD PER PAGENYA KITA GUNAKAN 12 AGAR PRESISI PADA HALAMAN TERSEBUT KARENA DALAM SEBARIS MEMUAT 4 BUAH PRODUK
$products = Product::orderBy('created_at', 'DESC')->paginate(12);
//LOAD JUGA DATA KATEGORI YANG AKAN DITAMPILKAN PADA SIDEBAR
$categories = Category::with(['child'])->withCount(['child'])->getParent()->orderBy('name', 'ASC')->get();
//LOAD VIEW PRODUCT.BLADE.PHP DAN PASSING KEDUA DATA DIATAS
return view('ecommerce.product', compact('products', 'categories'));
}
Jangan lupa untuk menambahkan use statement.
use App\Category;
Selanjutnya adalah mendefinisikan route-nya, buka file routes/web.php dan tambahkan code
Route::get('/product', 'Ecommerce\FrontController@product')->name('front.product');
Kemudian bagian terakhir adalah dengan membuat file product.blade.php didalam folder resources/views/ecommerce dan tambahkan code
@extends('layouts.ecommerce')
@section('title')
<title>Jual Produk Fashion - DW Ecommerce</title>
@endsection
@section('content')
<!--================Home Banner Area =================-->
<section class="banner_area">
<div class="banner_inner d-flex align-items-center">
<div class="container">
<div class="banner_content text-center">
<h2>Jual Produk Fashion</h2>
<div class="page_link">
<a href="{{ route('front.index') }}">Home</a>
<a href="{{ route('front.product') }}">Produk</a>
</div>
</div>
</div>
</div>
</section>
<!--================End Home Banner Area =================-->
<!--================Category Product Area =================-->
<section class="cat_product_area section_gap">
<div class="container-fluid">
<div class="row flex-row-reverse">
<div class="col-lg-9">
<div class="product_top_bar">
<div class="left_dorp">
<select class="sorting">
<option value="1">Default sorting</option>
<option value="2">Default sorting 01</option>
<option value="4">Default sorting 02</option>
</select>
<select class="show">
<option value="1">Show 12</option>
<option value="2">Show 14</option>
<option value="4">Show 16</option>
</select>
</div>
<div class="right_page ml-auto">
{{ $products->links() }}
</div>
</div>
<div class="latest_product_inner row">
<!-- PROSES LOOPING DATA PRODUK, SAMA DENGAN CODE YANG ADDA DIHALAMAN HOME -->
@forelse ($products as $row)
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="f_p_item">
<div class="f_p_img">
<img class="img-fluid" src="{{ asset('storage/products/' . $row->image) }}" alt="{{ $row->name }}">
<div class="p_icon">
<a href="{{ url('/product/' . $row->slug) }}">
<i class="lnr lnr-cart"></i>
</a>
</div>
</div>
<a href="{{ url('/product/' . $row->slug) }}">
<h4>{{ $row->name }}</h4>
</a>
<h5>Rp {{ number_format($row->price) }}</h5>
</div>
</div>
@empty
@endforelse
<!-- PROSES LOOPING DATA PRODUK, SAMA DENGAN CODE YANG ADDA DIHALAMAN HOME -->
</div>
</div>
<div class="col-lg-3">
<div class="left_sidebar_area">
<aside class="left_widgets cat_widgets">
<div class="l_w_title">
<h3>Kategori Produk</h3>
</div>
<div class="widgets_inner">
<ul class="list">
<!-- PROSES LOOPING DATA KATEGORI -->
@foreach ($categories as $category)
<li>
<!-- JIKA CHILDNYA ADA, MAKA KATEGORI INI AKAN MENG-EXPAND DATA DIBAWAHNYA -->
<a href="{{ $category->child_count > 0 ? '#':url('/category/' . $category->slug) }}">{{ $category->name }}</a>
<!-- PROSES LOOPING DATA CHILD KATEGORI -->
@foreach ($category->child as $child)
<ul class="list">
<li>
<a href="{{ url('/category/' . $child->slug) }}">{{ $child->name }}</a>
</li>
</ul>
@endforeach
</li>
@endforeach
</ul>
</div>
</aside>
</div>
</div>
</div>
<!-- GENERATE PAGINATION PRODUK -->
<div class="row">
{{ $products->links() }}
</div>
</div>
</section>
<!--================End Category Product Area =================-->
@endsection
Note: Page /category dan /product/{slug} saat ini belum ada, url dari masing-masing code diatas dibuat lebih awal, sehingga pada artikel selanjutnya kita tidak perlu lagi kembali ke-page ini hanya untuk meng-edit url tujuannya saja ketika item tersebut di-klik.
Adapun tampilannya kurang lebih seperti gambar berikut
Baca Juga: Aplikasi E-Commerce Laravel 6 #4: Upload Products
Kesimpulan
Artikel kali ini kita mengulang materi lama yakni bagaimana membuat templating dan menampilkan data dari database. Sebenarnya kegiatan ini berkali kali kita lakukan pada 4 seri artikel terakhir, hanya saja dengan contoh kasus yang berbeda.
Jadi yang dibutuhkan dalam merangkai potongan code hanyalah sebuah logika untuk menentukan teknik apa yang akan digunakan. Sebab tekniknya itu sendiri akan berputar dengan cara cara yang sama kita kerjakan sebelumnya.
Adapun dokumentasi code dari artikel berikut bisa dilihat di Github.
Comments