C203-P02-WS.docx - Index of

moodusroundoSoftware and s/w Development

Aug 15, 2012 (5 years and 4 months ago)

426 views

C203 Web Applications Develo
pment





Worksheet 0
2

A
Road Trip

A.

Installation and Orientation of XAMP
P


1.

Down
load

and

install XAMPP

from
http://sit.rp.edu.sg/databasemodule/index.htm

(You may skip this step if you already have XAMPP installed in your laptop.)


Start up Apache service in your XAMPP Control Panel.



2.

Type
http://localhost/P02RoadTrip/

in the web browser address bar. What do you see?


3.

Launch roadTrip application


1.

Download
P02RoadTrip
.zip

from LEO.

2.

Save and extract to
C:
\
xampp
\
htdocs
.

3.

Start NetBeans IDE and switch to the Projects window.

4.

Choose File > New
Project. The Choose project

panel opens.

5.

In the Categories list, choose PHP.

6.

In the Projects area, choose PHP Application with Existing Sources and click
Next
.

C203 Web Applications Develo
pment





7.

The New PHP Project > Name and Location panel opens.
In the Project Name text
field, enter t
he name of the project,
P02
RoadTrip
.

8.

In the Sources Folder field, specify the folder
C:
\
xampp
\
htdocs
\

P02RoadTrip
. This
is
where you want to import the source files.

9.

From the Default Encoding dropdown list, choose the default encoding for your
project.

10.

Select “Put NetBeans metadata into a separate directory”.


11.

Click Next. The Run Configuration panels opens.

12.

From the Run As dropdown list, choose Local Web Site.

13.

In the project URL field, check the automatically generated URL address. Make
sure that it is like
http://localhost/P02RoadTrip/


C203 Web Applications Develo
pment




14.

Choose index.php

as the index file.


15.

Click Finish. The IDE creates your PHP
project.


a)

Refresh

the url

http://localhost/P02RoadTrip

in your web browser
. Now,
what do you see?


b)

Explain

the role
of
the
C:
\
XAMPP
\
htdocs

directory
.


4.

XAMPP
combines different software into a package and few of

which are:



Apache



MySQL



PHP



PHPMyAdmin


Which of the component(s) is/are actively involved in
processing

PHP webpage
?

B.

Welcome Message


5.

Type
http://localhos
t/
P02
RoadTrip/enterYourName.php

in the web browser
address bar. Enter your name in the form and submit. What do you see?


6.

Double
-
click
enterYourName.
php

and
welcome.
php

from

the Projects panel on
the left of
NetBeans IDE

to
view the code
.


7.

Look at the HTML code extraction from
enterYour
Name.php

shown below.


C203 Web Applications Develo
pment






Read th
e resources below and describe

the four lines given above.


Resources
:

http://www.w3schools.com/tags/tag_form.asp

http://www.w3schools.com/tags/tag_input.asp


http://www.456bereastreet.com/archive/200508/html_tags_
vs_elements_vs_at
tributes/



8.

Examine the source code of

welcome.php
.

a.

What do you see between the
<body>

tags?


b.

Will the text “Hi user” change to include my name if I submit my name in the
form in
enterYourName.php
? Why?

2.

Say “Hi Linda”

9.

It would be much better if the message
in welcome.php
contains the name of
the user, for example, “Hi Linda”.
How to

include PHP code in HTML code
?

Look
at the example below.


Example of how PHP and HTML can be combined

<html>

<head></head>

<body>


Agent: So who do you think you are, anyhow?

<br />


<?php

// print output

echo
'Neo: I am Neo, but my people call me The
One.'
;

?>


</body>

</html>




C203 Web Applications Develo
pment




C.

Variables

10.

In
welcome.php
, write the PHP code to
store the name “Linda” in a variable
named “
name”
.

a.

How
do you

define and initialize

a variable?

Recall what you have done
for
this in

Java module
.


b.

Use
echo

to print variable “
name”
.


c.

How can we join the string “Hi” and the variable named “name”?


d.

How
do you

retrieve the name submitted

in the form (
enterYourName.php
)
and print it

in the welcome page?


e.

How do you use the echo command to print html tags?


Resource
s
:

http://www.w3schools.com/php/php_post.asp

http://devzone.zend.com/node/view/id/625#Heading5

http://devzone.zend.com/article/625#Heading9



Example of Form Data
Processing

<html>

<head></head>

<body>

<form action="message.php" method="post">

Enter your message:

<input type="text" name="msg" size="30">

<input type="submit" value="Send">

</form>

</body>

</html>

<html>

<head></head>

<body>


<?php

// retrie
ve form data

$input
=
$_POST
[
'msg'
];

// use it

echo
"You said: <i>$input</i>"
;

?>


</body>

</html>

form.php

message.php

D.

Introduction to IF statement

11.

Create a file
ifelse.php

and copy the following code. What is displayed when you
run the file?

<?php

$i

=

1
0
;



if

(
$i%2==0
)

{



echo

$i
.
"

is

even.
"
;


}

else

{



echo

$i
.
"

is

odd.
"
;


}

?>



12.

Create
ifelse2.php

with the following code:

C203 Web Applications Develo
pment





<?php

$color

=

red
;




?>



Add
the
missing
code above to print

“red” if $color is red or “blue” if $color is

blue
.


13.

IF Statement and Form Data Processing


Example of
the use of IF Statement in
Form Data Processing

<html>

<head></head>

<body>

<form action="
result
.php
" method="post">

Enter your message:

<input type="text" name="
name
" size="30">

<select

name=
"
color
"
>


<option value="
red
">
red
</option>


<option value="blue
">
blue
</option>


<option value="
green
">
green
</option>


<option value="black">black
</option>

<
/select>

<input type="radio" name="
pref
" value="yes"
/>
Yes
<br />

<input type="radio" name="
pref
" value="no" />
No

<input type="submit" value="Send">

</form>

</body>

</html>

<html>

<head></head>

<body>


<?php

// retrieve form data

$
name

=
$_POST
[
'
name
'
];

$
color

=
$_POST
[
'
color
'
];

$
displaypic

=
$_POST
[
'
displaypic
'
];


// use it

echo
"You
name is
: <i>$
name
</i>"
;


if

(
$
pref
==
"
yes
"
)

{



echo

"

preference is yes
.
"
;


}

else

{



echo

"

preference is no
.
"
;


}


?>


</body>

</html>

form.php

result
.php

E.

Solving Our Problem

14.

Discuss with your team, what your team would like the final application to look
like (e.g. what should the user see after clicking on the Submit button of the
Road Trip form).


15.

Explain in your own words what the application

should do, i.e. what are the steps
in your application such that you will get the result that you want.


C203 Web Applications Develo
pment





F.

Advanced Task

16.

Display
the

travelling
duration

in your output page
as

hours, minutes and
seconds

instead
.

17.

Display two different things depending
whether the origin and destination states
are the same. If they are different, then display as per normal requirements. If
they are the same, you will only display “The page cannot do the calculation.
Both states are the same.”