Nota Pembangunan Laman Web

  • 8,554 views
Uploaded on

 

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,554
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
306
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Pembangunan Laman Web TTM 311 BAB 1: PEMBINAAN LAMAN WEBISTILAH-ISTILAH INTERNET1. 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-Lee2. Web server - merupakan komputer untuk tujuan khas – untuk gabungkan laman-laman web melalui hyperlinks3. 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  IE4. 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/nam6. Hyperlink server a fail - untuk menghubungkan laman web7. 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 web8. Web site 1 Farah Waheda Othman
  • 2. 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 web9. Home page - laman mula bagi web site - seperti jadual kandungan10. Search engine - alatan / tool yang digunakan untuk mengesan laman web di seluruh dunia dan mencari item yang kita nak11. 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 baru13. HTTP - Hypertext Transfer Protokol14. DHTML - Dynamic Hypertext Markup Language15. - File Tranfer Protocol - bertujuan untuk mengalih fail dari satu komputer ke komputer yang lain dalam internetTUJUAN MEMBINA LAMAN WEB  Untuk dikenali diseluruh dunia  Untuk pengiklanan  Untuk penjualan barangan  Untuk menjalin hubungan  Untuk berkomunikasi  Untuk besuka-ria  Hiburan  Berkongsi pengetahuan  Memperkenalkan NegaraFAKTOR 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
  • 3. Pembangunan Laman Web TTM 311 - Maklumat yang tepat/berkesan - Maklumat yang terkini - Cara penyampaian maklumat - Pengolahan Maklumat - Keberkesanan maklumat yang dipaparkanJENIS 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. hyperlinkPERISIAN 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
  • 4. Pembangunan Laman Web TTM 311KOD 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
  • 5. 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
  • 6. 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
  • 7. Pembangunan Laman Web TTM 311 BAB 2 : PENGENALAN ANTARAMUKA MICROSOFT FRONTPAGE XPCIRI-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 FRONTPAGEa. 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 teksiii. Menu view – Mengandungi semua arahan yang berkaitan dengan rupa bentuk paparan fail frontpage atau helaian halaman web di skriniv. 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 webb. 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 DocumentsMy 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
  • 8. 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
  • 9. 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.1MEMULAKAN 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 WebPENGGUNAAN TEMPLATE DAN WIZARDTemplat : - 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 diubahsuaiWizard : - Satu dokumen yang sedia direka bentuk hasil dari interaksi dengan pembangun. - Pembangun hanya perlu menambah teks dan grafik di mana perlua. 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
  • 10. Pembangunan Laman Web TTM 311b. Helaian Templates - Paparan seperti di bawah akan ditunjukkan : Rajah 3.2 - Berikut merupakan keterangan ringkas bagi sebahagian dari pilihan template tersebut:Template KeteranganConfirmation Form Memaparkan maklumat tentang penerima input dari penggunaFeedback Form Berbentuk ruangan memberi komen atau maklum balasForm Page Wizard Borang yang akan dibina dengan bimbingan tetingkap wizardFrequently Asked Mengandungi senarai soalan dengan jawpan yang sering disoal oleh penggunaGuest Book Berbentuk seperti buku tetamu yang membolehkan pengguna memberikan komen atau maklumatNarrow, Left-aligned Body Mempunyai reka letak teks yang sempit ke sebelah kiriNarrow, 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
  • 11. 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
  • 12. 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
  • 13. Pembangunan Laman Web TTM 311MENGUBAHSUAI 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
  • 14. 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 lainMENUKAR PROPERTIES DALAM LAMAN WEBa. Warna LatarWarna latar biasa yang ditetapkan oleh Ms FrontPage ialah putih. Walaupun begitu, pengguna bolehmenukarkan 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
  • 15. 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 96piksel. 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
  • 16. Pembangunan Laman Web TTM 311MENGUBAHSUAI 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
  • 17. 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 latarTHEME - 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
  • 18. 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
  • 19. Pembangunan Laman Web TTM 311 BAB 4 : PERLAKSANAAN NAVIGASIMAKSUD 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.3B. 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
  • 20. Pembangunan Laman Web TTM 311C. 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.4D. 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.7E. 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
  • 21. 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
  • 22. Pembangunan Laman Web TTM 311 BAB 5 : ELEMEN REKABENTUKRekabentuk laman web yang baik menggunakan kesemua eleman-eleman yang ada dalam multimediaseperti imej, audio, teks, video dan grafik. Elemen-eleman ini sangat penting dalam pembangunan sesebuahlaman web. Sesebuah laman web yang baik dan menarik akan menggabungkan kesemua elemen-elemen inisupaya 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 bookmarkELEMEN TAMBAHAN LAMAN WEB 1. Bingkai / frame 2. Interactive button / Hover button 3. Hotspot 4. Rollover effect 5. Hit counterMEMBINA 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
  • 23. Pembangunan Laman Web TTM 311 6. Klik butang OK. Jadual akan terbina pada laman anda. Rajah 5.3Memahami Saiz JadualSatu perkara yang perlu anda ketahui mengenai jadual adalah bagaimana ia disaizkan. Kelebaran jadual diset sama ada menggunakan peratus atau pixel.Jika anda menerima kelebaran asal (tiada perubahan) untuk jadual yang anda buat di atas, ini bermaksudanda telah setkan jadual anda kepada 100 peratus daripada kawasan paparan. Sekiranya anda setkankelebaran 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.4Warna JadualSelain setkan saiz jadual, anda juga boleh setkan warna sempadan dan latarbelakang jadual anda. Anda jugaboleh setkan sempadan sahaja, atau membina kesan 3 dimensi dengan setkan apa yang dikatakan sempadanterang 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
  • 24. Pembangunan Laman Web TTM 311Membahagikan (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.8Mencantumkan (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
  • 25. Pembangunan Laman Web TTM 311MEMBINA BINGKAI (FRAMES)Bingkai akan membahagikan tetingkap (windows) kepada tetingkap yang lebih kecil. Pembahagian ini akandapat memudahkan pengguna meluncur di laman web yang dibina. FrontPage 2003 mempunyai satukoleksi templat untuk membina bingkai. Ia membenarkan anda untuk meletakkan banyak bingkai di dalambingkai layout dokumen. Satu bingkai yang ringkas mengandungi dua bingkai, satu mengandungi pautandan satu lagi memaparkan laman yang dijalinkan oleh pautan tadi. Dalam lain perkataan, apabila pelawatklik 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
  • 26. 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
  • 27. Pembangunan Laman Web TTM 311MENAMBAH IMEJGrafik 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 dipaparkanFormat-format bagi fail grafik yang paling popular digunakan - .gif - .jpegperbezaan di antara grafik dengan format GIF dan grafik dengan format JPEGGIF 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 paparMenambah 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
  • 28. Pembangunan Laman Web TTM 311MULTIMEDIAAudio / BunyiFormat 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 fileMenambah audio ke dalam laman web1. Klik kanan mana-mana fail > Page Properties2. 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 : VideoVideoFormat fail video yang dapat diintegrasikan ke dalam sesebuah laman web  Audio Video Interleaved(.avi)  QuickTime(.mov)  MPEG(.mpg)  RealVideo(.ra atau .ram atau rm)  .datMenambah Video ke dalam laman web1. Insert > Picture > Video2. Pilih fail video yang dikehendaki > OK3. Edit saiz video yang telah dimasukkan.4. Untuk edit masa tayangan video, klik kanan pada fail video > Picture Properties5. Tab Video > pilih ulangan pada bahagian Repeat dan pilih masa tayangan pada bahagian Start. 28 Farah Waheda Othman
  • 29. Pembangunan Laman Web TTM 311REKABENTUKHover 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
  • 30. 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. Untukkebanyakan 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 untukmenganimasikan 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 DHTMLMencipta DHTML anda sendiri memanglah sukar, namun dengan penggunaan bar alatan DHTML Effectsmemudahkan kerja anda. Rajah 5.22 : Menunjukkan pilihan DHTML Effects Rajah 5.23 : Bar alatan DHTML Effects 30 Farah Waheda Othman
  • 31. Pembangunan Laman Web TTM 311LANGKAH MEMBINA DHTMLLangkah 1: Bina halaman baruLangkah 2: Taipkan beberapa perkataan pada halaman dan highlightkannya seperti di bawah. Rajah 5.24Langkah 3: Buka Bar Alatan DHTMLPilih View > Toolbars > DHTML Effects (Rujuk rajah 1)Langkah 4: Pilih peristiwa pemulaPilih teks, tentukan peristiwa yang akan memulakan animasi.Dalam bar alatan DHTML Effects, klik anak panah ke bawah di sebelah kotak kombo ON. Buat pilihandaripada menu jatuh turun. Cth : Page Load (Lihat rajah di bawah) Rajah 5.25 31 Farah Waheda Othman
  • 32. Pembangunan Laman Web TTM 311Langkah 5: Gunakan kesanDaripada menu Apply, pilih kesan animasi yang akan diaksikan oleh teks apabila peristiwa yang dipilihdalam Langkah 4 berlaku. Rajah 5.26Langkah 6: Pilih Setting Rajah 5.27Cuba dan lihat sendiri kesannya….Anda juga boleh meletakkan kesan DHTML pada imej seperti di bawah. Gambar pertama Pilih gambar kedua Rajah 5.28Langkah 7 : Hilangkan kesan DHTMLJika hendak menghilangkan suatu kesan animasi, highlightkan teks/imej yang mempunyai kesan tersebutdan klik butang Remove Effect dalam bar alatan DHTML Effects 32 Farah Waheda Othman
  • 33. Pembangunan Laman Web TTM 311STYLE SHEETSJuga 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
  • 34. Pembangunan Laman Web TTM 311Aplikasi Borang (Form Wizard) Anda tentulah pernah mengisi borang web seperti menyemak peti mel, membeli belah, memberimaklum balas dalam buku tetamu. Semua aktiviti ini memerlukan anda untuk memasukkan maklumat kedalam borang web. Untuk mencipta borang anda perlu memilih menu Insert >Form. Elemen-elemen yangmembentuk suatu borang dipanggil medan. Medan boleh jadi sebuah kotak teks yang membolehkan andamenaip komen-komen. Maklumat yang dimasukkan oleh pengunjung ke dalam medan dipanggil nilai. Untuk pengendalian borang, pelayan anda memerlukan sokongan untuk ASP (Active ServerPages). ASP merupakan teknologi yang membolehkan halaman web untuk berinteraksi dengan sesuatuprogram. Anda tidak perlu bimbang tentang penciptaan kod untuk penyediaan pangkalan data anda dalamtalian. FrontPage akan mengendalikan tugas-tugas yang paling sukar untuk anda.Bagaimana Menggunakan Wizard Halaman BorangUntuk membina borang manggunakan wizard ikut langkah-langkah berikut.Langkah 1: Pilih halaman baruLangkah 2: Pilih wizard Halaman Borang - Klik Page Templates - Pilih Form Page Wizard - Klik OK Rajah 5.20Langkah 3: Mulakan Wizard - Klik Next untuk mulakan wizard - Kemudian klik Add untuk memasukkan soalan-soalan bagi borang andaLangkah 4: Pilih jenis borang - Klik Add - Kemudian pilih jenis borang yang lazim seperti maklumat produk, personal dsb 34 Farah Waheda Othman
  • 35. Pembangunan Laman Web TTM 311 Rajah 5.21Langkah 5: Pilih soalan - Pilih butir-butir yang dikehendaki daripada pengguna - Klik Next bila selesai Rajah 5.22Langkah 6: Selesaikan borangJika terdapat maklumat tambahan yang ingin dikumpulkan, ulangi langkah 4 hingga 6. Borang baru akandipaparkan. 35 Farah Waheda Othman
  • 36. Pembangunan Laman Web TTM 311 Rajah 5.23Bagaimana Menggunakan Borang Maklum BalasUntuk membina borang ikut langkah-langkah berikut.Langkah 1: Pilih halaman baruLangkah 2: Pilih Borang Maklum Balas (Feetback Form) - Klik Page Templates - Pilih Feetback Form - Klik OKLangkah 3: Edit Teks BorangAnda boleh mengedit teks yang terdapat dalam borang mengikut kesesuaian anda. Rajah 5.24Langkah 4: Hilangkan Elemen BorangAnda juga boleh menghapuskan bahagian-bahagian borang yangtidak penting. Caranya, highlightkanbahagian yang ingin dipadam, kemudian tekan delete. 36 Farah Waheda Othman
  • 37. Pembangunan Laman Web TTM 311 BAB 6 : PANGKALAN DATA WEBPenggunaan Pangkalan Data WebSilberschatz et.al (1997) mentakrifkan World Wide Web sebagai sistem maklumat teragih yang berasaskanteks hiper (hypertext). Kebanyakan tapak Web yang ada adalah berasaskan fail di mana setiap dokumenWeb 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 datadinamik seperti maklumat jumlah stok dan harga stok. Untuk menyelenggarakan maklumat sedemikiandalam pangkalan data dan tapak Web berbeza adalah satu tugas yang besar. Oleh itu, kaedah membenarkanpangkalan data dicapai terus dari Web semakin mendapat tempat sebagai cara pengurusan maklumatWeb atau kandungan dinamik. Storan maklumat Web di dalam pangkalan data dapat menyokongpenggunaan 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 berstrukturPerisian 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 yangberdasarkan web. Database Interface Wizard memudahkan tugas rumit ini. Dengan hanya beberapa kliktetikus, anda dapat memasukkan mahupun mengedit maklumat ke dalam pangkalan data melalui lamanweb. Pangkalan data yang berasaskan web amat berguna kerana anda boleh mengemaskini rekod darisebarang tempat yang mempunyai akses internet. Walaubagaimanapun, perlu diingat bahawa andamemerlukan pelayan yang menyokong ASP (Active Server Pages). Tidak semua pembekal khidmat webmenawarkan ciri ini. ASP merupakan teknologi Microsoft, ia membolehkan halaman HTML berinteraksi denganprogram seperti pangkalan data. ASP boleh digunakan untuk mencipta halaman dinamik. Mempunyaisambungan .asp 37 Farah Waheda Othman
  • 38. Pembangunan Laman Web TTM 311Untuk membina pangkalan data web, ikut langkah-langkah berikut:Langkah 1: Mulakan web baruNew Page > Web > Web Site Template > Database Interface Wizard Rajah 6.1Langkah 2: Cipta Pangkalan Data Access - Pilih Create a new Access database within your web - Atau use a simple database connection - Klik next Rajah 6.2Langkah 3: Namakan Pangkalan DataAnda perlu memberikan nama bagi pangkalan data anda.Klik NextPenting: Nama mestilah satu perkataan sahaja, tidak mengandungi ruang kosong/jarak. 38 Farah Waheda Othman
  • 39. Pembangunan Laman Web TTM 311 Rajah 6.3Langkah 4: Pilih Maklumat Yang TerkumpulAnda akan mengedit jenis maklumat yang dikumpul oleh pangkalan data anda. Anda boleh menambah lajurbaru dengan menekan Add Tambah lajur baru: Tel Rajah 6.4Langkah 5: Pilih halaman Rajah 6.5Anda boleh memilih apa yang akan dipaparkan pada halaman anda seperti Result Page, Submission Form,Database Editor.Langkah 6: Uji sambungan Pangkalan DataAnda tidak boleh melihat kesan/hasil pangkalan data anda jika web anda ada pada cakera keras kecualikomputer anda merupakan sebuah komputer pelayan/server. Untuk menguji anda perlulah terlebih dahulumenerbitkan web. Cara: File > Publish Web > (pilih direktori) > Publish 39 Farah Waheda Othman
  • 40. Pembangunan Laman Web TTM 311 Rajah 6.6 : Pangkalan data web yang telah dibina menggunakan wizardTabular Data Control (TDC)Tabular Data Control adalah satu kawalan Microsoft ActiveX yang datang dengan versi IE4 . Kawalan inimembenarkan laluan, paparan, dan jenis maklumat ASCII disimpan pada pelayan akhir, seperti pada .txtfail. Dengan kata lain, ia mewujudkan "pangkalan data" fungsi bahagian pelayan tidak perlu untuk menulisskrip 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 yangsama.ImplementasiActiveX control dimulakan dengan menggunakan <OBJECT> tag. CLASSID (pengecam unik) untuk TDCadalahCLSID:333C7BC4-460F-11D0-BC04-0080C7055A83Untuk 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 ditentukanmenggunakan 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
  • 41. Pembangunan Laman Web TTM 311Berikut 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 untukmembezakan 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
  • 42. 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
  • 43. Pembangunan Laman Web TTM 311 BAB 7 : PENERBITAN LAMAN WEBFile 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 navigatorhos laman web percuma  http://www.geocities.com  http://www.tripod.com  http://www.angelfire.com  http://www.webjump.comkelemahan 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 CGIkeburukan 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 merekaiii. Iklan yang dipaparkan kadangkala tidak sesuai dengan laman webDisked-basedLaman web yang boleh dijana daripada semua jenis computer atau pun drive tertentuServer-basedLaman web yang boleh dijana daripada web serverFTP 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
  • 44. Pembangunan Laman Web TTM 311MENERBITKAN LAMAN Merupakan penyalinan halaman dan tapak web sistem komputer setempat ke pelayan web yangmempunyai 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