IA 05 internet apps forms php http pdf

(1)

Left overs

HTML forms

GET and POST

(2)

The <iframe> tag

• The <frameset> tag is NOT supported in HTML5!

• The <iframe> tag specifies an inline frame

–

An inline frame is used to embed another

document within the current HTML

document

–

<iframe src="http://www.w3schools.com"></iframe>

• Use CSS to style the <iframe> (even to include scrollbars)

<title>iframe test</title> </head>

<body>

src='http://hjoduse.cartodb.com/viz/79b0be82-4b14-11e3-adad-8371673a050e/

embed_map?title=true&description=true&search=false&shareable=false&cartodb_logo=true& layer_selector=true&legends=true&scrollwheel=true&sublayer_options=1&sql=&zoom=2& center_lat=56.26776108757582&center_lon=13.18359375'></iframe>

</body> </html>

(3)

PHP classes and include

• Using classes are rather simple and works as in Java, C#, C++ etc.

• Include your include files (files with shared code) with the include or

include_once statement

<?php

# Include class file or any other php file

include_once "position.php";

# local lat and long

$lat = ''; $lng = '';

# create the position object

$pos = new Position("60.45678", "15.45678");

# if we have public members we can do like this

$lat = $pos->latitude; $lng = $pos->longitude;

# do something with the local variables

$lat = $lat - 0.1; $lng = $lng + 0.1;

# if the members have been private we need a set method

$pos->setPosition($lat, $lng);

# if the members have been private we need get methods

$lat = $pos->getLatitude(); $lng = $pos->getLongitude();

#...

?>

# file position.php

<?php

class Position {

#var string

public $latitude;

public $longitude;

function __construct($latitude="", $longitude=""){

if(!empty($latitude))

$this->latitude($latitude);

if(!empty($longitude))

$this->longitude($longitude); }

public function setPosition($latitude="", $longitude="") {

if(!empty($latitude))

$this->latitude($latitude);

if(!empty($longitude))

$this->longitude($longitude); }

public function getLatitude() {

return $this->latitude; }

public function getLongitude() {

return $this->longitude; }

}

(4)

The local function scope

• Unlike JavaScript and most other program languages global

scope defined variables are not seen inside local functions

<?php

include "utils.php"; $a = 1; // global scope

$b = 2;

/* Global scope variables as the $a and $b variables and similar variables and functions in the included utils.php will be available within the local script file.

However, within user-defined functions a local function scope is introduced.

Any variable used inside a function is by default limited to the local function scope. */

function test() {

echo $a; /* reference to local scope variable */

}

test(); // will not produce any output!

/* In PHP global variables must be declared global inside a function if they are going to be used in that function. Otherwise use the $GLOBALS array or send/return variables to/from the function */

function sum() {

global $a, $b; // equivalent to

$b = $a + $b; // using: $GLOBALS['b'] = $GLOBALS['a'] + $GLOBALS['b']; }

sum();

echo $b; // will output 3

?>

// receiving function parameters function sum($a, $b){

return $a + $b; //returning the result

}

(5)

Debug variables

• Syntax errors

–

A syntax error in a PHP file will normally prevent the entire

program from running,

Parse error: in xyz on line #

–

Usually turned off to prevent clues about the application

• Coding errors

–

Your best friend is the echo statement or functions as

var_dump()

–

Configure server debugging and get it working

• Dumping local variables

# debug example

echo "XYZ = " . $room[1], "<br>";

exit();

<?php

echo "<html>";

echo "<body>"; $rooms[1] = "ABC"; $rooms[2] = "DEF"; $rooms[3] = "GHI";

echo "<pre>"; var_dump($rooms);

echo "</pre>";

echo "</body>";

(6)

HTML Forms 1

• Forms are user interfaces for data input

• Main application - to provide user input for

–

Programs and databases located on a web server

–

Local (client-side) scripts associated with the form

• Server-based scripts/programs may return data to the

client as a web page

• Client-side scripts can read input data

–

To validate the data, prior to sending to server

–

To use in local processing which may output web page content

that is displayed on the client

• Examples

–

Questionnaires to provide feedback on a web site

–

E-commerce, to enter name, address, details of purchase and

credit-card number

(7)

HTML Forms 2

• There are two ways of sending information into a

PHP program

–

One is to use parameters on the URL, and retrieve them

with $_GET in PHP (in the form you set: method=”get”)

• Just as we did earlier with REST (hyperlinks) but the form

create the URL with parameters

–

The other method, which is more powerful and secure is to

use a form with $_POST in PHP (in the form you set:

method=”post”)

• The data goes within the HTTP message body (not visible on

the browsers address field)

• To see (debug) what you send set: method=”get”

• There is a variety of form field types that you can

(8)

HTML Forms 3

• A form consists of

two main

components

–

First, one or more

input fields into

which the visitor

types or clicks the

information you

have requested

–

Second, a "submit"

button which, when

clicked, sends the

contents of the form

to a server-side

(9)

Example form (post)

• Having designed a form, there are 3 more things you need to

do before it's ready for use

–

Ensure that each form object is named properly

–

Add an "action" to the <form> tag which is the server program

that processes the data

–

Write some PHP code to handle the submitted forms

• When the site visitor presses the Submit button, the contents

of the form will be sent to a PHP program as a series of

variables (with values if they are used in the form)

• The names of those variables will be the names that you

have assigned to the objects in the form

<label>Bacon: </label> <input type="checkbox" name="cb_bacon" value="Y" />

<label>Boiled: </label> <input checked type="radio" name="rb_eggs" value="F" />

(10)

The HTTP protocol



TCP/IP based request/response protocol



HTTP requests (known as methods)

–

GET or POST



HTTP response

–

In all cases a

resonse code

–

will be returned



HTTP message

–

Request/response

line

- the http

method/status

–

Header variables

-request metadata

–

Message body

(11)

(12)

GET and POST difference?

• The difference between METHOD="GET" (the default) and

METHOD="POST" is primarily defined in terms of form data encoding.

• The official recommendations say that "GET" should be used if and only if the form processing is idempotent, which typically means a pure query form (we do not change the back end data). Generally it is advisable to do so.

– There are, however, problems related to long URLs and non-ASCII

character repertoires which can make it necessary to use "POST" even for idempotent processing.

• The HTML specifications technically define the difference between "GET" and "POST" so that former means that form data is to be encoded (by a browser) into a URL while the latter means that the form data is to appear within a

message body.

– But the specifications also give the usage recommendation that the

"GET" method should be used when the form processing is "idempotent", and in those cases only.

(13)

Debug globals and server variables

• The $_SERVER

–

Dumps out a tremendous amout of variables

–

To long to list here

• Some useful examples

–

get_defined_vars()

# dump server variables

echo "<pre>";

var_dump($_SERVER);

echo "</pre>";

echo "<pre>";

echo $_SERVER["REQUEST_URI"];

echo "</pre>";

# not alls web servers pass this variable on

if (isset($_SERVER["HTTP_REFERER"])) {

echo "You came from ", $_SERVER["HTTP_REFERER"]; }

# dump global variables # and all other possible # variables the the program # knows about

echo "<pre>";

var_dump(get_defined_vars());

echo "</pre>";

["REQUEST_URI"]=>

(14)

Debug POST form input 1

• Using get_defined_vars() - showing the empty() vs. isset() function

<tr>

<td>Attuck</td>

<td>paulattuck@yahoo.com</td>

<td><input checked type="checkbox"

name="cb_1" value="paulattuck@yahoo.com" /></td>

</tr>

<tr>

<td>James</td>

<td>jamesbond@yahoo.com</td>

<td><input type="checkbox"

name="cb_2" value="jamesbond@yahoo.com" /></td>

</tr>

<tr>

<td>lastname@yahoo.com</td>

<td><input type="checkbox"

name="cb_3" value="lastname@yahoo.com" /></td>

</tr> </table>

(15)

Debug POST form input 2

• Using get_defined_vars() - showing the empty() vs. isset() function

<?php

echo "<pre>";

var_dump(get_defined_vars());

echo "</pre>";

for($i=1; $i <=3; $i++) {

$var = $_POST["cb_{$i}"]; //$var = FALSE;

//$var = 0;

# empty — Determine whether a variable is empty # A variable is considered empty if it does # not exist or if its value equals FALSE // Evaluates to true if $var is empty

if (empty($var)) {

echo 'empty(): $var is either 0, empty, or not set at all <br>';

}

// Evaluates as true if $var is set in any way

if (isset($var)) {

echo 'isset(): $var is set <br>'; }

(16)

Form attributes

(17)

<input> element types

and other UI elements

• _text

• _checkbox

• _{radio (buttons)}

• _{select (element with}

options)

• _{textarea (element)}

• _password

• _{button and button}

(element)

• _submit

• _reset

• _hidden

• _file

(18)

All <input> element types

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

(19)

Input element: type="text"

<form method="post" action="comments.php"> <h2>Tell us what you think</h2>

Name <input name="name" type="text" size="20"><br> Address <input name="address" type="text" size="30"> </form>

• The

_type

attribute specifies the

type of user input

• The

_name

attribute gives an

identifier to the input data

• The

_size

attribute specifies the

length of the input field

• The

_value

attribute specifies an

(20)

Input element: type="checkbox"

How did you hear about this web site?<br> A friend

<input checked type="checkbox" name="cb_1" value="A friend"><br> Search engine

<!– etc ... -->

• Several checkboxes can be

selected

• The

_name

attribute gives an

identifier to the input data

• The

_value

attribute identifies

the value

• If the

_checked

attribute is set

(21)

Input element: type="radio"

How did you hear about this web site?<br> A friend

<input checked type="radio" name="howdid" value="friend"><br> Search engine

<!– etc -->

• Radio buttons are similar to

checkboxes, but only one can

be selected in a set/group

• The

_name

attribute is used to

define a set/group of radio

buttons

• To select a radio button by

default, use the

_checked

(22)

Input element: type="button"

Do you want to receive any further information:<br> <input type="button" name="yes" value="Yes">

• The

_name

attribute uniquely

identifies a button

• The

_value

attribute gives a

label to the button

• Actions can be associated with

buttons - more later when we

deal with client-side javascript

• onclick="JavaScriptCode"

(23)

Input element: type="submit/reset"

<!– etc -->

Thank you<br>

</form>

• _{type="submit"}

– clicking this button sends the

form data to the program (URL)

specified in the

action

attribute of the form

– The enter keyboard key can

send form if form is in focus

• _type="reset"

(24)

Input element: type="image"

<!– will deliver the img_x and img_y for the image -->

• _type="image"

– The image input tag uses an image as an input field.

– The image can be used as a submit button (with some

javascript code to submit the form when clicked) or to

collect data from the image itself (similar to an image

map, but in a form).

– The browser will submit the coordinates where the

user clicked on the image.

(25)

Input element:

type="file/password/hidden"

• _{type="password"}

– similar to

_type="text"

except that the input is

echoed with asterisks (so not visible)

• _type="file"

– provides a file dialogue box to specify a file which can

be sent to the server

• _{type="hidden"}

– similar to text input, but the

_value

attribute is used to

specify data that is to be sent to the server. Nothing

appears on the screen.

(26)

The textarea element

Please write your comments:<br>

<textarea name="comments" rows="5" cols="20"> put text here

</textarea>

• Used for multi-line text input

• Can hold an unlimited number

of characters

• The size of the input area is

specified with the

_cols

and

rows

attributes

• Any text placed inside the

element appears in the input

area (this can be deleted).

(27)

The select/option element

How do you rate this site?<br> <select name="rating">

</select>

• The

_select

element provides a

menu of options

• An option can be selected by

default using the

_selected

attribute (otherwise the first in the

list is initially selected)

●

The optgroup element is similar to

(28)

The button element

Do you want to receive any further information:<br>

<button type="submit" name="button1" value="clicked"> Submit Now<br/>

• The

_button

tag defines a

versatile button element

• Inside a <button> element you can

put content, like text or images

• This is the difference between this element and buttons

created with the <input> element

(29)

The global id attribute

function displayResult() {

document.getElementById("myHeader").innerHTML="Have a nice day!"; }

</script> </head> <body>

<h1 id="myHeader">Hello World!</h1>

<button onclick="displayResult()">Change text</button> </body>

</html>

• All Global HTML attributes

–

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

• The id attribute specifies a unique id for an HTML element (the

value must be unique within the HTML document)

(30)

(31)

breakfast.php

<?php

echo "<link href='style2.css' rel='stylesheet'>"; # in <head>

function checkbox_value($name) {

return (isset($_POST[$name]) ? 1 : 0); }

if(!empty($_POST["tb_name"]))

$name = $_POST["tb_name"]; # Diner's name

else {

echo "Must give Diner's name"; die(); }

$name_san = preg_replace("/[^A-Za-z]/", "", $name);

if(checkbox_value("cb_eggs"))

$cb_eggs = $_POST["cb_eggs"]; # Will be Y if user wants eggs

else

$cb_eggs = "N";

# … omitted for brevity

$eggs_style = $_POST["rb_eggs"]; # Will be F, P or S

echo "<p>"

# … omitted for brevity

if ($cb_eggs == "Y") {

if ($eggs_style == "F") { echo "Fried eggs<br><br>"; }

if ($eggs_style == "P") { echo "Poached eggs<br><br>"; }

if ($eggs_style == "S") { echo "Scrambled eggs<br><br>"; } }

(32)

Populate a form from DB

Here's the code we originally used in form.html to create the menu:

Eggs <input type="checkbox" name="cb_eggs" value="Y" />

Bacon <input type="checkbox" name="cb_bacon" value="Y" />

Sausages <input type="checkbox" name="cb_sausages" value="Y" />

Beans <input type="checkbox" name="cb_beans" value="Y" />

And here's a PHP file version of it, based on an array of items that we have read from the database <?php

for ($i = 0; $i < count($items); $i++) {

echo $items[$i];

echo "<input type='checkbox' name='cb_"; echo $items[$i] . "' value='Y' /> <br />"; }

# The ' is the same as \" and can be used inside strings

echo "<input type=\"checkbox\" name=\"cb_" ;

echo $items[$i] . "\" value=\"Y\" /> <br />"; }

# or as a third and maybe the best option

echo "<input type='checkbox' name='cb_{$items[$i]}' value='Y' /> <br />"; }

?>

For an array called $items[] that contains values of "eggs", "bacon", "sausages" and "beans", this code will produce:

(33)

Retrieving Textarea and

Dropdown Data

• A textarea's content is retrieved in the same way as a textbox

the same goes for the dropdown box etc.

• Use $_POST["ab_xyz"], where ab_xyz is the name of the

textarea, dropdown etc. as defined in the form

• CR (\r) and LF (\n) can be removed with preg_replace()

• Another option that you may find useful is a select with values

– $_POST[] will return 1, 2, 3 or 4 respectively instead of Spring,

Summer, ... which could be an advantage

<option>Spring</option>

<option>Summer</option>

<option>Autumn</option>

<option>Winter</option>

</select> </form>

<option value="1">Spring</option>

<option value="2">Summer</option>

<option value="3">Autumn</option>

(34)

Checkbox arrays

• When you're creating HTML forms, you'll often find yourself creating

a large set of checkboxes. We can use the auto increment feature for

arrays in PHP

• The $rooms array will contain only those checkboxes that were ticked

• If the visitor ticks boxes 2 and 4, the $rooms array will contain 2

elements (numbered 0 and 1) with values 2 and 4 respectively

Room 1 <input type="checkbox" name="rooms[]" value="1" /> <br> Room 2 <input type="checkbox" name="rooms[]" value="2" /> <br> Room 3 <input type="checkbox" name="rooms[]" value="3" /> <br> Room 4 <input type="checkbox" name="rooms[]" value="4" /> <br>

$rooms = $_POST["rooms"]; $room_count = count($rooms);

echo "There were " . $room_count . " rooms chosen.<br>";

echo "The rooms you ticked were:<br>";

echo "<br>";

(35)

Feedback forms

<input type="text" size="40" name="name" style="width: 350px"></td></tr> <tr><td>email address:</td><td>

<input type="text" size="40" name="email" style="width: 350px"></td></tr> <tr><td valign="top">Comments:</td><td>

(36)

Sending the email

<?php

# formtoemail.php, note that you must have a SMTP server on the web server! # $_REQUEST is a merging of $_GET and $_POST where $_POST overrides $_GET

$name = $_REQUEST['name']; $to = "webadmin@example.net";

$subject = "FormToEmail Comments";

# we need some filtering and validation, this is however not present here!

$message = $_REQUEST['comments'];

$headers = "From: " . $_REQUEST['email']; $date = date("D");

$date .= " at ";

$date .= date("H:i");

$message = "Comments from " . $name . ", " . $date . ", " . $message;

# bool mail ( string $to , string $subject , string $message

# [, string $additional_headers [, string $additional_parameters ]] )

$m = mail($to, $subject, $message, $headers); echo "Return code from mail was " . $m;

exit();

?>

# Return code from mail was 1

(37)

Hidden form elements

• Can be used to ”remember” values on the webpage if the page

is reloaded – remember HTTP is a stateless protocol!

–

A better method is to use session variables

• Can also be used to hide values in the form which are sent in

to adjust the running script in some way

• For example to know the time between the HTML form code

was loaded and when it is received in the FormToEmail.php

# creates something like: <input type="hidden" name="timecode" value="12345" />

<?php

$t = time(); # returns the number of seconds since 1970-01-01

echo "<input type='hidden' name='timecode' value='" . $t . "' />";

?>

echo $t . "<br />";

# at response check to see if the form was answered to quickly – spam-proofing <?php

$timecode = $_POST["timecode"];

if($timecode + 5 > time()) # old time + 5 sec vs. current time

exit();

else { response time was not to short ... }

(38)

HTTP request message

• The first line of every HTTP request consists of three items, separated by spaces

– A verb indicating the HTTP method, the requested URL and the HTTP version being used

• Other points of interest in the sample request (many other headers exists) – The Referer header is used to indicate the URL from which the request originated – The User-Agent header is used to provide information about the browser or other

client software that generated the request.

– The Host header specifies the hostname that appeared in the full URL being accessed

– The Cookie header is used to submit additional parameters that the server has issued to the client

– An empty line (\r\n) and an optional message body

GET /auth/488/YourDetails.ashx?uid=129 HTTP/1.1

Accept: application/x-ms-application, image/jpeg, application/xaml+xml,

image/gif, image/pjpeg, application/x-ms-xbap, application/x-shockwaveflash, */* Referer: https://mdsec.net/auth/488/Home.ashx

Accept-Language: en-GB

User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; InfoPath.3; .NET4.0E; FDM; .NET CLR 1.1.4322) Accept-Encoding: gzip, deflate

Host: mdsec.net

Connection: Keep-Alive

(39)

HTTP response message

• The first line of every HTTP response consists of three items, separated by spaces

– The HTTP version being used, a numeric status code indicating the result of the request and a textual “reason phrase” further describing the status of the response • Other points of interest in the sample response (many other headers exists)

– The Server header contains a banner indicating the web server software being used, and sometimes other details

– The Set-Cookie header issues the browser a further cookie; this is submitted back in the Cookieheader of subsequent requests to this server

– The Pragma header instructs the browser not to store the response in its cache

– The Content-Type header indicates that the body of this message contains an HTML document. Almost all HTTP responses contain a message body after the headers – The Content-Length header indicates the length of the message body in bytes – An empty line (\r\n) and an optional message body

HTTP/1.1 200 OK

Date: Tue, 19 Apr 2011 09:23:32 GMT Server: Microsoft-IIS/6.0

X-Powered-By: ASP.NET

Set-Cookie: tracking=tI8rk7joMx44S2Uu85nSWc X-AspNet-Version: 2.0.50727

Cache-Control: no-cache Pragma: no-cache

Expires: Thu, 01 Jan 1970 00:00:00 GMT Content-Type: text/html; charset=utf-8 Content-Length: 1067

(40)

HTTP request methods 1

• HTTP defines methods to indicate the desired action to be performed

on the identified resource (the web server page)

• HEAD

– Asks for the response identical to the one that would correspond to a

GET request, but without the returned response body.

– This is useful for retrieving meta-information written in response

headers, without having to transport the entire content.

• GET

– Requests a representation of the specified resource.

– Requests using GET should only retrieve data and should have no other

effect.

• POST

– Submits data to be processed (e.g., from an HTML form) to the identified

resource.

– The data is included in the body of the request. This may result in the

creation of a new resource or the updates of existing resources or both.

• PUT

(41)

HTTP request methods 2

• DELETE

– Deletes the specified resource.

• TRACE

– Echoes back the received request, so that a client can see what (if any)

changes or additions have been made by intermediate servers.

• OPTIONS

– Returns the HTTP methods that the server supports for specified URL.

This can be used to check the functionality of a web server by requesting '*' instead of a specific resource.

• CONNECT

– Converts the request connection to a transparent TCP/IP tunnel, usually

to facilitate SSL-encrypted communication (HTTPS) through an unencrypted HTTP proxy.

• PATCH

– Is used to apply partial modifications to a resource.

(42)

HTTP cookies

• Cookies are a key part of the HTTP protocol that most web

applications rely on

– The cookie mechanism enables the server to send items of data to the

client, which the client stores and resubmits to the server

– A server issues a cookie using the Set-Cookie response header

– The user’s browser then automatically adds the Cookie header to

subsequent requests back to the same server

• Cookies normally consist of a name/value pair

• Multiple cookies can be issued by using multiple Set-Cookie

headers in the server’s response

• In addition to the cookie’s value, the Set-Cookie header can

include any of the following optional attributes

– expires, domain, path, secure and httponly

• More about cookies later when we deal with JavaScript

(43)

HTTP status codes

• Each HTTP response message must contain a status code in

its first line, indicating the result of the request

• The status codes fall into five groups, according to the code’s

first digit

– 1xx— Informational.

– 2xx— The request was successful.

– 3xx— The client is redirected to a different resource.

– 4xx— The request contains an error of some kind.

– 5xx— The server encountered an error fulfilling the request.

• Some examples

– 100 Continue

– 200 OK, 201 Created

– 301 Moved Permanently

– 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found,

405 Method Not Allowed

(44)

More about forms and HTTP

• A typical form using method post can look like this

• When the user enters values and click the submit button the browser

makes a request like the following

• To control server side processing logic we can use

– The data (username and password)

– The target URL parameter (app)

– The SESS cookie value

– The hidden parameter (redir) value

username: <input type="text" name="username"><br>

password: <input type="password” name="password">

</form>

POST /secure/login.php?app=quotations HTTP/1.1 Host: wahh-app.com

Content-Type: application/x-www-form-urlencoded Content-Length: 39

Cookie: SESS=GTnrpx2ss2tSWSnhXJGyG0LJ47MXRsjcFM6Bd

(45)

Form enctype

• The preceding request contained a header specifying

Content-Type as: application/x-www-form-urlencoded

– This means that parameters are represented in the message body as

name/value pairs in the same way as an URL query string

• The other Content-Type you are likely to encounter is:

multipart/form-data

– An application can request that browsers use multipart encoding by

specifying this the enctype attribute

– With this form of encoding, the Content-Type header in the request also

specifies a random string that is used as a separator for the parameters contained in the request body

• If the form specified multipart encoding, the resulting request

would look like the following

POST /secure/login.php?app=quotations HTTP/1.1 Host: wahh-app.com

Content-Type: multipart/form-data; boundary=---7d71385d0a1a Content-Length: 369

Cookie: SESS=GTnrpx2ss2tSWSnhXJGyG0LJ47MXRsjcFM6Bd ---7d71385d0a1a

Content-Disposition: form-data; name=”username” daf

---7d71385d0a1a

Content-Disposition: form-data; name=”password” foo

---7d71385d0a1a

Content-Disposition: form-data; name=”redir” /secure/home.php

---7d71385d0a1a

Content-Disposition: form-data; name=”submit” login

(46)

(47)

http://fiddler2.com/first-run

(48)

HTTP Secure

• HTTPS is a URI scheme which has identical syntax

to the standard HTTP

• HTTPS signals the browser to use an added encryption layer of

SSL/TLS to protect the traffic

• SSL/TLS is especially suited for HTTP since it can provide some

protection even if only one side (typically the server) of the

communication is authenticated (by the client examining the server's

certificate)

• The main idea of HTTPS is to create a secure channel over an

insecure network

– This ensures reasonable protection from eavesdroppers and

man-in-the-middle attacks, provided that adequate cipher suites are used and that the server certificate is verified and trusted