Kamis, 03 Desember 2009

BAB 6 MEMBUAT HOMEPAGE INTERAKTIF


A. Memprogram Web

1. Persiapan Software
Untuk membuat homepage interaktif engunakan beberapa software dengan sistem
operasi,

Internet Information Services (IIS), Microsoft Access, Microsoft FrontPage,
Microsoft Internet Explorer, dan komponen Open DataBase Connectivity (ODBC)

a. Sistem Operasi
menggunakan Windows XP Professional. Selain itu dapat menggunakan Windows NT,
Windows 2000, dan Windows 2003

b. Komponen IIS pada Windows XP
Jika belum terdapat IIS pada komputer lakukan penginstalan dengan menggunakan
CD

instaler Windows XP Professional. Fungsi IIS sebagai web server. Web server
terkenal di dunia contohnya Apache dan IIS. Dengan menggunakan IIS kita tidak
perlu melakukan konfigurasi atau pemasangan secara manual.

Langkah-langkah menginstal:

-masukkan CD installer Windows XP Professional ke dalam CD-ROM
-aktifkan Control Panel melalui tombol Start-Control Panel. PIlih Add or
Remove Programs
-pada jendela Add or Remove Programs, pilih Add/Remove Windows Components
-pilih Internet Information Services (IIS) pada kotak dialog Windows
Components Wizard pertama. Pilih semua komponen yang tersedia lalu tekan OK.
Lalu tekan Next
-proses instalasi akan dilakukan. Untuk mencari lokasi file tekan tombol
Browse. Lalu tekan OK
-tekan tombol Finish
-lakukan proses restart pada komputermu
-untuk melihat apakah komponen IIS terinstal aktifkan Control Panel pilih
Performance and Maintenance-Administrative Tools dengan cara klik 2 kali.
Pada jendela Administrative Tools terlihat komponen Internet Services. Klik 2
kali.
-akan ditampilkan jendela Internet Information Services dengan berbagai
komponen

c. Microsoft FrontPage
untuk merancang homepage

d. Microsoft Access
untuk membuat database

e. Microsoft Internet Explorer
untuk melakukan pengujian dan pengaksesan homepage interaktif yang telah
dibuat. Selain Microsoft Internet Explorer dapat juga menggunakan Mozilla
Firefox, Netscape, atau Opera


f. Komponen Open DataBase Connectivity
untuk melakukan koneksi dari program komputer ke database. Komponen ini sudah
tersedia pada Windows XP. Untuk pengaksesan klik tombol start-Control
panel-Administrative Tools-Data Sources (ODBC).

Salah satu keluhan utama pengguna Microsoft adalah penggunaan database yang
membingungkan. Pada awalnya kita hanya dapat menggunakan Open DAtaBAse
Connectivity (ODBC) Application Programming Interface (API) yang tidak mudah
digunakan dalam lingkungan VIsual Basic. ODBC suatu spesifikasi untuk database
API. API adalah standar yang didukung berbagai vendor, termasuk Oracle,
Informix, Sybase, dan Microsoft. Driver untuk database ini disediakan baik
oleh vendor maupun perusahaan pihak ketiga seperti Intersolv

2. Persiapan Direktori Kerja
-aktifkan Widows Explorer
-buat satu direktori dalam drive C dengan nama misalkan SMUKU-INT
-buat subdirektori image, css, dan database dalam direktori tersebut
3. Persiapan Skenario User Interface
Skenario form dibuat untuk memberikan gambaran apa yang akan dikerjakan. Terdapat
2 form dengan fungsi sebagai form untuk memasukkan dan menampilkan data siswa
dari
database.


Tipe data untuk merepresentasikan penyimpanan data dalam database yang disediakan
Microsoft Access:
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 mempunyai format currency atau mata uang
f. Auto Number, merepresentasikan data yang akan ditangani oleh sistem berupa
angka
g. OLE object, merepresentasikan data yang berupa gabungan dari objek-objek yang
dibuat Microsoft
h. Hyperlink, merepresentasikan data yang berupa link atau hubungan ke website
atau tempat lain
Ikon 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 pilihan ya atau tidak
-Radio Button, merepresentasikan pilihan ya auat 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 tulisan

4.Persiapan Komponen IIS
cara pengaksesan IIs
-pilih tombol start-Control Panel
-pilih Administrative Tools pada jendela Control Panel lalu pilih Internet
Information Services
-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
b. menggunakan direktori virtual

a. langkah pengaksesan port
-klik kanan Web Sites, klik New Web Sites, pilih port
-gunakan port sembarang antara 2000-65500
-jangan menggunakan port 80
-pengaksesan dengan menggunakan port 8080
.stand alone computer-http://localhost:8080/namafile.htm
.intranet-http;//namakomputer:8080/namafile.htm
.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


Alasan utama penggunaan bahasa pemrograman ASP:
a. tersedia secara gratis
b. struktur bahasanya mudah dipelajari
c. mampu berkomunikasi dengan bahasa pemrograman lain
d. mempunyai respons request data dengan cepat
e. 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)

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 . 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 kod
ASP pada bagian awal halaman sebelum tag
c.Simpan file dengan nama datasiswa.asp
d.Programming halaman kedua yaitu pembuatan halaman lihatdatasiswa.htm.
buka kembali halaman lihatdatasiswa.htm pada Microsoft FrontPage
e.Selanjutnya akan dilakukan modifikasi terhadap halaman lihatdatasiswa.htm
dengan 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.


Pemilihan Bahasa Pemograman.
Microsoft Active Server Pages (ASP) merupakan bahasa pemograman yang secara otomatis disediakan oleh Microsoft jika kita menggunakan IIS.
a. Deklarasi Variabel
b. Blok kode ASP
c. Statement Input
d. Statement output
e. Statement Logika
f. Statement looping
g. Operasi pengakses data
h. Cara kerja ASP


Memprogram Web
1. Persiapan Software
Untuk membuat homepage interaktif engunakan beberapa software dengan sistem
operasi,
Internet Information Services (IIS), Microsoft Access, Microsoft FrontPage,
Microsoft Internet Explorer, dan komponen Open DataBase Connectivity (ODBC)
a. Sistem Operasi
menggunakan Windows XP Professional. Selain itu dapat menggunakan Windows NT,
Windows 2000, dan Windows 2003
b. Komponen IIS pada Windows XP
Jika belum terdapat IIS pada komputer lakukan penginstalan dengan menggunakan
CD
instaler Windows XP Professional. Fungsi IIS sebagai web server. Web server
terkenal di dunia contohnya Apache dan IIS. Dengan menggunakan IIS kita tidak
perlu melakukan konfigurasi atau pemasangan secara manual.
Langkah-langkah menginstal:
-masukkan CD installer Windows XP Professional ke dalam CD-ROM
-aktifkan Control Panel melalui tombol Start-Control Panel. PIlih Add or
Remove Programs
-pada jendela Add or Remove Programs, pilih Add/Remove Windows Components
-pilih Internet Information Services (IIS) pada kotak dialog Windows
Components Wizard pertama. Pilih semua komponen yang tersedia lalu tekan OK.
Lalu tekan Next
-proses instalasi akan dilakukan. Untuk mencari lokasi file tekan tombol
Browse. Lalu tekan OK
-tekan tombol Finish
-lakukan proses restart pada komputermu
-untuk melihat apakah komponen IIS terinstal aktifkan Control Panel pilih
Performance and Maintenance-Administrative Tools dengan cara klik 2 kali.
Pada jendela Administrative Tools terlihat komponen Internet Services. Klik 2
kali.
-akan ditampilkan jendela Internet Information Services dengan berbagai
komponen
c. Microsoft FrontPage
untuk merancang homepage
d. Microsoft Access
untuk membuat database
e. Microsoft Internet Explorer
untuk melakukan pengujian dan pengaksesan homepage interaktif yang telah
dibuat. Selain Microsoft Internet Explorer dapat juga menggunakan Mozilla
Firefox, Netscape, atau Opera
f. Komponen Open DataBase Connectivity
untuk melakukan koneksi dari program komputer ke database. Komponen ini sudah
tersedia pada Windows XP. Untuk pengaksesan klik tombol start-Control
panel-Administrative Tools-Data Sources (ODBC).
Salah satu keluhan utama pengguna Microsoft adalah penggunaan database yang
membingungkan. Pada awalnya kita hanya dapat menggunakan Open DAtaBAse
Connectivity (ODBC) Application Programming Interface (API) yang tidak mudah
digunakan dalam lingkungan VIsual Basic. ODBC suatu spesifikasi untuk database
API. API adalah standar yang didukung berbagai vendor, termasuk Oracle,
Informix, Sybase, dan Microsoft. Driver untuk database ini disediakan baik
oleh vendor maupun perusahaan pihak ketiga seperti Intersolv
2. Persiapan Direktori Kerja
-aktifkan Widows Explorer
-buat satu direktori dalam drive C dengan nama misalkan SMUKU-INT
-buat subdirektori image, css, dan database dalam direktori tersebut
3. Persiapan Skenario User Interface
Skenario form dibuat untuk memberikan gambaran apa yang akan dikerjakan. Terdapat
2 form dengan fungsi sebagai form untuk memasukkan dan menampilkan data siswa
dari
database.
Tipe data untuk merepresentasikan penyimpanan data dalam database yang disediakan
Microsoft Access:
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 mempunyai format currency atau mata uang
f. Auto Number, merepresentasikan data yang akan ditangani oleh sistem berupa
angka
g. OLE object, merepresentasikan data yang berupa gabungan dari objek-objek yang
dibuat Microsoft
h. Hyperlink, merepresentasikan data yang berupa link atau hubungan ke website
atau tempat lain
Ikon 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 pilihan ya atau tidak
-Radio Button, merepresentasikan pilihan ya auat 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 tulisan
4.Persiapan Komponen IIS
cara pengaksesan IIs
-pilih tombol start-Control Panel
-pilih Administrative Tools pada jendela Control Panel lalu pilih Internet
Information Services
-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
b. menggunakan direktori virtual

a. langkah pengaksesan port
-klik kanan Web Sites, klik New Web Sites, pilih port
-gunakan port sembarang antara 2000-65500
-jangan menggunakan port 80
-pengaksesan dengan menggunakan port 8080
.stand alone computer-http://localhost:8080/namafile.htm
.intranet-http;//namakomputer:8080/namafile.htm
.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

Tidak ada komentar:

Posting Komentar