Being a developer, it’s tedious to write repetitive codes every single day. It takes time and effort to write program functions that are already in place and being used in different projects. Most of the developers like to focus on building new business functions rather than writing the same HTML & CSS code every time.
Laravel provides an easy way to build large applications integrated with different packages and external libraries. It also supports many pre-built Laravel admin panels that facilitate managing complex applications in just a few clicks.
- How Laravel Dashboard Eases the Dev Process
- Prerequisites
- Admin Panel Files Setup
- Registration Form Setup
- Login Form Setup
- Home Page
- Setting up the Database Connection
- Product page View
- Update Product
- Delete Product
- Sales Page
- Web Routes
- Product Controller
- Sale Controller
- Product Model
- Sale Model
- Final Words
There are many advanced Laravel admin dashboards available in the market that allow developers to work with pre-built functions, and helps them to save their time from the tiresome cycle of repetitive coding works.
Stop Wasting Time on Servers
Cloudways handle server management for you so you can focus on creating great apps and keeping your clients happy.
How Laravel Dashboard Eases the Dev Process
Using the Laravel admin panel, developers can cut out the bulk of manual programming work with prebuilt dashboard functions. This gives them an opportunity to focus more on the core functional jobs rather than bothering about the long coding works. These Laravel admin dashboards provide incredible flexibility to integrate multiple ecommerce templates, packages, libraries, and other utilities.
For Bootstrap lovers, there are many Bootstrap-based admin panels available in the market, that are highly customizable and easy-to-integrate with Laravel as well. Using these dashboards, developers can easily build interactive front-ends without writing tons of code. As a result, the workload for devs becomes a lot more manageable and simplified without requiring any additional effort.
In this article, I will demonstrate how to integrate a Bootstrap admin panel with Laravel in few simple steps.
Prerequisites
For this tutorial, I have Laravel installed on a web server. My setup is:
- PHP 7.1
- MySQL
- Laravel
To ensure that I don’t get distracted by server-level issues, I will host my application on the Cloudways Laravel hosting platform that provides a highly optimized hosting stack with no server management hassles. You can try out the Cloudways Platform for free by signing up for an account.
Admin Panel Files Setup
To add admin panel in Laravel, just copy and paste all the CSS and JS files/folders into the vendor folder, and then call these files in the app.blade.php file.
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
<!-- Page level plugin CSS-->
<link href="{{ asset('css/sb-admin.css') }}" rel="stylesheet">
<link href="{{ asset('css/datatables/dataTables.bootstrap4.css') }}" rel="stylesheet">
Registration Form Setup
The registration form allows users to interact with the web application. Therefore, it should generally look nice and engaging. Laravel provides a login and registration interface with pre-defined form fields. To create a login and registration layer to the application, use the following command.
Php artisan make : auth
If you don’t like the default Laravel registration form, you can also add the pre-built Laravel dashboard registration form. For this, you must write the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-register mx-auto mt-5">
<div class="card-header">Register an Account</div>
<div class="card-body">
<form>
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<label for="exampleInputName">First name</label>
<input class="form-control" id="exampleInputName" type="text" aria-describedby="nameHelp" placeholder="Enter first name">
</div>
<div class="col-md-6">
<label for="exampleInputLastName">Last name</label>
<input class="form-control" id="exampleInputLastName" type="text" aria-describedby="nameHelp" placeholder="Enter last name">
</div>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" type="email" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" type="password" placeholder="Password">
</div>
<div class="col-md-6">
<label for="exampleConfirmPassword">Confirm password</label>
<input class="form-control" id="exampleConfirmPassword" type="password" placeholder="Confirm password">
</div>
</div>
</div>
<a class="btn btn-primary btn-block" href="login.html">Register</a>
</form>
<div class="text-center">
<a class="d-block small mt-3" href="login.html">Login Page</a>
<a class="d-block small" href="forgot-password.html">Forgot Password?</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
Login Form Setup
Just like the registration form, the login form should also be interactive and must contain easy-to-understand login procedure. Thankfully, the admin dashboard provides a very simple login form that helps users to easily login to the system with their registered email and password.
If you want to change the login form code with Laravel’s default form code, just write the following code in the login.blade.php file.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Login') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="form-group row">
<label for="email" class="col-sm-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required autofocus>
@if ($errors->has('email'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>
@if ($errors->has('password'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group row">
<div class="col-md-6 offset-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="form-check-label" for="remember">
{{ __('Remember Me') }}
</label>
</div>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>
@if (Route::has('password.request'))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Home Page
The Bootstrap dashboard is quite simple to use. It provides several options like Charts, Tables, Components, Menu Levels, etc. to help even beginners to easily get started with it.
To get the dashboard’s view, write the following admin panel index.html code into the home.blade.php file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<!-- Custom fonts for this template-->
<link href="{{ asset('css/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Page level plugin CSS-->
<link href="{{ asset('css/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/datatables/dataTables.bootstrap4.css') }}" rel="stylesheet">
<!-- Custom styles for this template-->
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified JavaScript -->
<link href="{{ asset('css/sb-admin.css') }}" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="index.html">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="charts.html">
<i class="fa fa-fw fa-area-chart"></i>
<span class="nav-link-text">Charts</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Tables">
<a class="nav-link" href="tables.html">
<i class="fa fa-fw fa-table"></i>
<span class="nav-link-text">Tables</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Components">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-wrench"></i>
<span class="nav-link-text">Components</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseComponents">
<li>
<a href="navbar.html">Navbar</a>
</li>
<li>
<a href="cards.html">Cards</a>
</li>
</ul>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Example Pages">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseExamplePages" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-file"></i>
<span class="nav-link-text">Example Pages</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseExamplePages">
<li>
<a href="login.html">Login Page</a>
</li>
<li>
<a href="register.html">Registration Page</a>
</li>
<li>
<a href="forgot-password.html">Forgot Password Page</a>
</li>
<li>
<a href="blank.html">Blank Page</a>
</li>
</ul>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Menu Levels">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-sitemap"></i>
<span class="nav-link-text">Menu Levels</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseMulti">
<li>
<a href="#">Second Level Item</a>
</li>
<li>
<a href="#">Second Level Item</a>
</li>
<li>
<a href="#">Second Level Item</a>
</li>
<li>
<a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti2">Third Level</a>
<ul class="sidenav-third-level collapse" id="collapseMulti2">
<li>
<a href="#">Third Level Item</a>
</li>
<li>
<a href="#">Third Level Item</a>
</li>
<li>
<a href="#">Third Level Item</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Link">
<a class="nav-link" href="#">
<i class="fa fa-fw fa-link"></i>
<span class="nav-link-text">Link</span>
</a>
</li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" id="messagesDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-envelope"></i>
<span class="d-lg-none">Messages
<span class="badge badge-pill badge-primary">12 New</span>
</span>
<span class="indicator text-primary d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">New Messages:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>David Miller</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Hey there! This new version of SB Admin is pretty awesome! These messages clip off when they reach the end of the box so they don't overflow over to the sides!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>Jane Smith</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I was wondering if you could meet for an appointment at 3:00 instead of 4:00. Thanks!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>John Doe</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I've sent the final files over to you for review. When you're able to sign off of them let me know and we can discuss distribution.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">View all messages</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" id="alertsDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-bell"></i>
<span class="d-lg-none">Alerts
<span class="badge badge-pill badge-warning">6 New</span>
</span>
<span class="indicator text-warning d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="alertsDropdown">
<h6 class="dropdown-header">New Alerts:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-success">
<strong>
<i class="fa fa-long-arrow-up fa-fw"></i>Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-danger">
<strong>
<i class="fa fa-long-arrow-down fa-fw"></i>Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="text-success">
<strong>
<i class="fa fa-long-arrow-up fa-fw"></i>Status Update</strong>
</span>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">This is an automated server response message. All systems are online.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">View all alerts</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-fw fa-sign-out"></i>Logout</a>
</li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Dashboard</a>
</li>
<li class="breadcrumb-item active">My Dashboard</li>
</ol>
<!-- Icon Cards-->
<div class="row">
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-primary o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-comments"></i>
</div>
<div class="mr-5">26 New Messages!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-warning o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-list"></i>
</div>
<div class="mr-5">11 New Tasks!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-success o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-shopping-cart"></i>
</div>
<div class="mr-5">123 New Orders!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-danger o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-support"></i>
</div>
<div class="mr-5">13 New Tickets!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
</div>
</div>
<!-- Area Chart Example-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-area-chart"></i> Area Chart Example</div>
<div class="card-body">
<canvas id="myAreaChart" width="100%" height="30"></canvas>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
<div class="row">
<div class="col-lg-8">
<!-- Example Bar Chart Card-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-bar-chart"></i> Bar Chart Example</div>
<div class="card-body">
<div class="row">
<div class="col-sm-8 my-auto">
<canvas id="myBarChart" width="100" height="50"></canvas>
</div>
<div class="col-sm-4 text-center my-auto">
<div class="h4 mb-0 text-primary">$34,693</div>
<div class="small text-muted">YTD Revenue</div>
<hr>
<div class="h4 mb-0 text-warning">$18,474</div>
<div class="small text-muted">YTD Expenses</div>
<hr>
<div class="h4 mb-0 text-success">$16,219</div>
<div class="small text-muted">YTD Margin</div>
</div>
</div>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
<!-- Card Columns Example Social Feed-->
<div class="mb-0 mt-4">
<i class="fa fa-newspaper-o"></i> News Feed</div>
<hr class="mt-2">
<div class="card-columns">
<!-- Example Social Card-->
<div class="card mb-3">
<a href="#">
<img class="card-img-top img-fluid w-100" src="https://unsplash.it/700/450?image=610" alt="">
</a>
<div class="card-body">
<h6 class="card-title mb-1"><a href="#">David Miller</a></h6>
<p class="card-text small">These waves are looking pretty good today!
<a href="#">#surfsup</a>
</p>
</div>
<hr class="my-0">
<div class="card-body py-2 small">
<a class="mr-3 d-inline-block" href="#">
<i class="fa fa-fw fa-thumbs-up"></i>Like</a>
<a class="mr-3 d-inline-block" href="#">
<i class="fa fa-fw fa-comment"></i>Comment</a>
<a class="d-inline-block" href="#">
<i class="fa fa-fw fa-share"></i>Share</a>
</div>
<hr class="my-0">
<div class="card-body small bg-faded">
<div class="media">
<img class="d-flex mr-3" src="https://placehold.it/45x45" alt="">
<div class="media-body">
<h6 class="mt-0 mb-1"><a href="#">John Smith</a></h6>Very nice! I wish I was there! That looks amazing!
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#">Like</a>
</li>
<li class="list-inline-item">·</li>
<li class="list-inline-item">
<a href="#">Reply</a>
</li>
</ul>
<div class="media mt-3">
<a class="d-flex pr-3" href="#">
<img src="https://placehold.it/45x45" alt="">
</a>
<div class="media-body">
<h6 class="mt-0 mb-1"><a href="#">David Miller</a></h6>Next time for sure!
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#">Like</a>
</li>
<li class="list-inline-item">·</li>
<li class="list-inline-item">
<a href="#">Reply</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer small text-muted">Posted 32 mins ago</div>
</div>
<!-- Example Social Card-->
<div class="card mb-3">
<a href="#">
<img class="card-img-top img-fluid w-100" src="https://unsplash.it/700/450?image=180" alt="">
</a>
<div class="card-body">
<h6 class="card-title mb-1"><a href="#">John Smith</a></h6>
<p class="card-text small">Another day at the office...
<a href="#">#workinghardorhardlyworking</a>
</p>
</div>
<hr class="my-0">
<div class="card-body py-2 small">
<a class="mr-3 d-inline-block" href="#">
<i class="fa fa-fw fa-thumbs-up"></i>Like</a>
<a class="mr-3 d-inline-block" href="#">
<i class="fa fa-fw fa-comment"></i>Comment</a>
<a class="d-inline-block" href="#">
<i class="fa fa-fw fa-share"></i>Share</a>
</div>
<hr class="my-0">
<div class="card-body small bg-faded">
<div class="media">
<img class="d-flex mr-3" src="https://placehold.it/45x45" alt="">
<div class="media-body">
<h6 class="mt-0 mb-1"><a href="#">Jessy Lucas</a></h6>Where did you get that camera?! I want one!
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#">Like</a>
</li>
<li class="list-inline-item">·</li>
<li class="list-inline-item">
<a href="#">Reply</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-footer small text-muted">Posted 46 mins ago</div>
</div>
<!-- Example Social Card-->
<div class="card mb-3">
<a href="#">
<img class="card-img-top img-fluid w-100" src="https://unsplash.it/700/450?image=281" alt="">
</a>
<div class="card-body">
<h6 class="card-title mb-1"><a href="#">Jeffery Wellings</a></h6>
<p class="card-text small">Nice shot from the skate park!
<a href="#">#kickflip</a>
<a href="#">#holdmybeer</a>
<a href="#">#igotthis</a>
</p>
</div>
<hr class="my-0">
<div class="card-body py-2 small">
<a class="mr-3 d-inline-block" href="#">
<i class="fa fa-fw fa-thumbs-up"></i>Like</a>
<a class="mr-3 d-inline-block" href="#">
<i class="fa fa-fw fa-comment"></i>Comment</a>
<a class="d-inline-block" href="#">
<i class="fa fa-fw fa-share"></i>Share</a>
</div>
<div class="card-footer small text-muted">Posted 1 hr ago</div>
</div>
<!-- Example Social Card-->
<div class="card mb-3">
<a href="#">
<img class="card-img-top img-fluid w-100" src="https://unsplash.it/700/450?image=185" alt="">
</a>
<div class="card-body">
<h6 class="card-title mb-1"><a href="#">David Miller</a></h6>
<p class="card-text small">It's hot, and I might be lost...
<a href="#">#desert</a>
<a href="#">#water</a>
<a href="#">#anyonehavesomewater</a>
<a href="#">#noreally</a>
<a href="#">#thirsty</a>
<a href="#">#dehydration</a>
</p>
</div>
<hr class="my-0">
<div class="card-body py-2 small">
<a class="mr-3 d-inline-block" href="#">
<i class="fa fa-fw fa-thumbs-up"></i>Like</a>
<a class="mr-3 d-inline-block" href="#">
<i class="fa fa-fw fa-comment"></i>Comment</a>
<a class="d-inline-block" href="#">
<i class="fa fa-fw fa-share"></i>Share</a>
</div>
<hr class="my-0">
<div class="card-body small bg-faded">
<div class="media">
<img class="d-flex mr-3" src="https://placehold.it/45x45" alt="">
<div class="media-body">
<h6 class="mt-0 mb-1"><a href="#">John Smith</a></h6>The oasis is a mile that way, or is that just a mirage?
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#">Like</a>
</li>
<li class="list-inline-item">·</li>
<li class="list-inline-item">
<a href="#">Reply</a>
</li>
</ul>
<div class="media mt-3">
<a class="d-flex pr-3" href="#">
<img src="https://placehold.it/45x45" alt="">
</a>
<div class="media-body">
<h6 class="mt-0 mb-1"><a href="#">David Miller</a></h6>
<img class="img-fluid w-100 mb-1" src="https://unsplash.it/700/450?image=789" alt="">I'm saved, I found a cactus. How do I open this thing?
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#">Like</a>
</li>
<li class="list-inline-item">·</li>
<li class="list-inline-item">
<a href="#">Reply</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer small text-muted">Posted yesterday</div>
</div>
</div>
<!-- /Card Columns-->
</div>
<div class="col-lg-4">
<!-- Example Pie Chart Card-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-pie-chart"></i> Pie Chart Example</div>
<div class="card-body">
<canvas id="myPieChart" width="100%" height="100"></canvas>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
<!-- Example Notifications Card-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-bell-o"></i> Feed Example</div>
<div class="list-group list-group-flush small">
<a class="list-group-item list-group-item-action" href="#">
<div class="media">
<img class="d-flex mr-3 rounded-circle" src="https://placehold.it/45x45" alt="">
<div class="media-body">
<strong>David Miller</strong>posted a new article to
<strong>David Miller Website</strong>.
<div class="text-muted smaller">Today at 5:43 PM - 5m ago</div>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action" href="#">
<div class="media">
<img class="d-flex mr-3 rounded-circle" src="https://placehold.it/45x45" alt="">
<div class="media-body">
<strong>Samantha King</strong>sent you a new message!
<div class="text-muted smaller">Today at 4:37 PM - 1hr ago</div>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action" href="#">
<div class="media">
<img class="d-flex mr-3 rounded-circle" src="https://placehold.it/45x45" alt="">
<div class="media-body">
<strong>Jeffery Wellings</strong>added a new photo to the album
<strong>Beach</strong>.
<div class="text-muted smaller">Today at 4:31 PM - 1hr ago</div>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action" href="#">
<div class="media">
<img class="d-flex mr-3 rounded-circle" src="https://placehold.it/45x45" alt="">
<div class="media-body">
<i class="fa fa-code-fork"></i>
<strong>Monica Dennis</strong>forked the
<strong>startbootstrap-sb-admin</strong>repository on
<strong>GitHub</strong>.
<div class="text-muted smaller">Today at 3:54 PM - 2hrs ago</div>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action" href="#">View all activity...</a>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
</div>
</div>
<!-- Example DataTables Card-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-table"></i> Data Table Example</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
</div>
<!-- /.container-fluid-->
<!-- /.content-wrapper-->
<footer class="sticky-footer">
<div class="container">
<div class="text-center">
<small>Copyright © Your Website 2017</small>
</div>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="{{ asset('css/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('css/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<!-- Core plugin JavaScript-->
<script src="{{ asset('css/jquery-easing/jquery.easing.min.js')}}"></script>
<!-- Page level plugin JavaScript-->
<script src="{{ asset('css/chart.js/Chart.min.js')}}"></script>
<script src="{{ asset('css/datatables/jquery.dataTables.js')}}"></script>
<script src="{{ asset('css/datatables/dataTables.bootstrap4.js') }}"></script>
<!-- Custom scripts for all pages-->
<script src="{{ asset('js/sb-admin.min.js')}}"></script>
<!-- Custom scripts for this page-->
<script src="{{ asset('js/sb-admin-datatables.min.js')}}"></script>
<script src="{{ asset('js/sb-admin-charts.min.js')}}"></script>
</div>
</body>
</html>
Setting up the Database Connection
Since I am using Cloudways Platform, I can easily set up the database connection for my application within minutes. The Platform provides several features that make the management of application database easy. It also provides an advanced version of the MariaDB database for every newly launched application.
To access the MySQL database details, just navigate to the Access Details tab as shown in the image below:
Now, create three tables in the database with the titles: users, products, and sales.
You can use the following SQL queries to create the above-defined tables.
Users Migration
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateUsersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->string('email')->unique();
$table->string('position')->nullable();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
}
Products Migration
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateProductsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->increments('id');
$table->string('brand_name')->nullable();
$table->string('generic_name')->nullable();
$table->string('category')->nullable();
$table->string('receive_date')->nullable();
$table->string('exp_date')->nullable();
$table->double('orginal_price')->nullable();
$table->double('sell_price')->nullable();
$table->integer('quantity')->nullable();
$table->integer('quantity_left')->nullable();
$table->double('total')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('products');
}
}
Sales Migration
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateSalesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('sales', function (Blueprint $table) {
$table->increments('id');
$table->integer('user_id')->unsigned();
$table->foreign('user_id')->references('id')->on('users')->onUpdate('cascade')->onDelete('cascade');
$table->integer('product_id')->unsigned();
$table->foreign('product_id')->references('id')->on('products')->onUpdate('cascade')->onDelete('cascade');
$table->string('brand_name')->nullable();
$table->string('generic_name')->nullable();
$table->string('category')->nullable();
$table->double('orginal_price')->nullable();
$table->double('sell_price')->nullable();
$table->integer('quantity')->nullable();
$table->double('profit')->nullable();
$table->double('total')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('sales');
}}
After creating all the migrations, type the following command to migrate all of them into the database.
Php artisan make:migrate
Improve Your Laravel App Speed by 300%
Cloudways offers you dedicated servers with SSD storage, custom performance, an optimized stack, and more for 300% faster load times.
Product page View
Now, create a new ‘product’ folder in the Laravel views folder. Also, create a new index.blade.php file, and write the following code in it:
<div class="main-grid">
<div class="agile-grids">
<!-- blank-page -->
<div class="table-heading">
<h2>{{--{!! $user->name !!}'s--}} Point Of Sale Products</h2>
</div>
<div class="row">
<div class="col-md-8">
<p>Total Number of Products : <strong>{{$num}}</strong></p>
</div>
<div class="col-md-4">
<a class="btn btn-primary" type="submit" data-toggle="modal" data-target="#myModal_product">+Add Product</a>
</div>
</div>
<!-- begin:modal Add product -->
<div id="myModal_product" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content" >
<center>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Add Product</h3><br>
</div>
</center>
<div class="modal-body" >
<form class="form-horizontal" method="POST" action="product">
{{csrf_field()}}
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Brand Name</label>
<div class="col-sm-9">
<input type="text" name="brand_name" class="form-control" id="name" placeholder="Enter Brand Name" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Generic Name</label>
<div class="col-sm-9">
<input type="text" name="generic_name" class="form-control" id="name" placeholder="Enter Generic Name" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Category</label>
<div class="col-sm-9">
<input type="text" name="category" class="form-control" id="name" placeholder="Category Name" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Arrival Date</label>
<div class="col-sm-9">
<input id="date" type="date" class="form-control" name="receive_date" placeholder="2017-06-01" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Exp Date</label>
<div class="col-sm-9">
<input id="date" type="date" class="form-control" name="exp_date" placeholder="2017-06-01" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Orginal Price</label>
<div class="col-sm-9">
<input type="number" name="orginal_price" class="form-control" id="name" placeholder="100" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Selling Price</label>
<div class="col-sm-9">
<input type="number" name="sell_price" class="form-control" id="name" placeholder="100" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Quantity</label>
<div class="col-sm-9">
<input type="number" name="quantity" class="form-control" id="name" placeholder="100" required>
</div>
</div>
<br>
<input class="btn btn-primary" type="submit" value="Submit">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-hover btn-primary btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End:modal Add Product -->
<hr>
<div class="well">
<div class="w3l-table-info">
<table id="customer" class="table">
<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">Brand Name</th>
<th class="text-center">Generic Name</th>
<th class="text-center"><p>Category/ description</p></th>
<th class="text-center">Date Received</th>
<th class="text-center">Expiry Date</th>
<th class="text-center">Orginal price</th>
<th class="text-center">Selling Price</th>
<th class="text-center">QTY</th>
<th class="text-center">QTY Left</th>
<th class="text-center">Total</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
@foreach($products as $product)
<tr>
<td class="text-center"><strong>{!! $product->id !!}</strong></td>
<td class="text-center"><strong>{!! $product->brand_name !!}</strong></td>
<td class="text-center"><strong>{!! $product->generic_name !!}</strong></td>
<td class="text-center"><strong>{!! $product->category !!}</strong></td>
<td class="text-center"><strong>{!! $product->receive_date !!}</strong></td>
<td class="text-center"><strong>{!! $product->exp_date !!}</strong></td>
<td class="text-center"><strong>{!! $product->orginal_price !!}</strong></td>
<td class="text-center"><strong>{!! $product->sell_price !!}</strong></td>
<td class="text-center"><strong>{!! $product->quantity !!}</strong></td>
<td class="text-center"><strong>{!! $product->quantity_left !!}</strong></td>
<td class="text-center"><strong>{!! $product->total !!}</strong></td>
<td class="text-center">
<div class="row">
<div class="col-md-6">
<a class="btn btn-success" href="{!! route('product.update',$product->id) !!}">Update</a>
</div>
<div class="col-md-6">
<a class="btn btn-danger" data-toggle="modal" data-target="#delete_product">Delete</a>
</div>
</div>
</td>
<!-- begin:modal Add product -->
<div id="delete_product" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content" >
<center>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Delete Product Confirmation</h3><br>
</div>
</center>
<div class="modal-body" >
<p>
Are you sure want to Detete this product?
</p>
<form class="form-horizontal" method="get" action="/product/delete/{{$product->id}}">
{{csrf_field()}}
<br>
<div class="row">
<div class="col-md-9">
<button type="button" class="btn btn-hover btn-primary btn-sm" data-dismiss="modal">Cancel</button>
</div>
<div class="col-md-3">
<input class="btn btn btn-hover btn-danger btn-sm" type="submit" value="Yes, Delete">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- End:modal Add Product -->
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
Update Product
If you want to update the product details, just create a new update.blade.php file and write the following code in it.
<div class="main-grid">
<div class="agile-grids">
<div class="table-heading">
<h2>Add Product</h2>
</div>
<!-- Form start Start -->
<div class="panel panel-widget forms-panel">
<div class="forms" >
<div class=" form-grids form-grids-right">
<div class="widget-shadow " data-example-id="basic-forms">
<div class="form-title">
<h4 class="text-center">Add Product Information:</h4>
</div>
<div class="form-body">
<form class="form-horizontal" method="POST" action="{!! route('product.edit',$product->id) !!}" id="">
{{csrf_field()}}
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Brand Name</label>
<div class="col-sm-9">
<input type="text" name="brand_name" class="form-control" id="name" value="{{$product->brand_name}}" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Generic Name</label>
<div class="col-sm-9">
<input type="text" name="generic_name" class="form-control" id="name" value="{{$product->generic_name}}" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Category</label>
<div class="col-sm-9">
<input type="text" name="category" class="form-control" id="name" value="{{$product->category}}" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Arrival Date</label>
<div class="col-sm-9">
<input id="date" type="date" class="form-control" name="receive_date" value="{{$product->receive_date}}" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Exp Date</label>
<div class="col-sm-9">
<input id="date" type="date" class="form-control" name="exp_date" value="{{$product->exp_date}}" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Orginal Price</label>
<div class="col-sm-9">
<input type="number" name="orginal_price" class="form-control" id="name" value="{{$product->orginal_price}}" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Selling Price</label>
<div class="col-sm-9">
<input type="number" name="sell_price" class="form-control" id="name" value="{{$product->sell_price}}" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Quantity</label>
<div class="col-sm-9">
<input type="number" name="quantity" class="form-control" id="name" value="{{$product->quantity}}" required>
</div>
</div>
<br>
<input class="btn btn-primary" type="submit" value="Update">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Delete Product
When you click on DELETE to remove a particular product, the following window will appear. You can find its code in the index.blade.php file defined above.
Sales Page
Let’s move to the sales page. Create a sales folder in the Laravel view and then create a index.blade file inside it. Now write the following code in it.
<div class="form-body">
<form class="form-horizontal" method="POST" action="{{ route('product.order') }}">
{{csrf_field()}}
<div class="form-group">
<div class="col-sm-7">
<select id="inputState" class="form-control" name="product">
@foreach($products as $product)
<option value="{{$product->id}}">{{$product->brand_name}}</option>
@endforeach
</select>
</div>
<div class="col-md-2">
<input type="number" name="quantity" class="form-control" id="name" placeholder="QTY" required>
</div>
<div class="col-md-1"></div>
<div class="col-md-2">
<button class="btn btn-primary" type="submit"><strong>+</strong>Add To Cart</button>
</div>
</div>
</form>
</div>
<div class="well">
<div class="w3l-table-info">
<table id="customer" class="table">
<thead>
<tr>
{{--<th class="text-center">ID</th>--}}
<th class="text-center">Product Name</th>
<th class="text-center">Generic Name</th>
<th class="text-center"><p>Category/ description</p></th>
<th class="text-center"> Price</th>
<th class="text-center">QTY </th>
<th class="text-center">Amount</th>
<th class="text-center">Profit</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
@foreach(\Cart::content() as $sale)
<tr>
<td class="text-center"><strong>{!! $sale->name !!}</strong></td>
<td class="text-center"><strong>{!! $sale->options->generic_name !!}</strong></td>
<td class="text-center"><strong>{!! $sale->options->category !!}</strong></td>
<td class="text-center"><strong>{!! $sale->price !!}</strong></td>
<td class="text-center"><strong>{!! $sale->qty !!}</strong></td>
<td class="text-center"><strong>{!! $sale->subtotal !!}</strong></td>
<td class="text-center"><strong>{!! $sale->options->profit !!}</strong></td>
<td class="text-center">
<a class="btn btn-danger" href="{{ route('product.remove',$sale->rowId) }}">Cancel</a>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="row">
<div class="col-md-7">
</div>
<div class="col-md-5">
<h3>Total ammount : {{ \Cart::subtotal() }}</h3>
</div>
</div>
</div>
<br>
<button class="btn btn-primary" type="submit" data-toggle="modal" data-target="#myModal_product">Save</button>
<!-- begin:modal Add product -->
<div id="myModal_product" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content" >
<center>
<div class="modal-header">
<div class="row">
<div class="col-md-11">
<h3 class="modal-title">Cash</h3>
</div>
<div class="col-md-1">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
</div>
</div>
</center>
<div class="modal-body" >
<form class="form-horizontal" method="POST" action="/Point-Of-Sale-master/public/payment">
{{csrf_field()}}
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Customer Name</label>
<div class="col-sm-9">
<input type="text" name="name" class="form-control" id="name" placeholder="Enter Customer Name" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Cash Amount</label>
<div class="col-sm-9">
<input type="number" name="cash" class="form-control" id="name" placeholder="100" required>
</div>
</div>
<br>
<input class="btn btn-primary" type="submit" value="Save">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Next, create a file with the name sale.blade.php and write the following code.
<div class="form-body">
<form class="form-horizontal" method="POST" action="{{ route('product.order') }}">
{{csrf_field()}}
<div class="form-group">
<div class="col-sm-7">
<select id="inputState" class="form-control" name="product">
@foreach($products as $product)
<option value="{{$product->id}}">{{$product->brand_name}}</option>
@endforeach
</select>
</div>
<div class="col-md-2">
<input type="number" name="quantity" class="form-control" id="name" placeholder="QTY" required>
</div>
<div class="col-md-1"></div>
<div class="col-md-2">
<button class="btn btn-primary" type="submit"><strong>+</strong>Add To Cart</button>
</div>
</div>
</form>
</div>
<div class="well">
<div class="w3l-table-info">
<table id="customer" class="table">
<thead>
<tr>
{{--<th class="text-center">ID</th>--}}
<th class="text-center">Product Name</th>
<th class="text-center">Generic Name</th>
<th class="text-center"><p>Category/ description</p></th>
<th class="text-center"> Price</th>
<th class="text-center">QTY </th>
<th class="text-center">Amount</th>
<th class="text-center">Profit</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
@foreach(\Cart::content() as $sale)
<tr>
<td class="text-center"><strong>{!! $sale->name !!}</strong></td>
<td class="text-center"><strong>{!! $sale->options->generic_name !!}</strong></td>
<td class="text-center"><strong>{!! $sale->options->category !!}</strong></td>
<td class="text-center"><strong>{!! $sale->price !!}</strong></td>
<td class="text-center"><strong>{!! $sale->qty !!}</strong></td>
<td class="text-center"><strong>{!! $sale->subtotal !!}</strong></td>
<td class="text-center"><strong>{!! $sale->options->profit !!}</strong></td>
<td class="text-center">
<a class="btn btn-danger" href="{{ route('product.remove',$sale->rowId) }}">Cancel</a>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="row">
<div class="col-md-7">
</div>
<div class="col-md-5">
<h3>Total ammount : {{ \Cart::subtotal() }}</h3>
</div>
</div>
</div>
<br>
<button class="btn btn-primary" type="submit" data-toggle="modal" data-target="#myModal_product">Save</button>
<!-- begin:modal Add product -->
<div id="myModal_product" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content" >
<center>
<div class="modal-header">
<div class="row">
<div class="col-md-11">
<h3 class="modal-title">Cash</h3>
</div>
<div class="col-md-1">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
</div>
</div>
</center>
<div class="modal-body" >
<form class="form-horizontal" method="POST" action="/Point-Of-Sale-master/public/payment">
{{csrf_field()}}
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Customer Name</label>
<div class="col-sm-9">
<input type="text" name="name" class="form-control" id="name" placeholder="Enter Customer Name" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Cash Amount</label>
<div class="col-sm-9">
<input type="number" name="cash" class="form-control" id="name" placeholder="100" required>
</div>
</div>
<br>
<input class="btn btn-primary" type="submit" value="Save">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Web Routes
Now, let’s create web routes by writing the following given code.
Route::group(array('middleware' => 'auth'), function ()
{
Route::get('/product', [
'as' => 'product.index',
'uses' => 'ProductController@index'
]);
Route::post('/product', [
'as' => 'product.store',
'uses' => 'ProductController@store'
]);
Route::get('/update/product/{id}', [
'as' => 'product.update',
'uses' => 'ProductController@update'
]);
Route::post('/update/product/{id}', [
'as' => 'product.edit',
'uses' => 'ProductController@edit'
]);
Route::get('/product/delete/{id}', [
'as' => 'product.delete',
'uses' => 'ProductController@destroy'
]);
});
// Sell Routes
Route::group(array('middleware' => 'auth'), function ()
{
Route::get('/sales', [
'as' => 'sales.index',
'uses' => 'SaleController@index'
]);
Route::post('/cart', [
'as' => 'sale.store',
'uses' => 'SaleController@store'
]);
Route::get('/update/product/{id}', [
'as' => 'product.update',
'uses' => 'ProductController@update'
]);
Route::post('/sale/delete/{id}', [
'as' => 'sale.delete',
'uses' => 'SaleController@destroy'
]);
Route::get('/product/delete/{id}', [
'as' => 'product.delete',
'uses' => 'ProductController@destroy'
]);
});
Product Controller
After creating routes and views, now let’s move towards the controller part. Create a controller with the name productController using the Artisan command and write the following code.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Auth;
use App\Product;
class ProductController extends Controller
{
public function index(){
$user = Auth::user();
$num = Product::count();
$products = Product::all();
return view('product.index',compact('user','num','products'))->with('title','Products');
}
public function update($id){
$user = Auth::user();
$product = Product::find($id);
return view('product.update',compact('user','product'))->with('title','Edit Product');
}
public function store(Request $request){
$this->validate(request(),[
'brand_name' => 'required',
'generic_name' => 'required',
'category' => 'required',
'receive_date' => 'required',
'exp_date' => 'required',
'orginal_price' => 'required',
'sell_price' => 'required',
'quantity' => 'required'
]);
//crete and save the Product
/*return 'sazzad';*/
$product = new Product();
$product->brand_name = request('brand_name');
$product->generic_name = request('generic_name');
$product->category = request('category');
$product->receive_date = request('receive_date');
$product->exp_date = request('exp_date');
$product->orginal_price = request('orginal_price');
$product->sell_price = request('sell_price');
$product->quantity = request('quantity');
$product->quantity_left = request('quantity');
//Total value finding
$sell = $product->sell_price;
$left = $product->quantity_left;
$product->total= $sell * $left;
$product->save();
//sign them in
$notification = [
'message' => 'Product is added successfully.!',
'alert-type' => 'success'
];
return redirect('/product')->with($notification);
}
public function edit(Request $request,$id){
//validation
$this->validate(request(),[
'brand_name' => 'required',
'generic_name' => 'required',
'category' => 'required',
'receive_date' => 'required',
'exp_date' => 'required',
'orginal_price' => 'required',
'sell_price' => 'required',
'quantity' => 'required'
]);
$data =array(
'brand_name' => $request->input('brand_name'),
'generic_name' => $request->input('generic_name'),
'category' => $request->input('category'),
'receive_date' => $request->input('receive_date'),
'exp_date' => $request->input('exp_date'),
'orginal_price' => $request->input('orginal_price'),
'sell_price' => $request->input('sell_price'),
'quantity' => $request->input('quantity'),
'quantity_left' => $request->input('quantity'),
);
Product::where('id',$id)->update($data);
$notification = [
'message' => 'Product is updated successfully.!',
'alert-type' => 'success'
];
return redirect('/product')->with($notification);
}
public function destroy($id){
Product::where('id',$id)->delete($id);
$notification = [
'message' => 'Product Deleted Sucessfully.!',
'alert-type' => 'info'
];
return redirect('/product')->with($notification);
}
}
Sale Controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Auth;
use App\Product;
use App\Sale;
class SaleController extends Controller
{
public function index(){
$user = Auth::user();
$products = Product::all();
return view('sale.index',compact('user','products'))->with('title','Sales');
}
public function store(Request $request)
{
$user = Auth::user();
$products = Product::all();
$id = $request->input('product');
$qty = $request->input('quantity');
$product = Product::find($id);
/*return $product;*/
//creating sale data
$sale = new Sale();
$sale->product_id = $id;
$sale->user_id = $user->id;
$sale->brand_name = $product->brand_name;
$sale->generic_name = $product->generic_name;
$sale->category = $product->category;
$sale->orginal_price = $product->orginal_price;
$sale->sell_price = $product->sell_price;
$sale->quantity = $qty;
$real_price = $sale->orginal_price;
$real_qty_price = $real_price * $qty;
$sell_price = $product->sell_price;
$total = $sell_price * $qty;
$sale->total= $total;
$profit = $total - $real_qty_price;
$sale->profit = $profit;
$sale->save();
return view('sale.sale',compact('user','products','sale'))->with('title','Sales');
}
public function destroy($id){
Sale::where('id',$id)->delete($id);
$notification = [
'message' => 'Sale Product Deleted Sucessfully.!',
'alert-type' => 'info'
];
return redirect('/sales')->with($notification);
}
}
Product Model
After successfully creating controllers, now let’s create a product model for database communication. Create a model with the name Product and write the following code.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
//
}
Sale Model
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Sale extends Model
{
//
}
Final Words
This brings us to the end of this article. It demonstrates the complete integration of a Bootstrap admin dashboard in a Laravel application. Using the Laravel admin panel, developers can easily build advanced applications without consuming much of their time and effort. It provides pre-built features thus saving the developer’s time to code various functional operations manually. Moreover, it allows the effortless integration of different external libraries and packages, thereby helping developers to install added features in the projects in quick time.
If you still have more questions regarding this article, please feel free to mention them in the comments section below.
Share your opinion in the comment section.
COMMENT NOW
Owais Alam
is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]
Get Connected on:
Twitter
