BAB 6

MEMBUAT HOMEPAGE INTERAKTIF

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, IIS, microsoft access, microsoft frontpage, microsoft internet explorer, dan komponen open database connectivity(ODBC).

Untuk membuat homepage dinamis dibutuhkan software seperti sistem operasi,Internet Information Service,Microsoft Access,microsoft FrontPage,Internet Explorer,dan komponen Open Database Connectivity.

Langkah awal membuat Homepage sederhana,kita hrs definisikan tempat kerja dalam komputer yg akan dipakai sebagai web server.

Skenario Form harus dibuat untuk memberi gambar apa yg akan dikerjakan.
Untuk menjadikan sebuah komputer sbg web server,dalam komputer tsb harus ter install Internet Information Service.

Cara menampilkan informasi homepage melalui IIS,yaitu dengan Port dan memakai Direktori Virtual.
Microsoft Active Server Page merupakan bahasa pemrograman yang disediakan microsoft untuk membuat sbh web menjadi menarik adn dinamis.
VBScript mempunyai pernyataan yg dipakai unt pendeklarasian variabel,yaitu dim,private,public.

ASP merupakn suatu skrip yg bersifat server side yang ditambah pada halaman HTML untuk membuat web menjadi menarik.

Bahasa skrip yg dipakai ASP adalah Microsoft VBScript dan Microsoft Jscript.
Statement output dipakai untuk mengatur output yg akan dikirim ke browser.
Pembuatan Database untuk suatu situs web dapat memakai microsoft access.
Data Source Name (DNS) akan mempermudah pengaksesan data dari program ke database.
Pemrograman dapat dilakukan setelah kita menyelesaikan pembuatan DNS.

A. MEMPROGRAM WEB

1. persiapan software

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

a. Sistem Operasi
Sebagai sitem operasi kita akan menggunakan Windows XP Professional. Selain itu, Microsoft juga telah menambahkan kemampuan untuk melakukan pengembangan dan pengetasan dalam pembuatan homepage interaktif pada sistem operasi Windows XP. Selain Windows XP, Windows lain yang bisa kita gunakan adalah Internet Information Service (IIS), yaitu Windows NT, Windows 2000, dan Windows 2003.

b. Komponen Internet Information Services (IIS) pada Windows XP
Fungsi dari ISS adalah sebagai web server. Dengan menggunakan IIS kita tidak perlu melakukan konfigurasi atau pemasangan secara manual.

Langkah-langkah yang kita lakukan dalam menginstal komponen IIS , yaitu :

1. Masukkan CD installer Windows XP Professional ke dalam CD-ROM.

2. Aktifkan Control Panel melalui tombol start lalu Control Panel. Pilih Add or Remove Programs.

3. Pilih Add / Remove Windows Components yang terdapat di sebelah kiri jendela Add or Remove Programs.

4. Akan muncul Windows Components Wizard pertama. Pilih Internet Information Services (IIS). Klik tombol OK dan selanjutnya tekan tombol Next.

5. Proses instalasi akan dilakukan secara otomatis. Klik tombol Browse untuk mencari lokasi file yang sesuai. Selanjutnya tekan tombol OK.

6. Tekan tombol Finish jika proses instalasi telah selesai dilakukan.

7. Lakukan proses restart untuk melakukan proses restart pada komputermu.

8. Aktifkan Control Panel kemudian pilih Performance and Maintenance, lalu Administrative Tools dengan cara klik dua kali pada pilihan tersebut untuk melihat apakah komponen IIS telah ter-instal dalam komputermu.

9. Selanjutnya akan ditampilkan jendela Internet Information Services dengan komponen di dalamnya.

c. Microspft FrontPage

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

d. Microsoft Access
Microsoft Access digunakan untuk membuat database penyimpanan 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.

f. Komponen Open DataBase Connectivity (ODBC)
Komponen ODBC digunakan untuk melakukan koneksi dari program computer ke database. Biasanya sudah tersedia dalam Windows XP. Untuk mengaksesnya, dapat kita lakukan dengan cara menekan tombol start – Control Panel – Administrative Tools – Data Sources (ODBC).

2. Persiapan Direktori Kerja

Langkah-langkah yang harus dilakukan adalah sebagai berikut :

1. Aktifkan Windows Explorer dalam computer.
2. Buat satu 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 form 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.

International Domain Names merupakan penamaan domain internet yang mengandung karakter non ASCII. Nama domain tersebut dapat berisi karakter yang digunakan dari bahasa non latin seperti Cina atau Arab.

Posting merupakan tulisan yang dikirimkan untuk dipublikasikan melalui internet, baik pada website, blog, mailing list, maupun forum.

Tipe data digunakan untuk mempresentasikan penyimpanan data dalam database. Terdapat beberapa tipe data yang disediakan oleh Microsoft Access, yaitu :

a. Text, mempresentasikan data yang berbentuk gabungan huruf, angka, dan karakter khusus.
b. Number, mempresentasikan data yang berbentuk angka.
c. Date, mempresentasikan data yang berbentuk tunggal.
d. Memo, mempresentasikan data yang berbentuk teks dan jumlahnya sangat banyak.
e. Currency, mempresentasikan data yang memiliki format currency atau mata uang.
f. AutoNumber, mempresentasikan data yang akan ditangani oleh sistem berupa angka.
g. OLE Object, mempresentasikan data yang berupa gabungan dari objek-objek yang dibuat oleh Microsoft.
h. Hyperlink, mempresentasikan data yang berupa link atau gabungan ke website atau tempat lain.


4. Persiapan Komponen IIS

Terdapat dua cara menampilkan informasi homepage melalui IIS, yaitu :

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 yang dilakukan adalah :

1. Klik kanan Web Sites, klik New Website, pilih port.
2. Gunakan port sembarang antar 2000-65500
3. Jangan menggunakan port 80, karena port tersebut merupakan default website atau web server.

4. Pengaksesan dengan menggunakan port 8089, yaitu :
- Stand alone computer : http://localhost:8080/namefile.htm.
- UInternet : http://NamaKomputer:8080/namafile.htm.
- Internet : http://www.namadomain.com:8080/namafile.htm.

5. Pemilihan Bahasa Pemograman
Miosoft Active Server Pages (ASP) merupakan bahasa pemograman ang secara otomatis disediakan oleh Mirosoft jika kita menggunakan IIS.
ASP merupakan suatu skrip yang bersifat server side yang ditambahka pada halaman HTML untuk membuat sebuah we menjadi leih menarik, dinamis, dan interaif. Server side berarti bahw proses pengerjaan skrip berlangsung di server bukan di browser atau client.

Bahasa skrip standar yang digunakan oleh ASP adalah Microsoft VBScript dan Microsoft Jscript. Alaan untamapenggunaan bahasa pemoraman ASP, yaitu sebagai berikut :

1. Sudah tersedia secara gratis jika kita menggunakan IIS pada sistem operasi Windows.
2. Struktur bahasanya sangat mudah untuk dipelajari kareana ASP mengadopsi sintaks dari bahasa pemograman Visual Basic yang sudah sangat familiar di kalangan programmer maupun pemula.
3. Mampu berkomunikasi dengan objek komponen (COM/DCOM) yang dibuat dengan berbagai bahasa pemograman yang lain.
4. Mempunyai respons request data dengan cepat.
5. Untuk menggunakannya, kita hanya tinggal meletakkan kode pemograman pada halaman homepage yang akan kita program.

Sebuah file ASP merupakan file text only yang ddalamnya berisi teks, tag HTML, dan skrip ASP.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.

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 varibel walaupun tidak dideklarasikan. Akan tetapi, sebaiknya deklarasi tetap dilakukan untuk menghindari kesalahan penggunaan variabel.

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

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.

d. Statement output
Statement atau pernyataan output digunakan untuk mengatur output yang akan dikirimkan 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.

e. Statement logika
Sintaks logika untuk ASP sama dengan sintaks logika bahasa pemograman Visual Basic.

f. Statement looping
Sintals looping untuk ASP juga sama dengan sintaks looping atau perulangan pada bahasa pemograman Visual Basic.

g. Operasi pengaksesan data

h. Cara kerja ASP


B. MEMPROGRAM DATABASE WEB INTERAKTIF

1. pembuatan data base

langkah-langkah dalam pembuatan database menggunakan Microsoft Access, yaitu :
• aktifkan Microsoft Access. Buat database data siswa dan simpan dalam C:\SMUKU-INT\database yang sudah dibuat sebelumya.
• Buat satu tabel dengan nama DataSiswa

2. pembuatan data source name (DSN)

DSN akan mempermudah pengaksesan data dari program ke database. unutuk melakukannya, ikuti langkah-langkah berikut.

• Tekan tombol start  control panel  performance and maintance  administrative tools  data sources (ODBC).
• Selanjutkan akan ditampilakan kotak dialog ODHBC Data Source Administrator. Pilih tab system DSN.
• Klik tombol add yang akan menampilkan menu untuk memilih driver database yang akan digunakan. Pilih Microsoft Access Driver (*.mdb) kemudian tekan tombol finish.
• Pada kotak dialog ODBC Microsoft access setup, isi kotak Data source name dengan DataSiswa dan kotak description dengan data siswa. Tekan tombol select untuk memasukkan database dengan lokasi C:\SMUKU-INT\database\datasiswa.mdb. selanjutnya tekan OK.

3. Pemrograman

Pemrograman dilakukan setelah kita menyelesaikan pembuatan DSN. Unutk pemrograman ini akan ditampilkan halaman HTML dan halaman modifikasi menjadi ASP.

4. pengujian (testing)

langkah terakhir adalah pengetesan hasil pemrograman. Testing ini akan memberitahukan 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 mengetahui bahwa data tersebut sudah tersimpan dalam database bukan dalam halaman lihatdatasiswa.asp