Web Development II

Answer

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:

1. Summarize the major pros and cons of web applications over desktop applications in the following aspects: maintenance and update, platform dependency and accessibility, user experience and security.

The key advantages of web applications over desktop applications are the following:

+ Maintenance and update: web applications are located in the server side and therefore can be maintained updated more easily compared to desktop applications as no client-side installation and update are needed.

+ Platform dependency and accessibility: web applications runs inside any standard web servers and web browsers independently form the system hardware and operating systems. Web applications can be assessed from any desktop, laptop and mobile devices with web browsers and network connectivity.

The major limitations of web applications over desktop applications include:

+ User experience: web applications are not comparable to desktop applications in terms of providing impressive user experience like seen in computer video games. Web application user interface runs inside web browsers and it is bounded by the browser capability and the web technologies e.g. HTML and JavaScript.

+ Security: web applications run over networks so they are vulnerable to network security threats such as data sniffing and denial of service.

1. Which type of application would you choose to build an online collaboration system similar to the Blackboard Collaborate? Justify your choice.

The focus of applications like Blackboard Collaborate will be on user experience with high quality audio, video and interactive interaction between the participants. Therefore, the desktop application world be a better 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.

1. Summarize the key differences between the client side and the server side scripting technologies:

+ Usability: Client-side scripting technologies like JavaScript are designed to improve user experience by allowing web pages to interact with the users locally. Server-side scripting technologies are designed to allow web servers to serve dynamic web pages to clients through executing scripted business logics and interacting with other servers such as database servers and file servers.

+ Execution mechanism: Client-side scripts are interpreted and executed by client-side web browsers while server-side scripts are executed by web servers or by script interpreters via CGI.

1. Is it possible to use JavaScript at the server-side? Justify your answer

JavaScript can be used at the server side with a JavaScript interpreter like NodeJS. With additional libraries and frameworks, JavaScript can be used to implement complex business logics and access different databases including MySQL, MSSQL and PostgreSQL.

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:

1. Usability and Security

GET method is designed for clients to request a resource on the server side using HTTP. GET method allows parameterising its request message and therefore the method is sometime used to send short data to servers as the request parameters. However, only data in ASCII format is accepted. The GET method message is also has the length limit of 2048 bytes. As GET method sends data as request parameters, which are directly and explicitly embedded in the URL of each request, GET method is not suitable for sending sensitive data such as username and password because the URLs can be bookmarked and cached in the browser history.

POST method is designed for clients to send (form) data to web servers using HTTP. POST method allows data to be encoded and embedded in the message body so POST can be used to send data of any size of format including binary data such as files and images. The POST method message does not have the length limit. As POST method embeds data in the message body, it is securer to send sensitive data using POST method because the message body is not cached or bookmarked by the web browsers.

1. Which method should you use to send an image to the server? Justify your choice.

As images are binary data, POST method is the method to be used in this case. GET method can only send data in ASCII format.

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:

1. Usability and Security

Both mechanisms are designed to keep information about a specific connection between clients and servers. The main difference between the two mechanisms is that cookies is the client-side mechanism while sessions is the server-side. Information stored in the cookies will be kept for a programmable period of time even after the connection is lost. Information stored using sessions will be cleared by the server after the connection is closed or after a predefined timeout period. Users can enable or disable cookies and therefore, cookies are not always available for web applications to use. Sessions on the other hand cannot be disabled by users. As cookies information is kept at the client side and can be accessed with ease, additional protection such as encryption is needed to secure information. Session information on the other hand is kept in the server side so it is more secure. However, attack to session information is possible so additional protection e.g. encryption is also recommended.

1. Which mechanism would you use if you need to keep information about a specific user for exactly one (1) day? Justify your choice

Cookie is the mechanism of choice because sessions do not allow clients to set the timeout value.

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:

1. What will you observe when the “Toggle Title” button is clicked?

When the “Toggle Title” button is clicked the title “This is my title” will be hidden.

1. 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.

1. The code given in Figure 2 tries to display a countdown clock. Analyse the code and discuss what you would observe on the screen when the button “START” is pressed?

The user interface (UI) is frozen after the button START is pressed with no information about the countdown time displayed. This is because the code is busy looping inside the countdown and wait functions. This lengthy task blocks the main execution thread leading to no information update happening in the user interface.

1. 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.

1. Summarize the advantages and disadvantages of the client side validation compared to the server-side validation.

Client-side validation is done locally so it is quick and responsive. However, the client-side validation is limited by the browser capability e.g. not being able to access databases, and it not secure due to the validation can be disabled or manipulated by the user.

Server-side validation is done at the server so it is more secure and cannot be disabled by the user. Server-side validation codes are not limited by the browser capability so more complex validation can be done e.g. checking databases and sending emails. Server-side validation however is slower, less interactive and vulnerable to some security attacks as it is involved the submission of unverified data to web servers.

1. 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 (@#$%).

1. 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:

1. 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.

1. 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 (max 100 characters)
• Category: breakfast, lunch, dinner
• Origin: the origin of the recipe (max 100 characters optional)
• Servings: the serving size e.g. 2 people, 4 people
• Cooking time: expected cooking time in minutes.
• Ingredients: ingredients of the recipe in text (max 500 characters)
• Instruction: cooking instruction in text (max 500 characters)
• Photo: 1 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:

1. 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 database servers like MySQL.

--------------------------------------------------------------------------------------------------------------------------

1. A wireframe design of the main screen where you will display the most recent recipes and the input form to input the recipe data.

-------------------------------------------------------------------------------------------------------------------------

1. A database structure to store the recipe data in MySQL database. Select the data types from the following 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

TABLE tab_recipes {

            fRID: Unique Recipe ID (auto increment)

fName: VARCHAR(100) or TINYTEXT;

fCategory: ENUM, VARCHAR(50) or  TINYINT ;

fOrigin: VARCHAR(100) or TINYTEXT;

fServings: TINYINT or INT;

fCooktime: INT or VARCHAR(10);

fIngredients: TEXT;

fInstruction: TEXT;

fPhoto: BLOB or VARCHAR(255);

}

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:

1. 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.

1. PHP code to add the newly created 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. Use the code provided in Figure 7 as your starting point for the PHP code.