CITY UNIVERSITY OF HONG KONG


Course code & title :   CS5281 Internet Application Development

Session :   Semester B 2019-20

Time allowed :   Two hours

This question paper has 10 pages.

Instructions

1. Answer ALL questions.

2. Students may answer in point form whenever appropriate.

3. Start each question on a new page and write down the question number clearly.

4. Students should upload the solution as a single PDF file to Canvas after the examination. (formats like multiple html files or photos are not accepted)

This is an open-book examination.

  Candidates are allowed to use the following materials/aids:

  Notes & references posted on Canvas

  Materials/aids other than those stated above are not permitted.

  Candidates will be subject to disciplinary action if any unauthorized materials or aids are found on them. 


NOT TO BE TAKEN AWAY

Que #
Q1
(17)
Q2
(18)
Q3
(12)
Q4
(8)
Q5
(13)
Q6
(12)
Q7
(8)
Q8
(12)
Total
(100)
Marks










Honesty Pledge

“I pledge that the answers in this exam are my own and that I will not seek or obtain an unfair advantage in producing these answers. Specifically,

      • I will not plagiarize (copy without citation) from any source;

      • I will not communicate or attempt to communicate with any other person during the exam; neither will I give or attempt to give assistance to another student taking the exam; and

      • I will use only approved devices (e.g., calculators) and/or approved device models.

      • I understand that any act of academic dishonesty can lead to disciplinary action.”

Students are asked to reaffirm the honesty pledge by writing:

“I pledge to follow the Rules on Academic Honesty and understand that violations may led to severe penalties”

in the space provided onto the first exam answer sheet:


1. In this examination, you will develop a simple health declaration page as shown on the right.

The development process is divided into parts:

Question 1 focuses on HTML markup,

Question 2 focuses on CSS styles,

Question 3-4 focus on JavaScript, and

Question 5 focuses on the server side programming using PHP.


In the space provided on the next page, write down the HTML markup of the health declaration form. [17 marks]: (Do NOT include any CSS in your solution of question 1)

       On the top of the page, there is an image hyperlink containing the company logo (Logo.jpg). When the link is clicked, the user will be directed to www.abc.com

       Below the logo is a level-1 heading: “Health declaration form”.

       The form contains two text boxes for the Staff ID (SID) and telephone extension (EXT).

       There are 2 radio buttons (L14) representing whether the user have left HK in the past 14 days (internal values “Y” or “N”(default)).

       There’s a drop-down list (CTY) for the user to choose the visited city.

       There’s a checkbox (NB) for optional declaration of the symptoms of neighbors.

       When the submission button is clicked, JavaScript function check() will be called. If there’s no error, the form information will be sent to declare.php. (Information should not appear in the address bar)

       Only the content inside HTML body is needed. 4 5


2. With embedded CSS, format the declaration page as specified [18 marks]:


3. The health declaration form needs to check for the validity of the Staff ID before submission. A valid Staff ID has a fixed length of 7 characters, which comprises:

       A capital English character (A..Z)

       5 numerical digits:  in range (0..9)

       a check digit  at the end of the Staff ID.

The check digit dc is calculated by adding up the five internal digits multiplied by the corresponding positions. (i.e. ). If is greater than 9, its value will be replaced by the sum of all digits in .

As an example, consider the case of “12345”. = 1*1 + 2*2 + 3*3 + 4*4 + 5*5 = 55. Since 55 is greater than 9, is updated to 5+5 = 10. Since 10 is still greater than 9, is then updated to 1+0 = 1. (Which is the check digit as shown in the figure in question 1).

The JavaScript function below intends to check the validity of a given Staff ID, but somehow the code doesn’t work as expected, fix the program by replacing the erroneous lines with the correct ones. [12 marks]

       Replacement, if any, should only be made in a ONE-TO-ONE manner.

       Write down the line number before your answer.

       Leave the line empty if the line is correct and no replacement is needed.

Erroneous markup
Corrected markup
  bool checkSID(S) {
  1.
    if (S.size!=7) return;
  2.
    if (S[0]<'A' && S[0]>'Z') return false;
  3.
    var sum;
  4.
    for (i=1;i<5;i++) {
  5.
      if (S[i]<'0' || S[i]>'9') return false;
  6.
      sum =+ i*S[i];
  7.
    }
-- No error, leave blank --
    if (sum>=10)
  8.
      sum = (sum/10) + sum mod 10;
  9.
    return S[7]=sum;
  10.
  }
-- No error, leave blank --


4. As mentioned in question 1, the JavaScript function check() is called upon submission.

The function performs the following actions:

     Check whether the Staff ID and Telephone extension are empty. (print error message and stop submission upon error)

     Check whether the Staff ID is valid using the checkSID() function in question 3. (print error message and stop submission upon error)

     Tidy up the Telephone extension field. (see below)

In the company, telephone extensions always start with “3456”. From time to time, users may type the telephone number in different forms. For example “34569999” may be entered as “34569999”, “3456-9999” or simply “9999”. The check() function should support all the three formats and turn it to a sequence of 8 digits (i.e. “34569999”) before submission. (You may assume that there’s no invalid input in a format different from the 3 formats mentioned) In the space provided below, write down the check() function. [8 marks]


5. After clicking the submission button, the form information will be sent to declare.php. In order to interoperate with some other system, declare.php saves the records as record.csv (which is just a simple text file with fields separated by commas):

  A123451,34565678,N,N/A,N

  A222223,34566666,Y,Country 1,N

  B234237,34568888,N,N/A,Y

  ....

Considering the fact that a user may submit the declaration form more than once (possibly with updated information), instead of simply appending the new row to the end of the CSV file, the php program need to read the existing CSV first and perform update accordingly.

The code of declare.php is given below. Complete the PHP script by filling in the missing commands according to the hints given in the comments. [13 marks]

<?php

$rows = (5a)    //read the whole file into $rows array

$idx = (5b)    //$idx is the array index of the new record

for ( $i= (5c)    ; $i++ ) { //scan the whole array

$rec = (5d)    //break the current row at the commas

if ( (5e) ) $idx = $i;    // update $idx if SID found

}

if ($_POST["L14"]=='N') (5f)    //Country “N/A” if not travelled

$row = $_POST["SID"] . "," . $_POST["EXT"] . ","    //$row is the combined

. $_POST["L14"] . "," . $_POST["CTY"];    // string with comma

if ( (5g)    ) $row .= ",Y\n"; //neighbor with symptom

Else    $row .= ",N\n";

$rows[$idx] = $row;

$fp = (5h)    //open record.csv overwriting old content

for ($i=0; (5i)    ; $i++)

(5j)    //write a single record as a line

(5k)    //remember to do this after using files

?> 


6. Explain the respective meanings of the following CSS statements & selectors:

h1#a + table { margin-left: auto; margin-right: auto;}    [4 marks]

Meaning:

a.special:active { text-decoration: none; }    [4 marks]

Meaning:

thead td > a { line-height: 3ex;}    [4 marks]

Meaning:


7. JQueryMobile allows HTML pages to be rendered in a look-and-feel similar to a mobile App. Given a simple HTML page with bullets (as shown on the left below), describe the steps and syntax needed (in header, body…etc) in order to have it rendered as the navigation bar as shown on the right below. [8 marks]

      

8. With only 1-2 sentences, explain the differences between the two similar concepts:

a) name attribute v.s. ID attribute in HTML tag    [2 marks]

b) source tag v.s. src attribute in HTML5 audio    [2 marks]

c) new Array(3) v.s. new Array(3,4) in JavaScript    [2 marks]

d) window.confirm() v.s. window.alert() in JavaScript    [2 marks]

e) Mechanism to read cookie v.s. write cookie in PHP    [2 marks]

f) Symbol >= v.s. => in ECMASript6    [2 marks]

-- END OF EXAM --