Laravel 11 Integrate Admin Template Example

10-Jul-2024

.

Admin

Laravel 11 Integrate Admin Template Example

Hi, Dev

In this guide, I will walk you through the step-by-step process of integrating an admin theme into a Laravel 11 application.

In this example, we will integrate the SB Admin Bootstrap theme into a Laravel 11 application. First, we will download the SB Admin Bootstrap 5 theme. Next, we will create layout, header, sidebar, and footer files to set up the theme using Laravel's `@include` and `@yield` directives. Finally, we will utilize these components with the `@extends` directive. Let's follow the steps below to complete this integration.

Step for Laravel 11 Admin Template Integration Example


Step 1: Install Laravel 11

Step 2: Download SB Admin Theme

Step 3: Setup Admin Theme

Step 4: Create Route

Step 5: Create Controller

Step 6: Create Blade Files

Step 7: Create Dummy Records

Run Laravel App

Step 1: Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Download SB Admin Theme

In this step, we will download sb admin bootstrap 5 theme from live.

1. Go to the SB-Admin theme and download theme from URL:

download-theme-laravel-11-admin-panel

2. You need to extract download theme folder. Copy assets, js and css folder to "public/theme" folder. You can see the below screenshot.

download-theme-folderlaravel-11-admin-panel

Step 3: Setup Admin Theme

First, we will create "theme" folder in views folder, then we will create the following files:

1. default.blade.php

2. header.blade.php

3. sidebar.blade.php

4. footer.blade.php

Now, you can see the codes of the files:

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 2023</div>

<div>

<a href="#">Privacy Policy</a>

·

<a href="#">Terms & Conditions

</div>

</div>

</div>

</footer>

Step 4: Create Route

First of all, we will create a simple route for creating a simple line chart. So let's add simple routes as below:

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

Here, we will create a new controller named UserController. So let's add the code below to that controller 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

here, we need to create blade files, so let's update the following codes.

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:

Here, we need to add some dummy records on users table as monthly wise.

you can create dummy records using laravel tinker command as bellow:

php artisan tinker

User::factory()->count(30)->create()

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/chart

Output:

laravel-11-integrate-admin-dashboard

laravel-11-integrate-admin-user-list

I hope it can help you...

#Laravel 11