Progress number 3. Pembuatan Lay-Out dengan Master Page

Navigation

Progress number 3. Pembuatan Lay-Out dengan Master Page

LibIDO on air ! Kali ini saat nya tim Developer angkat bicara.

Banyak pembaca yang bertanya kenapa postingan kelompok kami belum satupun yang bersifat teknis mengenai proyek LibIDO ini. Bukan, bukan, bukan karena kami tidak ingin berbagi pengalaman. Bukan itu masalahnya. Huff, Baiklah, daripada perbincangan itu memojokkan kami sebagai kelompok yg anti knowledge-sharing, kami akan menjelaskan sedikit alasannya.

Satu hal yang mendasari kami melakukan hal tersebut adalah kami ingin mengaplikasikan ilmu RPL (Rekayasa Perangkat Lunak) yang sudah kami dapat selama satu semester (1 semester = 6 bulan) di tingkat 2 kehidupan perkuliahan informatika kami. Sayang bukan, jika kita sudah memiliki ilmu seperti itu tapi hanya berakhir di kertas ujian ? Dengan demikian jelaslah sudah bahwa kami bukan kelompok yang antipati terhadap knowledge-sharing, kami cinta perkembangan ilmu pengetahuan.

Selesai basa-basinya.

Nah, setelah melalui tahapan analisis kebutuhan dan desain (sketsa lay-out,database) akhirnya kami pun mulai pada tahap ke tiga pada SDLC : Implementasi. Hampir buntu rasanya, ketika mencari dari referensi2 yang ada bahwa fungsi include di PHP yang berguna untuk membuat halaman web utama, yang bersifat statik tidak terdapat di ASP.NET. Padahal, kami membutuhkan setidaknya dua halaman web statik, yang bersifat sebagai home,,,yaitu pada aplikasi klien dan aplikasi admin-nya. Tapi, tentu saja kami tidak berprasangka buruk. Microsoft pasti lah telah menyedia kan jalan tersebut. Eksplorasi pun dilanjutkan.

Akhirnya, setelah dua jam mencoba beberapa template file yang ada di item nya VS,kami pun menemukan jawabannya. Ya,,,dia adalah Master Page. Dengan Feature yang mulai ada di ASP.NET 2.0 ini, pemrogram (baca : kita) dapat berbagi layout/ konten yang sama pada beberapa halaman di website kita. Dengan kata lain, kita memperlakukannya sebagai template. Sebagai contoh, jika kita ingin setiap halaman pada admin memiliki menu samping, header dan footer, maka kita cukup membuatnya sekali di master page dan membaginya ke setiap halaman yang ada. Mudah sekali bukan ?

Kita dapat membuat Master Page dengan dua cara, yaitu hard-code dan GUI-based. Dengan hard-code, kita harus membuat sebuah file dengan ekstensi .master dan meletakkanya di folder aplikasi yang sedang di bangun. Lebihjauh lagi kita bisa saja membuat beberapa master page buat website kita.

Berikut listing program sederhana untuk pembuatan Master Page :

<%@ Master Language=”C#” %>
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
            “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
            <html xmlns=”http://www.w3.org/1999/xhtml” >
            <head id=”Head1” runat=”server”>
                <style type=”text/css”>      //taruh kode CSS disin         </style>

            <title>AdminMaster</title>
            </head>
    <body>
        <form id=”form1” runat=”server”>
                <div class=”content”>
                <div class=”leftColumn”>
                        <asp:contentplaceholder id=”ContentPlaceHolder1” runat=”server”/>
                </div>
                <div class=”rightColumn”>
                        <asp:contentplaceholder id=”ContentPlaceHolder2” runat=”server”/>
                </div>
                <br class=”clear” />
                </div>
            </form>
    </body>
</html>

Jika menggunakan VWD maka untuk membuatnya hanya dengan memilih Website menu -> Add new Item -> Pilih Master page item

Master Page selesai. Untuk menggunakan master page itu pada halaman2 web kita, maka kita harus mendaftarkan file master page yang akan digunakan pada directive page tiap halaman. misalnya :

<%@ Page Language="C#" MasterPageFile='~/AdminMaster.master' %>

lalu isilah bagian2 pada web page di antara tag Content Place Holder tadi pada tiap halaman.

Dengan VWD,seperti biasa hal ini dilakukan dengan mudah. Ketika kita akan memasukkan file web form yang baru, akan ada kotak centang dengan label Select Master Page, beri tanda disitu,maka ketika mengklik add directive tersebut otomatis akan ditambahkan.

Dengen menggunakan master page ini ,kelompok kami telah berhasil menuntaskan pekerjaan awal untuk membuat dua halaman web yang statik tersebut dengan desain sesuai postingan sebelumnya dan bersiap menapak lebih jauh lagi.