Belajar Laravel Part 1 : Membuat Web Aplikasi Layanan Pengaduan Pasien #05 Menerapkan Template Admin
Yuliance Ardies Ferry w.Yehohanan
16 September 2025
Menerapkan Template Admin (Artikel Eksklusif Part 1)
Membuat Aplikasi Layanan Pengaduan Pasien Berbasis Web
Aplikasi Layanan Pengaduan Pasien Berbasis Web hadir sebagai solusi digital dalam meningkatkan kualitas layanan kesehatan, khususnya dalam hal penanganan keluhan pasien. Melalui sistem ini, pasien dapat dengan mudah menyampaikan pengaduan secara online tanpa harus datang langsung ke fasilitas kesehatan. Aplikasi ini dilengkapi dengan berbagai fitur sehingga mempermudah proses pemantauan dan penyelesaian setiap keluhan yang masuk secara efisien dan transparan.
Pada artikel kali ini, kita akan membahas yang perlu disiapkan sebelum membangun Aplikasi Layanan Pengaduan Pasien Berbasis Web. Langkah yang akan kita lakukan selanjutnya yaitu Menerapkan Template Admin yang tampilan Web semakin keren.
Langkah – Langkah :
1. Download dan Ekstrak Template Admin
Pertama-tama silahkan unduh template admin dari link yang sudah disediakan.
Link :https://www.mediafire.com/file/ixc27d46wcvd8m1/Modernize.zip/file
Setelah itu, ekstrak file .zip-nya seperti pada gambar :
2. Pilih Template yang Akan Digunakan
Lanjut,masuk ke folder hasil ekstrak tadi, pilih salah satu template yang ingin digunakan.
Dalam artikel ini kita memakai template “modernize warna biru”.
3. Pindahkan Folder Template ke Public Laravel
Setelah itu Copy atau cut (potong) folder template yang dipilih tadi, lalu paste ke projek kalian di bagian public, "laragon\www\nama_projek\public":
Kode :
laragon\www\nama_projek\public
seperti di gambar : laragon\www\aplikasi-layanan-pengaduan-pasien\public
Setelah itu, rename nama foldernya jadi template-admin
4. Buat Struktur Folder View di Laravel
Selanjutnya,masuk ke folder resources\views
Buat folder baru dengan struktur seperti admin\layouts. Folder ini akan menyimpan file Blade dari komponen template
Seperti gambar di bawah ini:
5. Buat File Blade untuk Layout
Di dalam views admin/layouts yang telah dibuat tadi,kita buat 3 file baru yaitu “app,header,dan sidebar” (bisa disesuaikan dgn projek kalian utk penamaanya)
Contohnya seperti gambar di bawah ini :
6. Salin Isi HTML dari Template
Selanjutnya,masuk ke folder public\template-admin\src\html\Pilih file index.html atau sample-page.html dan salin selruh isi htmlnya.
Contohnya seperti gambar dibawah ini :
7. Paste HTML ke Blade Laravel
Setelah disalin semua tadi isi index/sample-pagenya.Buka file resources\views\admin\layouts\app.blade.php nya dan paste hasil Salinan
Copyan isi dari index/sample-pagenya,seperti gambar dibawah ini:
Kode :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modernize Free</title>
<link rel="shortcut icon" type="image/png" href="{{ asset('template-admin/src/assets/images/logos/favicon.png') }}" />
<link rel="stylesheet" href="{{ asset('template-admin/src/assets/css/styles.min.css') }}" />
</head>
<body>
<!-- Body Wrapper -->
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
data-sidebar-position="fixed" data-header-position="fixed">
<!-- Sidebar Start -->
<aside class="left-sidebar">
<!-- Sidebar scroll-->
<div>
<div class="brand-logo d-flex align-items-center justify-content-between">
<a href="{{ asset('template-admin/src/html/index.html') }}" class="text-nowrap logo-img">
<img src="{{ asset('template-admin/src/assets/images/logos/dark-logo.svg') }}" width="180"
alt="" />
</a>
<div class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" id="sidebarCollapse">
<i class="ti ti-x fs-8"></i>
</div>
</div>
<!-- Sidebar navigation-->
<nav class="sidebar-nav scroll-sidebar" data-simplebar="">
<ul id="sidebarnav">
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Home</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/index.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-layout-dashboard"></i>
</span>
<span class="hide-menu">Dashboard</span>
</a>
</li>
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">UI COMPONENTS</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/ui-buttons.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-article"></i>
</span>
<span class="hide-menu">Buttons</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/ui-alerts.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-alert-circle"></i>
</span>
<span class="hide-menu">Alerts</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/ui-card.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-cards"></i>
</span>
<span class="hide-menu">Card</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/ui-forms.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-file-description"></i>
</span>
<span class="hide-menu">Forms</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/ui-typography.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-typography"></i>
</span>
<span class="hide-menu">Typography</span>
</a>
</li>
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">AUTH</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link"
href="{{ asset('template-admin/src/html/authentication-login.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-login"></i>
</span>
<span class="hide-menu">Login</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link"
href="{{ asset('template-admin/src/html/authentication-register.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-user-plus"></i>
</span>
<span class="hide-menu">Register</span>
</a>
</li>
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">EXTRA</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/icon-tabler.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-mood-happy"></i>
</span>
<span class="hide-menu">Icons</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/sample-page.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-aperture"></i>
</span>
<span class="hide-menu">Sample Page</span>
</a>
</li>
</ul>
<div class="unlimited-access hide-menu bg-light-primary position-relative mb-7 mt-5 rounded">
<div class="d-flex">
<div class="unlimited-access-title me-3">
<h6 class="fw-semibold fs-4 mb-6 text-dark w-85">Upgrade to pro</h6>
<a href="https://adminmart.com/product/modernize-bootstrap-5-admin-template/"
target="_blank" class="btn btn-primary fs-2 fw-semibold lh-sm">Buy Pro</a>
</div>
<div class="unlimited-access-img">
<img src="{{ asset('template-admin/src/assets/images/backgrounds/rocket.png') }}"
alt="" class="img-fluid">
</div>
</div>
</div>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<!-- Sidebar End -->
<!-- Main wrapper -->
<div class="body-wrapper">
<!-- Header Start -->
<header class="app-header">
<nav class="navbar navbar-expand-lg navbar-light">
<ul class="navbar-nav">
<li class="nav-item d-block d-xl-none">
<a class="nav-link sidebartoggler nav-icon-hover" id="headerCollapse"
href="javascript:void(0)">
<i class="ti ti-menu-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-icon-hover" href="javascript:void(0)">
<i class="ti ti-bell-ringing"></i>
<div class="notification bg-primary rounded-circle"></div>
</a>
</li>
</ul>
<div class="navbar-collapse justify-content-end px-0" id="navbarNav">
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-end">
<a href="https://adminmart.com/product/modernize-free-bootstrap-admin-dashboard/"
target="_blank" class="btn btn-primary">Download Free</a>
<li class="nav-item dropdown">
<a class="nav-link nav-icon-hover" href="javascript:void(0)" id="drop2"
data-bs-toggle="dropdown" aria-expanded="false">
<img src="{{ asset('template-admin/src/assets/images/profile/user-1.jpg') }}"
alt="" width="35" height="35" class="rounded-circle">
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up"
aria-labelledby="drop2">
<div class="message-body">
<a href="javascript:void(0)"
class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-user fs-6"></i>
<p class="mb-0 fs-3">My Profile</p>
</a>
<a href="javascript:void(0)"
class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-mail fs-6"></i>
<p class="mb-0 fs-3">My Account</p>
</a>
<a href="javascript:void(0)"
class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-list-check fs-6"></i>
<p class="mb-0 fs-3">My Task</p>
</a>
<a href="{{ asset('template-admin/src/html/authentication-login.html') }}"
class="btn btn-outline-primary mx-3 mt-2 d-block">Logout</a>
</div>
</div>
</li>
</ul>
</div>
</nav>
</header>
<!-- Header End -->
<div class="container-fluid">
<div class="card">
<div class="card-body">
<h5 class="card-title fw-semibold mb-4">Sample Page</h5>
<p class="mb-0">This is a sample page </p>
</div>
</div>
</div>
</div>
</div>
<script src="{{ asset('template-admin/src/assets/libs/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ asset('template-admin/src/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('template-admin/src/assets/js/sidebarmenu.js') }}"></script>
<script src="{{ asset('template-admin/src/assets/js/app.min.js') }}"></script>
<script src="{{ asset('template-admin/src/assets/libs/simplebar/dist/simplebar.js') }}"></script>
</body>
</html>
8. Sesuaikan Aset dan Gambar dengan Laravel
Kemudian kita fokus di bagian pemanggilan file/gambar/asset di file CSS, JS, gambar, dll yang sebelumnya seperti <link href="assets/css/style.css"> Ganti “{{ asset(‘template-admin/...’) }}” salah satu contohnya bisa lihat gambar sebelum dan dan sesudahnya.
Sebelum diganti:
Sesudah diganti :
Kode :
<link href="{{ asset('template-admin/src/assets/css/style.css') }}">
Lakukan hal yang sama untuk semua resource pemanggilan dan sebagainnya.
9. Ubah Route Awal Laravel ke Template
Jika sudah diganti semua tadi,kalian buka file di bagian routes/web.php.Lalu ubah route default Laravel “return view(‘welcome’)” menjadi “return view(‘admin.layouts.app’) jadi agar menampilkan tampilan dari view app.
Seperti gambar di bawah ini contoh default dan setelah diganti:
Sebelum diganti:
Kode :
Route::get('/', function () {
return view('welcome');
});
Setelah diganti:
Kode :
Route::get('/', function () {
return view('admin.layouts.content');
});
Jalankan Proyek Laravel
Setelah itu jalankan projeknya seperti biasa,buka Laragon,klik start dan buka browser ke localhost/nama_projek.
Seperti gambar dibawah:
Setelah itu,jika tidak error hasilnya dari template modernize biru(template-admin)yang kita gunakan tadi
seperti gambar dibawah ini:
Jika error/tidak muncul template yang tidak sesuai
Jika punya kalian tidak muncul seperti gambar template di atas,berarti ada component/error yang kalian alami saat pembuatan.
Coba bandingkan dengan index/sample-page template html sebelumnya.Coba buka file explorer kalian ke “C:\laragon\www\apk-lpp\public\template-admin\src\html” buka index/sample-page yang kalian pilih tadi dan jalankan filenya dengan klik 2x,seperti gambar dibawah ini:
Jika sudah terbuka kedua halamannya(html dan projek kalian tadi) inspect halaman webnya lalu cek/bandingkan scriptnya apa ada yang error/kurang dan sebagainya.Dengan klik kanan halamannya dan pilih inspect,seperti gambar dibawah ini:
10. Pisahkan Komponen (Sidebar, Header,danlain-lainnya)
Jika sudah tampil/benar templatenya,Silahkan buka file app.blade.php tadi,lalu cari bagian sidebar, lalu
Bisa lihat digambar untuk contoh/petunjuk visualnya:
11. Include Sidebar & Header ke App.blade.php
Setelah itu kembali ke app.blade.php, dan ganti bagian yang tadi di-cut dengan “@include(‘admin.layouts.sidebar’)”.@include ini sama seperti fungsi include yang ada di php native yaitu untuk menambahkan componen di file lain ke halaman tersebut.
Untuk lebih jelasnya,bisa lihat gambar dibawah ini:
Kode :
@include('admin.layouts.sidebar')
Lakukan hal yang sama untuk bagian header/navbar,tutup induk code lalu copy/cut,pindahkan ke header.blade.php, lalu gunakan Ganti dengan kode dibawah ini(seperti sidebar):
Kode :
@include('admin.layouts.header')
12. Ganti Bagian Konten pada template dengan @yield('content')
Sekarang cari bagian utama kontennya(content section dengan class container-fluid seperti pada gambar dibawah).Tutup tag utama/induknya, lalu cut bagiannya(sebagai cadangan atau back up) :
dan ganti code tersebut di app.blade.php dengan “@yield(‘content’)” seperti dibawah ini:
Kode :
@yield('content')
13. Buat File Konten dengan @extends dan @section
Sekarang Buat file baru, misalnya di resources\views\admin\content.blade.php dan bauat @section & @endsection,didalam paste script content yang habis di cut/copy tadi.Kasih @extends diatasnya untuk menyatakan bahwa file view ini menggunakan layout tertentu sebagai induk.
Seperti gambar di bawah ini :
Kode :
@extends('admin.layouts.app')
@section('content')
<!-- Paste bagian konten utama yang sudah disalin/dipotong sebelumnya di sini -->
@endsection
14. Update Route untuk Menampilkan Konten Utama
Nah,selanjutnya kita akan membuka dibagian "routes\web" Ganti return view(‘admin.layouts.app’); menjadi return view('admin.layouts.content');
seperti di gambar ini :
Kode :
Route::get('/', function () {
return view('admin.layouts.content');
});
15. Error Saat Menjalankan Projek
Setelah sudah kalian Ganti routenya di view,coba kalian jalankan Kembali lewat laragon seperti tadi,dan cek apakah ada error atau tidak.Jika ada error kalian lihat errornya kenapa tulisannya atau bisa kalian cek lewat inspect seperti cara sebelumnya mungkin ada yang salah penulisan,typo,atau pemanggilan yang belum semua di Ganti {{asset()}}.Untuk lebih jelasnya ada contoh yang bisa kalian lihat gambar dibawah ini(salah penulisan),kalian bisa inspect dan mencari tahu bagian manannya yang error dan lihat tulisan errornya kenapa.
Contoh dibawah ini adalah error yang menampilkan petunjukknya seperti di bawah “View admin.layout.header not found di alamat letaknya…” .Kalian bisa langsung ke letak baris code di Alamat yang telah diberitahukan dan menggantinya dengan “layouts” karena bukan “layout”.
Nah,kalau tidak ada petunjuk errornya dimana,kalain bisa inspect halamannya seperti tadi
kalian bisa lihat gambar di bawah ini:
Gambar diatas ternyata error kurang “{“ saat menggati pemanggilan ((asset()}} tadi di scriptnya👍
16. Jalankan Ulang dan Tes
Setelah tidak ada error/masalah lagi,Jalankan Laravel kamu seperti biasa menggunakan laragon, lalu cek hasilnya. Jika tidak ada error, maka template sudah berhasil terintegrasi ke Laravel dengan struktur Blade yang rapih👍.
Berikut script template app sebelum pemetaan component dan integrasi Laravel
Sebelum(sample-page.html):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modernize Free</title>
<link rel="shortcut icon" type="image/png" href="../assets/images/logos/favicon.png" />
<link rel="stylesheet" href="../assets/css/styles.min.css" />
</head>
<body>
<!-- Body Wrapper -->
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
data-sidebar-position="fixed" data-header-position="fixed">
<!-- Sidebar Start -->
<aside class="left-sidebar">
<!-- Sidebar scroll-->
<div>
<div class="brand-logo d-flex align-items-center justify-content-between">
<a href="./index.html" class="text-nowrap logo-img">
<img src="../assets/images/logos/dark-logo.svg" width="180" alt="" />
</a>
<div class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" id="sidebarCollapse">
<i class="ti ti-x fs-8"></i>
</div>
</div>
<!-- Sidebar navigation-->
<nav class="sidebar-nav scroll-sidebar" data-simplebar="">
<ul id="sidebarnav">
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Home</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="./index.html" aria-expanded="false">
<span>
<i class="ti ti-layout-dashboard"></i>
</span>
<span class="hide-menu">Dashboard</span>
</a>
</li>
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">UI COMPONENTS</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="./ui-buttons.html" aria-expanded="false">
<span>
<i class="ti ti-article"></i>
</span>
<span class="hide-menu">Buttons</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="./ui-alerts.html" aria-expanded="false">
<span>
<i class="ti ti-alert-circle"></i>
</span>
<span class="hide-menu">Alerts</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="./ui-card.html" aria-expanded="false">
<span>
<i class="ti ti-cards"></i>
</span>
<span class="hide-menu">Card</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="./ui-forms.html" aria-expanded="false">
<span>
<i class="ti ti-file-description"></i>
</span>
<span class="hide-menu">Forms</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="./ui-typography.html" aria-expanded="false">
<span>
<i class="ti ti-typography"></i>
</span>
<span class="hide-menu">Typography</span>
</a>
</li>
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">AUTH</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="./authentication-login.html" aria-expanded="false">
<span>
<i class="ti ti-login"></i>
</span>
<span class="hide-menu">Login</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="./authentication-register.html" aria-expanded="false">
<span>
<i class="ti ti-user-plus"></i>
</span>
<span class="hide-menu">Register</span>
</a>
</li>
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">EXTRA</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="./icon-tabler.html" aria-expanded="false">
<span>
<i class="ti ti-mood-happy"></i>
</span>
<span class="hide-menu">Icons</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="./sample-page.html" aria-expanded="false">
<span>
<i class="ti ti-aperture"></i>
</span>
<span class="hide-menu">Sample Page</span>
</a>
</li>
</ul>
<div class="unlimited-access hide-menu bg-light-primary position-relative mb-7 mt-5 rounded">
<div class="d-flex">
<div class="unlimited-access-title me-3">
<h6 class="fw-semibold fs-4 mb-6 text-dark w-85">Upgrade to pro</h6>
<a href="https://adminmart.com/product/modernize-bootstrap-5-admin-template/" target="_blank" class="btn btn-primary fs-2 fw-semibold lh-sm">Buy Pro</a>
</div>
<div class="unlimited-access-img">
<img src="../assets/images/backgrounds/rocket.png" alt="" class="img-fluid">
</div>
</div>
</div>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<!-- Sidebar End -->
<!-- Main wrapper -->
<div class="body-wrapper">
<!-- Header Start -->
<header class="app-header">
<nav class="navbar navbar-expand-lg navbar-light">
<ul class="navbar-nav">
<li class="nav-item d-block d-xl-none">
<a class="nav-link sidebartoggler nav-icon-hover" id="headerCollapse" href="javascript:void(0)">
<i class="ti ti-menu-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-icon-hover" href="javascript:void(0)">
<i class="ti ti-bell-ringing"></i>
<div class="notification bg-primary rounded-circle"></div>
</a>
</li>
</ul>
<div class="navbar-collapse justify-content-end px-0" id="navbarNav">
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-end">
<a href="https://adminmart.com/product/modernize-free-bootstrap-admin-dashboard/" target="_blank" class="btn btn-primary">Download Free</a>
<li class="nav-item dropdown">
<a class="nav-link nav-icon-hover" href="javascript:void(0)" id="drop2" data-bs-toggle="dropdown"
aria-expanded="false">
<img src="../assets/images/profile/user-1.jpg" alt="" width="35" height="35" class="rounded-circle">
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
<div class="message-body">
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-user fs-6"></i>
<p class="mb-0 fs-3">My Profile</p>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-mail fs-6"></i>
<p class="mb-0 fs-3">My Account</p>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-list-check fs-6"></i>
<p class="mb-0 fs-3">My Task</p>
</a>
<a href="./authentication-login.html" class="btn btn-outline-primary mx-3 mt-2 d-block">Logout</a>
</div>
</div>
</li>
</ul>
</div>
</nav>
</header>
<!-- Header End -->
<div class="container-fluid">
<div class="card">
<div class="card-body">
<h5 class="card-title fw-semibold mb-4">Sample Page</h5>
<p class="mb-0">This is a sample page </p>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../assets/js/sidebarmenu.js"></script>
<script src="../assets/js/app.min.js"></script>
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
</body>
</html>
Sesudah pemetaan componen laravel:
-app.blade.php:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modernize Free</title>
<link rel="shortcut icon" type="image/png" href="{{ asset('template-admin/src/assets/images/logos/favicon.png') }}" />
<link rel="stylesheet" href="{{ asset('template-admin/src/assets/css/styles.min.css') }}" />
</head>
<body>
<!-- Body Wrapper -->
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
data-sidebar-position="fixed" data-header-position="fixed">
<!-- Sidebar Start -->
@include('admin.layouts.sidebar')
<!-- Sidebar End -->
<!-- Main wrapper -->
<div class="body-wrapper">
<!-- Header Start -->
@include('admin.layouts.header')
<!-- Header End -->
@yield('content')
</div>
</div>
<script src="{ asset('template-admin/src/assets/libs/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ asset('template-admin/src/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('template-admin/src/assets/js/sidebarmenu.js') }}"></script>
<script src="{{ asset('template-admin/src/assets/js/app.min.js') }}"></script>
<script src="{{ asset('template-admin/src/assets/libs/simplebar/dist/simplebar.js') }}"></script>
</body>
</html>
-header.blade.php
<header class="app-header">
<nav class="navbar navbar-expand-lg navbar-light">
<ul class="navbar-nav">
<li class="nav-item d-block d-xl-none">
<a class="nav-link sidebartoggler nav-icon-hover" id="headerCollapse" href="javascript:void(0)">
<i class="ti ti-menu-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-icon-hover" href="javascript:void(0)">
<i class="ti ti-bell-ringing"></i>
<div class="notification bg-primary rounded-circle"></div>
</a>
</li>
</ul>
<div class="navbar-collapse justify-content-end px-0" id="navbarNav">
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-end">
<a href="https://adminmart.com/product/modernize-free-bootstrap-admin-dashboard/" target="_blank"
class="btn btn-primary">Download Free</a>
<li class="nav-item dropdown">
<a class="nav-link nav-icon-hover" href="javascript:void(0)" id="drop2"
data-bs-toggle="dropdown" aria-expanded="false">
<img src="{{ asset('template-admin/src/assets/images/profile/user-1.jpg') }}" alt=""
width="35" height="35" class="rounded-circle">
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
<div class="message-body">
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-user fs-6"></i>
<p class="mb-0 fs-3">My Profile</p>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-mail fs-6"></i>
<p class="mb-0 fs-3">My Account</p>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-list-check fs-6"></i>
<p class="mb-0 fs-3">My Task</p>
</a>
<a href="{{ asset('template-admin/src/html/authentication-login.html') }}"
class="btn btn-outline-primary mx-3 mt-2 d-block">Logout</a>
</div>
</div>
</li>
</ul>
</div>
</nav>
</header>
-sidebar.blade.php:
<aside class="left-sidebar">
<!-- Sidebar scroll-->
<div>
<div class="brand-logo d-flex align-items-center justify-content-between">
<a href="{{ asset('template-admin/src/html/index.html') }}" class="text-nowrap logo-img">
<img src="{{ asset('template-admin/src/assets/images/logos/dark-logo.svg') }}" width="180"
alt="" />
</a>
<div class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" id="sidebarCollapse">
<i class="ti ti-x fs-8"></i>
</div>
</div>
<!-- Sidebar navigation-->
<nav class="sidebar-nav scroll-sidebar" data-simplebar="">
<ul id="sidebarnav">
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Home</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/index.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-layout-dashboard"></i>
</span>
<span class="hide-menu">Dashboard</span>
</a>
</li>
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">UI COMPONENTS</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/ui-buttons.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-article"></i>
</span>
<span class="hide-menu">Buttons</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/ui-alerts.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-alert-circle"></i>
</span>
<span class="hide-menu">Alerts</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/ui-card.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-cards"></i>
</span>
<span class="hide-menu">Card</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/ui-forms.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-file-description"></i>
</span>
<span class="hide-menu">Forms</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/ui-typography.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-typography"></i>
</span>
<span class="hide-menu">Typography</span>
</a>
</li>
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">AUTH</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/authentication-login.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-login"></i>
</span>
<span class="hide-menu">Login</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/authentication-register.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-user-plus"></i>
</span>
<span class="hide-menu">Register</span>
</a>
</li>
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">EXTRA</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/icon-tabler.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-mood-happy"></i>
</span>
<span class="hide-menu">Icons</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="{{ asset('template-admin/src/html/sample-page.html') }}"
aria-expanded="false">
<span>
<i class="ti ti-aperture"></i>
</span>
<span class="hide-menu">Sample Page</span>
</a>
</li>
</ul>
<div class="unlimited-access hide-menu bg-light-primary position-relative mb-7 mt-5 rounded">
<div class="d-flex">
<div class="unlimited-access-title me-3">
<h6 class="fw-semibold fs-4 mb-6 text-dark w-85">Upgrade to pro</h6>
<a href="https://adminmart.com/product/modernize-bootstrap-5-admin-template/" target="_blank"
class="btn btn-primary fs-2 fw-semibold lh-sm">Buy Pro</a>
</div>
<div class="unlimited-access-img">
<img src="{{ asset('template-admin/src/assets/images/backgrounds/rocket.png') }}"
alt="" class="img-fluid">
</div>
</div>
</div>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
-content.blade.php:
@extends('admin.layouts.app')
@section('content')
<div class="container-fluid">
<div class="card">
<div class="card-body">
<h5 class="card-title fw-semibold mb-4">Sample Page</h5>
<p class="mb-0">This is a sample page </p>
</div>
</div>
</div>
@endsection
Penjelasan singkat :
Digunakan untuk menyisipkan potongan tampilan (partial view) ke dalam halaman lain. Biasanya digunakan untuk elemen yang berulang seperti header, navbar, sidebar, atau footer
Digunakan di dalam layout utama (master template) untuk menandai tempat di mana konten dari child view akan ditampilkan.Gampangnya diibaratkan sebuah wadah dengan nama content, yang nantinya bisa kita panggil wadahnya dan isi wadah tersebut dengan code content utama.
Digunakan di dalam file turunan (child view) untuk mengisi bagian tertentu dari layout utama yang sudah disediakan oleh @yield.
Digunakan untuk menyatakan bahwa file view ini menggunakan layout tertentu sebagai induk. Ini memungkinkan kita hanya fokus menulis konten, tanpa harus menulis ulang struktur HTML utama.
Fungsi ini digunakan untuk mengakses file publik seperti gambar, CSS, JavaScript yang disimpan di folder public/ Laravel.
Digunakan untuk menentukan route atau URL dan menampilkan view tertentu saat URL tersebut diakses.
Yeay! 🎉 Sekarang kamu berhasil menerapkan template ke dalam blade aplikasi Laravel kamu! Mulai dari mendownload dan ekstrak folder templatenya, memilih dan memindahkan folder template ke public laravel, hingga menyesuaikan template dengan Laravel. Dengan penerapan ini, kita sudah menerapkan template dari Modernize sehingga kita tidak perlu membuat tampilannya dari awal. Di artikel berikutnya, kita akan lanjut membahas langkah-langkah lainnya yang tak kalah penting. Tetap semangat dan happy coding! 🚀💻
Artikel Lainnya Dengan Kategori Terkait :
3. Belajar Laravel Part 1 : Membuat Web Aplikasi Layanan Pengaduan Pasien #01 Instalasi Largon
Mahardika Oktadiansyah - 15 Juli 2025
Belajar CSS Lanjutan #395 | CSS padding-inline Property
Mahardika Oktadiansyah - 15 Juli 2025
Belajar CSS Lanjutan #394 | CSS padding-bottom Property
Mahardika Oktadiansyah - 15 Juli 2025
Belajar CSS Lanjutan #393 | CSS padding-block-start Property