POLYTECHNIC SULTAN MIZAN ZAINAL ABIDIN
DEPARTMENT OF INFORMATION AND COMMUNICATION TECHNOLOGY
DFT 40163
WEB DESIGN TECHNOLOGY
ASSESMENT PROJECT 2
NAME 1. DANIAL IZZUDDIN BIN MOHAMAD SHAHIR
2. NUR FARAH AQILAH BINTI NORAZAM
3. NUR ARIESYA SYAFIKA BINTI ABDULLAH
REG NO 1. 13DDT22F1124
2. 13DDT22F1139
3. 13DDT22F1176
PROGRAMME DDT4S2
INSTRUCTIONS :
1. Answer ALL the questions
2. Submit the assessment on _______________________________
MARKING SCHEME
CLO1P PLO 3 P4 / 30
TOTAL / 30
THE ENTIRE QUESTION IS BASED ON JTMK’S QUESTION BANK APPROVED BY PROGRAMME LEADER.
NO SIGNATURE IS REQUIRED.
PROJECT
CHAPTER 4: JAVASCRIPT
CHAPTER 5: WEB MOBILE FRAMEWORK
[CLO1P, P4]
PURPOSE:
Student will be given an exposure to work in a team in developing a mobile web application using the
knowledge and skills that they have been learned.
QUESTION:
1. INTRODUCTION
As Malaysia based travel agency, Setia Travel Agency offer cheap tour packages either domestic
(within Malaysia) or international tours. Just tell them about the trip you’re dreaming of taking—they
will make it a reality. Setia Travel Agency team consist of a group of travel expert which are strong
emphasis on service quality, customer care, attentive listening and prompt response to enquiries
within 24 hours.
You as a web developer has been appointed to develop the website based on the instructions and
requirements of the specification provided below.
2. DESCRIPTION OF PROJECT AND TASKS
In a group of 3-4 person, you are required to develop a Mobile web application based on given
introduction by using appropriate tools. Each group will also have to present the mobile web
application that has been develop.
Your marks will be evaluated based on:
1. JavaScript – 40 marks
2. jQuery Mobile – 40 marks
3. Resources Hosting – 20 marks
-END-
HTML CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Setia Travel Agency</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="themes/project2.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Main page -->
<div data-role="page" id="page1" data-theme="e">
<div data-role="header">
<h1>Welcome to Setia Travel Agency</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page2" data-icon="star" data-transition="slide">ABOUT US</a></li>
<li><a href="#page3" data-icon="location">TOUR PACKAGES</a></li>
<li><a href="#page5" data-icon="lock">BOOKING</a></li>
</ul>
</div>
<div data-role="main" class="ui-content">
<img src="agency1.jpg" alt="Setia Travel Agency">
<p>Setia Travel Agency specializes in offering a wide range of budget-friendly tour packages,
covering exciting destinations both near and far. Our team of travel enthusiasts is dedicated
to providing top-notch service, listening closely to your needs, and responding promptly to
any questions you may have within just 24 hours. We're here to make your dream vacation a
reality, crafting unforgettable experiences that you'll cherish for a lifetime.</p>
<!-- Social Media Links -->
<div data-role="collapsible" data-collapsed="carat-d" data-expanded-icon="carat-u">
<h4> FIND US ! </h4>
<ul data-role="listview" data-inset="false" class="center-images">
<li><a href="https://www.facebook.com/SetiaTravelAgency" target="_blank"><img
src="fb.png" height="20%" alt="Facebook"> FACEBOOK</a></li>
<li><a href="https://twitter.com/SetiaTravel" target="_blank"><img src="tw.png"
height="20%" alt="Twitter">TWITTER</a></li>
<li><a href="https://www.instagram.com/SetiaTravel" target="_blank"><img src="ig.png"
height="20%" alt="Instagram">INSTAGRAM</a></li>
</ul>
</div>
<!-- Contact Information -->
<div data-role="main" class="ui-content">
<h3>Contact Information</h3>
<ul>
<li>Phone: +123-456-7890</li>
<li>Email:
[email protected]</li>
<li>Address: 123 Travel Street, City, Country</li>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>© Setia Travel Agency</h4>
</div>
</div>
<!-- ABOUT US PAGE -->
<div data-role="page" id="page2" data-dialog="true" data-theme="d">
<div data-role="header">
<h1> ABOUT US</h1>
<p>Setia Travel Agency team consist of a group of travel expert which are : </p>
</div>
<div data-role="main" class="ui-content">
<ol data-role="listview">
<li>STRONG EMPHASIS ON SERVICE QUALITY</li>
<li>CUSTOMER CARE</li>
<li>ATTENTIVE LISTENING </li>
<li>PROMPT RESPONSE TO ENQUIRIES WITHIN 24 HOURS. </li>
</ol>
</div>
<div data-role="main" class="member">
<h2> MEET OUR MEMBER :</h2>
<a href="#popupFarah" data-rel="popup">
<img src="farah.jpeg" alt="Setia Travel Agency">
<p>FARAH AQILAH</p>
</a>
<a href="#popupDanial" data-rel="popup">
<img src="danial.jpeg" alt="Setia Travel Agency">
<p>DANIAL IZZUDDIN</p>
</a>
<a href="#popupNur" data-rel="popup">
<img src="ariesya.jpeg" alt="Setia Travel Agency">
<p>NUR ARIESYA</p>
</a>
</div>
<div data-role="popup" id="popupFarah" class="photopopup">
<img src="farah.jpeg" alt="Setia Travel Agency">
<p>FARAH AQILAH</p>
</div>
<div data-role="popup" id="popupDanial" class="photopopup">
<img src="danial.jpeg" alt="Setia Travel Agency">
<p>DANIAL IZZUDDIN</p>
</div>
<div data-role="popup" id="popupNur" class="photopopup">
<img src="ariesya.jpeg" alt="Setia Travel Agency">
<p>NUR ARIESYA</p>
</div>
<div data-role="footer">
<h2>© Setia Travel Agency</h2>
</div>
</div>
<!-- Tour Packages page -->
<div data-role="page" id="page3" data-theme="f">
<div data-role="header">
<h1>Tour Packages</h1>
<a href="#page1" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
</div>
<div data-role="navbar">
<!-- navigation -->
<ul>
<li><a href="#page3" data-icon="home">INTERNATIONAL </a></li>
<li><a href="#page4" data-icon="home">DOMESTIC</a></li>
</ul>
</div>
<div data-role="main" class="ui-content">
<div class="ui-grid-b">
<p>INTERNATIONAL TOURS</p>
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="height: 30%">
<img src="japan.jpg" alt="Setia Travel Agency">JAPAN
</div>
<div class="ui-bar ui-bar-a" style="height: 30%">
<img src="korea.jpg" alt="Setia Travel Agency">KOREA
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-a" style="height: 30%">
<img src="indo.jpg" alt="Setia Travel Agency">INDONESIA
</div>
<div class="ui-bar ui-bar-a" style="height: 30%">
<img src="brunei.jpg" alt="Setia Travel Agency">BRUNEI
</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-a" style="height: 30%">
<img src="sg.jpg" alt="Setia Travel Agency">SINGAPORE
</div>
<div class="ui-bar ui-bar-a" style="height: 30%">
<img src="thai.jpg" alt="Setia Travel Agency"> THAILAND
</div>
</div>
<p><a href="#page5" class="ui-btn ui-corner-all">BOOKING !!</a></p>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>© Setia Travel Agency</h4>
</div>
</div>
<!-- Domestic Tours page -->
<div data-role="page" id="page4" data-theme="f">
<div data-role="header">
<h1>DOMESTIC</h1>
</div>
<div data-role="navbar">
<!-- navigation -->
<ul>
<li><a href="#page3" data-icon="home">INTERNATIONAL </a></li>
<li><a href="#page4" data-icon="home">DOMESTIC</a></li>
</ul>
</div>
<div data-role="main" class="ui-content">
<div class="ui-grid-b">
<p>DOMESTIC TOURS</p>
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="height: 40%">
<img src="langkawi.jpg" alt="Setia Travel Agency">LANGKAWI
</div>
<div class="ui-bar ui-bar-a" style="height: 40%">
<img src="tioman.jpg" alt="Setia Travel Agency">TIOMAN ISLAND
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-a" style="height: 40%">
<img src="kuching.jpg" alt="Setia Travel Agency">KUCHING
</div>
<div class="ui-bar ui-bar-a" style="height: 40%">
<img src="ipoh.jpg" alt="Setia Travel Agency">IPOH
</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-a" style="height: 40%">
<img src="ch.jpg" alt="Setia Travel Agency">CAMERON HIGHLAND
</div>
<div class="ui-bar ui-bar-a" style="height: 40%">
<img src="kapas.jpg" alt="Setia Travel Agency">KAPAS ISLAND
</div>
</div>
<p><a href="#page5" class="ui-btn ui-corner-all">BOOKING !!</a></p>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>© Setia Travel Agency</h4>
</div>
</div>
<!-- Booking page -->
<div data-role="page" id="page5" data-theme="e">
<div data-role="header">
<h1>Book a Tour</h1>
<a href="#page1" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
</div>
<div data-role="content">
<form id="booking-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="package">Package:</label>
<fieldset data-role="controlgroup">
<input type="radio" id="international-tour" name="package"
value="international">
<label for="international-tour">INTERNATIONAL TOURS (RM3000)</label>
<input type="radio" id="domestic-tour" name="package"
value="domestic">
<label for="domestic-tour">DOMESTIC TOURS (RM1500)</label>
</fieldset>
<label for="destination">Pick Destination:</label>
<select name="destination" id="destination" data-native-menu="false">
<option value="">Select Destination</option>
</select>
<label for="days">Days of Holiday:</label>
<input type="number" id="days" name="days" min="1">
<fieldset data-role="controlgroup">
<legend>Food Options: (per day)</legend>
<input type="checkbox" id="food-breakfast" name="food"
value="breakfast">
<label for="food-breakfast">Breakfast (RM50)</label>
<input type="checkbox" id="food-lunch" name="food" value="lunch">
<label for="food-lunch">Lunch (Rm150)</label>
<input type="checkbox" id="food-dinner" name="food" value="dinner">
<label for="food-dinner">Dinner (Rm150)</label>
</fieldset>
<button type="submit">Book Now</button>
</form>
</div>
<div data-role="footer" data-position="fixed">
<h4>© Setia Travel Agency</h4>
</div>
</div>
<script src="script1.js"></script>
</body>
</html>
CSS CODE :
/* Style for agency image */
img {
width: 40%;
height: 40%;
display: block;
margin: 0 auto;
}
/* Style for tour images */
.ui-content img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
max-width: 450px;
}
.member img {
width: 150px;
height: 100px;
}
.member h2,p { text-align:center;}
.member a {text-decoration:none;}
JAVASCRIPT CODE :
$(document).ready(function(){
// Define destination options for both international and domestic packages
var internationalDestinations = ["Japan", "Korea", "Indonesia", "Brunei", "Singapore", "Thailand"];
var domesticDestinations = ["Langkawi", "Tioman", "Kuching", "Ipoh", "Cameron", "Kapas"];
// Define cost per day for food options
var foodCostPerDay = {
breakfast: 50,
lunch: 150,
dinner: 150
};
// Event handler for radio button change
$("input[name='package']").change(function() {
var selectedPackage = $(this).val();
if (selectedPackage === "international") {
populateDestinations(internationalDestinations);
} else if (selectedPackage === "domestic") {
populateDestinations(domesticDestinations);
}
});
// Populate destination select options
function populateDestinations(destinations) {
var $destinationSelect = $("#destination");
$destinationSelect.empty(); // Clear previous options
$.each(destinations, function(index, destination) {
$destinationSelect.append("<option value='" + destination + "'>" + destination + "</option>");
});
$destinationSelect.selectmenu("refresh"); // Refresh the select menu styling
}
// Event handler for form submission
$("#booking-form").submit(function(event) {
event.preventDefault(); // Prevent default form submission
// Collect form data
var formData = {
name: $("#name").val(),
email: $("#email").val(),
package: $("input[name='package']:checked").val(),
destination: $("#destination").val(),
days: parseInt($("#days").val()), // Parse days as integer
food: [] // Initialize an array to store selected food options
};
// Collect selected food options
$("input[name='food']:checked").each(function() {
formData.food.push($(this).val());
});
// Calculate total cost
var totalCost = 0;
formData.food.forEach(function(option) {
totalCost += foodCostPerDay[option] * formData.days;
});
// Add cost of the selected tour package
if (formData.package === "international") {
totalCost += 3000;
} else if (formData.package === "domestic") {
totalCost += 1500;
}
// Display total cost
alert("Total Cost: RM " + totalCost + "\nName: " + formData.name + "\nEmail: " +
formData.email + "\nPackage: " + formData.package + "\nDestination: " + formData.destination +
"\nDays of Holiday: " + formData.days + "\n\nThank you for booking with us!");
});
});
OUTPUT DISPLAY :
i. MAIN PAGE
ii. ABOUT US PAGE
iii. TOUR PACKAGES PAGE
iv. BOOKING PAGE
v. ALERT MESSAGE AFTER BOOKING
RUBRIC FOR PROJECT
(CLO1, P4)
CRITERIA (Excellent) (Good) (Fair) (Poor) Weightage Standard Score
4 Marks 3 Marks 2 Marks 1 Marks (%)
Javascript At least 4 JavaScript More than 1 At least one No JavaScript
items are well JavaScript items JavaScript item is items are present 40 Score /4 * /4
presented are well well presented 40
presented but
less than 4
jQuery Mobile Very clear evidence Clear evidence in Less clear No evidence in
in developing a developing a evidence in developing a 40 Score /4 * /4
mobile web by mobile web by developing a mobile web 40
including 5-6 the including 3 - 4 mobile web by without including
required jQuery the required including 1-2 the any jQuery Mobile
Mobile Elements. jQuery Mobile required jQuery Elements.
Elements. Mobile Elements.
Resources Apply syntax for Use the syntax Use syntax for Use syntax for
Hosting resource hosting for resource less appropriate resource hosting 20 Score /4 * /4
very precisely. The hosting resource hosting. incorrectly. The 20
mobile web display appropriately. The mobile web mobile web does
output very clearly The mobile web does not display not display output
and meets all display output output clearly correctly and
display clearly and meets and meets many does not meet
specifications. most display display most display
specifications. specifications. specifications.
TOTAL SCORE 100
