สวัสดีครับ ในบทความนี้เราจะมาแนะนำ การนำ SB Admin2 นำมาใช้เป็น Theme ใน Laravel ของเราครับ ซึ่ง SB Admin2 นี้จะมาพร้อมกับ Bootstrap 4 สามารถดูตัวอย่างแบบเต็ม ๆ ได้ที่
https://startbootstrap.com/themes/sb-admin-2/
1.ก่อนอื่น ให้ Download Theme SBadmin2 มาก่อนครับ
เมื่อ Download มาแล้ว Extract File จะได้ Folder ต่าง ๆ ดังภาพ
จากนั้นเราจะทำการ Copy Folder ที่เก็บไฟล์ Css/Js ต่าง ๆ ไปไว้ที่ Laravel/public
Copy Folder
– css
-js
-vendor
วางไปที่ Folder ที่เก็บ Project Laravel (ตัวอย่าง laravel/public/)
ขั้นตอนต่อไปเราจะต้องมาแยกส่วน ต่าง ๆ ของ SbAdmin กันครับ
ดังนี้ครับ
ไปที่ Project Laravel สร้าง Folder laravel/resource/layout
จากนั้นสร้างไฟล์ ต่าง ๆ ไว้ภายใน Folder layout ดังนี้
1.main.blade.php
2.head.blade.php
3.sidebar.blade.php
4.navbar.blade.php
5.footer.blade.php
6.js.blade.php
ตัวอย่างไฟล์ main.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html lang="en"> <head> @include('layout.head') </head> <body id="page-top"> <!-- 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') </body> </html> |
ตัวอย่างไฟล์ head.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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 2 - Blank</title> <!-- Custom fonts for this template--> <link href="{{ asset('vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet" type="text/css" /> <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 styles for this template--> <link href="{{ asset('css/sb-admin-2.min.css') }}" rel="stylesheet" type="text/css" /> |
ตัวอย่างไฟล์ sidebar.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!-- Sidebar --> <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar"> <!-- Sidebar - Brand --> <a class="sidebar-brand d-flex align-items-center justify-content-center" href="#"> <div class="sidebar-brand-icon rotate-n-15"> <i class="fas fa-laugh-wink"></i> </div> <div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div> </a> <!-- Divider --> <hr class="sidebar-divider"> <!-- Heading --> <div class="sidebar-heading"> Interface </div> <!-- Nav Item - Pages Collapse Menu --> <li class="nav-item"> <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> <i class="fas fa-fw fa-cog"></i> <span>Components</span> </a> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar"> <div class="bg-white py-2 collapse-inner rounded"> <h6 class="collapse-header">Custom Components:</h6> <a class="collapse-item" href="#">Buttons</a> <a class="collapse-item" href="#">Cards</a> </div> </div> </li> </ul> <!-- End of Sidebar --> |
ตัวอย่างไฟล์ navbar.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 |
<!-- Topbar --> <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow"> <!-- Sidebar Toggle (Topbar) --> <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3"> <i class="fa fa-bars"></i> </button> <!-- Topbar Search --> <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search"> <div class="input-group"> <input type="text" class="form-control bg-light border-0 small" 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 fa-sm"></i> </button> </div> </div> </form> <!-- Topbar Navbar --> <ul class="navbar-nav ml-auto"> <!-- Nav Item - Search Dropdown (Visible Only XS) --> <li class="nav-item dropdown no-arrow d-sm-none"> <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-search fa-fw"></i> </a> <!-- Dropdown - Messages --> <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown"> <form class="form-inline mr-auto w-100 navbar-search"> <div class="input-group"> <input type="text" class="form-control bg-light border-0 small" 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 fa-sm"></i> </button> </div> </div> </form> </div> </li> <!-- Nav Item - Alerts --> <li class="nav-item dropdown no-arrow mx-1"> <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-bell fa-fw"></i> <!-- Counter - Alerts --> <span class="badge badge-danger badge-counter">3+</span> </a> <!-- Dropdown - Alerts --> <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown"> <h6 class="dropdown-header"> Alerts Center </h6> <a class="dropdown-item d-flex align-items-center" href="#"> <div class="mr-3"> <div class="icon-circle bg-primary"> <i class="fas fa-file-alt text-white"></i> </div> </div> <div> <div class="small text-gray-500">December 12, 2019</div> <span class="font-weight-bold">A new monthly report is ready to download!</span> </div> </a> <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a> </div> </li> <!-- Nav Item - Messages --> <li class="nav-item dropdown no-arrow mx-1"> <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-envelope fa-fw"></i> <!-- Counter - Messages --> <span class="badge badge-danger badge-counter">7</span> </a> <!-- Dropdown - Messages --> <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown"> <h6 class="dropdown-header"> Message Center </h6> <a class="dropdown-item d-flex align-items-center" href="#"> <div class="dropdown-list-image mr-3"> <img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60" alt=""> <div class="status-indicator bg-success"></div> </div> <div class="font-weight-bold"> <div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been having.</div> <div class="small text-gray-500">Emily Fowler · 58m</div> </div> </a> <a class="dropdown-item d-flex align-items-center" href="#"> <div class="dropdown-list-image mr-3"> <img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60" alt=""> <div class="status-indicator"></div> </div> <div> <div class="text-truncate">I have the photos that you ordered last month, how would you like them sent to you?</div> <div class="small text-gray-500">Jae Chun · 1d</div> </div> </a> <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a> </div> </li> <div class="topbar-divider d-none d-sm-block"></div> <!-- Nav Item - User Information --> <li class="nav-item dropdown no-arrow"> <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="mr-2 d-none d-lg-inline text-gray-600 small">Valerie Luna</span> <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60"> </a> <!-- Dropdown - User Information --> <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown"> <a class="dropdown-item" href="#"> <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i> Profile </a> <a class="dropdown-item" href="#"> <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i> Settings </a> <a class="dropdown-item" href="#"> <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i> Activity Log </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal"> <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Logout </a> </div> </li> </ul> </nav> <!-- End of Topbar --> |
ตัวอย่างไฟล์ footer.blade.php
|
1 2 3 4 5 6 7 8 9 |
<!-- Footer --> <footer class="sticky-footer bg-white"> <div class="container my-auto"> <div class="copyright text-center my-auto"> <span>Copyright © Your Website 2019</span> </div> </div> </footer> <!-- End of Footer --> |
ตัวอย่างไฟล์ js.blade.php
|
1 2 3 4 5 6 7 8 9 |
<!-- Bootstrap core JavaScript--> <script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script> <script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script> <!-- Core plugin JavaScript--> <script src="{{ asset('vendor/jquery-easing/jquery.easing.min.js') }}"></script> <!-- Custom scripts for all pages--> <script src="{{ asset('js/sb-admin-2.min.js') }}"></script> |
เมื่อสร้างไฟล์ layout ทั้งหมดแล้ว เราจะมาทำการทดสอบการทำงานกันต่อครับ
ก่อนอื่นสร้างไฟล์ table.blade.php เนื้อหาสำหรับแสดงผลกันก่อนครับ
ไปที่ laravel/resources/views/table.blade.php ใส่ Code ดังนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
@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 |
จากนั้นไปที่ laravel/routes/web.php เพื่อกำหนดให้แสดงผล view ที่เราต้องการ
ตัวอย่างจะกำหนดให้ หน้าแรก ของ laravel มาเรียกใช้งาน view table.blade.php ที่เราเพิ่งสร้างกันไปครับ
ตัวอย่างไฟล์ web.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', function () { return view('table'); }); |
หากไม่มีอะไรผิดพลาดจะแสดงผลดังภาพ
