LIS651 lecture 0 PHP introduction, HTML form, shop

1. Thomas Krichel 2005-03-12 LIS651 lecture 0PHP introduction, HTML form, shop

2. today • we introduce PHP • forms filling in to prepare for active web sites • then we build 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 executing 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 <?php phpinfo(); ?> • nothing else. This will create a test page that tells you everything PHP knows about.

6. comment on info.php • If a file has the ending .php, Apache does not show the file to the client as is. • Instead in shows in another program, the PHP reads the file. When it finds <?php, it starts to interpret the content of the file. It does special things with it, until it encounters ?> • The rest of the file is transmitted as such.

7. statement • 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. • phpinfo() is a function. That is a statement that does something to something else. The "something else" is in the parenthesis. It is called the argument of the function. • In this example, it is empty. • Each statement is ended with a semicolon!

8. 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. • The client will NEVER see the PHP code that you have written.

9. 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 <div> <?php print("hello world"); ?> </div> • validated the resulting HTML.

10. 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>"; ?>

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

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

13. Forms • Forms are parts of an HTML document that a user can fill in. • The thing that users act on are called the controls of the form. • They include buttons, checkboxes, text areas, file selections... • 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.

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

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

16. 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 readonly="1" • 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

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

18. <form> • This element encloses a form. • It accepts the core and i18n attributes. • It admits a method= attribute. This attribute determines the http method by which the form is submitted to the script. There are only two choices • GET • POST

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

20. 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 content-type of the message with a special attribute enctype=

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

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

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

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

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

26. 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 $last_name=$_GET['lastname']; $greeting="Hello"; $title="Mr or Ms"; print "$greeting $title $last_name"; ?>

27. the size= attribute of <input/> • 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.

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

29. the value= attribute of <input/> • This gives the initial value of the <input/>. • The initial value is shown to the user, and sh • value= is optional but should be given for the radio and checkbox type.

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

31. the <button> element • 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!

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

33. attributes to <select> • multiple="1" allows and multiple="0" (default) disallow multiple selections. • size= sets how many rows of the selection should be displayed at any one time. • name= has the name of the control that is set. • It also takes the core and i18n attributes.

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

35. <optgroup> • This element has <option> 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 • <optgroup label="dark"><option label="Baltika 4"/><option label= "Baltika 6"/><option label="Guiness"/></optgroup> • <optgroup> takes the same attributes as <option>.

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

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

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

39. 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! • Each of you will build a shop now. • Each will choose a shop on a different topic. • When you are done, you can go home. • You will not go home until you are done!

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

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

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

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

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

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

46. Thank you for your attention! Please switch off computers when you are done! http://openlib.org/home/krichel