How to Create a Member Directory Website in PHP Scripting
Creating a member directory website with PHP involves interconnecting three languages: XHTML, MySQL and PHP. This tutorial will show you how to create a login form page, validate the form entry, create a database and table to store user names and passwords, connect to the database and compare the data stored in the database and the data entered into the login form. If the entries match, the user will get access to a member's directory page protected by an authentication script.
Other People Are Reading
Things You'll Need
- Text editor like SourceEdit
- Document uploading software like FileZilla
- Server with PHP and MySQL installed
Instructions
-
Login Page
-
1
Type the following in your text editor to create the standard XHTML Web page, and save it as login.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html> -
2
Type the following code for the table that will contain the login form between the beginning <body> tag and the ending </body> tag:
<table border="1">
<tr>
<td><b>Username:</b></td>
<td></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>This is a table with two rows and two columns. The empty "<td></td>" tags will contain the text boxes for the end user's user name and password. The row on the bottom will contain the submit button.
-
-
3
Type the beginning <form> tag, as shown between the beginning <body> tag and the beginning <table> tag:
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
Set the attribute "action" equal to the superglobal variable "SERVER," which has the value of "PHP_SELF," meaning that the instructions that will process this form are found in this same document. The "method" attribute is set to "post" so that the end user does not see all of the details of the data transfer between the browser and the server.
-
4
Type the following between the "table data" tags that follow "Username":
<input type="text" name="username" size="60" />
-
5
Type the following between the "table data" tags that follow "Password":
<input type="text" name="password" size="60" />
-
6
Type the following code between the "table data" tags found between the third pair of "<tr></tr>" tags with the attribute "colspan="2"":
<input type="submit" name="submit" value="Login" />
-
7
Complete the form by typing the end </form> tag between the end </table> tag and the end </body> tag:
</form>
Validate the Form
-
8
Type the beginning and ending tags for PHP, above the DOCTYPE header, as shown:
<?php
?> -
9
Type the following between the beginning and ending tags for PHP:
if (isset($_POST['submit'])) {
}The "if" statement checks to see if the end user clicked the submit button by using the "isset()" function. If the user did click the submit button, then the server will follow the instructions that are between the curly braces {}. If the submit button was not clicked, then it will display the page.
-
10
Type the following code inside the curly braces of the "if" statement above, to check to see if the "username" text box is empty:
if (empty($_POST['username'])) {
} else {
} -
11
If the field is empty, set the variable "$username" to "FALSE" and display an error message:
$username = FALSE;
echo "<p><font color='red'>Please enter your username!</font></p>";Type this code between the first pair of curly braces found in Step 3.
-
12
If the field is not empty, set the variable "$username" to "$_POST['username']", as shown:
$username = $_POST['username'];
-
13
Repeat the process with password, as shown:
if (empty($_POST['password'])) {
$password = FALSE;
echo "<p><font color='red'>Please enter your password!</font></p>";
} else {
$password = $_POST['password'];
} -
14
Type the following "if/else" statement to make sure that the user name and password fields were filled out correctly:
if ($username != FALSE && $password != FALSE) {
} else {
} -
15
If the user name and password fields were filled out correctly, issue confirmation statement:
echo "<p><font color='navy'><b>You have successfully logged in!</b></font></p>";
Type this statement between the first pair of curly braces in Step 7.
-
16
If the user name and password fields were not filled out correctly, issue an error message between the second pair of curly braces in Step 7:
echo "<p><font color='red'><b>You could not be logged in at this time. See above error(s).</b></font></p>";
Build the MySQL Table
-
17
Create a new database on your server through your provider's control panel. If you are using CPanel, click on the "MySQL Databases" icon. Call this database "members."
-
18
Assign your user name and password to the "members" database and grant the user "All Privileges." If you do not have CPanel, then grant the following privileges:
* Select
* Insert
* Update
* Delete
* Index
* Create Temporary Tables
* Create
* Alter
* Drop
* Lock Tables
* References
* Create Routine -
19
Create a new table in the "members" database called "admin" with three fields (columns).
-
20
Perform the following:
* Column One, name "user_id", type is "INT", Extra = "auto_increment", set it as "Primary Key"
* Column Two, name "username", type is "TEXT"
* Column Three, name "password", type is also "TEXT"
* Set the storage engine to MyISAM and save the table. -
21
Use this the complete code to create the table if you do not have PHP MyAdmin:
CREATE TABLE `members`.`admin` (
`user_id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` TEXT NOT NULL ,
`password` TEXT NOT NULL
) ENGINE = MYISAM -
22
Type the following code to insert your user name and password into the "admin" table. Replace your actual login information where the capital letters "USERNAME" and "PASSWORD are located:
INSERT INTO ` members`.`admin` (
`user_id` ,
`username` ,
`password`
)
VALUES (
NULL , 'USERNAME', 'PASSWORD'
);
Login Confirmation and Sessions
-
23
Type the following code at the very top of your document, after the beginning tag for PHP. Connect to your remote server and access the "members" database as shown:
$dbh=mysql_connect ("SERVERNAME", "USERNAME", "PASSWORD") or die ('I cannot connect to the database because: ' . mysql_error());
mysql_select_db ("members");Replace the capital letters with the appropriate words from your server. "SERVERNAME" is often called "localhost."
-
24
Type the following above the confirmation which reads:
echo "<p><font color='navy'><b>You have successfully logged in!</b></font></p>";, as shown:
$query = "SELECT user_id FROM admin WHERE username='$username' AND password='$password'";
$result = @mysql_query($query);
$row = mysql_fetch_array($result, MYSQL_NUM);
if ($row) {
} else {
}Explanation: Assign the MySQL "SELECT" statement to the variable called "$query", selecting the "user_id" from the "admin" table where the columns "username" and "password" equal the values of the variables "$username" and "$password." Assign the variable "$query" as a parameter of the "mysql_query()" function and set it equal to a new variable called "$result." Add the variable "$result" as a parameter to the "mysql_fetch_array()" function, along with the parameter "MYSQL_NUM" and set it equal to a new variable called "$row." Create an "if/else" statement to determine if the query worked or not by checking the variable "$row."
-
25
If the query worked properly, set the value of the superglobal variable "$_SESSION" and its parameter "user_id" to the variable "$row" initial value, which is called "0" as shown:
$_SESSION['user_id'] = $row[0];
Add a link to the password-protected member directory, as shown:
echo "Go to Member Director Pages <a href='mem_directory.php'>here</a>.";
The superglobal variable "$_SESSION" retains whatever value that it is assigned to amongst any number of pages that have the "session_start()" function listed at the top, allowing the user who logged in to access protected pages without having to log in into each one.
-
26
Type the following code between the "else's" curly braces, in case the login attempt has failed:
echo "<p><font color='red'>Login Attempt has FAILED, please try again!</font></p>";
-
27
Close the connection to the database with the "mysql_close()" function. Type the function after the code in Step 4:
mysql_close();
Authentication
-
28
Create a new page called "mem_directory.php" with the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html> -
29
Type the beginning and ending PHP tags above the DOCTYPE statement:
<?php
?> -
30
Type the "session_start()" function after the beginning "<?php" tag:
session_start();
-
31
Type the following validation statement to check to see if the "$_SESSION" variable has been set (or if the person has logged in):
if (!isset($_SESSION['user_id'])) {
} else {
}The statement reads: If the "$_SESSION" variable's "user_id" has not been set, follow these instructions, otherwise, follow these instructions.
-
32
If the session has not been set, redirect them to the login page with the "header()" function:
header("Location: http://www.yoursite.com/login.php");
exit(); -
33
If the user is logged in and the session variable is set, then welcome the member to the Member's Directory:
echo "Welcome to the Member Directory!";
Logout
-
34
Type the following to link each page to the logout page:
<a href="logout.php">Log Out</a>
Add this link to all Member's Pages.
-
35
Create the Logout Page and save it as logout.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html> -
36
Add a pair of PHP opening and closing tags at the top of the document:
<?php
?> -
37
Type the following between the PHP tags to destroy the session:
session_start();
session_destroy(); -
38
Type the following to let the user know that they have logged out of the system:
<h2>You have now logged out.</h2>
Click <a href="login.php">here</a> to log in again.
-
1
Tips & Warnings
Copy the PHP script at the top of mem_directory.php and paste it on any page that is part of the Member's Directory to restrict access to its contents.
