/ / Hướng dẫn cách tích hợp Template SB Admin vào Laravel

Hướng dẫn cách tích hợp Template SB Admin vào Laravel

Chúng ta cùng tìm hiểu cách tích hợp Tempate SB Admin (sử dụng Bootstrap 4) vào Laravel Framework dành cho các bạn mới bắt đầu học Laravel căn bản

Giao diện miễn phí đầy đủ của SB Admin như hình dưới đây:


Các bạn download SB Admin: https://startbootstrap.com/templates/sb-admin/

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én

Bướ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:

  1. index.blade.php
  2. head.blade.php
  3. sidebar.blade.php
  4. navbar.blade.php
  5. footer.blade.php
  6. 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
    

  1. 
<!DOCTYPE html>
    

    2. 

  2. 
<html lang="en">
    

    3. 

  3. 
<head>
    

    4. 

  4. 
<meta charset="utf-8" />
    

    5. 

  5. 
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    

    6. 

  6. 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    

    7. 

  7. 
<meta name="description" content="" />
    

    8. 

  8. 
<meta name="author" content="" />
    

    9. 

  9. 
<title>SB Admin in Project Laravel </title>
    

    10. 

  10. 
<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">
    

    11. 

  11. 
<!-- Custom fonts FOR this template-->
    

    12. 

  12. 
<link href="{{asset('css/styles.css')}}" rel="stylesheet" />
    

    13. 

  13. 
<link href="{{asset('css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" crossorigin="anonymous" />
    

    14. 

  14. 
<script src="{{asset('js/all.min.js')}}" crossorigin="anonymous"></script>
    

    15. 

  15. 
</head>
    

    16. 

  16. 
<body class="sb-nav-fixed">
    

    17.

2. File index.blade.php
  1. @INCLUDE('layout.head')
  2. <!-- Page Wrapper -->
  3. <div id="wrapper">
  4.   @INCLUDE('layout.sidebar')
  5.   <!-- Content Wrapper -->
  6.   <div id="content-wrapper" CLASS="d-flex flex-column">
  7.     <!-- Main Content -->
  8.     <div id="content">
  9.         @INCLUDE('layout.navbar')
  10.       <!-- Begin Page Content -->
  11.       <div CLASS="container-fluid">
  12.           @yield('content')
  13.       </div>
  14.       <!-- /.container-fluid -->
  15.     </div>
  16.     <!-- End of Main Content -->
  17.     @INCLUDE('layout.footer')
  18.   </div>
  19.   <!-- End of Content Wrapper -->
  20. </div>
  21. <!-- End of Page Wrapper -->
  22. @INCLUDE('layout.js')
3. File sidebar.blade.php
  1. <div id="layoutSidenav_nav">
  2.  <nav class="sb-sidenav accordion sb-sidenav-light" id="sidenavAccordion">
  3.   <div class="sb-sidenav-menu">
  4.    <div class="nav">
  5.     <div class="sb-sidenav-menu-heading">Core</div>
  6.     <a class="nav-link" href="index.html">
  7.      <div class="sb-nav-link-icon">
  8.       <i class="fas fa-tachometer-alt"></i>
  9.      </div>Dashboard
  10.     </a>
  11.     <div class="sb-sidenav-menu-heading">Interface</div>
  12.     <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
  13.      <div class="sb-nav-link-icon">
  14.       <i class="fas fa-columns"></i>
  15.      </div>Products
  16.      <div class="sb-sidenav-collapse-arrow">
  17.       <i class="fas fa-angle-down"></i>
  18.      </div>
  19.     </a>
  20.     <div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-parent="#sidenavAccordion">
  21.      <nav class="sb-sidenav-menu-nested nav">
  22.       <a class="nav-link" href="layout-static.html">List Product</a>
  23.       <a class="nav-link" href="layout-sidenav-light.html">Add Product</a>
  24.      </nav>
  25.     </div>
  26.     <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages">
  27.      <div class="sb-nav-link-icon">
  28.       <i class="fas fa-book-open"></i>
  29.      </div>Pages
  30.      <div class="sb-sidenav-collapse-arrow">
  31.       <i class="fas fa-angle-down"></i>
  32.      </div>
  33.     </a>
  34.     <div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-parent="#sidenavAccordion">
  35.      <nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
  36.       <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">Users
  37.        <div class="sb-sidenav-collapse-arrow">
  38.         <i class="fas fa-angle-down"></i>
  39.        </div>
  40.       </a>
  41.       <div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages">
  42.        <nav class="sb-sidenav-menu-nested nav">
  43.         <a class="nav-link" href="login.html">Login</a>
  44.         <a class="nav-link" href="register.html">Register</a>
  45.         <a class="nav-link" href="password.html">Forgot Password</a>
  46.        </nav>
  47.       </div>
  48.      </nav>
  49.     </div>
  50.    </div>
  51.   </div>
  52.  </nav>
  53. </div>

4. File navbar.blade.php
  1. <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
  2.     <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
  3.     ><!-- Navbar Search-->
  4.     <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
  5.         <div class="input-group">
  6.             <input class="form-control" type="text" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2" />
  7.             <div class="input-group-append">
  8.                 <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
  9.             </div>
  10.         </div>
  11.     </form>
  12.     <!-- Navbar-->
  13.     <ul class="navbar-nav ml-auto ml-md-0">
  14.         <li class="nav-item dropdown">
  15.             <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>
  16.             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
  17.                 <a class="dropdown-item" href="#">Settings</a><a class="dropdown-item" href="#">Activity Log</a>
  18.                 <div class="dropdown-divider"></div>
  19.                 <a class="dropdown-item" href="login.html">Logout</a>
  20.             </div>
  21.         </li>
  22.     </ul>
  23. </nav>

5. File footer.blade.php
    

  1. 
<footer class="py-4 bg-light mt-auto">
    

    2. 

  2. 
<div class="container-fluid">
    

    3. 

  3. 
<div class="d-flex align-items-center justify-content-between small">
    

    4. 

  4. 
<div class="text-muted">Copyright &copy; Your Website 2020</div>
    

    5. 

  5. 
<div>
    

    6. 

  6. 
<a href="#">IZDESIGN.XYZ</a>
    

    7. 

  7. 
</div>
    

    8. 

  8. 
</div>
    

    9. 

  9. 
</div>
    

    10. 

  10. 
</footer>
    

    11. 

  11. 
</body>
    

    12. 

  12. 
</html>
    

    13.
6. File js.blade.php
  1. <script src="{{asset('js/jquery.min.js')}" crossorigin="anonymous"></script>
  2. <script src="{{asset('js/bootstrap.bundle.min.js')}" crossorigin="anonymous"></script>
  3. <script src="{{asset('js/scripts.js')}"></script>
  4. <script src="{{asset('js/Chart.min.js')}" crossorigin="anonymous"></script>
  5. <script src="{{asset('assets/demo/chart-area-demo.js')}"></script>
  6. <script src="{{asset('assets/demo/chart-bar-demo.js')}"></script>
  7. <script src="{{asset('js/jquery.dataTables.min.js')}" crossorigin="anonymous"></script>
  8. <script src="{{asset('js/dataTables.bootstrap4.min.js')}" crossorigin="anonymous"></script>
  9. <script src="{{asset('assets/demo/datatables-demo.js')}"></script>

7. File demo.blade.php
  1. @EXTENDS('layout.main')
  2.  
  3. @section('content')
  4.  
  5.     <!-- DataTales Example -->
  6.     <div CLASS="card shadow mb-4">
  7.         <div CLASS="card-header py-3">
  8.           <h6 CLASS="m-0 font-weight-bold text-primary">DataTables Example</h6>
  9.         </div>
  10.             <div CLASS="card-body">
  11.               <div CLASS="table-responsive">
  12.                 <table CLASS="table table-bordered" id="dataTable" width="100%" cellspacing="0">
  13.                   <thead>
  14.                     <tr>
  15.                       <th>Name</th>
  16.                       <th>Position</th>
  17.                       <th>Office</th>
  18.                       <th>Age</th>
  19.                       <th>Start date</th>
  20.                       <th>Salary</th>
  21.                     </tr>
  22.                   </thead>
  23.  
  24.                   <tbody>
  25.                     <tr>
  26.                       <td>Tiger Nixon</td>
  27.                       <td>System Architect</td>
  28.                       <td>Edinburgh</td>
  29.                       <td>61</td>
  30.                       <td>2011/04/25</td>
  31.                       <td>$320,800</td>
  32.                     </tr>
  33.                     <tr>
  34.                       <td>Garrett Winters</td>
  35.                       <td>Accountant</td>
  36.                       <td>Tokyo</td>
  37.                       <td>63</td>
  38.                       <td>2011/07/25</td>
  39.                       <td>$170,750</td>
  40.                     </tr>
  41.                     <tr>
  42.                       <td>Ashton Cox</td>
  43.                       <td>Junior Technical Author</td>
  44.                       <td>San Francisco</td>
  45.                       <td>66</td>
  46.                       <td>2009/01/12</td>
  47.                       <td>$86,000</td>
  48.                     </tr>
  49.                     <tr>
  50.                       <td>Cedric Kelly</td>
  51.                       <td>Senior Javascript Developer</td>
  52.                       <td>Edinburgh</td>
  53.                       <td>22</td>
  54.                       <td>2012/03/29</td>
  55.                       <td>$433,060</td>
  56.                     </tr>
  57.  
  58.                   </tbody>
  59.                 </table>
  60.               </div>
  61.             </div>
  62.     </div>
  63.  
  64. @endsection

Cảm ơn các bạn đã theo dõi, Chúc các bạn thành công
Google Pinterest

About Kevin Nguyen

Xin chào các bạn. Blog IZDesign này với mục đích chia sẻ những kiến thức về đồ họa, cũng như giao lưu với những bạn có cùng đam mê và sở thích. Nếu bạn cảm thấy có hứng thú với blog của chúng tôi, vui lòng để lại cho mình một vài comment và cùng giúp mình chia sẻ đến bạn bè của bạn nhé. Cám ơn sự quan tâm của các bạn rất nhiều..