the tutorial
Step 1:
The first step in designing a member system is to plan out exactly what you need. A common impulse among programmers is to jump right in and start coding. I'll be honest and admit that I'm guilty of this more so than anyone. However, since I'm in control of this conversation (yes!), you'll have it all planned out by reading through this before you even see any code.
What will you need to start?
First of all, you need a server that supports a CGI or Server-side language. For this tutorial, it's PHP. I won't be directing any attention to any other language at this time, so although the concepts will be similar, the code will be entirely different than something you might use in Perl or ASP. As a side note, it is possible to perform a member system simply using JavaScript, but it would not be remotely secure because JavaScript is client-side (thus able to be viewed by anyone), and even if you had a one-way encryption script it would not be feasible because of the pain of hard-coding usernames and encrypted passwords into the HTML document.
Second, at least for our purposes, you need a database. Preferably MySQL. PHP and MySQL go hand-in-hand, so a lot of servers tend to match the two up. Thus, since we're talking PHP, we may as well talk MySQL.
Third, you will need 4 blank PHP web pages entitled: register.php, login.php, members.php, and logout.php. After you have these pages created and open, we're ready to start.
Step 2: Database
If we want to design a members system, we'll need a database. So all we need to do in this step is to create the table we will use to manage the user's login information. Note that the schema we use here is quite simple, and is only simplified to help you see how it works.
CODE
Name the table "dbUsers." It will need 4 fields:
[I]Name Type Addition[/I]
id int(10) Primary Key, AUTO_INCREMENT
username varchar(16) Unique
password char(16)
email varchar(25)
[I]Name Type Addition[/I]
id int(10) Primary Key, AUTO_INCREMENT
username varchar(16) Unique
password char(16)
email varchar(25)
Once you've made the database table, you're ready to design and code the registration page.
Create a File to Connect to your Database
Create a new file and name it dbConfig.php. This file will contain the PHP code that will connect to the MySQL database, and select the correct database. Make sure you have added users to your MySQL database with read/write or admin access, then place this type of code into the dbConfig.php file:
CODE
<?
// Replace the variable values below
// with your specific database information.
$host = "localhost";
$user = "UserName";
$pass = "Password";
$db = "dbName";
// This part sets up the connection to the
// database (so you don't need to reopen the connection
// again on the same page).
$ms = mysql_pconnect($host, $user, $pass);
if ( !$ms )
{
echo "Error connecting to database.\n";
}
// Then you need to make sure the database you want
// is selected.
mysql_select_db($db);
?>
// Replace the variable values below
// with your specific database information.
$host = "localhost";
$user = "UserName";
$pass = "Password";
$db = "dbName";
// This part sets up the connection to the
// database (so you don't need to reopen the connection
// again on the same page).
$ms = mysql_pconnect($host, $user, $pass);
if ( !$ms )
{
echo "Error connecting to database.\n";
}
// Then you need to make sure the database you want
// is selected.
mysql_select_db($db);
?>
Step 3: Register
register.php
On your registration page, you need to create a web form that will allow the user to plugin a username, password, and their e-mail address. Then, also on your page, add code that runs only when information has been passed via the form. Finally, display a "Registration Successful!" message to the user.
CODE
<?php
// dbConfig.php is a file that contains your
// database connection information. This
// tutorial assumes a connection is made from
// this existing file.
include ("dbConfig.php");
//Input vaildation and the dbase code
if ( $_GET["op"] == "reg" )
{
$bInputFlag = false;
foreach ( $_POST as $field )
{
if ($field == "")
{
$bInputFlag = false;
}
else
{
$bInputFlag = true;
}
}
// If we had problems with the input, exit with error
if ($bInputFlag == false)
{
die( "Problem with your registration info. "
."Please go back and try again.");
}
// Fields are clear, add user to database
// Setup query
$q = "INSERT INTO `dbUsers` (`username`,`password`,`email`) "
."VALUES ('".$_POST["username"]."', "
."PASSWORD('".$_POST["password"]."'), "
."'".$_POST["email"]."')";
// Run query
$r = mysql_query($q);
// Make sure query inserted user successfully
if ( !mysql_insert_id() )
{
die("Error: User not added to database.");
}
else
{
// Redirect to thank you page.
Header("Location: register.php?op=thanks");
}
} // end if
//The thank you page
elseif ( $_GET["op"] == "thanks" )
{
echo "<h2>Thanks for registering!</h2>";
}
//The web form for input ability
else
{
echo "<form action=\"?op=reg\" method=\"POST\">\n";
echo "Username: <input name=\"username\" MAXLENGTH=\"16\"><br />\n";
echo "Password: <input type=\"password\" name=\"password\" MAXLENGTH=\"16\"><br />\n";
echo "Email Address: <input name=\"email\" MAXLENGTH=\"25\"><br />\n";
echo "<input type=\"submit\">\n";
echo "</form>\n";
}
// EOF
?>
// dbConfig.php is a file that contains your
// database connection information. This
// tutorial assumes a connection is made from
// this existing file.
include ("dbConfig.php");
//Input vaildation and the dbase code
if ( $_GET["op"] == "reg" )
{
$bInputFlag = false;
foreach ( $_POST as $field )
{
if ($field == "")
{
$bInputFlag = false;
}
else
{
$bInputFlag = true;
}
}
// If we had problems with the input, exit with error
if ($bInputFlag == false)
{
die( "Problem with your registration info. "
."Please go back and try again.");
}
// Fields are clear, add user to database
// Setup query
$q = "INSERT INTO `dbUsers` (`username`,`password`,`email`) "
."VALUES ('".$_POST["username"]."', "
."PASSWORD('".$_POST["password"]."'), "
."'".$_POST["email"]."')";
// Run query
$r = mysql_query($q);
// Make sure query inserted user successfully
if ( !mysql_insert_id() )
{
die("Error: User not added to database.");
}
else
{
// Redirect to thank you page.
Header("Location: register.php?op=thanks");
}
} // end if
//The thank you page
elseif ( $_GET["op"] == "thanks" )
{
echo "<h2>Thanks for registering!</h2>";
}
//The web form for input ability
else
{
echo "<form action=\"?op=reg\" method=\"POST\">\n";
echo "Username: <input name=\"username\" MAXLENGTH=\"16\"><br />\n";
echo "Password: <input type=\"password\" name=\"password\" MAXLENGTH=\"16\"><br />\n";
echo "Email Address: <input name=\"email\" MAXLENGTH=\"25\"><br />\n";
echo "<input type=\"submit\">\n";
echo "</form>\n";
}
// EOF
?>
Step 4: Login
login.php
Now in PHP, first we need to check the username and password against the information stored in the database. Since when the user registered, we encrypted their password using the MySQL PASSWORD() function, we re-encrypt the password the user supplied in the login form and cross-check this with the existing value in the dBase. If login information is O.K., then we need to use sessions to store the user's ID so they can access member-only content.
CODE
<?php
session_start();
// dBase file
include "dbConfig.php";
if ($_GET["op"] == "login")
{
if (!$_POST["username"] || !$_POST["password"])
{
die("You need to provide a username and password.");
}
// Create query
$q = "SELECT * FROM `dbUsers` "
."WHERE `username`='".$_POST["username"]."' "
."AND `password`=PASSWORD('".$_POST["password"]."') "
."LIMIT 1";
// Run query
$r = mysql_query($q);
if ( $obj = @mysql_fetch_object($r) )
{
// Login good, create session variables
$_SESSION["valid_id"] = $obj->id;
$_SESSION["valid_user"] = $_POST["username"];
$_SESSION["valid_time"] = time();
// Redirect to member page
Header("Location: members.php");
}
else
{
// Login not successful
die("Sorry, could not log you in. Wrong login information.");
}
}
else
{
//If all went right the Web form appears and users can log in
echo "<form action=\"?op=login\" method=\"POST\">";
echo "Username: <input name=\"username\" size=\"15\"><br />";
echo "Password: <input type=\"password\" name=\"password\" size=\"8\"><br />";
echo "<input type=\"submit\" value=\"Login\">";
echo "</form>";
}
?>
session_start();
// dBase file
include "dbConfig.php";
if ($_GET["op"] == "login")
{
if (!$_POST["username"] || !$_POST["password"])
{
die("You need to provide a username and password.");
}
// Create query
$q = "SELECT * FROM `dbUsers` "
."WHERE `username`='".$_POST["username"]."' "
."AND `password`=PASSWORD('".$_POST["password"]."') "
."LIMIT 1";
// Run query
$r = mysql_query($q);
if ( $obj = @mysql_fetch_object($r) )
{
// Login good, create session variables
$_SESSION["valid_id"] = $obj->id;
$_SESSION["valid_user"] = $_POST["username"];
$_SESSION["valid_time"] = time();
// Redirect to member page
Header("Location: members.php");
}
else
{
// Login not successful
die("Sorry, could not log you in. Wrong login information.");
}
}
else
{
//If all went right the Web form appears and users can log in
echo "<form action=\"?op=login\" method=\"POST\">";
echo "Username: <input name=\"username\" size=\"15\"><br />";
echo "Password: <input type=\"password\" name=\"password\" size=\"8\"><br />";
echo "<input type=\"submit\" value=\"Login\">";
echo "</form>";
}
?>
Step 5: Members Area
members.php
Now that the user has logged in successfully, and has his id, username, and login stored in session variables, we can start working with member-only content. A major thing to remember is that any page you want to carry session data over to you must declare a session_start(); at the top of your code.
CODE
<?php
session_start();
if (!$_SESSION["valid_user"])
{
// User not logged in, redirect to login page
Header("Location: login.php");
}
// Member only content
// ...
// ...
// ...
// Display Member information
echo "<p>User ID: " . $_SESSION["valid_id"];
echo "<p>Username: " . $_SESSION["valid_user"];
echo "<p>Logged in: " . date("m/d/Y", $_SESSION["valid_time"]);
// Display logout link
echo "<p><a href=\"logout.php\">Click here to logout!</a></p>";
?>
session_start();
if (!$_SESSION["valid_user"])
{
// User not logged in, redirect to login page
Header("Location: login.php");
}
// Member only content
// ...
// ...
// ...
// Display Member information
echo "<p>User ID: " . $_SESSION["valid_id"];
echo "<p>Username: " . $_SESSION["valid_user"];
echo "<p>Logged in: " . date("m/d/Y", $_SESSION["valid_time"]);
// Display logout link
echo "<p><a href=\"logout.php\">Click here to logout!</a></p>";
?>
Step 6: Logout
logout.php
Ah, although it would be nice if our user's never left our web sites, we should give them to opportunity to log out and destroy the session variables if they so choose. It's quite easy to do, and you can just copy and paste this one.
CODE
<?php
session_start();
session_unset();
session_destroy();
// Logged out, return home.
Header("Location: index.php");
?>
session_start();
session_unset();
session_destroy();
// Logged out, return home.
Header("Location: index.php");
?>
That's about it!. I used many simple examples hoping that you will learn how the internal systems work so you can expand on them and design a system that's just right for your needs. Have fun!
