Oke masih sambungan dari CRUD C# Asp.Net dengan MySql Server (1)
Kali ini kita berkutik pada Visual Studio, setelah kemarin kita membuat Query pada Mysql server.
Baik langsung saja kita mulai... Yuhuuuu...
1. Buat Project Baru
Saya buat pada Visual Studio 2015, buka new Project -> Web -> ASP.Net Web Application (.NET Framework), buat nama CrudContact -> Ok -> Empty -> isi TestProjectName: CrudContact
2. Kita akan buat tampilan semacam ini;
Klik Toolbar pilih View lalu pilih Solution Explorer, kemudian muncul sebelah kanan dilayar lalu klik kanan nama Project kita "CrudContact" -> pilih Add -> Web Form -> isi dengan nama "Contact" -> Ok. dan muncullah halaman kode.
3. Saatnya ngoding..
Untuk lebih simpel atau lebih mudah, kita klik View -> Toolbox dan muncul sebelah kiri di layar kita, Toolbox ini supaya lebih mudah gausah ngetik2 lagi tinggal drag aja.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Contact.aspx.cs" Inherits="CrudContact.Contact" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="The description of my page" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:HiddenField ID="hvContactID" runat="server" /> //drag HiddenField pada Toolbox //untuk ContactId dan ganti Id = hvContactID
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Name"></asp:Label> //drag label dan ganti text
</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox> //drag TextBox dan ganti IDnya
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Mobile"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtMobile" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Address"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtAddress" runat="server" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save" ForeColor="Blue" /> //drag Button dan ganti ID dan Text
<asp:Button ID="btnDelete" runat="server" Text="Delete" /> //drag Button dan ganti ID dan Text
<asp:Button ID="btnClear" runat="server" Text="Clear" ForeColor="BlueViolet" /> //drag Button dan ganti ID dan Text
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblsuccess" runat="server" Text="" ForeColor="Green"></asp:Label> //drag label dan ganti ID
</td>
<td>
<asp:Label ID="lblerror" runat="server" Text="" ForeColor="Tomato"></asp:Label>
</td>
</tr>
</table>
Istirahat dulu sebentar sambil kita lihat design kita klik "Design"
dan hasilnya terlihat seperti ini bukaaan,,,
kita lanjutnya dibawahnya yang tadi yaaa...
kali ini kita buat design untuk menampilkan semua data yang sudah masuk atau tersimpan, kali ini kita pakai "GridView" ada pada kolom Toolbox pada bagian Data (scroll kebawah toolbox)
<br />
<asp:GridView ID="gvContact" runat="server" AutoGenerateColumns="false"> //drag GridView
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Mobile" HeaderText="Mobile" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:LinkButton ID="lnkView" runat="server" CommandArgument='<%# Eval("ContactID") %>' OnClick="lnkView_Click" >View</asp:LinkButton> //ini untuk kita melihat View By Id
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
kita pilih design lagi buat lihat hasilnya sama seperti gambar paling atas kaaan..
0 komentar:
Posting Komentar