Reference no: EM132798181
CSC10217 Web Development - Southern Cross University
Part A
Web applications and desktop applications are different approaches to build application software for businesses.
In a few sentences answer each of the following questions:
Q1 Briefly explain the key differences in the architecture of a web application and a desktop application.
Q2 Which type of application would you consider if the requirement is to maximize the client-side computational capability? Justify your choice.
Q3 Which type of application would you choose if there is a requirement for the multi-platform compatibility and fast software updates? Justify your choice.
The following questions are worth 6 marks in total:
JavaScript and PHP are two major scripting technologies used in web application development.
Compare the two scripting technologies in the following aspects outlined in each question.
Q4 Application areas and useability.
Q5 Deployment environment.
Q6 Concurrency (i.e. the mechanism to execute multiple tasks)
The following questions are worth 4 marks in total:
GET and POST are two important methods of HTTP.
In a few sentences answer each of the following questions
Q7 Briefly explain the key differences between HTTP GET and POST methods.
Q8 Which method would you use to send username and password to web server? Justify your choice.
The following questions are worth 6 marks in total:
CSS and JavaScript are primary technologies for building dynamic and responsive UI in web applications.
In a few sentences answer each of the following questions.
Q9 Briefly explain the technique to create dynamic and responsive menus in web applications using the CSS and JavaScript.
Study the html document given below in Figure 1 and answer the following questions in one sentence for each:
Figure 1:
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display:block;}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="showDropDown()" class="dropbtn">Dropdown</button>
<div id="menuDropdownID" class="dropdown-content">
<a href="#Link-1">Item 1</a>
<a href="#Link-2">Item 2</a>
<a href="#Link-3">Item 3</a>
</div>
</div>
<script>
function showDropDown() {
}
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i<dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
Q10 What should the showDropDown() function do to show the dropdown menu?
Q11 What does the window.onclick event handler do in this html document?
Q12 What is the value of dropdowns.length in the for-loop of the window.onlick function handler?
The following questions are worth 6 marks in total:
Call-back is the mechanism used by JavaScript to avoid blocking the application UI while the application is waiting for some lengthy task to complete.
In a few sentences please answer each of the following questions.
Q13 Briefly explain the working principle of the call-back mechanism.
Q14 In the example given in Figure 2, following below, explain what you would observe on the screen after clicking the "Count" button.
Figure 2:
<html>
<body>
<button type="button" onclick="count()">Count</button>
<p id="d"></p>
<script>
function count(){
for (var i = 0; i< 1000000; i++) {
document.getElementById("d").innerHTML = "Counting: " + i;
}
}
</script>
</body>
</html>
Q15 Worth 4 marks:
Rewrite the count function shown above using the function call-back mechanism and the JavaScript setInterval() function to get the counting to display on the screen every 1 second.
The setInterval() function has the following syntax: setInterval(function, milliseconds);
<html>
<body>
<buttontype="button"onclick="count()">Count</button>
<pid="d"></p>
<script>
functioncount(){
}
</script>
</body>
</html>
The following questions are worth 6 marks in total:
User input validation is one of the key requirements in application development.
Please answer each of the following questions.
Q16 Briefly discuss the differences between the client-side validation and server-side validation and provide an example scenario where the client-side validation is a preferable option to server-side and vice versa.
Study the html document given below in Figure 3 and answer the following questions in one sentence for each:
Figure 3:
<html>
<body>
<h2>Login</h2>
<formname = "loginform"action="login_handler.php"style="border:1px solid #ccc"onsubmit="return checkUname(uname)">
<inputtype="text"placeholder="Enter username"name="uname"id="id_uname" >
<inputtype="password"placeholder="Enter Password"name="upass"id="id_upass" >
<buttontype="button" >Cancel</button>
<buttontype="submit" >OK</button>
</form>
</body>
<script>
function checkUname(uname) {
var returnValue = false;
var valid_name = /^[A-Z a-z 0-9]{8,12}$/;
if (!valid_name.test(uname.value)) {
alert ("username must ... ");
}
else
{
returnValue = true;
}
}
function checkUpass(upass) {
}
return returnValue;
</script>
</html>
Q17 The username should have between 3 and 20 characters and contain only letters and numbers [a-Z, 0-9]
Re-write the regular expressionbelow.
Q18 The password should have a minimum of six characters and must contain at least one upper-case letter and one number.
Re-write the regular expression below.
The following questions are worth 6 marks in total:
AJAX is a unique JavaScript mechanism for creating non-flickering, interactive client-server interaction in web applications.
Please answer each of the following questions.
Q19 Briefly discuss the working principle of the AJAX-based client-server interaction in comparison with the standard non-AJAX client-server interaction.
Study the html document given below in Figure 4 and answer the following questions.
It is intended to create an Ajax interaction with the web server to check for the duplication of username.
The check is to be carried out when the user types in something in the input field.
Figure 4:
<html>
<body>
<formaction="signup_handler.php"name="signupform" >
<inputtype="text"name="uname"required>
<input type="text"name="uemail"required>
<!-- more fields go here -->
</form>
<script>
function validateUname(uname) {
var xhttp;
if (uname != "") {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4&&this.status == 200) {
var res = this.responseText;
}
};
xhttp.open("GET", "validuname.php?uname=" + uname, true);
xhttp.send();
}
}
</script>
</body>
</html>
Q 20
To complete this code, you should:
Write a php page to handle the Ajax request.
The page should be named appropriately so it can be called by the server.
The page validates emails by checking if the emails have been used by other registered users.
Assume that all registered users are stored in a local MySQL database with the following parameters:
server: localhost;
database: mydb;
username: me;
password: myPa$#;
table: tabUser;
username field: username.
Q21 Re-write the JavaScript code to make the AJAX interaction work as expected.
Part B
The following questions in this section are worth 40 marks in total:
Any reasonable attempt will gain marks.
Consider the following problem context:
To participate in the 2020 Olympic Games, the Olympic Committee has decided to build a web-based application (webapp) to help visitors to personalise their experience with the games.
The webapp will allow each user to build a list of the sports they are interested in with the following information:
• Sport: one of the sports playing in the 2020 Olympic Games
• Round: round1, round2, quarter final, semi-final and final
• Team/athletes: name of the team or name of the athlete/s
• Country: country the team or athletes are playing for
• Start time: expected date and time the event starts.
• End time: expected date and time the event finishes.
• Game venue: the location where the game is played. To help with the navigation, GPS location i.e. longitude and latitude of the venue are also provided.
• Score/record: the game score or record in text.
Users will need to register using their full name and email address and then login to use the app.
The app should not allow users to register using duplicated email addresses.
You are hired by the Olympic Committee to develop the web application.
Q22 Implement the registration form using html, JavaScript and PHP.
Your registration should perform the validity of the email address.
You will use JavaScript to check the validity of email addresses using Regex. A valid email will have the following format:
Consider the following:
SQL Injection and cross-site scripting are typical security attacks carried out against web applications.
Study the php document given below in Figure 5 and answer the following questions.
Figure 5
<?php
$servername= "localhost";
$username = "me";
$password="!myPatiny_mce_markerquot;;
$dbname = "mydb";
if(isset($_POST["uname"], $_POST["upass"])) {
$conn = newmysqli($servername, $username, $password, $dbname);
if (!$conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$query = "select * from user where uname='$_POST[uname]' AND upass='$_POST[upass]'";
$result = $conn->query($query);
}
?>
Q23 Explain why the code given in Figure 5 above, is vulnerable to SQL Injection and cross-site scripting attacks.
Q24 Give an example scenario to demonstrate your analysis in the previous question.
Q 25 Rewrite the Figure 5code to prevent these types of security attacks.
Attachment:- Web Development.rar