BCS THE CHARTERED INSTITUTE FOR IT WEB ENGINEERING BCS HIGHER EDUCATION QUALIFICATIONS

BCS THE CHARTERED INSTITUTE FOR IT
BCS HIGHER EDUCATION QUALIFICATIONS
BCS Level 6 Professional Graduate Diploma in IT
WEB ENGINEERING
Wednesday 26th March 2014 - Morning
Answer any THREE questions out of FIVE. All questions carry equal marks.
Time: THREE hours.
Answer any Section A questions you attempt in Answer Book A
Answer any Section B questions you attempt in Answer Book B
The marks given in brackets are indicative of the weight given to each part of the question.
Calculators are NOT allowed in this examination.
The figures referenced in this question paper are provided in a separate booklet.
Section A
Answer Section A questions in Answer Book 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)
Turn Over]
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)
d)
You will now write the back-end of your application.
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)
Turn Over]
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)
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, Figure 3.3 (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)
Turn Over]
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)
B5.
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)
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)
Turn Over]
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)
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