Point of Sale Framework-Based Code Igniter and Model View Controller Using Lighthouse Testing

Journal of Computer Networks, Architecture and
Submitted : 28 June 2021

High Performance Computing Accepted : 6 July 2021
Volume 3, Number 2, July 2021 Published : 5 August 2021
https://doi.org/10.47709/cnahpc.v3i2.1006
Point of Sale Framework-Based Code Igniter and Model View Controller

Using Lighthouse Testing
Muhammad Syaifudin1)*, Fauziah2), Ben Rahman3)
1)2)3)
Universitas Nasional, Indonesia
1)
m.syaifudin26@gmail.com, 2)fauziah@civitas.unas.ac.id, 3)benrahman@civitas.unas.ac.id
ABSTRACT
The success of companies engaged in the field of distributors is not only from good and smart human resources,
but how ready the company's way to provide tools or programs supporting the work of employees. Some of the
problems are the administration system between the company's internal divisions, so there are restrictions on the
processing of input data, processes, outputs that are still manual. Web Application is made to facilitate employees
to conduct administrative activities with the access role of each user admin division, for example inventory data,
creation of sales invoices, road letters, procurement forms and bookkeeping. In addition, The Web View application
is already responsive in this sense can adjust the device PC / Tablet / Mobile, then for visualization of data
calculation already using cart / data graphics in real time, and there is also a feature preview, download and print
JPEG, PNG, PDF, Barcode and QR code. Web Testing This application with black box method and shows it is
running well and no error method, so it can be declared passed. Web Creation This application involves the LTE
2.0 Admin Template with bootstrap CSS, for programmer frameworks using MVC model view controllers that
exist in the Code Igniter 3.0 framework so that it is faster and easier to implement or developed in other field
companies or in the manufacturing industry. Tests using lighthouse for perform by 94% showed that the application
designed to have a good performance for display results, and its access value of 60%, indicating that the process
related to responsiveness between users is appropriate both using PC / Tablet / Mobile
Keywords: Point of Sale; Database; MVC; Ajax; Lighthouse Testing
INTRODUCTION
Distribution a product is a very important party for manufacturers and consumers. Distributors are people who
play a very role in the distribution of goods. The function of distributors is to create a smooth flow of marketing, in
the era of globalization as it is today, the business world has grown very rapidly and become increasingly competitive.
Along with the development of the business world, information technology is required to develop and innovate in
order to keep pace with the progress of the business world, rapid data exchange is needed by a company. With this
point of sale is made to facilitate employees to conduct administrative activities, Example: inventory data, creation
of sales invoices, road letters, procurement forms and bookkeeping. A company that has a cooperative relationship
with other parties, one of which is for companies that at any time have data in process, work for logging and making
invoices can be done by several related divisions manually, but has many shortcomings. Human error factor is a factor
that can cause many problems, such as data collection errors, lack of data input, invoice creation errors,
miscalculations, expenses and so on, which causes loss of time and operational costs for the company. Web Application
point of sale is made to minimize administrative activities and data logging manually, With the existence of this web
application, then every invoicing and data logging can be done quickly by referring to the existing database in the
company, so that this will make it easier for employees to do the job effectively and efficiently. Point of Sale POS)
has an application system that is applied to distributor companies to handle data processing between divisions
including procurement admins, warehouse admins and sales admins. This in general must be present and important in
strategic decision making by business people, offices or large-scale industries. The purpose of creating a web
application point of sale is research in this Final Task to design a data processing system between divisions with access
role access of each user admin, and divide the system into 4 of them there are admin supervisor, procurement admin,
* Corresponding author
This is an Creative Commons License This work is licensed under a

Creative Commons Attribution-NoDerivatives 4.0 International License. 202
warehouse admin and sales in a well-structured. In the making of this research discussion of problems has limitations
on problems, among others, the creation of a point of sale application web application aimed at the scope of the
distributor company, using the LTE Admin Template 2.0 with bootstrap CSS, for the template language program using
MVC model view controller that is on the framework Code Igniter 3.0 and for databases using MariaDB, the results
will be simulated in the web browser locally area / online hosting.
LITERATURE REVIEW
MVC (Model-View-Controller) architecture of CodeIgniter. In this approach, the PHP framwork meta model
is considered as a platform Specific model (PSM). Its instances are used as inputs to generate the source code through
transformation rules carried out by Acceleo. This proposal is validated through the use of our approach to generate
CRUD (Create, Read, Update and Delete) applications (Arrhioui et al., 2017), We have study the variation of coupling
coefficients with the width of waveguide and realized that single mode waveguide with smaller core width have lower
critical power. Here, we have proposed a noble design of NLDC with asymmetric waveguide along the length with
lower critical power as compare to the symmetric waveguide (Singh et al., 2017), This model is based on a set of
comparison criteria based on the Intrinsic durability, industrialized solution, technical adaptability, strategy, technical
architecture, and Speed criteria. Results show that the values of these criteria allow developers to easily and properly
choose the framework that best meets their needs (Benmoussa et al., 2019), The multi-criteria decision model is
implemented as a Decision Matrix and combines set theory based option filtering with the MAUT method for option
ranking (Rodič et al., 2017), The term Ajax and related technologies are discussed here. Also working of Ajax
technologies and basic idea of Ajax based rich web applications is discussed (. ANKURKAR, 2015), As result of this
research we can find out the development was standardized and non-business logic relationships automatically
processed, there was much scalability so this gives us more efficiency through the implementations (Thakir Mahmood
et al., 2019), In this study we aim to identify the elements that impact on agility in developing software products, in a
gradual approach, from the traditional waterfall model towards approaches like Scrumban. Additionally, we will
understand the social dimension of using agile methodologies in software development (STOICA et al., 2016), This
research also highlights limitations of Scrumbanfall like team members and their roles and capabilities for the large
scaled project having team members in distributed environment, which open the door for next level of research to
overcome such challenges using further hybridization of Scrumbanfall (Bhavsar et al., 2020), The making of this POS
application starts from the collecting all the data needed using observation and interview methods, designing an
application models with an object-based approach diagram with application design tools in the form of a flowchart
and Unified Modeling Language (UML) until the implementation of this POS application. With the application of the
point of sales (POS) application can help the tasks of all stakeholders or related parties directly related to the POS
application (Kambivi et al., 2020), The result of the evaluation was ranked with Functional Suitability as the highest.
The evaluation is based on ISO 25010. This shall help the client to stay away from their former data storing procedure
and move on to the automated world (Miguel et al., 2019), The development of a prototype that encompasses solutions
to solve the aforementioned problems was used to validate the design and initial results showed that the client supports
the relevance of the design (Sison et al., 2019), The data analytics helps in analyzing the information access pattern
of the users. The information access pattern can be helpful in identifying the learning behavior traits of an individual.
Moreover, machine learning along with data mining has opened up new avenues. The combination of data analytics
and machine learning may be used to generate targeted recommendations (Industry, 2011), A case study of evaluating
a POS system in Bangladesh has demonstrated that the proposed model can provide a comprehensive evaluation of
POS from 12 usability factors. Also, different demands from different type of customers are also be revealed by the
model (Kabir & Han, 2016), The completion of this investigation identified the essential factor of POS based on cloud
computing adoption which appropriates with IT Users and Entrepreneur’s. The most significant factor in cloud
computing adoption for point of sales is security and ease of use. Based on that result this study purpose the POS
infrastructure for SME’s in Indonesia especially in Surabaya (Paramita, 2019), The study results make evidence of the
conclusion that the relationship between EPOS and Supply Chain Performance is positive (Journal et al., 2017)

METHOD
The Application Web Design Framework is with the MVC (Model View Controller) method where this is what
is in the Code Igniter 3.0 framework. MVC method is also commonly referred to as software design pattern which is
a program in 3 separate parts that are interconnected, the functions of the program part is different namely Model
(related to the database in order to be processed, update and input data), View (set the view to be easier to understand
users) then the last is controller (connecting models and views), Process and MVC Method in Fig 1.
Fig. 1. MVC (Model View Controller)
1. The first stage is a survey of several distributor companies to collect needs data, which aims to find out the current
problem.
2. The second stage is the analysis of needs, which is done to find the right solution to solve problems that exist in
distributor companies as already known in the collection of data needs.
3. The third stage is the design of the application web. The results of the analysis that has been obtained previously
poured in the design to determine what functions will be contained in the web application to meet the needs of a
particular application.
4. The fourth stage is the result of the existing design being implemented into the program code so as to form a web
application that can be used properly.
5. The fifth stage is testing, the testing method used to test the system is to use the Lighthouse testing method (Dev
tools Google Chrome). This testing method will test all components and system functionality whether the software
is running correctly and in accordance with the objectives to be achieved. This test is done on the web application
to identify and correct errors. The result of this stage is a web application that has been free from errors, can run
in accordance with its functions and ready to use.
Analysis of Old Systems

After conducting surveys, data collection and observation directly with the relevant parties to the distributor
company, the results of the need data obtained where the work process between divisions is divided into several stages
that have been summarized in the table can be seen in Table 1.
Table. 1. Old System Analysis
Process Information Obstacles

Registration of new user_id,username,passwor The registration process is still manual and the
admin users by d,name,address,level search for admin users is still manual
division
Addition of Item item id, barcode, item The process of data collection of goods is still
Data, Item Type, name, item type, stock and manual by using a notebook
Inventory, etc. price

Separation of access user_id, level The user access process is still one so it does not
to procurement guarantee data security in each division
admin, warehouse
admin, sales admin
and supervisor
Making Invoices form id, invoice, amount, The process of making invoices is still manual, the
(Sales Invoices, note, date and user id calculation of the amount data is still being
Travel Letters, calculated one by one
Procurement Forms
and Bookkeeping)
The table in Table. 1 shows the results of collecting old data and direct observations of distributor companies
by showing several work processes in each division.
Updateability of The Analysis Results

Understanding the nature and function of the system to be built, the analysis carried out must understand the
domain information, division of functions and behaviors required and reference at the previous stage, the system built
will be able to be used by 4 user admins, namely admin supervisor, procurement admin, warehouse admin and sales.
The description of each admin can be seen in Table. 2.
Table. 2. Description of Admin User
No User Description Level

1 Supervisor CRUD User admin, access 1
all features of the admin
user
2 Procurement Admin Procurement Master (data 2
type), Supplier, Duplicate
Invoice, Procurement
Report
3 Warehouse Admin Stock in, Stock Out, 3
Warehouse Invoice,
Warehouse Report
4 Sales Admin Customer Data, Goods 4
Data, Sales Invoice, Invoice
Bookkeeping
The table in Table. 2 shows the results of the admin user access role design that has been adjusted to the
distribution company division which will later be used to login at the point of sale.
Supporting Tools and Software

Laptop (i3/8GB/500GB), OS (Linux Debian 10). Server (Apache 2, MYSQL/MariaDB), Text Editor (Visual
Studio Code), Programming Languages (PHP, JS, HTML, CSS)
Design System Role Access User Admin

Describing the details of the work of the admin user on the system to be used by the distributor company, there
is division for each user admin has different menus and functions according to the needs of each admin features as
described in the Mind Map diagram in Fig. 2.

Fig. 2. Diagram Mind Map Role User Access
The mind map diagram in fig. 2 above shows the results of designing the point of sale menu feature that has
been adjusted to the distribution company division that has been determined according to the division admin.
Create a Flowchart System

Outline the web application that will be created using flowchart for more detailed explanation. Web Application
can be used by user admin with user admin permissions that have been specified. User admin supervisor in doing all
the features contained in this web application, while other admin users have limitations of features that have been set
by the user admin supervisor. To use this web application must first enter your username and password to be able to
login. Then the system will check the access role of the username, password and user level in the database. If the
username and password of the admin user are in the database. Then it will be done checking the role of username,
password and user level. Furthermore, the web application will display the main page of the dashboard and the
features that have been specified in accordance with the user admin access role respectively. If the username and
password data does not exist or does not match the time of login, it will display an error alert message and the admin
user must login again, can be seen in Fig. 3.

Fig. 3. Flowchart outline web application
Fig. 3 above shows the point of sale flowchart, where the user must first login with the specified admin access
role, if the login fails, there will be an error notification and then it will be returned to re-login.
Application Hierarchy
Application web page, there are various menus that can be selected according to the terms of user admin
features in each division. The hierarchy of these menus can be seen in Fig. 4.
Fig. 4. Application Web Hierarchy
The hierarchy diagram in fig. 4 above shows the results of the design of the menu feature derivative after
logging in at the point of sale in a structured manner, by adjusting to the respective admin user roles.

Coding Script
For php code writing in the application web program involves the MVC Model View Controller method where
the writing of this code will be easier and more structured, It is necessary to call the user level access that has been
made can be seen in Fig. 5.
Fig. 5. Index and Template PHP
The following above in Fig. 5 is a coding script at the index using the PHP programming language by calling
each user id that has been determined.
RESULT
The result of this test conducted at the beginning of the web application is run in google chrome Browser will
be displayed a login page before being able to use the features inside the application that is divided into 4 admin users.
but before testing, there are user data that have been added to the database as follows :
Admin Supervisor (Username : supervisor; Password : 12345) , Procurement Admin (Username : procurement;
Password : 12345) , Warehouse Admin (Username : warehouse; Password : 12345) , Admin Sales (Username : sales;
Password : 12345).
Testing/ Verification Web Application

Testing with admin supervisor access user with level id (1) can be seen in Fig. 6 and Fig. 7.

Fig. 6. Login Page View

In Fig. 6 is the start page on the point of sale website where the admin user must fill in the specified username
and password, after that the user presses or clicks the sign in button, the password is already using sha1 security.
This login page user admin supervisor must do the login process by entering the username and password that
has been added to the database, this login page is for all other admin users, the difference is only the username and
password of each - each of which has been added to the database.
Fig. 7. Dashboard Page View of The Supervisor Admin
On the page dashboard user admin supervisor shows some menu features and can access all the data owned
with user admin procurement, warehouse, sales and menu settings user admin. Testing with user access admin
procurement id level (2) can be seen in Fig. 8.

Fig. 8. Procurement admin dashboard page view
On the page dashboard user admin procurement shows there is only a menu feature owned by the procurement
admin itself and cannot access other division menu features. Testing with user access admin warehouse id level (3)
can be seen in Fig. 9.
Fig. 9. Warehouse Admin Dashboard Page View
On the page dashboard user admin warehouse shows there is only a menu feature owned by the procurement
admin itself and cannot access other division menu features. Testing with user access admin sales id level (4) can be
seen in Fig. 10.

Fig. 10. Warehouse Admin Dashboard Page View
DISUCCION
Lighthouse testing (dev tools google chrome) is an automatic open source tool (aid) to improve the quality of
web applications. It can also run it as a Chrome Extension or from the command line. Giving Lighthouse a URL that
you want to test or audit, lighthouse runs a series of tests on the page, then generates a report on how well the page is
running. From here it can use tests that do not pass as an indicator of what can be done to improve the web application.
The following can be seen in Fig. 11.
Fig. 11. Lighthouse Testing Homework
In lighthouse testing showed a good presentation is not perfect but it can be said good because above the
presentation shows above average - the minimum average that has been determined is 60 - 97 while the reference
percentage of web application eligibility is 0 - 49.
CONCLUSION
Web Application that can login user admin with access role each - each user admin who has been determined
so as to help the admin to access such as input data, compile supplier data, make procurement invoices, make a report
creation process, and help the supervisor to do CRUD user admin, do the process of accessing data admin procurement,
warehouse admin and sales admin. Web Application can separate user admin access features that have been specified

such as procurement admin, warehouse admin and sales admin. Web Display Application has also been responsive
can customize laptop / PC / Mobile device. Testing using lighthouse to perform by 97% showed that the application
designed to have a good performance for display results, and the access in the web Point of Sale value of 60% indicates
that the process related to responsive between users is appropriate both using PC / Tablet / mobile
REFERENCES
ANKURKAR, S. K. (2015). Evolving Web Applications with AJAX - A Review. International Journal of Innovative
Research in Science, Engineering and Technology, 4(11), 11087–11093.
https://doi.org/10.15680/ijirset.2015.0411030
Arrhioui, K., Mbarki, S., Betari, O., Roubi, S., & Erramdani, M. (2017). A Model Driven Approach for Modeling and
Generating PHP CodeIgniter based Applications. Transactions on Machine Learning and Artificial
Intelligence, 5(4). https://doi.org/10.14738/tmlai.54.3189
Benmoussa, K., Laaziri, M., Khoulji, S., Larbi, K. M., & Yamami, A. El. (2019). A new model for the selection of
web development frameworks: application to PHP frameworks. International Journal of Electrical and
Computer Engineering (IJECE), 9(1), 695. https://doi.org/10.11591/ijece.v9i1.pp695-703
Bhavsar, K., Shah, V., & Gopalan, S. (2020). Scrumbanfall: An Agile Integration of Scrum and Kanban with Waterfall
in Software Engineering. International Journal of Innovative Technology and Exploring Engineering, 9(4),
2075–2084. https://doi.org/10.35940/ijitee.d1437.029420
Industry, T. O. (2011). Current Trends in. Cactus Tourism Journal, 7(July), 82–84.
Journal, E., Chain, S., Vol, M., Centre, E., & Uk, D. (2017). Role of Electronic Point of Sale on Supply Chain
Performance in. 5(2), 19–55.
Kabir, M. A., & Han, B. (2016). An improved usability evaluation model for point-of-sale systems. International
Journal of Smart Home, 10(7), 269–282. https://doi.org/10.14257/ijsh.2016.10.7.27
Kambivi, H., Junirianto, E., & Fadhliyah, N. R. (2020). Development of Inventory Management Application Points
of Sale Using Laravel. Tepian, 1(1), 9–17.
Miguel, G., Cruz, T. Dela, Dumaplin, T. B., Gaerlan, P. V. T., & Oliver, M. (2019). Inventory Management System
with POS. 6(4), 8739–8745.
Paramita, A. S. (2019). Cloud computing-based point-of-sales readiness for Surabaya’s small/medium enterprises.
International Journal of Advanced Trends in Computer Science and Engineering, 8(1.5 Special Issue), 333–
338. https://doi.org/10.30534/ijatcse/2019/5581.52019
Rodič, B., Marinova, G., & Chikov, O. (2017). Algorithms and Decision Making Methods for Filter Design Tool
Selection for a Given Specification in Online-CADCOM Platform. 247–251.
Singh, B., Kaur, P., & Kumar, H. (2017). Simulated Characteristics of a Nonlinear Directional Coupler Based Optical
Switch. VI(Vi), 1–5.
Sison, P. D. T., Oreiro, K. P., Camalit, J. C. Z., & Ng, G. C. (2019). a Problem Oriented Approach To Implementing
an Inventory and Point-of-Sale System for Company Kcp. Innovatus (ISSN: 2651-6993), 2(1), 95–100.
https://doi.org/10.5281/zenodo.4484959
STOICA, M., GHILIC-MICU, B., MIRCEA, M., & USCATU, C. (2016). Analyzing Agile Development – from
Waterfall Style to Scrumban. Informatica Economica, 20(4/2016), 5–14.
https://doi.org/10.12948/issn14531305/20.4.2016.01
Thakir Mahmood, M., Ibrahem Ashour, O., & Bayat, O. (2019). Design and Implementation of Web Based For
Intermediate Online Shop with Laravel Framework. Int. Journal of Comp. Science & Mobile Computing, 8(3),
124–133. www.ijcsmc.com


Point of Sale Framework-Based Code Igniter and Model View Controller Using Lighthouse Testing

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Point of Sale Framework-Based Code Igniter and Model View Controller Using Lighthouse Testing

Uploaded by

Copyright:

Available Formats

Journal of Computer Networks, Architecture and

Submitted : 28 June 2021

Point of Sale Framework-Based Code Igniter and Model View Controller

Keywords: Point of Sale; Database; MVC; Ajax; Lighthouse Testing

This is an Creative Commons License This work is licensed under a

This is an Creative Commons License This work is licensed under a

Fig. 1. MVC (Model View Controller)

Analysis of Old Systems

Table. 1. Old System Analysis

Process Information Obstacles

This is an Creative Commons License This work is licensed under a

Updateability of The Analysis Results

Table. 2. Description of Admin User

No User Description Level

Supporting Tools and Software

Design System Role Access User Admin

This is an Creative Commons License This work is licensed under a

Fig. 2. Diagram Mind Map Role User Access

Create a Flowchart System

This is an Creative Commons License This work is licensed under a

Fig. 3. Flowchart outline web application

Fig. 4. Application Web Hierarchy

This is an Creative Commons License This work is licensed under a

Fig. 5. Index and Template PHP

Testing/ Verification Web Application

This is an Creative Commons License This work is licensed under a

Fig. 6. Login Page View

Fig. 7. Dashboard Page View of The Supervisor Admin

This is an Creative Commons License This work is licensed under a

Fig. 8. Procurement admin dashboard page view

Fig. 9. Warehouse Admin Dashboard Page View

This is an Creative Commons License This work is licensed under a

Fig. 10. Warehouse Admin Dashboard Page View

Fig. 11. Lighthouse Testing Homework

This is an Creative Commons License This work is licensed under a

This is an Creative Commons License This work is licensed under a

You might also like