Skill Task 2

South Australian Certificate of Education
International
Digital Technologies
Skill Task 2: Design and Programming
Course code: S2DGT20
Course name: Digital Technologies
Student’s name: Tan Wan Sean
Student’s id: SAM20012

This is a digital solution for a student to view and track his or her payment. I have used
HTML, Javascript , CSS and PHP to create this fees tracker. PHP is used to print the
receipt whereas javascript is used to calculate the balance and make other changes.
With this fees tracker, the management becomes free of trouble and now have a more
convenient solution. The program that I had chosen for this fees tracker is South
Australian Certificate of Education (SACE) in Disted. This fees tracker helps the
students to calculate the total fees they have to pay for the program and also deduct the
amount of the fees that have been paid which will result in the amount payable being
zero after all the necessary fees are paid.
First, you have to select either the local student or the international student. Next, you
have to choose the intakes: January Intake, March Intake and August Intake, and select
either Semester 1 or Semester 2.
For semester 1, you have to pay all the fees required along with the additional fees.
After you have ticked all the checkbox, you will then have to pick whether you are
funded by a scholarship or have received any rebates for the following semester.
For semester 2, you only have to pay for the resource fees and tuition fees. Therefore,
when u select semester 2, the checkbox for the fees other than resource fees and
tuition fees will be disabled.
After selecting yes, a column will pop out for you to enter the amount that have received
for your scholarship amount. However,if you select no for both the scholarships and the
rebates, the column for you to fill in the amount will be hidden .
Every time u tick a checkbox, every time u click a radio button, the balance is
calculated, no matter which checkbox u click or which radio button u click, it will
recalculate the balance based on every fields.
The total payable will be $0 if you tick all the checkbox for the fees which means you
have already paid all your fees.
If you didn’t fill in your name/ email / student ID / address/phone number and press
submit, there will be a default html validation.
After you press submit, you will be redirected to the page : form.php which shows your
receipt. Your receipt , contact details , scholarship, rebate deduction, required payment,
and total payable will be included in this recceipt.
Below is the code for the digital solution:
<!DOCTYPE html>
<html>
<head>
<title>Fees Payment Program for Disted Collge</title>
<style>
#form{
display: flex;
flex-direction: column;
align-items: center;
}
fieldset{
display: flex;
width:50%;
}
.info-slip-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.payment-slip-main-container{
display: flex;
width: 100%;
}
.payment-slip-container{
width: 80%;
display: flex;
justify-content: space-around;
}
.contact-details-container{
display: flex;
width: 100%;
}
.scholarship-container,
.rebate-container {
height: auto;
overflow: hidden;
max-height: 20px;
transition: max-height 0.5s ease-in;
}
.button-container{
display: flex;
width :10%;
justify-content: space-between;
}
</style>
</head>
<body>
<form action="./form.php" method="POST" id="form" enctype="multipart/form-
data">
<fieldset>
<legend>South Australian Certificate of Education in Disted</legend>
<div class="info-slip-container">
<div class="info-slip-header">
<div class="student-container">
<h4>Where are you from?</h4>
<label for="localStudent">
<input type="radio" name="placeOfOrigin" id="localSt
udent" value="Local Student" checked>
Local Student
</label>

<br>

<label for="InternationalStudent">
<input type="radio" name="placeOfOrigin" id="interna
tionalStudent"
value="International Student">
International Student
</label>

</div>

<div class="intake-container">
<h4>Intakes</h4>
<select name='intake' required>
<option value="">Select Intakes</option>
<option value="January">January Intake </option>
<option value="March">March Intake </option>
<option value="August">August Intake </option>
</select>
</div>

<div class="semester-container">
<h4>Select semester</h4>
<select name="semester" id="semester" required>
<option value="">Select Semester</option>
<option value="1">Semester 1</option>
<option value="2">Semester 2</option>
</select>
</div>
</div>
<div class="fees-container">
<h4>Fees required</h4>
<input type="checkbox" class="fees" name="applicationFee" id
="applicationFee" value=100>
<label for="applicationFee">Application Fees ($100) </label>
<br>
<input type="checkbox" class="fees" name="registrationFee" i
d="registrationFee" value=300>
<label for="registrationFee">Registration Fees ($300) </labe
l>
<br>
<input type="checkbox" class="fees" name="cautionFee" id="ca
utionFee" value=650>
<label for="cautionFee">Caution Fees ($650) </label>
<br>
<input type="checkbox" class="fees" name="resourceFee" id="r
esourceFee" value=350>
<label for="resourceFee">Resource Fees ($350) </label>
<br>
<input type="checkbox" class="fees" name="tuitionFee" id="tu
itionFee" value=8730>
<label for="tuitionFees">Tuition Fees ($8730)</label>
<br>
<h4>Additional Fees</h4>
<input type="checkbox" class="fees" name="labFee" id="labFee
" value=300>
<label for="labFee">Lab Fees ($300) </label>
<br>
<input type="checkbox" class="fees" name="externalExamFee" i
d="externalExamFee" value=3250>
<label for="externalExamFees">External Exam Fees ($3250) </l
abel>
</div>
<br>
<div class="scholarship-rebate-container">
<h4>Any scholarships?</h4>
<div class="scholarship-container">
<input type="radio" class="scholarshipRadio" name="schol
arship" id="scholarshipYes"
value="yes">Yes
<input type="radio" class="scholarshipRadio" name="schol
arship" id="scholarshipNo" value="no"
checked>No
<br>
<br>
<input type="number" name="scholarshipAmount" id="schola
rshipAmount"
placeholder="Scholarship Amount">
</div>
<h4>Any rebates?</h4>
<div class="rebate-container">
<input type="radio" class="rebateRadio" name="rebates" i
d="rebateYes" value="yes">Yes
<input type="radio" class="rebateRadio" name="rebates" i
d="rebateNo" value="no" checked>No
<br>
<br>
<input type="text" name="rebateAmount" id="rebateAmount"
placeholder="Rebate Amount">
</div>
<h4>Total Balance : $<span class="balance">0</span></h4>
</div>
</div>
</fieldset>
<fieldset>
<legend>Payment Slip</legend>
<div class="payment-slip-main-container">
<div class="payment-slip-container">
<div class="paid-fees">
<h4>Fees Paid</h4>
<input type="checkbox" class="feesPaid" name="applicatio
nFeePaid" id="applicationFeePaid" value=100>
<label for="applicationFeePaid">Application Fees ($100)
</label>

<br>

<input type="checkbox" class="feesPaid" name="registrati
onFeePaid" id="registrationFeePaid" value=300>
<label for="registrationFeePaid">Registration Fees ($300
) </label>

<br>

<input type="checkbox" class="feesPaid" name="cautionFee
Paid" id="cautionFeePaid" value=650>
<label for="cautionFeePaid">Caution Fees ($650) </label>

<br>

<input type="checkbox" class="feesPaid" name="resourceFe
ePaid" id="resourceFeePaid" value=350>
<label for="resourceFeePaid">Resource Fees ($350) </labe
l>

<br>

<input type="checkbox" class="feesPaid" name="tuitionFee
Paid" id="tuitionFeePaid" value=8730>
<label for="tuitionFeePaid">Tuition Fees ($<span id="upd
ateTuitionFee">8730</span>)</label>
</div>

<br>

<div class="addition-paid-fees">
<h4>Additional Fees</h4>
<input type="checkbox" class="feesPaid" name="labFeePaid" id
="labFeePaid" value=300>
<label for="labFeePaid">Lab Fees ($300) </label>

<br>

<input type="checkbox" class="feesPaid" name="externalExamFe
ePaid" id="externalExamFeePaid" value=3250>
<label for="externalexamFeePaid">External Exam Fees ($3250)
</label>
</div>
</div>

<h4>Total Payable : $<span class="paid-balance">0</span></h4>
</div>
</fieldset>
<fieldset>
<legend>Contact Details</legend>
<div class="contact-details-container">
<label for='name'>Name*</label>
<input type="text" id="name" name='name' required />
<br />
<label for='email'>Email*</label>
<input type="text" id="email" name='email' required />
<br />
<label for='student ID'>Student ID</label>
<input type="text" id="studentID" name='studentID' required />
<br />
<label for='address'>Address</label>
<input type="text" id="address" name='address' required />
<br />
<label for='phonenumber'>Phone Number</label>
<input type="text" id="phonenumber" name='phoneNumber' required />
<br />
</div>
</fieldset>
<br>
<div class="button-container">
<input type='submit' id='submit' value='Submit' />
<input type='reset' id='reset' value='Reset' />
</div>
<br>
<br>
</form>
</body>
<script>
let balance = 0,
paidBalance = 0;
const tuitionFee = document.getElementById('tuitionFeePaid');
const feesCheckbox = document.querySelectorAll('.fees');
const paidFeesCheckbox = document.querySelectorAll('.feesPaid');
const rebateRadio = document.querySelectorAll('.rebateRadio');
const scholarshipRadio = document.querySelectorAll('.scholarshipRadio');
const updateTuitionFee = document.getElementById('updateTuitionFee');
window.onload = e => {
updateBalance();
document.querySelector('.paid-balance').innerHTML = 0;

paidFeesCheckbox.forEach(fees => {
fees.disabled = true;
fees.addEventListener('change', () => {
updatePaidBalance();
})
})
feesCheckbox.forEach(fees => {
fees.addEventListener('change', () => {
updateBalance();
const correspondingFee = `${fees.id}Paid`;
document.getElementById(correspondingFee).disabled = false;
})
})
const semester = document.getElementById('semester');
semester.addEventListener('change', ({
target: {
value
}
}) => {
let fees = Array.from(feesCheckbox);
let paidFees = Array.from(paidFeesCheckbox);
switch (value) {
case '1':
fees.map(fee => fee.disabled = false)
paidFees.map(fee => fee.disabled = true)
break;
case '2':
let enabledFees = ['resourceFee', 'tuitionFee'];
fees.filter(fee => {
if (!enabledFees.includes(fee.id)) {
fee.disabled = true;
}
})
let enabledPaidFees = enabledFees.map(fees => fees + 'Paid')
;
paidFees.filter(fee => {
if (!enabledPaidFees.includes(fee.id)) {
fee.disabled = true;
}
})
break;
}
})
const scholarshipContainer = document.querySelector('.scholarship-
container');
const scholarshipAmount = document.getElementById('scholarshipAmount');
scholarshipRadio.forEach(scholarship => {
scholarship.addEventListener('change', ({
target: {
value
}
}) => {
let maxHeight;
showHide(value, scholarshipContainer);
updateBalance();
})
})
scholarshipAmount.addEventListener('blur', () => {
updateBalance();
})
const rebateContainer = document.querySelector('.rebate-container');
const rebateAmount = document.getElementById('rebateAmount');
rebateRadio.forEach(rebate => {
rebate.addEventListener('change', ({
target: {
value
}
}) => {
let maxHeight;
showHide(value, rebateContainer);
updateBalance();
})
})
rebateAmount.addEventListener('blur', () => {
updateBalance();
})
}
showHide = (value, element) => {
let maxHeight;
if (value == 'yes') {
maxHeight = '100px';
} else {
maxHeight = '20px';
}
element.style.maxHeight = maxHeight;
}
checkScholarshipUpdate = () => {
let scholarship = Array.from(scholarshipRadio);
let scholarshipChecked = scholarship.filter(scholarship => {
if (scholarship.checked) {
return scholarship;
}
});
let scholarshipValue = parseInt(scholarshipAmount.value);
if (scholarshipChecked[0].value == 'yes' && !isNaN(scholarshipValue)) {
balance -= scholarshipValue;
}
}
checkRebateUpdate = () => {
let rebate = Array.from(rebateRadio);
let rebateChecked = rebate.filter(rebate => {
if (rebate.checked) {
return rebate;
}
});
let rebateValue = parseInt(rebateAmount.value);
const rebateCheckedValue = rebateChecked[0].value;
if (rebateCheckedValue == 'yes' && !isNaN(rebateValue)) {
balance -= rebateValue;
}
}
updateBalance = () => {
balance = 0;
let fees = Array.from(feesCheckbox);
balance = fees.filter(fee => {
if (fee.checked) {
return fee;
}
}).map(fee => {
return parseInt(fee.value);
}).reduce((acc, cur) => {
return acc + cur;
}, 0);
checkScholarshipUpdate();
checkRebateUpdate();
if (balance <= 0) {
balance = 0;
}
document.querySelector('.balance').innerHTML = balance;
}
updatePaidBalance = () => {
paidBalance = 0;
let paidFees = Array.from(paidFeesCheckbox);
paidBalance = paidFees.filter(fee => {
if (!fee.checked && !fee.disabled) {
return fee;
}
}).map(fee => {
return parseInt(fee.value);
}).reduce((acc, cur) => {
return acc + cur;
}, 0);
document.querySelector('.paid-balance').innerHTML = paidBalance;
}
</script>
</html>
PHP code:
<?php
date_default_timezone_set('Asia/Kuala_Lumpur');
$name = is("name");
$email = is("email");
$studentID = is("studentID");
$address = is("address");
$phoneNumber = is("phoneNumber");
$placeOfOrigin = is("placeOfOrigin");
$intake = is("intake");
$semester = is("semester");
$applicationFee = is("applicationFee");
$registrationFee = is("registrationFee");
$cautionFee = is("cautionFee");
$resourceFee = is("resourceFee");
$tuitionFee = is("tuitionFee");
$labFee = is("labFee");
$externalExamFee = is("externalExamFee");
$scholarship = is("scholarship");
$rebate = is("rebate");
$scholarshipAmount = is("scholarshipAmount");
$rebateAmount = is("rebateAmount");
$applicationFeePaid = is("applicationFeePaid");
$registrationFeePaid = is("registrationFeePaid");
$cautionFeePaid = is("cautionFeePaid");
$resourceFeePaid = is("resourceFeePaid");
$tuitionFeePaid = is("tuitionFeePaid");
$labFeePaid = is("labFeePaid");
$externalExamFeePaid = is("externalExamFeePaid");
$total = $applicationFee + $registrationFee + $cautionFee + $resourceFee + $tuit
ionFee + $labFee + $externalExamFee;
$paid =$applicationFeePaid + $registrationFeePaid + $cautionFeePaid + $resourceF
eePaid + $tuitionFeePaid + $labFeePaid + $externalExamFeePaid;
$totalPayable = $total - $paid;
$html = "
<h1>$name's Receipt</h1>
<h3>Receipt generated at ".date("d-m-y H:i:s")."</h3>
Student Name : $name<br>
StudentID : $studentID<br>
Email : $email<br>
Contact Number : $phoneNumber<br>
Billing Address : $address<br>
<h4>Semester $semester, $intake Intake</h4>
Application Fee : $applicationFee<br>
Registration Fee : $registrationFee<br>
Caution Fee : $cautionFee<br>
Resource Fee : $resourceFee<br>
Tuition Fee : $tuitionFee<br>
Lab Fee : $labFee<br>
External Exam Fee : $externalExamFee<br>
";
if($scholarship == "yes"){
$html .= "
<h4>Scholarship Deduction: $scholarshipAmount</h4><br>
";
}
if($rebate == "yes"){
$html .= "
<h4>Rebate Deduction : $rebateAmount</h4><br>
";
}
$html .= "
<h4>Required payment : $$total</h4><br>
<h3>Fees Paid</h3>
Application Fee : $applicationFeePaid<br>
Registration Fee : $registrationFeePaid<br>
Caution Fee : $cautionFeePaid<br>
Resource Fee : $resourceFeePaid<br>
Tuition Fee : $tuitionFeePaid<br>
Lab Fee : $labFeePaid<br>
External Exam Fee : $externalExamFeePaid<br>
<h4>Paid Fees : $paid</h4>
<h4>Total Payable : $totalPayable</h4>
";
echo $html;
function is($variable) {
if(isset($_POST[$variable])){
return $_POST[$variable];
}
return "0";
}
?>
Flowchart:
Validation:

Skill Task 2

Uploaded by

Copyright:

Available Formats

You might also like

Skill Task 2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Skill Task 2

Uploaded by

Copyright:

Available Formats

South Australian Certificate of Education

Skill Task 2: Design and Programming

Course code: S2DGT20

Course name: Digital Technologies

Student’s name: Tan Wan Sean

Student’s id: SAM20012

You might also like