Giao diện miễn phí đầy đủ của SB Admin như hình dưới đây:
Bước 1:
Sau khi các bạn download SB Admin về máy tính, chúng ta bắt đầu giải nénBước 2:
Chúng ta tiến hành Sao chép (Copy) các thư mục css, js, vendor vào thư mục public của Source Laravel đang làm.Bước 3:
Chúng ta tiếp tạo thư mục laravel/resource/views/admin/layout trong Project Laravel. . Sau đó tạo tập tin trong thư mục layout như sau:- index.blade.php
- head.blade.php
- sidebar.blade.php
- navbar.blade.php
- footer.blade.php
- js.blade.php
Ví dụ minh họa sau khi tạo xong các file php trong Laravel
Bước 4:
Chúng ta bắt đầu viết code cho các file vừa tạo trong thư mục layout như sau:1. File header.blade.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="description" content="" /> <meta name="author" content="" /> <title>SB Admin in Project Laravel </title> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <!-- Custom fonts FOR this template--> <link href="{{asset('css/styles.css')}}" rel="stylesheet" /> <link href="{{asset('css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" crossorigin="anonymous" /> <script src="{{asset('js/all.min.js')}}" crossorigin="anonymous"></script> </head> <body class="sb-nav-fixed">
2. File index.blade.php
3. File sidebar.blade.php
- @INCLUDE('layout.head')
- <!-- Page Wrapper -->
- <div id="wrapper">
- @INCLUDE('layout.sidebar')
- <!-- Content Wrapper -->
- <div id="content-wrapper" CLASS="d-flex flex-column">
- <!-- Main Content -->
- <div id="content">
- @INCLUDE('layout.navbar')
- <!-- Begin Page Content -->
- <div CLASS="container-fluid">
- @yield('content')
- </div>
- <!-- /.container-fluid -->
- </div>
- <!-- End of Main Content -->
- @INCLUDE('layout.footer')
- </div>
- <!-- End of Content Wrapper -->
- </div>
- <!-- End of Page Wrapper -->
- @INCLUDE('layout.js')
<div id="layoutSidenav_nav"> <nav class="sb-sidenav accordion sb-sidenav-light" id="sidenavAccordion"> <div class="sb-sidenav-menu"> <div class="nav"> <div class="sb-sidenav-menu-heading">Core</div> <a class="nav-link" href="index.html"> <div class="sb-nav-link-icon"> <i class="fas fa-tachometer-alt"></i> </div>Dashboard </a> <div class="sb-sidenav-menu-heading">Interface</div> <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts"> <div class="sb-nav-link-icon"> <i class="fas fa-columns"></i> </div>Products <div class="sb-sidenav-collapse-arrow"> <i class="fas fa-angle-down"></i> </div> </a> <div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-parent="#sidenavAccordion"> <nav class="sb-sidenav-menu-nested nav"> <a class="nav-link" href="layout-static.html">List Product</a> <a class="nav-link" href="layout-sidenav-light.html">Add Product</a> </nav> </div> <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages"> <div class="sb-nav-link-icon"> <i class="fas fa-book-open"></i> </div>Pages <div class="sb-sidenav-collapse-arrow"> <i class="fas fa-angle-down"></i> </div> </a> <div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-parent="#sidenavAccordion"> <nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages"> <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">Users <div class="sb-sidenav-collapse-arrow"> <i class="fas fa-angle-down"></i> </div> </a> <div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages"> <nav class="sb-sidenav-menu-nested nav"> <a class="nav-link" href="login.html">Login</a> <a class="nav-link" href="register.html">Register</a> <a class="nav-link" href="password.html">Forgot Password</a> </nav> </div> </nav> </div> </div> </div> </nav> </div>
4. File navbar.blade.php
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark"> <a class="navbar-brand" href="index.html">Start Bootstrap</a><button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#"><i class="fas fa-bars"></i></button ><!-- Navbar Search--> <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0"> <div class="input-group"> <input class="form-control" type="text" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2" /> <div class="input-group-append"> <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button> </div> </div> </form> <!-- Navbar--> <ul class="navbar-nav ml-auto ml-md-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="userDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown"> <a class="dropdown-item" href="#">Settings</a><a class="dropdown-item" href="#">Activity Log</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="login.html">Logout</a> </div> </li> </ul> </nav>
5. File footer.blade.php
6. File js.blade.php
<footer class="py-4 bg-light mt-auto"> <div class="container-fluid"> <div class="d-flex align-items-center justify-content-between small"> <div class="text-muted">Copyright © Your Website 2020</div> <div> <a href="#">IZDESIGN.XYZ</a> </div> </div> </div> </footer> </body> </html>
<script src="{{asset('js/jquery.min.js')}" crossorigin="anonymous"></script> <script src="{{asset('js/bootstrap.bundle.min.js')}" crossorigin="anonymous"></script> <script src="{{asset('js/scripts.js')}"></script> <script src="{{asset('js/Chart.min.js')}" crossorigin="anonymous"></script> <script src="{{asset('assets/demo/chart-area-demo.js')}"></script> <script src="{{asset('assets/demo/chart-bar-demo.js')}"></script> <script src="{{asset('js/jquery.dataTables.min.js')}" crossorigin="anonymous"></script> <script src="{{asset('js/dataTables.bootstrap4.min.js')}" crossorigin="anonymous"></script> <script src="{{asset('assets/demo/datatables-demo.js')}"></script>
7. File demo.blade.php
@EXTENDS('layout.main') @section('content') <!-- DataTales Example --> <div CLASS="card shadow mb-4"> <div CLASS="card-header py-3"> <h6 CLASS="m-0 font-weight-bold text-primary">DataTables Example</h6> </div> <div CLASS="card-body"> <div CLASS="table-responsive"> <table CLASS="table table-bordered" id="dataTable" width="100%" cellspacing="0"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> </tbody> </table> </div> </div> </div> @endsection
Cảm ơn các bạn đã theo dõi, Chúc các bạn thành công