We will create laravel 8 layout and views Using AdminLTE3 Theme.This tutorial help to convert simple bootstrap HTML theme into laravel 8 layout. The layout means a theming of your laravel application. The blade template engine will use to create theme layout in laravel 8.
The Laravel is a powerful and MVC pattern based framework. Default, The Laravel store view file in /resources/views
folder.
Blade Engine
The Blade is one of them powerful templating engine in php, which will generate theme layout in HTML format. All blade files uses .blade.php
file extension and stored in resources/views
directory.
AdminLTE3
The AdminLTE3 is a free to use Bootstrap 4 admin template. This template uses the Bootstrap 4 styles along with a variety of powerful jQuery plugins and tools to create a powerful framework for creating admin panels or back-end dashboards.
Laravel 8 File changes
There are following files will participate into this laravel layout tutorial :
- public : This folder will contain
css
,js
andimages
folder and files. - resources/views : This folder will contain all views file.
- resources/views/layouts : This folder will contain all layout files .
- resources/views/partials : This folder will contain all layout partial files like header, footer and sidebar etc.
- routes/web.php : This file contain web routes.
- Http/Controllers/HomeController.php : This file contains controller method for routes.
You can also check other recommended tutorials of Lumen/Laravel :
- How to create Queue and Run Jobs using worker in Lumen/Laravel
- Laravel Micro Rest Framework – Simple Example of RESTful API in Lumen
- Simple Example of Laravel 5 Login System Using Sentry
- Authorization and Authentication of Users in laravel 5 Using Sentry
Laravel 8 Layouts And Views
We will download HTML based AdminLTE3 theme and convert into powerful laravel layout using blade templating engine. Break the index.html
page into the smaller unit like header, footer, sidebar and content, then coupled into the master layout(app.blade.php
) file. Let’s create layout and render content:
Install Laravel Using Composer
There are two method to install laravel using laravel installer or composer, Let’s install Laravel by Composer command create-project
. If your system doesn’t has Composer Installed, You need to install them? Run the below command to create a laravel project into the terminal-
composer create-project --prefer-dist laravel/laravel laravel-app
Download AdminLTE Theme
First, We will download AdminLTE3 Template from Here.
Move Theme assets files
Theme have assets folder that contains css.js and images folder. We will Move all theme js, css, images and fonts folder and files into laravel-app /public
folder.
Create Partials Files From HTML Theme
Already downloaded AdminLTE3 zip folder, we will extract it and open index.html
file. Let’s created following separate template files. These file will have separate portion of theme adminLte index.html
file –
- /resources/views/partials/header.blade.php : This file will contains html template header part.
- /resources/views/partials/sidebar.blade.php : This file will contains html template sidebar part.
- /resources/views/partials/footer.blade.php : This file will contains html template footer part.
- /resources/views/partials/breadcrumb.blade.php : This file will contains breadcrumb information.
- /resources/views/layouts/app.blade.php : This file will use to include above partial files and create master layout template which will render on each laravel request.
header.blade.php
Created a new views/partials/header.blade.php
file and paste AdminLTE theme header html code:
<nav class="main-header navbar navbar-expand navbar-white navbar-light"> <!-- Left navbar links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="/" class="nav-link">Home</a> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="#" class="nav-link">Contact</a> </li> </ul> <!-- Right navbar links --> <ul class="navbar-nav ml-auto"> <!-- Navbar Search --> <li class="nav-item"> <a class="nav-link" data-widget="navbar-search" href="#" role="button"> <i class="fas fa-search"></i> </a> <div class="navbar-search-block"> <form class="form-inline"> <div class="input-group input-group-sm"> <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-navbar" type="submit"> <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> </div> </form> </div> </li> </ul> </nav>
footer.blade.php
Created new views/partials/footer.blade.php
file and paste AdminLTE theme footer HTML code.
<footer class="main-footer"> <strong>Copyright © <script> document.write(new Date().getFullYear()) </script> <a href="https://phpflow.com">www.phpflow.com</a>.</strong> All rights reserved. <div class="float-right d-none d-sm-inline-block"> <b>Version</b> 3.1.0 </div> </footer>
sidebar.blade.php
Created new views/partials/sidebar.blade.php
file and paste AdminLTE theme sidebar HTML code.
<aside class="main-sidebar sidebar-dark-primary elevation-4"> <!-- Brand Logo --> <a href="/" class="brand-link"> <img src="assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> <span class="brand-text font-weight-light">AdminLTE 3</span> </a> <!-- Sidebar --> <div class="sidebar"> <!-- Sidebar user panel (optional) --> <div class="user-panel mt-3 pb-3 mb-3 d-flex"> <div class="image"> <img src="assets/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image"> </div> <div class="info"> <a href="#" class="d-block">phpflow</a> </div> </div> <!-- SidebarSearch Form --> <div class="form-inline"> <div class="input-group" data-widget="sidebar-search"> <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-sidebar"> <i class="fas fa-search fa-fw"></i> </button> </div> </div><div class="sidebar-search-results"><div class="list-group"><a href="#" class="list-group-item"><div class="search-title"><strong class="text-light"></strong>N<strong class="text-light"></strong>o<strong class="text-light"></strong> <strong class="text-light"></strong>e<strong class="text-light"></strong>l<strong class="text-light"></strong>e<strong class="text-light"></strong>m<strong class="text-light"></strong>e<strong class="text-light"></strong>n<strong class="text-light"></strong>t<strong class="text-light"></strong> <strong class="text-light"></strong>f<strong class="text-light"></strong>o<strong class="text-light"></strong>u<strong class="text-light"></strong>n<strong class="text-light"></strong>d<strong class="text-light"></strong>!<strong class="text-light"></strong></div><div class="search-path"></div></a></div></div> </div> <!-- Sidebar Menu --> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> <!-- Add icons to the links using the .nav-icon class with font-awesome or any other icon font library --> <li class="nav-item"> <a href="/" class="nav-link {{ $elementActive == 'home' ? 'active' : '' }}"> <i class="nav-icon fas fa-home"></i> <p> Home </p> </a> </li> <li class="nav-item"> <a href="/contact" class="nav-link {{ $elementActive == 'contact' ? 'active' : '' }}"> <i class="nav-icon fas fa-id-card-alt"></i> <p> Contact us </p> </a> </li> </ul> </nav> <!-- /.sidebar-menu --> </div> <!-- /.sidebar --> </aside>
breadcrumb.blade.php
Created new views/partials/breadcrumb.blade.php
file and paste AdminLTE theme breadcrumb HTML code.
<section class="content-header"> <div class="container-fluid"> <div class="row mb-2"> <div class="col-sm-6"> <h1>Blank Page</h1> </div> <div class="col-sm-6"> <ol class="breadcrumb float-sm-right"> <li class="breadcrumb-item"><a href="/">Home</a></li> @foreach(Request::segments() as $segment) <li class="breadcrumb-item"> <a href="{{ route('contact') }}">{{$segment}}</a> </li> @endforeach </ol> </div> </div> </div><!-- /.container-fluid --> </section>
HomeController.pho file
Let’s create HomeController.php
file into Http/Controllers/ folders, Added below code here :
<?php namespace App\Http\Controllers; class HomeController extends Controller { /** * Show the application home. * * @return \Illuminate\View\View */ public function index() { return view('pages.home'); } /** * Show the application contact. * * @return \Illuminate\View\View */ public function contact() { return view('pages.contact'); } }
Convert Bootstrap Into Laravel Layout
Created new resources/views/layouts/app.blade.php
file. Added partial files into here and create content area that will filed by routes page contents. Also, included required css and js files that will help to render theme styling. Added below codes into this file:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>App Name - @yield('title')</title> <!-- Google Font: Source Sans Pro --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> <!-- Font Awesome --> <link rel="stylesheet" href="{{asset('assets/css/fontawesome-free/css/all.min.css')}}" media="all"> <!-- Theme style --> <link rel="stylesheet" href="{{asset('assets/css/adminlte.min.css')}}"> </head> <body class="hold-transition sidebar-mini"> <!-- Site wrapper --> <div class="wrapper"> <!-- Navbar --> @include('layouts.partials.header') <!-- /.navbar --> <!-- Main Sidebar Container --> @include('layouts.partials.sidebar') <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> @include('layouts.partials.breadcrumb') <!-- Main content --> <section class="content"> <!-- Default box --> @yield('content') </section> <!-- /.content --> </div> @include('layouts.partials.footer') <!-- /.content-wrapper --> </div> <!-- ./wrapper --> <!-- jQuery --> <script src="{{asset('assets/plugins/jquery/jquery.min.js')}}"></script> <!-- Bootstrap 4 --> <script src="{{asset('assets/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script> <!-- AdminLTE App --> <script src="{{asset('assets/js/adminlte.min.js') }}"></script> <!-- AdminLTE for demo purposes --> <script src="{{asset('assets/js/demo.js') }}"></script> </body> </html>
You can see above code, I am using two directives,
- @include : This directive used to include partial files.
- @yield : This directive used to set content into the section, which is main content area of layout.
Create A Home Page
Now, Create a home page for our laravel application and link home page menu into sidebar. This is default page view of the our laravel application.
Define home view Routes In Laravel 8
Now define routes and call above view, Let’s add below entry into the routes/web.php
file.
Route::get('/', [HomeController::class, 'index']);
Define home Method into Controller
We have defined home routes and target index method under HomeController
file, Let’s create index()
method here :
/** * Show the application home. * * @return \Illuminate\View\View */ public function index() { return view('pages.home'); }
Home view File
Let’s create a new home.blade.php
file into the /views/pages
folder and added below code into the this file.
@extends('layouts.app', [ 'class' => '', 'elementActive' => 'home' ]) @section('content') <div class="card"> <div class="card-header"> <h3 class="card-title">Home</h3> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse"> <i class="fas fa-minus"></i> </button> <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove"> <i class="fas fa-times"></i> </button> </div> </div> <div class="card-body"> this is my home page </div> <!-- /.card-body --> <div class="card-footer"> </div> <!-- /.card-footer--> </div> <!-- /.card --> @endsection
We have extended master layout app.blade.php
file and passed active class name($elementActive
), This variable value get into the master layout file:
Contact Us page
Contact page is another page into this laravel 8 layout tutorial, that ll have application contact information.
Define Contact view Routes In Laravel 8
Now define routes and render contact view, Let’s add below entry into the routes/web.php
file.
Route::get('/contact', [HomeController::class, 'contact'])->name('contact');
Define contact Method into Controller
We have defined contact routes and target contact method under HomeController file, Let’s create contact()
method here :
/** * Show the application contact. * * @return \Illuminate\View\View */ public function contact() { return view('pages.contact'); }
Above method search contact.blade.php
file into pages folder.
Contact view File
Create views/pages/contact.blade.php
file and added below code:
@extends('layouts.app', [ 'class' => '', 'elementActive' => 'contact' ]) @section('content') <div class="card"> <div class="card-header"> <h3 class="card-title">Contact Us</h3> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse"> <i class="fas fa-minus"></i> </button> <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove"> <i class="fas fa-times"></i> </button> </div> </div> <div class="card-body"> If you have any questions, queries or suggestions regarding the content here on phpflow.com, please feel free to get in touch. Email: phpflow(at)gmail(dot)com </div> <!-- /.card-body --> <div class="card-footer"> Footer </div> <!-- /.card-footer--> </div> <!-- /.card --> @endsection
Now run Laravel application using php artisan serve
and navigate http://localhost:8000, You can get AdminLTE theme page layout with ‘this is my home page’ message.
Conclusion
We have created a laravel theme layout using AdminLTE. You can convert any HTML theme into laravel layout by helping this tutorial. You can use any other template engine as well. This laravel tutorial used bootstrap 4,blade template engine and php 7 to convert HTML view into Laravel Layout. You can get more info about laravel 8 from official laravel website.