Pages

Thursday, 5 July 2012

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 t`g 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
  1. Setelah anda membuka apliaksi Visual Web Developer, klik menu Filelalu
    pilih Add New Item
  2. 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.
  3. Klik tombol Add.
  4. 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 controlMenu dari tollbar Toolbox yang disediakan Viasual Web Developer. Langkah-langkahnya adalah sebagai berikut:
  1. Tampilkan MasterPage.master pada mode design. Dari toolbar Toolbox pilih control Menu
    pada kelompok Navigation


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


  3. Untuk merubah control Menu menjadi horizontal ubah propertyOrientation
    menjadi Horizontal.


  4. 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


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


  6. 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.
  7. 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 NavigateUrluntuk kita
    isi dengan nama file aspx yang akan dibuka ketika user memilih menu tersebut.

  8. Berikut contoh control Menu yang sudah diisi lengkap:

Jika kita masuk ke mode source code dari file MaserPage.master maka akan tampak sebagai berikut:
view plaincopy to clipboardprint?
  1. <%@ Master  
  2. Language="VB"  
  3. CodeFile="MasterPage.master.vb"  
  4. Inherits="MasterPage" %>  
  5.   
  6. <html>  
  7. <head runat="server">  
  8. <title>Master Page</title>  
  9. </head>  
  10. <body>  
  11. <form id="form1" runat="server">  
  12.   
  13. <div>  
  14. <asp:Menu  
  15. ID="Menu1"  
  16. runat="server"  
  17. Orientation="Horizontal">  
  18. <Items>  
  19.    <asp:MenuItem  
  20.    Text="Data Master"  
  21.    Value="Data Master">  
  22.   
  23.        <asp:MenuItem  
  24.            NavigateUrl="~/karyawan.aspx"  
  25.            Text="Karyawan"  
  26.            Value="Karyawan">  
  27.        </asp:MenuItem>  
  28.        <asp:MenuItem  
  29.            NavigateUrl="~/jabatan.aspx"  
  30.            Text="Jabatan"  
  31.            Value="Jabatan">  
  32.   
  33.        </asp:MenuItem>  
  34.        <asp:MenuItem  
  35.            NavigateUrl="~/bagian.aspx"  
  36.            Text="Bagian"  
  37.            Value="Bagian">  
  38.        </asp:MenuItem>  
  39.        <asp:MenuItem  
  40.            NavigateUrl="~/departemen.aspx"  
  41.            Text="Departemen"  
  42.            Value="Departemen">  
  43.   
  44.        </asp:MenuItem>  
  45.        <asp:MenuItem  
  46.            NavigateUrl="~/headquarter.aspx"  
  47.            Text="Headquarter"  
  48.            Value="Headquarter">  
  49.        </asp:MenuItem>  
  50.        <asp:MenuItem  
  51.            NavigateUrl="~/cabang.aspx"  
  52.            Text="Cabang"  
  53.            Value="Cabang">  
  54.   
  55.        </asp:MenuItem>  
  56.    </asp:MenuItem>  
  57.    <asp:MenuItem  
  58.            Text="Data Transaksi"  
  59.            Value="Data Transaksi">  
  60.        <asp:MenuItem  
  61.            NavigateUrl="~/cuti.aspx"  
  62.            Text="Cuti"  
  63.            Value="Cuti">  
  64.   
  65.        </asp:MenuItem>  
  66.        <asp:MenuItem  
  67.            NavigateUrl="~/lembur.aspx"  
  68.            Text="Lembur"  
  69.            Value="Lembur">  
  70.        </asp:MenuItem>  
  71.        <asp:MenuItem  
  72.            NavigateUrl="~/absensi.aspx"  
  73.            Text="Absensi"  
  74.            Value="Absensi">  
  75.   
  76.        </asp:MenuItem>  
  77.    </asp:MenuItem>  
  78.    <asp:MenuItem  
  79.        Text="Report"  
  80.        Value="Report">  
  81.        <asp:MenuItem  
  82.            NavigateUrl="~/rptcuti.aspx"  
  83.            Text="Cuti"  
  84.            Value="Cuti">  
  85.   
  86.        </asp:MenuItem>  
  87.        <asp:MenuItem  
  88.            NavigateUrl="~/rptlembur.aspx"  
  89.            Text="Lembur"  
  90.            Value="Lembur">  
  91.        </asp:MenuItem>  
  92.        <asp:MenuItem  
  93.            NavigateUrl="~/rptabsensi.aspx"  
  94.            Text="Absensi"  
  95.            Value="Absensi">  
  96.   
  97.        </asp:MenuItem>  
  98.    </asp:MenuItem>  
  99. </Items>  
  100. </asp:Menu>  
  101. <asp:contentplaceholder  
  102. id="ContentPlaceHolder1"  
  103. runat="server">  
  104.   
  105. </asp:contentplaceholder>  
  106. </div>  
  107. </form>  
  108. </body>  
  109. </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.
Diposkan oleh
Label:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)