Simple PHP application

A simple application

• We are going to develop a simple PHP application with a Web interface.

• The user enters two numbers and the application returns the two multiplied to together

• Start

UML Interaction Diagram

• Interaction diagrams describe the communication between objects, but we will use them to describe interation between programs even if they are not objects

• Simple interaction diagram

• Simple example and explanation

• Ref to UML

User-script interactionBrowser

Web server

get multiply.php?x=5&y=6

Locate file and run as PHP

multiply.phpPHP processor

run script“5 * 6 = 30”

5 * 6 = 30 HTMLMIME

User

Enter data

Read output

get form.htmClick link

Locate file

Calculate button

x=5 y=6

Display form.htm

Display generated HTML

page

User-browser interactionBrowserUser

Enter data

Read output

Click link

Calculate buttonDisplay form.htm

Display generated HTML

page

User – Browser interaction

• User locates desired link<a href=form.htm> Multiply numbers</a>

• Browser retrieves the form from the server• Form is displayed• User fills in the fields on the form• User clicks submit button• Magic stuff happens • User reads the result and goes back to the form

to change the values in the form

form.htm

<!-- this is not XHTML standard because it lacks headers but it does have all attribute values in quotes and all tags

are terminated--><form method="get" action="multiply.php">x = <input type=text name="x" size="5"/>y = <input type=text name="y" size="5"/><input type="submit" value="Calculate"/></form>

Browser-Server interactionBrowser

Web server

get multiply.php?x=5&y=6

Locate file and run as PHP

5 * 6 = 30

Click button

Browser-Server interaction

• Parameters passed as data couplets (name/value pairs) either– Attached to URL (and visible to user in the address line)

• Values must be URL-Encoded – space to +– punctuation to %hex e.g. ? to %3f

• METHOD=GET in an HTML Form– appended to the ACTION URL

• Explicitly added to the base URL e.g.– <a href=“multiply.php?x=5&y=6”>5 * 6</a>

– A separate document (invisible to user)• METHOD=POST in an HTML Form

• Result passed back in a MIME wrapper – MIME tells browser what kind of file it is (HTML,JPEG, XML,

Flash.. )• Content-type: image/jpeg

Server-script interactionWeb server

get multiply.php?x=5&y=6

Locate file and run as PHP

multiply.php

run script“5 * 6 = 30”

x=5 y=6

User-script interactionBrowser

Web server

get multiply.php?x=5&y=6

Locate file and run as PHP

multiply.phpPHP processor

run script“5 * 6 = 30”

5 * 6 = 30 HTMLMIME

User

Enter data

Read output

get form.htmClick link

Locate file

Calculate button

x=5 y=6

Display form.htm

Display generated HTML

page

form.htm

<!-- this is not XHTML standard because it lacks headers but it does have all attribute values in quotes and all tags

are terminated--><form method="get" action="multiply.php">x = <input type=text name="x" size="5"/>y = <input type=text name="y" size="5"/><input type="submit" value="Calculate"/></form>

Browser-Server interactionBrowser

Web server

get multiply.php?x=5&y=6

Locate file and run as PHP

5 * 6 = 30 HTMLMIME

Click button

URL

• Relative URL– multiply.php?x=5&y=6

• Absolute URL– http://localhost:8080/calc/multiply.php?x=5&y=6 (my

local server)– http://stocks.uwe.ac.uk/~cjwallac/apps/calc/

multiply.php?x=5&y=6 (the development server)

– http://www.uwe.ac.uk/~cjwallac/apps/calc/multiply.php?x=5&y=6 (the public production server)

Server-script interactionWeb server

get multiply.php?x=5&y=6

Locate file and run as PHP

multiply.phpPHP processor

run script“5 * 6 = 30”

x=5 y=6

Server-PHP interaction • Parameters

– GET and POST Parameters available as• variables of the same name $x, $y (deprecated but used in my code )• in an array $_GET[‘x’]• depends on the setup

– Parameter values are URL-Decoded• Implicit Parameters

– In addition to the user-defined parameters, other data is available about the client and about the server

– $PHP_SELF is the program name– $HTTP_USER_AGENT is the browser

• Reply – HTML goes through to output– <?php … ?> script is executed as PHP

• Print or echo statements add to output– All output returned to Server– Other kinds of output (JPEG, GIF.. ) require different headers to be

output

Multiply.php script<?php/* function: to multiply the two input numbers and display the result input: x, y : numbers author: Chris Wallace 9 Oct 204*/// calculate the result// no typing or declaring new variable// also implicit conversion of string to number $prod = $x * $y;// values of variables interpolated into the string print "$x * $y = $prod"; ?>

The generated HTML

• 5 * 6 = 30• This simple text is not XHTML compliant of

course. • HTML to provide a readable page can be added

around the PHP• <a href=multiply2.php?x=5&y=6>5 * 6</a>• Note that we have added the name/value pairs

to the URL – not very useful here obviously. • some pairs can be in the action URL of a form,

some in input fields• The script multiply2.php includes the original

PHP script within an HTML page

Multiply2.phpProgram composition with ‘require’

<html><title>PHP introduction - multiply script</title></head><body><img src="cems-banner.gif"><h1>PHP introduction</h1><table><tr><td><img src="multiply.jpg"></td><td

width="5%"</td><td><font color="red" size="+4"><?php include "multiply.php“; ?></font></td><tr></table></body></html>

‘Sticky Forms’

• Poor interface -user must to go back to original form to change the data and re-calculate.

• Key idea:– Combine form and calculator into one script– Do calculation (if required) first– Put inputs as defaults in form

• Simple combination of form and script– <a href=multiply3.php> Calculate Product </a>

multiply3.phpCombined form and calculator

<?php// first compute the output, but only if data has been input if( isset($calc)) { // data was submitted $prod = $x * $y; } else { // set defaults $x=0;$y=0;$prod=0; }?><form method="get" action="<?php print $PHP_SELF; ?>">x = <input type=text name="x" size="5" value="<?php print $x?>"/>y= <input type=text name="y" size="5" value="<?php print $y?>"/>x * y = <?php print $prod ?><br/><input type="submit" name="calc" value="Calculate"/></form>

Initial Form

<form method="get" action=“scripts/multiply3.php">x = <input type=text name="x" size="5" value="0"/>y= <input type=text name="y" size="5" value="0"/>x * y = 0<br/><input type="submit" name="calc"

value="Calculate"/></form>

Form with Entered Values

<form method="get" action=“scripts/multiply3.php">x = <input type=text name="x" size="5" value="654321"/>y= <input type=text name="y" size="5" value="9"/>x * y = 5888889<br/><input type="submit" name="calc"

value="Calculate"/></form>

Forms processing

• Interface and presentation can be easily improved– <a href=multiply4.php> Calculate Product </a>

• Script can do validation and add error messages to the form where fields are missing or invalid.

• Where to do the processing?:– on Client in Javascript – on Server in PHP or Java

• What factors do you need to consider to decide?

SMS version

• Now nearly the same application with an SMS presentation layer.

• For variety, I’ve generalised to allow any number of numbers to be multiplied together

• Text– MUL num1 num2 num3 …– To:

076 24 80 37 59

• Eg.– MUL 34 56 78

• Reply– 34 x 56 x 78 = 148512

SMS to script interface• Script ‘plugs’ into SMS server• Must obey the protocol:

– Parameters• Text• From• Code

– Reply text:• Reply: <message to send back>

• Entry required in routing file:– MUL

http://www.cems.uwe.ac.uk/~cjwallac/ISD3/smsmult.php

smsmult.php

<?php $text=trim($text); // to remove trailing whitespace $nums = split(" +",$text); // split the string apart on spaces // + means 1 or more occurances $prod=1; foreach ($nums as $number){ $prod=$prod*$number; // accumulate the product } $numlist = join(" x ",$nums); // join the numbers with ' x ' print "Reply: $numlist = $prod"; ?>