Icangkeling's: Praktikum ASP 5 - Membuat Input Biodata dengan Control Event

Assalamu’alaikum.. J

Pada postingan kali ini saya akan membahas bagaimana cara membuat form input biodata dengan Control event menggunakan VS12.

1. Pertama-tama buka aplikasi VS12. Buat project baru C#. Contohnya yang saya buat kali ini project baru tsb bernama PraktikumASP5 dengan solution yang namanya sama. Lalu klik ok.

2. Klik kanan pada project yang ada di taksbar solution dan klik add->Web form. Beri nama InputBiodata.aspx. Script yang akan kita buat pertama-tama adalah sebagai inputan.

Ketikkan script :

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

<!DOCTYPE html>

div {

padding:10px;

}

.input {

border-radius:10px;

border-color:white;

box-shadow: 0 0 5px 5px black;

position:fixed;

left:30%;

top:30%;

}

.tengah {

text-align:center;

}

.auto {

width: 21px;

text-align:center;

}

.header {

width: 20px;

height:20px;

}

.back {

background-color: aqua;

text-shadow:5px 2px 2px #333;

text-align: center;

font-family:Arial;

}

.font {

font-family: Arial;

}

</style>

</head>

<body>

<div>

<tr>

INPUTAN BIODATA

</td>

</tr>

<tr>

<td class="font">Nama Lengkap</td>

<asp:TextBox ID="txtNama" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td class="font">Jenis Kelamin</td>

<asp:RadioButton ID="laki" GroupName="gender" runat="server" Text="Laki-Laki"></asp:RadioButton>

<asp:RadioButton ID="perempuan" GroupName="gender" runat="server" Text="Perempuan"></asp:RadioButton>

</td>

</tr>

<tr>

<td class="font">Email</td>

<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td class="font">Password</td>

<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>

</td>

</tr>

<tr>

<td class="font">Alamat</td>

<asp:TextBox ID="txtAlamat" runat="server" TextMode="MultiLine"></asp:TextBox>

</td>

</tr>

<tr>

<asp:RadioButton ID="rdlPresiden" GroupName="Cita" Text="Presiden" runat="server" />

<br />

<asp:RadioButton ID="rdlMenteri" GroupName="Cita" Text="Menteri" runat="server" />

<br />

<asp:RadioButton ID="rdlLain" GroupName="Cita" Text="Lainnya" runat="server" />

<br />

<asp:Panel ID="pnlLain" Visible="false" runat="server">

<asp:Label ID="lblLain" Text="Cita-cita Lain: " AssociatedControlID="txtLain" runat="server" />

<asp:TextBox ID="txtLain" runat="server" />

</asp:Panel>

</td>

</tr>

<tr>

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />

</td>

</tr>

</table>

<hr />

<asp:Label ID="lblNama" runat="server" /><br />

<asp:Label ID="lblJenisKelamin" runat="server" /><br />

<asp:Label ID="lblEmail" runat="server" /><br />

<asp:Label ID="lblPassword" runat="server" /><br />

<asp:Label ID="lblAlamat" runat="server" /><br />

<asp:Label ID="lblCita" runat="server" /><br />

</div>

</form>

</body>

</html>

3. Tekan F7 pada InputBiodata.aspx untuk melihat kode di dalamnya, maka akan muncul InputBiodata.aspx.cs.

Lalu ketikkan kode :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace PraktikumASP5

{

public partial class InputBiodata : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (rdlLain.Checked)

pnlLain.Visible = true;

else

pnlLain.Visible = false;

}

protected void btnSubmit_Click(object sender, EventArgs e)

{

lblNama.Text = "Nama Lengkap \t: " + txtNama.Text;

if (laki.Checked)

{

lblJenisKelamin.Text = "Jenis Kelamin \t\t: " + laki.Text;

}

else if (perempuan.Checked)

{

lblJenisKelamin.Text = "Jenis Kelamin \t\t: " + perempuan.Text;

}

else

{

lblJenisKelamin.Text = "Jenis Kelamin \t\t: Bencong";

}

lblNama.Text = "Nama Lengkap \t\t: " + txtNama.Text;

lblEmail.Text = "Email \t\t: " + txtEmail.Text;

lblPassword.Text = "Jenis Kelamin \t\t: " + txtPassword.Text;

lblAlamat.Text = "Alamat \t\t: " + txtAlamat.Text;

if (rdlPresiden.Checked)

{

lblCita.Text = "Cita-Cita \t: " + rdlPresiden.Text;

}

else if (rdlMenteri.Checked)

{

lblCita.Text = "Cita-Cita \t: " + rdlMenteri.Text;

}

else

{

lblCita.Text = "Cita-Cita \t: " + txtLain.Text;

}

4. Buat Web form baru bernama InputBiodataResult sebagai output dari inputan pertama.

Lalu ketikkan script :

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

<!DOCTYPE html>

div {

padding:10px;

}

.font1 {

font-size:large;

}

.font {

font-family: Arial;

}

</style>

</head>

<body>

<div>

<tr>

TERIMA KASIH TELAH MENGINPUTKAN

</td>

</tr>

<tr>

<asp:Label ID="lblNama" runat="server"></asp:Label><br /></td>

</tr>

<tr>

<asp:Label ID="lblJenisKelamin" runat="server"></asp:Label><br />

</td>

</tr>

<tr>

<asp:Label ID="lblEmail" runat="server"></asp:Label><br />

</td>

</tr>

<tr>

<asp:Label ID="lblPassword" runat="server"></asp:Label><br />

</td>

</tr>

<tr>

<asp:Label ID="lblAlamat" runat="server"></asp:Label><br />

</td>

</tr>

<tr>

<asp:Label ID="lblCita" runat="server"></asp:Label><br />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

5. Tekan F7 untuk melihat kode.

Ketikkan kode :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace PraktikumASP5

{

public partial class InputBiodataResult : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

TextBox txtNama = (TextBox)PreviousPage.FindControl("txtNama");

lblNama.Text = "Nama Lengkap : " + txtNama.Text;

string selectedGender = Request.Form["Gender"].ToString();

lblJenisKelamin.Text = "Jenis Kelamin : " + selectedGender;

TextBox txtEmail = (TextBox)PreviousPage.FindControl("txtEmail");

lblEmail.Text = "Email : " + txtEmail.Text;

TextBox txtPassword = (TextBox)PreviousPage.FindControl("txtPassword");

lblPassword.Text = "Password : " + txtPassword.Text;

TextBox txtAlamat = (TextBox)PreviousPage.FindControl("txtAlamat");

lblAlamat.Text = "Alamat : " + txtAlamat.Text;

string selectedCita = Request.Form["cita"].ToString();

lblCita.Text = "Cita Cita : " + selectedCita;

}

6. Jika sudah mengetikkan kode, tekan Ctrl+F5 untuk me-run hasil. Maka pada browser anda akan tampil hasil dari program yang anda buat.

7. Isi semua inputan dengan lengkap sesuai dengan Biodata anda, lalu tekan button submit.

8. Maka akan tampil output dari inputan yang anda masukkan sebelumnya.

9. Jika anda memiliki cita-cita lain maka anda dapat menekan radio button lainnya, lalu tekan submit.

10. Ketikkan cita-cita anda di textbox yang tampil, lalu jika anda tekan button submit, output cita-cita akan berubah sesuai dengan inputan yang anda ketikkan.

Sekian postingan saya.. Semoga bermanfaat.. :)

Icangkeling's

Pages

06/12/13

Praktikum ASP 5 - Membuat Input Biodata dengan Control Event

Tidak ada komentar:

Posting Komentar