A. Memprogram Web

1. Persiapan Software

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

A. Sistem Operasi

Sistem operasi yang akan kita gunakan adalah Windows XP Professional, karena kita sudah terbiasa dengan tampilan dan berbagai komponen di dalamnya. Selain itu, Microsoft juga menambahkan kemampuan untuk melakukan pengembangan dan pengetesan dalam pembuatan homepage interaktif pada sistem operasi Windows XP Professional. Selain Windows XP, keluarga Windows lainnya yang dapat digunakan untuk menjalankan Internet Information Services (IIS) adalah Windows NT, Windows 200, dan Windows 2003.

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

Jika belum terdapat Internet Information Services (IIS) pada Windows XP dalam komputer kita, kita harus menginstalnya 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 pemasangan secara manual. Langkah-langkah menginstal komponen IIS dalam komputer, yaitu :

  • Masukkan CD installer Windows XP Professional ke dalam CD-ROM
  • Aktifkan Control Panel 
  • Pada jendela Add or Remove Programs, pilih Add/Remove Windows Components yang terdapat di sebelah kiri jendela Add or Remove Programs 
  • Kemudian, akan ditampilkan kotak dialog Windows Components Wizard pertama. Pilih Internet Information Services (IIS). Pilih semua komponen yang tersedia, lalu tekan OK dan tekan tombol Next 
  • Proses instalasi dilakukan secara otomatis. Untuk dapat mencari lokasi file yang sesuai, tekan tombol Browse. Selanjutnya, tekan tombol OK
  • Tekan tombol Finish setelah selesai proses instalasi
  • Lakukan proses restart pada komputer kita
  • Untuk melihat apakah komponen IIS telah ter-install dalam komputer, aktifkan Control Panel kemudian pilih Performance and Maintenance-Administratuive Tools dengan cara klik dua kali pada pilihan tersebut. Pada jendela Administrative Tools, terlihat komponen Internet Information Services. Klik dua kali pada pilihan tersebut
  • Selanjutnya akan ditampilkan jendela Internet Information Services dengan berbagai komponen di dalamnya
C. Microsoft FrontPage

Microsoft FrontPage merupakan sebuah program aplikasi editor HTML yang berbasis WYSIWYG dan juga bertindak sebagai alat bantu administrasi situs web yang dikembangkan oleh Microsoft untuk jajaran sistem operasi Windows. Aplikasi ini merupakan bagian dari Microsoft Office dari tahun 1997 hingga 2003. Versi Macintosh-nya pun pernah dimunculkan pada tahun 1998, tapi tidak dikembangkan lagi. FrontPage sekarang telah usang, dan digantikan oleh Microsoft Expression Web dan Microsoft SharePoint Designer, yang dirilis pada bulan Desember 2006.
Salah satu fitur yang terkenal dari FrontPage adalah dukungannya terhadap template web yang otomatis yang terintegrasi. Perbedaan utama antara template web dengan template HTML yang dibuat oleh produk lainnya adalah bahwa template yang dibuat oleh FrontPage mencakup sistem navigasi otomatis yang mampu menciptakan tombol-tombol yang dianimasikan untuk beberapa halaman yang telah ditambahkan oleh pengguna. FrontPage juga dapat membuat navigasi multi-level secara langsung dengan menggunakan tombol dan juga struktur situs web yang sedang disunting.

Microsoft Access adalah sebuah program aplikasi basis data komputer relasional yang ditujukan untuk kalangan rumahan dan perusahaan kecil hingga menengah. Aplikasi ini merupakan anggota dari beberapa aplikasi Microsoft Office, selain tentunya Microsoft Word, Microsoft Excel, dan Microsoft PowerPoint. Aplikasi ini menggunakan mesin basis data Microsoft Jet Database Engine, dan juga menggunakan tampilan grafis yang intuitif sehingga memudahkan pengguna. Versi terakhir adalah Microsoft Office Access 2007 yang termasuk ke dalam Microsoft Office System 2007.
Microsoft Access
dapat menggunakan data yang disimpan di dalam format Microsoft Access, Microsoft Jet Database Engine, Microsoft SQL Server, Oracle Database, atau semua kontainer basis data yang mendukung standar ODBC. Para pengguna/programmer yang mahir dapat menggunakannya untuk mengembangkan perangkat lunak aplikasi yang kompleks, sementara para programmer yang kurang mahir dapat menggunakannya untuk mengembangkan perangkat lunak aplikasi yang sederhana. Access juga mendukung teknik-teknik pemrograman berorientasi objek, tetapi tidak dapat digolongkan ke dalam perangkat bantu pemrograman berorientasi objek.


E. Microsoft Internet Explorer

Internet Explorer, disingkat IE atau MSIE, adalah sebuah penjelajah web dan perangkat lunak tak bebas yang gratis dari Microsoft. Ia tersedia untuk banyak versi Microsoft Windows, namun Microsoft telah berhenti mengeluarkan versi mutakhir untuk semua platform kecuali Windows XP. Untuk beberapa waktu lamanya, Microsoft juga mengeluarkan Internet Explorer untuk Mac (yang berdasarkan mesin pengarsir yang berbeda) dan versi-versi untuk penggunaan melalui X Window System pada Solaris dan HP-UX, tetapi kini mereka sudah tidak dikembangkan.
Internet Explorer hingga kini masih merupakan penjelajah web yang paling banyak digunakan, meliputi 93.7% dari keseluruhan penggunaan penjelajah web, menurut sebuah perusahaan pengulas web WebSideStory. Explorer diikutkan sebagai penjelajah web bawaan (default) di semua versi Microsoft Windows sejak Windows 95 OSR-2.
Windows XP Service Pack 2
keluaran Microsoft beberapa lama ini menambah beberapa fitur keamanan penting kepada Internet Explorer, termasuk firewall Windows yang sudah dimutakhirkan dan pemblokir pop-up. Ini dilakukan untuk meredam kekhawatiran mengenai spyware yang telah menyerang Explorer dengan berat. Microsoft menganjurkan para pengguna untuk memutakhirkan Microsoft Windows (melalui Windows Update) secara berkala.

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. Pada awalnya, kita hanya dapat menggunakan Open DataBase.

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 web server. Langkah-langkah yang harus dilakukan, yaitu sebagai berikut :
  • Aktifkan Windows Explorer dalam komputer kita
  • Buat satu direktori dalam drive C dengan nama SMUKU-INT
  • 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. Persiapan lebih lanjut mengenai desain form, yaitu dengan cara langsung mendesain bentuk database dan formnya. Tipe data digunakan untuk mempresentasikan penyimpanan data dalam database. Terdapat beberapa tipe data yang disediakan oleh Microsoft Access, yaitu sebagai berikut :
  • Text, merepresentasikan data yang berbentuk gabungan huruf, angka, dan karakter khusus.
  • Number, merepresentasikan data yang berbentuk angka.
  • Date, merepresentasikan data yang berbentuk tanggal.
  • Memo, merepresentasikan data yang berbentuk teks dan jumlahnya sangat banyak.
  • Currency, merepresentasikan data yang memiliki format currency atau mata uang.
  • AutoNumber, merepresentasikan data yang akan ditangani oleh sistem berupa angka.
  • OLE Object, merepresentasikan data yang berupa gabungan dari objek-objek yang dibuat oleh Microsoft. 
  • Hyperlink, merepresentasikan data yang berupa link atau hubungan ke website atau tempat lain.
Bentuk form dalam Microsoft FrontPage digunakan utnuk merepresentasikan halaman HTML yang interaktif lengkap dengan input dan output-nya. Berbagai tool pada toolbar Form yang dapat kita gunakan, yaitu :
  • 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 dilakukan jika tombol ditekan.
  • Picture : Merepresentasikan sebuah gambar dalam homepage. 
  • Label : Merepresentasikan tulisan.
4. Persiapan Komponen IIS

Setelah file yang akan kita modifikasi dalam pemrograman selesai dibuat, kita harus mempersiapkan web server. Untuk menjadikan sebuah komputer sebagai web server, dalam komputer tersebut harus ter-install 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 :
  • Pilih tombol Start - Control Panel
  • Pilih Administrative Tools pada jendela Control Panel, kemudian pilih Internet Information Services
  • Klik nama komputer, kemudian pilih Web Sites dan klik Default Web Site
Terdapat dua cara menampilkan informasi homepage melalui IIS, yaitu sebagai berikut :
  • Menggunakan port (hanya dapat digunakan pada IIS dalam Windows NT, Windows 2000, dan Windows 2003).
  • Menggunakan direktori virtual.
A. Pengaksesan menggunakan port

Langkah-langkah untuk menampilkan informasi homepage melalui IIS dengan menggunakan port, yaitu sebagai berikut :
  • Klik kanan Web Sites, klik New Website, pilih port
  • Gunakan port sembarang antara 2000-65500, karena port 1-1000 biasanya sudah reserved atau digunakan oleh software yang terdapat pada server seperti web server SQL Server, Oracle database, dan software lainnya
  • Jangan mengunakan port 80, karena port tersebut merupakan default website atau web server, kecuali kita akan menggunakan website tersebut sebagai tampilan utama
  • Pengaksesan dengan menggunakan port 8080, yaitu : Stand alone 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 :
  • Klik kanan Default Web Site, pilih New - Virtual Directory
  • Selanjutnya, akan ditampilkan Virtual Directory Creation Wizard pertama. Tekan tombol Next untuk melanjutkan ke wizard berikutnya
  • Pada Virtual Directory Creation Wizard kedua, akan diminta untuk mengisi alias direktori, ketikkan SMUKU-INT. Selanjutnya, tekan tombol Next
  • Selanjutnya, akan ditampilkan wizard untuk memasukkan direktori yang akan digunakan. Tekan tombol Browse atau masukkan C:\SMUKU-INT, kemudian tekan tombol Next
  • Pada wizard yang menampilkan access permission, tekan tombol Next
  • Selanjutnya, tekan tombol Finish dan kita dapat mencoba apakah direktori virtual tersebut sudah bekerja dengan baik atau belum
  • Pada jendela Internet Information Services, akan terlihat bahwa direktori virtual sudah berhasil dibuat
  • Pengaksesan dengan menggunakan direktori virtual SMUKU-INT, yaitu : Komputer Lokal - 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 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. Sever side berarti bahwa proses pengerjaan skrip berlangsung di server bukan di browser atau client. Dengan kata lain, jika kita menggunakan sebuah browser untuk memanggil sebuah file ASP maka browser tersebut mengirimkan permintaan ke web server kemudian server tersebut mengeksekusi setiap skrip yang ada dan hasilnya dikirimkan kembali ke browser. Karena bersifat server side, maka untuk dapat dijalankan pada sebuah PC biasa yang berbasis Windows, PC tersebut perlu disimulasikan menjadi sebuah web server dengan meng-install Microsoft Personal Web Server (PWS) atau Microsoft Internet Information Services. (IIS).
Bahasa skrip standar yang digunakan oleh ASP adalah Microsoft VBScript dan Microsoft JScript. Jika tidak dinyatakan sendiri maka secara default skrip yang digunakan adalah Microsoft VBScript. Kita dapat mengubah default tersebut dengan menambahkan perintah (%LANGUAGE=bahasa skrip%). Alasan utama penggunaan bahasa pemrograman ASP, yaitu :
  • Sudah tersedia secara gratis jika kita menggunakan IIS pada sistem operasi Windows. 
  • Struktur bahasanya sangat mudah untuk dipelajari karena ASP mengadopsi sintaks dari bahasa pemrograman Visual Basic yang sudah sangat familiar di kalangan programmer atau pemula.
  • Mampu berkomunikasi dengan berbagai objek komponen (COM/DCOM) yang dibuat dengan berbagai bahasa pemrograman yang lain.
  • Mempunyai respon request data dengan cepat.
  • 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 bahwa file ASP sebenarnya merupakan file HTML biasa yang di dalamnya ditambahkan skrip ASP. Jika file HTML mempunyai ekstensi .htm atau .html maka jika sudah diberi skrip ASP, ekstensi tersebut tinggal diubah menjadi .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 karaketer (% %).

Note : tanda ( ) diganti dengan tanda < >


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

Contoh :
Untuk menuliskan kata 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"]
%)
(HTML)
(TITLE)HALLO DUNIA(/TITLE)
(BODY)
(/BODY)
(/HTML)

Note : tanda ( ) diganti dengan < >, dan tanda [ ] diganti dengan ( )

C. Statement Input

Sintaks 1 - Request.Form([nama variabel/id dalam page HTML/ASP])
Sintaks 2 - Request.QueryString([nama variabel/id yang diletakkan pada url])

Note : tanda [ ] diganti dengan tanda < >


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 dibelakang penulisan sebuah alamat URL.

Contoh :
Untuk mengambil sebuah nilai dari textbox dengan id txtNama dilakukan dengan menambahkan kode ini :
[%
dim nama
nama=request.Form("txtNama")
%]

Note : tanda [ ] diganti dengan tanda < >

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 menuju ke URL tertentu.

Sintaks 1 - Response.write([nama variabel/id/konstanta])
Sintaks 2 - Response.redirect([nama variabel/id/konstanta])

Note : Tanda [ ] diganti dengan tanda < >

Contoh :
Untuk menuliskan nilai dari textbox dengan id txtNama dilakukan dengan menambahkan kode berikut :
[%
dim nama
nama=request.form("txtNama")
response.write (nama)
%]

Note : Tanda [ ] diganti dengan tanda < >

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/index.asp. Halaman tersebut akan di-load ke browser Internet Explorer atau Netscape dalam bentuk HTML setelah terlebih dahulu web server menerjemahkan atau meng-compile semua kode yang terdapat dalam blok (% %) pada file index.asp. Semua kode ASP yang terdapat dalam file tersebut akan hilang dan diganti dengan value atau nilai yang dikembalikan dari database. Hal ini dapat kita lihat pada saat kita klik menu View dari browser. Selanjutnya, pilih View Source, di dalamnya sudah tidak terdapat kode ASP. Semua kode telah berubah menjadi nilai yang diperoleh dari input maupun database.

B. Memprogram Database Web Interaktif

1. Pembuatan Database

Setelah semua yang diperlukan telah disiapkan, langkah selanjutnya adalah melakukan pembuatan database data siswa menggunakan Microsoft Access yang merupakan bagian dari Microsoft Office. Langkah-langkah dalam pembuatan data tersebut, yaitu sebagai berikut :
  • Aktifkan Microsoft Access. Buat database datasiswa dan simpan dalam C:\SMUKU-INT\database yang sudah dibuat sebelumnya
  • Buat satu tabel dengan nama DataSiswa pada saat kamu melakukan persiapan skenario user interface
2. Pembuatan Data Source Name (DSN)

Setelah database kita buat, langkah selanjutnya adalah membuat Data Source Name (DSN). DSN ini akan mempermudah pengaksesan data dari program ke database. Langkah-langkahnya, yaitu :
  • Tekan tombol Start - Control Panel - Performance and Maintenance - Administrative Tools - Data Sources (ODBC)
  • Selanjutnya, akan ditampilkan kotak dialog ODBC 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 tombol OK
  • Hasil akhir akan ditampilkan, 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, kita dapat membandingkan perubahan yang diperlukan untuk membuat halaman homepage yang interaktif.

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

0 komentar:

Posting Komentar

Mengenai Saya

Foto saya
Saya siswa SMAN 2 Bekasi, kelahiran Surabaya. Saya senang berteman dan punya teman banyak. Baru buat blog bulan November 2009, karena tugas dari sekolah. Alamat saya Perumahan Bumi Sani Permai Blok C4 no 11, Bekasi. Mobile +628568790705

Time

IP Adress

IP

About this blog

Blog ini dibuat untuk menyelesaikan tugas TIK dari ka' fanny..