Course Work 1 Report

Benjamin Parmentier pb702
000470957
WEB TECHNOLOGIES (COMP1321)

Coursework 1 (ID # 146057)
http://cms-stu-iis.gre.ac.uk/pb702/gigbookers/index.html
Table of Contents
I. Executive Summary
II. Specifications & Scope
III. Technology Used
IV. References
V. Design/Accessibility Issues
VI. Testing
VII. Search Engine Optimisation
VIII. Appendix
1 | Page
000470957
I. Executive Summary
‘Gigbookers’ has asked us (independent web developer) to create a working

prototype of a new gig booking website to start an e-commerce. Database
creation, accessibility
and design will be the
main key issues in this
report. It will highlight
the original findings and
the final findings to
compare how the
project has evolved.
The design of the

website was crucial as a
lot of people will come
across the website. It
was very important to
design databases that
work well together and
organise data
coherently (right use of
Primary Key, Foreign Key, data type, etc.), but we will see more of this further
down this report.
II. Specifications & Scope
The scope of the project is to create a working website prototype for a

‘Gigbookers’. The prototype should be fully functioning with a selection of
services for both the customers and the administrators; Including php, in order to
interact with the database, MySQL Databases to store personal data, customer-
side website for e-commerce, administrator-side website for updates, some
JavaScript to control what is inserted in the database, and some email functions
with php and asp.
The website created does not allow payment processing and tickets dispatching.
It is fully functioning, containing 4 databases (customers, venues, gigs &
purchases) in order to retrieve personal data. It is a customer front end with an
administrator back end without the e-commerce side of it.
Client side: Administrator side:
- Look for gigs by band, date or venue - Data gathering
2 | Page
000470957
- Display relevant information (availability, time …) - Possible to edit, add or

delete data
- Ticket booking & communication possible - Password enabled admin

area
III. Technology Used
There are different skills and technologies used in order to create the website,
including programming, database, web development, etc:
 PHP (a scripting language originally designed for producing dynamic web

pages)
Connecting & interacting with the database
 MySQL (a relational database management system, ‘RDBMS’ which has

more than 11 million installations. The program runs as a server providing
multi-user access to a number of databases.
Creating the database
 XHTML/HTML (Extended Hypertext Markup Language, a language to create

web pages)
Creating the content of the webpage
 CSS (Cascading Style Sheet, to format and create layout & design of the
web site)
Creating the design & layout of the webpage
 JavaScript (a scripting language widely used for client-side web

development)
Scripting language ton control the data entered in the database (notably clients)
 ASP (Active Server Pages is Microsoft’s first server-side script engine for
dynamically-generated web pages)
In this case, sending emails to the company in order to ease communication with
clients.
3 | Page
000470957
IV. References
 http://i31.photobucket.com/albums/c371/alreadytetty/music-notes.jpg
 http://www.clker.com/cliparts/8/e/b/8/11949848722015671592musical_note_nicu_bucule_0
1.svg.hi.png
 http://portrait.ksa-audio.co.uk/images/admin_shell.jpg
 http://cdn-5.psndealer.com/e2/dealersite/images/ocbuell/email_logo.gif
4 | Page
000470957
 http://www.thenestlings.co.uk/images/streamline%20credit%20card%20_logo.jpg
 http://slyoyster.com/wp-content/uploads/2007/09/elton_john.jpg
 http://www.spiritartists.com/imag
es/artists/oasis.jpg
 http://www.virginmedia.com/images/razorlight-gal-fashionrocks.jpg
 http://www.phpstudio.hu/blog/wp-content/uploads/2008/02/redhot.jpg
5 | Page
000470957
 http://www.abc.net.au/reslib/200710/r191739_722754.jpg
The Terms & Reference have been written based on the terms & conditions of the
following website:
 http://www.ticketmaster.com/h/terms.html?tm_link=tm_homeA_i_terms
V. Design/Accessibility Issues
Accessibility
Nowadays, accessibility is the keyword for the internet. It implies both the
accessibility of the internet and the accessibility of its content.
"The accessibility guidelines address the most important issue, which is

that the site is useful."
The colours scheme used is very basic: a gradient blue background, and a
white container, in order to make it clear enough for visibly impaired
people; the contrast being strong enough.
The use of css eases the accessibility and the layout of the page, as well
as enabling the page to zoom in and out if needed.
6 | Page
000470957
Design
The design of the website is straight forward, simple and easy on the eye.
Not too many colours, ease of navigation (one navigation bar in the
middle), which allows every single page of the site to be connected to
each other. There is no dead end, and some colours and pictures have
been added to the tables and the main page to make it look more
attractive and ‘pretty’ on the eye.
There are 2 sides of the website: the client side, and the admin side, the
admin side being protected by the username and password so no client
can interfere with the data.
Draft
7 | Page
000470957
Header
Navigation
bar
Body
Footer
VI. Testing
Admin login (Username: benjamin; Password: 0000)
8 | Page
000470957
Customers Table:
9 | Page
000470957
Update Customer:
Record updated:
10 | P a g e
000470957
Record Updated:
Send Email:
11 | P a g e
000470957
Choose Email Address (php):
Email sent:
12 | P a g e
000470957
Email Received:
By date:
13 | P a g e
000470957
By artist:
14 | P a g e
000470957
Contact us via email:
JavaScript:
15 | P a g e
000470957
Email sent:
Email received:
16 | P a g e
000470957
Online booking:
17 | P a g e
000470957
Info submitted:
Purchase form:
18 | P a g e
000470957
Purchase details submitted:
Javascript calendar:
19 | P a g e
000470957
VII. Search Engine Optimisation

It is crucial to recognize the importance of SEO (Search Engine Optimisation).
The process of improving rankings in search engine results happens to be tricky
but a few things can be done to try and help improve this. On each page, I have
used the ‘Meta-tags’ in order to make it easier for the public to find the website.
By entering keywords in the meta-tags that people are likely to type in when
researching a gig booking website, it makes it easier to improve the website’s
rankings.
Meta-tags:
<title>Gigbookers Admin - Send Message</title>
<meta name="title" content="Gig Bookers" />
<meta name="author" content="Benjamin Parmentier" />
<meta name="subject" content="Gigs Updates" />
<meta name="language" content="EN" />
<meta name="keywords" content="gigbookers, tickets, concert, online booking,

" />
<meta name="description" content="Gig Bookers is a website that allows

people to book online for gigs and concerts" />
VIII. Appendix
Upload Week 1
Web Technologies Tutorial: Week 1

Benjamin Parmentier
Site’s address: http://cms-stu-iis.gre.ac.uk/pb702/demo_site/index.html
20 | P a g e
000470957
Screenshots:
21 | P a g e
000470957
22 | P a g e
000470957
What have I learned from this tutorial?
Although I already created a few websites, I have only done this through EditPlus
or Dreamweaver, but always from scratch and using html coding. I have realized
you can be even more creative by starting in Photoshop and use design I have
created myself in Photoshop as a body/background, by just using Dreamweaver
to adjust the coding to my design. It is really straightforward and it gives me a
chance to design anything I want to put on my next web site.
23 | P a g e
000470957
Upload Week 2
WEB TECHNOLOGIES
Tutorial II: Forms
Screen Shot of my form on my website:
Coding:
<h1> Contact Form</h1>
<form>
<table border="1">
<tr><td width="148" height="35">Full name</td>
<td width="456"><input type="text" name="name" size="35"/></td></tr>
<tr><td height="35">Email</td>
<td><input type="text" name="email" size="35"/></td></tr>
<tr><td height="35">Create password</td>
<td><input type="password" name="password" size="35"
maxlength="6"/></td></tr>
<tr><td height="55">Address</td>
<td><textarea name="Address" rows="3" cols="30"></textarea></td>
</tr>
<tr><td height="35">Age</td>
24 | P a g e
000470957
<td> 14-19 <input type="checkbox" name="15" value="1" multiple="no"/> 20-

24 <input
type="checkbox" name="20" value="2"/> 25-29 <input type="checkbox"
name="25" value="3"/>
30-39 <input type="checkbox" name="30" value="4"/> 40 up <input
type="checkbox" name="40"
value="5"/></td></tr>
<tr><td height="35">Sex</td>
<td> Male <input type="radio" name="male" value="first"
checked="checked"/> Female <input
type="radio" name="male" value="second"/></td></tr>
<tr><td height="35">Transport mostly used</td>
<td><select name="select">
<option value="Choose...">Choose...</option>
<option value="car">Car (own/taxi)</option>
<option value="bus">Bus</option>
<option value="underground">Underground/Train</option>
<option value="bike">Bike</option>
<option value="walking">Walking</option>
</select></td></tr>
<tr><td height="35"><input type="submit"
value="submit"/></td><td><input type="reset"
value="clear"/></td></tr>
</table>
</form>
Research & evaluation of the competition:

Find 3 other on-line gig ticket sites that are in direct competition to your
client.
Create a document in Word to report your findings.
Use a table to display the data you gather.
SEETICKETS.COM TICKETLINE.CO TICKETMASTER.C

(www.seetickets.com/s .UK O.UK
ee/index. (www.ticketline.c (www.ticketmaster.c
asp?) o.uk) o.uk)
Use of Very good, although Web colour safe, Very simple &
graphics may not easy on straight
please everyone. Good the eye. Good forward, if not too
contrast, nice layout, design minimalistic. Too
easy on overall, may be a much
the use, easy to bit too scrolling on
browse, clear cluttered at some homepage.
and not too cluttered points
although a lot of but clear enough.
information
is available. Modern
design,
works well for who the
site is
aiming at.
Ease of Very good. Good use of Quite easy; Very Ok-ish. Although
25 | P a g e
000470957
Navigation drop good looking

down menus, use of titles, simple, it is quite
highlights, easy search, difficult to
to navigate to wherever drop down menus, get to the
you highlights & information you
want to get to. looking by need. Not very clear,
genres, artist, and
venues, quite spread around.
alphabetical order, Do
etc. not know where to
(sitemap also look
available) when searching or
browsing
something.
Use link
titles?
Use link titles which are
very
useful. Every link No link titles which No link titles which is
describes is frustrating.
where you are about to frustrating.
go.
Browser Very good. Looks the Very good. Looks Very good. Looks the
compatibil same in the same
I.E., Safari & Firefox. same in I.E., Safari in I.E., Safari &
ity
& Firefox.
Firefox.
Special No particular special No particular No particular special

offers offers. special offers. offers.
26 | P a g e
000470957
Accessibili Quite poor. 40 Very good. Only 2 Quite poor. 30

ty accessibility minor problems
problems (absolute font accessibility seen by the
size, issues. accessibility
doctype is not the first checker ‘Etre’.
line of Although
code & dropdown menu there are fewer
option must be selected problems
by than the
default) although the ‘seetickets.com’,
site there is one major
meets the basic level of problem
accessibility. here that the other
websites do not
have,
which does not meet
the
basic level of
accessibility.
Font size is set so it
is
impossible to
enlarge it, unlike
the other
sites.
Search Yes – 3 search possible Yes – Quite Yes – Accurate, with

Facility (artist, accurate (2 all the
venue or town). search bars: information you
Accurate artist/event need and
enough to easily find & venue/location) booking availability.
what although did not No
you need, even more find a advanced search
(days, few events. available
date, hours, etc.) even Advanced though...
phone search available.
number phone last
minute
availability. Advanced
search
available.
Ad Few adverts at the No adverts or only Ad banners on the

banners? bottom f useful homepage, but not
the page that do not links. Very good! too
interfere many.
with the site and that
can be
useful.
Use Good use of photos as Very good use of Not much photos
product design photos which can
photos/Im support, good photo as hyperlink. Good be quite boring on
age sizes and scale the
27 | P a g e
000470957
reduction scale. Subheads, lists and size, fast to eye... A lot of text,
and upload, not
inverted pyramid-like and looks good. visually
site ‘pleasurable’.
plan.
‘Scannable Subheads, lists and Subheads, short Not many subheads

’ inverted paragraphs, clear or
text pyramid-like site plan. and inverted pyramid-
Short short information. like site.
and clear paragraphs No Too much scrolling.
and scrolling.
information. No
scrolling.
Upload Week 3
Mouse out:
Mouse over:
28 | P a g e
000470957
Confirm box:
29 | P a g e
000470957
Upload Week 4
Web Technologies
Tutorial: Javascript 2
I have added 5 forms of validation for my form:
‘Name’ validation
‘Email’ validation (The @ and the dot have to be present in the box field)
‘Drop down’ box validation (By displaying a pop up window stating the user’s
choice)
‘Number’ validation (max and min length of 11 digits only)
‘Number’ validation by preventing the user to enter letters in the ‘phone’ box
field (using the restrict function, called in the form with
onkeydown="restrict(this)").
30 | P a g e
000470957
I have learned how to use variables to give names in order to make it easier by
shortening the names.
It is also important to restrict the data in order to get the right data in your
database as errors ar common. By using simple JavaScript validation, I made it
easier to get accurate data from the user of my website.
31 | P a g e
000470957
Upload week 5
Web Technologies: Database 1
1. Retrieve employee number, NI number, and department number for all
employees.
SELECT EmpNo,NINo,DeptNo FROM employee
2. Retrieve the full names of all employees.
32 | P a g e
000470957
SELECT Firstname,Surname FROM employee
3. Retrieve a list of all the distinct employee surnames.
SELECT DISTINCT Surname FROM employee
4. Retrieve NI numbers for all employees called Smith.
33 | P a g e
000470957
SELECT NINo FROM employee WHERE Surname=’Smith’
5. Retrieve the NI of employees who do not work in department D2.
SELECT NINo FROM employee WHERE DeptNo<>’D2’
6. Retrieve details of employees whose surnames start with the letters Sm.
SELECT * FROM employee

WHERE Surname Like 'sm*';
34 | P a g e
000470957
7. Retrieve for each employee their names and their monthly salary.
[Assume that the Salary field is the Annual Salary]
SELECT Firstname,Surname,Salary/12 AS Monthly FROM employee
8. Retrieve the average employee salary, the salary of the lowest paid employee,
and the salary of the highest paid employee.
35 | P a g e
000470957
SELECT AVG(Salary)AS Average,MIN(Salary)AS Min,MAX(Salary)AS Max FROM

employee
9. Retrieve the names of employees and the names of the departments within
which they work.
SELECT employee.Firstname,employee.Surname,department.DeptNo
FROM department
INNER JOIN employee
ON department.DeptNo=employee.DeptNo;
10. Retrieve details of employees who share the telephone extension 1231.
36 | P a g e
000470957
SELECT employee.Firstname,employee.Surname,telephone.Extension
FROM telephone
INNER JOIN employee
ON telephone.EmpNo=employee.EmpNo
WHERE telephone.Extension=1231
37 | P a g e
000470957
Upload Week 6
SETTING UP THE TABLE ‘EMPLOYEE’ IN MYSQL
CREATE TABLE Employee ( EmpNo varchar(3), NiNo varchar(9), SurName varchar(25),

FirstName varchar(25), DeptNo varchar(3), Office varchar(5), Salary int(6) );
INSERT INTO Employee ( EmpNo, NiNo, SurName, FirstName, DeptNo, Office, Salary )
VALUES ('E1', 'NB123456P', 'Smith', 'Fred', 'D1', 'R101', 12345 );
SELECT * FROM Employee
VALUES ('E2', 'NM23456M', 'Smith', 'Jane', 'D1', 'R102', 16456 );
VALUES ('E3', 'NM543234P', 'Brown', 'Jim', 'D2', 'R101', 13456 );
VALUES ('E5', 'NB127654P', 'Green', 'Fred', 'D3', 'R103', 45345 );
1/ For each field, write down its likely datatype
EmpNo = CHARVAR as it contains letters as well as numbers.
NiNo = CHARVAR as it contains letters as well as numbers.
Surname = CHARVAR as it contains letters (could be CHAR).
Firstname = CHARVAR as it contains letters (could be CHAR).
DeptNo = CHARVAR as it contains letters as well as numbers.
Office = CHARVAR as it contains letters as well as numbers.
Salary = INT as it only contains numbers (could be MEDIUM INT UNSIGNED).
2/ Write SQL Commands for the following database update problems
a/ INSERT INTO Employee ( EmpNo, NiNo, SurName, FirstName, DeptNo,

Office, Salary ) VALUES ('E6', 'NB127687X', 'Jones', 'Fred', 'D3', 'R122', 34990 );
b/ UPDATE Employee SET Salary='13345' WHERE NiNo='NB123456P';
UPDATE Employee SET Salary='17456' WHERE NiNo='NM23456M';
UPDATE Employee SET Salary='14456' WHERE NiNo='NM543234P';
UPDATE Employee SET Salary='46345' WHERE NiNo='NB127654P';
UPDATE Employee SET Salary='35990' WHERE NiNo='NB127687X';
38 | P a g e
000470957
c/ UPDATE Employee SET SurName='Smyth' WHERE

NiNo='NB123456P';
d/ UPDATE Employee SET Office='L103' WHERE Office='R103';
e/ DELETE FROM Employee WHERE Salary>'20000';
3/ What is wrong with these statements?
a/ INSERT INTO Employee (EmpNum, NiNum) VALUES (E6, NB55555N);
The column names are wrong, it should be EmpNo & NiNo. The ‘quotation marks’
are missing in the VALUES brackets. The code should be:
INSERT INTO Employee (EmpNo, NiNo) VALUES (‘E6’, ‘NB555555N’);
b/ UPDATE Employee SET Salary = ‘34567’ WHERE NiNo=’NB123456P’;
There should be no spaces surrounding the equal sign after ‘Salary’. The code
should be:
UPDATE Employee SET Salary=‘34567’ WHERE NiNo=’NB123456P’;
c/ DELETE Employee WHERE Firtname = ’Fred’;
The ‘FROM’ is missing after ‘DELETE’ and there should be no space surrounding
the equal sign after ‘FirstName’. The capital ‘N’ from FirstName is also missing.
The code should be:
DELETE FROM Employee WHERE FirtName=’Fred’;
39 | P a g e
000470957
Site Map:
40 | P a g e
000470957
HOME
BY BY BOOK CONTAC ADMIN

BY T
DATE BAND VENUE ONLINE ONLY
US
BOOKIN SEND ADMIN

G
EMAIL LOGIN
FORM 1
RETRIEVE SEND ADMIN
DATA 1 EMAIL HOME
RETRIEVE BOOKING SEND SEND TO
DATA 2 FORM 2 TO ONE ALL
PURCHASES GIGS VENUES CUSTOMERS
TABLE TABLE TABLE TABLE
E D D E D D E D D E D
D E E D E E D E E D E
I L T I L T I L T I L
T E A T E A T E A T E
41 | P a g e

Course Work 1 Report

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Course Work 1 Report

Загружено:

Авторское право:

Доступные форматы

Benjamin Parmentier pb702

WEB TECHNOLOGIES (COMP1321)

II. Specifications & Scope

III. Technology Used

VII. Search Engine Optimisation

‘Gigbookers’ has asked us (independent web developer) to create a working

The design of the

II. Specifications & Scope

The scope of the project is to create a working website prototype for a

Client side: Administrator side:

- Look for gigs by band, date or venue - Data gathering

- Display relevant information (availability, time …) - Possible to edit, add or

- Ticket booking & communication possible - Password enabled admin

III. Technology Used

 PHP (a scripting language originally designed for producing dynamic web

Connecting & interacting with the database

 MySQL (a relational database management system, ‘RDBMS’ which has

Creating the database

 XHTML/HTML (Extended Hypertext Markup Language, a language to create

Creating the content of the webpage

Creating the design & layout of the webpage

 JavaScript (a scripting language widely used for client-side web

"The accessibility guidelines address the most important issue, which is

Admin login (Username: benjamin; Password: 0000)

Choose Email Address (php):

Contact us via email:

Purchase details submitted:

VII. Search Engine Optimisation

<title>Gigbookers Admin - Send Message</title>

<meta name="title" content="Gig Bookers" />

<meta name="author" content="Benjamin Parmentier" />

<meta name="subject" content="Gigs Updates" />

<meta name="language" content="EN" />

<meta name="keywords" content="gigbookers, tickets, concert, online booking,

<meta name="description" content="Gig Bookers is a website that allows

Web Technologies Tutorial: Week 1

What have I learned from this tutorial?

<td> 14-19 <input type="checkbox" name="15" value="1" multiple="no"/> 20-

Research & evaluation of the competition:

SEETICKETS.COM TICKETLINE.CO TICKETMASTER.C

Navigation drop good looking

Special No particular special No particular No particular special

Accessibili Quite poor. 40 Very good. Only 2 Quite poor. 30

Search Yes – 3 search possible Yes – Quite Yes – Accurate, with

Ad Few adverts at the No adverts or only Ad banners on the

‘Scannable Subheads, lists and Subheads, short Not many subheads

SELECT EmpNo,NINo,DeptNo FROM employee

2. Retrieve the full names of all employees.

SELECT Firstname,Surname FROM employee

3. Retrieve a list of all the distinct employee surnames.

SELECT DISTINCT Surname FROM employee

4. Retrieve NI numbers for all employees called Smith.

SELECT NINo FROM employee WHERE Surname=’Smith’

5. Retrieve the NI of employees who do not work in department D2.

SELECT NINo FROM employee WHERE DeptNo<>’D2’

SELECT * FROM employee

SELECT Firstname,Surname,Salary/12 AS Monthly FROM employee

SELECT AVG(Salary)AS Average,MIN(Salary)AS Min,MAX(Salary)AS Max FROM

CREATE TABLE Employee ( EmpNo varchar(3), NiNo varchar(9), SurName varchar(25),

SELECT * FROM Employee

SELECT * FROM Employee

SELECT * FROM Employee

1/ For each field, write down its likely datatype