Assalamualaikum wr.wb
Ketemu lagi di tutorial ASP.NET Part 2 nih bersama gue si ganteng kalem ^_^
Melanjutkan dari tutorial sebelumnya, Kali ini gue akan membahas tentang cara membuat Master Page dan cara memanggil dan menggunakan Master Page. Langsung kita menuju TKP yuk.... yuk mari...!!
1. Buka lagi Project pada tutorial bagian pertama, Pada Solution Explorer klik kanan pada project Latihan >> Pilih Add >> New Items seperti dibawah :
Lihat Gambar 2.1
Gambar 2.1
2. Pilih Master Page, dan beri nama LatihanMaster >> OK
Lihat gambar 2.2
Gambar 2.2
3. Maka akan muncul jendela seperti ini :
Lihat Gambar 2.3
Gambar 2.3
4. Next tulis sorce code berikut ini :
<%@ Master Language="VB" CodeFile="Latihan.master.vb" Inherits="Latihan" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
</title>
<asp:ContentPlaceHolder id="CSS" runat="server">
</asp:ContentPlaceHolder>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<div id="header">
<h2>
Latihan ASP.NET
</h2>
</div>
<div id="nav">
<ul>
<li><a href="Default.aspx">Home</a> </li>
<li><a href="FormInputData.aspx">Input Data</a> </li>
<li><a href="View.aspx">View</a> </li>
</ul>
</div>
<div id="content">
<asp:ContentPlaceHolder id="ISI" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="footer">
<br />
Teknik Informatika Sekolah Tinggi Teknologi Muhammadiyah Cileungsi - 2015
</div>
</form>
</body>
</html>
5. Jika benar maka desaign akan seperti ini :
Lihat Gambar 2.4
Gambar 2.4
6. Next membuat Use Master Page
Sebelum membuatnya perlu di ketahui apa fungsi Use Master Page.
Use Master Page ini berfungsi untuk memanggil master page yang sudah
kita buat sebelumnya. Pada dasarnya cara pembuatan Use Master Page sama
dengan Master Page.
Dari pada banyak teori mending lihat gambar dibawah ^_^
Pada Solution Explorer klik kanan pada project Latihan >> Pilih Add >> New Items
Lihat Gambar 2.5
Gambar 2.5
7. Pilih Web Form, kasih nama UseMasterPage dan jangan lupa ceklis Select Master Page >> OK
Lihat Gambar 2.6
Gambar 2.6
8. Akan muncul jendela Select a Master Page, Lalu pilih LatihanMaster yang telah kita buat tadi, lalu Klik OK
Lihat Gambar 2.7
Gambar 2.7
9. Maka akan muncul jendela seperti dibawah ini :
Lihat Gambar 2.8
Gambar 2.8
Kemudian buat source code berikut ini :
<%@ Page Title="" Language="VB" MasterPageFile="~/Latihan.master" AutoEventWireup="false" CodeFile="UserMasterPage.aspx.vb" Inherits="UserMasterPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CSS" Runat="Server">
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ISI" Runat="Server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<h2>
Form Input
</h2>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" BackColor="Yellow"
ForeColor="Red" ValidationGroup="Data" ShowSummary="true" />
<table>
<tr>
<td>
Nim
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txtNIM" runat="server" Width="100px" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Nim harus diisi" ControlToValidate="txtNIM" ForeColor="Red"
validationGroup="Data" SetFocusOnError="true">*Nim Harus Diisi</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Nama
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txtNama" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldvalidator2" runat="server"
ErrorMessage="Nama harus diisi" ControlToValidate="txtNama" ForeColor="Red"
ValidationGroup="Data" SetFocusOnError="true">*Nama Harus Diisi</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Tempat Lahir
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txtTempatLahir" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldvalidator3" runat="server"
ValidationGroup="Data" ErrorMessage="Tempat Lahir Harus diisi"
ControlToValidate="txtTempatLahir" ForeColor="Red"
SetFocusOnError="true">*Tempat Lahir Harus
Diisi</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Tanggal Lahir
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txtTglLahir" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldvalidator4" runat="server" ValidationGroup="Data"
ErrorMessage="Tanggal Lahir harus diisi" ControlToValidate="txtTglLahir" ForeColor="Red"
SetFocusOnError="true">*Tanggal Lahir Harus Diisi</asp:RequiredFieldValidator>
<asp:CalendarExtender ID="CalendarExtender1" runat="server"
TargetControlID="txtTglLahir" Format="dd MMM yyyy">
</asp:CalendarExtender>
</td>
</tr>
<tr>
<td>
Jenis Kelamin
</td>
<td>
:
</td>
<td>
<asp:RadioButtonList ID="RBLJK" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow">
<asp:ListItem Value="L" Text="Laki-Laki" />
<asp:ListItem Value="P" Text="Perempuan" />
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="RequiredFieldvalidator5" runat="server" ValidationGroup="Data"
ErrorMessage="Silahkan Pilih Jenis Kelamin" ControlToValidate="RBLJK"
ForeColor="Red" SetFocusOnError="true">*Pilih Jenis Kelamin</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Agama
</td>
<td>
:
</td>
<td>
<asp:DropDownList ID="ddlAgama" runat="server">
<asp:ListItem Value="0" Text="Pilih"></asp:ListItem>
<asp:ListItem Value="1" Text="Islam"></asp:ListItem>
<asp:ListItem Value="2" Text="Katolik"></asp:ListItem>
<asp:ListItem Value="3" Text="Protestan"></asp:ListItem>
<asp:ListItem Value="4" Text="Hindu"></asp:ListItem>
<asp:ListItem Value="5" Text="Budha"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldvalidator6" runat="server" ValidationGroup="Data"
ErrorMessage="Agama harus diisi" ControlToValidate="ddlAgama"
ForeColor="Red" InitialValue="0" SetFocusOnError="true">*Pilih Agama</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Jurusan
</td>
<td>
:
</td>
<td>
<asp:DropDownList ID="ddlJurusan" runat="server">
<asp:ListItem Value="0" Text="Pilih"></asp:ListItem>
<asp:ListItem Value="1" Text="Teknik Informatika"></asp:ListItem>
<asp:ListItem Value="2" Text="Teknik Industri"></asp:ListItem>
<asp:ListItem Value="3" Text="Teknik Mesin"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldvalidator7" runat="server" ValidationGroup="Data"
ErrorMessage="Jurusan Harus diisi" ControlToValidate="ddlJurusan"
ForeColor="Red" InitialValue="0" SetFocusOnError="true">*Pilih Jurusan</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
:
</td>
<td class="auto-style1">
<asp:TextBox ID="txtemail" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="emailValidator" runat="server"
ErrorMessage="<b>{Tolong Masukan Email Yang Benar}</b>"
ValidationGroup="Data" SetFocusOnError="true" ForeColor="Red"
ControlToValidate="txtemail"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldvalidator8"
runat="server" Display="Dynamic" ValidationGroup="Data"
ErrorMessage="Tolong masukan email yang benar"
ControlToValidate="txtemail"
SetFocusOnError="true"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSimpan" runat="server" Text="Simpan" ValidationGroup="Data" />
<asp:Button ID="btnBatal" runat="server" Text="Batal" />
</td>
</tr>
</table>
</div>
</asp:Content>
10. Jika tidak ada error maka akan jadi seperti ini :
Lihat Gambar 2.9
Gambar 2.9
Jika debug akan seperti ini :
Lihat Gambar 2.10
Gambar 2.10
Sampai Jumpa di turorial berikutnya ^_^ salam Tamfan :-D
Tidak ada komentar:
Posting Komentar