0% found this document useful (0 votes)

22 views13 pages

PROJECT2

The document describes a project to develop a mobile web application for a travel agency. Students will work in groups to build the application using HTML, CSS, JavaScript and jQuery Mobile. It will include pages for the home, about, tour packages and booking sections. The application will be evaluated based on its use of JavaScript, jQuery Mobile and resource hosting.

Uploaded by

Ariesya Syafika

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

22 views13 pages

PROJECT2

Uploaded by

Ariesya Syafika

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 13

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>

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

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

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

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

<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">

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

<div data-role="header">
<h1>DOMESTIC</h1>
</div>
<div data-role="navbar">

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

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