TEPIAN Vol.
2 No.
3 (September 2.
p-ISSN 2721-5350 e-ISSN 2721-5369 org/10.
51967/tepian.
181 A 2021 TEPIAN Agricultural Polytechnic of Samarinda This work is licensed under a Creative Commons Attribution 4.
0 License CC-BY Web and Application Program Interface (API) Design AuParmonAy Modern Parking Application Aco Wahyudi* Annafi Franz Eko Junirianto Software Engineering Technology.
Software Engineering Technology.
Software Engineering Technology.
Agriculture Polytechnic of Samarinda.
Agriculture Polytechnic of Samarinda.
Agriculture Polytechnic of Samarinda, 75242.
Indonesia 75242.
Indonesia 75242.
Indonesia Acoxs0707@gmail.
annafifranz@gmail.
eko@politanisamarinda.
*Corresponding Author Received: 2020-10-13.
Revised: 2020-10-13.
Accepted: 2021-08-10.
Published: 2021-09-01 AbstractAiSamarinda city is one of the cities with large local revenue potential in the large parking fee sector.
This is evidenced by the quite fast increasing number of users of two-wheeled and four-wheeled vehicles.
But due to the increase in vehicle users in Samarinda it has not had a significant impact on the parking fee sector.
This is because there is no clear record of every parking In this case the parking lot is open or The collection of parking fees in Samarinda there are still many obstacles faced by UTPD parking management, there are still many illegal parking spaces managed by irresponsible elements.
One technology that is currently quite developed is the web.
With the web, all data and information can be distributed effectively and efficiently and contain and display various information that can be accessed by various devices.
Based on the problems and technological developments that have been presented, an idea emerged about the need to create a web-based information system to store and record transactions at any time and create an API for supporting It is expected from this study that every transaction for drivers and drivers can be recorded so that the government can clearly know the income and the amount of levy tax from parking that must be paid by each parking attendant in the AuParmonAy application.
KeywordsAiParking.
Web.
API (Application Program Interfac.
INTRODUCTION Samarinda City is one of the cities with the potential for local revenue in the parking fee sector which is quite This is evidenced by the quite rapid increase in both two-wheel and four-wheeled vehicle users.
According to the Samarinda Central Statistics Agency, in 2016 the number of vehicles totaled 129,281,079 vehicles and in 2017 it increased to 138 556 669 vehicles.
However, the increasing number of vehicle users in Samarinda has not had a significant impact on the parking fee sector.
This is because there is no clear recording of each parking transaction.
In this case in an open parking lot or a curb.
Collecting parking fees in Samarinda there are still many obstacles faced by the UPTD (Regional Technical Implementation Uni.
parking management, there are still many illegal parking lots organized by irresponsible individuals so that in collecting parking fees in Samarinda city from the original income target Blood (PAD) that has been determined never reaches the target (Budiarto, 2.
The rapid development of information technology encourages many organizations and companies to strive to be able to show competitive advantages in order to continue to survive (Ramadiani et al.
, 2.
The impact of the development of the world of Information and Communication Technology (ICT) at this time increased access to the internet began to change lifestyles Humans in various aspects, be it in the fields of economy, politics, and the social life of society, are now colored by the sophistication of the world of Information and Communication Technology (Sundari, 2.
One technology that is currently quite developed is the web.
With the web, all data and information can be channeled effectively and efficiently and contain and display various information that can be accessed by various devices.
addition, the development of smartphone technology has also begun to make dependence on society.
The dependence of the community on a smartphone cannot be separated from the conveniences offered by the development of this device.
Along with the development of these smartphone devices, the development of applications that support the use of smartphones is also accompanied by the features offered.
The trend of a technology that supports these applications is now starting to increase in its development, especially on smartphones with the Android operating system, from a standalone application to an application that can connect with other applications via a global network.
This technology is now known as the Web Service API (Syarwani, 2.
Based on the problems and technological developments that have been conveyed, the idea emerged that the need to create a web-based information system to store and record transactions for each parking attendant and create an API for supporting applications.
The author plans to design and create a web and API using the Laravel framework.
-108-
TEPIAN Vol.
2 No.
3 (September 2.
p-ISSN 2721-5350 e-ISSN 2721-5369 Wahyudi.
Junirianto.
, & Franz.
Web and Application Program Interface (API) Design AuParmonAy Modern Parking Application.
TEPIAN, 2.
, 108-115.
https://doi.
org/10.
51967/tepian.
II.
LITERATURE REVIEW
Study of Literature Some of the literature as a guide and reference in this paper:
Research conducted by Kurniawan & Puspita .
with the title Parking Service Information System Equipped with a Camera is a parking service information system application that makes it easier to run parking applications, faster leaders can monitor the results of parking reports at any time, and the presence of cameras increases parking security at parking area.
With this application, it is expected to solve these problems.
Research conducted by Hanaf .
in his journal entitled Design and Building of a Web-Based Car Workshop Information System is an information system application as a tool to provide the right solution to solve problems in the PT.
Surya Kencana includes transactions that are not recorded effectively and providing information about customer vehicle maintenance that cannot be accessed by customers anytime and anywhere.
With this system, it is hoped that PT.
Surya Kencana can solve these problems and can improve service to Research conducted by Sundari .
with the title Web-Based Public Health Center Service Information System is an information system application that has queuing activities, registration, and patient medical records.
In general, the system performance in patient services running at the health center is not optimal because it is still processing patient data and medical record data still using bookkeeping or manual media.
So patient services at the puskesmas are not effective and efficient, because the bookkeeping media slows down the making of reports.
Implementation of the program using the PHP language with a database using MySQL.
This system was created to aim to build a computerized information system, making it easier for the health center to process patient data and patient medical records into reports.
Research conducted by (Solihin & Kurniadi, .
with the title Design and Build a Parking Information System for Garut College of Technology (STTG) is a parking information system application that can make it easier to improve security in parking management by using the software development methodology used, namely the Rational Unified Process (RUP).
By making a parking management information system at STTG, it is hoped that it will be able to assist in parking management and improve security and make parking at STTG more organized.
Research conducted by Perkasa & Setiawan .
with the title Community Data Web Service Development Using the REST API with Access Token is an application that provides community web service data to create and register job search cards using available community data.
This application is able to provide and facilitate many parties, such as data administrators to monitor data usage, register employees in data input, and people can register independently.
Web (World Wide We.
w or the World Wide Web or the web alone is a system that is interrelated in a hypertext format document that contains a variety of information, including text, images, sound, video, and other multimedia information and can be accessed through a device called a web browser.
To translate documents in hypertext form into understandable documents, the web browser through the web client will read the web pages stored on a web server through a protocol known as HTTP or Hypertext Transfer Protocol (Morita et al.
PHP (Hypertext Preprocesso.
PHP is a programming language that allows web developers to create dynamic web applications quickly and easily.
PHP was pioneered and first introduced around 1994 by Rasmus Lerdorf through his website to find out who had accessed his online summary.
PHP is a server-side scripting language that integrates HTML tags.
Server-side scripting is the syntax and commands that are executed on the server and included in HTML On a dynamic web page.
PHP functions as a programming language that carries out certain commands, while HTML functions as the structure of the web page design.
When a dynamic web page is opened on a web browser page, the first time that happens is the server processes all existing PHP commands then displays the results in HTML format to the web browser, so that what is displayed to the web browser is only the design view of HTML, while PHP scripts working behind the scenes.
Laravel Laravel is a PHP framework with open code .
pen sourc.
with an MVC (Model-View-Controlle.
design which is used to build website applications.
This framework was first built by Taylor Otwell on February 22, 2012 (Junirianto, 2.
Laravel provides an updated tool for interacting with databases called migrations.
With migration, developers can easily modify a database on a platform independently because the database schema implementation is represented in a class.
Migration can run on several databases that have been supported by Laravel (MySQL.
PostgreSQL.
MSSQL, and SQLITE) and for implementation of Active Record on Laravel called Eloquent which uses the modern OOP standard.
API (Application Program Interfac.
API stands for Application Programming Interface, or often translated into an application programming There are many definitions put forward about API.
One of the briefs was conveyed by the Konkani NLP Team, from Goa University, in a presentation entitled API or Application Programming Interface.
-109-
TEPIAN Vol.
2 No.
3 (September 2.
p-ISSN 2721-5350 e-ISSN 2721-5369 Wahyudi.
Junirianto.
, & Franz.
Web and Application Program Interface (API) Design AuParmonAy Modern Parking Application.
TEPIAN, 2.
, 108-115.
https://doi.
org/10.
51967/tepian.
According to them.
AuAPI is a set of commands, functions, and protocols that can be used by programmers when building software.
The API allows programmers to use standard functions to interact with other operating Because of its function as a Lego translator, bridge, and game, this technology called API makes complex problems simpler and easier.
API consists of various elements such as functions, protocols, and other tools that allow developers to create applications.
The purpose of using the API is to speed up the development process by providing separate functions so that developers don't have to build similar features.
You can feel the application of the API if the desired feature is very complex, of course it takes time to build something similar to it.
For example: integration with a payment There are various types of system APIs that can be used, including operating systems, libraries, and the API can be accessed via HTTP request protocol, this is a concept not a technology.
We can create a Web API using different technologies such as PHP.
Java, .
NET,
(Sandi, 2.
In accessing the API, there are several HTTP request methods that have specific functions.
The following types of HTTP request methods for accessing the API are presented in Table 1.
Table 2.
Various kinds of status code in HTTP Response Table 1.
Types of HTTP Request Methods Method
HTTP GET
HTTP POST
HTTP PUT
HTTP DELETE
HTTP PATCH
Information This method is used to take representational information only and not change it.
This method is used to send the entity to the specified resource, and make additions to a resource.
This method is used to replace all current representations of the target source with the request payload.
This method is used to delete the specified resource.
This method is used to apply partial modifications to the resource.
After sending a data or request via HTTP Request, then the server responds via HTTP Response where the response is in the form of Json (Javascript Object Notatio.
which contains data or information and has a status code that describes the server status of the requested resource.
The HTTP response status code indicates whether the specified HTTP request has completed successfully.
Responses are classified into five classes consisting of informational responses, successful responses, redirects, client errors, and server errors (Admin, 2.
The following are several types of status codes in HTTP responses which are presented in Table 2 Status Code Information Continue, the temporary response so far is OK, and the client should either continue with the request or ignore it when it's OK, request success.
Created.
The request was successful and a new resource was created as a result.
Accepted, the request has been received but has not been followed up.
No Content.
There is no content to post for this request.
Multiple Choices.
Requests have more than one possible response.
The user agent or user must choose one of them.
Moved Permanently.
This response code means that the URI of the requested resource has been changed.
Not Modified.
This is used for caching Notifies the client that the response has not been modified.
Bad Request.
This response means the server cannot understand the request due to invalid syntax.
Unauthorized.
Authentication required getting the requested response.
Forbidden, the client does not have access rights to the content so the server refuses to provide an appropriate response.
Not Found, the server cannot find the requested resource.
Internal Server Error.
Server has encountered a situation that cannot be Not Implemented.
The request method is not supported by the server and cannot be Bad Gateway.
This error response means that the server, while working as a gateway to get the response needed to handle the request, got an invalid Service Unavailable, the server is not ready to handle the request.
System Usability Scale (SUS) System usability scale is scale that used to assessment of usability system.
This method has been used by so many people to testing software, because it is easy to use and the result could be consideration.
Another reason using this method is easy to understanding and easy to use, so that this method is popular to usability testing (Santoso, 2.
This method has 10 questions and 5 answer options.
The maximal score is 100 and minimal is 0.
The 10 questions can be seen in table 3 and the 5 answer questions can be seen in table 4.
-110-
TEPIAN Vol.
2 No.
3 (September 2.
p-ISSN 2721-5350 e-ISSN 2721-5369 Wahyudi.
Junirianto.
, & Franz.
Web and Application Program Interface (API) Design AuParmonAy Modern Parking Application.
TEPIAN, 2.
, 108-115.
https://doi.
org/10.
51967/tepian.
Software that used in development is as follows:
PhpStorm 2017 Xampp Postman Browser Table 3.
List Question of SUS No.
Question I think that I would like to use this system frequently.
I found the system unnecessarily complex.
I thought the system was easy to use.
I think that I would need the support of a technical person to be able to use this system.
I found the various functions in this system were well I thought there was too much inconsistency in this system.
I would imagine that most people would learn to use this system very quickly.
I found the system very cumbersome to use.
I felt very confident using the system.
I needed to learn a lot of things before I could get going with this system.
Research Procedure Research procedure can be seen in picture 2.
This research procedure is shown as flow chart diagram.
Table 4.
List Answer option of SUS No.
Option Score Strongly Disagree Disagree Half and half Agree Strongly Agree After collecting data from respondents, data will be measure to find out the average score from all The average score will be concluding by SUS score to find out in which grade.
SUS score can be seen in picture 1.
Picture 2.
Research Procedure In this research, the system making technique uses the waterfall method.
The waterfall method is a method of developing information systems that is systematic and sequential, meaning that each stage in this method is carried out sequentially and continuously (Rusmawan.
Method that used in developing the system is Waterfall.
This method can be seen in picture 3.
Picture 1.
SUS Score i.
RESEARCH METHODS
Research Time and Place This research conducted at Samarinda City especially in parking are of Agriculture Polytechnic of Samarinda.
It takes duration from October 2019 Ae Maret Includes making proposal, collecting data, application development, and reporting.
Tools and Materials Hardware that used in development is as follows:
HP Notebook Laptop 14-an017AI (AMD A6.
CPU 2.
GHz.
RAM 10GB DDR3L, 500GB HDD, 256GB
SSD)
Printer for printing some data paper Picture 3.
Waterfall Method System Design Designing User Interface (UI) is a process to create effective communication media between human and computer or mobile application.
UI is connector between user and system (Susilo et al, 2.
UI design of this system can be seen in picture 4, 5, 6, 7.
-111-
TEPIAN Vol.
2 No.
3 (September 2.
p-ISSN 2721-5350 e-ISSN 2721-5369 Wahyudi.
Junirianto.
, & Franz.
Web and Application Program Interface (API) Design AuParmonAy Modern Parking Application.
TEPIAN, 2.
, 108-115.
https://doi.
org/10.
51967/tepian.
are the focus of developing the android system of this research can be seen in Table 5.
Table 5.
API & Entity Process Method Picture 4.
User Interface Design Landing Page
Create and Obtain and data per attendant day
Obtain and location data
according to Obtain and Obtain and Candidate API
URL
Entity POST
api/login User
GET
api/transaction_day Transaction GET api/park_location GET api/transaction Transaction POST api/ transaction /store Transaction Picture 5.
User Interface Design Login Page Use Case Diagram The UML designs are made in the form of use case diagrams, activity diagrams, sequence diagrams, and class diagrams.
The following is the use case design on the system which can be seen in Picture 8.
Picture 6.
User Interface Design Register Page Picture 8.
Use Case Diagram Picture 7.
User Interface Design Dashboard Page Candidate API Based on use case analysis.
ERD, and database design, it can be concluded that all API candidates who -112- TEPIAN Vol.
2 No.
3 (September 2.
p-ISSN 2721-5350 e-ISSN 2721-5369 Wahyudi.
Junirianto.
, & Franz.
Web and Application Program Interface (API) Design AuParmonAy Modern Parking Application.
TEPIAN, 2.
, 108-115.
https://doi.
org/10.
51967/tepian.
IV.
RESULT AND DISCUSSION
Implementation Interface Landing Page Picture 9 shows the landing page of the AuParmonAy web.
On this page there are 4 sections, namely MainHeader, where there is a brief explanation of AuParmonAy and there is an about and contact menu on the top right and an admin login link on the top right of MainHeader that says AuParmonAy.
The second part is about AuParmonAy, which contains persuasive content to invite parking managers to cooperate with AuParmonAy.
The third part is content that contains the terms and conditions for registering as a AuParmonAy partner or parking And the fourth part is content that contains contacts in the form of email and phone numbers to contact and request more information regarding the AuParmonAy application.
Picture 11.
Dashboard Page Transaction Page On the transaction page, the results of recording transactions that have been successfully carried out by the parking attendants where the admin can see the vehicle plate number, the type of vehicle and the recorded date of the transaction made by the parking attendants.
Picture 11.
Transaction Page Picture 9.
Landing Page Web Login Page Display of the AuParmonAy web admin login page where the admin in charge and has been registered, logs in by entering the email and password before entering the AuParmonAy admin dashboard page just.
API Application AuParmonAy API Login The AuParmonAy login API is a parking attendant user authentication API with JWT security.
request the API login using Postman with the POST method and the URL http://AyParmonAy.
id/api/login and fill in the body form-urlencoded in the email key and password.
The following is the input process in.
POST /api/login HTTP/1.
Host: AyParmonAy.
Content-Type: application/x-w-formurlencoded Accept: application/json email=thered@gmail.
com&password=1234567890 Picture 10.
Login Page Dashboard Page AuParmonAy web dashboard display where the admin can manage parking attendant users, provide prices for each vehicle in the vehicle type menu, manage parking lots, provide parking attendant users' work locations according to the parking area and view transactions made by parking attendants.
addition, there are statistical data regarding the number of registered parking attendant users, active parking lots and the number of transactions that have been successfully recorded -113- API Parking attendant transaction data The transaction data API with the GET method is an API that displays transaction information that has been successfully recorded by the parking To request a transaction data API, use Postman with the GET method and URL http://AyParmonAy.
id/api/transaksis and fill in the Header in the Authorization.
Accept and ContentType keys, where the value of the Authorization key is in the form of a token bearer that we get after logging in .
The following is the input process in Postman GET /api/transaksis HTTP/1.
Host: AyParmonAy.
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhb GciOiJIUzI1NiJ9.
eyJpc3MiOiJodHRwOlwvXC9wYXJ tb24uaWRcL2FwaVwvbG9naW4iLCJpYXQiOjE1Nzk3OT UxNzEsImV4cCI6MTU3OTc5ODc3MSwibmJmIjoxNTc5N zk1MTcxLCJqdGkiOiJVNEJKYmRGRXBJQUMxNllVIiwi c3ViIjo0LCJwcnYiOiI4N2UwYWYxZWY5ZmQxNTgxMmZ kZWM5NzE1M2ExNGUwYjA0NzU0NmFhIn0.
nmHTX2rBla mFGV6tEL__rpDxue6O4mlopILMVW_wp7o Accept: application/json Content-Type: application/json TEPIAN Vol.
2 No.
3 (September 2.
p-ISSN 2721-5350 e-ISSN 2721-5369 Wahyudi.
Junirianto.
, & Franz.
Web and Application Program Interface (API) Design AuParmonAy Modern Parking Application.
TEPIAN, 2.
, 108-115.
https://doi.
org/10.
51967/tepian.
API Parking attendant transaction data/day The parking attendant transaction data API per day with the GET method is an API that displays transaction information that has been successfully recorded by the parking attendant per day.
For daily transaction data API requests, use Postman with the GET
URL
http://AyParmonAy.
id/api/today_transaksi and fill in the Header in the Authorization.
Accept and ContentType key sections.
The following is the input process in Postman.
GET /api/today_transaksi HTTP/1.
Host: AyParmonAy.
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhb GciOiJIUzI1NiJ9.
eyJpc3MiOiJodHRwOlwvXC9wYXJ tb24uaWRcL2FwaVwvbG9naW4iLCJpYXQiOjE1NzU5MD Y4OTcsImV4cCI6MTU3NTkxMDQ5NywibmJmIjoxNTc1O TA2ODk3LCJqdGkiOiJncFRFZENCZ3Y3ODVPeE9FIiwi c3ViIjo0LCJwcnYiOiI4N2UwYWYxZWY5ZmQxNTgxMmZ kZWM5NzE1M2ExNGUwYjA0NzU0NmFhIn0.
R8NryAYz2LKmsI6T6mHiy6hbpQcNHVYiF-a84gd_ow Accept: application/json Content-Type: application/json API Post Data transaction API post transaction data with POST method is an API that stores transaction data to the database server by parking attendants.
To request the API post transaction data, use postman with the POST method and URL http://AyParmonAy.
id/api/transaksis and fill in the Header in the Authorization.
Accept and Content-Type keys.
Then fill in the Body in the key plate number and vehicle id_jenis_filled according to the vehicle parked at the location.
The input process in Postman is as follows POST /api/transaksi HTTP/1.
Host: AyParmonAy.
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhb GciOiJIUzI1NiJ9.
eyJpc3MiOiJodHRwOlwvXC9wYXJ tb24uaWRcL2FwaVwvbG9naW4iLCJpYXQiOjE1Nzk3OT g4ODcsImV4cCI6MTU3OTgwMjQ4NywibmJmIjoxNTc5N zk4ODg3LCJqdGkiOiIyOVpRUEhobk90YUFvVjdlIiwi c3ViIjo0LCJwcnYiOiI4N2UwYWYxZWY5ZmQxNTgxMmZ kZWM5NzE1M2ExNGUwYjA0NzU0NmFhIn0.
rREPWQiSioJDacn-nkZMqBi5PUPUe8dKe8GAqop_Ds Content-Type: application/x-w-formurlencoded Accept: application/json plat_nomor=KT 000 AA&id_jenis_kendaraan=2 AuParmonAy Web UI / UX Testing UI / UX testing for the AuParmonAy web was carried out using the SUS (System Usability Scal.
The following data on the results of the SUS calculation are shown in Table 6.
Respo
R10
R11
R12
R13
R14
R15
R16
R17
R18
R19
R20
R21
R22
R23
R24
R25
Total
Score
SUS
Q Q Q Q
4 5 6 7
4 4 3 3
2 4 4 3
3 3 4 3
3 4 3 3
3 3 4 3
3 4 4 3
4 3 4 3
3 3 3 3
3 3 3 3
3 3 3 3
3 3 4 3
3 3 4 2
3 3 3 3
3 3 4 3
3 3 4 2
3 3 3 3
3 3 3 2
3 3 4 2
3 3 3 2
3 3 2 4
Average Score
Total
Score
SUS
After calculating the data from the respondent's results, in order to calculate the SUS score, the calculation for each question value is calculated in 2.
times and then the average value of the SUS score is calculated, the value is 80.
This proves that the test from the AuParmonAy web is acceptable because the value obtained is above average and gets a grade scale B value as shown in Figure 4 and gets an excellent rating.
CONCLUSION
From the results of testing and analysis of the AuParmonAy Web and API, it can be concluded that the AuParmonAy web was successfully created with the Laravel framework where the parking attendant account registration system is registered by the admin on the user management web page and has a price setting for each vehicle that can be done on the vehicle type web page.
Each transaction is successfully recorded and stored in the database and can be viewed on the transaction web On the transaction webpage, it also manages to display the results of sharing for levies, parking attendants, and the AuParmonAy application manager.
For the API login.
AuParmonAy was successfully created with JWT security where the authentication process for the API login uses email and password.
The transaction data API succeeds in displaying data based on the parking attendant user along with the details of each recorded transaction and the transaction data API successfully displays data per day based on the parking attendant user and the API for posting transaction data is successful to save each transaction according to the parking attendant Table 6.
Data the calculation of the AuParmonAy web SUS
Respo
REFERENCES