Membuat Homepage Interaktif

A. Memprogram Web

 
1. Persiapan Software

Untuk membuat homepage interaktif cukup dengan menggunakan beberapa software yang sudah kita kenal speperti halnya Sistem operasi, IIS, Microsoft Access, Microsoft Frontpage, Microsoft Internet Explore, dan ODBC. And here is the explaination:

a. Sistem Operasi
 
  Kita akan menggunakan Windows XP Professional sebagai sistem operasi. Keluarga windows lainnya yang dapat digunakan untuk menjalankan Internet Information Service (IIS) adalah Windows NT,Windows 2000 dan Windows 2003.
 
b. Komponen Internet Information Service (IIS) pada Windows XP 
 

Funsgsi IIS adalah sebagai web server. Dengan menggunakan IIS kita tidak perlu melakukan konfigurasi secara manual.
Langkah-langkah untuk menginstal komponen IIS yaitu sebagai berikut ;
1. Masukkan CD Installer windows XP Professional, aktifkan control panel dan pilih Add or Remove Programs
2. Pilih IIS. Kamu dapat melihat komponen-komponen IIS melalu tombol details. Pilih semua komponen lalu OK. Tekan tombol Next
3. Untuk mencari lokasi bebeapa file yang terdapat dalam CD kita dapat menekan tombol browse lalu OK
4. Lakukan restart pada komputermu. Untuk memastikan komponen IiS sudah terinstal,aktifkan control panel kemudian pilih performance and Maintenance-administrative tools lalu terlihat komponennya

c. Microsoft FrontPage 

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

d. Microsoft Access

Digunakan untuk membuat database sebagai penyimpanan data yang akan dimasukkan ke dalam database.

e. Microsoft Internet Explorer

Digunakan untuk melakukan pengujian dan pengaksesan homepage interaktif yang telah dibuat.

  

f. Komponen ODBC 
Digunakan untuk melakukan koneksi dari program komputer ke database. ODBC merupakan suatu spesifikasi untuk database API. API merupakan standar yang didukung oleh berbagai vendor.

2. Persiapan Direktori Kerja

Langkah-langkah yang harus dilakukan untuk mendefinisikan tempat kerja dalam komputer yang akan digunakan sebagai wab server:

1. Aktifkan Windows Explorer
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 fungsinya sebagai form untuk memasukkan dan menampilkan data siswa dari database. Persiapan lebih lanjut mengenai desain form yaitu dengan cara langsung mendesain bentuk database dan formnya. Tipe data digunakan untuk mempresentasikan penyimpanan data dalam database. Beberapa tipe data yang disediakan oleh Microsoft Access yaitu sebagai berikut :
1. Teks, mempresentasikan data yang berbentuk gabungan huruf,angka dll
2. Number, mempresentasikan data yang berbentuk angka
3. Date, mempresentasikan data yang berbentuk tanggal
4. Memo, mempresentasikan data yang berbentuk teks dan jumlahnya sangat banyak
5. Currency, mempresentasikan data yang memiliki format currency
6. AutoNumber, mempresentasikan data yang akan ditangani oleh sistem berupa angka
7. OLE Object, mempresentasikan data yang berupa gabungan dari objek-objek yang dibuat oleh microsoft
8. Hyperlink, mempresentasikan data yang berupa link ke website

 Struktur Database

Sekarang kita mulai mendesain form yang pertama menggunakan Microsoft FrontPage
1. Aktifkan Microsoft FrontPage. Pilih tab HTML
2. Buat form dengan memilih menu insert-form-form sehingga ditampilkan pasangan tag form yaitu
3. Tuliskan DATA SISWA sebagai judulnya,beri style bold, ubah ukuran font menjadi 16
4. Buat tabel dibagian bawah judul yang terdiri atas 2 kolom dan 6 baris
5. Ubah tampilan editor menjadi tampilan normal. Pada kolom 1 baris 1 ketikkan teks Nomor Induk. Letakkan kursor pada kolom 2 baris 1 lalu pilih textbox. Klik dua kali textbox tersebut dan tuliskan txtNomorInduk pada kotak Name
6. Pada kolom 1 baris 2 ketikkan teks Nama Siswa. Palam kolom 2 baris 2 pilih textbox dan isi kotak Name denagn txtNama
7. Pada kolom 1 baris 3, ketikkan teks Tanggal Lahir. Pada kolom 2 baris 3 pilih textbox dan isi kotak Name dengan txtTanggalLahir
8. Pada kolom 1 baris 4 ketikkan teks Kelas. Pada kolom 2 baris 4 pilih dropdown listbox dan beri nama cboKelas dan isikan nila pilihan 1,2,dan 3 melalui tombol Add
9. Pada kolom 1 baris 5 ketikkan teks Jurusan. Pada kolom 2 baris 5 buat dropdown listbox,beri nama cboJurusan dan isikan nilainya dengan IPA dan IPS
10. Pada kolom 1 baris 6 ketikkan teks Tahun Masuk. Letakkan kursor pada kolom 2 baris 6 buat textbox. Beri nama txtTahunMasuk pada kotak Name
11. Letakkan kursor dibawah tabel. Buat sebuah tombol melali menu insert-form-Push Button
12. Klik dua kali tombol Button. Ubah label menjadi Simpan, beri nama cmdSimpan dan tandai pilihan Submit
13. Klik dua kali tombol Submit ubah labelnya menjadi Lihat beri nama cmdLihat dan tandai pilihan normal pd bagian Button Type
14. Hapus tombol ketiga dari form. Ubah tab form menjadi pada tampilan HTML
15. Simpan file dalam direktori C:\SMUKU-INT. Beri nama file datasiswa.htm

Setelah form pertama terbentuk, kita akan mendesain form ke 2 untuk menampilkan data dari database melalui langkah langkah ;
1. Pada microsoft FrontPage pilih File-New-Page Or Web
2. Pilih page template. Pilih Normal Page pada tab General
3. Tuliskan DAFTAR SISWA sbg judulnya,beri style bold,ubah ukuran menjadi 16
4. Di bawah tulisan DAFTAR SISWA, buat tabel yang terdiri atas 7 kolom dan 2 baris
5. Pilih tampilan normal. Pada kolom 1 baris 1 ketikkan Nomor dan pada kolom 1 baris 2 ketikkan nilaiNomor
6. Pada kolom 2 baris 1 ketikkan Nomor Induk dan pada kolom 2 baris 2 ketikkan nilaiNomorInduk
7. Pada kolom 3 baris 1 ketikkan Nama dan pada kolom 3 baris 2 ketikkan nilaiNama
8. Pada kolom 4 barius 1 ketikkan Tanggal Lahir dan pada kolom 4 baris 2 ketikkan nilaiTanggalLahir
9. Pada kolom 5 baris 1 ketikkan Kelas dan pada kolom 5 baris 2 ketikkan nilaiKelas
10. Pada kolom 6 baris 1 ketikkan Jurusan dan pada kolom 6 baris 2 ketikkan nilaiJurusan
11. Pada kolom 7 baris 1 ketikkan Tahun Masuk dan pada kolom 7 baris 2 ketikkan nilaiTahunMasuk
12. Buat 1 tombol beri nama Kembali dan label cmdKembali
13. Simpan file dengan nama lihatdatasiswa.htm dalam direktori C:\SMUKU-INT

4. Persiapan Komponen IIS

Untuk menjadikan sebuah komputer sebagai web server, dala komputer harus terinstall IIS. Cara pengaksesan IIS 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

 

Terdapat dua cara menampilkan informasi homepage melalui IIS yaitu:

a. Pengaksesan menggunakan port

1. Klik kanan web sites klik New Website pilih port
2. Gunakan port sembarang antara 2000-65500. Jangan menggunakan port 80.
3. Pengaksesan dengan menggunakan port 8080 yaitu sebagai berikut;
- http://localhost:8080/namafile.htmàStand alone computer
- http://NamaKomputer:8080/namafile.htmàIntranet
- http://www.namadomain.com:8080/namafile.htmàInternet

b. Pengaksesan menggunakan direktori virtual

1. Virtual Directory. Tekan tombol next untuk menjalankan ke wizard berikutnyaàKlik kanan Defaul Web Site pilih New
2. Ketikkan SMUKU-INT untuk mengisi alias direktori lalu Next
3. Tekan tombol browse atau masukkan C:\SMUKU-INT lalu Next sampai finish
4. Pengaksesan dengan menggunakan direktori virtual SMUKU-INT yaitu;
- http://localhost/SMUKU-INT/datasiswa.htmàKomputer lokal
- http://namakomputer/SMUKU-INT/datasiswa.htmàIntranet
- http://www.namadomain.com/SMUKU-INT/datasiswa.htmàInternet

5. Pemilihan Bahasa Pemograman

ASP merupakan bahasa pemograman yang secara otomatis disediakan oleh microsoft jika kita menggunakan IIS. ASP merupakan suatu skrip yang bersifat server side yang ditambahkan pada halaman HTML untuk membuat sebuah web menjadi lebih menarik,dinamis dan interaktif. Server side berarti bahwa proses pengerjaan skrip berlangsung di server bukan di browser. Bahasa skrip standar yang digunakan oleh ASP adalah Microsoft VBScript dan Microsoft Jscript.

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
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 didalamnya berisi teks, tag HTML, dan skrip ASP. Skrip ASP dapat diletakkan dimana saja. Untuk membedakan antara teks, tag HTML dan skrip ASP maka digunakan suatu tanda yang disebut delimiter. Delimiter adalah suatu kumpulan karakter yang mengawali dan mengakhiri suatu tag atau skrip. Untuk skrip ASP, delimiter yang digunakan adalah kumpulan karakter <% dan %>

 

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 

Kotak Dialog ODBC Data Source Administrator 

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.

Kotak Dialog ODBC Microsoft Access Setup 
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.