Ilmu Software: Membuat Master Page dan Menu pull down pada ASP.NET dengan server control control Menu

Apa itu Master Page ? Master page adalah file dengan extension master yang dapat

digunakan oleh file aspx sebagai file penyerta pada aplikasi. Jika anda pernah membuat
aplikasi dengan ASP klasik dan menggunakan tag html include untuk menyertakan file lain
pada file asp yang anda buat, maka file master ini mirip dengan file yang ingin kita
include-kan pada file aspx yang kita buat.

Cara membuat file master page

Setelah anda membuka apliaksi Visual Web Developer, klik menu File lalu
pilih Add New Item
Pada dialog box yang muncul, pilih Master Page, beri nama file master
page yang kita buat (secara default nama file adalah MasterPage.master). Aktifkan check
box Place code in separate file jika kita ingin memisahkan file code
Visual Basic pada file yang berbeda.
Pada pilihan language anda juga bisa memilih Visual C# jika anda lebih suka menggunakan
bahasa pemrograman Visual C# daripada Visual Basic.
Klik tombol Add.
File MasterPage.master dan MasterPage.master.vb akan ditambahkan pada folder SIP.

Pada contoh ini kita akan membuat menu pull down pada file MasterPage.master di mana file MasterPage.master ini nantinya akan di-'include'-kan (istilah ASP klasik) sehingga menu pull down ini akan muncul pada setiap halaman web aspx yang dibuka oleh user.

Menambahkan control Menu pada halaman web

Untuk menambahkan control Menu kita dapat meng-drag and drop control Menu dari tollbar Toolbox yang disediakan Viasual Web Developer. Langkah-langkahnya adalah sebagai berikut:

Tampilkan MasterPage.master pada mode design. Dari toolbar Toolbox pilih control Menu
pada kelompok Navigation

Drag and drop control Menu ke dalam area MasterPage.master. Secara
default posisi control Menu akan berbentuk Vertical

Untuk merubah control Menu menjadi horizontal ubah property Orientation
menjadi Horizontal.

Edit Daftar menu yang akan kita gunakan untuk keperluan aplikasi kita. Cara mengubah
daftar menu adalah dengan mengklik tanda segitiga dibagian kanan atas pada control Menu pada design mode. Pada saat kita mengklik tanda segitiga, maka akan muncul menu popup atau disebut Menu Tasks

Pilih Edit Menu Items, maka akan uncul Menu Item Editor dialog box

Pada Menu Item Editor kita dapat menambahkan, mengedit dan menghapus
menu pilihan pull down menu.
1. Untuk menambah menu utama klik tombol Add a root item (paling kanan) pada toolbar menu.
2. Untuk menambah sub menu tempatkan kursor aktif pada menu (root item) yang telah kita buat, lalu klik tombol Add a child item (pilihan sebela kanan Add a root item).
3. Untuk menghapus menu item kita dapat menggunakan tombol Remove an Item (tombol dengan tanda silang berwarna merah)
4. Untuk menggeser item menu ke atas atau ke bawah gunakan tombol move up (panah ke atas) dan move down (panah ke bawah)
5. Untuk memindahkan menu dari level atas ke bawah atau sebaliknya gunakan tombol panah ke kiri atau ke kanan.
Untuk memberikan nama pada menu pilihan Edit property dari menu yang bersangkutan pada property Text. Secara default Text yang muncul adalah New Item, kita
dapat merubahnya sesuai dengan kebutuhan. Property NavigateUrl untuk kita
isi dengan nama file aspx yang akan dibuka ketika user memilih menu tersebut.

Berikut contoh control Menu yang sudah diisi lengkap:

Jika kita masuk ke mode source code dari file MaserPage.master maka akan tampak sebagai berikut:


<%@ Master
Language="VB"
CodeFile="MasterPage.master.vb"
Inherits="MasterPage" %>

<html>
<head runat="server">
<title>Master Page</title>
</head>
<body>
<form id="form1" runat="server">

<div>
<asp:Menu
ID="Menu1"
runat="server"
Orientation="Horizontal">
<Items>
   <asp:MenuItem
   Text="Data Master"
   Value="Data Master">

       <asp:MenuItem
           NavigateUrl="~/karyawan.aspx"
           Text="Karyawan"
           Value="Karyawan">
       </asp:MenuItem>
       <asp:MenuItem
           NavigateUrl="~/jabatan.aspx"
           Text="Jabatan"
           Value="Jabatan">

       </asp:MenuItem>
       <asp:MenuItem
           NavigateUrl="~/bagian.aspx"
           Text="Bagian"
           Value="Bagian">
       </asp:MenuItem>
       <asp:MenuItem
           NavigateUrl="~/departemen.aspx"
           Text="Departemen"
           Value="Departemen">

       </asp:MenuItem>
       <asp:MenuItem
           NavigateUrl="~/headquarter.aspx"
           Text="Headquarter"
           Value="Headquarter">
       </asp:MenuItem>
       <asp:MenuItem
           NavigateUrl="~/cabang.aspx"
           Text="Cabang"
           Value="Cabang">

       </asp:MenuItem>
   </asp:MenuItem>
   <asp:MenuItem
           Text="Data Transaksi"
           Value="Data Transaksi">
       <asp:MenuItem
           NavigateUrl="~/cuti.aspx"
           Text="Cuti"
           Value="Cuti">

       </asp:MenuItem>
       <asp:MenuItem
           NavigateUrl="~/lembur.aspx"
           Text="Lembur"
           Value="Lembur">
       </asp:MenuItem>
       <asp:MenuItem
           NavigateUrl="~/absensi.aspx"
           Text="Absensi"
           Value="Absensi">

       </asp:MenuItem>
   </asp:MenuItem>
   <asp:MenuItem
       Text="Report"
       Value="Report">
       <asp:MenuItem
           NavigateUrl="~/rptcuti.aspx"
           Text="Cuti"
           Value="Cuti">

       </asp:MenuItem>
       <asp:MenuItem
           NavigateUrl="~/rptlembur.aspx"
           Text="Lembur"
           Value="Lembur">
       </asp:MenuItem>
       <asp:MenuItem
           NavigateUrl="~/rptabsensi.aspx"
           Text="Absensi"
           Value="Absensi">

       </asp:MenuItem>
   </asp:MenuItem>
</Items>
</asp:Menu>
<asp:contentplaceholder
id="ContentPlaceHolder1"
runat="server">

</asp:contentplaceholder>
</div>
</form>
</body>
</html>

Inilah salah satu kelebihan ASP.NET dibandingkan ASP klasik. Kita dapat dengan mudah menambahkan control secara visual ke dalam halaman web sementara kode html akan digenerate oleh Visual Web Developer secara otomatis.