CMPT241 Web Programming

1. CMPT241 Web Programming Chapter 6 Forms

2. Reminders • Final project proposal is due this Thursday • Moodle submission • Project 4 is due next Monday

3. 6.1: Form Basics 6.1: Form Basics 6.2: Form Controls 6.3: Submitting Data 6.4: Processing Form Data in PHP

4. query string: a set of parameters passed from a browser to a web server • often passed by placing name/value pairs at the end of a URL • above, parameter username has value stepp, and sid has value 1234567 • PHP code on the server can examine and utilize the value of parameters • a way for PHP code to produce different output based on values passed by the user Query strings and parameters URL?name=value&name=value...PHP http://www.google.com/search?q=Obama http://example.com/student_login.php?username=stepp&id=1234567PHP

5. form: a group of UI controls that accepts information from the user and sends the information to a web server the information is sent to the server as a query string HTML forms

6. required action attribute gives the URL of the page that will process this form's data when form has been filled out and submitted, its data will be sent to the action's URL HTML form: <form> <form action="destination URL"> form controls </form> HTML

7. Wrap the form's controls in a block element such as div Form example <form action="http://www.google.com/search"> <div> Let's search Google: <input name="q" /> <input type="submit" /> </div> </form>HTML First Paragraph

8. 6.2: Form Controls 6.1: Form Basics 6.2: Form Controls 6.3: Submitting Data 6.4: Processing Form Data in PHP

9. input element is used to create many UI controls • an inline element that MUST be self-closed • name attribute specifies name of query parameter to pass to server Form controls: <input> <!-- 'q' happens to be the name of Google's required parameter --> <input type="text" name="q" value="Colbert Report" /> <input type="submit" value="Booyah!" />HTML

10. type can be button, checkbox, file, hidden, password, radio, reset, submit, text, ... value attribute specifies control's initial text Form controls: <input> (cont.) <!-- 'q' happens to be the name of Google's required parameter --> <input type="text" name="q" value="Colbert Report" /> <input type="submit" value="Booyah!" />HTML

11. input attributes: disabled, maxlength, readonly, size, value size attribute controls onscreen width of text field maxlength limits how many characters user is able to type into field Text fields: <input> <input type="text" size="10" maxlength="8" /> NetID <br /> <input type="password" size="16" /> Password <input type="submit" value="Log In" />HTML

12. Text fields: <input> • New attributes in HTML 5 • autofocus • makes control initially receive keyboard focus • placeholder • a hint or example of what the user should type • shows up as light gray text • required • whether the browser should display an error if this is left blank

13. textarea is not self-closing (inline element) required rows and cols attributes specify height/width in characters initial text is placed inside textarea tag (optional) Text boxes: <textarea> <textarea rows="4" cols="20"> Type your comments here. </textarea>HTML

14. Text fields: <input> • New type values in HTML 5 • email • number • min • max • url

15. Text fields: <input> • New type values in HTML 5 • color • data • time • month • week

16. none, 1, or many checkboxes can be checked at same time What does the url look like? Check boxes: <input> <input type="checkbox" name="lettuce" /> Lettuce <input type="checkbox" name="tomato" checked="checked" /> Tomato <input type="checkbox" name="pickles" /> PicklesHTML

17. grouped by name attribute (only one can be checked at a time) must specify a value for each one or else it will be sent as value on Radio buttons: <input> <input type="radio" name="cc" value="visa" checked="checked" /> Visa <input type="radio" name="cc" value="mastercard" /> MasterCard <input type="radio" name="cc" value="amex" /> American ExpressHTML

18. associates nearby text with control, so you can click text to activate control can be used with checkboxes or radio buttons Text labels: <label> <label><input type="radio" name="cc" value="visa" checked="checked" /> Visa</label> <label><input type="radio" name="cc" value="mastercard" /> MasterCard</label> <label><input type="radio" name="cc" value="amex" /> American Express</label>HTML

19. Text labels: <label> <input id="bold" type="checkbox" name="bold" /> <label for="bold">Bold</label> <input id="italic" type="checkbox" name="italic" /> <label for="italic">Italic</label> HTML

20. option element represents each choice select optional attributes: multiple, size optional selected attribute sets which one is initially chosen Drop down lists: <select>, <option> <select name="favoritecharacter"> <option>Frodo</option> <option>Bilbo</option> <option >Gandalf</option> <option>Galandriel</option> </select>HTML

21. optional multiple attribute allows selecting multiple items with shift- or ctrl-click must declare parameter's name with [] if you allow multiple selections option tags can be set to be initially selected Using: <select> for lists <select name="favoritecharacter[]" size="3" multiple="multiple"> <option>Frodo</option> <option>Bilbo</option> <option>Gandalf</option> <option>Galandriel</option> <option selected="selected">Aragorn</option> </select>HTML

22. Option groups: <optgroup> <select name="favoritecharacter"> <optgrouplabel="Major Characters"> <option>Frodo</option> <option>Sam</option> <option>Gandalf</option> <option>Aragorn</option> </optgroup> <optgroup label="Minor Characters"> <option>Galandriel</option> <option>Bilbo</option> </optgroup> </select>HTML

23. Menus, checkboxes, radio button.. • Which one to use? • When you have a lot of options to list or limited screen space, use menus. • Otherwise, use radio buttons or checkboxes.

24. specify custom text on the button by setting its value attribute Reset Buttons Name: <input type="text" name="name" /> <br /> Food: <input type="text" name="meal" value="pizza" /> <br /> <label>Meat? <input type="checkbox" name="meat" /></label> <br /> <input type="reset" />HTML

25. New control elements in HTML 5 • datalist (combining text field and list): • auto-completion <datalist id = "characters" > <option>Frodo</option> <option>Bilbo</option> <option>Gandalf</option> <option>Galandriel</option> <option>Aragorn</option> </datalist>HTML

26. New control elements in HTML 5 • meter: • horizontal bar of some numeric quantity <meter min = "0" max = "25" value = "24"></meter>24% Mitt RomneyHTML

27. fieldset groups related input fields, adds a border; legend supplies a caption Grouping input: <fieldset>,<legend> <fieldset> <legend>Credit cards:</legend> <input type="radio" name="cc" value="visa" checked="checked" /> Visa <input type="radio" name="cc" value="mastercard" /> MasterCard <input type="radio" name="cc" value="amex" /> American Express </fieldset>HTML

28. CSS attribute selector: matches only elements that have a particular attribute value useful for controls because many share the same element (input) Styling form controls input[type="text"] { background-color: yellow; font-weight: bold; } input[type=“submit"] { ... } a[href = “www.manhattan.edu”]{ ... }CSS

29. Styling form controls a[href* = “manhattan.edu”]{ color: red; }CSS

30. Head’s Up • Last lecture’s material • Form control elements (client-side) • Today’s material • Form submission (server-side) • Reminders • Project 3 has been graded (check Moodle). • Final project proposal draft is due tomorrow • One copy each team (hard copy) • Template available online at home.manhattan.edu/~tina.tian • HW 8 is due by the end of this week

31. Example

32. Technique • Creating the two-column layout • All label elements are set to float left with a width and text-align of right

33. 6.3: Submitting Data 6.1: Form Basics 6.2: Form Controls 6.3: Submitting Data 6.4: Processing Form Data in PHP

34. certain characters are not allowed in URL query parameters: • examples: " ", "/", "=", "&" • when passing a parameter, it is URL-encoded • “Ben&Jerry" → “Ben%26Jerry" • you don't usually need to worry about this: • the browser automatically encodes parameters before sending them • the PHP $_GET array automatically decodes them URL-encoding

35. an invisible parameter that is still passed to the server when form is submitted useful for passing on additional state that isn't modified by the user Hidden input parameters <input type="text" name="username" /> Name <br /> <input type="text" name="sid" /> SID <br /> <input type="hidden" name="school" value=“Manhattan" /> <input type="hidden" name="year" value="2016" />HTML

36. GET : asks a server for a page or data • if the request has parameters, they are sent in the URL as a query string • POST : submits data to a web server and retrieves the server's response • if the request has parameters, they are embedded in the request's HTTP packet, not the URL HTTP GET vs. POST requests

37. For submitting data, a POSTrequest is more appropriate than a GET • GET requests embed their parameters in their URLs • URLs are limited in length (~ 1024 characters) • URLs cannot contain special characters without encoding • private data in a URL can be seen or modified by users HTTP GET vs. POST requests

38. Form POST example <form action="http://localhost/app.php" method="post"> <div> Name: <input type="text" name="name" /> <br /> Food: <input type="text" name="meal" /> <br /> <label>Meat? <input type="checkbox" name="meat" /></label> <br /> <input type="submit" /> <div> </form>HTML

39. PHP superglobal arrays contain information about the current request, server, etc. These are special kinds of arrays called associative arrays. "Superglobal" arrays

40. associative array (a.k.a. map, dictionary, hash table) : an array whose indexes are not integers • associates a particular index "key" with a value • key “marty" maps to value "206-685-2181" Associative arrays $blackbook = array(); $blackbook[“marty”] = "206-685-2181"; $blackbook[“jessica”] = "206-685-9138"; ... print “Marty's number is " . $blackbook[“marty"] . ".\n"; PHP

41. Printing an associative array print_r($blackbook); PHP Array ( [marty] => 206-685-2181 [jessica] => 206-867-5309 [stuart] => 206-685-9138 ) output

42. Example: Print all parameters <?php foreach ($_GET as $param => $value) { ?> <p>Parameter <?= $param ?> has value <?= $value ?></p> <?php } ?>PHP http://example.com/print_params.php?name=Marty&sid=123456 Parameter name has value Marty Parameter sid has value 123456

43. $vehicles = $_POST["vehicles"]; foreach($vehicles as $vehicle){ print "You selected ".$vehicle; }PHP

44. Associative array functions if (isset($blackbook["marty"])) { print "Marty's phone number is {$blackbook['marty']}\n"; } else { print "No phone number found for Marty Stepp.\n"; }PHP

45. some PHP pages process both GET and POST requests to find out which kind of request we are currently processing, look at the global $_SERVER array's "REQUEST_METHOD" element GET or POST? if ($_SERVER["REQUEST_METHOD"] == "GET") { # process a GET request ... } elseif($_SERVER["REQUEST_METHOD"] == "POST") { # process a POST request ... }PHP

46. The $_SERVERsuperglobalarray

47. 6.4: Processing Form Data in PHP 6.1: Form Basics 6.2: Form Controls 6.3: Submitting Data 6.4: Processing Form Data in PHP

48. add a file upload to your form as an input tag with type of file must also set the enctype attribute of the form Uploading files <form action="http://example.com/params.php" method="post" enctype="multipart/form-data"> Upload an image as your avatar: <input type="file" name="avatar" /> <input type="submit" /> </form>HTML

49. uploaded files are placed into global array $_FILES, not $_POST • each element of $_FILES is itself an associative array, containing: • name: the local filename that the user uploaded • type: the MIME type of data that was uploaded, such as image/jpeg • size: file's size in bytes • tmp_name : a filename where PHP has temporarily saved the uploaded file • to permanently store the file, move it from this location into some other file Processing an uploaded file in PHP

50. example: if you upload tobby.jpg as a parameter named avatar, • $_FILES["avatar"]["name"] will be “tobby.jpg" • $_FILES["avatar"]["type"] will be "image/jpeg" • $_FILES["avatar"]["tmp_name"] will be something like "/var/tmp/phpZtR4TI" Uploading files <input type="file" name="avatar" />HTML