Persiapan Software
Untuk membuat homepage interaktif sangatlah sederhana. Cukup dengan menggunakan beberapa software atai tools yang sudah kita kenal sebelumnya. Software yang dibutuhkan seperti sistem operasi, Internet Information Services (IIS), Microsoft Access, Microsoft Frontpage, Microsoft Internet Explorer, dan komponen Open DataBase Connectivity (ODBC).
Sistem Operasi
Windows yang dapat menjalankan IIS adalah Windows XP, Windows NT, Windows 2000, dan Windows 2003.
Komponen Internet Information Services (IIS) pada WIndows XP
Fungsi IIS adalah sebagai web server. Apache dan IIS adalah contoh web server yang terkenal di dunia.
Langkah-langkah untuk menginstal komponen IIS dalam komputer :
1.Masukkan CD installer ke dalam CD-ROM pada komputermu
2.Aktifkan Control Panel. Pilih Add or Remove Program
3.Pada Jendela Add or Remove Program, pilih Add or Remove Windows Componen
4.Selanjutnya akan ditampilkan kotak dialog Windows Componen Wizard pertama. Pilih IIS. Setelah itu kita dapat melihat komponen-komponen IIS melalui tombol details. Pilih semua komponen lalu tekan tombol OK. Selanjutnya klik Next
5.Proses Instalasi akan dilakukan secara otomatis
6.Tekan tombol finish setelah proses instalasi selesai
7.Lakukan proses rstart pada komputer
8.Untuk melihat komponen IIS telah terinstal, aktifkan Control Panel kemudian pilih Peformance and Maintenance.
9.Selanjutnya, akan ditampilkan jendela IIS dengan berbagai komponen di dalamnya
Microsoft FrontPage
Digunakan untuk merancang homepage, dimana kita juga telah menggunakan software ini untuk mengembangkan homepage sederhana pada pembahasan sebelumnya.
Microsoft Access
Digunakan untuk membuat database sebagai penyimpan data yang akan kita masukkan ke dalam database.
Microsoft Internet Explorer
Digunakan untuk melakukan pengujian dan pengaksesan homepage interaktif yang telah dibuat. Selain Internet Explorer, kita juga dapat menggunakan web browser lainnya, seperti Mozilla Firefox, Netscape, atau Opera.
Komponen Open DataBase Connectivity (ODBC)
Digunakan untuk melakukan koneksi dari komputer ke database. Biasanya sudah tersedia dalam Windows XP. Untuk mengaksesnya dapat dilakukan dengan cara menekan tombol start -> Control Panel -> Administrative Tools -> Data Sources (ODBC)
Persiapan Direktori Kerja
Langkah-langkah yang harus dilakukan yaitu:
1. Aktifkan Windows Explorer dalam komputermu
2. Buat satu direktori dalam Drive C dengan nama SMUKU-INT
3. Buat subdirektori image, css, dan database dalam direktori SMUKU-INT
Persiapan Skenario User Interface
Skenario form harus dibuat untuk memberikan gambaran apa yang akan dikerjakan. Terdapat dua form yang akan dibuat dengan fungsi sebagai form untuk memasukkan dan menampilkan data siswa dari database.
Contoh:
1. Input data siswa : Untuk memasukkan data siswa dari homepage ke database. Dan Field yang harus ada adalah Nomor Induk, Nama, Tanggal lahir, Kelas, jurusan, dan tahun masuk
2. Output data siswa : Untuk menampilkan data siswa yang terdapat dalam database ke dalam homepage. Field yang harus ada adalah Nomor Induk, Nama, Tanggal lahir, Kelas, jurusan, dan tahun masuk.
Tipe data yang digunakan untuk mempresentasikan penyimpanan data dalam database. Terdapat beberapa tipe data yang disediakan oleh Microsoft Access, yaitu sebagai berikut :
a) Text, merepresentasikan data yang berberntuk gabungan huruf, angka, dan karakter khusus
b) Number, merepresentasikan data yang berbentuk tanggal
c) Date, merepresentasikan data yang berbentuk tanggal
d) Memo, merepresentasikan data yang berbentuk teks dan jumlahnya sangat banyak
e) Currency, merepresentasikan data yang memiliki format currency atau mata uang
f) AutoNumber, merepresentasikan data yang akan ditangani oleh sistem berupa angka
g) OLE Object, merepresentasikan data yang berupa gabungan dari objek-objek yang dibuat oleh microsoft
h) Hyperlink, merepresentasikan data yang berupa link atau hubungan ke website atau tempat lain
Ikon pada toolbar form Microsoft FrontPage:
1. Form : membuat form dalam satu halaman
2. TextBox : merepresentasikan input berupa teks, numerik, atau date
3. Scrolling textbox : merepresentasikan input berupa teks yang panjang
4. Check Box : merepresentasikan sebuah pilihan ya atau tidak
5. Radio Button : merepresentasikan sebuah pilihan ya atau tidak
6. Combo Box : merepresentasikan data yang berupa pilihan terbatas
7. Push Button : merepresentasikan sebuah tindakan yang akan dilakukan jika tombol ditekan
8. Picture : merepresentasikan sebuah gambar dalam homepage
9. Label : merepresentasikan tulisan
Persiapan Komponen IIS
Untuk menjadikan sebuah komputer sebagai web server, dalam komputer harus terinstal Internet Information Services (IIS). Web server yang akan digunakan adalah komputer lokal tempat kita bekerja dengan tambahan fasilitas IIS.
Cara pengaksesan IIS:
1. Pilih tombol start -> Control Panel
2. Pilih Administrative Tools pada jendela Control Panel kemudian pilih IIS
3. Klik nama komputer kemudian pilih Web Sites dan klik Default Web Site
Terdapat 2 cara menampilkan informasi hompeage melalui IIS, yaitu:
1. Menggunakan port
2. Menggunakan direktori visual
Pengaksesan menggunakan port
1. Klik kanan Web Sites, klik new website, pilih port
2. Gunakan port sembarang antara 2000-65500
3. Jangan menggunakan port 80, karena port tersebut merupakan default website
4. Pengaksesan menggunakan port 8080, yaitu sebagai berikut :
- Stand Alone Computer : http://localhost:8080/namafile.htm
- Intranet : http://NamaKomputer:8080/namafile.htm
- Internet : http://namadomain.com:8080/namafile.htm
Pengaksesan menggunakan direktori visual
Untuk menampilkan informasi homepage melalui IIS dengan menggunakan direktori virtual, yaitu sebagai berikut :
1. Klik kanan Default Web Site, pilih new-virtual directory
2. Selanjutnya akan ditampilkan Virtual Directory Creation Wizard pertama. Tekan tombol next untuk melanjutkan ke wizard berikutnya.
3. Pada Virtual Directory Creation Wizard kedua, akan diminta untuk mengisi alias direktori, tekan tombol next
4. Selanjutnya akan ditampilkan wizard untuk memasukkan directory yang akan digunakan, kemudian tekan tombol next
5. Pada wizard yang menampilkan access permission, tekan tombol next.
6. Selanjutnya tekan tombol finish
7. Pada jendela IIS akan terlihat bahwa direktori virtual sudah berhasil
8. Pengaksesan dengan menggunakan direktori virual SMUKU-INT, yaitu sebagai berikut :
- Komputer Lokal : http://localhost/ SMUKU-INT/datasiswa.htm
- Intranet : http://NamaKomputer// SMUKU-INT/datasiswa.htm
- Internet : http://namadomain.com/ SMUKU-INT/datasiswa.htm
Pemilihan Bahasa Pemograman
Microsoft Active Server (ASP) merupakan bahasa pemrograman yang secara otomatis disediakan oleh Microsoft jika kita menggunakan IIS. ASP merupakan suatu skrip yang bersifat server side yang ditambahkan pada halaman HTML untuk membuat sebuah web lebih menarik.
Bahasa skrip standar yang digunakan oleh ASP adalah Microsoft VBScript dan Microsoft Jscript. Alasan utama penggunaan bahasa pemrograman ASP, yaitu sebagi berikut :
1. Sudah tersedia secara gratis jika kita menggunakan IIS pada sistem operasi windows
2. Struktur bahasanya sangat mudah untuk dipelajari
3. Mampu berkomunikasi dengan objek komponen (COM/DCOM)
4. Mempunyai respons request data dengan cepat
5. Untuk menggunakanya, kita hanya tinggal meletakkan kode pemrograman pada halaman homepage yang akan kita program.
a. Deklarasi Variabel
VBScript mempunyai beberapa pernyataan yang digunakan untuk pendeklarasian variabel, yaitu dim,private, dan public.
b. Blok kode ASP
c. Statement input
d. Statement logika
Sintaks logika untuk ASP sama dengan sintaks logika bahasa pemrograman Visual Basic
Sintaks looping untuk ASP juga sama dengan sintaks looping atau perulangan pada bahasa pemrograman Visual Basic
MEMPROGRAM DATABASE WEB INTERAKTIF
Pembuatan Database
Langkah-langkah dalam pembuatan database, yaitu sebagai berikut :
1. Aktifkan Microsoft Access. Buat database siswa dan simpan dalam C:\SMUKU-INT\database yang sudah dibuat
2. Buat satu tabel dengan nama DataSiswa dengan struktur isi tabel
Pembuatan Data Source Name (DSN)
Langkah-langkahnya adalah:
1.Tekan tombol start -> Control Panel -> Performance and Maintenance -> Administrative Tools -> ODBC
2.Selanjutnya, akan ditampilkan kotak dialog ODBC, Pilih tab system DSN
3.Klik tombol Add yang akan menampilkan menu untuk memilih driver database yang akan digunakan
4.Pada kotak dialog ODBC Microsoft Access Setup, isi kotak Data Source Name dengan Data Siswa dan kotak Description dengan data siswa.
Pemrograman
Untuk pemograman ini akan ditampilkan halaman HTML dan halaman modifikasi menjadi ASP. Dari kedua halaman tersebut, kita dapat membandingkan perubahan yang diperlukan untuk membuat halaman homepage yang interaktif.
1. Programming halaman pertama yaiut pembuatan halaman datasiswa.htm yang telah kamu lakukan sebelumnya
2. Lakukan modifikasi terhadap halaman tersebut dengan memasukkan kode ASP
3. Ganti action ="-WEBBOT-SELF--" yang terdapat dalam tagform datasiswa.asp dengan action ="datasiswa.asp".
4. Ubahlah baris kode menjadi . Kode javascript ini akan menampilkan jendela baru dan membuka file lihatdatasiswa.asp secara langsung yang akan menampilkan isi dari database.
5. Simpan file dengan nama datasiswa.asp
6. Programming halaman kedua yaitu pembuatan halaman lihatdatasiswa.htm yang telah kamu lakukan sebelumnya. Buka kembali halaman lihatdatasiswa.htm pada Microsoft Frontpage.
7. Akan dilakuakan modifikasi terhadap halaman lihatdatasiswa.htm
8. Ubahlah kode diantara tag
9. Ganti dengan untuk menutup jendela baru yang dibuka dengan cara menekan tombol Lihat pada halaman datasiswa.asp
10. Simpan file dengan nama lihatdatasiswa.asp
Pengujian