Anda di halaman 1dari 78

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

BAB I
PENGENALAN ACTIVE SERVER PAGES (ASP)

I.1 Pendahuluan Sebelum kita masuk ke pemrogramman ASP, kita harus mengenal dulu apa ASP itu dan apa kegunaannya serta kelebihannya. Dengan demikian, kita dapat mengetahui bayangan mengenai ASP. ASP adalah salah satu teknologi yang dikembangkan oleh Microsoft yang diluncurkan pada tahun 1996. ASP merupakan teknologi Server-side scripting, yang artinya segala proses programmnya dilakukan di server sebelum dikirim ke client. Client akan menerima hasil keluaran dalam bentuk HTML biasa. Server side scripting ini merupakan kebalikan dari client side scripting, yang seluruh proses programmnya dilakukan di client. ASP adalah bahasa pemrograman untuk membangun aplikasi web (internet). Ada beberapa bahasa program yang lain yang dapat digunakan untuk membangun aplikasi web seperti : PHP, Perl, Coldfusion dll. Tetapi untuk di lingkungan Sistem operasi Windows, ASP adalah bahasa yang digunakan untuk membangun aplikasi Web (Internet). ASP ini sudah banyak digunakan untuk membuat aplikasi yang berhubungan dengan database, baik menggunakan Microsoft Access database hingga SQL server atau ORACLE database. Scripting yang paling banyak digunakan dalam menulis ASP ini adalah Vbscript. Bahasa ASP murni Object Oriented Programming (OOP). Struktur bahasanya sama dengan Bahasa Pemrograman Visual Basic yang mudah dimengerti karena sintaksnya menggunakan bahasa Inggris. Oleh karena itu ASP sangat mudah dipelajari oleh para pemula sekalipun untuk membuat aplikasi web. Hypertext Markup Langguage (HTML) adalah bahasa standar penulisan dokumen web agar dapat ditampilkan pada browser. Script adalah potongan program kecil yang disisipkan pada dokumen web sehingga halaman web menjadi lebih interaktif. Jadi Program ASP disisipkan pada Bahasa HTML agar dapat ditampilkan pada Browser. I.2 Persyaratan yang dibutuhkan

Pemrograman Web dengan Active Server Pages (ASP)

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Agar dapat membuat program web menggunakan ASP, ada beberapa persyaratan yang harus terpenuhi yaitu : I.2.1 Web Server Local Untuk dapat menguji script yang kita buat, diperlukan sebuah Web Server. Sebagai sarana latihan, cara yang paling mudah dalam melakukan percobaan adalah secara local, dengan menggunakan Personal Web Server (PWS) atau Internet Information Server (IIS) sebagai web server local. Sehingga script ASP yang dibuat dapat dipastikan berjalan sesuai dengan harapan sebelum di upload ke Internet. Setelah semua aplikasi berjalan normal di server local, kita dapat mengirim file-file tersebut ke server Internet yang dapat di akses oleh umum (Public). PWS atau IIS yang kita pilih sebagai web server local, tidak jadi masalah dalam pembuatan aplikasi ini nantinya. Untuk PWS, kita dapat temukan dalam CD lengkap dari Microsoft Windows 95/98 di Direktori Add-Ons, sedangkan IIS terdapat pada Microsoft Windows 2000. Berikut ini adalah langkah-langkah instalasi Web Server Local : A. Instalasi Personal Web Server 4.0 (PWS 4.0) pada Microsoft Windows 95/98 1. Masuk ke dalam direktori add-ons, kemudian jalankan file setup.exe. Akan muncul tampilan pembukaan yang menampilkan informasi bahwa fasilitas yang diberikan dalam PWS diantaranya adalah Personal Web Server, Transaction Server, Data Acces Components, Message Queue Server Client dan Easy Administration. Pilih tombol Next untuk memulai instalasi atau Cancel untuk membatalkan.

Pemrograman Web dengan Active Server Pages (ASP)

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar I.1. Tampilan Awal pada saat menginstal Personal Web Server

2. 3.

Permintaan untuk memilih tipe instalasi yang diinginkan (minimum, typical dan custom). Untuk hal ini pilih saja typical. Setelah Kita memilih typical, maka akan muncul permintaan untuk informasi folder yang akan digunakan sebagai home directory dari WWW Service. Disitulah tempat penyimpanan semua dokumen web yang akan ditampilkan oleh web browser (Internet Explorer, Netscape, dll.). Untuk directory Default adalah C:\Inetpub\wwwroot. Kita dapat mengubahnya jika perlu. Setelah itu kita klik Next untuk melanjutkan instalasi. Pada tahap ini dilakukan instalasi berdasarkan pada pilihan sebelumnya. Instalasi PWS dapat dilihat melalui current status dan progress bar biru yang berjalan. Jika Instalasi telah berjalan dengan baik dan benar, maka akan ditampilkan pesan bahwa instalasi PWS telah selesai dan kita diminta untuk menekan tombol finish untuk keluar dari instalasi. Default direktori C:\Inetpub\wwwroot

4.

5.

Gambar I.2. Personal Web Server (PWS) Manager

Pemrograman Web dengan Active Server Pages (ASP)

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

6. Selanjutnya, Personal Web Server Manager akan muncul setiap kali kita merestart computer. Program inilah yang menjadi pusat control pengaturan web server pada PWS. Pada tampilan utama PWS (Gambar I.2.) dapat kita temukan pusat direktori yang telah dipilih pada langkah ke 3 yaitu : C:\Inetpub\wwwroot. Pusat direktori tersebutlah akan menjadi tempat penyimpanan script-script ASP yang akan dibuat nantinya. Untuk membuat proyek yang lain, disarankan untuk membuat subdirektori di dalam folder C:\Inetpub\wwwroot untuk setiap proyek yang dibuat. Misalkan, direktori C:\Inetpub\wwwroot\perpustakaan untuk semua latihan yang berkaiatan dengan aplikasi perpustakaan. Sehingga untuk mengakses script-script ASP tersebut melalui Browser, cukup dengan menuliskan : http://localhost/perpustakaan pada kotak alamat setiap browser. Catatan Untuk menjalankan program di Browser, perintah C:\Inetpub\wwwroot\perpustakaan dapat diganti dengan http://localhost/perpustakaan/(nama file) Contoh : http://localhost/perpustakaan/coba.ASP http://localhost

Gambar I.3. Penulisan URL untuk Akses Local

B. Instalasi Internet Informastion Service 5.0 (IIS 5.0) pada Microsoft Windows 2000 1. Buka control panel (Start Settings Control Panel) dan pilih icon Add/Remove Programs. Maka akan muncul gambar di bawah ini.

Pemrograman Web dengan Active Server Pages (ASP)

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar I.4. Tampilan Add/Remove Programs

2. Pilih Add/Remove Windows Components yang terletak pada sebelah kiri. Maka akan terbuka dialog screen seperti di bawah ini.

Gambar I.5. Tampilan Windows Components Wizard

3. Pilih Internet Information Services (IIS). Jika sudah dicheckbox, maka IIS sudah terinstall. Jika belum, maka periksa Internet Information Services (IIS) option kemudian klik details, maka akan keluar dialog screen seperti di bawah ini.

Pemrograman Web dengan Active Server Pages (ASP)

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar I.6. Tampilan Internet Information Services (IIS)

4. Pilih semuanya untuk mendapatkan semua fungsi dan feature dari IIS. Kilk OK, maka dialog box akan berpindah ke sebelumnya. Geser scroll bar ke bawah, periksa Script Debugger option. Script debugger memungkinkan kita untuk melakukan debug pada script ASP kita.

Gambar I.7. Tampilan Script Debugger yang sudah terpilih pada Windows Components Wizard

5. Klik next, maka sistem akan menginstruksikan kepada kita untuk memasukkan Windows 2000 Installation CD ke dalam CDROM. Setup akan memakan waktu beberapa menit untuk menyelesaikannya. 6. Setelah instalasi selesai buka windows explorer, maka folder C:\Inetpub sudah langsung terbentuk. Berikut fungsi singkat masing-masing folder : \iisamples\homepage berisi ASP sample pages. \iisamples\sdk berisi subdirektori yang menyimpan ASP script yang mendemonstrasikan beberapa ASP object dan komponen.
Pemrograman Web dengan Active Server Pages (ASP) 6

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

\scripts isinya direktori kosong yang berguna untuk menyimpan script yang sudah dibuat. \webpub isinya juga direktori kosong yang digunakan untuk feature Publish Wizard. Hanya ada jika kita menggunakan Windows 2000 Professional Edition. \wwwroot direktori ini merupakan top folder untuk website anda. Ini menjadi default web directory. Kita bisa membuat sub directory di sini untuk membangun website. \ftproot, \mailroot dan \nntproot merupakan direktori yang berisi ftp, mail dan news service.

7. Kita bisa mencoba apakah web server sudah terinstalasi dengan baik atau tidak. Oleh karena itu cobalah buka Internet Explorer. Ketik pada kolom address. http://localhost atau http://namakomputer, jika berhasil maka akan tampil layar seperti gambar di bawah ini.

Gambar I.8. Tampilan IIS 5.0 yang sudah terinstall

I.2.2 Editor Script ASP ditulis dalam bentuk teks murni seperti HTML. Kita dapat menggunakan sembarang editor teks untuk menyunting file-file ASP, misalnya Notepad, Ultra Edit dll. Kita dapat pula menggunakan editor yang dirancang khusus untuk membuat halaman-halaman web HTML dan script seperti Microsoft FrontPage dan
7

Pemrograman Web dengan Active Server Pages (ASP)

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Macromedia Dreamweaver. Untuk penulisan script ini kita menggunakan Text Editor Ultra Edit.

Gambar I.9. Tampilan Text Editor Ultra Edit

I.2.3 Browser Browser digunakan untuk mencoba script ASP yang dibuat. Kita dapat menggunakan sembarang browser seperti Internet Explorer, Netscape Navigator, dll. Pembahasan di buku ini menggunakan Internet Explorer (IE). I.3 Bagaimana ASP Bekerja Script ASP yang telah dibuat, tidak dapat langsung dijalankan di sebuah komputer menggunakan browser, karena menerjemahkan script ASP memerlukan server tersendiri. Script-script ASP diproses di sebuah server web, hasilnya barulah dikirimkan ke client dalam format HTML. Oleh karena itulah halaman web yang mengandung ASP dapat dibuka oleh browser manapun, karena output yang ditampilkan di browser adalah dokumen HTML. Pada Windows 2000, pustaka pengeksekusi script-script ASP adalah ASP.DLL yang secara default terinstal pada direktori WINNT\System32\inetsrv. Ketika ada permintaan dari client untuk membuka suatu halaman yang berisi script ASP, IIS akan memerintahkan kepada file tersebut untuk mengeksekusi script-script yang ada. Setelah selesai, hasilnya digabungkan dengan kode HTML yang ada membentuk sebuah dokumen HTML yang komplit. Dokumen yang komplit tersebut lalu diserahkan kepada server web untuk diteruskan kepada client yang memintanya.

Pemrograman Web dengan Active Server Pages (ASP)

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Jenis script yang diolah seperti ASP disebut dengan Script serverside. Script ASP berbeda dengan VBScript atau JavaScript yang diolah dan dilihat hasilnya langsung di browser. Jenis script seperti VBScript dan JavaScript disebut dengan script clintside.

Gambar I.10. Proses Script ASP pada Server Web

BAB II
HYPERTEXT MARKUP LANGUAGE (HTML)
II.1 Pendahuluan Halaman Active Server Pages (ASP) adalah dokumen aktif yang berisi script ASP dan HTML atau script lainnya yang terlebih dahulu diproses oleh server pada saat request terhadap dokumen tersebut. Dikatakan halaman aktif, karena script ASP dalam dokumen tersebut memiliki kemampuan untuk berinteraksi dengan database apapun serta menampilkan data secara dinamis dalam format HTML. Dokumen ASP itu sendiri pada dasarnya adalah dokumen HTML yang di dalamnya disisipkan script ASP dan memiliki ekstensi file *.asp. Dengan demikian untuk dapat mempelajari ASP adalah mutlak mengenal script HTML yang merupakan elemen dasar scripting internet.

Pemrograman Web dengan Active Server Pages (ASP)

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

HTML Perkembangan Internet yang sangat pesat tidak terlepas dari World Wide Web (WWW), yang merupakan salah satu bagian dari Internet. WWW membawa perubahan drastis pada Internet dengan kemampuanya untuk menampilkan komponen-komponen multimedia yang interaktif di Internet. WWW sendiri juga tidak terlepas dari HTML (Hypertext Markup Language) yang merupakan dasar untuk membangun suatu situs Web. Arti HTML dapat dipelajari dari setiap elemennya, yaitu : HyperText WWW memungkinkan penggunanya untuk melompat dari suatu lokasi ke lokasi lain. Ini dapat terjadi karena adanya hypertext link, yaitu suatu teks yang berfungsi sebagai suatu link (penghubung) dari suatu lokasi dalam Web ke lokasi lainnya. Dengan kemampuan multimedia dalam Web, istilah ini kemudian berkembang menjadi hypermedia link. Untuk menyederhanakan, kedua istilah ini dipadukan menjadi hyperlink atau biasa disebut link saja. Markup Untuk membuat suatu link, teks tebal, teks miring, atau komponen-komponen Web lainnya dilakukan dengan cara memberikan tanda pada link atau teks yang akan dibuat tebal atau miring tersebut. Tanda-tanda ini disebut sebagai markup tag atau biasa disingkat tag. Language Sekalipun didefinisikan sebagai suatu Language (bahasa), tetapi sebetulnya HTML bukanlah suatu bahasa pemrograman. Kita tidak perlu menjadi seorang programmer untuk mempelajari HTML, yang kita lakukan hanyalah memberikan tanda atau tag pada suatu bagian tertentu dari teks. II.2 Struktur Dokumen HTML HTML adalah Scripting yang digunakan untuk mengatur format dokumen dalam halaman web. Script ini menggunakan markup untuk menandai perintah-perintahnya. Di bawah ini adalah struktur dari dokumen HTML.
<HTML> <HEAD> Kepala Dokumen <TITLE>Struktur HTML</TITLE> </HEAD> <BODY> <br> Isi dokumen </BODY> </HTML>

Pemrograman Web dengan Active Server Pages (ASP)

10

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Pada contoh di atas dapat dilihat bahwa dokumen HTML diawali dengan tag <HTML> dan diakhiri dengan tag </HTML>. Dua bagian di atas adalah bagian kepala dokumen yang berisi informasi tentang informasi dokumen seperti keywords dan description, dll. Sedangkan untuk bagian yang diapit dengan tag <TITLE></TITLE> adalah bagian untuk menuliskan judul dokumen. Dan bagian yang diapit oleh tag <BODY></BODY> adalah bagian yang berisi seluruh informasi yang hendak disajikan. Tidak semua tag HTML ditulis dalam bentuk berpasangan, yaitu dengan tag awal dan tag akhir. Beberapa tag tidak mempunyai tag akhir, jadi hanya terdiri dari tag awal saja. Contoh tag tunggal adalah <HR>, digunakan untuk membuat suatu garis horizontal. II.2.1 Heading Heading ditandai dengan tag <H1> sampai dengan <H6>, tag ini digunakan untuk menampilkan bagian tertentu yang dianggap sebagai judul atau topic. Penggunaan tag <H1> s/d <H6> memberikan efek perubahan ukuran huruf. Penggunaannya adalah sebgai berikut :
<H1 [ALIGN=Tipe Perataan]> <HTML> <HEAD> <TITLE>Headings</TITLE> </HEAD> <BODY> <H1> Heding 1 </H1> <H2> Heding 2 </H2> <H5> Heding 5 </H5> <BR> <H1 Align=Left> Heading 1 (Align Left) </H1> <H2 Align=Right> Heading 2 (Align Right) </H2> <H5 Align=Center> Heading 5 (Align Center) </H5> </BODY> </HTML>

Pemrograman Web dengan Active Server Pages (ASP)

11

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar II.1. Hasil Eksekusi Program HTML pada Browser Internet Explorer (IE)

II.2.2 List Dokumen Untuk menampilkan dokumen secara list dapat digunakan tag <OL> dan diakhiri dengan </OL>. Penggunaan tag ini adalah sebagai berikut :
<OL [TYPE=Tipe Penomoran]> <HTML> <HEAD> <TITLE>contoh5.html</TITLE> </HEAD> <BODY> Tipe 1 (Numerik) <OL Type=1 START=5> <LI> Ms.Word <LI> Ms.Excel <LI> Ms.Powerpoint <LI> Ms.Outlook <LI> Ms.Acces </OL> Tipe A dan a (Alpabetik) <OL TYPE=A START=1> <LI> Ms.Word <LI> Ms.Excel <LI> TYPE=a>Ms.Powerpoint <LI> TYPE=a>Ms.Outlook <LI> Ms.Acces </OL> <BR> <BR> Tipe I dan i (Romawi) <OL TYPE=i> <LI> Ms.Word <LI> Ms.Excel <LI> TYPE=I>Ms.Powerpoint <LI> TYPE=I>Ms.Outlook <LI> Ms.Acces </OL> </BODY> </HTML>

Pemrograman Web dengan Active Server Pages (ASP)

12

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar II.2. Hasil Eksekusi HTML pada Browser untuk Tipe Penomoran

II.2.3 Paragraf Untuk memberikan format paragraf pada teks dapat menggunakan tag <P>. Tag ini memiliki beberapa atribut yang memberikan alignmen teks, yaitu Align="Left", Align="Right", Align=Center". Penggunaannya adalah sebagai berikut : <P [ALIGN="Tipe Perataan"]> Dalam upaya meningkatkan peran serta LBPP-LIA untuk mencetak tenaga professional siap kerja yang memiliki kompetensi dalam menembus pasaran kerja, maka dirancang suatu program pendidikan keterampilan yang mengacu pada kebutuhan dunia usaha. <P Align="Right"> Program Pendidikan Profesional Satu Tahun LBPP-LIA menyelenggarakan beberapa jurusan profesi siap kerja yaitu : <P Align="Center"> Manajemen Informatika, Akuntansi Komputer, Sekretaris & PR, Perhotelan, Tour & Travel,
Pemrograman Web dengan Active Server Pages (ASP) 13

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Bahasa Inggris, <P Align="Left"> Pendidikan Profesional Satu tahun yang diadakan oleh LBPP-LIA adalah pendidikan yang mengikuti kecepatan perkembangan industri yang bertujuan meningkatkan sumberdaya manusia.

Gambar II.3. Hasil Eksekusi HTML pada Browser untuk Format Paragraf

II.2.4 Memformat Karakter Format terhadap karakter yang ditampilkan akan berguna untuk membuat dokumen HTML yang menarik. Pemformatan karakter tersebut mencakup beberapa hal, yaitu: 1. Logical Format 2. Physical Format 3. Tag <BLOCKQUOTE> 4. Tag <FONT> 5. Karakter Khusus 1. Logical Format Logical format akan menerapkan layout dokumen secara logis dan terstruktur. Tag-tag yang termasuk logical format adalah sebagai berikut:
Pemrograman Web dengan Active Server Pages (ASP) 14

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Tag <CITE></CITE> <CODE></CODE> <EM></EM> <KBD></KBD> <SAMP></SAMP> <VAR></VAR> <DFN></DFN> Contoh :

Kegunaan Untuk menandai suatu kutipan (Citation) Untuk menampilkan kode-kode pemrograman, misalnya bahasa C. Untuk menandai suatu teks yg ditekankan oleh penulis. Untuk menandai suatu teks yg harus dimaksudkan sebagai contoh Untuk menandai bagian yang terpenting dari suatu teks. Untuk menampilkan nama variable Untuk menandai sebuah subdefinisi dari daftar definisi.

<HTML> <HEAD> <TITLE> Logical Format </TITLE> </HEAD> <BODY> <CITE>Sondang Sibuea </CITE> adalah penyusun buku ASP <BR> <BR> Pertama dipelajari oleh programmer C adalah <CODE>puts(Hallo teman!);</CODE> <BR> <BR> Ia berkata, <EM>Cinta </EM> adalah segalanya <BR><BR> Untuk berpindah ke direktori root, ketik <KBD>cd /</KBD>. <BR><BR> Hal yang paling penting adalah <STRONG>Percaya diri</STRONG> <BR><BR> Program tersebut dilakukan pengulangan sebanyak <VAR>N</VAR> kali. <BR><BR> <DFN>Cicak adalah hewan pemakan nyamuk</DFN> </BODY> </HTML>

Gambar II.4. Hasil Eksekusi HTML pada Browser untuk Logical Format

2. Physical Format
Pemrograman Web dengan Active Server Pages (ASP) 15

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Physical format adalah format terhadap fisik suatu font. Tag-tag yang termasuk physical format adalah sebagai berikut : Tag <B></B> <I></I> <TT></TT> <U></U> <STRIKE></STRIKE> <BIG></BIG> <SMALL></SMALL> <SUB></SUB> <SUP></SUP> Contoh :
<HTML> <HEAD> <TITLE> Physical Format </TITLE> </HEAD> <BODY> <PRE> <B> Ini adalah huruf tebal </B> <I> Ini adalah huruf miring </I> <TT> Huruf ini mirip dfengan huruf mesin ketik </TT> <U> Kalimat ini akan diberi garis bawah </U> <STRIKE> Kalimat ini diberi garis bawah pada bagian tengan </STRIKE> <BIG> Huruf ini berukuran lebbih besar </B> <SMALL> Huruf ini berukuran lebih kecil </SMALL> Ini adalah <SUB> Subscript </SUB> Ini adalah <SUP> superscript</SUP> </BODY> </HTML>

Kegunaan Untuk menampilkan huruf tebal Untuk menampilkan huruh miring Untuk menampilkan huruf seperti mesin tik Untuk menampilkan huruf dengan garis bawah Untuk menampilka garis horizontal pada bagian tengah huruf. Untuk menampilkan ukuran huruf yang lebih besar Untuk menampilkan ukuran huruf yang lebih kecil Untuk menampilkan subscript Untuk menampilkan superscript

Pemrograman Web dengan Active Server Pages (ASP)

16

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar II.5. Hasil Eksekusi HTML pada Browser untuk Physical Format

3. Tag <BLOCKQUOTE> Tag <BLOCKQUOTE> digunakan untuk menandai bagian yang dikhususkan pada sebuah dokumen, misalnya kutipan-kutipan dari kitab suci atau kata-kata mutiara, dan lain-lain. Biasanya teks yang diberi tag ini lebih menjorok ke dalam (indent). Contoh:
<HTML> <HEAD> <TITLE> Penggunaan Blockquote </TITLE> </HEAD> <BODY> <PRE> Definisi Cinta menurut Mbah Suro : <BLOCKQUOTE> Cinta adalah Sesuatu yang indah, jadi hati-hatilah dengan cinta, jangan sampai terluka atau ternoda, apabila cinta terluka atau ternoda,cinta berubah jadi neraka.(Kaciaaan de lho) </BLOCKQUOTE> </BODY> </HTML>

Gambar II.6. Hasil Eksekusi HTML pada Browser untuk penggunaan <BLOCKQUOTE>

4. Tag Font Tag <FONT> untuk mengatur jenis, ukuran dan warna Font. Penggunaan tag ini adalah sebagai berikut : <FONT [FACE="Nama Font"] [COLOR=Warna] [SIZE=Ukuran]>
Pemrograman Web dengan Active Server Pages (ASP) 17

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Nama font adalah nama font yang ter-install pada komputer. Ukuran font adalah nilai angka 1 sampai dengan 7. Warna dapat digunakan bilangan heksadesimal yang terdiri dari 6 digit dan diawali dengan karakter #. Dua digit pertama mewakili warna merah, dua digit kedua mewakili warna hijau, dua digit terakhir mewakili warna biru. Untuk mempermudah penggunaan warna maka HTML mendefinisikan 16 warna untuk warna-warna standar, yaitu; NO 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. Contoh:
<HTML> <HEAD> <TITLE> Penggunaan tag <FONT> </TITLE> </HEAD> <BODY> <PRE> <FONT FACE=Arial SIZE=1 COLOR=#FF0080> Arial </FONT> <FONT FACE=Monotype Corsiva SIZE=3 COLOR=Red>Monotype Corsiva</FONT> <FONT FACE=Times New Roman SIZE=7 COLOR=BLUE> Times New Roman </FONT> </BODY> </HTML>

WARNA Black (Hitam) Maroon (Merah Tua) Green (Hijau) Olive (Hijau Kekuningan) Navy (Biru Gelap) Purple (Ungu) Teal (Biru Kehijauan) Gray (Abu-abu) Silver (Perak) Red (merah) Lime (Hijau Terang) Yellow (Kuning) Blue (Biru) Fuchsia (Merah Keunguan)

HEXA #000000 #800000 #008000 #808000 #000080 #800080 #008080 #808080 #C0C0C0 #FF0000 #00FF00 #FFFF00 #0000FF #FF00FF

Pemrograman Web dengan Active Server Pages (ASP)

18

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar II.7. Hasil Eksekusi HTML pada Browser untuk Penggunaan Tag <FONT>

5. Karakter Khusus Kadang-kadang dalam suatu dokumen HTML ingin ditampilkan karakter-karakter tertentu, misalnya tanda lebih kecil, tanda lebih besar, tanda drajat atau tanda lainnya. HTML telah menyediakan beberapa symbol untuk menampilkan karakter-karakter tersebut, beberapa diantaranya : Simbol &cent; &pound; &yen &copy; &reg; &deg; &frac14; &frac12 ;&frac34; &divide; &pi &le; &ge; &lt; &gt; &amp; &spades; &clubs; &hearts; &diams; Karakter < > &

Daftar karakter yang lebih lengkap dapat kita lihat pada alamat : http://www.w3.org/TR/WD-entities Contoh :
<HTML> <HEAD> <TITLE> Penguunaan Karakter khusus </TITLE> </HEAD> <BODY> <PRE> Simbol mata uang Yen adalah &yen; Suhu tubuh manusia normalnya 32 &deg;C 0.50 Sama dengan &frac12 &pi; sama dengan 22/7 atau sama dengan 3.14 </BODY> </HTML>

Pemrograman Web dengan Active Server Pages (ASP)

19

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar II.8. Hasil Eksekusi HTML pada Browser untuk Penggunaan Karakter Khusus

II.2.5 Menambahkan Gambar Dalam HTML akan makin menarik apabila ditambahkan gambar-gambar ke dalamnya. Format gambar yang dapat ditampilkan ada beberapa jenis, yaitu: GIF, JPEG, PCX, PNG, WMF, namun alangkah baiknya jika format gambar yang digunakan merupakan format yang sering dikenal hampir semua browser, yaitu GIF dan JPEG. Untuk menambahkan gambar ke dalam dokumen HTML digunakan tag <IMG>. Tag <IMG> mempunyai beberapa atribut sebagai berikut : Attribut SRC ALIGN WIDTH HEIGHT ALT Keterangan Merujuk pada URL atau direktori file gambar Menentukan posisi teks disekitar gambar, nilainya adalah TOP, MIDDLE, BOTTOM, LEFT atau RIGHT Menentukan lebar dari gambar pixel Menentukan tinggi dari gambar dalam pixel Menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan. (Pada browser tertentu dapat pula ditampilkan sebagai tool tip.)

Contoh :

<HTML> <HEAD> <TITLE> Menambahkan Gambar </TITLE> </HEAD> <BODY> <IMG SRC=C:\WINDOWS\BUBBLES.BMP ALT=Gambar Gelembung> <! - - Gambar ini adalah yang terdapat pada Windows 98 secara default, Kita boleh menggantinya dengan gambar lain - - > <HR> <IMG SRC=C:\WINDOWS\BUBBLES.BMP ALT=Gambar Gelembung ALIGN=Middle> Teks ini akan terletak pada bagian tengah tinggi gambar.<HR> <IMG SRC=C:\WINDOWS\BUBBLES.BMP ALT=Gambar Gelembung ALIGN=Bottom> Teks ini akan terletak pada bagian bawah tinggi gambar.<HR> <IMG SRC=C:\WINDOWS\BUBBLES.BMP ALT=Gambar Gelembung ALIGN=Right> Gambar ini akan terletak disebelah kanan teks. </BODY> </HTML> 20 Pemrograman Web dengan Active Server Pages (ASP)

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar II.9. Hasil Eksekusi HTML pada Browser untuk menampilkan gambar

II.2.6 Membuat Link Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika link diklik, maka dokumen HTML akan menuju ke alamat tertentu. LINK berhubungan erat dengan apa yang disebut Anchor. Anchor merupakan sesuatu yang dapat digunakan untuk menandai sebuah dokumen HTML dan bagian yang ditandai tersebut dapat digunakan sebagai link atau alamat tujuan dari link. Sebuah anchor ditandai dengan tag <A>. Tag <A> mempunyai dua atribut, yaitu HREF dan NAME. Atribut HREF digunakan jika sebuah anchor akan digunakan sebagai link, sedangkan atribut NAME digunakan jika anchor akan digunakan sebagai tujuan. Contoh:
<HTML> <HEAD> <TITLE> Menggunakan Link </TITLE> </HEAD> <BODY> <A HREF=http://www.yohoo.com> Klik di sini </A> untuk menuju www.yahoo.com. <BR> Atau dapat juga mengklik gambar ini: <A HREF=http://www.yahoo.com> <IMG SRC=C:\windows\bubbles.bmp ALT=www.Yahoo.com></A> <BR> <BR> <A HREF=Tengah> Jika ini yang diklik </A> akan menuju ke bagian tengah dokumen. <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <A NAME=Tengah> ini adalah bagian tengah dokumen.</A> </BODY> </HTML>

Pemrograman Web dengan Active Server Pages (ASP)

21

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

II.2.7 Membuat Tabel Untuk menampilkan dokumen data atau yang bersumber dari database, HTML menyediakan format tampilan berupa tabel. Format tabel dapat digunakan dengan menggunakan tag <TABLE>,<TR>,<TH>,<TD>. <TABLE> <TR> <TH> <TD> Untuk mendefinisikan sebuah tabel Untuk mendefinisikan baris tabel Untuk mendefinisikan judul pada masing-masing kolom Untuk mendefinisikan isi tiap kolom

<HTML> <HEAD> <TITLE>Membuat Tabel</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TH>Kolom 1</TH> <TH>Kolom 2</TH> <TH>Kolom 3</TH> </TR> <TR> <TD>Baris 1, Kolom 1</TD> <TD>baris 1, Kolom 2</TD> <TD>baris 1, Kolom 3</TD> </TR> <TR> <TD>Baris 2, Kolom 1</TD> <TD>baris 2, kolom 2</TD> <TD>baris 2, Kolom 3</TD> </TR> </TABLE> </BODY> </HTML>

Pemrograman Web dengan Active Server Pages (ASP)

22

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar II.10. Hasil eksekusi HTML pada Browser untuk Penggunaan Tabel

Untuk membuat tampilan tabel tampak lebih menarik, maka tag <TABLE> dan <TD> memiliki beberapa atribut yang dapat digunakan untuk pemformatan. TAG <TABLE> ATRIBUT ALIGN BACKGROUND BDCOLOR BORDER BORDER COLOR BORDER COLOR LIGHT BORDER COLOR DARK CELLSPACING CELLPADING HEIGHT WIDTH VALIGN ALIGN BACKGROUND BGCOLOR BORDER BORDER COLOR BORDER COLOR LIGHT BORDER COLOR DARK COLSPAN HEIGHT NOWRAP ROWSPAN VALIGN KETERANGAN Align tabel Gambar latar belakang Warna latar belakang Tabel bingkai Warna bingkai Warna muka table Warna bayangan table Spasi antar sel Jarak isi sel dengan bingkai Tinggi table Lebar table Align vertikal teks dalam table Align horizontal teks dalam sel Gambar latar belakang sel Warna latar belakang sel Lebar bingkai sel Warna bingkai sel Warna depan bingkai sel Warna belakang bingkai sel Jumlah kolom yang digabung Tinggi sel Menahan teks dalam satu baris Jumlah baris yang digabung Align vertikan teks dalam sel

<TD>

Untuk lebih memahami penggunaan atribut-atribut tersebut, kita perhatikan contoh berikut :
<HTML> <HEAD> <TITLE>Table Alignments</TITLE> </HEAD> <BODY> <TABLE BORDER=2 ALIGN=RIGHT> <TR> Pemrograman Web dengan Active Server Pages (ASP) 23

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

<TH></TH> <TH>MEDALI EMAS</TH> <TH>MEDALI PERAK</TH> <TH>MEDALI PERUNGGU</TH> </TR> <TR ALIGN=RIGHT> <TH>INDONESIA</TH> <TD BGCOLOR=#F7EFDE>XX<BR>XX</TD> <TD BGCOLOR=#F7EFDE ALIGN=CENTER>X</TD> <TD BGCOLOR=#F7EFDE>XXX</TD> </TR> <TR VALIGN=BASELINE> <TH ALIGN=LEFT>MALAYSIA</TH> <TD BGCOLOR=#FFFF00>XXX<BR>XXX</TD> <TD BGCOLOR=#FFFF00>XXX</TD> <TD BGCOLOR=#FFFF00>XXX<BR>XXXXX<BR>XXX</TD> </TR> <TR ALIGN=LEFT> <TH>SINGAPURA </TH> <TD BGCOLOR=#00FFFF VALIGN=BOTTOM>XXXXX</TD> <TD BGCOLOR=#00FFFF VALIGN=TOP>XX<BR>XXXXX</TD> <TD BGCOLOR=#00FFFF VALIGN=MIDDLE>XXXXX</TD> </TR> </TABLE> </BODY> </HTML>

II.2.8 Form Form merupakan komponen HTML yang sangat penting dalam pemrograman ASP. Karena form merupakan komponen yang digunakan untuk mengambil input dari user untuk diolah lebih lanjut dalam program. Contoh penggunaan form pada umumnya adalah untuk membuat form buku tamu, formulir pendaftaran, dll. Dalam form buku tamu atau formulir pendaftaran user dapat memasukkan data-data yang dibutuhkan untuk dimasukkan dalam database situs. Untuk membuat form digunakan tag sebagai berikut:
<FORM METHOD="POST GET" ACTION="URL"> {[Komponen form] </FORM>

Komponen form pada sintaks di atas antara lain: a. Input Box Pada komponen ini terdapat beberapa tipe input, yaitu tipe teks dan tipe password. Dengan Input Box dengan tipe teks user dapat memasukkan string dalam satu baris seperti Nama, Alamat, dll. Sedangkan tipe password untuk memasukkan teks password,
Pemrograman Web dengan Active Server Pages (ASP) 24

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

dimana pada Input Box ini teks yang diketikkan dapat disembunyikan dengan menampakkan karakter * saja. Selain stribut tipe, Input Box juga mempunyai atribut lain antara lain. TAG <FORM> ATRIBUT Type Name Value Size Maxlength KETERANGAN Type Input Box Nama Input Box Nilai yang dikandung Ukuran panjang Jumlah maksimum karakter

<HTML> <HEAD> <TITLE>Gambar</TITLE> </HEAD> <BODY> <FORM> Nama : <INPUT TYPE="Text" NAME="varNama" VALUE="Juan Carlos" SIZE="15"> <BR> Alamat : <INPUT TYPE="Text" NAME="varAlamat" SIZE="30"> <BR> password : <INPUT TYPE="Password" NAME="VarKota" SIZE='10'> </FORM> </BODY> </HTML>

b. Radio Button Radio button adalah komponen atau control yang digunakan untuk mengambil input dari user dalam bentuk pilihan. Untuk membuat radio button dilakukan dengan merubah type input menjadi "Radio". Tambahkan script di bawah ini pada contoh di atas.
<BR> Jenis Kelamin : <INPUT CHECKED TYPE="Radio" NAME="varJKelamin" value="Pria"> Pria <INPUT TYPE="Radio" NAME="varJKelamin" value="wanita"> Wanita

Pada baris ketiga contoh di atas terdapat atribut CHECKED. Atribut ini menandakan bahwa radio button untuk jenis kelamin "Pria" menjadi default pilihan. Pada komponen radio button pengguna hanya dapat memilih salah satu pilihan radio button saja dalam satu form.
Pemrograman Web dengan Active Server Pages (ASP) 25

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

c. Check Box Jika pada radio button user hanya bisa memilih satu pilihan dari beberapa pilihan, maka pada Check Box user bisa memilih lebih dari satu pilihan. Contoh penggunaan check box pada umumnya adalah untuk memasukkan data hobi user.
Hobby : <INPUT CHECKED TYPE="CheckedBox" NAME="varHobby" value="Olahraga">Olahraga <INPUT TYPE="CheckBox" NAME="varHobby" Value="Membaca".membaca <INPUT TYPE = "CheckBox" NAME = "varHobby" value = " jalan-jalan"> jalan-Jalan

Untuk mencoba tambahkan kode di atas pada File latihan Form. II.2.9 Frame Tag Frame, yaitu <FRAMESET> </FRAMESET>, merupakan tag HTML yang paling unik dibandingkan dengan tag HTML lainnya. Tag-tag lain biasanya diletakkan diantara tag <BODY>..</BODY>, tetapi tag <FRAMESET> tidak dapat diletakkan di dalam <BODY></BODY>. Tag <FRAMESET> mempunyai tingkat yang sama dengan tag <BODY>. Jadi jika kita menggunakan tag <FRAMESET> dalam suatu dokumen HTML, maka kita tidak boleh menggunakan tag <BODY> dalam dokumen tersebut, begitu juga berlaku untuk hal sebaliknya. Secara umum, penggunaan <FRAMESET> adalah sbb:
<HTML> <HEAD></HEAD> <FRAMESET> <! Elemen-elemen frame dan HTML lainnya> </FRAMESET> </HTML>

Dapat kita lihat bahwa dalam struktur Program HTML tersebut, kita tidak melihat tag <BODY> di dalamnya. Pada prinsipnya, kita tidak boleh menyatakan kedua tag tersebut secara bersamaan dalam suatu dokumen HTML. Frame Baris dan Frame Kolom <FRAMESET> mempunyai dua buah atribut, yaitu ROWS dan COLS. Atribut-atribut ini berfungsi untuk mendefinisikan bentuk dari frame tersebut, yaitu frame baris atau frame kolom. Frame baris adalah frame-frame yang membagi jendela browser ke dalam beberapa baris, sedangkan frame kolom membagi jendela browser dalam kolom-kolom. Atribut ROWS dan COLS menerima nilai numeric dalam satuan pixel, persen atau campuran dari pixel dan persen.
<FRAMESET ROWS=pixel,persen COLS=pixel,persen>

Pemrograman Web dengan Active Server Pages (ASP)

26

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Contoh berikut ini akan menghasilkan dua buah frame baris dengan ukuran masingmasing 20% dan 60%. Pertama kita buat dua buah file htm dengan nama satu.htm dan dua.htm yang isinya seperti dibawah ini. Kemudian buat lagi file Frame.htm yang isinya juga seperti dibawah ini.
Satu.htm dua.htm Frame.htm

<html> <head> <title>Frame 1 </title> </head> <body> <font size=7> Ini frame ke 1 <br> Lihat perbedaannya </font> </body> </html>

<html> <head> <title>Frame 2 </title> </head> <body> <font size=7> Ini frame ke 2 Lihat beda lebar baris </font> </body> </html>

<html> <head> <title> Menggunakan Frame </title> </head> <frameset rows="20%,60%"> <frame src="satu.htm" Name=frasatu scrolling=yes> <frame src="dua.htm" Name=fradua> </frameset> </html>

Gambar Eksekusi HTML pada Browser untuk Frame Set

II.11. Hasil

BAB III
LEBIH JAUH MENGENAL ASP

III.1 Pendahuluan Ke depan semua aplikasi akan mengarah ke Web Services. Oleh karena itu salah satu komponen web Services antara lain ASP. Tanpa mengerti ASP sangat sulit untuk
Pemrograman Web dengan Active Server Pages (ASP) 27

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

mengetahui mengenai berbagai hal yang berhubungan dengan pembuatan Web Services tersebut. Untuk memahami ASP kita harus mengerti teknik penulisan, variabel dan struktur pemrogramannya. Setelah semua kita pahami baru kita merancang program ASP untuk Web. III.2 Struktur Program pada ASP Struktur program pada ASP tidak jauh berbeda dengan pemrograman pada umumnya, bahkan tidak terlalu jauh berbeda dengan bahasa pemrograman Visual Basic. III.3 Penulisan Script ASP Penulisan Script ASP dapat diletakkan pada halaman web dengan dua cara : Cara 1:
<SCRIPT Langguage=VBScript RunAT=Server> .. script ASP .. </SCRIPT>

Cara 2:
<% .. script ASP .. %>

III.4 Variabel pada ASP Pada dasarnya hanya ada satu jenis variabel dalam ASP, yaitu variant. Hanya saja untuk memudahkan dalam pengolahan, variabel pada ASP dapat dibedakan menjadi 5 yaitu : - Obyek - String - Numeric
Pemrograman Web dengan Active Server Pages (ASP) 28

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Date & time Boolean

Variabel obyek dibuat ketika kita ingin memprogram menggunakan obyek khusus seperti obyek Scripting, File System Object, obyek CDONTS NewMail, dan lain-lain. Variabel string adalah variabel yang berisi teks, sedangkan variabel numeric adalah variabel yang berisi bilangan, baik bilangan bulat maupun bilangan pecahan. Variabel date time berisi informasi tanggal dan waktu, sedangkan variabel berjenis boolean berisi nilai logika True atau False. III.5 Pendeklarasian Variabel Pendeklarasian variabel pada ASP bersifat opsional, yaitu boleh dilakukan boleh juga tidak. Pendeklarasian tersebut biasanya digunakan untuk mempermudah pemeliharaan variabel-variabel dalam aplikasi. Pendeklarasian variabel dapat dibuat mutlak, yaitu harus dideklarasikan dengan cara menambahkan statement <%Option Explicit%> di bagian atas program, sebelum menuliskan perintah-perintah ASP lainnya.
<% Dim lGaji Dim sPesan Dim oConn, oRs %>

III.6 Penulisan Keterangan (Remark) Penulisan keterangan pada program dilakukan dengan terlebih dahulu menuliskan tan . III.7 Penggunaan operator & dan + Operator & digunakan untuk menyambung string, sedangkan operator + digunakan untuk menambahkan bilangan. Perhatikan perbedaannya pada contoh berikut :
<% A=100 B=50 C=A & B D=A + B %> C=10050 D=150

III.8 Struktur Percabangan III.8.1 Percabangan dengan If - Then - Else Contoh penulisan struktur percabangan If Then Else sebagai berikut :
Pemrograman Web dengan Active Server Pages (ASP) 29

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

<% Umur = 3 If Umur <=5 Then Response.Write Masih Balita Else Response.Write Bukan Balita End If %>

Akan mencetak : Masih balita, sebab variabel Umur bernilai 3, yaitu lebih kecil dari 5. III.8.2 Percabangan dengan Select Case End Select
<% Nilai =B Select Case Nilai Case A Response.Write Case B Response.Write Case C Response.Write Case D Response.Write End Select %>

Baik Sekali Baik Cukup Buruk

Akan mencetak : Baik, sebab variabel Nilai bernilai B. III.9 Struktur Pengulangan III.9.1 Pengulangan dengan For Next
<% Dim I For I = 1 to 5 Response.Write I & <BR> Next %>

Akan mencetak : 1 2 3 4 5 Dengan <BR> adalah perintah HTML untuk berganti baris. III.9.2 Pengulangan For Each Next
Pemrograman Web dengan Active Server Pages (ASP) 30

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Serupa dengan struktur pengulangan For Next, hanya saja For Each Next digunakan untuk mengambil elemen dari suatu array atau obyek. Contoh : <%
Dim A(3) A(1) = Selamat A(2) = Belajar A(3) = ASP 3.0 For Each Item In A Response.Write Item Next %>

Akan menghasilkan:
Selamat Belajar ASP 3.0

III.9.3 Pengulangan dengan Do Loop Struktur pengulangan Do Loop adalah struktur pengulangan yang menggunakan kondisi sebagai syarat pengulangannya. Contoh :
<% I = 1 Do Response.Write I & <BR> I = I + 1 Loop Until I = 6 %>

Akan menghasilkan : 1 2 3 4 5 III.10 Prosedur Prosedur merupakan potongan program yang melakukan tugas tertentu untuk memudahkan pengidentifikasian dan penelusuran alur program. Ada dua jenis prosedur yang digunakan dalam VBScript, yaitu subrutin (subroutine) dan fungsi (function).

Pemrograman Web dengan Active Server Pages (ASP)

31

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

III.10.1 Subrutin Subrutin digunakan untuk mendefinisikan sejumlah pekerjaan yang perlu dilakukan dalam program. Dengan demikian bila subrutin ini dipanggil, ia akan melaksanakan pekerjaan yang didefinisikan tersebut. Cara pembuatan dan pemanggilan subrutin adalah sebagai berikut : <% Sub nama_subrutin() End Sub %> Untuk memanggil subrutin ini agar mengerjakan tugasnya yaitu dengan perintah: <% nama_subrutin() %> Contoh : Procedure
Sub konversi() F=InputBox(Masukkan suhu dalam Fahrenheit,1) C=(F-32)*5/9 MsgBox Suhu ini sama dengan & C & Celcius Ensub

Perintah untuk memanggil prosedur :


Response.write(<h1>Panggil subrutin !</h1>) Konversi()

III.10.2 Fungsi Berbeda dengan subrutin yang diberi tugas hanya untuk mengerjakan suatu pekerjaan, fungsi diberi tugas untuk mengerjakan suatu pekerjaan dan memberikan hasilnya. Jadi fungsi adalah sejenis sub yang mengembalikan suatu nilai. Cara pembuatan dan pemanggilan fungsi adalah sebagai berikut: <% Function nama_fungsi()
Pemrograman Web dengan Active Server Pages (ASP) 32

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

.. .. .. End Function %> Untuk memanggil Fungsi : <% nama_fungsi() %> Contoh : Function
<% Sub TulisJudul Response.Write <H3>Menghitung Luas Lingkaran</H3> End Sub Function LuasLingkaran(Jari2) LuasLingkaran = 3.14 * Jari2 * Jari2 End Function Dim R R = 5 TulisJudul Response.Write <BR>Jari-Jari: & R Response.Write <BR>Luas Lingkaran : & LuasLingkaran(R) %>

Untuk memperindah penulisan statement yang terlalu panjang dan agar mudah dibaca, penulisannya dapat kita sambung menggunakan tanda <spasi>_. Contoh :
If Umur > 18 And Pekerjaan <> And Status <> Menikah Then End If

Dapat dituliskan menjadi :


If Umur > 18 And _ Pekerjaan <> And _ Status <> Menikah Then End if

Pemrograman Web dengan Active Server Pages (ASP)

33

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

III.11 ARRAY Array merupakan sekumpulan data yang berhubungan. Hubungan antara data ini dapat dinyatakan dengan indeks. Ada beberapa jenis array, antara lain: III.11.1 Array Satu Dimensi Berikut ini akan kita bahas array satu dimensi : Sebagai contoh, kita memiliki sejumlah nama peserta program profesional, yaitu : Purwoyanto, Muhardani, Junita, Sri Utami, Haryono. Kita dapat menyimpan kelima data ini ke dalam suatu variabel array. Variabel array ini akan memiliki lima anggota, yang diakses berdasarkan indeks, yaitu : Anggota ke-1 : Purwoyanto Anggota ke-2 : Muhardani Anggota ke-3 : Junita Anggota ke-4 : Sri Utami Anggota ke-5 : Haryono Untuk mendeklarasikan sebuah variabel array, kita harus sudah menentukan berapa jumlah anggotanya. Misalkan lima data di atas ingin kita simpan dalam variabel array nama_peserta, maka kita akan mendeklarasikannya seperti berikut : Dim nama_peserta(5) Angka lima menunjukkan jumlah anggota dari variabel array nama_peserta. Untuk mendefinisikan anggota-anggota variable ini kita menggunakan perintah : Nama_peserta(0) = Purwoyanto Nama_peserta(1) = Muhardani Nama_peserta(2) = Junita Nama_peserta(3) = Sri Utami Nama_peserta(4) = Haryono

Pemrograman Web dengan Active Server Pages (ASP)

34

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Kita sudah melihat bahwa anggota-anggota variabel array akan dilaksanakan dengan menggunakan indeks berupa bilangan bulat (integer). Bilangan bulat ini selalu dimulai dari nol. Contoh :
<html> <head> <title>Array</title> </head> <body> <% Dim nama_peserta(5) Nama_peserta(0) = Purwoyanto Nama_peserta(1) = Muhardani Nama_peserta(2) = Junita Nama_peserta(3) = Sri Utami Nama_peserta(4) = Haryono Response.write(<h1>Daftar Peserta</h1>) Response.write(nama_peserta(0) & <br>) Response.write(nama_peserta(1) & <br>) Response.write(nama_peserta(2) & <br>) Response.write(nama_peserta(3) & <br>) Response.write(nama_peserta(4) & <br>) %> </body> </html>

III.11.2 Array Multi Dimensi Jika kita ingin membuat array dengan multi dimensi, kita harus mendeklarasikannya sebagai berikut : Dim array(n,m) Dengan n menyatakan pangjang baris dan m menyatakan panjang kolom. Sebagai contoh, bila kita ingin melengkapi data nama_peserta dengan jurusan_peserta, kita bisa menggunakan array multi dimensi sebagai berikut : Dim nama_peserta(5,2) Nama_peserta(0,0) =Purwoyanto Nama_peserta(0,1) =Manajemen Informatika Nama_peserta(1,0) =Muhardani Nama_peserta(1,1) =Akuntansi Komputer Nama_peserta(2,0) =Junita Nama_peserta(2,1) =Sekretaris & PR Nama_peserta(3,0) =Sri Utami Nama_peserta(3,1) =Perhotelan
Pemrograman Web dengan Active Server Pages (ASP) 35

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Nama_peserta(4,0) =Haryono Nama_peserta(4,1) =Bahasa Inggris Berikut ini gambaran array multi dimensi : No. 0 1 2 3 4 0 Purwoyanto Muhardani Junita Sri Utami Haryono 1 Manajemen Informatika Akuntansi Komputer Sekretaris & PR Perhotelan Bahasa Inggris

Nama peserta III.11.3 Array Dinamis

Jurusan peserta

Jika pada array tadi kita harus menyatakan dahulu jumlah anggota array-nya, maka pada array dinamis kita tidak perlu melakukannya, kita cukup melakukan : Dim array(n) Kemudian untuk menggunakan array tersebut, kita mendefinisikan kembali jumlah anggotanya dengan perintah : Redim array(n) Contoh : Dim nama_peserta() Redim nama_peserta(5) Nama_peserta(0) =Purwoyanto Nama_peserta(1) =Muhardani Nama_peserta(2) =Junita Nama_peserta(3) =Sri Utami Nama_peserta(4) =Haryono

Pemrograman Web dengan Active Server Pages (ASP)

36

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

BAB IV
MENGHUBUNGKAN ASP DENGAN DATABASE
Agar database yang kita buat dapat digunakan di web dan agar database mudah diterapkan ASP di server Internet, bukan hanya diserver local, maka database harus di hubungkan dengan ASP. Ada 2 cara yang sering digunakan dalam menghubungkan database dengan ASP, yaitu : 1. Menghubungkan ASP dengan database; dengan catatatan harus disetting ODBC (Open Database Conectivity). 2. Menghubungkan ASP dengan database; dengan catatan tanpa setting ODBC, atau tanpa menggunakan DSN (Data source name) IV.1 Menghubungkan Database dengan ASP dengan disetting ODBC Apabila database yang akan kita gunakan akan dihubungkan dengan ASP, maka database tersebut harus disetting pada ODBC. Contoh String koneksi database dengan ASP dengan disetting ODBC:

Pemrograman Web dengan Active Server Pages (ASP)

37

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Misalkan kita mempunyai database dengan nama pustaka.mdb yang dibuat dengan Microsoft Access. Salah satu tabel dari perpustakaan tersebut adalah tabel anggota dengan struktur file sbb: Field Name ID ID_ANGGOTA NAMA ALAMAT TELPON E_MAIL Data Type Autonumber Text Text Text Text Text

Maka sebelum database tersebut kita gunakan harus disetting terlebih dahulu pada ODBC. Langkah-langkah setting file database pada ODBC adalah sbb: 1. Aktifkan Control Panel, kemudian pilih Data Sources (ODBC). 2. Akan muncul tampilan seperti Gambar IV.1., lalu tekan ADD.

Gambar IV.1. Tampilan ODBC Data Source Administrator

Pemrograman Web dengan Active Server Pages (ASP)

38

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

3. Akan muncul dialog Create New Data Source, kemudian pilihlah database yang telah dibuat. Dalam hal ini pilih Microsoft Acces, kemudian tekan Finish.

Gambar IV.2. Tampilan ODBC setelah dipilih ADD

4. Sekarang definisikan database kita, dan perhatikan gambar berikut : 5. Isi Data Source Name dengan nama DSN yang akan dibuat, contoh Perpustakaan. 6. Pada Discription bisa dituliskan deskripsi atau keterangan tentang database.

Gambar IV.3. Tampilan ODBC untuk mengisi Data Source Name (DNS) Pemrograman Web dengan Active Server Pages (ASP) 39

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

7. Tekan tombol Select dan pilih database yang akan dijadikan ODBC. 8. Tekan OK untuk mengakhiri semuanya. Dengan demikian database sudah siap untuk digunakan.

Gambar IV.4. Tampilan Pemilahan Database (Select Dabase)

Sampai di sini, database kita sudah berhasil di setting dan siap untuk digunakan. Misalkan kita sudah memasukkan data anggota 5 record, maka string yang digunakan untuk menampilkan data tabel anggota adalah sbb:
<html> <body> <% dim con,rs

set con=Server.CreateObject("ADODB.Connection") con.open "pustaka" set rs = Server.CreateObject("ADODB.recordset") rs.Open "Select * from Anggota",con

Perintah Koneksi Database (harus di setting ODBC)

while not rs.eof Response.Write rs(0) & ", " Response.Write rs(1) & ", " Response.Write rs(2) & ", " Response.Write rs(3) & ", " Response.Write rs(4) & "<br>" rs.MoveNext Wend

Loop untuk menampilkan data

Pemrograman Web dengan Active Server Pages (ASP)

40

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

rs.close con.close %> </body> </html>

IV. 2 Menghubungkan Database dengan ASP tanpa Setting ODBC Koneksi data tanpa DSN adalah alternatif lain atau teknik pemanfaatan database langsung menggunakan driver dari masing-masing provider untuk menghubungkan ASP dengan database. Kita tidak perlu lagi mengatur sistem DSN di menu ODBC pada control panel untuk menjembatani koneksi ASP dengan database, karena penggunaan ODBC akan menyulitkan pengguna yang ingin memanfaatkan web server gratis berbasis ASP. Pemanfaatan ODBC mengharuskan adanya campur tangan pemilik web server untuk memungkinkan hal tersebut. Namun kelihatannya pelayanan tersebut tidak dapat ditemukan di semua web server gratis. Contoh String koneksi database dengan ASP : Misalkan kita mempunyai database dengan nama perpustakaan.mdb. Salah satu tabel dari perpustakaan tersebut adalah tabel anggota dengan struktur file sbb: Field Name Data Type

ID Autonumber ID_ANGGOTA Text NAMA Text ALAMAT Text TELPON Text E_MAIL Text Berikut ini perintah untuk koneksi database dengan ASP dan untuk menampilkan data anggota adalah sbb:
<html> <body> <% dim rs,conn set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open(Server.Mappath("pustaka.mdb")) set rs = Server.CreateObject("ADODB.recordset") rs.Open "Select * from Anggota", conn

Perintah Koneksi Database (tanpa di setting ODBC)

while not rs.eof Response.Write rs(0) & ", " Response.Write rs(1) & ", " Response.Write rs(2) & ", " Pemrograman Web dengan Active Server Pages (ASP)

Loop untuk menampilkan data 41

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Response.Write rs(3) & ", " Response.Write rs(4) & "<br>" rs.MoveNext Wend rs.close conn.close %> </body> </html>

Perintah tersebut di atas dapat langsung digunakan dengan menyebutkan nama provider dari database tersebut tanpa database disetting pada ODBC.

BAB V
APLIKASI WEB DENGAN ASP DAN DATABASE
Pada bab ini kita akan mencoba menerapkan konsep menghubungkan database dengan ASP tanpa setting ODBC atau istilah lain tanpa DSN melalui pembuatan aplikasi web pendaftaran siswa. Aplikasi ini akan terkoneksi ke dalam database untuk menyimpan database pendaftar yang mendaftar melalui internet setiap hari. Secara keseluruhan isi dari aplikasi web tersebut dapat ditampilkan melalui menu-menu yang telah dibuat. Untuk mempersiapkan pembuatan aplikasi ini, kita cukup membuat direktori baru di bawah direktori Inetpub\wwwroot\ dengan nama bebas, misalnya Proyek_2. Selanjutnya semua script yang kita buat akan diletakkan di dalam direktori tersebut.
Pemrograman Web dengan Active Server Pages (ASP) 42

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

V.1 Pembuatan Database Database yang digunakan dalam aplikasi ini adalah Microsoft Acces. Dalam database tersebut kita dapat membuat tabel untuk penyimpanan data siswa. Buatlah database dengan nama daftar.mdb. Selanjutnya buatlah tabel dengan nama peserta, yang tersusun seperti struktur berikut ini : Field Nodaf Nama Tgl_lhr Tem_lhr Pendidikan Alamat1 Alamat2 Alamat3 No_tlp Hp Email Jenkel Jurusan Pwd Type Autonumber Text Date/Time Text Text Text Text Text Text Text Text Text Text Text Keterangan Nomor Urut Pendaftar Nama Pendaftar Tanggal Lahir Pendaftar Tempat Lahir Pendaftar Pendidikan Akhir Pendaftar Alamat Pendaftar Alamat Pendaftar Alamat Pendaftar Nomor Telepon Pendaftar Nomor Handphone Pendaftar Alamat Email Pendaftar Jenis Kelamin Pendaftar Jurusan yang dipilih Password Pendaftar

V.2 Perancangan Aplikasi Seperti halnya aplikasi pemrograman Personal Computer (PC), aplikasi berbasis web juga terdiri atas beberapa program yang menunjang satu sama lain. Kesemuanya akan menjadi satu dan terhubung oleh link yang berfungsi sebagai menu. Untuk melihat gambaran secara keseluruhan dari program yang akan dirancang dapat digambarkan seperti bagan berikut ini:

Struktur Program Web


Pendaftaran Peserta

Home.htm

Pemrograman Web dengan Active Server Pages (ASP)

Profile.htm

43

Biaya.thm

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Kiri.htm

Visi.htm

Judul.htm

Kurikulum.htm

INDEX.HTM

E-mail.htm

Fasilitas.htm

Menu.htm

Alamat.htm

Program.htm

Syarat.htm

Daftar.asp

Tdaftar.asp

Program web ini terdiri 16 Program. Program ini terhubung antara satu program dengan program yang lainnya. Untuk lebih jelasnya akan dibahas satu per satu isi dari program web ini. 1. Index.htm Program ini adalah program utama dari keseluruhan dari web ini. (Lihat gambar V.1.)
Pemrograman Web dengan Active Server Pages (ASP) 44

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

<! -------------------------------------------------------------> <! - Program Utama Website -> <! - Nama Program : Index.HTM -> <! - Programmer : Ir. Sondang Sibuea M.Kom -> <! - Tanggal Pembuatan : 6 Desember 2003 -> <! -------------------------------------------------------------> <HTML> <FRAMESET COLS="20%,80%" Frameborder=0 Framespacing=0> <FRAME NAME="KIRI" SRC="Kiri.htm"> <FRAMESET ROWS="24%,10%,*,18%" Frameborder=0 Framespacing=0> <FRAMESET COLS="85%,*" Frameborder=0 Framespacing=0> <FRAME NAME="Judul" SRC="Judul.htm" Scrolling=No> <FRAME NAME="Logo" SRC="E-mail.htm" Scrolling=No> </FRAMESET> <FRAME NAME="Menu" SRC="Menu.htm" Scrolling=No> <FRAME NAME="Main" src="Home.htm" scrolling=auto> <FRAME NAME="Bottom" SRC="Alamat.htm" Scrolling=No> </FRAMESET> </FRAMESET> </HTML>

2. Kiri.htm Program ini untuk menampilkan informasi semua dari isi web yang ada di sebelah kiri dari tampilan program ini. (Lihat Gambar V.1.)
<! -------------------------------------------------------------> <! - Program Website -> <! - Nama Program : Kiri.HTM -> <! - Programmer : Ir. Sondang Sibuea M.Kom -> <! - Tanggal Pembuatan : 6 Desember 2003 -> <! -------------------------------------------------------------> <Html> <Head></Head> <Title></Title> <Body background="Images/mac4.gif" bgproperties=fixed> <frameset cols="25%"> <br><br><br> <img src="Images/Mtd-rearclr.gif" border=1 BgColor=honeydrew BorderColor=honeydrew Width=65% height=75> <br><br> <Font Face="Arial" Size=2> <a href="Home.htm" target="Main">Home </a><br> <a href="Profile.htm" target="Main">Profile<br> <a href="Visi.htm" target="Main">Visi Misi<br> <a href="Kurikulum.htm" target="Main">Kurikulum<br> <a href="Fasilitas.htm" target="Main">Fasilitas<br> <a href="Biaya.htm" target="Main">Biaya<br> <a href="Program.htm" target="Main">Jurusan<br> <a href="Syarat.htm" target="Main">Syarat<br> <a href="Daftar.asp" target="Main">Daftar</a><br> <br><br> <img src="Images/Mot-sinchan.gif" border=1 BgColor=honeydrew BorderColor=honeydrew Width=65%> </frameset> </font> Pemrograman Web dengan Active Server Pages (ASP) 45

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

</Body> </Html>

3. Judul.htm Program ini untuk menampilkan judul dari program web ini. (Lihat Gambar V.1.)
<Html> <Head></Head> <Title></Title> <Body background="Images/mac4.gif" bgproperties=fixed> <Table Cellspacing=2 Cellpading=3 align=center> <TR> <TD><img src="Images/logoputar.gif" alt="Logo" align=absmiddle width=75%></img></TD> <TD Align=center><Font Face="Century Gothic" Color=Navy Size=5><B>PROGRAM PROFESIONAL 1 TAHUN<br>LBPP-LIA</font></b></TD> </TR> </Table> </Body> </Html>

4. E-mail.htm Program ini untuk memberikan fasilitas untuk mengirim atau menerima e-mail. (Lihat Gambar V.1.)
<Html> <Head></Head> <Title></Title> <Body background="Images/mac4.GIF" bgproperties=fixed> <TR> <TD Align=Center><A Href="mailto:"sondsib@yahoo.com"><br><br> <img src="Images/E-mail.gif" alt=" Send E-mail " align=absmiddle border=0 width=60%></A></TD> </TR> </body> </Html>

5. Menu.htm Program ini berisi menu pilihan untuk semua isi dari program web ini. (Lihat Gambar V.1.)
<Html> <Head></Head> <Title></Title> <Body background="Images/mac4.GIF" bgproperties=fixed> <Table Border=1 Width=90% Align=Center Cellpadding=2 Cellspacing=0> <TR> <TD Align=Center BgColor=honeydrew BorderColor=honeydrew Width=3%><Font Face="Arial" Size=2><Color=lime><A Href="Home.htm" Target="Main">Home</A></Font></TD> <TD Align=Center BgColor=Fuchsia Width=3%><Font Face="Arial" Size=2><Color=lime><A Href="Visi.htm" Target="Main">Visi Misi</A></Font></TD> <TD Align=Center BgColor=Teal Width=3%><Font Face="Arial" Size=2><Color=lime><A Href="Profile.htm" Target="Main">Profile</A></Font></TD> <TD Align=Center BgColor=aqua BorderColor=aqua Width=3%><Font Face="Arial" Size=2><Color=lime><A Href="Kurikulum.htm" Target="Main">Kurikulum</A></Font></TD> 46 Pemrograman Web dengan Active Server Pages (ASP)

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

<TD Align=Center BgColor=moccasin BorderColor=moccasin Width=3%><Font Size=2><Color=orchid><a Href="Program.htm" Target="Main">Jurusan</A></Font></TD> <TD Align=Center BgColor=deepskyblue BorderColor=deepskyblue Width=3%><Font Size=2><Color=orchid><a Href="Fasilitas.htm" Target="Main">Fasilitas</A></Font></TD> <TD Align=Center BgColor=yellow BorderColor=yellow Width=3%><Font Size=2><Color=orchid><a Href="Syarat.htm" Target="Main">Syarat</A></Font></TD> <TD Align=Center BgColor=coral BorderColor=coral Width=3%><Font Size=2><Color=orchid><a Href="Biaya.htm" Target="Main">Biaya</A></Font></TD> <TD Align=Center BgColor=aqua BorderColor=aqua Width=3%><Font Size=2><Color=orchid><a Href="Daftar.asp" Target="Main">daftar</A></Font></TD> </TR> </Table> </Table> </Body> </Html>

Face="Arial" Face="Arial" Face="Arial" Face="Arial" Face="Arial"

6. Home.htm Program ini berguna untuk kembali ke posisi awal setelah menjelajahi pilihan-pilihan lain. (Lihat Gambar V.1.)
<html> <head> </head> <title></title> <body background="Images/mac4.GIF" bgproperties=fixed> <marquee direction=Right><font face="Monotype Corsiva" size=5 color=#320fa7>Selamat<font size=5 color=#320fa7> Datang<font size=5 color=#320fa7> di Website<font size=5 color=red> LBPP-LIA<font face=comic sans ms size=5 color=Violet><img src="Images/mtubirdtran.gif" border=0 width=90></marquee> <center> </center> <br> <p align=center><font face="Century Gothic" color=#800080 size=2>Silahkan Anda membuka Website ini<br>untuk mendapatkan informasi tentang Pendidikan Profesional<br>Apabila kurang jelas anda dapat menghubungi bagian informasi LBPP-LIA.<br>atau anda dapat mengirim e-mail ke sondsib@yahoo.com</font><br><font face="Century Gothic" color=#CC66FF size=2><br>[ <a href="mailto:sondsib@yahoo.com"><img src="Images/Send.gif" alt="e-mail" border=0 width=30 height=30 align=absmiddle> EMail</a> ]</font></p> </body> </html>

7. Alamat.htm Program ini berisi alamat kampus. (Lihat Gambar V.1.)


<Html> <Head></Head> <Title></Title> <Body background="Images/mac4.GIF" bgproperties=fixed> <center><B><Font Face="Arial Narrow" Size=3 Color=seagreen>KAMPUS JL. PENGADEGAN TIMUR RAYA NO.3</font><br><Font Face="Arial Narrow" Size=3 Color=royalblue>JAKARTA-SELATAN 12770<br>TELP:7943526 FAX:7948702</font></B></center> </Body> </Html> 47 Pemrograman Web dengan Active Server Pages (ASP)

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Index.htm Judul.htm Email.htm Menu.htm

Isi dari program kiri.htm

Alamat.ht m Gambar V.1. Tampilan Utama Program WEB

8. Profile.htm Program ini berisi profile LBPP-LIA. (Lihat Gambar V.2.)


<Html> <Head></Head> <Title>:: Profile::</Title> <Body Background="Images/mac4.GIF"> <Font Face="Arial" Size=2> <B>Profile:</B> <p> Sesuai dengan Visinya, yaitu : "Menjadi Suatu Lembaga pendidikan non formal terkemuka yang menyediakan Program Bahasa dan Pendidikan Profesional yang bermutu" <br><br> Sampai saat ini LBPP LIA sudah membuka beberapa jenis program pendidikan antara lain :<br><br> 1. Bahasa Inggris<br> General English<br> Kelas untuk SD<br> Kelas untuk SLTP<br> Kelas untuk umum<br><br> English for Special Programs<br> English For Specific Purposes<br> Customized Programs<br><br> 2. Pendidikan Profesional<br> Program Profesional 1 tahun<br> Program Profesional singkat<br> </p> Pemrograman Web dengan Active Server Pages (ASP)

48

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

</Font> </Body> </Html>

Gambar V.2. Tampilan Profile LBPP-LIA

9. Visi.htm Program ini berisi visi dan misi LBPP-LIA. (Lihat Gambar V.3.)
<Html> <Head></Head> <Title>:: VisiMisi::</Title> <Body Background="Images/mac4.GIF"> <Font Face="Arial" Size=2> <B>Visi dan Misi:</B> <p> <b>Visi<b><br> Menjadi Suatu Lembaga pendidikan non formal terkemuka yang menyediakan Program Bahasa dan Pendidikan Profesional yang bermutu <br><br> <b>Misi<b><br> 1. Meningkatkan kualitas sumber daya manusia melalui berbagai Program Bahasa dan Pendidikan Profesional yang bermutu<br><br> 2. Melakukan kerja sama dengan berbagai pihak untuk meningkatkan kualitas sumber daya manusia dan mutu pelayanan LBPP.<br><br> 3. Menyediakan sarana dan menciptakan lingkungan yang mendukung kegiatan belajar mengajar<br> </p> </Font> Pemrograman Web dengan Active Server Pages (ASP) 49

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

</Body> </Html>

Gambar V.3. Tampilan Visi dan Misi Pendidikan

10. Kurikulum.htm Program ini berisi kurikulum pendidikan profesional satu tahun LBPP-LIA. (Lihat Gambar V.4.)
<Html> <Head></Head> <Title>:: KURIKULUM ::</Title> <Body Background="Images/mac4.GIF" bgproperties=fixed> <Table Width=1300 Cellpadding=5 Border=1> <TR> <TD Colspan=2 Width=400 Align=center><Font Face="Century Gothic" Size=2>Manajemen Informatika</Font></TD> <TD Colspan=2 Width=400 Align=center><Font Face="Century Gothic" Size=2>Akuntuntansi Komputer</Font></TD> <TD Colspan=2 Width=400 Align=center><Font Face="Century Gothic" Size=2>Sekretaris & PR</Font></TD> <TD Colspan=2 Width=400 Align=center><Font Face="Century Gothic" Size=2>Perhotelan</Font></TD> <TD Colspan=2 Width=400 Align=center><Font Face="Century Gothic" Size=2>Tour & Travel</Font></TD> <TD Colspan=2 Width=400 Align=center><Font Face="Century Gothic" Size=2>Bahasa Inggris</Font></TD> </TR> <TR> Pemrograman Web dengan Active Server Pages (ASP) 50

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

<TD Width=200 Align=Center><Font Face="Century Gothic" Size=2>Mata pelajaran</Font></TD> <TD Width=30 Align=Center><Font Face="Century Gothic" Size=2>SKS</Font></TD> <TD Width=200 Align=Center><Font Face="Century Gothic" Size=2>Mata pelajaran</Font></TD> <TD Width=30 Align=Center><Font Face="Century Gothic" Size=2>SKS</Font></TD> <TD Width=200 Align=Center><Font Face="Century Gothic" Size=2>Mata Pelajaran</Font></TD> <TD Width=30 Align=Center><Font Face="Century Gothic" Size=2>SKS</Font></TD> <TD Width=200 Align=Center><Font Face="Century Gothic" Size=2>Mata Pelajaran</Font></TD> <TD Width=30 Align=Center><Font Face="Century Gothic" Size=2>SKS</Font></TD> <TD Width=200 Align=Center><Font Face="Century Gothic" Size=2>Mata Pelajaran</Font></TD> <TD Width=30 Align=Center><Font Face="Century Gothic" Size=2>SKS</Font></TD> <TD Width=200 Align=Center><Font Face="Century Gothic" Size=2>Mata Pelajaran</Font></TD> <TD Width=30 Align=Center><Font Face="Century Gothic" Size=2>SKS</Font></TD> </TR> <TR> <TD Align=Left><Font Face="Century Gothic" Size=1>1. Algoritma Pemrog.</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>1. Pengantar Akuntansi</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>1. Intro. to Secret. Job</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>1. Psychology of Service</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>1. Geografi Penerb.</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>1. Listening-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> </TR> <TR> <TD Align=Left><Font Face="Century Gothic" Size=1>2. RDBMS & SQL</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>2. Microsoft Office</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>2. Business Correspondence</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>2. Food Production - I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>2. Ticketing & Docu. Pasasi-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>2. Speaking-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> </TR> <TR> <TD Align=Left><Font Face="Century Gothic" Size=1>3. Microsoft Office</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>3. Bahasa Inggris-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>3. Computer-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>3. Food Production-II</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>3. Tarif & Agkutan Udara-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> Pemrograman Web dengan Active Server Pages (ASP) 51

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

<TD Align=Left><Font Face="Century Gothic" Size=1>3. Reading-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> </TR> <TR> <TD Align=Left><Font Face="Century Gothic" Size=1>4. Bhs. Inggris-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>4. Algoritma Pemrograman</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>4. Typing Skill-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>4. Food & Beverage Service-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>4. Bhs. Inggris Profesi-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>4. Writing-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> </TR> <TR> <TD Align=Left><Font Face="Century Gothic" Size=1>5. Pemrog. Visual Basic-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>5. Perpajakan</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>5. Basic Communication English</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>5. Food & Beverage Service-II</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>5. Airline & Hotel Reservation</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>5. Structure-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> </TR> <TR> <TD Align=Left><Font Face="Century Gothic" Size=1>6. Pengembangan diri</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>6. Pengembangan diri</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>6. Efective Communic. & HR</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>6. Housekeeping-I</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>4</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>6. Pabean,Imigrasi & Karantina</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> <TD Align=Left><Font Face="Century Gothic" Size=1>6. Office English</Font></TD> <TD Align=Center><Font Face="Century Gothic" Size=1>2</Font></TD> </TR>

Pemrograman Web dengan Active Server Pages (ASP)

52

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

</Table> </Body> </Html>

Gambar V.4. Tampilan Kurikulum Pendidikan

11. Fasilitas.htm Program ini berisi fasilitas pendidikan profesional satu tahun LBPP-LIA. (Lihat gambar V.5.)
<Html> <Head></Head> <Title>:: FASILITAS ::</Title> <Body Background="Images/mac4.GIF"> <Font Face="Arial" Size=2> <B>Fasilitas yang dimiliki:</B> <UL> <LI>Ruang belajar nyaman AC</LI> <LI>Area Parkir </LI> <LI>1 Komputer tiap peserta </LI> <LI>Bebas Biaya Praktek </LI> <LI>Perpustakaan/Ruang Baca </LI> <LI>Jaket Almamater</LI> <LI>Diktat</LI> <LI>Laboratorium komputer Pentium III & IV</LI> <LI>Labaratorium Jaringan </LI> </UL> </Font> </Body> </Html> dengan

Pemrograman Web dengan Active Server Pages (ASP)

53

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar V.5. Tampilan Fasilitas Pendidikan

12. Biaya.htm Program ini berisi daftar biaya pendidikan profesional satu tahun LBPP-LIA. (Lihat Gambar V.6.)

Pemrograman Web dengan Active Server Pages (ASP)

54

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

<Html> <Head></Head> <Title>:: Biaya ::</Title> <Body Background="Images/mac4.GIF" bgproperties=fixed> <Table Cellpadding=5 Border=0 Width=600> <TR> <TD><Font Face=Verdana Size=2><marginwith=5>Biaya Pendidikan Tahun Ajaran 2004/2005 :</TD> </TR> <Table Cellpadding=5> <TR> <TD Width=50><Font Face=Verdana Size=2>No.</Font></TD> <TD Width=300><Font Face=Verdana Size=2>Jurusan</TD> <TD Width=250><Font Face=Verdana Size=2>Besar Biaya</TD> </TR> <TR> <TD><Font Face=Verdana Size=2>1.</Font></TD> <TD><Font Face=Verdana Size=2>Manajemen Informatika</Font></TD> <TD><Font Face=Verdana Size=2>Rp 3.950.000,-</Font></TD> </TR> <TR> <TD><Font Face=Verdana Size=2>2.</Font></TD> <TD><Font Face=Verdana Size=2>Akuntansi Komputer</Font></TD> <TD><Font Face=Verdana Size=2>Rp 3.950.000,-</Font></TD> </TR> <TR> <TD><Font Face=Verdana Size=2>3.</Font></TD> <TD><Font Face=Verdana Size=2>Sekretaris & PR</Font></TD> <TD><Font Face=Verdana Size=2>Rp 3.950.000,-</Font></TD> </TR> <TR> <TD><Font Face=Verdana Size=2>4.</Font></TD> <TD><Font Face=Verdana Size=2>Perhotelan</Font></TD> <TD><Font Face=Verdana Size=2>Rp 4.600.000,-</Font></TD> </TR> <TR> <TD><Font Face=Verdana Size=2>5.</Font></TD> <TD><Font Face=Verdana Size=2>Tour & Travel</Font></TD> <TD><Font Face=Verdana Size=2>Rp 4.600.000,-</Font></TD> </TR> <TR> <TD><Font Face=Verdana Size=2>6.</Font></TD> <TD><Font Face=Verdana Size=2>Bahasa Inggris</Font></TD> <TD><Font Face=Verdana Size=2>Rp 3.950.000,-</Font></TD> </TR> </Table> </TR> </Table> </Body> </Html>

Pemrograman Web dengan Active Server Pages (ASP)

55

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar V.6. Tampilan Biaya Pendidikan

13. Program.htm Program ini berisi jurusan-jurusan yang ada pada pendidikan profesional satu tahun LBPP-LIA. (Lihat Gambar V.7.)
<Html> <Head></Head> <Title>:: PROGRAM ::</Title> <Body Background="Images/mac4.GIF" bgproperties=fixed> <Font Face=Tahoma Size=2>Program Profesional 1 Tahun LBPP-LIA membuka 6 Program Studi:</Font> <OL> <LI><Font Face=Tahoma Size=2>Manajemen Informatika</Font></LI> <LI><Font Face=Tahoma Size=2>Akuntansi Komputer</Font></LI> <LI><Font Face=Tahoma Size=2>Sekretaris & PR</Font></LI> <LI><Font Face=Tahoma Size=2>Perhotelan</Font></LI> <LI><Font Face=Tahoma Size=2>Tour & Travel</Font></LI> <LI><Font Face=Tahoma Size=2>Bahasa Inggris</Font></LI> </OL> </Body> </Html>

Pemrograman Web dengan Active Server Pages (ASP)

56

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar V.7. Tampilan Program Pendidikan

14. Syarat.htm Program ini berisi syarat pendaftaran untuk menjadi peserta program pendidikan profesional satu tahun LBPP-LIA. (Lihat Gambar V.8.)
<Html> <Head></Head> <Title>:: FASILITAS ::</Title> <Body Background="Images/mac4.GIF"> <Font Face="Arial" Size=2> <B>Syarat Pendaftaran:</B> <UL> <LI>Biaya Pendaftaran Rp. 35.000,-</LI> <LI>Lulus SMU/SMK/Sederajat</LI> <LI>Menyerahkan Phaspoto Ukuran 3x4 dan 2x3 masing-masing 2 lembar</LI> <LI>Profesional yang bermutu</LI> <LI>Menyerahkan Fotocopi STTB/Ijazah 1 lembar</LI> <LI>Lulus Tes Saringan Masuk</LI> </UL> </Font> </Body> </Html> Pemrograman Web dengan Active Server Pages (ASP)

57

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar V.8. Tampilan Syarat Pendaftaran

15. Daftar.Asp Program ini merupakan formulir pendaftaran untuk menjadi peserta pendidikan profesional satu tahun LBPP-LIA. (Lihat Gambar V.9.)
<html> <head> <title> daftar.asp </title> </head> <Body background="Images/mac4.GIF" bgproperties=fixed> <body> <form method = "post" action = "tdaftar.asp"> <pre> Formulir Pendaftaran : <hr> Nama : <input type = text name = Nama size = 25> Tgl. Lahir : <input type = date name = tgl_lhr size = 10> Tempat Lahir : <input type = text name = tem_lhr size = 25> Pendidikan : <input type = text name = Pendidikan size = 50> Pemrograman Web dengan Active Server Pages (ASP) 58

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Alamat No. Telpon Handphone E-Mail Jenis Kelamin

: <input type = text name = Alamat1 size = 50> <input type = text name = Alamat2 size = 50> <input type = text name = Alamat3 size = 50> : <input type = text name = no_tlp size = 10> : <input type = text name = HP size = 12> : <input type = text name = email size = 50> : <input type = radio name = jenkel value = pria> Laki - laki <input type = radio name = jenkel value = wanita> Perempuan

<br> Pilihan Program Studi : <input type = checkbox name = jurusan value = MI> Manajemen Informatika <input type = checkbox name = jurusan value = AK> Akuntansi Komputer <input type = checkbox name = jurusan value = SK> Sekretaris & PR <input type = checkbox name = jurusan value = PH> Perhotelan <input type = checkbox name = jurusan value = TT> Tour & Travel <input type = checkbox name = jurusan value = BI> Bahasa Inggris <br> Masukkan Password Anda : <input type = password name = pwd maxlength = 6> <hr> <input type = submit value = Daftar> <input type = reset value = Batal> </form> </body> </html>

Gambar V.9. Tampilan Formulir Pendaftaran

16. tdaftar.Asp Program ini berguna untuk mengambil data yang ada di formulir pendaftaran dan merekamnya ke dalam database.
Pemrograman Web dengan Active Server Pages (ASP) 59

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

<html> <head> <title> tdaftar.asp </title> </head> <body> <% response.write "<b>DATA ANDA SUDAH DIKIRIM</b>" response.write "<hr>" response.write "<b>Data yang dikirim :</b><br><br>" response.write "<br>" response.write "<tr><td>Nama : </td>" response.write request.form("Nama") response.write "<br>" response.write "<tr><td>Tgl. Lahir : </td>" response.write request.form("tgl_lhr") response.write "<br>" response.write "<tr><td>Tempat Lahir : </td>" response.write request.form("tem_lhr") response.write "<br>" response.write "<tr><td>Alamat : </td>" response.write request.form("alamat1") response.write "<br>" response.write request.form("alamat2") response.write "<br>" response.write request.form("alamat3") response.write "<br>" response.write "<tr><td>No. Telp : </td>" response.write request.form("no_tlp") response.write "<br>" response.write "<tr><td>Handphone : </td>" response.write request.form("HP") response.write "<br>" response.write "<tr><td>E-Mail : </td>" response.write request.form("email") response.write "<br>" response.write "<tr><td>Jenis Kelamin : </td>" response.write request.form("jenkel") response.write "<br>" response.write "<tr><td>Prog. Studi : </td>" response.write request.form("jurusan") response.write "<br>" response.write "<tr><td>Password : </td>" response.write request.form("pwd") response.write "<br>" dim con, rst Set con = Server.CreateObject("ADODB.Connection") con.Provider = "Microsoft.Jet.OLEDB.4.0" con.Open (Server.Mappath("db\daftar.MDB")) set rst = Server.CreateObject("ADODB.Recordset") rst.open "Select * from peserta" ,con ,1 ,3 rst.addnew if request.form("Nama") <> " " then rst("Nama") = request.form("Nama") Pemrograman Web dengan Active Server Pages (ASP) 60

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

end if rst("tgl_lhr") = request.form("tgl_lhr") rst("tem_lhr") = request.form("tem_lhr") rst("pendidikan") = request.form("pendidikan") rst("alamat1") = request.form("alamat1") rst("alamat2") = request.form("alamat2") rst("alamat3") = request.form("alamat3") rst("no_tlp") = request.form("no_tlp") rst("HP") = request.form("HP") rst("email") = request.form("email") rst("jenkel") = request.form("jenkel") rst("jurusan") = request.form("jurusan") rst("pwd") = request.form("pwd") rst.update rst.close set rst = nothing set con = nothing response.write "<p>Klik " response.write "<a href = ""home.htm "">disini</a> " response.write " untuk kembali ke menu.....<br>" %> </body> </html>

Pemrograman Web dengan Active Server Pages (ASP)

61

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

BAB VI
UPLOAD KE INTERNET
Pada bab ini kita akan mempelajari cara meng-upload hasil kerja yang selama ini dikerjakan di server local ke Internet. Banyak jasa Web-hosting yang menyediakan server berbasis Windows untuk keperluan operasional aplikasi ASP. Masing-masing mempunyai kelebihan, namun harga yang ditawarkan masih relative lebih mahal dibandingkan dengan server sejenis namun bersistem operasi lain. Banyak programmer ASP yang kesulitan memperoleh web server gratis untuk media percobaan karena dari sisi harga lisensi system operasinya, fasilitas tersebut tidak mudah diberikan. Biaya yang dikeluarkan untuk membeli lisensi Windows mau tidak mau harus ditutup dengan menarik biaya dari pengguna jika menginginkan hosting di server windows. Meskipun sulit, ternyata ada beberapa website yang menyediakan fasilitas hosting server Windows tanpa menarik biaya. Walau jumlahnya dapat dihitung dengan jari (karena tidak lebih dari lima provider), fasilitas ini cukup membantu para programmer ASP untuk mendokumenkan script yang dibuat melalui internet. Terdapat dua web server yang paling sering muncul di mesin pencari (Google, Yahoo). Jika kita mengetikkan keyword free web server ASP atau free hosting ASP. Kedua web server tersebut adalah domain DLX (http://www.domaindlx.com) dan Brinkster (http://www.brinkster.com). Brinkster Provider ini cukup terkenal setelah Domain DLX, bahkan beberapa tahun yang lalu sempat menjadi cadangan ketika Domain DLX sedang mengalami overload pengguna.
Pemrograman Web dengan Active Server Pages (ASP) 62

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Domain DLX akan memforward permintaan kita ke Brinkster setiap kali Domain DLX tidak mampu menambah kapasitas user. Provider ini dapat dikatakan cukup bagus dari sisi keamanan, namun tidak menyediakan akses FTP ke home directory Anda. Fasilitas FTP akan diberikan oleh Brinkster jika Anda memilih fasilitas non free. Beberapa halaman proses bahkan dilengkapi dengan https (http secure) yang akan mencegah sniffer memata-matai data dari komputer Anda ke Brinkster. VI.1 Registrasi User Baru Untuk menjadi member dari Brinkster, terlebih dahulu kita harus menjalankan proses registrasi. Menu registrasi dapat Anda temukan di menu bagian atas dari Brinkster. (Lihat Gambar VI.1.) Berikut ini langkah-langkah registrasi keanggotaan Brinkster: 1. Klik menu register/Upgrade 2. Isi formulir registrasi. Langkah registrasi dimulai dari memilih untuk membuat account baru atau melakukan upgrade terhadap account yang sudah ada. Untuk membuat account baru, pilih "Open a New Account". Selanjutnya memilih jenis "Solutions" yang ditawarkan oleh Brinkster. Untuk mendapatkan layanan gratis, solusi yang dipilih adalah "Windows 2K Solution". 3. Dari pilihan solusi Windows 2K, kita akan diberikan beberapa pilihan alternatif fasilitas dan kemampuan server. Pilihlah "General Solution" yang berada di bagian bawah dari semua alternatif tersebut untuk layanan gratis. 4. Selanjutnya kita akan diminta untuk mengisi alamat email. Alamat tersebut akan digunakan untuk media pengiriman konfirmasi kode registrasi. Pastikan alamat yang kita masukkan sudah benar. 5. Kemudian akan muncul pemberitahuan bahwa email registrasi telah dikirim ke alamat kita. Jendela pemberitahuan ini jangan ditutup sebelum kita membaca email tersebut. 6. Tidak lama, email dari Brinkster akan diterima di mailbox alamat kita. Baca email tersebut dan catatlah kode registrasinya. 7. Kembalilah ke jendela pemberitahuan (langkah ke-5). Tekan tombol "I have my Registration Code" lalu isilah kode registrasi yang kita terima dari Brinkster. 8. Lanjutkan proses selanjutnya dengan menyetujui Term of Service, pengisian informasi pribadi, sampai dengan memilih ID dan password yang akan digunakan. ID yang kita isi akan menjadi pilihan alamat website dalam domain Brinkster. Sampai pada langkah ini, kita dapat dikatakan telah sukses melakukan registrasi. Alamat website yang kita peroleh dapat dilihat pada sebelah kiri halaman. Alamat tersebut sudah dapat aktif digunakan. Untuk lebih jelasnya, berikut ini akan ditampilkan langkah-langkah mendaftar ke brinkster.com dengan gambar.

Pemrograman Web dengan Active Server Pages (ASP)

63

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Langkah 1 - Tampilan ini akan muncul bila kita mengetik alamat http://BRINKSTER.COM

Klik

Gambar VI.1. Tampilan Pertama Brinkster

- Kemudian pilih Free Langkah 2 Pada langkah ini kita diarahkan untuk membuat Nomor Registrasi Baru.

Gambar VI.2. Tampilan Selamat Datang dari Brinkster Pemrograman Web dengan Active Server Pages (ASP) 64

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Langkah 3 Apabila kita selesai memilih open a NEW account, tampilan berikut ini akan tampil. Pilihlah Click Here pada For the General Solution (Free).

Klik

Gambar VI.3. Tampilan untuk Registrasi pada Brinkster

Langkah 4 Setelah langkah ketiga, akan muncul tampilan seperti berikut, yaitu Formulir Pengisian Alamat Email kita. Maksudnya, Nomor Registrasi dari Brinkster akan dikirim melalui alamat email kita. Jadi disini kita harus mempunyai alamat email.

Pemrograman Web dengan Active Server Pages (ASP)

65

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar VI.4. Tampilan untuk Mengisi E-mail User

Langkah 5 Langkah berikut ini akan tampil setelah kita menekan pilihan Send Me My Registration Code! seperti pada Gambar VI.4. Brinkster akan mulai memproses pembuatan Nomor Registrasi dan segera mengirimkannya ke alamat email kita.

Gambar VI.5. Tampilan untuk Mengirim Alamat E-mail yang sudah diisi

Langkah 6 Pada langkah ini, kita disarankan untuk mengisi Email Address, dan Registration Code. Alamat Email adalah alamat email kita, sedangkan Registration Code adalah Nomor Registrasi dari Brinkster yang telah dikirim melalui alamat email kita. Jadi kita harus membuka email kita untuk mengetahui Registration Code, kemudian isikan pada formulir tersebut.

Pemrograman Web dengan Active Server Pages (ASP)

66

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar VI.6. Tampilan untuk Mengisi Registration Code

Langkah 7 Tampilan berikut adalah fasilitas layanan yang diberikan oleh Brinkster, kita isi kotak Check List apabila kita setuju.

Gambar VI.7. Tampilan Fasilitas Layanan dari Brinkster

Langkah 8 Pada tampilan berikut, kita diharuskan untuk mengisi Biodata untuk keperluan administrasi dari Brinkster. Isilah Biodata sesuai dengan formulir yang telah disiapkan.

Pemrograman Web dengan Active Server Pages (ASP)

67

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar VI.8. Pengisian

Tampilan untuk Biodata User

Langkah 9 Tampilan ini adalah untuk menyempurnakan data pada langkah 8. Sifatnya opsional, bisa diisi atau tidak.

Gambar VI.9. Tampilan untuk Referensi Program apa yang pernah dipelajari User

Langkah 10 Tampilan ini memastikan bahwa data yang kita isi adalah seperti yang ditampilkan pada Gambar VI.10.
Pemrograman Web dengan Active Server Pages (ASP) 68

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar VI.10. Tampilan Nama Account User

Langkah 11 Tampilan ini mengantarkan kita ke langkah terakhir untuk mendaftar ke Brinkster. Kita diminta untuk mengisi Nama dan Password untuk Login ke Brinkster.

Pemrograman Web dengan Active Server Pages (ASP)

69

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar Tampilan untuk Nama User digunakan

VI.11. Pengisian yang akan

Langkah 12 Tampilan ini menyatakan bahwa kita sudah selesai mendaftar ke Brinkster. Kita sudah punya alamat di Brinkster, dan kita sudah dapat mengupload program WEB kita ke Server gratis Brinkster, tetapi jangan lupa nama Login dan Password.

Alamat URL yang

Gambar VI.12. Tampilan bahwa Account sudah lengkap

VI.2 Upload File dan Database VI.2.1 File Manager Dari halaman file manager, proses upload file maupun database dari komputer kita ke web server dapat dilakukan. Kita tidak terlalu bergantung pada menu Database manager, karena database langsung kita upload dari komputer ke web server. Sebagaimana web server yang lain, tidak ada pengaturan tertentu untuk upload database karena koneksi yang dipilih adalah DSN-less. Seluruh file dan database dapat kita upload secara bersama-sama.
Pemrograman Web dengan Active Server Pages (ASP) 70

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Berikut ini langkah-langkah untuk melakukan upload: 1. Pilih menu File Manager 2. Melalui halaman File Manager Anda akan menemukan form upload di bagian kanan bawah halaman. 3. Masukkan file yang akan di-upload satu-persatu melalui tombol Browse. Jika masih terdapat file yang akan di-upload, ulangi proses ini. 4. Setelah semua file dan database sudah di-upload, maka proses pengiriman file ke web server dapat dikatakan selesai. Kita dapat logout dan melihat hasil karya melalui alamat website yang sudah diperoleh. Berikut ini langkah-langkah mengupload file ke web server : Login Dari Gambar VI.13 dapat kita lihat, di sebelah kiri halaman utama terdapat form login untuk masuk ke dalam home directory masing-masing pengguna. Masukkan nama user dan password kemudian tekan tombol Go. Jika isian user dan password dianggap benar, akan ditampilkan halaman kerja dari Admin. Ada tiga menu utama yang dapat dipilih, yaitu File manager, database manager, dan Account Manager. File Manager berfungsi untuk pengaturan file, sedangkan Database Manager untuk pengelolaan database melalui query, dan Account Manager untuk perubahan profil user. Berikut ini langkah-langkah mengupload Program Web dan Database : Langkah 1 Pada tampilan ini, kita harus memasukkan Nama User dan Password dengan benar agar dapat masuk ke fasilitas Brinkster.

Gambar VI.13. Tampilan untuk Login User

Pemrograman Web dengan Active Server Pages (ASP)

71

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Langkah 2 Pada tampilan ini diperjelas cara pengisian User dan Password, kemudian tekan Go. Apabila User dan Password benar, maka akan muncul tampilan Gambar VI.15.

Gambar VI.14. Tampilan untuk Pengisian User Name dan Password

Langkah 3 Tampilan ini adalah menu pilihan dari Brinskter. Kita pilih File Manager untuk mulai mengupload File Program Web kita ke Internet.

Gambar VI.15. Tampilan apabila User Name dan Password diterima

Pemrograman Web dengan Active Server Pages (ASP)

72

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Langkah 4 Tampilan berikut adalah memilih fiel-file program yang akan kita upload. Kita dapat mengupload 5 file program sekaligus. Kita pilih satu persatu file yang akan di upload. Setelah terisi semua, kemudian tekan pilihan Start File(s) Upload.

Gambar VI.16. Tampilan File Manager pada Pemilihan File-File yang akan di Upload

Langkah 5 Tampilan berikut adalah untuk mengupload file database. Untuk file database, harus kita tempatkan pada directory \db yang sudah disiapkan oleh Brinkster.

Pemrograman Web dengan Active Server Pages (ASP)

73

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar VI.17. Tampilan File Manager pada Pemilihan File Database yang akan diUpload

Langkah 6 Tampilan berikut adalah contoh bahwa file database daftar.mdb ditempatkan pada directory \db, sedangkan file program-program ditempatkan pada directory utamanya. Contoh :

HTTP:/WWW14.Brinkster.com/SonSib/Index.htm
Alamat URL yang diberikan oleh Brinkster Nama User Nama Program Utama dari Program WEB kita

Gambar VI.18. Tampilan File Manager pada saat File Database sudah dipilih untuk diUpload

Sampai disini kita sudah selesai mengupload semua file-file program Web beserta file Databasenya. Kita sudah bisa keluar dari Brinkster dengan memilih Logout. Kemudian kita bisa melihat hasil karya kita dengan memanggil program kita dari Internet Explorer dengan alamat yang sudah kita isi pada saat registrasi ke Brinkster. Logout Brinkster menyediakan jalan keluar untuk meninggalkan halaman Admin. Tombol logout yang disediakan di sebelah kiri halaman akan membuat kita merasa aman meninggalkan semua file dan database di dalam web server. Sekali logout, kita harus login kembali untuk bisa masuk ke dalam sistem. Dengan demikian, Brinkster bisa dikatakan telah mempunyai fasilitas standar dalam pengelolaan account yang baik.
Pemrograman Web dengan Active Server Pages (ASP) 74

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

VI.2.2 Database Manager Database Manager adalah untuk pengelolaan database yang ada di web server dengan melalui query. Data hasil transaksi akan disimpan pada database web server. Apabila kita hendak melihat data tersebut, kita masuk terlebih dahulu melalui login kemudian kita pilih database manager. Kemudian data tersebut dapat kita olah dengan bahasa query. Untuk lebih jelasnya, kita lihat langkah-langkah mengelola file database yang ada di web server melalui database manager. Langkah 1 Pada tampilan berikut ditampilkan fasilitas dari Database Manager seandainya sudah ada peserta yang mendaftar melalui program WEB yang kita buat. Untuk melihat data tersebut, kita masuk ke Brinkster, kemudian kita pilih Database Manager. Selanjutnya kita berikan perintah Query untuk menampilkan data peserta yang mendaftar. Pada tampilan Database, isi alamat dimana database tersimpan. Pada kolom Access DB Password, kosongkan saja karena kita tidak memberikan Password. Sedangkan pada SQL Query, kita berikan perintah Query untuk menampilkan data. Contoh : Perintah Query untuk menampilkan semua data peserta adalah sbb:
Select * From Peserta

Kemudian pilih Execute pada pilihan di bawah, dan hasilnya akan tampil seperti pada Gambar VI.20.

Pemrograman Web dengan Active Server Pages (ASP)

75

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Gambar VI.19. Tampilan Database Manager pada Brinkster

Langkah 2 Pada gambar ini ditampilkan hasil perintah Query dari langkah 1.

Gambar VI.20. Tampilan Data dari Hasil Perintah SQL

SOAL LATIHAN
Sampai disini kita sudah dapat membuat suatu program web yang dinamis beserta koneksi databasenya. Untuk lebih baiknya, kita harus lebih banyak latihan agar kita lebih mahir dalam pembuatan program web dengan ASP.
Pemrograman Web dengan Active Server Pages (ASP) 76

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Berikut ini ada beberapa topik latihan yang bisa anda buat dan kembangkan sebagai bahan latihan, yaitu : 1. Pemrograman Web sebuah Restoran, dimana para pembeli dapat memesan makanan (Delivery Order) dari Internet. 2. Pemrograman Web sebuah Rumah Sakit, dimana pasien dapat melihat semua informasi mengenai Rumah Sakit, berkonsultasi dengan dokter, membuat jadwal konsultasi dan pengobatan dengan dokter melalui Internet. 3. Pemrograman Web Paket Perjalanan Wisata (Traveling), dimana para turis lokal maupun mancanegara dapat meminta informasi lengkap tentang suatu paket perjalanan wisata, serta dapat memesan tiket untuk perjalanan wisata melalui Internet. 4. Pemrograman Web sebuah Hotel, dimana calon tamu dapat melihat informasi mengenai sebuah Hotel dan juga dapat memesan tempat (Hotel Reservation) melalui Internet. 5. dll. Apabila anda sudah selesai mengerjakan latihan program web tersebut di atas, mohon agar dikirimkan alamat website anda melalui e-mail ke sondsib@yahoo.com, agar kami dapat membuka dan melihat program web hasil karya anda.

DAFTAR PUSTAKA
Pemrograman Web dengan Active Server Pages (ASP) 77

LEMBAGA BAHASA & PENDIDIKAN PROFESIONAL (LBPP-LIA)

Frans Newman, Pemrograman Client/Server dengan ASP, PT Elex Media Komputindo, Jakarta, 2001. Ridwan Sanjaya, Felix Andreas S., Koneksi Database-ASP tanpa DSN, PT Elex Media Komputindo, Jakarta, 2003. Wahana Komputer Semarang, Panduan Aplikatif Pengembangan Web Berbasis ASP. ANDI, Yogyakarta, 2002. Wahana 2003. WWW.BRINKSTER.COM : Penyedia Server Gratis yang PT mendukung Pemrograman ASP dan Database Yahya Kurniawan, ST., Aplikasi Web Database dengan ASP. Elex Media Komputindo, Jakarta, 2001. Komputer Semarang, Pembuatan Program Sistem Informasi Akademik Berbasis ASP. Salemba Infotek, Jakarta,

Pemrograman Web dengan Active Server Pages (ASP)

78

Anda mungkin juga menyukai