Professional Documents
Culture Documents
Tingkatan 5
Tingkatan 5
1
2
1.0
3
1.1 Komputer
dan Impak
4
1.1.1
1.1.2
1.1.3
1.1.4
1.1.5
1.1.6
1.1.7
KESAN KESAN
POSITIF NEGATIF
6
MENGANALISIS KESAN INOVASI
1.1 1.1.1 DALAM PENGKOMPUTER
.
JENAYAH SIBER
• Penyalahgunaan teknologi pengkomputeran dan internet bagi
melaksanakan aktiviti jenayah iaitu merosakkan, mencuri atau
mengubah data dalam sistem komputer bagi tujuan tertentu
8
MENGENALPASTI AKTIVITI TIDAK
1.1 1.1.2 BERETIKA DALAM PENGKOMPUTERAN
ISU KESELAMATAN
.
• Isu keselamatan data dalam rangkaian perlu diberi
perhatian kerana kelemahan ini memudahkan
penjenayah siber untuk membuat pintasan terhadap
rangkaian komputer dan mencuri maklumat peribadi
yang berharga.
ANTARA LANGKAH-LANGKAH
KESELAMATAN DATA
10
MENJELASKAN KEPERLUAN KESELAMATAN
1.1 1.1.3 DATA DALAM RANGKAIAN KOMPUTER
DAN LANGKAH KESELAMATAN
.
PENYULITAN E-MEL
• Proses penyulitan maklumat yang akan
dihantar melalui e-mel.
• Biasanya melibatkan maklumat yang sensitif
atau peribadi.
• Contoh : SafeGmail, Rmail, infoencrypt,
Hushmail, iSafeguard,safe-mail.net.
11
MENJELASKAN KEPERLUAN KESELAMATAN
1.1 1.1.3 DATA DALAM RANGKAIAN KOMPUTER
DAN LANGKAH KESELAMATAN
DUA PENGESAHAN .
• Merupakan lapisan pengesahan tambahan
yang perlu ditentukan oleh pengguna apabila
ingin memasuki akaun atau mengakses data
dalam talian.
• Dengan adanya dua lapisan tersebut, langkah
pengesahan untuk mengakses data menjadi
lebih sukar.
• Semakin banyak lapisan pengesahan,
semakin sukar data untuk diceroboh.
Nombor
kunci Kata
keselamatn Akaun
lain
Laluan
12
MENJELASKAN KEPERLUAN KESELAMATAN
1.1 1.1.3 DATA DALAM RANGKAIAN KOMPUTER
DAN LANGKAH KESELAMATAN
KATA LALUAN .
• Merupakan lapisan pengesahan keselamatan
yang utama untuk memasuki akaun
pengguna.
• Memudahkan penceroboh memasuki akaun
pengguna jika hanya satu lapisan keselamatan
sahaja.
• Pemilihan kata laluan amatlah penting.
• Elak pembinaan kata laluan berdasarkan
nama, nombor kad pengenalan, tarikh lahir
atau sebarang data yang berkaitan dengan
maklumat peribadi pengguna.
• Kata laluan yang baik dibina daripada
gabungan huruf, simbol dan nombor iaitu
antara 8 hingga 12 aksara.
• Kebarangkalian gabungan aksara ini akan
menyukarkan penggodam menekanya.
13
MELAKSANAKAN PENYULITAN
1.1 1.1.4
(ENCRYPTION) DAN NYAHSULIT
(DECRYPTION) DATA MENGGUNAKAN
CEASER CIPHER
KRIPTOGRAFI .
• Proses penyulitan data bagi melindungi privasi data pengguna
PENYULITAN .
• Proses penterjemahan data kepada bentuk kod rahsia yang tidak
dapat difahami.
• Merupakan satu cara yang berkesan untuk melindungi data.
• Teks biasa (Plaintext) : Data yang belum melalui proses penyulitan.
• Teks Sifer (Ciphertext) : Data yang telah melalui proses penyulitan.
14
MELAKSANAKAN PENYULITAN
1.1 1.1.4
(ENCRYPTION) DAN NYAHSULIT
(DECRYPTION) DATA MENGGUNAKAN
CEASER CIPHER
CEASAR CIPHER
.
• Salah satu bentuk penyulitan yang paling mudah.
• Merupakan cipher penggantian (substitution) iaitu setiap huruf teks
biasa digantikan dengan huruf yang sepadan dengan huruf dalam
abjad (A-Z).
• Formula : En(X) = (X + n) mod 26.
Teks
ABCDEFGHIJKLMNOPQRSTUVWXYZ Biasa
Teks
ABCDEFGHIJKLMNOPQRSTUVWXYZAB Sifer
15
MEMBINCANGKAN IMPLIKASI SOSIAL
1.1 1.1.5 BERKAITAN PENGGODAMAN DAN CETAK
ROMPAK PERISIAN
.
PENGGODAM
• Penggodam (hackers) ialah penjenayah siber
yang bertindak memintas komunikasi rangkaian
bagi memperoleh data penting pengguna untuk
diekploitasikan.
.
CETAK ROMPAK
• Merupakan pencabulan hak cipta – perbuatan
menyalin semula, menerbitkan atau menggunakan
bahan bercetak atau bahan rakaman digital seperti
video dan perisian komputer yang dilakukan tanpa
kebenaran pemegang hak cipta bagi harta intelek
tersebut dengan matlamat mengaut keuntungan.
Menjejaskan
kestabilan ekonomi
Cetak negara.
rompak
mengancam Wujud
industri pengangguran
kreatif dan dalam industry
perisian kreatif dan
negara. perisian.
IMPIKASI HASIL
DARIPADA AKTIVITI
PENGGODAMAN DAN
CETAK ROMPAK
. SIBER
UNDANG-UNDANG
• Merupakan peraturan yang ditetapkan
oleh pihak berkuasa di sesebuah negara
untuk memberikan hukuman kepada
pesalah-pesalah yang melakukan
kesalahan dalam talian.
Akta
Tandatangan
Digital Akta-akta di bawah undang-undang siber
17
MENGKAJI UNDANG-UNDANG SIBER
1.1 1.1.6 ANTARA NEGARA
PENUBUHAN KAWALAN
ISU
UNDANG- TERHADAP ISU
NEGARA KEBEBASAN PERJUDIAN
UNDANG MEDIA KELUCAHAN
BERSUARA
SIBER SOSIAL
18
MENGKAJI KERJAYA YANG BERKAITAN
1.1 1.1.7 DENGAN BIDANG PENGKOMPUTERAN
MASA HADAPAN
Sistem rangkaian
dan keselamatan
rangkaian
Sokongan
Pengaturcaraan Maklumat dan
dan BIDANG UTAMA perkhidmatan
pembangunan
perisian
DALAM
PENGKOMPUTERAN Web dan
Komunikasi
digital
19
MENGKAJI KERJAYA YANG BERKAITAN
1.1 1.1.7 DENGAN BIDANG PENGKOMPUTERAN
MASA HADAPAN
MUDAH ALIH
• Penghasilan aplikasi dan kandungan mudah alih bagi peranti
selain komputer.
KESELAMATAN DATA
• Keperluan kepakaran dalam bidang penyulitan, pengesahan,
pengurusan sijil, infrastruktur firewall dan anti-malware.
• Keperluan terhadap kerjaya penganalisis keselamatan data,
pentadbir keselamatan, pentadbir keselamatan rangkaian dan
pentadbir keselamatan sistem.
20
1.2.1
1.2.2
1.2.3
1.2.4
1.2.5
UNIT PERANTI
UNIT
PEMPROSESAN INPUT DAN
PUSAT INGATAN
OUTPUT
✓ Komponen yang
✓ FUNGSI : digunakan untuk
✓ Juga dikenali
menyimpan data memasukkan data
sebagai pemproses
dan arahan dan memaparkan
@ CPU.
semasa komputer hasil daripada
✓ Terdiri dari 3
digunakan. sistem komputer.
komponen.
✓ Menyimpan/ ✓ PERANTI INPUT :
✓ Unit Aritmetik dan
memegang data menukar data
Logik (ALU) :
secara sementara luaran kepada
Melakukan operasi
selagi arahan yang satu bentuk yang
aritmetik dan logik.
merujuknya masih boleh difahami
✓ Unit Kawalan :
beroperasi. dan kemudian
mengawal operasi
✓ Tidak digunakan diproses oleh
ingatan, pemproses
untuk menyimpan komputer.
dan peranti input
data secara kekal. ✓ Contoh : papan
dan output.
✓ BERSIFAT kekunci, skrin
✓ Daftar (Register) :
MERUAP : hilang sentuh,
berfungsi untuk
kandungannya pengimbas,
menyimpan data
jika bekalan perakam suara,
secara sementara,
elektrik terputus. tetikus.
menghantar arahan
✓ Ingatan utama ✓ PERANTI OUTPUT
yang dicapai : memaparkan
terbahagi kepada
daripada ingatan hasil yang diproses
2 : RAM dan ROM.
utama sebelum
✓ Set arahan dalam oleh komputer
diproses di ALU dan kepada bentuk
ROM akan kekal.
menerima hasil yang boleh
daripada ALU difahami oleh
sebelum dihantar manusia.
ke ingatan utama. ✓ Contoh : pencetak,
monitor, 22
pembesar suara.
MENJELASKAN KITARAN
1.2 1.2.1 CAPAI-NYAHKOD-LAKSANA
.
KITARAN MESIN
• Tugas utama CPU adalah untuk
melaksanakan arahan pemprosesan data.
• Pemprosesan data dan arahan mengikut
kitaran mesin –> kitaran capai-nyahkod-
laksana (FDE).
• Juga dikenali sebagai kitaran arahan.
• Pemproses menghantar isyarat supaya data
dan arahan yang dimasukkan melalui peranti
input disalin ke dalam ingatan utama.
• Data dan arahan tersebut diproses melalui 3
proses utama dalam kitaran mesin untuk
menghasilkan output.
.
SENI BINA VON NEUMANN
DAFTAR INGATAN
UTAMA
UNIT KAWALAN
(RAM)
UNIT ARITMETIK
DAN LOGIK
UNIT INPUT
DAN OUTPUT
24
MENERANGKAN KONSEP
1.2 1.2.2 ASAS SENI BINA VON NEUMANN
SISTEM BAS
BAS DALAMAN BAS LUARAN
Menghubungkan komponen-komponen Menghubungkan pemproses dengan
dalaman pemproses dan membenarkan komponen luaran seperti ingatan dan
komponen tersebut bertukar-tukar peranti input dan output.
maklumat.
BAS DATA
Digunakan untuk memindahkan
* antara pemproses, ingatan dan
peranti input/output.
* antara daftar, unit kawalan dan
ALU
BAS ALAMAT
Digunakan bagi
* membawa alamat lokasi yang
menempatkan data dan arahan
dalam ingatan utama.
* mengandungi alamat peranti
input/output
BAS KAWALAN
Bas yang mengandungi isyarat
kawalan yang digunakan bagi
mengawal operasi keseluruhan
25
sistem.
MENERANGKAN KONSEP
1.2 1.2.2 ASAS SENI BINA VON NEUMANN
UNIT PEMPROSESAN
. PUSAT (CPU)
• Komponen yang paling penting dalam
sistem komputer.
• Juga dikenali sebagai pemproses.
• 3 Komponen utama : Unit Aritmetik dan
Logik (ALU), daftar dan Unit Kawalan.
UNIT ARITMETIK
DAFTAR UNIT KAWALAN
DAN LOGIK (ALU)
• Melakukan operasi-operasi • Menyimpan data dan • Menerima dan menjana
aritmetik (tambah, tolak, arahan yang dicapai dari isyarat-isyarat bagi
bahagi, darab, nilai negatif ingatan utama sebelum mengawal opersi
dan sebagainya. dihantar ke ALU untuk keseluruhan sistem
• Melakukan operasi logik diproses dan menyimpan komputer.
(DAN, ATAU, TAK, XATAU hasil pemprosesan • Inout utamanya ialah
dan sebagainya). sementara sebelum denyutan isyarat dari
• ALU menerima input dari dihantar ke ingatan utama sistem jam.
daftar-daftar dalam CPU dan dipamerkan melalui • Unit kawalan mengandungi
dan menghasilkan peranti output. penyahkod arahan dan
maklumat untuk dihantar logik pemasaan serta
ke daftar sebelum kawalan.
disimpan dalam ingatan.
JENIS DAFTAR
PC MAR MDR
ACC IR
(Memory Address (Memory Data
(Program Counter/ (Accumulator / Daftar (Instruction Register/
Register / Daftar Register/ Daftar Data
Pembilang atur cara) Pengumpuk) Daftar Arahan)
Alamat Ingatan) Ingatan)
27
MENGKAJI PERBEZAAN PEMPROSES
1.2 1.2.3 LINEAR DAN PEMPROSES SEMASA
PEMPROSESAN
PEMPROSESAN LINEAR PEMPROSESAN SEMASA
KATEGORI BAHASA
PENGATURCARAAN
✓ Menggunakan pernyataan yang
mudah difahami oleh pengatur cara.
✓ Bahasanya hampir sama dengan
BAHASA Bahasa tabii manusia.
✓ 2 Jenis : Bahasa Pengaturcaraan
PENGATURCARAAN Berasaskan Objek dan Bahasa
ARAS TINGGI Berstruktur.
✓ Lebih mudah difahami dan
digunakan untuk membina atur
cara.
BAHASA HIMPUNAN
✓ Pernyataan yang digunakan untuk
membina arahan bagi komputer
dalam bentuk simbol yang ringkas.
✓ Pengatur cara perlu memahami seni
BAHASA bina pemproses dan fungsi setiap
perkakasan dalam sistem komputer.
PENGATURCARAAN
BAHASA MESIN
ARAS RENDAH ✓ Bahasa yang sukar difahami dan
dimanipulasi.
✓ Bentuk pernyataan Bahasa mesin
bergantung pada jenis komputer.
✓ Atur cara dalam Bahasa mesin
dibina daripada jujukan digit
perduaan (0, 1)
29
MEMBINCANGKAN PENTERJEMAH
1.2 1.2.4 PELBAGAI ARAS BAHASA
PENGATURCARAAN
BAHASA
PENGATURCARAAN PENGKOMPIL PENTAFSIR
ARAS TINGGI
C , C++ , COBOL
1
Daftar
INGATAN
ALU UTAMA
(RAM)
3 Unit
Kawalan
2
Output
dipapar
pada skrin
Unit Pemprosesan Pusat (CPU)
komputer.
31
1.3.1
1.3.2
1.3.3
1.3.4
• Membina Jadual Kebenaran bagi satu litar get logik gabungan yang
mempunyai dua input.
1.3.5
1.3.6
1.3.7
32
MENERANGKAN GET LOGIK SEBAGAI
1.3 1.3.1 BINAAN ASAS LITAR BERSEPADU
GET LOGIK.
• Merupakan blok binaan asas litar bersepadu.
• Mempunyai 2 input dan 1 output.
• Menerima input dan menghasilkan output dalam
bentuk perduaan.
• Logik perduaan menggunakan 2 keadaan.
• 0 = tiada arus @ arus rendah.
• 1 = ada arus @ arus tinggi.
.
LITAR BERSEPADU
• Merupakan litar elektronik yang terdiri daripada gabungan komponen
elektronik (transistor, perintang, diod dan kapasitor) yang perlu untuk
melaksanakan pelbagai fungsi get logik.
• Get-get ini disambungkan menjadi satu litar yang lengkap dan dikecilkan
beribu-ribu kali ganda daripada saiz asal.
• Kemudian ditempatkan pada satu kepingan silicon dan dinamakan cip atau cip
mikro (serpihan).
• Lembaran emas digunakan untuk menyambung serpihan pada pin-pin litar
bersepadu.
• Perumah plastik atau logam biasanya digunakan untuk melindungi serpihan
agar tidak rosak.
• Semakin banyak pin pada litar bersepadu ,semakin banyak fungsinya.
• Cip litar bersepadu terbahagi kepada beberapa jenis berdasarkan bilangan get
di dalamnya.
• Penggunaan litar bersepadu sangat meluas dalam pelbagai peranti elektronik.
33
MENYENARAIKAN DAN MELUKIS
1.3 1.3.2 SIMBOL GET LOGIK
34
MEMBINA JADUAL KEBENARAN DAN
1.3 1.3.3 UNGKAPAN BOOLEAN BAGI
MENERANGKAN TINDAKAN GET LOGIK
JADUAL KEBENARAN .
• Digunakan untuk menyemak output yang
dihasilkan daripada get-get logik atau daripada
litar logik.
BILANGAN JUMLAH
• Juga digunakan untuk membuktikan teorem PEMBOLEH KEBARANGKALI
algebra boolean. UBAH AN INPUT
INPUT
• Bagi membina jadual kebenaran, bilangan input
1 21 = 2
perlu dipertimbangkan.
2 22 = 4
• Input boleh diwakilkan dalam bentuk pemboleh
ubah (A,B, C, ..X,Y,Z). 3 23 = 8
36
MEMBINA JADUAL KEBENARAN DAN
1.3 1.3.3 UNGKAPAN BOOLEAN BAGI
MENERANGKAN TINDAKAN GET LOGIK
A DAN B 1 0 0
AXB 1 1 1
INPUT OUTPUT
F=A+B A B F
0 0 0
ATAU Dibaca :
0 1 1
A ATAU B 1 0 1
1 1 1
INPUT OUTPUT
F= A A F= A
Dibaca :
0 0
TAK F mempunyai nilai 0 1
yang bertentangan
dengan A
37
MEMBINA JADUAL KEBENARAN DAN
1.3 1.3.3 UNGKAPAN BOOLEAN BAGI
MENERANGKAN TINDAKAN GET LOGIK
TAK Dibaca :
0 0 0 1
DAN 0 1 0 1
A DAN B bar 1 0 0 1
1 1 1 0
INPUT OUTPUT
F = (A + B) A B A+B F
TAK Dibaca :
0 0 0 1
ATAU 0 1 1 0
A ATAU B bar 1 0 1 0
1 1 1 0
INPUT OUTPUT
F= AꚚB A B AꚚB
Dibaca : 0 0 0
XATAU Jika kedua-duanya 0 1 1
sama, Output = 0 1 0 1
1 1 0
B F
Q
INPUT P Q OUTPUT
A B (A. B) A F = AB + A
0 0 1 1 1
0 1 1 1 1
1 0 1 0 1
1 1 0 0 0
Get 2
A Get 4
F
Get 1
B Get 3
A Q
B F
P
LANGKAH PENYELESAIAN
Bahagikan litar kepada 3 bahagian berdasarkan get logik yang
terlibat.
A Q
LANGKAH 1
B F
P
Bahagian 1 Bahagian 2 Bahagian 3
Selesaikan Bahagian 1
LANGKAH 2 INPUT OUTPUT
Selesaikan Bahagian 2
LANGKAH 3 INPUT OUTPUT
• Melibatkan get logik DAN. A P Q = A. B
Selesaikan Bahagian 3
LANGKAH 4 INPUT OUTPUT
• Melibatkan get logik ATAU. Q A F = A. B + A
JAWAPAN F = A. B + A
40
MENGHASILKAN LITAR GET LOGIK DAN
1.3 1.3.6 JADUAL KEBENARAN BERDASARKAN
PERNYATAAN LOGIK
UNGKAPAN BOOLEAN
F = AB + AB + AB
UNGKAPAN LOGIK Nilai F = 1 jika (A = 0 DAN B =0) ATAU (A = A DAN B = 1)
ATAU (A = 1 DAN B = 0)
LANGKAH PENYELESAIAN
Kira bilangan pemboleh ubah atau input yang terlibat.
LANGKAH 1
A B
B
LANGKAH 2 A
LANGKAH 3 B
A
B
LANGKAH 4 A
41
MENGHASILKAN LITAR GET LOGIK DAN
1.3 1.3.6 JADUAL KEBENARAN BERDASARKAN
PERNYATAAN LOGIK
LANGKAH PENYELESAIAN
Kenalpasti get yang menghubungkan kesemua ungkapan yang
terlibat.
LANGKAH 5
B
A
LANGKAH 6 F
42
MENGHASILKAN LITAR GET LOGIK DAN
1.3 1.3.6 JADUAL KEBENARAN BERDASARKAN
PERNYATAAN LOGIK
JADUAL KEBENARAN
A B A B A B AB A B F
0 0 1 1 1 0 0 1
0 1 1 0 0 0 0 0
1 0 0 1 0 0 1 1
1 1 0 0 0 1 0 1
43
MENGHASILKAN LITAR GET LOGIK DAN
1.3 1.3.7
JADUAL KEBENARAN DAN UNGKAPAN
BOOLEAN YANG LENGKAP DALAM
MENYELESAIKAN MASALAH
CONTOH MASALAH
Sistem penggera dibina menggunakan litar logik 2 input iaitu A dan B. Sistem akan
mengeluarkan isyarat bunyi F, jika input bagi A mewakili ON dan input B mewakili ON atau
jika input A mewakili OFF dan input B mewakili OFF.
Tulis ungkapan logik bagi mewakili senario yang diberikan.
LANGKAH 1
F = 1 , jika (A = 1 DAN B = 1) ATAU (A = 0 DAN B=0)
Tulis semula dalam bentuk ungkapan Boolean.
LANGKAH 2
F = A.B + A.B
Lukis rajah litar logik bagi mewakili ungkapan Boolean
A
B F
LANGKAH 3
44
2.0
45
2.0 2.1 Bahasa
PANGKALAN Pertanyaan
DATA LANJUTAN Bersturuktur : SQL
46
2.1.1
2.1.2
2.1.3
2.1.4
2.1.5
1.3.6
1.3.7
47
2.1 2.1.1
MELAKAR ERD (ENTITY RELATIONSHIP
DIAGRAM) BAGI PERMASALAHAN YANG DIBERI
ERD .
• Model asas dalam membina pangkalan data.
• ERD merupakan teknik yang digunakan untuk
memodelkan data yang diperlukan dalam suatu
organisasi.
• ERD menerangkan konsep tentang struktur
pangkalan data.
KOMPONEN ERD
JENIS-JENIS ATRIBUT
NOTASI KETERANGAN
✓ Digunakan untuk mewakili atribut mudah dan atribut bernilai
tunggal.
✓ ATRIBUT MUDAH : Tidak boleh dibahagikan kepada beberapa
Atribut bahagian. Cth : Nama, NoKadPengenalan.
✓ ATRIBUT BERNILAI TUNGGAL : Mempunyai satu nilai sahaja.
Cth : NOKadPengenalan.
✓ ATRIBUT NILAI GANDAAN : Mempunyai lebih daripada satu
nilai .
Atribut ✓ Contoh : Kemahiran – Seorang guru mempunyai lebih daripada
satu kemahiran.
Jalan
49
2.1 2.1.1
MELAKAR ERD (ENTITY RELATIONSHIP
DIAGRAM) BAGI PERMASALAHAN YANG DIBERI
KEKARDINALAN .
• Menunjukkan hubungan dari segi kuantiti data antara suatu entity dengan entiti
yang lain.
JENIS KEKARDINALAN
✓ Minimum data suatu entiti berkait ✓ Maksimum data suatu entiti berkait
dengan entiti lain. dengan entiti lain.
✓ Contoh : Seorang GURU mengajar ✓ Contoh : Satu MATAPELAJARAN boleh
sekurang-kurangnya satu diajar oleh seorang GURU atau lebih.
MATAPELAJARAN. Seorang guru boleh mengajar maksimum
lebih dari satu mata pelajaran.
✓ Maka kekardinalan minimum ialah satu
kerana seorang guru mesti mengajar ✓ Maka kekardinalan maksimum adalah
sekurang-kurangnya satu mata banyak.
pelajaran.
SIMBOL KETERANGAN
MANDATORI SATU
Minimum dan maksimum satu.
MANDATORI BANYAK
Minimum data adalah satu dan
maksimum data adalah banyak.
OPSYENAL SATU
Minimum data adalah kosong dan
maksimum data adalah satu.
OPSYENAL BANYAK
Minimum data adalah kosong dan 50
maksimum data adalah banyak.
2.1 2.1.1
MELAKAR ERD (ENTITY RELATIONSHIP
DIAGRAM) BAGI PERMASALAHAN YANG DIBERI
SOALAN
Pengurusan stok dan inventori alatan sukan amat penting dalam kejayaan sesuatu aktiviti
sukan dan kokurikulum. Kekurangan peralatan sukan menyebabkan sesuatu sukan sukar
dijalankan. Pangkalan data stor sukan mengandungi rekod pelbagai alatan sukan sama ada
untuk sukan sekolah ataupun untuk pembelajaran dan pengajaran mata pelajaran
Pendidikan jasmani. Dalam Pangkalan data ini juga, maklumat barangan sukan, pembekal,
peminjam dan rekod pinjaman yang dibuat oleh semua murid disimpan.
ENTITI ATRIBUT
BARANG NoBarang , NamaBarang , Kuantiti , HargaSeunit
ENTITI DAN
MURID IDMurid , NamaMurid , Kelas
ATRIBUT YANG
TERLIBAT PINJAMAN NoPinjaman , TarikhPinjaman , TarikhPulang
PEMBEKAL NoPembekal
KENALPASTI ▪ Meminjam
▪ Merekod
HUBUNGAN ▪ Membekal
ANTARA ENTITI
51
2.1 2.1.1
MELAKAR ERD (ENTITY RELATIONSHIP
DIAGRAM) BAGI PERMASALAHAN YANG DIBERI
52
MENGHASILKAN SKEMA HUBUNGAN YANG
2.1 2.1.2 TERNORMAL (NORMALIZE) DARIPADA
PERMASALAHAN YANG DIBERI
KUNCI HUBUNGAN .
• Setiap hubungan perlu ada kunci primer yang membolehkan menyimpan dan
mencapai data dalam hubungan.
• KUNCI PRIMER : Atribut unik yang dipilih untuk mengenal pasti rekod dalam
hubungan.
• Kunci Primer digariskan seperti contoh dibawah.
MURID (NoKadPengenalan, Nama, Alamat)
• KUNCI ASING : Kunci Primer sesuatu hubungan yang muncul dalam hubungan lain
dalam pangkalan data yang sama.
• Kunci ditandakan dengan garis putus-putus.
MATAPELAJARAN CIRI-CIRI
Susunan
MODEL
NoKod Nama
rekod tidak HUBUNGAN
mempunyai
TA01 Bahasa Melayu
kepentingan. DATA
Setiap atribut
TA02 Matematik mempunyai
nama
TA03 Sejarah Susunan
berbeza
atribut tidak
mempunyai Setiap rekod
kepentingan. berbeza
53
MENGHASILKAN SKEMA HUBUNGAN YANG
2.1 2.1.2 TERNORMAL (NORMALIZE) DARIPADA
PERMASALAHAN YANG DIBERI
SKEMA HUBUNGAN .
• Menghuraikan struktur logik secara keseluruhan sesuatu pangkalan data.
MURID
NoKadPengenalan Nama Alamat
PENGETUA
NoID Nama Alamat
SEKOLAH
NoSekolah NamaSekolah NoID
PELANGGAN
NoPelanggan Nama Alamat
PESANAN
NoPesanan TarikhPesanan NoPelanggan
PEMBEKAL
NoPembekal Nama Alamat
PEMBEKAL_BAHAN_MENTAH
NoPembekal NoBahan
BAHAN_MENTAH
NoPelanggan JumlahUnit Kos
MURID
IDMurid NamaMurid Kelas
PINJAMAN
NoPinjaman TarikhPinjam TarikhPulang IDMurid
BARANG
NoBarang NamaBarang Kuantiti HargaSeunit IDMurid
PEMBEKAL_BARANG
NoBarang NoPembekal
PEMBEKAL
NoPembekal NamaPembekal NamaJalan Bandar Poskod Negeri
MENGHASILKAN SKEMA HUBUNGAN YANG
2.1 2.1.2 TERNORMAL (NORMALIZE) DARIPADA
PERMASALAHAN YANG DIBERI
PENORMALAN .
• Proses untuk memastikan model data logikal yang terhasil mempunyai anomali
yang paling minimum.
• Penormalan bertujuan untuk menghasilkan skema hubungan dengan
menempatkan attibut ke dalam jadual dengan betul bagi mengelakkan
masalaha anomaly.
• ANOMALI – Ralat yang mungkin berlaku apabila pengguna ingin mengemas kini
jadual yang mengandungi data berulang.
A01 Bola 10 30.50 Angsa Maju Alor M1000 Lim 1 Merah 02/7/2017 02/7/2017
Sepak Setar
Setia Sukan
Bola 5 15.30 Shah
Jaring Alam
A03 Bola 10 20.00 Indah Sukan Kuching M2000 Elisa 4 Biru 07/7/2017 07/7/2017
Hoki
A05 Baton 20 10.30 Setia Sukan Shah M3000 Devi 3 Ungu 09/8/2017 12/8/2017
Alam
A01 Bola 10 30.50 Angsa Maju Alor M1000 Lim 1 Merah 02/7/2017 02/7/2017
Sepak Setar
A02 Bola 5 15.30 Setia Sukan Shah M1000 Lim 1 Merah 02/7/2017 02/7/2017
Jaring Alam
A03 Bola 10 20.00 Indah Sukan Kuching M2000 Elisa 4 Biru 07/7/2017 07/7/2017
Hoki
A05 Baton 20 10.30 Setia Sukan Shah M3000 Devi 3 Ungu 09/8/2017 12/8/2017
Alam
MENGHASILKAN SKEMA HUBUNGAN YANG
2.1 2.1.2 TERNORMAL (NORMALIZE) DARIPADA
PERMASALAHAN YANG DIBERI
BARANG
NoBarang Namabarang Kuantiti HargaSeunit NamaPembekal Alamat
PINJAMAN
NoBarang IDMurid TarikhPinjam TarikhPulang
MURID
IDMurid TarikhPinjam TarikhPulang
MENGHASILKAN SKEMA HUBUNGAN YANG
2.1 2.1.2 TERNORMAL (NORMALIZE) DARIPADA
PERMASALAHAN YANG DIBERI
BARANG
NoBarang Namabarang Kuantiti HargaSeunit NamaPembekal
PINJAMAN
NoBarang IDMurid TarikhPinjam TarikhPulang
MURID
IDMurid TarikhPinjam TarikhPulang
PEMBEKAL
NamaPembekal Alamat
MEMBINA PANGKALAN DATA HUBUNGAN
2.1 2.1.3 MENGGUNAKAN SQL : TABLE
SQL
• Structured Query Language / Bahasa Pertanyaan Berstruktur : Digunakan untuk
mencapai dan mengemaskini data dalam Pangkalan data.
• Bahasa Pengaturcaraan piawai yang digunakan untuk berhubung dengan pangkalan
data melalui sistem pengurusan pangkalan data.
• Hampir semua sistem pengurusan pangkalan data mengenali pernyataan SQL.
BAHASA
ARAHAN SQL
JENIS-JENIS DATA
• Pemilihan jenis data yang betul adalah penting kerana pemilihannya memberikan
kesan kepada prestasi keseluruhan pangkalan data.
• Nombor dalam julat -2, 147, 483,648 hingga 2, 147, 483,647 atau nombor
INT
positif 0 hingga 4,294,967,295.
ARAHAN SQL
•.
ARAHAN FORMAT
CREATE TABLE nama jadual (
Nama_medan1 jenis data(saiz) PRIMARY KEY,
Mencipta jadual Nama_medan2 jenis data(saiz) NOT NULL,
(Create table) Nama_medan3 jenis data(saiz) ,
……………………………………
)
ALTER TABLE nama_jadual
pilihan perubahan;
ARAHAN SQL
•.
ARAHAN FORMAT
INSERT INTO nama_jadual (medan 1, medan2…. medan…N)
Sisip/Tambah VALUES (nilai1, nilai2…. nilaiN)
DELETE FROM nama_jadual
Padam
WHERE nama_medan = nilai;
UPDATE nama_jadual
Kemaskini SET nama_medan = nilai_baharu
WHERE nama_medan = nilai_tertentu;
PERNYATAAN FORMAT
SELECT nama_medan
FROM nama jadual
WHERE syarat1
SELECT AND syarat 2
AND syarat………
FUNGSI AGREGAT
• Fungsi agregat dilaksanakan untuk menghasilkan satu nilai penyatuan bagi medan
berkenaan.
• Fungsi ini menggabungkan sekumpulan data dan mengembalikan nilai tunggal
sebagai hasilnya.
KEDUDUKAN
IDPeserta NoAcara Pingat
ACARA
NoAcara NamaAcara
KEDUDUKAN
IDPeserta NoAcara Pingat
ACARA
NoAcara NamaAcara
KATEGORI PESERTA
Kategori Kelas
67
3.1 Bahasa
Penskripan Klien
68
3.1.1
3.1.2
• Menterjemah atur cara mudah yang diberi dari Bahasa Penskripan Klien
kepada carta alir ( bubble sort , selection sort, binary search, max /
min / mean, count, queue)
3.1.3
3.1.4
3.1.5
3.1.6
3.1.7
3.1.8
3.1.9
69
MENERANGKAN KEPERLUAN BAHASA
3.1 3.1.1 PENGATURCARAAN PENSKRIPAN
KLIEN DALAM LAMAN WEB
70
MENERANGKAN KEPERLUAN BAHASA
3.1 3.1.1 PENGATURCARAAN PENSKRIPAN
KLIEN DALAM LAMAN WEB
71
MENERANGKAN KEPERLUAN BAHASA
3.1 3.1.1 PENGATURCARAAN PENSKRIPAN
KLIEN DALAM LAMAN WEB
BAHASA PENSKRIPAN
• Konsep penskripan web digunakan secara meluas
dalam pembangunan laman web.
• PENSKRIPAN : sebahagian kecil program yang
dilaksanakan berdasarkan interaksi pengguna dengan
laman web.
• Penskripan ini ditempatkan di dua bahagian :
penskripan klien di sebelah pelanggan dan
penskripan pelayan di sebelah pelayan..
BAHASA PENSKRIPAN
72
MENERANGKAN KEPERLUAN BAHASA
3.1 3.1.1 PENGATURCARAAN PENSKRIPAN
KLIEN DALAM LAMAN WEB
• Merujuk kepada program komputer dalam web yang dilaksanakan pada komputer
klien.
• Program ini direka bagi memanipulasikan dan memaparkan kandungan laman web
yang telah dimuat turun ke komputer klien.
• Penskripan klien biasanya digunakan untuk proses pengesahan input yang
dimasukkan oleh pengguna apabila mengisi borang dalam talian.
• Juga digunakan untuk melaksanakan tugas-tugas yang mudah seperti menukar
elemen. Contoh : jenis font atau warna latar tanpa melibatkan pelayan.
• Contoh lain : Shopping cart – Setiap kali kita menambah atau mengurangkan item,
jumlah kos akan berubah secara automatic.
• Bukan semua tugas dapat dilaksanakan oleh Bahasa penskripan klien.
• Tugas-tugas yang melibatkan pangkalan data pada sebelah pelayan web atau
capaian ke atas fail sistem yang terdapat pada pelayan web tidak mampu
dilaksanakan oleh Bahasa Penskripan Klien.
Laman menjadi
lebih interaktif.
Pelaksanaan tugas
yang pantas tanpa
penglibatan
komputer pelayan. 73
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
Mudah KELEBIHAN
dibina
dan ISIHAN
difahami. BUIH
Sesuai
digunakan
untuk bilangan
unsur yang 74
kecil.
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
OUTPUT
75
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
76
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
document.write(" <br> Senarai kod buku selepas isih secara menurun " + kodBuku );
</script>
</body>
</html>
OUTPUT
77
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
78
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
Sesuai untuk
Kurang sesuai tujuan
untuk aplikasi pembelajaran
sebenar.
Mudah
dibina dan KELEBIHAN
difahami. ISIHAN PILIH
Sesuai digunakan
untuk bilangan
unsur yang kecil.
79
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
OUTPUT
80
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
81
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
OUTPUT
82
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
83
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
84
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
OUTPUT
85
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
86
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
OUTPUT
87
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
88
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
90
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
91
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
92
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
93
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
94
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
OUTPUT
95
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
96
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
OUTPUT
97
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
98
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
Proses Queue
• push ( )
Kekangan
• shift ( ) • Tidak sesuai digunakan jika
mempunyai queue yang besar /
• unshift ( ) Panjang / banyak atau nilai-nilai
perlu digerakkan kedudukannya
• Pop ( ) setiap kali fungsi shift ( ) digunakan.
99
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
push (5) 5
depan belakang
push (-1) 5 -1
depan belakang
push (12) 5 -1 12
depan belakang
shift () -1 12
unshift (5) 5
depan belakang
unshift (-1) -1 5
depan belakang
unshift(12) 12 -1 5
depan belakang
pop () 12 -1
100
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
OUTPUT
101
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
102
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
OUTPUT
103
MENTERJEMAH ATUR CARA MUDAH YANG
3.1 3.1.2 DIBERI DARIPADA BAHASA PENSKRIPAN
KLIEN KEPADA CARTA ALIR
104
MENGGUNAKAN
3.1 3.1.3 PEMALAR,PEMBOLEHUBAH DAN JENIS
DATA BERLAINAN DALAM ATUR CARA
PEMBOLEH UBAH
• Ruang ingatan yang digunakan untuk
menyimpan nilai sementara sewaktu atur
cara diproses.
CONTOH PEMBOLEH UBAH
• Nilainya boleh berubah-ubah mengikut
penggunaan pemboleh ubah atau arahan NILAI NAMA PEMBOLEH UBAH
kepada pemboleh ubah. Nilai Gaji Pekerja gajiPekerja
• Setiap pemboleh ubah akan diberi nama
mengikut nilai yang disimpan. Nama Pelajar namaPelajar
• Pengecam : Nama yang diberi kepada
pemboleh ubah.
PEMALAR
• Ruang ingatan yang digunakan untuk
menyimpan nilai sementara sewaktu atur CONTOH PEMALAR
cara diproses. ▪ Nilai pi 3.142
• Sama seperti pemboleh ubah tetapi nilainya
tidak boleh berubah-ubah kerana nilai yang ▪ Bilangan hari dalam seminggu 7 hari
ditentukan itu merupakan satu nilai yang
telah ditetapkan dalam atur cara.
JENIS DATA
• Jenis nilai atau pelbagai set data yang digunakan dalam atur cara.
Nombor 5 100.50
105
MENGGUNAKAN
3.1 3.1.3 PEMALAR,PEMBOLEHUBAH DAN JENIS
DATA BERLAINAN DALAM ATUR CARA
OUTPUT
106
MENGGUNAKAN
3.1 3.1.3 PEMALAR,PEMBOLEHUBAH DAN JENIS
DATA BERLAINAN DALAM ATUR CARA
OUTPUT
107
MENGGUNAKAN
3.1 3.1.3 PEMALAR,PEMBOLEHUBAH DAN JENIS
DATA BERLAINAN DALAM ATUR CARA
OUTPUT
108
MENGGUNAKAN
3.1 3.1.3 PEMALAR,PEMBOLEHUBAH DAN JENIS
DATA BERLAINAN DALAM ATUR CARA
OUTPUT
109
MENGGUNAKAN
3.1 3.1.3 PEMALAR,PEMBOLEHUBAH DAN JENIS
DATA BERLAINAN DALAM ATUR CARA
OUTPUT
110
MENGGUNAKAN
3.1 3.1.3 PEMALAR,PEMBOLEHUBAH DAN JENIS
DATA BERLAINAN DALAM ATUR CARA
OUTPUT
111
MENGGUNAKAN STRUKTUR
3.1 3.1.4 KAWALAN DALAM ATUR CARA
STRUKTUR KAWALAN
• Akan mengawal aliran atur cara satu blok kod atur cara.
• Pernyataan ini akan menentukan sama ada pernyataan akan dilaksanakan atau tidak,
termasuk mengulang pernyataan dalam satu blok kod.
STRUKTUR KAWALAN
(dalam Javascript)
MULA
MULA
MULA
Penyataan 1
Syarat?
Blok Penyataan
Penyataan 2
Syarat?
Penyataan 1 Penyataan 2
Penyataan 3
TAMAT
TAMAT
TAMAT
112
MENGGUNAKAN STRUKTUR
3.1 3.1.4 KAWALAN DALAM ATUR CARA
113
MENGGUNAKAN STRUKTUR
3.1 3.1.4 KAWALAN DALAM ATUR CARA
114
MENGGUNAKAN STRUKTUR
3.1 3.1.4 KAWALAN DALAM ATUR CARA
MULA
OPERATOR HUBUNGAN
Digunakan untuk membandingkan dua nilai
bagi menghasilkan keputusan Boolean.
Adakah
== sama dengan Syarat
!= tidak sama dengan benar?
MULA
OPERATOR LOGIKAL
Adakah
&& AND Syarat
benar?
|| OR Laksana Laksana
pernyataan ini pernyataan ini
! NOT
jika palsu jika benar.
TAMAT 115
MENGGUNAKAN STRUKTUR
3.1 3.1.4 KAWALAN DALAM ATUR CARA
OUTPUT
116
MENGGUNAKAN STRUKTUR
3.1 3.1.4 KAWALAN DALAM ATUR CARA
OUTPUT
117
MENGGUNAKAN STRUKTUR
3.1 3.1.4 KAWALAN DALAM ATUR CARA
OUTPUT
118
MENGGUNAKAN STRUKTUR
3.1 3.1.4 KAWALAN DALAM ATUR CARA
119
MENGGUNAKAN STRUKTUR
3.1 3.1.4 KAWALAN DALAM ATUR CARA
120
MENGGUNAKAN STRUKTUR
3.1 3.1.4 KAWALAN DALAM ATUR CARA
STRUKTUR KAWALAN
ULANGAN
121
MENGGUNAKAN STRUKTUR
3.1 3.1.4 KAWALAN DALAM ATUR CARA
PEMBILANG
NILAI Nilai permulaan untuk membilang.
AWAL
NILAI Nilai untuk menamatkan proses
TAMAT membilang yang menentukan ulangan
tamat atau diteruskan.
NILAI Proses untuk mengemas kini nilai
AKHIR pembilang.
while… do…while
123
MENERANGKAN KELEBIHAN STANDARD
3.1 3.1.5 LIBRARY KEPADA PENGATUR CARA
STANDARD LIBRARY
• Merupakan koleksi atau kaedah atau fungsi yang disediakan dan digunapakai
sewaktu implementasi dalam kod atur cara.
• Standard Library perlu ditakrifkan dalam spesifikasi bahasa pengaturcaraan.
• Standard Library juga merupakan sebahagian daripada arahan dalam atur cara
termasuk definisi bagi algoritma yang biasa digunakan, struktur data dan mekanisme
bagi input dan output.
KELEBIHAN
STANDARD LIBRARY
CONTOH ATURCARA
OUTPUT
124
MENGGUNAKAN STANDARD LIBRARY
3.1 3.1.6 DALAM ATUR CARA
math.js
• math.js ialah standard library yang kerap digunakan dalam Javascript.
• Terdiri daripada fungsi build-in dan pemalar dengan pelbagai jenis data seperti
nombor.
• Standard Library dalam Javascript berada pakej “ .js” dan perlu disimpan dahulu.
• Seterusnya math.js akan dimuatkan dan seterusnya boleh digunakan dalam atur
cara.
FUNGSI PENERANGAN
math.add (x,y) Menambah dua nombor
math.divide (x,y) Membahagi dua nombor
math.subtract(x,y) Menolak dua nombor
math.pow (x,y) Mengira kuasa kepada nombor
math.sqrt (x) Mengira punca kuasa bagi nombor
math.cube(x) Mendarab tiga nombor yang sama ( x * x *)
CONTOH ATURCARA
125
MERINGKASKAN ATUR CARA DENGAN
3.1 3.1.7 MENGGUNAKAN PROCEDURE, FUNCTION
SUBATUR CARA
• Satu atur cara Javascript mempunyai banyak barisan arahan yang dihimpunkan
dalam satu blok kod yang dikenali sebagai modul.
• Barisan arahan tersebut boleh dipecahkan mengikut tugas masing-masing dan
dihimpunkan dalam modul yang berasingan yang dipanggil subatur cara.
Prosedur (Procedure)
JENIS
SUBATUR CARA
Fungsi (Function)
<Script>
Satu Modul
</Script>
Modul
(Subatur cara
</Script> Modul 3 prosedur)
126
Modul utama yang dipecahkan
MERINGKASKAN ATUR CARA DENGAN
3.1 3.1.7 MENGGUNAKAN PROCEDURE, FUNCTION
CONTOH ATURCARA
MERINGKASKAN ATUR CARA DENGAN
3.1 3.1.7 MENGGUNAKAN PROCEDURE, FUNCTION
PARAMETER
• .Parameter atau argument membolehkan prosedur dan fungsi menghantar nilai
(pemanggil) dan diterima oleh prosedur dan fungsi yang dipanggil.
• Parameter rasmi (formal parameter) digunakan untuk merujuk parameter bagi
subatur cara yang dipanggil.
• Parameter sebenar (actual parameter) digunakan untuk merujuk pemboleh ubah
didalam subatur cara pemanggil.
CONTOH ATURCARA
MEMULANGKAN NILAI
• Fungsi (function) akan mengembalikan kawalan kepada pemanggil.
• Sesetengah Fungsi (function) juga mengembalikan nilai.
CONTOH ATURCARA
MEMBINA ATUR CARA YANG MELIBATKAN
3.1 3.1.8 PENGGUNAAN TATASUSUNAN (ARRAY)
TATASUSUNAN
• Penggunaan tatasusunan adalah untuk menyimpan satu senarai nilai dalam satu
pemboleh ubah.
CONTOH ATURCARA
MEMBINA ATUR CARA YANG MELIBATKAN
3.1 3.1.8 PENGGUNAAN TATASUSUNAN (ARRAY)
CONTOH ATURCARA
MEMBINA ATUR CARA YANG MELIBATKAN
3.1 3.1.8 PENGGUNAAN TATASUSUNAN (ARRAY)
CONTOH ATURCARA
MENGHASILKAN ATUR CARA INTERAKTIF YANG
3.1 3.1.9
MENGANDUNGI PENGISYTIHARAN DATA,
STRUKTUR KAWALAN, PROCEDURE DAN
FUNCTION SERTA TATASUSUNAN
CONTOH ATURCARA
MENGHASILKAN ATUR CARA INTERAKTIF YANG
3.1 3.1.9
MENGANDUNGI PENGISYTIHARAN DATA,
STRUKTUR KAWALAN, PROCEDURE DAN
FUNCTION SERTA TATASUSUNAN
CONTOH ATURCARA
5 1 4 3 2
1 2 3 4 5
MENGHASILKAN ATUR CARA INTERAKTIF
3.1 3.1.9
YANG MENGANDUNGI PENGISYTIHARAN
DATA, STRUKTUR KAWALAN, PROCEDURE
DAN FUNCTION SERTA TATASUSUNAN
CONTOH ATURCARA
<html>
<body>
<p> Senarai nama sebelum diisih : </p>
<button onclick = "SebelumIsih()" > Sebelum Isih </button>
<script>
function sebelumIsih()
{
var no = [5,1,4,3,2];
document.write(no);
}
</script>
<script>
function selepasIsih()
{
var no = [ 5,1,4,3,2];
var panjang = no.lengtgh,i,j;
var sementara;
isihanBuih (no,panjang,sementara);
}
</script>
<script>
function isihanBuih (no,panjang,sementara)
{
var i,j;
CONTOH ATURCARA
CONTOH ATURCARA
MENGHASILKAN ATUR CARA INTERAKTIF
3.1 3.1.9
YANG MENGANDUNGI PENGISYTIHARAN
DATA, STRUKTUR KAWALAN, PROCEDURE
DAN FUNCTION SERTA TATASUSUNAN
CONTOH ATURCARA
3.2.1
3.2.2
3.2.3
3.2.4
• Menggunakan data yang diimport dari fail teks untuk menyelesaikan masalah.
3.2.5
3.2.6
3.2.7
3.2.8
3.2.9
• Membina daftar (sign up) dan log masuk (login) pada laman web
3.2.10
137
MENJELASKAN FUNGSI LAMAN WEB
3.2 3.2.1
SEBAGAI PENGHUBUNG ANTARA
PENGGUNA DENGAN SISTEM DALAM
RANGKAIAN
KONSEP PELAYAN
• Berasaskan pengagihan fungsi antara klien dan pelayan.
• Klien : apa-apa mesin atau proses yang memohon servis yang spesifik daripada
pelayan.
• Pelayan : Mesin atau proses yang memberikan servis kepada klien.
• Proses klien dan pelayan ini boleh berlaku dalam satu system komputer yang
sama atau dalam satu system komputer yang berbeza yang dihubungkan melalui
rangkaian.
• Dalam persekitaran internet dan rangkaian, pelayar web (web browser) akan
bertindak sebagai klien manakala pelayan web (web server) pula adalah pelayan.
MENJELASKAN FUNGSI LAMAN WEB
3.2 3.2.1
SEBAGAI PENGHUBUNG ANTARA
PENGGUNA DENGAN SISTEM DALAM
RANGKAIAN
Mencipta Menyunting
Membuka Fail Membaca data
Menulis data
OPERASI ASAS
FAIL TEKS
SINTAKS CONTOH
$f = fopen (“nama fail teks”,mod capaian); $f = fopen (“LogMasuk.txt ”, “w”);
w Fail dibuka hanya untuk ditulis sahaja (bermula dari awal fail)
CONTOH ATURCARA
<?php
fclose ($f);
?>
CONTOH ATURCARA
MENGGUNAKAN BAHASA PENSKRIPAN
3.2 3.2.3 PELAYAN UNTUK MEMBINA LAMAN WEB
YANG UNIK BAGI SETIAP PENGGUNA
CONTOH ATURCARA
CONTOH ATURCARA
MENGGUNAKAN DATA YANG DIIMPORT
3.2 3.2.5 DARIPADA FAIL PANGKALAN DATA UNTUK
MENYELESAIKAN MASALAH
CONTOH ATURCARA
MELAKUKAN PENGESAHSAHIHAN
3.2 3.2.6 (VALIDATION) PADA DATA INPUT
DARIPADA PENGGUNA
Pastikan kandungan medan input yang wajib diisi dengan data tidak kosong.
Semak kandungan medan input sama ada mematuhi format yang ditetapkan.
Semak kandungan medan input untuk angka sama ada memenuhi kriteria.
CONTOH ATURCARA
MEMBINA (CREATE), MENGEMAS KINI
3.2 3.2.7
(UPDATE), MEMBUAT SANDARAN
(BACKUP), DAN MEMULIHKAN (RESTORE)
PANGKALAN DATA
CONTOH
CONTOH
MEMBINA DAFTAR (SIGN UP) DAN LOG
3.2 3.2.9 MASUK (LOGIN) PADA LAMAN WEB
CONTOH
CONTOH
MENGHASILKAN ATUR CARA YANG
3.2 3.2.10
DAPAT MENGESAHKAN PENGGUNA DAN
MENGEMAS KINI DATA DALAM
PANGKALAN DATA
PENGEMASKINIAN DATA
• Untuk mengemas kini data dalam pangkalan data, kita memerlukan pencarian rekod
yang hendak dikemaskini terlebih dahulu dalam jadual (table) pangkalan data.
PANGKALAN
DATA
CONTOH
3.3.1
• Mengkaji dan merumus prinsip reka bentuk laman web dari sudut
kesesuaian pengguna dan tujuan laman web
3.3.2
3.3.3
3.3.4
3.3.5
3.3.6
3.3.7
Jenis
Persekitaran
Keseimbangan
Web Perbezaan
Visual
elemen
PRINSIP
Navigasi ASAS REKA Penekanan
Maklumat
BENTUK
LAMAN WEB
Warna dan
Typography
grafik
MENGKAJI DAN MERUMUS PRINSIP REKA
3.3 3.3.1
BENTUK LAMAN WEB DARI SUDUT
KESESUAIAN PENGGUNA DAN TUJUAN
LAMAN WEB
KEPELBAGAIAN SISTEM
KOMPUTER DAN ▪ Pereka web harus memastikan laman web yang dipaparkan
PERANTI MUDAH ALIH perlu fleksibel, selari dengan kepelbagaian komputer dan
YANG DIGUNAKAN peranti pengguna.
OLEH PENGGUNA
KEPELBAGAIAN SAIZ ▪ Pereka web harus memastikan laman web yang dipaparkan
PAPARAN MONITOR perlu fleksibel, selari dengan kepelbagaian saiz skrin
YANG DIGUNAKAN pengguna.
MENGKAJI DAN MERUMUS PRINSIP REKA
3.3 3.3.1
BENTUK LAMAN WEB DARI SUDUT
KESESUAIAN PENGGUNA DAN TUJUAN
LAMAN WEB
TYPOGRAPHY
• Merujuk kepada penyusunan teks yang akan dipaparkan dalam laman web.
• Penyusunan teks yang baik memudahkan pemahaman dalam proses pembacaan dan
juga meningkatkan elemen mesra pengguna dalam laman web.
• Terdapat beberapa corak penyusunan teks bagi laman web. Corak-corak ini boleh
digunakan mengikut gaya pembacaan pembaca.
• Contoh corak penyusunan teks : Corak paparan berasaskan kertas, corak paparan
secara Z-Shaped , Corak paparan secara Z-Shaped.
• Pemilihan jenis font juga penting.
• Pemiilahan font yang kurang biasa digunakan boleh menyebabkan sesetengah sistem
pengoperasian tidak menyokong jenis font tersbut dan mempunyai masalah untuk
memaparkan kandungan web.
dibina.
NAVIGASI
• Merujuk kepada struktur laman web yang akan memudahkan seseorang pengguna
melayarinya.
• Navigasi web yang bagus seharusnya memberikan petunjuk kepada pelawat laman
web tentang kedudukan atau lokasi semasa pengguna.
Menu
Bar Navigasi Breadcrumbs Pautan grafik Site Map
Drop- down
KESEIMBANGAN VISUAL
• Merujuk kepada gabungan elemen visual seperti garisan, imej, teks, bentuk dan
warna dalam laman web.
• Pereka laman web perlu peka tentang pengguna sasaran laman web tersebut.
PENSTRUKTURAN KANDUNGAN
• Kunci kejayaan penghasilan suatu laman web bergantung kepada cara laman web itu
berfungsi.
• Perhatian yang lebih perlu diberikan untuk menentukan cara maklumat dalam laman
web dapat dicapai dan pendekatan yang sesuai bagi pengguna untuk mendapatkan
maklumat.
Penstrukturan
Halaman
Penstrukturan
PROSES MEREKA Reka bentuk
kandungan atau BENTUK KERANGKA antara muka
maklumat APLIKASI
Reka bentuk
navigasi
• Setiap reka bentuk yang bakal dihasilkan perlu berasaskan pengguna atau
pengalaman pengguna semasa melayari laman web.
• Penglibatan pengguna semasa proses pengumpulan maklumat sangat penting.
• Contoh aktiviti : mengadakan sesi temu bual, mengedarkan borang soal selidik atau
membuat tinjauan cara laman web digunakan.
PENGELASAN MAKLUMAT
• Mengelaskan senarai maklumat kepada beberapa kategori.
• Pereka bentuk maklumat boleh melihat persamaan maklumat yang
ada bagi mewujudkan kemungkinan-kemungkinan kategori yang
perlu ada.
• Maklumat atau informasi ialah suatu yang subjektif dan corak
pengelasan maklumat boleh berbeza-beza bergantung pada
perspektif pereka web.
• Pereka perlu menetapkan bilangan kategori maklumat yang perlu
ada bersesuaian dengan senarai maklumat yang tersedia dan
bagaimana setiap kategori tersebut akan divisualkan dalam laman
web yang bakal dibina.
• Gunakan gambarajah atau carta alir bagi menunjukkan hubungkait
bagi setiap kategori maklumat yang ada.
• Ini mampu memberikan idea atau gambaran kasar tentang corak
pautan laman web yang bakal dibina.
PENSTRUKTURAN HALAMAN
Hierarki
GAYA
PENSTRUKTURAN Jujukan
HALAMAN
Kompleks
GAYA KETERANGAN
PENSTRUKTURAN
SECARA HIERARKI LAMAN UTAMA
Subseksyen-subseksyen
PENSTRUKTURAN
SECARA JUJUKAN
• Pengguna LAMAN UTAMA
dipandu dari
halaman ke
halaman.
• Sesuai untuk
laman web
penceritaan / FOTO 1 FOTO 2 FOTO 3 FOTO 4
kronologi
BAR
TOOLBAR
NAVIGASI
PETA TAPAK
BREADCRUMBS
(SITEMAP)
MENU
DROP-DOWN
MEMBINA LAMAN WEB MUDAH
3.3 3.3.3 DENGAN MENGGUNAKAN HTML
Struktur HTML
ATURCARA OUTPUT
<html>
<head>
<title> Tajuk Laman Web</title>
</head>
<body>
Selamat Datang
</body>
</html>
MEMBINA LAMAN WEB MUDAH
3.3 3.3.3 DENGAN MENGGUNAKAN HTML
ATURCARA OUTPUT
<html>
<head>
<title> Tajuk Laman Web</title>
</head>
<body>
<h1> Contoh heading 1 </h1>
<h2> Contoh heading 2 </h2>
<h3> Contoh heading 3 </h3>
<h4> Contoh heading 4 </h4>
<h5> Contoh heading 5 </h5>
<h6> Contoh heading 6 </h6>
</body>
</html>
ATURCARA OUTPUT
<html>
<head></head>
<body>
<header>
<h1> Nilai-nilai Murni </h1>
<hr>
<h4> Definisi Nilai-nilai Murni </h4>
</header>
<p> Nilai-nilai murni sewajarnya diterapkan dalam diri
setiap murid sejak awal. </p>
</body>
</html>
MEMBINA LAMAN WEB MUDAH
3.3 3.3.3 DENGAN MENGGUNAKAN HTML
ATURCARA OUTPUT
<html>
<head></head>
<body>
<p> Ini ialah perenggan pertama </p>
<p> Ini ialah perenggan seterusnya </p>
</body>
</html>
ATURCARA OUTPUT
<html>
<head></head>
<body>
<p> Perenggan ini <br> digunakan bersama <br>
elemen line break </p>
</body>
</html>
MEMBINA LAMAN WEB MUDAH
3.3 3.3.3 DENGAN MENGGUNAKAN HTML
ATURCARA OUTPUT
<html>
<body>
<img src = " http://hddfhm.com/images/clipart-
html-5.jpg"
style = width:128px;height :128px">
</body>
</html>>
ATURCARA
<html>
<head><title>Contoh Atur cara </title></head>
<body>
<h2>Tentang Saya</h2>
<img src = "https://classroomclipart.com/images/gallery/Computers/TN_teenage-girl-working-on-laptop-clipart-
623.jpg">
<p> Nama saya Suriana binti Shuib. Saya berumur 17 tahun. Saya bersekolah di Sekolah Menengah Seri Intan. Saya
mempunyai keluarga yang bahagia </P>
<p> Saya gemar melayari Internetdi masa lapang. Namun, tidak semua yang berita yang dipaparkan itu betul. Untuk
mengetahui kesahihannya, kita boleh merujuk kepada laman web
<a href = "http://sebenarnya.my"><h4> sebenarnya.my</h4></a>
</p>
<br>
<center>
<iframe height = "40%" src = "http://sebenarnya.my"></iframe>
</center>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
ATURCARA OUTPUT
<html>
<head>
<title>Tanpa Penggunaan CSS </title>
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
<html>
<head>
<title>Penggunaan CSS </title>
<style>
h1 { color:blue;}
</style>
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
HELAIAN GAYA
HELAIAN GAYA LUAR GAYA DALAM BARISAN
DALAMAN
(External Style Sheet) (Inline Style)
(Internal Style Sheet)
• Tag gaya akan ditulis dan • Tag gaya boleh ditulis • Tag gaya akan ditulis pada
disimpan di dalam satu fail sama ada di dalam bahagian/elemen tag.
dan fail itu mesti kawasan <head> atau
mempunyai extension <body>.
“CSS”. • Letakkan <style>
• Fail tersebut akan
dipanggil daripada tag
HTML dengan
menggunakan sintaks.
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
ATURCARA
h1 { color: blue;}
<html>
<head>
<title>Penggunaan CSS </title>
<link rel = "stylesheet" type = text/css“ href= "style1.css">
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
OUTPUT
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
ATURCARA OUTPUT
<html>
<head>
<title>Penggunaan CSS </title>
<style>
h1 { color:blue;}
</style>
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
<html>
<head>
<title>Penggunaan CSS </title>
</head>
<body>
<style>
h1 { color:blue;}
</style>
<h1>Laman Web Sekolah</h1>
</body>
</html>
ATURCARA OUTPUT
<html>
<head>
<title>Penggunaan CSS </title>
</head>
<body>
<h1 style = "color:blue";> Laman Web Sekolah</h1>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
ATURCARA OUTPUT
<html>
<head>
<title>Penggunaan CSS </title>
<style>
h1 { color:red;}
</style>
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
ATURCARA OUTPUT
<html>
<head>
<title>Keluarga Fon </title>
</head>
<body>
<h1 style="font-family:Arial Black;">Laman Web
Sekolah</h1>
<h
</body>
</html>
ATURCARA OUTPUT
<html>
<head>
<title>Warna Latar Belakang </title>
</head>
<Style>
body
{ background-color : lightgreen;
}
</style>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
ATURCARA OUTPUT
<html>
<head>
<title>Gaya Jadual </title>
</head>
<Style>
table
{ border : 1px solid; }
</style>
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
ATURCARA OUTPUT
html>
<head>
<title>Gaya Jadual </title>
</head>
<Style>
table, th,td
{ border : 1px solid;}
</style>
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
ATURCARA OUTPUT
html>
<head>
<title>Gaya Jadual </title>
</head>
<Style>
table {border-collapse: collapse;}
table, th,td
{ border : 1px solid;}
</style>
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
ATURCARA OUTPUT
html>
<head>
<title>Gaya Jadual </title>
</head>
<Style>
table {border-collapse: collapse;}
table, th,td
{ border : 3px solid;}
</style>
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
ATURCARA OUTPUT
html>
<head>
<title>Gaya Jadual </title>
</head>
<Style>
table {border-collapse: collapse;}
table, th, { border : 3px solid;}
td { border : 2px dashed;}
</style>
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
<body>
<h1>Laman Web Sekolah</h1>
<table>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
<body>
<h1>Laman Web Sekolah</h1>
<table cellpadding="20">
<tr>
<th> KANDUNGAN LAMAN WEB </th>
</tr>
<tr>
<td> Pengenalan Sekolah </td>
</tr>
<tr>
<td> Senarai Guru </td>
</tr>
</table>
</body>
</html>
ATURCARA OUTPUT
<html>
<head>
<title>Gaya Border </title>
<Style>
h1
{
border-style: solid;
border-width : 5px;
}
</style>
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
ATURCARA OUTPUT
<html>
<head>
<title>Gaya Border </title>
<Style>
h1
{
border-style: dashed;
border-width : 5px;
border-color : red;
}
</style>
</head>
<body>
<h1>Laman Web Sekolah</h1>
</body>
</html>
MENGGUNAKAN CSS UNTUK
3.3 3.3.4 MENGGAYAKAN
ATURCARA OUTPUT
<html>
<head>
<title>Tanpa Gaya Position </title>
</head>
<body>
<h1>Laman Web Sekolah (Absolute)</h1>
<h2>Sekolah 1 (Relative)</h2>
<h3>Sekolah 2 (Fixed)</h3>
<h4>Sekolah 3 (Static)</h4>
</body>
</html>
ATURCARA OUTPUT
<html>
<head>
<title> Gaya Position </title>
<style>
h1 { background-color : lightgreen; position :
absolute; width : 40%; top : 10px; left : 50px; height : 100px;
}
h2 { background-color : lightpink; position :
ralative; width : 30%; top : 70px; left : 3000px; height :
100px; }
h3 { background-color : lightblue; position :
fixed; width : 70%; bottom : 10px; left : 200px; height :
100px; }
h4 { background-color : lightgrey; position : static;
width : 10%; bottom : 70px; left : 200px; height : 100px; }
</style>
</head>
<body>
<h1>Laman Web Sekolah (Absolute)</h1>
<h2>Sekolah 1 (Relative)</h2>
<h3>Sekolah 2 (Fixed)</h3>
<h4>Sekolah 3 (Static)</h4>
</body>
</html>
MENGGUNAKAN BAHASA
3.3 3.3.5 PENSKRIPAN KLIEN UNTUK
MEMBINA LAMAN WEB PENGGUNA
PENGESAHAN DATA
ATURCARA
<html>
<body>
Nama Anda:
<input id = "n1">
<button type = "button" onclick = "semakData()"> Pengesahan Nama</button>
<script>
function semakData(){
var teksnama;
teksnama = document.getElementByid("n1").value;
OUTPUT
MENGGUNAKAN BAHASA
3.3 3.3.5 PENSKRIPAN KLIEN UNTUK
MEMBINA LAMAN WEB PENGGUNA
PENGESAHAN DATA
ATURCARA
<html>
<body>
Nombor Giliran:
<input id = "n2">
<button type = "button" onclick = "semakNombor()">Pengesahan Nombor Giliran</button>
<script>
function semakNombor()
{
var teksnombor;
teksnombor = document.getElementById("n2").value;
if (isNaN (teksnombor))
{
window.alert("Nilai yang dimasukkan adalah bukan nombor. Sila masukkan nombor ");
}
}
</script>
</body>
</html>
OUTPUT
MENGGUNAKAN BAHASA
3.3 3.3.5 PENSKRIPAN KLIEN UNTUK
MEMBINA LAMAN WEB PENGGUNA
BUTANG RADIO
ATURCARA
<html>
<body>
<b> MOD PENGAJIAN </b>
<form action = " " >
<input type = "radio" name = "mod" id = "sepenuh"> Sepenuh Masa
<input type = "radio" name = "mod" id = "separuh"> Separuh Masa
<p>
<button type = "button" onclick = "semakMod()">Pengesahan Mod Pengajian</button>
</p>
</form>
<script>
function semakMod()
{
if (document.getElementById('sepenuh').checked == true)
{
window.alert("Mod Pengajian : SEPENUH MASA ");
}
else
{
if (document.getElementById('separuh').checked == true)
{
window.alert("Mod Pengajian : SEPARUH MASA ");
}
}
document.getElementById('sepenuh').checked == false;
document.getElementById('separuh').checked == false;
}
</script>
</body>
</html>
OUTPUT
MENGGUNAKAN BAHASA
3.3 3.3.5 PENSKRIPAN KLIEN UNTUK
MEMBINA LAMAN WEB PENGGUNA
ATURCARA
<html>
<body>
<b> SUBJEK-SUBJEK YANG INGIN DIDAFTAR </b>
<form action = " " name = "MyForm">
<input type = "checkbox" name = "sub" id = "Matematik"> Matematik
<input type = "checkbox" name = "sub" id = "English"> English
<input type = "checkbox" name = "sub" id = "Sains"> Sains
<input type = "checkbox" name = "sub" id = "Bahasa Malaysia"> Bahasa Malaysia
<p>
<button type = "button" onclick = "semakSubjek()">Pengesahan Subjek</button>
</p>
<p>
<textarea id = "SenaraiSubjek" rows = "10" cols = "30" value = "b"></textarea>
</p>
<p>
<button type = "button" onclick = "resetSubjek()">Reset Subjek</button>
</p>
</form>
<script>
function semakSubjek()
{
var elLength = document.MyForm.elements.length;
for (i=0;i<elLength; i++)
var type = MyForm.elements[i].type;
if (type=="checkbox" && MyForm.elements[i].checked)
{
document.getElementById("SenaraiSubjek").value += MyForm.elements[i].id+ '\n';
}
}
}
function resetSubjek()
{
var elLength = document.MyForm.elements.length;
document.getElementById("SenaraiSubjek").value ="";
for (i=0;i<elLength; i++)
{
MyForm.elements [i].checked-false;
}
}
</script>
</body>
</html>
MENGGUNAKAN BAHASA
3.3 3.3.5 PENSKRIPAN KLIEN UNTUK
MEMBINA LAMAN WEB PENGGUNA
OUTPUT
MENGGUNAKAN BAHASA
3.3 3.3.5 PENSKRIPAN KLIEN UNTUK
MEMBINA LAMAN WEB PENGGUNA
KOTAK ALERT
ATURCARA OUTPUT
<html>
<body>
Nama:
<input type = "text" >
<script>
alertMasuk();
function alertMasuk()
{
window.alert ("Anda perlu
memasukkan nama anda.");
}
</script>
</body>
</html>
KOTAK CONFIRM
ATURCARA OUTPUT
<html>
<body>
Nama:
<input type = "text" >
<button onclick =
"pastiHantar()">Hantar</button>
<script>
function pastiHantar()
{
if (window.confirm("Anda pasti?")==true)
{
document.write("Maklumat telah dihantar.");
}
}
</script>
</body>
</html>
MENGGUNAKAN BAHASA
3.3 3.3.6 PENSKRIPAN KLIEN UNTUK
MEMBINA LAMAN WEB PENGGUNA
KOTAK PROMPT
ATURCARA OUTPUT
<html>
<body>
<p>Sila klik butang berikut untuk masukkan nama anda,</p>
<button onclick = "masukNama()">Klik Masuk Nama</button>
<p id = "maklumat"> </p>
<script>
function masukNama()
{
var pengguna = window.prompt ("Sila Masukkan Nama Anda : ", "");
if (pengguna != null)
{
document.getElementById ("maklumat").innerHTML = "Hai " + pengguna + " ! Apa Khabar hari
ini? ";
}
}
</script>
</body>
</html>
OUTPUT
MENGGUNAKAN BAHASA PENSKRIPAN PELAYAN
UNTUK MEMBINA LAMAN WEB YANG BOLEH
3.3 3.3.6 MENCAPAI DAN MENGEMAS KINI DATA DALAM
PANGKALAN DATA
Menggunakan Bahasa
Mempunyai capaian Kandungan laman web
pengaturcaraan web Kandungan laman web
kepada pangkalan berubah mengikut
seperti PHP, ASP dan sering dikemaskini.
data. permintaan pengguna.
lain-lain.
Carian
Paparan maklumat
maklumat
yang diperoleh
berdasarkan
atas permintaan
Objek borang permintaan
daripada
(form) dalam kepada
pengguna laman web pengguna
MENGGUNAKAN BAHASA PENSKRIPAN PELAYAN
UNTUK MEMBINA LAMAN WEB YANG BOLEH
3.3 3.3.6 MENCAPAI DAN MENGEMAS KINI DATA DALAM
PANGKALAN DATA
CONTOH
CONTOH
190
191
192