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

By Sigit Prasetya Nugroho ∙ April 27, 2017 ∙ PHP ∙ 29 Comments

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.

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:

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

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','');

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.

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

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:

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);
}
?>

<?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:

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');
}
?>

<?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);
?>

<?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/";
?>

<?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:

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" />

<?php session_start(); ?>

<!DOCTYPE html>

<html>

<head>

<title><?php

if($titlepage){

echo $titlepage;

}else

{

echo '';

}

?></title>

header.php

header.php

1	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>
 	<strong>Copyright &copy; <?php echo date('Y'); ?> <a href="#">Seegatesite.com Inc</a>.</strong> All rights reserved.
 </footer>
</div><!-- ./wrapper -->
<div id="loadbargood" class="loadbargood hidden"></div>

</div>

</div>

</span>

</div>

<b>Version</b> 1.0

</div>

</footer>

</div>

bottom-footer.php

<script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="../../plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="../../plugins/fastclick/fastclick.min.js"></script>
<script src="../../plugins/input-mask/jquery.inputmask.js"></script>
<script src="../../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="../../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="../../plugins/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="../../dist/js/app.min.js"></script>
<script src="../../dist/js/myfunction.js" type="text/javascript"></script>
<script src="../../dist/js/sweetalert.min.js" type="text/javascript"></script>
<script src="../../dist/js/session_checker.js" type="text/javascript"></script>
<script src="../../dist/js/hotkey.js"></script>
<script src="../../dist/js/jquery.dataTables.min.js"></script>
<script src="../../dist/js/dataTables.bootstrap.min.js"></script>
<script src="../../dist/js/dataTables.responsive.min.js"></script>

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

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

.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;
}

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

Create Login Page

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

index.php

<h1> Dashboard Page </h1>
<h2>Under Maintenance</h2>

1 2	<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>
    </div><!-- /.login-box-body -->
  </div><!-- /.login-box -->
  <center><p>Copyright &copy; <?php echo date("Y");?> Seegatesite.com., inc. All rights reserved</p></center>
  <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
  <script src="../../bootstrap/js/bootstrap.min.js"></script>
  <script src="../../plugins/bootstrap-notify/bootstrap-notify.min.js"></script>
  <script src="../../dist/js/myfunction.js" type="text/javascript"></script>
  <script src="../../dist/js/sweetalert.min.js" type="text/javascript"></script>
</body>
</html>

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

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

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

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

</div>

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

</div>

</div>

</div>

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

</div>

</div>

</form>

<br>

<?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>

</div>

</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');
?>

<?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');
	break;
} else if (empty($username)) {
	header('location:login.php?error=2');
	break;
} else if (empty($password)) {
	header('location:login.php?error=3');
	break;
}
$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');
}
?>

<?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');

break;

} else if (empty($username)) {

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

break;

} else if (empty($password)) {

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

break;

}

$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");
		}
		
	}
	
}
?>

<?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;
  }
}
}

?>

<?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/

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

Options All -Indexes

1	Options All -Indexes

To redirect 404 not found page to the dashboard page

RewriteEngine On 
ErrorDocument 404 /pos/

1 2	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');
}
?>

<?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:

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

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Comments

thu thuat says
May 1, 2017 at 2:25 am
Nice tutorial, thanks so much bro!
Reply
- Sigit Prasetya Nugroho says
  May 1, 2017 at 6:46 am
  You re welcome 🙂
  Reply
ira says
December 16, 2017 at 8:23 pm
Tidak bisa login
Fatal error: ‘break’ not in the ‘loop’ or ‘switch’ context in C:\xampp\htdocs\pos\application\main\authorization.php on line 11
Reply
- Sigit Prasetya Nugroho says
  December 17, 2017 at 2:31 pm
  hapus saja kode break nya 🙂
  Reply
Adil says
April 5, 2018 at 8:24 pm
Hi , could you please help me.
I have downloaded the complete source code, but cannot login to the system, could you please let me know the username and password.
many thanks
Reply
- Sigit Prasetya Nugroho says
  April 6, 2018 at 2:09 am
  Let me know your specific error please 🙂
  Reply
  - ABHIJITH P says
    September 9, 2018 at 12:53 pm
    Hi,
    Am also facing the same login problem. The error getting is “Invalid email or password” which means error 4.
    Kindly support
    Reply
    - Sigit Prasetya Nugroho says
      September 10, 2018 at 11:54 am
      user or password not found…please check again your username and password in your database
      Reply
SKN says
October 21, 2018 at 10:06 am
hi, i have error of invalid password.. although i check the database..its all the same..
Reply
- Sigit Prasetya Nugroho says
  October 23, 2018 at 1:12 am
  password in database with md5(), create new password again
  Reply
yeng says
February 27, 2019 at 9:55 am
oh my gold
Can’t login broth
Reply
- Sigit Prasetya Nugroho says
  March 3, 2019 at 7:54 am
  check again your script
  Reply
yeng says
February 27, 2019 at 9:56 am
SEEGATESITE.COM
EXAMPLE POINT OF SALES
Sign in to start your session
Username
Password
Login
Invalid email or password
Copyright © 2019 Seegatesite.com., inc. All rights reserved
some thing like this
Reply
- Sigit Prasetya Nugroho says
  March 3, 2019 at 7:54 am
  check again your script
  Reply
dino says
March 15, 2019 at 2:41 am
“can not connect database”
to login do I insert the username and password from “dbconn.php” on the lines “$dbuserx = ‘root; $dbpassx = ‘123456’;”?
or do I use the username and password from the m_user table?
Reply
- Sigit Prasetya Nugroho says
  March 18, 2019 at 2:51 am
  You must use username and password from the m_user table.
  in my example : user : admin and password : 123
  Reply
Oz says
April 15, 2019 at 10:02 pm
I’d an error with authorization.php recently. PHP “break” generated 500 Internal Error Server. I’m not really sure but it can be cause I’m using PHP7 and break is exclusive for loop-sentences or switch
Reply
- Sigit Prasetya Nugroho says
  April 16, 2019 at 6:54 am
  yes, break cant working in if php7, delete break code please 🙂
  Reply
Brian says
August 7, 2019 at 3:28 pm
Hey I really appreciate your tutorial! I’m having the same problem as mentioned before. When I go to log in, I get the error “Invalid email or password” . I’ve gone to the database and changed the password as well as created another user and still get the same result. I also noticed though that if I leave the username and password blank when trying to login, I get the same error instead of the other more specific errors.
Thanks
Reply
- Sigit Prasetya Nugroho says
  August 8, 2019 at 7:10 am
  open your authorization.php
  add the code below after line 20 ($data = $sv->getLogin($username,$password))
  die(print_r($data));
  1
  die(print_r($data));
  what is the result ?
  Reply
  - Brian says
    August 8, 2019 at 9:03 pm
    Thanks for the reply! Here’s the result.
    Array ( [0] => [1] => SQLSTATE[42S02]: Base table or view not found: 1146 Table ‘pos.r_ref_system’ doesn’t exist [2] => 0 ) 1
    Reply
    - Sigit Prasetya Nugroho says
      August 9, 2019 at 5:06 am
      you need to check again your code, the example project must be adjust with your needed.
      open pos.php and edit function get getLogin($user,$pass). change the mysql query below
      select a.* from m_user a where upper(a.username)=upper(:user) and a.pass_user=md5(:id)
      1
      select a.* from m_user a where upper(a.username)=upper(:user) and a.pass_user=md5(:id)
      hope fix your problem 🙂
      Reply
      - Brian says
        August 9, 2019 at 12:55 pm
        That fixed it!
        Thanks again, now on to part 2!
      - Sigit Prasetya Nugroho says
        August 10, 2019 at 3:37 am
        youre welcome 🙂
dmky says
November 30, 2019 at 5:00 am
Array ( [0] => 1 [1] => [2] => 0 ) 1
terjadi eror di authorization.php
Reply
Jo says
December 3, 2019 at 10:57 am
Do you have the full source code of this… Because i cant do the last part.. .htaccess i dont know how to create that..
Reply
- Sigit Prasetya Nugroho says
  December 7, 2019 at 1:41 am
  just create new file .htaccess
  Reply
Muhair says
December 10, 2019 at 8:26 am
how to download this project
Reply
- Sigit Prasetya Nugroho says
  December 10, 2019 at 2:46 pm
  https://seegatesite.com/create-a-sales-form-pos-tutorial-build-point-of-sale-with-php-pdo-mysql-and-jquery-part-5/
  Reply

What is point of sale?

Requirement

The equipment needed

Some support plugins include:

Create login page PHP Point Of Sale System

Create supporting files

Create Login Page

Conclusion

About Sigit Prasetya Nugroho

Reader Interactions

Comments

Leave a Reply Cancel reply