59
Bab-5
HTML Dinamis dengan IDC
Bab-bab sebelumnya telah dibahas tentang penggunaan tag-tag yang
digunakan untuk Pemrograman HTML secara states diminta Tampilan dari
halaman web tidak berubah-ubah saat pengunjung mengunjungi halaman web
tersebut untuk kedua kalinya. Dengan pemrograman dinamis disini maka halaman
web akan menjadi bervariasi, sehingga informasi yang ditampilkan berubah-ubah
sesuai dengan waktu atau sesuai dengan permintaan, disamping itu pengunjung
juga dapat memasukkan datanya ke halaman web tersebut, dan melihat datanya
kembali (buku tamu). Untuk pembuatan halaman web yang dinamis maka dapat
digunakan bahasa pemrograman dinamis seperti Visual Basic Script , Java Script ,
Internet Data Connector (IDC), Active Server Pages (ASP), PERL, C++ dan
PHP (Personal Home Pages: HyperText Preprocessor ) dan sebagainya (inovasi
baru).
Perbedaan utama dari pemrograman HTML statis dan dinamis adalah bila
menggunakan pemrograman HTML statis, maka script HTML dikirimkan ke
client dan dijalankan pada client (tanpa ada pengolahan data), sedangkan bila pada
pemrograman HTML dinamis, maka script pemrograman dijalankan di server,
kemudian hasil pengolahan data dikirimkan ke client yang berupa script HTML
yang dibuat secara “On the fly creation ” oleh server untuk dijalankan pada client.
Kelebihan dan kelemahan dari pemrograman dinamis dibandingkan dengan
pemrograman statis adalah bahwa pemrograman dinamis menyebabkan halaman
web menjadi lebih interaktif dan real time , tetapi dengan cara seperti ini maka
menyebabkan kerugian bila banyak permintaan yang masuk ke server, sehingga
menyebabkan server overload , karena setiap permintaan akan menjalankan
sendiri-sendiri program CGI (Common Gateway Interface ). CGI merupakan
standar interface antara server dan suatu aplikasi, sedangkan program GCI adalah
program yang dapat melakukan proses sesuai permintaan server untuk
Created using Click to Convert Trial - http://www.clicktoconvert.com
60
menghasilkan suatu dokumen hasil proses tersebut dalam bentuk HTML (on the
fly creation ).
Bab ini menjelaskan pembuatan halaman web dinamis khusus
menggunakan IDC (Internet Data Connector) yang merupakan tools dari service
MS-IIS Windows 2000 atau PWS Windows 95/98, sehingga tidak perlu lagi
adanya penambahan service lagi. IDC dapat menerima masukan dari data yang
dikirim oleh browser yang menjalankan script IDC, dimana script IDC terdiri dari
3 (tiga) informasi yaitu DataSource , Template , dan SQLStatement , yang
digunakan untuk menghubungkan dan mengelola file basis data dengan/ dari
halaman web.
Contoh dari penggunaan HTML dinamis ini dapat dikelompokkan menjadi
beberapa berdasarkan isi yang disajikan yaitu:
Ø Berita atau Koran
Ø E-commerce (Buku, Peralatan elektronik, Komputer dan lain-lain)
Ø Aplikasi web email
Ø Profile atau produksi (Perusahaan, Instansi, Perbankan dan lain-lain)
5.1 Atribut-atribut Tag Input
Guna menunjang pemrograman dinamis tersebut maka diperlukan tag
input HTML untuk memasukkan data yang diperlukan sebagai masukkan
permintaan dari pengguna (pengunjung) halaman web. Disini digunakan beberapa
atribut dari tag input seperti TEXT, RADIO, CHECKBOX, BUTTON dan
SUBMIT.
5.1.1 Atribut TEXT
Atribut ini digunakan untuk membuat baris masukan yang digunakan
untuk memasukkan data, yang dapat berupa data numeric maupun data karakter
dan string maupun data keduanya. Seperti halnya pada pemrograman BASIC atau
C, untuk menampung data maka diperlukan variable, demikian juga dengan input
disini, diperlukan atribut NAME untuk mendefinisikan variable yang digunakan
untuk menampung data masukan tersebut.
Created using Click to Convert Trial - http://www.clicktoconvert.com
61
<HTML> <HEAD> <TITLE>Tag INPUT with Text Attribute</TITLE> </HEAD> <BODY> <H2>ISIAN BUKU TAMU</H2> <TABLE BORDER=0> <TR><TD>Nama</TD> <TD><INPUT TYPE=text NAME=nama size=25 MAXLENGTH=25> </TD></TR> <TR><TD>Email</TD> <TD><INPUT TYPE=TEXT NAME=EMAIL SIZE=60 MAXLENGTH=60></TD></TR> </TABLE> </BODY> </HTML>
Gambar 5.1 Masukkan INPUT data dengan atribut TEXT
5.1.2 Atribut RADIO
Input dengan atribut radio adalah menampilkan beberapa pilihan untuk
dipilih satu dari beberapa pilihan tersebut. Seperti pilihan jurusan di PENS
(Elektronika, Telkom, Listrik, Informatika), jenis kelamin (Pria/ Wanita), usia
(Anak-anak, Remaja, Dewasa), jenis mobil (sedan, pickup, station, combi, kodok,
jeep, truck, trailer), jawaban pilihan soal (A, B, C, D, E) dan lain-lain.
Created using Click to Convert Trial - http://www.clicktoconvert.com
62
<HTML> <HEAD> <TITLE>Tag INPUT with RADIO Attribute</TITLE> </HEAD> <BODY> <H2>ISIAN BUKU TAMU</H2> <TABLE BORDER=0> <TR> <TD><B>Nama</B></TD> <TD><INPUT TYPE=text NAME=NAMA size=25 Maxlength=25></TD> </TR> <TR> <TD><B>Email</B></TD> <TD><INPUT TYPE=TEXT NAME=EMAIL SIZE=60 MAXLENGTH=60> </TD></TR> <TR><TD><B>Hobby</B></TD> <TD><INPUT TYPE=RADIO NAME=HOBBY>Komputer</TD></TR> <TR><TD></TD> <TD><INPUT TYPE=RADIO NAME=HOBBY>Membaca</TD></TR> <TR><TD></TD> <TD><INPUT TYPE=RADIO NAME=HOBBY>Elektronika</TD> </TR> <TR><TD></TD> <TD><INPUT TYPE=RADIO NAME=HOBBY>Olah-raga</TD></TR> </TABLE> </BODY> </HTML>
Berikut ini diberikan contoh tag input menggunakan atribut radio, dengan
memberikan 4 (empat) pilihan hobby, yaitu Komputer, Membaca, Elektronika,
dan Olah-raga. Keempat pilihan tersebut hanya dapat dipilih satu saja dari
keempat pilihan, sehingga apabila sudah memilih hobby Komputer maka pilihan
lain diabaikan, kemudian bila mengganti pilihan, misalkan dari Komputer menjadi
Elektronika maka pilihan yang ada di Komputer akan dihapus dan pilihan berganti
pada Elektronika, sehingga pilihan tetap satu saja. Misalkan diinginkan pilihan
ganda maka dapat digunakan atribut lain yaitu CHECKBOX, seperti dijelaskan
pada Sub Bab 5.1.3 dibawah ini.
Created using Click to Convert Trial - http://www.clicktoconvert.com
63
Gambar 5.2 Tampilan Input menggunakan atribut RADIO
5.1.3 Atribut CHECKBOX
Seperti telah dikatakan diatas bahwa untuk membuat pilihan ganda maka
digunakan tag input dengan atribut CHECKBOX, sehingga dapat dipilih beberapa
pilihan dari pilihan yang telah disediakan. Jadi memungkinkan untuk memilih
semua pilihan yang tersedia. Dengan memodifikasi dari script HTML diatas yaitu
mengganti atribut RADIO dengan atribut CHECKBOX, maka didapatkan
tampilan yang berbeda, dimana pada tampilan Gambar 5.2 diatas pilihan disajikan
dalam bentuk lingkaran dengan titik sebagai tanda pilihannya sedangkan bila
menggunakan atribut CHECKBOX, maka pilihan disajikan dalam bentuk pilihan
kotak dengan tanda cawang sebagai pilihannya. Pada tampilan contoh disini
diberikan empat pilihan hobby yang dapat dipilih semuanya mulai dari Komputer,
Membaca, Elektronika dan Olah-raga.
Created using Click to Convert Trial - http://www.clicktoconvert.com
64
<HTML> <HEAD> <TITLE>Tag INPUT with CHECKBOX Attribute</TITLE> </HEAD> <BODY> <H2>ISIAN BUKU TAMU</H2> <TABLE BORDER=0><TR><TD><B>Nama</B></TD> <TD><INPUT TYPE=text NAME=NAMA size=25 Maxlength=25> </TD></TR><TR><TD><B>Email</B></TD> <TD><INPUT TYPE=TEXT NAME=EMAIL SIZE=60 MAXLENGTH=60> </TD></TR><TR><TD><B>Hobby</B></TD> <TD><INPUT TYPE=CHECKBOX NAME=HOBBY>Komputer</TD> </TR><TR><TD></TD> <TD><INPUT TYPE=CHECKBOX NAME=HOBBY>Membaca</TD></TR> <TR><TD></TD> <TD><INPUT TYPE=CHECKBOX NAME=HOBBY>Elektronika</TD> </TR><TR><TD></TD> <TD><INPUT TYPE=CHECKBOX NAME=HOBBY>Olah-raga</TD> </TR> </TABLE> </BODY> </HTML>
Gambar 5.3 Tampilan Input menggunakan atribut CHECKBOX
Created using Click to Convert Trial - http://www.clicktoconvert.com
65
5.1.4 Atribut BUTTON dan SUBMIT
Penggunaan atribut ini berkaitan erat dengan tag <form> (dijelaskan lebih
lanjut pada Sub Bab 5.2 dibawah), dimana semua data input yang berada didalam
tag <form> akan dikirimkan ke server apabila input yang berupa tampilan tombol
diklik. Berikut ini contoh penggunaan tag input tombol tanpa tag <form>.
<HTML> <HEAD> <TITLE> Tag INPUT with SUBMIT, RESET & BUTTON Attribute </TITLE> </HEAD> <BODY> <H2>ISIAN BUKU TAMU</H2> <TABLE BORDER=0> <TR> <TD><B>Nama</B></TD> <TD><INPUT TYPE=text NAME=NAMA size=25 Maxlength=25> </TD> </TR> <TR> <TD><B>Email</B></TD> <TD><INPUT TYPE=TEXT NAME=EMAIL SIZE=60 MAXLENGTH=60> </TD></TR><TR><TD><B>Hobby</B></TD> <TD><INPUT TYPE=RADIO NAME=HOBBY>Komputer</TD> </TR> <TR> <TD></TD> <TD><INPUT TYPE=RADIO NAME=HOBBY>Membaca</TD> </TR> <TR> <TD></TD> <TD><INPUT TYPE=RADIO NAME=HOBBY>Elektronika</TD> </TR> <TR> <TD></TD> <TD><INPUT TYPE=RADIO NAME=HOBBY>Olah-raga</TD> </TR> <TR><TD></TD><TD ALIGN=RIGHT> <INPUT TYPE=SUBMIT NAME=TOMBOL VALUE=Kirim> <INPUT TYPE=RESET NAME=TOMBOL VALUE=Batal> <INPUT TYPE=BUTTON NAME=TOMBOL VALUE=Home></TD></TR> </TABLE> </BODY> </HTML>
Created using Click to Convert Trial - http://www.clicktoconvert.com
66
Gambar 5.4 Tampilan Input menggunakan atribut SUBMIT, RESET & BUTTON
5.1.5 Tag Select & Option
Disamping hal tersebut diatas tag <form> juga dapat digunakan untuk
pembuatan menu ‘drop down’, sehingga pilihan akan ditampilkan bila diklik pada
pilihan menu tersebut, dan dapat dipilih satu dari beberapa pilihan kemudian
ditampilkan pada pilihan paling atas, dimana pilihan yang ditampilkan tersebut
merupakan pilihan yang dipilih.
<HTML> <HEAD><TITLE>SELECT & OPTION TAG</TITLE></HEAD> <BODY> PILIHAN JURUSAN <SELECT NAME="JURUSAN"> <OPTION VALUE="E">Elektronika <OPTION VALUE="L">Listrik <OPTION VALUE="I">Informatika <OPTION VALUE="T">Telekomunikasi </BODY> </HTML>
Created using Click to Convert Trial - http://www.clicktoconvert.com
67
Gambar 5.5 Tag SELECT & OPTION
5.1.6 Tag Area
Tag ini digunakan untuk memasukkan data teks dengan ukuran melebar
kebawah (seperti editor), sehingga harus ditentukan panjang dan lebar dari area
teks yang akan digunakan sebagai data input data.
<HTML> <HEAD> <TITLE> Text Input using Area Tag </TITLE> </HEAD> <BODY> <H2>Komentar</H2> <TEXTAREA ROWS=5 COLS=40> Isikan komentar anda disini </TEXTAREA> </BODY> </HTML>
Created using Click to Convert Trial - http://www.clicktoconvert.com
68
Gambar 5.6 Tampilan Input teks menggunakan Tag Area
5.2 Tag Form
Dengan adanya tag <form> maka data input dapat dikirimkan ke server,
dalam hal ini terdapat dua metode pengiriman yaitu menggunakan atribut GET
atau POST. Metode GET akan mengirimkan data melalui alamat URL, sehingga
data yang kirimkan akan terlihat pada isian alamat pada browser, sedangkan
metode POST akan mengirimkan data melalui header dari script HTML, sehingga
data yang dikirimkan tidak terlihat. Metode GET baik bila digunakan untuk
pengiriman data yang pendek-pendek dan tidak rahasia serta memudahkan
pemeriksaan data yang dikirimkan, sedangkan metode POST baik digunakan
untuk pengiriman data yang panjang serta rahasia. Dapat disimpulkan bahwa
metode GET digunakan pada awal pembuatan form setelah dirasa data yang
dikirimkan benar, maka dapat diubah menjadi metode POST.
Created using Click to Convert Trial - http://www.clicktoconvert.com
69
<HTML> <HEAD> <TITLE> Tag FORM-GET </TITLE> </HEAD> <BODY> <H2>ISIAN BUKU TAMU</H2> <FORM ACTION="FORM-GET.HTML" METHOD=GET> <TABLE BORDER=0> <TR><TD><B>Nama</B></TD> <TD><INPUT TYPE=text NAME=NAMA size=25 Maxlength=25> </TD></TR><TR><TD><B>Email</B></TD> <TD><INPUT TYPE=TEXT NAME=EMAIL SIZE=60 MAXLENGTH=60> </TD></TR> <TR><TD><B>Hobby</B></TD> <TD> <INPUT TYPE=RADIO NAME=HOBBY VALUE="K">Komputer</TD> </TR> <TR><TD></TD> <TD><INPUT TYPE=RADIO NAME=HOBBY VALUE="M">Membaca </TD> </TR> <TR><TD></TD> <TD> <INPUT TYPE=RADIO NAME=HOBBY VALUE="E">Elektronika </TD> </TR> <TR> <TD></TD> <TD> <INPUT TYPE=RADIO NAME=HOBBY VALUE="O">Olah-raga</TD> </TR> <TR> <TD></TD> <TD ALIGN=RIGHT> <INPUT TYPE=SUBMIT NAME=TOMBOL VALUE=Kirim> <INPUT TYPE=RESET NAME=TOMBOL VALUE=Batal> <INPUT TYPE=BUTTON NAME=TOMBOL VALUE=Home> </TD> </TR> </TABLE> </FORM> </FORM> </BODY> </HTML>
Created using Click to Convert Trial - http://www.clicktoconvert.com
70
Gambar 5.7 Tampilan Form dengan metode GET setelah diklik Kirim
Dengan metode GET maka data input akan sertakan semua pada alamat
URL dengan diawali tanda tanya (?) dan diikuti dengan Nama variable yang
dikirimkan beserta isinya, untuk batas antara variable satu dengan yang lainnya
adalah digunakan tanda ampersand (&). Setelah data input tersebut benar maka
dapat diubah menggunakan metode POST.
5.3 Basis Data Access & IDC
Guna mendukung pemrograman dinamis maka diperlukan tempat
menyimpan data yang dapat menyimpan data secara terorganisasi dengan baik.
Untuk keperluan tersebut maka digunakan program aplikasi basis data
menggunakan Access, sedangkan penghubung antara basis data access dan
pemrograman HTML adalah menggunakan IDC (Internet Data Connector )
melalui ODBC (Open Database Connector ). IDC merupakan program ISAPI
yang dapat berkomunikasi baik dengan server web dan ODBC.
Created using Click to Convert Trial - http://www.clicktoconvert.com
71
Untuk dapat menggunakan IDC maka harus disiapkan dulu nama Data
Source dari data yang akan dikoneksikan dengan file IDC dan file basis data yang
dibuat menggunakan Access (*.mdb). Adapun langkah-langkahnya adalah sebagai
berikut:
Klik Access , buatlah basis data dengan nama DBPOLTEK.MDB yang
berisi table SISWA, DOSEN dan MATAKULIAH. Dimana table SISWA terdiri
dari field-field NRP, NAMASW, JURUSAN, ALAMATSW, KOTASW,
GENDERSW dan TGLLAHIR. Berikutnya Table DOSEN terdiri dari field-field
NIP, NAMADS, KEAHLIAN, ALAMATDS, KOTADS, GENDERDS dan
TGL_LAHIR. Sedangkan table MATAKULIAH terdiri dari field-field KODE,
NAMAKLH, dan SKS. Isilah dahulu semua table tersebut dengan data yang benar
kemudian simpan pada direktori tertentu (misal C:\INETPUB\WWWROOT).
Gambar 5.8 Isi dari basis data DBPOLTEK.MDB
Klik Control Panel , Performance and Main tenance , Administrative
Tools , Data Source ODBC , maka akan ditampilkan dialog sebagai berikut:
Tabel-tabel di dalam basis data
dbpoltek.mdb
Created using Click to Convert Trial - http://www.clicktoconvert.com
72
Gambar 5.9 Dialog ODBC Data Source Administrator
Klik pada pada menu “System DSN” kemudian klik “Add” maka akan
ditampilkan menu dialog seperti pada Gambar 5.10 dibawah, yaitu untuk
membuat Data Source baru, sesuai dengan basis data yang akan dihubungkan.
Karena untuk keperluan pembuatan pemrograman dinamis disini digunakan basis
data Access, maka pada pilihan dialog dipilih “Microsoft Access Driver (*.mdb)
dan dapat dipilih menggunakan driver yang lain (Oracle, SQL Server dan lainnya)
untuk keperluan mendatang.
1. Klik disini
2. Klik disini
Created using Click to Convert Trial - http://www.clicktoconvert.com
73
Gambar 5.10 Menu dialog untuk membuat Data Source baru
Gambar 5.11 Data Source Name Setup
1. Isi nama DSN-nya
2. Klik disini
1. Klik disini
2. Isi keterangan bila perlu
3. Klik disini
Created using Click to Convert Trial - http://www.clicktoconvert.com
74
Gambar 5.12 Memilih file basis data (DBPOLTEK.MDB)
Gambar 5.13 Basis data DBPOLTEK.MDB telah dipilih
Nama file basis data akan ditampilkan pada form Database pada menu
dialog pada Gambar 5.13 diatas, dengan demikian file tersebut sudah dicatat oleh
ODBC sebagai file basis data dengan nama Data Source ‘dbpoltek’, sehingga
segala sesuatu yang memerlukan akses ke file basis data harus melalui ‘dbpoltek’
sebagai perantaranya.
1. Klik disini
2. Klik disini
Nama basis data
Klik disini
Created using Click to Convert Trial - http://www.clicktoconvert.com
75
Gambar 5.14 System Data Source telah terbentuk dengan nama ‘dbpoltek’
Setelah System DSN dibuat dengan nama ‘dbpoltek’ maka dapat
dilanjutkan untuk membuat file IDC misalkan bernama ‘PROCESS.IDC’ yang
terdiri dari 3 (tiga) baris perintah sebagai berikut
DataSource: dbpoltek Template: siswa.htx SQLStatement: select * from siswa
Keterangan:
DataSource adalah nama dari System DSN yang dibuat diatas, sedangkan
Template adalah file aksi (action), digunakan untuk menampung data yang
diperoleh dari perintah pada SQLStatement setelah file PROCESS.IDC
tersebut dijalankan dari browser. File SISWA.HTX berisi script HTML yang telah
ditambah dengan suatu variable untuk menampung data yang didapatkan dari
Data Source ‘dbpoltek’. Berikut script dari file SISWA.HTX:
Klik disini
Created using Click to Convert Trial - http://www.clicktoconvert.com
76
<HTML> <HEAD> <TITLE>SISWA.HTX FILE</TITLE> </HEAD> <BODY> <H1>DAFTAR SISWA</H1> <TABLE BORDER=1> <TR><TH>NRP</TH><TH>NAMA</TH><TH>GENDER</TH></TR> <%BEGINDETAIL%> <TR><TD><%NRP%></TD><TD><%NAMASW%></TD><TD> <%GENDERSW%></TD></TR> <%ENDDETAIL%> </TABLE> </BODY> </HTML>
Gambar 5.15 Tampilan hasil dari File SISWA.HTX
Created using Click to Convert Trial - http://www.clicktoconvert.com
77
5.3.1 Menambah Record
Diatas telah dijelaskan bagaimana untuk menampilkan suatu table dari
basis data, berikut dijelaskan bagaimana cara untuk menambah data record
melalui jendela browser, menggunakan tag <form> dan <input>.
<HTML> <HEAD> <TITLE> Add Records </TITLE> </HEAD> <BODY> <H2>ISIAN DATA SISWA</H2> <FORM ACTION="SIMPAN.IDC" METHOD=POST> <TABLE> <TR><TD><B>NRP</B></TD> <TD><INPUT TYPE=text NAME=NRP size=15> </TD></TR><TR><TD><B>Nama</B></TD> <TD><INPUT TYPE=TEXT NAME=NAMASW SIZE=25> </TD></TR><TR><TD><B>Jurusan</B></TD> <TD><INPUT TYPE=TEXT NAME=JURUSAN SIZE=15> </TD></TR><TR><TD><B>Alamat</B></TD> <TD><INPUT TYPE=TEXT NAME=ALAMATSW SIZE=50> </TD></TR><TR><TD><B>Kota</B></TD> <TD><INPUT TYPE=TEXT NAME=KOTASW SIZE=15> </TD></TR><TR><TD><B>Tgl Lahir</B></TD> <TD><INPUT TYPE=TEXT NAME=TGLLAHIR SIZE=10> </TD></TR><TR><TD><B>Gender</B></TD> <TD><INPUT TYPE=RADIO NAME=GENDERSW VALUE="P">Pria </TD></TR> <TR><TD></TD> <TD> <INPUT TYPE=RADIO NAME=GENDERSW VALUE="M">Wanita</TD> </TR> <TR><TD></TD><TD ALIGN=RIGHT> <INPUT TYPE=SUBMIT NAME=TOMBOL VALUE=Kirim> <INPUT TYPE=RESET NAME=TOMBOL VALUE=Batal> <INPUT TYPE=BUTTON NAME=TOMBOL VALUE=Home></TD></TR> </TABLE> </FORM> </FORM> </BODY> </HTML>
Created using Click to Convert Trial - http://www.clicktoconvert.com
78
Gambar 5.16 Form Isian Data Siswa saat ditekan tombol “Kirim”
Setelah isian dari tag input terisi dengan data dan dipastikan benar, maka
dapat diklik tombol “Kirim” untuk mengirimkan data pada isian input ke server,
menggunakan metode POST, sehingga tidak terlihat pada alamat URL. Kemudian
proses selanjutnya data diterima oleh server kemudian dengan melalui perantara
Nama Data Source “dbpoltek” dari ODBC, data yang telah diterima tersebut
diproses dan disimpan pada table dengan nama field yang bersesuaian. Bila nama
field pada script HTML dengan nama field dari table berbeda, maka data tidak
dimasukkan kedalam table.
Script HTML pada file ADD-REC.HTML akan memanggil file
SIMPAN.IDC pada saat tombol “Kirim” ditekan, dimana ini merupakan aksi
(atribut ACTION) dari form yang membungkus input data.
Berikut ini adalah script dari file SIMPAN.IDC, yang dipanggil oleh script HTML
pada file ADD-REC.HTML diatas.
Created using Click to Convert Trial - http://www.clicktoconvert.com
79
DataSource: dbpoltek Template: simpan.htx SQLStatement: insert into siswa ( + NRP, NAMASW, JURUSAN, ALAMATSW, + KOTASW, GENDERSW, TGLLAHIR) + VALUES ( + '%NRP%', '%NAMASW%', '%JURUSAN%', + '%ALAMATSW%', '%KOTASW%', '%GENDERSW%', + '%TGLLAHIR%')
Setelah file SIMPAN.IDC dijalankan oleh script ADD-RECORD.HTML maka
script ini akan memanggil script SIMPAN.HTX untuk menampilkan data record
yang telah disimpan pada tabel. Adapun script SIMPAN.HTX seperti dibawah ini:
<HTML> <HEAD> <TITLE> SIMPAN.HTX FILE </TITLE> </HEAD> <BODY> <H2>SELAMAT!</H2> <FONT SIZE=3><B>DATA RECORD</FONT></B><BR> <TABLE BORDER=1> <TR><TH>NRP</TH><TH>NAMA</TH><TH>JURUSAN</TH> <TH>ALAMAT</TH><TH>KOTA</TH><TH>GENDER</TH></TR> <TR><TD><%IDC.NRP%></TD><TD><%IDC.NAMASW%></TD><TD> <%IDC.JURUSAN%></TD><TD><%IDC.ALAMATSW%></TD><TD> <%IDC.KOTASW%></TD><TD><%IDC.GENDERSW%></TD></TR> </TABLE> <FONT SIZE=3> <B>TELAH TESIMPAN DALAM TABEL SISWA</B> <P> <A HREF="process.idc"> <I><B> Lihat tabel SISWA </B></I> </A> </FONT> </BODY> </HTML>
Created using Click to Convert Trial - http://www.clicktoconvert.com
80
Gambar 5.17 Tampilan dari file SIMPAN.HTX
Setelah tampilan seperti pada Gambar 5.17 maka berarti bahwa tidak ada
kesalahan yang terjadi sehingga data record sudah masuk kedalam table SISWA,
untuk melihat apakah data sudah masuk atau belum, maka dapat dilakukan dengan
membuka table SISWA sebagai berikut:
Gambar 5.18 Penambahan data record baru pada table SISWA
Created using Click to Convert Trial - http://www.clicktoconvert.com
81
5.3.2 Mengganti Record
Terjadinya kesalahan pengetikan data dan terlanjur disimpan pada table
menyebabkan kesalahan data, untuk memperbaiki data yang salah tersebut harus
dilakukan editing, yaitu dengan menemukan dan menampilkan data yang salah,
kemudian dilakukan perbaikan pada field-field yang salah tersebut. Untuk
menemukan data yang salah tersebut diperlukan acuan berupa kunci primer dari
record data tersebut, kunci primer dapat berupa Nomor, NRP, NIP dan
sebagainya, dimana nilainya adalah unik atau tidak ada yang menyamainya.
Berikut adalah script dari file EDIT-REC.HTML untuk keperluan editing.
<HTML> <HEAD><TITLE>Find Records HTML</TITLE></HEAD> <BODY> <H2>CARI RECORD SISWA</H2> <FORM ACTION="FIND-REC.IDC" METHOD=POST> <TABLE> <TR><TD><B>NRP*</B></TD> <TD><INPUT TYPE=text NAME=NRP size=15> (* Kunci Primer) </TD></TR><TR><TD><B>Nama</B></TD> <TD><INPUT TYPE=TEXT NAME=NAMA SIZE=25> </TD></TR><TR><TD><B>Jurusan</B></TD> <TD><INPUT TYPE=TEXT NAME=JURUSAN SIZE=15> </TD></TR><TR><TD><B>Alamat</B></TD> <TD><INPUT TYPE=TEXT NAME=ALAMAT SIZE=50> </TD></TR><TR><TD><B>Kota</B></TD> <TD><INPUT TYPE=TEXT NAME=KOTA SIZE=15> </TD></TR><TR><TD><B>Tgl Lahir</B></TD> <TD><INPUT TYPE=TEXT NAME=TGLLAHIR SIZE=10> </TD></TR><TR><TD><B>Gender</B></TD> <TD><INPUT TYPE=RADIO NAME=GENDER VALUE="P">Pria </TD></TR><TR><TD></TD> <TD><INPUT TYPE=RADIO NAME=GENDER VALUE="M">Wanita </TD></TR><TR><TD></TD><TD ALIGN=RIGHT> <INPUT TYPE=SUBMIT NAME=TOMBOL VALUE=Kirim> <INPUT TYPE=RESET NAME=TOMBOL VALUE=Batal> <INPUT TYPE=BUTTON NAME=TOMBOL VALUE=Home></TD></TR> </TABLE> </FORM> </FORM> </BODY> </HTML>
Created using Click to Convert Trial - http://www.clicktoconvert.com
82
Gambar 5.18 Proses pencarian record data
Setelah tombol “Kirim” ditekan maka script EDIT-REC.HTML akan
menjalankan script FIND-REC.IDC, dimana didalam script FIND-REC.IDC
terdapat SQLStatement yang bertujuan mencari data record dengan acuan kunci
primer NRP, sebagai berikut:
DataSource: dbpoltek Template: edit-rec.htx SQLStatement: select * from siswa where NRP='%NRP%'
Script FIND-REC.IDC akan menghubungi file basis data melalui ODBC
untuk mencari data dengan kunci primer NRP, hasil pencarian (ketemu atau tidak)
akan diberikan pada file EDIT-REC.HTX untuk menampilkan data pencarian.
Berikut ini adalah file EDIT-REC.HTX untuk melakukan perbaikan data record.
Created using Click to Convert Trial - http://www.clicktoconvert.com
83
<HTML> <HEAD><TITLE>Edit Records HTX</TITLE></HEAD> <BODY> <H2>EDIT RECORD SISWA</H2> <FORM ACTION="SIMPAN.IDC" METHOD=POST> <TABLE><TR><TD><B>NRP</B></TD> <TD><INPUT TYPE=TEXT NAME=NRP SIZE=15 VALUE=<%NRP%>> </TD></TR><TR><TD><B>Nama</B></TD> <TD><INPUT TYPE=TEXT NAME=NAMASW SIZE=25 VALUE="<%NAMASW%>"> </TD></TR><TR><TD><B>Jurusan</B></TD> <TD><INPUT TYPE=TEXT NAME=JURUSAN SIZE=15 VALUE="<%JURUSAN%>"> </TD></TR><TR><TD><B>Alamat</B></TD> <TD><INPUT TYPE=TEXT NAME=ALAMATSW SIZE=50 VALUE="<%ALAMATSW%>"> </TD></TR><TR><TD><B>Kota</B></TD> <TD><INPUT TYPE=TEXT NAME=KOTASW SIZE=15 VALUE="<%KOTASW%>"> </TD></TR><TR><TD><B>Tgl Lahir</B></TD> <TD><INPUT TYPE=TEXT NAME=TGLLAHIR SIZE=10 VALUE=<%TGLLAHIR%>> </TD></TR><TR><TD><B>Gender</B></TD> <%IF GENDERSW EQ "Pria"%> <TD><INPUT TYPE=RADIO CHECKED NAME=GENDERSW>Pria</TD></TR> <TR><TD></TD> <TD><INPUT TYPE=RADIO NAME=GENDERSW>Wanita</TD></TR> <%ELSE%> <TD><INPUT TYPE=RADIO NAME=GENDERSW>Pria</TD></TR> <TR><TD></TD> <TD><INPUT TYPE=RADIO CHECKED NAME=GENDERSW>Wanita </TD></TR> <%ENDIF%> <TR><TD></TD><TD ALIGN=RIGHT> <INPUT TYPE=SUBMIT NAME=TOMBOL VALUE=Kirim> <INPUT TYPE=RESET NAME=TOMBOL VALUE=Batal> <INPUT TYPE=BUTTON NAME=TOMBOL VALUE=Home></TD></TR> </TABLE> </FORM> </FORM> </BODY> </HTML>
Menggunakan <%IF kondisi%>, <%ELSE%> dan <%ENDIF%> untuk
menentukan apakah GENDER “Pria” atau “Wanita”.
Created using Click to Convert Trial - http://www.clicktoconvert.com
84
Gambar 5.19 Tampilan file FIND-REC.HTX
Setelah field Alamat diperbaiki maka klik tombol “Kirim”, maka data
perbaikan akan dikirimkan ke server dan menjalankan script pada file
SIMPAN.IDC seperti pada proses penambahan data record.
5.3.3 Menghapus Record
Guna melengkapi proses pengolahan data diatas, maka perlu ditambahkan
script yang dapat digunakan untuk menghapus suatu record, apabila record yang
bersangkutan sudah tidak digunakan lagi. Untuk menghapus record maka
digunakan perintah SQL yaitu “delete” yang disertakan pada file DELE-REC.IDC
seperti dibawah ini:
Created using Click to Convert Trial - http://www.clicktoconvert.com
85
DataSource: dbpoltek Template: dele-rec.htx SQLStatement: delete from siswa where NRP=’%NRP%’
Script diatas harus dijalankan melalui script HTML, untuk itu perlu dibuat
script dengan nama DELE-REC.HTML, yang digunakan untuk menentukan kunci
primer dari record yang akan dihapus, kemudian memanggil script diatas sebagai
berikut.
<HTML> <HEAD><TITLE>Delete Records HTML</TITLE></HEAD> <BODY> <H2>CARI RECORD SISWA</H2> <FORM ACTION="SEEK-REC.IDC" METHOD=POST> <TABLE> <TR><TD><B>NRP*</B></TD> <TD><INPUT TYPE=text NAME=NRP size=15> (* Kunci Primer) </TD></TR><TR><TD><B>Nama</B></TD> <TD><INPUT TYPE=TEXT NAME=NAMA SIZE=25> </TD></TR><TR><TD><B>Jurusan</B></TD> <TD><INPUT TYPE=TEXT NAME=JURUSAN SIZE=15> </TD></TR><TR><TD><B>Alamat</B></TD> <TD><INPUT TYPE=TEXT NAME=ALAMAT SIZE=50> </TD></TR><TR><TD><B>Kota</B></TD> <TD><INPUT TYPE=TEXT NAME=KOTA SIZE=15> </TD></TR><TR><TD><B>Tgl Lahir</B></TD> <TD><INPUT TYPE=TEXT NAME=TGLLAHIR SIZE=10> </TD></TR><TR><TD><B>Gender</B></TD> <TD><INPUT TYPE=RADIO NAME=GENDER VALUE="P">Pria</TD></TR> <TR><TD></TD> <TD><INPUT TYPE=RADIO NAME=GENDER VALUE="M">Wanita</TD></TR> <TR><TD></TD><TD ALIGN=RIGHT> <INPUT TYPE=SUBMIT NAME=TOMBOL VALUE=Cari> <INPUT TYPE=RESET NAME=TOMBOL VALUE=Batal> <INPUT TYPE=BUTTON NAME=TOMBOL VALUE=Home></TD></TR> </TABLE> </FORM> </FORM> </BODY> </HTML>
Created using Click to Convert Trial - http://www.clicktoconvert.com
86
Gambar 5.20 Pencarian record data yang akan dihapus
Berikut ini scrip dari SEEK-REC.IDC digunakan untuk mencari kunci
primer dari record data yang akan dihapus.
DataSource: dbpoltek Template: dele-rec.htx SQLStatement: select * from siswa where NRP='%NRP%'
Script SEEK-REC.IDC akan menjalankan perintah SQL yaitu untuk
mencari record data dengan acuan kunci primer NRP, setelah proses pencarian
(ketemu atau tidak), script ini akan memanggil file DELE-REC.HTX untuk
menampilkan hasil pencarian. Adapun script dari file DELE-REC.HTX adalah
sebagai berikut:
Created using Click to Convert Trial - http://www.clicktoconvert.com
87
<HTML> <HEAD><TITLE>Delete Records HTX</TITLE></HEAD> <BODY> <H2>HAPUS RECORD SISWA</H2> <FORM ACTION="DELE-REC.IDC" METHOD=POST> <TABLE> <TR><TD><B>NRP</B></TD> <TD><INPUT TYPE=TEXT NAME=NRP SIZE=15 VALUE=<%NRP%>> </TD></TR><TR><TD><B>Nama</B></TD> <TD><INPUT TYPE=TEXT NAME=NAMASW SIZE=25 VALUE="<%NAMASW%>"> </TD></TR><TR><TD><B>Jurusan</B></TD> <TD><INPUT TYPE=TEXT NAME=JURUSAN SIZE=15 VALUE="<%JURUSAN%>"> </TD></TR><TR><TD><B>Alamat</B></TD> <TD><INPUT TYPE=TEXT NAME=ALAMATSW SIZE=50 VALUE="<%ALAMATSW%>"> </TD></TR><TR><TD><B>Kota</B></TD> <TD><INPUT TYPE=TEXT NAME=KOTASW SIZE=15 VALUE="<%KOTASW%>"> </TD></TR><TR><TD><B>Tgl Lahir</B></TD> <TD><INPUT TYPE=TEXT NAME=TGLLAHIR SIZE=10 VALUE=<%TGLLAHIR%>> </TD></TR><TR><TD><B>Gender</B></TD> <%IF GENDERSW EQ "Pria"%> <TD><INPUT TYPE=RADIO CHECKED NAME=GENDERSW VALUE="Pria">Pria</TD></TR> <TR><TD></TD> <TD><INPUT TYPE=RADIO NAME=GENDERSW>Wanita</TD></TR> <%ELSE%> <TD><INPUT TYPE=RADIO NAME=GENDERSW>Pria</TD></TR> <TR><TD></TD> <TD><INPUT TYPE=RADIO CHECKED NAME=GENDERSW VALUE="Wanita">Wanita</TD></TR> <%ENDIF%> <TR><TD></TD><TD ALIGN=RIGHT> <INPUT TYPE=SUBMIT NAME=TOMBOL VALUE=Hapus> <INPUT TYPE=RESET NAME=TOMBOL VALUE=Batal> <INPUT TYPE=BUTTON NAME=TOMBOL VALUE=Home></TD></TR> </TABLE> </FORM> </FORM> </BODY> </HTML>
Created using Click to Convert Trial - http://www.clicktoconvert.com
88
Gambar 5.21 Hasil pencarian record data yang akan dihapus
Script file DELE-REC.HTX akan memanggil script file DELE-REC.IDC,
dimana dalam file tersebut terdapat perintah SQL untuk menghapus record yang
ditampilkan seperti pada Gambar 5.21, apabila tombol “Hapus” diklik. Adapun
script file DELE-REC.IDC adalah sebagai berikut:
DataSource: dbpoltek Template: dele-del.htx SQLStatement: delete from siswa where NRP='%NRP%'
Script file DELE-REC.IDC diatas akan menghapus record data dan akan
menjalankan file DELE-DEL.HTX sebagai tampilan pemberitahuan bahwa record
telah dihapus.
Created using Click to Convert Trial - http://www.clicktoconvert.com
89
<HTML> <HEAD> <TITLE>DELE-DEL.HTX FILE</TITLE> </HEAD> <BODY> <H2>SUKSES!</H2> <FONT SIZE=3><B>DATA RECORD</FONT></B><BR> <TABLE BORDER=1> <TR><TH>NRP</TH><TH>NAMA</TH><TH>JURUSAN</TH> <TH>ALAMAT</TH><TH>KOTA</TH><TH>GENDER</TH></TR> <TR><TD><%IDC.NRP%></TD><TD><%IDC.NAMASW%></TD><TD> <%IDC.JURUSAN%></TD><TD><%IDC.ALAMATSW%></TD><TD> <%IDC.KOTASW%></TD><TD><%IDC.GENDERSW%></TD></TR> </TABLE> <FONT SIZE=3> <B>TELAH DIHAPUS DARI TABEL SISWA</B></FONT> <P> <A HREF="process.idc"> <I><B>Lihat tabel SISWA</B> </I></A> </BODY> </HTML>
Gambar 5.22 Tampilan setelah menghapus record data
Created using Click to Convert Trial - http://www.clicktoconvert.com