Modul Pemrograman Web I

MODUL
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 ?
% % //:
" " " % + 9 # :

5 5 1 54'
B
1
email : titania@asia.ac.id, blog : http://tit4ni4.wordpress.com
, " 55;" 4' " 1

- - % - % - ( - % % "
- - % + .
- - % )
- ( C % D %
- - % 2 E
- %
- - % < F +- %
#-> /$G
- - % <
- - % *
- % - % &
- > . # $ % !
?
- - % " = >
- - % -'
- - % 75
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
A " %! % -" + 9 + +) 7 +-) +: # ?

# % +
( % +
- ( % % %
- , telkomnet@instan
2
- 5'
- 2 5=5<=<<<<
- % % )
- ' 34 5
" % # +-%+ " +-? + $@

'
% + 3E 45
1 2 3 4 5
, " 4
+ 8 3 & 8
! ( .
# * $ % 8
2 5
+
& 5 '
(
& 5 <
( #
% % % $
& 5 1
'
& 5+ =
' H %
& 5!
'
& 5
% 3
& 5* .
*
3
& 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
, www.Altavista.com
& B
% %
% B
% 3
2 www.Google.com
&
B % 3
B &
K % %L
" # % " + %
• '
' % 3 .- #- -$
' # . $
3 . #- &$
• % &
9
* %
5
>
6
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
- M' N M) N
! "
7 % - ! "#
' ! "
. ' M N
M) N M N +
&4
# $ 8 %
# ! %
# 0 K8 E L %
% ' E
' E
&
E
- +
<html>
<head>
</head>
<body background="Setup.gif" bgproperties="fixed" bgcolor="#0000FF"
link="#0000FF"
vlink="#FFFF00" alink="#800000">
Contoh atribut body :
</body>
</html>
" = '4 ! "#

( ! " .
+
• M'?N
M'?N
3
• M N
M N
- +
<html>
<head>
</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
2
-
9
- +
<html>
<head>
</head>
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>
</head>
<body bgproperties="fixed" bgcolor="#FFFFFF"
link="#0000FF" vlink="#FFFF00" alink="#800000"
text="#000000">
<h1>Ini Heading 1</h1>
</body>
</html>
• M- N
(
- +
<html>
<head>
</head>
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>
</head>
alink="#800000" text="#000000">
<h1 align="center"><b><u><font face="Arial Narrow">Ini Heading 1</font></u></b></h1>
10
<Center><p><i><font face="Arial Unicode MS" color="#0000FF" size="4">Ini Heading

2</font></i></p></Center>
</body>
</html>
11
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>
</head>
<body bgproperties="fixed" link="#0000FF"
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
<html>
<head>
</head>
<body bgproperties="fixed" link="#0000FF"
<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
' % 9
' -
'
' -
' - "
' - (
- 0
? 0
!
"
& *
14
- +
<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>
color="#FFFFFF">Jumlah</font></td>
color="#FFFFFF">Total</font></td>
</tr>
<tr>
<td width="1%" bgcolor="#0000FF">
<p align="center"><font color="#FFFFFF">Kode</font></td>
<p align="center"><font color="#FFFFFF">Nama</font></td>
<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="20%" align="center">6.600,00</td>
</tr>
<tr>
<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="20%" align="center"> 3.500,00</td>
</tr>
</table>
</body>
</html>
15
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
( ) + 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>
</head>
<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>
17
</head>
<body background="gambar/web_blanja_04.jpg">
</body>
</html>
5
<html>
<head>
</head>
<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>
</head>
18
<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>
19
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
<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
BAB VI
MACROMEDIA DREAMWEAVER MX
% #
% ( * * @
' %
8 Q '
( *
( *
- @ "
! % 0 * &' -R . '
% ( *
' ' ( % 9
' '
' . +
- " 4
- . %
- 5& .
- 4 5& . .
( % - (
- 5 % 41
- ? 5 ? ( - ( *
- 1 1 . .
" " % ;" % ! "#

, ! " 6 -
- ) ) % . ! "
22
) ) %
(
) ) % ! " ' +
0 % %
! "
M N N % ( *
0
.
)
7 " " % " %! %

, *
* 2 %
8 (
+
" # $ +
23
/
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
(
6' 5 ' . 1 5 ; 4 ' 55 4 & 4&4 '

D # ' 5 ; # 4 & 4&4 * 9* 5 =
5: 8 ' +
24
'5 '
* 5 ' D
? D& ' =
2 E 8
8 ' * #
% $ 8
# + +1/1/$
8
+
25
2 E ,?"
) % + +)) )
,?" 0 ' K ,?" E
%% L > 2 E
, % % )
# $ 2 2 E
( "
) * # $
* # $ 0
. *
*
26
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
&' % )
&' & ' %
- + " ' ( (
<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>
! 5
( &
7
-' '
-' '
-( (
-( (
-
-" "
-
-
- &' % ! ! " > 8 +
28
Contoh 1
<html>
<head>
<title>Penggunaan Tombol dan Pesan </title>
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>
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
</form>
</body>
</html>
! 5
30
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
Microsoft Access Table
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
- 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
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")
‘ 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>
<%
33
‘ 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>
% +
<html>
<head>
<title>:: Menampilkan Data ::</title>
<%
strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA]"
%>
</head>
<body>
<CENTER>
</CENTER>
<%
34

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
Response.write "<tr><td colspan='3'>"
Response.Write "Total Mahasiswa : "
Response.Write Cstr(RecSet.RecordCount)
Response.write "</td></tr></table>"
RecSet.Close
%>
</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 nField, nValue
35

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

%>
</head>
<body>
<CENTER>
</CENTER>
<%
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 "<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
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
%>
<a href="formfilter.asp">Filter Data</a>
</body>
</html>
36
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
‘ ----- Tag HTML -----
<form action="inputcek.asp" method="post">
‘ ----- Tag HTML -----

Halaman tujuan
</form>
‘ ----- Tag HTML -----
Langkah 2 : !
!
? U +
1 + J4
8 (
S %
37
,?"
- +
<% 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>
Langkah 3 : ! (
<%
Response.buffer = true
Set Koneksi = Server.CreateObject("ADODB.Connection") (
Koneksi.Open strKoneksi !
strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA]"
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
,
% ' % .
.
/ (
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>
<%
strSQL = strSQL & " WHERE NPM ='" & Request.Form("txtNPM") & "'"
strSQL = strSQL & " and NAMA = '" & Request.Form("txtNama") & "'"
%>
39 </head>
<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
. .
<%
Request.Form("isi")
strSQL = strSQL & " WHERE NPM ='" & Request.Form("crNPM") & "'"
strSQL = strSQL & " and NAMA = '" & Request.Form("crNama") & "'"

SQL = memfilter data/mencari
RecSet("npm") = Request.Form("txtNPM") data yang sesuai
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 Perintah untuk mengupdate
RecSet.Close
Response.Redirect("tampil2.asp")
%>
41
BAB XI
MENGHAPUS DATA
dan
MEMBUAT VARIABEL SESSION
" %!
,
% ' % . .
/ (
1
6 %
7
" )
B ,
+
/
1 %
<a href=”hapus.asp?kriteria=<%=npm%>”> hapus</a>
42
6
!
<%
Set Koneksi = Server.CreateObject("ADODB.Connection") Menerima data dari
Set RecSet = Server.CreateObject("ADODB.Recordset") halaman sebelumnya.

strSQL = strSQL & " WHERE NPM ='" & Request.QueryString("kriteria") & "'"
RecSet.delete
RecSet.Close
koneksi.close
Response.Redirect("tampil2.asp")
%>
" " - -
> * B * %
*
"
-
*
! "
<html>
<head>
<title>Halaman Login</title>
</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 </font></td>
<td width="201" bgcolor="#DDDDDD"><font size="2" face="verdana">
<input name="txtNim" type="text" id="txtNim" size="8" maxlength="8">
</font></td>
<td width="214" bgcolor="#CCCCCC"><font size="2" face="verdana"> -
isi dengan Nim Anda</font></td>
</tr>
<tr>
<td align="right"><font size="2" face="verdana">NAMA </font></td>
<td bgcolor="#DDDDDD"><font size="2" face="verdana">
<input name="txtNama" type="text" id="txtNama" size="25" maxlength="25">
</font></td>
<td bgcolor="#CCCCCC"><font size="2" face="verdana"> - 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>
43 </html>
<% Response.Buffer=true %>

<html>
<head>
<title> .:: Menu ::. </title>
</head>
<body> &
<center> 2
<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" 2
face="verdana"> </font><font size="2" face="verdana"><br>
</font> <hr></td>
</tr>
<tr>
<td colspan="3" bgcolor="#999999"><font size="2" face="verdana"> </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"> </font></td>
</tr>
<td colspan="3"> <hr noshade></td>
</tr>
<td width="207"><font size="2" face="verdana"> Lihat Tabel Mahasiswa</font></td>
<td width="30"><font size="2" face="verdana"> </font></td>
<td><font size="2" face="verdana"> </font></td>
</tr>
<td><font size="2" face="verdana">Input Data</font></td>
</tr>
<td><font size="2" face="verdana">Edit Data Mahasiswa</font></td>
</tr>
<td><font size="2" face="verdana">Hapus Data Mahasiswa</font></td>
</tr>
44
<td colspan="3" bgcolor="#999999"> </td>
</tr>
</table>
</center>
</body>
Hasil pengiriman Variable

Session dari Halaman Login.asp
45
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

Modul Pemrograman Web I

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Modul Pemrograman Web I

Uploaded by

Copyright:

Available Formats

MODUL

" " " % + 9 # :

, " 55;" 4' " 1

A " %! % -" + 9 + +) 7 +-) +: # ?

" % # +-%+ " +-? + $@

* " " # "

" = '4 ! "#

<Center><p><i><font face="Arial Unicode MS" color="#0000FF" size="4">Ini Heading

<frameset rows="159,*,35" cols="*" framespacing="0" frameborder="NO"

" " % ;" % ! "#

7 " " % " %! %

6' 5 ' . 1 5 ; 4 ' 55 4 & 4&4 '

document.write Cstr(nJumlah) + " <-- ini adalah tipe data LONG"

- &' % ! ! " > 8 +

Microsoft Access Table

‘ Menghubungkan Driver database dengan database

‘ Mengecek apakah recordset sudah terbuka

‘ Memindahkan pointer record ke awal record

‘ Menuliskan Nama fields yang akan di tampilkan

‘ Menutup recordset dan koneksi

If RecSet.State = 0 then RecSet.Open

Set Koneksi = Server.CreateObject("ADODB.Connection")

RecSet.Open strSQL, Koneksi, 1, 3

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

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

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

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

<% Response.Buffer=True %>

RecSet.Open strSQL, Koneksi, 1, 3

RecSet.Update Perintah untuk mengupdate

<a href=”hapus.asp?kriteria=<%=npm%>”> hapus</a>

strSQL = "SELECT * FROM [DATA PRIBADI MAHASISWA] "

RecSet.Open strSQL, Koneksi, 1, 3

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

<table width="500" border="0" cellspacing="0" cellpadding="0">

<% Response.Buffer=true %>

Hasil pengiriman Variable

You might also like

<frameset rows="159,,35" cols="" framespacing="0" frameborder="NO"