Bab-5 HTML Dinamis dengan IDC

Created using Click to Convert Trial - http://www.clicktoconvert.com

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

59


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.

60


<TITLE>Tag INPUT with Text Attribute
ISIAN BUKU TAMU

Nama

Email

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.

61


<TITLE>Tag INPUT with RADIO Attribute
ISIAN BUKU TAMU

Nama

Email

Hobby Komputer

Membaca

Elektronika

Olah-raga

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.

62


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.

63


<TITLE>Tag INPUT with CHECKBOX Attribute
ISIAN BUKU TAMU

Nama
Email
Hobby Komputer
Membaca

Elektronika
Olah-raga

Gambar 5.3 Tampilan Input menggunakan atribut CHECKBOX

64


5.1.4 Atribut BUTTON dan SUBMIT Penggunaan atribut ini berkaitan erat dengan tag
(dijelaskan lebih lanjut pada Sub Bab 5.2 dibawah), dimana semua data input yang berada didalam tag akan dikirimkan ke server apabila input yang berupa tampilan tombol diklik. Berikut ini contoh penggunaan tag input tombol tanpa tag .

<TITLE> Tag INPUT with SUBMIT, RESET & BUTTON Attribute
ISIAN BUKU TAMU

Nama

Email
Hobby Komputer

Membaca

Elektronika

Olah-raga

65


Gambar 5.4 Tampilan Input menggunakan atribut SUBMIT, RESET & BUTTON

5.1.5 Tag Select & Option Disamping hal tersebut diatas tag 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.

<TITLE>SELECT & OPTION TAG PILIHAN JURUSAN <SELECT NAME="JURUSAN">

69


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.

70


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

Tabel-tabel di dalam basis data dbpoltek.mdb

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:

71


1. Klik disini

2. Klik disini

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.

72


1. Klik disini

2. Klik disini

Gambar 5.10 Menu dialog untuk membuat Data Source baru

1. Isi nama DSN-nya

2. Isi keterangan bila perlu

3. Klik disini

Gambar 5.11 Data Source Name Setup

73


2. Klik disini

1. Klik disini

Gambar 5.12 Memilih file basis data (DBPOLTEK.MDB)

Klik disini

Nama basis data

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.

74


Klik disini

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:

75


<TITLE>SISWA.HTX FILE
DAFTAR SISWA
<%BEGINDETAIL%> <%ENDDETAIL%>

NRP NAMA GENDER
<%NRP%> <%NAMASW%> <%GENDERSW%>

Gambar 5.15 Tampilan hasil dari File SISWA.HTX

76


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

<TITLE> Add Records
ISIAN DATA SISWA

NRP
Nama
Jurusan
Alamat
Kota
Tgl Lahir
Gender Pria

Wanita

77


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.

78


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:

<TITLE> SIMPAN.HTX FILE
SELAMAT!
DATA RECORD

NRP NAMA JURUSAN ALAMAT KOTA GENDER

<%IDC.NRP%> <%IDC.NAMASW%> <%IDC.JURUSAN%> <%IDC.ALAMATSW%> <%IDC.KOTASW%> <%IDC.GENDERSW%>

TELAH TESIMPAN DALAM TABEL SISWA
Lihat tabel SISWA

79


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

80


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.

<TITLE>Find Records HTML
CARI RECORD SISWA

NRP* (* Kunci Primer)
Nama
Jurusan
Alamat
Kota
Tgl Lahir
Gender Pria
Wanita

81


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.

82


<TITLE>Edit Records HTX
EDIT RECORD SISWA

<%IF GENDERSW EQ "Pria"%> <%ELSE%> <%ENDIF%>
NRP >
Nama
Jurusan
Alamat
Kota
Tgl Lahir >
Gender Pria

Wanita
Pria

Wanita

Menggunakan <%IF kondisi%>, <%ELSE%> dan <%ENDIF%> untuk menentukan apakah GENDER “Pria” atau “Wanita”.

83


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:

84


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.

<TITLE>Delete Records HTML
CARI RECORD SISWA

NRP* (* Kunci Primer)
Nama
Jurusan
Alamat
Kota
Tgl Lahir
Gender Pria

Wanita

85


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:

86


<TITLE>Delete Records HTX
HAPUS RECORD SISWA

<%IF GENDERSW EQ "Pria"%> <%ELSE%> <%ENDIF%>

NRP >
Nama
Jurusan
Alamat
Kota
Tgl Lahir >
Gender Pria

Wanita
Pria

Wanita

87


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.

88


<TITLE>DELE-DEL.HTX FILE
SUKSES!
DATA RECORD

NRP NAMA JURUSAN ALAMAT KOTA GENDER

<%IDC.NRP%> <%IDC.NAMASW%> <%IDC.JURUSAN%> <%IDC.ALAMATSW%> <%IDC.KOTASW%> <%IDC.GENDERSW%>

TELAH DIHAPUS DARI TABEL SISWA
Lihat tabel SISWA

Gambar 5.22 Tampilan setelah menghapus record data

89

Nama
Email
Hobby	Komputer
	Membaca
	Elektronika
	Olah-raga

NRP
Nama
Jurusan
Alamat
Kota
Tgl Lahir
Gender	Pria
	Wanita

NRP*	(* Kunci Primer)
Nama
Jurusan
Alamat
Kota
Tgl Lahir
Gender	Pria
	Wanita

Bab-5 HTML Dinamis dengan IDC

Recommend Documents

ISIAN BUKU TAMU

ISIAN BUKU TAMU

ISIAN BUKU TAMU

ISIAN BUKU TAMU

Komentar

ISIAN BUKU TAMU

DAFTAR SISWA

ISIAN DATA SISWA

SELAMAT!

CARI RECORD SISWA

EDIT RECORD SISWA

CARI RECORD SISWA

HAPUS RECORD SISWA

SUKSES!