Hello, everyone. This is the latest edition of Learning Python. What can YOU do? Django tutorials from scratch to finally successfully deploy live projects. In this section, we’ll integrate AdminLTE into a Django project.

Peekpa.com official address: Peekpa.com

In the last lecture, we moved the Login example from AdminLTE into our project, so in this section, we need to integrate the Dashboard from AdminLTE.

Demand analysis

Why inherit the Dashboard from AdminLTE? The reason is simple, if you look at AdminLTE it looks like:

Select the page

First let’s take a quick look at the page content we want to inherit.

We definitely want to create a page similar to the central console, the central console, roughly has the following parts:

  • The menu bar on the left, this is the most critical;
  • The content page on the right has a page for each menu option;
  • Top menu bar;

Begin to integrate

Next, it’s time to integrate AdminLTE into the system.

First, create a file called dashboard.html, again in the Templates folder. This is the same step we did last time when we started integrating Login.

Next, we go to the AdminLTE file we have downloaded and open any index.html file to see what AdminLTE looks like in the browser.

Since we want to integrate, we need to find the code. This is easy, so we can right click on the AdminLTE page to see the source of the page:

The head tags

The first is the head tag, because the head tag is generally used to store the basic meta information of the web page, so we also paste the code of this part of the tag here:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 3 | Dashboard</title>
  <! -- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <! -- Font Awesome -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <! -- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <! -- Tempusdominus Bbootstrap 4 -->
  <link rel="stylesheet" href="plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
  <! -- iCheck -->
  <link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <! -- JQVMap -->
  <link rel="stylesheet" href="plugins/jqvmap/jqvmap.min.css">
  <! -- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <! -- overlayScrollbars -->
  <link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <! -- Daterange picker -->
  <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
  <! -- summernote -->
  <link rel="stylesheet" href="plugins/summernote/summernote-bs4.css">
  <! -- Google Font: Source Sans Pro -->
  <link href="Https://fonts.googleapis.com/css?family=Source+Sans+Pro:300, 400400 I, 700" rel="stylesheet">
</head>
Copy the code

Again, if you paste it without doing anything, you’re still going to lose a lot of stuff, and it’s the same problem that we had last time, and of course, the solution is the same, and we’re going to do the importing of resources later, so let’s paste the code,

NavBar

The NavBar at the top looks like this in the Demo:

See the source code inside the next part is the top of the Navbar, this we also paste over, be sure to pay attention to the structure of the paste time do not change, Navbar is under the Body tag, and the Body tag has Class, do not forget to paste.

Since we don’t need as much information as Navbar here, we can trim it down a bit. Delete the notification button on the far right, leaving only the links and searches on the left:

<! -- Navbar -->
    <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="index3.html" 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>

        <! -- SEARCH FORM -->
        <form class="form-inline ml-3">
            <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>
                </div>
            </div>
        </form>

    </nav>
Copy the code

SideBar

Next is the SideBar on the left, which is a major play:

Also, when copying and pasting, pay attention to the structure of the code.

<! -- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <! -- Brand Logo -->
        <a href="index3.html" class="brand-link">
            <img src="https://via.placeholder.com/100x100" 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 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 has-treeview menu-open">
                        <a href="#" class="nav-link active">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            <p>
                                Dashboard
                                <i class="right fas fa-angle-left"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a href="./index.html" class="nav-link active">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Dashboard v1</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="./index2.html" class="nav-link">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>Dashboard v2</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-header">EXAMPLES</li>
                    <li class="nav-item">
                        <a href="pages/gallery.html" class="nav-link">
                            <i class="nav-icon far fa-image"></i>
                            <p>
                                Gallery
                            </p>
                        </a>
                    </li>
                </ul>
            </nav>
            <! -- /.sidebar-menu -->
        </div>
        <! -- /.sidebar -->
    </aside>
Copy the code

Body content

Then there is the home page on the right, because the tabs on the left correspond to different pages, so the one on the right is actually a container. The key word in the source code is Content-wrapper, so we just need to transplant the outermost div.

 <! -- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        <! -- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row d-flex justify-content-around pt-4 mb-4">
                    <p class="h5">Public number "PI Ye lu code", serialized update this system development tutorial, please pay attention to</p>
                </div>
                <div class="row d-flex justify-content-around">
                    <img class="img-thumbnail" src=".. /src/images/pylm-qrcode.jpg" alt="">
                </div>
            </div>
        </section>
    </div>
Copy the code

footer

Next you will find on the right side of the main page, each page has a footer, the key word in the source is footer, we do not need here, so not paste, if you need students, you can paste, according to the content described above, the process of self-paste can be completely as a small exercise to do.

Script

Script content, usually before the whole body content, at the end of the body content, this contains basically all of the JavaScript code in the web page, you can also put the Script part in the header, if you do that, it will slow down the speed of the web page, because the web page loads the content in the head first, Placing some script code in the body before rendering the body allows the browser to render the body content before loading the script. Increase the speed.

This part of the paste also needs to change all actual references to relative addresses:

<! -- jQuery -->
<script src=".. /dist/adminlte/plugins/jquery/jquery.min.js"></script>
<! -- jQuery UI 1.11.4 -->

<! -- Bootstrap 4 -->
<script src=".. /dist/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<! -- ChartJS -->
<script src=".. /dist/adminlte/plugins/chart.js/Chart.min.js"></script>
<! -- Sparkline -->
<script src=".. /dist/adminlte/plugins/sparklines/sparkline.js"></script>
<! -- jQuery Knob Chart -->
<script src=".. /dist/adminlte/plugins/jquery-knob/jquery.knob.min.js"></script>
<! -- daterangepicker -->
<script src=".. /dist/adminlte/plugins/moment/moment.min.js"></script>
<script src=".. /dist/adminlte/plugins/daterangepicker/daterangepicker.js"></script>
<! -- Tempusdominus Bootstrap 4 -->
<script src=".. /dist/adminlte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<! -- Summernote -->
<script src=".. /dist/adminlte/plugins/summernote/summernote-bs4.min.js"></script>
<! -- overlayScrollbars -->
<script src=".. /dist/adminlte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<! -- AdminLTE App -->
<script src=".. /dist/adminlte/dist/js/adminlte.js"></script>
Copy the code

The links above are fixed, and I have copied and pasted the missing items into the AdminLTE folder in the dist directory. Also, don’t forget to fix the path problem in the head mentioned above

Technical summary

So just to conclude,

Dashboard steps for integrating AdminLTE:

  1. Download the source code and open Demo
  2. Right click to view the page source
  3. In the source code, according to the HTML structure of the Demo page copy paste
  4. Modify head and script paths to fix missing file references
  5. To complete.

The only way to get the code: follow “PI Ye Lu code” and reply “code” to get it.

Long press the two-dimensional code below to pay attention to, if the article is inspiring to you, welcome to look at and forward.