MODUL

MATA KULIAH
PEMROGRAMAN WEB I
STMIK ASIA MALANG




Halaman : i






Pemrograman Web I adalah salah satu mata kuliah yang diberikan kepada
mahasiswa Sekolah Tinggi Manajemen Informatika dan Komputer Asia Malang. Materi
yang diberikan adalah pengenalan dasar tentang internet mulai dari konsep internet,
pengenalan bahasa HTML (Hypertext Markup Language), script (menggunakan VBScript)
hingga pengaksesan database menggunakan ASP (Active Server Pages) untuk
mendukung e-commerce website (site yang mendukung transaksi secara online).
Pengolahan Database mulai dari pencarian/pemfilteran data, tambah data, edit
data, hapus data hingga pengaksesan transaksi secara online menggunakan bahasa ASP
dikarenakan masih ada hosting (penyedia layanan web server) menggunakan Microsoft
Windows sebagai sistem operasinya. Tampilan website dapat memanfaatkan software
pengolah gambar dan untuk pembuatan site yang mendukung ASP dan VBScript
menggunakan software pendukung lain seperti Macormedia Dreamweaver.
Sebagian besar web programmer menggunakan PHP (PHP : Hypertext
Preprocessor) sebagai bahasa untuk mengolah database. Untuk materi tersebut dapat
diperoleh pada mata kuliah Pemrograman Web II yangmana didukung pula dengan CMS
(Content Management System) yang membuat tampilan web lebih dinamis, interaktif dan
mudah dalam pengoperasian dan diharapkan dapat membuat WML (Wireless Markup
Language).
Harapan ke depan mahasiswa STMIK Asia Malang dapat membuat site yang
mendukung e-commerce yang handal dengan tampilan yang menarik dan didukung
keamanan transaksi yang mumpuni.


PENYUSUN


Titania Dwi Andini, S.Kom
(Dosen STMIK Asia Malang)
Kata Pengantar

Halaman : ii





BAB I : Internet dan Search Engine ........................................................ 1
A. Dasar-dasar Internet ...................................................................... 1
B. Sejarah Internet ............................................................................ 1
C. Jenis Koneksi ke Internet ................................................................ 1
D. Membuat Sambungan ke Internet (Dial Up) ....................................... 1
- Alat-alat yang diperlukan ........................................................ 1
- Menginstall/menentukan Modem Properties ............................... 2
- Instalasi Dial-Up Networking.................................................... 2
- Menghubungkan Komputer ke ISP............................................ 2
E. Mengenal Program Browser IE 6.0 .................................................... 3
- Title Bar ............................................................................... 3
- Menu Bar.............................................................................. 3
- Tool Bar ............................................................................... 3
- Address Bar .......................................................................... 4
- Jendela Browser .................................................................... 4
F. Membuka Alamat Situs.................................................................... 4
- Cara Menampilkan alamat situs tujuan...................................... 4
- Melihat Isi Situs Web.............................................................. 4
- Search Engine ....................................................................... 4
- Menyalin Teks atau Gambar yang ada di situs ............................ 5
BAB II : Dasar-Dasar HTML..................................................................... 6
A. Pendahuluan ................................................................................. 6
B. Struktur Dokumen HTML ................................................................. 6
C. Bagian Body HTML ......................................................................... 7
- Memformat Dokumen HTML..................................................... 7
BAB III : Gambar dan Link...................................................................... 9
A. Menambahkan Gambar ................................................................... 9
B. Link 9
C. Tabel.......................................................................................... 10
BAB IV : FRAME.................................................................................... 12
BAB V : FORM....................................................................................... 16
A. Form.......................................................................................... 16
BAB VI : Macromedia Dreamweaver MX................................................ 18
A. Pengenalan ................................................................................. 18
- Menu Bar............................................................................ 18
- Insert Bar ........................................................................... 18
- Tool Bar ............................................................................. 18
- Document Tool Bar............................................................... 18
- Panels Group....................................................................... 18
- Welcome Window................................................................. 18
- Properties Inspector ............................................................. 18
B. Membangun / Mengedit HTML ........................................................ 18
C. Membangun atau Menghubungkan Site ........................................... 19
BAB VII : VB Script ............................................................................... 23
A. Dasar-dasar VB Script.................................................................. 23
B. Tipe Data................................................................................... 24
BAB VIII : Dasar-dasar ASP.................................................................. 27
A. Pendahuluan ............................................................................... 27
- Penulisan skrip ASP.............................................................. 27
B. Objek Response........................................................................... 28
BAB IX : Koneksi Database Menggunakan ASP...................................... 29
Daftar Isi

Halaman : iii

A. Obyek Server .............................................................................. 29
B. Menampilkan Database dari Access................................................. 29
C. Menggunakan Obyek Form dan Action Page ..................................... 31
BAB X : Input Data dan Update Data dengan Form di ASP..................... 33
A. Input Data .................................................................................. 33
B. Update Data................................................................................ 35
BAB XI : Menghapus Data dan Membuat Variabel Session..................... 38
A. Menghapus Data .......................................................................... 38
B. Membuat Obyek Sessioan.............................................................. 39
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman 1
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

BAB I
INTERNET DAN SEARCH ENGINE

A. DASAR-DASAR INTERNET
Internet atau Net adalah kumpulan jutaan komputer yang terhubung di seluruh dunia,
mulai dari komputer sekelas PC sampai komputer besar di perusahaan-perusahaan yang
ditangani oleh ahli-ahli komputer.
Fungsi utama internet adalah medium untuk komunikasi dan pertukaran informasi bahkan
sekarang ini internet mulai sudah digunakan sebagai media perdagangan yang populer disebut
e-commerce yang memungkinkan kita yang ada di Indonesia berbelanja ke Amerika tanpa
harus berpergian ke sana.

B. SEJARAH INTERNET
Pada awalnya Internet merupakan jaringan komputer yang dibentuk oleh Departemen
Pertahanan Amerika Serikat di tahun 1969, melalui proyek ARPA yang disebut ARPANET
(Advanced Research Project Agency Network), di mana mereka mendemonstrasikan
bagaimana dengan hardware dan software komputer yang berbasis UNIX, kita bisa melakukan
komunikasi dalam jarak yang tidak terhingga melalui saluran telepon. Proyek ARPANET
merancang bentuk jaringan, kehandalan, seberapa besar informasi dapat dipindahkan, dan
akhirnya semua standar yang mereka tentukan menjadi cikal bakal pembangunan protokol
baru yang sekarang dikenal sebagai TCP/IP (Transmission Control Protocol/Internet Protocol).
Tujuan awal dibangunnya proyek itu adalah untuk keperluan militer. Pada saat itu
Departemen Pertahanan Amerika Serikat (US Department of Defense) membuat sistem
jaringan komputer yang tersebar dengan menghubungkan komputer di daerah-daerah vital
untuk mengatasi masalah bila terjadi serangan nuklir dan untuk menghindari terjadinya
informasi terpusat, yang apabila terjadi perang dapat mudah dihancurkan.
Pada mulanya ARPANET hanya menghubungkan 3 situs saja yaitu Stanford Research
Institute, University of California, Santa Barbara, University of Utah, di mana mereka
membentuk satu jaringan terpadu di tahun 1969, dan secara umum ARPANET diperkenalkan
pada bulan Oktober 1972. Tidak lama kemudian proyek ini berkembang pesat di seluruh
daerah, dan semua universitas di negara tersebut ingin bergabung, sehingga membuat
ARPANET kesulitan untuk mengaturnya.
Oleh sebab itu ARPANET dipecah manjadi dua, yaitu "MILNET" untuk keperluan militer dan
"ARPANET" baru yang lebih kecil untuk keperluan non-militer seperti, universitas-universitas.
Gabungan kedua jaringan akhirnya dikenal dengan nama DARPA Internet, yang kemudian
disederhanakan menjadi Internet.

C. JENIS KONEKSI KE INTERNET
• Dial Up : Koneksi antara dua komputer menggunakan saluran telepon dan modem.
Koneksi Dial Up merupakan cara yang paling banyak digunakan untuk mengakses internet.
• Broadband : Bentuk broadband dengan layanan terpadu, dengan kecepatan tinggi dan
menggunakan serat optik sebagai media transmisi atau sinyal berfrekuensi tinggi.
• ADSL - Asymmetric Digital Subscriber Line: Pengiriman data digital tingkat tinggi di
atas jalur line telepon. Biasanya disingkat dengan ADSL. ADSL merupakan teknologi
modulasi yang dikembangkan dengan Discrete Multitone (DMT) yang memungkinkan
transmisi data berkecepatan tinggi.Fasilitas ADSL secara simultan menggunakan layanan
telepon biasa, ISDN, dan transmisi data berkecepatan tinggi, seperti halnya video.
• GPRS - General Packet Radio Services (via Handphone) : Salah satu standar
komunikasi wireless (nirkabel). Dibandingkan dengan protokol WAP, GPRS memiliki
kelebihan dalam kecepatannya yang dapat mencapai 115 kbps dan adanya dukungan
aplikasi yang lebih luas, termasuk aplikasi grafis dan multimedia.

D. MEMBUAT SAMBUNGAN KE INTERNET (DIAL UP)
1. Alat-alat Yang Diperlukan
Pada intinya tidak banyak yang diperlukan untuk memiliki sambungan ke Internet. Yang
mendasar hanyalah satu unit komputer, modem dan saluran telepon. Modem adalah suatu
alat yang memungkinkan komputer bertukar informasi lewat alur telepon dengan komputer
lain. Cara kerjanya ialah komputer menghasilkan informasi digital, sementara saluran
telepon hanya meneruskan data analog.
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman 2
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com


Yang dilakukan modem adalah mengubah sinyal digital yang keluar dari komputer menjadi
informasi analog dan mengirimkannya lewat saluran telepon ke modem lain, yang
kemudian mengubahnya kembali menjadi data digital yang dapat dipahami komputer
lainnya. Untuk diketahui saja kita membayar sejumlah waktu ketika tersambung ke
Internet lewat modem dengan standar pembayaran pulsa lokal.

2. Menginstall/Menentukan Modem Properties
- Click Start, Pilih Setting, Click Control Panel, Double Click icon Modems.
- Click tombol Remove untuk menghapus Modem yang aktif, guna installasi yang baru.
- Click tombol Add untuk memilih/menambah model modem yang sesuai.
- Aktifkan Don´t detect my modem; I will select it from a list.
- Click tombol Next untuk menentukan pilihan modem.
- Tentukan Manufacturers dan Models Modem yang dipakai.
- Click tombol Next untuk menentukan Port modem [misal: Communications
Port(COM1)].
- Click tombol Next.
- Click tombol Finish.
- Periksa apakah modem sudah beres, dengan cara Click tab Diagnostics.
- On-kan modem yang sudah terhubung (langkah ini harus) dan cek jika lampu HS dan
MR nyala berarti siap untuk di diagnosis.
- Click tombol More Info. dan tunggu beberapa menit untuk proses.
- Click tombol Ok.
- Click tombol Close.

3. INSTALASI DIAL-UP NETWORKING
- Click Start, Pilih Program, Pilih Accessories, Click Dial-Up Networking.
- Double Click icon Make New Connection.
- Ketik nama icon Dial-up Networking pada pernyataan Type name for the computer
you are dialing: (misal: WEC Internet) dan click tombol Configure. untuk
menentukan tinggi rendahnya Speaker volume serta menentukan maximum speed dan
juga aktifkan Only connect at this speed.
- Click tab Connection dan Click tombol Port settings untuk menentukan setting port.
- Click tombol Advanced untuk menentukan spesifikasi jenis kesalahan dalam
sambungan setting modem. Kemudian Click tombol Ok.
- Click tombol Ok dan Click tombol Next.
- Ketikkan kode area dan nomor telepon pada pernyataan Type the phone number for
the computer you want to call:
Area code: Telephone number:

0341 080989999 No. Telp. TelkomNetInstant

Country code
Indonesia (62)
- Click tombol Next
- Click tombol Finish untuk menyimpan ke folder Dial-Up Networking

4. MENGHUBUNGKAN KOMPUTER KE ISP(INTERNET SERVICE PROVIDER) LEWAT
DIAL-UP YANG BARU DI BUAT
ISP adalah perusahaan yang menyediakan akses ke Internet. Sebenarnya waktu
melakukan sambungan ke Internet via modem, yang kita lakukan sebenarnya adalah
menghubungi modem komputer yang jauh lebih besar pada ISP tersebut yang memiliki
sambungan permanen ke saluran Internet.

Di bawah ini cara menghubungkan komputer dengan ISP:
- Double click shortcut yang baru dibuat.
- Untuk user nama kita pakai langsung telkomnet@instan.
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman 3
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

- Sedangkan password adalah telkom.
- Nomor yang dituju adalah 080989999.
- Kemudian tekan tombol connect/ok.
- Bila modem sudah terhubung maka kita bisa langsung membuka browser IE6.0.

E. MENGENAL PROGRAM BROWSER IE 6.0
Program Browser adalah suatu perangkat lunak yang digunakan untuk melihat situs Web.
Inilah browser yang paling populer dari Microsoft : Internet Explorer 6.0



























1. Title Bar
Menampilkan nama perangkat lunak yang digunakan dan nama halaman Web yang aktif.
2. Menu Bar
Menampilkan semua menu yang terdiri dari menu: File, Edit, View, Insert, Format, Tools,
Table, Window, Help. Dengan menu-menu tersebut kita bisa mengubah penataan browser,
menyimpan (save), dan mencetak halaman Web ke File.
3. Tool Bar
Tempat dari semua tombol kontrol yang digunakan ketika kita menjelajahi internet :
Tombol Back
Dengan tombol ini kita bisa melihat halaman web yang kita buka sebelumnya.
Tombol Next
Dengan tombol ini kita bisa melihat halaman web yang telah kita buka (aktif
setelah anda click Tombol back).
Tombol Stop
Tombol ini berfungsi untuk menghentikan proses menampilkan halaman situs di
Browser .
Tombol Refresh
Berguna untuk mengupdate alamat & mempercepat proses.
Tombol Home
Berguna untuk menuju ke default alamat situs.
Tombol Search
Menampilkan program Search Engine ke halaman browser.
Tombol Favorite
Melihat dan menyimpan alamat situs favorit.
1 2
3 4 5
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman 4
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

Tombol History
Menampilkan seluruh alamat situs yang pernah dibuka di browser.
Tombol Mail
Untuk membaca atau menulis e-mail, mengirimkan alamat situs, dan mengirimkan
halaman Web melalui fasilitas Internet Outlook.
4. Address Bar
Tempat untuk memasukkan alamat Web yang dituju. Biasanya diawali dengan
`http://www.´. Walaupun demikian mulai IE versi 4.0 ke atas Microsoft sudah menyediakan
`http://´ di dalam address bar sehingga kita cukup mengawali alamat situs dengan `www.´
5. Jendela Browser
Menampilkan halaman situs web.

F. MEMBUKA ALAMAT SITUS
Setiap situs Web ada di Internet selalu memiliki alamat tertentu supaya situs tersebut dapat
diakses oleh seluruh pengguna internet di dunia. Alamat tersebut biasa disebut URL (Uniform
Resource Locator) dengan format namasitus@domainname.
1. Cara menampilkan alamat situs tujuan:
- Klik kotak address.
- Ketikkan URL yang anda inginkan, misal www.weaneseducation.com.
- Klik tombol GO atau tekan ENTER.
2. Melihat isi situs web:
- Klik obyek (gambar / tulisan / teks) yang memiliki attribute link.
Ciri-Ciri Attribute Link:
♦ Bentuk Cursor akan berubah menjadi tangan jika berada di atas obyek tersebut.
♦ Untuk obyek teks, teks berwarna biru dan bergaris bawah selain itu ada juga
teks yang berubah bentuknya jika ditunjuk oleh cursor.

Search Engine adalah program internet yang berfungsi sebagai mesin pencari alamat-
alamat situs yang tersebar di Jaringan Internet. Program ini sangat berguna sekali bagi pemakai
internet yang belum tahu alamat situs yang akan dia kunjungi. Misal user ingin mengunjungi situs
yang berkaitan dengan "music" maka ia tinggal mengetikkan "musik" di tempat yang telah
disediakan , kemudian tekan Enter . Search Engine akan menampilkan semua alamat-alamat situs
yang berkaitan dengan "musik". Untuk membuka alamat situs tersebut caranya sangat mudah
sekali, yaitu Klik saja alamat situs tersebut. Berikut Situs - Situs penyedia search engine yang
sering digunakan.
1. www.YAHOO.com
Yahoo termasuk salah satu perintis Search Engine di Internet, pengunjung dimanjakan dengan
banyaknya link kategori Situs yang ada. Kalau itu masih kurang pengunjung bisa mengetikkan
kategori di textbox yang disediakan kemudian klik tombol Search. Maka Yahoo akan segera
menampilkan alamat-alamat situs yang bersangkutan. Satu yang menjadi kekurangan Yahoo
adalah hasil pencariannya yang kurang spesifik sehingga banyak menampilkan alamat-alamat
situs yang seharusnya tidak perlu ditampilkan.












Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman 5
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

2. www.Altavista.com
Pengoperasian AltaVista sama saja dengan Yahoo. Keunggulannya adalah banyaknya situs di
sana yang menyediakan downloads gratis baik music maupun program dan hasil pencariannya
pun lebih baik dan cepat daripada milik Yahoo, dan satu lagi keunggulan yang jarang dimiliki
oleh Search Engine lain yaitu kemampuan memfilter berdasarkan bahasa.















3. www.Google.com
Situs ini sederhana tampilannya tidak banyak menyediakan link kategori seperti AltaVista
maupun Yahoo. Meskipun demikian Search Engine banyak digemari karena hasilnya yang lebih
spesifik daripada Yahoo dan AltaVista. Tetapi dalam mengetikkan kategori memiliki aturan
yang berbeda yaitu untuk kategori yang lebih dari satu kata harus di kurung petik dua, misal
"rock music¨.



MENYALIN TEKS ATAU GAMBAR YANG ADA DI SITUS.
• Teks
Block teks yang akan disalin, kemudian pilih menu Edit-Copy (Ctrl C).
Buka aplikasi pengolah kata melalui taskbar (misal Ms-word)
Kemudian klik menu Edit-Paste (Ctrl V)
• •• • Gambar
Pilih Gambar yang akan disalin.
Klik Kanan, pilih Save Picture As
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman 6
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

Tentukan lokasi penyimpanan dan nama file gambar.
Klik OK.
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman 7
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

BAB II
DASAR-DASAR HTML

A. PENDAHULUAN
HTML atau Hypertext Markup Language ialah bahasa yang digunakan untuk menampilkan
informasi yang ada di Internet. Sekali pun banyak orang yang menyebutnya sebagai suatu
bahasa pemprograman, HTML sebenarnya sama sekali bukan pemprograman melainkan
sebagai bahasa Markup (penanda) saja. Konsep bahasa ini pertama kali dikemukakan oleh Tim
Berners-Lee, seorang peneliti di CERN Particle Physics Lab di Jenewa, Swiss pada tahun 1989.
Berners-Lee merumuskan suatu proposal tentang sebuah sistem hypertext yang mempunyai
tiga komponen sebagai berikut:
• •• • Interface yang konsisten untuk semua platform. Interface ini harus menyediakan akses
yang dapat digunakan oleh berbagai jenis komputer.
• •• • Akses informasi yang universal. Setiap pengguna harus dapat mengakses setiap informasi
yang tersedia.
• •• • Interface yang menyediakan akses terhadap berbagai jenis dokumen dan protokol
(protokol ialah bahasa/aturan-aturan yang digunakan oleh komputer untuk dapat saling
berkomunikasi).
Perkembangan selanjutnya dari konsep Berners-Lee ini melahirkan Mosaic, sebuah web
browser grafis yang pertama.

Tampilan halaman ini tersusun oleh HTML

B. STRUKTUR DOKUMEN HTML
File HTML merupakan file teks biasa yang mengandung tag-tag HTML. Karena file text biasa,
file HTML dapat dibuat menggunakan teks editor sederhana seperti Notepad atau bahkan
dengan editor visual HTML seperti Microsoft FrontPage, HoTMetaL, Netscape Composer, yang
digunakan untuk mendesain halaman web tanpa harus mengenal HTML.
File HTML disimpan dengan ekstensi htm atau html misalkan index.htm, toc.html, dengan
struktur sebagai berikut :

<html>
<head>
<title>Latihan 1</title>
</head>
<body>
Ini adalah teks yang ditampilkan di browser !!
</body>
</html>

Struktur di atas diapit oleh tag <html> dan </html> yang menandai awal dan akhir halaman
HTML. Tag <Head> hingga </Head> berisi informasi mengenai dokumen seperti versi, revisi,
dan lain-lain. Sedangkan tag <Title> yang ada di dalam heading berisi judul halaman yang
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman 8
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

ditampilkan di Caption browser. Tag <Body> hingga </body> berisi informasi yang hendak
disajikan dalam dokumen HTML.
C. BAGIAN BODY HTML
Bagian body merupakan isi dari dokumen HTML yang di dalamnya tersisip semua informasi
yang ada seperti teks, gambar, hyperlink, dan lain-lain. Bagian body diawali oleh tag <body>
diakhiri oleh </body>. Tag <body> mempunyai beberapa atribut:

Atribut Keterangan
Alink Warna dari link aktif
Background File gambar yang digunakan sebagai background
BgColor Warna background dokumen
BgProperties Jika nilai atribut ini diisi "Fixed¨, maka background tidak ikut digulung
LeftMargin Batas kiri dokumen dalam satuan pixel
TopMargin Batas atas dokumen dalam satuan pixel
Link Warna dari link yang belum dikunjungi
Vlink Warna link yang telah dikunjungi
Text Warna dari text
Contoh :
<html>
<head>
<title>Latihan 2</title>
</head>
<body background="Setup.gif" bgproperties="fixed" bgcolor="#0000FF"
link="#0000FF"
vlink="#FFFF00" alink="#800000">
Contoh atribut body :
</body>
</html>

Memformat Dokumen HTML
Dalam HTML, terdapat beberapa tag yang dapat digunakan untuk memformat dokumen. Tag-
tag tersebut diantaranya :
• Tag <BR>
Tag <BR> digunakan untuk membuat baris baru. Pada pengolah kata, fungsi tag ini sama
dengan fungsi tombol Enter.
• Tag <p>
Tag <p> digunakan untuk memulai sebuah paragraf baru. Pada teks editor mungkin suatu
dokumen telah dipisahkan menjadi beberapa paragraf, namun browser tidak akan
mempedulikan baris baru yang ada pada teks editor, tetapi tetap menggabungkannya.
Contoh :
<html>
<head>
<title>Latihan 3</title>
</head>
<body bgproperties="fixed" bgcolor="#FFFFFF" link="#0000FF" vlink="#FFFF00"
alink="#800000" text="#000000">
<br>Ini baris pertama
<br>dan ini baris kedua
<p>Sedangkan ini adalah sebuah paragraf panjang yang berisikan beberapa baris
teks dalam satu paragraf.</p>
<p>Ini Paragraf kedua.</p>
</body>
</html>

• Tag <HR> digunakan untuk membuat garis pembatas horisontal. Tag ini mempunyai
beberapa atribut, yaitu :
Atribut Fungsi
Align Perataan garis: Left, Right atau center
Width Lebar dari garis pembatas
Size Tebal garis
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman 9
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

NoShade Menonaktifkan efek tiga dimensi
Color Warna garis pembatas

Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
10
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

Contoh :
<html>
<head>
<title>Latihan 4</title>
</head>
<body bgproperties="fixed" bgcolor="#FFFFFF" link="#0000FF" vlink="#FFFF00"
alink="#800000" text="#000000">
<br>Ini baris pertama
<br>dan ini baris kedua
<hr align="left" color="#00FF00">
</body>
</html>
• Tag <Hn> dimana n = 1- 6
Digunakan sebagai heading sebuah dokumen.
Contoh:
<html>
<head>
<title>Latihan 5</title>
</head>
<body bgproperties="fixed" bgcolor="#FFFFFF"
link="#0000FF" vlink="#FFFF00" alink="#800000"
text="#000000">
<h1>Ini Heading 1</h1>
<h2>Ini Heading 2</h2>
<h3>Ini Heading 3</h3>
<h4>Ini Heading 4</h4>
<h5>Ini Heading 5</h5>
<h6>Ini Heading 6</h6>
</body>
</html>
• Tag <Center>
Digunakan untuk menengahkan kata.
Contoh:
<html>
<head>
<title>Latihan 6</title>
</head>
<body bgproperties="fixed" bgcolor="#FFFFFF" link="#0000FF" vlink="#FFFF00"
alink="#800000" text="#000000">
<h1 align="center">Ini Heading 1</h1>
<Center><h2>Ini Heading 2</h2></Center>
</body>
</html>
• Physical Format
Physical Format ialah format terhadap fisik suatu font. Tag-tag yang termasuk physical
format adalah sebagai berikut:
Tag Fungsi
<B> Huruf tebal
<I> Huruf miring
<TT> Huruf mesin ketik
<U> Garis bawah
<Strike> Huruf dicoret
<BIG> Huruf ukuran besar
<Small> Huruf ukuran kecil
<sub> Subscript
<Sup> Superscript
• Tag <Font>
Tag Font digunakan untuk mengatur jenis, ukuran dan warna font.
<Font [Face=¨nama font¨] [Color=warna] [Size=Ukuran]>
Contoh :
<html>
<head>
<title>Latihan 7</title>
</head>
<body bgproperties="fixed" bgcolor="#FFFFFF" link="#0000FF" vlink="#FFFF00"
alink="#800000" text="#000000">
<h1 align="center"><b><u><font face="Arial Narrow">Ini Heading 1</font></u></b></h1>
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
11
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

<Center><p><i><font face="Arial Unicode MS" color="#0000FF" size="4">Ini Heading
2</font></i></p></Center>
</body>
</html>
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
12
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

BAB III
GAMBAR DAN LINK

A. MENAMBAHKAN GAMBAR
Dokumen HTML akan lebih menarik apabila ditambahkan gambar ke dalamnya. Format gambar
yang dapat ditampilkan antara lain: GIF, JPG, PCX, PNG dan WMF. Namun alangkah lebih
baiknya apabila format gambar yang digunakan ialah GIF atau JPG. Untuk menambahkan
gambar ke dalam dokumen HTML digunakan tag <IMG>. Tag <IMG> mempunyai beberapa
atribut sebagai berikut :
Atribut Keterangan
SRC Nama file gambar
ALIGN Menentukan posisi teks di sekitar gambar, nilainya adalah Top,Middle,
Bottom, Left atau Right.
Width Lebar gambar dalam satuan pixel
Height Tinggi gambar dalam satuan pixel
Alt Tool tips text gambar

Contoh:

<html>
<head>
<title>Latihan 2</title>
</head>
<body bgproperties="fixed" link="#0000FF"
vlink="#FFFF00" alink="#800000">
Contoh gambar dalam HTML
<p align="center"><img border="0"
src="pe01832_.gif" width="224" height="203"
alt="Ini Gambarku"></p>
</body>
</html>





B. LINK
Link merupakan suatu gambar atau teks yang terkait dengan halaman tertentu. Jika link di-
click, maka browser akan membuka halaman tersebut. Anchor merupakan sesuatu yang dapat
digunakan untuk menandai gambar atau teks yang dapat menghubungkan ke halaman atau
juga sebagai tujuan dari link. Anchor dapat ditulis dengan menggunakan tag <A>.
Tag <A> hanya mempunyai dua atribut yaitu HREF dan NAME. HREF digunakan untuk
mendefinisikan alamat yang dituju sedangkan NAME digunakan untuk mendefinisikan
bookmark dalam halaman HTML.
Contoh :
Teks yang muncul ketika
mouse di atas gambar
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
13
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

<html>
<head>
<title>Latihan 2</title>
</head>
<body bgproperties="fixed" link="#0000FF"
vlink="#FFFF00" alink="#800000">
<h1>&nbsp;<a href="#EndOfFile"><img
border="0" src="pe01832_.gif" width="84"
height="77" alt="Ini Gambarku"
align="middle"></a><font
color="#0000FF">Some
example of hyperlink</font></h1>
<p align="left">VISIO TECHNICAL 4.5
NETWORK.TXT FILE </p>
<p align="left">Copyright (c) 1997 Visio
Corporation. <a
href="http://www.visio.com">Visit
Visio Homepage</a></p>
<p align="left">All rights reserved.
This file contains information about Setting up and running Visio Technical
4.5 on a network. We recommend that you read this file and keep a printed
copy with your Visio Technical documentation. For other late-breaking
information about installing and running Visio Technical, see the
README.TXT file. For a listing of all the files copied to your hard drive
if you install the complete version of Visio Technical 4.5, see the
FILELIST.TXT file.
Tip: If necessary, choose Word Wrap from the Notepad Edit menu or Wrap To
Window from the WordPad View/Options menu to wrap the text within the
document window. <a name="EndOfFile">
</a></p>
</body>
</html>

C. TABEL
Tag-tag yang dapat digunakan untuk membuat tabel antara lain :
• Tag <Table>
Berfungsi untuk mendefinisikan sebuah tabel. Tag ini mempunyai beberapa atribut
antara lain:

Atribut Keterangan
Align Posisi horisontal tabel
Background Gambar latar belakang tabel
BgColor Warna latar belakang tabel
Border Tebal bingkai
BorderColor Warna bingkai
BorderColorLight Warna depan bingkai
BorderColorDark Warna bayangan bingkai
CellSpacing Spasi antar tabel
CellPadding Jarak isi sel dengan bingkai
Height Tinggi tabel
Width Lebar tabel
Valign Posisi vertikal teks dalam sel

• Tag <TH>
Untuk membuat header dalam tabel.
• Tag <TR>
Untuk membuat baris dalam tabel.
• Tag <TD>
Untuk membuat kolom dalam tabel. Tag ini mempunyai atribut yang mirip dengan
tabel.

Atribut Keterangan
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
14
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

Align Posisi horisontal teks dalam tabel
Background Gambar latar belakang sel
BgColor Warna latar belakang sel
Border Tebal bingkai sel
BorderColor Warna bingkai sel
BorderColorLight Warna depan bingkai sel
BorderColorDark Warna bayangan bingkai sel
ColSpan Jumlah kolom yang digabung
RowSpan Jumlah baris yang digabung
Height Tinggi sel
Width Lebar sel
Valign Posisi vertikal teks dalam sel

Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
15
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

Contoh:
<html><head>
<title>No</title></head>
<body>
<table border="1" width="100%">
<tr>
<td width="8%" align="center" bgcolor="#0000FF" rowspan="2"><font
color="#FFFFFF">No</font></td>
<td width="55%" align="center" bgcolor="#0000FF" colspan="3"><font
color="#FFFFFF">Barang</font></td>
<td width="17%" align="center" bgcolor="#0000FF" rowspan="2"><font
color="#FFFFFF">Jumlah</font></td>
<td width="20%" align="center" bgcolor="#0000FF" rowspan="2"><font
color="#FFFFFF">Total</font></td>
</tr>
<tr>
<td width="1%" bgcolor="#0000FF">
<p align="center"><font color="#FFFFFF">Kode</font></td>
<td width="35%" bgcolor="#0000FF">
<p align="center"><font color="#FFFFFF">Nama</font></td>
<td width="19%" bgcolor="#0000FF">
<p align="center"><font color="#FFFFFF">Harga</font></td>
</tr>
<tr>
<td width="8%" align="center">1</td>
<td width="12%">BK-001</td>
<td width="29%">Gudang Garam International</td>
<td width="14%">
<p align="right">Rp. 3.300,00</td>
<td width="17%" align="center">2</td>
<td width="20%" align="center">6.600,00</td>
</tr>
<tr>
<td width="8%" align="center">2</td>
<td width="12%">BE-555</td>
<td width="29%">Sampoerna A-Mild</td>
<td width="14%">
<p align="right">Rp. 3.500,00</td>
<td width="17%" align="center">1</td>
<td width="20%" align="center">&nbsp;3.500,00</td>
</tr>
</table>
</body>
</html>

Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
16
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

BAB IV
FRAME


Frame digunakan untuk membagi jendela browser menjadi beberapa bagian dan masing-masing
terdiri dari dokumen HTML tersendiri. Untuk membuat sebuah frame, tag yang digunakan ialah
<Frameset> dan <Frame>. Selain itu untuk menampilkan sebuah halaman alternatif jika browser
tidak mendukung frame digunakan tag <Noframe>.

Tag <Frameset> mempunyai beberapa atribut yaitu :
Atribut Keterangan
Rows Membuat frame horisontal sekaligus mendefinisikan
lebarnya.
Cols Membuat frame vertikal sekaligus mendefinisikan
lebarnya.
BorderColor Warna bingkai frame

Tag <Frame> juga mempunyai beberapa atribut:
Atribut Keterangan
Src Nama file HTML yang digunakan sebagai isi frame
MarginHeight Batas atas dan bawah antara dokumen dengan bingkai
dalam pixel
MarginWidth Batas kiri dan kanan antara dokumen dengan bingkai
dalam pixel
Scrolling Tampilan scrollbar berisi nilai yes, no atau auto.
NoResize Jika disebutkan maka frame tidak dapat diubah ukurannya
Name Nama dari obyek frame
Border Ukuran frame
Contoh:






awal.htm
menu.htm
atas.htm
bawah.htm
index.htm
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
17
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com



Dengan desain di atas, maka pembagian daerah / frame terdiri dari : 3 baris (rows) dan
pada frame tengah terbagi menjadi 2 kolom (cols). Untuk membagi daerah sesuai yang
diinginkan dapat dilihat pada index.htm.

atas.htm :
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body background="gambar/web_blanja_01.gif">
</body>
</html>
menu.htm :
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body background="gambar/web_blanja_02.gif">
<form name="fku" method="post" action="tes.asp">
<table width="87%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-
serif">Account</font></td>
<td><input name="txtuser" type="text" id="txtuser" size="15"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-
serif">Password&nbsp;&nbsp;</font></td>
<td><input name="txtpass" type="password" id="txtpass"
size="15"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><div align="right">
<input name="cmdlogin" type="button" id="cmdlogin"
value="Login">
</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2"><font color="#FF0000" size="1" face="Verdana,
Arial, Helvetica, sans-serif">*
Baca syarat daftar di menu syarat di atas</font></td>
</tr>
</table>
</form>
</body>
</html>
bawah.htm :
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
18
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

</head>

<body background="gambar/web_blanja_04.jpg">
</body>
</html>
awal.htm :
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body background="gambar/web_blanja_03.gif">
<p><font size="2" face="Verdana, Arial, Helvetica, sans-
serif"><strong>SELAMAT
DATANG di BELANJA On Line....</strong></font></p>
<table width="97%" border="0" align="justify" cellpadding="0"
cellspacing="0">
<tr>
<td><p align="justify"><font size="2" face="Verdana, Arial,
Helvetica, sans-serif"><DD></DD>Site ini merupakan contoh amat dasar
sekali deh yang dibangun dan ditata sedemikan rupa hingga memakan waktu
kurang lebih <strong>2 hari saja</strong>. Jadi diharap maklum jika dari
segi tampilan, isi dan bobot transaksi jauh dari nilai sempurna. Saat
kalimat ini diketikpun masih disambi makan siang. Jadi waktu
pengerjaanpun juga disambi itupun 'kalo ingat' dan 'kalo mood bagus'
(plus kalo sempat =&gt; biar kliatan sibuk kayak yg lain...
ssstttt).</font></p>
<p align="justify"><font size="2" face="Verdana, Arial, Helvetica,
sans-serif"><DD></DD>Pada intinya diharapkan dengan site yang tidak bagus
ini, <strong>mahasiswa dapat membuat yang lebih baik</strong> dari segi
tampilan, isi maupun bobot transaksi hingga diharapkan <strong>mahasiswa
yang mempunyai ilmu lebih buanyuak</strong> dan pengalaman mendesain
dapat (<em>at least</em>) membuat site yang dapat mendukung <em>e-
commerce</em> sesuai yang diinginkan.</font></p>
<p align="justify"><font size="2" face="Verdana, Arial, Helvetica,
sans-serif"><DD></DD><strong>Tool atau perangkat yang digunakan</strong>
membangun site ini lumayan sedikit seperti <strong>Adobe Photoshop 7.0
dan Macromedia Dreamweaver saja</strong>. Tanpa <strong>CMS
</strong>(<em>Content Management System</em>) atau <strong>MSG</strong>
(<em>Monosodium Glutamat</em>) ???. Database hanya menggunakan
<strong>Microsoft Access</strong> dan Bahasa yang digunakan hanya
<strong>HTML</strong> (<em>Hypertext Markup Language</em>),
<strong>ASP</strong> (<em>Active Server Pages</em>) dan sedikit bahasa
<strong>VBscript</strong> (<em>Visual Basic Script</em>).</font></p>
<p><font size="1" face="Verdana, Arial, Helvetica, sans-
serif"><strong>Save your soul, save your earth, down to earth (intinya
jangan berlebihan (Narzis)). Let's make things better. Courious in IT, IT
developer is nice but IT copycat is worse. Open source is good but your
mind must open...</strong></font></p>
</td>
</tr>
</table>
<p align="justify">&nbsp; </p>
<p align="justify">&nbsp;</p>
</body>
</html>
index.htm : pembagian frame
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
19
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com


<frameset rows="159,*,35" cols="*" framespacing="0" frameborder="NO"
border="0">
<frame src="atas.htm" name="topFrame" scrolling="NO" noresize >
<frameset rows="*" cols="278,*" framespacing="0" frameborder="NO"
border="0">
<frame src="menuku.asp" name="leftFrame" scrolling="NO" noresize>
<frame src="awal.htm" name="mainFrame">
</frameset>
<frame src="bawah.htm" name="bottomFrame" scrolling="NO" noresize>
</frameset>
<noframes>
<body>

</body></noframes>
</html>
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
20
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

BAB V
FORM

A. FORM
Untuk membuat sebuah form tag-tag yang diperlukan adalah:
• Tag <Form>
Merupakan tag yang digunakan untuk mendefinisikan form. Tag ini mempunyai dua
atribut penting yaitu Method dan Action. Atribut method digunakan untuk
menentukan metode pengiriman data, sedangkan Action digunakan untuk
menentukan file yang akan dijadikan tujuan pengiriman data (action page).
• Tag <TextArea>
Digunakan untuk membuat sebuah list box. Tag ini mempunyai 3 atribut yaitu :
Atribut Keterangan
Rows Jumlah baris text area
Cols Jumlah kolom text area
Name Nama dari obyek text area
• Tag <Select>
Digunakan untuk membuat sebuah daftar pilihan (combo box). Tag ini memiliki
beberapa atribut yaitu :
Atribut Keterangan
Name Nama dari obyek select
Size Jumlah pilihan yang akan ditampilkan. Jika diberi nilai 1,
pilihan ditampilkan sebagai dropdown list. Jika diberi nilai
2 atau lebih, pilihan akan ditampilkan sebagai Scroll box.
Multiple Untuk memilih pilihan lebih dari satu
• Tag <Input>
Digunakan untuk membuat komponen-komponen yang digunakan untuk meminta
informasi dari user, misalnya textbox, checkbox, button, dan lain-lain. Tag ini tidak
memerlukan tag penutup. Atribut-atribut untuk tag ini antara lain :
Atribut Keterangan
Name Nama dari obyek. Atribut ini harus dituliskan kecuali untuk
tipe submit atau clear.
Size Ukuran obyek textbox
MaxLength Jumlah maksimum karakter yang bisa diinputkan
Value Untuk textbox, menentukan teks yang tertulis, untuk
checkbox atau radio button, menentukan nilai item yang
dipilih. Untuk Submit dan Reset, menentukan teks yang
tertulis pada tombol.
Checked Hanya digunakan untuk checkbox atau radio button.
Untuk menentukan pilihan default.
Menentukan tipe input yang dibuat, antara lain :
Type Keterangan
Text Textbox
Password Textbox dengan mask password
Checkbox Check box
Radio Radio Button
Reset Button untuk me-reset inputan
Type
Submit Button untuk mengirimkan data form

Contoh :
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
21
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

<html>
<head>
<title>Form Registrasi</title>
</head>
<body>
<p align="left"><big><big>Form
Registrasi
Mahasiswa</big></big></p>
<form method="POST"
action="frmAction">
<table border="0"
width="73%">
<tr>
<td width="28%">Nama</td>
<td width="72%"><input
type="text" name="Nama"
size="20"></td>
</tr>
<tr>
<td
width="28%">Alamat</td>
<td width="72%"><input type="text" name="T2" size="37"></td>
</tr>
<tr>
<td width="28%">Pendidikan terakhir</td>
<td width="72%"><select size="1" name="Pdk">
<option selected>SMA</option>
<option>STM</option>
<option>MAN</option>
<option>Pondok Pesantren</option></select></td>
</tr>
<tr>
<td width="28%">Jenis Kelamin</td>
<td width="72%"><input type="radio" value="Laki-laki" checked
name="JK">Laki-laki&nbsp;
<input type="radio" name="JK" value="Perempuan">Perempuan</td>
</tr>
<tr>
<td width="28%">Hobi</td>
<td width="72%"><input type="checkbox" name="SB1" value="Sepak
bola">Sepak
Bola <input type="checkbox" name="SB2" value="Membaca
MSB">Membaca majalah
sepak bola
<br><input type="checkbox" name="SB3" value="nonton SB">Nonton
Sepak
bola </td>
</tr>
<tr>
<td width="28%">Catatan</td>
<td width="72%"><textarea rows="2" name="Catatan"
cols="39"></textarea></td>
</tr>
<tr>
<td width="28%"></td>
<td width="72%"><input type="submit" value="Submit"
name="B1"><input type="reset" value="Reset" name="B2"></td>
</tr>
</table>
</form>
<p>&nbsp;</p>
</body>
</html>
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
22
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

BAB VI
MACROMEDIA DREAMWEAVER MX

A. PENGENALAN
Macromedia Dreamweaver versi MX merupakan salah satu dari sekian aplikasi untuk
membuat atau membangun sebuah web site. Banyak apllikasi lain seperti Microsoft
Frontpage, Zend Studio, Web Page Maker dan masih banyak lagi produk aplikasi. Banyak
kemudahan untuk mendesain website menggunakan Dreamweaver selain kemudahan
penggunaan toolnya, Dreamweaver juga memiliki fungsi yang bias dikatakan komplet
seperti membuat CSS, XML atau mendukung beberapa bahasa database yang popular
seperti PHP, ASP, Perl atau bahasa script seperta Java, VB atau C# dan lain-lain. Berikut
tampilan awal Macromedia Dreamweaver setelah tampilan pilihan ke user yang akan
mendesain lembar kerja.







Berikut keterangan dari penjelasan bagian-bagian di atas :
- Menu Bar, berfungsi untuk menyediakan funngsi menyimpan, membuka web, tampilan,
pengeditan, modifikasi dan bantuan
- Insert Bar, berisi tab-tab untuk menyisipkan berbagai macam objek seperti image, tabel
dan frame ke dalam dokumen
- Tool bar , berisi tombol-tombol dari salah satu tab insert yang aktif.
- Document toolbar, berisi tombol-tombol dan menu pop-up yang menyediakan tampilan
berbeda dari Document Window, Misalnya Code, Split atau Design
- Panels Group, adalah kumpulan panel yang saling berkaitan satu sama lainnya yang
dikelompokkan di bawah satu judul
- Welcome Window, adalah jendela awal dengan pilihan Design, Code atau Develop
- Properties Inspector, digunakan untuk mengatur file-file dan folder-folder yang
membentuk web site.

B. MEMBANGUN / MENGEDIT HTML
Untuk membangu atau mengedit HTML, ada 3 pilihan tampilan design yaitu Code, Split atau
design. Code hanya menampilkan kode / listing / script dari Tag-tag HTML yang dibuat. Split
Menu Bar Tool Bar Document
ToolBar
Properties
Inspector
Panel Group Insert
Bar
Welcome
Window
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
23
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

menampilkan kode / listing / script dan menampilkan hasil jadi jika ditampilkan di browser.
Sedangkan Design menampilakan tampilan yang akan tampil di browser tanpa harus melihat kode
/ listing / script HTML. Berikut di bawah tampilan dalam bentuk split :




Jika ingin mengedit script di daerah coding, maka terdapat fasilitas bantuan
sehingga mempermudah user untuk mengedit HTML. Semisal mengetikkan
perintah <p> setelah menekan karakter > maka secara otimatis Dreamweaver
akan menutup tag yang telah diketikkan. Jika ingin mendapat fungsi lain di
dalam tag, user hanya menekan spasi untuk mengaktifkan fungsi-fungsi tag
yang dimaksud seperti pada gambar di samping. Kemudian tinggal memilih /
menyorot fungsi yang dibagun dan tinggal menekan enter saja.


Untuk memformat tampilan
atau menambahkan fungsi
lain yang telah disediakan di
dreamweaver, maka mengaktifkan insert bar dan tinggal diterapkan di daerah design


C. MEMBANGUN ATAU MENGHUBUNGKAN SITE
Untuk membangun atau menghubungkan Site ke server, ada beberapa yang
perlu diperhatikan yaitu letak server ada dimana. Namun secara
keseluruhan, langkah awal yang harus dilakukan adalah mengaktifkan panel
Files dan tab Site sehingga tampil sebuah link aktif bertuliskan Define a Site
seperti tampilan di samping ini :
Langkah awal setelah mengaktifkan (klik) define site adalah :
Coding
Design
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
24
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

1. Masukkan nama site yang diinginkan kemudian
tekan tombol Next

2. Masukkan jenis teknologi server yang nantinya mendukung site anda, Pilih Yes kemudian
pilih teknologi server yang diinginkan. Ada beberapa pilihan : ASP Javascript; ASP
VBScript; ASP .NET C#; ASP.NET VB; Coldfusion; JSP atau PHP MySQL. Bisa dipilih ASP
VBScript.
3. Jika Server letaknya ada di komputer client atau user membangun server di
tempat server / IIS diinstal, maka langkah - langkah selanjutnya yang perlu anda
perhatikan sebagai berikut :



Selanjutnya tekan tombol next dan akan tampil jendela baru dengan pertanyaan untuk
mendefinisikan URL atau alamat HTTP untuk site yang akan dibangun. Biasanya dengan
nama http://localhost. Kemudian tekan tombol dan harus tampil pesan sebagai
berikut :



Tekan tombol Next, kemudian langkah terakhir tinggal menonaktifkan remote server
dengan memilih option No dan tekan tombol Next, terakhir adalah tampilan informasi yang
telah dipilih, kemudian tekan tombol Done.

Jika letak server di tempat lain / user tidak terinstall IIS namun berhubungan ke
jaringan Lokal / LAN dimana harus berhubungan dengan FTP (File Transfer
Protocol) yang disediakan, maka langkah yang perlu diperhatikan sebagai berikut :
klik
Folder kerja anda
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
25
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com



Kemudian tekan tombol Next kemudian tampil jendela di bawah dimana alamat FTP diisi
sesuai dengan alamat FTP yang telah ditentukan. Biasanya merupakan nama server (di
dalam contoh adalah stmik), namun bisa saja merupakan alamat FTP dengan port yang
berbeda (misal : stmik:2121).



Kemudian isi folder yang telah di buat di FTP yang dimaksud. Kemudian tekan tombol
dan wajib tampil jendela pesan berikut :

klik
Folder kerja anda
Wajib aktif
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
26
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com



Tekan tombol Next, kemudian jendela berikutnya adalah alamat URL yang digunakan,
biasanya adalah nama ftp/nama folder contoh : http://stmik/titan kemudian tekan tombol
Test URL dan akan tampil jendela pesan dan WAJIB menampilkan pesan "The URL Prefix
test was Successful¨. Tekan tombol OK dan kemudian Next dan tampil jendela baru yang
akan menawarkan apakah user lain akan di simpan transaksi koneksi ke site yang telah di
buat. Untuk mempercepat proses, disarankan untuk menonaktifkan catatan keluar/masuk
(log) dengan memilih option No. Setelah itu tekan tombol Next dan jendela menampilkan
informasi yang kita isikan sebelumnya dan tekan tombol Done. Langkah selajutnya
perhatikan Files Panel yang berlambang klik lambang tersebut untuk menghubungkan
komputer anda dengan server sehingga tampil lambang untuk mengirim file dari
direktori / folder kerja anda ke server (upload), tekan tombol put tapi jika anda ingin
mengirim dari server ke direktori kerja anda (download) tekan tombol get . Jika
berhasil maka files panel akan berisi file-file anda di server dengan alamat site adalah
folder anda di server.




Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
27
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

<html>
<head>
<title> VBSCRIPT </title>
<script language=VBSCRIPT>
Dim strNilai
Dim strCount

Sub cmdHitung_Onclick()
-- Command / Perintah --
End sub

</script>
</head>
<body>
</body>
<html>
<head><title> VBSCRIPT </title></head>
<body>
<script language=VBSCRIPT>
document.write “Selamat datang di Dunia Maya”
</script>
</body>
</html>
BAB VII
VB SCRIPT

A. DASAR-DASAR VB SCRIPT
Sekali pun HTML hingga saat ini terus dikembangkan, namun dirasakan masih banyak
kekurangan. Oleh karena itu banyak dikembangkan bahasa-bahasa pemprograman lain (script)
yang dapat disisipkan ke dalam HTML untuk menambahkan unjuk kerja dokumen HTML. Untuk
Menyisipkan script, dapat digunakan tag <SCRIPT>. Tag ini dapat digunakan pada bagian head
maupun body. Script yang diletakkan pada bagian head umumnya berupa deklarasi fungsi.
Bahasa script yang banyak digunakan saat ini antara lain VBScript dan JavaScript.

a. Contoh Penggunaan Tag Script di halaman HTML yang diletakkan di bagian tag head

b. Contoh Penggunaan Tag Script di halaman HTML yang diletakkan di bagian tag body


VBScript merupakan skrip pemprograman yang diperkenalkan oleh Microsoft. Seperti bahasa
pemprograman buatan Microsoft lainnya seperti Visual Basic dan VBA, VBScript pun mewarisi
kemudahan kedua bahasa pendahulunya, bahkan sintaksis pemprogramannya bisa dikatakan
sama termasuk fungsi-fungsi dasar pemprograman dan pemprograman berorientasi obyeknya.
Karena pembahasan syntax dan fungsi sudah dibahas di mata kuliah VBA dan VB, di sini hanya
dibahas sedikit cara penggunaan VBScript di halaman HTML.

Microsoft Internet Explorer mempunyai beberapa obyek yang dapat digunakan untuk
memanipulasi browser. Umumnya setiap browser mempunyai struktur model yang berbeda,
namun tetap mengikuti standar tertentu. Bahasa pemprograman VBScript tidak jauh berbeda
dengan VBA / Visual Basic yang sudah pernah kita pelajari. Namun seperti VBA dan Visual
Basic walaupun ada kesamaan bahasa, tetapi tidak 100% sama, demikian juga dengan
VBScript.
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
28
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

B. TIPE DATA
Tipe data yang digunakan di dalam VBScript sama dengan yang digunakan / dipakai di
dalam VBA dan Visual Basic.
Contoh : Integer, Long, Byte, Single, Double, Date , Time dsb.

Hasil :

Merubah Type Data di dalam suatu Variable

Command Keterangan
CBool Merubah data menjadi tipe data Boolean
CByte Merubah data menjadi tipe data Byte
CDate Merubah data menjadi tipe data Date
CDbl Merubah data menjadi tipe data Double
CInt Merubah data menjadi tipe data Integer
CLng Merubah data menjadi tipe data Long
CSng Merubah data menjadi tipe data Single
CStr Merubah data menjadi tipe data String

Contoh Penggunaan VBScript di dalam sebuah Halaman HTML menggunakan Obyek Form:
<html>
<head>
<title>Tipe Data di dalam VBScript</title>
</head>
<body>
<Script Language=VBScript>
nJumlah = 100000
nRata2 = 78.25
strNama = "Agoestira"

document.write Cstr(nJumlah) + " <-- ini adalah tipe data LONG"
document.write "<br>"
document.write Cstr(nRata2) + " <-- ini adalah tipe data Single"
document.write "<br>"
document.write strNama + " <-- ini adalah tipe data String"

</Script>
</body>
</html>
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
29
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com


Contoh 1
Hasil :
Contoh 2
<html>
<head>
<title>Penggunaan Button TextBox dan Pesan </title>
<Script Language=VBScript>
dim myForm
Set myForm = document.frm
Sub Cek(obj)
If if myform.obj=”” then
Msgbox “Nim Tidak Boleh Kosong Bos”
End If
End Sub
</Script>
</head>
<body>
<form name=”frm”>
<p>Nim: <input type="text" name="T1" size="20"></p>
<p>Nama: <input type="text" name="T2" size="20"></p>
<p><input type="submit" value="Submit" name="B1" onClick=Cek(“T1”)></p>
<html>
<head>
<title>Penggunaan Tombol dan Pesan </title>
<Script Language=VBScript>
Sub pesan()
Msgbox “Hay … aku sudah bisa… VBSCript”
End Sub
</Script>
</head>
<body>
<p>
<input type="button" value="Say Hallo" name="B3" onClick="Pesan">
</p>
</body>
</html>

Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
30
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

</form>
</body>
</html>


Hasil:








Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
31
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

BAB VIII
DASAR-DASAR ASP
A. PENDAHULUAN
Pada pembahasan materi HTML telah dijelaskan bagaimana cara membuat form. Namun jika
dilihat lebih dalam, form yang sebelumnya kita buat masih belum bisa disimpan ke dalam
sebuah tabel di database. Untuk dapat mengkoneksikan data yang dikirimkan dari sebuah form
ke dalam tabel, perlu ditambahkan script tambahan seperti CGI (biasanya digunakan dalam
server dengan sistem operasi UNIX), Cold Fusion, Active Server Pages dan lain-lain.
Pada dasarnya ketiga script di atas mempunyai prinsip kerja yang hampir sama. Dalam modul
ini yang akan dibahas ialah Active Server Pages(ASP), mengingat script ASP sangat erat
hubungannya dengan VBScript, VB dan VBA.

File ASP merupakan sebuah file teks dengan ekstensi asp dan berisi kombinasi dari Teks, tag
HTML, Script-script lain seperti VBScript, JavaScript, dan perintah-perintah ASP sendiri. Untuk
dapat menggunakan ASP ada beberapa persyaratan yang harus dipenuhi antara lain :
1. Sistem Operasi yang digunakan oleh server ialah Windows 98 (untuk skala kecil) atau
Windows NT.
2. Menggunakan PWS (Personal Web Server) untuk Windows 98 atau IIS (Internet
Information System) versi 5.0 untuk Windows NT.

Cara kerja dari ASP dapat digambarkan sebagai berikut:

Penulisan skrip ASP
Skrip ASP sama halnya dengan VBSCRIPT dapat dimulai dengan menuliskan tag <SCRIPT> dan
dengan menambahkan nilai atribut RUNAT=SERVER, atau dapat juga dengan menuliskan tag
<% dan %>. Contoh penulisan syntax ASP dapat anda lihat pada contoh1.asp di bawah ini :


<html>
<head>
<title>Sintaksis Penulisan ASP</title>
<Script Language=VBScript RUNAT=”SERVER”>
function cetak(str1)
cetak = Cstr(str1)
end function
</Script>
</head>
<body>
<p>Fungsi cetak menghasilkan string :
<%=cetak(“Wearnes Education Center”)%></p>
</body>
</html>

Web Server
PWS/IIS
Internet User
HTML
Pages
ODBC
Microsoft Access Table
AS
ASP
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
32
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

B. OBJEK RESPONSE
Obyek Response adalah obyek built-in ASP yang digunakan untuk mengirimkan output dari
web server kepada client. Beberapa obyek response yang biasa di pakai bisa anda lihat pada
tabel di bawah ini:

Properti Response Keterangan
Buffer Mengindikasikan apakah buffer untuk halaman
web di aktifkan
Clear Menghapus isi buffer di web server
Redirect Memerintahkan web browser untuk
mengkoneksikan ke suatu URL(alamat lain)
Write Menuliskan teks ke browser sebagai String

Contoh sintaksis ASP murni bisa anda lihat seperti contoh2.asp di bawah ini :

<%
response.write “<HTML>”
response.write “<HEAD>”
response.write “<TITLE> SINTAKSIS ASP MURNI </TITLE>”
response.write “</HEAD>”
response.write “<BODY>”
response.write “TEKS INI DI TULIS MENGUNAKAN SKRIP ASP MURNI”
response.write “<br>”
response.write “Skrip ini menggunakan perintah response.write”
response.write “</BODY>”
response.write “</HTML>”
%>
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
33
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

BAB IX
KONEKSI DATABASE MENGGUNAKAN ASP

A. OBYEK SERVER
Obyek server pada ASP berfungsi menyediakan akses ke server. Pada koneksi database di
dalam asp, obyek server di gunakan untuk membuat mengakses ADODB yang terdapat di
server.
Properti Obyek Server Keterangan
CreateObject Menciptakan instant dari sebuah obyek
atau instant dari komponen server.
Contoh:
Server.CreateObject(“ADODB.Connection”)
Yaitu untuk menciptakan variabel yang di
gunakan untuk mengakses koneksi
database dengan ADODB
Mappath Mengkonversikan virtual path menjadi
path physical
Contoh:
Server.MapPath(“/dbase/mydata.mdb”)
Atau
Server.MapPath(“images/gambar1.jpg”)


B. MENAMPILKAN DATABASE DARI ACCESS
Untuk menampilkan Database Access ke dalam ASP membutuhkan suatu obyek koneksi
yang menghubungkan antara access dan asp. Obyek koneksi ini bisa di ciptakan
menggunakan bantuan obyek server (Server.CreateObject)

Sintaksis:
Set Koneksiku = Server.CreateObject(“ADODB.Connection”) ‘ Membuat koneksi baru
Set rsTabel = Server.CreateObject(“ADODB.Recordset”) ‘ Membuat Recordset baru

<html>
<head>
<title>:: Menampilkan Data ::</title>
<%
‘ Deklarasi Variabel
Dim Koneksi, RecSet, strKoneksi, strSQL
‘ Membuat koneksi database baru
Set Koneksi = Server.CreateObject("ADODB.Connection")
‘ Membuat Recordset baru untuk menampung data/tabel dari server ke memori
Set RecSet = Server.CreateObject("ADODB.Recordset")

‘ Menghubungkan Driver database dengan database
‘ dengan menggunakan koneksi string
strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "
strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")

‘Membuka koneksi
Koneksi.Open strKoneksi

‘Definisikan field dan tabel yang akan di tampilkan menggunakan SQL statement
strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA] ORDER BY [DATA PRIBADI MAHASISWA].NPM"

‘ Membuka Data sesuai dengan SQL Statemen dari Data source MHS
RecSet.Open strSQL, Koneksi, 1, 3
%>
</head>
<body>
<CENTER>
DATA PRIBADI MAHASISWA
</CENTER>
<HR>
<%
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
34
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

‘ Mengecek apakah recordset sudah terbuka
‘ jika belum maka akan di buka
If RecSet.State = 0 then RecSet.Open

‘ Memindahkan pointer record ke awal record
RecSet.MoveFirst

‘ Menuliskan Nama fields yang akan di tampilkan
Response.Write “NPM Nama Alamat <br>”
‘ membuat perulangan untuk menampilkan record
DO
‘ Tampilkan Record yang aktif
Response.Write RecSet(“NPM”)&” “& RecSet(“Nama”)& ” “& RecSet(“Alamat”)& “<br>”
‘ Baca record selanjutnya
RecSet.MoveNext
‘ Jika Sudah pada record yang terakhir maka perulangan akan berhenti
Loop Until RecSet.EOF

Response.Write("<hr>")
Response.Write "Total Mahasiswa : "
‘ Menunjukan jumlah record yang berada di dalam tabel Data pribadi Mahasiswa
Response.Write Cstr(RecSet.RecordCount)

‘ Menutup recordset dan koneksi
RecSet.Close
Set RecSet = Nothing
Set Koneksi = Nothing
%>
</body>
</html>

Pada tampilan di samping, data yang di sampaikan
masih tidak beraturan dan tidak bisa di baca atau
di analisa karena tidak adanya pembatas pada
setiap fields. Supaya data tersebut bisa di baca
dan mudah di mengerti maka disisipkan skrip html
yaitu tabel. Dengan tabel maka tampilan data bisa
diinformasikan dengan bagus. Sebaiknya
penampilan data tersebut ditata menggunakan
tabel seperti contoh di bawah ini:








<html>
<head>
<title>:: Menampilkan Data ::</title>
<%
Dim Koneksi, RecSet, strKoneksi, strSQL
Set Koneksi = Server.CreateObject("ADODB.Connection")
Set RecSet = Server.CreateObject("ADODB.Recordset")
strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "
strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")
Koneksi.Open strKoneksi
strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA]"
RecSet.Open strSQL, Koneksi, 1, 3
%>
</head>
<body>
<CENTER>
DATA PRIBADI MAHASISWA
</CENTER>
<%
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
35
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

If RecSet.State = 0 then RecSet.Open
RecSet.MoveFirst
Response.write "<table width='100%' border='1'>"
Response.write "<tr><td>NPM</td><td>Nama</td><td>Alamat</td></tr>"
DO
Response.write "<tr>"
Response.write "<td>"& RecSet("NPM") &"</td>"
Response.write "<td>"& RecSet("Nama") &"</td>"
Response.write "<td>"& RecSet("Alamat") &"</td>"
Response.Write "</tr>"
RecSet.MoveNext
Loop Until RecSet.EOF
Response.write "<tr><td colspan='3'>"
Response.Write "Total Mahasiswa : "
Response.Write Cstr(RecSet.RecordCount)
Response.write "</td></tr></table>"

RecSet.Close
Set RecSet = Nothing
Set Koneksi = Nothing
%>
</body>
</html>





C. MENGGUNAKAN OBYEK FORM DAN ACTION PAGE.
Contoh di atas digunakan untuk menampilkan semua data ke dalam browser. Sebuah Form
bisa di gunakan untuk mendefinisikan kriteria jika ingin menampilkan data tertentu. Berikut ini
adalah contoh penggunaan obyek form yang digunakan untuk memfilter data berdasarkan
kota.
Formfilter.asp

Hasil.asp

<html>
<head>
<title>:: Hasil Filter Data ::</title>
<%
Dim Koneksi, RecSet, strKoneksi, strSQL
Dim nField, nValue

<html>
<head>
<title>Pemfilteran Data Mahasiswa</title>
</head>
<body>
<center>
<form action="Hasil.asp" method="post">
<p><font face='verdana' size='2' >Filter Berdasarkan Fields : </font>
<select name="namaField" >
<option value="NPM">NPM</option>
<option value="NAMA">NAMA</option>
<option value="ALAMAT">ALAMAT</option>
<option value="KOTA">KOTA</option>
</select>
&nbsp;&nbsp;&nbsp;
<input name="isi" type="text" id="nval">
&nbsp;&nbsp;&nbsp;
<input type="submit" name="Submit" value="Filter">
</p>
</form>
</center>
</body>
</html>
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
36
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

Set Koneksi = Server.CreateObject("ADODB.Connection")
Set RecSet = Server.CreateObject("ADODB.Recordset")
strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "
strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")
Koneksi.Open strKoneksi

nField = Request.Form("namaField")
nValue = Request.Form("isi")
strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA] "
strSQL = strSql & " WHERE "& nField &"='" & nValue & "'"

RecSet.Open strSQL, Koneksi, 1, 3
%>
</head>
<body>
<CENTER>
DATA PRIBADI MAHASISWA
</CENTER>
<%
If RecSet.State = 0 then RecSet.Open
RecSet.MoveFirst
Response.write "<table width='100%' border='1'>"
Response.write "<tr><td>NPM</td><td>Nama</td><td>Nama</td><td>Kota</td></tr>"
DO
Response.write "<tr>"
Response.write "<td>"& RecSet("NPM") &"</td>"
Response.write "<td>"& RecSet("Nama") &"</td>"
Response.write "<td>"& RecSet("Alamat") &"</td>"
Response.write "<td>"& RecSet("KOTA") &"</td>"
Response.Write "</tr>"
RecSet.MoveNext
Loop Until RecSet.EOF
Response.write "<tr>"
Response.write "<td colspan='4'>"
Response.Write "Total Mahasiswa yang berasal dari " & nValue & " "
Response.Write Cstr(RecSet.RecordCount) & " Orang."
Response.write "</td></tr></table>"
RecSet.Close
Set RecSet = Nothing
Set Koneksi = Nothing
%>
<a href="formfilter.asp">Filter Data</a>
</body>
</html>

Tampilan Hasil.asp
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
37
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

BAB X
INPUT DATA DAN UPDATE DATA
DENGAN FORM DI ASP

A. INPUT DATA
Pada contoh-contoh sebelumnya, user hanya dapat mengambil data yang ada di data source
server. Untuk mengirimkan data dari form kemudian menambahkannya ke tabel di data source
ada beberapa aturan yang harus diperhatikan:
• •• • Setiap komponen input dalam form sebaiknya diberi nama sesuai dengan nama field yang
ada di dalam tabel.
• •• • Halaman form input seperti di bawah ini digunakan oleh user untuk memasukkan data.
Halaman yang berfungsi untuk menyimpan/menghubungkan data dengan server (halaman
action) harus didefinisikan di halaman ini dalam tag <form>.

Langkah 1: Membuat halaman Input dengan memasukkan semua nama field yang berada di
dalam data, dan di buatkan sebuah interface seperti di bawah ini:


Untuk tag form pada properti "Action¨, adalah untuk menentukan Alamat tujuan setelah
anda menekan tombol dengan type submit.
Langkah 2 : Membuat Halaman Konfirmasi
Halaman konfirmasi ini berisi tentang data yang di kirimkan dari halaman sebelumnya
dengan mengakses obyek Request:
Properti Request Keterangan
Form Data yang dikirim dari sebuah komponen yang
berada di dalam form
QueryString Membaca data yang dikirimkan melalui
‘ ----- Tag HTML -----

<form action="inputcek.asp" method="post">

‘ ----- Tag HTML -----

</form>

‘ ----- Tag HTML -----
Halaman tujuan
Type = TextArea
Type = Text
Select Option
Type = Reset
Type = Submit
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
38
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

<%
Response.buffer = true
Dim Koneksi, RecSet, strKoneksi, strSQL
Set Koneksi = Server.CreateObject("ADODB.Connection")
Set RecSet = Server.CreateObject("ADODB.Recordset")
strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "
strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")
Koneksi.Open strKoneksi
strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA]"
RecSet.Open strSQL, Koneksi, 1, 3

RecSet.Addnew

RecSet("npm") = Request.QueryString("x1")
RecSet("nama") = Request.QueryString("x2")
RecSet("alamat") = Request.QueryString("x3")
RecSet("kota") = Request.QueryString("x4")
RecSet("tgl_lahir") = Request.QueryString("x5")
RecSet("JK") = Request.QueryString("x6")

RecSet.Update

Recset.Close
Set Recset = Nothing
Set Koneksi = nothing
Response.Redirect("tampil.asp")
%>
parameter URL

Cotoh skrip untuk halaman konfirmasi :

Langkah 3 : Membuat Halaman Penyimpanan dan menampilkan Data

Pada halaman
penyimpanan ini Data
tidak akan di tampilkan,
karena Halaman ini
hanya berfungsi untuk
menyimpan data ke
tabel. Data yang
dimasukkan ke dalam
tabel adalah data yang
di kirim dari halaman
konfirmasi dengan
<% Response.Buffer=True %>
<html>
<head>
<title>Cek Penginputan Data Mahasiswa</title>
<%
Dim t_npm,t_nama,t_alamat
Dim t_kota,t_tgl,t_jkel
t_npm = Request.Form("txtNpm")
t_nama = Request.Form("txtnama")
t_alamat = Request.Form("txtAlamat")
t_kota = Request.Form("txtKota")
t_tgl = Request.Form("txttgl")
t_jkel = Request.Form("jKel")
%>
</head>
<body>
Input Data Mahasiswa :
<hr>
NPM : <%=t_npm%><br>
Nama : <%=t_nama%><br>
Alamat : <%=t_alamat%><br>
Kota : <%=t_kota%><br>
Tanggal Lahir : <%=t_tgl%><br>
Jenis Kelamin :
<%
if t_Jkel = 1 then
response.write “Laki-laki”
else
response.write “Perempuan”
End If
%>
<hr>
<p><a
href="simpan.asp?x1=<%=t_npm%>&x2=<%=t_nama%>&
x3=<%=t_Alamat%>&x4=<%=t_kota%>&x5=<%=t_tgl%>&
x6=<%=t_jkel%>">Simpan</a></p>
</body>
</html>
Memerintahkan web
browser untuk memanggil
halaman tampil.asp
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
39
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

menggunakan bantuan obyek request.

B. UPDATE DATA
Untuk mengubah data yang berada di dalam tabel, maka langkah pertama yang kita
lakukan adalah mencari data tersebut. Berikut ini adalah algoritma pencarian dan peng-
update-an data di dalam asp.

1. Tentukan Data yang akan di update.
2. Membuat koneksi untuk berhubungan dengan database.
3. Melakukan Pencarian, jika ketemu tampilkan dalam model form.
4. Melakukan Penyimpanan data yang diperbarui.

Silahkan anda lihat proses peng-update-an data di bawah ini.


























Setelah form pencarian diisi dan dikirimkan, halaman action di bawah ini akan mencari dan
menampilkan data dalam form kedua.

cekedit.asp
Script formedit.asp
<html>
<head>
<title>Form Pengeditan Data Mahasiswa</title>
</head>
<body>
<h1>Pengeditan Data</h1>
<form action="cekedit.asp" method="post">
<table width="337" border="1" cellspacing="0"
cellpadding="0">
<tr>
<td width="125">NPM</td>
<td width="369">
<input name="txtNpm" type="text"
id="txtNpm" value="101970" size="8">
</td>
</tr>
<tr>
<td>Nama Mahasiswa</td>
<td>
<input name="txtNama" type="text"
id="txtNama" size="25">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="Submit"
value="Submit">
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" name="Reset"
value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
<head>
<%
Dim Koneksi, RecSet, strKoneksi, strSQL
Set Koneksi = Server.CreateObject("ADODB.Connection")
Set RecSet = Server.CreateObject("ADODB.Recordset")
strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "
strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")
Koneksi.Open strKoneksi
strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA] "
strSQL = strSQL & " WHERE NPM ='" & Request.Form("txtNPM") & "'"
strSQL = strSQL & " and NAMA = '" & Request.Form("txtNama") & "'"
RecSet.Open strSQL, Koneksi, 1, 3
%>
</head>

Fungsi pencarian Data
Kriteria di terima dari form halaman
sebelumnya.
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
40
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

Konfirmasi dan menampilkan hasil pencarian

<body>
<% IF RECSET.RECORDCOUNT < 1 THEN %>
IDAK DI TEMUKAN NPM <%=Request.Form("TXTNPM")%>
EGAN NAMA <%=Request.Form("TXTNAMA")%><BR>
<% else %>
<h1><center>Hasil Pencarian</center></h1>
<form action="edit.asp" method="post">
<table width="500" border="1">
<tr>
<td width="143">NPM</td>
<td width="351">&nbsp;
<input name="txtNpm" type="text" id="txtNpm" value="<% Response.write
RecSet("NPM") %>" size="10">
<input type="hidden" name="crNPM" value="<% Response.write RecSet("NPM") %>">
<input type="hidden" name="crNAMA" value="<% Response.write RecSet("NAMA") %>">
</td>
</tr>
<tr>
<td width="143">NAMA</td>
<td width="351">&nbsp;
<input name="txtNama" type="text" id="txtNama" value="<% Response.write
RecSet("NAMA") %>" size="20">
</td>
</tr>
<tr>
<td width="143" valign="top">ALAMAT</td>
<td width="351">&nbsp;
<textarea name="txtAlamat" cols="30" rows="3" id="txtAlamat"><% Response.write
RecSet("ALAMAT") %></textarea>
</td>
</tr>
<tr>
<td width="143">KOTA</td>
<td width="351">&nbsp;
<input name="txtKota" type="text" id="txtKota" value="<% Response.write
RecSet("KOTA") %>" size="10">
</td>
</tr>
<tr>
<td width="143">TANGGAL LAHIR</td>
<td width="351">&nbsp;
<input name="txtTgl" type="text" id="txtTgl" value="<% Response.write
RecSet("TGL_LAHIR") %>" size="10" maxlength="10">
Format tanggal mm/dd/yyyy</td>
</tr>
<tr>
<td width="143">JENIS KELAMIN</td>
<td width="351">&nbsp;
<select name="jKel" id="jKel">
<% if recset("jk")=1 then %>
<option value="1" selected>Laki-laki</option>
<option value="2">Perempuan</option>
<% else %>
<option value="1">Laki-laki</option>
<option value="2" selected>Perempuan</option>
<%end if%>
</select>
</td>
</tr>
</table>
</form>
<br>
<input name="Submit" type="submit" value="Edit">
&nbsp;&nbsp;&nbsp;
<input name="Reset" type="reset" value="Batal">
</form>
<% END IF %>
<a href="FORMEDIT.ASP">CARI LAGI</a>

‘ baris selanjutnya
</body>
<%
RecSet.Close
Set RecSet = Nothing
Set Koneksi = Nothing
%>
</html>
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
41
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com



Setelah field diisi dengan data yang baru kemudian tahap terakhir yaitu menyimpan hasil
peng-update-tan data.

edit.asp



<%
Dim Koneksi, RecSet, strKoneksi, strSQL
Set Koneksi = Server.CreateObject("ADODB.Connection")
Set RecSet = Server.CreateObject("ADODB.Recordset")
strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "
strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")
Koneksi.Open strKoneksi

Request.Form("isi")
strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA] "
strSQL = strSQL & " WHERE NPM ='" & Request.Form("crNPM") & "'"
strSQL = strSQL & " and NAMA = '" & Request.Form("crNama") & "'"

RecSet.Open strSQL, Koneksi, 1, 3

RecSet("npm") = Request.Form("txtNPM")
RecSet("nama") = Request.Form("txtNAMA")
RecSet("alamat") = Request.Form("txtALAMAT")
RecSet("kota") = Request.Form("txtKOTA")
RecSet("tgl_lahir") = Request.Form("txtTGL")
RecSet("JK") = Request.Form("JKEL")

RecSet.Update

RecSet.Close
Set RecSet = Nothing
Set Koneksi = Nothing

Response.Redirect("tampil2.asp")
%>
Perintah untuk mengupdate
SQL = memfilter data/mencari
data yang sesuai
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
42
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com

BAB XI
MENGHAPUS DATA
dan
MEMBUAT VARIABEL SESSION

A. MENGHAPUS DATA
Untuk mengubah data yang berada di dalam tabel, maka langkah pertama yang kita lakukan
adalah mencari data tersebut. Berikut ini adalah algoritma pencarian dan peng-update-an data
di dalam asp.

1. Tentukan Data yang akan di hapus.
2. Membuat koneksi untuk berhubungan dengan database.
3. Melakukan Pencarian, jika ketemu tampilkan dalam model form.
4. Melakukan penghapusan data.

Langkah untuk menghapus data merupakan pengulangan langkah untuk mengedit/update
data, hanya saja yang berbeda pada penghapusan data ini adalah langkah yang ke empat.
Yaitu fungsi update di ganti menjadi fungsi hapus. Untuk lebih jelasnya silahkan anda lihat
proses penghapusan data berikut ini:
1. Menentukan data yang akan di hapus

2. Menampilkan hasil pencarian


<a href=”hapus.asp?kriteria=<%=npm%>”> hapus</a>
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
43
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com



3. Penghapusan data dan menampilkan hasil penghapusan
Hapus.asp
B. MEMBUAT OBYEK SESSION
Obyek Session bekerja pada level session web. Yang dimaksud level session adalah saat client
meminta layanan aplikasi web, web server akan membuat satu session untuk user tersebut.
Lingkungan session dapat dipakai untuk berbagi informasi antara halaman web satu dengan
lainnya sebatas masih dalam satu user. Contoh skrip berikut akan menyimpan informasi nim
dan nama mahasiswa yang melakukan login pada halaman login yang di simpan dalam variabel
session.
Halaman Login.asp
<%
Dim Koneksi, RecSet, strKoneksi, strSQL
Set Koneksi = Server.CreateObject("ADODB.Connection")
Set RecSet = Server.CreateObject("ADODB.Recordset")
strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "
strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")
Koneksi.Open strKoneksi

strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA] "
strSQL = strSQL & " WHERE NPM ='" & Request.QueryString("kriteria") & "'"

RecSet.Open strSQL, Koneksi, 1, 3

RecSet.delete

RecSet.Close
Set RecSet = Nothing
koneksi.close
Set Koneksi = Nothing
Response.Redirect("tampil2.asp")
%>
Menerima data dari
halaman sebelumnya.
<html>
<head>
<title>Halaman Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<center>

<form action="ceklogin.asp" method="post">

<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr align="center" valign="middle">
<td colspan="3" bgcolor="#999999"> <font color="#FFFFFF" size="3"
face="verdana"><strong>Login User</strong></font></td>
</tr>
<tr>
<td width="85" align="right"><font size="2" face="verdana">NIM&nbsp;</font></td>
<td width="201" bgcolor="#DDDDDD"><font size="2" face="verdana">&nbsp;
<input name="txtNim" type="text" id="txtNim" size="8" maxlength="8">
</font></td>
<td width="214" bgcolor="#CCCCCC"><font size="2" face="verdana">&nbsp;-
isi dengan Nim Anda</font></td>
</tr>
<tr>
<td align="right"><font size="2" face="verdana">NAMA&nbsp;</font></td>
<td bgcolor="#DDDDDD"><font size="2" face="verdana">&nbsp;
<input name="txtNama" type="text" id="txtNama" size="25" maxlength="25">
</font></td>
<td bgcolor="#CCCCCC"><font size="2" face="verdana">&nbsp;- isi dengan
Nama Anda</font></td>
</tr>
<tr align="center" bgcolor="#999999">
<td colspan="3"><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
44
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com


Menu.asp







































<% Response.Buffer=true %>
<html>
<head>
<title> .:: Menu ::. </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<center>
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td colspan="3" bgcolor="#EEEEEE"><font size="1" face="verdana">NIM
:<%=Session("sNIM")%><br>
Nama :<%=Session("sNama")%></font><font size="1"
face="verdana">&nbsp;</font><font size="2" face="verdana"><br>
</font> <hr></td>
</tr>
<tr>
<td colspan="3" bgcolor="#999999"><font size="2" face="verdana">&nbsp;</font>
</td>
</tr>
<tr bgcolor="#DDDDDD">
<td colspan="2"><font size="2" face="verdana">Operasi Database</font></td>
<td width="163"><font size="2" face="verdana">&nbsp;</font></td>
</tr>
<tr bgcolor="#DDDDDD">
<td colspan="3"> <hr noshade></td>
</tr>
<tr bgcolor="#DDDDDD">
<td width="207"><font size="2" face="verdana"> Lihat Tabel Mahasiswa</font></td>
<td width="30"><font size="2" face="verdana">&nbsp;</font></td>
<td><font size="2" face="verdana">&nbsp;</font></td>
</tr>
<tr bgcolor="#DDDDDD">
<td><font size="2" face="verdana">Input Data</font></td>
<td><font size="2" face="verdana">&nbsp;</font></td>
<td><font size="2" face="verdana">&nbsp;</font></td>
</tr>
<tr bgcolor="#DDDDDD">
<td><font size="2" face="verdana">Edit Data Mahasiswa</font></td>
<td><font size="2" face="verdana">&nbsp;</font></td>
<td><font size="2" face="verdana">&nbsp;</font></td>
</tr>
<tr bgcolor="#DDDDDD">
<td><font size="2" face="verdana">Hapus Data Mahasiswa</font></td>
<td><font size="2" face="verdana">&nbsp;</font></td>
<td><font size="2" face="verdana">&nbsp;</font></td>
</tr>
Variabel session
untuk NiM
Variabel session
untuk Nama
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
45
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com



































































Hasil pengiriman Variable
Session dari Halaman Login.asp
<tr bgcolor="#DDDDDD">
<td colspan="3" bgcolor="#999999">&nbsp;</td>
</tr>
</table>
</center>
</body>
Sekolah Tinggi Manajemen Informatika & Komputer
PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang PERCURUAN TÌNCCÌ ASÌA MaIang

Mata Kuliah : Pemrograman WLB I halaman
46
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com


Ref:
Kurniawan, Andy, Belajar Sendiri Microsoft Active Server Pages, PT. Elex Media Komputindo Jakarta 2000
http://www.total.or.id/
Lenawati, Mei, Mahir dalam 7 hari Macromedia Dreamweaver 8 dengan PHP, Andi Offset Yogyakarta 2007

Sign up to vote on this title
UsefulNot useful