BCS THE CHARTERED INSTITUTE FOR IT. BCS HIGHER EDUCATION QUALIFICATIONS BCS Level 6 Professional Graduate Diploma in IT WEB ENGINEERING

Transcription

1 BCS THE CHARTERED INSTITUTE FOR IT BCS HIGHER EDUCATION QUALIFICATIONS BCS Level 6 Professional Graduate Diploma in IT WEB ENGINEERING Wednesday 26 th March 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 enter .html. i) Write HTML to construct the page as indicated in Figure 1.1. (1 mark) ii) Add a basic form to your code: the form must send a single input string parameter named to a script named save .php. The parameter should not be visible in the resulting URL. b) You have access to a database called MANAGER, 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) 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. ii) Add a few lines of code to save the address [email protected] in the database. Display relevant messages (including, as a reminder, the value of the being saved) depending on the failure or success of the operation. Turn Over]

2 iii) iv) Add a few more lines of code to display, in alphabetical order, all the addresses contained in the database. The result should appear as an HTML table. Alternatively, relevant error messages should be displayed if necessary. 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. i) Reusing relevant code from b), write a function called savesubscription, which: - takes a single string called my as an input, - saves my 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 save .php (from a) ii)). It should: - generate a full, valid web page entitled Saving - refer (via an appropriate mechanism) to the function savesubscription (from c) i)), - save the input parameter obtained from the form in enter .html (from a) ii)) in the database mentioned in b). - display an adequate error message if the input parameter is not set. d) 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. ii) Avoiding storing duplicate information in the database. iii) Checking the data entered via the front-end is in the expected format. Turn Over]

3 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. 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" " (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) iii) iv) What version of HTML is currently under development? Give one difference between the new version and an older version. (1 mark) How can web authors ensure their pages conform to standards? (1 mark) Explain, illustrating your answer with relevant examples, why a web page not conforming to standards can be a problem for its users.

4 Section B Answer Section B questions in Answer Book B B3. a) Briefly explain the importance of validating an XML document. 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.] c) Convert the DTD in Figure 3.2 to an XML schema. d) Explain the use of an EMPTY element in the construction of a DTD. e) Write an external DTD for a magazine catalogue, magazine.dtd that enforces the following constraints: 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_ 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) f) 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) iii) A cover image for each magazine that captures attributes of height, width and location of the image. To capture all images where they exist for any article with the same attributes as in ii) above. Turn Over]

5 B4. a) Briefly explain how XPath expressions can manipulate an XML document. With reference to the XML file shown in Figure 4.1, state the output of the evaluation of the following XPath expressions: //quantity //calories 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. 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. 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. 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? B5. a) Briefly explain the statement that the http is stateless and the techniques that address this. 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]

6 d) Compare and contrast the workings of web sockets with reverse AJAX. 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)

7 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 Sample web page Database: MANAGER Subscribers address : varchar(64) Figure 1.2 Database Entity-Attribute diagram

8 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " 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?

9 --- File mystyle.css h1 { color: blue; } --- File cssdemo.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " 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

10 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " 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

11 1 <?xml version = "1.0" encoding="iso "?> 2 <!ELEMENT test (mcq)+> 3 <!ELEMENT mcq (statement, a, b, c)> 4 <!ATTLIST mcq 5 answer (a b c) #REQUIRED> 6 <!ELEMENT statement (#PCDATA)> 7 <!ELEMENT a (#PCDATA)> 8 <!ELEMENT b (#PCDATA)> 9 <!ELEMENT c (#PCDATA)> Figure <?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 <statements> 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 <d>is the software which controls the network card.</d> 13 </mcq> 14 </test> Figure 3.2

12 <?xml version="1.0" encoding="iso " standalone="no"?> <!DOCTYPE MagazineCatalogue SYSTEM "magazine.dtd"> <MagazineCatalogue> <Magazine ISBN=" " Issue_no="4"> <Magazine_title>NewEconomy</Magazine_title> <Magazine_url page=" /> <Publisher>NewMove</Publisher> <Editor>Rob Hood</Editor> <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=" " Issue_no="7"> <Magazine_title>3D Technology</Magazine_title> <Publisher>3D Group </Publisher> <Editor>Sen Gupta</Editor> <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

13 <?xml version="1.0" encoding="iso " 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

14 <?xml version="1.0" encoding="iso " standalone="no"?> <!DOCTYPE cbcatalogue SYSTEM "cbcatalogue.dtd"> <?xml-stylesheet type="text/xsl" href="cbbookxx.xsl"?> <cbcatalogue> <subject> <field>web Technology </field> <book isbn=" " 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> <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> <bio>chairman and Chief Strategy Officer of Deitel and Associates.</bio> </author> <book_url page=" <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=" " 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> <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=" " 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 protected]</ > </author> <book_url page=" <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

15 Figure 4.3 <?xml version="1.0" encoding="iso "?> <xsl:stylesheet xmlns:xsl=" 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

16 Figure 4.5 Figure 4.6

17 Figure 4.7 Figure 4.8

18 Figure 4.9