Chapter 10 - Laravel Dashboard Templating using Blade Files

Chapter 10 - Laravel Dashboard Templating using Blade Files

Laravel 10 AdminLTE Dashboard Templating

Note: Tested on Laravel 10.x

What We’ll Do

We'll use the AdminLTE 3 dashboard template (based on Bootstrap 4) and split our layout into reusable Blade components for better structure and maintainability.

File Structure

Create the following files under:

resources/views/backend/layouts/

  • base.blade.php – Includes stylesheets & JS (head/body base)

  • header.blade.php – Navigation bar

  • sidebar.blade.php – Left sidebar menu

  • footer.blade.php – Footer section

  • master.blade.php – Master layout that combines all components

base.blade.php

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>@yield('title') | Artisanary</title> <!-- Google Font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> <!-- CSS Assets --> <link rel="stylesheet" href="{{ asset('assets/backend/css/all.min.css') }}"> <link rel="stylesheet" href="{{ asset('assets/backend/css/jqvmap.min.css') }}"> <link rel="stylesheet" href="{{ asset('assets/backend/css/adminlte.min.css') }}"> <link rel="stylesheet" href="{{ asset('assets/backend/css/OverlayScrollbars.min.css') }}"> <link rel="stylesheet" href="{{ asset('assets/backend/css/summernote-bs4.min.css') }}"> </head> <body class="hold-transition sidebar-mini layout-fixed {{ request()->routeIs('login') ? 'login-page' : '' }}"> @yield('base.content') <!-- JS Scripts --> <script src="{{ asset('assets/backend/js/jquery.min.js') }}"></script> <script src="{{ asset('assets/backend/js/jquery-ui.min.js') }}"></script> <script> $.widget.bridge('uibutton', $.ui.button) </script> <script src="{{ asset('assets/backend/js/bootstrap.bundle.min.js') }}"></script> <script src="{{ asset('assets/backend/js/jquery.vmap.min.js') }}"></script> <script src="{{ asset('assets/backend/js/summernote-bs4.min.js') }}"></script> <script src="{{ asset('assets/backend/js/jquery.overlayScrollbars.min.js') }}"></script> <script src="{{ asset('assets/backend/js/adminlte.js') }}"></script> <script src="{{ asset('assets/backend/js/demo.js') }}"></script> </body> </html>

header.blade.php

<nav class="main-header navbar navbar-expand navbar-white navbar-light"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a> </li> </ul> <ul class="navbar-nav ml-auto"> <!-- Search --> <li class="nav-item"> <a class="nav-link" data-widget="navbar-search" href="#"><i class="fas fa-search"></i></a> <div class="navbar-search-block"> <form class="form-inline"> <input class="form-control form-control-navbar" type="search" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-navbar"><i class="fas fa-search"></i></button> <button class="btn btn-navbar" type="button" data-widget="navbar-search"><i class="fas fa-times"></i></button> </div> </form> </div> </li> <!-- Fullscreen and Sidebar --> <li class="nav-item"><a class="nav-link" data-widget="fullscreen" href="#"><i class="fas fa-expand-arrows-alt"></i></a></li> <li class="nav-item"><a class="nav-link" data-widget="control-sidebar" href="#"><i class="fas fa-th-large"></i></a></li> </ul> </nav>

sidebar.blade.php

<aside class="main-sidebar sidebar-dark-primary elevation-4"> <a href="#" class="brand-link"> <img src="{{ asset('assets/backend/img/AdminLTELogo.png') }}" class="brand-image img-circle elevation-3"> <span class="brand-text font-weight-light">AdminLTE 3</span> </a> <div class="sidebar"> <div class="user-panel d-flex mt-3 pb-3 mb-3"> <div class="image"> <img src="{{ asset('assets/backend/img/user2-160x160.jpg') }}" class="img-circle elevation-2"> </div> <div class="info"><a href="#" class="d-block">Alexander Pierce</a></div> </div> <!-- Search --> <div class="form-inline"> <div class="input-group" data-widget="sidebar-search"> <input class="form-control form-control-sidebar" type="search" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-sidebar"><i class="fas fa-search fa-fw"></i></button> </div> </div> </div> <!-- Menu --> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar flex-column" role="menu"> <li class="nav-item"> <a href="#" class="nav-link"><i class="nav-icon fas fa-tachometer-alt"></i> <p>Dashboard</p></a> </li> <li class="nav-item menu-open"> <a href="#" class="nav-link active"> <i class="nav-icon fas fa-blog"></i> <p>Blog <i class="right fas fa-angle-left"></i></p> </a> <ul class="nav nav-treeview"> <li class="nav-item"><a href="#" class="nav-link active"><i class="fa fa-list nav-icon"></i><p>All Blogs</p></a></li> <li class="nav-item"><a href="#" class="nav-link"><i class="fas fa-blog nav-icon"></i><p>Create Blog</p></a></li> </ul> </li> <li class="nav-item"> <a href="#" class="nav-link"><i class="nav-icon fas fa-user"></i><p>Roles</p></a> </li> </ul> </nav> </div> </aside>

footer.blade.php

<footer class="main-footer"> <strong>&copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a></strong> All rights reserved. <div class="float-right d-none d-sm-inline-block"><b>Version</b> 3.2.0</div> </footer>

master.blade.php

@extends('backend.layouts.base') @section('base.content') <div class="wrapper"> <!-- Preloader --> <div class="preloader flex-column justify-content-center align-items-center"> <img class="animation__shake" src="{{ asset('assets/backend/img/AdminLTELogo.png') }}" alt="AdminLTELogo" height="60" width="60"> </div> @include('backend.layouts.header') @include('backend.layouts.sidebar') <div class="content-wrapper"> @yield('content') </div> @include('backend.layouts.footer') <aside class="control-sidebar control-sidebar-dark"></aside> </div> @endsection

dashboard.blade.php

Place in: resources/views/dashboard.blade.php

@extends('backend.layouts.master') @section('title', __('Dashboard')) @section('content') <div class="content-header"> <div class="container-fluid"> <div class="row mb-2"> <div class="col-sm-6"><h1 class="m-0">Dashboard</h1></div> <div class="col-sm-6"> <ol class="breadcrumb float-sm-right"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Dashboard</li> </ol> </div> </div> </div> </div> <section class="content"> <div class="container-fluid"> <div class="row"> @foreach ([ ['count' => 150, 'label' => 'New Orders', 'class' => 'info', 'icon' => 'ion-bag'], ['count' => '53%', 'label' => 'Bounce Rate', 'class' => 'success', 'icon' => 'ion-stats-bars'], ['count' => 44, 'label' => 'User Registrations', 'class' => 'warning', 'icon' => 'ion-person-add'], ['count' => 65, 'label' => 'Unique Visitors', 'class' => 'danger', 'icon' => 'ion-pie-graph'], ] as $box) <div class="col-lg-3 col-6"> <div class="small-box bg-{{ $box['class'] }}"> <div class="inner"><h3>{{ $box['count'] }}</h3><p>{{ $box['label'] }}</p></div> <div class="icon"><i class="ion {{ $box['icon'] }}"></i></div> <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> </div> </div> @endforeach </div> </div> </section> @endsection

Asset Directory

Ensure your assets are in:

public/assets/backend/ ├── css/ ├── js/ └── img/
Souy Soeng

Souy Soeng

Our website teaches and reads PHP, Framework Laravel, and how to download Admin template sample source code free. Thank you for being so supportive!

Github

Post a Comment

CAN FEEDBACK
close