“Laravel Version” Documentation by “Sean Ngu” v4.7
Last Updated: 25/October/2020
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!
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
<!-- 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
Copy over the required image from global assets folder
<!-- copy the following folder--> /admin/template/assets/img <!-- paste it into laravel folder --> /admin/template/template_laravel/public/assets/img
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/
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>
Below code is to set the locale for your HTML page.
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
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 }}">
@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 -->
@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 -->
Content block display the data from the single page
<div id="content" class="content {{ $contentClass }}">
@yield('content')
</div>
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>
Here is the general option for the each case of page options. You may set the option in your view file.
@extends('layouts.default', [
'topMenu' => true,
'sidebarRight' => true,
'sidebarLight' => true,
'sidebarWide' => true,
'sidebarHide' => true,
'sidebarTransparent' => true,
'sidebarMinified' => true,
'sidebarTwo' => true,,
'sidebarSearch' => true,
'footer' => true,
'contentFullWidth' => true,
'contentFullHeight' => true
])
Laravel version now is fully scss configured. You may switch the Color Admin theme by changing the variable name in webpack.mix.js.
const theme = 'default'; <!-- theme option --> const theme = 'apple'; const theme = 'facebook'; const theme = 'google'; const theme = 'material'; const theme = 'transparent';
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.20.0",
"bootstrap-sass": "^3.4.1",
"cross-env": "^7.0.2",
"jquery": "^3.5.1",
"laravel-mix": "^5.0.7",
"laravel-mix-dload": "^1.0.0",
"less": "^3.12.2",
"less-loader": "^7.0.2",
"lodash": "^4.17.20",
"resolve-url-loader": "^3.1.2",
"sass": "^1.27.0",
"sass-loader": "^10.0.3",
"vue": "^2.6.12"
},
"dependencies": {
"@danielfarrell/bootstrap-combobox": "^1.1.8",
"@fortawesome/fontawesome-free": "^5.15.1",
"@fullcalendar/bootstrap": "^5.3.1",
"@fullcalendar/core": "^5.3.1",
"@fullcalendar/daygrid": "^5.3.2",
"@fullcalendar/interaction": "^5.3.1",
"@fullcalendar/list": "^5.3.1",
"@fullcalendar/timegrid": "^5.3.1",
"abpetkov-powerange": "github:npmcomponent/abpetkov-powerange",
"animate.css": "^4.1.1",
"apexcharts": "^3.22.0",
"blueimp-file-upload": "^10.31.0",
"blueimp-gallery": "^3.3.0",
"bootstrap": "^4.5.3",
"bootstrap-colorpicker": "^3.2.0",
"bootstrap-datepicker": "^1.9.0",
"bootstrap-daterangepicker": "^3.1.0",
"bootstrap-select": "^1.13.18",
"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.9.4",
"ckeditor": "^4.12.1",
"clipboard": "^2.0.6",
"d3": "^3.5.12",
"datatables.net": "^1.10.22",
"datatables.net-autofill-bs4": "^2.3.5",
"datatables.net-bs4": "^1.10.22",
"datatables.net-buttons-bs4": "^1.6.5",
"datatables.net-colreorder-bs4": "^1.5.2",
"datatables.net-fixedcolumns-bs4": "^3.3.2",
"datatables.net-fixedheader-bs4": "^3.1.7",
"datatables.net-keytable-bs4": "^2.5.3",
"datatables.net-responsive-bs4": "^2.2.6",
"datatables.net-rowreorder-bs4": "^1.2.7",
"datatables.net-scroller-bs4": "^2.0.3",
"datatables.net-select-bs4": "^1.3.1",
"dropzone": "^5.7.2",
"eonasdan-bootstrap-datetimepicker": "^4.17.47",
"flag-icon-css": "^3.5.0",
"flot": "^4.2.1",
"fullcalendar": "^5.3.2",
"gritter": "^1.7.4",
"gulp-download-stream": "0.0.19",
"gulp-header": "^2.0.9",
"gulp-sass-variables": "^1.2.0",
"intro.js": "^3.0.1",
"ion-rangeslider": "^2.3.1",
"isotope-layout": "^3.0.6",
"jquery": "^3.4.0",
"jquery-knob": "^1.2.11",
"jquery-migrate": "^3.3.1",
"jquery-mockjax": "^2.6.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.1",
"jstree": "^3.3.10",
"jszip": "^3.5.0",
"jvectormap-next": "^3.1.1",
"lightbox2": "^2.11.3",
"lity": "^2.4.1",
"merge-stream": "^2.0.0",
"moment": "^2.29.1",
"nvd3": "^1.8.6",
"oclazyload": "^1.1.0",
"pace-js": "^1.0.2",
"parsleyjs": "^2.9.2",
"pdfmake": "^0.1.68",
"popper.js": "^1.16.1",
"pwstrength-bootstrap": "^3.0.9",
"raphael": "^2.3.0",
"select2": "^4.0.13",
"simple-line-icons": "^2.5.5",
"summernote": "^0.8.18",
"sweetalert": "^2.1.2",
"tag-it": "^2.0.0",
"webpack": "^4.44.2",
"x-editable-bs4": "^1.5.4"
}
}