UNIVERSITY OF MAURITIUS

FACULTY OF ENGINEERING

SECOND SEMESTER EXAMINATIONS

MAY 2015

PROGRAMME BSc (Hons) Computer Science

MODULE NAME Web-Centric Computing

DATE Wednesday 27 MODULE CODE CSE 1023Y(1)

May 2015

TIME 09.30-12.30 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 and Question 2 relate to the following Case Study.

CASE STUDY: CAR TEST DRIVE REVIEW

CarZone Company Ltd is a car dealer who sells used Japanese cars. The company
would like to setup a web site to advertise its vehicles in stock. One of the main features
will include test drive feedback from potential buyers. The following web page
review.html will allow buyers to send their reviews online after the test drive. The
review form can be accessed from the local server using the url:
http://localhost/webcentric/testdrive/review.html. Note that fields having an asterix(*) next
to their label are required.

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

Additional information:

1. The most appropriate type should be used for each field.

2. The id (and name) of the different fields is txtDate, sltModel, rdoType, nbrDoors,
txtName, txtPhone, txtEmail and txaReview
3. Drop down contains the following values: Toyota, Nissan, Honda.
4. Radio buttons have values: Sedan, Hatchback and SUV.
5. The minimum number of doors is 3 and maximum is 5. The value shall
increment/decrement in steps of 1. The default number of doors is 3.
6. Submit Button submits data to review_process.php.

QUESTION 1

a) When a request is made for review.html, the html code is transported in the body of
the response constructed by the local server.

i) Write the Request-Line of the request sent to the server given that http 1.1 was
used.
(2 Marks)

ii) Write the Status-Line and Content-Type of the response received given that http
1.1 was used and the request was successfully processed. Assume that the
browser history was cleared before the request was sent.
(2+1 Marks)

iii) Implement review.html in HTML5 using the screenshot (Figure 1) in the case
study and the additional information provided. Note: information from all
elements is to be submitted to the page review_process.php using the POST
method.
(10 Marks)

b) Once the review page has been successfully implemented, the web developer
decides to upload the review page on the following domain: www.car.com. The
review page can then be accessed using the new url: http://www.car.com/review.html.

With the help of a diagram, explain how the www.car.com domain is resolved.
Assume that the web server is assigned IP address 100.21.14.92.

(5+5 Marks)

Total: [25 Marks]

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

QUESTION 2

a) The web developer decides to add some formatting to the review page (Figure 1).
An external CSS style myStyle.css has been defined to format the HTML page.
The css file is located in a subfolder called style.

Style Information
body
{
background-color: Beige;
color: black;
font: 12pt Arial;
}
Code Listing 1: myStyle.css

One additional requirement would be to convert the user input as follows:

 All input of type text should have text color blue.

 All input of type email should have text color green.

Using CSS 3.0 selectors, write down the style information that should be added
to mystyle.css (Code Listing 1).
(3+3 Marks)

b) The web developer has written a JavaScript function validatePhone( ) to validate

the phone number (using Regular Expression) before the form is submitted.
However, the code contain errors and the function is not validating valid phone
numbers such as (230)403-7764 and (230)5790-6030. The JavaScript function is
given below:

function validatePhone( ){
var value = document.getElementById(txtPhone).value;

var regExp = /^([0-9]{3})[0-9]{4}-[0-9]{4}$/;

if(!regExp.test(“value”)){
alert(“You have not provided a valid phone number!”);
return false;
}
return true;
}
Code Listing 2: Function validatePhone( )
(Continue next page)
3
 WEB-CENTRIC COMPUTING – CSE 1023Y(1)

QUESTION 2 (Continued)

You are required to identify the errors in Code Listing 2 and re-write the correct
JavaScript function codes.
(5 Marks)

c) Once all user input is validated, the review form is submitted to

review_process.php using the POST method. A sample output is given in Figure 2
below.

Figure 2: review_process.php

i) Write the codes for review_process.php which retrieves and displays the input
values as shown in Figure 2. State any assumptions made.

(8 Marks)

ii) The Http protocol is stateless; each request is processed without any
knowledge of any prior or future requests. Sessions can be used to store user-
specific preferences.

Explain how you would use sessions in review_process.php to allow only one
review per person. Support your answer using sample codes.

(Continue next page)

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

QUESTION 2 (Continued)

If the person tries to submit the review form (Figure 1) twice, the following
message is displayed.

Figure 3: session

(2+4 Marks)

Total: [25 Marks]

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

QUESTION 3

Consider an E-commerce application which allows a user to purchase designer items.

Once the user has added all the items to her basket, she clicks on ‘confirm order’ button
and the application loads the Order Details Form where the value of items ordered is
displayed in a div element (divOrderValue).

The form also provides a textbox (txtCode) where a discount code can be entered and
the value of the discount (divDiscount) will be deducted from the order value and
shown in the order total (divOrderTotal) as shown below.

Textbox: id & name

= ‘txtCode’

Div element having

id = ‘divOrderValue’

Div element having

id = ‘divDiscount’

Div element having

id = ‘divOrderTotal’

Div element having

id = ‘divMessage’

Figure 4: Order Details Form

For example, in Figure 4 above, the code “600D-LUCK-M8” was entered and the
‘Apply’ button was clicked. The code was sent to the server through AJAX. The server
sent back a discount amount of 25 (percent) in XML format.

The HTML codes for the ‘Apply’ button in the order details form is given in Code Listing
3 below.

(Continue next page)

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

QUESTION 3 (Continued)

<input type="button" id="btnApply" value="Apply"

onclick="sendAjaxRequest(document.forms[0].txtCode.name,document.forms[0].txtCo
de.value)"/>
Code Listing 3: HTML code for Apply button

When the button is clicked, the ajax function sendAjaxRequest from file Ajax.js is called
with the relevant parameters.

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

i. Required data shall be sent to the checkDiscount.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 discount applied accordingly or
message stating why discount cannot be applied shall be displayed.

The different possible XML responses is shown in Code Listing 4 below.

Possibility 1
<?xml version='1.0' encoding='UTF-8'>
<discount>25</discount>

OR
Possibility 2
<?xml version='1.0' encoding='UTF-8'>
<discount>Invalid or Expired code!</discount>

OR
Possibility 3
<?xml version='1.0' encoding='UTF-8'>
<discount>No code provided!</discount>

Code Listing 4: Possible XML responses from server

Note:
The discount amount is retrieved from the database and it can be any other value
between 10 to 90. In case the value is a number, then the discount is displayed in
divDiscount and divOrderTotal is updated by substracting that amount to it.

(Continue next page)

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

QUESTION 3 (Continued)

In case a string is obtained as discount (possibilities 2 & 3) then only the divMessage is
updated with the text string.

An example of possibility 2 is shown in Figure 5 below where an expired/invalid code

was applied.

Figure 5: divMessage updated with string sent in XML

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

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;
}

/*************************************************
8
(Continue next page)
 WEB-CENTRIC COMPUTING – CSE 1023Y(1)

* Missing Code - JS1 *

* implement function sendAjaxRequest *
* ************************************************
* Hint(s) *
* 1. Establish connection to server *
* through AJAX object *
* 3. Set reference to callback function *
* 4. Send data to server *
************************************************/

var processAjaxResponse = function(){

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

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

var divMessage = document.getElementById("divMessage");
var divOrderValue = document.getElementById("divOrderValue");
var divOrderTotal = document.getElementById("divOrderTotal");
var divDiscountRs = document.getElementById("divDiscountRs");

divOrderTotal.innerHTML = divOrderValue.innerHTML;

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

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

/************************************************
* Missing Code(s) – JS3 *
* ***********************************************
* Hint(s) *
* 1. Read XML *
* 2. Calculate discount and load values in divs, etc *
* 3. isNaN() js function can be used to check if *
data in the xml is number or string *
Usage: isNaN(‘Error’) evaluated to true *
* 4. Else load string message (possibilities 2 or 3) *
************************************************/
9
 WEB-CENTRIC COMPUTING – CSE 1023Y(1)

}else{
divMessage.innerHTML = "An error has occured.";
}
}
}
Code Listing 5: 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.
(7+2+8 Marks)

The request from the Ajax function is sent to checkDiscount.php which connects to the
PL2015 database through the DBConnect.class.php file to generate the XML in Code
Listing 4.

The DBConnect.class.php initiates the connection to the database and is given in Code
Listing 6 below.

<?php
class DbConnect{
const DB_HOST = 'localhost'; const DB_USER = 'root'; const DB_PASSWORD = '';
const DB_DATABASE = 'PL2015';
public static $conn;

public static function initialise(){

$conn = mysql_connect(self::DB_HOST, self::DB_USER, self::DB_PASSWORD) or
die(mysql_error());
mysql_select_db(self::DB_DATABASE, $conn);
self::$conn = $conn;
}

public static function close(){

$conn = null;
}
}
?>
Code Listing 6: DBConnect.class.php

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

The SQL statement in Code Lisitng 7 below shall help to retrieve the discount amount
given a valid code, provided that it has not expired.

$sql = "SELECT Amount FROM Discount WHERE Code = '" . $code . "' AND Expired =
0";
Code Listing 7: SQL Statement

Note: Expired = 0 means not expired.

Sample data retrieved by the SQL statement when value of variable $code is 600D-
LUCK-M8 is shown in Figure 6 below.

Figure 6: Sample data retrieved by SQL statement in Code Listing 7

The checkDiscount.php is shown in Code Listing 8 below.

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

<?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");

require_once('DbConnect.class.php');
$strDiscount = "";

if (!empty($_POST['txtCode'])) {
$code = $_POST['txtCode'];

$sql = "SELECT Amount FROM Discount WHERE Code = '" . $code . "' AND Expired
= 0";

DbConnect::initialise();
$dbResult = mysql_query($sql, DBConnect::$conn) or die(mysql_error());

Missing Code – PHP2

/* Hint(s):
1. Execute SQL Query
2. Read resultset and construct XML
*/

?>
Code Listing 8: checkDiscount.php

Note:

If $code is empty, then “No code provided!” is sent in the XML

In case resultset is empty, then “Invalid or Expired code!” is sent in the XML.

(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 checkDiscount.php
file.
(1+7 Marks)

Total: [25 Marks]

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

QUESTION 4

A SOAP Web Service is being developed to allow the service consumers to view
Premier League football match results per week in a football season.

WSDL
The match results were compiled by the Football Association over the years and are
now being exposed as a Web Service. The corresponding WSDL, league.wsdl, is shown
in Code Listing 9 below.

(Continue next page)

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

<?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="Season" type="xs:string"/>
<xs:element name="Week" type="xs:decimal"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:complexType name="LeagueType">
<xs:sequence>
<xs:element name="Season" type="xs:string"/>
<xs:element name="Week" type="xs:string"/>
<xs:element name="Match" type="xs:string"/>
<xs:element name="Score" type="xs:string"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="ArrayOfLeagueResults">
<xs:sequence>
<xs:element name="LeagueResults" minOccurs="0"
maxOccurs="unbounded" type="this:LeagueType"/>
</xs:sequence>
</xs:complexType>
<xs:element name="Result" type="this:ArrayOfLeagueResults"/>
</xs:schema>
</types>

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

<!-- Input message -->

<message name="getLeagueRequest">
<part name="input" element="this:Input"/>
</message>

<!-- End Input message -->

<!-- Output message -->
<message name="getLeagueResponse">
<part name="result" element="this:Result"/>
</message>
<!-- End Output message -->

<portType name="LeagueServicePortType">
<operation name="viewLeagueResults">
<input message="this:getLeagueRequest"/>
<output message="this:getLeagueResponse"/>
</operation>
</portType>

<binding name="LeagueServiceBinding" type="this:LeagueServicePortType">

<soap:binding style="document"
transport="http://schemas.xmlsoap.org/soap/http"/>
<operation name="viewLeagueResults">
<soap:operation soapAction="http://www.shehzad.edu/webservice" />
<input><soap:body use="literal"/></input>
<output><soap:body use="literal"/></output>
</operation>
</binding>

<service name="LeagueService">
<port name="LeagueServicePort" binding="this:LeagueServiceBinding">
<soap:address
location="http://localhost/CSE1023YExamJune2015Q4/Server.php"/>
</port>
</service>
</definitions>
Code Listing 9: League.wsdl

(Continue next page)

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

QUESTION 4 (Continued)

The user interface of the web service as shown in Figure 7 below.

id & name =
‘sltSeason’

id & name =
‘txtWeek’

Figure 7: User Interface of web service

SOAP Request
<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>
<!—Missing Code: SOAP Request -->
</SOAP-ENV:Body>
</SOAP-ENV:Envelope>
Code Listing 10: Soap Request

Given that the 2014/2015 season was selected and week 26 was entered in the user
interface (Figure 7) and submitted to the server.

a) Write the missing code for the SOAP request above.

(4 Marks)

(Continue next page)

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

QUESTION 4 (Continued)

SOAP Server
The Server component of the web service (Server.php) exposes the Web Service and
handles requests from the web service client (Client.php).

Code for the Server.php is listed below.

<?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('PLHandler.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/League.wsdl');

//Register class (and functions) with server

$server->setClass('PLHandler');
$server->setPersistence(SOAP_PERSISTENCE_REQUEST);

$server->handle();
?>
Code Listing 11: Server.php

b) You are required to write the PLHandler.class.php.

The SQL statement below will retrieve the Season, Week, Match and Score details for
matches played in a certain week in a particular season.

SELECT Season, Week, CONCAT(HomeClub,' vs ', AwayClub) AS 'Match',

CONCAT(HomeResult,' - ',AwayResult) AS Score FROM Results
WHERE Season ='$season' AND Week = $week";
Code Listing 12: SQL statement

(Continue next page)

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

QUESTION 4 (Continued)

Sample data retrieved by the SQL statement when value of variable $season is
2014/2015 and $week is 26 is shown in Figure 8 below.

Figure 8: Sample data retrieved by SQL statement above

(13 Marks)

(Continue next page)

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

QUESTION 4 (Continued)

SOAP Client

When the Client.php receives the SOAP response sent by the server, it processes the
response and displays the data as shown in Figure 9 below.

Figure 9: Client.php processes and displays data

The Client.php is shown in Code Listing 13 below.

(Continue next page)

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

QUESTION 4 (Continued)

<?php
if((isset($_POST['sltSeason'])) && (!empty($_POST['txtWeek']))){
try{
$season = $_POST['sltSeason'];
$week = $_POST['txtWeek'];

$wsdl = 'http://localhost/CSE1023YExamJune2015Q4/WS/League.wsdl';
$options = array('cache_wsdl'=>'WSDL_CACHE_NONE',
'features'=>'SOAP_SINGLE_ELEMENT_ARRAYS');

$client = new SoapClient($wsdl, $options);

Missing Code: WS1 - get parameters and make request to server

if (isset(Missing Code: WS2 - Check if there is any data in the response)){

$HTMLDocument = "<!DOCTYPE html><html>

<head><title>Premier League Results</title>
<link rel='stylesheet' type='text/css' href='League.css'/>
</head>
<body>
<h3>Premier League Results</h3>
<h4>Season: ".$response->LeagueResults[0]->Season."</h4><h4> Week:
".$response->LeagueResults[0]->Week."</h4>";
$HTMLDocument .= "<table border='1'>
<thead>
<tr id='header'><th>No.</th><th>Match</th><th>Score</th></tr>
</thead>
<tbody>";

Missing Code: WS3 - retrieve data from response and construct

$HTMLDocument (HTML Table)

$HTMLDocument .= "</tbody>
</table>
<p><strong></strong>Premier League Service Application 2015.</p>
</body>
</html>";
echo $HTMLDocument;
}

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

else{
echo "<h1>No League Result found in database!</h1>";
}
}
catch (Exception $e) {
echo 'Exception: '.$e->getMessage();
}
catch (SOAPFault $exception) {
echo 'SOAP Exception: '.$exception->getMessage();
}
}
else{
header("Location: http://localhost/CSE1023YExamJune2015Q4/index.html");
}
?>
Code Listing 13: Client.php

c) You are required to complete all the missing code WS1 – WS3 sections based on
the details specified above and any other information given in the Client.php file.

(3+1+4 Marks)

Total: [25 Marks]

END OF QUESTION PAPER

21