Multimedia Design & Web Development

Multimedia Design & Web Development 2010
Table of contents
1.0 Introduction
2.0 Acknowledgment
3.0 Group report
3.1 Web structure
3.1.1 Navigation
3.1.2 Structure
3.2 Story boards
3.3 User interface design
3.4 Source and executable code
3.4.1 Home page
3.4.2Login page
3.5 Discussion of group meeting
4.0 Individual report
4.1Functionality and data testing
4.2 Setup and use of application
4.3 Technical description of webpage used to support and run the application
4.4 Role undertaken in the assignment
4.5 Problems
1
1.0 Introduction
This assessment requires the design and construction of an appropriate web document that is to
be supported by client/server interaction. In this case we as a group have chosen to use a Ballet
academy. The system we are devising for the Academy is a web application that enables a user to
register, and view entries made to the guest book, from the database. The administrator is to have
capabilities to login, logout, view registered users, update and delete entries made to the
database. The administrator is also capable of viewing the user comments via the guestbook.
This document explains the functionality of the system in detail and illustrates the testing
mechanisms used to show that the system is fully functional and can be utilized.
2
2.0 Acknowledgment
This project is a group assignment and has been undertaken by UEL ID’s
U0957786
U0856313
IC No: 0155947
Many thanks go to my group member for all the hard work, and to Madam Manimala for being a
great mentor.
3
3.0 Group report

3.1 Web structure
3.1.1 Navigation
This website is non linear in nature, users are able to jump from one page to another with ease.
On the administrator’s part, a user is only allowed to access the administrator’s portal once the
correct authentication has been satisfied. There too navigation is non linear as the administrator
is capable of moving freely from one page to another, depending on the function he so wishes to
satisfy. The structure is illustrated below by use of a navigation diagram.
Figure 1 below illustrates the navigation that has been applied by the “Royal Ballet
Academy” website. Navigation in this essence is non linear but in the case of the
administrator navigation can only be carried out once the authentication has been satisfied.
Home Accessed only after

authentication has
been satisfied
About Us Classes Feedback Gallery Sign Register Administrator

up Portal
Update Delete Search View guest

book
4
3.1.2 Structure
This part of the assignment is to elaborate the look of the website in terms of its overall
structure.
Figure 2: Home page
Flash Flash Flash Flash Flash

Button. Link button.Link butto.Link button. Link button.Link
Logo Flash Banner
Text
Text Text
Text
Text
Image. Link
Flash Video
Image.Link
Image.Link
Text
Text. Authentication
mechanism
Link Text Text
5
Figure 3: About us page

Logo Image
Text
Text
Text
Text
Image. Link
Image.Link
Image.Link
Link Text Text
6
Figure 4: Classes’ page

Logo Image
Text
Text
Text
Text
Image Text
Image. Link
Image.Link Text
Image
Image.Link Text
Image
Text
Link Text Text
7
Figure 5: Feedback page

Logo Image
Text
Text
Text
Text Form
Image. Link
Image.Link
Image.Link
Text
Link Text Text
8
Figure 6: Gallery page

Logo Image
Text
Text
Text
Text
Image. Link Image. Link Image.Link Image.Link
Image.Link
Image.Link Image.Link Image.Link
Image.Link
Image.Link
Text Text
Link
9
Figure 7: Register page

Logo Image
Text
Text
Text
Text Form
Image.Link
Image.Link
Text
Link Text Text
10
Figure 8: Administrator page

Logo Image
Text
Text
Link Links
Link
Link Text Text
11
3.2 Story boards
U0957786 & U0856313 15th December 2010
The Royal Ballet Academy
Description of screen:
This is the home page, it is the introductory page to the website and has the following
features. 1) administrator Login 2) Flash banner 3) Flash Video 4) pdf brochure 5) pdf calendar
Audio: Nil Video: flash video
Animation: Nil Background: grey, maroon
Graphics: Nil Script: Dreamweaver, PHP
Pictures: Others: Nil
Comments:
12
U0957786 & U0856313 15th December 2010
This is the register page has the main capability of registering a user to the academy.
Audio: Nil Video: Nil
Comments:
13
U0957786 & U0856313 15th December 2010
This is the feedback page has the main capability of sending feedback to the academy and
viewing all the feedback that has been sent by other users.
Comments:
14
U0957786 & U0856313 15th December 2010
This is the administrator page, it is the portal for the administrator. He/she has the capability
of viewing the guestbook, updating, deleting and searching for records.
Comments: If authentication is not satisfied the user is unable to login.
15
U0957786 & U0856313 15th December 2010
This is the search page in the administrator portal; the function of this page is to search for
records concerning registration, from the database.
Comments: If a searched item is unavailable, no record will be displayed
16
U0957786 & U0856313 15th December 2010
This is the update page in the administrator portal; the function of this page is to update
Comments: If there is no records in the database non will be displayed
17
U0957786 & U0856313 15th December 2010
This is the delete page in the administrator portal; the function of this page is to delete
Comments:
18
U0957786 & U0856313 15th December 2010
This is the view page in the administrator portal; the function of this page is to return and
display all registered participants that has been made to the database by the users.
Comments: If there are no entries made to the database then non shall be displayed.
19
3.3 User interface design
The user interface for the home page. It contains on flash banner and a flash video. It too has all thinks
to related pages and houses the login feature for the administrator.
20
The about us page is fairly straight forward, its links to all related pages, and gives a brief
overview of the Academy.
21
The class’s page gives a basic description of the courses on offer. It is linked to all other pages
none linearly.
22
The feedback page is the one that is used to send feedback to the academy. The page is linked to
all other pages non linearly. The page also hosts a link for “Guest book” that is used to display
already made comments from the database.
23
The gallery page is the one used to display all the pictures that are themselves linked to a larger
version of itself. The pages as connect to all other related pages apart from the administrator
portal.
24
This is the administrator page, it is the portal for the administrator. He/she has the capability
of viewing the guestbook, updating, deleting and searching for records and logout. Php is the
language used to support this functionality.
The search page from the administrator portal used for making searches for a desired entity fro the
database. Php is the language used to support this functionality.
25
The update page makes use of php to access and alter entries in the database.
The delete page is used to delete registries from the database. The page is linked back to the
admin page. Php is the language used to support this functionality.
26
The view page is used to view all the registered participants. Php is used to support this functionality.
The page is directly linked to the admin portal.
27
The brochure is a pdf, it is directly linked back to the page from which it was accessed.
28
The events page is a pdf, it is directly linked back to the page from which it was accessed.
29
3.4 Source and executable code
Home page & Login page
Source code
<?php require_once('Connections/Ballet.php'); ?>

<?php
// *** Validate request to login to this site.
if (!isset($_SESSION)) { Authentication
session_start(); code (in blue
}
colour)
$loginFormAction = $_SERVER['PHP_SELF'];
if (isset($_GET['accesscheck'])) {
$_SESSION['PrevUrl'] = $_GET['accesscheck'];
}
if (isset($_POST['username'])) {
$loginUsername=$_POST['username'];
$password=$_POST['password'];
$MM_fldUserAuthorization = "";
$MM_redirectLoginSuccess = "admin.php";
$MM_redirectLoginFailed = "valdation.html";
30
$MM_redirecttoReferrer = false;
mysql_select_db($database_Ballet, $Ballet);
$LoginRS__query=sprintf("SELECT username, password FROM login WHERE username='%s' AND

password='%s'",
get_magic_quotes_gpc() ? $loginUsername : addslashes($loginUsername), get_magic_quotes_gpc() ? $password
: addslashes($password));
$LoginRS = mysql_query($LoginRS__query, $Ballet) or die(mysql_error());

$loginFoundUser = mysql_num_rows($LoginRS);
if ($loginFoundUser) {
$loginStrGroup = "";
//declare two session variables and assign them

$_SESSION['MM_Username'] = $loginUsername;
$_SESSION['MM_UserGroup'] = $loginStrGroup;
if (isset($_SESSION['PrevUrl']) && false) {

$MM_redirectLoginSuccess = $_SESSION['PrevUrl'];
}
header("Location: " . $MM_redirectLoginSuccess );
}
else {
header("Location: ". $MM_redirectLoginFailed );
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>home</title>
<style type="text/css">

</style>
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
with(navigator){
var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
if (!isIE || !isWin){
var flashVer = -1;
if (plugins && plugins.length > 0){
var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
if (desc == "") flashVer = -1;
else{
var descArr = desc.split(" ");
var tempArrMajor = descArr[2].split(".");
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + "." + verMinor);
}
}
// WebTV has Flash Player 4 or lower -- too low for video
else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
var verArr = reqVerStr.split(",");

var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
if (flashVer < reqVer){

if (confirm(msg))
window.location =
"http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
32
}
}
}
}
</script>
</head>
<body onload="MM_CheckFlashVersion('7,0,19,0','Content on this page requires a newer version of Macromedia

Flash Player. Do you want to download it now?');">
<div align="center">
<table width="949" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="54" rowspan="16" valign="top" bgcolor="#000000"> </td>
<td height="54" colspan="10" valign="top"
bgcolor="#000000">
               &nbs
p;               &nb
sp;               &n
bsp;
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="108" height="46" title="home">
<param name="BGCOLOR" value="#000000" />
<param name="movie" value="button1.swf" />
<param name="quality" value="high" />
<embed src="button1.swf" width="108" height="46" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"
bgcolor="#000000"></embed>
</object>
width="108" height="46" title="About us">
<param name="movie" value="about us.swf" />
<embed src="about us.swf" width="108" height="46" quality="high"
</object>
width="108" height="46" title="Classes">
</object>
width="108" height="46" title="Feedback">
33

</object>
width="108" height="46" title="Gallery">
</object></td>
<td width="1"></td>
</tr>
<tr> Flash
<td height="208" colspan="5" valign="top"><img src="image/logo2.png" alt="log" width="221"banner
height="208"
/></td>
(brown)
<td colspan="5" valign="top"><label></label>
width="614" height="208" title="ba">
<param name="movie" value="ban.swf" />
<embed src="ban.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="614" height="208"></embed>
</object></td>
<td></td>
</tr>
<tr>
<td height="79" colspan="5" valign="top" bgcolor="#D4D4D4"><span class="style8"> you are here
>> </span><span class="style9"><span class="style11">RB</span>>> <span
class="style16">Home</span></span><br />
      Register with us today </td>
<td width="372" rowspan="11" valign="top" bgcolor="#D4D4D4"><p><br />
<span class="style13">The Royal School of Ballet</span><br />
<br />
<span class="style1"> A world acclaimed Ballet Academy having housed the worlds<img
src="image/spacer.gif" alt="line" width="1" height="1" /> top most in ballet and fostering the future leaders
in this <br />
graceful art.</span></p>
<p class="style1"> We at The Royal Ballet Academy believe in hard work and dedication, as
well as providing excellence in Ballet.</p>
<p align="justify" class="style1"> This is undoubtably the best place to practice the grace<br />
and beauty of ballet. We have the best that facilities have<br />
to offer. <br />
Many a time we have scoped the award for the best <br />
ballet academy on the Canadian front, we only wish <br />
to continue taking this prestigious award. </p>
34
<p class="style1"> All are welcome. Be a part of this slice of excellence. <br />
<br />
<span class="style6">P</span>atricia Wong</p>
<p class="style1">    Director<br />

</p></td>
<td colspan="3" valign="top" bgcolor="#D4D4D4"> </td>
<td width="221" rowspan="5" valign="top" bgcolor="#D4D4D4"><p>    <br />
<strong>  U<span class="style1"> pcoming events</span> </strong><br />
<br />
  1December marks the start of     our christmas celebrations<br />
    ----------------------<br />
   <strong>Video</strong><br />
    The beauty and grace of ballet </p>
<img src="image/spacer.gif" width="1" height="1" /></td>
<td></td>
</tr>
<tr>
<td height="53" colspan="3" valign="top" bgcolor="#D4D4D4">     S <span
class="style5">imple and easy registration<br />
          get in touch with us ! </span></td>
<td width="10" rowspan="10" valign="top" bgcolor="#D4D4D4"> </td>
<td colspan="2" rowspan="4" valign="top" bgcolor="#D4D4D4"> </td>
<td></td>
</tr>
<tr>
<td width="146" height="53" valign="top"><a href="register.php"><img src="image/ani.png" alt="ani"
width="146" height="53" border="0" /></a></td>
<td></td>
</tr>
<tr>
<td height="29" valign="top" bgcolor="#D4D4D4"> </td>
<td></td>
</tr>
<tr>
<td rowspan="2" valign="top"><a href="image/brochureballet.pdf"><img src="image/btn-
downloadbrochure.jpg" alt="bro" width="146" height="102" border="0" /></a></td>Flash video
<td height="38"></td>
</tr> (purple)
<tr>
<td colspan="2" rowspan="3" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="233"
height="176" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="salign" value="lt" />
<param name="scale" value="noscale" />
<param name="FlashVars"
35
value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=ballet&autoPlay=true&autoRewind
=false" />
<embed src="FLVPlayer_Progressive.swf"
flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=ballet&autoPlay=true&autoRew
ind=false" quality="high" scale="noscale" width="233" height="176" name="FLVPlayer" salign="LT"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td rowspan="2" valign="top"><a href="image/events.pdf"><img src="image/btn-eventscalendar.jpg" alt="cal"
width="146" height="114" border="0" /></a></td>
</tr>
<tr>
<td colspan="2" rowspan="3" valign="top" bgcolor="#D4D4D4">The video portrays the elligance fo ballet. We
,at the Royal Ballet Academy only offer the best. </td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td height="38" valign="top" bgcolor="#D4D4D4"><a href="guestbook.php" class="style17"><span
class="style18">V </span>iew Guest Book</a></td>
<td></td>
</tr>
<tr>
<td height="171" colspan="10" valign="top" bgcolor="#D4D4D4"><p><strong>A<span class="style1">
dministrator login </span></strong>---------------------------------------------------------------------------</p>
<form id="form1" name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
<table width="200" border="1" cellpadding="0">
<tr>
<td>Name</td>
<td><input name="username" type="text" id="username" /></td>
</tr>
<tr>
<td>Password </td>
<td><input name="password" type="password" id="password" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="Login" /></td>
</tr>
</table>
</form></td>
<td></td>
36
</tr>
<tr>
<td height="87" colspan="10" valign="top"
bgcolor="#430017">
               &nbs
p;               &nb
sp;
          <span class="style12"> Contact
Information: 212 Idley Lane, UK <br />
<a href="sitemap.html">  Site
Map  </a>            &nb
sp;               &n
bsp;               &
nbsp;     +2441555115 OR +342653253
               &nbs
p;       Terms and conditions <br />
               &nbs
p;               &nb
sp;               &n
bsp;               &
nbsp;            <span
class="style3">       <span class="style4">© Celestin &
Loren 2010</span> </span></span></td>
<td></td>
</tr>
<tr>
<td height="73" colspan="10" valign="top" bgcolor="#000000"> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td width="12"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
37
3.5 Discussion of group meeting
As a group we met on a continual basis in order to meet our final product. The design of the
system took the longest period to complete. This is as a result of creating the flash banner and
flash video, choosing the most appropriate font and color. With the design also came coding for
the administrator functions, such as update, delete, view, and search functions on the
administrator’s part. Coding however was done via Macromedia Dreamweaver. Testing and
documenting the system both took around the same time to complete. Testing involved ensuring
that all functions were working up to requirements these include; all form validation, search,
registering, feedback, searching, updating, deleting, and view of registered participants.
Weelkly progress
Design
Coding
Testing
Documentation
38
Section B: Individual
ndividual report
1. Functionality and data testing
• Data insertion and validation
In the following I will register myself to the Ballet site.
While trying to register I forgot to enter my details therefore the form validation message
m
appeared.
After having entered the data a second time correctly this time, I got a registered and a message
displaying the result is shown as screenshot.
39
• Login Admin page
ying the admin login, I will login with my name and password as
In the above form displaying
required by the system.
Upon successful login I have directly

tly accesses to the Administrator
Administrat page.
40
• Update Records
In the following form the name of one participant is FABIN let’s change it to Legenda.
As we can see in the table below the has been changed to

LEGENDA.
41
2. Setup and use of application
Following I explain how to setup and use my application using Php Admin to create database and tables.
1 Step: Go to localhost: http//localhost/.
Step 2.Enter name and password
Step 3. You get accessed to the localhost and you can create a new database
Step 4:
You create a new table
Step 5: You insert your data into the table
Notice: Always click on GO button or Save to apply change to the system.
42
3. Technical description of webpage used to support and run the application
Creating the database using Php Admin Interface
To do this, you enter the following in the browser http://localhost/phpmyadmin and the when it
loads, you click on create option. MySQL requests you to enter the database name. When this is
done, it requests you to create new table and also specify the number of fields your table will
have. When you are done you click on go button and it is time for you to name your fields; and
later you can use the insert button to insert the data, I draw the steps to follow at question no 2.
4. Role undertaken in the assignment
My task was to develop the web application using a client/server side interaction for creating the
database of the website as well as the following functions and forms: update, delete, insert
records, search and view records.
5. Problems
The problem encountered while developing the website concerns the form Delete and Search but
after many tries we setup the forms successfully.
6. Individual Evaluation Report
In order to evaluate the site on which we have been working the following feedback have been
obtained thank to an interview conducted to measure the usability of the site.
Usability evaluation question: lowest (1), Average (5) highest grade (10)
No QUESTIONS Grade per 10

1 Style and presentation 10
2 Quality of contents 5
3 Navigation around the site 10
4 Time to download pages 5
The overall evaluation of the website is satisfactory based on the feedback received from lecturer
and colleagues as well.
43
REFERENCES
Web Design, In Simple steps, James A.Brannan, Pearson 2010.
World Wide Web
http://dictionary.reference.com/browse/media
44

Multimedia Design & Web Development

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Multimedia Design & Web Development

Uploaded by

Copyright:

Available Formats

Multimedia Design & Web Development 2010

3.0 Group report

3.1 Web structure

3.2 Story boards

3.3 User interface design

3.4 Source and executable code

3.4.1 Home page

3.5 Discussion of group meeting

4.0 Individual report

4.1Functionality and data testing

4.2 Setup and use of application

4.4 Role undertaken in the assignment

3.0 Group report

Home Accessed only after

About Us Classes Feedback Gallery Sign Register Administrator

Update Delete Search View guest

Figure 2: Home page

Flash Flash Flash Flash Flash

Logo Flash Banner

Link Text Text

Flash Flash Flash Flash Flash

Link Text Text

Flash Flash Flash Flash Flash

Link Text Text

Flash Flash Flash Flash Flash

Link Text Text

Flash Flash Flash Flash Flash

Image. Link Image. Link Image.Link Image.Link

Image.Link Image.Link Image.Link

Flash Flash Flash Flash Flash

Link Text Text

Flash Flash Flash Flash Flash

Link Text Text

3.2 Story boards

U0957786 & U0856313 15th December 2010

The Royal Ballet Academy

Audio: Nil Video: flash video

Animation: Nil Background: grey, maroon

Graphics: Nil Script: Dreamweaver, PHP

Pictures: Others: Nil

U0957786 & U0856313 15th December 2010

The Royal Ballet Academy

Audio: Nil Video: Nil

Animation: Nil Background: grey, maroon

Graphics: Nil Script: Dreamweaver, PHP

Pictures: Others: Nil

U0957786 & U0856313 15th December 2010

The Royal Ballet Academy

Audio: Nil Video: Nil

Animation: Nil Background: grey, maroon

Graphics: Nil Script: Dreamweaver, PHP

Pictures: Others: Nil

U0957786 & U0856313 15th December 2010

The Royal Ballet Academy

Audio: Nil Video: Nil

Animation: Nil Background: grey, maroon

Graphics: Nil Script: Dreamweaver, PHP

Pictures: Others: Nil

Comments: If authentication is not satisfied the user is unable to login.

U0957786 & U0856313 15th December 2010

The Royal Ballet Academy

Audio: Nil Video: Nil

<p class="style1"> Director<br />