1. Pertama buatlah project Bab 3, dengan solution yang sama
2. Setelah itu buatlah web form dengan nama Val Summary
3. Jika sudah inputkan script seperti ini
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ValSummary.aspx.cs" Inherits="Bab3.ValSummary" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Validation Summary</title>
<link href="MyStyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style3 {
width: 160px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ValidationSummary ID="vsSumm" CssClass="div" runat="server" Width="286px"
ShowMessageBox="true" />
</div><br />
<table style="width: 100%;">
<tr><th colspan="3">INPUT DATA DIRI</th></tr>
<tr>
<td class="auto-style1">Username: </td>
<td class="auto-style3">
<asp:TextBox ID="txtUser" runat="server" Width="165px"
Height="30px"></asp:TextBox></td>
<td> <asp:RequiredFieldValidator ID="rfvUser" ControlToValidate="txtUser"
CssClass="RequiredFieldValidator" runat="server"
ErrorMessage="Username Wajib Diisi"
Text="<img width=40 src='warning.png' class='center'/> Username Wajib Diisi" />
</td>
</tr>
<tr>
<td class="auto-style1">Password: </td>
<td class="auto-style3">
<asp:TextBox TextMode="Password" ID="txtPass" runat="server" Width="165px"
Height="30px"></asp:TextBox></td>
<td> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="txtPass"
CssClass="RequiredFieldValidator" runat="server"
ErrorMessage="Password Wajib Diisi"
Text="<img width=40 src='warning.png' class='center'/> Password Wajib Diisi" />
</td>
</tr>
<tr>
<td class="auto-style1">Umur: </td>
<td class="auto-style3">
<asp:TextBox ID="txtUmur" runat="server" Width="165px"
Height="30px"></asp:TextBox></td>
<td> <asp:RangeValidator ID="RangeValidator1" ControlToValidate="txtUmur"
CssClass="RequiredFieldValidator" runat="server"
ErrorMessage="Range Umur 17-99 tahun" MinimumValue="17"
MaximumValue="99" Type="Integer"
Text="<img width=40 src='warning.png' class='center'/> Range Umur 17-99 tahun" />
</td>
</tr>
</table>
<br />
<asp:Button ID="KIRIM" runat="server" Text="Buton" Height="36px" Width="145px" />
</form>
</body>
</html>
4. Setelah itu tambahkan stylesheet (css) dengan nama MyStyle.css
5. Isikan stylesheet dengan script berikut
body {
text-align: center;
vertical-align: central;
}
.div {
margin: 0px auto;
text-align: left;
padding: 15px;
border: 1px dashed #333;
background-color: #ffd800;
}
table {
color: #333; /*warna font*/
font-family: Harrington, Arial, sans-serif;
width: 510px;
border-collapse: collapse;
border-spacing: 0;
margin-right: 49px;
text-align: left;
}
td, th {
border: 1px solid #CCC;
height: 30px;
transition: all 0.3s; /*hover efek*/
}
th {
background: #F3F3F3;
font-weight: bold;
text-align: center;
}
td {
background: #FAFAFA;
vertical-align: central;
}
.td {
text-align: center;
}
tr td:hover {
background: #666;
color: #FFF;
}
/*hover sel efek*/
TEXTAREA, INPUT[type="text"] {
font-family: Tahoma, Arial, sans-serif;
font-size: 14px;
color: #808080;
padding: 3px;
background: #EEEfff;
border-left: solid 1px #c1c1c1;
border-top: solid 1px #cfcfcf;
border-right: solid 1px #cfcfcf;
border-bottom: solid 1px #6f6f6f;
}
INPUT[type="text"]:focus, INPUT[type="text"]:active {
border-color: #646464;
background-color: #ffcf03;
}
.rfv {
color: red;
}
.rfv:hover {
color: white;
}
.center {
vertical-align: top;
}
6. Jika sudah tinggal Run program dengan Ctrl+f5, dan akan muncul result tampilan berikut di browser
Catatan:
- Range Umur adalah 17-99
- Semua Form wajib diisi
7. Jika data yang diinputkan tidak lengkap maka akan muncul notif seperti ini
8. Jika Range umur kurang dari 17 maka akan muncul notif seperti ini
0 komentar:
Posting Komentar