Laravel 5 Admin Panel

Laravel 5 Admin Panel

 

Introduction

Users do not want to be constantly calling you whenever they want to update data. They want to do it themselves. For heaven’s sake you also need some “you time” and not always doing updates for the users.
These tutorial series will guide you through the process of creating an administrative panel for your Laravel powered web applications. The admin panel will be used by the users to update data and perform other tasks.
For the sake of completeness, we will create the admin panel for Larashop. Larashop is a tutorial project that we created in the Laravel 5 tutorial series. For the sake of learning, we will create a new project and not built on top of Larashop. If you want to, you can use Larashop project. We will work with a modern open source admin panel. The admin panel uses HTML5, twitter bootstrap and CSS3. You can download the HTML template from the GitHub repository.
The following image shows how our customized template will look like.
Laravel Admin Panel

Topics to be covered

We will cover the following topics in tutorial;
  • Tutorial prerequisites
  • Topics to be covered in the tutorial series
  • Converting HTML 5 Template to Laravel Blade Templates
  • Admin Panel Controllers
  • Admin Panel Routes

Tutorial prerequisites

This tutorial assumes;
  • You understand the basics of Laravel 5. If you do then I recommend you start with these Laravel 5 tutorial series.
  • You have PHP, MySQL and Apache up and running
  • You have composer installed
  • You have a text editor or IDE that supports PHP.
  • You have a modern web browser that supports HTML5

Topics to be covered in the tutorial series

We will cover the following topics in these tutorial series.
  • Laravel 5 Eloquent Relationships
  • Laravel 5 Users and Roles Management
  • Laravel 5 Social Authentication
  • Laravel 5 Localization
  • Laravel 5 Storage
  • Laravel 5 Mail
  • Laravel 5 CSV
  • Laravel 5 PDF
  • …and many more topics

Converting HTML 5 Template to Laravel Blade Templates

Let’s start with downloading the Admin template from its GitHub Repository
Unzip the contents of the download file. Have fun exploring the admin template.
We will now create a new Laravel 5 project.
I am using windows and XAMPP. I will now browse to the web directory of XAMPP


cd C:\xampp\htdocs






I will now use composer to create a new project. Feel free to use Larashop project if you have been following the series.








composer create-project laravel/laravel laradmin 5.*






HERE,


    

  • The above code creates a Laravel 5 project. * fetches the latest minor version number.
    • 


As of this writing, the latest version is 5.2 you can use the following command to specify version 5.2 when creating the new project.








composer create-project laravel/laravel laradmin 5.2






Let’s now create the blade template 
files. We will adopt a modular approach to organization our template 
files. The following images shows the directories and files that we will
 create

Let’s now look at the above directories

Laravel Admin Panel Directories


    

  •  Admin – this is the directory that will contain all of our template files 
      

    • E_shop_data_entry – contains the template files for all items under the E-Shop Data Entry panel in the admin panel
      • 

    • brands.blade.php – lists all brands and modal form for creating and updating brands
      • 

    • categories.blade.php – lists all categories and modal form for creating and updating categories
      • 

    • products.blade.php – lists all products and modal form for creating and updating products
      • 

    • E_shop_transactions – contains the template files for all items under the E-Shop Transactions panel in the admin panel
      • 

    • customers.blade.php Lists all registered customers
      • 

    • orders.blade.php Lists all customer orders
      • 

    • products.blade.php Lists all ordered products 
      • 

    • Frontend_data_entry contains the template files for all items under the Frontend Data Entry panel in the admin panel
      • 

    • blog_posts.blade.php lists all the blog posts and modal form for creating and updating blog posts
      • 

    • pages.blade.php lists all the pages and modal form for creating and updating pages
      • 

    • Layouts – contains all master layout files.
      • 

    • layout.blade.php – contains code that is common to all pages i.e. headers, navigation, footer etc.
      • 

    • System – contains all templates files for items under the System Panel in the admin panel
      • 

    • database_backup.blade.php – displays the form for making database backups
      • 

    • export_to_csv.blade.php – provides options for exporting database records to the comma separated files (CSV)
      • 

    • import_from_csv.blade.php – provides options importing CSV file records into the database.
      • 

    • system_users.blade.php – provides options for managing users in the system.
      • 

    

    • 


The layout.blade.php template will have the following common format








<html>
    <head>
        <title>@yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>






The rest of all the templates will have the following common format








@extends('layouts.master')

@section('title', 'Page Title')

@section('content')

<p>This is my body content.</p>

@endsection






If you are not familiar with blade 
template then I recommend you read this tutorial Laravel 5 Blade 
Template. For the sake of simplicity, we will not post the customized 
template code in the tutorial. The customized template files are in the 
downloadable tutorial files.



Admin Panel Controllers

Just 
like we did with the templates, we will also adopt a modular approach 
with our controllers for better file organization. We will create the 
following controllers;


    

  •  EShopDataEntry 
      

    • BrandsController 
      • 

    • CategoriesController
      • 

    • ProductsController
      • 

    

    • 

  •  EShopTransactions 
      

    • CustomersController
      • 

    • OrdersController
      • 

    • ProductsController
      • 

    

    • 

  •  FrontendDataEntry 
      

    • BlogPostsController
      • 

    • PagesController
      • 

    

    • 

  •  System 
      

    • UsersController
      • 

    • SystemController
      • 

    

    • 


We
 will use the artisan command line utility to generate the controllers 
for our admin panel. Run the following commands to create the above 
controllers.








php artisan make:controller EShopDataEntry\BrandsController --resource
php artisan make:controller EShopDataEntry\CategoriesController --resource
php artisan make:controller EShopDataEntry\ProductsController --resource

php artisan make:controller EShopTransactions\CustomersController --resource
php artisan make:controller EShopTransactions\OrdersController --resource
php artisan make:controller EShopTransactions\ProductsController --resource

php artisan make:controller FrontendDataEntry\BlogPostsController --resource
php artisan make:controller FrontendDataEntry\PagesController --resource

php artisan make:controller System\UsersController --resource
php artisan make:controller System\SystemController






The above commands will create the 
controllers in their respective directories. I have added basic code 
that display the views in the controllers. Download the attached tutorial files to get the code for the controllers.

Let’s now create the routes



Admin Panel Routes

Open /app/Http/routes.php

Update the code to the following








<?php

/*
  |--------------------------------------------------------------------------
  | Routes File
  |--------------------------------------------------------------------------
  |
  | Here is where you will register all of the routes in an application.
  | It's a breeze. Simply tell Laravel the URIs it should respond to
  | and give it the controller to call when that URI is requested.
  |
 */

Route::get('/', function () {
    return view('welcome');
});

/*
  |--------------------------------------------------------------------------
  | Application Routes
  |--------------------------------------------------------------------------
  |
  | This route group applies the "web" middleware group to every route
  | it contains. The "web" middleware group is defined in your HTTP
  | kernel and includes session state, CSRF protection, and more.
  |
 */

Route::group(['middleware' => ['web'], 'prefix' => 'admin'], function () {
    //Dashboard Route
    Route::get('dashboard', function() {
        return view('admin.dashboard');
    });

    //EShop Data Entry Routes
    Route::resource('brands', 'EShopDataEntry\BrandsController');
    Route::resource('categories', 'EShopDataEntry\categoriesController');
    Route::resource('products', 'EShopDataEntry\ProductsController');

    //EShop Transactions Routes
    Route::resource('customers', 'EShopTransactions\CustomersController');
    Route::resource('orders', 'EShopTransactions\OrdersController');
    Route::resource('product-sales', 'EShopTransactions\ProductSalesController');

    //Frontend Data Entry Routes
    Route::resource('blog-posts', 'FrontendDataEntry\BlogPostsController');
    Route::resource('pages', 'FrontendDataEntry\PagesController');

    //System
    Route::resource('system-users', 'System\UsersController');

    Route::resource('database-backup', 'System\SystemController@dbbackup');
    Route::resource('csv-export', 'System\SystemController@csvexport');
    Route::resource('csv-import', 'System\SystemController@csvimport');
});






HERE,


    

  • Route::group(['middleware' => ['web'], 'prefix' => 'admin'], function () {…} groups the routes, applies the web middleware and sets the admin prefix. The prefix will be automatically appended to the beginning of every route defined inside the group.
    • 

  • Route::resource(…) the resource route maps the HTTP verbs to the appropriate methods in the respective controllers.
    • 




Testing the waters

Laravel has a built in web server which you can invoke from the command line. 

Open the terminal / command prompt

Browse to the project root. You can use the following command if you are using windows and xampp








cd C:\xampp\htdocs\laradmin






Run the following command








php artisan serve






The above command will start the web server at port 8000

Load the following URL in your web browser








http://localhost:8000/admin/brands






You should be able to see the brands page. You can explore the rest of the pages.



Summary

In
 this tutorial, we have looked at how to convert an HTML5 template into 
blade template. We also looked at how to reuse layouts in blade. We 
organized our project into a modular way to make it easy to maintain it.