REPORT WORKING PRACTICES INDUSTRY

WEB APPLICATION FOR NETWORK MONITORING

This report was written to show author responsibility while doing the Industrial
Work Practices program at PT. Panasonic Industrial Devices Batam
Period January 8th until May 17th, 2018

Arranged By :

Name : Abdan Fauzan Nurtsani

NIS : 16.7287

Skill Program : Computer and Network

BATAM DEPARTMENT OF EDUCATION

VOCATIONAL HIGH SCHOOL 1 BATAM
Prof. DR. Hamka 1 Street Batu Aji, Batam-29422 Telp. (0778) 365903
Fax.(0778)365903
humas.smkn1batam.sch.id
2018
 COMPANY APPROVAL PAGE

Network Monitoring Based On Web

This report has been validated and approved

On 7 Mei, 2018 in Batam by:

Industrial Coordinator, Mentor,

Anwar Subekti Robby Juliantino

HOS Employee Development SID

Head of personallia department

PT.Panasonic Industrial Devices Batam

Adityo Putro Asmoro

HR Manager

i
 SCHOOL APPROVAL PAGE

Web Application For Network Monitoring

This report has been validated and approved

On May 7th, 2017 in Batam by:

Coordinator of Industrial Work Report Counselor ,

Practices,

Junaidi, S.Pd Yeni Rifma Yona, S.Pd

NIP. 19820711 200903 1 003 NIP.

Principal of Vocational High School 1 Batam,

Lea Lindrawijaya Suroso, M.Pd

NIP. 19690124 199503 2 005

ii
 PREFACE

First of all, all praises and thanks to Allah SWT. who has given His
blessings and mercies to me so the author can finished this report as one of his
responsibility while doing Industrial Work Practices at PT. Panasonic Industrial
Devices Singapore Batam. Prayer and greetings are always delivered to Great
Prophet Muhammad SAW. may peace be upon him.
During the Industrial Work Practices, for four months, from 8th of January
until 171th of May, the author got a lot of valuable experience about the
circumstances of industrial world.
The author entitled this report “Web Application For Network
Monitoring”. The preparation of this report can’t be separated from the guidance
and support of various parties. Therefore, on this occasion the author thanked
profusely to all who’s involved in the process of arranging this report, including
the industry, namely:
1. Mrs. Lea Lindrawijaya Suroso, M.Pd as Principal of Vocational High School
1 Batam..
2. Mr. Junaidi, S.Pd as Coordinator of Industrial Work Practices of Vocational
High School 1 Batam.
3. Mr. Prihtiyono Sejati as HR-TC.
4. Mr. Adityo Asmoro as Head of MTC Department.
5. Mr. Lloyd Hing as Head of Capacitor Department.
6. Mr. Vicky Ridaputra as Supervisor of Capacitor PE.
7. Mr. Robby Juliantino as my Industry Mentor.
8. Mrs. Sri Suryani, S.Pd as my Industry Counselor.
9. Mr. Yarliansyah Agustian, S.ST as Head of Computer and Network Dept. at
Vocational High School 1Batam.
10. Mrs. Yeni Rifma Yona, S.Pd as my Report Counselor.
11. Mrs. Yeni Rifma Yona, S.Pd as my Homeroom Teacher.
12. To my beloved parents which always pray the best for me.
13. To all who’s involved which I can’t mention one by one.

iii
 The author realized that this report still imperfect in many ways. The
author also deeply apologize, if in this report, there are so many inappropriate
words are used. And the author absolutely hoping for the reader’s criticism and
suggestion, which can help to perfecting this report.

Batam, May 7th, 2018

Abdan Fauzan Nurtsani

iv
 TABLE OF CONTENT

COMPANY’S APPROVAL PAGE ...................................................................... i

SCHOOL’S APPROVAL PAGE ......................................................................... ii

PREFACE ............................................................................................................. iii

TABLE OF CONTENT ........................................................................................ v

TABLE OF PICTURE ......................................................................................... vi

CHAPTER I: INTRODUCTION ........................................................................ 1

A. Background of Title Selection ................................................................... 1

B. The Purpose of The Report ....................................................................... 2

C. The Issues .................................................................................................... 3

CHAPTER II: COMPANY OVERVIEW .......................................................... 4

A. A Brief History of The Company .............................................................. 4

B. Company’s Organization Chart ................................................................ 7

C. Company’s Department Organization Chart .......................................... 8

D. Company’s Disciplines and Order ............................................................ 8

CHAPTER III: CONTENT ............................................................................... 13

A. General Theory ......................................................................................... 13

B. Sofware Required ..................................................................................... 15

C. Project Design ........................................................................................... 17

CHAPTER IV: CLOSING ................................................................................. 37

A. Conclusions ............................................................................................... 37

B. Suggestions ................................................................................................ 37

REFERENCES .................................................................................................... 38

v
 TABLE OF PICTURES

Picture 2.1 Panasonic industrial device batam ........................................................6

Picture 2.2 Organization chart ................................................................................7

Picture 2.3 Departement organization chart............................................................8

Picture 2.4 Activity 5s.............................................................................................9

Picture 3.1 Web application flow..........................................................................13

Picture3.2 Web server ..........................................................................................15

Picture 3.3 Databases ............................................................................................16

Picture 3.4 phpMyAdmin......................................................................................17

Picture 3.5 Download XAMPP .............................................................................17

Picture 3.6 Warning before install .......................................................................18

Picture 3.7 XAMPP setup .....................................................................................18

Picture 3.8 XAMPP features ................................................................................19

Picture 3.9 Instalation folder .................................................................................19

Picture 3.10 Ready to install ................................................................................20

Picture 3.11 Process installation ...........................................................................20

Picture 3.12 Finishing installation .......................................................................21

Picture 3.13 Choose language ...............................................................................21

Picture 3.14 XAMPP folder .................................................................................22

Picture 3.15 XAMPP control panel ......................................................................22

Picture 3.16 Project directory ..............................................................................23

Picture 3.17 Source code.......................................................................................23

Picture 3.18 Enter password ................................................................................24

Picture 3.19 Home page phpMyAdmin ................................................................24

Picture 3.20 Creating a new databases ..................................................................24

vi
Picture 3.21 Creating blok in databases ................................................................25

Picture 3.22 Import databases ...............................................................................25

Picture 3.23 Choose file ........................................................................................26

Picture 3.24 Open a SQL File ..............................................................................26

Picture 3.25 Finishing import SQL .....................................................................27

Picture 3.26 Table blok ........................................................................................27

Picture 3.27 Table client .......................................................................................28

Picture 3.28 Table log ...........................................................................................28

Picture 3.29 Table user ........................................................................................28

Picture 3.30 Form login ........................................................................................29

Picture 3.31 Form registration ..............................................................................30

Picture 3.32 Databases account ............................................................................30

Picture 3.33 Home page ........................................................................................31

Picture 3.34 Network status page..........................................................................31

Picture 3.35 New client page ................................................................................32

Picture 3.36 Add client success ...........................................................................32

Picture 3.37 Illustration machine type ..................................................................33

Picture 3.38 index.php ..........................................................................................33

Picture 3.39 logindata.php ....................................................................................34

Picture 3.40 dbconfig.php .....................................................................................34

Picture 3.41 tambah.php .......................................................................................35

Picture 3.42 List machine type..............................................................................35

Picture 3.43 All network status .............................................................................36

vii
 CHAPTER I
INTRODUCTION

A. Background of Title Selection

Internet technology (IT) infrastructure consultants are independent
computer professionals who assist companies in building, installing, and
maintaining their computer systems. They may work on their own or be
employed by consulting firms.
IT Infrastructure are responsible for reviewing a company's computer
systems, documenting any changes made, and making recommendations for
improvements. They may set up intranets or network systems within a
company and configure routers and servers. They may also be responsible for
dealing with network security. If there are any networking problems, IT
Infrastructure may be called in to troubleshoot or repair these issues. At the
industry, the author trained as a member of IT infrastructure to check status of
all network machine in factory 2 using a software named Pro-Server EX and
Ping Info View.
Pro-Server EX is data-collecting software that easily connects the
production site to the office through a network with simple settings at low
cost. PingInfoView is a small utility that allows you to easily ping multiple
host names and IP addresses, and watch the result in one table.
It automatically ping to all hosts every number of seconds that you
specify, and displays the number of succeed and failed pings, as well as the
average ping time. You can also save the ping result into text/html/xml file, or
copy it to the clipboard.
To monitor a status of network machine, we need to remote the server
machine and check its connection using Pro-Server EX. Every machine has its
own server. And there are several connection where Pro-Server EX is not yet
to be configured. So we need to use Ping Info View to check the network
status.

1
 2

B. The Purpose of The Report

The preparation of this report is compulsory for all students at
SMKN 1 Batam. The purpose of Industrial Employment Practices
(PRAKERIN) are:
1. Improve, expand and solidify the skills that form the student’s ability
as a provision for entering employment in accordance with program
expertise and discipline of science.
2. Develop and utilizing professional students required students to
enteremployment in accordance with their fields.
3. Improving the student experience on those aspects of a potential
business in the field of employment, among others: organizational
structure of businesses, Business Associations, Career, and medium-
sized businesses.
4. Provide opportunities for students to familiarize themselves to
something or the actual work environment climate, either as a worker,
as a recipient of the wages or as self-employed workers, especially
with regard to the discipline of work.
5. Improve, expand and solidify the process of absorption of new
technologies from the field to the school and vice versa.
6. Gain a feedback and good wages to improve and develop the
suitability of vocational education.
7. Establish cooperation with the business world is institutionally to
provide entry opportunities and placed its alumni.
 3

C. Scope of Issues
In the preparation of this report, the authors limit the issues that are
presented. On this occasion the author presents a report of Web
Application for Network Monitoring In this report authors cannot explain
the subject in detail, due to still shallow knowledge.

The author report that will be discussed in this report are as follows :

1. Knowing about web application

2. Software required to make a web application.
3. Configuring server.
4. Make a database.
5. Display Web
6. Sourcce Code
 CHAPTER II
COMPANY OVERVIEW

A. History of Company
Konosuke Matsushita is the founder of Panasonic, he was born in
Wakayama area in 1894, the youngest child of a family of five girls and boys.
Matsushita comes from a wealthy farmer's family. However, when Konosuke
was 4 years old, his father failed in the rice trade business, his family was
forced to let go of farms and homes. At the age of 9, Konosuke had to drop out
of school and work in Osaka. In his youth as a polisher and caretaker, every
night he cried because he was separated from his mother.
When the place where he worked went bankrupt, Konosuke moved to a
bike shop. A few years later his father died and he was devastated. The bike
shop owners see Konosuke very smart and diligent in doing business. At this
bike shop Konosuke learning about business, from this bike shop he started his
career. At that time, Osaka underwent a new change, at that time household
appliances greatly developed that use electricity. Konosuke left his job at a
bike shop and worked at a light electrical company in Osaka as an electrician.
At the age of 18 Konosuke lost his mother, and she also lost 5 siblings
in a row. At the age of 20 Konosuke asked his eldest brother to marry. In the
following years, at the age of 22 Konosuke was appointed as an inspector in
the electrician's section, a position sought by electrician technicians. At that
point the price rises to an extraordinary level, as a leader he must be
accountable, and then his physical body begins to decline and he tends to
reflect often. Konosuke made discoveries and innovations in his work area,
during this period in his life, he proved the repair of the lamp socket for the
power cord.
He believes with his invention but not so with customers, they prefer a
more practical. He will show his new discovery better than ever, even though
customers continue to reject it. Konosuke began to feel that he was getting

4
 5

more and more convinced that he would be better equipped to complete and
sell these sockets himself. He then left the company to start his own business
He started manufacturing with one staff of five of his own family, his
wife, his sister-in-law, and two colleagues. However the socket did not sell
properly and was the best-seller that his predecessor had predicted. Both of his
colleagues abandoned him because of financial critical.
One day, towards the end of the year, some good news came from the
purchase orders from Kawakita Electric, order a thousand pieces of insulation
plates for the electric fan. Realizing that the products produced from
Konosuke's sockets are of high quality, they want him to form an insulation
plate. Konosuke, his wife and brother-in-law work day and night to fulfill the
order of the resulting product has perfect quality and the order for the purchase
goes in.
In addition, Konosuke realizes that his house is too small for his
business activities. He decided to move one or two famous homes in Ohiraki
Cho, Osaka to launch a serious manufacturing with electrical equipment. He
founded Matsushita Electric on 07 March 1918, this is the birth of Panasonic.
At the age of 23, konosuke attended a plumbing plate for electric fans. He
awake at night to work on electrical design. He finally perfected one level of
attachment, the first product of Panasonic.
Then Matsushita began to be developed since 1918 by Konosuke
Matsushita in Wakayama, Japan. Initially this company engaged in the
manufacture of products for electrical systems. Mr. Konosuke founded this
company with his experience working for 7 years in Osaka.
 6

Picture 2.1 Panasonic Industrial Devices Batam

PT. Panasonic Electronic Devices Batam is a subsidiary of Panasonic

Electronic Device Pte Ltd. PT Panasonic Electronic Devices Batam was
launched in 1995 in Muka Kuning, Batam. Afterwards, moves to Batam
Centre in October 1st, 2001. On April 1st, 2012, Panasonic Electronic Devices
changed its name to PT. Panasonic Industrial Devices Batam.
 7

B. Company’s Organization Chart

Picture 2.2 Organization Chart

 8

C. Company’s Department Organization Chart

Picture 2.3 Department Organization Chart

D. Company’s Disciplines and Order

The disciplines and order of PT. Panasonic Industrial Devices Batam

that must be obeyed, are as follows:

1. Working Hours
a. Normal working hours starting from 7 A.M until 4 P.M
b. Arrive on time, at least ten minutes less than the starting hours.
c. Scan badge before entering the building, and get used to queuing up.
d. Get used to saying greetings to colleagues to boost up morale before
starting work.
e. Get used to warm up before starting to work.
2. Uniform
a. Do not wear uniform too fit, too short, and not too loose.
b. Always bring badge or name tag during works.
c. Wearing uniform correctly.
 9

3. Attitudes
a. Before Working
1) Get used to 5S before , while doing, and after works. 5S are:

Picture 2.4 Activity 5s

a) Seiri, separating unnecessary items.

b) Seiton, arranging everything neatly and in its place.
c) Seiso, clean the work environtment.
d) Seiketsu, keep things in order, clean, and neat.
e) Shitsuke, diligence and discipline to carry out 5S.
2) Understand the operation instruction before begin to work.
3) Listen, understand, and follow instructions and rules delivered by
the leader or supervisor.
4) Cell phones are prohibited during the working hours.
5) No smoking at work, or in toilets. Smoking is only allowed in the
smoking area.
6) Not allowed to eat or drink in production area, locker room,
training room or working area. Eat or drink only allowed in
canteen.
7) Prohibited to damage or steal company’s stuffs.
8) Prohibited from committing a disgraceful act.\
9) Throw garbage in its place
 10

10) Prohibited from carrying sharp weapons and illegal drugs in the
company area.
11) Do not fight in the company area.
b. While Working
1) Be polite and respect each other colleagues.
2) Always pay attention to operation instruction before begin to work.
3) Communicate well with colleagues.
4) Do not disturb other colleagues while working.
5) Do not take action that can provoke a commotion.
c. After Working
1) Fill the record sheet before going home.
2) Keep things in working area in order.
3) Make sure the machine power is off.
4) Do not forget to scan badge before exiting the building.
4. Works Safety
Safety means securing yourself and others from accidents and
avoiding the risk of damage to company facilities. Some of the most
common accidents in the workplace are:
a. Electric shock.
b. Limbs squeezed by machine.
c. Accident for not paying attention to 5S.
1) Cause Of Accident
a) Not following operation instruction when working.
b) Joking and not being serious in work.
c) Sleepy while working.
d) Not concentrating when working.
 11

2) Safety Rules
a) Check equipment and machine before use, and immediately
replace defective equipment.
b) For your safety, wear personal protective equipment correctly.
c) Listen, understand, and follow instructions and rules work
delivered by the leader or your supervisor.
d) Check and maintain machine regularly.
e) Do not running machine, if you don’t have authority.
5. Work Security
Security is very important things in company. Ranging from the
smallest to the greatest security. According to its form, security is divided
into two namely Asset Security and Information Security.
1) Asset Security
Asset security is security in the form of protection to
employees and company properties. Here are some examples of asset
security:
a) Prohibited to bring company properties out without permitted.
b) Any employees can’t leave company during the working hour
without permit from head of the department.
2) Information Security

Information security is security in the form to protect

information in company so not leaked to public.

a) Do not discuss confidential information in any place.

b) Prohibited to bring any electronic devices, such as laptop and
Flash drive inside to company.
 12

6. Sanctions
Disciplinary sanctions are consequences that have been agreed
upon by both parties. Here are some explanations of the disciplinary
crimes that exist in the company:
a. Termination of employment for serious offenses.
b. A proper investigation will be done to find out the size of the case
before a decision is made for sanctions to be given.
7. Quality Policies of Panasonic Industrial Devices Batam
Making customer choice number one in quality is a top priority.
a. Provide high-quality, safe, secure and reliable product through 5S
implementation and process control.
b. Continuous quality improvement on processes and systems for "0"
defect.
c. Comply with applicable statutes and regulations.
d. Implement a systematic problem-solving method through the 5 GEN
principles:
1. Genri: Following, troubleshooting or continuous improvement
processes.
2. Gensoku: Following the Rules or Procedures in troubleshooting
and improving the process.
3. Genba: Where the work process running.
4. Genbutsu: See an event or object with its own eyes or feel it
yourself and touch it with your own hands.
5. Genjitsu: Facts that must be felt, such as symptoms of problems
and their effects on production processes and work processes in
an industry.
e. Motivate all colleagues to earnestly to achieve quality goals with full
dedication and teamwork.
 CHAPTER III
WEB APPLICATION FOR NETWORK MONITORING

A. General Theory
A web application is a computer program that utilizes web browsers
and web technology to perform tasks over the Internet.

Picture 3.1 Web Application Flow

Millions of businesses use the Internet as a cost-effective

communications channel. It lets them exchange information with their target
market and make fast, secure transactions. However, effective engagement is
only possible when the business is able to capture and store all the necessary
data, and have a means of processing this information and presenting the
results to the user.
Web applications use a combination of server-side scripts (PHP and
ASP) to handle the storage and retrieval of the information, and client-side
scripts (JavaScript and HTML) to present information to users. This allows
users to interact with the company using online forms, content management
systems, shopping carts and more. In addition, the applications allow
employees to create documents, share information, collaborate on projects,
and work on common documents regardless of location or device.
Web applications are usualy coded in browser-supported language
such as JavaScript and HTML as these languages rely on the browser to
render the program executable. Some of the applications are dynamic,
requiring server-side processing. Others are completely static with no
Processing required at the server.

13
 14

Here is what a typical web application flow looks like:

1. User triggers a request to the web server over the Internet, either through
a web browser or the application’s user interface.
2. Web server forwards this request to the appropriate web application
server.
3. Web application server performs the requested task – such as querying the
database or processing the data – then generates the results of the
requested data.
4. Web application server sends results to the web server with the requested
information or processed data.
5. Web server responds back to the client with the requested information that
then appears on the user’s display.
Web applications include online forms, shopping carts, word
processors, spreadsheets, video and photo editing, file conversion, file
scanning, and email programs such as Gmail, Yahoo and AOL. Popular
applications include Google Apps and Microsoft 365.

Benefits of a Web Application:

1. Web applications run on multiple platforms regardless of OS or device as
long as the browser is compatible.
2. All users access the same version, eliminating any compatibility issues.
3. They are not installed on the hard drive, thus eliminating space limitations.
4. They reduce software piracy in subscription-based web applications (i.e.
SaaS).
5. They reduce costs for both the business and end user as there is less support
and maintenance required by the business and lower requirements for the
end user’s computer.
 15

B. Software Required
The software needed is:
1. Web Server
The primary function of a web server is to store, process and
deliver web pages to clients. The communication between client and server
takes place using the Hypertext Transfer Protocol (HTTP). Pages delivered
are most frequently HTML documents, which may include images, style
sheets and scripts in addition to text content.

Picture 3.2 Web Server

2. PHP
PHP is a server scripting language, and a powerful tool for making
dynamic and interactive Web pages.
PHP code may be embedded into HTML or HTML5 markup, or it
can be used in combination with various web template systems, web
content management systems and web frameworks. PHP code is usually
processed by a PHP interpreter implemented as a module in the web server
or as a Common Gateway Interface (CGI) executable. The web server
software combines the results of the interpreted and executed PHP code,
which may be any type of data, including images, with the generated web
page. PHP code may also be executed with a command-line interface
(CLI) and can be used to implement standalone graphical applications.
 16

3. Database Server
A database server is a computer system that provides other
computers with services related to accessing and retrieving data from a
database. Access to the database server may occur via a "front end"
running locally a user's machine (e.g. phpMyAdmin), or "back end"
running on the database server itself, accessed by remote shell. After the
information within the database is retrieved it is outputted to the user
requesting the data.
A database is a large quantity of indexed digital information. It can
be searched, referenced, compared, changed or otherwise manipulated
with optimal speed and minimal processing expense.

Picture 3.3 Database

4. PhpMyAdmin
PhpMyAdmin is a free software tool written in PHP, intended to
handle the administration of MySQL over the Web. phpMyAdmin
supports a wide range of operations on MySQL and MariaDB.
Frequently used operations (managing databases, tables, columns,
relations, indexes, users, permissions, etc) can be performed via the user
interface, while you still have the ability to directly execute any SQL
statement.
 17

3.4 phpMyAdmin
5. Browser

A web browser (commonly referred to as a browser) is a software

application for accessing information on the World Wide Web. Each
individual web page, image, and video is identified by a distinct URL,
enabling browsers to retrieve and display them on the user's device.

Note that a web browser is not the same thing as a search engine,
though the two are often confused. For a user, a search engine is just a
website, such as google.com, that stores searchable data about other
websites. But in order to connect to and display websites on their device, a
user needs to have a web browser installed.

And for creating web application I recommended to use chrome

browser. Because chrome browser is the browser that most often used by
web Developers.

C. Project Design
1. Software Required
For the program to run, the server must be installed on computer
by installing required software.
a. XAMPP
XAMPP is a free and open source cross-platform web server
solution stack package developed by Apache Friends, consisting
mainly of the Apache HTTP Server, MariaDB database, and
interpreters for scripts written in the PHP and Perl programming
languages.
 18

b. Sublime Text
Sublime Text is a proprietary cross-platform source code editor
with a Python application programming interface (API). It natively
supports many programming languages and markup languages, and
functions can be added by users with plugins, typically community-
built and maintained under free-software licenses.

2. Configure Server (XAMPP)

These are step to install XAMPP in windows :
a. Download and Install XAMPP.

Picture 3.5 Download XAMPP

b. When his notification show up, click YES to continue installation

Picture 3.6 Warning before installation XAMPP

 19

c. Click Next

Picture 3.7 XAMPP setup

d. Choose the feature you want to install

Picture 3.8 XAMPP Features

 20

e. Chose place to save XAMPP,

Picture 3.9 Installation Folder XAMPP

f. Click Next

Picture 3.10 XAMPP ready to installation

 21

g. Wait until the installation Finish

Picture 3.11 Process Installation

h. Click Finish

Picture 3.12 Finishing Installation

 22

i. Choose your language

Picture 3.13 Choose language

j. Open XAMPPControl in folder XAMPP

Picture 3.14 XAMPP Folder

 23

k. Click Start Apache & MySql

Picture 3.15 XAMPP Control Panel

3. Create Project Directory

a. Add the project directory in C:\xampp\htdocs and give the name with
the project name. Directory will be accessed using URL localhost/
(name-directory) on browser.

Picture 3.16 Project Directory

 24

a. Then save the source code of the project to the project

directory, in this case C:\xampp\htdocs\monitoring

Picture 3.17 Source Code

4. Setting Up Database
a. Open the database with browser, type URL localhost/phpmyadmin.
Then Enter Password, if previously you setting a password. If you
don’t set a password you will be go to home page of phpMyAdmin

Picture 3.18 Enter Password phpMyAdmin

 25

Picture 3.19 Home Page phpMyAdmin

b. Then create a new databases by clicking new, and Go to sql

Picture 3.20 Creating a New Databases

c. Create four new table there are table blok, table client, table log,
and table user.

Picture 3.21 Creating blok in database network monitoring

 26

d. To make it simple, create table structure by importing it using a

SQL file. These are step to import a SQL file :
1) Open database that will be importing a SQL file. Then click
import.

Picture 3.22Import Databases

2) Click choose file.

Picture 3.23 Choose file

 27

3) Find your SQL file and Open it.

Picture 3.24 Open A SQL File

4) Then click go.

Picture 3.25 Finishing importing SQL file

 28

Picture 3.26 Table Blok

Picture 3.27 Table Client

Picture 3.28 Table log

 29

Picture 3.29 Table user

5. Display Web
a. Login Page

Picture 3.30 Form Login

 30

b. Sign Up Page
After registration it will be stored in databases.

Picture 3.31 Form Registration

Picture 3.32 Databases Accounts

 31

c. Home Page

Picture 3.33 Home Page

d. All Network Status page

Picture 3.34 Network Status Page

 32

e. Add New Machine

Picture 3.35 New Client Page

Picture 3.36 Add Client success

 33

f. List Of Machine Type

Picture 3.37 Illustration Machine Type

6. Source Code Explanation

In the source code I use mysql extension to access the databases

and PHP. And now we will go to the syntax

a. Index.php

Picture 3.38 index.php

 34

Index.php , is the first look we will see. In this case the first

page to be show is the login page. But if the user has already

logged on then a Home page will be shown.

b. Logindata.php

Picture 3.39 logindata.php

In this php is used to sign in to index.php, using command

$_SESSION to store variables temporarily in databases.

c. db.config.php

Picture 3.40 dbconfig.php

This php file is using to connect the web to database.

 35

d. Tambah.php

Picture 3.41 tambah.php

PHP is used to add a client to the databases, Using a

command such as $_GET and $_POST is used to Requests data
from a specified resource, while $_POSt is used to Submits data to
be processed to a specified resource.
e. Type machine.html

Picture 3.42 list machine type

This section used to list any existing machine, like Stacking

Machine, Welding, Molding, Forming, & Final Inspection.
 36

f. Status.php

Picture 3.43 All network status

And in this part is the status of the various networks that exist in

the region and Capacitor. This page will be POST and process to

databases whether it’s network to databases or not.

 CHAPTER IV

CLOSING

A. Conclusion

1. Web application is a computer program that utilizes web browsers and

web technology to perform tasks over the Internet.

2. The primary function of a web server is to store, process and deliver web

pages to clients.

3. PHP is a server scripting language, and a powerful tool for making

dynamic and interactive Web pages.

4. Database server is a computer system that provides other computers with

services related to accessing and retrieving data from a database.

5. XAMPP is a free and open source cross-platform web server solution

stack package developed by Apache Friends, consisting mainly of the

Apache HTTP Server, MariaDB database, and interpreters for scripts

written in the PHP and Perl programming languages.

6. phpMyAdmin is a free and open source administration tool for MySQL

and MariaDB.

B. Suggestion

1. I hope this project will be used to monitoring the network status.

2. And for the readers don't forget to always be thankful, worked hard, pray

to be able to get what we want

37
 REFERENCES

XAMPP. Download XAMPP For Windows.

https://www.apachefriends.org/index.html

W3Schools. PHP Tutorial.

https://www.w3schools.com/php/default.asp. Accessed on,

Google Translate

https://translate.google.co.id/?hl=id

Youtube

https://www.youtube.com/?hl=id&gl=ID

Friends

Google

https://nyontekabis.wordpress.com/2013/07/29/mengenal-fungsi-session-

untuk-autentifikasi-di-php/