LIS651 lecture 0 Gathering and showing data - PowerPoint PPT Presentation

1 / 61
About This Presentation
Title:

LIS651 lecture 0 Gathering and showing data

Description:

Course home page is at http://wotan.liu.edu/home/krichel/courses/lis651n07s ... print 'We ship when we get your check! br/ '; print 'Prosit! /div ... – PowerPoint PPT presentation

Number of Views:64
Avg rating:3.0/5.0
Slides: 62
Provided by: wota
Category:

less

Transcript and Presenter's Notes

Title: LIS651 lecture 0 Gathering and showing data


1
LIS651 lecture 0Gathering and showing data
  • Thomas Krichel
  • 2007-03-18

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

3
course resources
  • Course home page is at http//wotan.liu.edu/home/k
    richel/courses/lis651n07s
  • The course resource page http//wotan.liu.edu/home
    /krichel/courses/lis651
  • The class mailing list https//lists.liu.edu/mailm
    an/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.

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

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

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

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

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

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

10
comment on info.php
  • In terms of XML, the lt?php until ?gt 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 lt?php
    and ?gt a PHP part of the file.
  • The XML file here contains just the processing
    instruction.

11
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

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

13
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!

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

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

16
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
  • ltdivgt
  • lt?php
  • print("Hello, world!")
  • ?gt
  • lt/divgt
  • Validate the resulting XHTML.

17
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

18
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?

19
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, 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.

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

21
forms examples
  • Here is an example in http//wotan.liu.edu/home/kr
    ichel/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.

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

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

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

25
ltformgt
  • This element encloses a form.
  • All form elements (discussed now) should be
    children of the ltformgt element.
  • Technically can be more than one ltformgt in the
    HTML page.
  • But it does not make much sense to have several
    ltformgts.
  • ltformgt accepts the core and i18n attributes. And
    it has some other attributes. Some of these are
    required.

26
the action attribute of ltformgt
  • 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.

27
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 (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.

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

29
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

30
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

31
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.
  • It requires a type attribute and a name
    attribute.

32
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

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

34
control name and PHP variable
  • When the form is passed to the PHP script named
    with the action of the the ltformgt 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'.

35
the size attribute of ltinput/gt
  • 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.

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

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

38
the checked 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.

39
the src attribute of ltinput/gt
  • When the input is of type 'image' the src
    attribute gives the URL of the image.
  • This is for input using image maps.

40
example
  • HTML file greet.html has
  • ltform action"greet.php" method"get"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
  • in addition to the usual HTML stuff.

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

42
creating menus
  • This is done with ltselectgt element.
  • Each ltselectgt element can have a number of
    ltoptiongt elements that contain the options that
    the user can choose from.
  • ltselectgt also takes the core and i18n attributes,
    and some others that we see now.

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

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

45
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

46
other 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 of the ltoptiongt 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.

47
ltoptgroupgt
  • This element has ltoptiongt elements as its
    children.
  • It takes the same attributes as ltoptiongt.
  • 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 value"b6"gtBaltika 6lt/optiongt
  • ltoption value"gu"gtGuinness"/gtlt/optiongt
  • lt/optgroupgt

48
the lttextarea/gt 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.
  • lttextarea/gt also admits the i18n, core and form
    attributes.

49
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

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

51
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 dont do well on
    the next quiz and give you a better grade (a
    so-called form-aided grade), if it works.

52
for help with the PHP
  • Here is one that I made earlier. In the course
    resource site find examples/forms/list_get.php.htm
    l
  • Dont 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.

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

54
master example greet.php
  • lt?php
  • if(_GET'submitted')
  • name_GET'name'
  • print "ltdivgtHello name!lt/divgt\n"
  • else
  • print "ltform action\"greet.php\"
    method\"get\"gt\n"
  • print "ltdivgtltinput type\"hidden\"
    name\"submitted\" value\"1\" /gtlt/divgt\n"
  • print "ltpgtYour name ltinput type\"text\""
  • print " name\"name\" value\"name\" /gt"
  • print "lt/pgtlt/formgt\n"
  • ?gt

55
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

56
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

57
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

58
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

59
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

60
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

61
http//openlib.org/home/krichel
  • Thank you for your attention!
  • Please switch off computers when you are done!
Write a Comment
User Comments (0)
About PowerShow.com