Praktikum 6 ASP #Final (Validation Form with ASP.net)

Assalamu'alaikum.. Kali ini saya akan membahas tentang Praktikum 6 ASP saya, tugas praktikum kali ini masih sama dengan praktikum 6 php yaitut mengenai Validation Form.

ya sudah langsung saja.. buka visual studio 2012 buat new project..
sekarang saya akan membuat halaman web yang nanti akan menjadi sebagai tempat inputan kita...

1. buat web form baru dan nama TugasFormVal dan simpan pada project asp6 kalian..

2. dan berikut script halaman inputan yg saya buat.
Script :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TugasFORMVal.aspx.cs" Inherits="Bab3.TugasFORMVal" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Form Validation</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body style="background-image:url(bg.png); background-repeat:repeat;">
    <form id="form1" runat="server">
    <div>
      <table  class="formBRO" cellspacing="0" cellpadding="4" bgcolor="#FFFFFF" border="1">
 <tr>
     <td rowspan="7" width="230" ><center><img src="logo.png" width="200" height="200" /></center></td>
        <td colspan="4"  bgcolor="#EBB614" >
         <b><center><font color=white>INPUTAN BIODATA</font></center></b>
        </td>
        
    </tr>
   
    </tr>
    <tr>
     <td> Nama <br />&nbsp;</td>
        <td width="1"><center>:<br />&nbsp;</center></td>
        <td><asp:TextBox ID="nama" name="nama" type="text" Size="32" runat="server"></asp:TextBox>
         <asp:RequiredFieldValidator
                 ID="valNama" 
                 CssClass="RequiredFieldValidator"
                 runat="server" 
                 ControlToValidate="nama"
                 ErrorMessage="<img style='vertical-align:middle' src='error1.png'/><font color=red > Nama tidak boleh kosong</font>" />
            <br />&nbsp;
                 

        </td>
    </tr>
    <tr>
     <td> NIS<br />&nbsp;</td>
        <td><center>:<br />&nbsp;</center></td>
        <td>
            <asp:TextBox ID="nis"  runat="server"  Size="32"></asp:TextBox>
            <asp:CustomValidator ID="cvNIS"
                 runat="server"  
                 CssClass="CustomValidator"
                 ErrorMessage="<img style='vertical-align:middle' src='error1.png' /><font color=red > Nis harus 5 angka</font>"
                 ControlToValidate="nis"
                 OnServerValidate="CekNis_ServerVal" />
            <br />
             <asp:RequiredFieldValidator
                 ID="valnis" 
                 CssClass="RequiredFieldValidator"
                 runat="server" 
                 ControlToValidate="nis"
                 ErrorMessage="<img style='vertical-align:middle' src='empty.png' /><font color=red > NIS tidak boleh kosong</font>" />
        </td>
    </tr>
    <tr>
     <td>E-mail<br />&nbsp;</td>
        <td><center>:<br />&nbsp;</center></td>
        <td><asp:TextBox ID="Email"  type="text" Size="32" runat="server"
            ></asp:TextBox>
            <asp:RegularExpressionValidator
                ID="erremail" 
                CssClass="RegularExpressionValidator"
                runat="server" 
                ErrorMessage="<img style='vertical-align:middle' src='error1.PNG'><font color=red> email salah tulis</font>"
                ControlToValidate="Email"
                ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
            <br />
            <asp:RequiredFieldValidator
                 ID="valemail" 
                 CssClass="RequiredFieldValidator"
                 runat="server" 
                 ControlToValidate="Email"
                 ErrorMessage="<img style='vertical-align:middle' src='empty.png' /><font color=red> Email tidak boleh kosong</font>" />
          
        </td>
    </tr>

    <tr>
     <td>Password<br />&nbsp;</td>
        <td><center>:<br />&nbsp;</center></td>
        <td><asp:TextBox ID="pwd" type="password" Size="32" runat="server"></asp:TextBox><br />
            <asp:RequiredFieldValidator
                 ID="valpwd" 
                 CssClass="RequiredFieldValidator"
                 runat="server" 
                 ControlToValidate="pwd"
                 ErrorMessage="<img style='vertical-align:middle' src='empty.png' /><font color=red> Password tidak boleh kosong</font>" />
          

        </td>
    </tr>
   
    <tr>
     <td>Confim Password<br />&nbsp;</td>
        <td><center>:<br />&nbsp;</center></td>
        <td><asp:TextBox ID="pwd2" type="password" Size="32" runat="server"
            ></asp:TextBox>
               <asp:CompareValidator 
                ID="cvPass"
                CssClass="CompareValidator"
                runat="server" 
                ErrorMessage="<img style='vertical-align:middle' src='error1.png' /><font color=red > Password & Confirm harus sama</font>"
                ControlToValidate="pwd" ControlToCompare="pwd2" /><br />
                <asp:RequiredFieldValidator
                 ID="valpwd2" 
                 CssClass="RequiredFieldValidator"
                 runat="server" 
                 ControlToValidate="pwd2"
                 ErrorMessage="<img style='vertical-align:middle' src='empty.png' /><font color=red> CP tidak boleh kosong</font>" />
        </td>
    </tr>

    <tr>
     <td colspan="3"><center>
         
            <button type="reset" value="Refresh" ONCLICK="history.go(0)">&nbsp;Reset&nbsp;</button>
            <asp:Button ID="btnSubmit" runat="server" Text="Submit"  PostBackUrl="ActionResult.aspx"></asp:Button>
                    </center>
  </td>   
    </tr>

    </table>
    </div>

    <table cellspacing="0" cellpadding="0"  class="formsumm"><tr><td>
       &nbsp;<strong> Validation Summary :</strong>
        <asp:ValidationSummary ID="vsSumm" runat="server" />
                          </td></tr></table>
    </form>
</body>
</html>

dan berikut hasil dari script diatas :

Penjelasan halaman diatas :

Validation Summary berfungsi untuk menampilkan error messagge.

3. Selanjutnya saya akan membuat halaman untuk output / halaman untuk menampung segala inputan yg diinputkan dari halaman TugasFormVal yg ada diatas.
4. Langsung saja kawan.. buat new web form dan namai dengan ActionResult dan simpan pada project asp6 kalian.

5. Kemudian buat scriptnya.. berikut script yg telah saya buat..
Script :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ActionResult.aspx.cs" Inherits="Bab3.ActionResult" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Resume Hasil</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body style="background-image:url(bg.png); background-repeat:repeat;">
    <form id="form1" runat="server">
    <div>
    <table  class="formBRO1" cellspacing="0" cellpadding="4" bgcolor="#FFFFFF" border="1">
 <tr>
     
        <td colspan="4"  bgcolor="#EBB614" >
         <b><center><font color=white>DATA DIRI</font></center></b>
        </td>
        
    </tr>
   
    </tr>
    <tr>
     <td> Nama </td>
        <td width="1"><center>:</center></td>
        <td>
            <asp:Label ID="txtnama" runat="server" Text="Label"></asp:Label>
        </td>
    </tr>
    <tr>
     <td> NIS</td>
        <td><center>:</center></td>
        <td>
            <asp:Label ID="txtnis" runat="server" Text="Label"></asp:Label>
        </td>
    </tr>
    <tr>
     <td>E-mail</td>
        <td><center>:</center></td>
        <td>
            <asp:Label ID="txtemail" runat="server" Text="Label"></asp:Label>
        </td>
    </tr>

    <tr>
     <td>Password</td>
        <td><center>:</center></td>
        <td>
            <asp:Label ID="txtpwd" runat="server" Text="Label"></asp:Label>
        </td>
    </tr>
   
    <tr>
     <td>Confim Password</td>
        <td><center>:</center></td>
        <td>
            <asp:Label ID="txtpwd2" runat="server" Text="Label"></asp:Label>
        </td>
    </tr>

    </table>
    </div>
    </form>
</body>
</html>

Dan berikut output dari ActionResult setealah di RUN.

dan sekarang saatnya men-DEMO kan hasil tugas gue :D..

UNTUK MENGETES APAKAH ERROR MESSAGGE BERJALAN/TIDAK

1. Run TugasFormVal

2. jika sudah klik button submit..

jika keluar error messagge baik samping inputtan maupun di kotak validation summary.. (seperti gambar diatas) maka script tes pertama benar...

UNTUK MENGETES APAKAH INPUTAN MUNCUL PADA HALAMAN OUTPUT

1. RUN TugasFormVal

2. Isi semua data yang di minta.. (data password dan confirm password harus sama)

3. klik button submit.. jika berhasil akan muncul halaman baru (halaman dari ActionReslut) yg menampilkan data yg kita inputkan tadi.

PENGETESAN TAMBAHAN

1. Data email harus di inputkan sesuai format (xxxxx@xxx.xxx) kalau tidak demikian akan muncul error message seperti berikut.

2. Data password dan data confrim password harus sama, jika tidak akan muncul error message sepeti berikut..

----------------------------------------------------------------------------------------------------

Sebagai tambahan yg pengen menhias tampilan dari TugasFromVal dan ActionResult seperti diatas. nih saya bagi script css saya..

/* beny styling */
input[type="submit"],
input[type="reset"],
button {
  font:normal 0.9em Arial,Sans-Serif;
  background-color:#EBB614;
  border:0;
  padding:5px 10px;
  color:#fff;
  text-shadow:0 1px 2px #222;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background-color:#EFDE10;
  background-position:0 -9px;
  color:#fff;
  text-decoration:none;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background:#000;
  outline:none;
}
<
table {
  Margin:0 auto;

  border-collapse: collapse;
  
}
input[type="text"]:focus,input[type="text"]:active{
 background-color:#F5DD89;
}


 table td { 
  border: 2px solid  transparent;
}
/*
table td {
  -webkit-transition: all 0.7s ease-in-out 0s;
  -moz-transition: all 0.7s ease-in-out 0s;
  -o-transition: all 0.7s ease-in-out 0s;
  transition: all 0.7s ease-in-out 0s;
}
*/

table td:nth-child(2n+1):hover{
  background: #F5DD89;
}

body {
font-family:arial;
font-size:11pt;
}

.formBRO{
 width:650; height:200;
 border:1px solid #f4f4f4;
 background:rgba(255,255,255,.5);
 
 -webkit-box-shadow: 0 0 2px #aaa;
 -moz-box-shadow: 0 0 2px #aaa;
 box-shadow: 0 0 2px #aaa;
 
 border-color:white; position:fixed;left:250px;top:90px;
}

.formBRO1{
 width:650px; height:400;
 border:1px solid #f4f4f4;
 background:rgba(255,255,255,.5);
 
 -webkit-box-shadow: 0 0 2px #aaa;
 -moz-box-shadow: 0 0 2px #aaa;
 box-shadow: 0 0 2px #aaa;
 
 border-color:white; position:fixed;left:360px;top:20px;
}

.formsumm{
 width:876px; height:200;
 border:1px solid #f4f4f4;
 background:rgba(255,255,255,.5);
 
 -webkit-box-shadow: 0 0 2px #aaa;
 -moz-box-shadow: 0 0 2px #aaa;
 box-shadow: 0 0 2px #aaa;
   border: 2px solid  transparent;
 border-color:white; position:fixed;left:250px;top:459px;
 }
.div{
margin:opx auto;
text-align:left;
padding:10px;
border:1px solid white;
}


.error{
style="vertical-align:middle"
}
/* beny styling */

Sekian tutorial tentang tugas ASP 6 saya, semoga membantu dan bermanfaat :D

Beny Machmud Putra

Praktikum 6 ASP #Final (Validation Form with ASP.net)

0 Comments

About Me

Beny Machmud Putra

Categories

Beny Machmud Putra

Praktikum 6 ASP #Final (Validation Form with ASP.net)

You may like these posts

0 Comments

About Me

Beny Machmud Putra

Contact Me

Categories