conect mysql

download conect mysql

of 29

Transcript of conect mysql

  • 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