How to Integrate Admin Template in Laravel 11
Hello, laravel web developers! In this article, we'll see how to integrate the admin template in laravel 11, Here, we'll integrate sb-admin bootstrap 5 themes. SB Admin 2 is a free, open-source, Bootstrap 5-based admin theme perfect for quickly creating dashboards and web applications.
This template uses the default Bootstrap 5 styles along with a variety of plugins to create a powerful framework for creating admin panels, web apps, or dashboard UI's for your next project.
Laravel 11 Integrate Admin Template
We'll create layout, header, sidebar, and footer files to set up the theme using Laravel's @include and @yield directives.
Step 1: Install Laravel 11 Application
In this, step, we'll install the laravel 11 application using the following command.
composer create-project laravel/laravel laravel-11-example
Step 2: Download the SB Admin Theme
Then, we'll download the SB admin theme from the given link.
Link: https://startbootstrap.com/template/sb-admin
Extract the download theme folder. Copy the Assets, JS, and CSS folder to the "public/theme" folder.
Step 3: Setup Admin Theme
Next, we'll create a "theme" folder in the views folder.
resources/views/theme/default.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="" />
<title>Dashboard - SB Admin</title>
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/style.min.css" rel="stylesheet" />
<link href="{{ asset('theme/css/styles.css') }}" rel="stylesheet" />
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
</head>
<body class="sb-nav-fixed">
@include('theme.header')
<div id="layoutSidenav">
@include('theme.sidebar')
<div id="layoutSidenav_content">
<main>
@yield('content')
</main>
@include('theme.footer')
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="{{ asset('theme/js/scripts.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
<script src="{{ asset('theme/assets/demo/chart-area-demo.js') }}"></script>
<script src="{{ asset('theme/assets/demo/chart-bar-demo.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/umd/simple-datatables.min.js" crossorigin="anonymous"></script>
<script src="{{ asset('theme/js/datatables-simple-demo.js') }}"></script>
</body>
</html>
resources/views/theme/header.blade.php
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
<!-- Navbar Brand-->
<a class="navbar-brand ps-3" href="index.html">Start Bootstrap</a>
<!-- Sidebar Toggle-->
<button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
<!-- Navbar Search-->
<form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search for..." aria-label="Search for..." aria-describedby="btnNavbarSearch" />
<button class="btn btn-primary" id="btnNavbarSearch" type="button"><i class="fas fa-search"></i></button>
</div>
</form>
<!-- Navbar-->
<ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#!">Settings</a></li>
<li><a class="dropdown-item" href="#!">Activity Log</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#!">Logout</a></li>
</ul>
</li>
</ul>
</nav>
resources/views/theme/sidebar.blade.php
<div id="layoutSidenav_nav">
<nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
<div class="sb-sidenav-menu">
<div class="nav">
<div class="sb-sidenav-menu-heading">Core</div>
<a class="nav-link" href="/dashboard">
<div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
Dashboard
</a>
<div class="sb-sidenav-menu-heading">Interface</div>
<a class="nav-link" href="/users">
<div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
Users
</a>
</div>
</div>
<div class="sb-sidenav-footer">
<div class="small">Logged in as:</div>
Start Bootstrap
</div>
</nav>
</div>
resources/views/theme/footer.blade.php
<footer class="py-4 bg-light mt-auto">
<div class="container-fluid px-4">
<div class="d-flex align-items-center justify-content-between small">
<div class="text-muted">Copyright © Your Website 2024</div>
<div>
<a href="#">Privacy Policy</a>
·
<a href="#">Terms & Conditions
</div>
</div>
</div>
</footer>
Step 4: Define Route
Then, we'll define the route into the web.php file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
Route::get('dashboard', [UserController::class, 'dashboard']);
Route::get('users', [UserController::class, 'users']);
Step 5: Create Controller
Next, we'll create controller and add the following code to that file.
app/Http/Controllers/UserController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function dashboard(Request $request)
{
return view('dashboard');
}
/**
* Write code on Method
*
* @return response()
*/
public function users(Request $request)
{
$users = User::get();
return view('users', compact('users'));
}
}
Step 6: Create Blade Files
Now, we'll create a blade file and add the following HTML code.
resources/views/dashboard.blade.php
@extends('theme.default')
@section('content')
<div class="container-fluid px-4">
<h1 class="mt-4">Dashboard</h1>
<ol class="breadcrumb mb-4">
<li class="breadcrumb-item active">Dashboard</li>
</ol>
<div class="row">
<div class="col-xl-3 col-md-6">
<div class="card bg-primary text-white mb-4">
<div class="card-body">Primary Card</div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-white stretched-link" href="#">View Details</a>
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card bg-warning text-white mb-4">
<div class="card-body">Warning Card</div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-white stretched-link" href="#">View Details</a>
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card bg-success text-white mb-4">
<div class="card-body">Success Card</div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-white stretched-link" href="#">View Details</a>
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card bg-danger text-white mb-4">
<div class="card-body">Danger Card</div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-white stretched-link" href="#">View Details</a>
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6">
<div class="card mb-4">
<div class="card-header">
<i class="fas fa-chart-area me-1"></i>
Area Chart Example
</div>
<div class="card-body"><canvas id="myAreaChart" width="100%" height="40"></canvas></div>
</div>
</div>
<div class="col-xl-6">
<div class="card mb-4">
<div class="card-header">
<i class="fas fa-chart-bar me-1"></i>
Bar Chart Example
</div>
<div class="card-body"><canvas id="myBarChart" width="100%" height="40"></canvas></div>
</div>
</div>
</div>
</div>
@endsection
resources/views/users.blade.php
@extends('theme.default')
@section('content')
<div class="container-fluid px-4">
<h1 class="mt-4">Users</h1>
<div class="row">
<table class="table table-bordered data-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
@forelse($users as $user)
<tr>
<td>{{ $user->id }}</td>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
</tr>
@empty
<tr>
<td colspan="3">There are no users.</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
@endsection
Step 7: Create Dummy Records
Next, we'll create some dummy records using the following command.
php artisan tinker
User::factory()->count(50)->create()
Step 8: Run Laravel 11 Application
Now, we'll run laravel 11 application using the following command.
php artisan serve
You might also like:
- Read Also: Laravel 11 CORS Middleware Configuration
- Read Also: Laravel 11 Custom User Login and Registration
- Read Also: Laravel 11 Livewire CRUD using Jetstream & Tailwind CSS
- Read Also: How to Integrate Laravel 10 with AdminLTE 3 and Font Awesome 5 using npm
