LIS651 lecture 0 Gathering and showing data

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

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

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

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 <?php phpinfo(); ?> • 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 “<?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.

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 <div> <?php print("Hello, world!"); ?> </div> • 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 <?php print "<div>"; print "Hello, world!"; print "</div>"; ?>

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

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

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

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

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

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

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

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

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

34. 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'].

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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