Use AdminLTE template in PHP's Laravel framework to write website backend interface

AdminLTE is a free advanced admin control panel theme based on Bootstrap 3.x, fully responsive management, suitable for many screen resolutions from small mobile devices to large desktop computers.

Features of AdminLTE:

Fully responsive
Sortable dashboard
18 plugins and 3 custom plugins
Lightweight and fast
Compatible with most Compatible with major browsers
Fully supports Glyphicons, Fontawesome and icons

Tools we use

Laravel
AdminLTE 2.3.2
Bower
Composer

Download a brand new Laravel
If you are not sure, you can go to the official website to check Document link
at We can use the command line directly

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

Copy after login

With this command we create a new name myapp Laravel project, if you succeed you can see the picture below

Use AdminLTE template in PHPs Laravel framework to write website backend interface_php skills

Download AdminLTE through Bower
Enter myapp/ public folder

 cd myapp/public

Copy after login

Execute the following command in this folder

 bower install admin-lte

Copy after login

Once completed, you will find an additional bower_componets folder, and in this folder you will see AdminLTE

Convert AdminLTE starter.html into Blade template
Laravel uses a good template engine Blade here. In order to make full use of Blade, we need to convert some common common HTML starters. To apply the start page to the Blade template, first create a view in the resources/views folder and name it admin_template.blade.php, and then we create a corresponding route for this page. As below I created

 Route::get(&#39;admin&#39;, function () {
  return view(&#39;admin_template&#39;);
 });

Copy after login

Then, change bower_components/admin-lte Copy the content in /starter.html to our view template, and point the relevant links to the corresponding directory of our AdminLTE. The following is my preliminary setting:

<script src="{{ asset("/bower_components/AdminLTE/plugins/jQuery/jQuery-2.1.4.min.js")}}"></script>
<!-- Bootstrap 3.3.5 -->
<script src="{{ asset("/bower_components/AdminLTE/bootstrap/js/bootstrap.min.js")}}"></script>
<!-- AdminLTE App -->
<script src="{{ asset("/bower_components/AdminLTE/dist/js/app.min.js")}}"></script>

Copy after login

Similarly like this, change the css The links related to js point to the corresponding directory, and then we check the page changes through localhost:8000/admin. At this time, the page becomes as shown below:

Use AdminLTE template in PHPs Laravel framework to write website backend interface_php skills

Now Now that we have all the resources to use AdminLTE, let's add the final touches to our main view. I'll separate this template into three files, sidebar.blade.php, header.blade.php, and footer. blade.php
The contents of these three files are admin_template.blade.php header part, aside part and footer part respectively. Cut out these three parts and put them into three files in sequence.

Final Touches
Now that we have personalized our templates apart, we need to set up our initial admin_template.blade.php
template In order to facilitate the dynamic loading of content, as shown below:

<!DOCTYPE html>
<html>
head>
<meta charset="UTF-8">
<title>{{ $page_title or "AdminLTE Dashboard" }}</title>
<meta content=&#39;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&#39; name=&#39;viewport&#39;>
<!-- Bootstrap 3.3.2 -->
<link href="{{ asset("/bower_components/AdminLTE/bootstrap/css/bootstrap.min.css") }}" rel="stylesheet" 
type="text/css" />
<!-- Font Awesome Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" 
type="text/css" />
<!-- Ionicons -->
<link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" 
type="text/css" />
<!-- Theme style -->
<link href="{{ asset("/bower_components/AdminLTE/dist/css/AdminLTE.min.css")}}" rel="stylesheet" 
type="text/css" />
<!-- AdminLTE Skins. We have chosen the skin-blue for this starter
  page. However, you can choose any other skin. Make sure you
  apply the skin class to the body tag so the changes take effect.
-->
<link href="{{ asset("/bower_components/AdminLTE/dist/css/skins/skin-blue.min.css")}}" rel="stylesheet" 
type="text/css" />
 
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn&#39;t work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
 
<!-- Header -->
@include(&#39;header&#39;)
 
<!-- Sidebar -->
@include(&#39;sidebar&#39;)
 
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
 <!-- Content Header (Page header) -->
 <section class="content-header">
  <h1>
   {{ $page_title or "Page Title" }}
   <small>{{ $page_description or null }}</small>
  </h1>
  <!-- You can dynamically generate breadcrumbs here -->
  <ol class="breadcrumb">
   <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
   <li class="active">Here</li>
  </ol>
 </section>
 
 <!-- Main content -->
 <section class="content">
  <!-- Your Page Content Here -->
  @yield(&#39;content&#39;)
 </section><!-- /.content -->
</div><!-- /.content-wrapper -->
 
<!-- Footer -->
@include(&#39;footer&#39;)
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
 <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
 <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
 <!-- Home tab content -->
 <div class="tab-pane active" id="control-sidebar-home-tab">
 <h3 class="control-sidebar-heading">Recent Activity</h3>
 <ul class="control-sidebar-menu">
  <li>
  <a href="javascript::;">
   <i class="menu-icon fa fa-birthday-cake bg-red"></i>
 
   <div class="menu-info">
   <h4 class="control-sidebar-subheading">Langdon&#39;s Birthday</h4>
 
   <p>Will be 23 on April 24th</p>
   </div>
  </a>
  </li>
 </ul>
 <!-- /.control-sidebar-menu -->
 
 <h3 class="control-sidebar-heading">Tasks Progress</h3>
 <ul class="control-sidebar-menu">
  <li>
  <a href="javascript::;">
   <h4 class="control-sidebar-subheading">
   Custom Template Design
   <span class="label label-danger pull-right">70%</span>
   </h4>
 
   <div class="progress progress-xxs">
   <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
   </div>
  </a>
  </li>
 </ul>
 <!-- /.control-sidebar-menu -->
 
 </div>
 <!-- /.tab-pane -->
 <!-- Stats tab content -->
 <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
 <!-- /.tab-pane -->
 <!-- Settings tab content -->
 <div class="tab-pane" id="control-sidebar-settings-tab">
 <form method="post">
  <h3 class="control-sidebar-heading">General Settings</h3>
 
  <div class="form-group">
  <label class="control-sidebar-subheading">
   Report panel usage
   <input type="checkbox" class="pull-right" checked>
  </label>
 
  <p>
   Some information about this general settings option
  </p>
  </div>
  <!-- /.form-group -->
 </form>
 </div>
 <!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar&#39;s background. This div must be placed
 immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div><!-- ./wrapper -->
 
<!-- REQUIRED JS SCRIPTS -->
 
<!-- jQuery 2.1.3 -->
<script src="{{ asset ("/bower_components/AdminLTE/plugins/jQuery/jQuery-2.1.3.min.js") }}"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="{{ asset ("/bower_components/AdminLTE/bootstrap/js/bootstrap.min.js") }}" 
type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="{{ asset ("/bower_components/AdminLTE/dist/js/app.min.js") }}" type="text/javascript">
</script>
 
<!-- Optionally, you can add Slimscroll and FastClick plugins.
 Both of these plugins are recommended to enhance the
 user experience -->
</body>
</html>

Copy after login

In the above code, we added contentn, which contains our main content and added pages Title for a different page, rename it to dashboard.blade.php Now the template is ready to use.

Test page

To verify what we have done before, I will create a simple page

1. Create test.blade.php

@extends(&#39;dashboard&#39;)
@section(&#39;content&#39;)
<div class=&#39;row&#39;>
 <div class=&#39;col-md-6&#39;>
  <!-- Box -->
  <div class="box box-primary">
   <div class="box-header with-border">
    <h3 class="box-title">Randomly Generated Tasks</h3>
    <div class="box-tools pull-right">
     <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
     <i class="fa fa-minus"></i></button>
     <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
     <i class="fa fa-times"></i></button>
    </div>
   </div>
   <div class="box-body">
    @foreach($tasks as $task)
     <h5>
      {{ $task[&#39;name&#39;] }}
      <small class="label label-{{$task[&#39;color&#39;]}} pull-right">{{$task[&#39;progress&#39;]}}%</small>
     </h5>
     <div class="progress progress-xxs">
      <div class="progress-bar progress-bar-{{$task[&#39;color&#39;]}}" style="width: {{$task[&#39;progress&#39;]}}%">
      </div>
     </div>
    @endforeach
 
   </div><!-- /.box-body -->
   <div class="box-footer">
    <form action=&#39;#&#39;>
     <input type=&#39;text&#39; placeholder=&#39;New task&#39; class=&#39;form-control input-sm&#39; />
    </form>
   </div><!-- /.box-footer-->
  </div><!-- /.box -->
 </div><!-- /.col -->
 <div class=&#39;col-md-6&#39;>
  <!-- Box -->
  <div class="box box-primary">
   <div class="box-header with-border">
    <h3 class="box-title">Second Box</h3>
    <div class="box-tools pull-right">
     <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
     <i class="fa fa-minus"></i></button>
     <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
     <i class="fa fa-times"></i></button>
    </div>
   </div>
   <div class="box-body">
    A separate section to add any kind of widget. Feel free
    to explore all of AdminLTE widgets by visiting the demo page
    on <a href="https://almsaeedstudio.com">Almsaeed Studio</a>.
   </div><!-- /.box-body -->
  </div><!-- /.box -->
 </div><!-- /.col -->
 
</div><!-- /.row -->
@endsection

Copy after login

2. Create TestController.php

php artisan make:controller TestController --plain

Copy after login

The following is the code part of this controller:

<?php
 
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
 use App\Http\Requests;
 use App\Http\Controllers\Controller;
 
 class TestController extends Controller
 {
  public function index() {
  $data[&#39;tasks&#39;] = [
    [
     &#39;name&#39; => &#39;Design New Dashboard&#39;,
     &#39;progress&#39; => &#39;87&#39;,
     &#39;color&#39; => &#39;danger&#39;
    ],
    [
     &#39;name&#39; => &#39;Create Home Page&#39;,
     &#39;progress&#39; => &#39;76&#39;,
     &#39;color&#39; => &#39;warning&#39;
    ],
    [
     &#39;name&#39; => &#39;Some Other Task&#39;,
     &#39;progress&#39; => &#39;32&#39;,
     &#39;color&#39; => &#39;success&#39;
    ],
    [
     &#39;name&#39; => &#39;Start Building Website&#39;,
     &#39;progress&#39; => &#39;56&#39;,
     &#39;color&#39; => &#39;info&#39;
    ],
    [
     &#39;name&#39; => &#39;Develop an Awesome Algorithm&#39;,
     &#39;progress&#39; => &#39;10&#39;,
     &#39;color&#39; => &#39;success&#39;
    ]
  ];
  return view(&#39;test&#39;)->with($data);
 }
 
}

Copy after login

3. Create the corresponding route

Route::get(&#39;test&#39;, &#39;TestController@index&#39;);

Copy after login

4. Open the corresponding page. If you made no mistakes, it should be as shown below

Use AdminLTE template in PHPs Laravel framework to write website backend interface_php skills

The above is the content of using AdminLTE template to write website backend interface _php skills in PHP's Laravel framework. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Use AdminLTE template in PHP's Laravel framework to write website backend interface_php skills