(PDF) TCC 242/05 Web Database Application

iUNIT 1

Introduction to web development and PHP

TCC 242/05

Web Database Application

Introduction to

Web Development

and PHP

Unit 1

ii WAWASAN OPEN UNIVERSITY

TCC 242/05 Web Database Application

COURSE TEAM

Course Team Coordinator: Mr. Ishan Sudeera Abeywardena

Content Writer: Mr. Tang Chun Chong

Instructional Designer: Mr. Yeap Hock Aun

Academic Member: Mr. Chandarasageran Natarajan

COURSE COORDINATOR

Mr. Ishan Sudeera Abeywardena

EXTERNAL COURSE ASSESSOR

Dr. Sanjay Jasola, Gautam Buddha University

PRODUCTION

In-house Editor: Mr. Yeap Hock Aun

Graphic Designer: Ms. Leong Yin Ling

Wawasan Open University is Malaysia’s first private not-for-profit tertiary institution dedicated to

adult learners. It is funded by the Wawasan Education Foundation, a tax-exempt entity established

by the Malaysian People’s Movement Party (Gerakan) and supported by the Yeap Chor Ee Charitable

and Endowment Trusts, other charities, corporations, members of the public and occasional grants

from the Government of Malaysia.

The course material development of the university is funded by Yeap Chor Ee Charitable and

Endowment Trusts.

BY SA

the terms of the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view

a copy of this license, visit http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to

Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.

This course material was published to support the learning of students registered with

Wawasan Open University. Wawasan Open University does not grant any degree, certification

or credits based solely on your completion of this course material.

Wawasan Open University

Jalan Sultan Ahmad Shah,

10050 Penang.

Tel: (604) 2180333 Fax: (604) 2279214

Email: enquiry@wou.edu.my

Website: www.wou.edu.my

iiiUNIT 1

Introduction to web development and PHP

Contents

Unit 1 Introduction to Web

Development and PHP

Course overview

Unit overview

Unit objectives

1.1 Understanding web development

Objectives

Introduction

Web development  A brief description

Methodologies for web development

Databases on the Web

Suggested answers to activities

1.2 Installing and configuring Apache, MySQL

and PHP

Objectives

Introduction

Installing LAMP

Testing the configurations of Apache, PHP and MySQL

Suggested answers to activities

1

3

5

8

16

20

23

26

35

iv WAWASAN OPEN UNIVERSITY

TCC 242/05 Web Database Application

1.3 Creating basic PHP scripts

Objectives

Introduction

Overview of PHP syntax

Creating your first web page with PHP

Suggested answers to activities

Feedback

Activity 1.1

1. B

2. D

3. blogs

4. Static

5. True

6. • Security

• Scalability

• Search engine optimisation

• Portability

• Maintenance

• Administration

Activity 1.2

1. False

2. True

Activity 1.3

1. When we click on a hyperlink, the web browser requests

information or a resource from a web server. The web server

will then respond to the web browser and deliver the information

or resources that were requested.

21UNIT 1

Introduction to web development and PHP

2. MySQL is open source and free, so you can install and use it

without paying anything. It is fast and powerful when used for

building small- to medium-sized databases. Updates and

feature improvements are frequently added to MySQL.

3. False

22 WAWASAN OPEN UNIVERSITY

TCC 242/05 Web Database Application

23UNIT 1

Introduction to web development and PHP

1.2 Installing and Configuring Apache,

MySQL and PHP

Objectives

By the end of this section, you should be able to:

1. Install and configure the LAMP system under Ubuntu on your computer.

2. Configure the Apache web server to work with PHP.

3. Interact with MySQL using basic SQL queries.

Introduction

This section introduces you to the general techniques for installing the Apache

web server, MySQL and PHP on a Linux (Ubuntu) system. Apache is one of the

most popular web servers and works best on Unix or Linux systems. However, it

works well on the Windows system too. Understanding the techniques to install

and configure a web server is essential to hosting your own web application. The

following installation guide is for the Linux system. For the Windows system,

please refer to the Appendix.

Note: The following guide uses Linux Ubuntu 10.10. You can download Ubuntu

from www.ubuntu.com. It is assumed that you have basic knowledge of installing

and operating Ubuntu. For more information on Ubuntu installation, please

refer to the following web pages:

1. “Ubuntu Documentation  Installation”: https://help.ubuntu.com/

community/Installation

2. “Installing Ubuntu 10.10”: http://news.softpedia.com/news/Installing-

Ubuntu-10-10-160966.shtml

Installing LAMP

Linux (Ubuntu) will be the platform for the Apache, PHP and MySQL components

that you will be installing and using soon. You will be installing LAMP (Linux,

Apache, MySQL and PHP) packages from within Ubuntu. Once you have an

understanding of how to set up LAMP on Ubuntu, you will be able set it up on

other Linux versions as well.

24 WAWASAN OPEN UNIVERSITY

TCC 242/05 Web Database Application

Installation steps

1. Open the terminal window (also known as the command line or console

window). On the Ubuntu desktop, go to Applications > Accessories >

Terminal. You will then see a command-line window like the one shown

in Figure 1.8.

Figure 1.8 Opening a terminal window in Ubuntu

2. Enter the following command in the command-line window:

sudo apt-get install lamp-server^

This is the general command used to install a program and package in the

Ubuntu system. The command sudo means that you will be running the

command with root (administrator) privileges. You will be prompted to

enter a password. Notice the caret (^) symbol at the end of the command.

It is not a typo and must be included.

25UNIT 1

Introduction to web development and PHP

3. Hit the <Enter> key after the command and you will be shown the packages

that need to be installed. Type Y and hit <Enter> to begin the installation.

Figure 1.9 Packages that need to be installed for LAMP

4. The installation begins and you will be prompted to enter a new password

for the MySQL root user (Figure 1.10). Type wawasan as the password

for our purposes. Hit <Enter> to continue. If there is no response or the

on-screen <Ok> button is not highlighted in red, hit the <Tab> key to

move the focus to the <Ok> button.

Figure 1.10 Entering a new password for the MySQL root user

26 WAWASAN OPEN UNIVERSITY

TCC 242/05 Web Database Application

5. You will be asked to confirm the password. Re-type the same password

and the installation will then continue until it is complete.

6. That’s it, the LAMP installation is done! Congratulations! Now you just

need to run some configuration processes and tests to confirm your

installation.

Activity 1.4

1. What is LAMP and why do we want to install it?

2. __________________ is the single line command that will

install the LAMP (Linux, Apache, MySQL and PHP) packages

from Ubuntu.

Testing the configurations of Apache, PHP and MySQL

You can use the following steps to test the configurations of Apache, PHP and

MySQL. You will first test the Apache server.

Apache

1. At this stage, the Apache web server should have been installed on your

computer. Type the following in the terminal to check the version of

Apache that was installed: apache2 -v

Figure 1.11 Checking the version of Apache that was installed

27UNIT 1

Introduction to web development and PHP

2. The version will be displayed. Check if the Apache service is running by

typing service apache2 status.

Figure 1.12 Confirming that the Apache service is running

3. If the service is not running, type the following command to start the

service:

sudo service apache2 start

4. Once you have confirmed that the Apache service is running, you can

test the Apache server by entering http://localhost on the web browser. If

the installation is successful, you will be able to see the default Apache page

that has the “It works!” headline (Figure 1.13). If you cannot see this page,

visit the ‘error.log’ file located in the ‘/var/log/apache2/’ folder to see what

went wrong with your installation.

Figure 1.13 Testing your Apache installation

28 WAWASAN OPEN UNIVERSITY

TCC 242/05 Web Database Application

PHP

1. After confirming that Apache is running, we can then test the PHP

installation. By default, the document root directory for Apache is the

‘/var/www/’ directory. Note that you can change the document root

directory path in the ‘/etc/apache2/sites-available/default’ file under the

“DocumentRoot” section.

2. Let’s retain the default document root directory as ‘/var/www/’ and create a

‘test.php’ file in it. Open the terminal and call up the nano editor by

entering:

sudo nano /var/www/test.php

3. Enter the following PHP code into the new text file:

<?php phpinfo(); ?>

Figure 1.14 Entering PHP code using the nano editor

4. Hit <Ctrl> + <x> to exit the editor. Save the code you entered earlier

by typing Y and hitting <Enter> for the default format option.

5. To ensure that the changes are updated in Apache, restart the Apache

server using the following code on the terminal line:

sudo service apache2 restart

29UNIT 1

Introduction to web development and PHP

6. You can now test the page you created by entering http://localhost/

test.php on a web browser.

You should get the PHP information page shown in Figure 1.15.

Figure 1.15 Viewing PHP information on the Apache server

Web Reference

To learn more about configuring Apache with PHP, please read

the following:

“Ubuntu 10.10  PHP5  Scripting Language” at: https://help.

ubuntu.com/10.10/serverguide/C/php5.html#php5-configuration

30 WAWASAN OPEN UNIVERSITY

TCC 242/05 Web Database Application

MySQL

1. After the installation, you should make sure that the MySQL database is

bound to your localhost IP address. At the terminal, type:

cat /etc/hosts | grep localhost

2. You can also verify the localhost bind address at ‘my.cnf’ of MySQL.

cat /etc/mysql/my.cnf | grep bind-address

Figure 1.16 Verifying that MySQL is bound to your localhost IP address

3. Notice that the bind-address = 127.0.0.1 (Figure 1.16)

4. Check that the MYSQL service is running by typing:

service mysql status

Figure 1.17 Checking that the MySQL service is running

31UNIT 1

Introduction to web development and PHP

5. If the service is not running, type the following command to start the

service:

sudo service mysql start

6. After confirming that the MYSQL service is running, check the databases

in the MySQL version that was installed. Follow the steps below to do this.

7. Type the following to enter the MySQL monitor:

mysql –h localhost –u root –p

8. You will be prompted to enter a password. Enter the password wawasan

that you set earlier.

Figure 1.18 Entering the MySQL monitor

9. You will then be in the MySQL monitor with the “mysql>” prompt showing

on-screen. All commands used here will end with a semicolon “;” or “\g”.

View your pre-installed databases by typing:

show databases;

Do not forget to add the semicolon before you execute your command.

You will then see some pre-installed databases listed. However, you might

not have databases that are identical to those shown in the following figure.

Figure 1.19 The MySQL monitor showing a list of databases

32 WAWASAN OPEN UNIVERSITY

TCC 242/05 Web Database Application

10. You can list all the tables in the database by typing:

a. use mysql to use the ‘mysql’ database.

b. show tables; to list all the tables in the database.

Figure 1.20 The MySQL monitor showing a list of tables

11. Next, you can list the users in your MySQL system. In this case, you

should already have a localhost root user with the password that you

entered. Type:

SELECT User, Host, Password FROM mysql.user;

Note that the password is hashed for security purposes.

Figure 1.21 The MySQL monitor showing a user list

If everything works, you should get the results shown in Figure 1.21.

If so, congratulations, your MySQL installation is fine.

33UNIT 1

Introduction to web development and PHP

Type exit twice to exit the MySQL monitor and terminal. Notice that

you have just used the SQL query language to obtain the user list. The

SQL query that you used was:

SELECT User, Host, Password FROM mysql.user;

The query is an example of the SQL SELECT statement, which is used to

select data from a database. The general syntax of this statement is:

SELECT column_name(s) FROM table_name;

Do not worry about SQL commands for now. We are just giving you

some basic knowledge on how you can interact with MySQL using the

SQL query language. You will go into the details of SQL when you learn

about MySQL in Unit 4.

Web Reference

To learn more about MySQL post-installation procedures, please

visit “Unix Postinstallation Procedures” at:

http://dev.mysql.com/doc/refman/5.1/en/unix-postinstallation.

html

Activity 1.5

1. Once you have confirmed that the Apache service is running,

you can te st the Apache server by entering http://

_______________________ on your web browser.

2. In a PHP content page, you enter the code _____________

______________ to test that PHP is working and to display

information about PHP, Apache and MySQL on your system.

34 WAWASAN OPEN UNIVERSITY

TCC 242/05 Web Database Application

Summary

This section discussed the common techniques for installing

Apache, MySQL and PHP in the Linux system. We have chosen

to install the LAMP packages via a package manager because it is

easier to do so. We are sure that you will be able to do the same

by following the step-by-step guide provided in this section.

We have also prepared a version of the installation guide for the

Windows operating system. For Windows, we will be installing the

components individually so that you will be exposed to different

ways of doing things. If you need to install the packages in

Windows, please refer to the Appendix.

In the next section, we will discuss basic PHP syntax and

language constructs. You will also learn how PHP is embedded in

a web page.

Self-test 1.2

1. In the Linux system, what is the command to check the

Apache 2 service status?

2. You can change the document root directory path of the ‘/etc/

apache2/sites-available/default’ file under the ___________

section.

A. ApacheRoot

B. DefaultDirectory

C. DocumentRoot

D. RootDirectory

3. What is the command to enter the localhost MySQL monitor

with root privileges?

4. All commands used in the MySQL monitor will end with either

a ____________ or ____________.

A. semicolon, \g

B. comma, \g

C. semicolon, \end

D. comma, \end

35UNIT 1

Introduction to web development and PHP

Suggested answers to activities

Feedback

Activity 1.4

1. LAMP is a software bundle consisting of Linux, Apache,

MySQL and PHP. We install LAMP to build an Apache

web server in the Linux operating system. Apache will

host a web database application via PHP, the middle-tier

programming language and MySQL, the database component.

2. sudo apt-get install lamp-server^

Activity 1.5

1. localhost or 127.0.0.1

2. <?php phpinfo(); ?>

36 WAWASAN OPEN UNIVERSITY

TCC 242/05 Web Database Application

37UNIT 1

Introduction to web development and PHP

1.3 Creating Basic PHP Scripts

Objectives

By the end of this section, you should be able to:

1. Describe and use basic PHP syntax and language constructs.

2. Embed PHP code in a web page.

Introduction

PHP, as a server-side scripting language, is intended largely for the Web environment.

PHP has gained quite a following in recent times, and it is one of the forerunners

of the Open-Source Software movement. Its popularity is due to its syntax, which

is similar to that of the C programming language, and its simplicity. Basically,

PHP allows a static web page to become a dynamic one. “PHP” is an acronym

that stands for “Pre-Hypertext Processor”. This means that PHP code is parsed on

a server before it creates HTML. PHP file names end with the “.php” extension.

This extension notifies a web server that PHP code needs to be parsed before

HTML is displayed on a web browser.

Overview of PHP syntax

PHP syntax is relatively straightforward. In this section, you will learn the general

rules and basic syntax of PHP. The following are three basic rules that apply

to PHP:

1. PHP statements are enclosed within the opening tag <?php and closing tag

?>:

<?php PHP code ?>

or

<?php

PHP code

?>

It does not matter if both the tags are on one line or if the second one starts

on a new line. To a server, the code will show up as one continuous line,

regardless of tabs or new lines. It is up to us to arrange the code so that

it is organised and easily understood by people who may want to modify

the code.

38 WAWASAN OPEN UNIVERSITY

TCC 242/05 Web Database Application

2. PHP statements end with a semicolon:

<?php

PHP statement one;

PHP statement two;

?>

3. PHP comments are represented by double slashes // for a single-line

comment or by /* and */ for several lines of comment:

// This is a single-line comment

/*

This is a multiple-

line comment

*/

Comments are used throughout the code to explain the purpose of the

code to people. We encourage you to use as many comments as you

think are necessary, so that other developers can easily understand your

programming.

Note: The following discussion assumes that you have basic knowledge of HTML.

Web Reference

For a tutorial on HTML, please refer to the following website:

“HTML Tutorial”, http://www.w3schools.com/html/default.asp

Creating your first web page with PHP

As you may already know, web pages are actually generated by HTML code. A

HTML document begins with a <html> tag and ends with a </html> tag. A typical

HTML page is shown below:

<html>

<head>

<title> HTML document </title>

</head>

<body>

Content of the page.

</body>

</html>

39UNIT 1

Introduction to web development and PHP

If we save the content above into a file with the extension “.html” (e.g., ‘first.html’),

we can display this page in a web browser like Internet Explorer or Firefox.

Figure 1.22 A web page generated by HTML code

We will be able to see the HTML source code that generated this web page by going

to View > Source in Internet Explorer.

Figure 1.23 The HTML source code of a web page

Notice that every opening tag, such as <head>, will always end with an ending tag

that comes with a forward slash, such as </head>. PHP works in almost the same

way. Every PHP opening tag will also end with an ending tag. The difference is

that PHP code is hidden from web page visitors as PHP is a server-side scripting

language. The only code that the visitors can see is the resulting HTML output.

40 WAWASAN OPEN UNIVERSITY

TCC 242/05 Web Database Application

Let’s start creating our first PHP script by using the echo function to print text

in a web browser. We will reproduce the HTML code that we wrote earlier by

using the PHP echo function. The echo function is used inside the PHP tags.

We also change the content in the title tag to “PHP document” as shown below.

<html>

<head>

<title> PHP document </title>

</head>

<body>

<?php

echo “Content of the page.”;

?>

</body>

</html>

We then save the content above into a file with the “.php” extension (e.g., ‘first.

php’). A web page with the “.html” extension can be displayed from anywhere

on the local disk. But as PHP is a server-side page, the file needs to be placed on

the Apache server that we installed earlier. The location to store the server pages

is ‘/var/www/’ for Linux or ‘C:\Program Files\Apache Software Foundation\

Apache2.2\htdocs’ for Windows. Save the ‘first.php’ file there and display this

page in a web browser by entering localhost/first.php.

Figure 1.24 Web page displayed by embedded PHP code

41UNIT 1

Introduction to web development and PHP

Notice that you get the same result as that of the earlier HTML page except that

the title of the page is now “PHP document”. Access the source code by going to

View > Source on Internet Explorer. You will see HTML code that is nearly

identical to the code that generated the HTML-only web page.

Figure 1.25 HTML source code produced by PHP code

You should notice from looking at the source code that the PHP tags and echo

function are all hidden from web page visitors. They only get to see the resulting

HTML output. This will provide more security and flexibility to your PHP code.

PHP can also be written as a pure PHP program without being enclosed in HTML

tags. Pure PHP code can be used to store business logic such as calculations and a

separate HTML file is then used as the presentation layer. The advantage of doing

this is that the same business logic can be reused for different presentations. You

will learn more about the use of pure PHP code in the following units. An example

is shown below.

<?php

echo “<html>”;

echo “ <head>”;

echo “ <title> Pure PHP document </title>”;

echo “ </head>”;

echo “ <body>”;

echo “ Content of the page.”;

echo “ </body>”;

echo “</html>”;

?>

42 WAWASAN OPEN UNIVERSITY

TCC 242/05 Web Database Application

Figure 1.26 A web page created by pure PHP code

Congratulations, you have just created your very first PHP page.

Activity 1.6

1. “PHP” in the context of the scripting language for web

development is an acronym that stands for “Personal Hypertext

Protocol”. True / False?

2. A single line of PHP code ends with ____________.

A. double slashes (//)

B. an asterisk followed by a slash (*/)

C. the hash key (#)

D. a semicolon (;)

3. A HTML document begins with a ___________ tag and ends

with a __________ tag.

A. <body>, </body>

B. <head>, </head>

C. <html>, </html>

D. <title>, </title>

43UNIT 1

Introduction to web development and PHP

Web Reference

To learn more about basic PHP syntax, please visit:

“PHP Basic Syntax”, http://www.php.net/manual/en/language.

basic-syntax.php

Summary

You should now have some idea of what PHP code looks like

and how PHP can be integrated into HTML code to create

dynamic web pages. To summarise, you should now be familiar

with:

1. PHP basic syntax.

2. The purpose of using comments throughout program code.

3. How PHP, as a server-side scripting language, gives you

flexibility.

4. How to create a HTML web page using a pure PHP program.

In the next unit, you will learn about variables and data types, and

learn how to create functions and control structures. You will also

write a PHP program that contains a function that you will write

yourself.

Self-test 1.3

1. PHP file names end with a .php extension to notify the server

that PHP code needs to be parsed before the HTML web

page is displayed in the user’s web browser. True / False?

2. The more comments you put into your PHP program code,

the more processing time is needed by the web server to

display a web page in a browser. True / False?

44 WAWASAN OPEN UNIVERSITY

TCC 242/05 Web Database Application

3. PHP code is always enclosed within the opening tag _______

and the closing tag ________.

A.

B. <% … %>

C. <? … ?>

D. <?php … ?>

4. PHP comments are represented by _________ for a single-line

comment and by _________ for several lines of comment.

A. <?php and <? … ?>

B. ‘ and ” … “

C. // and

D. // and /* … */

5. The following PHP function is used to print text in a web

browser:

A. write

B. echo

C. println

D. printing

6. Which of the following tags will not be visible in the web page

source code when you go to View > Source on Internet

Explorer?

A. <?php

B. <body>

C. </html>

D. <head>

7. What is the output produced in a web browser by the following

PHP code?

<?php echo “This is TCC242\\05”; ?>

A. This is TCC242\\05

B. This is TCC24205

C. This is TCC242\05

D. “This is TCC242\\05”

45UNIT 1

Introduction to web development and PHP

8. What is the output produced by the following PHP code?

<?php echo “echo”; echo”;”; ?>

A. echo;

B. echo

C. echo”; echo”;

D. ;

9. What is the PHP code that produces the following result in a

web browser?

<?php

A. <?php echo”<?php “; ?>

B. <?php echo”<?php “; ?>

C. <?php echo”\<?php “; ?>

D. <?php echo”<\?php “; ?>

10. What is the PHP code that produces the following result in a

web browser?

18/01/2011 11:41:02

A. <?php echo date(“H:i:s d/m/Y”) ?>

B. <?php echo date(“H:i:s m/d/Y”) ?>

C. <?php echo date(“m/d/Y H:i:s”) ?>

D. <?php echo date(“d/m/Y H:i:s”) ?>

TCC 242/05 Web Database Application

Abstract and Figures