Password Protection Tutorial

How to password protected your pages?

THIS TUTORIAL IS DEPRECATED
WYSIWYG Web Builder 6.0 (and higher) has built-in support for password protected pages!
So if you are not comfortable with writing PHP code then we recommend to use the built-in login tools instead.

In this tutorial we're going to build a login system using WYSIWYG Web Builder and PHP.
This means you need a webhosting account which supports PHP!
Our example will have 4 pages:
1. login.php, this page will display the login form.
2. logout.php, this page can be used to logout.
3. verify.php, this page will verify the username/password combination.
4. protected_page.php, an example of a protected page

1. Creating the login page
a) Add a new page using the Site Manager and change its name to 'login'.
b) Make sure the File Extension in Page Properties is set to 'php'!
c) Add a Form, with these properties:
Name: LoginForm
Action: verify.php
Method: POST
Encoding type: <empty>
d) Add an Editbox and set its name to 'username'.
e) Add another Editbox and set its name to 'password'.
f) Add a Push Button and set the buttontype to 'Submit', change the value to 'Login'.

2. Creating the logout page
a) Add a new page using the Site Manager and change its name to 'logout'.
b) Make sure the File Extension in Page Properties is set to 'php'!
c) Open Page HTML, select the 'Start of Page' tab and enter this code:

<?php
session_start();
session_unset();
session_destroy();
?>

3. Creating the verify page
a) Add a new page using the Site Manager and change its name to 'verify'.
b) Make sure the File Extension in Page Properties is set to 'php'!
c) Open Page HTML, select the 'Start of Page' tab and enter this code:

<?php
$usernames = array("user1", "user2", "user3", "admin");
$passwords = array("password1", "password2", "password3", "admin");
$page = "protected_page.php";

for($i=0;$i<count($usernames);$i++)
{
$logindata[$usernames[$i]]=$passwords[$i];
}

$found = 0;
for($i=0;$i<count($usernames);$i++)
{
   if ($usernames[$i] == $_POST["username"])
   {
   $found = 1;
   }
}
if ($found == 0)
{
   header('Location: login.php?login_error=1');
   exit;
}

if($logindata[$_POST["username"]]==$_POST["password"])
{
   session_start();
   $_SESSION["username"]=$_POST["username"];
   header('Location: '.$page);
   exit;
}
else
{
   header('Location: login.php?login_error=1');
   exit;
}
?>

This is the place to add new users.
To add a new user edit this code:

$usernames = array("user1", "user2", "admin", "new user");

Note that we've added a new user called 'new user'
Make sure you add the user's password (in the same position in the password array):

$passwords = array("password1", "password2", "admin", "new password");

4. Creating a password protected page
a) Add a new page using the Site Manager and change its name to 'protected_page'.
b) Make sure the File Extension in Page Properties is set to 'php'!
c) Open Page HTML, select the 'Start of Page' tab and enter this code:

<?php
session_start();
if(!isset($_SESSION["username"]))
{
   header('Location: login.php');
   exit;
}
?>

This code will check is the user was succesfully logged on, if not it will redirect the user to the login page.

Download this example (.wbs file)

The Ultimate Toolbox for creating amazing web sites!

The Ultimate Toolbox for creating
amazing web sites!