J o u r n a l o f I n f o r m a t i o n S y s t e m a n d T e c h n o l o g y R e s e a r c h Volume 1.
Issue 2.
May 2022 Journal of Information System and Technology Research journal homepage: https://journal.
id/index.
php/jistr/ Information System Application Alanysis And Design Web-Based Network Complaints Using Php And Bootsrap On Diskominfo Wilda Maudyna1.
Latifah Hanum2 Program Studi Sistem Informasi.
Universitas Islam Negeri Sumatera Utara.
Indonesia1 Program Studi Sistem Informasi.
Stmik Triguna Dharma.
Indonesia2
ARTICLE INFO
ABSTRACT
Article history:
Network complaints services at the Tebing Tinggi City Communications and Information Office are handled by IT Support, complaints reports regarding network or device problems are received by telephone or Service employees come directly to the office with hardware included.
IT Support uses Microsoft Word as an application to input report data regarding network complaints, this system is considered ineffective and can cause errors during input.
This study aims to design and build a webbased network complaint application using the codeigniter and bootsrap framework.
As for designing this website system, the researcher uses programming, namely MySQL as the database and PHP as the programming language, while the system development method uses Waterfall.
The results of this study are a website-based network complaint application which is expected to provide a solution so that service and data processing of network complaints can be handled more quickly.
Received Mar 23, 2022 Revised Apr 14, 2022 Accepted Apr 28, 2022 Available online Mei 31, 2022 Keywords:
Information Systems Network Complaint Application Website A 2022 The Author.
Published by AIRA.
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
0/).
Corresponding Author:
Wilda Maudyna.
Department of Information Systems.
State Islamic University of North Sumatera.
Indonesia Email: maudynawilda@gmail.
INTRODUCTION
The Department of Communication and Information, which is also known as Kominfo, has the authority to issue permits related to its fields and areas of its working area.
Several licensing arrangements under the Ministry of Communication and Information such as Electronic System Operator Permit.
Telecommunication Network Operation Permit.
Telecommunication Service Operation Permit.
Broadcasting Organization (Private Broadcasting Institutions and Subscription Broadcasting Institution.
Principle Licensing for Telecommunication Service Operation.
Principle Licensing for Special Telecommunications Operations for Legal Entities.
Principle Licensing Telecommunication Network Operation.
Certification of Telecommunication Equipment and Equipment, to Radio Station License.
In addition.
Kominfo also in formulating services and websites that may operate, websites that do not comply with policies and laws will be subject to a website blocking policy.
Kominfo also has a role as the executor of development in the field of communication and informatics through programs such as digital and others.
The Tebing Tinggi City Communications and Information Office requires a system service that improves the effectiveness and efficiency of its services.
Due to the absence of a computerized network complaint system, the Tebing Tinggi City Communications and Information Office has difficulty in overcoming the many agencies that complain to the IT Diskominfo about network problems in their agencies.
This Web-Based Network Complaint Information System application uses PHP and Bootstrap.
This application helps the IT Office of Communication and Information Technology of Tebing Tinggi City in overcoming the problem of network complaints from other agencies so that it is structured and makes it easier for the IT Office of the City of Tebing Tinggi to control the process of searching for a list of agencies that have problems on the network effectively and efficiently.
RESEARCH METHOD
This research uses qualitative research, namely research whose main purpose is to gain a deeper understanding of a particular topic.
Qualitative research is descriptive and tends to use analysis.
https://doi.
org/xx.
x/x.
A 2022 The Author.
Published by AIRA.
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
0/).
P ISSN 2828-3864.
E ISSN: 2828-2973
JISTR.
Volume 1.
Issue 2.
May 2022 In the software development process, the author uses the Waterfall method.
The author uses this method because the system development is regulated and adapted to the application design.
This method is very suitable for designing this system.
The Waterfall method has the following stages:
Requirements Analysis and Definition.
Services, constraints and system objectives are determined after consultation with users, then detailed and used as system specifications.
System and Software Design.
The system design stage allocates the hardware and software requirements of the system by forming the overall system architecture.
Software design is concerned with defining and sketching the abstract systems underlying software and their relationships.
Implementation and Unit Testing.
At this stage, software design is carried out in the form of a program sequence or program Testing consists of verifying that each unit meets its specifications.
Integration and System Testing.
The individual units of one or more programs are combined and tested as a complete system to ensure that they meet the software requirements.
After testing, the software can be sent to customers.
Operation and Maintenance.
Usually .
ut not alway.
this phase is the longest.
The system is installed and used in practice.
Maintenance consists of fixing bugs not found in the previous step, improving the performance of the system unit, and improving system services according to new requirements.
The methodology describes the main materials and equipment, as well as the research methods used, and provides sufficient detail to allow for repeatability of the study.
The published method must be indicated by reference.
The preparation of the main documents and their equipment is described briefly and clearly in the form of paragraphs.
Figure 1 Waterfall Method 1 Theoretical Basis System The system is a collection or set of components that are interconnected, collaborate, interact, and achieve their goals through three stages, namely input, process, and output .
Information System Information system is a combination of people, hardware, software, communication networks, data resources, policies and procedures for modification, acquisition, storage, and dissemination of information in organizations .
Website Website is a collection of pages consisting of several pages containing information in the form of digital data in the form of text, images, video, audio, and other animations provided by the Internet.
Website can also be interpreted as a page displayed in a browser such as Mozilla Firefox.
Google Chrome, or others that contain information.
CSS
CSS stands for Cascading Style Sheet and is the language for web pages.
Such as color, layout, font.
Web developers can use CSS to create web pages that can adapt to different screen sizes.
CSS generation is usually separate from HTML pages.
Although CSS can be embedded in HTML pages.
This is to facilitate the arrangement of HTML pages with the same design.
Framework Framework is a collection of instructions that are collected into classes and functions with their respective functions to make it easier for developers to call them without having to write the same program syntax over and over again, saving time.
Bootstrap Bootstrap is a framework for building responsive web designs.
In other words, a webview created with bootstrap will scale the layer with the browser using on desktop, tablet, or mobile.
Bootstrap also allows you to create dynamic or static Sublime Text Editor Sublime Text Editor is a text editor for programming languages, including PHP programming.
Sublime Text Editor is a cross-platform text editor with Python Application API.
Sublime Text Editor also supports many programming and markup languages, and you can add features using plugins and Sublime Text Editor without a license for the software.
P ISSN 2828-3864.
E ISSN: 2828-2973
JISTR.
Volume 1.
Issue 2.
May 2022
XAMPP
XAMPP is free software that supports different operating systems and is a collection of several programs.
It has an Apache HTTP server program, a MySQL database, and a standalone server consisting of a language translator written in the PHP and Perl programming languages.
The name XAMPP stands for X .
our operating system.
Apache.
MySQL.
PHP, and Perl.
This program is available under the GNU General Public License and is a free and free web server.
Easy-to-use dynamic web page views can be provided.
To get it, you can download it directly from the official site.
MySQL MySQL is a multi-threaded and multi-user SQL database management system (DBMS) software.
MySQL is a relational database management system "RDBMS" distributed free of charge under the GPL (General Public Licens.
Anyone can use MySQL freely.
MySQL is actually a derivative of SQL (Structured Query Languag.
SQL is a concept for manipulating databases, specifically selection and data entry, and can easily and automatically process data.
As a database server.
MySQL is superior to other database servers in terms of querying.
2 System Analysis Analyzing the system is the first step in creating a new system.
At this step, it is necessary to analyze the problems that exist in the Tebing Tinggi City Communication and Information Office, especially those related to network complaints.
To create a new system, one must first understand the flow that is still in use.
Next, a document flow is created which is used to examine the flow in detail.
The main problem in describing this task is that the reporting of problematic network complaint data to other agencies to the Tebing Tinggi City Communications and Information Office is done manually, namely by telephone or by an official coming directly to the office.
The process that occurs if other agencies experience interference with their network is that the agency directly contacts by telephone or the official of the Service comes directly to the office and then uses Microsoft Word as an application to input report data regarding network complaints.
During this process, there is a risk that may occur, namely the IT Department of Communications and Information Technology feels this system is less effective and can cause errors during input.
Due to the problems identified in the current system, the researcher proposes a system that should change the process of recording network complaints from manual to digital.
3 System Plan Flowchart Flowchart is a chart with certain symbols that describe the sequence of processes in detail and the relationship between a process .
with other processes in a program.
Figure 2 Flowchart of the current system Figure 2 above is a flowchart of a Web-Based Network Complaint Information System currently running at the Tebing Tinggi City Communications and Information Office.
The current system is that employees of other agencies come to the Diskominfo office, then report to the IT Diskominfo and then the IT Diskominfo records network complaints that occur at the employee agency using Microsoft Word.
P ISSN 2828-3864.
E ISSN: 2828-2973
JISTR.
Volume 1.
Issue 2.
May 2022 Figure 3 Flowchart of the proposed system Figure 3 above is a flowchart of a Web-Based Network Complaint Information System that will be proposed at the Tebing Tinggi City Communications and Information Office.
There are two actors, namely users and admins who run or operate the entire system, where later users or agencies will be given access to complain about network problems or problems that occur in their agencies.
When a user adds a complaint, the admin can see the complaint.
Then, the admin can continue the status of the complaint whether it has been processed, resolved or canceled.
Admins can also manage user accounts.
Usecase Diagrams Usecase Diagram is a diagram that describes what functions can be performed by each actor in a system.
With the Usecase Diagram, it will be known what functions are available in the system and who has the right to use these functions .
In conclusion, in the use case there is an actor, where is the actor? which will later show the user who will run system, or you could say the person who interacts with the system will be created.
The following is a Usecase Diagram for a Network Complaint Information System Web-Based Using PHP and Bootstrap at the Communications Service and Tebing Tinggi City Informatics :
Figure 4 Usecase Diagram Figure 4 above is a use case diagram of a Web-Based Network Complaint Information System at the Tebing Tinggi City Communications and Information Office.
There are two actors, namely users and admins who run or operate the entire system, where users can login as users, then users can change data, and add complaints.
While admins can also login as admin, then change data, add, and print.
Both actors can also change passwords and logout.
Admins can also manage user accounts.
Activity Diagrams Activity diagram is a diagram that describes the activities that can be carried out by the system, the activities here are in the form of menus so that they can assist in understanding the overall system process.
P ISSN 2828-3864.
E ISSN: 2828-2973
JISTR.
Volume 1.
Issue 2.
May 2022
User Login Process
SYSTEM
USER
Figure 5 Activity Diagram of the User Login Process Figure 5 is an activity diagram of the user login process.
To log in as a user, the system will display a login page.
After that, the user will fill in the login form and submit.
If it is valid, the user will be taken to the main page, namely the Add Complaints page.
If it is not valid then the user will be taken back to the login page.
Process of Modifying Complaint List Data
SYSTEM
USER
Figure 6 Activity Diagram of the Process of Changing the Complaint List Data Figure 6 is an activity diagram of the process of changing the complaint list data.
To change the data on the complaint list that the user has added to the add data menu, the user can open the complaint list menu.
Then, check or select one of the data to be Then, click the change data button and the system will display the data form that you want to change.
Furthermore, the user can change the data and save it by clicking the save data button, and the data is saved successfully.
Process for Adding a Complaint
SYSTEM
USER
Figure 7 Activity Diagram of the Adding Complaints Process Figure 7 is an activity diagram for the process of adding a complaint.
For the process of adding a complaint made by the user, the data user selects the Add complaint menu.
Then, the system will display the add complaint button and the user can click the add complaint button.
Then, the user fills out the form to add a complaint.
Then, if you are sure you want to add a complaint.
P ISSN 2828-3864.
E ISSN: 2828-2973
JISTR.
Volume 1.
Issue 2.
May 2022 click the sure button and the system will save the complaint data to the complaint list.
However, if the user is not sure or wants to close the add complaint form, the user can click the close button and the system will return the user to the start page.
Admin Login Process
SYSTEM
ADMIN
Figure 8 Activity Diagram of the Admin Login Process Figure 8 is an activity diagram of the admin login process.
To login as admin, the system will display a login page.
After that, the admin will fill in the login form and submit.
If it is valid, the admin will be taken to the main page, namely the complaint list page.
If it is not valid then the user will be taken back to the login page.
User Manage Process
SYSTEM
ADMIN
Figure 9 Activity Diagram of the User Management Process Figure 9 is an activity diagram of the user management process.
To manage users, the admin himself can add data on which users can access the network complaint website from Diskominfo.
Process of Changing Status
SYSTEM
ADMIN
Figure 10 Activity Diagram of the Process of Changing Status P ISSN 2828-3864.
E ISSN: 2828-2973
JISTR.
Volume 1.
Issue 2.
May 2022 Figure 10 is an activity diagram of the process of changing the status.
To change the status on the complaint list, the admin can select the complaint list menu.
Then, the system will display the complaint data.
Next, the admin can click the detail button on the action to view the detailed complaint data and the admin can change the latest status by selecting Queue.
Process.
Finish, or Cancel.
Then, the system will change the status of the complaint to the user.
RESULTS AND DISCUSSION
Login Page Figure 11 is a login page display.
In this process, the admin or user can login first by filling in the username and password to enter the network complaint system page.
Figure 11 Login Page User Main Page Figure 12 is the main page display for the user.
After the user logs in, the user will be taken to the main page.
This page has a button to add a complaint.
Figure 12 User Main Page Add Complaint Form Figure 13 is the display of the form page for adding a complaint to the user.
If the user wants to add a complaint, the user can click the "Add Complaint" button.
Then the system will display an add complaint form.
Figure 13 Add Complaint Form P ISSN 2828-3864.
E ISSN: 2828-2973
JISTR.
Volume 1.
Issue 2.
May 2022 Complaint List Menu Figure 14 is a display of the complaint list menu for the user.
Here is displayed a list of complaint data that has been inputted into the system.
Where that has been checked means that the complaint is being managed or has been managed by the admin, and conversely what has not been checked means that the complaint has not been processed by the admin.
Figure 14 Complaint List Menu Complaint Data Change Form Figure 15 is a form display for changing the data on the list of complaints made by the user.
If the complaint data has not been checked or has not been processed by the admin, the user can still change the data by selecting one of the data that he wants to change and then pressing the "Change Data" button on the complaint list menu.
Then, the user can change the data as needed.
When finished, the user can press the save data button.
Figure 15 Complaint Data Change Form Change Password Form Display Figure 16 is the display of the change password form for the user.
If the user wants to change the password on the network complaint account, the user can select the change password menu and then press the update button to save the new Figure 16 Change Password Form P ISSN 2828-3864.
E ISSN: 2828-2973
JISTR.
Volume 1.
Issue 2.
May 2022 Logout Page Figure 17 is a logout display.
If the user wants to exit the Network Complaint application, the user can select the logout Then, the system will issue the question AuAre you sure you want to leave?Ay if Yes, the user can select the AuLogoutAy button and if No, the user can select the AuCancelAy button.
Figure 17 Logout Display Admin Main Page Figure 18 is the main page after logging in as admin.
This main page contains a compiled list of complaint data from other agencies.
Figure 18 Admin Main Page Form Details Figure 19 is a detailed form for the admin.
If the admin wants to view and change the status of the complaint data from another agency, the admin can select the detail button then the system will display the data details, and if the admin wants to change the status, the admin can change it by selecting Queue.
Process.
Finish, or Cancel.
When finished, the admin can press the "Change Complaint Status" button if you have changed the status of the complaint, or press "Close" if you cannot change the P ISSN 2828-3864.
E ISSN: 2828-2973
JISTR.
Volume 1.
Issue 2.
May 2022 Figure 19 Form Details Delete Page Figure 20 is a view of the delete page.
If the admin wants to delete the complaint data, the admin can select the delete button on the action in the complaint data.
Then, the system displays the question Auare you sure you want to delete this data?Ay if Yes, the user can select the AuSureAy button and if No, the user can select the AuCloseAy button.
Figure 20 Delete page User Manage Page Figure 21 is a user management menu display.
If the admin wants to display and manage users, the admin can select the manage users menu.
Then, the system will display user data that has been registered in the network complaint application.
Figure 21 User Manage Page Add User Data Form Figure 22 is a form to add user data.
If the admin is going to add a new user from another agency, the admin can select the manage users menu.
Then, the admin presses the "Add Data" button.
And the admin can fill out the Add Data form.
P ISSN 2828-3864.
E ISSN: 2828-2973
JISTR.
Volume 1.
Issue 2.
May 2022
Figure 22 Form Add User Data
CONCLUSION
With the existence of a Network Complaints website at the Communication and Informatics Service, it can be concluded that this research has produced a product in the form of a Web-Based Network Complaint Information System Application using PHP and Bootstrap at the Tebing Tinggi City Communication and Information Office, to handle the network complaint process from other agencies that still manual and also helps control the network complaint data process effectively and efficiently.
With this system, it makes it easier for IT Diskominfo in terms of overcoming and processing network problems experienced by other agencies in a computerized manner, and processing them more quickly and safely because they are stored in the system and this information system is made using the Waterfall method using the PHP programming language, and using the Bootstrap Framework with MySQL as the database.
REFERENCES