Step Step membuat Web Data Static

10 Mei, 2014

Assalamu alaikum wr.wb.
Semangat pagi Guest
Masih pagi ni lanjut begadang dari semalem ni.malam minggun kelabu ni gak punya cewek .
Dari pada bengong tak bermutu ,saya bongkar bongkar folder di kompuer .
Ok deh tanpa panjang lebar "kalo panjang sakit kata cew*k ,lebar gak enak buat cow*k". ya gak guest

Membuat Data Statis Di Web

1. Kita create project yang kosong.

2. Kita tambah kan web form pada project.

Disini saya gunakan nama Default.aspx

<title>Data Table Statis</title> di isi sesui judul form

<style>

body

{

font-family:Arial; Di isi dengan fort yang dingin kan untuk di body

font-size:12px;Di isi dengan ukuran fort yang dingin kan untuk di body

}

</style>

</head>

<body>

<div>

<h1> Menentukan besar kecil ya ukuran front

Data Table Statis

</h1>

</div>

</form>

</body>

</html>

3. Kita Set start page pada form web Default.aspx. Untuk melihat hasil.

Untuk step selanjutnya kita stop untuk dapat menambah objeck.

Kita akan menambah kan object DataTable dengan cara menambah kan GridView dengan cara double klik di toolbox. Lalu kita tabahkan seperti contoh dibawah.

<body>

<div>

<h1>Contoh Data Table Statis</h1>

<h4>Daftar Mahasiswa</h4>

<asp:GridView ID="GridView1" runat="server"

AutoGenerateSelectButton="true" ini yang perlu di tambah kan

AutoGenerateColumns="true"> ini yang perlu di tambah kan

</asp:GridView>

</div>

</form>

</body>

4. Kita klik kanan pilih view code pada lembar project Default.aspx.

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

{

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

DisplayData(); kita buat kan fungsi tampil

}

private void DisplayData()

{

DataTable dt = new DataTable(); Di buat objek table

dt.Columns.Add("NIM", typeof(string));Di tambah kolom sesui field

dt.Columns.Add("Nama", typeof(string));

dt.Columns.Add("Jurusan", typeof(string));

dt.Columns.Add("Alamat", typeof(string));

dt.Columns.Add("Email", typeof(string));

dt.Columns.Add("Telepon", typeof(string));

DataRow dr = dt.NewRow();Di buat ka nisi pada baris dengan cara

dr[0] = "31122369"; membuat objek DataRow.

dr[1] = "khoirul mustofa";

dr[2] = "teknik informatika";

dr[3] = "Rembang";

dr[4] = "khoirul.mustofa2014@gmail.com";

dr[5] = "081230400086";

dt.Rows.Add(dr); kita masukan data ke dalam baris

GridTampil.DataSource = dt;perintah untuk memangil data ke GridView

GridTampil.DataBind();perintah untuk menampilkan data ke GridView

}

5. Lalu kita tampilkan dengan cara kita run .maka akan muncul seperti ini.

6. Kita buat sedikit styel untuk mempercantik table.

<style>

body ini sesuai dengan bagian yang akan di modif

{

font-family:'Comic Sans MS';

font-size:12px;

}

table th ini sesuai dengan bagian yang akan di modif

{

background-color:#b6ff00;

padding:120px,130px;

}

table tr ini sesuai dengan bagian yang akan di modif

{

padding:200px,130px;

background-color:yellow;

}

</style>

7. kita buat coloumn manual dengan set sebagai berikut

<asp:GridView ID="GridTampil" runat="server"

AutoGenerateColumns="false"> kita set false

<asp:TemplateField>

<asp:LinkButton ID="LinkButton1" runat="server"

Text="Detail"

CommandName="Deytail"

CommandArgument='<%#Eval("NIM") %>'/> di set NIM

</ItemTemplate>

</asp:TemplateField> ItemStyle-Width untuk sett lebar column

<asp:BoundField DataField="NIM" HeaderText="NIM" ItemStyle-Width="200px" />

<asp:BoundField DataField="Nama" HeaderText="Nama" />

<asp:BoundField DataField="Jurusan" HeaderText="Jurusan" />

<asp:BoundField DataField="Alamat" HeaderText="Alamat" />

<asp:BoundField DataField="Email" HeaderText="Email" />

<asp:BoundField DataField="Telepon" HeaderText="Telepon" />

</Columns>

</asp:GridView>

Maka tampilan sebagai berikut :

8. Kita buat ivent pada tombol detail dengan memunculkan form pup-up.

dengan cara kita set Design kita sorot pada grid view pilih properties sorot event (tanda petir)

pilih RowCommand klik double.

Maka akan di bawa ke Default.aspx.cs kita isi dengan kode sbb:

protected void GridTampil_RowCommand(object sender, GridViewCommandEventArgs e)

{

if (e.CommandName == "Detail")

{

ScriptManager.RegisterStartupScript(this, typeof(string), "onclik",

string.Format("alert('{0}')", e.CommandArgument.ToString()), true);

}

Jika munncul berarti NIM berhasil kita ambil.

9. Kita buat kan from PUP UP dengan cara add pada project.Disini dengan contoh FormDetail.aspx.

<div>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<table>

<tr>

<asp:TextBox ID="txtNim" runat="server"></asp:TextBox></td>

</tr>

<tr>

<td>

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

</tr>

<tr>

<td>Jurusan</td>

<td>

<asp:DropDownList ID="DDLJurusan" runat="server">

<asp:ListItem>Teknik Informatika</asp:ListItem>

<asp:ListItem>Teknik Lingkungan</asp:ListItem>

<asp:ListItem>Teknik Arsitektur</asp:ListItem>

<asp:ListItem>Teknik Fisika</asp:ListItem>

<asp:ListItem>Teknik Kimia</asp:ListItem>

</asp:DropDownList></td>

</tr>

<tr>

<td>Alamat</td>

<td>

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

</tr>

<tr>

<td>Email</td>

<td>

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

</tr>

<tr>

<td>Telepon</td>

<td>

<asp:TextBox ID="txtTelepon" runat="server"></asp:TextBox></td>

</tr>

<tr>

<td>

<asp:Button ID="btnSave" runat="server" Text="Simpan" />

<asp:Button ID="btnCancel" runat="server" Text="Batal" OnClientClick="window.close();" />

</tr>

</td>

</table>

</ContentTemplate>

</asp:UpdatePanel>

</div>

Ini adalah bentuk kode pada FormDetail.aspx yang mana akan menjadi

10. Untuk Dapat memanggil FormDetail.aspx saat linkbutton detail di klik maka harus di setting pada Default.aspx

if (e.CommandName == "Detail")

{

string script = string.Format("showModalDialog ('FormDetail.aspx?NIM={0}','','dialogwidth: 400, dialogheight:400');", e.CommandArgument.ToString());

ScriptManager.RegisterStartupScript(this, typeof(string), "onclik",

script, true);

}

Kita tambah kan <asp:ScriptManager yang berada pada toolbox.

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

11. Menampilkan data yang ada di Grid untuk tampil di dalm fromdetail.aspx

Kita buat kan property

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

{

public DataTable DataSource

{

get

{

if (Session["DataSource"] == null) memakai session karena formnya terpisah,supaya data tetap di kenal dalam semua form

{

Session["DataSource"] = createEmptyDataSource();

}

return (DataTable)Session["DataSource"];

}

set

{

Session["DataSource"] = value;

}

private DataTable createEmptyDataSource() di copy dari DisplayData()

{

DataTable dt = new DataTable("DataSource");

dt.Columns.Add("NIM", typeof(string));

dt.Columns.Add("Nama", typeof(string));

dt.Columns.Add("Jurusan", typeof(string));

dt.Columns.Add("Alamat", typeof(string));

dt.Columns.Add("Email", typeof(string));

dt.Columns.Add("Telepon", typeof(string));

return dt;

}

Jika DataTable sudah di simpan dalam session maka setting yang di bawah ini

private void DisplayData()

{

DataTable dt = new DataTable(); Di buat objek table

dt.Columns.Add("NIM", typeof(string));Di tambah kolom sesui field

dt.Columns.Add("Nama", typeof(string));

dt.Columns.Add("Jurusan", typeof(string));

dt.Columns.Add("Alamat", typeof(string));

dt.Columns.Add("Email", typeof(string));

dt.Columns.Add("Telepon", typeof(string));

Mejadi

private void DisplayData()

{

DataTable dt = DataSource;

DataRow dr = dt.NewRow();

dr[0] = "31122369";

dr[1] = "khoirul mustofa";

dr[2] = "teknik informatika";

dr[3] = "Rembang";

dr[4] = "khoirul.mustofa2014@gmail.com";

dr[5] = "081230400086";

dt.Rows.Add(dr);

Jika DataSource di simpan dalam session maka akan di kenal maka di buat kan juga dalam form yang lain ,maka properties di atas juga perlu ada di formDetai.aspx

Maka akan tampil seperti ini.

12. Kita buat fungsi simpan dengan cara buka fromdetail dalal option Design.klik double button save. Kita buat kan fungsi sebagai berikut:

protected void btnSave_Click(object sender, EventArgs e)

{

if (IsValidOnSave())

{

string nim = Request.QueryString["NIM"];

DataRow[] rows = DataSource.Select(string.Format("NIM='{0}'", nim));

if (rows.Length > 0)

{

rows[0][0] = txtNim.Text;

rows[0][1] = txtNama.Text;

rows[0][2] = DDLJurusan.SelectedValue;

rows[0][3] = txtAlamat.Text;

rows[0][4] = txtEmail.Text;

rows[0][5] = txtTelepon.Text;

rows[0].AcceptChanges();

ScriptManager.RegisterStartupScript(this, typeof(string), "onclik",

string.Format("alert('{0}');window.close();", "Data Berhasil DiSimpan"), true);

}

private bool IsValidOnSave()

{

string error = "";

if (txtNim.Text == "")

{

error = "NIM Tidak Boleh Kosong";

}

else if (txtNama.Text == "")

{

error = "Nama Tidak Boleh Kosong";

}

else if (txtAlamat.Text == "")

{

error = "Nama Tidak Boleh Kosong";

}

else if (txtEmail.Text == "")

{

error = "Nama Tidak Boleh Kosong";

}

else

{

return true;

}

ScriptManager.RegisterStartupScript(this, typeof(string), "onclik",

string.Format("alert('{0}');", error), true);

return false;

}

Bila proses save sudah di lakukan maka isi DispalayData kita rubah dipindah ke fungsi createEmptyDataSource();maka menjadi seperti ini

private DataTable createEmptyDataSource()

{

DataTable dt = new DataTable("DataSource");

dt.Columns.Add("NIM", typeof(string));

dt.Columns.Add("Nama", typeof(string));

dt.Columns.Add("Jurusan", typeof(string));

dt.Columns.Add("Alamat", typeof(string));

dt.Columns.Add("Email", typeof(string));

dt.Columns.Add("Telepon", typeof(string));

DataRow dr = dt.NewRow();

dr[0] = "31122369";

dr[1] = "khoirul mustofa";

dr[2] = "teknik informatika";

dr[3] = "Rembang";

dr[4] = "khoirul.mustofa2014@gmail.com";

dr[5] = "081230400086";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr[0] = "31122370";

dr[1] = "donal bebek";

dr[2] = "teknik kimia";

dr[3] = "blora";

dr[4] = "donal.bebek@gmail.com";

dr[5] = "081230442423";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr[0] = "31122371";

dr[1] = "sinta jojo";

dr[2] = "teknik sipil";

dr[3] = "Rembang";

dr[4] = "sinta.jojo@gmai.com";

dr[5] = "081232657086";

dt.Rows.Add(dr);

return dt;

}

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

DisplayData();

}

private void DisplayData()

{

DataTable dt = DataSource;

Data DisplayDAta yang di sini pindah ke createEmptyDataSource();

GridTampil.DataSource = dt;

GridTampil.DataBind();

}

Kita tambah kan fungsi pada gridview DispayData() sbb:

protected void GridTampil_RowCommand(object sender, GridViewCommandEventArgs e)

{

if (e.CommandName == "Detail")

{

string script = string.Format("showModalDialog ('FormDetail.aspx?NIM={0}','','dialogwidth: 400, dialogheight:400');", e.CommandArgument.ToString());

ScriptManager.RegisterStartupScript(this, typeof(string), "onclik",

script, true);

DisplayData(); agar saat tampil data langsung load.

}

Kita lakukan modif pada html Default

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<div>

</div>

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="ShowDetail()" />

</ContentTemplate>

</asp:UpdatePanel>

</form>

khoirul blog's

Step Step membuat Web Data Static

Posting Komentar

Chat WhatsApp

khoirul blog's

Step Step membuat Web Data Static

Posting Komentar