BAB 6 Membuat Homepage Interaktif

A. Memprogram Web

1. Persiapan Software

Untuk membuat homepage dinamis atau interaktif sangatlah sederhana. Software yang di butuhkan seperti:

1. System Operasi,
2. Internet Information Services (IIS),
3. Microsoft Access
4. Microsoft FrontPage
5. Microsoft Internet Explorer
6. Komponen Open DataBase Connectivity


2. Persiapan Direktori Kerja

Seperti langkah awal pada saat kita akan membuat homepage sederhana, kita harus mendefisinikan tempat kerja dalam computer yang akan digunakan sebagai web server. Langkah-langkah yang harus dilakukan, yaitu:

1. Aktifkan Windows Explorer dalam computer.
2. Buat sati direktori dalam drive C dengan nama SMUKU-INT
3. Buat subdirektori image, css, dan database dalam direktori SMUKU-INT.


3. Persiapan Skenario User Interface

Skenario from 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.

1. Input data siswa. Fungsi = untuk memasukkan data siswa dari homepage ke database. Field yang harus ada yaitu Nomor Induk, Nama, Tanggal Lahir Kelas, Jurusan dan Tahun Masuk.
2. Output data siswa. Fungsi = Untuk menampilkan data siswa yang terdapat dalam database ke dalam homepage.


4. Persiapan Komponen IIS.

Setelah dua file yang kita akan modifikasi dalam pemograman selesai dibuat, kita harus memersiapkan web server. Untuk menjadikan aebuah computer web server, dalam computer tersebut harus terinstal IIS. Web server yang akan digunakan adalah computer local tempat kita bekerja degan tambahan fasilitas IIS.

Cara pengaksesan IIS, yaitu :

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

Terdapat 2 cara menampilkan informasi homepage melalui IIS

a. Menggunakan port (hanya dapat digunakan pada IIS dalam Windows NT, Windows
2000, Windows 2003
Langkah pengaksesan port :

1. Klik kanan Web Sites, klik New Web Sites, pilih port
2. Gunakan port sembarang antara 2000-65500
3. Jangan menggunakan port 80
4. Pengaksesan dengan menggunakan port 8080
5. Stand alone computer-http://localhost:8080/namafile.htm
6. Intranet-http;//namakomputer:8080/namafile.htm
7. Internet-http://www.namadomain.com:8080/naamfile.htm


b. Pengaksesan menggunakan direktori virtual

1. Klik kanan Default Web Site, pilih New –Virtual Directory
2. Akan ditampilkan Virtual Directory Creation Wizard pertama. Tekan Next
3. Pada Virtual Directory Creation Wizard kedua untuk mengisi alias direktori, ketikkan SMUKU-INT. Lalu tekan Next
4. Akan ditampilkan wizard untuk memasukkan direktori yang akan digunakan. Tekan tombol Browse untuk masukkan C:\SMUKU-INT lalu tekan Next
5. Pada wizard yang menampilkan access permission, tekan Next
6. Tekan tombol Finish
7. Pada jendela Internet Information Services terlihat bahwa direktori virtual sudah berhasil dibuat
8. Pengaksesan dengan menggunakan direktori virtual SMUKU-INT:

-komputer local-http://localhost/SMUKU-INT/datasiswa.htm
-intranet-http://namakomputer/SMUKU-INT/datasiswa.htm
-internet-http://www.namadomain.com/SMUKU-INT/datasiswa.htm

5. Pemilihan Bahasa Pemrograman

Microsoft Active Server Pages (ASP) merupakan bahasa pemrograman yang secara otomatis disediakan oleh Microsoft jika kita menggunakan IIS dengan Windows, seperti Windows Server 2003, Windows XP, Windows NT, dan Windows 2000.

ASP merupakan suatu skrip yang ditambahkan pada halaman HTML untuk membuat web menjadi lebih menarik, dinamis, dan interaktif. Server side berarti proses pengerjaan skrip berlangsung di server bukan di browser atau client.Karena bersifat server side, maka untuk dapat dijalankan pada sebuah PC biasa yang berbasis Windows, PC tersebut perlu disimulasikan menjadi sebuah web server dengan menginstal Microsoft Personal Web Server (PWS) atau Microsoft Internet Information Services (IIS). Bahasa skrip standar yang digunakan ASP adalah Microsoft VBScript dan Microsoft Jscript. Jika tidak dinyatakan sendiri maka secara default skrip yang digunakan adalah Microsoft VBScript. Kamu dapat mengubah default tersebut dengan menambahkan perintah <%LANGUAGE=bahasa skrip%>

Alasan utama penggunaan bahasa pemrograman ASP:

1. Tersedia secara gratis
2. Struktur bahasanya mudah dipelajari
3. Mampu berkomunikasi dengan bahasa pemrograman lain
4. Mempunyai respons request data dengan cepat
5. Untuk menggunakannya kita hanya tinggal meletakkan kode pemrograman pada halaman homepage yang akan kita program

Sebuah file ASP merupakan file text only yang di dalamnya berisi teks, tag HTML, dan skrip ASP. File ASP sebenarnya file HTML biasa yang ke dalamnya ditambahkan skrip ASP. Jika file HTML mempunyai eksistensi .htm atau .html maka jika sudah diberi skrip ASP tinggal diubah menjadi .asp. Untuk membedakan antara teks, tag HTML, dan skrip ASP digunakan suatu tanda disebut delimiter(suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag atau skrip) <%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

1. Aktifkan Microsoft Access. Buat database data siswa dan simpan dalam C:\SMUKU-INT\
2. Buat satu table dengan nama datasiswa dengan struktur isi table


2. Pembuatan Data Source Name (DSN)

1. Tekan tombol start-Control Panel-Performance and Maintenance AdministrativeTools-Data Source
2. Akan ditampilkan kotak dialog ODBC Data Source Administrator, pilih tab System DSN
3. Klik tombol Add, pilih Microsoft Access Driver kemudian tekan Finish
4. 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.

1. Programming halaman pertama yaitu pembuatan halaman datasiswa.htm
2. Lakukan modifikasi terhadap halaman datasiswa.htm dengan memasukkan kod ASP pada bagian awal halaman sebelum tag
3. Simpan file dengan nama datasiswa.asp
4. Programming halaman kedua yaitu pembuatan halaman lihatdatasiswa.htm. buka kembali halaman lihatdatasiswa.htm pada Microsoft FrontPage
5. Selanjutnya akan dilakukan modifikasi terhadap halaman lihatdatasiswa.htm dengan memasukkan kode ASP
6. 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.