Desain Home
Template telah selesai kita buat, selanjutnya kita bisa mendesain halaman home, about (tentang kami) dan kontak. Langkah pertama, kita buat halaman home dulu. Di halaman home nantinya ada slider image dan juga beberapa foto produk, oleh karena itu download beberapa gambar di https://unsplash.com/ . Ambil 3 buah gambar dulu kemudian rename menjadi slide1.jpg slide2.jpg dan slide3.jpg. Selanjutnya buat folder dengan nama images di dalam folder public terus copy paste 3 gambar tadi ke dalam folder images tersebut.
Sekarang edit file views di views/homepage/index.blade.php seperti berikut.
@extends('layouts.template')
@section('content')
<div class="container">
<!-- carousel -->
<div class="row">
<div class="col">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{ asset('images/slide1.jpg') }}" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="{{ asset('images/slide2.jpg') }}" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="{{ asset('images/slide3.jpg') }}" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- end carousel -->
</div>
@endsectionKemudian jalankan laravel dan akses di halaman http://localhost:8000 seharusnya tampil carousel atau slideshow seperti gambar berikut.
# DAFTAR KATEGORI
Di bawah carousel, kita tambahkan daftar kategori yang tersedia dengan menambahkan beberapa baris kode di bawah <!-- end carousel -->
<!-- kategori produk -->
<div class="row mt-4">
<div class="col col-md-12 col-sm-12 mb-4">
<h2 class="text-center">Kategori Produk</h2>
</div>
<!-- kategori pertama -->
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<a href="{{ URL::to('kategori/satu') }}">
<img src="{{asset('images/slide1.jpg') }}" alt="foto kategori" class="card-img-top">
</a>
<div class="card-body">
<a href="{{ URL::to('kategori/satu') }}" class="text-decoration-none">
<p class="card-text">Kategori Pertama</p>
</a>
</div>
</div>
</div>
<!-- kategori kedua -->
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<a href="{{ URL::to('kategori/dua') }}">
<img src="{{asset('images/slide1.jpg') }}" alt="foto kategori" class="card-img-top">
</a>
<div class="card-body">
<a href="{{ URL::to('kategori/dua') }}" class="text-decoration-none">
<p class="card-text">Kategori Kedua</p>
</a>
</div>
</div>
</div>
<!-- kategori ketiga -->
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<a href="{{ URL::to('kategori/tiga') }}">
<img src="{{asset('images/slide1.jpg') }}" alt="foto kategori" class="card-img-top">
</a>
<div class="card-body">
<a href="{{ URL::to('kategori/tiga') }}" class="text-decoration-none">
<p class="card-text">Kategori Ketiga</p>
</a>
</div>
</div>
</div>
</div>
<!-- end kategori produk --># PRODUK PROMO
Setelah menambahkan kategori, selanjutnya tambahkan produk yang diberikan promo potongan harga. Tambahkan kode di bawah <!-- end kategori produk -->
<!-- produk Promo-->
<div class="row mt-4">
<div class="col col-md-12 col-sm-12 mb-4">
<h2 class="text-center">Promo</h2>
</div>
<!-- produk pertama -->
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<a href="{{ URL::to('produk/satu') }}">
<img src="{{asset('images/slide3.jpg') }}" alt="foto produk" class="card-img-top">
</a>
<div class="card-body">
<a href="{{ URL::to('produk/satu') }}" class="text-decoration-none">
<p class="card-text">
Produk Pertama
</p>
</a>
<div class="row mt-4">
<div class="col">
<button class="btn btn-light">
<i class="far fa-heart"></i>
</button>
</div>
<div class="col-auto">
<p>
<del>Rp. 15.000,00</del>
<br />
Rp. 10.000,00
</p>
</div>
</div>
</div>
</div>
</div>
<!-- produk kedua -->
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<a href="{{ URL::to('produk/dua') }}">
<img src="{{asset('images/slide3.jpg') }}" alt="foto produk" class="card-img-top">
</a>
<div class="card-body">
<a href="{{ URL::to('produk/dua') }}" class="text-decoration-none">
<p class="card-text">
Produk Kedua
</p>
</a>
<div class="row mt-4">
<div class="col">
<button class="btn btn-light">
<i class="far fa-heart"></i>
</button>
</div>
<div class="col-auto">
<p>
<del>Rp. 15.000,00</del>
<br />
Rp. 10.000,00
</p>
</div>
</div>
</div>
</div>
</div>
<!-- produk ketiga -->
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<a href="{{ URL::to('produk/tiga') }}">
<img src="{{asset('images/slide3.jpg') }}" alt="foto produk" class="card-img-top">
</a>
<div class="card-body">
<a href="{{ URL::to('produk/tiga') }}" class="text-decoration-none">
<p class="card-text">
Produk Ketiga
</p>
</a>
<div class="row mt-4">
<div class="col">
<button class="btn btn-light">
<i class="far fa-heart"></i>
</button>
</div>
<div class="col-auto">
<p>
<del>Rp. 15.000,00</del>
<br />
Rp. 10.000,00
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end produk promo --># PRODUK TERBARU
Setelah produk promo, kita tambahkan lagi kode untuk menampilkan produk-produk terbaru. Tambahkan lagi kode di bawah <!-- end produk promo -->
<!-- produk Terbaru-->
<div class="row mt-4">
<div class="col col-md-12 col-sm-12 mb-4">
<h2 class="text-center">Terbaru</h2>
</div>
<!-- produk pertama -->
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<a href="{{ URL::to('produk/satu') }}">
<img src="{{asset('images/slide2.jpg') }}" alt="foto produk" class="card-img-top">
</a>
<div class="card-body">
<a href="{{ URL::to('produk/satu') }}" class="text-decoration-none">
<p class="card-text">
Produk Pertama
</p>
</a>
<div class="row mt-4">
<div class="col">
<button class="btn btn-light">
<i class="far fa-heart"></i>
</button>
</div>
<div class="col-auto">
<p>
Rp. 10.000,00
</p>
</div>
</div>
</div>
</div>
</div>
<!-- produk kedua -->
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<a href="{{ URL::to('produk/dua') }}">
<img src="{{asset('images/slide2.jpg') }}" alt="foto produk" class="card-img-top">
</a>
<div class="card-body">
<a href="{{ URL::to('produk/dua') }}" class="text-decoration-none">
<p class="card-text">
Produk Kedua
</p>
</a>
<div class="row mt-4">
<div class="col">
<button class="btn btn-light">
<i class="far fa-heart"></i>
</button>
</div>
<div class="col-auto">
<p>
Rp. 10.000,00
</p>
</div>
</div>
</div>
</div>
</div>
<!-- produk ketiga -->
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<a href="{{ URL::to('produk/tiga') }}">
<img src="{{asset('images/slide2.jpg') }}" alt="foto produk" class="card-img-top">
</a>
<div class="card-body">
<a href="{{ URL::to('produk/tiga') }}" class="text-decoration-none">
<p class="card-text">
Produk Ketiga
</p>
</a>
<div class="row mt-4">
<div class="col">
<button class="btn btn-light">
<i class="far fa-heart"></i>
</button>
</div>
<div class="col-auto">
<p>
Rp. 10.000,00
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end produk terbaru --># TENTANG TOKO
Di halaman depan, selain menampilkan produk dan kategori. Kita bisa mamasukkan ringkasan profil toko dengan menambahkan kode di bawah <!-- end produk terbaru -->
<!-- tentang toko -->
<hr>
<div class="row mt-4">
<div class="col">
<h5 class="text-center">Toko Online Menggunakan Laravel</h5>
<p>
Toko adalah demo membangun toko online menggunakan laravel framework. Di dalam demo ini terdapat user bisa menginput data kategori, produk dan transaksi.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic laborum aliquam dolorum sequi nulla maiores quos incidunt veritatis numquam suscipit. Cumque dolore rem obcaecati. Eos quod ad non veritatis assumenda.
</p>
<p>
Toko adalah demo membangun toko online menggunakan laravel framework. Di dalam demo ini terdapat user bisa menginput data kategori, produk dan transaksi.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic laborum aliquam dolorum sequi nulla maiores quos incidunt veritatis numquam suscipit. Cumque dolore rem obcaecati. Eos quod ad non veritatis assumenda.
</p>
<p class="text-center">
<a href="" class="btn btn-outline-secondary">
Baca Selengkapnya
</a>
</p>
</div>
</div>
<!-- end tentang toko -->Setelah semua dimasukkan, maka tampilannya seperti video berikut.
Mau Bikin Aplikasi Web & Aplikasi Android?
Saya membuka jasa pembuatan aplikasi web dan android untuk aplikasi seperti toko online, monitoring (IoT), interface mesin absensi atau kasir
Silahkan kontak link di bawah ini untuk teknis dan harganya
