ASSIGNMENT/ TUGASAN

_________________________________________________________________________

CBWP2203

WEB PROGRAMMING

PENGATURCARAAN WEB

JANUARY 2023

_________________________________________________________________________

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 files. (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: 13 MARCH 2023.

Tarikh penghantaran: 13 MAC 2023.

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

You have been appointed as a consultant to develop a website for the new upcoming International Conference which will be held in 2023. The website’s

objective is to promote the event for the potential participants to get information such as the date, theme, venue, program activities, conference fees,

transportation to the place and the sponsorship for the event.

The following tasks are required for the website development:

a.
Suggest any attractive title for the conference which will be the title 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 ONE page to describe your information as a developer of the website, such as experience, address, contact number and other relevant

information.
e.
The website should also have ONE Visitors Page that provides an enquiry form for visitors to find out more about the conference. 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 question about the conference as shown in 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 to sample in Figure 3).

Figure 3: Sample Alert / Rajah 3: Contoh ‘Alert’

[20]
TUGAS 1 (PEMBANGUNAN TAPAK WEB)

SOALAN 1

Anda telah dilantik sebagai perunding untuk membangunkan tapak web bagi Persidangan Antarabangsa yang baharu akan datang yang bakal diadakan pada

tahun 2023. Objektif laman web adalah untuk mempromosikan acara tersebut kepada bakal peserta untuk mendapatkan maklumat seperti tarikh, tema,

tempat, aktiviti program, yuran persidangan, pemindahan ke tempat dan tajaan untuk acara tersebut.

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

a. Cadangkan sebarang tajuk menarik persidangan yang akan menjadi tajuk untuk laman web.

b. Susunkan maklumat yang dipaparkan dengan menggunakan susun atur jadual.

c. Gunakan grafik atau imej, warna, teks dan fon yang sesuai.

d. Sediakan SATU halaman yang menghuraikan maklumat anda sebagai pembangun tapak web tersebut seperti pengalaman, alamat, nombor telefon

dan maklumat lain yang bersesuaian.

e. Tapak web tersebut perlu juga mempunyai SATU Laman Pelawat yang menyediakan borang pertanyaan untuk pelawat mendapatkan maklumat

lanjut berkenaan persidangan tersebut. Laman ini akan dihubungkan dengan Borang Pelawat dalam SOALAN 2.

f. Bangunkan tapak web menggunakan HTML dengan mempunyai sekurang-kurangnya 5-7 halaman.

SOALAN 2

Gunakan HTML dan JavaScript untuk mencipta borang pertanyaan dalam talian untuk membenarkan pengunjung menghantar sebarang soalan tentang

persidangan tersebut 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 kepada 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 features that make a website attractive to visitors?

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 yang menjadikan sesebuah tapak web menarik kepada pelawat.

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

Rubrics for TASK 1

QUESTION 1

CBWP2203 WEB PROGRAMMING / JANUARY 2023

Excellent/ Cemerlang Good/Baik Fair/Sederhana Poor/Lemah Unsatisfactory/ Tidak memuaskan

*QN/ *NS CLO Criteria/Kriteria Weightage/ Pemberat Max Marks
4 3 2 1 0

Completion for task: Web Element The task was implemented Most tasks were Moderate implementation of the Implemented only a small chunk No implementation of the tasks
● Suggestion of web site name successfully implemented correctly task correctly of this task
● The selection of appropriate 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 Web Arahan dilaksanakan dengan Kebanyakan arahan Pelaksanaan arahan yang Hanya sebahagian kecil arahan Tiada pelaksanaan arahan
1 2 ● Cadangan nama tapak web 2.0 cemerlang dilaksanakan dengan betul sederhana secara betul dilaksanakan 8.0

● Pemilihan maklumat yang 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 implemented Most tasks were Moderate implementation of the Implemented only a small chunk No implementation of the tasks
● Overall Layout successfully implemented correctly task correctly of this task
● Contents are organised on web 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 bentuk Web 2.0 Arahan dilaksanakan dengan Kebanyakan arahan Pelaksanaan arahan yang Hanya sebahagian kecil arahan Tiada pelaksanaan arahan 8.0
● Susun atur keseluruhan cemerlang dilaksanakan dengan betul sederhana secara betul dilaksanakan
● Kandungan tersusun pada 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 were very well Codes were organised Codes were organised in Codes were not well organised Wrong coding
● HTML elements and tags structured and creatively properly moderate manner
● Variable naming organised
● Indentation space
● Comment

1 2 1.0 4.0

Piawaian Kod Kod ditulis dengan sangat Kod disusun dengan baik Kod disusun dengan cara Kod tidak disusun dengan Pengekodan yang salah
● Elemen dan tag HTML berstruktur dan disusun sederhana sempurna
● Penamaan Pemboleh ubah dengan kreatif
● Jarak Indentasi
● Komen
 Runtime ● The program was The program was executed ● The program was executed ● The program was not The program could not be

executed with all the correct mostly with the correct but mostly with incorrect output executed due to errors executed at all

output output ● OR the program was ● OR the program was

● AND the program was executed with the correct output executed with the correct output

executed by fulfilling all the but the written coding did not but the written coding did not

requirements as stated in the fulfil few of the question’s fulfil all the question’s

question requirements requirements

Masa Larian ● Aturcara ini Aturcara ini dilaksanakan ● Aturcara ini dilaksanakan ● Aturcara ini tidak Aturcara tidak dapat dilaksanakan
1 2 1.0 4.0
dilaksanakan dengan semua dengan kebanyakan output tetapi kebanyakan output adalah dilaksanakan disebabkan ralat langsung

output yang betul yang betul salah ● ATAU aturcara ini

● DAN aturcara ini ● ATAU aturcara ini dilaksanakan dengan output yang

dilaksanakan dengan dilaksanakan dengan output yang betul tetapi kod ditulis tidak

memenuhi semua keperluan betul tetapi kodnya ditulis tanpa memenuhi kesemua keperluan

yang dinyatakan dalam memenuhi beberapa keperluan soalan

soalan soalan

Efficiency Solution is efficient, Solution is efficient and easy A logical solution that is easy to A difficult and inefficient solution Wrong solution

understandable and easy to to follow follow but it is not the most

maintain efficient

1 2 1.0 4.0

Efisyen/kecekapan Penyelesaian adalah Penyelesaian adalah Penyelesaian logikal yang senang Penyelesaian yang sukar dan tidak Penyelesaian yang salah

berkesan, boleh difahami dan berkesan dan senang diikuti diikuti tetapi ianya bukanlah berkesan

senang diselenggara penyelesaian paling berkesan

Requirement of Documentation (Source Code Files & Excellent documentation and Good documentation Brief documentation with source Incomplete documentation & No documentation & source code

Document File. Document File has copy of codes, screenshots complete with source code together with source code code file without source code file file

of the program output and program comments) file file

1 2 0.5 2.0
Keperluan Dokumentasi Dokumentasi yang cemerlang Dokumentasi yang Dokumentasi yang ringkas Dokumentasi yang tidak lengkap Tiada dokumentasi dan fail kod

(Fail Kod Sumber & Fail Dokumen. Fail Dokumen dan lengkap dengan fail kod memuaskan bersama bersama dengan fail kod sumber dan tanpa fail kod sumber sumber

mengandungi salinan kod, imbasan skrin output aturcara dan sumber dengan fail kod sumber

komen aturcara)

TOTAL 7.5 30.0

 QUESTION 2
Excellent/ Cemerlang Good/Baik Fair/Sederhana Poor/Lemah Unsatisfactory/ Tidak memuaskan
*QN/ *NS CLO Criteria/Kriteria Weightage/ Pemberat Max Marks
4 3 2 1 0

Completion for task: Web Element & Design The task was implemented Most tasks were Moderate implementation of Implemented only a small chunk No implementation of the tasks
● Overall form design successfully implemented correctly the task correctly of this task
● Correct usage and arrangement of form

elements
● The selection of appropriate information to be

displayed on the form

Kesempurnaan bagi tugas: Elemen & Reka Bentuk Web Arahan dilaksanakan dengan Kebanyakan arahan Pelaksanaan arahan yang Hanya sebahagian kecil arahan Tiada pelaksanaan arahan
2 3 ● Reka bentuk borang secara keseluruhan 1.0 cemerlang dilaksanakan dengan betul sederhana secara betul dilaksanakan 4.0

● Penggunaan dan penyusunan elemen-elemen

borang yang tepat

● Pemilihan maklumat yang bersesuaian untuk

dipaparkan pada borang

Completion of task: Functionality The task was implemented Most tasks were Moderate implementation of Implemented only a small chunk No implementation of the tasks
● Correct output displayed successfully implemented correctly the task correctly of this task
● Call function JavaScript at suitable place.
● Both Submit and Reset button are functioning
● Validation function with JavaScript

2 3 ● The form is linked to the website from 1.0 4.0

QUESTION 1
 Kesempurnaan bagi tugas: Kefungsian Arahan dilaksanakan dengan Kebanyakan arahan Pelaksanaan arahan yang Hanya sebahagian kecil arahan Tiada pelaksanaan arahan
● Paparan output yang tepat cemerlang dilaksanakan dengan betul sederhana secara betul dilaksanakan
● Panggil fungsi JavaScript pada 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 were very well Codes were organised Codes were organised in Codes were not well organised Wrong coding
● HTML elements and tags structured and creatively properly moderate manner
● Variable naming organised
● Indentation space
● Comment

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

Runtime ● The program was The program was executed ● The program was executed ● The program was not The program could not be executed

executed with all the correct mostly with the correct but mostly with incorrect output executed due to errors at all

output output ● OR the program was ● OR the program was

● AND the program was executed with the correct executed with the correct output

executed by fulfilling all the output but the written coding but the written coding did not

requirements as stated in the did not fulfil few of the fulfil all the question’s

question question’s requirements requirements

2 3 1.0 4.0
 Masa Larian ● Aturcara ini Aturcara ini dilaksanakan ● Aturcara ini dilaksanakan ● Aturcara ini tidak Aturcara tidak dapat dilaksanakan

dilaksanakan dengan semua dengan kebanyakan output tetapi kebanyakan output dilaksanakan disebabkan ralat langsung

output yang betul yang betul adalah salah ● ATAU aturcara ini
● DAN aturcara ini ● ATAU aturcara ini dilaksanakan dengan output yang

dilaksanakan dengan dilaksanakan dengan output betul tetapi kod ditulis tidak

memenuhi semua keperluan yang betul tetapi kodnya ditulis memenuhi kesemua keperluan

yang dinyatakan dalam tanpa memenuhi beberapa soalan

soalan keperluan soalan

Efficiency Solution is efficient, Solution is efficient and easy A logical solution that is easy to A difficult and inefficient solution Wrong solution

understandable and easy to to follow follow but it is not the most

maintain efficient

2 3 1.0 4.0

Efisyen/kecekapan Penyelesaian adalah Penyelesaian adalah Penyelesaian logikal yang Penyelesaian yang sukar dan tidak Penyelesaian yang salah

berkesan, boleh difahami dan berkesan dan senang diikuti senang diikuti tetapi ianya berkesan

senang diselenggara bukanlah penyelesaian paling

berkesan

Requirement of Documentation (Source Code Files & Excellent documentation and Good documentation Brief documentation with source Incomplete documentation & No documentation & source code

Document File. Document File has copy of codes, screenshots complete with source code together with source code code file without source code file file

of the program output and program comments) file file

2 3 0.5 2.0
Keperluan Dokumentasi Dokumentasi yang cemerlang Dokumentasi yang Dokumentasi yang ringkas Dokumentasi yang tidak lengkap Tiada dokumentasi dan fail kod

(Fail Kod Sumber & Fail Dokumen. Fail Dokumen dan lengkap dengan fail kod memuaskan bersama bersama dengan fail kod sumber dan tanpa fail kod sumber sumber

mengandungi salinan kod, imbasan skrin output aturcara dan sumber dengan fail kod sumber

komen aturcara)

TOTAL 5.0 20

*QN = Question Number / *NS = Nombor Soalan

 Rubrics for TASK 2

Excellent/ Good/ Fair/ Poor/ Unsatisfactory/ Tidak

*QN/ Criteria/ Weight/ Max
Cemerlang Baik Sederhana Lemah memuaskan
CLO
*NS Kriteria Pemberat Marks
4 3 2 1 0

Quality of postings All five comments are good, Four of the comments are good, Two or three of the comments are One post submitted. No postings given as proof of

appropriate, relevant, meaningful, appropriate, relevant, meaningful, somewhat good, appropriate, OR participation in discussion

and respectful. and respectful. meaningful and respectful. None of the comments are good

and relevant.

OR

Comments are short responses that

are not substantial nor meaningful.

Minimum effort (e.g. “I agree with

3 2 1.5 Tina”) 6.0

Kualiti hantaran Kelima-lima komen baik, sesuai, Empat komen baik, sesuai, relevan, Dua atau tiga komen baik, sesuai, Satu penghantaran Tiada hantaran diberi sebagai

relevan, bermakna dan berhemah. bermakna dan berhemah. relevan,bermakna dan berhemah ATAU bukti penyertaan dalam

Tiada komen yang baik dan relevan. perbincangan

ATAU

Komen hanya respon yang ringkas

dan tidak meluas dan tidak

bermakna. Usaha minimum (Cth:

“Saya bersetuju dengan Tina”)

Timeline of postings Postings reflect active Postings reflect participation Postings show relatively short All posts done in one day. Postings done past

participation within assignment within assignment timeline. participation time. assignment timeline.

timeline.
3 2 1.0 4.0
Tempoh hantaran Hantaran mencerminkan Hantaran mencerminkan Hantaran menunjukkan Semua penghantaran dibuat dalam Hantaran melepasi tempoh

penyertaan aktif sepanjang penyertaan sepanjang tempoh penyertaan dalam jangakamasa satu hari. tugasan.

tempoh tugasan. tugasan. yang singkat.

Total 2.5 10.0