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

Multimedia Design & Web Development 2010

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

Multimedia Design & Web Development 2010
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

Multimedia Design & Web Development 2010
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 up

Register

Administrator Portal

Update

Delete

Search

View guest book

4

Link Text Text.Link Flash butto.Multimedia Design & Web Development 2010 3.Link Logo Flash Banner Text Text Text Text Image. Link Flash button. Figure 2: Home page Flash Button. Link Flash button.2 Structure This part of the assignment is to elaborate the look of the website in terms of its overall structure.Link Text Image. Authentication mechanism Link Text Text 5 .1.Link Flash button. Link Flash Video Image.

Link Image.Link Logo Image Text Text Text Text Image. Link Flash button. Link Flash button.Multimedia Design & Web Development 2010 Figure 3: About us page Flash Button.Link Link Text Text 6 .Link Flash butto.Link Flash button.Link Image.

Link Image Text Image.Multimedia Design & Web Development 2010 Figure 4: Classes’ page Flash Button.Link Image Text Text Link Text Text 7 .Link Flash butto.Link Flash button. Link Flash button. Link Text Text Image.Link Logo Image Text Text Text Image Image. Link Flash button.

Link Flash button.Link Flash butto.Link Text Link Text Text 8 .Multimedia Design & Web Development 2010 Figure 5: Feedback page Flash Button. Link Flash button. Link Text Form Image.Link Logo Image Text Text Text Image.Link Image. Link Flash button.

Link Image.Link Image. Link Flash button.Link Image. Link Image.Link Image.Link Link Text Text 9 .Link Logo Image Text Text Text Text Image.Link Flash button.Link Image. Link Image.Link Flash butto.Link Image.Link Image. Link Flash button.Multimedia Design & Web Development 2010 Figure 6: Gallery page Flash Button.

Link Text Link Text Text 10 .Link Logo Image Text Text Text Text Form Image.Link Flash button. Link Flash button.Link Image.Multimedia Design & Web Development 2010 Figure 7: Register page Flash Button.Link Flash butto. Link Flash button.

Link Flash butto. Link Flash button.Link Logo Image Text Text Link Link Links Link Text Text 11 .Link Flash button.Multimedia Design & Web Development 2010 Figure 8: Administrator page Flash Button. Link Flash button.

PHP Others: Nil 12 .2 Story boards U0957786 & U0856313 The Royal Ballet Academy Description of screen: 15th December 2010 This is the home page.Multimedia Design & Web Development 2010 3. 1) administrator Login 2) Flash banner 3) Flash Video 4) pdf brochure 5) pdf calendar Audio: Nil Animation: Nil Graphics: Nil Pictures: Comments: Video: flash video Background: grey. maroon Script: Dreamweaver. it is the introductory page to the website and has the following features.

PHP Others: Nil 13 . Audio: Nil Animation: Nil Graphics: Nil Pictures: Comments: Video: Nil Background: grey.Multimedia Design & Web Development 2010 U0957786 & U0856313 The Royal Ballet Academy Description of screen: 15th December 2010 This is the register page has the main capability of registering a user to the academy. maroon Script: Dreamweaver.

Multimedia Design & Web Development 2010 U0957786 & U0856313 The Royal Ballet Academy Description of screen: 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. PHP Others: Nil 14 . maroon Script: Dreamweaver. Audio: Nil Animation: Nil Graphics: Nil Pictures: Comments: Video: Nil Background: grey.

deleting and searching for records. PHP Others: Nil Comments: If authentication is not satisfied the user is unable to login. 15 . maroon Script: Dreamweaver.Multimedia Design & Web Development 2010 U0957786 & U0856313 The Royal Ballet Academy Description of screen: 15th December 2010 This is the administrator page. updating. He/she has the capability of viewing the guestbook. Audio: Nil Animation: Nil Graphics: Nil Pictures: Video: Nil Background: grey. it is the portal for the administrator.

from the database.Multimedia Design & Web Development 2010 U0957786 & U0856313 The Royal Ballet Academy Description of screen: 15th December 2010 This is the search page in the administrator portal. the function of this page is to search for records concerning registration. no record will be displayed 16 . maroon Script: Dreamweaver. PHP Others: Nil Comments: If a searched item is unavailable. Audio: Nil Animation: Nil Graphics: Nil Pictures: Video: Nil Background: grey.

the function of this page is to update records concerning registration. PHP Others: Nil Comments: If there is no records in the database non will be displayed 17 .Multimedia Design & Web Development 2010 U0957786 & U0856313 The Royal Ballet Academy Description of screen: 15th December 2010 This is the update page in the administrator portal. Audio: Nil Animation: Nil Graphics: Nil Pictures: Video: Nil Background: grey. maroon Script: Dreamweaver. from the database.

from the database. the function of this page is to delete records concerning registration. Audio: Nil Animation: Nil Graphics: Nil Pictures: Comments: Video: Nil Background: grey. maroon Script: Dreamweaver. PHP Others: Nil 18 .Multimedia Design & Web Development 2010 U0957786 & U0856313 The Royal Ballet Academy Description of screen: 15th December 2010 This is the delete page in the administrator portal.

Audio: Nil Animation: Nil Graphics: Nil Pictures: Video: Nil Background: grey. PHP Others: Nil Comments: If there are no entries made to the database then non shall be displayed.Multimedia Design & Web Development 2010 U0957786 & U0856313 The Royal Ballet Academy Description of screen: 15th December 2010 This is the view page in the administrator portal. 19 . maroon Script: Dreamweaver. the function of this page is to return and display all registered participants that has been made to the database by the users.

Multimedia Design & Web Development 2010 3. It contains on flash banner and a flash video. 20 . It too has all thinks to related pages and houses the login feature for the administrator.3 User interface design The user interface for the home page.

its links to all related pages. 21 . and gives a brief overview of the Academy.Multimedia Design & Web Development 2010 The about us page is fairly straight forward.

It is linked to all other pages none linearly. 22 .Multimedia Design & Web Development 2010 The class’s page gives a basic description of the courses on offer.

The page also hosts a link for “Guest book” that is used to display already made comments from the database. 23 . The page is linked to all other pages non linearly.Multimedia Design & Web Development 2010 The feedback page is the one that is used to send feedback to the academy.

24 .Multimedia Design & Web Development 2010 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.

25 . He/she has the capability of viewing the guestbook. deleting and searching for records and logout. it is the portal for the administrator. The search page from the administrator portal used for making searches for a desired entity fro the database. updating. Php is the language used to support this functionality.Multimedia Design & Web Development 2010 This is the administrator page. Php is the language used to support this functionality.

The page is linked back to the admin page. The delete page is used to delete registries from the database.Multimedia Design & Web Development 2010 The update page makes use of php to access and alter entries in the database. Php is the language used to support this functionality. 26 .

Multimedia Design & Web Development 2010 The view page is used to view all the registered participants. 27 . The page is directly linked to the admin portal. Php is used to support this functionality.

Multimedia Design & Web Development 2010 The brochure is a pdf. it is directly linked back to the page from which it was accessed. 28 .

Multimedia Design & Web Development 2010 The events page is a pdf. 29 . it is directly linked back to the page from which it was accessed.

Authentication if (!isset($_SESSION)) { session_start(). 30 .php".4 Source and executable code Home page & Login page Source code <?php require_once('Connections/Ballet. } if (isset($_POST['username'])) { $loginUsername=$_POST['username'].Multimedia Design & Web Development 2010 3. ?> <?php // *** Validate request to login to this site. $password=$_POST['password'].html". code (in blue } colour) $loginFormAction = $_SERVER['PHP_SELF'].php'). if (isset($_GET['accesscheck'])) { $_SESSION['PrevUrl'] = $_GET['accesscheck']. $MM_redirectLoginFailed = "valdation. $MM_fldUserAuthorization = "". $MM_redirectLoginSuccess = "admin.

$LoginRS__query=sprintf("SELECT username. } . } header("Location: " . } .style3 {font-family: "Times New Roman". 31 . font-size: 16px.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html. font-size: 24px. Times.0 Transitional//EN" "http://www. $_SESSION['MM_UserGroup'] = $loginStrGroup.td. password FROM login WHERE username='%s' AND password='%s'". serif. mysql_select_db($database_Ballet. $MM_redirectLoginFailed ). $Ballet). charset=iso-8859-1" /> <title>home</title> <style type="text/css"> <!-a:link { color: #00FF99. $loginFoundUser = mysql_num_rows($LoginRS). get_magic_quotes_gpc() ? $password : addslashes($password)).th { font-family: Edwardian Script ITC. } } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. serif. } body.w3. $MM_redirectLoginSuccess ). $LoginRS = mysql_query($LoginRS__query.org/TR/xhtml1/DTD/xhtml1-transitional. font-size: 14px. Times.Multimedia Design & Web Development 2010 $MM_redirecttoReferrer = false. font-size: 16.dtd"> <html xmlns="http://www.style6 { font-family: "Edwardian Script ITC". serif. if ($loginFoundUser) { $loginStrGroup = "". if (isset($_SESSION['PrevUrl']) && false) { $MM_redirectLoginSuccess = $_SESSION['PrevUrl']. $Ballet) or die(mysql_error()).style5 { font-family: "Times New Roman".style1 { font-family: "Times New Roman". } . //declare two session variables and assign them $_SESSION['MM_Username'] = $loginUsername. get_magic_quotes_gpc() ? $loginUsername : addslashes($loginUsername). } else { header("Location: ".style4 {font-size: 14px} . } .w3. Times.

" + verMinor). } . Times.com/shockwave/download/download. font-size: 12px. Times. } . var reqVer = parseFloat(verArr[0] + ".0.style17 { font-family: "Times New Roman". font-size: 24px.Multimedia Design & Web Development 2010 font-size: 36px. 32 . serif} . serif.description : "".split("r") : descArr[4]. var verMajor = tempArrMajor[0].description : desc. Times.style11 {font-family: "Times New Roman". flashVer = parseFloat(verMajor + ".0"] ? plugins["Shockwave Flash 2.style12 {color: #FFFFFF} . if (plugins && plugins.length > 0){ var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].style16 {font-family: "Times New Roman". serif.style8 { font-family: "Times New Roman".split("."). desc = plugins["Shockwave Flash 2. serif. Times. var tempArrMinor = (descArr[3] != "") ? descArr[3]. } . if (flashVer < reqVer){ if (confirm(msg)) window.style13 { font-size: 27px. if (!isIE || !isWin){ var flashVer = -1.toLowerCase(). font-size: 18px. var verArr = reqVerStr. } . var tempArrMajor = descArr[2]. else{ var descArr = desc.indexOf("Opera") == -1). var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0.toLowerCase().indexOf("win") != -1). } } // WebTV has Flash Player 4 or lower -.location = "http://www. font-weight: bold. } --> </style> <script type="text/javascript"> function MM_CheckFlashVersion(reqVerStr." + verArr[2]).").macromedia. } .indexOf("webtv") != -1) flashVer = 4.too low for video else if (userAgent. if (desc == "") flashVer = -1.split(" ").style9 {font-size: 12px} .cgi?P1_Prod_Version=ShockwaveFlash". font-weight: bold.style18 { font-family: "Edwardian Script ITC". color: #000000. var isWin = (appVersion.indexOf("MSIE") != -1 && userAgent.0"].msg){ with(navigator){ var isIE = (appVersion.split("r").split(".

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.&nbsp.&nbsp.&nbsp.0.cab#version=7.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.com/pub/shockwave/cabs/flash/swflash.cab#version=7.&nbsp.19.&nbsp.&nbsp.macromedia.</td> <td height="54" colspan="10" valign="top" bgcolor="#000000">&nbsp.&nbsp.0'.swf" /> <param name="quality" value="high" /> <embed src="button1.19.macromedia.&nbsp.&nbsp.&nbsp.19.&nbsp.&nbsp.com/pub/shockwave/cabs/flash/swflash.&nbsp.&nbsp.&nbsp.macromedia.&nbsp.&nbsp. &nbsp.19.&nbsp.&nbsp.swf" width="108" height="46" quality="high" pluginspage="http://www.0.0" width="108" height="46" title="Feedback"> <param name="BGCOLOR" value="#000000" /> 33 .macromedia.19.cab#version=7.&nbsp.&nbsp.&nbsp.swf" width="108" height="46" quality="high" pluginspage="http://www.macromedia."> <div align="center"> <table width="949" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="54" rowspan="16" valign="top" bgcolor="#000000"><!--DWLayoutEmptyCell-->&nbsp.com/pub/shockwave/cabs/flash/swflash. Do you want to download it now?').&nbsp.&nbsp.&nbsp.&nbsp.macromedia.&nbsp.&nbsp.&nbsp.&nbsp.cab#version=7.0" width="108" height="46" title="Classes"> <param name="BGCOLOR" value="#000000" /> <param name="movie" value="button2.&nbsp.0" width="108" height="46" title="About us"> <param name="BGCOLOR" value="#000000" /> <param name="movie" value="about us.&nbsp.Multimedia Design & Web Development 2010 } } } } </script> </head> <body onload="MM_CheckFlashVersion('7.0.swf" /> <param name="quality" value="high" /> <embed src="about us.&nbsp.0" width="108" height="46" title="home"> <param name="BGCOLOR" value="#000000" /> <param name="movie" value="button1.macromedia.0.com/pub/shockwave/cabs/flash/swflash.&nbsp.&nbsp.&nbsp.&nbs p.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#000000"></embed> </object> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.&nbsp.&nbsp.swf" /> <param name="quality" value="high" /> <embed src="button2.&nbsp.&nbsp.&nbsp.&nbsp.&nb sp.&nbsp.'Content on this page requires a newer version of Macromedia Flash Player.&nbsp.&nbsp.&n bsp.&nbsp.&nbsp.0.&nbsp.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#000000"></embed> </object> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#000000"></embed> </object> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.swf" width="108" height="46" quality="high" pluginspage="http://www.&nbsp.&nbsp.

beauty of ballet.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#000000"></embed> </object> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.and &nbsp.swf" width="108" height="46" quality="high" pluginspage="http://www. as well as providing excellence in Ballet.macromedia.taking this prestigious award. </p> 34 .png" alt="log" width="221" height="208" banner /></td> (brown) <td colspan="5" valign="top"><label></label> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.ballet &nbsp.Multimedia Design & Web Development 2010 <param name="movie" value="button3.A world acclaimed Ballet Academy having housed the worlds<img src="image/spacer.graceful art. We have the best that facilities have<br /> &nbsp. <br /> &nbsp.macromedia. </span><span class="style9"><span class="style11">RB</span>&gt.19.macromedia.We at The Royal Ballet Academy believe in hard work and &nbsp.dedication.swf" /> <param name="quality" value="high" /> <embed src="button4.&gt.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#000000"></embed> </object></td> <td width="59" rowspan="16" valign="top" bgcolor="#000000"><!--DWLayoutEmptyCell-->&nbsp.cab#version=7. <span class="style16">Home</span></span><br /> &nbsp.swf" /> <param name="quality" value="high" /> <embed src="ban.you are here &gt.com/pub/shockwave/cabs/flash/swflash.cab#version=7.com/pub/shockwave/cabs/flash/swflash.0" width="614" height="208" title="ba"> <param name="movie" value="ban.19.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"> &nbsp.0" width="108" height="46" title="Gallery"> <param name="BGCOLOR" value="#000000" /> <param name="movie" value="button4.swf" /> <param name="quality" value="high" /> <embed src="button3. we only wish <br /> to continue &nbsp.&nbsp.&nbsp.&nbsp.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">&nbsp.&nbsp.0.This is undoubtably the best place to practice the grace<br /> &nbsp.&nbsp.Many a time we have scoped the award for the best <br /> &nbsp.to offer.gif" alt="line" width="1" height="1" /> &nbsp.</p> <p align="justify" class="style1">&nbsp.&gt.swf" quality="high" pluginspage="http://www.swf" width="108" height="46" quality="high" pluginspage="http://www.academy on the Canadian front.</td> <td width="1"></td> </tr> Flash <tr> <td height="208" colspan="5" valign="top"><img src="image/logo2.</span></p> <p class="style1">&nbsp.macromedia.top most in ballet and fostering the future leaders in this <br /> &nbsp.0.

&nbsp.</td> <td width="221" rowspan="5" valign="top" bgcolor="#D4D4D4"><p>&nbsp.&nbsp.</td> <td></td> </tr> <tr> <td height="29" valign="top" bgcolor="#D4D4D4"><!--DWLayoutEmptyCell-->&nbsp.&nbsp.png" alt="ani" width="146" height="53" border="0" /></a></td> <td width="27" rowspan="9" valign="top" bgcolor="#D4D4D4"><!--DWLayoutEmptyCell-->&nbsp.</td> <td width="146" height="53" valign="top"><a href="register.&nbsp.&nbsp.1December marks the start of &nbsp.our christmas celebrations<br /> &nbsp.&nbsp.</td> <td></td> </tr> <tr> <td rowspan="2" valign="top"><a href="image/brochureballet.&nbsp.&nbsp.&nbsp.<br /> <strong>&nbsp.&nbsp.gif" width="1" height="1" /></td> <td></td> </tr> <tr> <td height="53" colspan="3" valign="top" bgcolor="#D4D4D4">&nbsp.</td> <td width="4" rowspan="10" valign="top" bgcolor="#430017"><!--DWLayoutEmptyCell-->&nbsp.&nbsp.cab#version=7.Multimedia Design & Web Development 2010 <p class="style1">&nbsp.&nbsp.&nbsp.</td> <td colspan="2" rowspan="4" valign="top" bgcolor="#D4D4D4"><!--DWLayoutEmptyCell-->&nbsp.&nbsp.get in touch with us ! </span></td> <td width="4" rowspan="10" valign="top" bgcolor="#430017"><!--DWLayoutEmptyCell-->&nbsp.php"><img src="image/ani.pdf"><img src="image/btnFlash video downloadbrochure.&nbsp.S <span class="style5">imple and easy registration<br /> &nbsp.com/pub/shockwave/cabs/flash/swflash.&nbsp.&nbsp.0" width="233" height="176" id="FLVPlayer"> <param name="movie" value="FLVPlayer_Progressive.All are welcome.0.0.</td> <td width="10" rowspan="10" valign="top" bgcolor="#D4D4D4"><!--DWLayoutEmptyCell-->&nbsp. <br /> &nbsp.&nbsp.</td> <td></td> </tr> <tr> <td width="34" rowspan="9" valign="top" bgcolor="#D4D4D4"><!--DWLayoutEmptyCell-->&nbsp.&nbsp.</td> <td colspan="2" rowspan="3" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8444553540000" codebase="http://download.&nbsp.macromedia. Be a part of this slice of excellence.&nbsp.&nbsp.U<span class="style1"> pcoming events</span> </strong><br /> <br /> &nbsp.swf" /> <param name="salign" value="lt" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="FlashVars" 35 .<strong>Video</strong><br /> &nbsp.jpg" alt="bro" width="146" height="102" border="0" /></a></td> <td height="38"></td> (purple) </tr> <tr> <td width="5" rowspan="6" valign="top" bgcolor="#D4D4D4"><!--DWLayoutEmptyCell-->&nbsp.The beauty and grace of ballet </p> <img src="image/spacer.&nbsp.<br /> &nbsp.<span class="style6">P</span>atricia Wong</p> <p class="style1">&nbsp.&nbsp.----------------------<br /> &nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.Director<br /> </p></td> <td colspan="3" valign="top" bgcolor="#D4D4D4"><!--DWLayoutEmptyCell-->&nbsp.&nbsp.&nbsp.&nbsp.

Multimedia Design & Web Development 2010 value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=ballet&autoPlay=true&autoRewind =false" /> <embed src="FLVPlayer_Progressive. </td> <td height="31"></td> </tr> <tr> <td height="29" valign="top" bgcolor="#D4D4D4"><!--DWLayoutEmptyCell-->&nbsp. ?>"> <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>&nbsp.macromedia.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.at the Royal Ballet Academy only offer the best.</td> <td></td> </tr> <tr> <td rowspan="2" valign="top"><a href="image/events.jpg" alt="cal" width="146" height="114" border="0" /></a></td> <td height="83"></td> </tr> <tr> <td colspan="2" rowspan="3" valign="top" bgcolor="#D4D4D4">The video portrays the elligance fo ballet.</td> <td></td> </tr> <tr> <td height="38" valign="top" bgcolor="#D4D4D4"><a href="guestbook.</td> <td><input type="submit" name="Submit" value="Login" /></td> </tr> </table> </form></td> <td></td> 36 . We .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.pdf"><img src="image/btn-eventscalendar.com/go/getflashplayer" /> </object></td> <td height="64"></td> </tr> <tr> <td height="29" valign="top" bgcolor="#D4D4D4"><!--DWLayoutEmptyCell-->&nbsp.

&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp. Celestin &amp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.html">&nbsp.&nbsp.<span class="style3">&nbsp.&nbsp.&nbsp.</td> <td></td> </tr> <tr> <td height="1"></td> <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 .&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nb sp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp. Loren 2010</span> </span></span></td> <td></td> </tr> <tr> <td height="73" colspan="10" valign="top" bgcolor="#000000"><!--DWLayoutEmptyCell-->&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&n bsp.&nbsp.&nbsp.<span class="style4">&copy.&nbsp.Multimedia Design & Web Development 2010 </tr> <tr> <td height="87" colspan="10" valign="top" bgcolor="#430017">&nbsp.&nbsp. UK <br /> <a href="sitemap.&nbs p.&nbsp.&nbsp.& nbsp.&nbs p.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nb sp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp. &nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbs p.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp. &nbsp.&nbsp.Site Map&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.& nbsp.&n bsp.&nbsp.&nbsp.Contact Information: 212 Idley Lane.&nbsp.Terms and conditions <br /> &nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.<span class="style12">&nbsp.</a>&nbsp.+2441555115 OR +342653253 &nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nb sp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.&nbsp.

This is as a result of creating the flash banner and flash video. updating. choosing the most appropriate font and color. The design of the system took the longest period to complete. and view of registered participants. registering.Multimedia Design & Web Development 2010 3. With the design also came coding for the administrator functions. Testing and documenting the system both took around the same time to complete. feedback.5 Discussion of group meeting As a group we met on a continual basis in order to meet our final product. Weelkly progress Design Coding Testing Documentation 38 . all form validation. Testing involved ensuring that all functions were working up to requirements these include. delete. Coding however was done via Macromedia Dreamweaver. search. and search functions on the administrator’s part. such as update. deleting. searching. view.

39 . While trying to register I forgot to enter my details therefore the form validation message m appeared.Multimedia Design & Web Development 2010 Section B: Individual report ndividual 1. I got a registered and a message displaying the result is shown as screenshot. After having entered the data a second time correctly this time. Functionality and data testing • Data insertion and validation In the following I will register myself to the Ballet site.

I will login with my name and password as required by the system.Multimedia Design & Web Development 2010 • Login Admin page ying In the above form displaying the admin login. tly Administrat Upon successful login I have directly accesses to the Administrator page. 40 .

Multimedia Design & Web Development 2010 • Update Records In the following form the name of one participant is FABIN let’s change it to Legenda. 41 . As we can see in the table below the has been changed to LEGENDA.

Multimedia Design & Web Development 2010 2. 42 . Step 2. 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.Enter name and password Step 3. 1 Step: Go to localhost: http//localhost/. Setup and use of application Following I explain how to setup and use my application using Php Admin to create database and tables.

6. 5. Problems The problem encountered while developing the website concerns the form Delete and Search but after many tries we setup the forms successfully. When this is done. you enter the following in the browser http://localhost/phpmyadmin and the when it loads.Multimedia Design & Web Development 2010 3. 43 . and later you can use the insert button to insert the data. I draw the steps to follow at question no 2. it requests you to create new table and also specify the number of fields your table will have. 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. Average (5) highest grade (10) No 1 2 3 4 QUESTIONS Style and presentation Quality of contents Navigation around the site Time to download pages Grade per 10 10 5 10 5 The overall evaluation of the website is satisfactory based on the feedback received from lecturer and colleagues as well. insert records. MySQL requests you to enter the database name. delete. you click on create option. Usability evaluation question: lowest (1). 4. Technical description of webpage used to support and run the application Creating the database using Php Admin Interface To do this. search and view records. When you are done you click on go button and it is time for you to name your fields. 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.

In Simple steps. James A.com/browse/media 44 . Pearson 2010. World Wide Web http://dictionary.Multimedia Design & Web Development 2010 REFERENCES Web Design.Brannan.reference.

Sign up to vote on this title
UsefulNot useful