Bab-5 HTML Dinamis dengan IDC · PDF fileweb akan menjadi bervariasi, ... kemudian hasil...

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

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.



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.



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.



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.



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



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>



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>



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>



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.



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>



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.



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



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



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



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



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



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



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>



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.



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>



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



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>



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.



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



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:



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>



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:



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>



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.



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



Bab-5 HTML Dinamis dengan IDC · PDF fileweb akan menjadi bervariasi, ... kemudian hasil...

Documents

Transcript of Bab-5 HTML Dinamis dengan IDC · PDF fileweb akan menjadi bervariasi, ... kemudian hasil...