MATA KULIAH
PEMROGRAMAN WEB I
STMIK ASIA MALANG
! " # $ % # &' % $
# $
# % $
( % )
%
# * $ %
&' %
% ( *
! # ! +
$ ,
-
#- $
" #
$
!
.% %
#( $
i
(
( . /
' /
- 0 /
( #( , $ /
. . /
. ) 1
. ( ., 2 1
. 1
3 ' 345 6
. ' 6
. ' 6
. ' 6
. ' 7
.0 ' 7
8 7
.- 7
. 7
. % 3 7
. 9 :
! "# $
4
' ( ! " 4
- ' ' ! " ;
. ( ! " ;
% & # ' (
9 <
' " <
- /5
) *+ " ,
) *-+" $
8 /4
) " . "/ 0
/=
. ' /=
. ' /=
. ' /=
.( % ' /=
. 9 /=
. % /=
. % /=
' ) ! " /=
- /<
) ) 1 ,2
( . &' % 16
' ( 17
) ,3
1;
. 1;
' > ? 1=
/ ' & " 4 ' ,(
ii
> * 1<
' ( %% 1<
- > 8 % 6/
/ 14 1 * 22
( 66
' , ( 6:
/ " 14 " &4 ) & 5 20
( 6=
' > 6<
iii
Sekolah Tinggi Manajemen Informatika & Komputer
BAB I
INTERNET DAN SEARCH ENGINE
+ + +
2
- .
.
8
6 + ! +
(
/<4< ? ? 23
# * % ? % % % 2 $
,2 @
? 23
%
%
- ) # - % ) % $
( #, ( ( $
. *
%
? 23 6 ? %
, * - ' , * ,
/<4< % ? 23
> /<;1
*
?23
> ? 23 % A "23 A
A ? 23 A % . * . *
9 ( ?
7 6 - +
• 5 1
( , %
• & ' %
• # 8 5 4& & # +
' ( " ( "
( % #( $
% 8 ( " %
(2 % *
• % + % 5 ' + . 9. ! 1 :+
# $ ( 9 ?
% % //:
1
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
2 # # ?-+ %
- - % - % 5 1 '
- ( - % % " ' 7
- % 5 41 ' 81 = 14
8 4 5 + # + 3- $ % % 7 = 4 >
* E
- 58 1
- - % &7 - %
- - % .
- % -'
- - % -' - % <
- '' ' 5 1
% 55:
Area code: Telephone number:
@2A @0@(0((((
7 4 8
#41$
- - % <
- - % * ( ., 2
( % +
- ( % % %
- , telkomnet@instan
2
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
- 5'
- 2 5=5<=<<<<
- % % )
- ' 34 5
1 2 3 4 5
, " 4
+ 8 3 & 8
! ( .
# * $ % 8
2 5
+
& 5 '
(
& 5 <
( #
% % % $
& 5 1
'
& 5+ =
' H %
& 5!
'
& 5
% 3
& 5* .
*
3
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
& 5! 8
& 5" 5
, % .
>
A
'
I +)) C 3* 75 %
I +))C % I C
B 6 5
,?" #,
? % " % $ 4 C
7 1 5' 5 4 4D4
-
- ,?" www.weaneseducation.com
- 9> 32 3?
, " 5 4 &
- # ) ) $
- .- " +
♦ ' !
♦ , "
%
% .
0
E 4 F E 4 'F
% 3 .
E 4 'F , %
' J %
www.YAHOO.com
B % 3
E E % B
. B
% .
4
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
, www.Altavista.com
& B
% %
% B
% 3
2 www.Google.com
&
B % 3
B &
K % %L
" # % " + %
• '
' % 3 .- #- -$
' # . $
3 . #- &$
• % &
9
* %
5
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
>
6
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
BAB II
DASAR-DASAR HTML
! #
! "
! "
# $
' ." -3?2 % % " 0 /<=<
' ." E
+
• % %
• *
• %
# ) .
$
' ." %
! "
+ + - " ! "#
8 ! " . ! " E
! " 2
* ! " % 8 ! " 2 % -
! "
8 ! " E %
+
<html>
<head>
<title>Latihan 1</title>
</head>
<body>
Ini adalah teks yang ditampilkan di browser !!
</body>
</html>
M N M) N
! " M! N M)! N * *
. M N
7
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
- M' N M) N
! "
7 % - ! "#
' ! "
. ' M N
M) N M N +
&4
# $ 8 %
# ! %
# 0 K8 E L %
% ' E
' E
&
E
- +
<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>
- +
<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>
• M!?N
+
&4 *4
+" ? %
"
O
8
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
2
-
9
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
- +
<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>
• M! N P /. 4
(
- +
<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>
• M- N
(
- +
<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>
• % 8
% 8 . %
+
*4
M'N !
M N !
M N !
M,N 9
M N ! %
M' 9N !
M N ! %
M N %
M N %
• M8 N
8
M8 F8 % PL LG F- P G F O P, GN
- +
<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>
10
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
11
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
BAB III
GAMBAR DAN LINK
" " ! % " +
( ! " 8
+ 9 8 0 9 -@ 29 8 2
9 8 0 9 ,
! " M 9N M 9N
+
&4
?- 2
" 92
' " ?
" E
! E
E
- +
<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>
#
" 0 .
% % %
% M N
M N !?38 2 3 !?38
2 3
! "
- +
12
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
<html>
<head>
<title>Latihan 2</title>
</head>
<body bgproperties="fixed" link="#0000FF"
vlink="#FFFF00" alink="#800000">
<h1> <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>
7 #
. +
• M N
'
+
&4
' % 9
' -
'
' -
' - "
' - (
- %
- 0
!
"
& *
• M !N
,
• M ?N
,
• M (N
,
&4
13
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
' % 9
' -
'
' -
' - "
' - (
- 0
? 0
!
"
& *
14
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
- +
<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"> 3.500,00</td>
</tr>
</table>
</body>
</html>
15
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
BAB IV
FRAME
8 .
! " ,
M8 N M8 N
M2 N
M8 N +
&4
?
- *
' -
M8 N +
&4
% 2 ! "
! '
E
'
E
% %
2 ? O 0
2 2
' ,
- +
&
5
<
16
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
( ) + 6 # $
1 #% $ ,
<
<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>
4
<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> </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> </td>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-
serif">Password </font></td>
<td><input name="txtpass" type="password" id="txtpass"
size="15"></td>
</tr>
<tr>
<td> </td>
<td><div align="right">
<input name="cmdlogin" type="button" id="cmdlogin"
value="Login">
</div></td>
<td> </td>
</tr>
<tr>
<td> </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>
&
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
17
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
</head>
<body background="gambar/web_blanja_04.jpg">
</body>
</html>
5
<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 => 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"> </p>
<p align="justify"> </p>
</body>
</html>
< 1 & =
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
18
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
</body></noframes>
</html>
19
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
BAB V
FORM
*-+"
, . +
• M8 N
%
%
# % $
• M E N
( E 6 +
&4
? 0 E
- 0 E
2 2 E
• M %N
( #% E$
+
&4
2 2 %
O 0 0 /
0
1 % E
,
• M N
( .
E E % % E .
. +
&4
2 2 %
%
O , E E
E" 0
& , E E
% % E
, ?
- % ! % % E
,
+
81
E E E
E E
- % E - % E
? ? '
? ' .
'
- +
20
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
<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
<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> </p>
</body>
</html>
21
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
BAB VI
MACROMEDIA DREAMWEAVER MX
% #
% ( * * @
' %
8 Q '
( *
( *
- @ "
! % 0 * &' -R . '
% ( *
' ' ( % 9
' '
' . +
- " 4
- . %
- 5& .
- 4 5& . .
( % - (
- 5 % 41
- ? 5 ? ( - ( *
- 1 1 . .
22
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
) ) %
(
) ) % ! " ' +
0 % %
! "
M N N % ( *
0
.
)
8 (
+
" # $ +
23
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
/
2 E
1 * B
* + 0 * % D
&' % D 23 -RD 23 &'D - D 0 ! S" '
&' %
2 6' . 5 ' 8 ' 14 5 4 4 & 4 .
1 . ; 5 J
+
'5 '
* 5 ' D
E
,?" ! '
1 ;;5 5
+
2 E *
2 2 E
(
24
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
'5 '
* 5 ' D
? D& ' =
2 E 8
8 ' * #
% $ 8
# + +1/1/$
8
+
25
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
2 E ,?"
) % + +)) )
,?" 0 ' K ,?" E
%% L > 2 E
, % % )
# $ 2 2 E
( "
) * # $
* # $ 0
. *
*
26
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
BAB VII
VB SCRIPT
+ +) 7+
! "
> . # % $
! " ! " ,
% M -? N
%
' % &' % 0 * %
a. Contoh Penggunaan Tag Script di halaman HTML yang diletakkan di bagian tag head
<html>
<head>
<title> VBSCRIPT </title>
<script language=VBSCRIPT>
Dim strNilai
Dim strCount
Sub cmdHitung_Onclick()
-- Command / Perintah --
End sub
</script>
</head>
<body>
</body>
b. Contoh Penggunaan Tag Script di halaman HTML yang diletakkan di bagian tag body
<html>
<head><title> VBSCRIPT </title></head>
<body>
<script language=VBSCRIPT>
document.write “Selamat datang di Dunia Maya”
</script>
</body>
</html>
&' % %
% & ' % &' &' %
.
E &' &'
% &' % ! "
% 3E
,
' &' %
&' ) & ' % 2 &' &
' % /55T
&' %
27
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
&' % )
&' & ' %
- + " ' ( (
<html>
<head>
<title>Tipe Data di dalam VBScript</title>
</head>
<body>
<Script Language=VBScript>
nJumlah = 100000
nRata2 = 78.25
strNama = "Agoestira"
</Script>
</body>
</html>
! 5
( &
7
-' '
-' '
-( (
-( (
-
-" "
-
-
28
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
Contoh 1
<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>
! 5
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>
29
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
</form>
</body>
</html>
! 5
30
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
BAB VIII
DASAR-DASAR ASP
! #
! " % 2
,
% -9 #
* ,2 @$ - 8 % * * .
% (
% * * # $ %
&' % &' &'
8
! " % . % &' % 0 * % . ,
+
/ > * <= # % $
2
1 # * $ <= #
$* :5 2
- +
HTML
ODBC Pages
Internet User
ASASP
Web Server
PWS/IIS
45 ' 1
&' -? M -? N
?,2 P 3?&3?
GH HI - E % / +
<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>
31
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
- 6 + -
> ? .
* % '
+
1 + 1
'
- *
? %
,?"# $
- % 1 +
<%
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>”
%>
32
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
BAB IX
KONEKSI DATABASE MENGGUNAKAN ASP
- +) +
> * *
* (>('
*
1 -&8 ' .
- > % %
*
- +
Server.CreateObject(“ADODB.Connection”)
B % *
(>('
* *
%
- +
Server.MapPath(“/dbase/mydata.mdb”)
Server.MapPath(“images/gambar1.jpg”)
" " # + 77
, ( %%
%% > %
* # * - > %$
+
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")
‘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>
<%
33
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
Response.Write("<hr>")
Response.Write "Total Mahasiswa : "
‘ Menunjukan jumlah record yang berada di dalam tabel Data pribadi Mahasiswa
Response.Write Cstr(RecSet.RecordCount)
% +
<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>
<%
34
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
RecSet.Close
Set RecSet = Nothing
Set Koneksi = Nothing
%>
</body>
</html>
7 " %% - *-+" 7 - %
- 8
'
%
8
<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>
<input name="isi" type="text" id="nval">
<input type="submit" name="Submit" value="Filter">
</p>
</form>
</center>
</body>
</html>
<html>
<head>
<title>:: Hasil Filter Data ::</title>
<%
Dim Koneksi, RecSet, strKoneksi, strSQL
Dim nField, nValue
35
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
nField = Request.Form("namaField")
nValue = Request.Form("isi")
strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA] "
strSQL = strSql & " WHERE "& nField &"='" & nValue & "'"
36
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
BAB X
INPUT DATA DAN UPDATE DATA
DENGAN FORM DI ASP
% .% %
* , %
+
•
• !
! ) * #
% $ M N
Langkah 1:
% +
Type = Text
Type = TextArea
Select Option
Type = Reset
Type = Submit
, K % L
Langkah 2 : !
!
? U +
1 + J4
8 (
S %
37
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
,?"
- +
Langkah 3 : ! (
<%
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")
%>
38
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
,
% ' % .
.
/ (
1
6 %
7
. .
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">
<input type="reset" name="Reset"
value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
% % %
8 % (
%
<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
%>
39 </head>
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
<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">
<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">
<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">
<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">
<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">
<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">
<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"> </body>
<%
<input name="Reset" type="reset" value="Batal"> RecSet.Close
</form> Set RecSet = Nothing
<% END IF %> Set Koneksi = Nothing
<a href="FORMEDIT.ASP">CARI LAGI</a> %>
</html>
‘ baris selanjutnya
40
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
. .
<%
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.Close
Set RecSet = Nothing
Set Koneksi = Nothing
Response.Redirect("tampil2.asp")
%>
41
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
BAB XI
MENGHAPUS DATA
dan
MEMBUAT VARIABEL SESSION
" %!
,
% ' % . .
/ (
1
6 %
7
" )
B ,
+
/
1 %
42
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
6
!
<%
Dim Koneksi, RecSet, strKoneksi, strSQL
Set Koneksi = Server.CreateObject("ADODB.Connection") Menerima data dari
Set RecSet = Server.CreateObject("ADODB.Recordset") halaman sebelumnya.
strKoneksi = "Provider=Microsoft.Jet.Oledb.4.0; Data Source= "
strKoneksi = strKoneksi + Server.MapPath("mhs.mdb")
Koneksi.Open strKoneksi
RecSet.delete
RecSet.Close
Set RecSet = Nothing
koneksi.close
Set Koneksi = Nothing
Response.Redirect("tampil2.asp")
%>
" " - -
> * B * %
*
"
-
*
! "
<html>
<head>
<title>Halaman Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<center>
44
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
<tr bgcolor="#DDDDDD">
<td colspan="3" bgcolor="#999999"> </td>
</tr>
</table>
</center>
</body>
45
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
Sekolah Tinggi Manajemen Informatika & Komputer
Ref:
Kurniawan, Andy, Belajar Sendiri Microsoft Active Server Pages, PT. Elex Media Komputindo Jakarta 2000
+)) )
Lenawati, Mei, Mahir dalam 7 hari Macromedia Dreamweaver 8 dengan PHP, Andi Offset Yogyakarta 2007
46
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com