Date post: | 21-May-2015 |
Category: |
Documents |
Upload: | guest01cc44 |
View: | 324 times |
Download: | 0 times |
Internet Databases EJ215008S SID: 0766299
Contents
Page 2 ...................................................................................................Introduction
Page3-9 .................................................................................................Analysis & Design
Page 10-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
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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?
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
23 | P a g e
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
Website Structure
33 | P a g e
Internet Databases EJ215008S SID: 0766299
Screenshots of Website
34 | P a g e
Internet Databases EJ215008S SID: 0766299
35 | P a g e
Internet Databases EJ215008S SID: 0766299
36 | P a g e
Internet Databases EJ215008S SID: 0766299
37 | P a g e
Internet Databases EJ215008S SID: 0766299
38 | P a g e
Internet Databases EJ215008S SID: 0766299
39 | P a g e
Internet Databases EJ215008S SID: 0766299
40 | P a g e
Internet Databases EJ215008S SID: 0766299
41 | P a g e
Internet Databases EJ215008S SID: 0766299
42 | P a g e
Internet Databases EJ215008S SID: 0766299
43 | P a g e
Internet Databases EJ215008S SID: 0766299
44 | P a g e
Internet Databases EJ215008S SID: 0766299
45 | P a g e
Internet Databases EJ215008S SID: 0766299
46 | P a g e
Internet Databases EJ215008S SID: 0766299
47 | P a g e
Internet Databases EJ215008S SID: 0766299
48 | P a g e
Internet Databases EJ215008S SID: 0766299
49 | P a g e
Internet Databases EJ215008S SID: 0766299
50 | P a g e
Internet Databases EJ215008S SID: 0766299
51 | P a g e
Internet Databases EJ215008S SID: 0766299
52 | P a g e
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
Email Customer e-mail address
varchar 30 Maximum of 30 characters, letters and numbers both accepted
Password Customers account password
varchar 12 Maximum of 12 characters, letters and numbers both accepted
Card_type Customer credit card type
char 8 Maximum of 8 characters, letters only valid
Card_no Customer credit card number
bigint 30 Maximum of 30 characters, numbers only valid
Card_expiry Customer card expiry date
varchar 5 Maximum of 5 characters, letters and numbers both accepted
carNoThe unique carNo
that the customer has purchased
int 5 Maximum 5 characters, numbers only valid Foreign Key
54 | P a g e
Internet Databases EJ215008S SID: 0766299
Data Dictionary
Table Name: EmployeesTable Description: Holds the details of all employees/staff
Entity Description Data Type
Length Extra Validation Primary/Foreign Key
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
char 12 Maximum of 12 characters, letters only valid
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
char 16 Maximum of 16 characters, letters only valid
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
Internet Databases EJ215008S SID: 0766299
Data DictionaryTable Name: AdminTable Description: Administrators information stored in this table
Entity Description Data Type
Length Extra Validation Primary/Foreign Key
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
Internet Databases EJ215008S SID: 0766299
Data DictionaryTable Name: CallbackTable Description: Details stored for callback requests from customers
Entity Description Data Type
Length Extra Validation Primary/Foreign Key
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
char 12 Maximum of 12 characters, letters only valid
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
Internet Databases EJ215008S SID: 0766299
Table Name: CarsTable Description: Stores all the records for the cars and there information
Entity Description Data Type
Length Extra Validation Primary/Foreign Key
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
Internet Databases EJ215008S SID: 0766299
Process Descriptions
59 | P a g e
Internet Databases EJ215008S SID: 0766299
60 | P a g e
Internet Databases EJ215008S SID: 0766299
61 | P a g e
Internet Databases EJ215008S SID: 0766299
62 | P a g e
Internet Databases EJ215008S SID: 0766299
63 | P a g e
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
$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  </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   </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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
$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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
}
}
?>
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
Internet Databases EJ215008S SID: 0766299
$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
Internet Databases EJ215008S SID: 0766299
session_start();
session_destroy();
header("Location: cmHome.html");
?>
W3C CSS Validation
74 | P a g e
Internet Databases EJ215008S SID: 0766299
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
Internet Databases EJ215008S SID: 0766299
} 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
Internet Databases EJ215008S SID: 0766299
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