UNIVERSITY OF MAURITIUS

Faculty of Information, Communication and Digital Technologies

SECOND SEMESTER EXAMINATIONS

(May 2017)

PROGRAMME BSc (Hons) Computer Science

MODULE NAME Web-Centric Computing

DATE Friday MODULE CODE CSE1023Y(1)

05 May 2017

TIME 09:30 – 12:30 Hrs DURATION 3 Hrs

NO. OF 4 NO. OF QUESTIONS 4

QUESTIONS SET TO BE ATTEMPTED

INSTRUCTIONS TO CANDIDATES

Answer all questions.

All questions carry equal marks.
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 1 [25 Marks]

To gain access to the UoM Gym reservation form, a user needs to type the following
URL as shown in Figure 1 below, in a HTML5 compliant browser.

http://www.uom.ac.mu/gym/index.html
Figure 1: URL of the UoM Gym reservation form

The browser sends the request for the resource (index.html) and displays the response,
which is the UoM Gym reservation form (in Opera browser) as shown in Figure 2
below.

2
3
4
5

10

Figure 2: index.html

…/Continued next page

1
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 1 (Continued)

Additional Information

1: Set id and name of element to dteReservation (NOT type text)

2: Set id and name of textbox to txtFullName
3: Set id and name of textbox to txtNIC
4: Radio buttons having names optMembership and values ‘M’ and ‘N’ respectively.
5: Set id and name of element to telTelephone (NOT type text)
6: Drop down (set name and id to sltCourt) containing the following: Please select
court (value=0), Tennis (value=1), and Basketball (value=2).
7: Set id and name of spin control to nbrHoursReserved, set minimum to 1, set
maximum to 5 and set increment/decrement to 0.5.
8: Set id and name of element to chkArrangements
9: Set id and name of element to txaSpecialArrangements (NOT type text)
10: 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) Explain the purpose of a DNS.

[2 marks]

(b) Write the http request sent to the www.uom.ac.mu 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.uom.ac.mu 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]

2
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 2 [25 marks]

The styling information for index.html shall be kept in an external CSS file myCSS.css in
the folder css in the application folder. Information about styling to be applied is as
follows:

(i) All required textboxes (textboxes with an asterisk after the label – see Figure 2)
shall display text in bold. Use CSS 3 to implement this style.

(ii) All elements having name starting with the letters ‘txa’ shall display text in italic
and have a beige background. Use CSS 3 to implement this style.

(iii) The font of the phone number (telTelephone) shall be set to Book Antiqua and
displayed in deeppink colour.
Hint: use the id of the element to implement this styling.

(a) Write the code which will link the external myCSS.css file to the index.html page.
[2 marks]

(b) Write the CSS code for the styling specified in the requirements above.
[2+4+2 marks]

(c) Write a JavaScript function checkNIC() which will validate the NIC No. Use a
regular expression and the method test() to check if the value entered in the NIC
No. textbox conforms to a particular National Identity Card number format. The
NIC starts with a letter, followed by 12 digits and ends with either a letter or
digit. The following error message "You have not provided a valid NIC number!"
will be displayed if an invalid NIC number is entered in the NIC textbox.
[6 marks]

…/Continued next page

3
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 2 (Continued)

An extract of the products.xml is shown in Code Listing 1 below:

<products>
<product code="pdt001">
<name>Peach Juice</name>
<manufacturer id="mfc033">Sunny</manufacturer>
<stock>refill</stock>
</product>
<product code="pdt002">
<name>Peanuts</name>
<manufacturer id="mfc028">Tropic</manufacturer>
<stock>ok</stock>
</product>
<product code="pdt003">
<name>Chocolate</name>
<manufacturer id="mfc033">Cadbury</manufacturer>
<stock>refill</stock>
</product>
</products>
Code Listing 1: products.xml

Additional information

(i) Use http://www.w3.org/2001/XMLSchema as namespace for the schema.

(ii) Declare a global type attributeType which will be used by both the id and code
attributes and this should allow any 3 characters and any 3 digits.
(iii) The only allowable stock values are refill and ok.
(iv) The products element can have a minimum of 1 and a maximum of 7 child
(product) elements listed.
(v) Add a reference (ref) to the product element from the products element. The
following code may help: <xs:element ref="myElement" …/>

(d) Use the additional information provided to code an XML schema which shall
validate the XML instance document in Code Listing 1.
[9 marks]

4
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 3 [25 marks]

Consider the view reservations page, shown in Figure 3, which allows a user to view
reservations for the different courts of the UoM Gym.

The reservation details form provides a date picker dteReservation where the user can
enter the date to view all the reservation on a specific day. After the user selects the
date, he/she clicks on the ‘Search’ button to look up the reservations in the
reservation2017 database (implemented in MySQL). If courts have been reserved on
that date, the details such as the name of the person, the type of court reserved and the
number of hours booked are shown in the divReservations div element. Conversely, if
the no reservation is found in the database, the message ‘No reservation found in the
Database.’ is displayed in the div divReservations instead.

Textbox: id &
name =
‘dteReservation’

Div: id =
‘divReservations’

Figure 3 – Reservation details form

For example, in Figure 3 above, the date “2017-03-27” was selected and the ‘Search’
button was clicked. The code was sent to the server through AJAX. The server sent
back the details of the reservations in XML format.

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

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

Code Listing 2: HTML code for Search button

5
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 3 (Continued)

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 checkreservations.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 reservations loaded in the
divReservations or ‘No reservation found in the Database.’ message is displayed
as an alert.

The different possible XML responses are shown in Code Listing 3 below.
Possibility 1
<?xml version='1.0' encoding='UTF-8'?>
<reservations>
<reservation>
<FullName>Christiano Ronaldo</FullName>
<Type>Tennis court</Type>
<Hours>3.5</Hours>
</reservation>
<reservation>
<FullName>Emre Can</FullName>
<Type>Basketball court</Type>
<Hours>4.0</Hours>
</reservation>
<!—other reservation elements if found in database -->
</reservations>

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

Note: The root element is returned without any child when the date is not found in the
database.
An example of possibility 1 is shown in Figure 4 below.

…/Continued next page

6
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Figure 4: divResrevations updated with data in XML

The Ajax.js file is listed below (Code Listing 4).

var myAjax = null;
function createAjaxRequest(){
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(){

7
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

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

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

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

/**************************************************
* Missing Code(s) – JS3 *
* *************************************************
* Hint(s) *
* 1. Read XML *
* 2. Load data in divReservations (possibility 1)*
* 3. Else alert message (possibility 2) *
**************************************************/
}
}
}
Code Listing 4: Ajax.js

(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 checkreservations.php which connects to
the reservation2017 database through the dbconnect.php file to generate the XML in Code
Listing 3.

The SQL statement in Code Listing 5 below shall help to retrieve the reservation details
on a specific date, provided that it stored in the database.

$sql = "SELECT FullName, Reservation.Type, Hours FROM Reservation WHERE

Reservation.Date = '" . $date . "'";
Code Listing 5: SQL Statement

Note: $date is the variable which holds the date retrieved from dteReservation.

…/Continued next page

8
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Sample data retrieved by the SQL statement when value of variable $date is 2017-03-27
is shown in Figure 5 below.

Figure 5 – Sample data retrieved by SQL statement in Code Listing 5

The checkreservations.php is shown in Code Listing 6 below.

<?php
header("Cache-Control: no-cache"); header("Content-type: application/xml");
include_once('dbconnect.php');
$strDetails = "";

if (!empty($_POST['dteReservation'])) {
$date = $_POST['dteReservation'];
$sql = "SELECT FullName, Reservation.Type, Hours FROM Reservation WHERE
Reservation.Date = '" . $date . "'";

$dbResult = mysql_query($sql, $conn) or die(mysql_error());

if (mysql_num_rows($dbResult) > 0) {
Missing Code – PHP1
/* Hint(s):
1. Read resultset
2. Construct XML
*/
}
mysql_free_result($dbResult);
mysql_close($conn);
}
Missing Code – PHP2
// Hint(s): Echo constructed XML
?>
Code Listing 6: checkreservations.php

Note: In case the resultset is empty, then the root element <reservations> 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
checkreservations.php file.
[5+2 marks]

9
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 4 [25 marks]

Students are allowed to give ratings of 1 to 5 stars to modules they are currently doing
during the mid-semester. These ratings are compiled at the department and exposed as
a Web Service through the WSDL as shown in Code Listing 7 below.
<?xml version="1.0" encoding="UTF-8"?>
<definitions targetNamespace="http://www.shehzad.edu/webservice"
xmlns:http="http://schemas.xmlsoap.org/wsdl/http/"
xmlns:mime="http://schemas.xmlsoap.org/wsdl/mime/"
xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/"
xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:this="http://www.shehzad.edu/webservice"
xmlns="http://schemas.xmlsoap.org/wsdl/"
xsi:schemaLocation="http://schemas.xmlsoap.org/wsdl/
http://schemas.xmlsoap.org/wsdl/wsdl.xsd http://www.w3.org/2001/XMLSchema
http://www.w3.org/2001/XMLSchema.xsd">
<types>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
targetNamespace="http://www.shehzad.edu/webservice"
elementFormDefault="qualified">
<xs:element name="Input">
<xs:complexType>
<xs:sequence>
<xs:element name="BatchId" type="xs:integer"/>
<xs:element name="Level" type="xs:integer"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:complexType name="RatingType">
<xs:sequence>
<xs:element name="Module" type="xs:string"/>
<xs:element name="Rating" type="xs:float"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="ArrayOfBatchRating">
<xs:sequence>
<xs:element name="BatchRating" minOccurs="0" maxOccurs="unbounded"
type="this:RatingType"/>
</xs:sequence>
</xs:complexType>
<xs:element name="Result" type="this:ArrayOfBatchRating"/>
</xs:schema>

10
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

</types>
<!-- Input message -->
<message name="getBatchRatingRequest">
<part name="input" element="this:Input"/>
</message>
<!-- End Input message -->
<!-- Output message -->
<message name="getBatchRatingResponse">
<part name="result" element="this:Result"/>
</message>
<!-- End Output message -->
<portType name="BatchRatingPortType">
<operation name="viewBatchRating">
<input message="this:getBatchRatingRequest"/>
<output message="this:getBatchRatingResponse"/>
</operation>
</portType>
<binding name="BatchRatingBinding" type="this:BatchRatingPortType">
<soap:binding style="document"
transport="http://schemas.xmlsoap.org/soap/http"/>
<operation name="viewBatchRating">
<soap:operation soapAction="http://www.shehzad.edu/webservice" />
<input><soap:body use="literal"/></input>
<output><soap:body use="literal"/></output>
</operation>
</binding>
<service name="BatchRatingService">
<port name="BatchRatingPort" binding="this:BatchRatingBinding">
<soap:address location="http://localhost/CSE1023YQ4June17/Server.php"/>
</port>
</service>
</definitions>
Code Listing 7: Ratings.wsdl

The soap request and soap response structures are shown in Code Listing 8 and Code
Listing 9 respectively.

…/Continued next page

11
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 4 (Continued)

SOAP Request structure

<SOAP-ENV:Envelope xmlns:SOAP-
ENV="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:we="http://www.shehzad.edu/webservice">
<SOAP-ENV:Header/>
<SOAP-ENV:Body>

<! - - (a)(i) Missing code - WS1 – Request structure - ->

</SOAP-ENV:Body>
</SOAP-ENV:Envelope>
Code Listing 8: Soap Request Structure
SOAP Response structure
<SOAP-ENV:Envelope xmlns:SOAP-
ENV="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:ns1="http://www.shehzad.edu/webservice">
<SOAP-ENV:Header/>
<SOAP-ENV:Body>

<! - - (a)(ii) Missing code - WS2 – Response structure - ->

</SOAP-ENV:Body>
</SOAP-ENV:Envelope>
Code Listing 9: Soap Response Structure

(a) Complete the missing code sections (WS1-WS2) above for the structure of the
Request and Response generated by the WSDL in Code Listing 7.
[4+6 Marks]

The ratings are kept in the ratings2017 database which is defined and
implemented in MySQL as shown below.
Rating (Id, Batch, Level, Code, Name, Rating)
Sample values for ratings table (1, ‘Computer Science’,1,’CSE1023Y’,’Web-Centric
Computing’,4.5)

Whenever a user wants to check the ratings, he/she has to enter the required
details in the Web Service request page, index.html as shown in Figure 6 below.

…/Continued next page

12
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 4 (Continued)

name=”sltBatch”

name=”txtLevel”

Figure 6: index.html

When the submit button is clicked with the batch Computer Science and Level 1, the
following output is received on the client as shown in Figure 7 below.

Figure 7: Data received on client.php from server.php

…/Continued next page

13
 WEB-CENTRIC COMPUTING - CSE1023Y(1)

Question 4 (Continued)

The web service which handles requests from Client.php is exposed through the
Server.php as shown in Code Listing 10.
<?php
error_reporting(E_ALL ^ (E_WARNING | E_DEPRECATED));
header("Cache-Control: no-cache");
header("Pragma: no-cache");
require_once('DBConnect.class.php');
require_once('RatingHandler.class.php');

//Create Database Connection

DbConnect::initialise();

//Disable caching and set up Soap Server.

ini_set("soap.wsdl_cache_enabled","0");
$server = new SoapServer('WS/Ratings.wsdl');

// Missing code – WS3 –Register class and handle server

?>
Code Listing 10: server.php

(b) Given that the class which is imported by the server.php is called RatingHandler,
complete the missing code WS3 above.
[2 marks]

(c) You are required to write the 'RatingHandler.class.php’. The following SQL query
will return the values you need.

$sql = "SELECT Code, Rating.Name, Rating FROM Rating WHERE Batch='$batch' AND
Level=$level;";
Code Listing 11: SQL Statement

Note that $batch and $level are parameters extracted from the SOAP Request.
[13 Marks]

END OF QUESTION PAPER

14