Master Page merupakan halaman yang menjadi template antarmuka supaya tampilan halaman web dapat dibuat seragam. Master Page dapat diibaratkan sebagai "gelas" dimana "gelas" dapat diisi oleh berbagai macam "minuman" dimana "minuman" akan mengikuti lekuk dari "gelas" tersebut.
Pada tutorial ini saya menggunakan aplikasi Microsoft Visual Studio 2010 Ultimate.
- Buat sebuah Web Site baru dengan langkah File » New » Web Site.
-
Pada jendela yang tampil pilih Visual C# pada Installed Templates, pilih ASP.Net Empty Web Site, tentukan dimana tempat menyimpan dengan klik tombol Browse. lalu klik tombol Ok.
-
Jika diperhatikan pada jendela Sulution Explorer, struktur file akan terlihat seperti berikut:
-
Selanjutnya pada solution explorer, klik kanan pada web site dalam hal ini C:\...\I\ dan pilih Add New Item. Pada jendela yang muncul pilih Master Page dan beri nama Master.master lalu klik tombol Add.
-
Seketika file Master.master akan terbuka kemudian ganti kode Master.master menjadi seperti berikut:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Master.master.cs" Inherits="Master" %> <!DOCTYPE html> <html lang="en"> <head runat="server"> <title>Master Page</title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form" runat="server"> <div> <asp:ContentPlaceHolder id="body" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html>
-
Sampai disini kita telah selesai membuat master page atau "gelas". Langkah selanjutnya adalah membuat isi dari web site atau "minuman". Klik kanan pad web site pilih Add New Item. Pada jendela yang muncul pilih Web Form beri nama Default.aspx dan centang Select Master Page kemudian klik tombol Add. Apabila nanti tampil jendela Select a Master Page klik tombol Ok.
-
Seketika file Default.aspx akan terbuka kemudian ganti kode Default.aspx seperti berikut:
<%@ Page Title="Beranda" Language="C#" MasterPageFile="~/Master.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <asp:Content ID="headBeranda" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="bodyBeranda" ContentPlaceHolderID="body" Runat="Server"> <h1>Saya Suka Study On Sunday</h1> </asp:Content>
-
Kemudian jalankan web site dengan cara klik kanan web site dan pilih View in Browser.
Anda dapat menambahkan file web form baru seperti halnya file Default.aspx ke dalam web site anda. Sebagai contoh saya menambahkan file Biodata.aspx dan Sejarah.aspx kemudian saya menigisi konten yang sesuai denagan cara menulisnya diantara tag <asp:Content ID="bodySesuaiHalaman" ContentPlaceHolderID="body" Runat="Server"> dan </asp:Content>.
0 Comments:
Post a Comment