of 29
8/7/2019 conect mysql
1/29
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 toconnect websites GUI with data from MYSQL database
using PHP also will be discussed.
KS091302
Introduction to Information System
PRACTICAL WORKPRACTICAL WORKPRACTICAL WORKPRACTICAL WORK MATERIALMATERIALMATERIALMATERIAL
INFORMATION SYSTEM DEPARTMENTFACULTY OF INFORMATION TECHNOLOGY
INSTITUT TEKNOLOGI SEPULUH NOPEMBER 2010
Module
04
8/7/2019 conect mysql
2/29
8/7/2019 conect mysql
3/29
KS091302 Introduction To Information System Practical Work Material
1
Ull never know how high you can fly,
unless you scratch out your wings.
Nothing to fear, but the fear its self.
John F. Kennedy
8/7/2019 conect mysql
4/29
KS091302 Introduction To Information System Practical Work Material
2
Prepared ByDiah Rahmah N, Maulana Puji et. al.
Reviewer and EditorAhmad Mukhlason
Feby Artwordini Muqtadiroh
8/7/2019 conect mysql
5/29
KS091302 Introduction To Information System Practical Work Material
3
Table of Contents
1. Practical Work Objectives 42. Managing MYSQL Database 53. Creating GUI using Dreamweaver 94. Making connection between GUI and Database 185. Self Assesment 256. Suggested Links/Resources 267. Bibliography 27
8/7/2019 conect mysql
6/29
KS091302 Introduction To Information System Practical Work Material
4
Practical Work Objectives
The objectives of this practical work is giving practicant with knowledgeand experience of how to manage MYSQL database using phpmyadmin,
creating graphical user interface (GUI) using dreamweaver, and
connect GUI with MYSQL data using PHP.
8/7/2019 conect mysql
7/29
KS091302 Introduction To Information System Practical Work Material
5
Managing MYSQL Database
In developing website, we will be always deals with data in thedatabase. 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 websites
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 anddatabase, 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 beenstarted, if you use xammp server, just activate it. Then open at
8/7/2019 conect mysql
8/29
KS091302 Introduction To Information System Practical Work Material
6
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 thegiven 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.
8/7/2019 conect mysql
9/29
KS091302 Introduction To Information System Practical Work Material
7
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 websites visitors and theircomments. Thus, we will create a new table named psiwith 5 fields (Do
not confuse with term field, field here means column such as in
microsoft excel sheet). Suppose the fields of table psiare: 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 psiwith its five fields:
1. Type table name in the fieldname (in this case is : psi) andnumber of field (in this case is : 5), then click GO button as
shown by Figure 3.
8/7/2019 conect mysql
10/29
KS091302 Introduction To Information System Practical Work Material
8
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 SAVEbutton 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 instructionstarting from step number 1.
4.
To enter the data, just click the respective table name andclick link INSERT.
8/7/2019 conect mysql
11/29
KS091302 Introduction To Information System Practical Work Material
9
Creating Graphical User Interface using MacromediaDreamweaver
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. Thats 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 Viewand 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):
8/7/2019 conect mysql
12/29
KS091302 Introduction To Information System Practical Work Material
10
1. Create a new php file named psi.php. When a newworkspace is opened go to design view in your Dreamweaverworkspace (see Figure 5).
Figure 5 Design view in Dreamweaver
2. In MD, a GUI usually is considered as Form. To create form inMD, Insert tab -> Form -> Form (see Figure 6)
Figure 6 creating a new form
8/7/2019 conect mysql
13/29
KS091302 Introduction To Information System Practical Work Material
11
3. To make a beautiful and nice placement of the form, usingtable 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 thefirst five rows of the most right hand side column. (see Figure
8)
Figure 8 Typing in form
8/7/2019 conect mysql
14/29
KS091302 Introduction To Information System Practical Work Material
12
5. Create text field at row number one and two of columnnumber three by hoosing Insert tab -> Form -> Textfield. (see
Figure 9)
Figure 9 Creating Textfield
6. Insert textfield name. For instance give name nrp and namafor textfiled in the row number one and two respectively. To
do soo, see properties view in bottom side of MD and type therespective textfield name. (see Figure 10)
Figure 10 Inserting textfield name
8/7/2019 conect mysql
15/29
KS091302 Introduction To Information System Practical Work Material
13
7. Create two radiobutton at row number three of third columnby choosing Insert tab -> Form -> Radiobutton (see Figure 11)
Figure 11 Creating Radiobutton
8. Insert the radiobutton name and value. For example, set thename of both radiobutton to jenis and set the value of firstand 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
8/7/2019 conect mysql
16/29
KS091302 Introduction To Information System Practical Work Material
14
9. Create list/menu at row number four of third column bychoosing Insert tab -> Form -> list/menu (see Figure 13).
Figure 13 Creating list/menu
10. Insert list/menu name and value. For example, set list/menuname 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
8/7/2019 conect mysql
17/29
KS091302 Introduction To Information System Practical Work Material
15
11. Create a textarea at row number five of third column bychoosing Insert tab -> Form -> Textarea (see Figure 15)
Figure 15 Creating textarea
12. Set the textarea name to komentar in the propertieswindows 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.
8/7/2019 conect mysql
18/29
KS091302 Introduction To Information System Practical Work Material
16
13. Create two buttons i.e. SAVE button and RESET button bychoosing 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
8/7/2019 conect mysql
19/29
KS091302 Introduction To Information System Practical Work Material
17
15. Save your php file into folder in htdocs directory. For examplewe save psi.php into modul4 folder in htdocs (see figure 19).
Figure 19 saving file into folder in htdocs
8/7/2019 conect mysql
20/29
KS091302 Introduction To Information System Practical Work Material
18
Making Connection between GUI and MYSQLDatabase
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.
Figure 20 connect to database file
This code is to connect to
database with host, user,
and password variables.
8/7/2019 conect mysql
21/29
KS091302 Introduction To Information System Practical Work Material
19
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 . 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 youconfuse 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 wejust created in advance to connect with database
MYSQL.
b. Line 12-22 is setting variable with respective fieldname in the GUI or form.
8/7/2019 conect mysql
22/29
KS091302 Introduction To Information System Practical Work Material
20
c. Line 24-25 is inserting the value of variable that is setup with respective value from GUI/form into
database, it is a little bit concepts in database what itis called Structured Query Language (SQL), and you
can learn SQL from [7].
4. Thats 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. Supposewe 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, JenisKelamin, Status, Komentar for each column respectively (See
Figure 23)
8/7/2019 conect mysql
23/29
KS091302 Introduction To Information System Practical Work Material
21
Figure 23 Typing column name
3. View the code, and modify the second rowi.e. second . Each row in table is encoded by -- . In each
row can consist many fields or columns that encoded by -- . 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 toconnect this page with data from database.
b. Line number 24 is retrieving all data from table psiinthe 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 beadded 1 in each single looping.
e. In Line 26, All data retrieved from table psi is storedin 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.
8/7/2019 conect mysql
24/29
KS091302 Introduction To Information System Practical Work Material
22
Figure 24 Displaying Data in Row and Column of Table
4. Fianally, save this file with the name for exampkeview_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
8/7/2019 conect mysql
25/29
KS091302 Introduction To Information System Practical Work Material
23
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 yourbrowser, 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 clickSAVE 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)
8/7/2019 conect mysql
26/29
KS091302 Introduction To Information System Practical Work Material
24
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 isserver-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
8/7/2019 conect mysql
27/29
KS091302 Introduction To Information System Practical Work Material
25
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 dataof your classmate at your class (using phpmyadmin).
2. Create a new php file to create GUI/Form to enter thebiodata of your classmates using MD.
3. Connect your GUI file with database, and make an actionfile to view the data.
4. Make up your GUI/Form and page to display the datausing 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]
8/7/2019 conect mysql
28/29
KS091302 Introduction To Information System Practical Work Material
26
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
8/7/2019 conect mysql
29/29
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