documentation assignment 97 03

Internet Databases EJ215008S SID: 0766299

Contents

Page 2 ...................................................................................................Introduction

Page3-9 .................................................................................................Analysis & Design

0-32 ..........................................................................................List of Web Pages & Descriptions

Page 33 .................................................................................................Website Structure

Page 34-52 ............................................................................................Website Screenshots

Page 53-58 ............................................................................................Data Dictionaries

Page 59-63 ............................................................................................Process Descriptions

Page 64-74 ............................................................................................Sample Code

Page 75-76 .................................................................... .......................W3C Validation

Page 77 .................................................................................................Appendices

1 | P a g e

INTERNET DATABASES

EJ215008S

SID: 0766299


Software Documentation

Introduction

I have been asked to complete an assignment to design a user interface for an organisation that

provides a client/server web based application that allows users to buy used cars from dealers

across the UK. The vehicle details are going to be held on a database that can be accessed via

mySQL. Each vehicle had a unique identification number and a list of attributes including make,

model registration number, price and dealer etc.

I wanted to create an interface that was easy to use and user friendly – therefore I need to take into

consideration the users and how the process should be simple. I decided research into current used

car dealer’s websites to give me an idea of what it should look like and how I can make a friendly

interface.

The website I’m creating needs to be able to allow the user to search for a vehicle dependant on

their requirements. Once a user has found a vehicle they then need to be able to continue and

purchase the vehicle if they choose to. Once a user has purchased a vehicle via the website they

need to provide with information when the vehicle will be ready and links to other useful websites

and information. A user also needs to be able to come back to the website and view their order

history in case they need to check up on details of previously purchased cars.

Alongside the website will be an administration panel available for the staff – this will allow them to

login and add, edit or delete cars where required. As well as this they can view a list of current

employees, customers and orders that have been placed on their website. The administration panel

also needs to be user friendly and I need to bear in mind that not all staff may be computer literate.

2 | P a g e


Analysis & Design

I will now outline why I created the website in the way I did and my reasons for choosing the particular layout I went for. When I was first given the task of creating the website I first decided to create a list of exactly what the website needs to do:

Provide a user friendly interface for both users and admin Provide a quick search to list all vehicle with the make selected Allow the users to purchase a vehicle online Users need to be able to view at least 1 image of a vehicle A full description of the vehicle available when the users wants more info A call-back system that enters information into the database if a user has an enquiry The users need to be able to search dependent on make, model, min price, max price as a

minimum The user can view results in pages to provide a user friendly search The user can enter their card details online and be provided with confirmation that they

have purchased the vehicle A user has an account management page that holds their details and they can view details of

their purchase An administration page that allows admin to add, edit, amend records in the database

Once I had an idea of exactly what the website needed to do I then created storyboards of how I want my website to look – this was the first stage of design and therefore I can work along the storyboard to ensure that it meets my design.

Car Search Storyboard

3 | P a g e

BANNER

NAVIGATION

QUICK SEARCH MAIN CONTENT


Once I had created my storyboards it then gave me an idea of exactly how I want my website to look – this makes it easier when creating your website as you have an initial design to work alongside. The reason I chose the design above is because I felt this was the most user friendly design which was not over complicated and would not turn a customer away. Once the user enters the website it’s clearly displayed what the website does and how it works with the navigation clearly displayed at the top of the page.

I also decided to have a quick search on the left hand side which meant with the click of a button a user was automatically taken to a search page with all the following vehicles under the vehicle they had chosen. This meant that whatever page the customer was on they could simply find a vehicle straight away.

The banner at the top of the page includes contact details; meaning whichever page the user is on they can always see how to contact the used car dealers. I also created my own logo for the website with a slogan that looks like the following:

My designs included a nice simple logo clearly highlighting the companies name – I then created a nice simple slogan which customers will remember and therefore hopefully come back to the website. I kept the colours nice and simplistic with bold colours and intend to keep the same colours throughout the whole website.

4 | P a g e

Car Information

- Price- Location- Colour- Reg

IMAGE

Contact Information More Info?


The website I intend to create will have blue and red through the whole website which is consistent and clean looking. The design of the website plays a major part on the users experience and that is why I’ve chosen a simple design with a consistent colour scheme. Through the website I will also include links to car insurance or warranty for example so if the user requires something related to purchasing cars they can do it with a simple click of a button.

I created my website with an intended resolution of 1024 x 768 however I will test my website with other resolutions to ensure that the design does not go out of proportion or links don’t work correctly on a different monitor resolution. I will also test my website on both Internet Explorer and Mozilla Firefox to ensure that it works on both – this is a requirement as a vast amount of internet users now have a variation of internet browsers and the website needs to meet this requirement.

Car Search Process

When a user is trying to find a vehicle they first need to visit the page ‘Car Search’ which is clearly displayed in the website navigation. Once the user is on this page I then need to ensure that the search is easy to use and not confusing.

A screenshot of my car search page:

As you can see there is a nice layout of the search form which is laid across the page horizontally.

Next to the search button you can see that there is a star showing require fields – each form that needs a require input has a red star next to it.

5 | P a g e


Therefore the user must ensure they have selected a make, model, min price and max price to get results from their search. I have also created an information box showing how many results have been displayed therefore if your search is too broad it may bring up 200 results which the user can then shorten by including a specific mileage.

I added colour, mileage, region and registration as optional search criteria as I felt that these may be required by certain users. If a user has a requirement for vehicles in their area they will obviously select their car make and model and then filter the search for cars in the ‘East’ Region. Once a user has searched vehicles they can then clearly see the City whereby the vehicles are located.

Once a user has searched a vehicle they will then be provided with a list of the vehicles that are currently held on the database – the results will look similar to this:

As you can see there is a picture available of the car and information specific to that vehicle. If the user wishes they can click more info and will be taken to a page displaying further information such as the dealership where the vehicle is located. As you can see my results have returned 2 records – if I have more records the results will be sectioned into pages looking like the following:

My results now have 1,2,3,4, 5 displayed across the bottom with an option to select NEXT. This means that there are a total of 5 pages of results and you can select a page you require. The following vehicles have been displayed in price ascending therefore if you wanted the more expensive vehicles of your search you could visit the 5th page. The paging offers a user friendly interface as it means that the user can clearly see which page they are on and they can either go to

6 | P a g e


the next page or visit a particular page – once they are on page 2 for example they can also click PREV which will take them to the previous page.

If a user wishes to select they the following vehicle they can click more info which will take them to a page which look like the following:

Firstly when a user has click more info for that vehicle they can easily go back to their search results with a click of the button. The top left hand corner says ‘Back to Search’ once this is clicked it goes back 1 page to search results they had previously visited.

As I mentioned previously I have kept consistent colour with blue/red text for the price and telephone number. This is shown in a slightly larger font so that it stands out from the information displayed.

As you can see the page displays further information than the users initial search – they can now see the vehicles dealer information and they are given the choice to buy the vehicle.

The following page is what the user will be displayed with if they wish to purchase the vehicle. As you can see the vehicle details are displayed at the top and payment information can be entered.

7 | P a g e


As before I have kept a navigation that allows the user to go back to the page they were on previously. I have kept the page design simple and user friendly and its clearly understandable where the information needs to be entered – I also decided that when a user purchases a vehicle it automatically registers them as a Customer and therefore provides them with a login.

Administration Panel

8 | P a g e


As you can see my administration panel offers an easy to use interface with buttons that take the admin to the relevant page they require. Once the user has clicked a button for example ‘Customers’ they can see all their customers or they can search for a specific customer. Records can be deleted, amend or added as required.

Having an easy to use administration panel is a must – purely because as I mentioned above not all of the staff using this may be computer literate therefore they need to be able to understand how the system does exactly what it should. Having large buttons showing clearly what they do means anyone can understand how they can view the page they require.

I have also offered a button to logout which is clearly visible and will take that person away from the administration page.

9 | P a g e


List of Web Pages & Descriptions

cmHome.html

This page is the homepage where the user first visits – as you can see it offers a welcome page that tells the customer what the website does and how they can do it. It’s straight to the point and with a good use of simple colours looks attractive. Once the user has visited cmHome.html they can then visit all pages listed in the navigation above.

10 | P a g e


cmWarranty.html

cmWarranty.html is an information page which offers the customer an outside link to warranty direct. When a user is purchasing a vehicle they may want warranty and this page meets the user’s requirements. The user is also offered information and why it’s important to have warrant on a vehicle.

Although this page does take the user away from their initial location it does allow a form of advertising which means that warranty direct would be able offer advertising in return or pay per click generating an income for Car Mania.

11 | P a g e


cmAbout.html

As before cmAbout.html offers an information only page which displays how and when the company was launched and the services that it provides. It also has the companies address details and opening times which may be useful to the customer.

12 | P a g e


cmContact.html

As you can see this page is dedicated to offering the customer information on how to contact Car Mania. The address details are shown alongside telephone number, fax number and email address.

The email is used as a hyperlink and automatically opens up Outlook Express allowing the user to contact Car Mania via-email communications.

The request a call-back button opens a pop-up window whereby the user can enter details of the enquiry they have and Car Mania will then call the customer back (this system is explained later on).

Callback.php

As you can see the popup offers the user to fill in a form which the user can then select a time they wish to be contacted. Once the user has clicked Submit the details will be entered into Car Mania’s database where they can then contact the customer.

13 | P a g e


If the user clicks ‘E-mail Us’ it will once again open outlook express and allow the user to contact Car Mania via e-mail. They can also click online vehicle search will take them to the vehicle search page to find a vehicle. If the user clicks ‘Directions to Car Mania’ it opens the following file:

images/location.jpg

This will look like the following to the user:

cmLogin.php

14 | P a g e


As you can see this page is a .php page therefore it actually process information rather than just displaying it. This page has a login for both the Customer and an Administrator with a button to be clicked. If a customer enters their E-mail address and Password and clicks login it will process their login details and take them to a secured login page (this will be explained later).

As above for the Administrator they can also enter their username and password and login to the administration panel which will be explained later.

cmSearchQuick.php

15 | P a g e


The above page offers a quick search function for the users – this is displayed on the left hand side of the webpage and the above shows the results if a user clicks Alfa Romeo. This page also allows the user to then search other vehicles which will revert to cmSearch.php which I’ll explain below.

cmSearch.php

16 | P a g e


This page is where the user can search for a vehicle dependent on their requirements. For example they make be looking for a Vauxhall Corsa – therefore they select a make ‘Vauxhall’ and select a model ‘Corsa’ they then need to set a min and max price.

Once they have entered these details into the forms they can click search and the results will be displayed below.

This would look something like this:

The user can then click More Info which takes them to the following

17 | P a g e


page: Blank.php

As you can see this page displays the vehicle details in further details and offers the customer to enter their information if they wish to get someone to call them back. The user also has ‘Back to Search’ available which will take them back to their initial search page.

The user from here can then click ‘Buy Now!’ which will take them to the page where they can purchase the vehicle.

18 | P a g e


Buy.php

This page displays the vehicle details in a professional manner and the amount that is required to be paid by the customer. Underneath the vehicle details is the payment information whereby if the user enters all this information they have completed the purchase of the vehicle. If the user wishes to not proceed they can simply click ‘Back to Car’ which will take them back a page. However, if they wish to go ahead and purchase the vehicle they fill in all the information and click the submit button.

When they click submit they get the following message:

This was a requirement in my specification therefore if the user clicks ok their details will be submitted – however they can click cancel and the transaction won’t go ahead.

19 | P a g e


buyConfirm.php

This page is the confirmation of the customer purchase and thanks them for buying with Car Mania. As you can see it details a list of the information that is required for the user to bring along with them and how long the vehicle will take until it’s ready.

The user is told that they are now able to login with their email address and password. The page also includes links to insurance and warranty to help the user with purchasing their vehicle.

I will now show you the Customer Login Administration Panel.

20 | P a g e


cmLoginCust.php

The above page shows the user’s personal details that they used when they purchased their vehicle. As you can see their personal details are first displayed with their account details used and the vehicle identification number. The reason for including this is because if they wish to query the vehicle they have purchased they can reference it with the identification number.

The user can then choose Order History which shows their purchased vehicle: cmLoginCust2.php

21 | P a g e


cmLogin2.php

This page is the administration page which allows the staff of Car Mania to make amendments to their system in an easy to use interface. The first selection we have is Customers which will open

cmLoginCustomer.php

The above page allows the user to search for a customer based upon their e-mail address. The results would be displayed as below if we search for [email protected]:

22 | P a g e

mailto:[email protected]


23 | P a g e


cmLoginCustomer2.php

This is the page where the user can add or delete a current customer. They can simply add a customer by filling in the details of the form on the left hand side. They can also simply delete a customer by entering their e-mail address as this is a unique way of identifying a customer. Once a user has clicked submit they get confirmation the process has been completed.

24 | P a g e


cmLoginCustomer3.php

This page allows the user to edit a customer’s personal or bank information which is currently held on the database. This is done by filling in all fields on the form and clicking amends which will update the records as required. The e-mail address is once again a unique identifier as each customer’s email address will be unique to that individual.

25 | P a g e


cmLoginCars.php

This page allows the admin staff to view cars that currently exist on their database by selecting a make and clicking ‘View’. The results are displayed in a paged table allowing the user to browse through the selected vehicles as they require.

26 | P a g e


cmLoginCars2.php

The Add/Delete cars page looks like the following and gives the user the ability to simply add a vehicle or delete a vehicle with a user friendly interface. A vehicle can be added by completing all details on the form and then clicking add – a confirmation will be displayed providing the process has worked. As with deleting a car the user simply types the car number and clicks ‘delete’ this will then confirm the car has been deleted.

27 | P a g e


cmLoginCars3.php

The following page allows the administrator to be able to edit vehicles information – they firstly enter the car number for the field that needs amending and then fill in all of the fields and the record will be updated as required.

28 | P a g e


cmLoginEmployee.php

As you can see the following page allows the admin to view their current employees and they can find a particular employee by searching first name and surname. I thought this would be a useful feature if a manager needed to contact a member of staff for example they could bring up their contact details and ring them or even e-mail them as per their requirements.

29 | P a g e


cmLoginEmployee2.php

The above page is used to simply add or delete an employee on the database. If a new employee joins the company they can type in all their details on the page and then add them to the database. They can also simply delete an employee as this is unique to each employee and will remove them from the database.

30 | P a g e


cmLoginEmployee3.php

The above page is used for the admin to edit an employee’s information – this can be useful if a record needs updating for example an employee changing their telephone number.

31 | P a g e


cmLoginCallback.php

The above webpage corresponds with what I had mentioned earlier regarding customers/users being able to enter details into an enquiry form to request a call-back. These details are then passed to a call back database and the page above displays that information. Once a call-back has been made the user can then simply enter the call-back id and press delete and it will update the database. I felt that this was a very simple and easy to user interface without making things complicated and the details are laid out in a user friendly manner.

32 | P a g e


Website Structure

33 | P a g e


Screenshots of Website

34 | P a g e


35 | P a g e


36 | P a g e


37 | P a g e


38 | P a g e


39 | P a g e


40 | P a g e


41 | P a g e


42 | P a g e


43 | P a g e


44 | P a g e


45 | P a g e


46 | P a g e


47 | P a g e


48 | P a g e


49 | P a g e


50 | P a g e


51 | P a g e


52 | P a g e


Data Dictionaries’

Data Dictionary

Table Name: PurchasesTable Description: Holds the customer details and purchase history

Entity Description Data Type

Length Extra Validation Primary/Foreign Key

purchaserID Table Unique ID int 5 Auto Increment

Only a 5 digit number can be entered, each time a new records added the previous

purchaserID increases by 1Primary Key

Title Customer Title char 5 Maximum of 5 characters, letters only valid.

First_name Customer First Name char 15 Maximum of 15 characters, letters only valid

Surname Customer Surname char 15 Maximum of 15 characters, letters only valid

DOB Customers Date of Birth

date Data only accepted in Date format only (YYYYMMDD)

Telephone Customers contact telephone number

varchar 20 Maximum of 20 characters, letters and numbers accepted

Address1 1st line of address varchar 30 Maximum of 30 characters, letters and

numbers both accepted

Address2 2nd line of address varchar 30 Maximum of 30 characters, letters and numbers both accepted

City City where customer lives

char 15 Maximum of 15 characters, letters only valid

Postcode Customer Postcode varchar 8 Maximum of 8 characters, letters and numbers accepted

53 | P a g e


Email Customer e-mail address

varchar 30 Maximum of 30 characters, letters and numbers both accepted

Password Customers account password


Card_type Customer credit card type


Card_no Customer credit card number

bigint 30 Maximum of 30 characters, numbers only valid

Card_expiry Customer card expiry date


carNoThe unique carNo

that the customer has purchased

int 5 Maximum 5 characters, numbers only valid Foreign Key

54 | P a g e


Data Dictionary

Table Name: EmployeesTable Description: Holds the details of all employees/staff



Email Employees Email Address

varchar 26 Email is unique to employee therefore a

primary key - maximum 26 characters allowed numbers or letters

Primary Key

Title Employees Title char 4 Maximum of 4 characters, letters only valid

First_name Employees First Name


Surname Employees Surname char 12 Maximum of 12 characters, letters only valid

DOB Employees DOB date Date format entry only (YYYYMMDD)

Position Position within the business


Address1 First line of address varchar 16 Maximum of 16 characters, letters and numbers both valid

Address2 Second line of address

varchar 16 Maximum of 16 characters, letters and numbers both valid

City Employees City char 12 Maximum of 12 characters, letters only valid

Postcode Employees Postcode varchar 8 maximum of 8 characters, letters and numbers both valid

Home_number Home contact telephone number

int 15 Maximum of 15 characters, numbers only valid

Mob_number Mobile contact telephone number

int 15 Maximum of 15 characters, numbers only valid

55 | P a g e


Data DictionaryTable Name: AdminTable Description: Administrators information stored in this table



AdminID Administrator Unique Identifier

int 5 Auto Increment

Maximum 5 character numbers only - each record is incremented by 1 from the

previous recordPrimary Key

Name Admin Name varchar 15 Maximum of 15 characters, numbers and letters both valid

Password Admin Password varchar 15 Maximum of 15 characters, numbers and letters both valid

56 | P a g e


Data DictionaryTable Name: CallbackTable Description: Details stored for callback requests from customers



callbackID Callback Unique Identifier

tinyint 4 Auto Incremement

Maximum of 4 numbers only - callbackID is unique therefore a Primary Key

Primary Key

Title Customers Title char 4 Maximum of 4 characters, letters only valid

First_name Customers First Name


Surname Customers Surname char 12 Maximum of 12 characters, letters only valid

Telephone Customers contact telephone number

varchar 13 Maximum of 13 characters, letters and numbers both valid

Contact Time to be contacted varchar 20 Maximum of 20 characters, letters and numbers both valid

EnquiryWhat the callback

request was regarding

varchar 40 Maximum of 40 characters, letters and

numbers both valid

Data Dictionary

57 | P a g e


Table Name: CarsTable Description: Stores all the records for the cars and there information



carNo Unique Identifier for each car

int 11 Auto Increment

Maximum 11 characters, numbers only valid

Primary Key

make Car Make varchar 10 Maximum of 10 characters, numbers and letters both valid

model Car Model varchar 15 Maximum of 15 characters, numbers and letters both valid

Reg Car Registration Letter char 1 1 character only valid

colour Cars Colour varchar 10 Maximum of 10 characters, numbers and letters both valid

miles Car Mileage varchar 6 Maximum of 6 characters, numbers and letters both valid

price Car Price int 11 Maximum of 11 characters, numbers only valid

dealer Dealers Location varchar 50 Maximum of 50 characters, numbers and letters both valid

town Location of vehicle varchar 20 Maximum of 20 characters, numbers and letters both valid

telephone Contact telephone number varchar 15 Maximum of 15 characters, numbers and letters both valid

description Car Description varchar 30 Maximum of 30 characters, numbers and letters both valid

region Region of cars location varchar 10 Maximum of 10 characters, numbers and letters both valid

picture Picture directory varchar 50 Maximum of 50 characters, numbers and letters both valid

pictureL Large picture directory varchar 50 Maximum of 50 characters, numbers and letters both valid

58 | P a g e


Process Descriptions

59 | P a g e


60 | P a g e


61 | P a g e


62 | P a g e


63 | P a g e


Sample Code

JavaScript for random image generator

<script language="JavaScript">

var theImages = new Array()

theImages[0] = 'images/topLeftLogo.jpg'

theImages[1] = 'images/topLeftLogo2.jpg'

theImages[2] = 'images/topLeftLogo3.jpg'

var j = 0

var p = theImages.length;

var preBuffer = new Array()

for (i = 0; i < p; i++){

preBuffer[i] = new Image()

preBuffer[i].src = theImages[i]

}

var whichImage = Math.round(Math.random()*(p-1));

function showImage(){

document.write('<img src="'+theImages[whichImage]+'">');

}

</script>

64 | P a g e


Dynamic Drop Down JavaScript

<SCRIPT language=JavaScript>

function reload(form)

{

var val=form.cat.options[form.cat.options.selectedIndex].value;

self.location='cmSearch.php?cat=' + val ;

}

</script>

Dynamic Drop Down PHP

<?php

$dbservertype='mysql';

$servername='localhost';

$dbusername='root';

$dbpassword='';

$dbname='cars';

connecttodb($servername,$dbname,$dbusername,$dbpassword);

function connecttodb($servername,$dbname,$dbuser,$dbpassword)

{

global $link;

$link=mysql_connect ("$servername","$dbuser","$dbpassword");

if(!$link){die("Could not connect to MySQL");}

mysql_select_db("$dbname",$link) or die ("could not open db".mysql_error());

}

@$cat=$_GET['cat'];

65 | P a g e


$quer2=mysql_query("SELECT DISTINCT make FROM cars ORDER BY make");

if(isset($cat) and strlen($cat) > 0){

$quer=mysql_query("SELECT DISTINCT model FROM cars where make='$cat' order by model");

}else{$quer=mysql_query("SELECT DISTINCT model FROM cars order by model"); }

echo "<form method=get name=f1 action='cmSearch.php'>";

echo "<select name='cat' onchange=\"reload(this.form)\"><option value=''>Select Make &nbsp</option>";

while($noticia2 = mysql_fetch_array($quer2)) {

if($noticia2['make']==@$cat){echo "<option selected value='$noticia2[make]'>$noticia2[make]</option>"."<BR>";}

else{echo "<option value='$noticia2[make]'>$noticia2[make]</option>";}

}

echo "</select><font color=red size=2>*</font>";

echo "<select name='subcat'><option value=''>Select Model &nbsp </option>";

while($noticia = mysql_fetch_array($quer)) {

echo "<option value='$noticia[model]'>$noticia[model]</option>";

}

echo "</select><font color=red size=2>*</font>";

?>

66 | P a g e


PHP Pagination for Search results

<?PHP

$searchmake = $_GET['cat'];

$searchmodel = $_GET['subcat'];

$minprice = $_GET['searchpricemin'];

$maxprice = $_GET['searchpricemax'];

$colour = $_GET['searchColour'];

$mileage = $_GET['searchMileage'];

$region = $_GET['searchRegion'];

$reg = $_GET['searchReg'];

$page_name="cmSearch.php";

@$column_name=$_GET['column_name'];

$start=$_GET['start'];

if(!($start > 0)) {

$start = 0;

}

$eu = ($start - 0);

$limit = 6;

$this1 = $eu + $limit;

$back = $eu - $limit;

$next = $eu + $limit;

67 | P a g e


$query2=" SELECT * FROM cars WHERE make LIKE '$searchmake' AND model LIKE '$searchmodel' AND Reg LIKE '$reg' AND price BETWEEN '$minprice' AND '$maxprice' AND colour LIKE '$colour' AND miles < '$mileage' AND region LIKE '$region'";

$result2=mysql_query($query2);

echo mysql_error();

$nume=mysql_num_rows($result2);

$query=" SELECT * FROM cars WHERE make LIKE '$searchmake' AND model LIKE '$searchmodel' AND Reg LIKE '$reg' AND price BETWEEN '$minprice' AND '$maxprice' AND colour LIKE '$colour' AND miles < '$mileage' AND region LIKE '$region' ORDER BY price ASC";

if(isset($column_name) and strlen($column_name)>0){

$query = $query . " order by $column_name";

}

$query = $query. " limit $eu, $limit ";

$result=mysql_query($query);

echo mysql_error();

echo "Total number of Records Returned = $nume";

echo "<table border=0 width=100%>";

while($noticia = mysql_fetch_array($result))

{

if($bgcolor=='#ffffff'){$bgcolor='#ffffff';}

else{$bgcolor='#ffffff';}

echo "<tr >";

echo "<td align=left height=2px colspan=5 BGCOLOR=#F8F8F8 id='title'> <font face='Verdana' color='#A00000' size='2'> <center><b><u>$searchmake $searchmodel</center></b></u></font></td>";

echo "<tr >";

68 | P a g e


echo "<td align=left rowspan=5 bgcolor=$bgcolor id='title'> <font face='Verdana' size='2'><img src='$noticia[picture]'</font></td>";

echo "<tr >";

echo "<td align=left bgcolor=$bgcolor id='title'> <font face='Verdana' size='2'>$noticia[Reg] reg - $noticia[colour] - $noticia[description] - $noticia[miles] miles</font></td>";

echo "<tr >";

echo "<td align=left bgcolor=$bgcolor id='title'> <font face='Verdana' size='2'>Location: $noticia[town] </font></td>";

echo "<tr >";

echo "<td align=left colspan=3 bgcolor=$bgcolor id='title'> <font face='Verdana' color='red' size='3'><u>Price:£$noticia[price]</u></font></td>";

echo "<tr >";

echo "<td align=right bgcolor=$bgcolor id='title'> <font face='Verdana' size='2'><a href='blank.php?carNo=".$noticia['carNo']."'>More Info???</a></font></td>";

echo "</tr>";

}

echo "</table>";

echo "<table align = 'center' width='50%'><tr><td align='left' width='30%'>";

if($back >=0) {

print "<a href='$page_name?start=$back&column_name=$column_name&cat=$searchmake&subcat=$searchmodel&searchpricemin=$minprice&searchpricemax=$maxprice&searchColour=$colour&searchMileage=$mileage&searchRegion=$region&searchReg=$reg'><font face='Verdana' size='2'>PREV</font></a>";

}

echo "</td><td align=center width='30%'>";

$i=0;

$l=1;

for($i=0;$i < $nume;$i=$i+$limit){

69 | P a g e


if($i <> $eu){

echo "<a href='$page_name?start=$i&column_name=$column_name&cat=$searchmake&subcat=$searchmodel&searchpricemin=$minprice&searchpricemax=$maxprice&searchColour=$colour&searchMileage=$mileage&searchRegion=$region&searchReg=$reg'><font face='Verdana' size='2'>$l</font></a> ";

}

else { echo "<font face='Verdana' size='4' color=red>$l</font>";}

$l=$l+1;

}

echo "</td><td align='right' width='30%'>";

if($this1 < $nume) {

print "<a href='$page_name?start=$next&column_name=$column_name&cat=$searchmake&subcat=$searchmodel&searchpricemin=$minprice&searchpricemax=$maxprice&searchColour=$colour&searchMileage=$mileage&searchRegion=$region&searchReg=$reg'><font face='Verdana' size='2'>NEXT</font></a>";}

echo "</td></tr></table>";

?>

Callback PHP which enters information into database

<?php

70 | P a g e


if($_POST['submit']) //If submit is hit

{

mysql_connect("localhost","root","");

mysql_select_db("cars");

$title = $_POST['Title'];

$first_name = $_POST['First_name'];

$surname = $_POST['Surname'];

$telephone = $_POST['Telephone'];

$contact = $_POST['Contact'];

$adlinfo = $_POST['Adlinfo'];

if($first_name==''){

echo"Please enter the Firstname<br>";

}

if($surname==''){

echo"Please enter the Surname<br>";

}

if($telephone==''){

echo"Please enter the DOB<br>";

}

else{

$result=MYSQL_QUERY("INSERT INTO callback (Title,First_name,Surname,Telephone,Contact,Enquiry)".

"VALUES ('$title', '$first_name', '$surname', '$telephone', '$contact', '$adlinfo')");

echo " Enquiry submitted succesfully!";

71 | P a g e


}

}

?>

Logon PHP to check username and password match details held in database

<?php

session_start();

$host="localhost"; // Host name

$username="root"; // Mysql username

$password=""; // Mysql password

$db_name="cars"; // Database name

$tbl_name="admin"; // Table name

mysql_connect("$host", "$username", "$password")or die("cannot connect");

mysql_select_db("$db_name")or die("cannot select DB");

$_SESSION['name'] = $_POST['name'];

$myusername = $_SESSION['name'];

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

$mypassword = $_SESSION['password'];

$myusername = stripslashes($myusername);

72 | P a g e


$mypassword = stripslashes($mypassword);

$myusername = mysql_real_escape_string($myusername);

$mypassword = mysql_real_escape_string($mypassword);

$sql="SELECT * FROM $tbl_name WHERE name='$myusername' and password='$mypassword'";

$result=mysql_query($sql);

$count=mysql_num_rows($result);

if($count==1){

ob_start();

header("Location: cmLogin2.php");

ob_flush();

}

else {

header("Location: login_failed.html");

}

exit;

?>

Logout PHP code

<?

73 | P a g e


session_start();

session_destroy();

header("Location: cmHome.html");

?>

W3C CSS Validation

74 | P a g e


To check that my website was W3C compliant I uploaded my styles.css to http://jigsaw.w3.org/css-validator/

The result of my test were as follows:

Styles.css

body { background-color : white; } h4 { color : #1313ad; font-family : verdana; } p { font-family : verdana; } a { text-decoration : none; } a:hover { font-weight : bold; } li { list-style : square inside; color : blue; } .blacktext { color : black; font-family : verdana;

75 | P a g e

http://jigsaw.w3.org/css-validator/

http://jigsaw.w3.org/css-validator/


} div#headerText { font-size : 50px; } div#headerText2 { font-size : 15px; } div#header { background : url(images/header.jpg) no-repeat top; } div#topLine { background : url(images/topLine.jpg) no-repeat top; } div#lowerLine { background : url(images/lowerLine.jpg) no-repeat top; } div#leftMenu { background : url(images/leftMenu1.jpg) no-repeat top; } div#leftMenu2 { background : url(images/leftMenu2.jpg) no-repeat top; } div#rightMenu { background : url(images/rightMenu.jpg) no-repeat top; } div#rightMenu2 { background : url(images/rightMenu2.jpg) no-repeat top; } div#rightMenu3 { background : url(images/rightMenu3.jpg) no-repeat top; } div#rightMenu4 { background : url(images/rightMenu4.jpg) no-repeat top; } div#rightMenuS { background : url(images/rightMenuS.jpg) no-repeat top; } div#topLeftLogo { background : #ffffff; } div#quicksearch { background : url(images/quicksearch.jpg) no-repeat top; } #banner { display : block; }

76 | P a g e


Appendices

Included at the back of my documentation you will find my notes that have been taking for the

duration of my studies – each week I have continued to note down things in lesson and pieces of

code I had found useful.

All of my notes had been written in lectures and the code has been printed when I’ve found working

examples of what I had been looking for.

77 | P a g e

documentation assignment 97 03

Documents

user friendly design

user interface

design page

user friendly search

vehicle details

user friendly interface

website im

vehicle online users