SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

PENGENALAN KEPADA
LAMAN WEB

 Mendefinisikan terminologi konsep laman web

Mengetahui jenis laman web
Mengenalpasti jenis-jenis pelayar web (web browser) dan
pelayan web (web server)
Mengenalpasti tujuan laman web dinamik dibina
Menerangkan keperluan kandungan laman web

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

ISI KANDUNGAN

TERMINOLOGI KONSEP
LAMAN WEB

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

LnP 01.01 Pengenalan Kepada Laman Web

Website
Dynamic Website
Web Browser
Web Server
World Wide Web (WWW)
HyperText Resource Locator (HTTP)
Uniform Resource Locator (URL)
Domain dan hosting

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

TERMINOLOGI KONSEP
LAMAN WEB

JENIS LAMAN WEB

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

LnP 01.01 Pengenalan Kepada Laman Web

Peribadi
E-Commerce
Maklumat
Blog/Forum
Sosial
Perkongsian Fail
Hiburan
Mudah Alih (Mobile)

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

JENIS LAMAN WEB

PELAYAR WEB DAN PELAYAN

WEB

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

LnP 01.01 Pengenalan Kepada Laman Web

PELAYAR WEB

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

Pelayar web adalah merupakan satu perisian yang digunakan

untuk mencapai fail-fail yang tersimpan pada pelayan web.

PELAYAN WEB (SERVER)

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

Komputer yang menyimpan blok-blok maklumat / data yang

dipaparkan dalam laman web.

PEMBINAAN LAMAN WEB

DINAMIK

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

LnP 01.01 Pengenalan Kepada Laman Web

10

 Menghasilkan sebuah sistem pengurusan kandungan web

yang mengandungi pangkalan data bagi tujuan penyimpanan
maklumat.
Mementingkan interaksi antara pengguna dan pentadbir
sistem.

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

TUJUAN PEMBINAAN

11

KEPERLUAN KANDUNGAN
LAMAN WEB

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

LnP 01.01 Pengenalan Kepada Laman Web

12

SECONDARY
SAP 4101 PEMBANGUNAN SISTEM
BERASASKAN WEB

SASARAN PENGGUNA
PRIMARY

13

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

FORMAT KANDUNGAN

14

Main Content

Side bar

Footer
SAP 4101 PEMBANGUNAN SISTEM
BERASASKAN WEB

header
Navigation

15

Elemen-elemen
Teks
Grafik
Audio
Animasi
Video

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

REKA LETAK DAN

SUSUN ATUR LAMAN WEB

16

LnP 01.01 Pengenalan Kepada Laman Web

TEKS

CIRI TEKS
Penggunaan jenis teks adalah dari sans serif seperti Arial,
Tahoma, Verdana dan Century Gothic
Contoh teks jenis serif seperti Times New Roman, Courier
New.
Saiz yang disarankan untuk tajuk adalah bersaiz 36-40.
Saiz untuk teks perenggan adalah tidak kurang daripada 24.
Kombinasi warna teks dengan warna latar belakang adalah
kontras.
Contoh: putih dengan latar belakang biru. Ini membolehkan
teks yang disediakan mudah dibaca oleh pengguna.
18

CONTOH TEKS
Examples of San Serif fonts

Times New Roman

Bookman
Rockwell Light
Courier New
Century

Century Gothic
Arial
Comic Sans MS
Impact
Tahoma

Examples of Serif fonts

19

CONTOH WEB

20

LnP 01.01 Pengenalan Kepada Laman Web

IMEJ / GRAFIK

IMEJ / GRAFIK
Imej atau grafik yang digunakan bersesuaian dengan isi
kandungan laman web dan minat pengguna ke arah isi
kandungan atau mesej yang ingin disampaikan.
Saiz imej dari aspek fizikal dan saiz fail adalah kecil dan ini
membolehkannya cepat di muat turun dan seterusnya
dipaparkan pada komputer pengguna.
Format imej / grafik yang biasa digunakan adalah .jpeg, .gif,
.bmp, png.

22

LnP 01.01 Pengenalan Kepada Laman Web

ANIMASI

 Animasi ialah pertunjukan pantas urutan imejimej statik 2D atau 3D untuk mewujudkan ilusi
pergerakan
Saiz animasi yang diletakkan di dalam laman web
perlu bersesuaian dengan saiz kerangka laman
web tersebut.
Contoh : Shockwave file - .flv
Flash file - .swf
Graphic Interchange Format - .gif

24

LnP 01.01 Pengenalan Kepada Laman Web

VIDEO

 Video merupakan suatu siri frame yang mengandungi

beberapa gambar dan bunyi yang dimainkan dalam satu fasa
yang pantas.
Satu frame mengandungi satu gambar aksi yang tertentu.
Video Untuk Windows AVI *.avi
QuickTime -*.mov.
Moving Pictures Experts Group (MPEG) - *.mpg.

26

LnP 01.01 Pengenalan Kepada Laman Web

AUDIO

 Bentuk gelombang pada bunyi yang menerangkan tentang

amplitude, frekuensi dan kandungan yang harmoni
Macintosh - Audio Interchange File .aiff
Waveform Audio File - * .wav
Musical Instrument Digital Interface - .mid
MPEG3 - Motion Pictures Experts Group -.mp3

28

KEBAIKAN DAN KEBURUKAN

LAMAN WEB

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

LnP 01.01 Pengenalan Kepada Laman Web

29

Keburukan

a. Jenayah Siber
b. Perhubungan
dengan
manusia
C. Pornografi

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

a. Sumber
Maklumat
b. Komunikasi
c. Kemudahan
media sosial
Kebaikan

30

30

1.
2.
3.
4.
5.
6.
7.
8.
9.

Navigasi
Grafik
Logo
Resolution
Cara menghubungi
Objektif
Isi kandungan
Look and feel
Load

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

TIPS MENGHASILKAN
LAMAN WEB YANG BAIK

31

KESIMPULAN
32

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

PENGENALAN KEPADA
PEMBANGUNAN SISTEM
BERASASKAN WEB

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

LnP 01.02

33

 Fasa-fasa pembangunan sistem berasaskan web.

Perlaksanaan pembangunan sistem berasaskan web
melalui perisian.
Spesifikasi perkakasan dan perisian.
Cara instalasi perisian pembangunan sistem berasaskan
web.
Ketetapan (setting) pada perisian pembangunan sistem
berasaskan web.

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

KANDUNGAN

34

FASA-FASA PEMBANGUNAN
PEMBANGUNAN SISTEM BERASAKAN
WEB

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

LnP 01.02 Pengenalan Kepada Pembangunan

Sistem Berasaskan Web

35

Analisis
Reka bentuk
Pembangunan
Pengujian dan Penilaian

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

FASA-FASA PEMBANGUNAN
SISTEM BERASASKAN WEB

36

ANALISIS

MENGANALISA
DATA

MENULIS LAPORAN
PERINGKAT
ANALISA

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

MENGUMPUL DATA

37

 Menerangkan bagaimana sistem dapat memenuhi keperluan

pengguna.
Rekabentuk yang menggambarkan sistem baru atau sistem
yang telah diubahsuai.
Melibatkan rekabentuk logikal dan fizikal
Merekabentuk sistem seperti yang telah dirancangkan.

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

REKA BENTUK

38

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

Rekabentuk Pangkalan Data - Alatan seperti rajah hubungan entiti

(ERD), rajah aliran data (DFD)
Rekabentuk Antara Muka pengguna - Papancerita (Storyboard),
Sitemap (navigasi menu)

39

PEMBANGUNAN

Perisian
Pengarangan Web

Perisian Sokongan

Perisian
Pengaturcaraan /
Skrip

Perisian
Penyelenggaraan /
Pangkalan Data

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

Perisian
Multimedia

40

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

PERISIAN PEMBANGUNAN LAMAN WEB

41

PENGUJIAN

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

Objektif pengujian unit dan integrasi adalah untuk

memastikan kod telah mengimplementasikan rekabentuk.
Pengujian sistem: memastikan sistem melaksanakan apa yang
pelanggan kehendaki

42

Ujian
FUNGSI

Keperluan
perisian yang
lain

Persekitaran
pelanggan

Keperluan
pelanggan

Ujian

Ujian

PRESTASI

PENERIMAAN

Sistem yang
berfungsi
Modul yang
dintegrasikan

Spesifikasi

Perisian yang disah,

dinilai

Ujian
PEMASANGAN

Sistem yang
diterima
SISTEM
DIGUNAKAN!

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

Keperluan
fungsian sistem

43

PERLAKSANAAN PEMBANGUNAN
SISTEM BERASASKAN WEB MELALUI
PERISIAN

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

LnP 01.02 Pengenalan Kepada Pembangunan

Sistem Berasaskan Web

44

HTML
CSS
PHP
Dreamweaver
XAMPP
MySQL

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

PERLAKSANAAN PEMBANGUNAN
SISTEM BERASASKAN WEB
MELALUI PERISIAN

45

CARA INSTALASI DAN KETETAPAN

SETTING PERISIAN PEMBANGUNAN
SISTEM BERASASKAN WEB

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

LnP 01.02 Pengenalan Kepada Pembangunan Sistem

Berasaskan Web

46

PERISIAN

ADOBE
DREAMWEAVER

ADOBE
PHOTOSHOP

XAMPP

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB

PEMBANGUNAN
SISTEM BERASASKAN
WEB

47

KESIMPULAN
48

SAP 4101 PEMBANGUNAN SISTEM

BERASASKAN WEB