Registered Users Area

In this tutorial I’ll be teaching you how to create a very basic registered users area, or a ‘members’ area.

Please bear in mind that this is only good for two or three users; this isn’t intended to actually be used on a website with lots of users.
The intention of this tutorial is to teach people more about PHP, and how it can be used.

Creating the HTML of login form..

OK, so we’ll start by creating a page called ‘index.php’. This will be where we place our login form.

Start by adding a form like this:

 <form action="login.php" method="post">

</form>

This means the form is pointing to the ‘login.php’ page (action=”login.php”), meaning when the ‘submit’ button is pressed, the script (or code) on the ‘login.php’ page will run.

Our form also has the method of ‘post’, which basically means the form will store the information of the two fields (what the user enters into the two fields), when the submit button is pressed. So we can then call for the information (more on this later).

We’ll now add two fields to the form – a ‘username’ field, and a ‘password’ field:

<form action="login.php" method="post">

	Username: <input type="text" name="username" />
	Password: <input type="password" name="password" />
	<input type="submit" value="Submit" />

</form>

You’ll see that in the first field, the type is ‘text’, and in the second it’s ‘password’. This is so that the password field is starred out. The two name attributes are just the names of the fields – we use the name of the field to call the value of the field (what the user typed into the field).

That’s our index page done. Now, onto the ‘login.php’ page..

Enabling the user to login..

We’ll start by adding the PHP tags:

<?php

?>

And then an in-built function called ‘session_start’:

<?php

session_start();

?>

This will start the user’s session, and when the browser is closed, or the ‘login.php’ page is closed, the session ends. This can also be done manually, by logging out, which we’ll come to later.

Now, we will add two variables, one named ‘username’, which will be the the value of the ‘username’ field (meaning this ‘username’ variable’s value will be whatever the user typed into the ‘username’ field, if that makes sense?). And the other variable will be called ‘password’, and that will be the value of the ‘password’ field. Doing this means that we don’t have to write ‘$_POST['username']‘ every time, instead we can write ‘$username’, because the ‘username’ variable has the value of ‘$_POST['username']. And the same with the ‘password’ variable.

<?php

session_start();

$username = $_POST['username'];
$password = $_POST['password'];

?>

This is where the post method comes in: the ‘$_POST’ bit (in a way,) links to the form on the ‘index.php’ page. The ‘['username']‘ part specifies which field we want to call.

Next, we’ll add an if statement: our condition will be if the variable ‘username’ is equal to a username, in this case ‘owen’, and the variable ‘password’ is equal to a password, in this case ‘pass123′, we want to echo out a message:

<?php

session_start();

$username = $_POST['username'];
$password = $_POST['password'];

if ($username=="owen"&&$password=="pass123")
	echo "Welcome!";

?>

We can take this one step further by echoing out “Welcome, $username.”, which will display “Welcome, owen.”:

<?php

session_start();

$username = $_POST['username'];
$password = $_POST['password'];

if ($username=="owen"&&$password=="pass123")
	echo "Welcome, $username.";

?>

To capitalise ‘owen’, we can wrap this font tag around the ‘username’ variable:

<?php

session_start();

$username = $_POST['username'];
$password = $_POST['password'];

if ($username=="owen"&&$password=="pass123")
	echo "Welcome, <font style='text-transform: capitalize;'>$username.</font>";

?>

So we’ve got our ‘if’ covered, now for the ‘else’ (if the condition isn’t true), we’ll echo out a message “Wrong username or password. Try again?“. The ‘Try again’ link will direct the user back to the index page, (where the form is), so they can try again.

<?php

session_start();

$username = $_POST['username'];
$password = $_POST['password'];

if ($username=="owen"&&$password=="pass123")
	echo "Welcome, <font style='text-transform: capitalize;'>$username.</font>";

else
	echo "Wrong username or password. <a href='index.php'>Try again?</a>";

?>

Upload the two pages to your server, and log in. If your username and password is correct, you’ll be greeted with “Welcome, Owen (Owen’s my username, yours will be displayed in its place.)”. And if you get your username or password wrong, you’ll get this: “Wrong username or password. Try again?”.

Enabling the user to logout manually..

We now need to be able to logout.

‘session_start();’ starts the session, and ‘session_destroy();’ ends the session.

We’ll firstly add a logout link when a user logs in:

<?php

session_start();

$username = $_POST['username'];
$password = $_POST['password'];

if ($username=="owen"&&$password=="pass123")
	echo "Welcome, <font style='text-transform: capitalize;'>$username.</font> <a href='logout.php'>Log out?</a>";

else
	echo "Wrong username or password. <a href='index.php'>Try again?</a>";

?>

And we now need to create a new page: ‘logout.php’, where we’ll start the session, end the session, and then echo out a message letting the user know that they’ve been logged out:

<?php

session_start();

session_destroy();

echo "You've been logged out.";

?>

Adding multiple users..

Finally, to add another user, you simply use the ‘or’ operator (||), like so:

<?php

$username = $_POST['username'];
$password = $_POST['password'];

if ($username=="owen"&&$password=="pass123"||$username=="john"&&$password=="passabc")
	echo "Welcome, <font style='text-transform: capitalize;'>$username.</font> <a href='logout.php'>Log out?</a>";

else
	echo "Wrong username or password. <a href='index.php'>Try again?</a>";

?>

The new user I created has a username of ‘john’, and a password of ‘passabc’.

That’s it! You’ve created your own mini ‘members area’!