UNIVERSITI TUN HUSSIEN ONN MALAYSIA

FAKULTI PENDIDIKAN TEKNIKAL DAN VOKASIONAL

BBU 40203

PENGATURCARAAN WEB

TUGASAN BERKUMPULAN

TAJUK : PEMBANGUNAN LAMAN WEB

NAMA & NO. MATRIK MEENALOSHINI A/P THANGARAJAN (DB180123)

KHAZANAH BINTI KHOZIL (DB180099)
NUR SYAKIRAH BT ABDUL SAMAD (DB180171)
SEKSYEN 01
NAMA PENSYARAH TS. DR. AFFERO BIN ISMAIL
 ISI KANDUNGAN

BIL KANDUNGAN MUKA SURAT

1 Pendahuluan 1

2 Kandungan 2

3 Perbincangan 12

4 Kesimpulan 31

5 Rujukan 24
1.0 Pendahuluan
Tugasan ini diberikan kepada para pelajar bertujuan untuk membantu mereka dalam
menghasilkan sebuah laman sesawang dengan menggunakan Bahasa Pengaturcaraan CSS dan
PHP. Pembangunan laman sesawang ini juga membantu para pelajar dalam mempelajari dan
memahami lebih lagi dalam setiap fungsi bahasa pengaturcaraan yang dihasilkan.
Kami telah membangunkan sebuah laman sesawang yang mempunyai beberapa halaman
antara muka yang mengandungi isi maklumat mengenai English Lesson bagi murid tahun satu
iaitu halaman antara muka home, notes, exam, student dan admin login. Di setiap halaman
antara muka yang telah kami bangunkan mengandungi maklumat ringkas mengenai English
Lesson bagi memudahkan para pelajar mengakses laman sesawang tersebut. Contohnya, kami
telah meletakkan video Learn English di bahagian home dan nota-nota pembelajaran di
bahagian nota yang mana para pelajar dapat mengetahui mengenai subjek ini serba sedikit
sebelum mengakses laman web ini dengan lebih terperinci.
Seterusnya, dalam membangunkan laman sesawang pembelajaran ini, kami telah
menggunakan perisian xampp dan Adobe Dreamweaver. Kami juga telah merujuk pautan –
pautan yang telah dibekalkan oleh pensyarah, laman sesawang pembelajaran seperti w3school
dan video tutorial di Youtube untuk membuat rujukan dalam kod pengaturcaraan PHP yang
bersesuaian dengan pembangunan laman sesawang yang ingin kami bangunkan seperti
mencipta header, jadual dan memasukkan pelbagai eleman lain seperti gambar, video serta
dokumen-dokumen yang berkenaan.
Pada masa yang sama, kami juga telah mempelajari cara – cara untuk memperkemaskan
lagi laman sesawang PHP kami dengan memasukkan beberapa kod pengaturcaraan yang
berkenaan dan bersesuaian di bahagian CSS. Dengan adanya kod pengaturcaraan CSS ini,
laman sesawang yang kami bangunkan kelihatan lebih kemas dan cantik pada pemandangan
mana – mana individu yang melihatnya.

1
2.0 Kandungan
Pembangunan laman sesawang ini dibangunkan menggunakan perisian Dream Weaver
manakala hasilnya akan dipaparkan pada web browser seperti laman sesawang Opera, Google
Chrome atau Microsoft Edge. Kandungan laman sesawang ini mempunyai beberapa elemen
multimedia seperti text, grafik dan sebagainya. Selain itu, kandungan laman sesawang ini juga
mempunyai beberapa halaman seperti score exam, admin login, carian maklumat pelajar, nota
dan sebagainya. Berikut merupakan antaramuka yang telah kumpulan kami gunakan semasa
pembangunan laman sesawang ini dijalankan dan akan menjadikan antara muka yang telah
diinginkan.

1. Bahagian index.php

Pada bahagian index ini mengandungi beberapa elemen antara muka di halaman
utama yang terbahagi kepada beberapa bahagian seperti header, navigation bar dan
kandungan utama. Pengenalan mengenai English Lesson telah kami ringkaskan dengan
meletakkan link video “Learn English” di paparan kandungan utama. Pada bahagian
navigation bar pula, kami telah membangunkan butang home, notes, exam, students, score
dan admin login. Di setiap bahagian tersebut, kami telah meletakkan pautan yang mana
jika mana – mana individu menekan pada pautan tersebut akan membawanya ke halaman
antaramuka yang mengandungi maklumat yang berkenaan. Di bahagian footer pula, kami
paparkan nama-nama bagi pembangun laman sesawang ini.

2
 Rajah 1.1: Antaramuka bagi Halaman Utama (index)

2. Bahagian login.php

Pada bahagian login ini adalah admin login form. Untuk masuk ke perisian
seterusnya, admin perlulah mengisi username dan password dengan betul. Di dalam antara
muka untuk laman web ini juga terdapat butang login. Ianya bagi memudahkan admin
untuk melihat segala maklumat berkenaan dengan pelajar dan memudahkan admin untuk
memantau laman sesawang ini. Antara antaramuka selepas berjaya mengisi admin login
form adalah create category, create exam, questionnare code, setting, report dan logout.
Di setiap bahagian tersebut, kami telah meletakkan pautan yang mana jika mana – mana
individu menekan pada pautan tersebut akan membawanya ke halaman antaramuka yang
mengandungi maklumat yang berkenaan

3
 Rajah 1.2: Antaramuka bagi Halaman Admin Login Form

3. Bahagian senarai paparan nota.php

Pada bahagian senarai paparan nota ini adalah bahagian paparan maklumat
berkaitan dengan nota. Ianya memudahkan pengguna untuk memuat turun nota pdf yang
ada di dalam laman ini mengikut subtopik yang diinginkan. Ianya bagi memudahkan
pengguna untuk melihat segala maklumat berkaitan dengan nota yang diberikan. Di dalam
antaramuka ini terdapat butang download untuk memuat turun nota-nota tersebut.

Rajah 1.3: Antaramuka bagi nota (notes)

4
4. Bahagian carian exam.php

Pada bahagian exam ini adalah bahagian untuk pelajar menjawab soalan-soalan
quiz. Sebelum menjawab quiz tersebut, pelajar perlulah memasukkan Student ID yang
betul dan questionnare code yang akan diberikan oleh guru. Jika kedua-dua input tersebut
betul dan sama dengan paparan pada database, pelajar akan dipaparkan ke halaman
seterusnya iaitu halaman soalan. Pada anataramuka soalan pula, mempunyai butang
pemilihan jawapan dan butang continue. Selesai menjawab soalan-soalan tersebut,
keputusan quiz tersebut akan dipaparkan termasuklah peratusan markah dan status pelajar
sama ada lulus mahupun gagal dalam quiz tersebut

Rajah 1.4: Antaramuka bagi exam (student login)

Rajah 1.5: Antaramuka bagi exam (question)

5
 Rajah 1.6: Antaramuka bagi exam (result)

5. Bahagian studentlist.php

Pada bahagian paparan pelajar ini adalah bahagian paparan maklumat pengguna.
Ibubapa dan pelajar dapat melihat keseluruhan maklumat pelajar yang terdapat di dalam
kelas mereka. Antara paparan yang dipaparkan adalah ID pelajar, nama pertama dan akhir
serta umur pelajar.

Rajah 1.7: Antaramuka bagi Senarai Paparan Pelajar

6
6. Bahagian Score.php

Pada bahagian score adalah paparan markah pelajar menjawab soalan quiz.
Paparan tersebut juga memaparkan tarikh dan masa yang diambil ketika ujian dijalankan.
Di dalam antaramuka ini juga menunjukkan student id, markah yang pelajar perolehi dan
keputusan sama ada ujian yang diduduki lulus mahupun gagal. Questionnaire code yang
diberikan oleh guru juga turut paparkan.

Rajah 1.8: Antaramuka bagi markah pelajar (score)

7. Bahagian edit student.php

Pada bahagian ataramuka edit pelajar ini adalah bahagian untuk edit maklumat pelajar
yang sedia ada dan maklumat pelajar baharu yang akan disimpan. Antara maklumat yang
perlu dimasukkan oleh admin adalah student id, nama awal dan akhir pelajar serta umur
pelajar tersebut. Butang yang ada pada antaramuka ini adalah insert student data.

7
 Rajah 1.9: Antaramuka bagi Edit Maklumat Pelajar

8. Bahagian edit category.php

Pada bahagian ini adalah antaramuka kategori subtopik English Lesson yang ada
pada laman sesawang ini. Admin perlu mengisi nama kategori dan penerangan bagi
kategori tersebut. Antaramuka ini juga mempunyai butang submit untuk dimasukkan ke
dalam data. Data-data yang diwujudkan boleh di edit dan delete mengikut keperluan admin.

Rajah 1.9: Antaramuka bagi Edit Maklumat Kategori (category)

9. Bahagian edit question.php

Pada bahagian ataramuka edit question ini adalah bahagian untuk edit soalan- soalan quiz
yang terdapat di dalam laman sesawang ini. Admin perlulah memilih berapakah jumlah
soalan yang ingin dibangunkan dan perlulah menekan butang submit untuk mengisi soalan
dan jawapan pada paparan edit seterunya. Di dalam antaramuka soalan dan jawapan
tersebut terdapat butang insert data untuk mengubah dan membina soalan.

8
Rajah 1.9: Antaramuka bagi halaman Edit Question
(number question)

Rajah 1.9: Antaramuka bagi halaman Edit Question

(soalan dan jawapan)

9
10. Bahagian edit paparan soalan.php

Pada bahagian edit paparan soalan ini adalah bahagian admin untuk memilih
kategori soalan yang sedia ada dan mencipta soalan serta jawapannya. Bagi senarai yang
berjaya di simpan data, admin boleh mengedit dan mendelete soalan-soalan tersebut
mengikut keperluan yang diinginkan.

Rajah 1.10: Antaramuka bagi halaman Edit Question

(edit dan delete)

11. Bahagian edit questionnaere code.php

Pada bahagian edit questionnare code ini, admin akan memasukkan data code
tertentu sebagai tanda simbolik sesuatu subtopik yang ada pada laman sesawang ini. Code
yang dimasukkan akan diberikan pada pelajar untuk proses menjawab soalan-soalan quiz
sedia ada. Questionnare code pada anataramuka ini boleh diedit dan juga di delete
mengikut kesesuaian admin.

10
 Rajah 1.11: Antaramuka bagi halaman Edit Questionnare Code

12. Bahagian delete.php

Bahgian ini adalah memudahkan pengguna untuk membuang segala maklumat sama ada
maklumat diri ataupun maklumat berkaitan dengan nota.

13. Bahagian logout.php

Bahagian ini adalah memudahkan pengguna untuk keluar daripada laman sesawang ini.

11
3.0 Perbincangan
Perbincangan telah dilakukan di antara para pelajar dan juga pensyarah dalam
membincangkan mengenai PHP dan CSS dengan lebih mendalam sebelum serta semasa
tugasan berkumpulan ini dijalankan. Pensyarah telah memberi tunjuk ajar kepada para pelajar
dalam membangunkan sebuah laman sesawang menggunakan bahasa pengaturcaraaan PHP
dan CSS agar dapat membantu para pelajar membangunkan laman sesawang dengan lebih
mudah. Bagi pelajar yang melakukan kesilapan, mereka segera meminta bantuan pensyarah
untuk mengenal pasti kesilapan yang telah dilakukan.
Di samping itu, kami juga telah membuat perbincangan dalam kalangan kami semasa ingin
membangunkan laman sesawang tersebut. Perbincangan tersebut berlaku apabila terdapat error
yang berlaku di bahasa pengaturcaraan dibuat dan kami berusaha membaikinya bersama
menerusi aplikasi Google Meet dan aplikasi Whatsapp. Pada setiap permulaan bahagian dalam
bahasa pengaturcaraan, saya telah meletakkan kod pengaturcaraan yang sama supaya setiap
halaman mempunyai header yang sama.

1. Proses perancangan.
a. Proses perancangan merupakan proses utama dalam pembangunan laman
sesawang. Dalam proses perancangan, pembangun laman sesawang perlulah
mencari dan mengumpulkan sebanyak maklumat yang diperlukan seperti tujuan
pembangunan laman sesawang, maklumat yang ingin dicapai hasil daripada
pembangunan laman sesawang, kandungan yang terdapat dalam laman
sesawang, sasaran pengguna laman sesawang dan sebagainya.
2. Proses menganalisis
a. Pada proses menganalisis, pembangun laman sesawang perlu menyusun
kandungan laman web yang diperolehi hasil daripada maklumat yang
dikumpulkan semasa proses perancangan. Pembangun laman sesawang perlu
menentukan kandungan utama dan sub kandungan yang ingin diletakkan pada
laman sesawang tersebut. Interface yang menarik dan mudah difahami
membolehkan pengguna internet mengakses maklumat yang diperlukan
daripada sesebuah laman sesawang.

12
3. Proses reka bentuk
a. Dalam proses reka bentuk, pembangun laman sesawang perlu mengambil kira
siapakah yang akan menggunakan laman sesawang tersebut. Pada proses ini
juga, pembangun laman sesawang perlu mengetahui apakah yang diperlukan
oleh pengguna laman sesawang. Ini kerana ia dapat membantu pembangun
laman sesawang memenuhi citarasa yang diperlukan oleh pengguna.
4. Proses pelaksanaan
a. Pada proses pelaksanaan ini, pembangun laman sesawang akan menggunakan
elemen multimedia seperti text, video dan sebagainya. Hal ini demikian supaya
laman sesawang yang dihasilkan lebih berjaya di samping dapat menjadikan
laman sesawang tersebut lebih realistik dan dapat menarik pengguna internet
untuk melayari laman sesawang tersebut.

13
Bahagian index.php

14
Bahagian register.php

15
Bahagian nota.php

Bahagian exam.php

16
17
Bahagian studentlist.php

18
Bahagian score.php

19
Bahagian edit maklumat pelajar.php

20
21
Bahagian edit category .php

22
Bahagian Edit Question.php

23
Bahagian Edit Question.php

24
25
Bahagian Edit Questionnare Code.php

26
27
Bahagian delete.php

28
Kod pengaturcaraan CSS

29
30
4.0 Kesimpulan
Secara keseluruhannya, tugasan berkumpulan ini dapat membantu para pelajar untuk
mempelajari cara – cara untuk membangunkan laman sesawang menggunakan PHP dan CSS
yang dapat berfungsi dengan baik serta kelihatan kemas, menarik dan efisyen. Selain itu, para
pelajar juga dapat mempelajari mengenai bahasa pengaturcaraan dengan lebih mendalam
semasa membangunkan laman sesawang tersebut. Bahasa pengaturcaraan yang dipelajari dan
dihasilkan yang dilakukan adalah seperti membuat jadual, memasukkan dokumen pdf dan
sebagainya.
Selain itu juga, para pelajar juga berjaya membina suatu bahasa pengaturcaraan CSS di
dalam sebuah fail yang berfungsi untuk menyusun maklumat – maklumat yang dimasukkan ke
dalam laman sesawang supaya nampak lebih kemas dan menarik dengan menggunakan fungsi
div, li, a dan lain – lain. Dengan ini, para pelajar dapat mempelajari pelbagai jenis gaya yang
terdapat dalam CSS semasa membangunkan laman sesawang dalam tugasan berkumpulan ini.
Perkara ini amat membantu para pelajar sama ada pada waktu sekarang atau waktu akan datang
memandangkan perkara yang telah dipelajari ini boleh dipraktikkan semasa bekerja pada
waktu akan datang.
Oleh itu, tugasan kumpulan ini amat membantu para pelajar dalam mempelajari serta
memahami cara – cara untuk membangunkan sebuah laman sesawang menggunakan bahasa
pengaturcaraan PHP dan CSS dengan lebih mudah, kemas serta menarik. Ini juga merupakan
pengalaman baru untuk kami memandangkan sebelum ini kurang pendedahan terhadap
pengaturcaraan web. Dengan pengalaman baru ini, kami akan cuba praktikkan pada masa akan
datang terutama sekali ketika kami sudah bekerja.

31
5.0 Rujukan

1. Easy Tutorials. How To Make Website Using HTML & CSS | Full Responsive Multi
Page Website Design Step by Step. Diperoleh pada 15 Mac 2021 daripada
https://www.youtube.com/watch?v=oYRda7UtuhA .
2. Programmer Shahriar Sajeeb. Complete Responsive personal portfolio website design
with only react js. Absolutly for beginners. Diperoleh pada 03 Oktober 2021 daripada
https://www.youtube.com/watch?v=hGAaWhxUPfY .
3. Web Cifar. One Page Full Website Project For Practice | HTML & CSS Responsive
Website | Web Cifar 2021. Diperoleh pada 26 Mac 2021 daripada
https://www.youtube.com/watch?v=ZFQkb26UD1Y .

4. HTML Tutorials. Diperoleh pada 23 November 2021 daripada

https://www.w3schools.com/html/default.asp .
5. CSS Tutorials. Diperoleh pada 23 November 2021 daripada
https://www.w3schools.com/css/default.asp .

32