BAB 6

Membuat homepage interaktif

A. MEMPROGRAM WEB1. persiapan softwareCukup dengan menggunakan beberapa software atau tools yang sudah kita kenal sebelumya.
Software yang dibutuhkan seperti : sistem operasi, yang paling mudah digunakan adalah Windows XP Professional karena kita sudah sering menggunakannya.
Komponen internet information services (IIS) pada Windows XP, jika dikomputer belum terdapat IIS, maka harus menginstalnya menggunakan CD installer Windows XP terlebih dahulu.
Fungsi IIS adalah sebagai web server.
Microsoft Frontpage, digunakan untuk merancang homepage.
Microsoft Access, unutk membuat database sebagai penyimpan data yang akan kita masukkan ke dalam database.
Mocrosoft Internet Explorer, digunakan untuk melakukan pengujian dan pengaksesan homepage interraktif yang telah dibuat.
Komponen Open DataBase Connectivity ODBC), untuk melakukan koneksi dari program komputer ke database.
Biasanya telah tersedia dalam Windows XP.2. persiapan direktori kerjakita harus mendefinisikan tempat kerja dalam lomputer yang akan digunakan sebagai web server.

Langkah-langkah yang harus dilakukan adalah sebagai berikut :
• aktifkan Windows Explorer.
• Buat satu direktori dalam drive C dengan nama SMUKU-INT
• Buat subdirektori image, css, dan database dalam direktori SMUKU-INT.3.
persiapan scenario User Interfacescenario form harus dibuat untuk memberikan gambaran apa yang akan dikerjakan.
Form Input data siswa berfungsi untuk memasukkan data siswa dari homepage ke database.
form Input data siswa berfungsi untuk menampilkan data siswa yang terdapat dalam database ke dalam homepage.
Terdapat beberapa tipe data yang disediakan oleh Microsoft Accsess yang digunakan untuk merepresentasikan penyimpanan data dalam database yaitu, text, number, date, memo, currency, auto number, OLE object, dan hyperlink.

4.persiapan Komponen IISuntuk menjadikan sebuah computer sebagai web server, dalam computer tersebut harus terinstal IIS. Cara controlpengaksesan IIS adalah sebagai berikut :
• pilih tombol start panel
• pilih administrative tolls pada jendela control panel kemudian pilih Internet Information Services
• klik nama computer kemudian pilih web sites dan klik default web sites

dua cara untuk menampilkan informasi homepage melalui IIS, yaitu :
• menggunakan port
• menggunakan direktori virtual5. pemilihan bahasa pemrogramanMicrosoft Active Server Pages (ASP) merupakan bahasa pomrograman yang secara otomatis disediakan oleh Microsoft jika kita menggunakan IIS.
ASP merupakan suatu skrip yang bersifat server side yang ditambahkan pada halaman HTML unutk membuat sebuah web menjadi lebih menarik, dinamis, dan interaktif.
Bahasa standar yang digunakan oleh ASP adalah Microsoft VBScript dan Microsoft Jscript.
Jika pada tagHTML delimiter (suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag atau skrip) yang digunakan adalah <>, maka untk skrip ASP, delimiter yang digunakan adalah karakter .

B. MEMPROGRAM DATABASE WEB INTERAKTIF1.

pembuatan data baselangkah-langkah dalam pembuatan database menggunakan Microsoft Access, yaitu :
• aktifkan Microsoft Access. Buat database data siswa dan simpan dalam C:\SMUKU-INT\database yang sudah dibuat sebelumya.
• Buat satu tabel dengan nama DataSiswa2. pembuatan data source name (DSN)DSN akan mempermudah pengaksesan data dari program ke database.

unutuk melakukannya, ikuti langkah-langkah performance and control panel berikut.
• Tekan tombol start data sources (ODBC).
• Selanjutkan administrative tools maintance akan ditampilakan kotak dialog ODHBC Data Source Administrator. Pilih tab system DSN.
• Klik tombol add yang akan menampilkan menu untuk memilih driver database yang akan digunakan. Pilih Microsoft Access Driver (*.mdb) kemudian tekan tombol finish.
• Pada kotak dialog ODBC Microsoft access setup, isi kotak Data source name dengan DataSiswa dan kotak description dengan data siswa. Tekan tombol select untuk memasukkan database dengan lokasi C:\SMUKU-INT\database\datasiswa.mdb.
selanjutnya tekan OK.3.

PemrogramanPemrograman dilakukan setelah kita menyelesaikan pembuatan DSN. Unutk pemrograman ini akan ditampilkan halaman HTML dan halaman modifikasi menjadi ASP.4. pengujian (testing)langkah terakhir adalah pengetesan hasil pemrograman.
Testing ini akan memberitahukan kepada kita apabila terdapat kesalahan dalam coding yang kita lakukan.kesalahan tersebut akan langsung ditampilkan dalam browser yang kita akses. Akan tetapi, jika tidak terdapat kesalahan maka kita mengetahui bahwa data tersebut sudah tersimpan dalam database bukan dalam halaman lihatdatasiswa.asp

BAB 5

BAB 5 : MEMBUAT HOMEPAGE SEDERHANA
A. Menentukan Perangkat Lunak Untuk Membuat Homepage.

Beberapa hal yang harus diperhatikan, yaitu sebagai berikut :

l. Tujuan dibuatnya homepage, sebenarnya yang menjadi tujuan utama dari pembuatan homepage harus jelas.
2. Siapa (anak-anak/remaja/orang dewasa) yang menjadi target untuk melihat homepage yang kita buat. Misalnya, yang menjadi target utama untuk melihat dan mengakses adalah teman-teman di SMUKU dari kelas 1 sampai 3.
3. Klasifikasikan informasi yang akan ditampilkan dalam homepage. Misalnya, informasi pelajaran, data siswa, link bermanfaat, dan informasi lainnya.
4. Hasil klasiflkasi tersebut akan mewakili satu halaman homepage, sedangkan hasil klasifikasi yang lain akan ditampilkan sebagai hyperlink yang akan ditampilkan pada saat pengguna mengakses link tersebut.
5. Buat sebuah skenario dari setiap hasil klasifikasi tersebut agar informasi yang akan ditampilkan benar-benar jelas atau tidak "mengambang".

Terdapat tiga kriteria tools atau alat bantu yang dapat digunakan untuk membantu pengembangan homepage, yaitu editor HTML, graphics, dan multimedia animasi dan suara.

1. Editor HTML.

Editor HTML digunakan untuk mendesain homepage dan komponen-komponennya. Selain itu, editor HTML juga digunakan untuk menggabungkan gambar, suara, dan animasi yang telah dibuat dalam suatu halaman homepage. Editor HTML yang bersifat graphical user interface, akan mengurangi waktu kita dalam proses penulisan sintaks. Demikian juga untuk pengembangan homepage, kita akan menggunakan salah satu produk Microsoft sebagai editor HTML, yaitu Microsoft FrontPage XP.

2. Editor Graphics.

Editor grafis digunakan untuk mengedit gambar yang akan ditampilkan pada homepage. Kita dapat memodifikasi warna, memotong gambar, memperbesar atau memperkecil gambar, menggabungkan beberapa gambar, memberi efek pada gambar, dan siap untuk ditampilkan pada homepage. Terdapat beberapa editor grafik yang sering digunakan dan populer yaitu CorelDRAW dan Adobe Photoshop. Untuk pembuatan logo gambar dari homepage yang akan dikembangkan, kita dapat menggunakan Adobe Photoshop 7.0.

3. Editor Multimedia Animasi dan Suara.

Editor multimedia digunakan untuk membuat animasi gambar dan suara. Terdapat suatu editor animasi yang paling populer, yaitu Macromedia Flash. Macromedia Flash tidak hanya digunakan untuk membuat animasi gambar dan suara, tetapi juga untuk membuat suatu homepage multimedia. Dengan menggunakan editor Macromedia Flash, animasi yang rumit dapat dikerjakan dan hasilnya sangat baik.

B. Membuat Layout Homepage yang Diinginkan.

Layout atau frame merupakan bentuk format navigasi dari homepage yang akan ditampilkan. Penggunaan layout untuk navigasi ini tergantung pada jenis navigasi dan informasi yang akan ditampilkan dalam homepage. Untuk melihat dan memilih jenis layout yang tersedia dalam Microsoft FrontPage XP, dapat kita lakukan pada saat akan membuat halaman atau website baru. Langkah untuk melakukannya, yaitu sebagai berikut :

1. Pilih tombol start -> All Programs -> Microsoft FrontPage. Lalu,akan ditampilkan dokumen baru pada Microsoft FrontPage.
2. Pilih menu File -> New -> Page or Web.
3. Pilih Page Templates pada bagian New from template dari taskpane New Page or Web.
4. Selanjutnya, akan ditampilkan kotak dialog Page Templates yang terdiri atas tiga tab, yaitu General, Frames Pages, dan Style Sheets.
5. Pilih jenis frame yang kamu inginkan kemudian tekan tombol OK.

Jenis-]enis frame pada Microsoft FrontPage XP, yaitu :

- Banners and Contents

Membuat frame banner di atas, frame isi di bagian bawah kiri, dan frame utama di bagian bawah kanan. Hyperlink pada frame banner akan mengubah frame isi.

- Contents

Frame di sebelah kiri merupakan link yang akan mengubah frame utama di sebelah kanan.

- Footers

Frame utama di atas, frame bawah adalah footer. Hyperlink di footer akan mengubah tampilan di frame utama.

- Footnotes

Sama dengan Footers, tetapi hyperlink di frame utama akan mengubah footnes.

- Header
Membuatyrame header navigasi dan sebuah frame utama di bawahnya. Hyperlink di header akan mengubah frame utama.

- Header, Footer and Contents

Membuat frame header dan footer runtuk navigasi. Hyperlink di header dan footer akan mengubah frame isi.

- Horizontal Split

Frame atas dan bawah yang independent atau tidak saling berhubungan.

- Nested Hierarchy

Hyperlink di sebelah kiri akan mengubah frame sebelah kanan atas. Hyperlink di frame kanan atas akan mengubah isi frame utama.

- Top-Down' Hierarchy

Frame paling atas atau pertama akan mengubah frame di bawahnya, frame kedua akan mengubah isi frame ketiga.

- Vertical Split

Frame kanan dan kiri yang independent atau tidak saling terhubung.

C. Menerapkan Hyperlink

Hyperlink digunakan sebagai alat navigasi halaman pada homepage. Langkah-langkah membuat hyperlink menggunakan Microsoft FrontPage XP, yaitu sebagai berikut ;

1. Aktifkan aplikasi Microsoft FrontPage XP.
2. Buat tulisan "Link ke halaman lain" pada dokumen baru yang ditampilkan pertama kali.
3. Blok tulisan "Link ke halaman lain" dengan cara men-drag tombol kiri mouse.
4. Tekan torabol Ctrl + K pada keyboard sehingga akan ditampilkan kotak dialog Insert Hyperlink. Kotak, Text to display menampilkan teks yang akan dijadikan link. Kolom Link to digunakan untuk memilih link tujuan. Kotak Look in digunakan untuk memilih lokasi tujuan link. Setelah selesai melakukan pengaturan terhadap link yang dibuat, tekan tombol OK.
5. Setelah file disimpan dan dijalankan, ketika kita klik "Link ke halaman Iain" maka akan membuka halaman tujuan link tersebut.

Langkah-langkah untuk membuat hyperlink dengan tag HTML, yaitu sebagai berikut :

1. Aktifkan aplikasi Microsoft FrontPage XP.
2. Buat tulisan "Link ke halaman lain" pada dokumen bam yang ditampilkan pertama.
3. Klik tab HTML di bagian bawah dokumen.
4. Selanjutnya, akan ditampilkan sintaks HTML.
5. Letakkan kursor di depan kata "Link" dan di belakang tag
pada sintaks HTML yang ditampilkan.
6. Sebagai contoh, link tujuan kita adalah filejadwalpelajaran.htm. Ketikkan tag di depan kata "Link" dan di belakang tag.
7. Letakkan kursor di belakang kata "lain" dan di depan tag.
Ketikkan tag.
8. Klik tab Normal di bagian bawah dokumen untuk melihat hasil akhir. Hasilnya akan berbentuk tampilan.

D. Menerapkan Cascading Style Sheet.

Microsoft FrontPage sudah menyediakan Cascading Style Sheet (CSS) yang dapat kita gunakan. Fungsi utama dari CSS adalah untuk melakukan pengaturan beberapa format, yaitu :

1. bentuk huruf.
2. ukuran huruf.
3. format huruf.
4. warna huruf.
5. warna background.
6. warna hyperlink.
7. format textbox.

Beberapa CSS yang telah tersedia dalam Microsoft FrontPage XP, dapat diakses dengan menggunakan langkah-langkah di bawah ini.

1. Aktifkan Microsoft FrontPage XP dalam komputermu.
2. Pilih menu File -> New -> Page or Web.
3. Pilih Page Templates pada bagian New from template dari taskpane New Page or Web.
4. Selanjutnya, akan ditampilkan kotak dialog Page Templates yang terdiri atas tiga tab, yaitu General, Frames Pages, dan Style Sheets. Pilih tab Style Sheets yang menampilkan berbagai jenis style sheet yang disediakan oleh Microsoft FrontPage XP.
5. Pilih jenis style sheet yang kamu inginkan kemudian tekan tombol OK.

Jenis-jenis CSS pada Microsoft FrontPage XP

- Normal Style Sheet
-> CSS kosong

- Arcs
-> - Teks menggunakan jenis huruf Verdana berwarna coklat.
- Headers menggunakan jenis huruf Times New Roman berwarna coklat.
- Background berwarna kuning.

- Bars
-> - Teks menggunakan jenis huruf Arial.
- Headers menggunakan jenis huruf Times New Roman.
- Background berwarna light silver.

- Blocks
-> - Teks dan headers menggunakan jenis huruf Bookman Old Style.
- Hyperlinks berwarna merah.
- Background berwarna light silver.

- Blueprint
-> - Teks dan headers menggunakan jenis huruf Century Gothic.
- Hyperlinks berwarna purple.
- Background berwarna bright yellow.

- Capsules
-> - Teks dan headers menggunakan jenis huruf Arial.
- Hyperlinks berwarna red orange.
- Background berwarna light green.

- Downtown
-> - Teks menggunakan jenis huruf Garamond berwarna kuning.
- Headers menggunakan jenis huruf Verdana.
- Hyperlinks berwarna orange.
- Background'berwarna royal blue.

- Expedition
-> - Teks dan headers menggunakan jenis huruf Book Antiqua.
- Background berwarna peach.

- Highway
-> - Teks menggunakan jenis huruf Verdana berwarna putih.
- Headers menggunakan jenis huruf Verdana.
- Hyperlinks berwarna orange.
- Background berwarna black.

- Neon
-> - Teks dan headers menggunakan jenis huruf Verdana berwarna hijau.
- Hyperlinks berwarna chartreuse.
- Background berwarna black.

- Poetic
-> - Teks menggunakan jenis huruf Book Antiqua berwarna purple.
- Headers menggunakan jenis huruf Book Antiqua.
- Background berwarna white.

- Street
-> - Teks menggunakan jenis huruf Verdana berwarna navy.
- Headers menggunakan jenis huruf Comic Sans MS.
- Background berwarna light cyan.

- Sweets
-> - Teks menggunakan jenis huruf Arial berwarna dark blue.
- Headers menggunakan j enis huruf Arial Rounded MT Bold.
- Background berwarna pale yellow.

E. Membuat Aplikasi dalam Ssitem yang Terintegrasi.

1. Membuat Aplikasi Terintegrasi dengan Microsoft FrontPage.

Skenario membuat homepage sederhana :

Topik
Membuat homepage untuk kelas 3 A SMUKU.

Fungsi homepage
1. Menampilkan berita kegiatan terbaru dari kelas 3A.
2. Menampilkan jadwal pelajaran untuk kelas 3A.
3. Menampillkan data siswa kelas 3A lengkap dengan foto dan hobi.
4. Menampilkan link ke homepage-homepage yang berguna.
5. Latar belakang homepage berwarna kuning.

Halaman 1
Halaman 1 merupakan halaman kegiatan siswa yang terdiri atas :

1. Logo SMUKU.
2. Berita kegiatan terbaru siswa.
3. Link ke halaman jadwal pelajaran.
4. Link ke halaman data siswa kelas 3A.
5. Link ke halaman homepage yang berguna.

Halaman 2
Halaman 2 merupakan halaman jadwal pelajaran yang terdiri atas :

1, Logo SMUKU.
2. Jadwal pelajaran siswa kelas 3A.
3. Link ke halaman berita kegiatan siswa.
4. Link ke halaman data siswa kelas 3A.
5. Link ke halaman homepage yang berguna.

Halaman 3
Halaman 3 merupakan halaman data siswa yang terdiri atas :

1. Logo SMUKU.
2. Data siswa kelas 3 A.
3. Link ke halaman berita kegiatan siswa.
4. Link ke halaman jadwal pelajaran siswa kelas 3A.
5. Link ke halaman homepage yang berguna.

Halaman 4
Halaman 4 merupakan halaman yang berisi link ke homepage-homepage yang berguna, terdiri atas :

1. Logo SMUKU.
2. Homepage dan link yang berguna.
3. Link ke halaman berita kegiatan siswa.
4. Link ke halaman jadwal pelajaran siswa kelas 3A.
5. Linkke halaman data siswa kelas 3A.