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

Table of Contents

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

Articles you may be interested in:

Home

Backend Development

PHP Tutorial

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

laravel php

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

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

Copy after login

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

1	`cd myapp/public`

Copy after login

Execute the following command in this folder

1	`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 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');
});

Copy after login

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>

Copy after login

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:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

<!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 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'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'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, 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 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['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 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

1	`php artisan make:controller TestController --plain`

Copy after login

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);
 }
 
}

Copy after login

3. Create the corresponding route

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

Copy after login

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 of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7638

CakePHP Tutorial

1391

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

150

Related knowledge

PHP and Python: Comparing Two Popular Programming Languages Apr 14, 2025 am 12:13 AM

PHP and Python each have their own advantages, and choose according to project requirements. 1.PHP is suitable for web development, especially for rapid development and maintenance of websites. 2. Python is suitable for data science, machine learning and artificial intelligence, with concise syntax and suitable for beginners.

PHP's Current Status: A Look at Web Development Trends Apr 13, 2025 am 12:20 AM

PHP remains important in modern web development, especially in content management and e-commerce platforms. 1) PHP has a rich ecosystem and strong framework support, such as Laravel and Symfony. 2) Performance optimization can be achieved through OPcache and Nginx. 3) PHP8.0 introduces JIT compiler to improve performance. 4) Cloud-native applications are deployed through Docker and Kubernetes to improve flexibility and scalability.

PHP: A Key Language for Web Development Apr 13, 2025 am 12:08 AM

PHP is a scripting language widely used on the server side, especially suitable for web development. 1.PHP can embed HTML, process HTTP requests and responses, and supports a variety of databases. 2.PHP is used to generate dynamic web content, process form data, access databases, etc., with strong community support and open source resources. 3. PHP is an interpreted language, and the execution process includes lexical analysis, grammatical analysis, compilation and execution. 4.PHP can be combined with MySQL for advanced applications such as user registration systems. 5. When debugging PHP, you can use functions such as error_reporting() and var_dump(). 6. Optimize PHP code to use caching mechanisms, optimize database queries and use built-in functions. 7

PHP vs. Other Languages: A Comparison Apr 13, 2025 am 12:19 AM

PHP is suitable for web development, especially in rapid development and processing dynamic content, but is not good at data science and enterprise-level applications. Compared with Python, PHP has more advantages in web development, but is not as good as Python in the field of data science; compared with Java, PHP performs worse in enterprise-level applications, but is more flexible in web development; compared with JavaScript, PHP is more concise in back-end development, but is not as good as JavaScript in front-end development.

The Enduring Relevance of PHP: Is It Still Alive? Apr 14, 2025 am 12:12 AM

PHP is still dynamic and still occupies an important position in the field of modern programming. 1) PHP's simplicity and powerful community support make it widely used in web development; 2) Its flexibility and stability make it outstanding in handling web forms, database operations and file processing; 3) PHP is constantly evolving and optimizing, suitable for beginners and experienced developers.

PHP: The Foundation of Many Websites Apr 13, 2025 am 12:07 AM

The reasons why PHP is the preferred technology stack for many websites include its ease of use, strong community support, and widespread use. 1) Easy to learn and use, suitable for beginners. 2) Have a huge developer community and rich resources. 3) Widely used in WordPress, Drupal and other platforms. 4) Integrate tightly with web servers to simplify development deployment.

PHP's Purpose: Building Dynamic Websites Apr 15, 2025 am 12:18 AM

PHP is used to build dynamic websites, and its core functions include: 1. Generate dynamic content and generate web pages in real time by connecting with the database; 2. Process user interaction and form submissions, verify inputs and respond to operations; 3. Manage sessions and user authentication to provide a personalized experience; 4. Optimize performance and follow best practices to improve website efficiency and security.

PHP vs. Python: Core Features and Functionality Apr 13, 2025 am 12:16 AM

PHP and Python each have their own advantages and are suitable for different scenarios. 1.PHP is suitable for web development and provides built-in web servers and rich function libraries. 2. Python is suitable for data science and machine learning, with concise syntax and a powerful standard library. When choosing, it should be decided based on project requirements.

See all articles