BAB 6 MEMBUAT HOMEPAGE INTERAKTIF

A. MEMPROGRAM WEB

1. Persiapan Software

Software yang dibutuhkan untuk membuat homepage dinamis yaitu, sistem operasi, Internet Information Service (IIS), Microsoft Access, Microsoft FrontPage, Microsoft Internet Explorer, dan komponen Open DataBase Connectivity (ODBC).

a. Sistem Operasi
Sistem operasi yang dapat digunakan yaitu, Windows XP, Windows NT, Windows 2000, dan Windows 2003.

b. Komponen Internet Information Service (IIS)
Fungsi IIS adalah sebagai web browser. Beberapa web browser yang terkenal yaitu, Apache dan IIS. Tetapi dengan menggunakan IIS, tidak perlu melakukan konfigurasi atau pemasangan secara manual.

Langkah-langkah menginstal komponen IIS:
• Masukkan CD installer.
• Aktifkan Control Panel, dengan menekan tombol Start → Control Panel.
• Pilih Add or Remove Programs.
• Kemudian pilih Add/Remove Windows Components.
• Pilih Internet Information Service (IIS).
• Pilih semua komponen yang tersedia kemudian tekan OK. Lalu, tekan Next.
• Proses instalasi dilakukan. Kemudian tekan OK.
• Tekan tombol Finish.

c. Microsoft FrontPage
Microsoft FrontPage digunakan untuk merancang homepage, di mana kita juga telah menggunakan software ini untuk mengembangkan homepage sederhana.

d. Microsoft Access
Microsoft Access digunakan untuk membuat database sebagai penyimpan data yang akan kita masukkan ke dalam database.

e. Microsoft Internet Explorer
Microsoft Internet Explorer digunakan untuk melakukan pengujian dan pengaksesan homepage interaktif yang telah dibuat. Selain menggunakan Microsoft Internet Explorer, juga dapat menggunakan web browser lain, seperti Mozilla FireFox, Netscape, atau Opera.

f. Komponen Open DataBase Community (ODBC)
Komponen ODBC digunakan untuk melakukan koneksi dari program komputer ke database. Untuk mengaksesnya dapat dilakukan dengan cara menekan tombol start → Control Panel → Administrative Tools → Data Sources (ODBC).
ODBC merupakan suatu spesifikasi untuk database Application Programming Interface (API). API merupakan standar yang didukung oleh berbagai vendor, termasuk Oracle, Informix, Sybase dan Microsoft. Driver untuk database ini disediakan oleh vendor atau perusahaan pihak ketiga seperti Intersolv.

2. Persiapan Direktori Kerja

Langkah-langkahnya, yaitu:
a. Aktifkan Windows Explorer.
b. Buat satu direktori dalam drive C dengan nama SuperJunior-INT.
c. Buat subdirektoriimage, css, dan database dalam direktori SuperJunior-INT.

3.Persiapan Skenario User Interface

1. Form: Input data siswa
Fungsi: Untuk memasukan data siswa dari homepage ke data base
Field yang harus ada: Nomor induk, Nama, Tanggal lahir, Kelas, Jurusan, dan Tahun Masuk.
2.Form: Output data siswa
Fungsi: Untuk menampilkan data siswa yang terdapat dalam data base ke dalam homepage.
Field yang harus ada: Nomor induk, Nama, Tanggal lahir, Kelas, Jurusan, dan Tahun Masuk.

4. Persiapan Komponen IIS

Cara pengaksesan IIS, yaitu:
a. Pilih tombol start → Control Panel.
b. Pilih Administrative Tools → Internet Information Services.
c. Klik nama komputer, kemudian pilih Web Sites dan klik Default Web Site.

Terdapat dua cara menampilkan informasi homepage melalui IIS, yaitu:
a. Menggunakan port.
b. Menggunakan direktori virtual.

a. Pengaksesan menggunakan port
Langkah-langkahnya:
• Klik kanan Web Sites → New Web Site → port.
• Gunakan port sembarang antara 2000-65500.
• Jangan gunakan port 80.

b. Pengaksesan menggunakan direktori virtual
Langkah-langkahnya, yaitu:
• Klik kanan Default Web Site → New → Virtual Directory.
• Akan ditampilkan kotak dialog, selanjutnya klik Next.
• Isi alias direktori, kemudian Next.
• Tekan tombol Browse, lalu Next.
• Tekan tombol Next.
• Tekan tombol Finish.

5. Pemilihan Bahasa Pemrograman

Microsoft Active Server Pages (ASP) merupakan bahasa pemrograman yang secara otomatis disediakan oleh Microsoft jika menggunakan IIS. ASP meruapakan suatu skrip yang bersiaft server side yang ditambahkan pada HTML untuk membuat sebuah web menjadi lebih menarik, dinamis dan interaktif. Server side berarti bahwa proses pengerjaan skrip berlangsung di server bukan di browser atau client. Bahasa skrip standar yang digunakan oleh ASP adalah Microsoft VBScript dan Microsoft Jscript.

Alasan utama penggunaan bahasa pemrograman ASP, yaitu:
a. Sudah tersedia secara gratis jika sudah menggunakan IIS.
b. Struktur bahasanya sangat mudah untuk dipelajari.
c. Mampu berkomunikasi dengan objek komponen (COM/DCOM) yang dibuat dengan bahasa pemrograman lain.
d. Mempunyai respons request data dengan cepat.
e. Untuk menggunakannya, hanya tinggal menekan kode pemrograman pada halaman homepage yang akan diprogram.

Sebuah file ASP merupakan file text only yang di dalamnya berisi teks, tag HTML, dan skrip ASP. File ASP mempunya ekstensi .asp. untuk membedakan antara teks, tag HTML dan skrip ASP maka digunakan suatu tanda yang disebut delimiter. Delimeter adalah suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag atau skrip. Untuk tag HTML, delimeter yang digunakan adalah karakter < dan >. Untuk skrip ASP, yaitu kumpulan karakter <% dan %>.

a.Deklarasi Variabel
VBScript mempunyai beberapa pernyataan yang digunakan untuk pendeklarasian variable yaitu dim, private, dan public. Perbedaannya pada ruang lingkup yang digunakan. Jika menggunakan dim atau private maka variabelnya bersifat local, bila public variabelnya bersifat global.

b.Blok Kode ASP
ASP selalu diawali dengan blok <%dan dakhiri%>. Dalam kedua blok tersebut sintaks atau kode ASP dituliskan

c. Statement input
Sintaks 1- Request.Form()
Sintaks 2- Request.queryString(url>)
Request.Form untuk mengambil nilai dari elemen-elemen form HTML, sedangkan Request.QueryString digunakan untuk mengambil nilai variabel HTTP query string ditandai dengan karakter tanda Tanya (?) dan biasanya terletak di belakang penulisan alamat URL

d.Statement Output
Digunakan untuk mengatur output yang akan dikirimkan ke browser. Metode yang digunakan metode write dan redirect.

e.Statement Logika
Sintaks logika untuk ASP sama dengan sintaks logika bahasa pemrograman Visual Basic.
f.Statement Looping
Sintaks looping untuk ASP juga sama dengan sintaks looping atau perulangan pada bahasa pemrograman Visual Basic
g.Operasi Pengaksesan Data
Sintaks pengaksesan data juga sama dengan Visual Basic
h.Cara Kerja ASP
Misalnya kita mengakses halaman ASP dari sebuah website http://www.namadomain.com/indeks.asp. halaman tersebut akan diload ke browser internet explorer dalam bentik HTML setelah terlebih dahulu web server menerjemahkan atau mengcompile semua kode yang terdapat dalam blok <%%> pada file indeks.asp. Semua kode ASP yang terdapat dalam file akan hilang dan diganti dengan value yang dikembalikan dari database

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.ht buka kembali halaman lihatdatasiswa.htm pada Microsoft FrontPage
e.Selanjutnya akan dilakukan modifikasi terhadap halaman lihatdatasiswa.htmdengan 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.