Assalamu'alaikum.. Pada kali ini saya akan meng-share tentang praktikum asp 5 saya, pada praktikum kali ini akan membahas tentang "MENGGUNAKAN SERVER CONTROL"
- ASP.NET Control merupakan komponen utama dari ASP.NET Framework yang dieksekusi di server kemudian hasilnya ditampilkan ke browser client. Control - control tersebut dideklarasikan seperti HTML biasa, perbedaannya yaitu menuliskan tag <asp:> pada awal jenis control yang akan ditambahkan.
iya sudah cukup itu pengenalan dari pembahasan kali ini,, langsung saja ke Praktikumnya.. cekidott gan :D!!
2. Kemudian di Tab PROJECT -> Add New Item -> Web Form -> beri nama
TugasCrossPage.aspx
catatan : buat new item kali ini pada project yg sama dengan poin-poin A-J
3. Buat script desain html, css dan asp.net sesuai improvisasi kalian... berikut contoh desain saya.
 |
| screenshoot |
Script :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TugasCrossPage.aspx.cs" Inherits="Bab2.Tugas" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Inputan</title>
<link rel="stylesheet" type="text/css" href="button.css" />
</head>
<body Style="background-image:url(bg.jpg);background-repeat:repeat;">
<form id="form1" runat="server">
<div>
<table cellspacing="0" cellpadding="4" bgcolor="#FFFFFF" border="1" width="650" height="200" Style='border-radius:20px;border-color:white; position:fixed;left:360px;top:90px;
box-shadow: 0 0 5px 5px black;'>
<tr>
<td rowspan="9" width="230" Style=' border-top-left-radius:20px;border-bottom-left-radius:20px '><center><img src="logo.jpg" width="200" 0height="200" /></center></td>
<td colspan="3" bgcolor="#009900" Style=' border-top-right-radius:20px; '>
<center><strong><font color="white">INPUTAN BIODATA</font></strong></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>
<input id="Radio1" type="radio" name="Gender" value="Laki - Laki"/>Laki - Laki
<input id="Radio2" name="Gender" type="radio" value="Perempuan"/>Perempuan
</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>
<input id="Radio3" type="radio" name="cita2" value="Programer"/>Programer<br />
<input id="Radio4" type="radio" name="cita2" value="Dokter"/>Dokter<br />
<input id="Radio5" type="radio" name="cita2"/>Lainnya
<br />
<asp:Panel ID="pnlOther" Visible="true" runat="server">
<asp:Label ID="lblOther" Text=" apa:" runat="server" AssociatedControlID="txtOther"></asp:Label>
<asp:TextBox ID="txtOther" size="15" runat="server"></asp:TextBox>
</asp:Panel>
</td>
</tr>
<tr>
<td colspan="3" Style=' border-bottom-right-radius:20px;'><center>
<input id="Reset1" type="reset" value="Reset" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" PostBackUrl="ActionCrossPageResult.aspx"></asp:Button>
</center>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Output :
4. Nah.. desain tampilan awal telah selesai kawan... sekarang saya akan membuat halaman resume-man untuk inputan pada halama awal.. untuk tambahan ada dua teknik untuk menampilkan resume-man teknik :
1. resume-man berada 1 halaman yang sama dengan inputan/tampilan awal.
2. resume-man berada pada halama yg berbeda dengan inputan/tampilan awal.
Disini saya akan memakai teknik nomer 2, karena lebih keren sajoo.. :D
5. berikut saya akan membuat desain halaman untuk resume-man menggunakan table..yg sudah dibumbui sedikit dengan css.
6. Kemudian di Tab PROJECT -> Add New Item -> Web Form -> beri nama
ActionCrossPageResult.aspx
7. Buat script desain html, css dan asp.net sesuai improvisasi kalian... berikut contoh desain saya.
Script :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ActionCrossPageResult.aspx.cs" Inherits="Bab2.action" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Hasil</title>
<link rel="stylesheet" type="text/css" href="button.css" />
</head>
<body Style="background-image:url(bg.jpg);background-repeat:repeat;">
<form id="form1" runat="server">
<div>
<table cellspacing='0' cellpadding='4' bgcolor='#FFFFFF' border='1' width='650' height='300' Style='border-radius:20px;border-color:white; position:fixed;left:360px;top:110px;box-shadow: 0 0 5px 5px black; '>
<tr>
<td colspan='3' bgcolor="#009900" Style=' border-top-left-radius:20px; border-top-right-radius:20px'>
<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="lblJK" runat="server" Text="Label"></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" Text="Label"></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" Text="Label"></asp:Label></td>
</tr>
</table>
</div>
</form>
</body>
</html>
8. Jika sudah tambahkan kode C# pada ActionCrossPageResult.aspx dengan cara klik kanan pada kotak script pilih view code.
Tambahkan script C# berikut...
Script :
 |
| screenshot 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 action : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Page.PreviousPage != null)
{
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;
string selectedGender = Request.Form["gender"].ToString();
lblJK.Text = selectedGender;
TextBox ciatlain = (TextBox)PreviousPage.FindControl("txtOther");
string selectedcita2 = Request.Form["cita2"].ToString();
lblcita.Text = selectedcita2+ciatlain.Text;
}
}
}
}
Output dari ActionCrossPageResult.aspx :
Sekarang waktunya Meng-RUN... kita lihat seperti apa hasilnya..
1. RUN TugasCrossPage.aspx dengan cara tekan F5. Maka akan muncul seperti berikut.. Isi inputan yang ada.. jika sudah tekan button submit.
2. Maka hasil resume-man akan keluar pada halaman baru, seperti ini hasilnya..
Sekian Tutorial dari saya,, semoga bermanfaat..
Sampai jumpa pada praktikum selanjutnya...#semangatCodinggg
Wassalamu'alaikum...
0 Comments