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

Use the AdminLTE template in PHP's Laravel framework to write the website backend interface, laraveladminlte_PHP tutorial

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 12, 2016 am 08:56 AM

laravelphp

AdminLTE template is used in PHP's Laravel framework to write the website backend interface. laraveladminlte

AdminLTE is a free advanced management 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:

Full response
Classifiable dashboard
18 plugins and 3 custom plugins
Lightweight and fast
Compatible with most major browsers
Full support for 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 view the documentation link
Here we can use the command line directly

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

With this command we create a new Laravel project named myapp. If you succeed, you can see the picture below

2016321173918278.png (800×498)

Download AdminLTE via Bower
Go to the myapp/public folder

 
 cd myapp/public

Execute the following command in this folder

 bower install admin-lte

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

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

 Route::get('admin', function () {
  return view('admin_template');
 });

Then, copy the content in bower_components/admin-lte/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>

Similar to this, point the relevant links of css and js to the corresponding directory, and then we check the changes of the page through localhost:8000/admin. At this time, the page becomes as follows:

2016321174005589.jpg (800×472)

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

Final touches
Now that we have personalized our templates separated, we need to set up our initial admin_template.blade.php
Template to facilitate dynamic loading of content, as shown below:

<!DOCTYPE html>
<html>
head>
<meta charset="UTF-8">
<title>{{ $page_title or "AdminLTE Dashboard" }}</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- 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'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('header')

<!-- Sidebar -->
@include('sidebar')

<!-- 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('content')
 </section><!-- /.content -->
</div><!-- /.content-wrapper -->

<!-- Footer -->
@include('footer')
<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 id="Recent-Activity">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 id="Langdon-s-Birthday">Langdon's Birthday</h4>

   <p>Will be 23 on April 24th</p>
   </div>
  </a>
  </li>
 </ul>
 <!-- /.control-sidebar-menu -->

 <h3 id="Tasks-Progress">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 id="General-Settings">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'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>

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

Test page

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

1. Create test.blade.php

@extends('dashboard')
@section('content')
<div class='row'>
 <div class='col-md-6'>
  <!-- Box -->
  <div class="box box-primary">
   <div class="box-header with-border">
    <h3 id="Randomly-Generated-Tasks">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['name'] }}
      <small class="label label-{{$task['color']}} pull-right">{{$task['progress']}}%</small>
     </h5>
     <div class="progress progress-xxs">
      <div class="progress-bar progress-bar-{{$task['color']}}" style="width: {{$task['progress']}}%"></div>
     </div>
    @endforeach

   </div><!-- /.box-body -->
   <div class="box-footer">
    <form action='#'>
     <input type='text' placeholder='New task' class='form-control input-sm' />
    </form>
   </div><!-- /.box-footer-->
  </div><!-- /.box -->
 </div><!-- /.col -->
 <div class='col-md-6'>
  <!-- Box -->
  <div class="box box-primary">
   <div class="box-header with-border">
    <h3 id="Second-Box">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

2. Create TestController.php

php artisan make:controller TestController --plain

The following is the code part of this controller:

 <&#63;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['tasks'] = [
     [
      'name' => 'Design New Dashboard',
      'progress' => '87',
      'color' => 'danger'
     ],
     [
      'name' => 'Create Home Page',
      'progress' => '76',
      'color' => 'warning'
     ],
     [
      'name' => 'Some Other Task',
      'progress' => '32',
      'color' => 'success'
     ],
     [
      'name' => 'Start Building Website',
      'progress' => '56',
      'color' => 'info'
     ],
     [
      'name' => 'Develop an Awesome Algorithm',
      'progress' => '10',
      'color' => 'success'
     ]
   ];
   return view('test')->with($data);
  }

 }

3. Create the corresponding route

 Route::get('test', 'TestController@index');

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

2016321174155654.jpg (800×472)

Articles you may be interested in:

In-depth analysis of event operations in PHP's Laravel framework
PHP's Laravel framework combined with MySQL and Redis database deployment
How to use message queue queue and asynchronous queue in PHP's Laravel framework
Detailed explanation of the use of Eloquent object-relational mapping in PHP's Laravel framework
Experience of learning PHP framework Laravel
Comprehensive interpretation of PHP's popular development framework Laravel
Sharing of configuration files for running PHP framework Laravel in Nginx
PHP IDE PHPStorm configuration supports friendly Laravel code prompt method
Usage PHPStorm Develop Laravel
PHP development framework laravel installation and configuration tutorial
Two tips for PHP framework Laravel

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is the difference between unset() and session_destroy()?May 04, 2025 am 12:19 AM

Thedifferencebetweenunset()andsession_destroy()isthatunset()clearsspecificsessionvariableswhilekeepingthesessionactive,whereassession_destroy()terminatestheentiresession.1)Useunset()toremovespecificsessionvariableswithoutaffectingthesession'soveralls

What is sticky sessions (session affinity) in the context of load balancing?May 04, 2025 am 12:16 AM

Stickysessionsensureuserrequestsareroutedtothesameserverforsessiondataconsistency.1)SessionIdentificationassignsuserstoserversusingcookiesorURLmodifications.2)ConsistentRoutingdirectssubsequentrequeststothesameserver.3)LoadBalancingdistributesnewuser

What are the different session save handlers available in PHP?May 04, 2025 am 12:14 AM

PHPoffersvarioussessionsavehandlers:1)Files:Default,simplebutmaybottleneckonhigh-trafficsites.2)Memcached:High-performance,idealforspeed-criticalapplications.3)Redis:SimilartoMemcached,withaddedpersistence.4)Databases:Offerscontrol,usefulforintegrati

What is a session in PHP, and why are they used?May 04, 2025 am 12:12 AM

Session in PHP is a mechanism for saving user data on the server side to maintain state between multiple requests. Specifically, 1) the session is started by the session_start() function, and data is stored and read through the $_SESSION super global array; 2) the session data is stored in the server's temporary files by default, but can be optimized through database or memory storage; 3) the session can be used to realize user login status tracking and shopping cart management functions; 4) Pay attention to the secure transmission and performance optimization of the session to ensure the security and efficiency of the application.

Explain the lifecycle of a PHP session.May 04, 2025 am 12:04 AM

PHPsessionsstartwithsession_start(),whichgeneratesauniqueIDandcreatesaserverfile;theypersistacrossrequestsandcanbemanuallyendedwithsession_destroy().1)Sessionsbeginwhensession_start()iscalled,creatingauniqueIDandserverfile.2)Theycontinueasdataisloade

What is the difference between absolute and idle session timeouts?May 03, 2025 am 12:21 AM

Absolute session timeout starts at the time of session creation, while an idle session timeout starts at the time of user's no operation. Absolute session timeout is suitable for scenarios where strict control of the session life cycle is required, such as financial applications; idle session timeout is suitable for applications that want users to keep their session active for a long time, such as social media.

What steps would you take if sessions aren't working on your server?May 03, 2025 am 12:19 AM

The server session failure can be solved through the following steps: 1. Check the server configuration to ensure that the session is set correctly. 2. Verify client cookies, confirm that the browser supports it and send it correctly. 3. Check session storage services, such as Redis, to ensure that they are running normally. 4. Review the application code to ensure the correct session logic. Through these steps, conversation problems can be effectively diagnosed and repaired and user experience can be improved.

What is the significance of the session_start() function?May 03, 2025 am 12:18 AM

session_start()iscrucialinPHPformanagingusersessions.1)Itinitiatesanewsessionifnoneexists,2)resumesanexistingsession,and3)setsasessioncookieforcontinuityacrossrequests,enablingapplicationslikeuserauthenticationandpersonalizedcontent.

See all articles