BAB IV MASTER PAGE Keuntungan Master Page

Transkripsi

1 BAB IV MASTER PAGE ASP.NET memberi kemudahan kepada kita untuk membuat sebuah layout yang konsisten yang dapat digunakan pada aplikasi. Dengan master page tampilan dari aplikasi akan terlihat mempunyai standart behavior yang sama pada halaman-halaman di aplikasi. Master page dapat dibuat untuk menampilkan content yang akan ditampilkan. Ketika terdapat request content page, master page akan mengkombinasikan antara layout dan content dari content page. Master page mempunyai extension.master, misalnya layout.master dengan layout yang mengandung static text, syntax HTML, dan server control. Keuntungan Master Page Master page menyediakan fungsionality yang para developer secara tradisional buat dengan mengcopy code yang sudah ada, text, dan element control secara berulang-ulang, menggunakan frameset, menggunakan include file untuk common element, menggunakan ASP.NET user control dan lain sebagainya. Keuntungannya antara lain : 1. Master page memberi kemudahan untuk mensentralisasi common function pada halaman web yang jika ingin mengupdate dapat dilakukan hanya pada satu tempat saja, yaitu master page. 2. Master page memudahkan untuk membuat sebuah pengaturan control dan code dan mengimplementasikannya pada suatu halaman. Misalnya kita dapat membuat menu yang dapat diimplementasikan pada semua halaman web kita, pastinya dengan include master page. 3. Master page menyediakan control secara menyeluruh dengan adanya placeholder control. 4. Master page menyediakan object model yang mengijinkan kustomisasi master page dari content page.

2 MEMBUAT MASTER PAGE Cara menambahkan master page dan penggunaannya pada aplikasi adalah sebagai berikut: 1. Klik kanan pada solution web site 2. Klik Add New Item Maka akan tampil kotak dialog Add New Item 3. Pilih Master Page dan beri nama master page, misalnya layout.master seperti gambar berikut : 4. Klik Add. Maka master page layout.master sudah ditambahkan. 5. Pindahkan mode View menjadi mode Design dengan mengklik tombol Design. Hasilnya sbb:

3 6. Mulailah kita untuk membuat design dari Master Page. Sebelum melangkah lebih lanjut, hal yang perlu anda persiapkan adalah, menyiapkan image/gambar/banner yang nantinya akan kita gunakan. Akan lebih baik jika gambar-gambar tersebut kita simpan dalam folder tertentu. 7. Kita dapat menambah folder baru dengan cara : Klik kanan di nama website pada jendela Solution Explorer, dan pilih New Folder.

4 8. Tambahkan gambar yang dimaksud, dengan cara, klik kanan di folder gambar, kemudian pilih Add Existing Item. Kemudian pilih gambar yang akan anda gunakan. Kemudian klik Add. 9. Semua hal sudah kita persiapkan, mmulailah kita untuk mendesain master page. Diawali dengan menambahkan table, dengan ketentuan terdiri dari 4 Baris, dan 2 Kolom. Untuk menambahkan table, pilih menu Layout InsertTable. Akan tampil jendela baru, sbb : Isikan 4 pada rows, dan 2 Pada Column. Kemudian klik OK. Hasilnya tampak pada gambar berikut, sebuah tabel yang terletak di bawah contentplaceholder, seperti tampak pada gambar berikut:

5 10. Rencana disain dari master page kita adalah sbb : gambar Dasarwarna menu content Identitasprogrammer 11. Sesuai dengan disain yang sudah kita rencanakan, maka, baris 1 dan baris 2, akan kita jadikan dalam satu kolom, dengan cara mergercell. Demikian juga dengan baris ke empat. 12. Untuk memasukkan gambar ke master page, drag gambar ke baris pertama. Drag juga content place holder ke baris ke 2 kolom ke Identitas programmaer diisi misalnya dengan kalimat : budi Hasil akhir yang bisa anda dapatkan seperti tampak pada gambar berikut:

6 15. Untuk menggunakan master page yang sudah dibuat dilakukan pada saat menambahkan Web Form baru, yaitu pada saat menambahkan form baru Add New Item dan pilih Web From cheklist master page. 7. Klik Add, akan tampil kotak dialog Select a Master Page. Pilih master page yang tersedia pada kolom Contents of folder seperti gambar berikut.

7 8. Selanjutnya klik OK. Halaman Web sudah terinclude master page. Untuk menggunakan master page di halama n- halaman lain ulangi langkah 6-8. Selamat mencoba. MENGAITKAN MASTER PAGE PADA HALAMAN WEB BARU Untuk mengaitkan master page pada halaman web baru, ikuti step by step berikut ini. 1. MENGAITKAN MASTER PAGE PADA HALAMAN WEB YANG SUDAH ADA Untuk mengimplementasikan halaman aster page pada halaman web yang sudah ada, tinggal menambahkan sedikit skrip pada halaman source, seperti tampak pada gambar berikut: