LIS651 lecture 0

Gathering and showing data

Thomas Krichel

2007-03-18

today

• Introduction to the course• Introduction to PHP• HTML forms• Using form data in PHP

course resources• Course home page is at

http://wotan.liu.edu/home/krichel/courses/lis651n07s

• The course resource page http://wotan.liu.edu/home/krichel/courses/lis651

• The class mailing list https://lists.liu.edu/mailman/listinfo/cwp-lis651-krichel

• Me.

– Send me email. Unless you request privacy, I answer to the class mailing list.

– Skype me at thomaskrichel. Get skype from skype.com.

today• We introduce PHP. Understanding PHP is the

most difficult aspect of the course. • We look at forms filling in to prepare for active

web sites.• We look at how PHP can be used to show the

data that we get from the form. • You should think about what data to get and how

to show it.• Thomas has built a little shop with form and

PHP.

PHP introduction

• PHP is the PHP hypertext processor.• It is a tool that allows for server-side scripting.• It’s predecessor is PHP/IF, Personal Home

Page / Forms Interpreter.• PHP/FI was released by Rasmus Lerdorf in 1995.

It was written in Perl.• PHP/FI version 2. was released in 1997. It was

written in C.• PHP version 5 is the current version.

PHP language

• PHP is an interpreted language.– You write a series of statements.– Apache hands these statements to the PHP interpreter.– The interpreter executes these statements one by one.– When it find an error, it stops running and signals the

error.

• Compiled languages are different. They read the whole program before starting to execute it.

Apache and PHP

• When a file ends in .php, is not simply sent down the http connection like other files.

• Instead, apache sends the file to the PHP processor.

• It sends to the client whatever the PHP processor returns.

• The PHP processor is a model that lives inside Apache.

good old wotan

• Remember we duplicate validated.html when creating a new new file.

• Right-click on validated.html, choose duplicate.• You may be asked to supply your password

again.• You erase the contents of the dialog box that

suggests a new file name and put your new file name in there.

• If it contains PHP code, it has to end in .php.

first PHP script

• Create a file with the name info.php, and the following contents<?php

phpinfo();

?>

• nothing else. This will create a test page that tells you everything PHP knows about. Look at some of the variables.

comment on info.php

• In terms of XML, the “<?php” until “?>” part is called a processing instruction. It is a type of node that we did not encounter in LIS650.

• We can call any part of the file between “<?php” and “?>” a PHP part of the file.

• The XML file here contains just the processing instruction.

output of phpinfo()

• phpinfo() create a whole web page for you, that validates against a loose HTML specification.

• That page contains a lot of technical detail.• The section we may be interested in is “PHP

Variables”. It contains variables that we may be interested in. These are variables that PHP can understand – from its environment– from the client

the magic of PHP

• The client never sees the PHP code. It only sees what the PHP processor has done with the code.

• You can write normal HTML code, and you can switch to writing PHP code pretty much at any stage.

• You can have several PHP parts.• PHP parts can not be nested. • The contents of the PHP part can be called a

PHP script.

statements

• Like a normal text is split into sentences, a PHP script is split into statements.

• A PHP script contains one or more statements.• Each statements tells the interpreter something.• Each statement is ended by a semicolon. • In our first script there is only one statement.• Each statement is ended with a semicolon!• Think of a statement like a rule in CSS. But never

forget the semicolon!

expressions

• The stuff before the semicolon is called an expression.

• You can think of an expression as anything anyone may want to write in a computer program.

• So an expression is just a way to talk about “stuff” in a program in a more edifying way than just calling it “stuff”.

functions

• phpinfo() is a function.• Functions are one of the most fundamental

concepts in computer programming.• A function is an expression that does

something to something else. The “something else” is in the parenthesis. It is called the argument of the function.

• The argument of phpinfo() is empty.

second php script: hello.php

• Normally we write HTML code and then we add PHP parts.

• Take validated.html, copy to hello.php• make the body

<div>

<?php

print("Hello, world!");

?>

</div>

• Validate the resulting XHTML.

comment on hello.php• print() is also a function. print prints its argument.

Here the argument is a string. A string is a sequence of characters enclosed by single or double quotes.

• For print, the () can be omitted.• You could have written three statements

<?php

print "<div>";

print "Hello, world!";

print "</div>";

?>

good style

• Write each statement on a new line.• Add plenty of comments. There are three styles of

comments in a PHP program– // the rest of the line is a comment– # the rest of a line is a comment– /* this is a comment */

• Only last style can be used over several lines. • Do you recognize two of the commenting styles?

another way to write hello.php

<?php

$greeting="Hello, world!";

print "<div>$greeting</div>";

?>

• Here $greeting is a variable. The first statement assigns it the string value "Hello, world!". The second statement prints it out.

• This example is important because it illustrates the concept of a variable.

• The name of the variable is greeting.

Forms• Forms are parts of an HTML document that users

can fill in. They may include buttons, checkboxes, text areas, file selections.

• The thing that users fill in are called the controls of the form.

• Some controls are hidden.• Controls are submitted to PHP in the form of

variables. Each control in the HTML form becomes a variable in PHP. This is seen later.

forms examples

• Here is an example in http://wotan.liu.edu/home/krichel/courses/lis651/examples/forms

• Elements used in forms use a special attribute group that I will call the “form attributes”. I will discuss them now.

form attribute: tabindex=

• Stupid users use the mouse to fill in form. Smart users use the tab character on the keyboard. It is much quicker.

• if you set the tabindex= on a in input, you can set the order. The value of the attribute is a number between 0 and 32767. The input with a lower number will be dealt with before the one with a higher number.

form attribute: readonly=

• If you set readonly="readonly" the control can only be read but not set. This means– It can receive focus but cannot be modified by

the user.– It is included in tabbing navigation.– It is transmitted to the server for processing.

• readonly= is not set by default.

form attribute: disabled=

• If you set disabled="disabled" the control can only be read but not set. This means– it can not receive focus and can not be

modified– it is excluded in tabbing– it is not transmitted to the server for

processing.

• disabled= in not set by default.

<form>• This element encloses a form. • All form elements (discussed now) should be

children of the <form> element.• Technically can be more than one <form> in the

HTML page.• But it does not make much sense to have several

<form>s. • <form> accepts the core and i18n attributes. And

it has some other attributes. Some of these are required.

the action= attribute of <form>

• It has a required action= attribute.– The value of this attribute is the location of a file that

contains the action to execute when the form is submitted.

– In our case, this will be the file name of the PHP script that deals with the form on wotan.

• By default, scripts are executed using return on the browser while a form element has focus, or a special submit button.

method= of <form>• <form> admits a method= attribute. This

attribute determines the http method by which the form is submitted to the script. There are only two realistic choices – method="get“ (default)– method="post"

• When the form is submitted the http request line that follows will have the method GET or POST.

• Validation requires lowercase values.

method="get"

• If you use GET, the form data is transmitted by appending it to the URL of the script. Google's Web search does it that way, for example.

• There is a standard way to write the data in the URL knows as Common Gateway Interface, CGI. It is of no further interest to us.

• Advantage: you can bookmark the form.• Problem: there is a limit of 1024 chars for the

URL, therefore only a limited information can be transmitted in this way.

method="post"

• If you use post, the user agent sends the form as a POST message to the server.

• The data is sent in the body of the http request.• Thus it can be as long as you want.• If you use POST you can set the MIME type of

the data with a special attribute enctype=

more attributes to <form>

• Here are two more attributes I will list for completeness– accept-charset= says what character sets will

be accepted by the form– accept= says what MIME-types can be

accepted

the form control <input/>

• This element creates a control. Usually a form has several <input/>s as well as text that explains the from.

• Note the emptiness of the element.• It admits the core, i18n and the form

attributes.• It requires a type= attribute and a name=

attribute.

the type= attribute of <input/>• This attribute can only take the following values

– ‘text’ enter text– ‘password’ enter text, but don't echo on screen– ‘checkbox’ enter checks on boxes– ‘radio’ check one select– ‘submit’ press to submit form– ‘reset’ reset form– ‘file’ upload file (can only be done with POST)– ‘hidden’ hidden form data, not shown– ‘image’ image map submission, not covered

further– ‘button’ a button

the name= attribute of <input/>

• This give a name to the control that the users are setting.

• The script that is found by the action= attribute will identify the controls by name. Therefore every control should have a different name.

control name and PHP variable• When the form is passed to the PHP script

named with the action= of the the <form> the controls are accessible as PHP variables.

• If name is the name of the control, and if the method is POST, the control is read as the variable $_POST['name'].

• If name is the name of the control, and if the method is GET, the control is read as the variable $_GET['name'].

the size= attribute of <input/>

• It lets you set the size of the input field.• Note that the size of the field may not limit

the input to that size. • When the type is ‘text’ or ‘password’ the

value you give to this field is the number of characters.

• Otherwise it is the number of pixels.

the maxlength= attribute of <input/>

• This sets the maximum length on the value. • Note that this is different from the size of

the input field because there is scrolling.• If you don't specify a maximum length there

is no limit. • But it is good security to have a limit.

the value= attribute of <input/>

• This gives the initial value of the <input/>. • The initial value is shown to the user.• value= is optional but should be given for

the radio and checkbox type.

the checked= attributes of <input/>

• When the input is of type 'radio', setting the checked= attribute to any value will tell the browser what button is initially set. Of course there can only be one of them.

• When the input is of type 'checkbox', setting the checked= attribute to any value will make sure it is checked initially.

the src= attribute of <input/>

• When the input is of type 'image' the src= attribute gives the URL of the image.

• This is for input using image maps.

example• HTML file greet.html has

<form action="greet.php" method="get"><p>

your last name: <input type="text" name="lastname"/></p></form>

• PHP file greet.php has<?php

print "Hello ";

print $_GET['lastname'];

?>

in addition to the usual HTML stuff.

the push button <button>

• This makes a button for decoration.• It takes a type= attribute that can be either be

'button', 'submit' or 'reset'.• It has takes a name= attribute for the name of the

control that it sets.• It takes a value= attribute attribute to set a value.• It also takes the core and i18n attributes. • And it can have character contents!• I am not sure what it is good for.

creating menus

• This is done with <select> element. • Each <select> element can have a number

of <option> elements that contain the options that the user can choose from.

• <select> also takes the core and i18n attributes, and some others that we see now.

attributes to <select>

• name= has the name of the control that is set

• multiple="1" allows and multiple="0" (default) disallow multiple selections. However, I don't know how they are being transmitted. Therefore I suggest you don't use this option.

• size= sets how many rows of the selection should be displayed at any one time.

selectable choice: <option>

• Within a <select> there are a series of <option> elements that contain the selections.

• <option> takes the core, i18n and form attributes. Example

<select name="brewery">

<option>Bruch</option>

<option>Karlsberg</option>

</select>

value= attribute to <option>

• value= can be used to set the value of the control when the value set is different than the contents string of the <option/> element.

• Example

<option value="nyc">New York City</option>

other attribute to <option>

• label= can be set to label the option. if it is set, the user agent should use label rather than the content of the <option> element. At least this is what the spec says. Firefox does not seem to agree. See forms/options.html for a test example.

• selected= can be used to select an option.

<optgroup>• This element has <option> elements as its

children. • It takes the same attributes as <option>.• It is used to create hierarchical options. This

is mainly a time and space-saving device in the presence of many options. Say

<optgroup label="dark">

<option value="b6">Baltika 6</option>

<option value="gu">Guinness"/></option>

</optgroup>

the <textarea/> element• This creates a text area where you can put

a large chunk of text. • It takes some attributes

– name= sets the name of the control that is set.– cols= sets the number of columns in the text

area.– rows= sets the number of rows in the text area.

• <textarea/> also admits the i18n, core and form attributes.

<label>

• This is a way to add labels for inputs. • Normally, the input label should be taken from the

label= attribute of the input.• <label> can be used if the other method can not

be. • It accepts a for= attribute to give the input for

which it is the label is for. Example:• <input name="sex"/><label for="sex">your

sex</label>

summary

• Forms deliver data to the server. The server can then process the data and deliver a response.

• Active effects can also be done client-side. This is done using the <script> element that mostly uses a language called javascript.

homework

• You create a file test_form.html in your space on wotan that has a form. Whatever form you like.

• You write a PHP script that displays the contents of the form, and give it as the action= attribute to the form.

• I will look for the form if you don’t do well on the next quiz and give you a better grade (a so-called form-aided grade), if it works.

for help with the PHP

• Here is one that I made earlier. In the course resource site find examples/forms/list_get.php.html

• Don’t be too worried about the contents of this file.

• You can make this your PHP file that is called by the form if you use GET. Otherwise, replace the ‘GET’ in the file by ‘POST’.

• Create a cut-and-paste copy of it in a file ending with .php.

complete example: shop

• We build a form, that allows people to buy things in a shop.

• The result of the form is the itemized bill, including totals with sales tax!

• When you are done, you can go home or to the pub.

• I advice you not to go to either home or pub until you are done.

master example greet.php<?phpif($_GET['submitted']) { $name=$_GET['name']; print "<div>Hello $name!</div>\n";}else { print "<form action=\"greet.php\" method=\"get\">\n"; print "<div><input type=\"hidden\" name=\"submitted\"

value=\"1\" /></div>\n"; print "<p>Your name <input type=\"text\""; print " name=\"name\" value=\"$name\" />"; print "</p></form>\n";}?>

saar_bier.html, part 1

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

<table>

<tr><td valign="top" rowspan="2"><a href="http://www.grosswald.de">

Grosswald Brauerei</a> (since 1860)</td>

<td>Pilsener</td><td>

<input type="text" name="gw_pils" size="2"/>

</td> <td>@1.56&euro;

<input type="hidden" name="p_gw_pils" value="1.56"/>

saar_bier.html, part 2</td></tr><tr><td>Export</td><td>

<input type="text" name="gw_expo" size="2"/>

</td> <td>@1.34&euro;

<input type="hidden" name="p_gw_expo" value="1.34"/>

</td></tr>

<tr><td valign="top">Brauerei Bruch (since 1702)</td>

<td>Landbier</td><td>

<input name="bruch_land" type="text" size="2"/>

</td> <td>@1.22&euro;

<input type="hidden" name="p_bruch_land" value="1.22"/>

saar_bier.html, part 3

</td></tr>

</table>

<div>

<input type="hidden" name="euro_rate" value="1.22"/>

<input type="submit" value="I order!"/>

</div>

</form>

saar_bier.php, part 1

<?php

$gross_pils=$_POST['gw_pils'];

$p_gross_pils=$_POST['p_gw_pils'];

$t_gross_pils=$p_gross_pils*$gross_pils;

$gross_expo=$_POST['gw_expo'];

$p_gross_expo=$_POST['p_gw_expo'];

$t_gross_expo=$p_gross_expo*$gross_expo;

$bruch_land=$_POST['bruch_land'];

$p_bruch_land=$_POST['p_bruch_land'];

$t_bruch_land=$p_bruch_land*$bruch_land;

saar_bier.php, part 2

// add up the grand total in euros

// note how this statement stretches several lines

$total_euro=$t_gross_pils

+$t_gross_expo

+$t_bruch_land;

// get the euro rate from the form

$euro_rate=$_POST['euro_rate'];

// calculate the total dollars

$total_dollar=$total_euro*$euro_rate;

saar_bier.php, part 3print "<div> You ordered <ul>";

print "<li>$gross_pils bottles of Grosswald Pils,

cost $t_gross_pils</li>";

print "<li>$gross_expo bottles of Grosswald Export,

cost $t_gross_expo</li>";

print "<li>$bruch_land bottles of Bruch Landbock,

cost $t_bruch_land</li></ul>";

print "Your bill is $total_dollar US dollars.<br/>";

print "We ship when we get your check!<br/>";

print "Prosit!</div>";

?> <!-- normal HTML goes on hereafter ... -->

http://openlib.org/home/krichel

Thank you for your attention!

Please switch off computers when you are done!