Membuat Hompage Interaktif
A. Memprogram Web
1.Persiapan Software
Software yang dibutuhkan untuk membuat homepage dinamis yaitu sistem operasi yang terdiri dari Internet Infomation System(IIS), Microsoft Access, Microsoft Front Page, Microsoft Internet Explorer, dan kompunen Open DataBase Connectivity(ODBC).
a)Sistem Operasi
Windows yang dapat menjalankan Internet Information Service adalah Windows XP, Windows NT, Windows 2000, dan Windows 2003.
b)Komponen Internet Information Service (IIS) pada Windows XP
Fungsi IIS adalah sebagai web server. Apache dan IIS adalah contoh web server yang terkenal di dunia.
Langkah-langkah untuk mengisnstal komponen IIS dalam komputer :
1.Masukkan CD installer ke dalam CD-ROM pada komputermu
2.Aktifkan Control Panel. Pilih Add or Remove Program
3.Pada Jendela Add or Remove Program, pilih Add or Remove Windows Componen
4.Selanjutnya akan ditampilkan kotak dialog Windows Componen Wizard pertama. Pilih IIS. Setelah itu kita dapat melihat komponen-komponen IIS melalui tombol details. Pilih semua komponen lalu tekan tombol OK. Selanjutnya klik Next
5.Proses Instalasi akan dilakukan secara otomatis
6.Tekan tombol finish setelah proses instalasi selesai
7.Lakukan proses rstart pada komputer
8.Untuk melihat komponen IIS telah terinstal, aktifkan Control Panel kemudian pilih Peformance and Maintenance.
9.Selanjutnya, akan ditampilkan jendela IIS dengan berbagai komponen di dalamnya
c)Microsoft Front Page
-Microsoft ini digunakan untuk merancang homepage.
d)Microsoft Access
-Microsoft ini digunakan untuk membuat database sebagai penyimpanan data yanag akan kita masukan ke dalam database.
e)Microsoft Internet Explorer
-Microsoft ini 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 komputer ke database.
Persiapan direktori Kerja
Langkah-langkah :
1. Aktifkan Windows Explorer dalam komputer
2. Buat sati direktori dalam drive C dengan nama SMUKU-INT
3. Buat subdirectori image, css, dan database dalam direktori SMUKU-INT
3.Persiapan Skenario User Interface
Skenario form harus dibuat untuk memberikan gambaran apa yang dikerjakan. Terdapat dua form yang akan dibuat dengan fungsi sebagai form untuk memasukkan dan menampilkan data siswa dari Database.
Contoh skenario user interface
Form :
1. Input data siswa : Untuk memasukkan data siswa dari homepage ke database. Dan Field yang harus ada adalah Nomor Induk, Nama, Tanggal lahir, Kelas, jurusan, dan tahun masuk
2. Output data siswa : Untuk menampilkan data siswa yang terdapat dalam database ke dalam homepage. Field yang harus ada adalah Nomor Induk, Nama, Tanggal lahir, Kelas, jurusan, dan tahun masuk.
Tipe data yang digunakan untuk mempresentasikan penyimpanan data dalam database. Terdapat beberapa tipe data yang disdiakan oleh Microsoft Access, yaitu sebagai berikut :
a) Text, merepresentasikan data yang berberntuk gabungan huruf, angka, dan karakter khusus
b) Number, merepresentasikan data yang berberntuk tanggal
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) AutoNumber, 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, merepresentasikan data yang berupa link atau hubungan ke website atau tempat lain
Fungsi ikon pada toolbar Microsoft Font Page :
1. Form : membuat form dalam satu halaman
2. TextBox : merepresentasikan input berupa teks, numerik, atau date
3. Scrolling textbox : merepresentasikan input berupa teks yang panjang
4. Check Box : merepresentasikan sebuah pilihan ya atau tidak
5. Radio Button : merepresentasikan sebuah pilihan ya atau tidak
6. Combo Box : merepresentasikan data yang berupa pilihan terbatas
7. Push Button : merepresentasikan sebuah tindakan yang akan dilakukan jika tombol ditekan
8. Picture : merepresentasikan sebuah gambar dalam homepage
9. Label : merepresentasikan tulisan
4.Persiapan Komponen IS
Cara pengaksesan IIS, yaitu sebagai berikut :
1) Pilih tombol start lalu ke control panel
2) Pilih Administrative Tools, kemudian pilih IIS
3) Klik nama komputer kemudian pilih Websites dam klik Default website
Terdapat dua cara menampilkan informasi homepage melalui IIS, yaitu sebagai berikut :
a.menggunakan port
b.Menggunakan direktori virtual
a)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
3.Jangan menggunakan port 80, karena port tersebut merupakan default website
4.Pengaksesan menggunakan port 8080, yaitu sebagai berikut :
- Stand Alone Computer : http://localhost:8080/namafile.htm
- Intranet : http://NamaKomputer:8080/namafile.htm
- Internet : http://namadomain.com:8080/namafile.htm
b)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, tekan tombol next
4) Selanjutnya akan ditampilkan wizard untuk memasukkan directory yang akan digunakan, kemudian tekan tombol next
5) Pada wizard yang menampilkan access permission, tekan tombol next.
6) Selanjutnya tekan tombol finish
7) Pada jendela IIS akan terlihat bahwa direktori virtual sudah berhasil
8) Pengaksesan dengan menggunakan direktori virual SMUKU-INT, yaitu sebagai berikut :
- Komputer Lokal : http://localhost/ SMUKU-INT/datasiswa.htm
- Intranet : http://NamaKomputer// SMUKU-INT/datasiswa.htm
- Internet : http://namadomain.com/ SMUKU-INT/datasiswa.htm
5)Pemilihan Bahasa Pemrograman
Microsoft Active Server (ASP) merupakan bahasa pemrograman 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 lebih menarik.
Bahasa skrip standar yang digunakan oleh ASP adalah Microsoft VBScript dan Microsoft Jscript. Alasan utama penggunaan bahasa pemrograman ASP, yaitu sebagi berikut :
1. Sudah tersedia secara gratis jika kita menggunakan IIS pada sistem operasi windows
2. Struktur bahasanya sangat mudah untuk dipelajari
3. Mampu berkomunikasi dengan objek komponen (COM/DCOM)
4. Mempunyai respons request data dengan cepat
5. Untuk menggunakanya, kita hanya tinggal meletakkan kode pemrograman pada halaman homepage yang akan kita program.
a. Deklarasi Variabel
VBScript mempunyai beberapa pernyataan yang digunakan untuk pendeklarasian variabel, yaitu dim,private, dan public.
b. Blok kode ASP
ASP selalu diawali dengan blok .
c. Statement input
Request.Form digunakan untuk mengambil nilai dari elemen-elemen form HTML, sedangkan Request.QueryString digunakan untu mengambil nilai variabel HTTP query string.
d. Statement logika
Sintaks logika untuk ASP sama dengan sintaks logika bahasa pemrograman Visual Basic
e. Stement looping
Sintaks looping untuk ASP juga sama dengan sintaks looping atau perulangan pada bahasa pemrograman Visual Basic
f. Operasi pengaksesan data
Sintaks pengaksesan data juga sama dengan Visual Basic
B.Memprogram Database Web Interaktif
* Pembuatan Database
Langkah-langkah dalam pembuatan database, yaitu sebagai berikut :
1. Aktifkan Microsoft Access. Buat database siswa dan simpan dalam C:\SMUKU-INT\database yang sudah dibuat
2. Buat satu tabel dengan nama DataSiswa
* Pembuatan Data Source Name (DSN)
Langkah-langkah :
A.Tekan tombol start-Control Panel-Performance and Maintenance – Administrative Tools – ODBC
B.Selanjutnya, akan ditampilkan kotak dialog ODBC, Pilih tab system DSN
C.Klik tombol Add yang akan menampilkan menu untuk memilih driver database yang akan digunakan
D.Pada kotak dialog ODBC Microsoft Access Setup, isi kotak Data Source Name dengan Data Siswa dan kotak Description dengan data siswa.
E.Setelah ditampilkan hasil akhir dari pembuatan data source name, tekan tombol OK
3.Pemrograman
Setelah menyelesaikan pembuatan DSN akan dilakukan pemrograman.
4.Pengujian (Testing)
Langkah terakhir adalah hasil pengetesan hasil pemrograman. Testing ini akan memberitahukan apabila terdapat kesalahan dalam coding. Kesalahan akan langsung ditampilkan dalam browser yang kita akses.
Tidak ada komentar:
Posting Komentar