WEB ENGINEERING REPORT General Comments BCS THE CHARTERED INSTITUTE FOR IT

BCS THE CHARTERED INSTITUTE FOR IT
BCS HIGHER EDUCATION QUALIFICATIONS
BCS Level 6 Professional Graduate Diploma in IT
MARCH 2014
EXAMINERS’ REPORT
WEB ENGINEERING REPORT
General Comments
There remains a large disparity between well-prepared candidates and those who were not
ready to sit this examination. The comments from previous examiners’ reports are still valid.
One comment from previous examiners’ reports warrants repeating, since the Examiners
continue to see answer pointers from old papers quoted verbatim in a small number of
answer scripts:
“It is important for candidates to know that whilst on occasion questions may look similar to
those in past papers, the context and approach is often significantly different, which means
that previous answers cannot simply be restated, thus it is not appropriate to memorise and
re-state past paper answers. Additionally, the answer pointers provided here give guidance
and are only a guideline and should not be merely quoted by candidates, but applied to the
topic of the question.”
Moreover, candidates should take more care to follow instructions, in particular: when a
question asks to illustrate an explanation with examples, these examples usually account for
half of the marks allocated to the question; a code sample provided with no explanation does
NOT constitute a valid example.
The figures referenced in this question paper are provided in a separate booklet.
Section A
A1.
You are developing a simple web-based application to manage subscriptions to an
electronic newsletter.
[N.B.: This question involves server-side scripting. The preferred language is PHP
but answers written in ASP or JSP are also accepted. Clearly state which serverside scripting language you will be using for the whole question and make sure
all relevant files are named accordingly.]
a)
First, you will build a basic front-end in a file named enteremail.html.
i)
Write HTML to construct the page as indicated in Figure 1.1.
(1 mark)
ii)
b)
Add a basic form to your code: the form must send a single input
string parameter named email to a script named saveemail.php.
The parameter should not be visible in the resulting URL.
(3 marks)
You have access to a database called EMAILMANAGER, which contains a
single table named Subcribers (as shown in Figure 1.2). The database is
hosted remotely at example.com. The administrator username is admin
and the password is abc123.
i)
ii)
Using the server-side scripting language of your choice, write code to
establish an authorised connection with the database host and get
access to the database itself. Display relevant error messages when
necessary.
(2 marks)
Add a few lines of code to save the email address
[email protected] in the database. Display relevant messages
(including, as a reminder, the value of the email being saved)
depending on the failure or success of the operation.
(2 marks)
iii)
Add a few more lines of code to display, in alphabetical order, all the
email addresses contained in the database. The result should appear
as an HTML table. Alternatively, relevant error messages should be
displayed if necessary.
(3 marks)
iv)
When the script no longer needs to use the database, what action
should it take? Write the corresponding code.
(1 mark)
The following SQL syntax may be useful to accomplish some of these tasks:
INSERT INTO tbl_name (col1, ...) VALUES (val1, ...);
SELECT * FROM tbl_name WHERE col1 == val1;
(Where tbl_name, col1, val1 are to be replaced with appropriate values.)
c)
You will now write the back-end of your application.
d)
i)
Reusing relevant code from b), write a function called
savesubscription, which:
takes a single string called myemail as an input,
saves myemail in the database mentioned in b),
returns true if the operation was a success, false if it failed.
The function will be saved in a file called myfunctions.inc.
(1 mark)
ii)
Write the code for saveemail.php (from a) ii)). It should:
generate a full, valid web page entitled “Saving Email”
refer (via an appropriate mechanism) to the function
savesubscription (from c) i)),
save the input parameter obtained from the form in
enteremail.html (from a) ii)) in the database mentioned in
b).
display an adequate error message if the input parameter is
not set.
(3 marks)
Consider the following validation tasks. For each task:
- explain why it is important (illustrating potential problems with a realistic
example);
- propose a solution (adding relevant code, with explanatory comments, to
the code written so far).
i)
Catching typing mistakes via the front-end.
(3 marks)
ii)
Avoiding storing duplicate information in the database.
(3 marks)
iii)
Checking the data entered via the front-end is in the expected format.
(3 marks)
Answer Pointers
a) i)
<html>
<head>
<title>My Contact Manager</title>
</head>
<body>
<h1>Insert a new email address</h1>
</body>
</html>
a) ii) Insert the following code between </h1> and </body>:
<form action="saveemail.php" method="POST">
<input type="text" name="email" />
<input type="submit" />
</form>
b) i) For reference, model answers have been provided both in PHP5 and PHP4
[In PHP5]
$con=mysqli_connect("example.com","admin","abc123","emailmanager");
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
exit();
}
[In PHP4]
$con = mysql_connect("example.com", "admin", "abc123");
if (!$con)
{
die("Cannot connect to the database server.<br />\n");
}
$result = mysql_select_db("emailmanager", $con);
if (!$result)
{
echo "Failed to access database.<br />\n";
mysql_close($con);
exit();
}
b) ii)
$myemail = "[email protected]";
$result = mysqli_query($con, "INSERT INTO Subscribers VALUES ('$myemail')"); // PHP5
// or mysql_query("INSERT …", $con); in PHP4
if (!$result)
{
echo "Failed to insert email $myemail into table.<br />\n";
}
else
{
echo "Email $myemail inserted successfully.<br />\n";
}
b) iii)
$result = mysqli_query($con, "SELECT * from Subscribers ORDER BY emailaddress");
// or mysql_query("SELECT …", $con); in PHP4
if (!$result)
{
echo "Could not get emails from database.<br />\n";
}
else
{
if (mysqli_num_rows($result) == 0) // PHP5
// or mysql_num_rows in PHP4
{
echo "No emails in the database.<br />\n";
}
else
{
echo "<table>\n";
while($row = mysqli_fetch_array($result)) // PHP5
// or mysql_fetch_array in PHP4
{
echo "<tr><td>";
echo $row['emailaddress'];
echo "</td></tr>\n";
}
echo "</table>\n";
}
}
b) iv) We must close the database connection:
mysqli_close($con); // PHP5
mysql_close($con); // PHP4
c) i)
function saveemail($myemail)
{
// insert code from b) i) to open connection
// insert code from b) ii), skip first line ($myemail = ...), to save email
// insert code from b) iv) to close connection
return $result;
}
// PHP5
c) ii)
<html>
<head>
<title>Saving email</title>
</head>
<body>
<?php
include "myfunctions.inc";
if (isset($_POST['email']))
{
saveemail($_POST['email']);
}
else
{
echo "email is not set<br />\n";
}
?>
</body>
</html>
d) i) Problem: anyone can make a typing mistake when filling up a form. Some mistakes are
of little consequence, but other mistakes can prevent the whole application from fulfilling its
purpose: for instance a message sent to an incorrectly typed email address will never reach
the intended recipient.
Solution: ask to enter sensitive data twice, and check the two inputs are the same.
Implementation:
 Add another form element after the first input:
<input type="text" name="email2" />
 Add an “onsubmit” action to the form: (it will be executed by the client before
submitting to the server)
<form action="saveemail.php" method="POST" onsubmit="return validateform()">
 Define a “validateform” function in the head element (after </title>):
<script type="text/javascript">
function validateform()
{
var email=document.getElementsByName("email");
var email2=document.getElementsByName("email2");
if (email!=email2) // There was a typing mistake!
{
alert("email should be identical in both fields");
return false;
}
}
</script>
d) ii) Problem: duplicate information is a waste of database space. It can also mean
duplicate actions: in this case, sending the newsletter twice to the same person (which is
likely to irritate this user).
Solution: in function “saveemail”, add a verification step after the connection, before the
insertion query.
Implementation:
// try and see if the email address is already in the database
$result = mysqli_query($con, "SELECT * FROM Subscribers WHERE emailaddress == '$myemail'");
if (!$result) // the query couldn’t be executed properly
{
echo "Could not validate the email address against the database.<br />\n";
return false;
}
if (mysqli_num_rows($result) > 0) // the email address is already in the database
{
echo "Email address $email already in database.<br />\n";
return false;
}
// we can now safely insert the email address
d) iii) Problem: mostly a security problem (e.g. risk of SQL injection) as unexpected user
inputs could try and exploit vulnerabilities in the server code. But checking the format also
offers some protection against users misunderstanding the form (e.g. entering a postal
address instead of an email address)
Solution: test both on the client side (to give prompt feedback in case of user mistake) and
the server side (to protect ourselves against malicious users who would bypass our clientside validation code)
Implementation:
 Add to function validateform (after email comparison)
var exp=new RegExp("^.+@.+\..+$"); // very simple test, to catch basic user errors
if(!exp.test(email))
{
alert("Email address must contain a @ and a .");
return false;
}
 Also test on server side, in function saveemail, before connexion to database
if (!filter_var($myemail, FILTER_VALIDATE_EMAIL)) // PHP5
{
echo "email $myemail is not valid.";
return false;
}
Examiners’ Guidance Notes
This question was attempted by the majority of candidates, but part c) was often omitted.
Part a) i) was usually well answered, although some candidates misplaced the head and
body tags, or omitted the closing html tag. There also sometimes appeared to be some
confusion between the title tag and h1 tag.
Part a) ii) was reasonably well answered, although the “submit” button was frequently
forgotten. Another common mistake involved the form method: POST, not GET, in order to
satisfy the requirement for the email address not to be visible in the resulting URL.
Part b) i) was somewhat well answered. Most candidates knew how to establish a
connection to the server, but syntax was sometimes extremely approximated, and even
though the question clearly stated a connection to the database itself (not just the server)
should be established, the second half of the answer was often omitted.
Part b) ii) was rather poorly answered. A common misunderstanding involved inserting an
email obtained via the web form ($_POST), rather than the value [email protected]. Also,
very few candidates answered the question in full: the part consisting in printing out the
email which had just been inserted was often omitted.
Part b) iii) was also poorly answered. Very few candidates could formulate the correct
MySQL query to order fields by email address. Access to each resulting row, and data
presentation (e.g. as an HTML table) was often very approximate. Sometimes, the entire
logical loop (while or foreach) was missing.
Part b) iv) was (surprisingly, given the simplicity of the question) poorly answered: in fact, it
was frequently omitted. Candidates who did answer usually provided the correct line of code
(although syntax errors were not entirely uncommon), but often forgot to explain what action
it performed.
Part c) i) was frequently omitted, and (with a few notable exceptions) most of the answers
provided were rather poor. A common mistake consisted in simply repeating code from b),
without satisfying the key requirement to write a function (with appropriate name declaration,
parameter list, and return value).
Part c) ii) was even more frequently omitted, and (again, with a few exceptions) poorly
answered. Few candidates seemed to know how to include code from another file, and
invoke a previously defined function.
Part d) i) was often poorly answered. Most candidates gave generic answers, with examples
irrelevant to the context of a newsletter application. Very few candidates understood that the
appropriate validation method against typing mistake is to ask the user to type the same field
twice. A common misconception was to try and catch these errors through regular
expressions.
Part d) ii) was well answered in parts. Although implementation details were sometimes
vague, or syntactically incorrect, most candidates were aware of the appropriate solution.
However, explanations regarding the nature of the problem were often vague and
incomplete (in particular, few candidates mentioned the consequence of duplicated data
resulting in duplicated actions)
Part d) iii) was well answered in parts. Most candidates were aware of the importance of
server side validation, and of the adequate solution. But implementation details were often
fuzzy, and client side validation was usually omitted.
A2.
HTML and CSS are major web standards.
a)
What does HTML stand for? Explain precisely what the “HT” part means and
how it is implemented in HTML.
(2 marks)
b)
Consider the HTML document in Figure 2.1.
i)
Is this valid HTML? If not, explain each error (which rule was broken
and where) and propose a correction.
(4 marks)
ii)
Explain the meaning and purpose of a tag such as:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
(1 mark)
iii)
Consider a tag such as:
<meta http-equiv="Content-type"
content="text/html;charset=UTF-8">
Where should it appear and what is its purpose? Explain what could
happen when this tag is missing.
(1 mark)
c)
What does CSS stand for and what is the purpose of this technology?
(1 mark)
d)
Analyse the script in Figure 2.2 and state (with a brief justification) the colour
of each of the following 10 words when displayed:
Alligator, Beetle, Cat, Dolphin, Emu, Frog, Gazelle, Herring, Iguana, Jackal.
(5 marks)
e)
Consider the HTML document in Figure 2.3. Without altering the appearance
of the resulting web page, rewrite the original code using CSS. Explain why
your modifications are an improvement over the original code.
(6 marks)
f)
Standards have to be defined before they can be adopted.
i)
What is the name of the main international organisation responsible
for developing technical standards for the World Wide Web?
(1 mark)
ii)
What version of HTML is currently under development? Give one
difference between the new version and an older version.
(1 mark)
iii)
How can web authors ensure their pages conform to standards?
(1 mark)
iv)
Explain, illustrating your answer with relevant examples, why a web
page not conforming to standards can be a problem for its users.
(2 marks)
Answer Pointers
a) HTML stands for HyperText Markup Language.
Hypertext is text which contains links to other texts.
A link is a reference from one document to another, or from one location in the same
document to another. It can be followed efficiently using a computer.
The text in document1.html can link to document2.html using the following code:
<a href="path/to/document2.html">text of the link</a>
b) i) Not valid. There are 4 errors:
- </head></title> should be </title></head>, as HTML tags must be nested into each
others (inner tags must be closed before outer tags)
- </html> should be at the end of the document (after </body>), as the “body” element is a
child of the “html” element
- <h3>Text<h3> should be <h3>Text</h3>, as <h3> is an opening tag whereas </h3> is a
closing tag
- <boldtext>Example</boldtext> should be (for instance) <b>Example</b>, as the tag
<boldtext> is not defined (whereas <b> is)
b) ii) This string identifies what version of HTML is being used in the current document (is
this case, HTML4.01 Transitional)
It allows tools such as web browsers (and validators) to interpret the document correctly.
b) iii) It should be placed inside of the head element of an HTML document.
It describes the character encoding (or character set) used in an HTML document (here,
UTF-8)
When this information is not specified explicitly, user clients such as web browser have to
decide by themselves how to interpret the content of the file as individual characters.
The consequence of choosing incorrectly is that characters outside the printable ASCII
range (32 to 126) often appear incorrectly (for instance accentuated roman alphabet
characters appear as Chinese ideograms, or vice-versa)
c) CSS stands for Cascading StyleSheet.
It can be used to describe the look and formatting of a document written in a markup
language such as HTML.
d)
-
Alligator: pink, because div h1 matches <div><h1> (internal style overrides external
style for h1)
Beetle: red, because div div * matches div div h3 (* means “any element”)
Cat: yellow, because .myselector matches the class
Dolphin: black (default) as it doesn’t match any style
Emu: green, because #myselector matches the id
Frog: cyan, because body > p matches <body><p> (body is the parent of p)
Gazelle: orange, because of inline style (overrides everything else)
Herring: purple, because inner inline style overrides outer inline style
Iguana: orange, because of inline style (applies to all children of the element)
Jackal: blue, because of external css (h1 matches <h1>)
e) Add internal style just after </title>
<style>
.maintitle
{
text-align:center;
font-weight: bold;
}
.section
{
font-style: italic;
font-family: arial;
}
</style>
Replace
<p align="center"><b>Main title</b></p>
with
<p class="maintitle">Main title</p>
Replace
<p><font face="arial"><i>Section 1</i></font></p>
with
<p class="section">Section 1</p>
Replace
<p><font face="arial"><i>Section 2</i></font></p>
with
<p class="section">Section 2</p>
Justification:
- In term of standards, the <font> tag and the align attribute are deprecated, CSS is
preferred.
- Replacing the <b> tag and <i> tag with CSS allows to separate content from
presentation. This will facilitate future modifications of the page: look and content can
be altered independently.
- In the case of repeating structures such as section titles, the presentation only needs
to be defined once (avoiding error-prone copy-and-paste) when using internal styles
for the entire class
- The style for the main title could have been defined inline, but it seems more
consistent to define it in the internal stylesheet (better separation between structure,
content and presentation for all elements)
f) i) World Wide Web Consortium (W3C)
f) ii) HTML5
Examples of differences: new elements such as canvas (for 2D drawing), or obsolete
features such as frames, simplified doctype declaration, etc.
f) iii) Web pages can be validated by submitting the page to a validator (either online or
offline). The validator application will then return either a message stating conformance with
the standard being validated, or a list of errors.
f) iv) Typically, the page will not be displayed as intended by its author under certain
circumstances. For instance, if some HTML tags are missing or misplaced, the code
becomes ambiguous, and different browsers (or even different versions of the same
browser) will interpret it differently. When page layout is affected, the issue can be purely
cosmetic (misaligned blocks) or functional: for instance, a page element such as a menu can
become unusable, if it appears underneath another solid element such as an image header.
Examiners’ Guidance Notes
This question was attempted by the vast majority of candidates.
Part a) was well answered in parts. Most candidates could give the meaning of the HTML
acronym. But the meaning of “hypertext” was often only partially explained: many candidates
would either express the fact that links were references, or describe the navigation
mechanism; only a few candidates mentioned both concepts. Finally, the code for an HTML
link was often omitted, and when it was present, syntax errors were common.
Part b) i) was well answered in parts. Most candidates could spot and explain the misplaced
html closing tag. The error on the head and title tag was often spotted, but usually poorly
explained. Errors on h3 and boldtext were frequently missed, but usually well explained
when spotted.
Part b) ii) was well answered in parts. Most candidates could explain the general meaning of
this line (defining the version of HTML used in the document), but its purpose (allowing tools
to interpret or validate the document) was often poorly understood.
Part b) iii) was generally poorly answered. A common mistake was to explain the general
purpose of meta tags, with no mention of the meaning of this particular meta tag (i.e.
defining the document’s character encoding). Even when this concept was understood, if
was often explained poorly.
Part c) was usually well answered. However, a few candidates were unable to spell
“Cascading Style Sheet” correctly, and some explanations were too vague or ambiguous.
Circular definitions such as “a style sheet defines the style of a document” received no
marks.
Part d) was well answered in parts. There was sometimes some confusion between class
and id selectors. Also, the rule stating that inline styles override internal and external style
definitions was sometime forgotten. Finally, a number of candidates did not provide any
explanation for their answers, and consequently received only half-marks.
Part e) was often omitted, and (with a few notable exceptions) usually poorly answered.
Some candidates failed to identify which HTML tags should be replaced with CSS styles.
Other used inline style instead of defining reusable internal or external styles. When noninline styles were used, the selector syntax was sometimes poorly understood. A small
minority of candidates misunderstood the question and used CSS to give the page a
different appearance (without correcting the existing HTML code). Finally,
justifications were often missing, vague (“the code is more readable”) or too limited in
scope (focusing only on one benefit).
Part f) i) was generally well answered, but sometimes omitted. Some answers were
incomplete (W3C alone only received half-marks) or contained spelling mistakes.
Part f) ii) was well answered in parts. Most candidates correctly identified HTML5 as
being currently under development. But the differences given were sometimes vague
or incorrect.
Part f) iii) was often poorly answered. A minority of candidates mentioned automated
validation tools. Answers proposing alternative solutions (e.g. “manually” checking
the code against officially standards, or testing the web page in different web
browsers) only received partial credit.
Part f) iv) was often poorly understood. Some answers were entirely off-topic (e.g.
relating to form validation, or phishing). Many answers focused exclusively on
accessibility issues, and consequently failed to explain by which mechanisms failure
to follow standards could potentially affect any user (not just disabled users).
Section B
Answer Section B questions in Answer Book B
B3.
a)
Briefly explain the importance of validating an XML document.
(2 marks)
b)
The XML document in Figure 3.2 contains a number of errors when
validated against the DTD in Figure 3.1. Identify all of the errors and
provide a correction for each.
[Note: the line numbers are for your benefit and are not part of the XML
code.]
(3 marks)
c)
Convert the DTD in Figure 3.2 to an XML schema.
(3 marks)
d)
Explain the use of an EMPTY element in the construction of a DTD.
(2 marks)
e)
Write an external DTD for a magazine catalogue, magazine.dtd that
enforces the following constraints:









f)
the sequence of elements is as shown in the XML code from part c)
(i.e. MagazineCatalogue is a container of Magazine elements);
the two attributes in Magazine are mandatory;
Magazine_url and Editor_email are optional;
Magazine_url must have a page attribute;
for each Magazine, exactly one Magazine_title, one Editor
and one Publisher element must be present;
for each Magazine, the Article element must be present one or
more times;
for each Article, exactly one Article_title and one or more
Author element must be present;
an Author has a Name and optionally an Occupation; and
a Name consists of both a First_name and a Last_name.
(6 marks)
The magazine.dtd needs to be modified to enforce the following
changes. State how this can be achieved and show where the changes
must take place in the DTD you have written.
i)
All magazine information including editor, author and publisher
details will be stored under a genre such as ‘Lifestyle’, ‘Motoring’,
‘Technology’, etc. A magazine will only be recorded once and
cannot appear under additional genres.
(4 marks)
ii)
A cover image for each magazine that captures attributes of
height, width and location of the image.
(3 marks)
iii)
To capture all images where they exist for any article with the
same attributes as in ii) above.
(2 marks)
Answer Pointers
a)
An XML document cannot be valid until it is well-formed. Well-formed XML is syntactically correct (it can
be parsed), while valid XML is semantically correct (it can be matched to a known vocabulary and
grammar
b)
1 <?xml version="1.0"?>
2 <?xml-stylesheet type="text/css" href="test.css"?>
3 <!DOCTYPE test SYSTEM "mcq.dtd">
4 <test>
5
<mcq answer="b">
6
<statement>
7
Which statement accurately describes a protocol:
8
</statement>
9
<a>is a device that controls the network card.</a>
10
<b>is a method of communication between computers.</b>
11
<c>is the address of a computer on the Internet.</c>
12
</mcq>
13 </test>
c)
d)
<?xml version="1.0"?>
<xsd:schema xmlns:xsd="http://www.w3.org/2000/10/XMLSchema">
<xsd:element name="test">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="mcq" type="mcqType" minOccurs="0"
maxOccurs="unbounded" />
</xsd:sequence>
</xsd:complexType>
</xsd:element>
<xsd:complexType name="mcqType">
<xsd:sequence>
<xsd:element name="statement" type="xsd:string" />
<xsd:element name="a" type="xsd:string" />
<xsd:element name="b" type="xsd:string" />
<xsd:element name="c" type="xsd:string" />
</xsd:sequence>
<xsd:attribute name="answer" type="answerType" use="required" />
</xsd:complexType>
<xsd:simpleType name="answerType">
<xsd:restriction base="xsd:string">
<xsd:enumeration value="a" />
<xsd:enumeration value="b" />
<xsd:enumeration value="c" />
</xsd:restriction>
</xsd:simpleType>
</xsd:schema>
Empty—The element doesn’t contain any content (it can still contain attributes). Use for urls and images.
e,f)
1 <?xml version = "1.0" encoding="ISO-8859-1"?>
2 <!ELEMENT MagazineCatalogue (Subject*)>
3 <!ELEMENT Subject (Genre,Magazine*)>
4 <!ELEMENT Genre (#PCDATA)>
5 <!ELEMENT Magazine
(Magazine_title,Magazine_url?,Magazine_image,Publisher,Editor
,Editor_email?,Article+)>
6 <!ATTLIST Magazine ISBN CDATA #REQUIRED Issue_no CDATA
#REQUIRED>
7 <!ELEMENT Magazine_title (#PCDATA)>
8 <!ELEMENT Magazine_url EMPTY>
9
<!ATTLIST Magazine_url page CDATA #REQUIRED>
10 <!ELEMENT Magazine_image EMPTY>
11
<!ATTLIST Magazine_image height CDATA #REQUIRED>
12
<!ATTLIST Magazine_image width CDATA #REQUIRED>
13
<!ATTLIST Magazine_image src CDATA #REQUIRED>
14 <!ELEMENT Publisher (#PCDATA)>
15 <!ELEMENT Editor (#PCDATA)>
16 <!ELEMENT Editor_email (#PCDATA)>
17 <!ELEMENT Article (Article_title,Author+,Article_image*)>
18 <!ELEMENT Article_title (#PCDATA)>
19 <!ELEMENT Author (Name,Occupation?)>
20 <!ELEMENT Name (Last_name,First_name)>
21 <!ELEMENT Last_name (#PCDATA)>
22 <!ELEMENT First_name (#PCDATA)>
23 <!ELEMENT Occupation (#PCDATA)>
24 <!ELEMENT Article_image EMPTY>
25
<!ATTLIST Article_image height CDATA #REQUIRED>
26
<!ATTLIST Article_image width CDATA #REQUIRED>
27
<!ATTLIST Article_image src CDATA #REQUIRED>
Examiners’ Guidance Notes
This question was attempted by 80% of the candidates with overall student
performance on this question similar to that of last year. There were a small number
of candidates who had very little knowledge of the subject area.
Part (a) was well done with most candidates clear on the importance of validating an
XML document.
Part (b) was well done and errors clearly picked out.
Part (c) was the least well-done part, as many candidates did not know about XML
schema.
Part (d) – many candidates could not explain clearly the use of an empty element.
Part (e) was generally well done with a few candidates failing to complete the whole
DTD. Some candidates did not enforce mandatory elements or the optional elements.
Part (f) required the DTD to be re-engineered and many candidates simply created
additional attributes and ‘hard coded’ the three titles which does not scale up. The
DTD extension to include images was well done.
B4.
a)
Briefly explain how XPath expressions can manipulate an XML
document.
(2 marks)
With reference to the XML file shown in Figure 4.1, state the output of
the evaluation of the following XPath expressions:
/ReadyMeals/*/*[@supplier='Coste']
(2 marks)
//quantity | //calories
(2 marks)
b)
Textbooks for a computing catalogue are to be stored in an XML
document as shown in Figure 4.2 and an XSLT style sheet will render
this as a web page as shown in Figure 4.3. Using the HTML template
provided in Figure 4.4, in your answer book provide the missing code
(the section marked <!-- TO BE COMPLETED -->) to accomplish this.
You can assume that the cbbook.css file exists and that no style
code needs to be written.
(6 marks)
c)
Modify the HTML template so that the books are displayed by subject
field as shown in Figure 4.5. Your answer should only show the
changes and additional code necessary to that which you wrote as part
of your answer to b).
(5 marks)
d)
Write the code to display an image for each of the books as shown in
Figure 4.6 and indicate where this would be placed in the HTML
template.
(2 marks)
e)
Write the code to display the website address as a hyperlink for a book
if it exists, as shown in Figure 4.7, and indicate where this would be
placed in the HTML template.
(2 marks)
f)
Modify the code given as your answer for part e) so that the website
address is a descriptive link as shown in Figure 4.8.
(2 marks)
g)
It has been decided that instead of having an extra column to display
the website for a book, if it exists, the book title should then be a
hyperlink to access the website as shown in Figure 4.9. What changes
do you need to make to the code to achieve this?
(2 marks)
Answer Pointers
a) XPath expression specifies a pattern that selects a set of XML nodes such as Root, Element,
Text, etc. XPath expressions are used in XSLT to transform XML document to HTML pages.
XPath results for "/ReadyMeals/*/*[@supplier='Coste']".
<lunch supplier="Coste" id="1">
<price>3.50</price>
<quantity>20</quantity>
<calories>1500</calories>
</lunch>
<juice supplier="Coste" id="3">
<price>1.50</price>
<amount>60</amount>
<calories>180</calories>
</juice>
XPath results for "//quantity | //calories".
<quantity>20</quantity>
<calories>1500</calories>
<quantity>50</quantity>
<calories>2000</calories>
<quantity>60</quantity>
<calories>180</calories>
b-g)
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<html>
<head>
<title> Computing Book Catalogue</title>
<link rel="stylesheet" type="text/css" href="cbbook.css"/>
</head>
<body>
<h1> XSLT file used is cbbookMaster.xsl</h1>
<h2>Computer Book Catalogue 2015 by Subject Area</h2>
<table border="1">
<xsl:for-each select="cbcatalogue/subject">
<tr>
<th colspan="8" align="center">
<div class="alttd">
<xsl:value-of select="field"/>
</div>
</th>
</tr>
<tr bgcolor="#9acd32">
<th align="left">ISBN</th>
<th align="left">Title</th>
<th align="left">Image</th>
<th align="left">Author</th>
<th align="left">Bio</th>
<th align="left">Publisher</th>
<th align="left">Book URL</th>
<th align="left">Book Review</th>
</tr>
<xsl:for-each select="book">
<tr>
<td><b><xsl:value-of select="@isbn"/></b></td>
<td>
<xsl:value-of select="title"/>
</td>
<td><a href="{book_url/@page}" target="_blank">
<img>
<xsl:attribute name="src"><xsl:value-of select="image/@src" /> </xsl:attribute>
<xsl:attribute name="width"><xsl:value-of select="image/@width" /> </xsl:attribute>
<xsl:attribute name="height"><xsl:value-of select="image/@height" /> </xsl:attribute></img></a></td>
<td><ul><xsl:for-each select="author">
<li><xsl:value-of select="name/First_name"/>&#xa0;<xsl:value-of select="name/Last_name"/>
<br/></li></xsl:for-each></ul></td>
<td><ol>
<xsl:for-each select="author">
<li><xsl:value-of select="bio"/><br/></li></xsl:for-each></ol></td>
<td>
<xsl:value-of select="publisher"/></td>
<td>
<xsl:choose>
<xsl:when test="book_url/@page">
<a href="{book_url/@page}" target="_blank">
<img><xsl:attribute name="src">
<xsl:value-of select="image/@src" />
</xsl:attribute>
<xsl:attribute name="width">
<xsl:value-of select="image/@width" />
</xsl:attribute>
<xsl:attribute name="height">
<xsl:value-of select="image/@height" />
</xsl:attribute></img>
</a></xsl:when>
<xsl:otherwise>No website for the book</xsl:otherwise></xsl:choose></td>
<td><xsl:value-of select="review"/></td>
</tr>
</xsl:for-each>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Examiners’ Guidance Notes
This question was attempted by only one-fifth of the candidates.
Many of the candidates did not know the basics of converting an XML document into
an HTML document by use of XPATH expression within an XSLT document. The
question required progressive conversion of an XML document into a number of
distinct web pages with use of standard programming constructs such as selection
and iteration including manipulation of URLs and images. Many candidates simply
wrote HTML statements for each image as though producing a web page rather than
XSLT statements.
Overall, candidates were not well prepared for this topic though it has been
assessed regularly in the past.
B5.
a)
Briefly explain the statement that “the http is stateless” and the
techniques that address this.
(3 marks)
b)
Briefly explain and compare the use of push and pull technologies with
suitable examples.
(4 marks)
c)
Briefly explain the use and management of an XMLHttpRequest in
the construction of a web page. What are the implications of multiple
occurrences of XMLHttpRequest on the same page?
(5 marks)
d)
Compare and contrast the workings of web sockets with reverse AJAX.
(3 marks)
e)
As a web engineer, identify at least FIVE major challenges in the
design and development of a real-time communication system for a
client. For each of the challenges identified, provide an outline solution
including the technology to be used. Your answer should be in the form
of a PowerPoint™ presentation to the client (5 slides with bullet points).
(10 marks)
Answer Pointers
a)
HTTP is a stateless protocol. A stateless protocol does not require the server to retain information
or status about each user for the duration of multiple requests. Some web applications may have to
track the user's progress from page to page, for example when a web server is required to
customize the content of a web page for a user. Solutions for these cases include:
the use of HTTP cookies.server side sessions,hidden variables (when the current page contains a
form), andURL-rewriting using URI-encoded parameters, e.g.,
/index.php?session_id=some_unique_session_code.
b)
Pull – client initiated request, Push - server initiated, though in reality this is a ‘pull’ in the
background e.eg. POP3 Both use HTTP protocol.
c)
XMLHttpRequest (XHR) – create an instance of the object, open a URL and send the request.
HTTP status of the result including the data fetched is available when the transaction is completed.
This operation can be synchronous or asynchronous. Multiple requests should be carefully
managed – either create separate objects for each request or configure them to operate in the
sequence intended especially if the response of one request is used by another.
d)
Web sockets – No overhead of http protocol
Has an API, allows full duplex bi-directional communication
Starts with a handshake over HTTP and upgrade to WebSocket, connection is kept alive.
Ideal for HTML5 based multiplayer online games
Reverse Ajax techniques
The goal of Reverse Ajax is to let the server push information to the client. Ajax requests are
stateless by default, and can only be opened from the client to the server.
HTTP polling, Piggyback polling – does not scale up and does not provide low-latency.
Commet - each client always has a communication link open to the server. The server can push
events on the clients by immediately committing (completing) the responses when they arrive, or it
can even accumulate and send bursts.
e)
There a number of challenges, some of which would be:
a. Client program – opens a network connection, IP address and port number, etc
b. Server program – accepts connections from clients, maintain an unlimited number of open
client connections and clients to be able to connect/disconnect. Manage state of both clients
and conversations
c. Conversations – a interactive exchange of data between clients, etc
d. Client/server interaction – protocol design for this to include seeing logged in users,
joining/leaving conversations, take part in multiple conversations, separation of each
conversation, etc
e. Client authentication
Examiners’ Guidance Notes
This question was attempted by just over a quarter of the candidates.
Most of the candidates focused on part e) and very few attempted the whole
question. Very few candidates could explain the workings of the http protocol and
even fewer how to create personalised experience through use of cookies and
sessions. Pull and push technologies were clearly articulated.
Most of the candidates had some idea about the use of XMLHttpRequest object but
could not extend the discussion to use of multiple instances and the management of
theses. Very few candidates knew about web sockets and how they worked.
Most candidates mapped part e) answer to a Software Development Life Cycle
model and did not focus on the most challenging aspects of the project nor the
technologies that would be most useful.
BCS THE CHARTERED INSTITUTE FOR IT
BCS HIGHER EDUCATION QUALIFICATIONS
BCS Level 6 Professional Graduate Diploma in IT
FIGURES TO ACCOMPANY 2014 EXAMINATION PAPER IN
WEB ENGINEERING
Figure 1.1 - Sample web page
Database: EMAILMANAGER
Subscribers
Emailaddress : varchar(64)
Figure 1.2 – Database Entity-Attribute diagram
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head><title>
4 Hello
5 </head></title>
6 </html>
7 <body>
8 <h3>Text<h3>
9 <boldtext>Example</boldtext>
10 </body>
Figure 2.1 – Valid HTML code?
--- File mystyle.css --1
h1 { color: blue; }
--- File cssdemo.html --1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3
<head>
4
<title>My CSS Demo</title>
5
<link rel="stylesheet" type="text/css"
href="mystyle.css">
6
<style>
7
body > p { color: cyan; }
8
#myselector { color: green; }
9
.myselector { color: yellow; }
10
div h1 { color: pink; }
11
div div * { color: red; }
12
</style>
13
</head>
14
<body>
15
<div>
16
<h1>Alligator</h1>
17
<div>
18
<h3>Beetle</h3>
19
<p class="myselector">Cat</p>
20
</div>
21
<h3>Dolphin</h3>
22
<p id="myselector">Emu</p>
23
</div>
24
<p>Frog</p>
25
<div style="color:orange;">
26
Gazelle
27
<h2 style="color:purple;">Herring</h2>
28
<p>Iguana</p>
29
</div>
30
<h1>Jackal</h1>
31
</body>
32 </html>
Figure 2.2 – CSS colour demo
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <title>My HTML Page</title>
5 </head>
6 <body>
7 <p align="center"><b>Main title</b></p>
8 <p><font face="arial"><i>Section 1</i></font></p>
9 <p>A paragraph</p>
10 <p><font face="arial"><i>Section 2</i></font></p>
11 <p>Another paragraph</p>
12 </body>
13 </html>
Figure 2.3 – HTML without CSS
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version = "1.0" encoding="ISO-8859-1"?>
<!ELEMENT test (mcq)+>
<!ELEMENT mcq (statement, a, b, c)>
<!ATTLIST mcq
answer (a | b | c) #REQUIRED>
<!ELEMENT statement (#PCDATA)>
<!ELEMENT a (#PCDATA)>
<!ELEMENT b (#PCDATA)>
<!ELEMENT c (#PCDATA)>
Figure 3.1
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="test.css"?>
<!DOCTYPE test SYSTEM "mcq.dtd">
<test>
<mcq answer=b>
<statements>
Which statement accurately describes a protocol:
</statement>
<a>is a device that controls the network card.</a>
<b>is a method of communication between computers.</b>
<c>is the address of a computer on the Internet.</c>
<d>is the software which controls the network card.</d>
</mcq>
</test>
Figure 3.2
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE MagazineCatalogue SYSTEM "magazine.dtd">
<MagazineCatalogue>
<Magazine ISBN="10104571" Issue_no="4">
<Magazine_title>NewEconomy</Magazine_title>
<Magazine_url page="http://www.neweconmoy.co.uk" />
<Publisher>NewMove</Publisher>
<Editor>Rob Hood</Editor>
<Editor_email>[email protected]</Editor_email>
<Article>
<Article_title>BitCoin</Article_title>
<Author>
<Name>
<Last_name>Max</Last_name>
<First_name>Carl</First_name>
</Name>
<Occupation>Economist</Occupation>
</Author>
</Article>
<Article>
<Article_title>Crowdfunding</Article_title>
<Author>
<Name>
<Last_name>Kains</Last_name>
<First_name>Jon</First_name>
</Name>
<Occupation>Banker</Occupation>
</Author>
</Article>
</Magazine>
<Magazine ISBN="10104890" Issue_no="7">
<Magazine_title>3D Technology</Magazine_title>
<Publisher>3D Group </Publisher>
<Editor>Sen Gupta</Editor>
<Editor_email>[email protected]</Editor_email>
<Article>
<Article_title>3D Printing</Article_title>
<Author>
<Name>
<Last_name>Baux</Last_name>
<First_name>Billy</First_name>
</Name>
<Occupation>Engineer</Occupation>
</Author>
<Author>
<Name>
<Last_name>Bali</Last_name>
<First_name>Gita</First_name>
</Name>
<Occupation>Physcist</Occupation>
</Author>
</Article>
</Magazine>
</MagazineCatalogue>
Figure 3.3
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<ReadyMeals>
<Food>
<lunch supplier="Coste" id="1">
<price>3.50</price>
<quantity>20</quantity>
<calories>1500</calories>
</lunch>
<dinner supplier="Daas" id="2">
<price>4.50</price>
<quantity>50</quantity>
<calories>2000</calories>
</dinner>
</Food>
<Drink>
<juice supplier="Coste" id="3">
<price>1.50</price>
<quantity>60</quantity>
<calories>180</calories>
</juice>
</Drink>
</ReadyMeals>
Figure 4.1
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE cbcatalogue SYSTEM "cbcatalogue.dtd">
<?xml-stylesheet type="text/xsl" href="cbbookxx.xsl"?>
<cbcatalogue>
<subject>
<field>Web Technology </field>
<book isbn="0137001312" edition="1st">
<title>JavaScript for Programmers</title>
<image src="xml.jpg" height="100" width="100" />
<author>
<name>
<Last_name>Deitel</Last_name>
<First_name>Paul</First_name>
</name>
<email>[email protected]</email>
<bio>Paul Deitel, Chief Technical Officer of Deitel and Associates.</bio>
</author>
<author>
<name>
<Last_name>Deitel</Last_name>
<First_name>Harvey</First_name>
</name>
<email>[email protected]</email>
<bio>Chairman and Chief Strategy Officer of Deitel and Associates.</bio>
</author>
<book_url page="http://www.deitel.com/books"/>
<book_url linkname="JavaScript for Programmers"/>
<publisher>Prentice Hall</publisher>
<review>Demonstrating use of commonly available tools to create dynamic webpages &
server side technologies.</review>
</book>
<book isbn="067232797" edition="3rd">
<title>Sams Teach Yourself XML in 24 Hours</title>
<image src="javascript.jpg" height="100" width="100" />
<author>
<name>
<Last_name>Morrison</Last_name>
<First_name>Michael</First_name>
</name>
<email>[email protected]</email>
<bio>Michael Morrison is a professional Java programmer.</bio>
</author>
<publisher>SAMS</publisher>
<review>As an introductory text on XML, it delivers.</review>
</book>
</subject>
<subject>
<field>Databases</field>
<book isbn="9781408007686" edition="2nd">
<title>Database Management Systems</title>
<image src="dbms.jpeg" height="100" width="100" />
<author>
<name>
<Last_name>Ward</Last_name>
<First_name>Patricia</First_name>
</name>
<email>[email protected]</email>
</author>
<book_url page="http://www.cengage.co.uk/fasttrack"/>
<book_url linkname="Database Management Systems"/>
<publisher>Course Technology</publisher>
<review>Exactly what is required in an introductory database course.</review>
</book>
</subject>
</cbcatalogue>
Figure 4.2
Figure 4.3
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="/">
<html>
<head>
<title> Computing Book Catalogue Text Only Version</title>
<link rel="stylesheet" type="text/css" href="cbbook.css"/>
</head>
<body>
<h2>Computer Book Catalogue 2014 Text Only Version</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th align="left">ISBN</th>
<th align="left">Title</th>
<th align="left">Author(s)</th>
<th align="left">Publisher</th>
<th align="left">Book Review</th>
</tr>
<!-- TO BE COMPLETED -->
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Figure 4.4
Figure 4.5
Figure 4.6
Figure 4.7
Figure 4.8
Figure 4.9