Langkah-langkah pembuatan database sebagai berikut;
1. Aktifkan Microsoft Access. Buat database datasiswa dan simpan dalam C:\SMUKU-INT\database yang sudah kamu buat sebelumnya.
2. Buat satu tabel dengan nama DataSiswa dengan struktur isi tabel seperti didefinisikan pada tabel saat kamu melakukan persiapan skenario user interface
1. Tekan tombol start > Control Panel > Performance and Maintenance > Administrative Tools > Data Sources (ODBC)
2. Pilih tab System DSN. Klik tombol Add > pilih Microsoft Access Driver (8.mdb) lalu Finish.
3. 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. lalu OK
1. Programming halaman pertama yaitu pembuatan halaman datasiswa.htm yang telah kamu lakukan sebelumnya. Buka kembali halaman datasiswa.htm pada Microsoft FrontPage.
2. Lakukan modifikasi terhadap halaman datasiswa.htm dengan memasukkan kode ASP dibawah ini pada bagian awal halaman sebelum tag <html>
<%
dim comm
dim rs dim NomorInduk
dim Nama
dim TanggalLahir
dim Kelas
dim Jurusan
dim TahunMasuk
dim strSQL
if request.Form ("cmdSimpan")="Simpan" then
NomorInduk=Request.Form("txtNomorInduk")
Nama=Request.Form("txtnama")
TanggalLahir=Request.Form("txtTanggalLahir")
Kelas=Request.Form("cboKelas")
Jurusan=Request.Form("cboJurusan")
TahunMasuk=Request.Form("cboTahunMasuk")
strSQL="Insert into DataSiswa(NomorInduk,Nama,TanggalLahir,Kelas,Jurusan,TahunMasuk) values ('" &_NomorInduk & " ',' " & Nama & " ',' " & TanggalLahir & " ',' " & Jurusan & " ',' " & _ TahunMasuk & "')"
Set conn = Server.CreateObject ("ADODB.Connection")
Set rs = Server.CreateObject ("ADODB.Recordset")
conn.Open "DSN=DataSiswa"
rs.open strsql, conn, 2, 2
Set rs = Nothing
Set conn = Nothing
end if
%>
3. Ganti action=”--WEBBOT-SELF--“ yang terdapat dalam tag form datasiswa.asp dengan action=”datasiswa.asp”.
4. Ubahlah baris kode <input type="button" value="Lihat" name="cmdLihat"> menjadi <input type="button" value="Lihat" name="cmdLihat" onclick="javascript:window.open('lihatdatasiswa.asp');"/>. Simpan file dengan nama datasiswa.asp.
5. Programming halaman kedua yaitu pembuatan halaman lihatdatasiswa.htm yang telah kamu lakukan sebelumnya.
6. Akan dilakukan modifikasi terhadap halaman lihatdatasiswa.htm dengan memasukkan kode ASP di bawah ini pada bagian awal halaman sebelum tag <html>
<%
dim conn
dim rs
dim strSQL
dim ccount
strSQL="SELECT count(*) as Ccount FROM DataSiswa"
Set conn = Server.CreateObject ("ADODB.Connection")
Set rs = Server.CreateObject ("ADODB.Recordset")
conn.Open "DSN=DataSiswa"
rs.open strsql, conn, 2, 2
ccount=rs ("Ccount")
rs.close
strSQL="SELECT * FROM DataSiswa"
rs.open strSQL, 2, 2
%>
7. Ubahlah kode di antara tag <table></table> menjadi kode dibawah ini
<tr>
<td width="14%">No</td>
<td width="14%">Nomor Induk</td>
<td width="14%">Nama</td>
<td width="14%">Tanggal Lahir</td>
<td width="14%">Kelas</td>
<td width="15%">Jurusan</td>
<td width="15%">Tahun Masuk</td>
</tr>
<%
if not rs.EOF or not rs.BOF then
for i=1 to ccount
%>
<tr>
<td width="14%"><%=i%> </td>
<td width="14%"><%=rs ("NomorInduk") %>%nbsp;</td>
<td width="14%"><%=rs ("Nama") %>%nbsp;</td>
<td width="14%"><%=rs ("TanggalLahir") %>%nbsp;</td>
<td width="14%"><%=rs ("Kelas") %>%nbsp;</td>
<td width="14%"><%=rs ("Jurusan") %>%nbsp;</td>
<td width="14%"><%=rs ("TahunMasuk") %>%nbsp;</td>
</tr>
<%
Next
End If
rs.close
conn.Close
Set rs = Nothing
Set conn = Nothing
%>
</table>
8. Ganti <input type="button" value="Kembali" name="cmdKembali" /> dengan <input type="button" value="Kembali" name="cmdKembali" onclick="javascript:window.close();" /> utnuk menutup jendela baru yang dibuka dengan cara menekan tombol Lihat pada halaman datasiswa.asp.
9. Simpan file dengan nama lihatdatasiswa.asp.
1. Persiapan Software
Untuk membuat homepage interaktif cukup dengan menggunakan beberapa software yang sudah kita kenal antara lain Sistem Operasi, IIS, Microsoft Access, Microsoft FrontPage, Microsoft Internet Explorer, dan ODBC.
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.
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. Untuk mengaksesnya lakukan dengan cara pilih Start > Control Panel > Administrative Tools > Data Sources (ODBC). API (Application Programming Interface) merupakan standar yang didukung oleh berbagai vendor termasuk Oracle, Informix, Sybase, dan Microsoft.
2. Persiapan Direktori Kerja
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.
- Input data siswa: Untuk memasukkan data siswa dari homepage ke database.
- Output data siswa: Untuk menampilkan data siswa yang terdapat dalam database ke dalam homepage.
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
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.
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. Pilih menu Table > Insert > Table.
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 Lihar beri nama cmdLihat dan tandai pilihan normal
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
Sekarang 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 NormalPage pada tab General
3. Tuliskan DAFTAR SISWA sbgi 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
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:
2. Gunakan port sembarang antara 2000-65500. Jangan menggunakan port 80.
3. Pengaksesan dengan menggunakan port 8080 yaitu sebagai berikut;
- Stand alone computer > http://localhost:8080/namafile.htm
- Intranet > http://NamaKomputer:8080/namafile.htm
- Internet > http://www.namadomain.com:8080/namafile.htm
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;
- Komputer lokal http://localhost/SMUKU-INT/datasiswa.htm
- Intranet http://namakomputer/SMUKU-INT/datasiswa.htm
- Internet http://www.namadomain.com/SMUKU-INT/datasiswa.htm
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 %>
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”) %>
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.
Sintaks 1 > Response.write
Sintaks 2 > Response.redirect
Contoh
Untuk menuliskan nilai dari textbox dengan id txtNama dilakukan dengan menambahkan kode berikut
<% dim nama nama=request.form (“txtNama”) response.write (nama) %>
Berikut adalah langkah-langkah memperbaiki homepage yang telah dibuat pada Yahoo! Geocities.
1. Aktifkan Yahoo!Geocities dan lakukan login
2. Aktifkan GeoCities Control panel,pilih menu Manage lalu klik link file manager-klik link open file manager
3. Upload file logosmuku.gif dengan menekan tombol browse
4. Ubah gambar fish.jpg yaitu datasiswa.htm, jadwalpelajaran.htm, kegiatansiswa.htm, dan linkbermanfaat.htm dengan gambar logosmuku.gif
5. Ubah link <img src="Fish.jpg" width ="188" height="103"> dengan <img src="logosmuku.gif" width="500" height="103">, lalu Save
6. Untuk menampilkan halaman yang sudah diubah gambarnya klik link View My Site
Kita akan meng-upload homepage yang kita buat sebelumnya ke Yahoo Geocities agar mudah diakses dengan langkah-langkah:
1. Daftarkan nama sekolahsmuku sebagai user dengan cara Sign Up Now
2. Lengkapi form,setelah proses registrasi lengkap klik link build your website now!
3. Akan ditampilkan halaman GeoCities Control Panel,pilih menu Manage lalu klik link file manager-klik open file manager
4. Tekan tombol Upload Files di kanan atas lalu masukkan file-file HTML yang telah dibuat dengan cara tekan tombol browse. Setelah selesai tekan tombol Upload Files. Untuk menambah file tekan tombol Add More Files
5. Setelah selesai proses upload klik link file manager. Untuk memasukkan folder kita perlu membuat subdirectory untuk folder gambar tsb dengan cara tekan New dibawah subdirectories
6. Beri nama subdirectory dengan nama Image lalu tekan tombol Create Subdirectory
7. Buat subdirectory untuk menyimpan file CSS dengan cara yang sama,beri nama kemudian tekan tombol Create Subdirectory
8. Edit file index.htm yang sudah disediakan Geocities dengan melakukan modifikasi terhadap isinya
9. Lakukan proses pengeditan melalui editor HTML yang tersedia lalu tekan tombol Save
10. Untuk memasukkan file gambar SMUKU.css ke dalam subdirectory image dan CSS,klik 2x subdirectory CSS kemudian lakukan upload file SMUKU.css
Untuk mempublikasikan homepage yang telah dibuat melalui internet, kita perlu mempunyai alamat di internet yang disebut domain. Untuk mencari nama domain salah satunya di http://www.internic.com dan http://www.register.com.
Langkah-langkah untuk mendaftarkan alamat domain ke provider web hosting;
1. Aktifkan browser, ketikkan http://www.register.com.
2. Cari kotak pencarian lalu ketikkan nama domain yang akan kita cari lalu Go.
3. Cari nama domain yang masih tersedia agar dapat digunakan.
Langkah membuat logo grafis menggunakan editor Adobe Photoshop 7.0.
1. Aktifkan Adobe Photoshop 7.0. pilih menu File > New
2. Lakukan pengaturan pada kotak dialog new alu tekan OK
3. Setelah ditampilkan lembar baru pilih Rectangle Tool. Sebelumnya pilih warna di bagian Set foreground color. Blok kotak yang menutupi seluruh halaman
4. Berikan efek texturizer dengan cara pilih menu filter-texture-texturizer. Untuk texture,pilih brick,scaling 55 dan Relief4
5. Ganti warna dengan tool set foreground color lalu OK. Klik Horizontal Type Tool untuk membuat tulisan SMUKU KELAS 3A ANGKATAN 2005 pada halaman kerja
6. Klik Move Tool sehinnga 8 titik akan ditampilkan. Jika belum,aktifkan Show Bounding Box. Geser tulisan tersebut untuk menyesuaikan ukurannya
7. Simpan gambar dengan nama logosmuku dengan format GIF dalam subfolder Image dalam folder C:\SMUKU kemudian tekan Save
