In this course we are using PHP to process HTML forms. For all your assignments you have created two files: one file with the form, and another file that processes the form. The file with the form could be either a .html or a .php file. The form processing file has been a .php file. But do they need to be separate files?
There is one advantage to splitting the form and form processor into separate files: simplicity. In software engineering and software project management classes we call that idea "modularity". Breaking software into bite size pieces makes them easy to develop and maintain.
However, having the form and form processing script in two files creates a lot of files. And it can become confusing as to which two go together. Having the form and the processor in one single file makes managing lots of files easier.
Another advantage of using a single file is improved error messages. In all our examples up to now, if the user creates an error, then our processing script simply outputs an error and tells the user to hit the back button and try again. If the form and script were together, then we could reprint the form with an error message such as "you didn't enter a name".
Example
The following is an example of a form and its processor all in one file. It is a very simple example that just gets a first and last name. When the user hits submit the scripts just replies with a thank you message. Notice that the page's header does not change.
Here is a link to this example on the birdnest server.
If this is the first time the page has been loaded, then the POST data is blank and we should print the form. If the POST data has values for both first and last names, then we should print a thank you message. If either the first name or last name is blank, but not both blank, then we should print the form with an error message.
I made this example REALLY simple. When the form is printed, I print the * no matter if there is an error or not. If there was an error, then the color of the * is red. If there was no error, then I print the * in white so that it is invisible.
There are LOTS of other problems with this oversimplified example. Try NOT entering EITHER the first or last names and then hit submit. My too simple error checking assumes this means the form is just now being loaded and does not print an error message. That could be fixed by using a hidden form value.
<!-- SingleFile.php -->
<!-- A form and the form processor in one file. -->
<html>
<head>
<title>Single File Example</title>
</head>
<body>
<h2 align=center>Single File Example<br>A Form and Form Processing Script both in one file.</h2>
<h6 align=center>Notice how this header HTML does not change.</h6>
<?php
// fill fname and lname with either names or blanks
if (sizeof($_POST) != 0)
{
$fname = $_POST['first'];
$lname = $_POST['last'];
}
else
{
$fname = "";
$lname = "";
}
// If both fields were filled => then done
if ( (strlen($fname)>2) && (strlen($lname)>2) )
{
echo "<center><B>";
echo "Thank you $fname $lname for entering your name.";
exit;
}
// If both fields were empty => then show form with the * hidden
if ( (strlen($fname)<2) && (strlen($lname)<2) )
$fontcolor = "white";
// If one field filled and one empty => show form with red *
else
{
echo "<font color=red><i>* indicates required field</i></font>";
$fontcolor = "red";
}
// ---- Print the form -----
echo <<<theEnd
<form action='singlefile.php' method='POST'>
First Name: <input type=text name=first>
<font color=$fontcolor>*</font>
<br>
Last Name: <input type=text name=last>
<font color=$fontcolor>*</font>
<br>
<input type=submit value='Submit'>
</form>
theEnd;
?>
</body>
</html>
|
JavaScript is embedded inside your html code and is run by the browser, not the server. JavaScript can create and read cookie files, rotate pictures in a header, pop up new windows, yadda yadda yadda. JavaScript can also help us detect errors in a form (but Ajax would be better for that in many cases).
Example One - A "Go Back" Button
In all our form processing examples, if the PHP script detects an error then the script prints an error and the user must hit the browser's back button to go back to the form and re-input the data. Here is how to add a back button that only appears if there was an error.
<html>
<head>
<script>
function goBack()
{
window.history.back()
}
</script>
</head>
<body>
<?php
determine if the POST data was okay
if ($error == 1)
{
echo "Input Error on Form<P>";
echo "<input type='button' value='Go Back to Form' onclick='goBack()'>
}
blah blah blah
|
Note : A much better solution would be to use JavaScript to detect if the user had input valid data. In other words, the browser should check for simple errors, not the server. JavaScript has built in functions to determine if a value is a string or number or empty. You can also use regular expressions to check more complex values. For example, if an address needs both numbers and characters, such as 123 Main Street, then you might have to write a regular expression to match the pattern you will accept as valid.
w3schools.com is good source for simple JavaScript examples. For example, here is an example of checking form input.
If you want more information about client-side programming and error checking, either get a book on JavaScript and Ajax, or take CSCI 241 Client-Side Programming.
Example Two - Really Delete All?
As part of my advising appointment application, I need a script to clear out the advising appointment file at the end of the semester. That script, which I named "ClearSlots.php", is really short. The problem is that the script just deletes the file. No confirmation is requested. To fix this problem I added some JavaScript to the link to the script.
When the user clicks the link to delete the file, the browser pops up a dialog box and asks if they are sure they want to delete the file. If the user presses yes, then the browser goes to the ClearSlots.php script, which deletes the file. If the user hits cancel, then the browser does nothing.
Here is the JavaScript that I put in my index.html file to make sure no one runs the delete routine by accident. "Confirm" is a built-in JavaScript function. I named my function verify. "onclick" is a built-in event that every browser knows how to detect.
<html>
<head>
<title>Dannelly</title>
<script>
function verify(){
return confirm("Really Delete Everything?");
}
</script>
</head>
<body>
<a href = ClearSlots.php
onclick = "return verify()" >
Empty Out the Appointment File
</a>
|