Intro
Terkadang dalam mendevelop web kita dapat menggunakan beberapa bahan yang sudah siap dan dapat kita gunakan untuk mempermudah pekerjaan kita. Termasuk salah satu nya adalah theme atau template terkait dengan UI atau tampilan dari Web yang akan kita buat
Persiapan
Kita akan menggunakan salah satu theme atau template yang dapat kita gunakan dalam proses pembelajaran kali ini, yaitu SB Admin 2. Memiliki MIT License yang artinya dapat kita gunakan untuk proses pembelajaran kali ini dengan credits terhadap pembuat / pemiliknya.
Saat artikel ini dibuat, versi free yang tersedia adalah v4.1.4 dan menggunakan bootstrap v4.6.0 Link Terkait:
Struktur Folder
Silahkan download SB Admin 2 tadi, kemudian extract dan letakan isinya di folder ../public/sb-admin-2 dan kurang lebih akan menjadi seperti ini:
Slicing Theme
Tahapan kali ini kita coba menggunakan theme ini khususnya menggunakan blank.html sebagai dasar kita membuat halaman dashboard dan tentunya dengan berbagai penyesuaian Directive Laravel yang kita gunakan kali ini adalah
- @yield
- @auth - @endauth
- @stack
- @csrf
Helper Laravel yang kita gunakan kali ini adalah
- csrf_token()
- asset()
- route()
Layout - Dashboard
Langsung saja silahkan buat dan modifikasi layout baru untuk keperluan layout utama dashboard
resources/views/layouts/dashboard.blade.php
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Custom fonts for this template--> <link href="{{ asset('sb-admin-2/vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <!-- Custom styles for this template--> <link href="{{ asset('sb-admin-2/css/sb-admin-2.min.css') }}" rel="stylesheet"> <!-- Additional Styles --> @stack('styles')</head><body id="page-top"> <!-- Page Wrapper --> <div id="wrapper"> <!-- Sidebar --> <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar"> <!-- Sidebar - Brand --> <a class="sidebar-brand d-flex align-items-center justify-content-center" href="{{ route('home') }}"> <div class="sidebar-brand-text mx-3">Belajar</div> </a> <!-- Divider --> <hr class="sidebar-divider my-0"> <!-- Nav Item - Dashboard --> <li class="nav-item"> <a class="nav-link" href="{{ route('home') }}"> <i class="fas fa-fw fa-home"></i> <span>Home</span></a> </li> <!-- Divider --> <hr class="sidebar-divider"> <!-- Heading --> <div class="sidebar-heading"> CRUD </div> <!-- Nav Item - Pages Collapse Menu --> <li class="nav-item"> <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> <i class="fas fa-fw fa-cog"></i> <span>Master</span> </a> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar"> <div class="bg-white py-2 collapse-inner rounded"> <h6 class="collapse-header">Data Master:</h6> <a class="collapse-item" href="buttons.html">Buku</a> <a class="collapse-item" href="cards.html">Penerbit</a> </div> </div> </li> <!-- Divider --> <hr class="sidebar-divider"> <!-- Heading --> <div class="sidebar-heading"> Lainnya </div> <!-- Nav Item - Charts --> <li class="nav-item"> <a class="nav-link" href="charts.html"> <i class="fas fa-fw fa-info"></i> <span>About</span></a> </li> <!-- Divider --> <hr class="sidebar-divider d-none d-md-block"> <!-- Sidebar Toggler (Sidebar) --> <div class="text-center d-none d-md-inline"> <button class="rounded-circle border-0" id="sidebarToggle"></button> </div> </ul> <!-- End of Sidebar --> <!-- Content Wrapper --> <div id="content-wrapper" class="d-flex flex-column"> <!-- Main Content --> <div id="content"> <!-- Topbar --> <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow"> <!-- Sidebar Toggle (Topbar) --> <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3"> <i class="fa fa-bars"></i> </button> <!-- Topbar Navbar --> <ul class="navbar-nav ml-auto"> <!-- Nav Item - User Information --> <li class="nav-item dropdown no-arrow"> <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="mr-2 d-none d-lg-inline text-gray-600 small"> {{ Auth::user()->name }} </span> <img class="img-profile rounded-circle" src="{{ asset('sb-admin-2/img/undraw_profile.svg') }}"> </a> <!-- Dropdown - User Information --> <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown"> <a class="dropdown-item" href="#"> <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i> Profile </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal"> <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Logout </a> </div> </li> </ul> </nav> <!-- End of Topbar --> <!-- Begin Page Content --> <div class="container-fluid"> <!-- Page Heading --> @yield('judul') <!-- Page Content --> @yield('konten') </div> <!-- /.container-fluid --> </div> <!-- End of Main Content --> <!-- Footer --> <footer class="sticky-footer bg-white"> <div class="container my-auto"> <div class="copyright text-center my-auto"> <span>Copyright © Renaldi Y 2022</span> </div> </div> </footer> <!-- End of Footer --> </div> <!-- End of Content Wrapper --> </div> <!-- End of Page Wrapper --> <!-- Scroll to Top Button--> <a class="scroll-to-top rounded" href="#page-top"> <i class="fas fa-angle-up"></i> </a> <!-- Logout Modal--> <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5> <button class="close" type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div> <div class="modal-footer"> <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button> <a class="btn btn-primary" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" > Logout </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none"> @csrf </form> </div> </div> </div> </div> <!-- Bootstrap core JavaScript--> <script src="{{ asset('sb-admin-2/vendor/jquery/jquery.min.js') }}"></script> <script src="{{ asset('sb-admin-2/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script> <!-- Core plugin JavaScript--> <script src="{{ asset('sb-admin-2/vendor/jquery-easing/jquery.easing.min.js') }}"></script> <!-- Custom scripts for all pages--> <script src="{{ asset('sb-admin-2/js/sb-admin-2.min.js') }}"></script> <!-- Additional Scripts --> @stack('scripts')</body></html>Page - Home
Selanjutnya kita akan memodifikasi page atau child page home yang akan meng-extends layout yang telah kita buat tadi
resources/views/home.blade.php
@extends('layouts.dashboard')@section('judul') <h1 class="h3 mb-4 text-gray-800">Home</h1>@endsection@section('konten')<div class="card shadow mb-4"> <div class="card-header py-3"> <h6 class="m-0 font-weight-bold text-primary">Dashboard</h6> </div> <div class="card-body"> @if (session('status')) <div class="alert alert-success" role="alert"> {{ session('status') }} </div> @endif Anda Berhasil Login ! </div></div>@endsectionKurang lebih tampilannya akan seperti ini:
Active Route
Kita bisa menggunakan helper request() untuk melakukan pengecekan route / path yang sedang diakses saat ini.
resources/views/layouts/dashboard.blade.php
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Custom fonts for this template--> <link href="{{ asset('sb-admin-2/vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <!-- Custom styles for this template--> <link href="{{ asset('sb-admin-2/css/sb-admin-2.min.css') }}" rel="stylesheet"></head><body id="page-top"> <!-- Page Wrapper --> <div id="wrapper"> <!-- Sidebar --> <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar"> <!-- Sidebar - Brand --> <a class="sidebar-brand d-flex align-items-center justify-content-center" href="{{ route('home') }}"> <div class="sidebar-brand-text mx-3">Belajar</div> </a> <!-- Divider --> <hr class="sidebar-divider my-0"> <!-- Nav Item - Dashboard --> <li class="nav-item {{ (request()->is('home')) ? 'active' : '' }}"> <a class="nav-link" href="{{ route('home') }}"> <i class="fas fa-fw fa-home"></i> <span>Home</span></a> </li> <!-- Divider --> <hr class="sidebar-divider"> <!-- Heading --> <div class="sidebar-heading"> CRUD </div> <!-- Nav Item - Pages Collapse Menu --> <li class="nav-item {{ (request()->is('master/*')) ? 'active' : '' }}"> <a class="nav-link {{ (request()->is('master/*')) ? '' : 'collapsed' }} " href="#" data-toggle="collapse" data-target="#collapsePagesMaster" aria-expanded="{{ (request()->is('master/*')) ? 'true' : 'false' }}" aria-controls="collapsePagesMaster"> <i class="fas fa-fw fa-cog"></i> <span>Master</span> </a> <div id="collapsePagesMaster" class="collapse nav-item {{ (request()->is('master/*')) ? 'show' : '' }}" aria-labelledby="headingTwo" data-parent="#accordionSidebar"> <div class="bg-white py-2 collapse-inner rounded"> <h6 class="collapse-header">Data Master:</h6> <a class="collapse-item {{ (request()->is('master/buku*')) ? 'active' : '' }}" href="{{ route('get.buku') }}">Buku</a> <a class="collapse-item {{ (request()->is('master/penerbit*')) ? 'active' : '' }}" href="{{ route('get.penerbit') }}">Penerbit</a> </div> </div> </li> <!-- Divider --> <hr class="sidebar-divider"> <!-- Heading --> <div class="sidebar-heading"> Lainnya </div> <!-- Nav Item - Charts --> <li class="nav-item {{ (request()->is('about')) ? 'active' : '' }}"> <a class="nav-link" href="charts.html"> <i class="fas fa-fw fa-info"></i> <span>About</span></a> </li> <!-- Divider --> <hr class="sidebar-divider d-none d-md-block"> <!-- Sidebar Toggler (Sidebar) --> <div class="text-center d-none d-md-inline"> <button class="rounded-circle border-0" id="sidebarToggle"></button> </div> </ul> <!-- End of Sidebar --> <!-- Content Wrapper --> <div id="content-wrapper" class="d-flex flex-column"> <!-- Main Content --> <div id="content"> <!-- Topbar --> <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow"> <!-- Sidebar Toggle (Topbar) --> <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3"> <i class="fa fa-bars"></i> </button> <!-- Topbar Navbar --> <ul class="navbar-nav ml-auto"> <!-- Nav Item - User Information --> <li class="nav-item dropdown no-arrow"> <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="mr-2 d-none d-lg-inline text-gray-600 small"> {{ Auth::user()->name }} </span> <img class="img-profile rounded-circle" src="{{ asset('sb-admin-2/img/undraw_profile.svg') }}"> </a> <!-- Dropdown - User Information --> <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown"> <a class="dropdown-item" href="#"> <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i> Profile </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal"> <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Logout </a> </div> </li> </ul> </nav> <!-- End of Topbar --> <!-- Begin Page Content --> <div class="container-fluid"> <!-- Page Heading --> @yield('judul') <!-- Page Content --> @yield('konten') </div> <!-- /.container-fluid --> </div> <!-- End of Main Content --> <!-- Footer --> <footer class="sticky-footer bg-white"> <div class="container my-auto"> <div class="copyright text-center my-auto"> <span>Copyright © Renaldi Y 2022</span> </div> </div> </footer> <!-- End of Footer --> </div> <!-- End of Content Wrapper --> </div> <!-- End of Page Wrapper --> <!-- Scroll to Top Button--> <a class="scroll-to-top rounded" href="#page-top"> <i class="fas fa-angle-up"></i> </a> <!-- Logout Modal--> <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5> <button class="close" type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div> <div class="modal-footer"> <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button> <a class="btn btn-primary" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" > Logout </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none"> @csrf </form> </div> </div> </div> </div> <!-- Bootstrap core JavaScript--> <script src="{{ asset('sb-admin-2/vendor/jquery/jquery.min.js') }}"></script> <script src="{{ asset('sb-admin-2/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script> <!-- Core plugin JavaScript--> <script src="{{ asset('sb-admin-2/vendor/jquery-easing/jquery.easing.min.js') }}"></script> <!-- Custom scripts for all pages--> <script src="{{ asset('sb-admin-2/js/sb-admin-2.min.js') }}"></script> <!-- Additional Scripts --> @stack('scripts')</body></html>