07/12/13

Praktikum ASP 6 - Validation Control

Assalamu’alaikum..

 Kali ini saya akan memposting bagaimana cara membuat program dengan menggunakan Validasi Kontrol di VS12.

 Langsung saja.. :)
Berikut langkah-langkahnya :

1. Buka aplikasi VS12. New project->VisualC#->ASP.NET Empty Web Application. Beri nama project anda PraktikumASP6 dengan nama solution yang sama. Simpan di folder yang anda anggap aman lalu klik ok untuk memulai membuat program.







   



2. Buat Folder baru di dalam taskbar Solution Explorer bernama Tugas. Lalu klik kanan pada folder Tugas->Add->Web Form. Beri nama file ValidasiForm.aspx.

Ketikkan script : 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ValidasiForm.aspx.cs" Inherits="PraktikumASP6.Tugas.ValidasiForm" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Isi Form</title>
    <link href="MyStyle.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .auto-style3 {
            width: 160px;
        }
        .auto-style4 {
            height: 30px;
        }
        .auto-style5 {
            width: 160px;
            height: 30px;
        }
    </style>
</head>
<body style="background-image:url(a.jpg); background-repeat:repeat;">
    <form id="form1" runat="server">
    <div>
        <asp:ValidationSummary ID="vsSum" CssClass="div" runat="server" Width="286px"
            ShowMessageBox="true" />
        </div><br />
        <center><table style="width:70%;" >          
            <tr>
                <th colspan="4">FORM BIODATA</th>
            </tr>
            <tr>
                <td rowspan="7">
                    <center><img src="logotelkom.jpg" height="160px" />
                </td>
            </tr>
            <tr>
                <td class="auto-style4">Nama Lengkap :</td>
                <td class="auto-style5">
                    <asp:TextBox ID="txtNama" runat="server" Width="165px" Height="30px"></asp:TextBox></td>
                <td class="auto-style4">&nbsp;<asp:RequiredFieldValidator ID="rfvNama" runat="server" ControlToValidate="txtNama"
                    CssClass="RequiredFieldValidator" ErrorMessage="Nama harus diisi"
                    Text="<img src='stacks_image_91.png' width='25px' class='center' />Nama Harus Diisi" />
                    </td>
            </tr>
            <tr>
                <td class="auto-style1">NIS :</td>
                <td class="auto-style3">
                    <asp:TextBox ID="txtNIS" runat="server" Width="165px" Height="30px"></asp:TextBox></td>
                <td class="auto-style4">&nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtNama"
                    CssClass="RequiredFieldValidator" ErrorMessage="NIS harus diisi"
                    Text="<img src='stacks_image_91.png' width='25px' class='center' />NIS Harus 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 class="auto-style4">&nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtNama"
                    CssClass="RequiredFieldValidator" ErrorMessage="Umur harus diisi"
                    Text="<img src='stacks_image_91.png' width='25px' class='center' />Umur Harus Diisi" />
                    </td>
            </tr>
            <tr>
                <td class="auto-style1">Email :</td>
                <td class="auto-style3">
                    <asp:TextBox ID="txtEmail" runat="server" Width="165px" Height="30px"></asp:TextBox></td>
                 <td class="auto-style4">&nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtNama"
                    CssClass="RequiredFieldValidator" ErrorMessage="Email harus diisi"
                    Text="<img src='stacks_image_91.png' width='25px' class='center' />Email Harus Diisi" />
                    </td>
            </tr>
            <tr>
                <td class="auto-style1">Password :</td>
                <td class="auto-style3">
                    <asp:TextBox ID="txtPass" runat="server" Width="165px" Height="30px"></asp:TextBox>
                </td>
                 <td class="auto-style4">&nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtNama"
                    CssClass="RequiredFieldValidator" ErrorMessage="Password harus diisi"
                    Text="<img src='stacks_image_91.png' width='25px' class='center' />Password Harus Diisi" />
                    </td>
            </tr>
            <tr>
                <td class="auto-style1">Confirm Password :</td>
                <td class="auto-style3">
                    <asp:TextBox ID="txtConfirm" runat="server" Width="165px" Height="30px"></asp:TextBox>
                </td>
                <td class="auto-style4">&nbsp;<asp:CompareValidator ID="cvPass" runat="server" ControlToCompare="txtConfirm"
                    ControlToValidate="txtPass" ErrorMessage="Password dan Confirm harus sama" ></asp:CompareValidator>
                    </td>
            </tr>
        </table>
        <br />
        <asp:Button ID="KIRIM" runat="server" Text="Daftar" Height="36px" Width="145px" PostBackUrl="~/Tugas/ValidationFormResult.aspx" />
    </form>
</body>
</html>












 3. Buat file baru sebagai output dari program yang kita buat pertama. Klik kanan pada folder Tugas->Add->Web Form. Beri nama ValidationResult.aspx.

Ketikkan script :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ValidationFormResult.aspx.cs" Inherits="PraktikumASP6.Tugas.ValidationFormResult" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            font-size: xx-large;
            font-weight: bold;
            font-family : 'Comic Sans MS';
        }
    </style>
</head>
    <body style="background-image:url(a.jpg); background-repeat:repeat;">
    <form id="form1" runat="server">
    <div style="margin-top: 71px">
        <table>
        <tr>
        <td>
        <asp:Label ID="lblNama" runat="server" CssClass="auto-style1" ForeColor="YellowGreen"></asp:Label><br />
        </td>
        </tr>
        <tr>
        <td>
        <asp:Label ID="lblNIS" runat="server" CssClass="auto-style1" ForeColor="YellowGreen"></asp:Label><br />
        </td>
        </tr>
        <tr>
        <td>
        <asp:Label ID="lblUmur" runat="server" CssClass="auto-style1" ForeColor="YellowGreen"></asp:Label><br />
        </td>
        </tr>
        <tr>
        <td>
        <asp:Label ID="lblEmail" runat="server" CssClass="auto-style1" ForeColor="YellowGreen"></asp:Label><br />
        </td>
        </tr>
        <tr>
        <td>
        <asp:Label ID="lblPassword" runat="server" CssClass="auto-style1" ForeColor="YellowGreen"></asp:Label><br />
        </td>
        </tr>
        </table>
    </div>
    </form>
</body>

</html>




4.      Untuk mempercantik tampilan saat dirun di browser, buat file css bernama MyStyle.css.
 Ketikkan script :

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;
    font-family: Arial;
    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;
}

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;
}

TEXTAREA, INPUT[type="text"] {
    font-family: Tahoma;
    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: #16bec4;
    }

.rfv {
    color: red;
}

    .rfv:hover {
        color: white;
    }

.center {
    vertical-align: top;
}






5. Run program anda dengan menekan Ctrl+F5 dan program akan muncul pada browser anda.





6. Jika anda tidak mengisi data dengan lengkap, maka saat anda menekan button daftar akan akan tampil peringatan seperti pada gambar.






 7. Jika anda menekan button daftar dan Confirm password tidak sama dengan Password yang diinputkan, maka akan tampil peringatan.





8. Jika data sudah lengkap dan benar, tekan button daftar. Sehingga hasil akan tampil pada halaman selanjutnya seperti pada gambar.





Sekian postingan saya kali ini...

Semoga bermanfaat.. ^,^ :D


Diposting oleh Tidak ada komentar:
Label:
Langganan: Postingan (Atom)