rangkuman bab 6

A. Persiapan Software

Untuk membuat homepage dinamis atau interaktif sangatlah sederhana. 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).

1. 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.

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

IS atau Internet Information Services atau Internet Information Server adalah sebuah HTTP web server yang digunakan dalam sistem operasi server Windows, mulai dari Windows NT 4.0 Server, Windows 2000 Server atau Windows Server 2003. Layanan ini merupakan layanan terintegrasi dalam Windows 2000 Server, Windows Server 2003 atau sebagai add-on dalam Windows NT 4.0. Layanan ini berfungsi sebagai pendukung protokol TCP/IP yang berjalan dalam lapisan aplikasi (application layer). IIS juga menjadi fondasi dari platform Internet dan Intranet Microsoft, yang mencakup Microsoft Site Server, Microsoft Commercial Internet System dan produk-produk Microsoft BackOffice lainnya.

IIS telah berevolusi semenjak diperkenalkan pertama kali pada Windows NT 3.51 (meski kurang banyak digunakan) hingga IIS versi 6.0 yang terdapat dalam Windows Server 2003. Versi 5.0 diintegrasikan dalam Windows 2000, sedangkan Windows XP Professional memiliki IIS versi 5.1. Windows NT 4.0 memiliki versi 4.01 yang termasuk ke dalam add-on Windows NT Option Pack. Dalam Windows NT 4.0 Workstation atau Windows 95/98, IIS juga dapat diinstalasikan sebagai Microsoft Personal Web Server (PWS).

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 perta.ma. Pilih Internet Information Services (IIS). Kamu dapat melihat komponen-komponen IIS yang dapat dipilih melalui tombol Details. Pilih semua komponen yang tersedia kemudian tekan tombol OK. Selanjutnya, tekan tombol Next.
5. Proses instalasi akan dilakukan secara otomatis. Sistem akan meminta lokasi beberapa file yang terdapat dalam CD installer Windows XP Professional. Untuk mencari lokasi file yang sesuai, kamu dapat menekan tombol Browse. Selanjutnya, 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. Untuk melihat apakah komponen IIS telah ter-instal dalam komputermu, 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. Selanjutnya, 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.

3. Microsoft FrontPage

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

4. 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.

5. 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.

6. Komponen Open DataBase Connectivity (ODBC)

Open Database Connectivity (disingkat menjadi ODBC) adalah sebuah standar terbuka untuk konektivitas antar mesin basis data. Standar ini menyediakan API yang dapat digunakan untuk menjalankan dan mengoneksikan sebuah aplikasi dengan sebuah sistem manajemen basis data (SMBD). Para desainer ODBC membuatnya dengan tujuan agar ODBC terbebas dari penggunaan bahasa pemrograman tertentu, sistem manajemen basis data tertentu, dan sistem operasi tertentu.

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 diimplementasikan terutama dalam lingkungan Visual Basic. ODBC, merupakan suatu spesifikasi untuk database API. API merupakan standar yang didukung oleh berbagai vendor termasuk Oracle, Informix, Sybase, dan Microsoft. Driver untuk database ini disediakan baik oleh vendor ataupun perusahaan pihak ketiga seperti Intersolv.

B. 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.

C. 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.

D. 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.

1. 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.

2. 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.

E. 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 %>.

1. 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.

2. 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") %>


3. 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") %>

4. 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) %>

5. Statement logika

Sintaks logika untuk ASP sama dengan sintaks logika bahasa pemrograman Visual Basic.

6. Statement looping

Sintaks looping untuk ASP juga sama dengan sintaks looping atau perulangan pada bahasa pemrograman Visual Basic.

7. Operasi pengaksesan data

Sintaks pengaksesan data juga sama dengan Visual Basic.

F. 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.

1. Programming halaman pertama yaitu pembuatan halaman datasiswa.htm yang telah kamu lakukan sebelumnya. Buka kembali halaman datasiswa.htm pada Microsoft FrontPage.
2. Lakukan modifikasi terhadap halaman datasiswa.htm tersebut dengan memasukkan kode ASP di bawah ini pada bagian awal halaman sebelum tag .

<%@ Language=VBScript %>
<% dim conn dim rs dim Nomorlnduk dim Nama dim TanggalLahir dim Kelas dim Jurusan dim TahunMasuk dim strSQL if request. Form O*cmdSimpan")="Simpan" then NomorInduk=Request.Form("txtNomorlnduk") Nama=Request.Form("txtNama") TanggalLahir=Request.Form("txtTanggalLahir"} Kelas=Request.Form("cboKelas") Jurusan=Request. Form ('"'cboJurusan") TahunMasuk=Request.Form("txtTahunMasuk") strSQL="Insert into DataSiswa(Nomorlnduk,Nama,TanggalLahir,Kelas,Jurusan,T ahunMasuk) values (A<* & _Nomorlnduk & "','" & Nama & «/r'« & TanggalLahir & "','" & Kelas & "-','" & jurusan & "','" & __ TahunMasuk & "') " Set conn = Server.CreateObject("ADODB.Connection") Set rs = Server.CreateObject("ADODB.Recordset") conn.Open "DSN=DataSiswa" rs.open strsql, conn, 2, 2 Set rs = Nothing Set conn = Nothing end if %>

3. Ganti action="--WEBB OT-SELF--" yang terdapat dalam tag form datasiswa.asp dengan action="datasiswa.asp". Hal ini bertujuan agar pada saat tombol Simpan ditekan, halaman data siswa akan dievaluasi oleh sistem. Jika kamu lupa menggantinya maka akan muncul error.
4. Ubahlah baris kode (lihat) menjadi (lihat) . Kode javascript ini akan menampilkan jendela baru dan membuka_#/e lihatdatasiswa.asp secara Iangsung 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. Selanjutnya, akan dilakukan modifikasi terhadap halaman lihatdatasiswa.htm dengan memasukkan kode ASP di bawah ini pada bagian awal halaman sebelum tag .
<%@ Language=VBScript %>
<% dim conn dim rs dim strSQL dim ccount strSQL="SELECT count(*) as CCount FROM DataSiswa" Set conn = Server.CreateObject("ADODB.Connection") Set rs = Server.CreateObject("ADODB.Recordset") conn.Open "DSN=DataSiswa" rs.open strsql, conn, 2, 2 ccount=rs("CCount") rs.close strSQL="SELECT * FROM DataSiswa" rs.open strSQL, conn, 2, 2 %>

8. Ubahlah kode di antara tag

menjadi kode di bawah ini :

<% if not rs.EOF or not rs.BOF then for i=l to ccount t <% Next End If rs.close conn.Close Set rs = Nothing Set conn = Nothing %>

No	Nomor Induk	Nama	Tanggal Lahir	Kelas	Jurusan	Tahun Masuk
<%=i%>	<%=rs("Nomorlnduk")%>		<%=rs("TanggalLahir")%>		<%=rs("Jurusan")%>	<%=rs("TahunMasuk")%>

9. Ganti (kembali) dengan (kembali) untuk menutup jendela baru yang dibuka dengan cara menekan tombol Lihat pada halaman datasiswa.asp.

10. Simpan file dengan nama lihatdatasiswa.asp.

4. Pengujian (Testing)

Langkah terakhir adalahpengetesan 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 lihatdatasiswa.asp.