Creating Your First PHP Application: Part 3
In part 1 and part 2 we built the necessary classes, created a database table for our users and made a global.inc.php file that will act as a bootstrap on every page.
What’s Next
We’re now ready to build the front end pages. Bear in mind that everything you see here can be expanded and improved upon. For the purposes of this tutorial I’ve kept things relatively simple. For some suggested improvements, check out the “Extra Credit” section at the end of the post.
User Registration Page (register.php)
There are two parts to this page. A block of PHP at the top and the HTML at the bottom. As you develop your website, you may find that you’ll organize the code differently, but for clarity’s sake I kept it simple for this tutorial.
The PHP at the top loads the bootstrap (global.inc.php). It also contains the code that will be used for the form validation. The HTML at the bottom contains a simple registration form. A more detailed explanation can be found following the code.
The Code
<?php
//register.php
require_once 'includes/global.inc.php';
//initialize php variables used in the form
$username = "";
$password = "";
$password_confirm = "";
$email = "";
$error = "";
//check to see that the form has been submitted
if(isset($_POST['submit-form'])) {
//retrieve the $_POST variables
$username = $_POST['username'];
$password = $_POST['password'];
$password_confirm = $_POST['password-confirm'];
$email = $_POST['email'];
//initialize variables for form validation
$success = true;
$userTools = new UserTools();
//validate that the form was filled out correctly
//check to see if user name already exists
if($userTools->checkUsernameExists($username))
{
$error .= "That username is already taken.<br/> \n\r";
$success = false;
}
//check to see if passwords match
if($password != $password_confirm) {
$error .= "Passwords do not match.<br/> \n\r";
$success = false;
}
if($success)
{
//prep the data for saving in a new user object
$data['username'] = $username;
$data['password'] = md5($password); //encrypt the password for storage
$data['email'] = $email;
//create the new user object
$newUser = new User($data);
//save the new user to the database
$newUser->save(true);
//log them in
$userTools->login($username, $password);
//redirect them to a welcome page
header("Location: welcome.php");
}
}
//If the form wasn't submitted, or didn't validate
//then we show the registration form again
?>
<html>
<head>
<title>Registration</title>
</head>
<body>
<?php echo ($error != "") ? $error : ""; ?>
<form action="register.php" method="post">
Username: <input type="text" value="<?php echo $username; ?>" name="username" /><br/>
Password: <input type="password" value="<?php echo $password; ?>" name="password" /><br/>
Password (confirm): <input type="password" value="<?php echo $password_confirm; ?>" name="password-confirm" /><br/>
E-Mail: <input type="text" value="<?php echo $email; ?>" name="email" /><br/>
<input type="submit" value="Register" name="submit-form" />
</form>
</body>
</html>
What It’s Doing
The HTML portion of the code should be relatively straight forward. The form action is set to register.php with the method being post. This means that when the form is submitted, register.php will be loaded again and the values in the fields will be sent in the $_POST variable.
The value of each input field is set to a PHP variable ($username, $password, etc). If the form hasn’t yet been submitted, all the values will be an empty string. If the form has been submitted and did not validate, those variables will contain the values from the previous submission of the form so that they do not need to be filled in again.
Additionally, if the form has been submitted and did not validate with the PHP code above, then the $error variable will be displayed. This variable will contain the reasons why the form did not validate.
The form validation is fairly straightforward as well. The $_POST variable is an associative array of variables passed to the current script via the HTTP POST method. Each form field’s value can be accessed in $_POST by using the name of the field as the key. The first thing we do is check to see if the submit button has been press (i.e. the form has been submitted). We check $_POST['submit-form'] with the isset() PHP function since “submit-form” was the name of the submission button on the form.
Once we know the form has been submitted, we can validate it. We’ll be using the UserTools class we created in part 2 to check to see if someone has already chosen the submitted username. If so we’ll flag the form as unvalidated by setting $success to false and we’ll describe the error in $error. The next step is to check to see if the passwords match using a simple comparison.
If the form validation was successful, we’ll put the information in an associative arrray called $data and use that array to create a new User object. We’ll they call the save() function of that User object with the $isNewUser flag set to true. We then log them in using our login() function (found in the UserTools class) and redirect them to welcome.php.
Here is some example code you might use for welcome.php:
<?php
//welcome.php
require_once 'includes/global.inc.php';
//check to see if they're logged in
if(!isset($_SESSION['logged_in'])) {
header("Location: login.php");
}
//get the user object from the session
$user = unserialize($_SESSION['user']);
?>
<html>
<head>
<title>Welcome <?php echo $user->username; ?></title>
</head>
<body>
Hey there, <?php echo $user->username; ?>. You've been registered and logged in. Welcome! <a href="logout.php">Log Out</a> | <a href="index.php">Return to Homepage</a>
</body>
</html>
Login and Logout Pages
login.php
Much like register.php, login.php will have form validation at the top and the HTML login form at the bottom. The form is just two fields, username and password. The form validation calls the UserTools login() function and redirects them to index.php if login() returns true and displays an error if login() returns false. Very simple and easy. Here’s the code:
<?php
//login.php
require_once 'includes/global.inc.php';
$error = "";
$username = "";
$password = "";
//check to see if they've submitted the login form
if(isset($_POST['submit-login'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$userTools = new UserTools();
if($userTools->login($username, $password)){
//successful login, redirect them to a page
header("Location: index.php");
}else{
$error = "Incorrect username or password. Please try again.";
}
}
?>
<html>
<head>
<title>Login</title>
</head>
<body>
<?php
if($error != "")
{
echo $error."<br/>";
}
?>
<form action="login.php" method="post">
Username: <input type="text" name="username" value="<?php echo $username; ?>" /><br/>
Password: <input type="password" name="password" value="<?php echo $password; ?>" /><br/>
<input type="submit" value="Login" name="submit-login" />
</form>
</body>
</html>
logout.php
Logging a user out is even simpler than logging them in. This page needs no HTML. It just logs them out using the logout() function we put in the UserTools class and redirects them back to index.php. Here’s the code:
<?php
//logout.php
require_once 'includes/global.inc.php';
$userTools = new UserTools();
$userTools->logout();
header("Location: index.php");
?>
User Settings Page
A registered user that is logged in may want to change their settings. To keep this example simple, we’re only going to allow them to change their email address. You may want to try and expand this to enable a user to change their password.
Much like our register.php and login.php pages, there will be an HTML section with the form and a PHP section containing the form validation and other vital PHP operations. In this case, when the form is submitted we’ll get the current user as a User object from their session and set the email attribute equal to the new email. We then simple call the save() function in the User class and the desired result is achieved.
The Code
<?php
require_once 'includes/global.inc.php';
//check to see if they're logged in
if(!isset($_SESSION['logged_in'])) {
header("Location: login.php");
}
//get the user object from the session
$user = unserialize($_SESSION['user']);
//initialize php variables used in the form
$email = $user->email;
$message = "";
//check to see that the form has been submitted
if(isset($_POST['submit-settings'])) {
//retrieve the $_POST variables
$email = $_POST['email'];
$user->email = $email;
$user->save();
$message = "Settings Saved<br/>";
}
//If the form wasn't submitted, or didn't validate
//then we show the registration form again
?>
<html>
<head>
<title>Change Settings</title>
</head>
<body>
<?php echo $message; ?>
<form action="settings.php" method="post">
E-Mail: <input type="text" value="<?php echo $email; ?>" name="email" /><br/>
<input type="submit" value="Update" name="submit-settings" />
</form>
</body>
</html>
The Final File – index.php
With index.php, the sky is the limit. Since this tutorial was mostly about setting up a very “bare-bones” app, I’ll leave this mostly to your creativity. To get you started, here’s some basic code that shows links to “login” or “register” if the user is logged out and shows links to “logout” or “change settings” if the user is logged in.
<?php //index.php require_once 'includes/global.inc.php'; ?> <html> <head> <title>Homepage</title> </head> <body> <?php if(isset($_SESSION['logged_in'])) : ?> <?php $user = unserialize($_SESSION['user']); ?> Hello, <?php echo $user->username; ?>. You are logged in. <a href="logout.php">Logout</a> | <a href="settings.php">Change Email</a> <?php else : ?> You are not logged in. <a href="login.php">Log In</a> | <a href="register.php">Register</a> <?php endif; ?> </body> </html>
Extra Credit / Taking it Further
Because this tutorial is admittedly basic I’ve come up with a list of thing you may want to improve upon on your own.
- Error handling in each of the classes
- Protection against malicious form submissions and sql injection
- Implementing the PHP singleton pattern for the DB class
- Use include() to build a template
- Add a “remember me” check box that utilizes cookies to keep the user logged in
- Configure include_path in php.ini or with ini_set() for easier inclusion of files in different directories
Further Reading
As you become more familiar with OOP and PHP, here are some suggestions for developing quality applications:
- Frameworks: Codeigniter and the Zend Framework
- MVC: Model-View-Controller
Final Words
I hope you’ve enjoyed this tutorial. A zipped folder of the entire project is available for your downloading pleasure. Simply set up your database, configure DB.class.php with your database settings, and put the contents of the zip in your root folder.
