NMED 3850 A Advanced Online Design

NMED 3850 AAdvanced Online Design February 1, 2010 V. Mahadevan

Some More Fundamentals • HTML user interfaces can consist of more than just text fields and buttons. • Various user interface components are: • Drop down menus. • Radio buttons. • Checkboxes. • Text areas. • You can encapsulate these components in your HTML forms (surround with <form> </form> tags) to make the input more intuitive and easier to understand.

Fundamentals (cont.) • Drop down menu: <select name=“numbers”> <option value=“eins”>Eins</option> <option value=“zwei”>Zwei</option> <option value=“drei”>Drei</option> <option value=“vier”>Vier</option> <option value=“funf”>Funf</option> </select>

Fundamentals (cont.) • Radio buttons: <input type=“radio” name=“binary” value=“zero” /> Zero <input type=“radio” name=“binary” value=“one” /> One • Checkboxes: Eins: <input type=“checkbox” name=“numbers2[ ]” value=“eins” /> <br> Zwei: <input type=“checkbox” name=“numbers2[ ]” value=“zwei” />

Fundamentals (cont.) • Text areas: <textarea rows=“5” cols=“25” name=“tarea”> </textarea> • The values of the various UI components can be passed to a PHP script using the POST method, just like the content of the text fields we’ve used earlier.

PHP $_POST Processing • Remember the special array $_POST that captures the data from submitted HTML forms. • <?php $numbers = $_POST['numbers']; $binary = $_POST['binary']; $numbers2 = $_POST['numbers2']; $textarea = $_POST['tarea']; print $numbers; print "<br>"; print $binary; print "<br>"; print count($numbers2);

PHP $_POST Processing (cont.) print "<br>"; foreach ($numbers2 as $item) { print $item; print "<br>"; } print $textarea; print "<br>"; ?>

PHP $_POST Processing (cont.) • You can also pass hidden form values to a PHP script from an HTML form: • HTML: • <input type="hidden" name="hiddendata" value="hiding" /> • PHP: • $hiddendata = $_POST['hiddendata'];

PHP $_GET Processing • Sometimes you want to pass data to a PHP script without using a form. • For this, the GET method can be used instead of POST. • HTML: • <a href="script.php?somedata=testing">PHP test </a> • PHP: • $data1 = $_GET['somedata'];

Adding Style With PHP • Just like with HTML, when you generate HTML from within PHP you can attach a pre-existing CSS style sheet to it or use CSS styles in the HTML header. • HTML header with embedded style: print "<html>"; print "<head>"; print "<style type=\"text/css\">"; print "body { background-color: green;}"; print "</style>"; print "</head>";

Adding Style With PHP (cont.) • HTML header with an external stylesheet: print "<head>"; print "<link rel=\"stylesheet\" type=\"text/css\" href=\"stylesheet.css\" />"; print "</head>"; • The stylesheet itself will contain only one line: body { background-color: green;}

Form Validation With PHP • Simple form validation can be done in PHP using by using “if” statements. • Example: • if ($_POST["last_name"]) == "") { • // print an error message }

Lab • Write PHP scripts that: • Generate an HTML user interface comprising various elements such as checkboxes, radio buttons, and drop down menus. • Perform form validation on the entered data. • Insert the data into a database table. • Retrieve and display the data from a database table. The final output must make use of a CSS style sheet.

References • http://www.w3schools.com

NMED 3850 A Advanced Online Design