CHAPTER III

MAKING A WEB-BASED APPLICATION WEB IN TKJ WORKSHOP

WITH HTML, PHP, MYSQL PROGRAMMING LANGUAGES

3.1 Sublime Text

Picture 3.1 Sublime Text Logo

Sublime text is a Python based text editor that has many features.
Sublime text also supports many programming languages including C ++, C
#, CSS, PHP, HTML, Javascript, ASP, and many more. Sublime text has
several advantages - advantages that can help users in creating a web
development.
The following are some of the features featured in the Sublime Text
application:
1. Goto Anything
A very helpful feature in opening files or exploring the contents
of files with only a few keystrokes.
2. Multiple Selections
This feature allows users to interactively change many lines at
once, change variable names easily, and manipulate files faster than
before.
3. Command Pallete
With only a few keystorkes, users can quickly search for the
desired function, without having to navigate through the menu.
4. Distraction Free Mode
If the user needs full focus on this application, this feature can
help the user by providing a full screen display.

7
 8

5. Split Editing
Get maximum results from a wide screen monitor with split
editing support. Edit side files with sides, or edit two locations in one
file. You can edit with many rows and columns that the user wants.
6. Instant Project Switch
Capture all files entered into the project in this application.
Integrated with the Goto Anything feature to quickly explore all
existing files or to switch to files in other projects.
7. Plugin API
Equipped with a Python based API plugin that makes this
application very tough.
8. Customize Anything
This application gives users flexibility in terms of functional
settings in this application.
9. Cross Platform
This application can run almost all modern operating systems
such as Windows, OS X, and Linux based operating systems.

After reading a number of advantages in the Sublime Text feature

above, it can be concluded that this text editor has many advantages and
makes it easy for users of text editors to create applications.

3.2 XAMPP

Picture 3.2 XAMPP Logo

XAMPP is free software, which supports many operating systems, is a
compilation of several programs.Itsfunction is as a stand-alone server
(localhost), which consists of the Apache HTTP Server program, MySQL
database, and language translators written in the PHP and Perl programming
languages. The name XAMPP stands for X (four any operating system),
 9

Apache, MySQL, PHP and Perl. This program is available in the GNU
General Public License and is free, an easy-to-use web server that can
serve the appearance of dynamic web pages. To get it can download directly
from the official web.
This version of XAMPP software consists of :
 Apache version 2.0.54
 MySQL version 4.1.12
 PHP version 5.0.4
 phpMyAdmin version 2.6.2-p11 and others
Let us know the web server in XAMPP more closely one by one.

3.2.1 APACHE

Picture 3.3 APACHE Logo

Apache has been developing since its first version. Until when
this article was written, the latest version is Apache ver 2.0.54.
Apache is open source, meaning everyone can use it, retrieve and even
change the program code.
Apache's main task is to produce the right web page to the
requester, based on the PHP code written by the creator of the web
page. If needed also based on the PHP code written, it can be accessed
in a database first (for example in MySQL) to support the resulting
webpage .
3.2.2 MySQL

Picture 3.4 MySQL Logo

 10

Mysql is an open-source relational database management system

(RDBMS). The name is a combination of "My" the name of co-
founder Michael Widenius's daughter, and "SQL", the abbreviation for
Structured Query Language. Mysql use Sql or Structured Query
Language because it has flexibility in management and development.
In this report, writer will use Mysql PHPMyAdmin from the
Xampp feature. Actually Xampp is testing web server for PHP
language, that is Apache. But, this time writer will only use Mysql
feature from Xampp.

3.3 PHP

Picture 3.5 PHP Logo

Programming language PHP is a programming language for creating
web that is server-side scripting. PHP allows us to create dynamic web
pages. PHP can be run on a variety of Operating Systems (OS), such as
Windows, Linux and Mac OS. Besides Apache, PHP also supports several
other web servers, such as Microsoft IIS, Caudium, PWS and etc.
As mentioned before that PHP can use databases to generate dynamic
web pages.
Database management systems that are often used in conjunction with
PHP are MySQL. But PHP also supports Oracle Database management
systems, Microsoft Access, Interbase, D-Base, PostgreSQL and so on.Until
now PHP has developed to version 5. PHP 5 supports full Object Oriented
Programing (OOP), XML integration, supports all the latest MySQL
extensions, web services development with SOAP and REST, and hundreds
of other enhancements compared to previous versions. Same with other web
servers PHP is also open source so that everyone can use it for free.
 11

3.4 HTML
HTML stands for HyperText Markup Language which is a standard
programming language used to create a web page, which can then be
accessed to display various information in an Internet web browser
(Browser). HTML can also be used as a link link between files on the site or
in a computer using localhost, or links that connect between sites in the
internet world.
In order to produce an integrated display, simple hypertext formatting
is written in ASCII format files so that it becomes a web page with HTML
commands.
HTML is a language that starts languages that were previously widely
used in the world of printing and publishing called the Standard Generalized
Markup Language (SGML).
HTML or Hypertext Transfer Protocol is a protocol used to transfer
data or documents that are HTML formatted from a web server to a web
browser. HTTP is what allows you to browse the internet and view web
pages
HTML function:
 Creating web pages.
 Display various information in an Internet browser.
 Make links to other web pages with certain codes (hypertext).

3.5 CRUD and Implementation in Programming

Picture 3.6 CRUD Implementation

 12

CRUD or also known as Create, Read, Update, Delete is the are the
four basic functions of persistent storage. Alternate words are sometimes
used when defining the four basic functions of CRUD, such as retrieve
instead of read, modify instead of update, or destroy instead of delete.
CRUD is also sometimes used to describe user interface conventions that
facilitate viewing, searching, and changing information; often using
computer-based forms and reports. The term was likely first popularized by
James Martin in his 1983 book Managing the Data-base Environment. The
acronym may be extended to CRUD to cover listing of large data sets which
bring additional complexity such as pagination when the data sets are too
large to hold easily in memory
In some database application, crud has many acronyms. CRUD refers
to all of the major functions that are implemented in relational database
applications. Each letter in the acronym can map to a standard Structured
Query Language (SQL) statement, Hypertext Transfer Protocol (HTTP)
method.
CRUD is also relevant at the user interface level of most applications.
For example, in address book software, the basic storage unit is an
individual contact entry. As a bare minimum, the software must allow the
user to :
 Create or add new entries
 Read, retrieve, search, or view existing entries
 Update or edit existing entries
 Delete/deactivate/remove existing entries
Without these four operations, the software cannot work properly.
Because this operation is very basic, this operation is often referred to as the
core of the software. These four operations are often documented and
described under one full title, such as "contact management", "content
management" or "contact maintenance". A software worthy to be called is
incomplete or defective if there is no crud element in it.
 13

3.6 The Steps Of Making From Web Applications

3.6.1 Preparation for creating a web application form
1. Create Database and Table

Picture 3.7 Create Database tkj

Picture 3.8 Create table peminjaman

Picture 3.9 Create table admin

Picture 3.10 insert data login in table admin

2. Design of web application processes

Picture 3.11 process in application

 14

3.6.2 Creating Form Applications Web

1. First of all, Open your XAMPP control panel, and press the
button starting with 'Apache' and 'MySQL'

Picture 3.12 Xampp Control Panel

2. Then the next step is to create a file to connect to the database.

Create a new one file with the name koneksi.php, save it to
htdocs / login, htdocs / login / student, and htdocs / login /
student, then create a script and type the code below:

Picture 3.13 script koneksi.php

3. To display the login form, the author will create a file called
index.php as a form to log in. Make an index.php script like the
picture below.
 15

Picture 3.14 Script index.php

Picture 3.15 Script index.php

 16

4. After that to do the process to be able to log in, the author will
make cek_login.php. Next is the cek_login.php script.

Picture 3.16 Script cek_login.php

5. After the author creates a login section, create a new folder with
the name admin and students. Then create index.php in it as
shown below.
 17

Picture 3.17 Script admin/index.php

Picture 3.18 Script admin/index.php

 18

Picture 3.19 Script siswa/index.php

Picture 3.20 Script siswa/index.php

 19

6. After the author makes the index.php section on each folder,

then create the input.php script in the siswa folder and
input_proses.php as shown below.

Picture 3.21 Script siswa/input.php

Picture 3.22 Script siswa/input.php

 20

Picture 3.23 Script siswa/input_proses.php

7. The next step is the author will create a hapus.php file in the
admin folder and siswa, then create a hapus.php script in the
admin and siswa folder as shown below.

Picture 3.24 Script admin/hapus.php

Picture 3.25 Script siswa/hapus.php

8. The next step is that I will create the file edit.php and
edit_proses.php in the student folder, create a script based on the
image below.
 21

Picture 3.26 Script admin/edit.php

Picture 3.27 Script admin/edit.php

9. The next step is that the author will create a logout.php file in
the admin folder and siswa so they can exit the login system,
then create a script based on the image below.
 22

Picture 3.28 Script logout.php on folder admin and siswa

10. If all scripts have been completed, the author will run and test
this web application

3.6.3 Run and Test on the Loan Application Form

In this section, we will run and test the 'loan' application form.
To run and test it, follow the steps below:
1. First open the browser then enter localhost / login, after that
login as teacher or student

Picture 3.29 Display http://localhost/login

2. If the login is 'siswa' then the user can only add items and return
items. Now the author will try to enter data

Picture 3.30 Display http://localhost/login/siswa/input.php

 23

Picture 3.31 Display http://localhost/login/siswa/index.php

Picture 3.32 Display http://localhost/login/admin/index.php

3. Now we will try to return the data on the student table page by
clicking 'Dikembalikan', the page will be recorded on the
'teacher' admin page and the status will change.

Picture 3.33 Display http://localhost/login/admin/index.php

4. The next step the author will try to edit the data in the admin
view as follows.

Picture 3.34 Display http://localhost/login/admin/edit.php

 24

Picture 3.35 Display http://localhost/login/admin/index.php