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.
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.
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.
There are following files will participate into this laravel layout tutorial :
css, js and images folder and files.You can also check other recommended tutorials of Lumen/Laravel :
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:
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
First, We will download AdminLTE3 Template from Here.
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.
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 –
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>
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>
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>
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>
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');
}
}
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,
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.
Now define routes and call above view, Let’s add below entry into the routes/web.php file.
Route::get('/', [HomeController::class, 'index']);
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');
}
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 page is another page into this laravel 8 layout tutorial, that ll have application contact information.
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');
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.
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.
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.
This tutorial helps integrate a PHP SDK with Laravel. We'll install aws-php-sdk into laravel application and access all aws services… Read More
in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More
This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More
We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More
in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More
I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More