PHP Laravel 5.5 - Bootstrap Admin Theme Integration example from scratch


Today In this tutorial, i am going to share with you how to install bootstrap admin template in Laravel 5 application from scratch. In this example you can lean how to install theme in Laravel 5 different version like 5.0, 5.1, 5.2, 5.3 and 5.4.

In this example, we are going to integrate SB Admin theme into laravel application. This example through you can easily understand how to integrate other bootstrap themes in laravel application. Here is a very basic example form starting and step step to integrating of admin theme. Admin theme is a very basic requirement for any web application. Without admin panel we can not manage our web site.

So, in this example i will create two pages after integration of theme. In that two page we will use our integrated theme. that page will be as like bellow:

1) my-home

2) my-users

Ok, after complete this example you will see layout of home page looks like as bellow screen shot.

Preview:

Step 1 : Install Laravel Fresh Application

we are going from scratch, So we require to get fresh Laravel application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Download SB Admin Theme

In this step, we will download sb admin theme from here : Download SB Admin Theme. After download extract it.

Ok now we have to take js, css and icons and put it into our laravel application. So follow bellow 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 : Create Route

We are going to create example from scratch so first we add two route "my-home" and "my-users" for too pages. So open your route file and add bellow route:

routes/web.php

Route::get('my-home', 'HomeController@myHome');

Route::get('my-users', 'HomeController@myUsers');

Step 4: Add Controller

In this step, we will create new HomeController and add two method for dashboard page and my users page. So we have to put bellow code on our HomeController:

app/Http/Controllers/HomeController.php

<?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 myHome()

{

return view('myHome');

}


/**

* Show the my users page.

*

* @return \Illuminate\Http\Response

*/

public function myUsers()

{

return view('myUsers');

}

}

Step 5: Set Theme Blade Files

In this step we have to setup of theme blade files. I create three files for SB Admin them. IF you have another theme and that large then you can manage there are more files. So first we will create theme folder on views folder. In theme folder we will create three files as listed bellow:

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 bellow:

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>SB Admin 2 - Bootstrap Admin Theme</title>


<!-- Bootstrap Core CSS -->

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


<!-- MetisMenu CSS -->

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


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

In this step, we will create two new blade files with 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/myHome.blade.php

@extends('theme.default')


@section('content')

<div class="row">

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

<h1 class="page-header">Dashboard</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/myUsers.blade.php

@extends('theme.default')


@section('content')

<div class="row">

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

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

</div>

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

</div>

<!-- /.row -->


<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>Hardik</td>

<td>Savani</td>

<td>@mdo</td>

</tr>

<tr>

<td>2</td>

<td>Kashiyani</td>

<td>Vimal</td>

<td>@fat</td>

</tr>

<tr>

<td>3</td>

<td>Harshad</td>

<td>Pathak</td>

<td>@twitter</td>

</tr>

</tbody>

</table>


@endsection

Ok, as bellow files we used our integrated theme and you can understand how we can use it again and again with other pages.

Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow url on your browser:

http://localhost:8000/my-home

I hope you found best solution....







December 15, 2017 | Category : PHP Laravel Bootstrap Laravel 5 Laravel 5.5
Related Posts