CSC10217 – Web Development II – Exam

________________________________________
UNIT: CSC10217 – Web Development II – Exam

TIME ALLOWED: 3 hrs + 10 minutes reading time

PERMITTED MATERIALS: Unmarked, Unhighlighted, Untabbed Foreign Language Dictionary (Book Form Only) Permitted. Unmarked Calculator Instruction Booklet. Two A4 sheets annotated both sides.

SPECIAL INSTRUCTIONS:
Attempt all questions.
This examination is worth 40% of the overall unit assessment.

This booklet contains:
PART A (50%) which consists of 8 short answer questions totalling 50 marks. Write your answers in an answer booklet not on the exam paper. Make sure to number each question clearly.

PART B (50%) which consists of 2 questions totalling 50 marks. Write your answers in the booklet(s) provided. Make sure to number each question clearly.
.

Please return the exam paper with your answer booklet/s and annotated sheets.

This examination is worth 40% of your final grade.

All exams include 10 minutes reading time which allows you to spend some time at the start of the examination for composing yourself, reading the exam paper, and planning which questions to answer, and how. We advise you to read the instructions and questions carefully before you begin writing; however you are allowed to begin writing your answers straight away if you wish.
Please ensure that you record your full name and student ID in the spaces provided on ALL items to be handed in.
All questions to be answered in your own handwriting unless otherwise authorised.

STUDENT NAME: …………………………………………………………………
I.D. NUMBER: …………………………………………………………………
PART-A: 50 marks Time estimate: 90 min

Q1 (6 marks): Web applications and desktop applications are different approaches to build application software for businesses. In a few sentences:
a. Summarize the pros and cons of web applications over desktop applications in the following aspects: maintenance and update, platform dependency and accessibility, user experience and security.
b. Which type of application would you choose to build an online collaboration system similar to the Blackboard collaborate? Justify your choice.
Q2 (6 marks): In a few sentences, summarize the key differences between the client side and the server side scripting technologies in the following aspects: usability (for what purpose) and execution mechanism. Is it possible to use JavaScript at the server-side? Justify your answer.

Q3 (6 marks): GET and POST are two important methods of HTTP. In a few sentences, compare HTTP GET and POST methods in the following aspects:
a. Usability and Security
b. Which method would you use to upload images to web servers? Justify your choice.

Q4 (6 marks): Sessions and cookies are two important mechanisms for building stateful communication between client and server in web application. In a few sentences compare and contrast the two mechanisms in the following aspects:
a. Usability and Security
b. Which mechanism would you use if you need to keep information about a specific user for exactly one (1) day? Justify your choice.

Q5 (6 marks): CSS and JavaScript are primary technologies for building dynamic and responsive user interface (UI) in web applications. Analyse the html document given in Figure 1 and answer the following questions in one sentence:
a. What will you observe when the “Toggle Title” button is clicked?
b. Rewrite the toggleTitle () function to toggle hide and show the title when the “Toggle Title” button is repeatedly clicked.

Q6 (6 marks): Callback is the mechanism used by JavaScript to avoid blocking the application User Interface while the application is waiting for some lengthy task to complete.
a. The code given in Figure 2 tries to display a countdown clock. Analyse the code and discuss what you would observe on the screen after the button “START” is pressed?
b. Rewrite the countdown function using the function callback mechanism and window’s setInterval function to get the counting display on the screen every 1 second. The setInterval function has the following syntax: setInterval(function, milliseconds);


Q7 (9 marks): User’s input validation is one of the key requirement in application development.
a. Summarize the advantages and disadvantages of the client side validation compared to the server-side validation.
b. The code showing in Figure 3 is intended to check the validity of username and password. Modify the JavaScript checkUname and checkUpass functions to perform the following validation:
• The username should have between 3 to 5 characters beginning with a lower case letter.
• The password should have minimum eight characters, at least one letter and one number and none of the following special character (@#$%).
c. For security reason, you also want to perform the username and password validation at the server side. Modify the code given in Figure 4 to complete the validations.


Q8 (5 marks): AJAX is a unique JavaScript mechanism for creating non-flickering interactive client-server interaction in web applications. The code showing in Figure 5 is intended to create an Ajax interaction with the web server to suggest the matching keywords as the user starts typing in the search input box. You will help to complete this code by:
a. Modifying the php code provided in Figure 6 to handle the Ajax request. The code will search for keywords matched with the current search key.
b. Modify the JavaScript code provided in Figure 5 to show the user matched keywords as the user types in the search key.
PART-B: 50 marks Time estimate: 90 min

Problem context:
You are hired to build a web application to manage and share food recipes. Each recipe will have following information:
– Name: recipe name
– Category: breakfast, lunch, dinner
– Origin: the origin of the recipe e.g. from Italy, France, China (text 100 characters)
– Servings: the serving size e.g. 2 people, 4 people
– Cooking time: expected cooking time in minutes.
– Ingredients: ingredients of the recipe in text.
– Instruction: cooking instruction in text
– Photo: a photo of the cooked dish.
You will do the development in two steps.
Q9 (25 marks): In this step, you will draft the design document for the application. In particular, you will create the following items:
a. A diagram of the architectural (modular) design of the application denoting the main client-side and sever-side components /modules to be built so that the user can add/edit/delete/search for recipes. Recipes will be stored in MySQL database server.
b. A wireframe design of the main screen where you will display the most recent recipes and the input form to input the recipe data.
c. A database structure to store the recipe data. Select the data types from the following data types:
– VARCHAR(size): Holds a variable length string (can contain letters, numbers, and special characters). The maximum size is specified in parenthesis. Can store up to 255 characters. Note: If you put a greater value than 255 it will be converted to a TEXT type.
– TINYTEXT: Holds a string with a maximum length of 255 characters.
– TEXT: Holds a string with a maximum length of 65,535 characters
– ENUM(x,y,z,etc.): Let you enter a list of possible values. You can list up to 65535 values in an ENUM list. If a value is inserted that is not in the list, a blank value will be inserted.
– TINYINT(size): -128 to 127 normal. 0 to 255 UNSIGNED*. The maximum number of digits may be specified in parenthesis
– INT(size): -2147483648 to 2147483647 normal. 0 to 4294967295 UNSIGNED*. The maximum number of digits may be specified in parenthesis
– TIME(): A time. Format: HH:MI:SS
– BLOB: For BLOBs (Binary Large OBjects). Holds up to 65,535 bytes of data

Q10 (25 marks): In this step you will implement some of your design. In particular, you will implement the recipe input form using html, JavaScript and PHP. In particular, you will create the following:
a. A html page with the recipe input form using your design with a proper client-side input validation You can use HTML5, JavaScript or both for the validation task.
b. PHP code to store the recipe in database. Note that here you do not need to implement code to store the recipe photo in the database or a server folder. You can use the code provided in Figure 7 as your starting point or use your own code which ever you are more comfortable with.

END OF EXAM

Related Post

Writing a narrative writing that discusses and reveals details about someone’s life from the classroom but nor from your own lifeWriting a narrative writing that discusses and reveals details about someone’s life from the classroom but nor from your own life

Writing a narrative writing that discusses and reveals details about someone’s life from the classroom but nor from your own life. This essay is what is called traditionally a narrative

My Blog