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.

Gantt Chart Integration

Thu, 21 Jul 2022 00:03:38 +0000

Launch Demo

We are constantly experimenting with new frameworks in order to better combine content and reporting tools in phpGrid. The most recent is a Gantt chart integration.

Setup

Before you start, download phpGrid and phpGantt.

phpGantt is a wrapper class of excellent javascript library Frappe Gantt (https://frappe.io/gantt). It is also included in phpGrid and phpChart commercial license with more features and full fledged Gantt examples.

It’s important to install phpGrid and phpGantt in separate folders. The chart below shows the folder structure we used in our example. This is the RECOMMENDED folder hierarchy.

localhost
+-- phpGrid_Gantt
|   |-- phpGrid
|   |   +-- conf.php
|   |-- phpGantt
|   |   +-- conf.php
|   +-- phpgrid-with-gantt-chart.php

Once we have the folder structure, define the database connection settings in phpGantt/conf.php, similar to the followings.

1
2
3
4
5
6
7

define('PGC_DB_HOSTNAME', 'localhost:3306'); // database host name
define('PGC_DB_USERNAME', 'root'); // database user name
define('PGC_DB_PASSWORD', 'root'); // database password
define('PGC_DB_NAME', 'sampledb'); // database name
define('PGC_DB_TYPE', 'mysql'); // database type
define('PGC_DB_CHARSET','utf8mb4');

Load Tasks

Now, we can move on to the actual integration. First all, let’s add the instruction to include both conf.php files for each product at the start of the script.

1 2	require_once("phpGrid/conf.php"); require_once("phpGantt/conf.php");

The data for the tasks must then be loaded into an array, which will serve as the data source for the Gantt chart. The following is the tasks table definition with some sample task data.

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

CREATE TABLE `tasks` (
`id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,
`name` VARCHAR(255) DEFAULT NULL,
`estimated_days` INT(11) DEFAULT NULL,
`start` DATE DEFAULT NULL,
`end` DATE DEFAULT NULL,
`progress` INT(11) DEFAULT NULL,
`note` mediumtext,
`dependencies` VARCHAR(255) DEFAULT NULL,
`assignee` VARCHAR(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4;

INSERT INTO `tasks` (`id`, `name`, `estimated_days`, `start`, `end`, `progress`, `note`, `dependencies`, `assignee`)
VALUES
(8, 'task1', 3, '2022-05-11', '2022-05-14', 30, 'working on it', NULL, 'Joe'),
(9, 'task2', 2, '2022-05-12', '2022-05-14', 50, 'good ', '8', 'Mary'),
(10, 'task3', 5, '2022-05-15', '2022-05-22', 80, 'WIP still', '9', 'Frank'),
(11, 'task4', 1, '2022-05-22', '2022-05-23', 10, 'Waiting for testing', '10', 'Joe'),
(12, 'task5', 3, '2022-05-16', '2022-05-18', 50, 'Agile meeting votes', '8', 'Frank'),
(13, 'task6', 2, '2022-05-16', '2022-05-18', 75, 'Testing', '10', 'Joe');

The following creates a two-dimensional array from the “tasks” table above.

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

$sql = 'SELECT * FROM tasks';

$db = new phpCtrl\C_Database(PGC_DB_HOSTNAME, PGC_DB_USERNAME, PGC_DB_PASSWORD, PGC_DB_NAME, PGC_DB_TYPE, PGC_DB_CHARSET);

$results = $db->db_query($sql);
$tasks = [];
$count = 0;

// prepare tasks to display in Gantt
while($row = $db->fetch_array_assoc($results)) {

for($i = 0; $i < $db->num_fields($results); $i++) {

$col_name = $db->field_name($results, $i);

$tasks[$count]['id'] = $row['id'];
$tasks[$count]['start'] = $row['start'];
$tasks[$count]['end'] = date('Y-m-d', strtotime('+'.$row['estimated_days'] .' days', strtotime($row['start'])));
$tasks[$count]['name'] = $row['name'];
$tasks[$count]['progress'] = (int)$row['progress'];
$tasks[$count]['_start'] = $row['start'];
$tasks[$count]['_end'] = $row['end'];
$tasks[$count]['_index'] = $row['id'];
$tasks[$count]['dependencies'] = $row['dependencies'];
}

$count++;
}

Next, we simply pass the $tasks, a 2-dimensional array to our Gantt constructor.

1 2	$pgc = new phpCtrl\C_Gantt($tasks); $pgc -> display();

This should give us the Gantt Chart. Since we also want to update the tasks, we can add the phpGrid.

1
2
3
4

$dg = new phpCtrl\C_DataGrid('select * from tasks', 'id', 'tasks');
$dg->enable_autowidth(true);
$dg->enable_edit('INLINE');
$dg->display();

That’s all there is to it! Try a quick search or sort and observe the graph updating in real-time.

Complete Code

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

require_once("phpGantt/conf.php");
require_once("phpGrid/conf.php");
?>
DOCTYPE html>
<html>
<head>
<title>phpGantt - Basic Gantttitle>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

head>
<body>

<h2 class="text-center">A Gantt Chart with phpGrid h2>

$sql = 'SELECT * FROM tasks';

$db = new phpCtrl\C_Database(PGC_DB_HOSTNAME, PGC_DB_USERNAME, PGC_DB_PASSWORD, PGC_DB_NAME, PGC_DB_TYPE, PGC_DB_CHARSET);

$results = $db->db_query($sql);
$tasks = [];
$count = 0;

// prepare tasks to display in Gantt
while($row = $db->fetch_array_assoc($results)) {

for($i = 0; $i < $db->num_fields($results); $i++) {

$col_name = $db->field_name($results, $i);

$tasks[$count]['id'] = $row['id'];
$tasks[$count]['start'] = $row['start'];
$tasks[$count]['end'] = date('Y-m-d', strtotime('+'.$row['estimated_days'] .' days', strtotime($row['start'])));
$tasks[$count]['name'] = $row['name'];
$tasks[$count]['progress'] = (int)$row['progress'];
$tasks[$count]['_start'] = $row['start'];
$tasks[$count]['_end'] = $row['end'];
$tasks[$count]['_index'] = $row['id'];
$tasks[$count]['dependencies'] = $row['dependencies'];
}

$count++;
}

// display our beautiful Gantt
$pgc = new phpCtrl\C_Gantt($tasks);
$pgc -> display();

// add datagrid for CRUD
$dg = new phpCtrl\C_DataGrid('select * from tasks', 'id', 'tasks');
$dg->set_theme('bootstrap');
$dg->set_col_hidden('note');
$dg->enable_autowidth(true);
$dg->set_dimension('950px');
$dg->enable_edit('INLINE');
$dg->display();
?>

body>
html>

What to Improve

The application may be improved by including an event handler that will update the Gantt chart whenever an update or deletion occurs in the datagrid. On the other hand, the grid may be refreshed when the Gantt Chart changes (by dragging either end of a task with mouse), which can also be reflected in the database via ajax calls.

Give it a try!

The post Gantt Chart Integration appeared first on phpGrid - PHP Datagrid.

Install phpGrid using cPanel

Tue, 05 Oct 2021 03:53:16 +0000

While this tutorial walkthrough shows you how to install phpGrid using web interface of cPanel, it is recommended to use SFTP whenever possible.

Designed to simplify the process of hosting a web site, cPanel is a popular web-based web hosting interface software for the website owner. To install phpGrid, using cPanel, logging into cPanle, then go to File Manager, and upload phpGrid zip file into public_html directory, finally extract the zip file.

Installation Walkthrough:

1. Go to File Manager in cPanel

2. Click ‘public_html’ or whatever the web root folder

3. Click Upload and upload compressed phpGrid (.zip)

4. Extract the compressed phpGrid.

5. Lastly, edit conf.php for required database connection.

A final note, do not extract compressed phpGrid file first before upload because the upload would like to fail due to considerable number of files.

Happy gridding!

The post Install phpGrid using cPanel appeared first on phpGrid - PHP Datagrid.

phpGrid, phpChart Integration

Mon, 24 Dec 2012 01:19:21 +0000

Launch Demo

It’s easy to combine phpGrid and phpChart to create a seamless integrated, interactive, and completely web-based content and report management tool.

Setup

Before you start, you must download phpGrid and phpChart. Both downloads are free.

It’s important to install phpGrid and phpChart in separate folders. The chart below shows the folder structure we used in our example. Both phpGrid and phpChart resides in a separate folder within “phpGrid_phpChart” folder which is found under the web root folder “htdocs”. This is the RECOMMENDED folder hierarchy.

htdocs
+-- phpGrid_phpChart
|   |-- phpGrid
|   |   +-- conf.php
|   |-- phpChart
|   |   +-- conf.php
|   +-- phpgrid_phpchart_integration.php

Once the folder structure is ready, define the phpChart SCRIPTPATH value in the file conf.php.

phpChart conf.php

1	define('SCRIPTPATH','/phpGrid_phpChart/phpChart/');

Programming

Now, we can move on to the actual integration. First all, add the instruction to include both the conf.php files for each product at the start of the script.

1 2	require_once("phpGrid/conf.php"); require_once("phpChart/conf.php");

Then, create the chart with phpChart. Here in this example we have two charts. The first chart uses a single series of data. The second one has two series and renders a bar chart instead of the default line chart. All the phpChart methods and properties documents are available on phpChart.com. Pass “null” as the series data if you don’t want to have any initial data in the chart.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// first phpChart with one series
$pc = new C_PhpChartX(array(array(null)), 'Graph');
$pc->set_axes(array(
'xaxis'=> array('label'=>'Buy Price'),
'yaxis'=> array('label'=>'$')
));
$pc->draw(800,500);

// second phpChart with two series
$pc2 = new C_PhpChartX(array(array(null), array(null)), 'Graph2');
$pc2->set_axes(array(
'xaxis'=> array(
'label'=>'Buy Price/MSRP (by Product Code)'),
'yaxis'=> array('label'=>'$')
));
$pc2->set_animate(true);
$pc2->set_legend(array('show'=>true,'location'=>'nw'));
$pc2->draw(800,500);

The final part is to code the grid. In our example, we use the “products” database table.

The most important part of the grid is the custom event handler “jqGridLoadComplete”. It is here that the phpGrid and phpChart integration happens. In our example, the values in both the “buyPrice” and “MSRP” columns are retrieved and stored in the arrays d1 and d2. You can replace these columns with columns with the data stored in any field in your table. GraphData1 and GraphData2 are used to store the series of dataset that later will be used to plot our charts created earlier.

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

$dg = new C_DataGrid("SELECT * FROM products", "productCode", "products");
$dg->enable_edit('FORM');
$onGridLoadComplete = << function(status, rowid)
{
var GraphData1 = [];
var GraphData2 = [];

d1 = $('#products').jqGrid('getCol', 'buyPrice', false);
d2 = $('#products').jqGrid('getCol', 'MSRP', false);
npoints = d1.length;
for(var i=0; i < npoints; i++){
GraphData1[i] = [i+1, parseInt(d1[i])];
}
_Graph.series[0].data = GraphData1;
_Graph.replot({resetAxes:true});

for(var i=0; i < npoints; i++){
GraphData1[i] = [i+1, parseInt(d1[i])];
GraphData2[i] = [i+1, parseInt(d2[i])];
}
_Graph2.series[0].data = GraphData1;
_Graph2.series[1].data = GraphData2;
_Graph2.replot({resetAxes:true});
}
ONGRIDLOADCOMPLETE;
$dg->add_event("jqGridLoadComplete", $onGridLoadComplete);
$dg->set_col_property('MSRP', array('classes'=>'msrp_bg')); // change column background color
$dg->set_col_property('buyPrice', array('classes'=>'buyprice_bg')); // change column background color
$dg->enable_search(true);
$dg->display();

To easily recognize the data source, we set the CSS class so that the datagrid column background color to matches the series color in phpChart.

1 2	.msrp_bg { background-color: #4BB2C5 !important; } .buyprice_bg { background-color: #F8C05B !important; }

The COMPLETE example

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

require_once("phpGrid/conf.php");
require_once("phpChart/conf.php");
?>

phpGrid phpChart Integration Example

Try do a quick search or do a sort. Observe the graph updates in real-time.

// second phpChart with two series
$pc2 = new C_PhpChartX(array(array(null), array(null)), 'Graph2');
$pc2->set_axes(array(
'xaxis'=> array(
'label'=>'Buy Price/MSRP (by Product Code)'),
'yaxis'=> array('label'=>'$')
));
$pc2->set_animate(true);
$pc2->set_legend(array('show'=>true,'location'=>'nw'));
$pc2->draw(600,300);
?>

$dg = new C_DataGrid("SELECT * FROM products", "productCode", "products");
$dg->enable_edit('FORM');

$onGridLoadComplete = << function(status, rowid)
{
var GraphData1 = [];
var GraphData2 = [];

d1 = $('#products').jqGrid('getCol', 'buyPrice', false);
d2 = $('#products').jqGrid('getCol', 'MSRP', false);
npoints = d1.length;
for(var i=0; i < npoints; i++){
GraphData1[i] = [i+1, parseInt(d1[i])];
}
_Graph.series[0].data = GraphData1;
_Graph.replot({resetAxes:true});

for(var i=0; i < npoints; i++){
GraphData1[i] = [i+1, parseInt(d1[i])];
GraphData2[i] = [i+1, parseInt(d2[i])];
}
_Graph2.series[0].data = GraphData1;
_Graph2.series[1].data = GraphData2;
_Graph2.replot({resetAxes:true});
}
ONGRIDLOADCOMPLETE;

$dg->add_event("jqGridLoadComplete", $onGridLoadComplete);
$dg->set_col_property('MSRP', array('classes'=>'msrp_bg'));
$dg->set_col_property('buyPrice', array('classes'=>'buyprice_bg'));
$dg->enable_search(true);
$dg->display();
?>

That’s all there is to it! Try a quick search or sort and observe the graph updating in real-time.

Give it a try! | Download Integration Example File

Technical Notes

The Javascript used in the custom event handler in phpGrid is the bread and butter of this integration.
Set the array to null for the initial graph.
For the creation of the initial plot you can pass series of data in a 1-D array. jqPlot internally converts the data into a 2-D array. However, keep in mind that, this does not happen on .replot().
If you should get the following error message
1
Notice: Constant DEBUG already defined in /phpGrid/conf.php on line 2

This happens because both phpChart and phpGrid have a DEBUG constant, you need to comment out of them in conf.php

1
// define('DEBUG', true);

Using phpChart Lite

One can also use phpChart free Lite version to integrate with phpGrid. However, since phpChart Lite only supports a single chart, there are some limitations to the integration above. For example, because the graph name is hard coded to ‘__chart1’ in Lite (with two underscore), in the following

1 2	_Graph.series[0].data = GraphData1; _Graph.replot({resetAxes:true});

_Graph must be replaced with ___chart1 (a triple underscore!)

1
2
3
4

___chart1.series[0].data = GraphData1;
___chart1.replot({
resetAxes: true
});

The post phpGrid, phpChart Integration appeared first on phpGrid - PHP Datagrid.

setCallBack

Sat, 14 Jan 2012 19:57:21 +0000

Parameters:
- $callback_str: callback string
Description:
- Used for pass setting between 3rd party system and phpGrid using AJAX callback. Read the comments in file callbackstr.php for usage

The post setCallBack appeared first on phpGrid - PHP Datagrid.

get_display()

Sat, 14 Jan 2012 19:35:43 +0000

Parameters:
- $add_script_includeonce: true or false. Whether or not to include script header.
Description:
- It returns the grid body with options to include script header. It is useful for MVC framework integration such as Joomla! and Drupal.
Remark:
- The get_display() function should be called AFTER display() is called so that the grid body and header is saved to an internal output buffer that can be later retrieved by get_display().

Example:

1
2
3
4
5
6
7
8
9

$dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg -> display(false); // do not render display
$grid = $dg -> get_display(false); // do not include required javascript libraries until later with with display_script_includeonce method.

// other page content goes here
/* ........................... */

$dg -> display_script_includeonce();
echo $grid;

The post get_display() appeared first on phpGrid - PHP Datagrid.