Xino - Laravel Admin & Dashboard Template

Introduction

Welcome to Xino - Laravel Admin & Dashboard Template

Xino is a responsive HTML based Laravel template, With these template formats, it's very easy to create a presence and grab someone's attention around the web page because the template is built using HTML5, CSS3, Bootstrap 4 framework and with Sass.
So please before you start working with the template take a quick look on the documentation. So that you can easily built your website.

If You Love Our Template Design Please don't forget to rate it. Thank you so much! 😊

Dashboard

Welcome to Xino - Laravel Admin & Dashboard Template
  • Created Date: 18/02/2021
  • Author: Sprukosoft
  • Company: Spruko Technologies Private Limited
  • Support: support@spruko.com

Thank you for purchasing our admin template. Feel free to contact us any time. We have a best dedicated team to provide you the best support. If you have any queries please contact us through live chat or email:- sprukotechnologies@gmail.com

Template Description

Xino - Laravel Admin & Dashboard Template. It includes 90+ PHP Pages, 70+ Plugins, UI elements and different Styles of Widgets etc. This template is “User Friendly” and it is designed in such a way that you can easily understand the code and can modify the template. The template contains advanced Form-Elements like Date pickers, Select2, Multi Select etc. This template is 100% Premium Admin Templates. This template is designed using Bootstrap 4 framework, HTML5, CSS3, Jquery.

It has clean, flat user interface design, easily customizable components and widgets. The Template comes with an unique design also we ensure you that you can easily design your admin template.

It’s fully responsive layout for all types of devices. It work’s on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart devices.

Once you Purchase the Xino - Laravel Admin & Dashboard Template you’ll be getting all the HTML5, CSS3, Scss & JS files and you are enabled to get free downloads of all the future updates.

Main Features

  • 2 Different Types Of Versions
  • 90+ PHP Pages
  • Bootstrap 4 Responsive Framework
  • Well Commented Code
  • 24 * 7 Professional Company Support
  • Regular Updates
  • 70+ Plugins
  • 6 types of Charts
  • Select2
  • Mail Inbox
  • 9 Types of Icons
  • File upload
  • Message Chat
  • Form Elements
  • Form Editor
  • Form Wizard
  • Sweet Alerts
  • Data Tables
  • Lockscreen Page
  • Error Page
  • Under Construction Page
  • User Profile
  • Easy to customize
  • More Widgets
  • Invoice Page
  • Pricing Tables
  • Very Easy to Create your Own Site
  • Neat, clean and simple design
  • W3C Validated

Minimum Requirements

  • PHP >= 7.3.0 or Newer
  • Laravel >= 8.27.0
  • Ctype PHP Extension
  • OpenSSL PHP Extension
  • Fileinfo PHP extension
  • PDO PHP Extension
  • Mbstring PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension
  • JSON PHP Extension

Installation Process of Composer

Note: The clear documentation of PDF is given on How To Run Laravel Project In Localhost - For Beginners. Please Check out the PDF before running the project.

In order to run Laravel we need to install composer by the following steps

Steps to Download & Installation of Composer


Step1: Please visit the Official Web Site of the Composer www.getcomposer.org

Step2: Click on the Download option

Step3: Click on the Composer-Setup.exe you are done with download

Step4: Now Right click on the Composer-Setup.exe file and select Run as administrator click on Yes

Step5: You'll be getting two options click as per your choice

Step6: I choose Recommended option here and if your developer you can check the box of the Developer Mode

Step7: And click on the Next button please make sure of installation path and then click Next

Step8: You'll be asked to enter proxy url please skip the step and click on the Next button

Step9: Please make sure with the PHP Version it should not be less than 7.3v, here we used 7.4.12 Version and then click on the next button

Step10: To confirm that Composer is installed in your system then type Composer in command prompt (if you are using XAMPP then go to C:\xampp\htdocs location and type composer)

INSTALLATION PROCESS OF Laravel

Here we are using "Composer" to download "Lavarel" packages

Note : This installation is shown based on XAMPP server..

  1. Open command prompt, find the path of your XAMPP that is installed in your system.
  2. Go to Example:C:\xampp\htdocs> path in command prompt.
  3. Now type the following command line composer create-project laravel/laravel my-project and hit enter to install the Laravel Packages in your "htdocs" folder.
  4. Now your downloading is started please wait for sometime to download all the necessary packages
  5. Once you are redirected to the C:\xampp\htdocs> path then you are sucessfully installed laravel

    6. Note: If you have any further queries in installation please refer to the official websites Click here

After installation run following command to get laravel development server
php artisan serve

How to convert Verticalmenu Layout to Horizontalmenu Layout

Check out the folder structure of the Layout Versions
										
											├── app/
											|   ├── Http
											|   |	├── Controllers
											|   |	├── Livewire
											|   |			    ├── Components.php (90+ php files)									
											├── public/
											|   ├── assets
											|   ├── .htaccess
											|   ├── favicon
											|   ├── index.php
											|   ├── robots.txt
											|   └── web.config
											├── resources/
											|   ├── css
											|   ├── js
											|   ├── lang
											|   └── views
											|   |	├── layouts/
											|   |	├── livewire/ (90+ blade.php files)
											|   |	└── welcome.blade.php										
											├── routes/
											|   └── web.php

Steps to convert Verticalmenu to Horizontalmenu


  1. Go to your root project there you will find resources folder and in resources you will find views folder in that you will see layouts folder.
  2. Open layouts folder there you will find app.blade.php and app1.blade.php files.
  3. Example root path (Example for ltr: my-project\ltr\resources\views\layouts) (Example for rtl: my-project\ltr\resources\views\layouts).
  4. Here app.blade.php file contain Verticalmenu content.
  5. And app1.blade.php file contain Horizontalmenu content.
  6. Here by default you will receive the project (Template) with Verticalmenu.
  7. If you want to convert Verticalmenu to Horizontalmenu you need to rename two files.
    • Step 1: First you need to rename app.blade.php (Example: app2.balde.php)
    • Step 2: Next you need to rename app1.blade.php to app.blade.php and run the project.
    • Step 3: After renaming open the file in an editor and save the file by pressing Ctrl + s button on your keyboard (In case of using CMD)
  8. Now you have activated to Horizontalmenu.
  9. Simillarly repeat the above process if you want to activate Verticalmenu.

    10. Note: Please make sure with the file name of app.blade.php whether you are activating Verticalmenu or Horizontalmenu the file name must be in app.blade.php.

Installation Instructions For both CPANEL’S and FTP

Installation Instructions

Upload the Project that you have purchased in below directory based on your server

FTP Uploading Process
  1. Create a folder in ftp home directory (e.g laravel-project)
  2. Paste all your project content in laravel-project except public folder
  3. Place public folder content in /home/public_PHP
  4. The last important change on your project is, you just need to navigate to this /home/public_PHP/index.php file and open it in your editor and change the code as shown below.
  5. This code to
    6. require __DIR__.'/../vendor/autoload.php';
    $app = require_once __DIR__.'/../bootstrap/app.php';
  6. This code (Replace these two lines of code with the above code according to your project folder name)
    7. require __DIR__.'/../../../laravel-project/vendor/autoload.php';
    $app = require_once __DIR__.'/../../../laravel-project/bootstrap/app.php';
cPanel Uploading Process
    Access cPanel:
  1. Go to your cPanel’s login page using your login credentials provided by your hosting provider.
    2. Upload Project Files:
  2. Go to File Manager. Create a new folder in your root directory.
  3. For this, I am going to name my new folder as “MyProject”.
  4. Now we need to get the entire collection of your Laravel project files and directories into this MyProject folder
  5. Now zip the entire Laravel project, and upload the zip into "MyProject" folder. When the upload finishes, unzip all project files into "MyProject" folder by selecting destination as ~/MyProject/.
  6. Now go into the public folder of your Laravel project (~/MyProject/public/).
  7. copy all the files inside this public folder (~/MyProject/public/) into the public_PHP folder (~/public_PHP)
    8. Configure Files Paths:
  8. Let’s open our public_PHP folder and now can see that all the files inside our Laravel project’s public folder have properly copied into public_PHP folder.
  9. If everything looks good, open index.php file (~/public_PHP/index.php) in Code Editor. Find the following code lines,
    10. require __DIR__.'/../vendor/autoload.php';
    $app = require_once __DIR__.'/../bootstrap/app.php';
  10. Modify them by adding your project folder’s name right before the bootstrap folder name (~/MyProject/bootstrap/…) as follows, to reflect the changes in the file structure.
    11. require __DIR__.’/../../../MyProject/vendor/autoload.php’;
    $app = require_once __DIR__.’/../../../MyProject/bootstrap/app.php’;

How to Upgrade Larvel Version

If you want to Upgrade laravel version, Please follow the below steps, if not you can skip this procedure.

Step 1:

Replace below Dependency versions in composer.json file which is placed in root directory

  • php:- ^7.3.0
  • fideloper/proxy:- ^4.4
  • fruitcake/laravel-cors:- ^2.0
  • guzzlehttp/guzzle:- ^7.0.1
  • laravel/ui:- ^3.0
  • nunomaduro/collision:- ^5.0
  • laravel/ui:- ^3.0
  • phpunit/phpunit:- ^9.0
  • laravel/tinker:- ^2.5
  • "livewire/livewire": "^2.3"
Step 2:

Delete vendor folder

Step 3:

Set your project root path in command prompt and run the following command line in command prompt.

Composer update

How to Run Laravel Project in localhost

If you have installed XAMPP on your machine then please follow the below steps

Step:1 Quick view of Installations

1. Download and Install the Composer from official site https://getcomposer.org/

2. Install Laravel by using Composer as mentioned in the installation process above.

Step:2 Run project

1. Now laravel has installed in your system

2. Now open Xampp and click on the start button on the Apache server

3. Extract the zip file of laravel project you received after purchase (not necessary where it is)

4. And set your project path in command prompt

5. Example: cd C:\Users\Admin\Desktop\my-project

6. And run the command line: php artisan serve

7. Laravel development server started: http://127.0.0.1:8000

How to Use Laravel Mix

In order to use laravel Mix you need to install Node.js in your system

Recommended LTS (long term support) version of Node.js.

Download latest version of node.js from nodejs.org

Install Node.js using .exe downloaded file.

To check your node version, run node -v in a terminal/console window (cmd)

Now you need to install Node Modules in your project folder

1. Go to your project folder and there you will find a file called package.json.

2. Open the file in your editor and make sure that all the dependencies are correct as shown below

  • "axios": "^0.21",
  • "browser-sync": "^2.26.14",
  • "browser-sync-webpack-plugin": "^2.2.2",
  • "laravel-mix": "^6.0.6",
  • "lodash": "^4.17.19",
  • "postcss": "^8.1.14",
  • "sass": "^1.32.5",
  • "sass-loader": "^8.0.2",
  • "eva-icons": "^1.1.3"

3. And now set your project root path in terminal or command prompt Example: cd C:\Users\Admin\Desktop\my-project and type the below command line.

npm install

4. Wait until all the dependencies are downloaded to your project folder.

5. Now you can see the downloaded folder with the name of node_modules in your project folder.

6. Now in order to Compile Assets (Mix) first, you need to run development mode.

7. Set your project root path and type the below command line.

npm run development

8. Once the development mode starts you can customize your assets

9. After your project is set into Development Mode you need not run the Development Mode, again and again, you can simply run the below command line to compile your assets.

npm run watch

10. Once you completed with the customization work you need to run your project in Production Mode in order to run Production Mode run the below command line

npm run production
Compiling Assets (Mix) or Customization

1. Go to your project folder and there you will find a folder called resources in the resources folder you will see assets.

2. In the assets folder you will see img, js, plugins scss and theme-scss folders, and in the case of RTL version img, js, plugins scss-rtl and theme-scss-rtl.

Folder Structure

														
															├── public/                   				 
															|   ├── assets     									    											
															|   |	├── css                       	 								    										
															|   |	├── img     								    						
															|   |	├── js									    
															|   |	├── plugins								    
															|   ├── images									    
															|   ├── .htaccess								    
															|   ├── favicon									    
															|   ├── index.php								    
															|   ├── mix-manifest.json						    
															|   ├── robots.txt								    
															|   └── web.config								    
															├── resources/					  			    	
															|   ├── assets											
															|   |	├── img
															|   |	├── js
															|   |	├── plugins
															|   |	├── scss
															|   |	├── theme-scss
															|   ├── css
															|   ├── js
															|   ├── lang
															|   └── views
															|   |	├── layouts/
															|   |	├── livewire/ (90+ blade.php files)
															|   |	└── welcome.blade.php										
															├──

3. Now you can compile or customize your assets using scss and js files that are present in the resources/assets folder.

4. Once the changes made in the files in order to apply those changes to your template you need to type the below command in the same terminal or command prompt that you have set your project root path.

npm run watch

5. npm starts Compiling all your scss, theme-scss, js, img, plugins assets, and scss files are converted to css files.

6. And all the compiled files of scss, theme-scss, js, img, plugins folder are copied to your public/assets css, js, img, plugins folder.

Note: While compiling assets scss files are converted to css, js files are converted to js and img, plugins are directly copied to the folders and these complied assets are seen in your public folder with the name of assets as shown in the above folder structure.

How to install Livewire

  1. Basic requirements to install Livewire
    • PHP 7.2.5 or higher
    • Laravel 7.0 or higher
  2. Install LiveWire using composer.
  3. Set your project root path in your console or terminal and type below command line.
    4. composer require livewire/livewire
  4. To create component using LiveWire set your project root path in your console and type below command line.
    5. php artisan make:livewire example
  5. Now two new files were created in your project: referral link LiveWire Component
      6. app/Http/Livewire/example.php is the Component file and
    • resources/views/livewire/example.blade.php
      •  is the View file
  6. Here we used Livewire to create Components and View files (i.e example.php and example.blade.php files).

    7. Note:There are total 90+ php and blade.php files created by Livewire.

How to Use BrowserSync

  1. The BrowserSync is a built-in feature in this Xino Laravel project.
  2. The BrowserSync dependency is downloaded automatically with node_modules when you run npm run install.
  3. In order to use BrowserSync you need to set your domain as shown in the below root path.
  4. Open your project folder and scroll down there you will find a file name called webpack.mix open the file in your favourite editor.
  5. Now scroll down there you will find mix.browserSync('http://127.0.0.1:8000'); here we used http://127.0.0.1:8000 is the default domain of php artisan serve but you can use your own domain in place of http://127.0.0.1:8000 BrowserSync.
  6. Once you set your domain you need to run your project in server mode, set your project root path in console or terminal and run the below command.
    7. php artisan serve
  7. And to open your project in your browser you need to run the below command.
    8. npm run watch

    Note:First you need to set your Domain as shown above and you need to run your project in server mode (php artisan serve).

Version

  • php:- ^7.4.12
  • fideloper/proxy:- ^4.4
  • fruitcake/laravel-cors:- ^2.0
  • guzzlehttp/guzzle:- ^7.0.1
  • laravel/framework:- ^8.19.0
  • laravel/tinker:- ^2.5
  • "livewire/livewire": "^2.3"

Folder Structure

							
							├── app/
							|   ├── Console
							|   ├── Exceptions
							|   ├── Http
							|   |	├── Controllers
							|   |	├── Livewire
							|   |			    ├── Components.php (90+ php files)							
							|   |	├── Middleware
							|   |	└── Kernel.php
							|   ├── Models
							|   └── Providers
							├── bootstrap/
							├── config/
							├── database/
							├── node_modules/
							├── public/
							|   ├── assets
							|   ├── .htaccess
							|   ├── favicon
							|   ├── index.php
							|   ├── robots.txt
							|   ├── mix-manifest.json
							|   └── web.config
							├── resources/
							|   ├── assets
							|   ├── css
							|   ├── js
							|   ├── lang
							|   └── views
							|   |	├── layouts/
							|   |	├── livewire/ (90+ blade.php files)
							|   |	└── welcome.blade.php									
							├── routes/
							|   ├── api.php
							|   ├── channels.php
							|   ├── console.php
							|   └── web.php
							├── storage
							├── tests
							├── vendor
							├── .editorconfig
							├── .env
							├── .env.example
							├── .gitattributes
							├── .gitignore
							├── .htaccess
							├── .styleci.yml
							├── artisan.php
							├── composer.json
							├── composer.lock					
							├── package.json
							├── package-lock.json
							├── phpunit.xml
							├── README.md
							├── server.php
							└── webpack.mix.js

Blade View

Blade is a simple, yet powerful templating engine provided with Laravel.

--------Imports master file--------

@extends('layouts.master')


@section('content')

 --------created a section called content--------

@endsection


--------get content data into master file--------

@yield('content')

FAQS

How to Change Font Style ?

Step 1:

Go To _fonts.scss (assets/scss/custom/fonts/_fonts.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import In to style.css file

How to Select font Family

Example:

Step 2:

And paste Your Selected font-family in _fonts.scss

Example:

How to Change Logo ?

Go To "assets/images/brand" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.

How to enable Leftmenu light in (light-version) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Leftmenu color styles there you can see the Leftmenu Light remove the comments

for // $('body').addClass('leftmenu-light'); // to enable the leftmenu light as shown in below image

How to enable Leftmenu primary color in (light-version) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Leftmenu color styles there you can see the Leftmenu color remove the comments

for // $('body').addClass('leftmenu-color'); // to enable the leftmenu color as shown in below image

How to enable Leftmenu dark color in (light-version) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Leftmenu color styles there you can see the Leftmenu Dark remove the comments

for // $('body').addClass('leftmenu-dark'); // to enable the leftmenu dark as shown in below image

How to enable Leftmenu gradient in (light-version) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Leftmenu color styles there you can see the Leftmenu gradient remove the comments

for // $('body').addClass('leftmenu-gradient'); // to enable the leftmenu gradient as shown in below image

Note : If you select leftmenu-light style and you want to change leftmenu-light to leftmenu-dark then disabled leftmenu-light( by adding comments) and enable leftmenu-dark ( by removing comments).simillary you can enable any only one style at a time

How to enable Leftmenu background images in (light-version and dark versions) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Images there you can see the Image-1 remove the comments

for // $('body').addClass('leftbgimage1'); // to enable the leftmenu background image1 as shown in below image

simillarly you can choose any leftmenu background image form leftbgimage1 to leftbgimage5 by removing comments

Note : If you select leftbgimage1 style and you want to change leftbgimage1 to leftbgimage2 then disabled leftbgimage1( by adding comments) and enable leftbgimage2 ( by removing comments).simillary you can enable any only one style at a time

How to enable Theme style for Leftmenu (light-version) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Leftmenu theme-style there you can see the theme-style remove the comments

for // $('body').addClass('theme-style'); // to enable the Leftmenu theme-style as shown in below image

How to enable Theme style for Horizontal (light-version) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Leftmenu theme-style there you can see the horizontal-menu themestyle remove the comments

for // $('body').addClass('horizontal-theme'); // to enable the Horizontal theme-style as shown in below image

How to enable Theme style for Leftmenu (dark-version) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Leftmenu-Dark themestyle there you can see the theme-style2 remove the comments

for // $('body').addClass('theme-style2'); // to enable the Leftmenu theme-style dark version as shown in below image

How to enable Theme style for Horizontal (dark-version) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Leftmenu-Dark themestyle there you can see the horizontal-darktheme remove the comments

for // $('body').addClass('horizontal-darktheme'); // to enable the Horizontal theme-style in dark version as shown in below image

How to enable Theme style for horizontalmenu-Light (Light-version) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Horizontal-menu styles there you can see the horizontalmenu-Light remove the comments

for // $('body').addClass('horizontal-light'); // to enable the horizontalmenu-Light in Light version as shown in below image

How to enable horizontalmenu-Color in (Light-version & Dark versions) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Horizontal-menu styles there you can see the horizontalmenu-Color remove the comments

for // $('body').addClass('horizontal-color'); // to enable the horizontal-color in (Light-version & Dark versions) as shown in below image

How to enable horizontalmenu-Dark in (Light-version & Dark versions) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Horizontal-menu styles there you can see the horizontalmenu-Dark remove the comments

for // $('body').addClass('horizontal-dark'); // to enable the 'horizontal-dark' in (Light-version & Dark versions) as shown in below image

How to enable horizontalmenu-Gradient in (Light-version & Dark versions) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Horizontal-menu styles there you can see the horizontalmenu-Gradient remove the comments

for // $('body').addClass('horizontal-gradient'); // to enable the 'horizontal-gradient' in (Light-version & Dark versions) as shown in below image

How to enable horizontalmenu theme style in (Light-version) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Horizontal-menu styles there you can see the horizontalmenu-theme style remove the comments

for // $('body').addClass('horizontal-theme'); // to enable the 'horizontal-theme' in (Light-version) as shown in below image

How to enable horizontalmenu Light style in (dark-version) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Horizontal-menu styles (Dark-version ) there you can see the horizontalmenu-Light style remove the comments

for // $('body').addClass('horizontal-light-1'); // to enable the 'horizontal-light-1' in (Dark-version) as shown in below image

How to enable horizontalmenu theme style in (dark-version) ?

Open custom.js file --- "(assets/js/custom.js)" file goto Horizontal-menu styles (Dark-version )there you can see the horizontalmenu-theme style remove the comments

for // $('body').addClass('horizontal-darktheme'); // to enable the 'horizontal-darktheme' in (Dark-version) as shown in below image

How to enable Dark theme ?

Open custom.js file --- "(assets/js/custom.js)" file goto Theme-Layoutsthere you can see the dark-theme remove the comments

for // $('body').addClass('dark-theme'); // to enable the 'dark-theme' in (Dark-version) as shown in below image

Font Used

Google fonts are used in the template. They are as follows: Google Fonts

All Images are used: Pexels.com

THANK YOU!