Project journal

Here is some useful research information that was used for the initial report:

I have deternimed that I will need to use the following technologies when building the website -

PHP: This will be what is mainly used in my website. PHP is a general-purpose server-side scripting language originally designed for Web development to produce dynamic Web pages. It is because of this that I will be using PHP as the main scripting language to create the login and registering system on the website.

MySQL: MySQL is the world's most used relational database management system that runs as a server providing multi-user access to a number of databases. The SQL phrase stands for Structured Query Language. This will be used in my website to store the usernames and passkeys to the users login.

HTML: HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.

The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

JavaScript: JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. I will be using JavaScript mainly for the area where the user has to click on the colour. The JavaScript will execute when the colour is clicked and enter the relevant code into the password box where it is hashed and then stored in the SQL database.

As I do not have much previous experience with any of these coding languages and technologies, I will have to learn most of this from scratch. I believe that this could be time consuming, so I will be using tutorials on the internet to help guide me through this website development. I am aware that the marks from the project do not come from the website development and more so from the analysis of the results, hence why I do not wish to spend too much time on the development.

Useful HTML5 login page that could be used:

I have come accross a paper that is called User Perceptions Towards the Use of Colour as Authentication Method: Focus on FTMSK Lecturer. This paper details the method that was use to investigate user perception towards the CBA system. The method this website details also set-up a website in a similar fashion to what I have planned. Link - http://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=4580557&tag=1

I will be using this report as a reference and guide on how to setup my protype website in a similar fashion.

I have come across some html/php code for a simple login form for the website. I will be able to modify this code to enable me to use a Javascipt based CBA system that I will develop.


I have now setup the website hosting on www.000webhost.com, which includes a free MySQL database that can be used for the website.

I have made some good progress on the website and have setup the website using the domain www.cbatest.freeiz.com. This website currently has a register and login system that communicates with an SQL server to store and access the users details. It is currently in a basic form but will soon be fine tuned to add the Javascript code and CBA system. My next step is to fine-tune the website to make is more user friendly and then decide on the colours that will be used for the user to choose from when logging on.

Below I have included a bit more detail to show what stage I am up to.

Currently the website compromises of 5 webpages. These are the following:

Of these five web pages, the dbConfig.php is one which isn't viewable to the users as it only contains php code relating to where teh SQL databse is stored. The code for this page is:
$host="mysql15.000webhost.com"; // Host name
$username="a1161487_james"; // Mysql username
$password="w3stwood"; // Mysql password
$db_name="a1161487_member"; // Database name

// Connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("Sorry, cannot connect to database");
mysql_select_db("$db_name")or die("cannot select DB");

In this code, you can see the database name and host name, as well as the username and password needed to access the database. There will not be too much security on this website as it is not my main priority. The marks for the project do not lie within the website design, and there will also not be any personal information stored on the database fro anyone to access. This is purely just for testing purposes and giving users an idea of what colour based authentication is like.

The main bulk of the code lies in the Register.php file, which looks like this currently:

// 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;
   $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 `users` (`username`,`password`,`email`)"
   ."VALUES ('".$_POST["username"]."', "
   ."PASSWORD('".$_POST["password"]."'), "
 //  Run query
 $r = mysql_query($q);
 // Make sure query inserted user successfully
 if ( !mysql_insert_id() )
   die("Error: User not added to database.");
   // 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
 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=\"255\"><br />\n";
 echo "Email Address: <input name=\"email\" MAXLENGTH=\"25\"><br />\n";
 echo "<input type=\"submit\">\n";
 echo "</form>\n";
// EOF

This produces a webpage that looks like below:


Although fairly unremarkable, it does the job and what I need it to do. It currently inputs the values entered into the form into the following MySQL database:


This is still early stages and I may decide to remove the email address as it is not really needed in this test website. The next stage will be to work out the JavaScript code to input text into the password filed when an image is clicked.


I have now completed the website stage of project and will now undergo testing. I've made a few major changes to how the database works and the layout of the website. I will now go onto detail these changes below:

First off, the hosting of the website has been sorted and is found on www.000webhost.com. The URL of the website has been set-up as www.cbatest.freeiz.com. The reason for choosing this is because it was free when choosing to host with 000webhost, which is an obvious advantage to me. There is no reason to purchase a .com or .co.uk domain as I'm just going to be forwarding people I know to this URL, and I'm not relying on hits from a search engine or worring about the site looking professional.

The main design has changed from previous entry, although the idea is still the same and the same MySQL database is still being used.

Firstly, the main index page was modified to re-direct the user to the register page. From this page the user would be prompted to register their details is it was the first time they've visited. If not there is a link to the login page. The index page to which the website URL www.cbatest.freeiz.com points too has no content and just a re-direct. The code that makes up the page looks like this:

<!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">
<meta HTTP-EQUIV="REFRESH" content="0; url=http://cbatest.freeiz.com/register.php">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colour Based Authentication</title>

Attachment Timestamp Size
register.png 2012-03-29 17:42 3.42 KB
database1.png 2012-03-29 17:42 75.2 KB
list.png 2012-03-29 16:41 4.14 KB