LIS651 lecture 0
Gathering and showing data
• Introduction to the course
• Introduction to PHP
• HTML forms
• Using form data in PHP
• Course home page is at
• The course resource page
• The class mailing list
– Send me email. Unless you request privacy, I answer to
the class mailing list.
– Skype me at thomaskrichel. Get skype from skype.com.
• We introduce PHP. Understanding PHP is the
most difficult aspect of the course.
• We look at forms filling in to prepare for active
• 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 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 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
• 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
• It sends to the client whatever the PHP processor
• The PHP processor is a model that lives inside
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
• 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
• 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
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
– 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
• You can have several PHP parts.
• PHP parts can not be nested.
• The contents of the PHP part can be called a
• 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!
• The stuff before the semicolon is called an
• You can think of an expression as anything
anyone may want to write in a computer
• So an expression is just a way to talk about
“stuff” in a program in a more edifying way
than just calling it “stuff”.
• 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
• Take validated.html, copy to hello.php
• make the body
• 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
• For print, the () can be omitted.
• You could have written three statements
print "Hello, world!";
• 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
• 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 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.
• Here is an example in
• 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
– 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
– it is excluded in tabbing
– it is not transmitted to the server for
• disabled= in not set by default.
• 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
• But it does not make much sense to have several
• <form> accepts the core and i18n attributes. And
it has some other attributes. Some of these are
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
– 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)
• When the form is submitted the http request
line that follows will have the method GET
• Validation requires lowercase values.
• 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.
• 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
– accept-charset= says what character sets will
be accepted by the form
– accept= says what MIME-types can be
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
• It requires a type= attribute and a name=
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
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
• If name is the name of the control, and if the
method is GET, the control is read as the variable
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
• 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.
• HTML file greet.html has
<form action="greet.php" method="get"><p>
your last name: <input type="text"
• PHP file greet.php has
print "Hello ";
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.
• 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
attributes to <select>
• name= has the name of the control that is
• 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
• <option> takes the core, i18n and form
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/>
<option value="nyc">New York
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.
• This element has <option> elements as its
• 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
<option value="b6">Baltika 6</option>
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
– rows= sets the number of rows in the text area.
• <textarea/> also admits the i18n, core and
• 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
• 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
• 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
• 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
• 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
• Don’t be too worried about the contents of this
• 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
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
• I advice you not to go to either home or pub until
you are done.
master example greet.php
print "<div>Hello $name!</div>\n";
print "<form action=\"greet.php\" method=\"get\">\n";
print "<div><input type=\"hidden\" name=\"submitted\"
print "<p>Your name <input type=\"text\"";
print " name=\"name\" value=\"$name\" />";
saar_bier.html, part 1
<form action="saar_bier.php" method="post">
<tr><td valign="top" rowspan="2"><a
Grosswald Brauerei</a> (since 1860)</td>
<input type="text" name="gw_pils" size="2"/>
<input type="hidden" name="p_gw_pils" value="1.56"/>
saar_bier.html, part 2
<input type="text" name="gw_expo" size="2"/>
<input type="hidden" name="p_gw_expo" value="1.34"/>
<tr><td valign="top">Brauerei Bruch (since 1702)</td>
<input name="bruch_land" type="text" size="2"/>
<input type="hidden" name="p_bruch_land" value="1.22"/>
saar_bier.html, part 3
<input type="hidden" name="euro_rate" value="1.22"/>
<input type="submit" value="I order!"/>
saar_bier.php, part 1
saar_bier.php, part 2
// add up the grand total in euros
// note how this statement stretches several lines
// get the euro rate from the form
// calculate the total dollars
saar_bier.php, part 3
print "<div> You ordered <ul>";
print "<li>$gross_pils bottles of Grosswald Pils,
print "<li>$gross_expo bottles of Grosswald Export,
print "<li>$bruch_land bottles of Bruch Landbock,
print "Your bill is $total_dollar US dollars.<br/>";
print "We ship when we get your check!<br/>";
?> <!-- normal HTML goes on hereafter ... -->
Thank you for your attention!
Please switch off computers when
you are done!