ASSIGNMENT/ TUGASAN

_________________________________________________________________________
CBWP2203
WEB PROGRAMMING/
PENGATURCARAAN WEB
SEPTEMBER 2022
_________________________________________________________________________

SPECIFIC INSTRUCTION / ARAHAN KHUSUS

1. Answer in ENGLISH or MALAY.

Jawab dalam BAHASA INGGERIS atau BAHASA MELAYU.

2. Submit your assignment ONCE only in MULTIPLE file. (preferable in zip file)
Hantar tugasan SEKALI sahaja dalam BEBERAPA fail. (digalakkan dalam bentuk zip file).

3. Submit your assignment ONLINE.

Tugasan ini dihantar secara DALAM TALIAN.

4. Submission date: 14 NOVEMBER 2022.

Tarikh penghantaran: 14 NOVEMBER 2022.

5. This assignment accounts for 60% of the total marks for the course.
Tugasan ini menyumbang sebanyak 60% dari jumlah markah kursus.
 ASSIGNMENT QUESTION

PURPOSE

The purpose of this assignment is to assess the learner’s knowledge and understanding
about basic web development and the practical aspect of creating online forms and
writing code using JavaScript.

Tujuan tugasan ini adalah untuk menilai pengetahuan dan pemahaman pelajar tentang asas
pembangunan web dan aspek praktikal untuk mencipta borang dalam talian dan menulis
kod menggunakan JavaScript.

REQUIREMENT / ASSIGNMENT QUESTION

TASK 1 (WEBSITE DEVELOPMENT)

QUESTION 1

The COVID-19 pandemic forced everyone to change the way they shop. The digital
economy boomed during this crisis as people embraced social distancing, they turned to
online shopping more than ever before. Even the transition to the endemic phase allows
many people to accept this new culture of norms.

Assume that you are one of the role players who offer small services such as wholesaling,
retailing or product services to end consumer. Develop a website to promote your product
or services that comply with procedures and practices in the new norms for your targeted
customer. This website is intended to ensure all the customers are aware of the current
situation.

The following tasks are required for the website development:

a. Suggest any attractive name for the website.
b. Organise the information presented by using the table layout.
c. Use appropriate graphics or images, colours, texts and fonts.
d. Provide your information as a developer of the web site, such as experience,
address, contact number and other relevant information.
e. The website should also have a Visitors Page that provides an enquiry form for
visitors to find out more about the product or services provided. This page will be
linked to the Visitor Form in QUESTION 2.
f. Develop the website using HTML by having at least 5-7 pages.
[30]
QUESTION 2

Use HTML and JavaScript to create an online enquiry form to allow the visitor to post any
enquiry about your product or services as shown in the Figure 1 (Sample form). When the
visitor clicks the “Submit” button, the output will be displayed as shown in the Figure 2
(Sample of data displayed).

Figure 1: Sample Form / Rajah 1: Contoh Borang

g.

Figure 2: Sample Data Displayed/ Rajah 2: Contoh Data Yang Dipaparkan

The visitors are needed to fill up each of the required fields in the enquiry form. If the
form does not receive any input, you need to use an alert to request the user to insert the
values (refer sample in Figure 3).

Figure 3: Sample Alert / Rajah 3: Contoh Alert

[20]
TUGAS 1 (PEMBANGUNAN TAPAK WEB)

SOALAN 1

Pandemik COVID-19 mendorong semua orang mengubah cara mereka berbelanja. Ekonomi
digital berkembang pesat semasa krisis ini apabila orang ramai mengamalkan penjarakan
sosial, mereka beralih kepada membeli-belah dalam talian lebih berbanding sebelumnya.
Malah peralihan kepada fasa endemic membolehkan ramai orang menerima budaya norma
baharu ini.

Andaikan anda adalah salah seorang berperanan yang menawarkan perkhidmatan kecil
seperti pemborongan, peruncitan atau perkhidmatan produk kepada pengguna akhir.
Bangunkan sebuah tapak web untuk mempromosikan produk atau perkhidmatan anda yang
mematuhi prosedur dan amalan dalam norma baharu untuk pelanggan sasaran anda. Tapak
web ini bertujuan bagi memastikan semua pelanggan peka dengan situasi semasa.

Berikut adalah tugas-tugas yang diperlukan untuk pembangunan tapak web:

a. Cadangkan sebarang nama yang menarik untuk tapak web tersebut.

b. Susunkan maklumat yang dipaparkan dengan menggunakan susun atur jadual.
c. Gunakan grafik atau imej, warna, teks dan fon yang sesuai.
d. Sediakan maklumat anda sebagai pembangun tapak web tersebut seperti
pengalaman, alamat, nombor telefon dan maklumat lain yang bersesuaian.
e. Tapak web tersebut perlu juga mempunyai Laman Pelawat yang menyediakan
borang pertanyaan untuk pelawat mendapatkan maklumat lanjut berkenaan produk
atau perkhidmatan yang disediakan. Laman ini akan dihubungkan dengan Borang
Pelawat dalam SOALAN 2.
f. Bangunkan tapak web menggunakan HTML dengan mempunyai sekurang-kurangnya
5-7 halaman.
Gunakan HTML dan JavaScript untuk mencipta borang pertanyaan dalam talian untuk
membenarkan pengunjung menghantar sebarang pertanyaan tentang produk atau
perkhidmatan anda seperti yang ditunjukkan dalam Rajah 1 (Contoh borang). Apabila
pengunjung klik butang “Submit”, output akan dipaparkan seperti yang ditunjukkan dalam
Rajah 2 (Contoh data yang dipaparkan).

Pengunjung perlu untuk mengisi setiap medan yang diperlukan dalam borang pertanyaan
tersebut. Sekiranya borang tersebut tidak menerima sebarang input, anda dikehendaki
menggunakan tetingkap ‘alert’ untuk meminta pengguna memasukkan nilai tersebut (rujuk
contoh dalam Rajah 3).

[ 50 marks / markah ]
TASK 2 (ONLINE CLASS PARTICIPATION)

Discuss the topic below in myINSPIRE forum, screenshot your discussion feedback and
paste it into your report together with DOCUMENTATION on TASK 1.

 In your opinion, what are the common website features to engage with e-
commerce user. Discuss your answer in myINSPIRE forum.

Your e-tutor will create a folder in the assignment discussion. Please leave your discussion
under that folder. Do not create another discussion folder to avoid confusion.

TUGAS 2 (PENYERTAAN KELAS DALAM TALIAN)

Bincangkan topik di bawah dalam forum myINSPIRE, tangkap skrin maklum balas
perbincangan anda dan tampalkannya ke dalam laporan anda bersama DOKUMENTASI pada
TUGAS 1.

 Pada pendapat anda, apakah ciri-ciri laman Web yang lazim untuk berhubung
dengan pengguna e-dagang. Bincangkan jawapan anda dalam forum myINSPIRE.

E-tutor anda akan mencipta folder dalam perbincangan tugasan. Sila tinggalkan
perbincangan anda di bawah folder tersebut. Jangan cipta folder perbincangan lain untuk
mengelakkan kekeliruan.

INSTRUCTIONS ON HOW TO SUBMIT PROOF OF ONLINE CLASS PARTICIPATION (10%)

Do the following:
1. Select the best FIVE (5) of YOUR postings from the forum discussion set up by your tutor.
2. Do screenshots of the postings and include them as images in your assignment.
3. The screenshots should be in image file (either in JPG or PNG format). Refer to the
sample of Screen Grab below
4. The screenshots should contain: Name, Title of the discussion, Day, Date and Time.

ARAHAN BAGI TATACARA PENGHANTARAN SEBAGAI BUKTI AKTIVITI PENYERTAAN KELAS

DALAM TALIAN (10%)

Laksanakan perkara berikut:

1. Pilih LIMA (5) hantaran ANDA yang terbaik daripada perbincangan forum yang
ditetapkan dalam tugasan.
2. Lakukan tangkap layar hantaran dan isikan dalam bentuk imej di dalam fail tugasan
anda.
3. Imej tangkap layar mesti dalam format imej (sama ada JPG atau PNG). Rujuk pada
contoh tangkap layar di bawah.
4. Tangkap layar mesti mengandungi nama, tajuk perbincangan, hari, tarikh dan masa
 [10 marks/markah]

[Total/Jumlah: 60 marks/markah]

Submission Procedure:
Online submission with MULTIPLE files (preferable in zip file): Submit the cover page of
your assignment with your personal details together with your documents via myINSPIRE;
which contains of:
- FILE 1 - Main file in .doc/.docx: Proposal, Screen shots and other explanation
related to the assignment in TASK 1 and 2.
- FILE 2 - Zip File: HTML files and all related image files. HTML files are IMPORTANT
to ensure that your website and web form can be tested by e-grader. If you do not
upload these files, e-grader will not be able to evaluate your work.

Prosedur Penyerahan:
Penyerahan dalam talian dengan BEBERAPA fail. (digalakkan dalam bentuk zip file): Hantar
halaman muka depan tugasan anda dengan butir-butir peribadi anda beserta dokumen anda
melalui myINSPIRE; yang mengandungi:
- FAIL 1 - Fail utama dalam .doc / .docx: Cadangan, tangkap layar dan penjelasan lain
yang berkaitan dengan tugasan dalam TUGAS 1 dan 2.
- FAIL 2 - Fail Zip: Fail HTML dan semua fail imej yang berkaitan. Fail HTML adalah
PENTING untuk memastikan bahawa laman web dan borang web anda boleh diuji
oleh e-grader. Jika anda tidak memuat naik fail-fail ini, e-grader tidak akan dapat
menilai kerja anda.

MUKA SURAT TAMAT / END OF PAGE

 ATTACHMENT
ASSIGNMENT RUBRICS
CBWP2203 WEB PROGRAMMING / SEPTEMBER 2022
Rubrics for TASK 1
QUESTION 1

Excellent/ Unsatisfactory/
*QN/ Good/Baik Fair/Sederhana Poor/Lemah
CLO Weightage/ Cemerlang Tidak memuaskan Max
*NS Criteria/Kriteria
Pemberat 4 3 2 1 0 Marks
Completion for task: Web Element The task was Most tasks were Moderate Implemented only a No implementation
 Suggestion of web site name implemented implemented implementation of small chunk of this of the tasks
 The selection of appropriate successfully correctly the task correctly task
information to be displayed on
web site
 All the pages developed meet
the site requirements
 There are 1 page linked to
QUESTION 2
Kesempurnaan bagi tugas: Elemen 2.0 Arahan Kebanyakan Pelaksanaan arahan Hanya sebahagian Tiada pelaksanaan
1 2 Web dilaksanakan arahan yang sederhana kecil arahan arahan 8.0
 Cadangan nama tapak web dengan dilaksanakan secara betul dilaksanakan
 Pemilihan maklumat yang cemerlang dengan betul
bersesuaian untuk dipaparkan
pada tapak web
 Kesemua laman yang
dibangunkan memenuhi
keperluan-keperluan tapak web
 Terdapat 1 laman dipautkan
kepada SOALAN 2
 Completion of task: Web Design The task was Most tasks were Moderate Implemented only a No implementation
 Overall Layout implemented implemented implementation of small chunk of this of the tasks
 Contents are organised on web successfully correctly the task correctly task
page – text, list and pictures
arrangement
 The use of appropriate font,
list, graphics, option menu,
table and form
 Colour selection
 Creativity elements
 Correct and complete
hyperlink

1 2 Kesempurnaan bagi tugas: Reka 2.0 Arahan Kebanyakan Pelaksanaan arahan Hanya sebahagian Tiada pelaksanaan 8.0
bentuk Web dilaksanakan arahan yang sederhana kecil arahan arahan
 Susun atur keseluruhan dengan dilaksanakan secara betul dilaksanakan
 Kandungan tersusun pada cemerlang dengan betul
laman web – penyusunan teks,
senarai dan gambar
 Penggunaan fon, senarai,
grafik, pilihan menu, jadual dan
borang yang bersesuaian
 Pemilihan warna
 Elemen kreativiti
 Pautan yang betul dan
sempurna

Coding Standards Codes written Codes were Codes were Codes were not Wrong coding
 HTML elements and tags were very well organised organised in well organised
 Variable naming structured and properly moderate manner
 Indentation space creatively
 Comment organised
1 2 1.0 4.0
Piawaian Kod Kod ditulis Kod disusun Kod disusun dengan Kod tidak disusun Pengekodan yang
 Elemen dan tag HTML dengan sangat dengan baik cara sederhana dengan sempurna salah
 Penamaan Pemboleh ubah berstruktur dan
 Jarak Indentasi disusun dengan
 Komen kreatif
1 2 Runtime 1.0  The program The program  The program  The program The program could 4.0
was executed was executed was executed was not not be executed at
 with all the mostly with the but mostly with executed due to all
correct correct output incorrect output errors
output  OR the program  OR the program
 AND the was executed was executed
program was with the correct with the correct
executed by output but the output but the
fulfilling all written coding written coding
the did not fulfil few did not fulfil all
requirements of the question’s the question’s
as stated in requirements requirements
the question

Masa Larian  Aturcara ini Aturcara ini  Aturcara ini  Aturcara ini tidak Aturcara tidak
dilaksanakan dilaksanakan dilaksanakan dilaksanakan dapat dilaksanakan
dengan dengan tetapi disebabkan ralat langsung
semua output kebanyakan kebanyakan  ATAU aturcara
yang betul output yang output adalah ini dilaksanakan
 DAN aturcara betul salah dengan output
ini  ATAU aturcara yang betul tetapi
dilaksanakan ini dilaksanakan kod ditulis tidak
dengan dengan output memenuhi
memenuhi yang betul tetapi kesemua
semua kodnya ditulis keperluan soalan
keperluan tanpa memenuhi
yang beberapa
dinyatakan keperluan soalan
dalam soalan

Efficiency Solution is Solution is A logical solution A difficult and Wrong solution

efficient, efficient and that is easy to inefficient solution
understandable easy to follow follow but it is not
and easy to the most efficient
maintain

1 2 Efisyen/kecekapan 1.0 Penyelesaian Penyelesaian Penyelesaian logikal Penyelesaian yang Penyelesaian yang 4.0
adalah berkesan, adalah berkesan yang senang diikuti sukar dan tidak salah
boleh difahami dan senang tetapi ianya berkesan
dan senang diikuti bukanlah
diselenggara penyelesaian paling
 berkesan

Requirement of Documentation Excellent Good Brief Incomplete No documentation

(Source Code Files & Document documentation documentation documentation documentation & & source code file
File. Document File has copy of and complete together with with source code without source
codes, screenshots of the program with source code source code file file code file
output and program comments) file

1 2 Keperluan Dokumentasi 0.5 Dokumentasi Dokumentasi Dokumentasi yang Dokumentasi yang Tiada dokumentasi 2.0
(Fail Kod Sumber & Fail Dokumen. yang cemerlang yang ringkas bersama tidak lengkap dan dan fail kod sumber
Fail Dokumen mengandungi salinan dan lengkap memuaskan dengan fail kod tanpa fail kod
kod, imbasan skrin output aturcara dengan fail kod bersama dengan sumber sumber
dan komen aturcara) sumber fail kod sumber

TOTAL 7.5 30.0

QUESTION 2

Excellent/ Unsatisfactory/
*QN/ Good/Baik Fair/Sederhana Poor/Lemah
CLO Weightage/ Cemerlang Tidak memuaskan Max
*NS Criteria/Kriteria
Pemberat 4 3 2 1 0 Marks
Completion for task: Web Element The task was Most tasks were Moderate Implemented only a No implementation
& Design implemented implemented implementation of small chunk of this of the tasks
 Overall form design successfully correctly the task correctly task
 Correct usage and
arrangement of form elements
 The selection of appropriate
information to be displayed on
the form

Kesempurnaan bagi tugas: Elemen 1.0 Arahan Kebanyakan Pelaksanaan Hanya sebahagian Tiada pelaksanaan
2 3 4.0
& Reka Bentuk Web dilaksanakan arahan arahan yang kecil arahan arahan
 Reka bentuk borang secara dengan dilaksanakan sederhana secara dilaksanakan
keseluruhan cemerlang dengan betul betul
 Penggunaan dan penyusunan
elemen-elemen borang yang
tepat
 Pemilihan maklumat yang
bersesuaian untuk dipaparkan
pada borang

Completion of task: Functionality The task was Most tasks were Moderate Implemented only a No implementation
 Correct output displayed implemented implemented implementation of small chunk of this of the tasks
 Call function JavaScript at successfully correctly the task correctly task
suitable place.
 Both Submit and Reset button
are functioning
 Validation function with
JavaScript
 The form is linked to the
website from QUESTION 1
2 3 1.0 4.0
Kesempurnaan bagi tugas: Arahan Kebanyakan Pelaksanaan Hanya sebahagian Tiada pelaksanaan
Kefungsian dilaksanakan arahan arahan yang kecil arahan arahan
 Paparan output yang tepat dengan dilaksanakan sederhana secara dilaksanakan
 Panggil fungsi JavaScript pada cemerlang dengan betul betul
 tempat yang sesuai
 Kedua-dua butang Hantar dan
Reset berfungsi
 Fungsi pengesahan dengan
JavaScript
 Borang ini dipautkan kepada
tapak web dari SOALAN 1

Coding Standards Codes written Codes were Codes were Codes were not Wrong coding
 HTML elements and tags were very well organised organised in well organised
 Variable naming structured and properly moderate manner
 Indentation space creatively
 Comment organised

2 3 0.5 2.0
Piawaian Kod Kod ditulis Kod disusun Kod disusun Kod tidak disusun Pengekodan yang
 Elemen dan tag HTML dengan sangat dengan baik dengan cara dengan sempurna salah
 Penamaan Pemboleh ubah berstruktur dan sederhana
 Jarak Indentasi disusun dengan
 Komen kreatif

Runtime  The program The program  The program  The program The program could
was executed was executed was executed was not not be executed at
with all the mostly with the but mostly with executed due to all
correct correct output incorrect errors
output output  OR the program
 AND the  OR the program was executed
program was was executed with the correct
executed by with the correct output but the
fulfilling all output but the written coding
the written coding did not fulfil all
requirements did not fulfil the question’s
as stated in few of the requirements
the question question’s
requirements

2 3 Masa Larian 1.0  Aturcara ini Aturcara ini  Aturcara ini  Aturcara ini tidak Aturcara tidak dapat 4.0
dilaksanakan dilaksanakan dilaksanakan dilaksanakan dilaksanakan
dengan dengan tetapi disebabkan ralat langsung
semua output kebanyakan kebanyakan  ATAU aturcara
yang betul output yang output adalah ini dilaksanakan
  DAN aturcara betul salah dengan output
ini  ATAU aturcara yang betul tetapi
dilaksanakan ini dilaksanakan kod ditulis tidak
dengan dengan output memenuhi
memenuhi yang betul kesemua
semua tetapi kodnya keperluan soalan
keperluan ditulis tanpa
yang memenuhi
dinyatakan beberapa
dalam soalan keperluan
soalan
Efficiency Solution is Solution is A logical solution A difficult and Wrong solution
efficient, efficient and that is easy to inefficient solution
understandable easy to follow follow but it is not
and easy to the most efficient
maintain

Efisyen/kecekapan Penyelesaian Penyelesaian Penyelesaian Penyelesaian yang Penyelesaian yang

2 3 1.0 4.0
adalah berkesan, adalah berkesan logikal yang sukar dan tidak salah
boleh difahami dan senang senang diikuti berkesan
dan senang diikuti tetapi ianya
diselenggara bukanlah
penyelesaian
paling berkesan

Requirement of Documentation Excellent Good Brief Incomplete No documentation &

(Source Code Files & Document documentation documentation documentation documentation & source code file
File. Document File has copy of and complete together with with source code without source
codes, screenshots of the program with source code source code file file code file
output and program comments) file

Keperluan Dokumentasi Dokumentasi Dokumentasi Dokumentasi yang Dokumentasi yang Tiada dokumentasi
(Fail Kod Sumber & Fail Dokumen. yang cemerlang yang ringkas bersama tidak lengkap dan dan fail kod sumber
2 3 Fail Dokumen mengandungi salinan 0.5 dan lengkap memuaskan dengan fail kod tanpa fail kod 2.0
kod, imbasan skrin output aturcara dengan fail kod bersama dengan sumber sumber
dan komen aturcara) sumber fail kod sumber

TOTAL 5.0 20
*QN = Question Number / *NS = Nombor Soalan
Rubrics for TASK 2

Excellent/ Good/ Fair/ Poor/ Unsatisfactory/

*QN/ Criteria/ Weight/ Cemerlang Baik Sederhana Lemah Tidak memuaskan Max
CLO
*NS Kriteria Pemberat Marks
4 3 2 1 0
3 3 Quality of postings 2.5 Two or three of the One post Postings done 10.0
comments are submitted. OR All past assignment
All five comments are Four of the somewhat good, posts done in one timeline.
good, appropriate, comments are good, appropriate, day. OR
relevant, meaningful, appropriate, meaningful and OR No postings given
and respectful. relevant, meaningful, respectful. None of the as proof of
and respectful. comments are participation in
Postings reflect Postings show good and discussion
active participation Postings reflect relatively short relevant.
within assignment participation within
participation time. OR
timeline. assignment timeline.
Comments are
short responses
that are not
substantial nor
meaningful.
Minimum effort
(e.g. “I agree with
Tina”)

Kualiti hantaran Kelima-lima komen Empat komen baik, Dua atau tiga Satu Postings melepasi
baik, sesuai, relevan, sesuai, relevan, komen baik, sesuai, penghantaran tempoh tugasan.
bermakna dan bermakna dan relevan,bermakna ATAU
berhemah. ATAU
berhemah. dan berhemah Semua Tiada Postings
penghantaran diberi sebagai
Postings
mencerminkan Postings Postings dibuat dalam satu bukti penyertaan
penyertaan aktif mencerminkan menunjukkan hari . dalam
sepanjang tempoh penyertaan penyertaan dalam ATAU perbincangan
tugasan. sepanjang tempoh jangakamasa yang Tiada komen yang
tugasan. singkat. baik dan relevan.
ATAU
 Komen hanya
respon yang
ringkas dan tidak
meluas dan tidak
bermakna.Usaha
minimum (Cth:
“Saya bersetuju
dengan Tina”)
Total 2.5 10.0