HTML
Dinamis dengan IDC
Bab-bab
sebelumnya telah dibahas tentang penggunaan tag-tag yang digunakan untuk
Pemrograman HTML secara statis 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
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.
|
<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>
|
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.
|
<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.
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.
|
<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>
|
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>
|
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>
|
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
|
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.
|
<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>
|
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.
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
Control
Panel, Performance and Maintenance, Administrative Tools,
Data Source ODBC,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.
Nama file basis data akan ditampilkan pada form Database pada menu dialog, 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.
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:
|
<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>
|
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>
|
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.
|
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>
|
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:
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>
|
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.
|
<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”.
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:
|
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>
|
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:
|
<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>
|
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.
|
<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>
|
