phpGrid Laravel Integration Archives | phpGrid - PHP Datagrid

Laravel 10 & Bootstrap 5 Inventory Management with Dashboard, User Management

Fri, 14 Apr 2023 18:27:12 +0000

Introduction

This is an expansion of the popular inventory management system tutorial, integrated with Laravel 10, Bootstrap 5, as an out-of-box, and also customizable solution, can be used right away with little configuration.

The inventory management system includes features like inventory tracking, stock alerts, barcode scanning, purchase order management, sales order management, and report generation. With this system, you can easily manage your inventory, keep track of your stock levels, and ensure that you have the right amount of inventory on hand at all times.

In terms of the technology used, Laravel 10 provides a robust and secure back-end framework for handling the database and business logic, while Bootstrap allows for the creation of user-friendly front-end interfaces that are optimized for mobile devices.

The system is designed with a user-friendly interface, which makes it easy for users to navigate through the different sections of the application. This is important because it helps users to quickly access the information they need without having to spend too much time searching for it.

System Requirements

Our Inventory System requires the standard commercial phpGrid and phpChart license as it needs a few advanced features from both components.

PHP 8.1
MySQL or MariaDB
phpGrid 7+
phpChart (used for dashboard)

Inventory Management Components

The new inventory system has added a category in addition to products, purchases, orders, and suppliers. Current inventory, or products on hand, is updated by tracking incoming shipments and outgoing orders. Order alerts can be set to trigger when inventory levels fall below custom-defined minimum levels.

Set up Database:

The inventory management now has two separate databases, a inventory management database, and a Laravel framework database for user and session management.

Import Inventory Management Database

First of all, you’ll need to create a database for your inventory management system using InventoryManager.sql SQL script in the end of this tutorial. Execute the script using a MySQL tool such as MySQL Workbench. This will create a new database named InventoryManager.

Set up Laravel System Database

You will use Laravel’s built-in database migrations to create the necessary system tables and columns.

Copy
1
.env.example

to

1
.env

and updated the configurations (mainly the database configuration)
In your terminal run
1
php artisan key:generate
Run
1
php artisan migrate --seed

to create the database tables and seed the roles and users tables

Set up phpGrid

We will use a datagrid component by phpGrid to handle all internal database CRUD (Create, Remove, Update, and Delete) operations.

Be sure to download a copy of phpGrid before you proceed.

To install phpGrid, follow these steps:

Unzip the phpGrid download file.
Upload the phpGrid folder to the phpGrid folder.
Complete the installation by configuring the conf.php file.

To set up conf.php, follow those manual installation steps.

User Administration

User administration is included as part of the improved inventory management system. The system includes features for creating and deleting user accounts, assigning and revoking user permissions, and managing user roles and groups.

User Login

If you are not logged in you can only access this page or the Sign Up page. The default url takes you to the login page where you use the default credentials admin@admin.com with the password secret. Logging in is possible only with already existing credentials. For this to work you should have run the migrations.

Register

You can register as a user by filling in the name, email, role and password for your account. For your role you can choose between the Admin, Creator and Member. It is important to know that an admin user has access to all the pages and actions, can delete, add and edit another users, other roles, items, tags or categories; a creator user has accces to category, tag and item management, but can not add, edit or delete other users; a member user has access to the item management but can not take any action.

You can do this by accessing the sign up page from the “Sign Up” button in the top navbar or by clicking the “Sign Up” button from the bottom of the log in form. Another simple way is adding /register in the url.

Forgot Password

If a user forgets the account’s password it is possible to reset the password. For this the user should click on the “here” under the login form or add /login/forgot-password in the url.

User Profile

The profile can be accessed by a logged in user by clicking “User Profile” from the sidebar or adding /user-profile in the url. The user can add information like birthday, gender, phone number, location, language or skills.

User Management

This module allows administrators to manage user accounts and access permissions for a particular application or system. In addition to managing user accounts, user management can also be used to manage customer accounts, partners, and other types of users who need access to a particular application or system.

Dashboard

What is an inventory system good for without some of type of report? In this section, you will learn how to use phpChart – which seamlessly integrates with phpGrid – to create visually pleasing and useful reports for your Inventory Manager application.

Here’s what our dashboard:

Quick Stats

Admin

Instead of manually update supplier and category information in database directly in the past, the improved admin page added both Supplier Management and Category Management. More management admin can be added and customized in this section.

Supplier Management

Category Management

Inventory Administration

Products

Purchases

Current Orders

Barcodes

This module is part of phpGrid Ultimate and also available for a separate purchase.

In conclusion, an inventory management system with Laravel and Bootstrap is a powerful tool for businesses that want to streamline their inventory management processes, improve accuracy, and reduce costs associated with inventory management. It can be a customizable solution that can be tailored to meet the specific needs of your business.

Launch Demo

The post Laravel 10 & Bootstrap 5 Inventory Management with Dashboard, User Management appeared first on phpGrid - PHP Datagrid.

phpGrid, Laravel and Bootstrap (version 2)

Fri, 19 Jun 2015 09:41:39 +0000

Note this tutorial has an updated version. Check out the latest, much improved Dashboard + Laravel 10 + Bootstrap 5 integration demo please!

Introduction

This tutorial will begin by walking you through the integration of the Laravel 5 and Bootstrap 3 themes. Afterwards, we will show you how to add a PHP datagrid. If the Laravel and the Bootstrap theme are already up and running on your server, you can skip directly to “Create ‘dashboard.blade.php’ Child Template View” or “Where is phpGrid?”.

Install Laravel 5 (with Composer)

Let’s get started. Laravel 5 has the following system requirements.

PHP >= 5.4
Mcrypt PHP Extension
OpenSSL PHP Extension
Mbstring PHP Extension
Tokenizer PHP Extension

Please note that these Laravel 5 system requirements apply to both the web and the command line interface. There’s always a possibility that the version of PHP used in the command line may be different from the PHP running on the web server. If this is the case, modify your PHP alias to point to the same PHP executable for both. Finally, download a copy of phpGrid from download page for later use.

It is highly recommended that you use Composer to install Laravel. In order to keep the code lightweight, Laravel does not come prepackaged with any third-party libraries. Instead, it relies on Composer to manage any dependencies. Learn more about how to install Composer here.

To install Laravel, in the command line, go to the web root (e.g. /www), and execute the following command:

1	#composer create-project laravel/laravel --prefer-dist

To run Laravel, certain permissions need to be configured. Allow the web server to have write access to subfolders under the “storage” and “vendor” folders.

Laravel, AdminLTE Integration

In a previous phpGrid Bootstrap integration tutorial, we used the “Bootstrap SmartAdmin” theme. Here, we will use another theme called “AdminLTE“. You can preview it at https://almsaeedstudio.com/AdminLTE. If you are looking for alternative theme, we recommend the premium high qualify bootstrap themes from WrapBoottrap. While they are not free, it well worths the investment for developing beautiful and professional looking web apps.

Technically, AdminLTE works without the Laravel framework. But, by integrating it with Laravel, you get the added benefit of MVC routing and views. This ultimately results in cleaner, and more importantly, scalable code. The downside is that one must edit each AdminLTE page to covert it to Laravel views, preferably by using the Blade template.

Convert AdminLTE “starter.html” to Laravel View

At this point, we need to convert AdminLTE’s default “starter.html” to Laravel views so we can host our PHP datagrid. This consists of splitting the file into several “include” files – which will then be called by the startup routine.

First, download AdminTLE from almsaeedstudio.com and extract the files. Copy the folders “bootstrap”, “dist”, “plugins”, and file “starter.html” to the Laravel “public” folder. Open “starter.html” and copy its contents to the clipboard. This will be used as our starting point to create the new Laravel view.
Create a new view called “admin.blade.php”. (Note that all Blade templates should use the “.blade.php” extension.) Paste the text we copied from “starter.html” in the previous step and save the new view in “resources/views”. This will be the admin default layout from which the various Blade templates will be derived.
We now need to divide the code in “admin.blade.php” and copy it to a series of reusable sub-views. Create a new folder called “includes” under “resource/views”. This folder will be used to store these admin sub-views.

Cut out the “

”” section and paste it as a new view which we will call “header.blade.php”. Change any hyperlinks or file references to use the Laravel “asset” help function. Save the new file in the “includes” folder.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

class="main-header">
<a class="logo" href="index2.html">

<span class="logo-mini"><b>A</b>LT</span>

<span class="logo-lg"><b>Admin</b>LTE</span>
</a>

class="navbar navbar-static-top">
<a class="sidebar-toggle" href="#" data-toggle="offcanvas">
<span class="sr-only">Toggle navigation</span>
</a>

<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<ul class="nav navbar-nav">
<li class="dropdown messages-menu">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<ul class="menu">
<ul class="menu">
<li>
<div class="pull-left">
<img class="img-circle" src="{{ asset('dist/img/user2-160x160.jpg') }}" alt="User Image" /></div>

<h4>Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small></h4>

Why not buy a new awesome theme?</li>
</ul>
</ul>

</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
</ul>
</ul>

<ul class="nav navbar-nav">
<ul class="nav navbar-nav">
<li class="dropdown notifications-menu">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<ul class="menu">
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a></li>
</ul>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
</ul>
</ul>

<ul class="nav navbar-nav">
<ul class="nav navbar-nav">
<li class="dropdown tasks-menu">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<ul class="menu">
<ul class="menu">
<li>
<a href="#">
</a>
<h3>Design some buttons
<small class="pull-right">20%</small></h3>

<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%;"><span class="sr-only">20% Complete</span></div>
</div></li>
</ul>
</ul>
</li>
<li class="footer"><a href="#">View all tasks</a></li>
</ul>
</li>
</ul>
</ul>

<ul class="nav navbar-nav">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">

<img class="user-image" src="{{ asset('dist/img/user2-160x160.jpg') }}" alt="User Image" />

<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<ul class="dropdown-menu">
<li class="user-header"><img class="img-circle" src="{{ asset('dist/img/user2-160x160.jpg') }}" alt="User Image" />Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small></li>
</ul>
</ul>

<ul class="dropdown-menu">
<ul class="dropdown-menu">
<li class="user-body">
<div class="col-xs-4 text-center"><a href="#">Followers</a></div>
<div class="col-xs-4 text-center"><a href="#">Sales</a></div>
<div class="col-xs-4 text-center"><a href="#">Friends</a></div></li>
</ul>
</ul>

<ul class="dropdown-menu">
<li class="user-footer">
<div class="pull-left"><a class="btn btn-default btn-flat" href="#">Profile</a></div>
<div class="pull-right"><a class="btn btn-default btn-flat" href="#">Sign out</a></div></li>
</ul>
</li>
</ul>
</ul>

</div>
</nav></header>

Now, go back to “admin.blade.php” and cut out the “

”” sidebar section and paste it as a new view called “sidebar.blade.php”. As in the previous step, change any hyperlinks or file references so they use the Laravel “asset” help function. Save this file in the “includes” folder.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

class="main-sidebar">

class="sidebar">
<div class="user-panel">
<div class="pull-left image"><img class="img-circle" src="{{ asset('dist/img/user2-160x160.jpg') }}" alt="User Image" /></div>
<div class="pull-left info">

Alexander Pierce

<a href="#"><i class="fa fa-circle text-success"></i> Online</a>

</div>
</div>

<form class="sidebar-form" action="#" method="get">
<div class="input-group"><input class="form-control" name="q" type="text" placeholder="Search..." />
<span class="input-group-btn">
<button id="search-btn" class="btn btn-flat" name="search" type="submit"><i class="fa fa-search"></i></button>
</span></div>
</form>

<ul class="sidebar-menu">
<ul class="sidebar-menu">
<li class="header">HEADER</li>
</ul>
</ul>

<ul class="sidebar-menu">
<li class="active"><a href="#"><i class="fa fa-link"></i> Link</a></li>
<li><a href="#"><i class="fa fa-link"></i> Another Link</a></li>
<li class="treeview"><a href="#"><i class="fa fa-link"></i> Multilevel <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li><a href="#">Link in level 2</a></li>
<li><a href="#">Link in level 2</a></li>
</ul>
</li>
</ul>

</section>

</aside>

Repeat these steps for the “

Add the “include” statements for the newly-created sub-views in “admin.blade.php”, as shown below
1
2
3
4
@include('includes.header');
@include('includes.sidebar');
@include('includes.footer');
@include('includes.controlsidebar');

Also in “admin.blade.php”, add the following section between sidebar and footer. Copy and past section

(see below) where we host the code in which phpGrid is rendered. Also include “@yield(‘content’)”” in

section.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div class="wrapper">

@include('includes.header')
@include('includes.sidebar')

<div class="content-wrapper">

class="content-header">
<h1>Page Header
<small>Optional description</small></h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
<li class="active">Here</li>
</ol>
</section>

class="content">
@yield('content')</section>

</div>

@include('includes.footer')
@include('includes.controlsidebar')

</div>

Move the required Javascript found at the bottom of “starter.html” to the “”” section (not “

”!) in “admin.blade.php”.

1
2
3
4
5
6
7
8
9
10
11

We are almost done. In “admin.blade.php”, be sure to change any hyperlinks or file references, so they point to the Laravel “asset” help function.

Create “dashboard.blade.php” Child Template View

We just created our admin layout by dividing the file “starter.html” into various views and sub-views and saving them as PHP files. “admin.blade.php” is our parent layout – the one that is used as a basis for all other admin layouts and the file from which these other layouts will extend. Variable “$grid” holds the PHP datagrid object passed from route next.

1
2
3
4
5

@extends('admin')

@section('content')
{!! $grid !!}
@endsection

Where Is phpGrid??

Up until now, the walk-through has addressed converting AdminLTE theme to Laravel views. Everything in Laravel 5 is autoloaded using PSR-4 within the “app/” directory. This can be seen in the “composer.json” file.

Although we foresee the capability in future releases, for backward compatibility reasons, phpGrid currently does not support the namespace construct. Without namespace support, we cannot call our C_DataGrid class from directly within the Laravel Controller. – The workaround is to call phpGrid directly from a route file. For this reason, instead of storing phpGrid in the app/ directory, we place the phpGrid components in the public folder.

The correct path to put phpGrid is in the Laravel “public” folder, not “app” folder.

So, go ahead and download a copy of phpGrid if you haven’t already done so, and extract the files into the Laravel “public” folder. Complete the installation by configuring the “conf.php” file. For instructions on how to do this, see setup phpGrid configuration.

Once you have completed the previous step, in the Laravel route file “app/Http/routes.php”, copy and paste the following code snippet:

1
2
3
4
5
6
7
8
9
10
11
12
13

Route::get(‘dashboard’, function () {
use phpCtrl\C_DataGrid;
require_once(public_path() .”/phpGrid_Lite/conf.php”);

$dg = new C_DataGrid(“SELECT * FROM orders”, “orderNumber”, “orders”);
$dg->enable_edit(“INLINE”, “CRUD”);
$dg->enable_autowidth(true)->enable_autoheight(true);
$dg->set_theme(‘cobalt-flat’);
$dg->display(false);

$grid = $dg -> get_display(true); // do not include required javascript libraries until later with with display_script_includeonce method.
return view(‘dashboard’, [‘grid’ => $grid]);
});

That’s all there is to it!

Where is the controller?

Where is the Laravel controller?You may ask, “Where is the Laravel controller for our view?” The answer is it is simply not needed for our datagrid. The route we created in a previous step essentially controls the view for us. In a perfect world, the controller would be stored where all logic and pass information for rendering views would be handled. However, phpGrid’s current lack of “namespace” support makes it impossible for us to call the phpGrid library from within the Laravel Controller. In a future phpGrid release which offers “namespace” support, this workaround will no longer be necessary.

Reference:

https://stackoverflow.com/questions/19064305/convert-html-code-to-laravelor-any-framework
https://maxoffsky.com/code-blog/laravel-first-framework-chapter-4-views/
https://almsaeedstudio.com/
https://codelution.com/development/web/integrating-bootstrap-admin-template-with-laravel-5/
Blade cheatsheet: https://laravel-recipes.com/recipes/248/knowing-all-the-blade-template-command
Laravel view: https://laravel.com/docs/master/views
https://tutsnare.com/pass-data-from-controller-to-view-laravel/
If you are looking for a more general introduction in PHP, you can check this PHP tutorial

The post phpGrid, Laravel and Bootstrap (version 2) appeared first on phpGrid - PHP Datagrid.

phpGrid Laravel Integration (version 1)

Sun, 24 May 2015 10:06:23 +0000

This is a step-by-step tutorial of how to integrate the Laravel PHP framework with phpGrid.

Laravel is a free, open-source PHP web application framework architected in a model–view–controller (MVC) pattern. phpGrid is a standalone CRUD component which includes all the necessary server and client side scripts. It does not need the Laravel packaging system to manage dependency.

System Requirements:

Laravel 7
PHP >= 7.2 (required by Laravel)
MCrypt PHP Extension or OpenSSL (required by Laravel)
phpGrid Lite (free)
Relational Database, e.g. MySQL

Laravel requires PHP version 7.2+ and MCrypt PHP Extension. Check your phpinfo file to verify the PHP. In this tutorial, we will be using the free version of phpGrid, phpGrid Lite.

Setting up Laravel:

The easiest way is to install Laravel is by using Composer. However, the Laravel installation procedure is outside the scope of this tutorial. Please visit http://laravel.com/docs/ for the Laravel installation process. For this demo, we will install the Laravel folder in the web server’s root directory.

phpGrid Folder Location in Laravel:

It is a common practice to save third-party libraries to Laravel “app/libraries” folder. However, the correct path to put phpGrid is in the Laravel “public” folder.

It is a common practice to save third-party libraries to Laravel “app/libraries” folder. However, the correct path to put phpGrid is in the Laravel “public” folder. This is because phpGrid is more than just the back-end of the PHP classes. It also contains front-end user accessible stylesheets and Javascript to render the datagrid. Such a library must reside in Laravel “public” directory because it is the public directory is the root directory that is accessible to users when they visit your website.

conf.php

Now we need to setup the database connection and script path information in the file “conf.php”. Since phpGrid resides in “public” folder – Laravel’s front-end root directory – the value of phpGrid SERVER_ROOT should be “/phpGrid_Lite”. Don’t forget the slash at the beginning.

Learn more about SERVER_ROOT and other of phpGrid system variables here.

1	define('SERVER_ROOT', '/phpGrid_Lite');

Laravel views:

Finally, we need to create a view file in the Laravel “app/views” folder. Since phpGrid is located in Laravel’s “public” folder, we can reference the path to its conf.php file with Laravel’s public_path() helper function.

1
2
3
4
5
6

use phpCtrl\C_DataGrid;
require_once(public_path() ."/phpGrid_Lite/conf.php");

$dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg->enable_edit("INLINE", "CRUD");
$dg->display();

Note that “orders” is a database table from the phpGrid sample database…. And that’s all there is to it! You have now integrated the power of phpGrid with the Laravel platform.

Screenshot

The post phpGrid Laravel Integration (version 1) appeared first on phpGrid - PHP Datagrid.

phpGrid Laravel Integration Archives | phpGrid - PHP Datagrid

Laravel 10 & Bootstrap 5 Inventory Management with Dashboard, User Management

Introduction

System Requirements

Inventory Management Components

Set up Database:

Import Inventory Management Database

Set up Laravel System Database

Set up phpGrid

User Administration

User Login

Register

Forgot Password

User Profile

User Management

Dashboard

Quick Stats

Admin

Supplier Management

Category Management

Inventory Administration

Products

Purchases

Current Orders

Barcodes

phpGrid, Laravel and Bootstrap (version 2)

Introduction

Install Laravel 5 (with Composer)

Laravel, AdminLTE Integration

Convert AdminLTE “starter.html” to Laravel View

Custom Template Design 70%

General Settings

Create “dashboard.blade.php” Child Template View

Where Is phpGrid??

Where is the controller?

Reference:

phpGrid Laravel Integration (version 1)

System Requirements:

Setting up Laravel:

phpGrid Folder Location in Laravel:

conf.php

Laravel views:

Screenshot

Custom Template Design
70%