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

How to build a simple point of sale system using PHP and Jquery. This article is a series of several of my articles about CRUD. Here I will focus on making a simple point of sale with PHP, MYSQL, Jquery, PDO and ADMINLTE Framework. I will divide this article into sections where each section will implement the module from the POS.

What is the point of sale (POS)? A point of sale is also called cashier program. This program is 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 and much more. By building this PHP POS program 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 POS. If you want me to make a complete POS module, you have to pay me with a high-cost :p LOL.

Some of the equipment needed

1. PHP Server (XAMPP or you can install apache and PHP server in Linux)
2. PHP (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 (used 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

The module will be created in this tutorial:

Creating login page – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 1.
Create Dynamic Menu and Dashboard Page – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 2.
Create Master User Form – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 3.
Create Master Item / Product Form – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 4.
Creating Sales Form / Point of sale – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 5

And as a bonus article, I will include an article how to create a shopping receipt with PHP and 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

Tutorial create login page with PHP and AdminLTE Templates

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
3. Extract the adminLTE template 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 script:

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 user visit the menu. If the user does not have 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 user session. If the user does not have a login session, 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 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 5 PHP files inside the “layout” folder: bottom-footer-table.php, 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

For a while we ignore header.php first, I 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>

5 files are used to create an adminLTE layout. Divided into five sections to be easy to manage bootstrap adminLTE view

8. Add a warning image into “image” folder

9. Do not forget to put supporting 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

140

141

.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

The entire file and code in the above is a supporting file, the next step we will create the first module that is creating a login form.

Create 4 PHP file 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 focus on the login page is the error code when it fails to login, you can change these code with your own.

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

}

The form on the login page will take us to the authorization page. The authorization of this page will check whether the user has access to the system. And the system will set the session to the user

The next step we will create PHP file Which is used to hold a collection of MySQL queries and SQL database connections with PDO.

Add 2 PHP file as 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 MySQL config with PDO

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.*,
      (select name_shop from r_ref_system where id = 1) as name_shop,
      (select address_shop from r_ref_system where id = 1) as address_shop,
      (select phone_shop from r_ref_system where id = 1) as phone_shop
      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.*,

(select name_shop from r_ref_system where id = 1) as name_shop,

(select address_shop from r_ref_system where id = 1) as address_shop,

(select phone_shop from r_ref_system where id = 1) as phone_shop

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;

}

The creation of login page has been completed, before test, the application on the browser make sure you edit .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/

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 project can be downloaded in the last article of this tutorial (Article Part 5).

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

Bio
Latest Posts

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.

Latest posts by Sigit Prasetya Nugroho (see all)

Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018
Create WordPress Slider Without Javascript - August 30, 2018
Typed.js The Javascript Library For Automatic Text Writing Effects - August 6, 2018

8 Comments

Add your comment

thu thuat May 1, 2017 at 2:25 am
Nice tutorial, thanks so much bro!
- Sigit Prasetya Nugroho May 1, 2017 at 6:46 am
  You re welcome 🙂
ira 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
- Sigit Prasetya Nugroho December 17, 2017 at 2:31 pm
  hapus saja kode break nya 🙂
Adil 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
- Sigit Prasetya Nugroho April 6, 2018 at 2:09 am
  Let me know your specific error please 🙂
  - ABHIJITH P 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
    - Sigit Prasetya Nugroho September 10, 2018 at 11:54 am
      user or password not found…please check again your username and password in your database

seegatesite

Seegatesite.com – Programming Tutorial , Sharing , How and Learn Together

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

Tutorial create login page with PHP and AdminLTE Templates

Sigit Prasetya Nugroho

Latest posts by Sigit Prasetya Nugroho (see all)

8 Comments

Leave a Comment Cancel reply