LIS651 lecture 0 PHP introduction_ HTML form_ shop

							     LIS651 lecture 0

Gathering and showing data

        Thomas Krichel
          2006-03-11
                course resources
• Course home page is at
  http://wotan.liu.edu/home/krichel/courses/lis651n06s
• 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 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 reads the file. If it finds PHP
  parts in the file, it sends them to the PHP
  processor.
• This 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
• If a file has the ending .php, Apache may not
  show the entire file to the client as is.
• Instead Apache reads the file. When it finds
  “<?php”, Apache calls another program, the PHP
  processor. Then the PHP processor interprets the
  content of the file from that point onwards, until it
  encounters “?>”.
• We can call any part of the file between “<?php”
  and “?>” a PHP part of the file.
• Parts of the file that are not in a PHP part are sent
  to the clients as such.
             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.
• phpinfo() is a function. Its argument 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/coures/lis651/ex
  amples/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.
• There 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"
  – 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= 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'].
    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>
      label= 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.
                <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">Guiness"/></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.
            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 3
print "<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!