Kita akan menggunakan template SB Admin 2 dengan framework bootstrap, silahkan downloah template pada link https:\/\/startbootstrap.com\/theme\/sb-admin-2 kemudian extrak, selanjutnya buat folder pada public project Laravel dengan nama sbadmin dan copy paste kan seluruh asset template sbadmin kedalam folder tersebut.<\/p>\n\n\n\n
\n
<!DOCTYPE html><\/p>\n\n\n\n
<html lang=”en”><\/p>\n\n\n\n
<head><\/p>\n\n\n\n
<meta charset=”utf-8″><\/p>\n\n\n\n
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”><\/p>\n\n\n\n
\u00a0 \u00a0 <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”><\/p>\n\n\n\n
<meta name=”description” content=””><\/p>\n\n\n\n
<meta name=”author” content=””><\/p>\n\n\n\n
<title>Sisfo – Login<\/title><\/p>\n\n\n\n
<!– Custom fonts for this template–><\/p>\n\n\n\n
<link href=”{{ asset(‘sbadmin\/vendor\/fontawesome<\/p>\n\n\n\n
free\/css\/all.min.css’) }}” rel=”stylesheet” type=”text\/css”><\/p>\n\n\n\n
<link<\/p>\n\n\n\n
\u00a0 \u00a0 \u00a0 \u00a0 href=”https:\/\/fonts.googleapis.com\/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i rel=”stylesheet”><\/p>\n\n\n\n
<!– Custom styles for this template–><\/p>\n\n\n\n
<link href=”{{ asset(‘sbadmin\/css\/sb-admin-2.min.css’) }}” rel=”stylesheet”><\/p>\n\n\n\n
<\/head><\/p>\n\n\n\n
<body class=”bg-gradient-primary”><\/p>\n\n\n\n
<div class=”container”><\/p>\n\n\n\n
<!– Outer Row –><\/p>\n\n\n\n
<div class=”row justify-content-center”><\/p>\n\n\n\n
<div class=”col-xl-6 col-lg-6 col-md-9″><\/p>\n\n\n\n
<div class=”card o-hidden border-0 shadow-lg my-5″><\/p>\n\n\n\n
<div class=”card-body p-0″><\/p>\n\n\n\n
<!– Nested Row within Card Body –><\/p>\n\n\n\n
<div class=”row”><\/p>\n\n\n\n
<!– <div class=”col-lg-6 “><\/div> –><\/p>\n\n\n\n
<div class=”col-lg-12 text-center”><\/p>\n\n\n\n
<div class=”p-5″><\/p>\n\n\n\n
<div class=”text-center”><\/p>\n\n\n\n
<h1 class=”h4 text-gray-900 mb4″>Halaman Login<\/h1><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<form class=”user” method=”POST” action=”{{ route(‘login’) }}”><\/p>\n\n\n\n
@csrf<\/p>\n\n\n\n
<div class=”form-group”><\/p>\n\n\n\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input id=”email” type=”email” class=”form-control form-control-user @error(’email’) is-invalid<\/p>\n\n\n\n
@enderror”<\/p>\n\n\n\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 name=”email” value=”{{ old(’email’) }}” required autocomplete=”email” autofocus \/><\/p>\n\n\n\n
@error(’email’)<\/p>\n\n\n\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=”invalid feedback” role=”alert”><\/p>\n\n\n\n
<strong>{{ $message }}<\/strong><\/p>\n\n\n\n
<\/span><\/p>\n\n\n\n
@enderror<\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<div class=”form-group”><\/p>\n\n\n\n
<input id=”password” type=”password”<\/p>\n\n\n\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 class=”form-control form-control-user @error(‘password’) is-invalid @enderror”<\/p>\n\n\n\n
name=”password” value=”{{ old(‘password’) }}” required \/><\/p>\n\n\n\n
@error(‘password’)<\/p>\n\n\n\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=”invalid feedback” role=”alert”><\/p>\n\n\n\n
<strong>{{ $message }}<\/strong><\/p>\n\n\n\n
<\/span><\/p>\n\n\n\n
@enderror<\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button type=”submit” class=”bt btn-primary btn-user btn-block”><\/p>\n\n\n\n
login<\/p>\n\n\n\n
<\/button><\/p>\n\n\n\n
<\/form><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<!– Bootstrap core JavaScript–><\/p>\n\n\n\n
<script src=”{{ asset(‘sbadmin\/vendor\/jquery\/jquery.min.js’) }}”><\/script><\/p>\n\n\n\n
<script src=”vendor\/bootstrap\/js\/bootstrap.bundle.min.js”><\/script><\/p>\n\n\n\n
<!– Core plugin JavaScript–><\/p>\n\n\n\n
\u00a0 \u00a0 <script src=”{{ asset(‘sbadmin\/vendor\/jquery easing\/jquery.easing.min.js’) }}”><\/script><\/p>\n\n\n\n
<!– Custom scripts for all pages–><\/p>\n\n\n\n
<script src=”{{ asset(‘sbadmin\/js\/sb-admin-2.min.js’) }}”><\/script><\/p>\n\n\n\n
<\/body><\/p>\n\n\n\n
<\/html><\/p>\n<\/div>\n\n\n\n
Dengan kode ini, tampilan halaman login akan berubah<\/p>\n\n\n\nLayout Global<\/strong><\/p>\n\n\n\nlayout ini akan digunakan sebagai layout utama aplikasi dan view-view lain akan mengambil resource disini, karena app.blade.php sudah digunakan untuk view login, maka kita perlu membuat layout baru. Buat file dengan nama main.blade.php pada folder view\/layouts.<\/p>\n\n\n\n
\n
<!DOCTYPE html><\/p>\n\n\n\n
<html lang=”en”><\/p>\n\n\n\n
<head><\/p>\n\n\n\n
<meta charset=”utf-8″><\/p>\n\n\n\n
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”><\/p>\n\n\n\n
\u00a0 \u00a0 <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”><\/p>\n\n\n\n
<meta name=”description” content=””><\/p>\n\n\n\n
<meta name=”author” content=””><\/p>\n\n\n\n
<title>Sisfo – @yield(‘judul’)<\/title><\/p>\n\n\n\n
<!– Custom fonts for this template–><\/p>\n\n\n\n
\u00a0 \u00a0 <link href=”{{ asset(‘sbadmin\/vendor\/fontawesomefree\/css\/all.min.css’) }}” rel=”stylesheet” type=”text\/css”><\/p>\n\n\n\n
\u00a0 \u00a0 <link href=”https:\/\/fonts.googleapis.com\/cssfamily=Nunito:200,200i,300,\u00a0300i,400,400i,600,600i,700,700i,800,800i,900,900i rel=”stylesheet”><\/p>\n\n\n\n
<!– Custom styles for this template–><\/p>\n\n\n\n
<link href=”{{ asset(‘sbadmin\/css\/sb-admin-2.min.css’) }}” rel=”stylesheet”><\/p>\n\n\n\n
<\/head><\/p>\n\n\n\n
<body id=”page-top”><\/p>\n\n\n\n
<!– Page Wrapper –><\/p>\n\n\n\n
<div id=”wrapper”><\/p>\n\n\n\n
<!– Sidebar –><\/p>\n\n\n\n
@include(‘layouts.sidebar’)<\/p>\n\n\n\n
<!– End of Sidebar –><\/p>\n\n\n\n
<!– Content Wrapper –><\/p>\n\n\n\n
<div id=”content-wrapper” class=”d-flex flex-column”><\/p>\n\n\n\n
<!– Main Content –><\/p>\n\n\n\n
<div id=”content”><\/p>\n\n\n\n
<!– Topbar –><\/p>\n\n\n\n
@include(‘layouts.topbar’)<\/p>\n\n\n\n
<!– End of Topbar –><\/p>\n\n\n\n
<!– Begin Page Content –><\/p>\n\n\n\n
<div class=”container-fluid”><\/p>\n\n\n\n
<!– Page Heading –><\/p>\n\n\n\n
<h1 class=”h3 mb-4 text-gray-800″>@yield(‘judul’)<\/h1><\/p>\n\n\n\n
@yield(‘konten’)<\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<!– \/.container-fluid –><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<!– End of Main Content –><\/p>\n\n\n\n
<!– Footer –><\/p>\n\n\n\n
<footer class=”sticky-footer bg-white”><\/p>\n\n\n\n
<div class=”container my-auto”><\/p>\n\n\n\n
<div class=”copyright text-center my-auto”><\/p>\n\n\n\n
<span>Copyright © Sisfo<\/span><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/footer><\/p>\n\n\n\n
<!– End of Footer –><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<!– End of Content Wrapper –><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<!– End of Page Wrapper –><\/p>\n\n\n\n
<!– Scroll to Top Button–><\/p>\n\n\n\n
<a class=”scroll-to-top rounded” href=”#page-top”><\/p>\n\n\n\n
<i class=”fas fa-angle-up”><\/i><\/p>\n\n\n\n
<\/a><\/p>\n\n\n\n
<!– Logout Modal–><\/p>\n\n\n\n
<div class=”modal fade” id=”logoutModal” tabindex=”-1″ role=”dialog” aria-labelledby=”exampleModalLabel”<\/p>\n\n\n\n
aria-hidden=”true”><\/p>\n\n\n\n
<div class=”modal-dialog” role=”document”><\/p>\n\n\n\n
<div class=”modal-content”><\/p>\n\n\n\n
<div class=”modal-header”><\/p>\n\n\n\n
<h5 class=”modal-title” id=”exampleModalLabel”>Yakin<\/p>\n\n\n\n
akan keluar aplikasi ?<\/h5><\/p>\n\n\n\n
<button class=”close” type=”button” data dismiss=”modal” aria-label=”Close”><\/p>\n\n\n\n
<span aria-hidden=”true”>\u00d7<\/span><\/p>\n\n\n\n
<\/button><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<div class=”modal-body”>Silahkan klik tombol logout untuk<\/p>\n\n\n\n
keluar aplikasi<\/div><\/p>\n\n\n\n
<div class=”modal-footer”><\/p>\n\n\n\n
<button class=”btn btn-secondary” type=”button” data dismiss=”modal”>Cancel<\/button><\/p>\n\n\n\n
<form action=”{{ route(‘logout’) }}” method=”POST”><\/p>\n\n\n\n
@csrf<\/p>\n\n\n\n
<button class=”btn btn-primary” style=”cursor:pointer”>Logout<\/button><\/p>\n\n\n\n
<\/form><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<!– Bootstrap core JavaScript–><\/p>\n\n\n\n
<script src=”{{ asset(‘sbadmin\/vendor\/jquery\/jquery.min.js’) }}”><\/script><\/p>\n\n\n\n
<script src=”{{ asset(‘sbadmin\/vendor\/bootstrap\/js\/bootstrap.bundle.min.js’) }}”><\/p>\n\n\n\n
< \/s<\/p>\n\n\n\n
cript ><\/p>\n\n\n\n
<<\/p>\n\n\n\n
!–Core plugin JavaScript– ><\/p>\n\n\n\n
<<\/p>\n\n\n\n
script src = “{{ asset(‘sbadmin\/vendor\/jquery easing\/jquery.easing.min.js’) }}” ><\/p>\n\n\n\n
<\/script><\/p>\n\n\n\n
<!– Custom scripts for all pages–><\/p>\n\n\n\n
<script src=”{{ asset(‘sbadmin\/js\/sb-admin-2.min.js’) }}”><\/script><\/p>\n\n\n\n
<\/body><\/p>\n\n\n\n
<\/html><\/p>\n<\/div>\n\n\n\n
Pada layouts main.blade.php diatas layout ini akan memanggil view sidebar.blade.php dan view topbar.blade.php kedalam layout main.blade.php dengan menggunakan perintah @include sehingga tampilan kedua view tersebut akan tampil pada layout main. Selanjutnya juga akan menampilkan data judul dan konten dari view yang akan menggunakan layouts main.blade.php dengan perintah @yeild(\u2018judul\u2019) dan @yeild(\u2018konten).<\/p>\n\n\n\n
Sidebar<\/strong><\/p>\n\n\n\n <\/strong>Buat file sidebar.blade.php pada folder layouts.<\/p>\n\n\n\nTopbar<\/strong><\/p>\n\n\n\nBuat juga file topbar.blade.php di folder yang sama.<\/p>\n\n\n\nPenggunaan Layouts main.blade.php<\/strong><\/p>\n\n\n\nUntuk menggunakan layouts main, gunakan @extends(\u2018layouts.main\u2019) sehingga seluruh tampilan main.blade.php akan ditampilkan pada view home, untuk menampilkan data judul pada layout main dengan perintah @section(\u2018judul\u2019)Dashboard @endsection dan konten dengan cara @section(\u2018judul\u2019)Dashboard @endsection<\/p>\n\n\n\n
Caranya masuk ke home.blade.php<\/a> dan isikan:<\/p>\n\n\n\n\n
@extends(‘layouts.main’)<\/p>\n\n\n\n
@section(“judul”) Dasboard @endsection<\/p>\n\n\n\n
@section(‘konten’)<\/p>\n\n\n\n
<P>dashboard<\/P><\/p>\n\n\n\n
@endsection<\/p>\n<\/div>\n\n\n\n
Jika konfigurasi berhasil, maka tampilannya akan berubah menjadi:<\/p>\n\n\n\nLaporan Praktikum 8 Pemrograman Web Untuk membuat project baru, kita dapat menggunakan composer dengan mengetikkan perintah pada cmder:composer create-project laravel\/laravel=^12.0 […]<\/p>\n","protected":false},"author":1,"featured_media":125,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-107","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":1,"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"predecessor-version":[{"id":126,"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/107\/revisions\/126"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/media\/125"}],"wp:attachment":[{"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dila.infokand23.my.id\/blog\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-1.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-2.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-3.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-4.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-5.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-7.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-6.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-9.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-11.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-8.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-10.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-12.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-13.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-14.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/dila.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/06\/image-15.jpg\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"