Last Updated: 05/August/2019
By: Sean Ngu
Email: nguoksiong@live.co.uk

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email your question to my email nguoksiong@live.co.uk. Thanks so much!

### A) Installation - top

Follow the following step to install the laravel in your localhost
You may refer to their official documentation for how to setup the development environment.
Setup Guide

    <!-- copy the following folder -->
    /admin/template/assets/css
    /admin/template/assets/img

    <!-- paste it into laravel folder -->
    /admin/template/template_laravel/public/assets/css
    /admin/template/template_laravel/public/assets/img

    <!-- run the following command -->
    cd /your-path-url/template_laravel
    composer install
    npm install
    npm run dev
    php artisan serve

    <!-- browse the url -->
    http://127.0.0.1:8000/

Make sure PHP >= 7.0.0 & node.js has been installed on your localhost / server

### B) File Structure - top

File structure overview for Laravel Version

    template_laravel/
    ├── artisan
    ├── composer.json
    ├── package.json
    ├── phpunit.xml
    ├── readme.md
    ├── server.php
    ├── webpack.mix.js
    ├── app/
    ├── bootstrap/
    ├── config/
    ├── database/
    ├── public/
    ├── resources/
    │   ├── lang
    │   └── views
    │       ├── includes
    │       ├── layouts
    │       └── pages
    ├── routes/
    ├── storage/
    └── tests/

### C) Page Structure - top

We split the header, sidebar, top menu, footer and etc into few other part and include it in the base file. Base file has been located in `/resources/views/layouts/default.blade.php`.

    <body class="{{ $bodyClass }}">
      @include('includes.component.page-loader')

      <div id="page-container" class="page-container fade page-sidebar-fixed page-header-fixed
        {{ $pageContainerClass }}">

        @include('includes.header')

        @includeWhen($topMenu, 'includes.top-menu')

        @includeWhen(!$sidebarHide, 'includes.sidebar')

        @includeWhen($sidebarTwo, 'includes.sidebar-right')

        <div id="content" class="content {{ $contentClass }}">
          @yield('content')
        </div>

        @includeWhen($footer, 'includes.footer')

        @include('includes.component.theme-panel')

        @include('includes.component.scroll-top-btn')

      </div>

      @include('includes.page-js')
    </body>

### D) Beginning of Page - top

Below code is to set the locale for your HTML page.

    <!DOCTYPE html>
    <html lang="{{ app()->getLocale() }}">

### E) Page Head - top

Page head contains metadata, javascript and css files:

    <head>
      <meta charset="utf-8" />
      <title> Color Admin | @yield('title')< /title>
      <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
            name="viewport" />
      <meta content="" name="description" />
      <meta content="" name="author" />

      <!-- ================== BEGIN BASE CSS STYLE ================== -->
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
      <link href="/assets/css/default/app.min.css" rel="stylesheet" />
      <!-- ================== END BASE CSS STYLE ================== -->

      @stack('css')
    </head>
    <body class="{{ $bodyClass }}">

### F) Top Menu - top

    @php
      $headerClass = (!empty($headerInverse)) ? 'navbar-inverse ' : 'navbar-default ';
      $headerMenu = (!empty($headerMenu)) ? $headerMenu : '';
      $hiddenSearch = (!empty($headerLanguageBar)) ? 'hidden-xs' : '';
      $headerMegaMenu = (!empty($headerMegaMenu)) ? $headerMegaMenu : '';
    @endphp
    <!-- begin #header -->
    <div id="header" class="header {{ $headerClass }}">
      <!-- begin navbar-header -->
      <div class="navbar-header">
        ...
      </div>
      <!-- end navbar-header -->

      @includeWhen($headerMegaMenu, 'includes.header-mega-menu')

      <!-- begin header-nav -->
      <ul class="navbar-nav navbar-right">
        <li class="{{ $hiddenSearch }}">
          <form class="navbar-form">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Enter keyword" />
              <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
            </div>
          </form>
        </li>
        ...
        @isset($headerLanguageBar)
          ...
        @endisset
        <li class="dropdown navbar-user">
          <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
            <img src="/assets/img/user/user-13.jpg" alt="" />
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            ...
          </div>
        </li>
      </ul>
      <!-- end header navigation right -->
    </div>
    <!-- end #header -->

### G) Sidebar - top

    @php
      $sidebarClass = (!empty($sidebarTransparent)) ? 'sidebar-transparent' : '';
    @endphp

    <!-- begin #sidebar -->
    <div id="sidebar" class="sidebar {{ $sidebarClass }}">
      <!-- begin sidebar scrollbar -->
      <div data-scrollbar="true" data-height="100%">
        <!-- begin sidebar user -->
        <ul class="nav">
         ...
        </ul>
        <!-- end sidebar user -->
        <!-- begin sidebar nav -->
        <ul class="nav">
          ...
        </ul>
        <!-- end sidebar nav -->
      </div>
      <!-- end sidebar scrollbar -->
    </div>
    <div class="sidebar-bg"></div>
    <!-- end #sidebar -->

### H) Page Content - top

Content block display the data from the single page

    <div id="content" class="content {{ $contentClass }}">
        @yield('content')
    </div>

### I) End of Page (Javascript) - top

Javascript files loaded in the end of page. This will reduce page load time.

      <script src="/assets/js/app.min.js"></script>
      <script src="/assets/js/theme/default.min.js"></script>

      @stack('scripts')
    </body>
    </html>

### J) Page Options - top

Here is the general option for the each case of page options. You may set the option in your view file.

#### Option List

    @extends('layouts.default', [
      'topMenu' => true,
      'sidebarRight' => true,
      'sidebarLight' => true,
      'sidebarWide' => true,
      'sidebarHide' => true,
      'sidebarTransparent' => true,
      'sidebarMinified' => true,
      'sidebarTwo' => true,
      'footer' => true,
      'contentFullWidth' => true,
      'contentFullHeight' => true
    ])

### K) Using SCSS - top

You may include the color admin theme scss file from `/admin/src/scss/default/` as well.

    <!-- copy the following folder -->
    /admin/src/scss/default/

    <!-- paste & replace the file inside the following folder -->
    /admin/template/template_laravel/resources/scss/

add the following code to /template_laravel/webpack.mix.js

    mix.sass('resources/scss/styles.scss', 'public/assets/css/default/app.min.css');

after you done all the steps before this, you may run the following command to start your laravel project.

    php artisan serve

### L) NPM Package - top

Below is the list of package that has been installed in this project. You may use the following example to find the package from their official website. `https://www.npmjs.com/package/``laravel-mix`

    {
      "private": true,
      "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
      },
      "devDependencies": {
        "axios": "^0.16.2",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.2.0",
        "jquery": "^3.3.1",
        "laravel-mix": "^2.1.11",
        "laravel-mix-dload": "^0.2.0",
        "less": "^3.0.4",
        "less-loader": "^4.1.0",
        "lodash": "^4.17.10",
        "vue": "^2.5.16"
      },
      "dependencies": {
        "@danielfarrell/bootstrap-combobox": "^1.1.8",
        "abpetkov-powerange": "github:npmcomponent/abpetkov-powerange",
        "animate.css": "^3.1.1",
        "apexcharts": "^3.8.2",
        "blueimp-file-upload": "^9.32.0",
        "blueimp-gallery": "^2.34.1",
        "bootstrap": "^4.3.1",
        "bootstrap-colorpicker": "^3.1.2",
        "bootstrap-datepicker": "^1.9.0",
        "bootstrap-daterangepicker": "^3.0.5",
        "bootstrap-select": "^1.13.10",
        "bootstrap-show-password": "^1.2.1",
        "bootstrap-social": "^5.1.1",
        "bootstrap-timepicker": "^0.5.2",
        "bootstrap3-wysihtml5-bower": "^0.3.3",
        "chart.js": "^2.8.0",
        "ckeditor": "^4.12.1",
        "clipboard": "^2.0.4",
        "d3": "^3.5.12",
        "datatables.net": "^1.10.19",
        "datatables.net-autofill-bs4": "^2.3.3",
        "datatables.net-bs4": "^1.10.19",
        "datatables.net-buttons-bs4": "^1.5.6",
        "datatables.net-colreorder-bs4": "^1.5.1",
        "datatables.net-fixedcolumns-bs4": "^3.2.6",
        "datatables.net-fixedheader-bs4": "^3.1.5",
        "datatables.net-keytable-bs4": "^2.5.0",
        "datatables.net-responsive-bs4": "^2.2.3",
        "datatables.net-rowreorder-bs4": "^1.2.5",
        "datatables.net-scroller-bs4": "^2.0.0",
        "datatables.net-select-bs4": "^1.3.0",
        "dropzone": "^5.5.1",
        "eonasdan-bootstrap-datetimepicker": "^4.17.47",
        "flag-icon-css": "^3.3.0",
        "flot": "^0.8.3",
        "fullcalendar": "^3.10.0",
        "gritter": "^1.7.4",
        "gulp-download-stream": "0.0.19",
        "gulp-header": "^2.0.9",
        "gulp-sass-variables": "^1.2.0",
        "intro.js": "^2.9.3",
        "ion-rangeslider": "^2.3.0",
        "isotope-layout": "^3.0.6",
        "jquery": "^3.4.0",
        "jquery-knob": "^1.2.11",
        "jquery-migrate": "^3.1.0",
        "jquery-mockjax": "^2.5.0",
        "jquery-simplecolorpicker": "^0.3.1",
        "jquery-slimscroll": "^1.3.8",
        "jquery-sparkline": "^2.4.0",
        "jquery-ui-dist": "^1.12.1",
        "jquery.maskedinput": "^1.4.1",
        "js-cookie": "^2.2.0",
        "jstree": "^3.3.8",
        "jszip": "^3.2.2",
        "jvectormap-next": "^3.0.0",
        "lightbox2": "^2.11.1",
        "lity": "^2.3.1",
        "merge-stream": "^2.0.0",
        "moment": "^2.24.0",
        "morris.js": "^0.5.0",
        "nvd3": "^1.8.6",
        "oclazyload": "^1.1.0",
        "pace-js": "^1.0.2",
        "parsleyjs": "^2.9.1",
        "pdfmake": "^0.1.57",
        "popper.js": "^1.15.0",
        "pwstrength-bootstrap": "^3.0.4",
        "raphael": "^2.2.8",
        "select2": "^4.0.7",
        "simple-line-icons": "^2.4.1",
        "smartwizard": "^4.3.1",
        "summernote": "^0.8.12",
        "sweetalert": "^2.1.2",
        "tag-it": "^2.0.0",
        "webpack": "^3.10.0",
        "x-editable-bs4": "^1.5.4"
      }
    }