Registration Page (Employee Registration)
- Validate Form Fields
- Create Sticky Form
- Send Confirmation Email (NOT COMPLETE)
- Check for Unique Username and Email (NOT COMPLETE)
Validate Form Fields
Anytime you create a registration form, you should validate the form elements using, HTML attributes (e.g. required = "required"), client-side JavaScript, server-side script or a combination of one of more of these. You want to ensure that all critical form elements get a value or that they are the right data type. This is especially true of text input fields.
- Add the following highlighted print and PHP conditional statements AFTER the
<h2>
tag:
WHY: To check to see if the form has been submitted and if so, check FirstName field to see if it is empty and set a flag.
<h2 class="ui-body ui-body-a ui-corner-all">EMPLOYEE REGISTRATION</h2> <?php
print "<p>Register for benefits</p>";
// Check to see if the form has been submitted:
if (isset($_POST["Submit"]) )
{
$missingField = FALSE; // Set $missingField FLAG to TRUE if "if" statement is TRUE.
// Check each form variable to see if any one is empty
if (empty($_POST["FirstName"]) && isset($_POST["FirstName"]))
{
$missingField = TRUE;
print '<p class="error">Please enter your first name!</p>';
}
} ?>
CODE EXPLANATION:- The first print statement will always print "Register for benefits" because it is OUTSIDE of the conditional statement. It could have been created as regular HTML but was shown to prove that any HTML code could be written within a PHP script using the echo() or the print() method.
- The first "if" statement will check to see if the submit button (e.g., $_POST["submitted"]) is set. When the page is first loaded, this variable is not set. However, when the form is submitted by clicking the REGISTER button, this variable will be set and the content of this "if" statement will be executed because the condition will become TRUE. (e.g. This is SELF POSTING or POST BACK).
- The $missingField variable is what is called a FLAG variable. It is used to set a boolean value (In this case, initially FALSE) and then set its value to TRUE if the SECOND "if" statement resolves to TRUE. This flag variable is included in EACH of the "if" statement to ensure that all of the form variables have been filled out BEFORE the form can be submitted.
- The second nested "if" statement will check to see if the FirstName form field is empty AND that it is set. Both conditions become true when data is entered into the First Name form field AND the form is submitted by clicking the REGISTER button.
- CHECK POINT: Save file and preview it in a browser. Click the REGISTER button WITHOUT entering any information into the input fields. You should see the message, "Please enter your first name!":
NOTE: The red text is the result of the CSS class called .error in the custom_styles.css file.
- Add two additional "if" statements below the FIRST nested "if" statement that is similar to the FirstName form field for the LastName and Email fields:
<?php
print "<p>Register for benefits</p>";
// Check to see if the form has been submitted:
if (isset($_POST["Submit"]) )
{
$missingField = FALSE; // Set $missingField FLAG to TRUE if "if" statement is TRUE.
// Check each form variable to see if any one is empty
if (empty($_POST["FirstName"]) && isset($_POST["FirstName"]))
{
$missingField = TRUE;
print '<p class="error">Please enter your first name!</p>';
}
if (empty($_POST["LastName"])) { $missingField = TRUE; print '<p class="error">Please enter your last name!</p>'; } if (empty($_POST["Email"])) { $missingField = TRUE; print '<p class="error">Please enter your email!</p>'; } } ?>
- CHECK POINT: Save the file and test it in a browser. Click the REGISTER button WITHOUT entering any information into the input fields. You should see that all three messages are displayed when the REGISTER button is clicked:
- Add the following three additional conditional statements for both of the password input fields and $missingField variable:
<?php
print "<p>Register for benefits</p>";
// Check to see if the form has been submitted:
if (isset($_POST["Submit"]) )
{
$missingField = FALSE; // Set $missingField FLAG to TRUE if "if" statement is TRUE.
// Check each form variable to see if any one is empty
if (empty($_POST["FirstName"]) && isset($_POST["FirstName"]))
{
$missingField = TRUE;
print '<p class="error">Please enter your first name!</p>';
}
if (empty($_POST["LastName"])) { $missingField = TRUE; print '<p class="error">Please enter your last name!</p>'; } if (empty($_POST["Email"])) { $missingField = TRUE; print '<p class="error">Please enter your email!</p>'; } if (empty($_POST["Password1"]))
{ $missingField = TRUE; print '<p class="error">Please enter a password!</p>'; }
if ($_POST["Password1"] != $_POST["Password2"]) { $missingField = TRUE; print '<p class="error">Your password did not match your confirmed password!</p>'; }
if (!$missingField) { print "<p>You are now registered!<br />Okay, you are not really registered YET...</p>"; // Clear posted values by emptying the $_POST array $_POST = array(); } } ?
CODE EXPLANATION:- The first "if" statement checks to see if the first password field is not empty. The second "if" statement checks to see if the password entered MATCH the first password that was set in the first password field so there is no need to check if it is empty.
- The third "if" statement checks to see if there is no $missingField flag set. It basically says, " If no field is left empty, if(!$missingField) say "If $missingField is not FALSE--which means $missingField is TRUE" then "register the user." If there is no missing fields the $missingField variable will still be FALSE.
- The $_POST = array(); clears the posted values by emptying the $_POST array
- Comment out the PHP script ABOVE and BELOW the
<form>
tag with PHP COMMENT tags.
WHY: To DISABLE the "if" conditional statement.
<?php /*?><?php
if ( empty( $_POST ) )
{ ?> <?php */?>
<form action="registration_page.php" method="post"> ... ... ... ... </form>
<?php /*?><?php
}
else
{
$FirstName = $_POST[ 'FirstName' ];
$LastName = $_POST[ 'LastName' ];
$Email = $_POST[ 'Email' ];
$Password = $_POST[ 'Password1' ];
$sql = "INSERT INTO passwords ( FirstName, LastName, Email, Password )
VALUES ( :FirstName, :LastName, :Email, :Password )";
$query = $pdo_conn->prepare( $sql );
$result = $query->execute( array( ':FirstName'=>$FirstName, ':LastName'=>$LastName, ':Email'=>$Email, ':Password'=>$Password ) );
if($result)
{
echo ("<p>Thank you. You have been registered.</p>
<a href='index.php' class='ui-btn ui-icon-user ui-corner-all ui-btn-icon-left ui-btn-inline ui-mini'>Log In</a>");
}
else
{
echo "<p>Sorry, there has been a problem registering. Please contact admin.</p>";
}
}
?><?php */?>
- CHECK POINT: Save the file and preview it in a browser. Enter two passwords with different values and then click the REGISTER button without entering any information into the other input fields. You should see that all four messages are displayed.
Now enter values in all of the fields with a pair of matching passwords. You should see the message:
You are now registered!
Okay, you are not really registered YET...
- CUT the highlighted code from the commented PHP code:
<?php /*?><?php
}
else
{
$FirstName = $_POST[ 'FirstName' ];
$LastName = $_POST[ 'LastName' ];
$Email = $_POST[ 'Email' ];
$Password = $_POST[ 'Password1' ];
$sql = "INSERT INTO passwords ( FirstName, LastName, Email, Password )
VALUES ( :FirstName, :LastName, :Email, :Password )";
$query = $pdo_conn->prepare( $sql );
$result = $query->execute( array( ':FirstName'=>$FirstName, ':LastName'=>$LastName, ':Email'=>$Email, ':Password'=>$Password ) );
if($result)
{
echo ("<p>Thank you. You have been registered.</p>
<a href='index.php' class='ui-btn ui-icon-user ui-corner-all ui-btn-icon-left ui-btn-inline ui-mini'>Log In</a>");
}
else
{
echo "<p>Sorry, there has been a problem registering. Please contact admin.</p>";
}
}
?><?php */?>
- PASTE the copied code below the $_POST = array(); statement and then comment out the THREE lines ABOVE it.
if (!$missingField)
{
// print "<p>You are now registered!<br />Okay, you are not really registered YET...</p>";
// Clear posted values by emptying the $_POST array
// $_POST = array();
$FirstName = $_POST[ 'FirstName' ];
$LastName = $_POST[ 'LastName' ];
$Email = $_POST[ 'Email' ];
$Password = $_POST[ 'password1' ];
$sql = "INSERT INTO passwords ( FirstName, LastName, Email, Password )
VALUES ( :FirstName, :LastName, :Email, :Password )";
$query = $pdo_conn->prepare( $sql );
$result = $query->execute( array( ':FirstName'=>$FirstName, ':LastName'=>$LastName, ':Email'=>$Email, ':Password'=>$Password ) );
if($result)
{
echo ("<p>Thank you. You have been registered.</p>
<a href='index.php' class='ui-btn ui-icon-user ui-corner-all ui-btn-icon-left ui-btn-inline ui-mini'>Log In</a><br/><br/>");
}
else
{
echo "<p>Sorry, there has been a problem registering. Please contact admin.</p>";
}
}
}
?>
- DELETE the remainder of the PHP code that was cut:
<?php /*?><?php... ...
}
else
{}
?><?php */?>
- DELETE the remainder of the PHP code ABOVE the opening
<form>
tag:
<?php /*?><?php
if ( empty( $_POST ) )
{ ?> <?php */?>
<form action="registration_page.php" method="post">
- CHECK POINT: Save the file and preview it in a browser. Enter all fields including the two passwords with the SAME values and then click the REGISTER button. You should see the message, "Thank you. You have been registered." displayed.
Create Sticky Form
A Sticky Form is a form that remembers the values that were entered into it if the form is not submitted correctly so that a user does not have to re-enter those values. The syntax for a form variable to be sticky is:
<input type="text" name="FirstName" size="20" value="<?php if (isset($_POST["FirstName"])) {print htmlspecialchars($_POST["FirstName"]); } ?>"
The value attribute of a form variable is set to a PHP script that check to see if the variable is set and if so it will display the result in the form element after parsing it with the htmlspecialchars() method. The htmlspecialchars method converts certain HTML tags into entities (e.g., <h1> entity is <h1>) to avoid problems if a user enters HTML tags into a form field.
- Add the following highlighted PHP scripts to the first three form elements (e.g., FirstName, LastName, and Email) within the form
<input>
tags as value attributes with dynamic PHP scripts as their values.
<form action="registration_page.php" method="post">
<label for="FirstName">First Name:</label>
<input name="FirstName" type="text" value =
"<?php if (isset($_POST["FirstName"])) {print htmlspecialchars($_POST["FirstName"]);} ?>" size="20" data-mini="true"/>
<label for="LastName">Last Name:</label>
<input name="LastName" type="text" value = "<?php if (isset($_POST["LastName"])) {print htmlspecialchars($_POST["LastName"]);} ?>" size="20" data-mini="true"/>
<label for="Email">Email Address:</label>
<input name="Email" type="text" value = "<?php if (isset($_POST["Email"])) {print htmlspecialchars($_POST["Email"]);} ?>" size="20" data-mini="true" />
<label for="Password1">Password:</label>
<input type="password" required="required" name="Password1" size="20"data-mini="true"/>
<label for="Password2">Re-enter Password:</label>
<input type="password" required="required" name="Password2" size="20"data-mini="true"/>
<p><input type="submit" name="Submit" value="REGISTER" data-inline="true" data-mini="true"/></p>
</form>
CAUTION: Be careful to ensure that they are nesting inside of the closing input tag and paragraph tags ( /> </p>). Notice also you don't want to add the PHP script to the password fields for security reasons.
CODE EXPLANATION:
These three scripts create what is called a STICKY FORM. You cannot preset the value of password input fields; however, you can preset other form variables:- combo box – add selected = "selected" as an attribute
- radio button / check box – add check = "checked" as an attribute
- textarea – place the value between the textarea tags (e.g., <textarea name="Feedback">Preset text goes here...</textarea>).
- CHECK POINT: Save the file and preview it in a browser. You should see the same registration form as before. However, if you look at the form in Design view in Dreamweaver, you will see the PHP script inside of the first three form elements.
Also, if you enter some data into the text fields and then click the REGISTER button, the data will STICK to its original values.
Add Send Confirmation Email
Check for Unique Username and Email