Menu QuillPro (Laravel) - Responsive Bootstrap 4 Admin Dashboard Template

Thanks for purchasing QuillPro! This document contains everything you need to know about QuillPro. Keep reading...

This is the documentation of the Laravel version of QuillPro.

Introduction To QuillPro (Laravel)

For Beginners

If you are a Laravel beginner, we suggest that you watch the YouTube video in this link to learn how to use Laravel. Once you watch that video you can come back here to read how QuillPro works with Laravel - It's actually straightforward.

For Intermediate and Pros

This documentation assumes that you have basic knowledge of PHP and Laravel. So we will build page for your project so you understand how QuillPro works with Laravel.

Anything that is not covered here can be found:

NOTE: If you want to know the HTML structure of each page, you should check out the HTML Documentation for a better understanding. Here's a link to Bootstap 4 to also help you out.

Desktop View

Quick Setup

NOTE: We are assuming that you have already done new installation of Laravel and setup your local domain. If you haven't, watch the first 5 minutes of this video on a quick Laravel installation and setup: Start a new project.

  1. Open terminal/command line, then 'cd' into your project folder
  2. Create a new controller called AppsController in command line: php artisan make:controller AppsController
  3. Open up the laravel folder in your QuillPro zip file. Copy all the files into your root Laravel folder. Some files will be overwritten, which is fine since this is a clean installation. If you are importing into an existing project, then you might want to copy the files one by one so you do not overwrite your settings.
  4. In your browser, visit: quillpro-laravel.devo or whatever you called your local domain.
  5. Done!
  6. Play around in the browser for a bit first, then continue reading this documentation.

Folder Structure

Overall Folder Layout

QuillPro React is arranged like any Laravel installation. The folders/files you should care about for QuillPro are:

  • app/Exceptions/Handler: This is where we set the 404 and 500 error pages.
  • app/Http/Controllers/PageController.php: The controller that handles all demo files.
  • public: All public content for your Laravel installation. The sub-folders img, images, fonts, plugins, js, favicon.ico are extremely important so do not delete them, except if you know exactly what you are doing.
    NOTE: The css folder including some files in the js folder will be generated by Laravel, so you dont have to worry about them.
  • resources: This is where you will spend most of your time so we will cover it in more detail in its section below.
  • routes/web.php: This handles all the redirects. You might want to make changes here if you are builing your project with controllers that aren't named "AppsController"
  • [root]/package.json: This contains settings to make your Laravel installation work well with the latest version of QuillPro. You can add whatever settings you want to it.
  • [root]/webpack.mix.js: This file will compile all QuillPro CSS and JS files. More on this below.

Views Folder Layout

  • resources/views/quillpro: Contains the view files that help you display QuillPro HTML. It contains: inc, layouts folders.
  • resources/views/quillpro/layout: This contains the overall layout of QuillPro. Sidebar, , Footer etc
    • header.blade.php: Contains the top part of QuillPro, including the links to the general CSS files (including Bootstrap CSS files)
    • footer.blade.php: Contains the bottom part of QuillPro, including the links to the general JS files (including Bootstrap JS files)
    • sidebar.blade.php: Contains QuillPro's sidebar
    • rightcolumn.blade.php: Contains the QuillPro's Right Column and main content area.
  • resources/views/quillpro/inc: This folder contains chunks of code that will be reused in different content areas. Eg: Pagination, copyright, etc

Starter Project

In this section we will create an article page. THis is the easiest way to understand how to build with QuillPro Laravel. Once you follow this simple tutorial, you will be able to build whatever you want.

Let's begin!

Create the Controller function

  • Open your Laravel product in your favorite editor.
  • Open app/Http/Controllers/PagesController.php
  • Copy the code below.
<?php
	public function getSecretRecipe(){

		/* Add your own data here - Start */

		// 'heading_' is used for headings text so you can call in view using {{ $heading_title }}
		$data['heading_title'] = 'My Secret Recipe';
		$data['heading_title_2'] = 'Tell No One!';

		// 'button_' is used for buttons text so you can call in view using {{ $button_secret }}
		$data['button_secret'] = 'Secret Button';

		// 'text_' is used for text, labels and anything else so you can call in view using {{ $button_secret }}
		$data['text_recipe_text'] = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse minus eaque ipsam beatae, itaque nam non eum voluptates dignissimos, sunt doloremque laborum aut. Maiores pariatur adipisci harum exercitationem molestiae, a?';

		$data['text_additional_footer_info'] = 'You should not be here';

		/* Add your own data here - End */
		
		// send all the data in the $data array to the 'secretrecipe' view
		return view('quillpro/secretrecipe', $data);
	}
?>
  • Now paste is before the last curly bracket so the new file looks comething like this...
<?php
	public function getStarterKit(){

		/* Add your own data here - Start */

		$data['heading_title'] = 'Starter Kit';

		$data['text_additional_footer_info'] = 'Additional footer information';

		/* Add your own data here - End */
		
		return view('quillpro/starterkit', $data);
	}

	public function getSecretRecipe(){

		/* Add your own data here - Start */

		// 'heading_' is used for headings text so you can call in view using {{ $heading_title }}
		$data['heading_title'] = 'My Secret Recipe';
		$data['heading_title_2'] = 'Tell No One!';

		// 'button_' is used for buttons text so you can call in view using {{ $button_secret }}
		$data['button_secret'] = 'Secret Button';

		// 'text_' is used for text, labels and anything else so you can call in view using {{ $button_secret }}
		$data['text_recipe_text'] = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse minus eaque ipsam beatae, itaque nam non eum voluptates dignissimos, sunt doloremque laborum aut. Maiores pariatur adipisci harum exercitationem molestiae, a?';

		$data['text_additional_footer_info'] = 'You should not be here';

		/* Add your own data here - End */
		
		// send all the data in the $data array to the 'secretrecipe' view
		return view('quillpro/secretrecipe', $data);
	}
?>

Create the Routing

  • The code you just pasted controls when gets shown when people visit your secret recipe page.
  • Next, open routes/web.php
  • Now, copy the code below ad paste in just below the Route::get('/', 'PagesController@getStarterKit');
<?php
	Route::get('/secretrecipe', 'PagesController@getSecretRecipe');
?>
  • What this does is to tell Laravel to look for the getSecretRecipe function in the PagesController controller when people visit domain.com/secretrecipe
  • Now, copy the code below and paste in just below the Route::get('/', 'PagesController@getStarterKit');

Create the View

  • Open resources/views/quillpro
  • Locate and duplicate the file called starterkit.blade.php
  • Name your new file: secretrecipe.blade.php
  • Open the secretrecipe.blade.php file
  • Finally, you want to create a menu in the sidebar and you want it to highlight when you are on your secret recipe page.
  • In resources/views/quillpro/layouts, open sidebar.blade.php
  • Copy the code below, and paste it under the Starter Kit li tag

		<li class="nav-item">
			<a class="nav-link {{ Request::is('/secretrecipe') ? 'active' : ''}}" href="/secretrecipe">
				<i class="batch-icon batch-icon-star"></i>
				Secret Recipe
			</a>
		</li>
  • And that's it! If you want to build your own app based on the other available apps, just follow the steps above for those apps and you'll be fine!

RTL Languages

  • RTL Languages: If you want to use RTL language, you should also open the [root]/webpack.mix.js file and change the const rtl from false to true.
  • This will allow Laravel call up the RTL CSS & JS files.
  • It's that simple!

Vue

Vue is disabled on QuillPro but you can enable it with the following steps.

  1. Open resources/js/app.js
  2. Look for all comments called // B5B Note: Disabled
  3. Uncomment the code under them.
  4. That's it!

Support

All support requests will be responded by our Customer Service Department.

Please state the name of the theme (QuillPro Laravel) in the subject of your email.

Support Center: https://base5builder.com/support
Email support@base5builder.com

Changelog

See changes