Bootstrap 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.

Bootstrap Grid Layout

Tue, 02 Apr 2019 22:09:23 +0000

The datagrid can also be displayed and positioned easily in a Bootstrap Grid System layout, uses a series of containers, rows, and columns to the layout that is fully responsive.

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

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4div>
<div class="col-md-4">.col-md-4

use phpCtrl\C_DataGrid;
require_once("/file/path/to/conf.php");

$dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg -> set_theme('bootstrap');
$dg -> display();
?>
div>
<div class="col-md-4">.col-md-4div>
div>
div>

See Live Example!

The post Bootstrap Grid Layout appeared first on phpGrid - PHP Datagrid.

phpGrid, Twitter Bootstrap Integration

Wed, 06 May 2015 08:33:16 +0000

Run Demo

This is a step-by-step tutorial of how to integrate SmartAdmin, or any other Bootstrap theme, with phpGrid.

SmartAdmin is a popular Bootstrap admin theme. It has modern flat design and responsive layout. SmartAdmin comes with 5 different versions: Pure HTML, AJAX Version, PHP version, Modular AngularJS, and ASP.NET MVC5 versions. For this example, we will use the PHP version, specifically, the PHP Ajax version.

What you will need

Download a copy of phpGrid. You can either use the free, phpGrid Lite, or get the full version of phpGrid here.
Get the Bootstrap theme SmartAdmin.

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.

1. Folder Structure

As mentioned earlier, we will use SmartAdmin’s PHP version. In the PHP_version folder, you will find two subfolders, PHP_Ajax_version andPHP_HTML_version. In this example, only PHP_Ajax_version folder is copied to the root directory and is renamed as smartAdmin_AJAX (see below).

Next, we save our phpGrid folder in smartAdmin_AJAX as shown. However, you can save it to any folder you choose.

phpgrid bootstrap folder structure

2. Update phpGrid conf.php

Before you begin coding using phpGrid, you must specify the database information in conf.php, the phpGrid configuration file. Here, we specify the following values:

Database connection information,
SERVER_ROOT,
THEME

It is important that we set THEME value as “NONE”. We don’t need to provide a jQuery UI theme as Bootstrap already includes a theme. Using two jQuery themes will likely result in CSS conflicts and style inconsistency.

To learn more about phpGrid configuration, read the installation guide:/documentation/installation/

For the purposes of this demo, we will use a MySQL database. In the figure below, you can see an example of the necessary database definitions as they appear in conf.php.

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

define('PHPGRID_DB_HOSTNAME', 'localhost:3306');
define('PHPGRID_DB_USERNAME', 'root');
define('PHPGRID_DB_PASSWORD', '');
define('PHPGRID_DB_NAME', 'sampledb');
define('PHPGRID_DB_TYPE', 'mysql');
define('PHPGRID_DB_CHARSET','utf8');
define('SERVER_ROOT', '/smartAdmin_AJAX/phpGrid');
define('THEME', 'NONE');
// *** MUST SET TO FALSE WHEN DEPLOYED IN PRODUCTION ***
define('DEBUG', false);
/******** DO NOT MODIFY ***********/
require_once('phpGrid.php');
/**********************************/
?>

3. Edit Bootstrap lib/config.php

phpGrid requires PHP SESSION. To ensure that the PHP session starts properly, open the file “config.php” on the “SmartAdmin_AJAX/lib/” directory and copy and paste the following text at the very top of the file.

1	if (session_id() == ''){ session_start();}

phpgrid bootstrap session

The setup process is now complete.

4. Insert PHP Grid

In this demo, we will add a reference call to phpGrid directly in the file SmartAdmin “ajax/dashboard.php“. This call can be to any file in SmartAdmin ajax folder.

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

use phpCtrl\C_DataGrid;
require_once("/path/to/conf.php");

$dg = new C_DataGrid(“SELECT * FROM orders”, “orderNumber”, “orders”);
$dg->enable_search(true);
$dg->enable_export(‘EXCEL’);
$dg->enable_edit(‘INLINE’);
$dg->set_col_hidden(‘comments’);
$dg->set_col_edittype(“status”, “select”, “Shipped:Shipped;Canceled:Cancelled;Open:Open;Pending:Pending”); $dg->enable_autowidth(true);
$dg->display();
?>

Note the first line that references phpGrid/conf.php.

“orders” is a database table name from our MySQL sample database. You can find the sample MySQL sample database by going to phpGrid/examples/SampleDBfolder.

Now visit the following URL to play around with your newly created PHP grid by using functions such as CRUD, search, and export. You can find a complete list of phpGrid demos here.

1	http:///smartAdmin_AJAX/

5. Add Custom CSS (Optional)

At this point, the installation is complete. However, I refined jqGrid CSS so the final result would be more aesthetically pleasing. Here’s the final version of the CSS. Feel free to use this code on your page.

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

>
/* phpGrid to re-expand 100%. Needed when page is loaded in Ajax and there’s sidebar */
div.ui-jqgrid.ui-widget.ui-widget-content.ui-corner-all{
width: 100% !important;
overflow: auto;
}
/* prevent Bootstrap CSS conflict by reseting phpGrid header CSS */
.ui-jqgrid .ui-jqgrid-htable th div {
position: inherit;
height: initial;
}
.ui-jqgrid .ui-jqgrid-view input, .ui-jqgrid .ui-jqgrid-view select, .ui-jqgrid .ui-jqgrid-view textarea, .ui-jqgrid .ui-jqgrid-view button {
width: 100%;
height: 100%;
padding:0px;
}
/* FORM edit */
.ui-jqdialog-content table.EditTable input{
width: 90%;
}
.ui-jqdialog-content table.EditTable select{
width: 95%;
}
.ui-jqdialog-content table.EditTable textarea{
width:90%;
}
>

That’s it. You now have a fully functional and great-looking, responsive PHP grid in your Bootstrap. And it also works great on mobile devices!

phpGrid Bootstrap is mobile friendly.

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