Saturday, October 26, 2013

Menerapkan Server Control di ASP

Di ASP, kita bisa membuat form melalui web
dengan bantuan komponen-komponen di ASP yang ada di toolbox

ini file yang diberikan guru saya, cukup banyak
ada kira-kira 20 halaman

Kerjakan semuanya satu per satu terlebih dahulu agar paham

 Download : file save as disini


berikut caranya

add new item-web form(c#)

Ketikkan script untuk InputBiodata.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InputBiodata.aspx.cs" Inherits="Bab2.InputBiodata" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Inputan</title>
    <link rel="stylesheet" type="text/css" href="nah.css" />

    <style>
        .f {
            font-family: Verdana;
        }
        .auto-style1 {
            width: 712px;
        }
        #Reset1 {
            height: 27px;
            width: 64px;
        }
    </style>
   
</head>
<body Style="background-image:url(bg.png);background-repeat:repeat;">
    <form id="form1" runat="server">
        <center>

            <h2>
<span style="color: white; font-family: Adler;">Pendaftaran Anak Moklet</span></h2>
    <table  class="f" cellspacing="0" cellpadding="7" bgcolor="#FFFFFF" border="0" width="450" height="200" Style='border-color:white; border-radius: 20px;
box-shadow: 0 0 2px 2px white;'>
 <tr>
     <td rowspan="9" width="250" Style=' border-top-left-radius:20px;border-bottom-left-radius:20px '><center><img src="img.jpg" width="200" 0height="200" /></center></td>
        <td colspan="3" Style=' border-top-right-radius:20px; '>
         <center><font color="brown" font size="6">INPUTAN BIODATA</font></center>
        </td>
       
    </tr>
    <tr>
     <td> Nama </td>
        <td width="1"><center>:</center></td>
        <td><asp:TextBox ID="nama" type="text" Size="35" runat="server"
            ></asp:TextBox></td>
    </tr>
    <tr>
     <td> Jenis Kelamin</td>
        <td><center>:</center></td>
        <td class="auto-style1">
     
            <asp:radiobutton groupname="Gender" id="rbtLaki" runat="server" text="Laki-Laki"></asp:radiobutton>
            <asp:radiobutton groupname="Gender" id="rbtPerempuan" runat="server" text="Perempuan"></asp:radiobutton>
            </td>
    </tr>
    <tr>
     <td>E-mail</td>
        <td><center>:</center></td>
        <td><asp:TextBox ID="Email" type="text" Size="35" runat="server"
            ></asp:TextBox></td>
    </tr>
      <tr>
     <td>Password</td>
        <td><center>:</center></td>
          <td><asp:TextBox ID="pwd" type="password" Size="35" runat="server"
            ></asp:TextBox></td>
  </tr>
 
    <tr>
     <td>Alamat</td>
        <td><center>:</center></td>
        <td>
            <asp:TextBox ID="alamat" TextMode="MultiLine" runat="server"></asp:TextBox>                              
        </td>
    </tr>
       
    <tr>
     <td>Cita - Cita</td>
        <td><center>:</center></td>
           
           <td class="auto-style1">
   
            <asp:radiobutton groupname="Cita" id="rbtCita1" runat="server" text="Kuliah"></asp:radiobutton>
<br />          
                <asp:radiobutton groupname="Cita" id="rbtCita2" runat="server" text="Kerja"></asp:radiobutton>
           <br />
                <asp:radiobutton groupname="Cita" id="Cita3" runat="server" text="Yang lain">
            </asp:radiobutton>

<asp:button id="btnOther" onclick="btnOther_Click" runat="server" style="background-color: cornsilk; border-radius: 5px;" text="Pilih"></asp:button>
        <asp:panel id="pnlOther" runat="server" visible="false">Isi Sendiri:
        <asp:textbox id="CitaLain" runat="server"></asp:textbox></asp:panel>
    </td>
    </tr>

    <tr>
     <td colspan="3"  style=' border-bottom-right-radius:20px;'><center>
         <asp:button id="prev" onclick="prev_Click" runat="server" style="background-color: antiquewhite; border-radius: 10px;" text="Preview Di Bawah"></asp:button> &nbsp;

           
            <asp:Button ID="btnSubmit" runat="server" style="background-color: cornsilk; border-radius: 10px;" Text="Submit" PostBackUrl="IBiodataHasil.aspx" Height="27px" Width="56px" OnClick="btnSubmit_Click"></asp:Button> &nbsp;
           <input id="Reset1" type="reset" value="Reset" style="background-color: cornsilk; border-radius: 10px;" /> </center>
  </td>      
    </tr>

</table>
<table aria-dropeffect="popup" width="450" border="0" id="Table1" runat="server" style="background-color: white; border-radius: 20px;">
<tr>
    <td bgcolor="#64481C" colspan="3" style="border-top-left-radius: 20px; border-top-right-radius: 20px;"><center>
<b><span style="color: white;"><h2>Preview</h2>
</span></b></center>
</td>
  </tr>
<tr>
    <td width="99">Nama</td>
    <td width="19">:</td>
    <td width="180">
        <asp:label id="lblNama1" runat="server"></asp:label></td>
  </tr>
<tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
    <td>
        <asp:label id="lblGender1" runat="server"></asp:label></td>
  </tr>
<tr>
    <td>Email</td>
    <td>:</td>
    <td><asp:label id="lblEmail1" runat="server"></asp:label></td>
  </tr>
<tr>
    <td>Password</td>
    <td>:</td>
    <td><asp:label id="lblPassword1" runat="server"></asp:label></td>
  </tr>
<tr>
    <td>Alamat</td>
    <td>:</td>
    <td><asp:label id="lblAlamat1" runat="server"></asp:label></td>
  </tr>
<tr>
    <td style="border-bottom-left-radius: 20px;">Cita-Cita</td>
    <td>:</td>
    <td style="border-bottom-right-radius: 20px;"><asp:label id="lblCita1" runat="server"></asp:label></td>
  </tr>
</table>


</center>
    </form>

</body>
</html>
klik kanan di view code

ketikkan script:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Bab2
{
    public partial class InputBiodata : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Table1.Visible = false;
        }
        protected void btnOther_Click(object sender, EventArgs e)
        {
            if (Cita3.Checked)
                pnlOther.Visible = true;
            else
                pnlOther.Visible = false;
        }
        protected void prev_Click(object sender, EventArgs e)
        {
            Table1.Visible = true;

            lblNama1.Text = nama.Text;


            lblEmail1.Text = Email.Text;


            lblPassword1.Text = pwd.Text;


            lblAlamat1.Text = alamat.Text;

            if (rbtLaki.Checked)
            {
                lblGender1.Text = rbtLaki.Text;
            }
            else if (rbtPerempuan.Checked)
            {
                lblGender1.Text = rbtPerempuan.Text;
            }

            if (rbtCita1.Checked)
            {
                lblCita1.Text = rbtCita1.Text;
            }
            else if (rbtCita2.Checked)
            {
                lblCita1.Text = rbtCita2.Text;
            }
            else if (Cita3.Checked)
            {
                lblCita1.Text = CitaLain.Text;
            }

        }

        public String varGdr;
        public string varCita;
        public string varSdr;
        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            if (rbtLaki.Checked)
            {
                varGdr = rbtLaki.Text;
                varSdr = "Saudara";
            }
            else if (rbtPerempuan.Checked)
            {
                varGdr = rbtPerempuan.Text;
                varSdr = "Saudari";
            }
            if (rbtCita1.Checked)
            {
                varCita = rbtCita1.Text;
            }
            else if (rbtCita2.Checked)
            {
                varCita = rbtCita2.Text;
            }
            else if (Cita3.Checked)
            {
                varCita = CitaLain.Text;
            }

        }
    }
}


Begini tampilannya

Lalu buat file IBiodataHasil.aspx
sama seperti tadi
Project-New Item-Web

 script IBiodataHasil
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IBiodataHasil.aspx.cs" Inherits="Bab2.IBiodataHasil" %>
<%@ PreviousPageType VirtualPath="~/InputBiodata.aspx" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Hasil</title>
        <link rel="stylesheet" type="text/css" href="nah.css" />
    <style type="text/css">
        .labelStyle {
            color: red;
        }
    </style>
</head>
<body Style="background-image:url(bg.png);background-repeat:repeat;">
    <form id="form1" runat="server"><center>
       <font face="Adler" color="white">
           <asp:Label ID="Label1" runat="server"></asp:Label></font>

    <center><table  cellspacing='0' cellpadding='6' bgcolor='#FFFFFF' border='0' width='450' height='300' Style='border-radius:10px;border-color:white; box-shadow: 0 0 2px 2px white; '>
 <tr>
     
        <td colspan='3' bgcolor="#64481C"  Style=' border-top-left-radius:10px; border-top-right-radius:10px'>
         <center><strong><font color='white'>DATA DIRI</font></strong></center>
        </td>
          
    </tr>
    <tr>
     <td> Nama Lengkap </td>
        <td width='1'><center>:</center></td>
        <td><asp:Label ID="lblNama" runat="server" Text="Label"></asp:Label></td>
  

    </tr>
    <tr>
     <td> Jenis Kelamin</td>
        <td><center>:</center></td>
        <td><asp:Label ID="lblGender" runat="server" ></asp:Label></td>
    </tr>
  
  
    <tr>
     <td>E-mail</td>
        <td><center>:</center></td>
        <td><asp:Label ID="lblEmail" runat="server" Text="Label"></asp:Label></td>
    </tr>
    <tr>
     <td>Password</td>
        <td><center>:</center></td>
        <td><asp:Label ID="lblPwd" runat="server" Text="Label"></asp:Label></td>
    </tr>
    <tr>
     <td>Alamat</td>
        <td><center>:</center></td>
        <td><asp:Label ID="lblAlamat" runat="server" ></asp:Label></td>
    </tr>
    <tr>
     <td Style=' border-bottom-left-radius:20px'>Cita - Cita</td>
        <td><center>:</center></td>
        <td Style=' border-bottom-Right-radius:20px'><asp:Label ID="lblCita" runat="server" ></asp:Label></td>
    </tr>
   <tr>
       <td colspan="3"> <center>Data dimasukkan pukul <asp:Label ID="lblTime" runat="server" Text="Label" Font-Size="Large"
            CssClass="labelStyle"/></center></td>
   </tr>

</table></center>
    </form>
</body>
</html>
"<%@ PreviousPageType VirtualPath="~/InputBiodata.aspx" %> 
script ini menunjukkan bahwa InputBiodata adalah previous page dari IBiodataHasil.aspx

 view code IBiodataHasil :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Bab2
{
    public partial class IBiodataHasil : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Page.PreviousPage != null)
            {

                lblTime.Text = DateTime.Now.ToString("T");

                TextBox Nama = (TextBox)PreviousPage.FindControl("Nama");
                lblNama.Text = Nama.Text;

                TextBox Email = (TextBox)PreviousPage.FindControl("Email");
                lblEmail.Text = Email.Text;

                TextBox pwd = (TextBox)PreviousPage.FindControl("pwd");
                lblPwd.Text = pwd.Text;

                TextBox Alamat = (TextBox)PreviousPage.FindControl("Alamat");
                lblAlamat.Text = Alamat.Text;

                Label1.Text = "Selamat Datang " + PreviousPage.varSdr + " " + Nama.Text;

                lblGender.Text = PreviousPage.varGdr;

                lblCita.Text = PreviousPage.varCita;




            }
        }
    }
}


textbox untuk Isi sendiri akan ada jika radiobutton Yang lain dichecked


Tampilan jika di Preview
(satu halaman)


ditampilkan di halaman lain
~
pukul

No comments:

Post a Comment