UNIVERSITY OF MAURITIUS

FACULTY OF ENGINEERING

SECOND SEMESTER EXAMINATIONS

MAY 2016

BSc (Hons) Computer Science

PROGRAMME
BSc (Hons) Computer Science (Mixed Mode)

MODULE NAME Web-Centric Computing

Wednesday
DATE MODULE CODE CSE1023Y(1)
11 May 2016

TIME 09.30 – 12.30 Hrs DURATION 3 hours

NO. OF NO. OF QUESTIONS

4 4
QUESTIONS SET TO BE ATTEMPTED

INSTRUCTIONS TO CANDIDATES

There are TWO (2) Sections in this Paper: Section A and Section B.

Section A consists of TWO (2) Compulsory Questions and Section B consists of Two
(2) Compulsory Questions.

Answer ALL Questions from both Sections.

All Questions carry equal marks.

Use separate Answer Booklets for each Section.

 WEB-CENTRIC COMPUTING - CSE1023Y(1)

SECTION A

Answer ALL Questions from this Section. All Questions carry equal marks.

Use separate Answer Booklets for this Section.

Question 1 [25 marks]

To gain access to the IT Forum Registration form, a user needs to type the following
URL as shown in Figure 1 below, in a HTML5 compliant browser.

http://www.shehzad.edu/ITForum/index.html
Figure 1: URL of the IT Forum Registration form

The browser sends the request for the resource (index.html) and displays the response,
which is the IT Forum Registration form as shown in Figure 2 below.

1
2
3
4

5
6

Figure 2: index.html

Page 1 of 13
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 1 (Continued)

Additional Information
1: Set id and name of textbox to txtUsername
2: Set id and name of element to dteDOB (NOT type text)
3: Radio buttons having names optGender and values ‘M’ and ‘F’ respectively.
4: Set id and name of element to emlEmail (NOT type text)
5: Drop down (set name and id to sltInterest) containing the following: Please select
your main interest (value=0), Web application development (value=1), and Network
programming (value=2).
6: Set id and name of spin control to nbrProgrammingSkills, set minimum to 1, set
maximum to 5 and set increment/decrement (step) to 0.5.
7: Set id and name of element to txaBio (NOT type text)
8: Set id and name of element to chkAgree.
9: Button which submits data to process.php.

Note:
 Items listed as (NOT type text) are of other types.
 No table tag was used to create the page structure. This was done by CSS
which you do not need to implement.
 All elements having an asterisk after their label require user input
(implemented in HTML5 itself).

(a) Differentiate between GET and POST methods.

[2 marks]

(b) Write the http request sent to the www.Shehzad.edu server when the URL in
Figure 1 is typed in the browser assuming that http 1.1 was used.
[3 marks]

(c) Implement index.html in HTML5 based on the screen design (Figure 2) and the
additional information provided. Note: information from all elements is to be
submitted to the page process.php by POST.
[17 marks]

When a request is made for the index.html, the html code is transported in the body of
the response constructed by the www.Shehzad.edu server.

(d) Write the status line and content type of the response received assuming that http
1.1 was used and the request was successfully processed.
[2+1 marks]

Page 2 of 13
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 2 [25 marks]

XYZ is an e-commerce web site which consists of a number of pages, amongst which
there are ProductSearch.php and ProductDisplay.php.

ProductSearch.php contains a drop-down list that allows users to choose a specific

product name and click on the Search button.

Figure 3 – ProductSearch.php

The search button redirects users to ProductDisplay.php which displays detailed

information about the product selected.

Figure 4 – ProductDisplay.php

Page 3 of 13
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 2 (Continued)

Product information is retrieved from XYZ database which has been implemented in
MySQL. The XYZ database consists of a Product Table. The information about the XYZ
database and the Product table are shown in Figure 5 below.

XYZ Database Product Table

Servername localhost Field Type
Username XYZ ProductID int(5) Primary
Password XYZ Key
ProductNa varchar(20) -
me
ProductDes varchar(40) -
c
ProductImg varchar(20) -
Price varchar(10) -
Figure 5 – Database schema and Product table schema

a) Write the code for dbconnect.php which contains all database connection code
using the information provided in Figure 5.
[3 marks]

b) Implement ProductSearch.php using PHP given that the drop-down list has been
populated with product names, ProductName from table Product and all
information is submitted to the ProductDisplay.php page via GET method. You
should use dbconnect.php.
[8 marks]

c) Implement ProductDisplay.php (as shown in Figure 4) which displays all the

information of the selected product on ProductSearch.php. You should use
dbconnect.php.
[10 marks]

d) Often pages which need to be accessible to authenticated users only make use of
sessions.

i. Explain the term session and when it is used.

[1 mark]
ii. Write the php code to create a session called username containing the
value $_POST[‘username’].
[2 marks]
iii. Write the php code to destroy that session.
[1 mark]

Page 4 of 13
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

SECTION B

Answer ALL Questions from this Section. All Questions carry equal marks.

Use separate Answer Booklets for this Section.

Question 3 [25 marks]

Consider a movie rating application, shown in Figure 6, which allows a user to view
details and rate movies which are found in the movie database.

The movie details form provides a textbox txtMovieName where the user can input the
name of the movie he/she wants to rate. After the user enters the movie name, he/she
clicks on the ‘Search’ button to look up the movie in the database. Once the movie is
found, the details such as the year released is shown in the txtYearReleased textbox and
the synopsis is presented in the txaSynopsis textarea. Conversely, if the movie is not
found in the database, the message ‘This movie is not in the Database.’ is displayed in
the div divAvailability instead.

Textbox: id &
name =
‘txtMovieName’

Div: id =
‘divAvailability’

Textbox: id &
name =
‘txtYearReleased’

Textarea: id &
name =
‘txaSynopsis’

Figure 6 – Movie details form

Page 5 of 13
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 3 (Continued)

For example, in Figure 6 above, the movie name “Batman vs Superman” was entered
and the ‘Search’ button was clicked. The code was sent to the server through AJAX.
The server sent back the details of the movie in XML format.

The HTML code for the ‘Search’ button in the order details form is given in Code Listing
1 below.

<input type="button" onclick="makeAjaxRequest()" value="Search" class="right">

Code Listing 1: HTML code for Search button

When the button is clicked, the ajax function makeAjaxRequest from file Ajax.js is called.

You are required to complete the AJAX functionality according to the requirements
below:

i. Required data shall be sent to the checkdetails.php for processing via POST
method.

ii. XML data processed by the server shall be returned to an anonymous callback
function pointed by the processAjaxResponse variable.

iii. The returned XML shall be checked and details of movies loaded in the relevant
fields or ‘This movie is not in the Database.’ message is displayed in the div
element.

The different possible XML responses are shown in Code Listing 2 below.

Possibility 1
<?xml version='1.0' encoding='UTF-8'?>
<movie>
<year>2016</year>
<synopsis>Batman beats Superman and everybody is happy!</synopsis>
</movie>

OR
Possibility 2
<?xml version='1.0' encoding='UTF-8'?>
<movie></movie>
Code Listing 2: Possible XML responses from server

Note:
The root element is returned without any child when the movie is not found in the
database.

Page 6 of 13
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 3 (Continued)

An example of possibility 1 is shown in Figure 7 below.

Figure 7: elements updated with data in XML

Page 7 of 13
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 3 (Continued)
The Ajax.js file is listed below (Code Listing 3).
var myAjax = null;

function createAjaxRequest(){
// The new XMLHttpRequest codes should work on all modern browsers.
try { return new XMLHttpRequest(); } catch(e) {}
// ActiveXObjects used by older IE browser - Not Shown.
alert("XMLHttpRequest not supported");
return null;
}

function makeAjaxRequest(){
/*************************************************
* Missing Code - JS1 *
* complete function makeAjaxRequest *
* ************************************************
* Hint(s) *
* 1. Establish connection to server *
* through AJAX object *
* 2. Set reference to callback function *
* 3. Send data to server *
************************************************/
}

var processAjaxResponse = function(){

if(Missing Code: JS2 – check if response is ok for processing){

var divAvailability = document.getElementById("divAvailability");

var txtYearReleased = document.getElementById("txtYearReleased");
var txaSynopsis = document.getElementById("txaSynopsis");

if(divAvailability.hasChildNodes()){
divAvailability.removeChild(divAvailability.childNodes[0]);
}

/**************************************************
* Missing Code(s) – JS3 *
* *************************************************
* Hint(s) *
* 1. Read XML *
* 2. Load data in relevant elements (possibility 1)*
* 3. Else load string message (possibility 2) *
**************************************************/
}
}
}
Code Listing 3: Ajax.js

Page 8 of 13
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 3 (Continued)

(a) You are required to complete all the missing code JS1 – JS3 sections based on
the requirements specified above and any other detail given in the Ajax.js file.
Do NOT use the jQuery or any other Javascript library for the code
implementation.
[8 + 2 + 8 marks]

The request from the Ajax function is sent to checkdetails.php which connects to the
movie database through the dbconnect.php file to generate the XML in Code Listing 2.

The SQL statement in Code Listing 4 below shall help to retrieve the details of the movie,
provided that it stored in the database.

$sql = "SELECT MovieName, YearReleased, Synopsis FROM Movie WHERE

MovieName = '" . $movieName . "'";
Code Listing 4: SQL Statement

Note: $movieName is the variable which holds the name of the movie.

Sample data retrieved by the SQL statement when value of variable $movieName is
Batman vs Superman is shown in Figure 8 below.

Figure 8 – Sample data retrieved by SQL statement in Code Listing 4

Page 9 of 13
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 3 (Continued)

The checkdetails.php is shown in Code Listing 5 below.

<?php
error_reporting(E_ALL ^ (E_WARNING | E_DEPRECATED));
header("Cache-Control: no-cache");
header("Pragma: no-cache");

Missing Code - PHP1 - MIME Header

date_default_timezone_set("Indian/Mauritius");
include_once('dbconnect.php');
$strMovieDetails = "";

if (!empty($_POST['txtMovieName'])) {
$movieName = $_POST['txtMovieName'];

$sql = "SELECT MovieName, YearReleased, Synopsis FROM Movie WHERE

MovieName = '" . $movieName . "'";
$dbResult = mysql_query($sql, $conn) or die(mysql_error());

Missing Code – PHP2

/* Hint(s):
1. Read resultset
2. Construct XML
*/
?>
Code Listing 5: checkdetails.php

Note:
In case the resultset is empty, then the root element <movie> will not contain any child.

(b) You are required to complete all the missing code PHP1 – PHP2 sections based
on the requirements given above and any other detail given in the
checkdetails.php file.
[1+6 marks]

Page 10 of 13
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 4 [25 marks]

a) Refer to the page, template.html, displayed in Figure 9 below.

Figure 9 - template.html

Write the code for the page styles.css given that template.html is formatted as
follows:
 The background color of the header and footer is #BCCE98, of left section
is #DAE9BC, of right section is #F7FDEB and center section is #fff.
 The font-size of the header and the footer is large.
 The min-width of the body is 630px.
[5 marks]

Page 11 of 13
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 4 (Continued)

b) The page trip.html is given in Figure 10.

Figure 10 - trip.html

The combo box cmbTrip contains information on 3 trips with their corresponding prices
(values) as follows:

Trip Price/person
Tour of the Island Rs 1000
Adventure Park Rs 500
Ile Aux Cerfs Rs 500

Write JavaScript code for the following ONLY

i) The function showPrice() which makes the price appear automatically in the
txtPrice textbox when the user selects any one of the three trips.

ii) The function calPrice() is called when the button ‘More than 1 person’ is
clicked. That function prompts the user to enter the number of persons. The
default value in the prompt is 1. If he clicks on Ok, the txtPrice textbox is
updated to show total price. If the user clicks on Cancel, the price of the
selected trip for one person is displayed in the txtPrice textbox.

iii) How the functions showPrice() and calPrice() are called from the HTML code.
[2 + 6 + 2 marks]

Page 12 of 13
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 4 (Continued)

c) Write the schema for products.xml, shown in Code Listing 6, given the following:
 The following schema namespace:
xmlns:xs="http://www.w3.org/2001/XMLSchema" should be used in your
XSD file.
 Maximum number of products: 10 and minimum number of products : 2
 Id attribute of product has the following format “PR+3 digits”
 Manufacturer can only be one of the following: Apple, hp or Acer.

<?xml version="1.0" encoding="utf-8"?>

<products xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="products.xsd">
<product id="PR001">
<name>Laptop</name>
<manufacturer>Apple</manufacturer>
<price>50000</price>
</product>
<product id="PR002">
<name>Printer</name>
<manufacturer>hp</manufacturer>
<price>6000</price>
</product>
</products>
Code Listing 6 – product.xml
[10 marks]

END OF QUESTION PAPER

/fp

Page 13 of 13