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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
 Benjamin Parmentier pb702
000470957

Header

Navigation
bar

Body

Footer

VI. Testing

Admin login (Username: benjamin; Password: 0000)

8 | Page
Benjamin Parmentier pb702
000470957

Customers Table:

9 | Page
Benjamin Parmentier pb702
000470957

Update Customer:

Record updated:

10 | P a g e
Benjamin Parmentier pb702
000470957

Record Updated:

Send Email:

11 | P a g e
Benjamin Parmentier pb702
000470957

Choose Email Address (php):

Email sent:

12 | P a g e
Benjamin Parmentier pb702
000470957

Email Received:

By date:

13 | P a g e
Benjamin Parmentier pb702
000470957

By artist:

14 | P a g e
Benjamin Parmentier pb702
000470957

Contact us via email:

JavaScript:

15 | P a g e
Benjamin Parmentier pb702
000470957

Email sent:

Email received:

16 | P a g e
Benjamin Parmentier pb702
000470957

Online booking:

17 | P a g e
Benjamin Parmentier pb702
000470957

Info submitted:

Purchase form:

18 | P a g e
Benjamin Parmentier pb702
000470957

Purchase details submitted:

Javascript calendar:

19 | P a g e
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
000470957

Screenshots:

21 | P a g e
Benjamin Parmentier pb702
000470957

22 | P a g e
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
000470957

Confirm box:

29 | P a g e
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
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

INSERT INTO Employee ( EmpNo, NiNo, SurName, FirstName, DeptNo, Office, Salary )
VALUES ('E2', 'NM23456M', 'Smith', 'Jane', 'D1', 'R102', 16456 );

SELECT * FROM Employee

INSERT INTO Employee ( EmpNo, NiNo, SurName, FirstName, DeptNo, Office, Salary )
VALUES ('E3', 'NM543234P', 'Brown', 'Jim', 'D2', 'R101', 13456 );

SELECT * FROM Employee

INSERT INTO Employee ( EmpNo, NiNo, SurName, FirstName, DeptNo, Office, Salary )
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
Benjamin Parmentier pb702
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
Benjamin Parmentier pb702
000470957

Site Map:

40 | P a g e
 Benjamin Parmentier pb702
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