How To Create Pos System Using Php

How to build a simple PHP point of sale system. This article is a series of several of my articles about PHP CRUD. We will focus on making a simple pos system with PHP and JQuery. I divide this article into sections where each section will implement the module from the PHP POS.

Table of Contents

1 What is point of sale?
2 Requirement
- 2.1 The equipment needed
- 2.2 Some support plugins include:
3 Create login page PHP Point Of Sale System
- 3.1 Create supporting files
- 3.2 Create Login Page
4 Conclusion

What is point of sale?

Point of Sale is a point (check-out) where the transaction can be said to be completed. This is where buyers and sellers make payments for goods/services that have been received.

At POS, the seller will calculate the entire price purchased by the consumer and gives the option for the buyer to make a payment and issue a receipt for the purchase transaction, commonly referred to as a receipt.

A point of sale is also called pos software or retail pos. This program used for information systems in stores. Some modules that exist on POS Systems such as record customer data, suppliers, sales, purchases, print sales notes, print reports, inventory manager and much more.

Building the PHP POS software, you can earn a lot of money by selling it at the shops around you.

Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 1

In this article, I will not create all modules from the POS system. If you want me to make a complete POS module, you may have to pay me the loyalty programs with a high-cost :p LOL.

Requirement

The equipment needed

1. PHP Server (Windows XAMPP or you can install apache and PHP server in Linux)
2. PDO (Having used PDO as a MySQL connection, this application has support for PHP 7)
3. MySQL Database
4. JQuery Library
5. Admin LTE Template, download here.

Some support plugins include:

Sweetalert.js plugin (Beautiful plugin alerts to replace standard javascript alerts).
Hotkey.js plugin (Create a shortcut button with Javascript).
Redirect.js plugin (simple plugin to send POST data using Javascript).
Datatables bootstrap plugin (used to create responsive tables).
Bootstrap notify plugin (used to display notifications).
Myfunction.js, a collection of my javascript functions that will use to speed up build the application
session_checker.js, my jquery script to check session every time page loaded.

You can download all supported file in the link below

supported file download link

List of PHP point of sale tutorials:

Create login page – Tutorial Build PHP Point Of Sale Part 1.
Create Dynamic Menu and Dashboard Page -PHP Point Of Sale Tutorial Part 2.
Create Master User Form – PHP Point Of Sale Tutorial Part 3
Create Master Item / Product Form – PHP Point Of Sale Tutorial Part 4
Create Sales Form / Point of sale – PHP Point Of Sale Tutorial Part 5

And as a bonus article, I will include an article how to create a receipt PHP using FPDF.

As a preliminary preparation, please create a MySQL database with the name "pos". Add 1 table named m_user. As shown below

Create Pos Database And M User Table Tutorial Build Point Of Sale With PHP PDO MySQL And Jquery

Add a new user with the following query

insert into ` m_user ` ( ` id_user ` , ` username ` , ` pass_user ` , ` h_menu ` , ` uniq_login ` ) values ( '6' , 'ADMIN' , MD5 ( '123' ) , '1,2,3' , '' ) ;

insert into ` m_user ` ( ` id_user ` , ` username ` , ` pass_user ` , ` h_menu ` , ` uniq_login ` ) values ( '7' , 'PEDRO' , MD5 ( '123' ) , '1,3' , '' ) ;

insert into ` m_user ` ( ` id_user ` , ` username ` , ` pass_user ` , ` h_menu ` , ` uniq_login ` ) values ( '8' , 'VALE' , MD5 ( '123' ) , '1,2' , '' ) ;

Okay, let's begin the tutorial

Create login page PHP Point Of Sale System

Create supporting files

1. Create a project folder with the name "pos."

2. Make sure you have downloaded the adminLTE template, if not please download at the official site here. Read the "Tutorial CRUD PHP, MySQL And JQuery In 10 Minutes (Bonus Source Code)" tutorial as study material.

3. Extract the adminLTE framework into the "pos" project folder.

4. Add new folders "application", "image" and "library" in the pos folder.

Create New Folder In Pos Project Folder

5. Add 6 new folders into "application" folder: layout, main, master, model, sales, utility.

Php Point Of Sale Open Source Min

6. Create 4 PHP files inside the "library" folder: check_access.php, check_login.php , checksession.php and config.php. Then fill the entire file with the following code:

Library Folder In Retail Pos Project Folder Min

check_access.php

<?php

require_ once ( "../model/dbconn.php" ) ;

require_ once ( "../model/pos.php" ) ;

$id_user = $_SESSION [ 'pos_id' ] ;

$asmenu = explode ( "," , $_SESSION [ 'pos_h_menu' ] ) ;

if ( ! in_array ( $idsmenu , $asmenu ) )

{

require_ once ( "../model/dbconn.php" ) ;

require_ once ( "../model/pos.php" ) ;

$id_user = $_SESSION [ 'pos_id' ] ;

$pos = new pos ( ) ;

$html = '<div style="margin:0 auto ;text-align:center;width:80%"><img src="../../image/warning.png"><h3>Restricted Access, Back to <a href="' . $sitename . 'aplication/main/">Dashboard Menu</a></h3>

</div>' ;

die ( $html ) ;

}

check_access.php used to check user access every time the user visit the page. If the user does not have an access to a menu will be given a warning restricted access with a "warning" image like below:

Restricted Access

check_login.php

<?php

if (

! isset ( $_SESSION [ 'pos_username' ] )

or ! isset ( $_SESSION [ 'pos_id' ] )

or ! isset ( $_SESSION [ 'pos_uniqid' ] )

or ! isset ( $_SESSION [ 'pos_h_menu' ] ) )

{

header ( 'Location: ' . $sitename . 'application/main/login.php' ) ;

}

check_login.php used to check the the user session. If the user does not have permissions, it will be redirected to the login page

checksession.php

<?php

session_start ( ) ;

include "config.php" ;

if ( ! isset ( $_SESSION [ 'pos_username' ] )

or ! isset ( $_SESSION [ 'pos_id' ] )

or ! isset ( $_SESSION [ 'pos_uniqid' ] )

or ! isset ( $_SESSION [ 'pos_h_menu' ] ) )

{

$data [ 'result' ] = '-1' ;

$data [ 'url' ] = $sitename . 'application/main/login.php?error=session_die' ;

} else {

$data [ 'result' ] = '1' ;

$data [ 'url' ] = 'access granted' ;

}

echo json_encode ( $data ) ;

checksession.php used to check the user session. If the user session has been exhausted it will be redirected to the login page

config.php

<?php

date_default_timezone_set ( "Asia/Jakarta" ) ;

$sitename="/pos/" ;

7. Create 4 PHP files inside the "layout" folder: bottom-footer.php, footer.php, header.php, top-header.php. Then fill the entire file with the following script:

Adminlte Layout Session Simple Pos Php Tutorial

top-header.php.

<?php session_start ( ) ; ?>

< ! DOCTYPE html >

< html >

< head >

< meta charset="utf-8" >

< meta http-equiv="X-UA-Compatible" content="IE=edge" >

< !-- no cache headers -->

< meta http-equiv="Pragma" content="no-cache" >

< meta http-equiv="no-cache" >

< meta http-equiv="Expires" content="-1" >

< meta http-equiv="Cache-Control" content="no-cache" >

< !-- end no cache headers -->

< title > <?php

if ( $titlepage ) {

echo $titlepage ;

} else

{

echo '' ;

}

?> </title >

< meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" >

< link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css" >

< link rel="stylesheet" href="../../dist/font-awesome-4.5.0/css/font-awesome.min.css" >

< link rel="stylesheet" href="../../dist/ionic/css/ionicons.min.css" >

< link rel="stylesheet" href="../../dist/css/AdminLTE.min.css" >

< link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css" >

< link rel="stylesheet" href="../../dist/css/responsive.dataTables.min.css" >

< link rel="stylesheet" href="../../dist/css/sweetalert.css" >

< link rel="stylesheet" href="../../dist/css/custom.css" >

< link rel="shortcut icon" href="../../dist/img/favicon.ico" />

header.php

In tutorial part 1 we ignore the header.php first, we will discuss in part 2.

footer.php

</div > < !--container-->

</div > < !-- /. content-wrapper -->

< !-- ./main content -->

< div class="scroll-top-wrapper " > < !-- back to top button-->

< span class="scroll-top-inner" >

< i class="fa fa-2x fa-arrow-circle-up" > </i >

</span >

</div > < !-- end back to top button-->

< footer class="main-footer" >

< div class="pull-right hidden-xs" >

< b > Version </b > 1.0

</div >

</footer >

</div > < !-- ./wrapper -->

< div id="loadbargood" class="loadbargood hidden" > </div >

bottom-footer.php

$ . widget . bridge ( 'uibutton' , $ . ui . button ) ;

</script>

A brief description :

The files above used to create an adminLTE layout. The front-end layout divided into five sections to quickly manage the bootstrap adminLTE view.

8. Add a warning image into "image" folder

Warning

9. Don't forget to put the support files in the right folder.

sweetalert.js → pos/dist/js/ folder
hotkey.js → pos/dist/js/ folder
check_session.js → pos/dist/js/ folder
myfunction.js → pos/dist/js/ folder
bootstrap-notify folder → pos/plugin/ folder
sweetalert.css → pos/dist/css/ folder
loadbargood.js → pos/dist/js/folder

10. Create custom.css and put on the pos/dist/css/ folder. Copy the following CSS script into custom.css file

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

. form-horizontal . control-label {

text-align : left ;

}

. txtperiode {

display : inline ;

}

. newbox {

font-size : 36px ;

line-height : 70px ;

text-align : right ;

}

. scroll-top-wrapper {

position : fixed ;

opacity : 0 ;

visibility : hidden ;

overflow : hidden ;

text-align : center ;

z-index : 99999999 ;

background-color : #777777;

color : #eeeeee;

width : 50px ;

height : 48px ;

line-height : 48px ;

right : 30px ;

bottom : 30px ;

padding-top : 2px ;

border-top-left-radius : 10px ;

border-top-right-radius : 10px ;

border-bottom-right-radius : 10px ;

border-bottom-left-radius : 10px ;

-webkit-transition : all 0.5s ease-in-out ;

-moz-transition : all 0.5s ease-in-out ;

-ms-transition : all 0.5s ease-in-out ;

-o-transition : all 0.5s ease-in-out ;

transition : all 0.5s ease-in-out ;

}

. scroll-top-wrapper : hover {

background-color : #888888;

}

. scroll-top-wrapper . show {

visibility : visible ;

cursor : pointer ;

opacity : 1.0 ;

}

. scroll-top-wrapper i . fa {

line-height : inherit ;

}

/* end of scroll to top */

label {

font-weight : 500 ;

}

@ media only screen and ( max-width : 480px ) {

. wraptextplease {

width : 178px ;

}

. ui-autocomplete {

position : absolute ;

top : 100 % ;

left : 0 ;

z-index : 1000 ;

float : left ;

display : none ;

min-width : 160px ;

_width : 160px ;

padding : 4px 5px ;

margin : 2px 0 0 0 ;

list-style : none ;

background-color : #ffffff;

border-color : #ccc;

border-color : rgba ( 0 , 0 , 0 , 0.2 ) ;

border-style : solid ;

border-width : 1px ;

-webkit-border-radius : 5px ;

-moz-border-radius : 5px ;

border-radius : 5px ;

-webkit-box-shadow : 0 5px 10px rgba ( 0 , 0 , 0 , 0.2 ) ;

-moz-box-shadow : 0 5px 10px rgba ( 0 , 0 , 0 , 0.2 ) ;

box-shadow : 0 5px 10px rgba ( 0 , 0 , 0 , 0.2 ) ;

-webkit-background-clip : padding-box ;

-moz-background-clip : padding ;

background-clip : padding-box ;

*border-right-width : 2px ;

*border-bottom-width : 2px ;

. ui-menu-item > a . ui-corner-all {

display : block ;

padding : 3px 15px ;

clear : both ;

font-weight : normal ;

line-height : 18px ;

color : #555555;

white-space : nowrap ;

&.ui-state-hover, &.ui-state-active {

color: red;

text-decoration : none ;

background-color : #0088cc;

border-radius : 0px ;

-webkit-border-radius : 0px ;

-moz-border-radius : 0px ;

background-image : none ;

}

. ui-state-focus {

background-color : #ff851b !important;

color : #ffffff !important;

padding-left : 10px ;

cursor : pointer ;

}

. ui-menu-item {

padding-top : 10px ;

}

. txtcheckbox {

width : 30px ; /*Desired width*/

height : 30px ; /*Desired height*/

}

. txtcheckbox2 {

width : 20px ; /*Desired width*/

height : 20px ; /*Desired height*/

}

. loadbargood {

display : block ;

position : fixed ;

z-index : 99999999999999999999 ;

top : 0 ;

left : 0 ;

height : 100 % ;

width : 100 % ;

background : rgba ( 255 , 255 , 255 , . 7 )

url ( '../img/loadbargood.gif' )

50 % 50 %

no-repeat ;

}

Make sure your folder structure like the following image

Folder Structure Pos Project Tutorial Create Point Of Sale With Php

Create Login Page

Create 4 PHP files in the main folder ( pos/application/main/ ) like the following image:

Main Folder

index.php

< h1 > Dashboard Page </h1 >

< h2 > Under Maintenance </h2 >

index.php is a dashboard page. For a while we just give the code as above, we will change in the next article

<?php include "../../library/config.php" ?>

<?php $titlepage="Login Form System" ; ?>

<?php include "../layout/top-header.php" ; //header template ?>

< body class="hold-transition login-page" >

< div class="login-box" >

< div class="login-logo" >

< a href="#" > < center > < b > SEEGATESITE . COM </b > < br/> < small > EXAMPLE POINT OF SALES </small > </a >

</div > < !-- /. login-logo -->

< div class="login-box-body" >

< p class="login-box-msg" > Sign in to start your session </p >

< form action="authorization.php" method="post" >

< div class="form-group has-feedback" >

< input type="text" class="form-control" autofocus value="" name="username" id="username" placeholder="Username" >

< span class="glyphicon glyphicon-user form-control-feedback" > </span >

</div >

< div class="form-group has-feedback" >

< input type="password" class="form-control" value="" name="password" id="password" placeholder="Password" >

< span class="glyphicon glyphicon-lock form-control-feedback" > </span >

</div >

< div class="row" >

< div class="col-xs-8" >

</div > < !-- /. col -->

< div class="col-xs-4" >

< button type="submit" class="btn btn-primary btn-block btn-flat" > Login </button >

</div > < !-- /. col -->

</div >

</form >

< br >

< div class="information-box round" >

< div class="callout callout-danger" >

<?php

if ( ! empty ( $_GET [ 'error' ] ) )

{

if ( $_GET [ 'error' ] == 1 )

{

echo 'Please fill out username or password' ;

}

else if ( $_GET [ 'error' ] == 2 )

{

echo 'Please fill out username' ;

}

else if ( $_GET [ 'error' ] == 3 )

{

echo 'Please fill out password' ;

}

else if ( $_GET [ 'error' ] == 4 )

{

echo 'Invalid email or password' ;

} else if ( $_GET [ 'error' ] == 'session_die' )

{

echo 'Your login session is over!!, please sign in again' ;

}

} else

{

echo 'Please fill out your username and password to sign in' ;

}

</div >

</div > < !-- /. login-box-body -->

</div > < !-- /. login-box -->

</body >

</html >

The login page main focus is in the code error when the user failed to login, you can change this code with your need.

logout.php

<?php

session_start ( ) ;

include "../../library/config.php" ;

require_ once ( "../model/dbconn.php" ) ;

require_ once ( "../model/pos.php" ) ;

if ( ! isset ( $_SESSION [ 'pos_username' ] ) or

! isset ( $_SESSION [ 'pos_id' ] ) or

! isset ( $_SESSION [ 'pos_h_menu' ] ) or

! isset ( $_SESSION [ 'pos_uniqid' ] ) )

{

header ( 'Location: ' . $sitename . 'application/main/login.php' ) ;

}

unset ( $_SESSION [ 'pos_username' ] ) ;

unset ( $_SESSION [ 'pos_id' ] ) ;

unset ( $_SESSION [ 'pos_h_menu' ] ) ;

unset ( $_SESSION [ 'pos_uniqid' ] ) ;

unset ( $_SESSION [ 'name_shop' ] ) ;

unset ( $_SESSION [ 'alamat_toko' ] ) ;

unset ( $_SESSION [ 'telp_toko' ] ) ;

header ( 'Location: ' . $sitename . 'application/main/login.php' ) ;

authorization.php

<?php

session_start ( ) ;

include "../../library/config.php" ;

require_ once ( "../model/dbconn.php" ) ; // delete white space between require_ once

require_ once ( "../model/pos.php" ) ; // delete white space between require_ once

$username = $_POST [ 'username' ] ;

$password = $_POST [ 'password' ] ;

if ( empty ( $username ) && empty($password)) {

header('location:login.php?error=1');

} else if ( empty ( $username ) ) {

header ( 'location:login.php?error=2' ) ;

} else if ( empty ( $password ) ) {

header ( 'location:login.php?error=3' ) ;

}

$sv = new pos ( ) ;

$data = $sv-> getLogin ( $username , $password ) ;

if ( $data [ 2 ] == 1 )

{

$_SESSION [ 'pos_username' ] = $username ;

$_SESSION [ 'pos_id' ] = $data [ 1 ] [ 'id_user' ] ;

$_SESSION [ 'pos_h_menu' ] = $data [ 1 ] [ 'h_menu' ] ;

$_SESSION [ 'pos_uniqid' ] = uniqid ( ) ;

$_SESSION [ 'name_shop' ] = $data [ 1 ] [ 'name_shop' ] ;

$iduser = $_SESSION [ 'pos_id' ] ;

//$sv->deleteTempSaleByUser($iduser);

header ( 'location:../main/index.php' ) ;

}

else

{

header ( 'location:login.php?error=4' ) ;

}

In the login page, when the user clicks the login button, simple pos apps will take us to the authorization page. The authorization page checks whether the user has access to the system or not. When we have permission, the system set a new session to the user.

Next step we create the PHP file used to hold a collection of MySQL queries and SQL database connections in PDO.

Add 2 PHP file with the name dbconn.php and pos.php in the "model" folder ( pos/application/main/ )

dbconn.php

<?php

$dbuserx='root' ; // change with your own database username

$dbpassx='' ; // change with your own database password

class dbconn {

public $dblocal ;

public function __construct ( )

{

}

public function initDBO ( )

{

global $dbuserx , $dbpassx ;

try {

$this-> dblocal = new PDO ( "mysql:host=localhost;dbname=pos;charset=latin1" , $dbuserx , $dbpassx , array ( PDO:: ATTR_PERSISTENT => true ) ) ;

$this-> dblocal-> setAttribute ( PDO:: ATTR_ERRMODE , PDO:: ERRMODE_EXCEPTION ) ;

}

catch ( PDOException $e )

{

die ( "Can not connect database" ) ;

}

dbconn.php used to save PDO configuration.

pos.php

<?php

class pos extends dbconn {

public function __construct ( )

{

$this-> initDBO ( ) ;

}

/******************************************************************************

TABEL T_JUAL AND TEMP_JUAL

*******************************************************************************/

public function deleteTempSaleByUser ( $iduser )

{

$db = $this-> dblocal ;

try

{

$stmt = $db-> prepare ( "delete from temp_sale where id_user = :id" ) ;

$stmt-> bindParam ( "id" , $iduser ) ;

$stmt-> execute ( ) ;

$stat [ 0 ] = true ;

$stat [ 1 ] = "Success Delete!" ;

return $stat ;

}

catch ( PDOException $ex )

{

$stat [ 0 ] = false ;

$stat [ 1 ] = $ex-> getMessage ( ) ;

return $stat ;

}

/*********************query for system*********************/

public function getLogin ( $user , $pass )

{

$db = $this-> dblocal ;

try

{

$stmt = $db-> prepare ( "select a.* from m_user a where upper(a.username)=upper(:user) and a.pass_user=md5(:id)" ) ;

$stmt-> bindParam ( "user" , $user ) ;

$stmt-> bindParam ( "id" , $pass ) ;

$stmt-> execute ( ) ;

$stat [ 0 ] = true ;

$stat [ 1 ] = $stmt-> fetch ( PDO:: FETCH_ASSOC ) ;

$stat [ 2 ] = $stmt-> rowCount ( ) ;

return $stat ;

}

catch ( PDOException $ex )

{

$stat [ 0 ] = false ;

$stat [ 1 ] = $ex-> getMessage ( ) ;

$stat [ 2 ] = 0 ;

return $stat ;

}

Until this step, the login page has been completed, before test the application on the browser, make sure you edit the .htaccess and index.php ( pos/index.php ) file in the folder "pos"

.htaccess

Options All -Indexes

RewriteEngine On

ErrorDocument 404 /pos/

The .htaccess code above to restrict the user when accessing the protected folders and files.

deny direct access to a folder and file

To redirect 404 not found page to the dashboard page

RewriteEngine On

ErrorDocument 404 /pos/

index.php

<?php

session_start ( ) ;

include "library / config.php" ;

if (

! isset ( $_SESSION [ 'pos_username' ] )

or ! isset ( $_SESSION [ 'pos_id' ] )

or ! isset ( $_SESSION [ 'pos_uniqid' ] )

or ! isset ( $_SESSION [ 'pos_h_menu' ] ) )

{

header ( 'Location: ' . $sitename . 'application/main/login.php' ) ;

} else

{

header ( 'Location: ' . $sitename . 'application/main/index.php' ) ;

}

Please test your application via browser with following address: http://localhost/pos/

If successful login, you will be taken to the index page as shown below:

Dashboard Page

If any questions please fill in the comment form below. The complete source code project can be downloaded in the last article of this tutorial (Part 5).

Conclusion

Creating a PHP point of sale system requires several stages. You need to prepare an attractive layout, business core, system security.

Creating a login page on a retail post is the first step that must be completed in creating a post system.

Hopefully, with this point of sale tutorial part 1, you can already understand the use of sessions and MySQL connection with PDO.

The first part of the tutorial has been completed, The next section, we create a dynamic menu and dashboard page on adminLTE