KS091302

Introduction to Information System

PRACTICAL WORK MATERIAL

Module

04

This module provides an experience of developing website

from scratch. It begins with managing your MYSQL
database using phpmyadmin that is followed by creating
graphical user interface (GUI) using Dreamweaver. How to
connect website’s GUI with data from MYSQL database
using PHP also will be discussed.

INFORMATION SYSTEM DEPARTMENT

FACULTY OF INFORMATION TECHNOLOGY
INSTITUT TEKNOLOGI SEPULUH NOPEMBER
2010
KS091302 – Introduction To Information System Practical Work Material

U’ll never know how high you can fly,

unless you scratch out your wings.

Nothing to fear, but the fear its self.

—John F. Kennedy

1
KS091302 – Introduction To Information System Practical Work Material

Prepared By
Diah Rahmah N, Maulana Puji et. al.

Reviewer and Editor

Ahmad Mukhlason
Feby Artwordini Muqtadiroh

2
KS091302 – Introduction To Information System Practical Work Material

Table of Contents

1. Practical Work Objectives 4

2. Managing MYSQL Database 5
3. Creating GUI using Dreamweaver 9
4. Making connection between GUI and Database 18
5. Self Assesment 25
6. Suggested Links/Resources 26
7. Bibliography 27

3
KS091302 – Introduction To Information System Practical Work Material

Practical Work Objectives

The objectives of this practical work is giving practicant with knowledge

and experience of how to manage MYSQL database using phpmyadmin,
creating graphical user interface (GUI) using dreamweaver, and
connect GUI with MYSQL data using PHP.

4
KS091302 – Introduction To Information System Practical Work Material

Managing MYSQL Database

In developing website, we will be always deals with data in the

database. Without database, it will be no more than static website. By
using database we can make a very dynamic and interactive website.
For instance if you want to capture and store data of your website’s
visitor you need a database to store it. Even, if you want to restrict your
web page using username and password, you also need to store the
username and password in database.

How to manage your Database?

To be able to manage database for your website, it is not a must to be

mastering in database administration or knowing deeply the concept of
database management system. Rightnow, there are many available
user friendly graphical user interfaces for managing your database. For
instance in this practical work we will use what it is called phpmyadmin
to manage MYSQL database. The term ‘manage’ here means how to
create, edit and delete your database; add, edit and delete the data in
your database. Make sure you do not confuse between data and
database, and database management system(DBMS). Frankly speaking,
MYSQL is a DBMS, a DBMS consits many databases, a database consist
many tables, and a table consists many data.

To access phpmyadmin just go to your website URL and folder in which

your phpmyadmin is installed. For instance if your website is in local
computer, just go to http://localshost/phpmyadmin or if your website
is hosted in http://websi.its-sby.edu/, just go to http://websi.its-
sby.edu/phpmyadmin. The GUI of phpmyadmin is shown by Figure 1.
You can try easily by your self how manage your data and database.

For instance, bellows are step by step instructions how to create a new
database at your DBMS MYSQL:

1. Firstly, make sure your apache, mysql, and PHP has been
started, if you use xammp server, just activate it. Then open at

5
KS091302 – Introduction To Information System Practical Work Material

your lovely browser e.g. Mozilla Firefox, Internet explorer this

URL: http://localhost/phpmyadmin as shown by Figure 1.

Figure 1 Phpmyadmin GUI

2. To create a new database, just type the database name in the

given fieldname bellow Create New Database form (see
Figure 2). For example we will create database named
php_psi. Finally, just click Create button to make sure your
database will be created in seconds.

6
KS091302 – Introduction To Information System Practical Work Material

Figure 2. Creating new database

After we successfully create new database, now we need to create

table to store the data. Such as priorly stated, a database consists
many tables, and a table consists many data. For instance we will
create a table to store the data of our website’s visitors and their
comments. Thus, we will create a new table named psi with 5 fields (Do
not confuse with term field, field here means column such as in
microsoft excel sheet). Suppose the fields of table psi are: nrp, nama,
jenis_kelamin, status, komentar. Each field can have different type
such as integer, char, varchar, text, etc, it is just like varible type in Java
Programming.

Bellows are step by step how to create table psi with its five fields:

1. Type table name in the fieldname (in this case is : psi) and
number of field (in this case is : 5), then click GO button as
shown by Figure 3.

7
KS091302 – Introduction To Information System Practical Work Material

Figure 3 creating new table

2. Next step is entering each field name and its respective type (
in this case all fields are varchar) as shown by Figure 4. Finally,
just click SAVE button to make sure the table will be created in
seconds.

Figure 4 Creating new field/s

3. To make another new table, follow the same instruction

starting from step number 1.
4. To enter the data, just click the respective table name and
click link INSERT.

8
KS091302 – Introduction To Information System Practical Work Material

Creating Graphical User Interface using Macromedia

Dreamweaver

Definitely, to be interactive website must deal with our visitors or

users. To do so, we must create what it is called Graphical User
Interface (GUI). GUI can be any form field such as username and
password field, text area, button, check box, etc. in which by using this
GUI users or visitors can interact with your website. Imagine how you
interacted with facebook when updating your status, entering
comments, or uploading phothos. That’s all what called GUI.

How to Create GUI?

Actually, to create GUI you must understand and familiar with HTML
(hypertext markup language). All web documents are written in HTML
format. To make sure that each web document is written in HTML,
open any URL at your Mozila browser then click menu View and Page
Source or just use shortcut Ctrl + U. You will see the HTML code of the
respective web page. To learn about HML you can refer to [1].

Absolutely, it will be tedious work if you create GUI using HTML code
from stracth. Fortunately, rightnow there are many HTML editors that
easily help you to create GUI. The most common used HTML or Web
editor is Editplus [2], Macromadia Dreamweaver [3], and Microsoft
Frontpage [4].

In this practical work, Macromadia Dreamweaver is used. There are

many versions of Macromadia Dreamwevaer (MD) such as MD 8.0, MD
MX, MD CS3, etc. The latest version of MD can be downloaded [3] or it
is higly recommended to install the portable version one that can be
downloaded from [5].

Suppose we will create a GUI for capturing our web visitor comments,
bellows are step by step instructions how to make it (Make sure you
have installed Macromadia Dreamweaver at your computer, and open
it):

9
KS091302 – Introduction To Information System Practical Work Material

1. Create a new php file named “psi.php”. When a new

workspace is opened go to design view in your Dreamweaver
workspace (see Figure 5).

Figure 5 Design view in Dreamweaver

2. In MD, a GUI usually is considered as Form. To create form in

MD, Insert tab -> Form -> Form (see Figure 6)

Figure 6 creating a new form

10
KS091302 – Introduction To Information System Practical Work Material

3. To make a beautiful and nice placement of the form, using

table is very useful. To create table, Choose Insert tab -> Table,
enter for instance number of row = 7, columns = 3, border = 0.
Make sure the table is inside Form (see Figure 7)

Figure 7 Creating table

4. Type NRP, nama, jenis_kelamin, status, and komentar in the

first five rows of the most right hand side column. (see Figure
8)

Figure 8 Typing in form

11
KS091302 – Introduction To Information System Practical Work Material

5. Create text field at row number one and two of column

number three by hoosing Insert tab -> Form -> Textfield. (see
Figure 9)

Figure 9 Creating Textfield

6. Insert textfield name. For instance give name nrp and nama
for textfiled in the row number one and two respectively. To
do soo, see properties view in bottom side of MD and type the
respective textfield name. (see Figure 10)

Figure 10 Inserting textfield name

12
KS091302 – Introduction To Information System Practical Work Material

7. Create two radiobutton at row number three of third column

by choosing Insert tab -> Form -> Radiobutton (see Figure 11)

Figure 11 Creating Radiobutton

8. Insert the radiobutton name and value. For example, set the
name of both radiobutton to “jenis” and set the value of first
and second radio button to “laki-laki” and “perempuan”
respectively. To do so, see properties view in bottom side of
MD and type the respective radiobutton name and value. (see
Figure 12)

Figure 12 Inserting radiobutton name and value

13
KS091302 – Introduction To Information System Practical Work Material

9. Create list/menu at row number four of third column by

choosing Insert tab -> Form -> list/menu (see Figure 13).

Figure 13 Creating list/menu

10. Insert list/menu name and value. For example, set list/menu
name to “status” and set the values to “pelajar, mahasiswa,
bekerja” in properties window view at the bottom side of
MD.(see Figure 14).

Figure 14 Inserting list/menu name and value/s

14
KS091302 – Introduction To Information System Practical Work Material

11. Create a textarea at row number five of third column by

choosing Insert tab -> Form -> Textarea (see Figure 15)

Figure 15 Creating textarea

12. Set the textarea name to “komentar” in the properties

windows view at the bottom side of MD worspace. Set char
width to “30” and num lines to “5” (see Figure 16).

Figure 16 Inserting textarea name, char width, num lines.

15
KS091302 – Introduction To Information System Practical Work Material

13. Create two buttons i.e. SAVE button and RESET button by
choosing Insert tab -> Form -> Button. (see Figure 17)

Figure 17 Creating button

14. Set button name, value, and action with: “simpan”, “simpan”,
SUBMIT and “batal”, “batal”, RESET for first and second button
respectively in properties window at the bottom of workspace
(see Figure 18)

Figure 18 Inserting button name and type

16
KS091302 – Introduction To Information System Practical Work Material

15. Save your php file into folder in htdocs directory. For example
we save “psi.php” into modul4 folder in htdocs (see figure 19).

Figure 19 saving file into folder in htdocs

17
KS091302 – Introduction To Information System Practical Work Material

Making Connection between GUI and MYSQL

Database

After creating the database followed by creating the GUI, now how
to connect the GUI with the database and its vise versa? Suppose
visitor enter comment via the given GUI, then how to save this
comment into database and display back at your website?

To do so, we must deal with Programming language such as PHP,

ASP, and JSP. But, actually it is not big deal. To show you how to
make it, bellows are step by step instruction how to connect you
web GUI or Form to MYSQL database using PHP.

1. Create a new PHP file, for instance name it as “connect.php”.

The code is shown by Figure 20. Place this file in the same
folder with your psi.php file.

This code is to connect to

database with host, user,
and password variables.

Figure 20 connect to database file

18
KS091302 – Introduction To Information System Practical Work Material

The most important line of this file is:

$conn=mysql_connect(X,Y,Z) or die (V)

mysql_select_db(D)

You must change X with the host name of your database, usually is
localhost, Y is the username of database (remember when you
firstly install it) the default is root, Z is the password of respective
username of database, and V is message that will be displayed
when it is failed to connect with database. D is the database name.

2. Reopen your psi.php file in which your GUI or form is created.

You must add the code shown by figure 21 in your psi.php file
directly after code <body>. This PHP code will be executed
when SIMPAN button is clicked.

Figure 21 Code: Inserting data into db

3. Make sure you have been familiar with this code, if you
confuse with this code you can refer to [6]. Concisely this PHP
code can be explained as bellows:
a. Line 9, it calls file named connect.php, the file that we
just created in advance to connect with database
MYSQL.
b. Line 12-22 is setting variable with respective field
name in the GUI or form.

19
KS091302 – Introduction To Information System Practical Work Material

c. Line 24-25 is inserting the value of variable that is set

up with respective value from GUI/form into
database, it is a little bit concepts in database what it
is called Structured Query Language (SQL), and you
can learn SQL from [7].
4. That’s all steps to insert data from GUI into your database.

Now, what about if the case is its vise versa. How to display
the data from the database to your web page or to your GUI?

Bellows are step by step instructions on how to make it:

1. First of all, we need to create a table to display data. Suppose

we create table with 2 rows and 6 columns (border: 1) by
choosing Insert - Table. (See Figure 22)

Figure 22 Creating table

2. Insert each column name, suppose: No, NRP, Nama, Jenis

Kelamin, Status, Komentar for each column respectively (See
Figure 23)

20
KS091302 – Introduction To Information System Practical Work Material

Figure 23 Typing column name

3. View the code, and modify the second rowi.e. second <tr>
</tr>. Each row in table is encoded by <tr> -- </tr>. In each
row can consist many fields or columns that encoded by <td> -
- </td>. Make sure your code is as shown by Figure 24.
Concisely, this code can be explained as bellows:
a. Line number 23 is including file connect.php to
connect this page with data from database.
b. Line number 24 is retrieving all data from table psi in
the database. It is SQL code, and * means retrieve all
columns in the table, if you want to retrieve some
column only, specify the column name such as: select
nrp, name from psi.
c. Line number 26 until 37 is retrieving data from table
psi one row by one row. Each row in table psi in
database is displayed in each row in this web page.
d. Variable $no here is incremental variable that will be
added 1 in each single looping.
e. In Line 26, All data retrieved from table psi is stored
in variable $baris. $baris is an array variable with
index 0, 1, 3 and so far that representing column
number 1, 2, 3 and so far respectively.

21
KS091302 – Introduction To Information System Practical Work Material

Figure 24 Displaying Data in Row and Column of Table

4. Fianally, save this file with the name for exampke

“view_psi.php”, same with action file in the file psi.php (see
Figure 25). Line 26 means file view_psi.php will be executed
wen this file (psi.php) is refreshed or any submit button is
clicked.

Figure 25 Saving file same with action file

22
KS091302 – Introduction To Information System Practical Work Material

To make sure that your GUI now is connected with your data
in database MYSQL, follow bellows scenarios:

1. Open your file in which your GUI/form is created using your

browser, for example: http://localhost/modul4/psi.php(See
figure 26)

Figure 26 View psi.php

2. Just key in your data into respectictive form field. Then click
SAVE button. Make sure your code is free from error, if so,
make sure the data that you key in in the from is inserted in
the respective table in seconds. You can check it by opening
the respective table using phpmyadmin.(See Figure 27)

23
KS091302 – Introduction To Information System Practical Work Material

Figure 27 Inserting Data

Sometime, you want to make restriction such as: all fields can
not be empty, all NRP field must be started by 52 and so forth.
You can do so by using what it is called client-side web
programming language i.e. Java Script (Not JAVA), or
Asynchronous JavaScript and XML (AJAX) (Remember: PHP is
server-side web programming language). If you interest learn
javascript you can refer to [8]. If you want to make your
website more attractive and multi processing in the same page
such as in Facebook you can learn AJAX technology. Resource
from [9] and [10] is a good recommendation for you.

Another way to make sure that your data has been inserted in
database is by open view_psi.php file at your browser that will
be executed automatically after clicking SAVE button as shown
by Figure 28.

Figure 28 Viewing the Data

24
KS091302 – Introduction To Information System Practical Work Material

Self Assesment

To make sure you understand well this module, you must

conduct the following activity:
Suppose you want to manage the biodata of your classmate in
your class.

1. Create a new database, a table to store, to store bio data

of your classmate at your class (using phpmyadmin).
2. Create a new php file to create GUI/Form to enter the
biodata of your classmates using MD.
3. Connect your GUI file with database, and make an action
file to view the data.
4. Make up your GUI/Form and page to display the data
using Cascading Style Sheet (CSS). CSS will make your GUI
to be more attractive and nice. You can learn how to
create CSS File and add it into your web page using
dreamweaver by learning resource from [11]. Further
resource about CSS you can get from [12], [13]

25
KS091302 – Introduction To Information System Practical Work Material

Suggested Links / Resources

[1] http://www.master.web.id/mwmag/issue/08/content/tutorial-
dreamweaver-1/tutorial-dreamweaver-1.html
[2] http://www.ilmugrafis.com/dreamweaver.php
[3] http://www.klik-kanan.com/desainweb/dream/index.shtml
[4]http://www.entheosweb.com/website_design/css_styles_tutorial.as
p
[5] http://achmatim.net/2008/12/22/dreamweaver-php-dan-mysql-
untuk-aplikasi-data-mahasiswa/
[6] http://prothelon.com/mambo/home/
[7] fach-az.co.cc/images/stories/Artikel/TUTORIAL_WEBDESIGN_2.pdf

26
KS091302 – Introduction To Information System Practical Work Material

BIBLIOGRAPHY

[1] http://w3schools.com/html/default.asp
[2] http://www.editplus.com/
[3] http://www.adobe.com/products/dreamweaver/
[4] http://office.microsoft.com/en-us/frontpage/default.aspx
[5]http://www.dl4all.com/software/5038-portable-adobe-
dreamweaver-cs3-9.0.html
[6] http://w3schools.com/php/default.asp
[7] http://w3schools.com/sql/default.asp
[8] http://w3schools.com/js/default.asp
[9]http://speechyourm1nd.blogspot.com/2009/09/panduan-belajar-
ajax-bagi-pemula.html
[10] http://w3schools.com/ajax/default.asp
[11]http://www.tutorialized.com/tutorials/Dreamweaver/CSS/1
[12] http://www.w3schools.com/css/
[13] http://www.csstutorial.net/
[14] [7] fach-
az.co.cc/images/stories/Artikel/TUTORIAL_WEBDESIGN_2.pdf

27