LIS651 lecture 0 Gathering and showing data

1
LIS651 lecture 0Gathering and showing data

• Thomas Krichel
• 2005-10-23

2
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.

3
PHP introduction

• PHP is the PHP hypertext processor.
• It is a tool that allows for server-side
  scripting.
• It 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.

4
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.

5
first PHP script

• Create a file with the name info.php, and the
  following contents
• lt?php
• phpinfo()
• ?gt
• nothing else. This will create a test page that
  tells you everything PHP knows about. Look at
  some of the variables.

6
comment on info.php

• If a file has the ending .php, Apache does not
  show the file to the client as is. The client
  never sees the PHP code.
• Instead Apache calls another program, the PHP
  processor. When it finds "lt?php", it starts to
  interpret the content of the file. It does
  special things with it, until it encounters "?gt".
• The rest of the file is transmitted as such.

7
statements

• A PHP program 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!
• Never forget the semicolon!

8
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 this is just a way to talk about "stuff" in a
  program in a more edifying way than just calling
  it "stuff".

9
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.
• phpinfo() is a function. Its argument is empty.

10
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.

11
second php script hello.php

• Normally we write HTML code and then we add bits
  and pieces of PHP inside.
• Take validated.html, copy to hello.php
• make the body
• ltdivgt
• lt?php
• print("hello world")
• ?gt
• lt/divgt
• Validate the resulting XHTML.

12
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
• lt?php
• print "ltdivgt"
• print "Hello, world!"
• print "lt/divgt"
• ?gt

13
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 /
• The last style can be used over several lines. It
  is familiar from CSS.

14
another way to write hello.php

• lt?php
• greeting"Hello, world!"
• print "ltdivgtgreetinglt/divgt"
• ?gt
• Here greeting is a variable. The first statement
  assigns it the string value "Hello, word!". 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.

15
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.

16
forms examples

• Here is an example in http//wotan.liu.edu/home/kr
  ichel/lis651/examples/
• forms
• Elements used in forms use a special attribute
  group that I will call the "form attributes". I
  will discuss them now.

17
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.

18
form attribute readonly

• If you set readonly"1" the control can only be
  read but not set. readonly"0" is the default, it
  means that the control can be set.
• If an input is, i.e. if readonly"1" it 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.

19
form attribute disabled

• If you set disabled"1" the control can only be
  read but not set. disabled"0" is the default, it
  means that the control can be set.
• if an input is disabled"1"
• it can not receive focus and can not be modified
• it is excluded in tabbing
• it is not transmitted to the server for
  processing.

20
ltformgt

• This element encloses a form.
• It accepts the core and i18n attributes.
• 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 or a special submit button.

21
method of ltformgt

• ltformgt 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"
• method"POST"
• When the form is submitted the http request line
  that follows will have the method GET or POST.

22
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.
• 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.

23
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
  exchange.
• 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

24
more attributes to ltformgt

• 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.

25
the form control ltinput/gt

• This element creates a control. Usually a form
  has several ltinput/gts as well as text that
  explains the from.
• Note the emptiness of the element.
• It admits the core, i18n and the form attributes.

26
the type attribute of ltinput/gt

• 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

27
the name attribute of ltinput/gt

• 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.

28
control name and PHP variable

• When the form is passed to the PHP script named
  with the action attribute 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'.

29
the size attribute of ltinput/gt

• It lets you set the initial size of the input
  field.
• 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.

30
the maxlength attribute of ltinput/gt

• 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.

31
the value attribute of ltinput/gt

• This gives the initial value of the ltinput/gt.
• The initial value is shown to the user.
• value is optional but should be given for the
  radio and checkbox type.

32
other attributes of ltinput/gt

• 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.
• When the input is of type 'image' the src
  attribute gives the URL of the image. This is for
  input using image maps.

33
example

• HTML file greet.html has
• ltform action"greet.php" methodGET"gtltpgt
• your last name ltinput type"text"
  name"lastname"/gtlt/pgtlt/formgt
• PHP file greet.php has
• lt?php
• print "Hello "
• print _GET'lastname'
• ?gt

34
the push button ltbuttongt

• 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.

35
creating menus

• This is done with ltselectgt element.
• Each ltselectgt element can have a number of
  ltoption/gt elements that contain the options that
  the user can choose from.

36
attributes to ltselectgt

• 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.
• ltselectgt also takes the core and i18n attributes.

37
selectable choice ltoptiongt

• Within a ltselectgt there are a series of ltoptiongt
  elements that contain the selections.
• ltoption/gt takes the core, i18n and form
  attributes.
• ltselect name"brewery"gt
• ltoptiongtBruchlt/optiongt
• ltoptiongtKarlsberglt/optiongt
• lt/selectgt

38
value attribute to ltoptiongt

• value can be used to set the value of the
  control when the value set is different than the
  contents string of the ltoption/gt element.
• Example
• ltoption value"nyc"gtNew York Citylt/optiongt

39
label attribute to ltoptiongt

• label can be set to label the option. if it is
  set, the user agent should use label rather than
  the content. At least this is what the spec says.
  Firefox does not seem to agree.

40
ltoptgroupgt

• This element has ltoptiongt elements as its
  children.
• It is used to create hierarchical options. This
  is mainly a time and space-saving device in the
  presence of many options. Say
• ltoptgroup label"dark"gt
• ltoption name"b6"gtBaltika 6lt/optiongt
• ltoption label"gu"gtGuiness"/gtlt/optiongt
• lt/optgroupgt
• ltoptgroupgt takes the same attributes as ltoptiongt.

41
the lttextarea/gt element

• This creates a text area where you can put a
  large chunk of text.
• 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.
• lttextareagt also admits the i18n, core and form
  attributes.

42
ltlabelgt

• This is a way to add labels for inputs.
• Normally, the input label should be taken from
  the label attribute of the input.
• ltlabelgt 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
• ltinput name"sex"/gtltlabel for"sex"gtyour
  sexlt/labelgt

43
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 ltscriptgt element that mostly
  uses a language called javascript.

44
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!
• Don't be intimidated by the example. But try to
  build your own form with PHP feedback script now!
• When you are done, you can go home.
• You will not go home until you are done!

45
saar_bier.html, part 1

• ltform action"saar_bier.php" method"post"gt
• lttablegt
• lttrgtlttd valign"top" rowspan"2"gtlta
  href"http//www.grosswald.de"gt
• Grosswald Brauereilt/agt (since 1860)lt/tdgt
• lttdgtPilsenerlt/tdgtlttdgt
• ltinput type"text" name"gw_pils" size"2"/gt
• lt/tdgt
  lttdgt_at_1.56euro
• ltinput type"hidden" name"p_gw_pils"
  value"1.56"/gt

46
saar_bier.html, part 2

• lt/tdgtlt/trgtlttrgtlttdgtExportlt/tdgtlttdgt
• ltinput type"text" name"gw_expo" size"2"/gt
• lt/tdgt
  lttdgt_at_1.34euro
• ltinput type"hidden" name"p_gw_expo"
  value"1.34"/gt
• lt/tdgtlt/trgt
• lttrgtlttd valign"top"gtBrauerei Bruch (since
  1702)lt/tdgt
• lttdgtLandbierlt/tdgtlttdgt
• ltinput name"bruch_land" type"text" size"2"/gt
• lt/tdgt
  lttdgt_at_1.22euro
• ltinput type"hidden" name"p_bruch_land"
  value"1.22"/gt

47
saar_bier.html, part 3

• lt/tdgtlt/trgt
• lt/tablegt
• ltdivgt
• ltinput type"hidden" name"euro_rate"
  value"1.22"/gt
• ltinput type"submit" value"I order!"/gt
• lt/divgt
• lt/formgt

48
saar_bier.php, part 1

• lt?php
• gross_pils_POST'gw_pils'
• p_gross_pils_POST'p_gw_pils'
• t_gross_pilsp_gross_pilsgross_pils
• gross_expo_POST'gw_expo'
• p_gross_expo_POST'p_gw_expo'
• t_gross_expop_gross_expogross_expo
• bruch_land_POST'bruch_land'
• p_bruch_land_POST'p_bruch_land'
• t_bruch_landp_bruch_landbruch_land

49
saar_bier.php, part 2

• // add up the grand total in euros
• // note how this statement stretches several
  lines
• total_eurot_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_dollartotal_euroeuro_rate

50
saar_bier.php, part 3

• print "ltdivgt You ordered ltulgt"
• print "ltligtgross_pils bottles of Grosswald Pils,
• cost t_gross_pilslt/ligt"
• print "ltligtgross_expo bottles of Grosswald
  Export,
• cost t_gross_expolt/ligt"
• print "ltligtbruch_land bottles of Bruch Landbock,
• cost t_bruch_landlt/ligtlt/ulgt"
• print "Your bill is total_dollar US
  dollars.ltbr/gt"
• print "We ship when we get your check!ltbr/gt"
• print "Prosit!lt/divgt"
• ?gt lt!-- normal HTML goes on hereafter ... --gt

51
http//openlib.org/home/krichel

• Thank you for your attention!
• Please switch off computers when you are done!