PENYERAHAN DAN PENILAIAN TUGASAN

ASSIGNMENT SUBMISSION AND ASSESSMENT

KOD KURSUS /COURSE CODE : CBWP2203
TAJUK KURSUS /COURSE TITLE : WEB PROGRAMMING

SEMESTER /SEMESTER : JANUARI/JANUARY 2011

ARAHAN KEPADA PELAJAR / INSTRUCTIONS TO STUDENTS

1. Tugasan ini mengandungi SATU (1) soalan sahaja yang disediakan dalam bahasa
modul bercetak kursus ini. / This assignment contains only ONE (1) question that is set
in the language of the printed module for the course.

2. Jawab dalam Bahasa Melayu atau Bahasa Inggeris. / Answer in Malay or English.

3. Muatturunkan templet tugasan versi bahasa yang berkenaan daripada MyVLE untuk
penyediaan dan penyerahan tugasan anda. Tugasan anda hendaklah ditaip dengan
menggunakan saiz fon 12 Times New Roman dan langkau baris 1.5. / Download the
language version of the assignment template concerned from the MyVLE for
preparation and submission of your assignment. Your assignment should be typed
using 12 point Times New Roman font and 1.5 line spacing.

4. Tugasan anda hendaklah antara 2500 hingga 3000 patah perkataan tidak termasuk
rujukan. Bilangan perkataan hendaklah ditunjukkan di hujung tugasan anda. Jangan
menyalin soalan dan arahan tugasan dalam jawapan anda. / Your assignment should be
between 2500 to 3000 words excluding references. The number of words should be
shown at the end of your assignment. Do not copy the assignment question and
instructions to your answer.

5. Anda dikehendaki menghantar tugasan SECARA ON-LINE melalui MyVLE. Sila rujuk
kepada portal untuk arahan mengenai prosedur menghantar tugasan anda secara on-
line. Anda dinasihatkan menyimpan senaskah tugasan yang diserahkan untuk rujukan
sendiri. / You must submit your assignment ON-LINE via the MyVLE. Refer to the portal
for instructions on the procedures to submit your assignment on-line. You are advised to
keep a copy of your submitted assignment for personal reference.

6. Anda hanya boleh menghantar tugasan SEKALI sahaja dalam SATU fail. / You can
submit your assignment ONCE only in a SINGLE file.

7. Tugasan anda hendaklah diserahkan antara 1 Mac 2011 hingga 7 Mac 2011. Serahan
selepas 7 Mac 2011 TIDAK akan diterima. / Your assignment must be submitted
between 1 March 2011 and 7 March 2011. Submission after 7 March 2011 will NOT be
accepted.

8. Tugasan hendaklah disiapkan secara individu. Anda dilarang meniru tugasan orang lain.
Anda juga dilarang sama sekali memplagiat kerja orang lain sebagai kerja sendiri. /
 Your assignment should be prepared individually. You should not copy another
person’s assignment. You should also not plagiarise another person’s work as
your own.

SOALAN TUGASAN /ASSIGNMENT QUESTION

SOALAN / QUESTION

In your module, topics on HTML has been prepared. Although HTML is still used up to
this day, World Wide Web Consortium (W3C) has introduced XHTML (EXtensible
HyperText Markup Language), namely an extension to HTML which gives cleaner and
stricter code.

a) Using XHTML standards, generate three main HTML coded files to create the
three-framed browser window shown in Figure 1 below, with MS Internet Explorer.

Figure 1

Name the HTML files in the following manner:

 Main entry file called assignment.html, does the frameset and initial HTML
file loading
 The top frame file should be called course_info.html
  The bottom right contains the working area, initially containing the file
display.html.
 The left side contains the navigation file, controls.html; and
 The two html files to replace the loaded display.html, when activated by one
of two button controls:
1. the HTML & JavaScript Example code files called htmljavascript.html
2. the VBScript Example code files called vbscript.html

COMPONENTS:-

 The calling html file (assignment.html) frames the browser into two rows at
about 20% (upper) and about 80% (lower) height and the lower frame into two
columns, set to approximately 25% and 75%, as shown in Figure 1.
 The upper frame is sourced with a file (course_info.html) that provides the
course name, semester, student name and matric number as illustrated in
Figure 1. The background colour is floral white, font is black, 14pt bold Tahoma
and an OUM logo;
 The lower left frame contains the file (controls.html) which provides three
command buttons on a sky blue background, separated by horizontal rules,
labeled as shown in Figure 1, and are implemented in either VBScript or
JavaScript (your choice):
o HTML & JavaScript Example – will display output from Question (b)
o VBScript Example - will display output from Question (c)
 The lower right frame is initially sourced with a file (display.html) that
provides the following notices, with the larger text coloured Blue, 20pt, bold,
Arial as a <H2> tag, on a lavender background, with each line centered in the
browser window space, as in Figure 1.

b) You are required to create an HTML form with appropriate JavaScript’s, where
user need to input their Name, Email Address and their requests, as shown in
Figure 2.
 Figure 2

Once the user key-in their name and email address, the Validate button will
validate if the email address entered is valid or not. Relevant pop-up message will
be displayed to alert the user that they have entered valid/not valid email address.

For the user request, they can choose any of the options, and when Process
button is clicked, a dialog box is displayed stating their choices, as shown in
Figure 3.

Figure 3
c) Write a VBscript to show a current date and time as the following Figure 4.
User can update the date and time by clicking Update Time button.

Figure 4

Items to be submitted:
1. All relevant HTML files.
2. Printout (*.doc) of all the HTML codes in HTML files in (1).

Important: Make sure your HTML codes follows XHTML standard by validating them at
http://validator.w3.org/.
Di dalam modul anda, topik berkaitan HTML telahpun disediakan. Walaupun HTML masih
digunapakai sehingga ke hari ini, World Wide Web Consortium (W3C) telah
memperkenalkan XHTML (EXtensible HyperText Markup Language), iaitu sambungan
kepada HTML yang memberikan kod yang lebih bersih dan terkawal.

a) Menggunakan piawaian XHTML, jana tiga kod HTML untuk mencipta bingkai tiga-
tingkap seperti Rajah 1 di bawah, untuk MS Internet Explorer.

Rajah 1

Namakan fail-fail HTML dalam cara yang berikut:

 Fail utama dinamakan assignment.html, yang mengandungi 'frameset' dan
HTML awal lain yang dimuatkan.
 Bingkai atas dinamakan course_info.html.
 Bingkai bawah kanan mengandungi kawasan kerja, yang mengandungi fail
display.html.
 Tiga fail html untuk menggantikan paparan display.html, apabila diaktifkan
oleh satu daripada tiga butang kawalan berikut:
i. kod fail HTML & JavaScript Example bernama htmljavascript.html.
ii. kod fail VBScript Example bernama vbscript.html
KOMPONEN-KOMPONEN :-
 Fail HTML pemanggil (assignment.html) membahagikan bingkai pelayar ke
dalam dua bahagian iaitu kira-kira 20% (atas) dan kira-kira 80% (bawah) dan
bahagian bawah dibahagikan kepada dua lajur, yang ditetapkan pada 25% dan
75%, seperti yang ditunjukkan dalam Rajah 1.
 Bingkai atas adalah bersumberkan fail (course_info.html) yang menyediakan
nama kursus, semester, nama pelajar dan nombor matrik seperti yang
ditunjukkan dalam Rajah 1. Warna latar belakang adalah biru, fon adalah hitam
iaitu 14pt Tahoma yang tebal (bold);
 Bingkai bawah kiri mengandungi fail (controls.html) yang menyediakan tiga
butang perintah yang berlatarbelakangkan warna 'lime', dipisahkan oleh garisan
mendatar, dilabelkan sepertimana yang ditunjuk dalam Rajah 1, dan
dilaksanakan sama ada menggunakan VBScript atau JavaScript (pilihan anda):
a. HTML & JavaScript Example – akan memaparkan output daripada
soalan (b)
b. VBScript Example - akan memaparkan output daripada soalan (c)
 Bingkai bahagian bawah kanan ada memaparkan fail (display.html) yang
menyediakan paparan teks dengan warna teks Biru, 20pt, tebal (bold), Arial
menggunakan tag <H2>. Ia berlatarbelakangkan warna biru kehijauan (cyan)
dengan setiap teks adalah disusun secara "centre", seperti pada Rajah 1.

b) Anda juga dikehendaki mencipta satu borang HTML berserta dengan kod JavaScript
yang sesuai, dimana pengguna perlu memasukkan nama, alamat emel dan
permintaan mereka, seperti yang ditunjukkan dalam Rajah 2.

Rajah 2
 Apabila pengguna memasukkan nama dan alamat e-mel mereka, butang Validate akan
mengesahkan sama ada e-mel yang mereka masukkan itu sah ataupun tidak. Mesej
pop-up yang sesuai akan terpapar untuk memberitahu pengguna bahawa mereka telah
memasukkan alamat e-mel yang tidak sah.

Untuk permintaan pengguna, mereka boleh memilih sebarang pilihan yang disediakan,
dan apabila butang Process ditekan, satu kotak dialog akan dipaparkan menyatakan
apa pilihan yang telah mereka buat, seperti yang ditunjukkan dalam Rajah 3.

Rajah 3

c) Tulis satu Vbscript bagi memaparkan tarikh dan waktu semasa seperti yang ditunjukkan
dalam Rajah 4. Pengguna boleh mengemaskini paparan tarikh dan waktu dengan
mengklik pada butang Update Time.

Rajah 4
 Perkara yang perlu dihantar:
3. Kesemua fail-fail HTML yang berkaitan.
4. Cetakan kod-kod HTML bagi kesemua fail-fail HTML dalam (1).

Penting: Pastikan kod-kod HTML anda menepati piawaian XHTML dengan

mengesahkannya di http://validator.w3.org/

___________________________________________________________________
PENILAIAN / EVALUATION
Tugasan ini akan menyumbangkan 30 % markah kepada kursus tersebut dan akan dinilai
berdasarkan kepada Rubrik yang mana diberikan dalam Lampiran. / This assignment
accounts for 30 % of the marks for the course mentioned and shall be assessed based on
the Rubrics where provided in the Attachment .

Anda akan dimaklumkan tentang markah tugasan ini sebelum Peperiksaan Akhir Semester
bermula / You would be informed of the assignment mark before the Final Semester
Examination commences.

PLAGIARISME : POTONGAN MARKAH / PLAGIARISM : MARKS DEDUCTION

Amaran : Tugasan yang diserahkan secara automatik akan disemak untuk persamaan.
Jika plagiarisme dikesan, markah akan dipotong seperti berikut: / Warning : The submitted
assignment will automatically undergo a similarity check. If plagiarism is detected, marks
would be deducted as follows:

 Tugasan dengan kandungan 10 - 30 % yang sama dengan lain: 20% potongan

daripada jumlah markah yang diperolehi.
 Tugasan melebihi kandungan 30 % yang sama dengan lain: Markah sifar akan
diberikan.
 Assignments with 10 - 30 % overlap with others : 20% deduction from the total marks
scored.
 Assignments with more than 30% overlap with others : Zero mark would be given

MUKA SURAT TAMAT / END OF PAGE

 LAMPIRAN / ATTACHMENT
RUBRIK TUGASAN / ASSIGNMENT RUBRICS

Criteria /
0 1 2 3 Weightage
Qualities
There is a There is a
There is a
frame but it frame and
frame, and it
There is no does not follows at
Frame follows 60% 1
frame created. follow the least 80% of
of the
requirements the
requirement.
. requirement.
The content
The content The content The content
Content of follows at
does not follows 40% follows 60%
course_info.h least 80% of 1. 5
follow the of the of the
tml the
requirements. requirements requirements
requirements
The content
The content The content The content
follows at
Content of does not follows 40% follows 60%
least 80% of 1. 5
display.html follow the of the of the
the
requirements. requirements requirements
requirements
The content
The content The content The content
follows at
Content of does not follows 40% follows 60%
least 80% of 1. 5
controls.html follow the of the of the
the
requirements. requirements requirements
requirements
Functionalitie The scripts The scripts
The scripts The scripts
s and content gives 60% of gives at least
does not give gives 40% of
of the scripts the required 80% of the 2.5
the required the required
(JavaScript output. required
output. output.
and VBscript) output.
All the HTML 2 of the 4 of the 6 of the
HXTML files are not HTML files HTML files HTML files
validated comply to comply to comply to comply to 1
codes XHTML XHTML XHTML XHTML
standard. standard. standard. standard.
Printout of Printout of 1 - Printout of 3 Printout of
Printout of
codes is not 2 codes is – 4 codes are ALL 6 codes 1
codes
submitted submitted. submitted is submitted.

[Total marks: 30 Marks]

Kriteria / Kualiti 0 1 2 3 Pemberat

Bingkai ada, Bingkai ada,

Bingkai ada
dan dan
tetapi tidak
Bingkai Tiada bingkai. memenuhi memenuhi 1
memenuhi
60% 80%
keperluan.
keperluan. keperluan.
Kandungan
Kandungan Kandungan memenuhi
Kandungan Kandungan memenuhi sekurang-
memenuhi
course_info.ht tidak memenuhi 60% kurangnya 1. 5
40%
ml keperluan. keperluan. 80%
keperluan.
keperluan.
Kandungan
Kandungan Kandungan memenuhi
Kandungan memenuhi sekurang-
Kandungan memenuhi
tidak memenuhi 60% kurangnya 1. 5
display.html 40%
keperluan. keperluan. 80%
keperluan.
keperluan.
Kandungan
Kandungan Kandungan memenuhi
Kandungan memenuhi sekurang-
Kandungan memenuhi
tidak memenuhi 60% kurangnya 1. 5
controls.html 40%
keperluan. keperluan. 80%
keperluan.
keperluan.
Skrip
Fungsi dan Skrip memberikan
Skrip tidak Skrip
kandungan memberikan sekurang-
memberikan memberikan
skrip 60% dari hasil kurangnya 2.5
hasil yang 40% dari hasil
(JavaScript yang 80% dari hasil
diperlukan. yang
and VBscript) diperlukan. yang
diperlukan.
diperlukan.
Kesemua fail 4 daripada fail 6 daripada fail
Kod yang 2 daripada fail
kod tidak kod mematuhi kod mematuhi
memenuhi kod mematuhi
mematuhi piawaian piawaian 1
piawaian piawaian
piawaian XHTML XHTML
HXTML XHTML
XHTML
Cetakan 1-2 Cetakan 3-4 Cetakan 5-6
Tiada cetakan fail kod fail kod
Cetakan kod fail kod 1
kod disertakan. disertakan.
disertakan.

Overall total marks= 30 ---> 30%

-- ASSIGNMENT QUESTION ENDS HERE --