Kamis, 03 Desember 2009

BAB 6 : MEMBUAT HOMEPAGE INTERAKTIF

1. Persiapan Software

Untuk membuat homepage dinamis atau interaktif cukup dengan menggunakan beberapa software atau tools yang sudah kita kenal sebelumnya. Software yang dibutuhkan seperti sistem operasi, Internet Information Services (US), Microsoft Access, Microsoft FrontPage, Microsoft Internet Explorer, dan komponen Open DataBase Connectivity (ODBC).

a. Sistem Operasi

Microsoft juga telah menambahkan kemampuan untuk melakukan pengembangan dan pengetesan dalam pembuatan homepage interaktif pada sistem operasi Windows XP. Selain Windows XP, keluarga Windows Iainnya yang dapat digunakan untuk menjalankan Internet Information Service (IIS) adalah Windows NT, Windows 2000, dan Windows 2003.

b. Komponen Internet Information Services (IIS) pada Windows XP

Jika belum terdapat Internet Information Services (IIS) pada Windows XP dalam komputermu, kamu harus meng-instal-nya. menggunakan CD installer Windows XP Professional. Fungsi IIS adalah sebagai web server. Terdapat beberapa web server yang terkenal di dunia, seperti Apache dan IIS. Akan tetapi, dengan menggunakan IIS kita tidak perlu melakukan konfigurasi atau pemasangansecara manual. Cara kerja webserver dapat dideskripsikan.

Langkah-langkah untuk menginstal komponen IIS dalam komputermu, yaitu sebagai berikut.

1. Masukkan CD installer Windows XP Professional ke dalam CD-ROM pada komputermu.
2. Aktifkan Control Panel dalam melalui tombol start-Control Panel. Pilih Add or Remove Programs.
3. Pada jendela Add or Remove Programs, pilih Add/Remove Windows Components yang terdapat di sebelah kiri jendela Add or Remove Programs.
4. Selanjutnya, akan ditampilkan kotak dialog Windows Components Wizard pertama. Pilih Internet Information Services (IIS)-Pilih semua komponen yang tersedia-tekan tombol OK-klik Next.
5. Proses instalasi akan dilakukan secara otomatis.Untuk mencari lokasi file yang sesuai, kamu dapat menekan tombol Browse-tekan tombol OK-tekan tombol Finish setelah proses instalasi selesai dilakukan.
6. Sistem akan menampilkan kotak dialog untuk melakukan proses restart komputer. Lakukan proses restart pada komputermu.
7. Aktifkan Control Panel kemudian pilih Performance and Maintenance, Administrative Tools dengan cara klik dua kali pada pilihan tersebut. Pada jendela Administrative Tools, terlihat komponen Internet Information Services. Klik dua kali pada pilihan tersebut.
8. Akan ditampilkan jendela Internet Information Services dengan berbagai komponen di dalamnya.



Cara kerjanya, yaitu sebagai berikut :

Terdapat permintaan untuk mengakses halaman tertentu dari browser client atau komputer di suatu lokasi. Permintaan tersebut dapat berupa pengaksesan alamat http://[alamatdomain]/index.asp pada browser Internet Explorer, Netscape, atau browser lainnya. Web server menerima permintaan tersebut dan mengembalikannya sebagai sebuah respon. Respon tersebut akan ditampilkan berupa halaman HTML pada browser dari pengakses.

c. Microsoft FrontPage

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

d. Microsoft Access

Microsoft Access digunakan untuk membuat database sebagai penyimpan data yang akan kita masukkan ke dalam database. Kamu telah mempelajari penggunaan Microsoft Access sebelumnya, sehingga dalam pembahasan ini kita tidak akan mempelajari Microsoft Access dari awal.

e. Microsoft Internet Explorer

Microsoft Internet Explorer digunakan untuk melakukan pengujian dan pengaksesan homepage interaktif yang telah dibuat. Selain Microsoft Internet Explorer, kamu dapat menggunakan web fcrows^lainnya, seperti Mozilla Firefox, Netscape, atau Opera.

f. Komponen Open DataBase Connectivity (ODBC)

Komponen ODBC digunakan untuk melakukan koneksi dari program komputer ke database. Komponen ini biasanya sudah tersedia dalam Windows XP. Untuk mengaksesnya, dapat kita lakukan dengan cara menekan tombol start; Control Panel; Administrative Tools; Data Sources (ODBC).


Salah satu keluhan utama pengguna produk Microsoft adalah penggunaan database yang membingungkan. awalnya, kita hanya dapat menggunakan Open DataBase Connectivity (ODBC) Application Programming Interface (API) tidak mudah untuk di implementasikan terutama dalam lingkungan Visual Basic.

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 Pemrograman

Microsoft Active Server Pages (ASP) merupakan bahasa pemrograman yang secara otomatis disediakan oleh Microsoft jika kita menggunakan IIS. Dengan kata lain, kita tidak perlu kesulitan untuk mempelajari bahasa pemrograman yang lain jika akan memprogram web dengan menggunakan Windows, seperti Windows Server 2003, Windows XP, Windows NT, dan Windows 2000.

ASP merupakan suatu skrip yang bersifat server side yang ditambahkan pada halaman HTML untuk membuat sebuah web menjadi lebih menarik, dinamis, dan interaktif. Server sftfeberarti bahwa proses pengerjaan skrip berlangsung di serverbukan di browser atau client.

Bahasa skrip standar yang digunakan oleh ASP adalah Microsoft VBScript dan Microsoft /script. 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, yaitu sebagai berikut :

1. Sudah tersedia secara gratis jika kita menggunakan IIS pada sistem operasi Windows.
2. Struktur bahasanya sangat mudah untuk dipelajari karena ASP mengadopsi sintaks dari bahasa pemrograman Visual Basic yang sudah sangat familiar di kalangan programmer maupun pemula.
3. Mampu berkomunikasi dengan objek komponen (COM/DCOM) yang dibuat dengan berbagai bahasa pemrograman yang 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. Jadi, dapat dikatakan bahv/z. file ASP sebenarnya merupakan/zfeHTML biasa yang ke dalamnya ditambahkan skrip ASP. Jika^fe HTML mempunyai ekstensi .htm atau .html maka jika sudah diberi skrip ASP, ekstensi tersebut tinggal diubah menjasi .asp.

Skrip ASP dapat diletakkan di mana saja sebagaimana kita meletakkan tag HTML. Untuk membedakan antara teks, tag HTML, dan skrip ASP maka digunakan suatu tanda yang disebut delimiter. Delimiter adalah suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag atau skrip. Untuk tag HTML, sudah kita ketahui bahwa delimiter yang digunakan adalah karakter <>. Untuk skrip ASP, delimiter yang digunakan adalah kumpulan karakter <% dan %>.

a. Deklarasi Variabel

VBScript mempunyai beberapa pernyataan yang digunakan untuk pendeklarasian variabel, yaitu dim, private, dan public. Perbedaannya, yaitu pada ruang lingkup yang digunakan. Jika menggunakan dim atau private maka variabelnya bersifat lokal, sedangkan jika menggunakan public maka variabelnya bersifat global. VBScript mempunyai kemampuan untuk mengenal variabel walaupun tidak dideklarasikan.

b. Blok kode ASP

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

Contoh :
Untuk menuliskankata HALLO DUNIA, kita cukup mengetikkan blok ASP berikut di atas sebuah file HTML dan mengubah nama ekstensi file tersebut menjadi ASP.

<% response.write("HALLO DUNIA") %>


c. Statement input

Sintaks 1 -> Request.Form()
Sintaks 2 -> Request.QueryString()

Request.Form digunakan untuk mengambil nilai dari elemen-elemen form HTML, sedangkan Request. QueryString digunakan untuk mengambil nilai variabel HTTP query string. Variabel HTTP query string ditandai dengan karakter tanda tanya (?) dan biasanya terletak di belakang penulisan sebuah alamat URL.

Contoh.
mengambil sebuah nilai dari textbox dengan id txtNama dilakukan dengan menambahkan kode berikut :

<% dim nama nama=request.Form("txtNama") %>

d. Statement output

Statement atau pernyataan output digunakan untuk mengatur output yang akan dikirim ke browser. Contoh metode yang digunakan yaitu metode write dan 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.

Sintaks 1 -> Response.write()
Sintaks 2 -> Response.redirect()

Contoh.
Untuk menuliskan nilai dari textbox dengan id txtNama dilakukan dengan menambahkan kode berikut :

<% dim nama nama=request.form("txtNama") response.write(nama) %>

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.

B. Memprogram Database Web Interaktif

1. Pembuatan Database

Langkah-langkah dalam pembuatan database tersebut, yaitu sebagai berikut :

1. Aktifkan Microsoft Access. Buat database datasiswa dan simpan dalam C:\SMUKU-INT\database yang sudah kamu buat sebelumnya.
2. Buat satu tabel dengan nama DataSiswa.

2. Pembuatan Data Source Name (DSN)

Setelah database dibuat,langkah selanjutnya adalah membuat Data Source Name (DSN). DSN ini mempermudah pengaksesan data dari program ke database. Untuk melakukannya, ikuti langkah-langkah berikut :

1. Tekan tombol start–Control Panel-Performance and Maintenance-Administrative Tools-Data Sources (ODBC).
2. Selanjutnya, akan ditampilkan kotak dialog ODBC Data Source Administrator-Pilih tab System DSN.
3. Klik tombol Add yang akan menampilkan menu untuk memilih driver database yang akan digunakan. Pilih Microsoft Access Driver (*.mdb) kemudian tekan tombol Finish.
4. Pada kotak dialog ODBC Microsoft Access Setup, isi kotak Data Source Hame dengan DataSiswa dan kotak description dengan data siswa. Tekan tombol Select untuk memasukkan database dengan lokasi C:\SMUKU-INT\database\datasiswa.mdb. Lalu, tekan tombol OK.
5. Hasil akhir dari pembuatan data source name ditunjukkan pada Gambar. Lalu, tekan tombol OK.

3. Pemrograman

Pemrograman dilakukan setelah kita menyelesaikan pembuatan DSN. Untuk pemrograman ini akan ditampilkan halaman HTML dan halaman modifikasi menjadi ASP. Dari kedua halaman tersebut, kamu dapat membandingkan perubahan yang diperlukan untuk membuat halaman homepage yang interaktif.

4. Pengujian (Testing)

Langkah terakhir adalah pengetesan hasil pemrograman. Testing ini akan memberitahu kepada kita apabila terdapat kesalahan dalam coding yang kita lakukan. Kesalahan tersebut akan langsung ditampilkan dalam browser yang kita akses. Akan tetapi, jika tidak terdapat kesalahan maka kita dapat mengetahui bahwa data tersebut sudah tersimpan dalam database bukan dalam halaman lihat data siswa