Pembangunan Laman Web TTM 311

BAB 1: PEMBINAAN LAMAN WEB

ISTILAH-ISTILAH INTERNET

1. WWW
- Salah satu perkhidmatan yang terdapat di internet.
- Satu jalinan maklumat berasaskan hyperteks yang mempunyai ciri-ciri friendly user, grafik, video,
audio dll.
- Koleksi maklumat-maklumat yang besar yang boleh didapati di internet
- Yang diwujudkan oleh Tim Berbers-Lee

2. Web server
- merupakan komputer untuk tujuan khas – untuk gabungkan laman-laman web melalui hyperlinks

3. Web browser
- program yang digunakan untuk melihat/membuka laman web
- cth: Netscape Navigator, Microsoft Internet Explorer,Mosaic,NeoPlanet,OPERA.
- membenarkan pengguna melayari web dengan klik pada perkataan/gambar tertentu pada laman
web.
- Ada 2 jenis web browser
a. Text only browser
 LYNX
 CELLO
b. Graphical browser
 Netscape
 IE

4. HTML – HyperText Markup Language

- semua laman web ditulis dengan HTML
- satu cara standard utk masukkan tags ke dalam dokumen/fail untuk tunjukkan bagaimana teks
tersebut dipaparkan pada skrin di browser.
- Fail HTML mesti disimpan dalam teks file dengan extension *.htm atau *.html
- Ditulis dalam format ASCII dan boleh dibaca oleh semua platform (UNIX, SimpleText pada
Macintosh dan Notepad pada Windows)

5. URL – Uniform Resource locators

- merupakan alamat dalam web.
- alamat internet anda, ini bertujuan memudahkan pengunjung lain untuk melihat laman web anda
dengan hanya menaip alamat internet anda
- Ada 2 jenis :
a. Domain name
 Cth: www.jaring.com.my
b. IP address
 Cth : 216.85.237.21

http://www.upsi.edu.my/fakulti/fst.html

protokol domain Nama Direktori/nam

6. Hyperlink server a fail
- untuk menghubungkan laman web

7. Web pages
- www mempunyai jutaan web pages (dokumen web) yang ditulis dalam kod HTML
- setiap web pages adalah fail komputer
- Suatu halaman tunggal yg mengandungi teks dan grafik yang telah dilabelkan dgn kod-kod HTML
yang bersesuaian untuk web

8. Web site

1 Farah Waheda Othman

Pembangunan Laman Web TTM 311

- tempat dalam komputer di internet kita simpan web pages

- Suatu himpunan halaman web yang berkait dan mempunyai pelbagai kandungan yang boleh
diterokai dengan mudah menggunakan pelayar web
9. Home page
- laman mula bagi web site
- seperti jadual kandungan

10. Search engine

- alatan / tool yang digunakan untuk mengesan laman web di seluruh dunia dan mencari item yang
kita nak

11. ISP – Internet Service Provider

- perniagaan yang berhubung kepada individu atau syarikat dengan percuma atau bayaran
- Cth : di Malaysia – Jaring oleh MIMOS dan TMnet oleh Telekom.

12. Wizard
- Suatu ciri yang memandu secara langkah demi langkah melalui proses tertentu dalam FrontPage
seperti mencipta sesuatu tapak web baru

13. HTTP - Hypertext Transfer Protokol

14. DHTML - Dynamic Hypertext Markup Language

15. - File Tranfer Protocol

- bertujuan untuk mengalih fail dari satu komputer ke komputer yang lain dalam internet

TUJUAN MEMBINA LAMAN WEB

 Untuk dikenali diseluruh dunia
 Untuk pengiklanan
 Untuk penjualan barangan
 Untuk menjalin hubungan
 Untuk berkomunikasi
 Untuk besuka-ria
 Hiburan
 Berkongsi pengetahuan
 Memperkenalkan Negara

FAKTOR YANG PERLU DIKENALPASTI SEBELUM MEMBINA LAMAN WEB

 Kenalpasti sararan pengguna
- Samada pengguna terdiri daripada kanak-kanak, remaja, dewasa, dsb
 Kenalpasti keperluan
- Keperluan terdiri daripada 2 iatu perkakasan dan perisian
- Perkakasan : Set komputer.
- Perisian : Microsoft FrontPage, Macromedia Dreamweaver, Notepad
 Kenalpasti fungsi laman web
- Berkait rapat dengan pemilik laman.
- Cth: Pembina laman amat berminat dalam pernanaman buah-buahan, maka fungsi laman
yang dibangunkan adalah memberi maklumat dalam bidang tersebut.
 Kenalpasti gaya & rekabentuk
- Gaya laman web
- Rekabentuk laman web
- Cth: Gaya dan rekabentuk hendaklah bersesuaian dan dapat menarik minat pengguna.
 Kenalpasti elemen-elemen yang perlu dimasukkan
- Elemen-elemen yang perlu dimasukkan antaranya : Teks, audio, video, animasi, grafik.
- Cth: Lagu latar yang tenang semasa pengguna melayari laman web
 Kenalpasti penyampaian sesuatu maklumat

2 Farah Waheda Othman

Pembangunan Laman Web TTM 311

- Maklumat yang tepat/berkesan

- Maklumat yang terkini
- Cara penyampaian maklumat
- Pengolahan Maklumat
- Keberkesanan maklumat yang dipaparkan

JENIS LAMAN WEB (Kategori kandungan laman web)

1. Advocacy web page
 Mengandungi idea, pandangan, pendapat untuk meyakinkan pengguna/pembaca
2. Business/Marketing web page
 Mengandungi promosi, jualan barangan atau perkhidmatan
3. Infomational web page
 Mengandungi maklumat-maklumat fakta
4. News web page
 Mengandungi berita-berita terkini yang berkaitan sukan, kehidupan, wang, cuaca dll
5. Portal web page
 Mengandungi pelbagai perkhidmatan internet seperti email,searche engine,berita terkini dll.
6. Personal web page
 Web individu yang tak berkait dengan mana-mana organisasi.

ELEMEN-ELEMEN HALAMAN WEB

1. Teks
2. Grafik
3. Audio
4. Video
5. hyperlink

PERISIAN PEMBANGUNAN WEB

- Terdapat beberapa kategori Editor HTML, antaranya ialah:
- Perisian editor teks ringkas
 Memerlukan pengetahuan mendalam dalam bahasa HTML.
 Cth : Notepad, Wordpad
- Perisian berasaskan pemproses perkataan
 Memerlukanpengetahuan asas dalam mengendalikan perisian pemproses
 Cth : Microsoft Word dan Word Perfect
 Kurang digunakan kerana timbul banyak kekangan dan masalah semasa
pembangunan dan larian web
- Perisian berasaskan editor tag HTML
 Memerlukan kemahiran menggunakan kod atau tag HTML dan pengguna nak
menggunakan skrip seperti JavaScript,ASP,PHP.
 Cth: Micromedia Homesite dan Microsoft Visual Interdev.
- Perisian berasaskan pendekatan WYSIWYG
 Menggunakan pendekatan perisian tag editor dengan perisian pemproses
perkataan.
 Menyediakan kuasa kawalan tag HTML yang akan dihasilkan secara automatic
oleh perisian tersebut.
 Cth : Microsoft FrontPage,Macromedia Dreamweaver, NetObjects Fusion.

3 Farah Waheda Othman

Pembangunan Laman Web TTM 311

KOD HTML
- HTML – hypertext Markup Language
- Bahasa yang digunakan untuk membangunkan sesebuah halaman web dalamWWW.
- Secara dasarnya adalah set kod penanda yang dipanggil tag.
- Biasanya tag beroperasi secara berpasangan. Cth:

<B>Teks tebal</B>
- Struktur asas kod HTML

<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

- Selain itu,terdapat elemen sokongan yang biasa digunakan seperti elemen tag TITLE yang
digunakan seperti berikut :

<HTML>
<HEAD>
<TITLE>Tajuk Halaman Web</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Ciri-ciri Dokumen HTML.

1. Warna latar belakang dokumen
- Kod :
<BODY BGCOLOR=”#FF0000”></BODY>
- Contoh kod warna :
Warna Kod warna
Putih #FFFFFF
Hitam #000000
Merah #FF0000
Hijau #00FF00
Biru #0000FF
Magenta #FF00FF
Cyan #00FFFF
Kuning #FFFF00
Coklat #5C3317
Violet #9F5F9F
Merah Jambu #FF6EC7
Oren #FF7F00

2. Imej latar belakang dokumen

- Kod :
<BODY BACKGROUND=”logo.gif”></BODY>

4 Farah Waheda Othman

Pembangunan Laman Web TTM 311

3. Pautan atau links dalam dokumen

a. TEKS
- Kod :
<A HREF=”#nama pautan”>teks yang ingin dipautkan</A>

cth: <A HREF=”hobi.htm”>KLIK SINI</A>

b. IMEJ
- Kod :
<IMG SRC=”#nama fail”>

4. Pembahagi atau pemisah medan

a. Paragraph
- Kod :
<P ALIGN=”CENTER”>
Ini merupakan contoh perenggan di dalam dokumen HTML. Ruang Kosong akan
diabaikan memandangkan setiap perkataan dipisahkan oleh aksara space
</P>

b. Line Breaks
- Kod :
<P>
Ini merupakan baris perkataan yang pertama
<BR>
Ini pula teks yang dimulakan pada satu barisan yang baru tetapi bukan pada perenggan
yang baru.
</P>

5. Senarai atau lists

a. Ordered lists
- Kod :
<OL>
<LI>Item nombor 1
<LI>Item nombor 2
<LI>Item nombor 3
</OL>
b. Unordered lists
- Kod :
<UL>
<LI>Item nombor 1
<LI>Item nombor 2
<LI>Item nombor 3
</UL>

6. Penggunaan jadual
- Kod :
<TABLE BORDER=5>
<TR>
<TH>Lajur 1</TH>
<TH>Lajur 2</TH>
</TR>

<TR>
<TH>Sel 1a</TH>
<TH>Sel 1b</TH>
</TR>
<TR>
<TH>Sel 2a</TH>

5 Farah Waheda Othman

Pembangunan Laman Web TTM 311

<TH>Sel 2b</TH>
</TR>
</TABLE>

7. Menetapkan format teks HTML

a. Bold
- Kod :
<B>Halaman web saya</B>

b. Italic
- Kod :
<I>Halaman web saya</I>

c. Heading
- Kod :
<H1>Halaman web saya</H1>
<H2>Halaman web saya</H2>
<H3>Halaman web saya</H3>
<H4>Halaman web saya</H4>
<H5>Halaman web saya</H5>
<H6>Halaman web saya</H6>

6 Farah Waheda Othman

Pembangunan Laman Web TTM 311

BAB 2 : PENGENALAN ANTARAMUKA MICROSOFT FRONTPAGE XP

CIRI-CIRI YANG MENARIK YANG ADA PADA MICROSOFT FRONTPAGE

 Menu tersusun untuk menyenangkan capaian

 Tidak perlu menggunakan bahasa/kemahiran dalam HTML
 Dapat menerima grafik/imej
 Dapat menggunakan bantuan (help)
 Mesra pengguna (friendly user)

KEMUDAHAN DALAM MS FRONTPAGE

a. Bar menu bagi Microsoft Frontpage

i. Menu file
- mengandungi semua arahan yang berkaitan dengan pengurusan fail frontpage atau helaian
halaman web yang di bina seperti membina fail baru, membuka dan menutup fail.
ii. Menu edit
– Mengandungi semua arahan yang berkaitan dengan proses pengubahsuaian fail frontpage
atau helaian halaman web yang dibina seperti arahan menyalin dan menampal bahagian teks
iii. Menu view
– Mengandungi semua arahan yang berkaitan dengan rupa bentuk paparan fail frontpage atau
helaian halaman web di skrin
iv. Menu insert
– Mengandungi semua arahan yang berkaiatan dengan proses penambahan elemen dalam fail
frontpage atau helaian yang dibina
v. Menu format
– Mengandungi semua arahan yang berkaitan dengan proses penyemakan keatas setiap teks
yang ditaip di helaian laman web

b. Tetingkap Di Microsoft Frontpage XP

- terdapat 6 tetingkap utama iaitu:
a. Tetingkap Page
 Memaparkan fail halaman web dalam format HTML bagi tujuan
pengubahsuaian dan paparan
 Paparan Page membolehkan anda memasukkan, menyunting, dan memformat
laman web anda
 Digunakan untuk pembangun mengisi kandungan halaman individu laman web

b. Tetingkap Folders
 Memaparkan semua folder dan fail dalam halaman web
 Paparan Folders memaparkan susunan lipatan tapak web anda dan
menyenaraikan maklumat tentang laman web, gambar, dan lain-lain objek di
dalam tapak web anda
 Membenarkan untuk melihat dan mengurus keseluruhan web dari aras fail dan
foldernya
 Lokasi yang ditetapkan oleh Microsoft adalah
C:\My Documents\My Webs

c. Tetingkap Reports
 Memaparkan laporan tentang halaman web.
 Antara maklumat yang dipaparkan adalah:
 Bil fail yang mempunyai pautan
 Bil fail yang mempunyai pautan yang terputus

7 Farah Waheda Othman

Pembangunan Laman Web TTM 311

 Fail yang mempunyai masa muat turun yang lama – 30s bagi kelajuan
28.8KBps
 Paparan report membolehkan anda membaca laporan tentang analisis laman web
anda
 Mengenalpasti ralat atau masalah yang mungkin berlaku bagi laman web yang
telah dibina

d. Tetingkap Navigations
 Memaparkan rajah / diagram berbentuk pokok bagi halaman web yang dibina.
 Paparan Navigasi membolehkan anda melihat serta menyusun struktur navigasi
(pergerakan) tapak web anda
 Memberikan satu pandangan keseluruhan bagaimana laman web disusun atur.
 2 kesan terhadap laman web yang dibina jika anda tidak melakukan
pengubahsuaian dalam tetingkap navigation
 Banner tidak dapat dihasilkan
 Menu button tidak dapat disetkan mengikut theme yang dipilih
 Susah untuk menganalisa perjalanan sesuatu laman web

e. Tetingkap Hyperlinks
 Memaparkan diagram tentang pautan yang terdapat pada helaian halaman web
yang sedang aktif di skrin.
 Paparan hyperlink membolehkan anda melihat pautan yang bersambung ke
laman web pilihan di dalam tapak web anda
 Membenarkan untuk melihat pautan antara fail-fail dalam laman web.

f. Tetingkap Tasks
 Memaparkan senarai tugas yang perlu dilaksanakan oleh halaman web yang
dibina.
 Paparan Tugas membolehkan anda mebina senarai tugas yang perlu dibuat untuk
menyiapkan tapak web anda.
 Memaparkan senarai tugas dan membantu pembangun menjejaki lanhkah-
langkah untuk menghasilkan satu web
 Jika menggunakan wizard, FrontPage akan membina senarai tugas secara
automatic dan ia masih boleh ditambah.

PELAYAN WEB DAN PELAYAR WEB

 Pelayan web adalah merupakan komputer yang menyimpan blok-blok maklumat / data yang
dipaparkan dalan web.
 Pelayar web adalah merupakan satu perisian yang digunakan untuk mencapai fail-fail yang
tersimpan pada pelayan web

8 Farah Waheda Othman

Pembangunan Laman Web TTM 311

BAB 3 : ANTARAMUKA PENGGUNA LAMAN WEB

1. Memulakan Microsoft FrontPage

Title bar Standard toolbar Formating toolbar

Task Pane

View bar Status bar

Ruangan paparan

Rajah 3.1

MEMULAKAN MICROSOFT FRONTPAGE

- untuk membina helaian laman web yang pertama : File>New>Page or Web dan tetingkap Task
Pane akan dipaparkan
- membina helaian laman web baru : klik pada arahan Blank Page
- Membina laman web baru dan kosong : klik pada arahan Empty Web

PENGGUNAAN TEMPLATE DAN WIZARD

Templat :
- Satu dokumen yang sedia direka bentuk tanpa berinteraksi dengan pembangun
- Pembangun hanya perlu menambah teks dan grafik di mana perlu
- Menyediakan satu koleksi halaman terpaut yang boleh diubahsuai
Wizard :
- Satu dokumen yang sedia direka bentuk hasil dari interaksi dengan pembangun.
- Pembangun hanya perlu menambah teks dan grafik di mana perlu
a. Penggunaan template
- membina helaian laman web dengan pilihan templates : klik pada arahan Page templates
- membina laman web dengan pilihan templates : klik pada arahan Web Sites Templates

9 Farah Waheda Othman

Pembangunan Laman Web TTM 311

b. Helaian Templates
- Paparan seperti di bawah akan ditunjukkan :

Rajah 3.2

- Berikut merupakan keterangan ringkas bagi sebahagian dari pilihan template tersebut:

Template Keterangan
Confirmation Form Memaparkan maklumat tentang penerima input dari
pengguna
Feedback Form Berbentuk ruangan memberi komen atau maklum
balas
Form Page Wizard Borang yang akan dibina dengan bimbingan
tetingkap wizard
Frequently Asked Mengandungi senarai soalan dengan jawpan yang
sering disoal oleh pengguna
Guest Book Berbentuk seperti buku tetamu yang membolehkan
pengguna memberikan komen atau maklumat
Narrow, Left-aligned Body Mempunyai reka letak teks yang sempit ke sebelah
kiri
Narrow, RightLeft-aligned Body Mempunyai reka letak teks yang sempit ke sebelah
kanan

- Pilih Templates yang diingini contohnya Personal Web dan klik OK

- Untuk ubahsuai laman web, tab pada normal dan ubahsuai seperti biasa.
- Bagi mengantikan imej yang terdapat dalam templates,klik kanan tetikus pada imej tersebut dan
klik pada arahan Gallery Properties.
- Tetingkap seperti rajah akan dipaparkan.

Rajah 3.3 Rajah 3.4

10 Farah Waheda Othman

Pembangunan Laman Web TTM 311

- Pada tetingkap rajah ,imej-imej boleh ditambah, ubahsuai dan dipadamkan.

- Untuk menambah gambar, klik pada butang Add > Pictures From Files dan pilih gambar yang
dikehendaki. Gambar ini secara automatiknya akan dimasukkan dalam galeri yang disediakan.
- Untuk mengubahsuai imej, klik pada butang Edit dan tetingkap Edit Picture dipaparkan. Pada
tetingkap ini imej boleh diubahsuaikan.
- Setelah selesai mengubahsuai imej, klik butang OK.
- Untuk membuang imej, pilih imej yang ingin dipadamkan dan klik butang remove.

c. Web Sites Templates / Wizard

- Paparan seperti di bawah akan ditunjukkan :

Rajah 3.5

- Customer support web merupakan satu templat untuk sesebuah syarikat menyebarkan produknya
dalam internet
- Discussion web wizard pula akan menghasilkan satu laman web yang bertemakan kumpulan
perbincangan, forum, dan sebagainya
- Ubahsuai lokasi laman web yang ingin dibina. Laman web anda akan ditempatkan ke lokasi ini.
- Pilih Templates yang diingini contohnya Personal Web dan klik OK
- Klik pada tetingkap folders dan kelihatan direktori anda dipenuhi dengan beberapa fail html dan
imej seperti di bawah:

Rajah 3.6

- Klik fail index.htm untuk melihat kandungan laman web anda. Contohnya :

11 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Rajah 3.7

- Untuk ubahsuai laman web, tab pada normal dan ubahsuai seperti biasa.
- Klik pada tetingkap Navigation, Hyperlinks dan Task untuk melihat hubungan dalam laman web
anda.

PENGGUNAAN TULISAN
- Buka Microsoft FrontPage dan mulakan dengan fail yang baru dengan klik pada ikon
- Tab pada normal seperti yang ditunjukkan dalam rajah dibawah :

Rajah 3.8

- Taipkan maklumat seperti yang berikut :

Langkau dengan
tekan kekunci Enter

Langkau dengan
tekan kekunci Shift
dan Enter serentak.
Rajah 3.9

- Simpan fail dengan nama index.htm.

12 Farah Waheda Othman

Pembangunan Laman Web TTM 311

MENGUBAHSUAI RUPA BENTUK TEKS

* Mengubahsuai saiz teks

1. Buka fail index.htm yang telah dibina sebelum ini.

2. highlight pada perkataan Selamat Datang.

Rajah 3.10

3. Untuk mengubahsuai saiz teks tersebut, klik pada anak panah ke bawah pada ikon di
Formatting Toolbar.Pilih saiz yang dikendaki.
4. Ikon Increase Font Size dan Decrease Font Size juga boleh digunakan untuk
mengubahsuai saiz teks.
5. Simpankan fail.

* Mengubahsuai jenis font

1. Buka fail index.htm yang telah dibina sebelum ini.
2. highlight pada perkataan Selamat Datang.
3. klik pada anak panah ke bawah pada ikon di Formatting Toolbar. Pilih jenis font
yang dikendaki.
4. Simpankan fail.

* Mengubahsuai stail tulisan

1. Buka fail index.htm yang telah dibina sebelum ini.
2. Highlight pada perkataan yang dikehendaki dan pilih jenis stail yang dikehendaki pada salah satu
ikon ini .
3. Simpankan fail.

Mengubahsuai Rupa Bentuk Teks

* Mengubahsuai saiz teks

6. Buka fail index.htm yang telah dibina sebelum ini.

7. highlight pada perkataan Selamat Datang.

Rajah 3.11

8. Untuk mengubahsuai saiz teks tersebut, klik pada anak panah ke bawah pada ikon di
Formatting Toolbar.Pilih saiz yang dikendaki.
9. Ikon Increase Font Size dan Decrease Font Size juga boleh digunakan untuk
mengubahsuai saiz teks.
10. Simpankan fail.

* Mengubahsuai jenis font

5. Buka fail index.htm yang telah dibina sebelum ini.
6. highlight pada perkataan Selamat Datang.

13 Farah Waheda Othman

Pembangunan Laman Web TTM 311

7.klik pada anak panah ke bawah pada ikon di Formatting Toolbar. Pilih jenis font
yang dikendaki.
8. Simpankan fail.
* Mengubahsuai stail tulisan
4. Buka fail index.htm yang telah dibina sebelum ini.
5. Highlight pada perkataan yang dikehendaki dan pilih jenis stail yang dikehendaki pada salah satu
ikon ini .
6. Simpankan fail.

*NOTA:
Dimaksudkan dengan fail index
 Di anggap sebagai fail hadapan, dan fail inilah yang dikenali sebagai homepej
 Dinamakan index.htm
 Apabila gagal menentukan fail yang akan dibuka, peluncur akan membuka fail tersebut.

Kod bertanda ©
 hakcipta
 agar tidak diciplak oleh orang lain

MENUKAR PROPERTIES DALAM LAMAN WEB

a. Warna Latar
Warna latar biasa yang ditetapkan oleh Ms FrontPage ialah putih. Walaupun begitu, pengguna boleh
menukarkan warna latar ini.

1. Buka laman yang dikehendaki.

2. Klik File > Properties > Background.

Rajah 3.12

3. Klik anah panah di sebelah Background. Kotak warna akan ditunjukkan dan pilih warna yang
dihendaki.

Rajah 3.13

4. Pilih More Colors untuk pilihan yang lebih banyak.

14 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Rajah 3.14

5. Pilih warna dan klik butang OK. Simpan laman web anda.

Pengguna boleh juga menggunakan latar yang bergambar/tekstur. Imej sebaik-baiknya berukuran 96 x 96
piksel.

1. Buka laman web anda.

2. Klik kanan pada tetikus dan pilih Page Properties > Background

Rajah 3.15

3. Klik pada Background picture dan pada butang Browse…

4. Dalam kotak dialog yang muncul, klik pada fail imej yang anda kehendaki.

Rajah 3.16

15 Farah Waheda Othman

Pembangunan Laman Web TTM 311

MENGUBAHSUAI SPESIFIKASI HELAIAN

* Mengubahsuai tajuk helaian

1. Klik kanan pada tetikus > Page properties

Rajah 3.17

2. Ubahsuai tajuk New Page 1 pada ruangan Title dengan tajuk yang lebih sesuai.

* Mengubahsuai latar belakang helaian

1. Klik kanan pada tetikus > Page Properties.
2. Tab pada Background

Rajah 3.18

3. Untuk memilih warna, klik anak panah ke bawah pada bahagian Color, Background dan pilih
warna yang dikehendaki.
4. Untuk memilih imej, tandakan pada Background Picture dan klik Browse dan pilih imej yang telah
ditetapkan.

MARQUEE

- Marquee atau sepanduk Grafik berfungsi sebagai menarik perhatian pengunjung kerana kadang
kala ia mengandungi animasi atau dynamic effects.
- Teks yang boleh digerakkan di halaman web bagi memaparkan mesej tertentu

1. Klik Insert > Web component > Dynamic effect > marquee
2. klik Finish

16 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Rajah 3.19 Rajah 3.20

3. Entiti bagi marquee

Perkara Penerangan
Text Teks yang dipaparkan
Direction Arah pergerakan teks
Speed Kelajuan teks
Behaviour Jenis pergerakan
Size Saiz marquee
Repeat Kuantiti ulangan
Style Font
Background color Warna latar

THEME
- Suatu himpunan atribut-atribut warna dan rekabentuk yang dikenalpasti dengan satu nama tema.
Tema tertentu boleh digunakan pada keseluruhan tapak web atau pada halaman induk dalam suatu
tapak web.

1. Pilih Format > Theme…

2. Tetingkap di bawah akan dipaparkan.

Rajah 3.21

17 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Perkara Penerangan
Vivid Colors Warna lembut pada latar dan teks
Active graphics Grafik yang dipaparkan semasa objek aktif
Background picture Gambar bagi latar fail
Apply Using CSS Menggunakan CSS
Background color Warna latar
Colors Warna latar, butang, kombinasi warna
Graphics Bentuk susun atur fail
Text Jenis teks yang digunakan

18 Farah Waheda Othman

Pembangunan Laman Web TTM 311

BAB 4 : PERLAKSANAAN NAVIGASI

MAKSUD PAUTAN ATAU LINK
• merupakan elemen halaman web yang membolehkan suatu navigasi tidak linear berbentuk
hypermedia dapat dihasilkan
• boleh hubungkan antara satu halaman ke halaman yang lain
 Hyperlink akan menyambung sebuah laman ke laman yang lain. Ia juga membolehkan anda
melayari tapak-tapak web di Internet.
 Link boleh jadi link teks atau link grafik. Apabila disentuh pautan dengan penunjuk tetikus, rupa
penunjuk bertukar menjadi penunjuk jari.

JENIS PAUTAN DALAM MEMBANGUNKAN LAMAN WEB

i. Pautan Teks
- Menghubungkan sesuatu halaman menggunakan teks
- Cth : “Sila klik halaman peribadi untuk mengetahui dengan lebih lanjut”
ii. Pautan Imej
- Menghubungkan sesuatu halaman menggunakan imej / gambar
iii. Pautan untuk menghantar emel
- Pautan yang membolehkan pengguna menghantar emel kepada individu tertentu seperti
pembangun halaman web dan sebagainya
- Untuk membina pautan emel, pastikan anda mempunyai suatu alamat emel yang sah
- Cth : fuza@yahoo.com
iv. Pautan ke halaman web lain
- Boleh menghubungkan ke halaman web yang lain
- Cth : http://www.yahoo.com
v. Pautan Bookmark
- Merupakan lokasi tertentu pada sesuatu fail html yang dibina menerusi arahan
Insert>Bookmark di bar menu
- Digunakan di dalam suatu fail html yang mengandungi maklumat yang terlalu banyak
sehingga memerlukan pengguna skrol ke bahagian bawah fail tersebut.
vi. Pautan berrdasarkan kawasan (hotspot)
- Membenarkan pengguna menetapkan kawasan pautan berbeza pada satu imej.

A. TEKS

1. Taipkan teks yang ingin dipautkan

2. Highlight pada teks tersebut dan klik kanan > Hyperlink
3. Pilih Existing File or Web Page > fail yang dikehendaki > OK

Rajah 4.1 Rajah 4.2 Rajah 4.3

B. IMEJ

1. Masukkan imej ke dalam fail

2. Highlight pada teks tersebut dan klik kanan > Hyperlink
3. Pilih Existing File or Web Page > fail yang dikehendaki > OK

19 Farah Waheda Othman

Pembangunan Laman Web TTM 311

C. MAIL ELEKTRONIK

1. Taipkan teks yang dikehendaki.

2. Klik pada imej tersebut dan klik kanan > Hyperlink
3. Pilih E-mail Address
4. Pada ruangan E-mail address, taipkan alamat email yang dikehendaki > OK

Rajah 4.4

D. PETA IMEJ

1. Keluarkan Picture Toolbars dengan klik kanan pada mana-mana bahagian toolbars > Pictures
2. Klik pada imej untuk mengaktifkan Pictures Toolbars
3. Pilih Polygonal Hotspot dan lukis mengikut imej kecil yang ada pada imej tersebut sehingga
bertemu semula dengan titik mula.
4. Menu hyperlink akan dipaparkan dan pilih fail yang dikehendaki untuk dipautkan.

Rajah 4.5 Rajah 4.6 Rajah 4.7

E. BOOKMARK
1. Sediakan satu fail yang panjang (yang menggunakan scroll bar) seperti fail di bawah:

Rajah 4.8
2. Buatkan tanda pada tajuk-tajuk resipi denagn hightlight pada tajuk resipi > Insert > Bookmark…

20 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Rajah 4.9 Rajah 4.10

3. Menu bookmark akan dipaparkan. Berikan nama untuk tanda ini dan klik OK. Akan kelihatan
garis putus-putus pada tajuk.
4. Highlight pada tajuk yang hendak dipautkan > klik kanan > hyperlink

Rajah 4.11 Rajah 4.12

5. Klik pada Place In This Document > Ubi Kentang Jaket > OK
6. Untuk membuang bookmark, highlight pada tanda bookmark > klik kanan > bookmark properties
7. pilih tanda yang di highlight tadi > clear.

Rajah 4.13

21 Farah Waheda Othman

Pembangunan Laman Web TTM 311

BAB 5 : ELEMEN REKABENTUK

Rekabentuk laman web yang baik menggunakan kesemua eleman-eleman yang ada dalam multimedia
seperti imej, audio, teks, video dan grafik. Elemen-eleman ini sangat penting dalam pembangunan sesebuah
laman web. Sesebuah laman web yang baik dan menarik akan menggabungkan kesemua elemen-elemen ini
supaya laman web yang dibangunkan dapat menarik perhatian pengguna untuk melayari laman tersebut.

ELEMEN ASAS LAMAN WEB

1. Teks
2. Grafik
3. Audio
4. Video
5. hyperlink : dokumen, URL, emel dan bookmark

ELEMEN TAMBAHAN LAMAN WEB

1. Bingkai / frame
2. Interactive button / Hover button
3. Hotspot
4. Rollover effect
5. Hit counter

MEMBINA JADUAL
1. Pada toolbar Standard, klik pada anak panah di sebelah butang New dan klik pada Page. Kotak
dialog Page Template akan dipaparkan.
2. Pilih Normal Page daripada kotak dialog Page Template yang dipaparkan. Klik butang OK.
3. Pada menu Table pilih Insert, kemudian klik Table untuk membuka kotak dialog Insert Table.

Rajah 5.1

4. Saiz yang ditetapkan untuk jadual sekarang adalah dua lajur dan dua baris menjadikan ia sebagai
empat cell.

Rajah 5.2
5. Pilih saiz tersebut. Juga teruskan sahaja menerima pilihan untuk Layout dan Width yang
diberikan.

22 Farah Waheda Othman

Pembangunan Laman Web TTM 311

6. Klik butang OK. Jadual akan terbina pada laman anda.

Rajah 5.3

Memahami Saiz Jadual

Satu perkara yang perlu anda ketahui mengenai jadual adalah bagaimana ia disaizkan. Kelebaran jadual di
set sama ada menggunakan peratus atau pixel.
Jika anda menerima kelebaran asal (tiada perubahan) untuk jadual yang anda buat di atas, ini bermaksud
anda telah setkan jadual anda kepada 100 peratus daripada kawasan paparan. Sekiranya anda setkan
kelebaran menggunakan pixels, ia akan dikira sebagai saiz jadual tersebut.

Menukar Kelebaran Jadual

1. Letakkan kursor di dalam jadual.

2. Dari menu Table, pilih Select, Table.
3. Dari menu Table, pilih Table Properties, Table untuk membuka kotak dialog Table Properties.
4. Pada bahagian Specify Width, pilih butang radio In Pixels dan setkan nilai 400.
5. Klik butang OK dan jadual anda akan disaizkan mengikut nilai yang baru.

Rajah 5.4

Warna Jadual

Selain setkan saiz jadual, anda juga boleh setkan warna sempadan dan latarbelakang jadual anda. Anda juga
boleh setkan sempadan sahaja, atau membina kesan 3 dimensi dengan setkan apa yang dikatakan sempadan
terang dan sempadan gelap.

1. Pilih Jadual yang anda bina.

2. Dari menu Table, pilih Table Properties, Table untuk membuka kotak dialog Table Properties.
3. Pada bahagian Border, pilih dropbox Color untuk membuka Border Color Pallete.
4. Anda juga boleh memilih warna untuk latarbelakang atau menggunakan grafik/imej untuk gambar
latarbelakang untuk jadual atau sel.
5. Klik butang OK untuk mengesahkan pertukaran dan melihat paparan perubahan.

Rajah 5.5

23 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Membahagikan (Split) Cell

1. Pilih salah satu cell daripada jadual yang anda bina untuk dipecahkan (split), dengan klik pada cell
tersebut.
2. Tekan butang kanan pada tetikus, kotak dialog akan dipaparkan.

Rajah 5.6

3. Pilih sama ada anda ingin Split into Columns atau Split into Rows

Rajah 5.7

4. Pilih bilangan baris atau lajur yang anda ingin cell itu di pecahkan. Secara lalai nilainya adalah 2;
nilai maksimum adalah 100.
5. Klik butang OK.

Rajah 5.8

Mencantumkan (Merging) Cells

1. Pilih cell pertama yang anda mahu untuk memasukkan cantuman anda dan letakkan kursor pada
cell tersebut.
2. Tekan tanpa lepas kunci Shift dan pilih laras cell yang anda mahu untuk dicantumkan dengan cell
yang dipilih sebelumnya. Dua cell yang dipilih akan dihighlightkan. Kemudian tekan butang
kanan pada tetikus untuk memilih Merge Cells

Rajah 5.9

3. Dua cell yang anda pilih akan dicantumkan menjadi satu.

24 Farah Waheda Othman

Pembangunan Laman Web TTM 311

MEMBINA BINGKAI (FRAMES)

Bingkai akan membahagikan tetingkap (windows) kepada tetingkap yang lebih kecil. Pembahagian ini akan
dapat memudahkan pengguna meluncur di laman web yang dibina. FrontPage 2003 mempunyai satu
koleksi templat untuk membina bingkai. Ia membenarkan anda untuk meletakkan banyak bingkai di dalam
bingkai layout dokumen. Satu bingkai yang ringkas mengandungi dua bingkai, satu mengandungi pautan
dan satu lagi memaparkan laman yang dijalinkan oleh pautan tadi. Dalam lain perkataan, apabila pelawat
klik pada pautan di bingkai yang pertama, laman yang terpaut akan dipaparkan pada bingkai yang kedua.

Frame (bingkai)
- Ia digunakan untuk membahagikan kawasan di dalam tetingkap pelayar web kepada bahagian
berlainan yang dipanggil bingkai.

kedudukan bingkai bagi pilihan bingkai di bawah.

i. Banner & Contents

ii. Contents

iii. Header, Footer & Contents

iv. Header

1. View > Task pane

Rajah 5.10 Rajah 5.11

2. Pilih Page Template > Frame page > Banner and Contents > Ok

25 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Untuk fail/page
yang baru

Untuk fail/page
yang sedia ada.

Rajah 5.12

3. Untuk menukar fail/page dalam bingkai.

a. Klik kanan pada bingkai yang dikehendaki
b. Pilih Frame properties > klik Browse

Rajah 5.13 Rajah 5.14

c. Klik Existing File or Web Page pada bahagian Link to:

d. Cari dan pilih fail yang dikehendaki
e. Klik OK

4. Untuk pautkan fail ke dalam bingkai melalui button.

a. Klik kanan pada button > button properties > browse
b. Pilih fail yang ingin dipautkan
c. Klik pada butang Target Frame
d. Klik pada mana-mana bingkai yang dikehendaki > OK

Rajah 5.15

26 Farah Waheda Othman

Pembangunan Laman Web TTM 311

MENAMBAH IMEJ

Grafik bersaiz besar tidak sesuai dimasukkan ke laman web

 Grafik yang terlalu besar memakan masa yang agak lama untuk di beban ke bawah
 Ini boleh menyebabkan pengunjung berasa bosan dan meninggalkan laman web anda tanpa
menunggu kesemua elemen dalam laman web dipaparkan

Format-format bagi fail grafik yang paling popular digunakan

- .gif
- .jpeg
perbezaan di antara grafik dengan format GIF dan grafik dengan format JPEG

GIF JPEG
- Format imej yang kadangkala mengandungi - Format imej yang dimampat / statik
animasi
- Bersifat interlace – imej di muat dr kabur -> - tak bersifat interlace – pengguna akan nampak
terang muka kosong & imej dimuat scr baris demi baris
dari atas ke bawah.
- latar imej boleh ditukarkan kepada transperent - tak boleh ditukar kepada transperent
- boleh papar hingga 256 warna bagi imej - boleh papar hingga berjuta-juta warna imej
- selalu digunakan - lebih baik dari gif tapi ambil masa lama utk papar

Menambah Imej Dari Clip Art

1. Letakkan kursur pada tempat yang dikehendaki
2. Klik Insert > Picture > Clip art...

Rajah 5.16

3. Menu seperti di bawah a akan dipaparkan dan klik pada Clip Organizer…. Menu seperti rajah b akan
dipaparkan dan klik pada Office Collections. Pilihlah gambar yang dihendaki.

Rajah 5.17(a) Rajah 5.17 (b)

27 Farah Waheda Othman

Pembangunan Laman Web TTM 311

MULTIMEDIA

Audio / Bunyi
Format fail audio yang biasa digunakan untuk laman web
i. Wav(.wav)
ii. Real Audio(.ra)
iii. MPEG Level 3(.MP3)
iv. MIDI
v. AIFF Sound File
vi. AU Sound file

Menambah audio ke dalam laman web

1. Klik kanan mana-mana fail > Page Properties
2. Tab pada General > klik Browse pada bahagian Background Sound > OK
Bunyi ini boleh dditetapkan untuk berulang-ulang atau sebaliknya dengan menetapkan pada bahagian
Loop.

Rajah 5.18: Audio Rajah 5.19 : Video

Video
Format fail video yang dapat diintegrasikan ke dalam sesebuah laman web
 Audio Video Interleaved(.avi)
 QuickTime(.mov)
 MPEG(.mpg)
 RealVideo(.ra atau .ram atau rm)
 .dat

Menambah Video ke dalam laman web

1. Insert > Picture > Video
2. Pilih fail video yang dikehendaki > OK
3. Edit saiz video yang telah dimasukkan.
4. Untuk edit masa tayangan video, klik kanan pada fail video > Picture Properties
5. Tab Video > pilih ulangan pada bahagian Repeat dan pilih masa tayangan pada bahagian Start.

28 Farah Waheda Othman

Pembangunan Laman Web TTM 311

REKABENTUK

Hover Button / Interactive Button

- Butang pada halaman web yang bertukar warna atau bersinar apabila seseorang pengguna
menggerakkan penuding tetikus di atasnya.
- Apabila pengguna mengklik tetikus di atas butang hover button, maka ia boleh pergi ke lokasi
halaman mengikut hyperlink yang telah ditentukan.

1. Klik Insert > Interactive Button

Rajah 5.20

2. Pilih butang pilihan.

3. Klik pada Tab “Font”

Rajah 5.21

29 Farah Waheda Othman

Pembangunan Laman Web TTM 311

4. Entiti bagi butang

Perkara Penerangan
Font Jenis teks
Font Style Bentuk teks
Size Saiz teks
Original Font Color Warna teks pada butang sebenar
Hovered Font Color Warna teks pada butang jika penuding diatasnya
Pressed Font Color Kesan pada warna teks pada butang jika butang
telah ditekan

5. Perlu diingatkan, untuk melihat hover button, fail perlu disimpan terlebih dahulu dan dilarikan
dalam browser.

DHTML (Dynamic HTML)

Dynamic HTML adalah kombinasi dari teknologi untuk membuat halaman web dinamik. Untuk
kebanyakan orang Dynamic HTML bermaksud gabungan dari HTML 4.0, Style Sheets dan JavaScript.

Istilah seperti Zoom, Fly dan Hop sering kali kita dengar. FrontPage menggunakan istilah tersebut untuk
menganimasikan elemen-elemen halaman dengan menggunakan HTML Dinamik (DHMTL)

Kelemahan DHTML adalah ia tidak berfungsi dalam pelayar-pelayar versi lama. Untuk melihat kesan-
kesan DHTML anda perlu menggunakan pelayar versi 4 ke ke atas (terkini)

Menambah kesan DHTML

Mencipta DHTML anda sendiri memanglah sukar, namun dengan penggunaan bar alatan DHTML Effects
memudahkan kerja anda.

Rajah 5.22 : Menunjukkan pilihan DHTML Effects

Rajah 5.23 : Bar alatan DHTML Effects

30 Farah Waheda Othman

Pembangunan Laman Web TTM 311

LANGKAH MEMBINA DHTML

Langkah 1: Bina halaman baru

Langkah 2: Taipkan beberapa perkataan pada halaman dan highlightkannya seperti di bawah.

Rajah 5.24

Langkah 3: Buka Bar Alatan DHTML

Pilih View > Toolbars > DHTML Effects (Rujuk rajah 1)

Langkah 4: Pilih peristiwa pemula

Pilih teks, tentukan peristiwa yang akan memulakan animasi.

Dalam bar alatan DHTML Effects, klik anak panah ke bawah di sebelah kotak kombo ON. Buat pilihan
daripada menu jatuh turun. Cth : Page Load (Lihat rajah di bawah)

Rajah 5.25

31 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Langkah 5: Gunakan kesan

Daripada menu Apply, pilih kesan animasi yang akan diaksikan oleh teks apabila peristiwa yang dipilih
dalam Langkah 4 berlaku.

Rajah 5.26

Langkah 6: Pilih Setting

Rajah 5.27
Cuba dan lihat sendiri kesannya….

Anda juga boleh meletakkan kesan DHTML pada imej seperti di bawah.

Gambar pertama
Pilih gambar kedua

Rajah 5.28
Langkah 7 : Hilangkan kesan DHTML

Jika hendak menghilangkan suatu kesan animasi, highlightkan teks/imej yang mempunyai kesan tersebut
dan klik butang Remove Effect dalam bar alatan DHTML Effects

32 Farah Waheda Othman

Pembangunan Laman Web TTM 311

STYLE SHEETS

Juga lebih dikenali dengan Cascading Style Sheets(CSS):

• CSS ialah teks ASCII yang mengandungi arahan-arahan untuk memformat dokumen web. Ia
memudahkan anda untuk membuat reka letak dan persembahan web seperti penggunaan fon, saiz
fon, warna latar dan lain-lain.
• CSS juga adalah sebuah dokumen yang berdiri sendiri dan dapat dimasukkan dalam kod HTML
atau sekadar menjadi rujukan oleh HTML dalam pendefinisian style.
• CSS menggunakan kod2 yang tersusun untuk menetapkan style pda elemen HTML atau dapat
juga digunakan membuat style baru yang biasa disebut class.
• CSS dapat mengubah saiz teks, mengganti warna background pada sebuah halaman, atau dapat
pula mengubah warna border pada tabel, dan masih banyak lagi yang dapat dilakukan oleh CSS.
• membenarkan pereka sesebuah laman web menentukan jumlah style yang akan digunakan dalam
laman web.

terbahagi kepada 3 iaitu:

• Embedded style sheets
• style sheets yang hanya digunakan pada helaian yang telah ditetapkan sahaja.
Dikenali juga sebagai internal style sheets.
• External style sheets
• style sheets yang digunakan dalam beberapa helaian dan saling berpaut antara
satu sama lain
• Inline style sheets
• Kurang digunakan kerana tidak ‘power’ dan hanya boleh digunakan untuk 1
muka sahaja.
•

Membina CSS

1. Klik menu File  New  Page or Web.

2. Kemudian pada jendela tugas Page or Web klik Page Templates.
3. Klik pada Style Sheets tab, klik pada jenis CSS yang hendak dibina , kemudian klik OK

Rajah 5.29

33 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Aplikasi Borang (Form Wizard)

Anda tentulah pernah mengisi borang web seperti menyemak peti mel, membeli belah, memberi
maklum balas dalam buku tetamu. Semua aktiviti ini memerlukan anda untuk memasukkan maklumat ke
dalam borang web.

Untuk mencipta borang anda perlu memilih menu Insert >Form. Elemen-elemen yang
membentuk suatu borang dipanggil medan. Medan boleh jadi sebuah kotak teks yang membolehkan anda
menaip komen-komen. Maklumat yang dimasukkan oleh pengunjung ke dalam medan dipanggil nilai.

Untuk pengendalian borang, pelayan anda memerlukan sokongan untuk ASP (Active Server
Pages). ASP merupakan teknologi yang membolehkan halaman web untuk berinteraksi dengan sesuatu
program. Anda tidak perlu bimbang tentang penciptaan kod untuk penyediaan pangkalan data anda dalam
talian. FrontPage akan mengendalikan tugas-tugas yang paling sukar untuk anda.

Bagaimana Menggunakan Wizard Halaman Borang

Untuk membina borang manggunakan wizard ikut langkah-langkah berikut.

Langkah 1: Pilih halaman baru

Langkah 2: Pilih wizard Halaman Borang

- Klik Page Templates

- Pilih Form Page Wizard
- Klik OK

Rajah 5.20

Langkah 3: Mulakan Wizard

- Klik Next untuk mulakan wizard

- Kemudian klik Add untuk memasukkan soalan-soalan bagi borang anda

Langkah 4: Pilih jenis borang

- Klik Add
- Kemudian pilih jenis borang yang lazim seperti maklumat produk, personal dsb

34 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Rajah 5.21

Langkah 5: Pilih soalan

- Pilih butir-butir yang dikehendaki daripada pengguna

- Klik Next bila selesai

Rajah 5.22

Langkah 6: Selesaikan borang

Jika terdapat maklumat tambahan yang ingin dikumpulkan, ulangi langkah 4 hingga 6. Borang baru akan
dipaparkan.

35 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Rajah 5.23

Bagaimana Menggunakan Borang Maklum Balas

Untuk membina borang ikut langkah-langkah berikut.

Langkah 1: Pilih halaman baru

Langkah 2: Pilih Borang Maklum Balas (Feetback Form)

- Klik Page Templates

- Pilih Feetback Form
- Klik OK

Langkah 3: Edit Teks Borang

Anda boleh mengedit teks yang terdapat dalam borang mengikut kesesuaian anda.

Rajah 5.24

Langkah 4: Hilangkan Elemen Borang

Anda juga boleh menghapuskan bahagian-bahagian borang yangtidak penting. Caranya, highlightkan
bahagian yang ingin dipadam, kemudian tekan delete.

36 Farah Waheda Othman

Pembangunan Laman Web TTM 311

BAB 6 : PANGKALAN DATA WEB

Penggunaan Pangkalan Data Web
Silberschatz et.al (1997) mentakrifkan World Wide Web sebagai sistem maklumat teragih yang berasaskan
teks hiper (hypertext). Kebanyakan tapak Web yang ada adalah berasaskan fail di mana setiap dokumen
Web disimpan dalam fail berbeza. Untuk tapak Web yang kecil, pendekatan ini adalah memadai.
Bagaimanapun untuk tapak Web besar, ini menyebabkan masalah pengurusan yang besar.
Pada peringkat awal, tapak Web hanya berbentuk statik. Kini, kebanyakan tapak Web menyimpan data
dinamik seperti maklumat jumlah stok dan harga stok. Untuk menyelenggarakan maklumat sedemikian
dalam pangkalan data dan tapak Web berbeza adalah satu tugas yang besar. Oleh itu, kaedah membenarkan
pangkalan data dicapai terus dari Web semakin mendapat tempat sebagai cara pengurusan maklumat
Web atau kandungan dinamik. Storan maklumat Web di dalam pangkalan data dapat menyokong
penggunaan fail atau menggantikan penggunaan fail sama sekali.

Kaedah Data Access (Capaian Data)

DBMS merupakan perisian utk membina, mengubah & mencapai maklumat dalam pangkalan data.

– DBMS
• Membina pelbagai fail pangkalan data.
• Menambah dan mengubah data dalam fail.
• Menyusun rekod
• Mengenal pasti lokasi data dengan tepat.
Terdiri daripada:
– Kamus data- menerangkan struktur p. data
– Bahasa pertanyaan- utk capai maklumat & bahasa yang digunakan secara meluas ialah
SQL iaitu bahasa pertanyaan berstruktur
Perisian Popular:
• Microsoft Access
• dBASE III Plus
• FoxBASE Plus
• Oracle
• MS SQL Server
• SoftBASE
• Clipper
• Paradox

FrontPage menawarkan ciri baru yang membolehkan anda mencipta pangkalan data yang
berdasarkan web. Database Interface Wizard memudahkan tugas rumit ini. Dengan hanya beberapa klik
tetikus, anda dapat memasukkan mahupun mengedit maklumat ke dalam pangkalan data melalui laman
web.

Pangkalan data yang berasaskan web amat berguna kerana anda boleh mengemaskini rekod dari
sebarang tempat yang mempunyai akses internet. Walaubagaimanapun, perlu diingat bahawa anda
memerlukan pelayan yang menyokong ASP (Active Server Pages). Tidak semua pembekal khidmat web
menawarkan ciri ini.

ASP merupakan teknologi Microsoft, ia membolehkan halaman HTML berinteraksi dengan

program seperti pangkalan data. ASP boleh digunakan untuk mencipta halaman dinamik. Mempunyai
sambungan .asp

37 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Untuk membina pangkalan data web, ikut langkah-langkah berikut:

Langkah 1: Mulakan web baru

New Page > Web > Web Site Template > Database Interface Wizard

Rajah 6.1

Langkah 2: Cipta Pangkalan Data Access

- Pilih Create a new Access database within your web

- Atau use a simple database connection
- Klik next

Rajah 6.2

Langkah 3: Namakan Pangkalan Data

Anda perlu memberikan nama bagi pangkalan data anda.Klik Next

Penting: Nama mestilah satu perkataan sahaja, tidak mengandungi ruang kosong/jarak.

38 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Rajah 6.3

Langkah 4: Pilih Maklumat Yang Terkumpul

Anda akan mengedit jenis maklumat yang dikumpul oleh pangkalan data anda. Anda boleh menambah lajur
baru dengan menekan Add

Tambah lajur baru: Tel

Rajah 6.4

Langkah 5: Pilih halaman

Rajah 6.5

Anda boleh memilih apa yang akan dipaparkan pada halaman anda seperti Result Page, Submission Form,
Database Editor.

Langkah 6: Uji sambungan Pangkalan Data

Anda tidak boleh melihat kesan/hasil pangkalan data anda jika web anda ada pada cakera keras kecuali
komputer anda merupakan sebuah komputer pelayan/server. Untuk menguji anda perlulah terlebih dahulu
menerbitkan web. Cara: File > Publish Web > (pilih direktori) > Publish

39 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Rajah 6.6 : Pangkalan data web yang telah dibina menggunakan wizard

Tabular Data Control (TDC)

Tabular Data Control adalah satu kawalan Microsoft ActiveX yang datang dengan versi IE4 . Kawalan ini
membenarkan laluan, paparan, dan jenis maklumat ASCII disimpan pada pelayan akhir, seperti pada .txt
fail. Dengan kata lain, ia mewujudkan "pangkalan data" fungsi bahagian pelayan tidak perlu untuk menulis
skrip seperti PHP dan mySQL. TDC menyediakann satu pangkalan data yang mudah!

TDC hanya didapati di IE 4 dan ke atas. Netscape memerlukan plug-in untuk menjalankan fungsi yang
sama.

Implementasi
ActiveX control dimulakan dengan menggunakan <OBJECT> tag. CLASSID (pengecam unik) untuk TDC
adalah
CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83
Untuk memulakan TDC adalah seperti berikut :

<OBJECT ID="SomeID" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-

0080C7055A83">
...
...
...
</OBJECT>

Sebarang objek , seperti aplet, mengendungi parameter. Parameter objek itu adalah ditentukan
menggunakan tag <PARAM>. TDC adalah sekitar 8 parameter.
 DataURL: Direktori fail yang mengandungi data. Contoh "data.txt".
 Use Header : Menetapkan samada baris pertama fail data itu harus digunakan sebagai nama
rujukan untuk field masing-masing . Jika penetapan adalah palsu, gunakan "Column1",
"Column2" adalah sebaliknya. Nilai default adalah palsu.
 TextQualifier: Menentukan pilihan aksara yang mengelilingi field.
 FieldDelim: Menentukan aksara itu sudah diasingkan setiap menurunkan fail data. Aksara default
adalah koma (,). Contoh, menimbangkan satu fail data di mana data:
*SomeName*|*SomeAge*|*SomeSex*. Di sini, pemisah field digunakan adalah '|' dan '*' adalah
penerang teks.
 RowDelim: Menentukan samada aksara digunakan untuk menandakan pada akhir setiap lajur
data. Akasara default adalah newline (NL).

40 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Berikut adalah contoh lengkap:

<OBJECT ID="SomeID" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-

0080C7055A83">
<PARAM NAME="DataURL" VALUE="YourDataFile.txt">
<PARAM NAME="UseHeader" VALUE="TRUE">
<PARAM NAME="TextQualifier" VALUE="~">
<PARAM NAME="FieldDelim" VALUE="|">
</OBJECT>

Nama parameter bukanlah kes sensitif. Parameter TextQualifier adalah optional, digunakan untuk
membezakan data.

Contoh mudah:

data1.txt:

name|age
~Premshree Pillai~|~19~

HTML page

<OBJECT ID="data1" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-

0080C7055A83">
<PARAM NAME="DataURL" VALUE="data1.txt">
<PARAM NAME="UseHeader" VALUE="TRUE">
<PARAM NAME="TextQualifier" VALUE="~">
<PARAM NAME="FieldDelim" VALUE="|">
</OBJECT>

<SPAN DATASRC="#data1" DATAFLD="name"></SPAN>

<SPAN DATASRC="#data1" DATAFLD="age"></SPAN>

Paparan output adalah : Premshree 19

Data Source Object (DSO)

Data Source Object (DSO) adalah satu objek Microsoft ActiveX tertanam dalam satu halaman Web. Ia
adalah proses yang dipanggil data binding, di mana satu kawalan ActiveX berhubung secara langsung
dengan halaman Web satu lagi, atau dengan satu sumber data XML luar.

DSO juga hanya boleh didapati pada Internet Explorer 4 dan ke atas. Pembangun laman web biasanya
mewujudkan DSO nya sendiri. Sebagai contoh, satu animasi radar cuaca daripada Pusat Taufan Negara
boleh dipamerkan secara beterusan pada satu laman web Jabatan Pertahanan Awam tanpa perlu
dihubungkan atau diklik pada Pusat Taufan Negara.

DSO juga digunakan untuk tujuan Spyware. Jenis pencerobohan menunjukkan Spyware mengesan
program sebagai eksplotasi DSO. Sesetengah spyware sukar untuk dibasmi, dan jika ia berjaya
dibuang biasanya ia akan dipulangkan.

Menambah DSO pada halaman

Apabila pembangun web telah mengenalpasti data yang hendak dipamerkan pada halaman mukasurat,
langkah yang seterusnya adalah memilih DSO yang membekalkan data dan untuk menambah rujukan
kepada DSO halaman tersebut.

41 Farah Waheda Othman

Pembangunan Laman Web TTM 311

Tambahan kepada pembekal data, sumber lain yang berguna adalah MSDN Web.

DSO boleh dilaksanakan sebagai satu kawalan Microsoft ActiveX atau seperti satu Java aplet. Unsur
objek adalah satu kawalan ActiveX pada halaman; unsur aplet adalah satu aplet Java pada halaman.
Secara umum, pembangun Web boleh meniru OBJECT atau APPLET sesuai dan mengubah suai
pengistiharaan parameter yang digunakan supaya unsur-unsur pada halaman boleh terikat dengan
sumber data, perisytiharan itu harus meliputi sifat id.

Recordset
Recordset adalah struktur data yang mengandungi rekod pangkalan data, dan samada berasaskan jadual
ataupun query daripada jadual.

Konsepnya adalah biasa untuk platform-platform, terutamanya Microsoft Data Access Objects (DAO)
dan ActiveX Data Objects (ADO). Objek Recordset mengandungi satu koleksi Fields dan satu koleksi
Properties. Pada bila-bila masa, Recordset merujuk kepada satu ciri sahaja dalam rekod semasa.

42 Farah Waheda Othman

Pembangunan Laman Web TTM 311

BAB 7 : PENERBITAN LAMAN WEB

File Transfer Protocol (FTP)
 Merupakan satu kaedah piawai memindahkan fail melalui internet.
 Adalah cara termudah untuk bertukar-tukar fail antara komputer-komputer dalam internet
 Digunakan untuk memuat naik dan memuat turun laman-laman web, perisian-perisian, klip video
dan muzik digital serta berkongsi fail dengan pengguna lain.

 Terdapat dua jenis FTP, iaitu:

– Pelayan FTP terkawal : memberikan servis berbayar dan pengguna perlu mempunyai
akaun.
– Pelayan FTP Anonymous : servis percuma.

peluncur web yang seringkali digunakan untuk upload laman web

 internet explorer
 netscape navigator

hos laman web percuma

 http://www.geocities.com
 http://www.tripod.com
 http://www.angelfire.com
 http://www.webjump.com

kelemahan sekiranya menggunakan hos laman web percuma

 Tiada servis sokongan atau servis sokongan yang lembap
 Hos laman web yang tidak stabil
 Alamat laman web yang terlalu panjang dan tidak berkaitan dengan jenis laman web anda
 Tidak menyokong skrip CGI

keburukan menempatkan iklan penaja di laman web

i. Sepanduk iklan penaja kadangkala terlalu besar dan memakan masa yang lama untuk dipaparkan
ii. Penaja meletakkan link rantaian dari laman web anda ke laman web mereka
iii. Iklan yang dipaparkan kadangkala tidak sesuai dengan laman web

Disked-based
Laman web yang boleh dijana daripada semua jenis computer atau pun drive tertentu

Server-based
Laman web yang boleh dijana daripada web server

FTP accessible
 Capaian secara fizikal (physical access)
Capaian secara fizikal di dalam internet merupakan kemudahan kelengkapan komputer kepada
guru dan pelajar untuk mencapai internet berserta dengan komponen seperti e-mel, gopher,
kumpulan perbincangan elektronik, pemindahan fail, Archie, Veronica, WAIS, dan WWW.
 Capaian secara bijaksana (intellectual access).
Iaitu kebolehan dan kemahiran menjelajah dunia siber dengan penuh berakhlaq dan bijaksana.

43 Farah Waheda Othman

Pembangunan Laman Web TTM 311

MENERBITKAN LAMAN

Merupakan penyalinan halaman dan tapak web sistem komputer setempat ke pelayan web yang
mempunyai hubungan langsung kepada internet atau intranet.

Untuk menerbitkan web anda, ikut langkah-langkah berikut:

1. Pastikan komputer mempunyai sambungan ke internet

2. Dalam FrontPage, pilih menu File dan kemudian pilih Publish Web. Kotak dialog Publish
Destination akan dipaparkan seperti di bawah

Rajah 7.1

3. Masukkan alamat pelayan web yangakan muat naik web anda dalam kotak Enter Publish
Destination (samada menggunakan alamat HTTP atau FTP). Kemudian klik OK
4. Kotak Publish Web dipaparkan. Kotak ini mempamerkan kesemua fail yang terdapat dalam
web anda, Sekiranya web anda pernah diterbitkan ke alamat yang dinyatakan, anda boleh
melihat semula fail-fail yang tersimpan dalam pelayan web dengan mengklik butang Show.

44 Farah Waheda Othman