Pada tutorial ini akan membahas Blade Templating di laravel 8, dengan sistem blade template di laravel memungkinkan kita menuliskan script php yang tidak biasa, yang biasa nya kita menuliskan kode php selalu diawali <?php dan di akhiri dengan penutup ?> dengan blade laravel kita tidak perlu menggunakan script php murni seperti tadi, di blade laravel ada penulisan tersendiri yang intinya bisa memudahkan para developer untuk mengembangkan web baik ke arah dinamis web maupun statis web, blade template memiliki ekstensi file .blade.php yang di simpan di direktori resources/views/ ,penjelasan lebih detail dapat cek langsung di dokumentasi nya https://laravel.com/docs/8.x/blade ,
Sebelum mengikuti tutorial ini di pastikan anda telah mengikuti tutorial sebelumnya di website ini :
- Install Laravel versi 8 di Windows 10
- Cara Membuat Database di Laravel 8
- Generate Key Aplikasi di Laravel 8
- Cara Mengatur Zona Waktu Indonesia di Laravel 8
- Cara Mengatur Validasi ke bahasa Indonesia di Laravel 8
Sebelum kita membuat layout template, kita membutuhkan sebuah css template yang sudah jadi, seperti template yang dikembangkan css bootstrap 5, template ini bisa kita dapatkan baik membeli nya di situs https://themeforest.net/ atau kita pakai yang versi open source, saat ini karna tujuan nya untuk pembelajaran kita gunakan template yang sifat nya open source, silahkan download terlebih dahulu file template nya di https://zuramai.github.io/mazer/docs/index.html kalo mau lihat preview template nya silahkan cek di https://zuramai.github.io/mazer/demo/index.html .
Jika sudah di download silahkan extract zip template nya dan masukan folder template di project laravel di folder public sebagai berikut :
membuat layout di sini sama seperti kita memotong beberapa bagian script html utuh menjadi beberapa bagian kecil, untuk memahami konsep ini silahkan ikuti tahapan – tahapan di bawah ini :
kita buat buat dulu layout template yang terdiri dari file :
- layout.blade.php (ini untuk layout utama template)
- sidebar.blade.php (ini untuk sidebar menu)
silahkan anda buat folder dengan nama folder template di direktori resources/views/ , dan buatkan 2 file di atas di dalam folder template seperti ini :
untuk kebutuhan layout utama, kita bisa buka file index.html dari template yang sudah di download, begini cara membaca template nya :
dari file index.html di atas kita copy semua script html nya dan paste kan di file layout.blade.php, lalu modifikasi script nya seperti ini :
<!DOCTYPE html>
<!-- language -->
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- csrf -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- title -->
<title>@yield('title','Index')</title>
<!-- favicon -->
<link rel="shortcut icon" href="{{ asset('') }}dist/assets/compiled/svg/favicon.svg" type="image/x-icon"/>
<link rel="stylesheet" href="{{ asset('') }}dist/assets/compiled/css/app.css" />
<link rel="stylesheet" href="{{ asset('') }}dist/assets/compiled/css/app-dark.css" />
<link rel="stylesheet" href="{{ asset('') }}dist/assets/compiled/css/iconly.css" />
<!-- untuk tempat sisipkan script css -->
@stack('costum-css')
</head>
<body>
<script src="{{ asset('') }}dist/assets/static/js/initTheme.js"></script>
<div id="app">
<!-- panggil file sidebar.blade.php di folder template -->
@include('template.sidebar')
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<!-- untuk tempat sisipkan isi konten bersifat dinamis -->
@yield('content')
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2023 © Mazer</p>
</div>
<div class="float-end">
<p>
Crafted with
<span class="text-danger"
><i class="bi bi-heart-fill icon-mid"></i
></span>
by <a href="https://saugi.me">Saugi</a>
</p>
</div>
</div>
</footer>
</div>
</div>
<script src="{{ asset('') }}dist/assets/static/js/components/dark.js"></script>
<script src="{{ asset('') }}dist/assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="{{ asset('') }}dist/assets/compiled/js/app.js"></script>
<!-- Need: Apexcharts -->
<script src="{{ asset('') }}dist/assets/extensions/apexcharts/apexcharts.min.js"></script>
<script src="{{ asset('') }}dist/assets/static/js/pages/dashboard.js"></script>
<!-- untuk tempat sisipkan script javascript -->
@stack('costum-script')
</body>
</html>file isi file sidebar.blade.php itu dari potongan script html yang utuh sebelumnya, dan modifikasi menjadi seperti ini :
<div id="sidebar">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="/"><img src="{{ asset('') }}dist/assets/compiled/svg/logo.svg" alt="Logo"/></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path>
<g transform="translate(-210 -1)">
<path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path>
<circle cx="220.5" cy="11.5" r="4"></circle>
<path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path>
</g>
</g>
</svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" style="cursor: pointer" />
<label class="form-check-label"></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<path
fill="currentColor"
d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"
></path>
</svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li class="sidebar-item active">
<a href="#" class="sidebar-link">
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-book-half"></i>
<span>Post</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="#" class="submenu-link">Tambah Post</a>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link" >Data Post</a>
</li>
</ul>
</li>
<li class="sidebar-title">Sistem</li>
<li class="sidebar-item">
<a href="#" class="sidebar-link">
<i class="bi bi-box-arrow-right"></i>
<span>Logout</span>
</a>
</li>
</ul>
</div>
</div>
</div>setelah kita membuat view layout template, sekarang kita buat view untuk halaman dashboard, buat di dalam folder dengan nama dashboard , dan nama filenya index.blade.php seperti ini :
isi kan file dashboard/index.blade.php dengan script di bawah ini, isi script ini kita copy dari contoh index.html sebelumnya:
@extends('template.layout') <!-- panggil file layout.blade.php di folder template -->
@section('title', 'Dashboard') <!-- replace nama title jika halaman ini dipanggil -->
@section('content') <!-- replace isi konten jika halaman ini dipanggil -->
<div class="page-heading">
<h3>Profile Statistics</h3>
</div>
<div class="page-content">
<section class="row">
<div class="col-12 col-lg-9">
<div class="row">
<div class="col-6 col-lg-3 col-md-6">
<div class="card">
<div class="card-body px-4 py-4-5">
<div class="row">
<div
class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start"
>
<div
class="stats-icon purple mb-2"
>
<i
class="iconly-boldShow"
></i>
</div>
</div>
<div
class="col-md-8 col-lg-12 col-xl-12 col-xxl-7"
>
<h6
class="text-muted font-semibold"
>
Profile Views
</h6>
<h6
class="font-extrabold mb-0"
>
112.000
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-3 col-md-6">
<div class="card">
<div class="card-body px-4 py-4-5">
<div class="row">
<div
class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start"
>
<div
class="stats-icon blue mb-2"
>
<i
class="iconly-boldProfile"
></i>
</div>
</div>
<div
class="col-md-8 col-lg-12 col-xl-12 col-xxl-7"
>
<h6
class="text-muted font-semibold"
>
Followers
</h6>
<h6
class="font-extrabold mb-0"
>
183.000
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-3 col-md-6">
<div class="card">
<div class="card-body px-4 py-4-5">
<div class="row">
<div
class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start"
>
<div
class="stats-icon green mb-2"
>
<i
class="iconly-boldAdd-User"
></i>
</div>
</div>
<div
class="col-md-8 col-lg-12 col-xl-12 col-xxl-7"
>
<h6
class="text-muted font-semibold"
>
Following
</h6>
<h6
class="font-extrabold mb-0"
>
80.000
</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-3 col-md-6">
<div class="card">
<div class="card-body px-4 py-4-5">
<div class="row">
<div
class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start"
>
<div
class="stats-icon red mb-2"
>
<i
class="iconly-boldBookmark"
></i>
</div>
</div>
<div
class="col-md-8 col-lg-12 col-xl-12 col-xxl-7"
>
<h6
class="text-muted font-semibold"
>
Saved Post
</h6>
<h6
class="font-extrabold mb-0"
>
112
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Profile Visit</h4>
</div>
<div class="card-body">
<div id="chart-profile-visit"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-xl-4">
<div class="card">
<div class="card-header">
<h4>Profile Visit</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-7">
<div
class="d-flex align-items-center"
>
<svg
class="bi text-primary"
width="32"
height="32"
fill="blue"
style="width: 10px"
>
<use
xlink:href="{{ asset('') }}dist/assets/static/images/bootstrap-icons.svg#circle-fill"
/>
</svg>
<h5 class="mb-0 ms-3">
Europe
</h5>
</div>
</div>
<div class="col-5">
<h5 class="mb-0 text-end">
862
</h5>
</div>
<div class="col-12">
<div
id="chart-europe"
></div>
</div>
</div>
<div class="row">
<div class="col-7">
<div
class="d-flex align-items-center"
>
<svg
class="bi text-success"
width="32"
height="32"
fill="blue"
style="width: 10px"
>
<use
xlink:href="{{ asset('') }}dist/assets/static/images/bootstrap-icons.svg#circle-fill"
/>
</svg>
<h5 class="mb-0 ms-3">
America
</h5>
</div>
</div>
<div class="col-5">
<h5 class="mb-0 text-end">
375
</h5>
</div>
<div class="col-12">
<div
id="chart-america"
></div>
</div>
</div>
<div class="row">
<div class="col-7">
<div
class="d-flex align-items-center"
>
<svg
class="bi text-danger"
width="32"
height="32"
fill="blue"
style="width: 10px"
>
<use
xlink:href="{{ asset('') }}dist/assets/static/images/bootstrap-icons.svg#circle-fill"
/>
</svg>
<h5 class="mb-0 ms-3">
Indonesia
</h5>
</div>
</div>
<div class="col-5">
<h5 class="mb-0 text-end">
1025
</h5>
</div>
<div class="col-12">
<div
id="chart-indonesia"
></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-8">
<div class="card">
<div class="card-header">
<h4>Latest Comments</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table
class="table table-hover table-lg"
>
<thead>
<tr>
<th>Name</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-3">
<div
class="d-flex align-items-center"
>
<div
class="avatar avatar-md"
>
<img
src="{{ asset('') }}dist/assets/compiled/jpg/5.jpg"
/>
</div>
<p
class="font-bold ms-3 mb-0"
>
Si
Cantik
</p>
</div>
</td>
<td
class="col-auto"
>
<p class="mb-0">
Congratulations
on your
graduation!
</p>
</td>
</tr>
<tr>
<td class="col-3">
<div
class="d-flex align-items-center"
>
<div
class="avatar avatar-md"
>
<img
src="{{ asset('') }}dist/assets/compiled/jpg/2.jpg"
/>
</div>
<p
class="font-bold ms-3 mb-0"
>
Si
Ganteng
</p>
</div>
</td>
<td
class="col-auto"
>
<p class="mb-0">
Wow amazing
design! Can
you make
another
tutorial for
this design?
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card">
<div class="card-body py-4 px-4">
<div class="d-flex align-items-center">
<div class="avatar avatar-xl">
<img
src="{{ asset('') }}dist/assets/compiled/jpg/1.jpg"
alt="Face 1"
/>
</div>
<div class="ms-3 name">
<h5 class="font-bold">John Duck</h5>
<h6 class="text-muted mb-0">
@johnducky
</h6>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Recent Messages</h4>
</div>
<div class="card-content pb-4">
<div
class="recent-message d-flex px-4 py-3"
>
<div class="avatar avatar-lg">
<img
src="{{ asset('') }}dist/assets/compiled/jpg/4.jpg"
/>
</div>
<div class="name ms-4">
<h5 class="mb-1">Hank Schrader</h5>
<h6 class="text-muted mb-0">
@johnducky
</h6>
</div>
</div>
<div
class="recent-message d-flex px-4 py-3"
>
<div class="avatar avatar-lg">
<img
src="{{ asset('') }}dist/assets/compiled/jpg/5.jpg"
/>
</div>
<div class="name ms-4">
<h5 class="mb-1">
Dean Winchester
</h5>
<h6 class="text-muted mb-0">
@imdean
</h6>
</div>
</div>
<div
class="recent-message d-flex px-4 py-3"
>
<div class="avatar avatar-lg">
<img
src="{{ asset('') }}dist/assets/compiled/jpg/1.jpg"
/>
</div>
<div class="name ms-4">
<h5 class="mb-1">John Dodol</h5>
<h6 class="text-muted mb-0">
@dodoljohn
</h6>
</div>
</div>
<div class="px-4">
<button
class="btn btn-block btn-xl btn-outline-primary font-bold mt-3"
>
Start Conversation
</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Visitors Profile</h4>
</div>
<div class="card-body">
<div id="chart-visitors-profile"></div>
</div>
</div>
</div>
</section>
</div>
@endsection <!-- penutup isi konten -->jika sudah, sekarang kita coba testing view kita apakah berjalan, buat route seperti di bawah ini, file route bisa anda temukan di folder routes/web.php :
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| 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('/', function () {
return view('dashboard.index');
});Jalankan Xampp dan Jalankan project laravel nya dengan perintah ini di terminal :
php artisan servebegini proses dan hasilnya :
buka browser dan masukan di URL browser chrome http://127.0.0.1:8000 sebagai berikut :
Selesai, selamat mencoba.
Artikel selanjutnya akan membahas Cara membuat fitur Login Logout di Laravel 8