Modul Asas JavaServer Pages Kursus ini dikendalikan oleh: Dr Fatimah Sidi Jabatan Sains Komputer Fakulti Sains Komputer dan Teknologi Maklumat
Kandungan Modul 1.0 Pengenalan... 2 2.0 Objektif... 2 3.0 Struktur dokumen HTML... 2 4.0 Installasi Macromedia Dreamweaver... 4 5.0 Hyperlink... 4 6.0 Target... 5 7.0 HTML Background... 5 8.0 HTML Tables... 6 9.0 HTML Frames... 7 10.0 HTML Images... 8 11.0 HTML Forms... 8 Jabatan Sains Komputer, FSKTM Mukasurat 1
1.0 Pengenalan Modul ini adalah modul peringkat asas dan menjadi pengenalan kepada pegaturcaraan web. Walaupun modul ini asas, tetapi dalam modul ini, diterangkan semua perkara penting yang perlu diketahui oleh pengguna sehingga pengguna sudah boleh memulakan kerja-kerja pembangunan aplikasi berasaskan web. Persoalannya yang perlu diketahui ialah apa itu JSP? JSP ialah nama ringkas JavaServer Pages, ia merupakan bahasa pengaturcaraan yang digunakan untuk membangunkan aplikasi berasaskan web. Ianya merupakan perluasan dari spesifikasi Java Servlet, yang bertujuan untuk membangunkan aplikasi web yang dinamik. JSP merupakan sebahagian dari teknologi JEE, bersama-sama dengan Servlet, EJB, JNDI, XML. Sebelum menggunakan bahasa pengaturcaraan ini, pengguna perlu memahami konsep pengaturcaraan web, terutamanya Hyper Text Markup Language (HTML). Terdapat banyak perisian yang boleh digunakan, antara yang terkenal ialah seperti berikut:- Perisian editor teks ringkas: Notepad, Wordpad Perisian berasaskan pemproses perkataan: MS Word, Publisher, Power Point Perisian berasaskan editor tag HTML: Macromedia Homesite, MS Visual Interdev Perisian berasaskan pendekatan WYIWYG: MS Frontpage, Macromedia Dreamweaver Bagi tujuan kursus ini perisian yang akan digunakan ialah Macromedia Dreamweaver 8. 2.0 Objektif Di akhir modul ini, pengguna akan: Memahami konsep pengaturcaraan web Mahir menggunakan komponen HTML 3.0 Struktur dokumen HTML Hyper Text Markup Language (HTML) merupakan pengaturcaraan web yang paling asas. Setiap laman web mengandungi arahan untuk memaparkan kandungan di dalamnya. Browser (contoh: Internet Explorer, Mozilla Firefox) berperanan memaparkan kandungan laman web dengan membaca arahan tersebut. Arahan yang biasa digunakan adalah tag HTML. Contoh: <p>ini adalah satu perenggan</p> Jabatan Sains Komputer, FSKTM Mukasurat 2
Fail HTML adalah fail teks biasa dengan extension.htm,.html atau.shtml. Struktur dokumen HTML adalah seperti di bawah :- <html> <head> <title> </title> </head> <body>... </body> </html> i. <head> mengandungi <title> - boleh dilihat pada bahagian atas laman web ii. <body> mengandungi kandungan laman web Latihan 1 i. Buka Notepad dan taipkan tag HTML seperti di bawah :- <html> <head> <title>cubaan Pertama </title> </head> <body> Ini laman web pertama saya </body> </html> ii. Simpan fail sebagai page1.html dan bina folder baru kursusjsphtml dalam direktori D iii. Save as type: All Files iv. Buka Internet Explorer Browser File Open Browse page1.html v. Lihat output yang dipaparkan oleh browser Jabatan Sains Komputer, FSKTM Mukasurat 3
4.0 Installasi Macromedia Dreamweaver Perisian yang digunakan ialah Macromedia Dreamweaver 8. i. Untuk installasi Macromedia Dreamweaver 8 ii. Double click ikon Dreamweaver8-en.exe di direktori D:\jsp_software 5.0 Hyperlink Hyperlink merupakan alamat kepada dokumen yang ditunjukkan. Sintaks penulisan seperti di bawah :- <a href="page2.html" target="_self">link</a> Insert Hyperlink Hasil paparan page1.html Hasil paparan link page2.html Jabatan Sains Komputer, FSKTM Mukasurat 4
6.0 Target Target perlu apabila menggunakan hyperlink. Ia menentukan di mana dokumen baru akan dibuka. Empat jenis target yang biasa digunakan adalah :- i) _self ii) _parent iii) _top iv) _blank Latihan 2 i. Bina satu dokumen baru dan simpan sebagai page2.html mempapar Page 2 dan banner.html memapar Banner. ii. Bina satu link bagi menghubungkan page1.html dengan page2.html dan link dari page2.html kembali ke page1.html. iii. Lihat output menggunakan browser. iv. Uji dengan target yang berbeza. Hasil paparan link kembali page2.html ke page1.html 7.0 HTML Background Terdapat dua atribut dalam meletakkan latar belakang pada dokumen HTML iaitu bgcolor dan background. Sintaks penulisan seperti di bawah :- <body bgcolor="#000000"> <body background="clouds.gif"> bgcolor background - untuk meletakkan warna latar belakang dokumen - untuk meletakkan imej sebagai latar belakang dokumen Page Properties Background Jabatan Sains Komputer, FSKTM Mukasurat 5
8.0 HTML Tables Tables merupakan komponen yang membenarkan kandungan dokumen HTML di paparkan dalam format yang tersusun. Ianya didefinasikan dengan tag <table> dan terbahagi kepada rows (tag <tr>), dan setiap rows dibahagikan kepada data cells (tag <td>). Setiap column boleh mengandungi imej, teks dan sebagainya. Insert Table Contoh paparan menggunakan tables. Jabatan Sains Komputer, FSKTM Mukasurat 6
9.0 HTML Frames Frame merupakan komponen yang membenarkan lebih dari satu dokumen HTML dipaparkan di dalam satu window browser. File New Category: Framesets Framesets: Fixed Top, Nested Left Document Type (DTD): None Frame Layout Window Frames i. Simpan dokumen yang mengandungi frame sebagai frame.html. ii. Ubah Frame Name: topframe kepada Banner leftframe kepada Menu mainframe kepada Contents iii. Ubah Src frame Banner kepada banner.html. iv. Ubah Src frame Menu kepada page1.html. v. Tukar target hyperlink di page1.html kepada Contents mempapar page2.html. vi. Papar dokumen di browser. Jabatan Sains Komputer, FSKTM Mukasurat 7
10.0 HTML Images Langkah di bawah digunakan untuk memasukkan imej di dalam dokumen HTML. Insert Image 11.0 HTML Forms Forms bertindak sebagai borang yang menerima input dari pengguna sesebuah aplikasi web. Sintaks penulisan adalah seperti di bawah :- <form name=form1 method="post" action=""></form> Insert Form Form Elemen-elemen di dalam Form akan diterangkan dengan lebih terperinci seperti berikut :- i. Text Field Elemen ini menerima input teks dari pengguna sistem. Sintaks penulisan :- User ID: <input type="text" name="userid "> Insert Form Text Field Paparan di browser: Jabatan Sains Komputer, FSKTM Mukasurat 8
ii. Password Field Elemen ini menerima input katalaluan dari pengguna sistem Sintaks penulisan :- Katalaluan: <input type="password" name="katalaluan"> Insert Form Text Field Paparan di browser: iii. Radio Button Elemen ini digunakan apabila terdapat lebih dari satu pilihan dan pengguna hanya boleh memilih satu pilihan sahaja. Sintaks penulisan :- <input type="radio" name="jantina" value="l"> Lelaki <input type="radio" name="jantina" value="p"> Perempuan Insert Form Radio Button Paparan di browser : iv. Checkbox Elemen ini digunakan apabila terdapat lebih dari satu pilihan dan pengguna hanya boleh memilih lebih dari satu pilihan. Jabatan Sains Komputer, FSKTM Mukasurat 9
Sintak penulisan :- Melancong <input type="checkbox" name="hobi" value="1"/> Muzik <input type="checkbox" name="hobi" value="2" /> Sukan <input type="checkbox" name="hobi" value="3" /> Kecantikan <input type="checkbox" name="hobi" value="4" /> Fesyen <input type="checkbox" name="hobi" value="5" /> Lain-lain <input type="checkbox" name="hobi" value="6" /> Insert Form Checkbox Paparan di browser : v. Drop down Box Elemen ini digunakan apabila pengguna perlu memilih satu pilihan dalam satu senarai. Sintak penulisan :- <select name="pencapaian"> <option value="1">master/phd</option> <option value="2">ijazah Sarjana Muda</option> <option value="3">diploma/stpm</option> <option value="4">spm</option> <option value="5">pmr</option> </select> Insert Form List/Menu Paparan di browser : Jabatan Sains Komputer, FSKTM Mukasurat 10
vi. Textarea Elemen ini digunakan apabila input yang ingin dimasukkan merupakan teks yang panjang. Sintak penulisan :- <textarea rows="5" name="alamat" ></textarea> Insert Form Text area Paparan di browser : vii. Submit Button Elemen ini digunakan untuk proses form di dalam dokumen HTML. Sintak penulisan : <input type="submit" value="submit" name="hantar"> Paparan di browser : Catatan: Jika menggunakan Microsoft Frontpage, Submit Button akan wujud secara automatik apabila tag form dimasukkan ke dalam dokumen HTML. Jabatan Sains Komputer, FSKTM Mukasurat 11
Latihan 3 i. Buka fail baru dan simpan sebagai login.html ii. Bina satu form yang memaparkan output seperti di bawah :- iii. Create New Page dan simpan sebagai daftarahli.html iv. Bina satu form yang memaparkan output seperti di bawah :- Jabatan Sains Komputer, FSKTM Mukasurat 12
Text Field untuk No Staf Text Field untuk Nama Radio Button untuk Jantina Radio Button untuk Taraf Perkahwinan : <input name="nostaf" type="text" id="nostaf" size="10" maxlength="8" /> : <input name="nama" type="text" id="nama" size="50" maxlength="80" /> : <label><input name="jantina" type="radio" value="l" /> Lelaki </label> <label><input name="jantina" type="radio" value="p" /> Perempuan</label> : <label><input name="taraf_perkahwinan" type="radio" value="1" /> Bujang</label> <label><input name="taraf_perkahwinan" type="radio" value="2" /> Berkahwin</label> List/Menu untuk Bangsa Textarea untuk Alamat <label><input name="taraf_perkahwinan" type="radio" value="3" /> Lain-lain</label> Sambungan Modul Latihan Modul Latihan: Pembangunan Applikasi Pangkalan Data dan JSP Bahagian 1 Modul Latihan: Pembangunan Applikasi Pangkalan Data dan JSP Bahagian 2 Jabatan Sains Komputer, FSKTM Mukasurat 13