You are on page 1of 12

UNIVERSITY OF MAURITIUS FACULTY OF ENGINEERING

FIRST SEMESTER EXAMINATIONS

NOVEMBER/DECEMBER NOVEMBER/DECEMBER 2010


PROGRAMME MODULE NAME DATE
BSc (Hons) Information Systems Web Technologies Special Paper Monday 22 November 2010

MODULE CODE

CSE 2003Y(3)

TIME NO. OF QUESTIONS SET

09.30 12.30 Hrs 5

DURATION NO. OF QUESTIONS TO BE ATTEMPTED

3 hours 5

INSTRUCTIONS TO CANDIDATES Answer All Questions Read the entire set of questions before attempting the questions All questions relate to the feedback case study

WEB TECHNOLOGIES CSE 2003Y(3) Consider a feedback application that is being developed to collect feedback from students about different modules. The following schema has been defined for the feedback database, implemented in MySQL. classsizes (classsize, classsizedesc) feedbacks (email, modulecode, moduleyear, classsize, delivery, labs, othercomments, moderation) modules(modulecode, moduledesc) users(username, pass) Notes: classsize and modulecode in the feedbacks table are foreign keys from the classsizes and modules tables respectively. The moderation field (of type enum) contains values 'a' for approved, 'p' for pending, and 'r' for rejected. The default value is 'p'. The values for the classsizes table are '-1', '1' , '2' , '3' in the classsize field for 'poor', 'adequate', 'good' and 'excellent' respectively in the classsizedesc field. Delivery and labs fields are boolean and indicate whether improvements are required in the delivery and labs (a value of 1 indicates that improvement is required)

Page 1 of 11

WEB TECHNOLOGIES CSE 2003Y(3) Question 1 [20 Marks] Consider the screenshot below (Figure 1), index.html, which consists of 4 frames: top.html, left.html, right.html and bottom.html. The page which is displayed in the right frame is feedback.html.

top.html

20%

70% left.html

right.html bottom.html 15% 85% 10%

Figure 1: index.html The specifications of each page are given below: Specifications This page specifies the arrangement of the frames, i.e. the number of columns and rows. top.html This page consists of a title and the <h1> tag has been applied to the text. left.html This page has five hyperlinks: o register.html, login.html and feedback.html open in the right frame. o about.html opens in a new window. o suggestion.html represents an email link to cse1041@uom.ac.mu. right.html This frame is used to display the contents of the Register, Login and Feedback pages. bottom.html This page consists of an image copyright.jpg of size 800 x 600 pixels. Note that all images are saved in the folder images found in the same directory as the html pages /Contd next page Page 2 of 11 HTML page index.html

WEB TECHNOLOGIES CSE 2003Y(3) Question 1 [Contd] (a) Write the HTML codes for the following pages: (i) (ii) (iii) index.html top.html left.html [3 + 2 + 5 marks] (b) Assume that the frameset arrangement for index.html has been changed as follows and a new set of html pages has been defined. Draw the new frame layout for index.html.
<HTML> <HEAD> <TITLE>A frameset document</TITLE> </HEAD> <BODY> <frameset rows="50%,50%" cols="50%,50%"> <frame src="topleft.html" name="topleft"> <frame src="topright.html" name="topright"> <frame src="botleft.html" name="botleft"> <frameset rows="50%,50%"> <frameset cols="50%,50%"> <frame src="brtl.html" name="brtl"> <frame src="brtr.html" name="brtr"> </frameset> <frame src="botright.html" name="botright"> </frameset> </frameset> </BODY> </HTML>

[2 marks] (c) The purpose of the feedback.html page is to send feedback about a particular module. The form consists of the following information: Module code, Module Description, Programme, Class size, Improvements and Other Comments. Possible values for the Programme are: Computer Science and Engineering (E318) Computer Applications (E317) Information Systems (E311)

The input is submitted to feedback_process.php when the user clicks on the submit button, using the GET method. Write the HTML codes for feedback.html, which is displayed in the right frame above. [8 marks]

Page 3 of 11

WEB TECHNOLOGIES CSE 2003Y(3) Question 2 [20 Marks]


(a)

The left.html and right.html from Question 1 contains the code snippet below inside their body section.
<body> <link rel=stylesheet href=styles/mystyle.css type=text/css/> . . </body>

(i) (ii)

Based on the code snippet, state what type of CSS is being used. [2 marks] Given the requirements below, write the content of the mystyle.css file. Requirements: Background colour of left.html should be yellow Background colour of feedback.html should be pink The content of all text-boxes in the form should appear as uppercase The following information can helpful: CSS property background-color text-transform Sample values black, white, #b0c4de lowercase, capitalize, uppercase

It should be assumed that the body tags of left.html and feedback.html are as follows: <body id=menustyle> & <body id=mainstyle> respectively. All the text-boxes in the form have the class name uppercasestyle as shown below: <input type=text class=uppercasestyle.... [5 marks] (b) Given the JavaScript function below:

function validateModuleCode(){ var value=document.forms[0].txt_modulecode.value; var filter; //write and assign the appropriate regular expression pattern to the filter variable if(!filter.test(value)){ alert(The module code entered is not in the appropriate format); return false; } return true; }//end of function validateModuleCode

Page 4 of 11

WEB TECHNOLOGIES CSE 2003Y(3) Based on the requirements given below, write the regular expression pattern to replace the commented line: //write and assign the appropriate regular expression pattern to the filter variable Requirements for a valid module code: (i) It should start with only 3 to 4 alphabets in uppercase; (ii) It should be followed by exactly 4 numbers; (iii) It should be followed by an optional letter Y (iv) No other characters should follow the Y Sample module codes: CSE1041 PSYC2007Y CSE2003Y [8 marks] (c) The function validateModuleCode() is called when the form is submitted. Write the code snippet along with the html tag within which it is placed to make the function call. You should ensure that in case the data is invalid, it does not get submitted to the server. [3 marks] Differentiate between the two in-built JavaScript functions indexOf() and charAt(). Illustrate your answer using a simple example. [2 marks]

(d)

Question 3 [20 Marks] To be able to post feedback, users should first be authenticated by the system. For this purpose, they key in their username and password in a form login.php and submit. The submitted data is sent to authentication.php. (a) Which method should be used to send the data from the page containing the login form to the authentication.php page? Why? [1 mark] The content of authentication.php is given bellow.
<?php session_start(); $username=$_REQUEST[txt_username]; $password=$_REQUEST[txt_password]; //(i) select statement goes here. Note that table users includes the columns username and pass.

(b)

/Contd next page

Page 5 of 11

WEB TECHNOLOGIES CSE 2003Y(3) Question 3 [Contd]


include(db_connect.php); $Rs = mysql_query($select); if (mysql_num_rows($Rs)<1) { //(ii) write missing codes } else { //(iii) write missing codes } ?>

The codes given above have 3 parts missing. When complete, the code should check if the username-password pair exists in the database. If it does not exist, the user should be redirected to the page login.php. If a username-password pair exists, a session should be created and the value of the username should be stored in it, afterwhich, the user should be redirected to the page feedback.php. Write the codes for the missing parts (i), (ii) and (iii). Note that missing codes can consist of more than one statement. [2+1+2 marks] (c) Before displaying the content of feedback.php, the system should ensure that the user has been properly authenticated (valid username-password and session created). Write the code snippets to verify that the session created in b) has already been set. If it has not, redirect the user to the page login.php [3 marks] On analysing the schema, you find that there is no provision to keep track of the modules students register for. You add a table registers with the following schema, registers (username, modulecode, moduleyear) Write the codes that will populate a drop down list. You need not rewrite the entire set of codes, but only those that will create a drop down list to be populated with modules that a particular student has registered for. [11 marks]

(d)

Page 6 of 11

WEB TECHNOLOGIES CSE 2003Y(3) Question 4 [20 marks] Consider the following form (Figure 3) used for admin section to enter modules into the system. The codes for the form are provided. validate_session.php checks if the user has already logged into the system and redirects to login.php otherwise. addmodule.php is submitted to addmodule_pro.php. If the operation is successful, the user is redirected to addmodule.php and an appropriate success message is displayed to the user.

Figure 3 - addmodule.php Codes for: addmodule.php


<?php include("validate_session.php"); ?> <html> <head> <title>Add Module</title> </head> <body <?php if(isset($_GET['add'])) if($_GET['add']=="success") echo "onload=\"alert('Module Successfully Added')\""; ?>> <form action="addmodule_pro.php" method=post> Module Code<input type="text" name="txt_modulecode"></br> Module Description<input type="text" name="txt_moduledesc"></br> <input type="submit"> </form> </body> </html>

/Contd next page Page 7 of 11

WEB TECHNOLOGIES CSE 2003Y(3) Question 4 [Contd] (a) Explain the purpose of the line if(isset($_GET['add'])) [2 marks]

The codes for addmodule_pro.php are as follows. These codes sometimes give an error of the form: Error: Duplicate entry 'cse3343' for key 'PRIMARY' addmodule_pro.php
<?php include("validate_session.php"); include("db_connect.php"); //Capture the modulecode and moduledesc $modulecode = $_POST['txt_modulecode']; $moduledesc = $_POST['txt_moduledesc']; $sql_insert="INSERT INTO modules (modulecode, moduledesc) values ('$modulecode','$moduledesc')"; if (!mysql_query($sql_insert)) { die('Error: ' . mysql_error()); } mysql_close($con); header( 'Location: addmodule.php') ; ?>

(b)

Briefly explain the nature of this error and write the codes to give the user a user friendly message and take her to the page addmodule.php in case the condition causing the error is met. [7 marks] Now that you know about AJAX, you decide to change the page addmodule.php such that, each time the user is typing in the modulecode field, a request is sent to see if this modulecode already exists. Assume that you have a page, addmodule_test.php, that takes the modulecode and checks against the database if this modulecode exists. If so, it returns the value exists, else, returns notexists. Modify the codes in addmodule.php such that if the modulecode already exists, a message is displayed in red, next to the modulecode field to inform the user that this modulecode exists. Make sure in your code that: (i) You define the function that builds the request to the server. (ii) You call this function . (iii) You add the proper code for processcontents to give the desired behavior. [4+3+4 marks] You may find the following XMLHttpRequest object codes helpful that creates the

(c)

/Contd next page Page 8 of 11

WEB TECHNOLOGIES CSE 2003Y(3) Question 4 [Contd]


<script language="javascript"> var http_request; //Functions taken from http://www.captain.at/howto-ajax-form-postrequest.php function makePOSTRequest(url, parameters) { http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { // set type accordingly to anticipated content type //http_request.overrideMimeType('text/xml'); http_request.overrideMimeType('text/html'); } } else if (window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert('Cannot create XMLHTTP instance'); return false; } http_request.onreadystatechange = processContents; http_request.open('POST', url, true); http_request.setRequestHeader("Content-type", "application/x-www-formurlencoded"); http_request.setRequestHeader("Content-length", parameters.length); http_request.setRequestHeader("Connection", "close"); http_request.send(parameters); }//end makePOSTRequest </script>

Question 5 [20 marks] Since keeping all the past records about feedbacks submitted by students requires lots of space on the server, it has been decided to summarize the past feedbacks and store them as an XML file, summarizedfeedback.xml. For each module, the average classsize is computed, as well as the number of times improvements were requested in delivery and labs respectively. The file has the following format:

/Contd next page

Page 9 of 11

WEB TECHNOLOGIES CSE 2003Y(3) Question 5 [Contd]


<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="summarizedfeedback.xsl"?> <feedbacks> <year val="2007"> <module> <modulecode>CSE2003Y</modulecode> <avgclasssize>2</avgclasssize> <numimplabs>150</numimplabs> <numimpdel>100</numimpdel> </module> <module> <modulecode>CSE2005Y</modulecode> <avgclasssize>2</avgclasssize> <numimplabs>150</numimplabs> <numimpdel>100</numimpdel> </module> ... </year> <year val="2008"> <module> <modulecode>CSE2003Y</modulecode> <avgclasssize>3</avgclasssize> <numimplabs>150</numimplabs> <numimpdel>100</numimpdel> </module> <module> <modulecode>CSE2001Y</modulecode> <avgclasssize>2</avgclasssize> <numimplabs>150</numimplabs> <numimpdel>100</numimpdel> </module> </year> ... </feedbacks>

(a)

Write the schema, summarizedfeedback.xsd to validate the above xml. [10 marks] You want to apply an XSL, summarizedfeedback.xsl on the above xml such that the above file will have the following display (Figure 4), with the following restrictions: if the avgclasssize is less than 2, display it in red, if the numimplabs is greater than 100, display in blue, if numimpdel is greater that 100, display in yellow.

/Contd next page Page 10 of 11

WEB TECHNOLOGIES CSE 2003Y(3) Question 5 [Contd]

Figure 4: summarizedfeedback.xml (b) Write the codes for summarizedfeedback.xsl


[10 marks]

END OF QUESTION PAPER

/ph

Page 11 of 11

You might also like