| Bikin Form Active Server Pages | Home |
Artikel ini akan membahas mengenai pembuatan form sederhana dengan menngunakan ASP Programming. Database yang akan digunakan juga sederhana yaitu MS-Access 97. Tidak terlalu canggih memang, tapi lumayanlah buat yang ingin belajar ASP.
Alur/Flow dari program ini ini akan meminta user untuk memasukkan nama user, alamat user dan status user. Setelah itu akan terdapat tampilan konfirmasi. Untuk memastikan user telah mengisi form dengan benar. User dapat kembali ke halaman awal bila user tidak sengaja membuat kesalahan dalam mengisi form. Bila tidak terdapat kesalahan user dapat menelan tombol submit untuk memasukkan data user ke dalam database. Kesemua alur/flow program ini cukup dibuat dalam satu file saja.
Disini ada 2 file yang ikut disertakan dalam paket belajar bikin form ini yaitu File
1. Belajarbikinform.asp
2. Belajarbikinform.mdb
File pertama adalah file coding asp dan file kedua adalah file database access
Untuk langkah pertama, silahkan buka file belajarbikin.asp dan anda akan menemukan coding ini
Pada bagian awal program.
<%
Set Conn2=Server.Createobject("ADODB.Connection")
DSNtemp = "DRIVER={Microsoft Access Driver (*.mdb)}; "
DSNtemp = DSNtemp & "DBQ=" & Server.Mappath("belajarbikinform.mdb") & "; "
Conn2.Open DSNtemp
%>
code ini berfungsi untuk menmbuka koneksi asp dengan file mdb. Agar berjalan, pastikan anda telah membuat koneksi ODBC pada server anda. Silahkan check komputer anda melalui control panel – ODBC Driver. Bila terdapat access driver pada koneksi ODBC anda, maka anda berada pada jalan yang benar untuk mengikuti langkah selanjutnya.
<%
strMode = Request("mode")
strPrgName = Request.ServerVariables("SCRIPT_NAME")
Select Case strMode
ConfirmIt()
Case "Add"
AddRecord()
Case Else
EntryForm
End Select
%>
Variabel strPrgName adalah namafile itu sendiri , dalam kasus ini variabel strPrgName akan berisi “belajarbikinform.asp”.
Variabel strmode adalah untuk menata jalannya diagram/alur programming . ada 4 kemungkinan variabel strmode yaitu Confirm, Add, EntryForm. Pada awal program dijalankan, variabel strmode akan berisii kosong, dan oleh sebab itu, program akan menjalankan sub EntryForm.
<%
Sub EntryForm()
<script language="javascript" type="text/javascript">
function CheckAll(thisform) {
// cek nama
if (thisform.nama.value == "")
{
alert("Namanya diisi dulu dong")
thisform.nama.focus()
return false
}
// cek tempat
if (thisform.alamat.value == "")
{
alert("Alamatnya juga diisi dong !")
thisform.pekerjaan.focus()
return false
}
}
</script>
Function CheckAll(ThisForm) berfungsi untuk memverifikasi apakah ada isian yang dikosongkan, Apabila ada isian yang dikosongkan maka program meminta agar user memasukkan isian pada tabel.
<title>Belajar Bikin Form</title>
<center>
<font face="Verdana, Arial, Helvetica" size=4><b>Belajar Bikin Form Sederhana
</b></FONT><br>
<font face="Verdana, Arial, Helvetica" size=-2>Semua yang bertanda
<FONT size=2 color=red><STRONG>*</STRONG></FONT>
mohon diisi </font>
</center>
Form dapat menggunakan coding HTML biasa. Fungsi input type=hidden name=”mode” value=”confirm” berfungsi memberi nilai baru pada variabel mode menjadi “confirm”.
<form method="POST" action="<%=strPrgName%>" onSubmit="return CheckAll(this)">
<input type="hidden" name="mode" value="Confirm">
<div align="center"><center><table border="1" width="450" cellspacing="1">
<tr>
<td width="50%" valign="top" align="right">Nama Anda : <FONT color=#ff0000>*</FONT> : </td>
<td width="50%"><input type="text" name="nama" size="30"></td>
</tr>
<tr>
<td width="50%" valign="top" align="right">Alamat : <FONT color=#ff0000>*</FONT> : </td>
<td width="50%"><textarea rows="5" name="alamat" cols="30"></textarea></td>
</tr>
<tr>
<td width="50%">Status Anda :<FONT color=#ff0000>*</FONT> : </td>
<td width="50%"><select name="valstatus" size="1">
<option value="1">Lajang/Single sedang mencari</option>
<option value="2">Lajang/Single tidak sedang mencari</option>
<option value="3">Belum Menikah tapi sudah Tunangan</option>
<option value="4">Sudah Menikah</option>
<option value="5">Duda/Janda sedang mencari </option>
<option value="6">Duda/Janda tidak sedang mencari </option>
<option value="7">Menikah, Dalam Proses Cerai</option>
</select></td>
</table>
</center></div>
<div align="center"><center><p><input type="submit" value="Submit" name="B1"><input
type="reset" value="Reset" name="B2"></p>
</html>
<%
end sub
%>
Setelah pengisian Form oleh User, maka program akan melakukan action dengan menjalankan perintah konfirmasi . perhatikan command dibawah ini yang terdapat pada awal program
<%
strMode = Request("mode")
strPrgName = Request.ServerVariables("SCRIPT_NAME")
Select Case strMode
ConfirmIt()
Case "Add"
AddRecord()
Case Else
EntryForm
End Select
%>
Oleh karena variabel strmode ebrubah menjadi “Confirm” maka program akan mengeksekusi
Confirmit()
'++++++++++Formulir Pendaftaran di konfirm dulu ++++++
Sub ConfirmIt()
%>
<center>
<title>Konfirmasi</title>
<%
Select case Request("valstatus")
case "1"
status = "Lajang/Single sedang mencari"
case "2"
status = "Lajang/Single tidak sedang mencari"
case "3"
status = "Belum Menikah tapi sudah Tunangan"
case "4"
status = "Sudah Menikah"
case "5"
status = "Duda/Janda sedang mencari"
case "6"
status = "Duda/Janda tidak sedang mencari"
case "7"
status = "Menikah, Dalam Proses Cerai"
end select
%>
<script language="javascript" type="text/javascript">
function CorrectIt()
{
history.back()
}
</script>
<center>
<form name="EntryForm" method="post" action="<%=strPrgName%>">
<input type="hidden" name="mode" value="Add">
<input type="hidden" name="nama" value="<%=Request("nama")%>">
<input type="hidden" name="alamat" value="<%=Request("alamat")%>">
<input type="hidden" name="status" value="<%=status%>">
<div align="center"><center>
<font face="Verdana, Arial, Helvetica" size=4><b>Formulir Konfirmasi</b><br></FONT>
<small>Periksa kembali isian formulir anda, bila ada kesalahan, tekan tombol kembali ! </small><p>
<table border="1" width="450" cellspacing="1">
<tr>
<td width="50%" valign="top" align="right">Nama : </td>
<td width="50%"><%=Request("nama")%></td>
</tr>
<tr>
<td width="50%" valign="top" align="right">alamat :</td>
<td width="50%"><%=Request("alamat")%></td>
</tr>
<tr>
<td width="50%" valign="top" align="right">status : </td>
<td width="50%"><%=status%></td>
</tr>
</table>
</center></div>
<div align="center"><center><p><input type="submit" value="Submit" name="B1"><input
type="reset" value="Kembali !" name="B2" onClick="CorrectIt()"></p>
</center></div>
<%
end sub
Form ini akan melanjutkan eksekusi program ke bagian addrecord(), yaitu menambah data user ke dalam database.
'++++++Masukkan ke database, informasi dari pendaftar++++++
Sub AddRecord()
%>
<center><font face=verdana size=2>
Nama : <% Response.write Request("nama") %><br>
alamat :<% Response.write Request("alamat") %><br>
status :<% Response.write Request("status") %><br>
</font>
<%
MyQuery = "INSERT INTO data (nama, alamat, status) " _
& "VALUES ('" & Request("nama") & "','" _
& Request("alamat") & "','"_
& Request("status") & "')"
response.write MyQuery
Set MyRst = Conn2.Execute(MyQuery)
%>
<center>
<p><p>
<font face=verdana size=2>Hello <%=request("nama")%>, <br>
<p>Anda telah terdaftar dalam database kami</p>
<%
end sub
%>
Selesai sudah tutorial sederhana membuat Form sederhana dengan menggunakan ASP Programming.