Aplikasi toko online yang akan kita buat menggunakan https://getbootstrap.com/ sebagai framework CSSnya. Sebelumnya kita buat 1 lagi file controller dengan nama HomepageController dengan perintah php artisan make:controller HomepageController
Kemudian buat 1 buah function dengan nama index.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomepageController extends Controller
{
public function index() {
$data = array('title' => 'Homepage');
return view('homepage.index', $data);
}
}
Kemudian buatlah 1 buah folder di dalam folder views dengan nama homepage, dan di dalam homepage buat 1 buah file dengan nama index.blade.php dan isi dengan kode seperti berikut.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<title>{{ $title }}</title>
</head>
<body>
<!-- menunya kita taruh persis di bawah <body> -->
@include('layouts.menu')
<!-- di bawah menu baru kontennya -->
<!-- Mulai sini kontennya depannya kasih @ sama yield-->
@yield('content')
<!-- Sampai sini -->
@include('layouts.footer')
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
File web.php kita sesuaikan dengan mengkomen semua route, dan sisakan 1 route untuk mengarah ke controller yang baru kita buat, menjadi seperti berikut.
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', '[email protected]');
// Route::get('/halo', function() {
// return "Halo nama saya fadlur";
// });
// Route::get('/latihan', '[email protected]');
// Route::get('/blog/{id}', '[email protected]');
// Route::get('/blog/{idblog}/komentar/{idkomentar}', '[email protected]');
// Route::get('/beranda', '[email protected]');
Dari file index.blade.php yang kita buat tadi, sekarang kita ubah menjadi template. Caranya, buat 1 buah folder di dalam folder view dengan nama layouts
*jangan lupa, layoutsnya pake "s".
Kemudian di dalam folder layouts kita buat 1 buah file dengan nama template.blade.php
Kodenya copy paste aja dari file index.blade.php dan sesuaikan seperti di bawah ini.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>{{ $title }}</title>
</head>
<body>
<!-- menunya kita taruh persis di bawah <body> -->
@include('layouts.menu')
<!-- di bawah menu baru kontennya -->
<!-- Mulai sini kontennya depannya kasih @ sama yield-->
@yield('content')
<!-- Sampai sini -->
@include('layouts.footer')
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
</body>
</html>
Menu sama footernya belum kita buat, sekarang kita buat menunya dulu. buat 1 buah file di dalam folder layouts dengan nama menu.blade.php
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
<div class="container">
<a class="navbar-brand" href="/">Toko</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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="mr-auto navbar-nav"></ul>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Produk</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kategori</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontak</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tentang Kami</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
Tambahkan 1 buah file lagi di folder layouts juga dengan nama footer.blade.php
<div class="container">
<div class="row">
<div class="col">
<hr />
<p>© Copyright Toko Online Powered by Laravel - 2020</p>
</div>
</div>
</div>
Terakhir ubah file index.blade.php yang berada di dalam folder homepage menjadi seperti ini.
@extends('layouts.template')
@section('content')
<div class="container">
<div class="row">
<div class="col">
<h1>Hello world</h1>
</div>
</div>
</div>
@endsection
Jalankan laravel dengan perintah php artisan serve dan akses dengan alamat http://localhost:8000 maka hasilnya akan tampil seperti di bawah ini.
Sampai disini berarti templatenya sudah siap untuk kita gunakan. Di tutorial selanjutnya kita akan membuat desain halaman home, kontak dan profilnya.