UNIVERSITY OF MAURITIUS

Faculty of Engineering

SPECIAL RETAKE EXAMINATIONS

(August/September 2016)

PROGRAMME BSc (Hons) Computer Science

MODULE NAME Web-Centric Computing

DATE Saturday MODULE CODE CSE 1023Y(1)

27 August 2016

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 – CSE 1023Y(1)

Question 1 [25 Marks]

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

http://www.mautele.com/complaint/index.html
Figure 1: URL of the MauTelecom Complaint form

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

2
3
4

Figure 2: index.html
 WEB-CENTRIC COMPUTING – CSE 1023Y(1)

Additional Information

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

2: Set id and name of textbox to txtFullName
3: Radio buttons having names optGender and values ‘M’ and ‘F’ respectively.
4: Set id and name of element to telTelephone (NOT type text)
5: Drop down (set name and id to sltComplaint) containing the following: Please
select complaint type (value=0), Telephone Line (value=1), and Internet connection
(value=2).
6: Set id and name of spin control to nbrCustomerCare, set minimum to 1, set
maximum to 5 and set increment/decrement (step) to 0.5.
7: Set id and name of element to txaMoreDetails (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 the Internet and the WWW (World Wide Web).
[2 marks]

(b) Write the http request sent to the www.mautele.com 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.mautele.com 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]
 WEB-CENTRIC COMPUTING – CSE 1023Y(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 elements (having an asterisk after the label – see Figure 2) shall
have a yellow background. Use CSS 3 to implement this style.

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

(iii) The phone number (telTelephone) shall be displayed in bold and green.
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 checkPhone() which will validate the phone number
in Figure 2. Use a regular expression and the method test() to check if the value
entered in the telTelephone element conforms to the format 999-9999 or 9999-9999.
If the check fails, form data shall not be sent to the server and an alert shall be
displayed with an appropriate error message.
[6 marks]
 WEB-CENTRIC COMPUTING – CSE 1023Y(1)

An extraxt of the Lecturer.xml is shown in Code Listing 1 below:

<?xml version="1.0" encoding="UTF-8"?> 3
<Lecturers>
<Lecturer id="0270781">
<FirstName>Shehzad</FirstName>
<LastName>Jaunbuccus</LastName>
<Phone>403-9999</Phone>
</Lecturer>
<Lecturer id="1030275">
<FullName>Roushdat Elaheebocus</FullName>
<Phone>403-9998</Phone>
</Lecturer>
<!--
Other Lecturer Elements not shown in this extract …
-->
</Lecturers>
Code Listing 1: Lecturer.xml

Additional information

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

ii. Declare a global type idType which shall be used by the id attribute. It shall allow
only 7 digits and use string as base data type.
iii. Declare a global element Lecturer.
iv. The Lecturers element can have an unspecified number of children (Lecturer)
elements listed.
v. Add a reference (ref) to the global element Lecturer from the Lecturers element.

(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 – CSE 1023Y(1)

Question 3 [25 marks]

Consider the view complaints page, shown in Figure 3, which allows a user to view
complaints filed by specific customers of MauTelecom.

The complaint details form provides a textbox txtFullName where the user can input
the full name of the person who filed the complaint. After the user enters the name,
he/she clicks on the ‘Search’ button to look up the complaint in the complaint2016
database (implemented in MySQL). Once the person is found, the details such as the
date the complaint was registered, the type of complaint and the complaint details are
shown in the divComplaints div element. Conversely, if the name is not found in the
database, the message ‘No complaint found in the Database.’ is displayed in the div
divComplaints instead.

Textbox: id &
name =
‘txtFullName’

Div: id =
‘divComplaints’

Figure 3 – Complaints details form

For example, in Figure 3 above, the name “Steven Gerrard” 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 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
 WEB-CENTRIC COMPUTING – CSE 1023Y(1)

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 complaints loaded in the
divComplaints or ‘No complaint 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'?>
<complaints>
<complaint>
<Date>2016-07-27</Date>
<Type>Telephone Line</Type>
<Details>No dial tone.</Details>
</complaint>
<complaint>
<Date>2016-08-22</Date>
<Type>Internet Connection</Type>
<Details>Slow download speed.</Details>
</complaint>
<!—other complaint elements if found in database -->
</complaints>
OR
Possibility 2
<?xml version='1.0' encoding='UTF-8'?>
<complaints></complaints>
Code Listing 3: Possible XML responses from server

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

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

 WEB-CENTRIC COMPUTING – CSE 1023Y(1)

Figure 4: divComplaints 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
if(Missing Code: JS2 – check if response is ok for processing){
 WEB-CENTRIC COMPUTING – CSE 1023Y(1)

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

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

/**************************************************
* Missing Code(s) – JS3 *
* *************************************************
* Hint(s) *
* 1. Read XML *
* 2. Load data in divComplaints (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 checkdetails.php which connects to the
complaints2016 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 complaint details of
a specified user, provided that it stored in the database.

$sql = "SELECT Complaints.Date, Complaints.Type, Details FROM Complaints WHERE

FullName = '" . $fullName . "'";
Code Listing 5: SQL Statement

Note: $fullName is the variable which holds the full name of the user.

Sample data retrieved by the SQL statement when value of variable $fullName is Steven
Gerrard is shown in Figure 5 below.

8
 WEB-CENTRIC COMPUTING – CSE 1023Y(1)

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

The checkdetails.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['txtFullName'])) {
$fullName = $_POST['txtFullName'];
$sql = "SELECT Complaints.Date, Complaints.Type, Details FROM Complaints
WHERE FullName = '" . $fullName . "'";

$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: checkdetails.php

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

9
 WEB-CENTRIC COMPUTING – CSE 1023Y(1)

Question 4 [25 marks]

Consider the following Web Service where users are allowed to search for movies
which are released in a particular month for a certain year. These ratings are compiled
by the MGM Association 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="Year" type="xs:decimal"/>
<xs:element name="Month" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:complexType name="MovieType">
<xs:sequence>
<xs:element name="Name" type="xs:string"/>
<xs:element name="Type" type="xs:string"/>
<xs:element name="Rating" type="xs:string"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="ArrayOfMovies">
<xs:sequence>
<xs:element name="Movie" minOccurs="0" maxOccurs="unbounded"
type="this:MovieType"/>
</xs:sequence>

11
 WEB-CENTRIC COMPUTING – CSE 1023Y(1)

</xs:complexType>
<xs:element name="Result" type="this:ArrayOfMovies"/>
</xs:schema>
</types>
<!-- Input message -->
<message name="getMovieRequest">
<part name="input" element="this:Input"/>
</message>
<!-- End Input message -->
<!-- Output message -->
<message name="getMovieResponse">
<part name="result" element="this:Result"/>
</message>
<!-- End Output message -->
<portType name="MovieServicePortType">
<operation name="viewMovieResults">
<input message="this:getMovieRequest"/>
<output message="this:getMovieResponse"/>
</operation>
</portType>
<binding name="MovieServiceBinding" type="this:MovieServicePortType">
<soap:binding style="document"
transport="http://schemas.xmlsoap.org/soap/http"/>
<operation name="viewMovieResults">
<soap:operation soapAction="http://www.shehzad.edu/webservice" />
<input><soap:body use="literal"/></input>
<output><soap:body use="literal"/></output>
</operation>
</binding>
<service name="MovieService">
<port name="MovieServicePort" binding="this:MovieServiceBinding">
<soap:address
location="http://localhost/CSE1023YExamAugust2016/Server.php"/>
</port>
</service>
</definitions>
Code Listing 7: Movie.wsdl

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

12
 WEB-CENTRIC COMPUTING – CSE 1023Y(1)

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 movie details are kept in the movie2016 database which is defined and
implemented in MySQL as shown below.
Movie (Id, YearReleased, MonthReleased, Name, Type, Rating)
Sample values for Movie table (1, ‘2016’,’August’,’Suicide Squad’,’Action’,’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.
 WEB-CENTRIC COMPUTING – CSE 1023Y(1)

name=”sltYear”

name=”txtMonth”

Figure 6: index.html

When the submit button is clicked with the year 2016 and month of August, the
following output is received on the client as shown in Figure 7 below.

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

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('MovieHandler.class.php');

//Create Database Connection

14
 WEB-CENTRIC COMPUTING – CSE 1023Y(1)

DbConnect::initialise();

//Disable caching and set up Soap Server.

ini_set("soap.wsdl_cache_enabled","0");
$server = new SoapServer('WS/Movie.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 MovieHandler,
complete the missing code WS3 above.
[2 marks]
c) You are required to write the 'MovieHandler.class.php. The following SQL query will
return the values you need.

$sql = "SELECT Name, Type, Rating FROM Movie WHERE

YearReleased=$YearReleased AND MonthReleased = '$MonthReleased'";
Code Listing 11: SQL Statement

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

END OF QUESTION PAPER

15