BAB 6 : Membuat Homepage Interaktif

A. Memprogram Web

1. Persiapan Software

Software yang dibutuhkan seperti sistem operasi, Internet Information Service (IIS), Microsoft Access, Microsoft FrontPage, Microsoft Internet Explorer, dan komponen Open DataBase Connectivity (ODBC).

• Sistem Operasi
Microsoft juga telah menambahkan kemampuan untuk melakukan pengembangan dan pengetesan dalam pembuatan homepage interaktif pada sisstem operasi Windows XP.
Windows lainnya yang dapat digunakan untuk menjalankan Internet Information Service (IIS) adalah Windows NT, Windows 2000, dan Windows 2003.

• Komponen Internet Information Services (IIS) pada Windows XP
Fungsi IIS adalah sebagai web server. Terdapat beberapa web server yang terkenal di dunia, seperti Apache dan IIS.

• Microsoft FrontPage
Microsoft FrontPage digunakan untuk merancang homepage, dimana kita juga telah menggunakan software ini untuk mengembangkan homepage sederhana pada pembahasan sebelumnya.

• Microsoft Access
Microsoft Access digunakan untuk membuat database sebagai penyimpan data yang akan kitamasukan ke dalam database.

• Microsoft Internet Explorer
Microsoft internet Explorer digunakan untuk melakukan pengujian dan pengaksesan homepage interaktif yang telah dibuat.

• Komponen Open DataBase Connectivity (ODBC)
Komponen ODBC digunakan untuk melakukan koneksi dari program komputer ke database.
Salah satu keluhan utama pengguna produk Microsoft adalah penggunaan database yang membingungkan.

International Domain Names merupakan penanaman domain Internet yang mengandung karakter non ASCII. Nama domain tersebut dapat berisi karakter yang digunakan dari bahasa non latin seperti Cina atau Arab.
Posting merupakan tulisan yang dikirimkan untuk dipublikasikan melalui Internet, baik pada website, blog, mailing list, maupun forum.
Tipe data digunakan untuk merepresentasikan penyimpanan data dalam database. Terdapat beberapa tipe data yang disediakan oleh Microsoft Access, yaitu sebagai berikut :
- Text, merepresentasikan data yang berbentuk gabungan huruf, angka, dan karakter khusus.
- Number, merepresentasikan data yang berbentuk angka.
- Date, merepresentasikan data yang berbentuk tanggal.
- Memo, merepresentasikan data yang berbentuk teks dan jumlahnya sangat banyak.
- Currency, merepresentasikan data yang memiliki format currency atau mata uang.
- Auto Number, merepresentasikan data yang akan ditangani oleh sistem berupa angka.
- OLE Object, merepresentasikan data yang berupa gabungan dari objek-objek yang dibuat oleh Microsoft.
- Hyperlink, merepresentasikan data yang berupa link atau hubungan ke website atau tempat lain.

2. Pemilihan Bahasa Pemograman

Microsoft Active Server Pages (ASP) merupakan bahasa pemograman yang secara otomatis disediakan oleh Microsoft jika kita menggunakan IIS.
Bahasa skrip standar yang digunakan oleh ASP adalah Microsoft VBScript dan Microsoft Jscript.

Alasan utama penggunaan bahasa pemograman ASP, yaitu sebagai beikut :
• Sudah tersedia secara gratis jika kita menggunakan IIS pada sistem operasi Windows.
• Struktur bahasanya sangat mudah untuk dipelajari karena ASP mengadopsi sintaks dari bahasa pemograman Visual Basic yang sudah sangat familiar di kalangan programmer maupu pemula.
• Mampu berkomunikasi dengan objek komponen (COM/DCOM) yang dibuat dengan berbagai bahasa pemograman yang lain.
• Mempunyai respon request data dengan cepat.
• Untuk menggunakannya, kita hanya tinggal meletakkan kode pemograman pada halaman homepage yang akan kita program.

a. Deklarasi Variabel

VBScript mempunyai beberapa pernyataan yang digunakan untuk pendeklarasian variable, yaitu dim, private, dan public. Perbedaannya, yaitu pada ruang lingkup yang digunakan.
VBScript mempunyai kemampuan untuk mengenal variable walaupun tidak dideklarasikan. Akan tetapi, sebaiknya deklarasi tetap dilakukan untuk menghindari kesalahn pengguna variabel.

b. Blok kode ASP

ASP selalu diawali dengan blok <% dan diakhiri dengan blok %>. Didalam kedua blok tersebut, sintaks, atau kode ASP dituliskan.


c. Statement Input

Sintaks 1 →Request.Form()
Sintaks 2 →Request.QueryString()
• Request.Form digunakan untuk mengambil nilai dari elemen-elemen form HTML.
• Request.QueryString digunakan untuk mengambil nilai variabel HTTP query string.

d. Statement output

Statement atau pernyataan output digunakan untuk mengatur output yang akan dikirim ke browser.
Sintaks 1 → Response.write()
Sintaks 2 →Response.redirect()
• Metode write digunakan untuk menulis output berupa variabel sebagai sebuah string.
• Metode redirect digunakan untuk mengirimkan pesan ke browser yang mengarahkan browser untuk menuju ke URL tertentu.

e. Statement logika

Sintaks logika untuk ASP sama dengan sintaks bahasa pemograman Visual Basic.

f. Statement looping

Sintaks looping untuk ASP juga sama dengan sintaks looping atau perulangan pada bahasa pemrograman Visual Basic.

- HTTP (Hyper Text Transfer Protocol) merupakan protocol yang digunakan pada World Wide Web (WWW).
HTTP menentukan bagaimana pesan di format dan di transmisikan, serta tindakan apa yang harus dilakukan oleh web server dan web browser dalam merespon perintah.


B. Memprogram Database Web Interaktif

1. Pembuatan Database

Pembuatan database untuk sesuatu situs web yang dapat menggunakan Microsoft acces.

2. Pembuatan Data Source Name (DSN)

Data source Name (DNS) akan mempermudah pengaksesan data dari program ke database. Pemrograman dilakukan setelah kita mnyelesaikan pembuatan DNS yang kemudian akan dilakukan atau akan dilanjutkan dengan pengujian (testing)

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.