Setup dự án Laravel phần mềm quản lý phòng trọ

Setup dự án Laravel phần mềm quản lý phòng trọ

Hôm nay mình sẽ hướng dẫn các bạn setup một project Laravel thông qua project phần mềm quản lý nhà trọ

Đầu tiên sẽ là tạo project phần mềm quản lý nhà trọng với Laravel bằng công cụ composer việc này khá là dễ nhờ một câu lệnh thần thánh đó là:

composer create-project --prefer-dist laravel/laravel motelmanager

Sau khi gõ lệnh trên thì composer sẽ tự động tạo một project Laravel cho bạn một cách dễ dàng.

Sau khi đã có project chúng ta sẽ cấu hình một số thứ như sau:

Tạo các thư mục cần thiết cho project, mình sẽ tạo cấu trúc như sau:

Trong thư mục asset mình sẽ có các thư mục con là: css, js, img,…… để lưu các file tài nguyên cho project.

Trong thư mục views chúng ta cũng cần tạo thư mục layouts để chứ các file layout cơ bản dùng chung của một website như các phần header, footer.

Trong project này mình sẽ sử dung scss và các thư viện từ npm nên tất cả các file js và css mình sẽ đặt ở resource. Mình cũng sẽ lên mạng download một admin template về đẻ sử dụng cho project này và gói template mà mình sử dụng là adminlite.

Cấu trúc file project

Cấu trúc project của chúng ta sẽ trông như thế này.

Sau đó bạn mở file header.blade.php lên và coppy phần đầu của bố cục trong trang template vào file này vì file này sẽ chưa các thành phần dùng chung của header trang web như logo menu, slide show…..

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

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

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>AdminLTE 3 | Blank Page</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">

    <!-- overlayScrollbars -->

    <link rel="stylesheet" href="css/adminlte.min.css">

    <!-- Google Font: Source Sans Pro -->

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

    <!-- jQuery -->

    <script src="plugins/jquery/jquery.min.js"></script>

</head>

<body class="hold-transition sidebar-mini">

    <!-- Site wrapper -->

    <div class="wrapper">

        <!-- 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>

            <!-- Right navbar links -->

            <ul class="navbar-nav ml-auto">

                <!-- Messages Dropdown Menu -->

                <li class="nav-item dropdown">

                    <a class="nav-link" data-toggle="dropdown" href="#">

                        <i class="far fa-comments"></i>

                        <span class="badge badge-danger navbar-badge">3</span>

                    </a>

                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">

                        <a href="#" class="dropdown-item">

                            <!-- Message Start -->

                            <div class="media">

                                <img src="img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">

                                <div class="media-body">

                                    <h3 class="dropdown-item-title">

                                        Brad Diesel

                                        <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>

                                    </h3>

                                    <p class="text-sm">Call me whenever you can...</p>

                                    <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>

                                </div>

                            </div>

                            <!-- Message End -->

                        </a>

                        <div class="dropdown-divider"></div>

                        <a href="#" class="dropdown-item">

                            <!-- Message Start -->

                            <div class="media">

                                <img src="img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">

                                <div class="media-body">

                                    <h3 class="dropdown-item-title">

                                        John Pierce

                                        <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>

                                    </h3>

                                    <p class="text-sm">I got your message bro</p>

                                    <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>

                                </div>

                            </div>

                            <!-- Message End -->

                        </a>

                        <div class="dropdown-divider"></div>

                        <a href="#" class="dropdown-item">

                            <!-- Message Start -->

                            <div class="media">

                                <img src="img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">

                                <div class="media-body">

                                    <h3 class="dropdown-item-title">

                                        Nora Silvester

                                        <span class="float-right text-sm text-warning"><i

                                                class="fas fa-star"></i></span>

                                    </h3>

                                    <p class="text-sm">The subject goes here</p>

                                    <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>

                                </div>

                            </div>

                            <!-- Message End -->

                        </a>

                        <div class="dropdown-divider"></div>

                        <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>

                    </div>

                </li>

                <!-- Notifications Dropdown Menu -->

                <li class="nav-item dropdown">

                    <a class="nav-link" data-toggle="dropdown" href="#">

                        <i class="far fa-bell"></i>

                        <span class="badge badge-warning navbar-badge">15</span>

                    </a>

                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">

                        <span class="dropdown-item dropdown-header">15 Notifications</span>

                        <div class="dropdown-divider"></div>

                        <a href="#" class="dropdown-item">

                            <i class="fas fa-envelope mr-2"></i> 4 new messages

                            <span class="float-right text-muted text-sm">3 mins</span>

                        </a>

                        <div class="dropdown-divider"></div>

                        <a href="#" class="dropdown-item">

                            <i class="fas fa-users mr-2"></i> 8 friend requests

                            <span class="float-right text-muted text-sm">12 hours</span>

                        </a>

                        <div class="dropdown-divider"></div>

                        <a href="#" class="dropdown-item">

                            <i class="fas fa-file mr-2"></i> 3 new reports

                            <span class="float-right text-muted text-sm">2 days</span>

                        </a>

                        <div class="dropdown-divider"></div>

                        <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>

                    </div>

                </li>

                <li class="nav-item">

                    <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">

                        <i class="fas fa-th-large"></i>

                    </a>

                </li>

            </ul>

        </nav>

        <!-- /.navbar -->

        <!-- Main Sidebar Container -->

        <aside class="main-sidebar sidebar-dark-primary elevation-4">

            <!-- Brand Logo -->

            <a href="../../index3.html" class="brand-link">

                <img src="img/AdminLTELogo.png" 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 user (optional) -->

                <div class="user-panel mt-3 pb-3 mb-3 d-flex">

                    <div class="image">

                        <img src="img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">

                    </div>

                    <div class="info">

                        <a href="#" class="d-block">Alexander Pierce</a>

                    </div>

                </div>

                <!-- 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">

                            <a href="#" class="nav-link">

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

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

                                <li class="nav-item">

                                    <a href="../../index3.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Dashboard v3</p>

                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="nav-item">

                            <a href="../widgets.html" class="nav-link">

                                <i class="nav-icon fas fa-th"></i>

                                <p>

                                    Widgets

                                    <span class="right badge badge-danger">New</span>

                                </p>

                            </a>

                        </li>

                        <li class="nav-item has-treeview">

                            <a href="#" class="nav-link">

                                <i class="nav-icon fas fa-copy"></i>

                                <p>

                                    Layout Options

                                    <i class="fas fa-angle-left right"></i>

                                    <span class="badge badge-info right">6</span>

                                </p>

                            </a>

                            <ul class="nav nav-treeview">

                                <li class="nav-item">

                                    <a href="../layout/top-nav.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Top Navigation</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../layout/top-nav-sidebar.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Top Navigation + Sidebar</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../layout/boxed.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Boxed</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../layout/fixed-sidebar.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Fixed Sidebar</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../layout/fixed-topnav.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Fixed Navbar</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../layout/fixed-footer.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Fixed Footer</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../layout/collapsed-sidebar.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Collapsed Sidebar</p>

                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="nav-item has-treeview">

                            <a href="#" class="nav-link">

                                <i class="nav-icon fas fa-chart-pie"></i>

                                <p>

                                    Charts

                                    <i class="right fas fa-angle-left"></i>

                                </p>

                            </a>

                            <ul class="nav nav-treeview">

                                <li class="nav-item">

                                    <a href="../charts/chartjs.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>ChartJS</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../charts/flot.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Flot</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../charts/inline.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Inline</p>

                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="nav-item has-treeview">

                            <a href="#" class="nav-link">

                                <i class="nav-icon fas fa-tree"></i>

                                <p>

                                    UI Elements

                                    <i class="fas fa-angle-left right"></i>

                                </p>

                            </a>

                            <ul class="nav nav-treeview">

                                <li class="nav-item">

                                    <a href="../UI/general.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>General</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../UI/icons.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Icons</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../UI/buttons.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Buttons</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../UI/sliders.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Sliders</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../UI/modals.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Modals & Alerts</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../UI/navbar.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Navbar & Tabs</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../UI/timeline.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Timeline</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../UI/ribbons.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Ribbons</p>

                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="nav-item has-treeview">

                            <a href="#" class="nav-link">

                                <i class="nav-icon fas fa-edit"></i>

                                <p>

                                    Forms

                                    <i class="fas fa-angle-left right"></i>

                                </p>

                            </a>

                            <ul class="nav nav-treeview">

                                <li class="nav-item">

                                    <a href="../forms/general.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>General Elements</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../forms/advanced.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Advanced Elements</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../forms/editors.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Editors</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../forms/validation.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Validation</p>

                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="nav-item has-treeview">

                            <a href="#" class="nav-link">

                                <i class="nav-icon fas fa-table"></i>

                                <p>

                                    Tables

                                    <i class="fas fa-angle-left right"></i>

                                </p>

                            </a>

                            <ul class="nav nav-treeview">

                                <li class="nav-item">

                                    <a href="../tables/simple.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Simple Tables</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../tables/data.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>DataTables</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../tables/jsgrid.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>jsGrid</p>

                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="nav-header">EXAMPLES</li>

                        <li class="nav-item">

                            <a href="../calendar.html" class="nav-link">

                                <i class="nav-icon far fa-calendar-alt"></i>

                                <p>

                                    Calendar

                                    <span class="badge badge-info right">2</span>

                                </p>

                            </a>

                        </li>

                        <li class="nav-item">

                            <a href="../gallery.html" class="nav-link">

                                <i class="nav-icon far fa-image"></i>

                                <p>

                                    Gallery

                                </p>

                            </a>

                        </li>

                        <li class="nav-item has-treeview">

                            <a href="#" class="nav-link">

                                <i class="nav-icon far fa-envelope"></i>

                                <p>

                                    Mailbox

                                    <i class="fas fa-angle-left right"></i>

                                </p>

                            </a>

                            <ul class="nav nav-treeview">

                                <li class="nav-item">

                                    <a href="../mailbox/mailbox.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Inbox</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../mailbox/compose.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Compose</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../mailbox/read-mail.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Read</p>

                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="nav-item has-treeview">

                            <a href="#" class="nav-link">

                                <i class="nav-icon fas fa-book"></i>

                                <p>

                                    Pages

                                    <i class="fas fa-angle-left right"></i>

                                </p>

                            </a>

                            <ul class="nav nav-treeview">

                                <li class="nav-item">

                                    <a href="../examples/invoice.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Invoice</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/profile.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Profile</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/e-commerce.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>E-commerce</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/projects.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Projects</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/project-add.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Project Add</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/project-edit.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Project Edit</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/project-detail.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Project Detail</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/contacts.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Contacts</p>

                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="nav-item has-treeview menu-open">

                            <a href="#" class="nav-link active">

                                <i class="nav-icon far fa-plus-square"></i>

                                <p>

                                    Extras

                                    <i class="fas fa-angle-left right"></i>

                                </p>

                            </a>

                            <ul class="nav nav-treeview">

                                <li class="nav-item">

                                    <a href="../examples/login.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Login</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/register.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Register</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/forgot-password.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Forgot Password</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/recover-password.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Recover Password</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/lockscreen.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Lockscreen</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/legacy-user-menu.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Legacy User Menu</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/language-menu.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Language Menu</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/404.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Error 404</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/500.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Error 500</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/pace.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Pace</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../examples/blank.html" class="nav-link active">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Blank Page</p>

                                    </a>

                                </li>

                                <li class="nav-item">

                                    <a href="../../starter.html" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Starter Page</p>

                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="nav-header">MISCELLANEOUS</li>

                        <li class="nav-item">

                            <a href="https://adminlte.io/docs/3.0" class="nav-link">

                                <i class="nav-icon fas fa-file"></i>

                                <p>Documentation</p>

                            </a>

                        </li>

                        <li class="nav-header">MULTI LEVEL EXAMPLE</li>

                        <li class="nav-item">

                            <a href="#" class="nav-link">

                                <i class="fas fa-circle nav-icon"></i>

                                <p>Level 1</p>

                            </a>

                        </li>

                        <li class="nav-item has-treeview">

                            <a href="#" class="nav-link">

                                <i class="nav-icon fas fa-circle"></i>

                                <p>

                                    Level 1

                                    <i class="right fas fa-angle-left"></i>

                                </p>

                            </a>

                            <ul class="nav nav-treeview">

                                <li class="nav-item">

                                    <a href="#" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Level 2</p>

                                    </a>

                                </li>

                                <li class="nav-item has-treeview">

                                    <a href="#" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>

                                            Level 2

                                            <i class="right fas fa-angle-left"></i>

                                        </p>

                                    </a>

                                    <ul class="nav nav-treeview">

                                        <li class="nav-item">

                                            <a href="#" class="nav-link">

                                                <i class="far fa-dot-circle nav-icon"></i>

                                                <p>Level 3</p>

                                            </a>

                                        </li>

                                        <li class="nav-item">

                                            <a href="#" class="nav-link">

                                                <i class="far fa-dot-circle nav-icon"></i>

                                                <p>Level 3</p>

                                            </a>

                                        </li>

                                        <li class="nav-item">

                                            <a href="#" class="nav-link">

                                                <i class="far fa-dot-circle nav-icon"></i>

                                                <p>Level 3</p>

                                            </a>

                                        </li>

                                    </ul>

                                </li>

                                <li class="nav-item">

                                    <a href="#" class="nav-link">

                                        <i class="far fa-circle nav-icon"></i>

                                        <p>Level 2</p>

                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="nav-item">

                            <a href="#" class="nav-link">

                                <i class="fas fa-circle nav-icon"></i>

                                <p>Level 1</p>

                            </a>

                        </li>

                        <li class="nav-header">LABELS</li>

                        <li class="nav-item">

                            <a href="#" class="nav-link">

                                <i class="nav-icon far fa-circle text-danger"></i>

                                <p class="text">Important</p>

                            </a>

                        </li>

                        <li class="nav-item">

                            <a href="#" class="nav-link">

                                <i class="nav-icon far fa-circle text-warning"></i>

                                <p>Warning</p>

                            </a>

                        </li>

                        <li class="nav-item">

                            <a href="#" class="nav-link">

                                <i class="nav-icon far fa-circle text-info"></i>

                                <p>Informational</p>

                            </a>

                        </li>

                    </ul>

                </nav>

                <!-- /.sidebar-menu -->

            </div>

            <!-- /.sidebar -->

        </aside>

Sau đó bạn mở file footer.blade.php và coppy phần footer của trang web vào.

Tiếp theo bạn cần viết file khá quan trọng là file master đây là file sẽ được các trang con khi chúng ta tạo ra các page mới sẽ kế thừa layout của file master này để sử dụng được các layout dùng chung.

Nội dung file master sẽ trông như thế này:

{{-- Nhúng file header vào đây --}}

@include('layouts\header')

<!-- Content Wrapper. Contains page content -->

<div class="content-wrapper">

    <!-- Content Header (Page header) -->

    <section class="content-header">

        <div class="container-fluid">

            <div class="row mb-2">

                <div class="col-sm-6">

                </div>

                <div class="col-sm-6">

                    <ol class="breadcrumb float-sm-right">

                        <li class="breadcrumb-item"><a href="#">Home</a></li>

                        <li class="breadcrumb-item active">Blank Page</li>

                    </ol>

                </div>

            </div>

        </div><!-- /.container-fluid -->

    </section>

    <!-- Main content -->

    <section class="content">

        {{-- hàm render content của các file layout con --}}

        @yield('content')

        <!-- Default box -->

        {{-- <div class="card">

            <div class="card-header">

                <h3 class="card-title">Title</h3>

            </div>

            <div class="card-body">

                Start creating your amazing application!

            </div>

            <!-- /.card-body -->

            <div class="card-footer">

                Footer

            </div>

            <!-- /.card-footer-->

        </div> --}}

        <!-- /.card -->

    </section>

    <!-- /.content -->

</div>

<!-- /.content-wrapper -->

{{-- Nhúng file footer vào --}}

@include('layouts\footer')

Tiếp theo mình sẽ cấu hình file webpack.mix.js để sử dụng laravel mix nhằm biên dịch các file js và scss.

Nội dụng file webpack sẽ như sau:

const mix = require("laravel-mix");

/*

Thêm các file css, scss, js mà bạn sẽ sử dụng vào đây để webpack có thể compile các file đó

 */
mix.js("resources/js/app.js", "public/js").sass(

    "resources/sass/app.scss",

    "public/css"

);

// Gộp các file js và css thành một file js

mix.styles(

    [

        "resources/plugins/fontawesome-free/css/all.css",

        "resources/css/adminlte.css",

    ],

    "public/css/theme.css"

).scripts(

    [

        "resources/plugins/jquery/jquery.js",

        "resources/js/adminlte.js",

        "resources/js/demo.js",

    ],

    "public/js/theme.js"

);

Sau đó bạn chạy lện npm run dev để laravel biện dịch các file js và scss để chúng ta có thể sử dụng chúng trong project của mình để sử dụng được các file đã biên dịch chúng ta chỉ cần nhúng các file đã được biên dịch vào các trang html như thông thường là được như ở đây mình sẽ nhúng hai file theme.css và theme.js vào file header.blade.php là mình có thể sử dụng chúng như bình thường rồi.

Như vậy thông qua bài viết này mình đã hướng dẫn các bạn cấu hình một project Laravel đơn giản rồi đúng không nào bài viết sau mình sẽ hướng dẫn các bạn kết nối database và tạo cơ sở dữ liệu trong Laravel.