Documentation | NobleUI - Laravel Admin Dashboard Template

Introduction

Laravel is a PHP-based web framework for building high-end web applications, known for its elegant and expressive syntax. It comes with a strong collection of tools and provides application architecture. This template is built on Bootstrap, the most popular CSS framework for developing responsive, mobile-first websites. It extends Bootstrap components and includes custom components.

What's include

NobleUI - Laravel comes with a simple and logically organized file structure for easy to understand and maintainability.

  NobleUI-Laravel/
  ├── template
              ├── demo1/                           ( Vertical Menu Layout )
                          ├── app/
                          ├── bootstrap/
                          ├── config/
                          ├── database/
                          ├── public/
                          ├── resources/
                                      ├── css/
                                      ├── images/
                                      ├── js/
                                      ├── sass/
                                      ├── views/
                                                  ├── layout/
                                                  ├── pages/
                                                  ├── dashboard.blade.php
                          ├── routes/
                          ├── storage/
                          ├── tests/
                          ├── .env.example
                          ├── .gitatributes
                          ├── .gitignore
                          ├── artisan
                          ├── composer.json
                          ├── composer.lock
                          ├── package-lock.json
                          ├── package.json
                          ├── phpunit.xml
                          ├── readme.md
                          ├── vite-rtlcss-plugin.js
                          ├── vite.config.js
              ├── demo2/                            ( Horizontal Menu Layout )
  ├── documentation

Set up the Development Environment

Ensure that you have PHP, Composer and Node.js installed on your machine.

Installation Steps

Assuming your machine meets all the requirements - let's proceed to the installation.

1. Navigate to the project folder (demo1 or demo2)

Example:

cd nobleui-laravel/template/demo1/

2. Install composer dependencies:

composer install

3. Rename or copy .env.example file to .env

Use cp command for Linux or Mac user:

cp .env.example .env

If you are using Windows, use copy instead of cp:

copy .env.example .env

4. Generate the application encryption key, create the database.sqlite file, and run database migrations:

composer run post-create-project-cmd

5. Install npm dependencies and compile & bundle frontend assets.

npm install && npm run build

6. Start the local development server:

composer run dev

Then go to http://127.0.0.1:8000

Commands:

Command	Description
`composer run dev`	Start the local development server.
`npm run build`	Builds your project for production.

You need to know how laravel works in order to use this version. Check the Laravel official documentation.

RTL Layout

The RTL does not enabled by default. It can be easily setup with RTLCSS.

Follow these steps to generate RTL CSS:

1. Open [nobleui-laravel]/template/[demo]/ folder. Example "demo1".

2. Uncomment the following two lines in vite.config.js (around lines 4 and 49).

import { rtlcssPlugin } from './vite-rtlcss-plugin'

rtlcssPlugin(),

3. Run npm script command to compile assets.

npm run build

You can find the bundled RTL CSS file at: [demo]/resources/rtl-css/app-rtl.css.

4. Open the master.blade.php file from [demo]/resources/views/layout/master.blade.php. Change the file path to the RTL CSS path:

From: @vite(['resources/sass/app.scss', 'resources/css/custom.css'])
To: @vite(['resources/rtl-css/app-rtl.css', 'resources/rtl-css/custom-rtl.css'])

5. In the master.blade.php file, set dir="rtl" on the html element.

<html dir="rtl">

6. Start the local development server:

composer run dev

Then go to http://127.0.0.1:8000

Dark Sidebar/Header

The Dark sidebar (in Demo1) & Dark header (in Demo2) are does not enabled by default.

Add class to the body element as given below (in resources > views > layout > master.blade.php).

For the dark sidebar (in Demo1), set class="sidebar-dark" on the body element.

<body class="sidebar-dark">

For the dark header (in Demo2), set class="navbar-dark" on the body element.

<body class="navbar-dark">

Credits

Plugin	Link
Ace Editor	https://ace.c9.io/
Animate.css	https://daneden.github.io/animate.css/
Apex Charts	https://apexcharts.com/
Bootstrap	http://getbootstrap.com/
Bootstrap Max-length	http://mimo84.github.io/bootstrap-maxlength/
Chart.js	https://www.chartjs.org/
Codemirror	https://codemirror.net/
Cropper.js	https://github.com/fengyuanchen/cropperjs
Data Table	https://datatables.net/
Dropify	https://github.com/JeremyFagis/dropify/
Dropzone	https://www.dropzonejs.com/
Feather Icons	https://feathericons.com/
Flatpickr	https://flatpickr.js.org/
Flot Charts	http://www.flotcharts.org/
Full Calendar	https://fullcalendar.io/
Input Mask	https://robinherbots.github.io/Inputmask/
jQuery	https://jquery.com/
jQuery Sparklines	https://omnipotent.net/jquery.sparkline/#s-about
jQuery Steps	http://www.jquery-steps.com/GettingStarted
jQuery Tags Input Plugin	https://www.npmjs.com/package/jquery-tags-input
jQuery Validation	https://jqueryvalidation.org/
MDI Icons	https://materialdesignicons.com/
Moment js	https://momentjs.com/
Owl Carousel 2	https://owlcarousel2.github.io/OwlCarousel2/
Peity chart	https://benpickles.github.io/peity/
Perfect scrollbar	https://github.com/mdbootstrap/perfect-scrollbar
Pickr	https://simonwep.github.io/pickr/
Popper Js	https://popper.js.org/
Select 2	https://select2.org/
Easy MDE	https://github.com/Ionaru/easy-markdown-editor
Sweetalert 2	https://sweetalert2.github.io/
TinyMCE	https://www.tiny.cloud/
Typeahead	http://twitter.github.io/typeahead.js/

Support

We're happy to help! If you have any questions, feel free to contact us through our Support Page or email us directly at nobleui.team@gmail.com.

If you enjoyed using our product, we’d really appreciate it if you could take a moment to leave a ⭐️⭐️⭐️⭐️⭐️ rating and a short review. Your support means a lot to us! You can submit your review on the ThemeForest Downloads page.

NobleUI - Laravel Admin Dashboard Template v 3.0