IT250 Enhancing Websites with PHP Support Site

Today is: 2024-11-21 | Current Unit: 02

Newsletters
Seminar Agendas and Recordings
Project Instructions and Demos
Tutorials, Tips, and Tricks
Submit a Help Ticket

Due: 03-13-2013

A newsletter published by http://php.skillbuilderblocks.com/ to help students succeed!

Course: IT250 Enhancing Websites with PHP | Vol: 1301C | Issue: 2 | Date: 2013-03-07

From the Prof

FAQs

Greetings Class!

In the last unit, you learned how to invoke the php interpreter using the <?php and ?> tags. You also learned to define constants and use the php echo statement to output the values of your constants to the browser and that your echoed string can include html tags.

In this unit you'll learn the real power of php lies in creating user interfaces using html forms. By integrating html forms and cascading style sheets (CSS) with php, you can design very sophisticated user front-ends that, when submitted, process user data and other server requests. The only limit to what you can do is your imagination.

The key to doing so successfully is understanding some very important rules regarding the following:

Case sensitivity
Consistent and proper naming of form elements, folders, files, variables, and functions
Form tag attributes and values
Paths and location of project file(s)

Please be sure to review the tutorials for these issues and that you understand them.

Warm Regards,
Kathy

Q: When is Unit 2 due?
A: 03-13-2013

Q: How can I get help?
A: You have several options depending on what you need help with as follows:

Go to the Support Site. There you will find:

Links to the weekly announcements, including newsletters and seminar recordings
Seminar agendas
Project demos and sample code
Tutorials
Help Ticket Application - use to get my help troubleshooting your code

Join me for office hours
Post course related questions in the Virtual Office (I look there first and frequently)
For issues of a more personal nature, use email
If this isn't enough, check out Kaplan's Technology Center for tutoring options!

SEMINAR RECORDING

The seminar recording covering the following topics is here http://khe2.adobeconnect.com/p1tz7v47xh4/

Preliminaries

READ the Unit announcements and REVIEW the seminar recording each week, a link to it is also located in a separate announcement.
Follow my demonstrations in seminar - you can't go wrong if you do that!
TEST, TEST, TEST your projects in the wamp services. You will lose significant points if your projects do not work.
Submit a HELP TICKET (see below) if you need help troubleshooting and debugging to get your projects working. Do this BEFORE you submit a project and you'll be sure to ACE it!!
READ my gradebook feedback!!! While I do not allow resubmissions (unless I ask for one), many projects build on prior ones, so be sure to make the corrections I point out where it applies!

Big do's and don'ts

DO create a separate unit folder for each project in the www folder whether or not it contains only a single file. This will avoid your having a messy root folder in your www area.
DO zip the entire unit folder for submitting to the dropbox.
DON'T have spaces or non-alphanumeric characters in file, folder, variable or function names.
DO treat all names, including files, folders, variables, and functions as CASE SENSITIVE (I recommend getting into the habit of using all lowercase letters. You never have to remember what and if you capitalized!).
DON'T copy any code from the support site. You MUST learn to identify what each line of code is for in your own project.

This week's goals

Create a simple html form containing one input box and a submit button.

Understand the form action and method attributes.
Understand form element names.

Create a decision code block that echos out something different depending on the value entered into the form.

Understand how the value gets passed from the form to the script using variables.
$variables: a container that stores a value in memory for use in the application
Naming variables
Declaring and initializing variables
Displaying variables
Understand basic data types: string, numeric (integer, floating-point), boolean, array, NULL

Understand basic operators:

Arithmetic: +, -, *, /, %
Assignment: =, +=, -=, *=, /=, %=
Comparison and conditional: ==, ===, != or <>, !==, >, <, >=, <=
Logical: && or AND, || or OR, XOR, !
Understand basic decision control structures: if, if then else

Project Demo

Project Instructions

Create a simple html form containing one input box and a submit button.
Understand the form action and method attributes.
Understand form element names.
Create an decision code block that echos out something different depending on the value entered into the form.
Zip the unit01 folder that contains your PHP file ~~and your DB export~~ and submit it in the drop box.
Attach the zip to the Dropbox.

Be sure to refer to the rubrics for details on what's expected to earn full points!

Project Demo

TIPS AS YOU REVIEW THE FOLLOWING TUTORIALS

TUTORIAL 1: Everything You Ever Wanted to Know About HTML Forms!

Introduction to forms

HTTP allows you to send almost any type of data across the Internet to a Web server. Web sites use forms to obtain input from users. You can place many different fields into one form for user input. Such input can include user name, address, credit card number, email address, etc. The information entered by the user is then submitted to a server where it is stored and/or processed. To be truly functional, a form requires a Common Gateway Interface (CGI), which is created either server-side or client-side and written in a programming language (i.e. C, Perl, PHP). The script runs on the server. The script performs two important functions: It receives data from the browser, then it processes and formats the data.

Basic form elements

The basic form elements include the <form> tag, which is a container tag requiring a closing tag and specifies the location of the script and the method used by the script.

<form method="post or get" action="filename.php">

post - form data is posted to the URL specified by the action attribute, if the action references an email address. This is the most common method for sending form data. It can send more characters, although sometimes requires more processing by the script.
get - form data is appended to the URL for use in a query string.

Within the form tag, you can use a number of elements for capturing user input including the <input>, <select> and <textarea> tags. The <input> and <select> tags allow you to specify the type attribute such as whether it is a text box, radio button or select list. These tags and their attributes are discussed in greater detail in the next section.

Create a basic form

All form field elements share the name attribute. The name attribute identifies the information you receive from a user and associates it with a value you specify and corresponds with the defined variables in the script. When the user submits the information, the server receives it a sraw data that is delimited a special way. The script can then parse and format the raw data into a human readable format. Notice in this example, the recipient field is hidden to the user and used only by the script, which uses the value (email address) to parse the data and send it to the recipient. Also note the two input types "submit" and "reset." These are built-in buttons that allow the user to submit the data or reset the form (NOTE: Form is just an image of what the code would look like in the browser and isn't actually functional. This is intentional for security reasons).

<form name="form" action="filename.php" method="post">

<h5>Submit the assignment: </h5>
<input type="hidden" name="recipient" value="whoto@somedomain.com">
Assignment: <select name="subject" size="1">

<option>Assignment 1</option>
<option>Assignment 2</option>
<option>Assignment 3</option>

</select>
Name: <input type="text" name="realname" size="25">
<input type="submit"><input type="reset">

</form>

Text input fields

The <input> tag is used to create a text box on the page, with the type attribute set to "text". The code for this would be: <input type="text">. Note that the <input> tag is not closed.

Additional attributes to include are:
- name (This is the variable name assigned to the data; the script needs this information)
- value (If you want some information to appear in the text box when the page loads, set that as the value for this attribute)
- size (The width of the box, in characters)
- maxlength (The maximum number of characters accepted by the box)

First Name: <input type="text" name="fname" size="15" maxlength="20" value="Enter Name">

The above example would create a text box 15 characters wide, that accepts up to 20 characters
The code would render as:
First Name:

When dealing with text fields, be aware of cross-browser differences in their size. Netscape can make these fields very wide, so test in that browser to make sure that their size is acceptable and does not break your page layout. If the value for the type attribute is set to "password", when the user fills in the box the data is hidden by bullets or asterisks. However, no additional protection is provided. When the data is sent to the server, it is not encrypted or otherwise protected. This will only protect your data from someone looking over your shoulder! When to use text input fields: For short, discrete units of data, such as First Name, Last Name, Email Address, etc.

Textarea boxes

The <textarea> tag is used to create a textarea box on the page. Unlike the <input> tag, this tag needs to be closed.

Attributes for the <textarea> tag are:
- name (This is the variable name assigned to the data; the script needs this information)
- rows (The height of the box in rows)
- cols (The width of the box in characters)
- wrap (Like noshade and nowrap, the wrap attribute has no value assigned to it - if included, lines are automatically wrapped within the margins)

Address: <textarea name="address" rows="8" cols="30" wrap></textarea>

The above example would create a textarea box 30 characters wide and 8 rows tall
The code would render as:
Address:

Cross-browser size issues arise again. Be sure to check how the page looks in any browsers you expect your viewers to use! If the user enters enough data to fill the available rows, a vertical scrollbar will appear and the user can keep typing. When to use textarea boxes: These boxes are best for freeform, unstructured feedback. They are often used for submitting comments and questions.

Radio buttons and check boxes

The <input> tag is also used for radio buttons and check boxes. For radio bbuttons, the type attribute is set to "radio". Since you use the <input> tag, it does not need to be closed.

Attributes for the <input> tag are:
- name (This is the variable name assigned to the data; the script needs this information. Be sure to use the same name for all the radio buttons in the same group.)
- value (The data that will be sent to the server if that radio button is selected)
- checked (Like wrap, this attribute has no value assigned to it - if included, the radio button is selected by default. Apply this attribute to only one of the radio buttons.)
Color: Blue: <input type="radio" name="color" value="blue">
Red: <input type="radio" name="color" value="red" checked>
Yellow: <input type="radio" name="color" value="yellow">

The above example would create three radio buttons, with the middle radio box 'checked' (selected by default)
The code would render as:
Color: Blue: Red: Yellow:

When to use radio buttons: Radio buttons should only be used for data in which one item is selected. To create check boxes, the type attribute is set to "checkbox".

Attributes for the <input> tag are:
- name (This is the variable name assigned to the data; the script needs this information. Be sure to use the same name for all the checkboxes in the same group.)
- value (The data that will be sent to the server if that checkbox is selected)
- checked (Like wrap, this attribute has no value assigned to it - if included, the checkbox is selected by default. This attribute can be assigned to as many checkboxes as you want.)
Sizes: Small: <input type="checkbox" name="size" value="small">
Medium: <input type="checkbox" name="size" value="medium" checked>
Large: <input type="checkbox" name="size" value="large" checked>

The above example would create three checkboxes, with the second and third checkboxes 'checked' (selected by default)
The code would render as:
Sizes: Small: Medium: Large:
When to use checkboxes: Use checkboxes for data in which multiple items can be selected.

Drop down menus

The <select> </select> tags are used.
Attributes the the <select> tag are:
- name (This is the variable name assigned to the data; the script needs this information.)
- size (The value assigned to this attribute is the height of the menu in lines)
- multiple (Like checked, this attribute has no value assigned to it - if included, multiple selections are possible in the menu.)
Within the <select> tags are <option> </option> tags, one for each item in the menu.
Attributes the the <option> tags are:
- value (The data that will be sent to the server if the menu item is selected)
- selected (Like checked, this attribute has no value assigned to it - if included, that item is selected by default. Only one item can be selected.)
Color:
<select name="color" size="3" multiple>
<option value="blue">Blue</option>
<option value="red" selected>Red</option>
<option value="yellow">Yellow</option>
</select>

The above example would create a menu with three choices visible. The middle choice would be selected by default. Multiple selections would be possible.
The code would render as:
Color:
Changing the code to remove the size and multiple attributes renders as:

Color:
When to use menus: Menus are good to use if you are dealing with more than a few items because they can help conserve screen space.

Password boxes

Password boxes are simply text boxes that displays **** when the user types their password. There is no encryption or other security. It simply prevents an onlooker from being able to see the password as it is typed.

<input type="password" name="password" size="10">

Setting tab order

Setting the tab order for forms is the same as doing so for links. Keep in mind that the first time a user presses the tab key, it activates the address box. By default, the tab order follows the order in which elements appear on the page. You can assign tab order to text fields, password fields, checkboxes, radio buttons, text blocks, menus and buttons, as well as to links and client-side image maps.

<input type="text" name="firstname" tabindex="1">

Disabling form elements

You can disable an element with the disabled attribute. Keep in mind you will need a script that reenables the element based on user action you define. For example, you may want to disable the submit button to ensure the user has entered desired desired elsewhere in the form. A script would then reenable the form by testing that the user filled in required fields. Note that the element is grayed out when it is disabled.

<input type="submit" name="submit" disabled>

Making elements read-only

Designers often want to display certain data in a form that was already obtained, however, they do not want users to be able to change the data. You can make elements read-only by using the readonly attribute.

<textarea name="purchasehistory" cols="25" rows="4" readonly>

TUTORIAL 2: Forms and PHP!

	HTML code in index.html		PHP code in process.php
1.	<form action="process.php" method="get">	1.	<?php
2.	<select name="rating">	2.	//initialize a variable to the value of the form element named rating
3.	<option value="">Select a rating</option>	3.	$rating = $_GET['rating'];
4.	<option value="1">The example is useless</option>	4.	//define the function that will make a decision based on that value
5.	<option value="2">The example is useful</option>	5.	function getRating($rating) {
6.	</select>	6.	switch ($rating) {
7.	<input type="submit" value="Submit" />	7.	case 1:
8.	</form>	8.	echo "The example is useless";
		9.	break;
	Action must be the name of your script.	10.	case 2:
	Use autoglobal based on method to pass value: $_GET, $_POST or $_REQUEST (either get/post)	11.	echo "The example is useful";
		12.	break;
	The autoglobal must reference the element by name	13.	default:
	Use the value of the option (or input) element for each case statement. Enclose alpha values in quotes.	14.	echo "Please select a rating";
		15.	}
	Use the variable name wherever the value needs to be passed. Here $_GET passes the value from form element named 'rating' to $rating variable. The value is then passed to the function call, which further passes the value to the function. The function passes it to the switch statement. The case statements evaluate the value and executes the applicable instructions.	16.	}
		17.	//call the function so that it executes
		18.	getRating($rating);
		19.	?>

	Make sure the function call is spelled exactly the same as the name of the function.		**Treat ALL names as case sensitive.

<body> <div align="center"> <?php if (!isset($_GET['ssno'"])) { echo "<h3>Please enter a fake social security number.<h3>"; ?> <form method="get" action="index.php"> <table align="center" border="0"> <tr> <td><input type="text"name="ssno" /></td> </tr> </table> <p><input type="submit"value="Submit"/> <input type="reset" /></p> </form> <?php } else { $ssno = $_GET['ssno']; $ssno = str_replace("-", "", $ssno); $ssno = str_replace(" ", "" , $ssno); if (!is_numeric($ssno) \|\| (strlen($ssno) != 9)) { echo "<p>The number " . $ssno . " is not a valid social security number.</p>"; echo "<p><a href=index.php>Return to the Form</a></p>"; unset($ssno); } else { echo "<p>Your social security number " . $ssno . " appears to be <strong>valid</strong>.</p>"; echo "<p><a href=index.php>Return to the Form</a></p>"; unset($ssno); } } ?> </div> </body> </html>		The opening div will close on line 31..

		If the first if returns true, it will execute the code between the { and }. It will then jump to line 30 and finish the remaining lines of code.

		If the first if returns false, it will skip lines 5-15 and execute the else between { and }.

		During execution of the else above, if the second if statement returns true, it will execute the code between { and }, then jump to line 30 and finish the remaining lines of code.

		If the second if returns false, it will skip lines 21-22 and execute the else between { and }, then finish the remaining lines of code.

	To curly or not to curly - that is the question. Though the { } is commonly referred to as function braces, most languages require them in flow control code blocks such as decision (conditionals) and iteration (looping) functions. In PHP, the { } is implicit for code blocks that only execute one line of code for such functions. If your decision or loop contains more than one line of code, you need to explicitly include them. I strongly urge you to include them whether they are needed or not because it makes the logic easier to follow, it will minimize the possibility of logic errors, and it will make it easier for you to transfer your knowledge to other languages. TIPS: A parse error on the last line (33) is MOST likely a missing closing curly; Make sure you at least have an equal number of opening and closing curlies; Though #2 doesn't ensure they're in the right place, try indenting your code to help you visually see the how the script should logically branch; Whenever you type a {, immediately type the } for it, then add your instructions between them. It may help you to write the pseudocode first, especially if it involves nested condition checking or iteration functions. if (true) { do this } else { do that }