How To Theme Integrate Step By Step In Laravel 9?

10-Apr-2023

.

Admin

How To Theme Integrate Step By Step In Laravel 9?

Hi Dev,

This example is how to theme integrate step by step in laravel9?.

We will download the admin panel template in plain HTML.

This is example is very easy and short code step by step theme integrate laravel9.

Sol let's start following step.

Step 1: Download Laravel


Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.

composer create-project laravel/laravel example-app

Step 2: Download Admin Template

In this step, we download the SB Admin Laravel admin template. After download extract it.

we have to take js, CSS, and icons and put them into our Laravel application. So, follow below two-point.

Point 1 : Create new theme folder in public folder of Laravel application.

Point 2 : Copy data, dist and vendor folder and put it into "theme" directory.

Step 3: Add Route

Open your route file and add below route:

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\HomeController;

/*

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

|

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

|

*/

Route::get('home',[HomeController::class,'home']);

Route::get('users',[HomeController::class,'users']);

Step 4: Add Controller

We have to put below code on our HomeController:

app/Http/Controllers/HomeController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Item;

class HomeController extends Controller

{

/**

* Create a new controller instance.

*

* @return void

*/

public function __construct()

{

//

}

/**

* Show the application dashboard.

*

* @return \Illuminate\Http\Response

*/

public function home()

{

return view('home');

}

/**

* Show the my users page.

*

* @return \Illuminate\Http\Response

*/

public function users()

{

return view('users');

}

}

Step 5: Set Theme Blade Files

We have set three theme blade file for SB Admin. So first we will create theme folder on views folder. In theme folder we will create three files as listed below:

1) default.blade.php

2) header.blade.php

3) sidebar.blade.php

Ok, now we have to add code for this three files. as listed below:

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">

<meta name="description" content="">

<meta name="author" content="">

<title>Bootstrap Admin Theme - Nicesnippets.com</title>

<!-- Bootstrap Core CSS -->

<link href="{!! asset('theme/vendor/bootstrap/css/bootstrap.min.css') !!}" rel="stylesheet">

<!-- MetisMenu CSS -->

<!-- Custom CSS -->

<link href="{!! asset('theme/dist/css/sb-admin-2.css') !!}" rel="stylesheet">

<!-- Morris Charts CSS -->

<link href="{!! asset('theme/vendor/morrisjs/morris.css') !!}" rel="stylesheet">

<!-- Custom Fonts -->

<link href="{!! asset('theme/vendor/font-awesome/css/font-awesome.min.css') !!}" rel="stylesheet" type="text/css">

</head>

<body>

<div id="wrapper">

<!-- Navigation -->

<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

@include('theme.header')

@include('theme.sidebar')

</nav>

<div id="page-wrapper">

@yield('content')

</div>

<!-- /#page-wrapper -->

</div>

<!-- /#wrapper -->

<!-- jQuery -->

<script src="{!! asset('theme/vendor/jquery/jquery.min.js') !!}"></script>

<!-- Bootstrap Core JavaScript -->

<script src="{!! asset('theme/vendor/bootstrap/js/bootstrap.min.js') !!}"></script>

<!-- Metis Menu Plugin JavaScript -->

<script src="{!! asset('theme/vendor/metisMenu/metisMenu.min.js') !!}"></script>

<!-- Morris Charts JavaScript -->

<script src="{!! asset('theme/vendor/raphael/raphael.min.js') !!}"></script>

<script src="{!! asset('theme/vendor/morrisjs/morris.min.js') !!}"></script>

<script src="{!! asset('theme/data/morris-data.js') !!}"></script>

<!-- Custom Theme JavaScript -->

<script src="{!! asset('theme/dist/js/sb-admin-2.js') !!}"></script>

</body>

</html>

resources/views/theme/header.blade.php

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="index.html">SB Admin v2.0</a>

</div>

<!-- /.navbar-header -->

<ul class="nav navbar-top-links navbar-right">

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">

<i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>

</a>

<ul class="dropdown-menu dropdown-messages">

<li>

<a href="#">

<div>

<strong>John Smith</strong>

<span class="pull-right text-muted">

<em>Yesterday</em>

</span>

</div>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>

</a>

</li>

<li class="divider"></li>

<li>

<a class="text-center" href="#">

<strong>Read All Messages</strong>

<i class="fa fa-angle-right"></i>

</a>

</li>

</ul>

<!-- /.dropdown-messages -->

</li>

<!-- /.dropdown -->

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">

<i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>

</a>

<ul class="dropdown-menu dropdown-tasks">

<li>

<a href="#">

<div>

<p>

<strong>Task 4</strong>

<span class="pull-right text-muted">80% Complete</span>

</p>

<div class="progress progress-striped active">

<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">

<span class="sr-only">80% Complete (danger)</span>

</div>

</div>

</div>

</a>

</li>

<li class="divider"></li>

<li>

<a class="text-center" href="#">

<strong>See All Tasks</strong>

<i class="fa fa-angle-right"></i>

</a>

</li>

</ul>

<!-- /.dropdown-tasks -->

</li>

<!-- /.dropdown -->

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">

<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>

</a>

<ul class="dropdown-menu dropdown-alerts">

<li>

<a href="#">

<div>

<i class="fa fa-upload fa-fw"></i> Server Rebooted

<span class="pull-right text-muted small">4 minutes ago</span>

</div>

</a>

</li>

<li class="divider"></li>

<li>

<a class="text-center" href="#">

<strong>See All Alerts</strong>

<i class="fa fa-angle-right"></i>

</a>

</li>

</ul>

<!-- /.dropdown-alerts -->

</li>

<!-- /.dropdown -->

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">

<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>

</a>

<ul class="dropdown-menu dropdown-user">

<li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>

</li>

<li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>

</li>

<li class="divider"></li>

<li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>

</li>

</ul>

<!-- /.dropdown-user -->

</li>

<!-- /.dropdown -->

</ul>

<!-- /.navbar-top-links -->

resources/views/theme/sidebar.blade.php

<div class="navbar-default sidebar" role="navigation">

<div class="sidebar-nav navbar-collapse">

<ul class="nav" id="side-menu">

<li class="sidebar-search">

<div class="input-group custom-search-form">

<input type="text" class="form-control" placeholder="Search...">

<span class="input-group-btn">

<button class="btn btn-default" type="button">

<i class="fa fa-search"></i>

</button>

</span>

</div>

<!-- /input-group -->

</li>

<li>

<a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>

</li>

<li>

<a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span></a>

<ul class="nav nav-second-level">

<li>

<a href="flot.html">Flot Charts</a>

</li>

<li>

<a href="morris.html">Morris.js Charts</a>

</li>

</ul>

<!-- /.nav-second-level -->

</li>

<li>

<a href="tables.html"><i class="fa fa-table fa-fw"></i> Tables</a>

</li>

<li>

<a href="forms.html"><i class="fa fa-edit fa-fw"></i> Forms</a>

</li>

<li>

<a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a>

<ul class="nav nav-second-level">

<li>

<a href="panels-wells.html">Panels and Wells</a>

</li>

</ul>

<!-- /.nav-second-level -->

</li>

<li>

<a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span></a>

<ul class="nav nav-second-level">

<li>

<a href="blank.html">Blank Page</a>

</li>

<li>

<a href="login.html">Login Page</a>

</li>

</ul>

<!-- /.nav-second-level -->

</li>

</ul>

</div>

<!-- /.sidebar-collapse -->

</div>

<!-- /.navbar-static-side -->

Step 6: Use Theme

We will create two new blade file using our integrated theme layout. Yes, we added two route one for home and another for users. So, let's create two files and see how to user our integrated theme.

resources/views/home.blade.php

@extends('theme.default')

@section('content')

<div class="row">

<div class="col-lg-12">

<h1 class="page-header">Home</h1>

</div>

<!-- /.col-lg-12 -->

</div>

<!-- /.row -->

<div class="row">

<div class="col-lg-3 col-md-6">

<div class="panel panel-primary">

<div class="panel-heading">

<div class="row">

<div class="col-xs-3">

<i class="fa fa-comments fa-5x"></i>

</div>

<div class="col-xs-9 text-right">

<div class="huge">26</div>

<div>New Comments!</div>

</div>

</div>

</div>

<a href="#">

<div class="panel-footer">

<span class="pull-left">View Details</span>

<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

<div class="clearfix"></div>

</div>

</a>

</div>

</div>

<div class="col-lg-3 col-md-6">

<div class="panel panel-green">

<div class="panel-heading">

<div class="row">

<div class="col-xs-3">

<i class="fa fa-tasks fa-5x"></i>

</div>

<div class="col-xs-9 text-right">

<div class="huge">12</div>

<div>New Tasks!</div>

</div>

</div>

</div>

<a href="#">

<div class="panel-footer">

<span class="pull-left">View Details</span>

<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

<div class="clearfix"></div>

</div>

</a>

</div>

</div>

<div class="col-lg-3 col-md-6">

<div class="panel panel-yellow">

<div class="panel-heading">

<div class="row">

<div class="col-xs-3">

<i class="fa fa-shopping-cart fa-5x"></i>

</div>

<div class="col-xs-9 text-right">

<div class="huge">124</div>

<div>New Orders!</div>

</div>

</div>

</div>

<a href="#">

<div class="panel-footer">

<span class="pull-left">View Details</span>

<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

<div class="clearfix"></div>

</div>

</a>

</div>

</div>

<div class="col-lg-3 col-md-6">

<div class="panel panel-red">

<div class="panel-heading">

<div class="row">

<div class="col-xs-3">

<i class="fa fa-support fa-5x"></i>

</div>

<div class="col-xs-9 text-right">

<div class="huge">13</div>

<div>Support Tickets!</div>

</div>

</div>

</div>

<a href="#">

<div class="panel-footer">

<span class="pull-left">View Details</span>

<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

<div class="clearfix"></div>

</div>

</a>

</div>

</div>

</div>

@endsection

resources/views/users.blade.php

@extends('theme.default')

@section('content')

<div class="row">

<div class="col-lg-12">

<h1 class="page-header">Users</h1>

</div>

</div>

<table class="table table-striped table-bordered table-hover">

<thead>

<tr>

<th>#</th>

<th>First Name</th>

<th>Last Name</th>

<th>Username</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>Mehul</td>

<td>Bagda</td>

<td>@mdo</td>

</tr>

<tr>

<td>2</td>

<td>Vishal</td>

<td>Panshuriya</td>

<td>@fat</td>

</tr>

<tr>

<td>3</td>

<td>Piyush</td>

<td>Kamani</td>

<td>@twitter</td>

</tr>

</tbody>

</table>

@endsection

Run Laravel App:

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

php artisan serve

Now, you have to open web browser, type the given URL and view the app output:

http://localhost:8000/home

I hope it can help you...

#Laravel 9