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.

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

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:

  1. Sweetalert.js plugin (Beautiful plugin alerts to replace standard javascript alerts).
  2. Hotkey.js plugin (Create a shortcut button with javascript).
  3. Redirect.js plugin (used to send POST data using javascript).
  4. Datatables bootstrap plugin (used to create responsive tables).
  5. Bootstrap notify plugin (used to display notifications).
  6. Myfunction.js, a collection of my javascript functions that will use to speed up build the application
  7. 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:

  1. Creating login page – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 1.
  2. Create Dynamic Menu and Dashboard Page – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 2.
  3. Create Master User Form – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 3.
  4. Create Master Item / Product Form – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 4.
  5. 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

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

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

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:

Restricted Access

check_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

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

config.php

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.

header.php

header.php

For a while we ignore header.php first, I will discuss in part 2

footer.php

bottom-footer.php

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

Warning

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

Make sure your folder structure like the following image

Folder Structure Pos Project Tutorial Create Point Of Sale With Php

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:

Main Folder

index.php

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

login.php

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

authorization.php

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

dbconn.php used to save MySQL config with PDO

pos.php

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

index.php

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

Login Page

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

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

2 Comments

 Add your comment
  1. Nice tutorial, thanks so much bro!

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: