ASSIGNMENT/ TUGASAN

_________________________________________________________________________
CBWP2203
WEB PROGRAMMING
 PENGATURCARAAN WEB
JANUARY 2024
_________________________________________________________________________

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: 11 Mac 2024.

Tarikh penghantaran: 11 Mac 2024.

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 develop a website and demonstrate your capability in
designing the web and implementing various scripting languages.

REQUIREMENT / ASSIGNMENT QUESTION

Task 1

You have been appointed as a consultant to develop a website for "Charity Run 2024" which will
be held at KLCC, Kuala Lumpur, on 3 rd March 2024. The website objective is to promote the event,
provide information for participants, and engage the general public. You have to develop the
website with the following minimum specifications:
 A home page with a suitable title
o Create an engaging home page with a captivating title that highlights the essence of the
Charity Run Event
 FIVE additional pages, with different titles and information as follows:
o Program Events
 Contain detailed information about the events, objectives, theme, and activities that
will happen during the event
o General Information
 Contain detailed information about how to reach the event venue, parking facilities,
transportation options, and any special entitlements for participants.
 Include information about event exhibitors, participants, partners, sponsors and etc
o Participation information
 Contain a comprehensive guide on how to participate in the charity run as a runner,
volunteer, or sponsor.
 Include clear rules, guidelines, and pricing information for participants, space rental or
sponsorship opportunities
o About Us
 Contain detailed information about the organiser, including the email and phone
number. You can also include links to Blog page, Facebook, Instagram and etc
o Inquiry / Visitor Form
 The website should also have ONE Visitors Page that provides an enquiry form for
visitors to find out more about the event. This page will be linked to the Visitor Form in
Task 2
 The structure of the web pages MUST be created using HTML or XHTML with appropriate
elements and attributes.
 You need to use appropriate design for your headings, paragraphs, images or videos, and links
between different pages.
 The web pages developed MUST have the following components:
o headings and paragraphs
o links and navigations
o images and objects
o tables
o form
Task 2
Use HTML and JavaScript to create an online registration form to allow visitors or participants to
post any questions or requests for additional information about the event, as shown in Figure 1
(Sample form). When the visitor clicks the “Submit” button, the output will be displayed as shown
in Figure 2 (Sample of data displayed).

Figure 1: Sample Form / Rajah 1: Contoh Borang

Figure 2: Sample of 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 or pop-up alert window to request that user enter
the values (refer to the sample in Figure 3).

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

[refer rubric for detail criteria and specification]
[Total/Jumlah: 60 marks/markah]

TUJUAN
Tujuan tugasan ini adalah untuk membangunkan tapak web dan menunjukkan kebolehan anda
dalam mereka bentuk tapak tersebut and melaksanakan pelbagai bahasa skrip.

SOALAN 1

Anda telah dilantik sebagai perunding untuk membangunkan tapak web bagi " Larian Amal 2024"
yang akan diadakan di KLCC, Kuala Lumpur, pada 3 Mac 2024. Objektif laman web adalah untuk
mempromosikan acara tersebut, memberi maklumat kepada peserta, dan melibatkan orang ramai.
Anda perlu membangunkan tapak web dengan spesifikasi minimum berikut:

 Sebuah laman dengan tajuk yang sesuai

o Hasilkan halaman utama dengan tajuk yang menarik yang menyerlahkan intipati Acara Larian
Amal tersebut
 LIMA laman tambahan dengan tajuk dan maklumat yang berbeza seperti berikut:
o Acara Program
 Mengandungi maklumat lengkap berkenaan acara, objektif, tema, aktiviti-aktiviti yang
akan berlangsung sepanjang acara tersebut
o Maklumat Umum
 Mengandungi maklumat lengkap tentang bagaimana untuk sampai ke tempat acara,
kemudahan tempat letak kereta, pilihan pengangkutan dan sebarang kelayakan khas
untuk peserta
 Sertakan maklumat tentang pempamer acara, peserta, rakan kongsi, penaja dan lain-
lain
o Maklumat Penyertaan
 Mengandungi panduan komprehensif tentang cara menyertai larian amal sebagai pelari,
sukarelawan, atau penaja.
 Sertakan peraturan, garis panduan dan maklumat harga yang jelas untuk peserta,
penyewaan ruang atau peluang penajaan
o Mengenai Kami
 Mengandungi maklumat lengkap mengenai penganjur termasuk nombor e-mel dan
telefon. Anda juga boleh memasukkan pautan-pautan ke laman Blog, Facebook,
Instagram, dan lain-lain
o Borang pertanyaan / pelawat
 Tapak web tersebut perlu juga mempunyai SATU Laman Pelawat yang menyediakan
borang pertanyaan untuk pelawat mendapatkan maklumat lanjut berkenaan acara
tersebut. Laman ini akan dihubungkan dengan Borang Pelawat dalam TUGAS 2
 Struktur laman web MESTI dibangun menggunakan HTML dan XHTML dengan elemen-elemen
dan atribut-atribut yang sesuai
 Anda perlu menggunakan reka bentuk yang sesuai bagi tajuk, perenggan, imej atau video, dan
pautan antara laman yang berbeza
 Laman web yang dibangunkan sekurang-kurangnya MESTI mempunyai komponen-komponen
berikut:
o tajuk dan perenggan
o pautan dan navigasi
o imej dan objek
o jadual
o borang
TUGAS 2

Gunakan HTML dan JavaScript untuk mencipta borang pendaftaran dalam talian bagi membenarkan
pengunjung mengemukakan soalan atau permintaan mereka untuk mendapatkan maklumat
tambahan mengenai acara 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 mengisi setiap medan yang diperlukan dalam borang pertanyaan tersebut.
Sekiranya borang tersebut tidak menerima sebarang input, anda perlu menggunakan tetingkap
timbul ‘alert’ untuk meminta pengguna memasukkan nilai tersebut (rujuk kepada contoh dalam
Rajah 3).

[rujuk rubrik untuk butiran kriteria dan spesifikasi]

Submission Procedure:
Online submission with MULTIPLE files (preferable in a zip file): Submit the cover page of your
assignment with your personal details together with your documents via myINSPIRE; which
contains:
- FILE 1 - Main file in .doc/.docx: Proposal, Screen shots and other explanations related to
the assignment.
- 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 satu 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.
- FAIL 2 - Fail Zip: Fail HTML dan semua fail imej yang berkaitan. Fail HTML adalah PENTING
untuk memastikan bahawa tapak 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 / JANUARY 2024

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
website
 All the pages developed meet
the site requirements

Kesempurnaan bagi tugas: Elemen Arahan Kebanyakan Pelaksanaan arahan Hanya sebahagian Tiada pelaksanaan
Web 2.0 dilaksanakan arahan yang sederhana kecil arahan arahan
1 2 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 laman
 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

1 2 Usage of correct HTML or XHTML 1.5 The task was Most tasks were Moderate Implemented only a No implementation 6.0
tags to define the structure of the implemented implemented implementation of small chunk of this of the tasks
web pages. successfully correctly the task correctly task
 Marked up elements consists
of an opening, contents and
closing tags.
 The opening tag carry
attributes and always written
as name value pairs.
 Suitable use of tags for
headings and paragraphs
 Penggunaan tag HTML atau XHTML Arahan Kebanyakan Pelaksanaan arahan Hanya sebahagian Tiada pelaksanaan
yang betul bagi menentukan dilaksanakan arahan yang sederhana kecil arahan arahan
struktur laman web. dengan dilaksanakan secara betul dilaksanakan
 Elemen marked up yang terdiri cemerlang dengan betul
daripada tag pembukaan, isi
kandungan dan tag penutup.
 Tag pembukaan mengandungi
sifat-sifat dan selalu ditulis
sebagai pasangan nama nilai.
 Penggunaan tag yang sesuai
bagi tajuk dan perenggan
Page Navigation The task was Most tasks were Moderate Implemented only a No implementation
 The <a> element describes implemented implemented implementation of small chunk of this of the tasks
which parts of the document successfully correctly the task correctly task
can link to which parts of other
documents so they also form
relationships between
different documents.
 Correct and complete
hyperlink: link between pages,
link to specific parts of a page,
link to other sites, link to send
email
Navigasi laman Arahan Kebanyakan Pelaksanaan arahan Hanya sebahagian Tiada pelaksanaan
 Elemen <a> menerangkan dilaksanakan arahan yang sederhana kecil arahan arahan
1 3 1.5 6.0
bahagian mana daripada dengan dilaksanakan secara betul dilaksanakan
dokumen boleh berpaut ke cemerlang dengan betul
bahagian dokumen yang lain-
lain ,supaya mereka juga
membentuk hubungan antara
dokumen-dokumen yang
berbeza.
 Pautan yang betul dan
sempurna: pautan antara
laman, pautan ke bahagian-
bahagian tertentu dalam laman
yang sama, pautan ke laman-
laman yang lain, pautan untuk
menghantar emel
Image Element: The task was Most tasks were Moderate Implemented only a No implementation
  Using <img /> elements and implemented implemented implementation of small chunk of this of the tasks
<object> elements to insert successfully correctly the task correctly task
the right kind of images into
the pages.
 Different types of image used
on the web
 Divide image into clickable
hotspots that turn different
parts of the image into
separate links
 Include video element

Elemen Imej: Arahan Kebanyakan Pelaksanaan arahan Hanya sebahagian Tiada pelaksanaan
 Menggunakan elemen < img /> dilaksanakan arahan yang sederhana kecil arahan arahan
dan elemen <object>untuk dengan dilaksanakan secara betul dilaksanakan
memasukkan jenis imej yang cemerlang dengan betul
4.0
1 2 betul ke dalam halaman. 1.0
 Jenis-jenis gambar yang
berbeza yang digunakan pada
web
 Membahagikan imej menjadi
hotspot yang boleh diklik dan
setiap pecahan imej yang
berbeza akan memberi pautan
ke bahagian yang berbeza
 Memasukkan Elemen video

1 2 Create a table in HTML using the 1.0 The task was Most tasks were Moderate Implemented only a No implementation 4.0
<table> element. implemented implemented implementation of small chunk of this of the tasks
 Introduce basic elements to successfully correctly the task correctly task
create tables
 Include advanced features of
tables such as captions,
headings, etc.

Mewujudkan jadual dalam HTML Arahan Kebanyakan Pelaksanaan arahan Hanya sebahagian Tiada pelaksanaan
dengan menggunakan elemen dilaksanakan arahan yang sederhana kecil arahan arahan
<table>. dengan dilaksanakan secara betul dilaksanakan
 Memperkenalkan elemen asas cemerlang dengan betul
 untuk mewujudkan jadual
 Memasukkan ciri-ciri canggih
pada jadual seperti caption,
heading, dan lain-lain.
Create an inquiry / visitor form The task was Most tasks were Moderate Implemented only a No implementation
using the <form> element 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
Mewujudkan satu borang Arahan Kebanyakan Pelaksanaan arahan Hanya sebahagian Tiada pelaksanaan
1 3 pertanyaan / borang pelawat 1.0 dilaksanakan arahan yang sederhana kecil arahan arahan 4.0
menggunakan elemen <form> dengan dilaksanakan secara betul dilaksanakan
 Reka bentuk borang secara cemerlang dengan betul
keseluruhan
 Penggunaan dan penyusunan
elemen-elemen borang yang
betul
 Pemilihan maklumat yang
bersesuaian untuk dipaparkan
pada borang

1 3 Functionality of inquiry / visitor The task was Most tasks were Moderate Implemented only a No implementation 4.0
form 1.0 implemented implemented implementation of small chunk of this of the tasks
 Correct output displayed successfully correctly the task correctly task
 Call function JavaScript (or any
scripting) at suitable place.
 Both Submit and Reset button
are functioning
 Validation function with
scripting
 The form is linked to the main
web
Kefungsian borang pertanyaan / Arahan Kebanyakan Pelaksanaan arahan Hanya sebahagian Tiada pelaksanaan
borang pelawat dilaksanakan arahan yang sederhana kecil arahan arahan
 Paparan output yang tepat dengan dilaksanakan secara betul dilaksanakan
 Panggil fungsi JavaScript (atau cemerlang dengan betul
mana-mana penskripan) pada
 tempat yang sesuai
 Kedua-dua butang Hantar dan
Reset berfungsi
 Fungsi pengesahan dengan
penskripan
 Borang ini dipautkan kepada
laman web utama

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 3 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 3 1.0 4.0
Efisyen/kecekapan Penyelesaian Penyelesaian Penyelesaian logikal Penyelesaian yang Penyelesaian yang
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 3 Keperluan Dokumentasi 1.0 Dokumentasi Dokumentasi Dokumentasi yang Dokumentasi yang Tiada dokumentasi 4.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 15.0 60.0

*QN = Question Number / *NS = Nombor Soalan