Membuat Homepage Interaktif

A. Memprogram Web

1. Persiapan Software

Untuk membuat homepage interaktif mengunakan beberapa software dengan sistem
operasi, Internet Information Services (IIS), Microsoft Access, Microsoft FrontPage,
Microsoft Internet Explorer, dan komponen Open DataBase Connectivity (ODBC)


a. Sistem Operasi
menggunakan Windows XP Professional. Selain itu dapat menggunakan Windows NT,
Windows 2000, dan Windows 2003

b. Komponen IIS pada Windows XP

Jika belum terdapat IIS pada komputer lakukan penginstalan dengan menggunakan
CD instaler Windows XP Professional. Fungsi IIS sebagai web server. Web server
terkenal di dunia contohnya Apache dan IIS. Dengan menggunakan IIS kita tidak
perlu melakukan konfigurasi atau pemasangan secara manual.

Langkah-langkah menginstal:

· masukkan CD installer Windows XP Professional ke dalam CD-ROM

· aktifkan Control Panel melalui tombol Start-Control Panel. PIlih Add or
Remove Programs

· pada jendela Add or Remove Programs, pilih Add/Remove Windows Components

· pilih Internet Information Services (IIS) pada kotak dialog Windows
Components Wizard pertama. Pilih semua komponen yang tersedia lalu tekan OK.
Lalu tekan Next

· proses instalasi akan dilakukan. Untuk mencari lokasi file tekan tombol
Browse. Lalu tekan

· tekan tombol Finish

· lakukan proses restart pada komputermu

· untuk melihat apakah komponen IIS terinstal aktifkan Control Panel pilih
Performance and Maintenance-Administrative Tools dengan cara klik 2 kali.
Pada jendela Administrative Tools terlihat komponen Internet Services. Klik 2
kali.

· akan ditampilkan jendela Internet Information Services dengan berbagai
komponen

c. Microsoft FrontPage

untuk merancang homepage

d. Microsoft Access

untuk membuat database

e. Microsoft Internet Explorer

untuk melakukan pengujian dan pengaksesan homepage interaktif yang telah
dibuat. Selain Microsoft Internet Explorer dapat juga menggunakan Mozilla
Firefox, Netscape, atau Opera

f. Komponen Open DataBase Connectivity

untuk melakukan koneksi dari program komputer ke database. Komponen ini sudah
tersedia pada Windows XP. Untuk pengaksesan klik tombol start-Control
panel-Administrative Tools-Data Sources (ODBC).

Salah satu keluhan utama pengguna Microsoft adalah penggunaan database yang
membingungkan. Pada awalnya kita hanya dapat menggunakan Open DAtaBAse
Connectivity (ODBC) Application Programming Interface (API) yang tidak mudah
digunakan dalam lingkungan VIsual Basic. ODBC suatu spesifikasi untuk database
API. API adalah standar yang didukung berbagai vendor, termasuk Oracle,
Informix, Sybase, dan Microsoft. Driver untuk database ini disediakan baik
oleh vendor maupun perusahaan pihak ketiga seperti Intersolv.

2. Persiapan Direktori Kerja

Seperti langkah awal pada saat kita akan membuat homepage sederhana, kita harus mendefinisikan tempat kerja dalam komputer yang akan digunakan sebagai webserver. Langkah-langkah yang harus dilakukan, yaitu sebagai berikut :


1. Aktifkan Windows Explorer dalam komputermu.
2. Buat satu direktori dalam drive C dengan nama SMUKU-INT.
3. Buat subdirektori image, ess, dan database dalam direktori SMUKU-INT.

3. Persiapan Skenario User Interface

Skenario/>rm 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.
Tipe data digunakan untuk merepresentasikan penyimpanan data dalam database. Terdapat beberapa tipe data yang disediakan oleh Microsoft Access, yaitu sebagai berikut :

a. Text, merepresentasikan data yang berbentuk gabungan huruf, angka, dan karakter khusus.

b. Number, merepresentasikan data yang berbentuk angka.

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. AutoNutnber, 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, mereprentasikan data yang berupa link atau hubungan ke website atau tempat lain.



Ikon pada toolbar Form Microsoft FrontPage

 Form
Membuat form dalam satu halaman.

TextBox
Merepresentasikan input berupa teks, numerik, atau date.

Scrolling Textbox
Merepresentasikan input berupa teks yang panjang.

Check Box
Merepresentasikan sebuah pilihan ya atau tidak.

Radio Button
Merepresentasikan sebuah pilihan ya atau tidak.

Combo Box
Merepresentasikan data yang berupa pilihan terbatas.

Push Button
Merepresentasikan sebuah tindakan yang akan dilakukan jika tombol ditekan.

Picture
Merepresentasikan sebuah gambar dalam homepage.

Label
Merepresentasikan rulisan.

4. Persiapan Komponen IIS

Untuk menjadikan sebuah komputer sebagai web server, dalam komputer tersebut harus terinstal Internet Information Services (IIS). Web server yang akan digunakan adalah komputer lokal tempat kita bekerja dengan tambahan fasilitas IIS.
Seperti yang telah dijelaskan sebelumnya, cara pengaksesan IIS, yaitu sebagai berikut :

1. Pilih tombol start -> Control Panel.
2. Pilih Administrative Tools pada jendela Control Panel kemudian pilih Internet Information Services.
3. Klik nama komputer kemudian pilih Web Sites dan klik Default Web Site.

Ada dua cara menampilkan informasi homepage melalui IIS, yaitu sebagai berikut :

a. Menggunakan port (hanya dapat digunakan pada IIS dalam Windows NT, Windows 2000, dan Windows 2003).
b. Menggunakan direktori virtual.

a. Pengaksesan menggunakan port

Langkah-langkah untuk menampilkan informasi homepage melalui IIS dengan menggunakan port, yaitu sebagai berikut :

1. Klik kanan Web Sites, klik New Website, pilih port.
2. Gunakan port sembarang antara 2000-65500, karena port 1-1000 sudah reserved atau software yang terdapat pada server seperti web server SQL Server, Oracle database, dan software lainnya.
3. Jangan menggunakan port 80, karena port tersebut merupakan default website atau web server, kecuali kita akan menggunakan website tersebut sebagai tampilan utama.
4. Pengaksesan dengan menggunakan port 8080, yaitu sebagai berikut.

- Standalone computer-> http://localhost:8080/namafile.htm.
- Intranet -> http://NamaKomputer:8080/namafile.htm.
- Internet -> http://www.namadomain.com:8080/namafile.htm.

b. Pengaksesan menggunakan direktori virtual

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, ketikkan SMUKU-INT. Selanjutnya, tekan tombol Next.

4. Selanjutnya, akan ditampilkan wizard untuk memasukkan direktori yang akan digunakan. Tekan tombol Browse atau masukkan C:\ SMUKU-INT kemudian tekan tombol Next.

5. Pada wizardyang menampilkan access permission, tekan tombol Next.

6. Selanjutnya, tekan tombol Finish dan kita dapat mencoba apakah direktori virtual tersebut sudah bekerja dengan baik atau belum.

7. Pada jendela Internet Information Services, akan terlihat bahwa direktori virtual sudah berhasil dibuat

8. Pengaksesan dengan menggunakan direktori virtual SMUKU-INT, yaitu sebagai berikut.
- komputer lokal -> http://localhost/SMUKU-INT/datasiswa.htm.
- Intranet -> http://namakomputer/SMUKU-INT/datasiswa.htm.
- Internet -> http://www.namadoraain.com/SMUKU-INT/datasiswa.htm.

9. Cara buka Internet Explorer, tulis http://localhost/SMUKU-INT/datasiswa.htm pada kotak Address. Selanjutnya, jalankan dengan menekan tombol Go.

5. Pemilihan Bahasa Pemograman

Microsoft Active Server Pages (ASP) merupakan bahasa pemograman yang secara otomatis disediakan oleh Microsoft jika kita menggunakan IIS.
a. Deklarasi Variabel
b. Blok kode ASP
c. Statement Input
d. Statement output
e. Statement Logika
f. Statement looping
g. Operasi pengakses data
h. Cara kerja ASP

B. Memprogram DataBase Web Interaktif

1. Pembuatan Database
a. aktifkan Microsoft Access. Buat database data siswa dan simpan dalam
C:\SMUKU-INT\
b. buat satu table dengan nama datasiswa dengan struktur isi table

2. Pembuatan Data Source Name (DSN)
a. tekan tombol start-Control Panel-Performance and Maintenance
AdministrativeTools-Data Source
b. akan ditampilkan kotak dialog ODBC Data Source Administrator, pilih tab
System DSN
c. klik tombol Add, pilih Microsoft Access Driver kemudian tekan Finish
d. pada kotak dialog ODBC Microsoft Access Setup isi kotak data Source Name
dengan data siswa dan kotak description dengan data siswa, tekan tombol
Select untuk memasukkan database selanjutnya tekan OK

3. Pemrograman
Dilakukan setelah kita menyelesaikan pembuatan DSN. Untuk pemrograman ini
akan ditampilkan halaman HTML dan halaman modifikasi menjadi ASP.
a.Programming halaman pertama yaitu pembuatan halaman datasiswa.htm
b.Lakukan modifikasi terhadap halaman datasiswa.htm dengan memasukkan kode
ASP pada bagian awal halaman sebelum tag
c.Simpan file dengan nama datasiswa.asp
d.Programming halaman kedua yaitu pembuatan halaman lihatdatasiswa.htm.
buka kembali halaman lihatdatasiswa.htm pada Microsoft FrontPage
e.Selanjutnya akan dilakukan modifikasi terhadap halaman lihatdatasiswa.htm
dengan memasukkan kode ASP
f.Simpan file dengan nama lihatdatasiswa.asp

4. Pengujian (Testing)
Testing ini akan memberitahukan kepada kita apabila terdapat kesalahan
dalam coding yang kita lakukan. Ditampilkan dalam browser yang kita akses.
Jika tidak terdapat kesalahan maka kita dapat mengetahui bahwa data tersebut
sudah tersimpan dalam database.