Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Web Teknologi 2Minggu …6… Page 1 MINGGU Ke Enam Web Teknologi 2 Pokok Bahasan: Master Pages Tujuan Instruksional Khusus: Mahasiswa akan dapat menjelaskan.

Presentasi serupa


Presentasi berjudul: "Web Teknologi 2Minggu …6… Page 1 MINGGU Ke Enam Web Teknologi 2 Pokok Bahasan: Master Pages Tujuan Instruksional Khusus: Mahasiswa akan dapat menjelaskan."— Transcript presentasi:

1

2 Web Teknologi 2Minggu …6… Page 1 MINGGU Ke Enam Web Teknologi 2 Pokok Bahasan: Master Pages Tujuan Instruksional Khusus: Mahasiswa akan dapat menjelaskan dan mengaplikasikan master pages dalam ASP.NET Referensi:  ASP.NET 2.0 dengan VB 2005, Bab 3

3 Web Teknologi 2Minggu …6… Page 2 Agenda Pengenalan master pages Bekerja dengan master pages Dasar-dasar master pages Master pages bersarang

4 Web Teknologi 2Minggu …6… Page 3 Pengenalan master pages Master page ??? –sebuah template atau layout tampilan sebuah web site yang akan digunakan oleh semua halaman.aspx sehingga tampilan utama dari web tersebut akan sama. Tampilan yang biasanya sama di semua halaman yang akan ditampilkan adalah gambar background, menu item, footer dan link-link lain yang ada dalam web. Yang berubah adalah content dari halaman tersebut. –sebuah template yang digunakan untuk mendesain tampilan yang akan digunakan di seluruh halaman web, ketika user melakukan navigasi, secara otomatis halaman-halaman akan tampil menyatu dengan master page tersebut sehingga content akan berubah. Master page akan dibuat satu kali dan content akan tampil sesuai halaman yang dibuka.

5 Web Teknologi 2Minggu …6… Page 4 Bekerja dengan master pages Inheritance/pewarisan visual yang ditambahkan ke ASP.NET 2.0 merupakan perbaikan besar di halaman web karena anda dapat membuat halaman template tunggal yang dapat digunakan sebagai fondasi untuk halaman isi di aplikasi anda. Template ini disebut sebagai master pages yang akan menambah produktivitas anda karena mempermudah pembuatan dan mengelola aplikasi.

6 Web Teknologi 2Minggu …6… Page 5 Dasar-dasar master pages Master pages adalah halaman tunggal yang menangani struktur dari situs web anda. Master pages memiliki dua fitur khusus yang berbeda dengan halaman lainnya. Pertama berisi tag khusus yang mengidentifikasi sebagai master pages ke server web seperti contoh berikut:

7 Web Teknologi 2Minggu …6… Page 6 Dasar-dasar master pages (continued …) Tag directive (tag khusus yang dipahami server dan tidak dikirim ke client) tersebut memiliki empat fitur yaitu: –Kata master membedakan halaman ini dengan halaman standar.aspx yang menggunakan kata page. –Atribut language memberitahu anda bahwa halaman meggunakan Visual Basic untuk pengkodean. –Atribut CodeFile memberitahu anda bahwa master pages menggunakan code-behind dan kode terletak pada file. –Atribut Inherits memberitahu anda bahwa class default untuk halaman ini adalah MasterPage, bukan class lainnya.

8 Web Teknologi 2Minggu …6… Page 7 Dasar-dasar master pages (continued …) Kedua, suatu master pages berisi kontrol ContentPlaceHolder yang memberitahu seseorang menggunakan master page ketika menambah informasi unik ke halaman web.

9 Web Teknologi 2Minggu …6… Page 8 Dasar-dasar master pages (continued …) Kode akan membuat daerah dalam template yang akan diisi dengan bahan dari halaman isi yang dibuat oleh pengembang. Ketika berkeja dengan master pages, anda akan membuat file master yang merupakan template untuk referensi bagi subpage atau halaman isi/content page. Master pages menggunakan ekstensi file.master, sedangkan halaman isi menggunakan ekstensi file.aspx. Letakkan semua yang anda inginkan sebagai template dalam file.master. termasuk seksi header, footer, dan navigasi yang akan digunakan sepanjang aplikasi web. Halaman isi berisi semua isi halaman kecuali elemen master pages. Pada saat aplikasi berjalan, engine ASP.NET akan mengkombinasikan elemen-elemen tersebut ke dalam satu halaman tunggal untuk pengguna akhir.

10 Web Teknologi 2Minggu …6… Page 9 Demo Master Pages

11 Web Teknologi 2Minggu …6… Page 10 Master pages bersarang Master page bersarang??? –Kebanyakan perusahaan dan organisasi memiliki grup atau divisi dalam organisasinya dan dalam pembuatan situs web baik intranet maupun internet, struktur situs yang dibuat mencerminkan struktur organisasi. Di sini diperlukan master page di dalam master page atau disebut master page bersarang/nested. –Sebagai contoh misalnya toko Stationary Alamo yang berpusat diJakarta membuka toko cabang di Yogya dan Bogor. Akan dibuat situs web dimana toko stationery Alamo sebagai master dasar dan masing-masing kantor cabang menggunakan template master dasar dari kantor pusat tetapi masing-masing kantor cabang juga membuat master page yang unik sendiri.

12 Web Teknologi 2Minggu …6… Page 11 Master pages bersarang (continued …) Kerangka kerja dari master page bersarang sebagai berikut. Buat master page dasar. Lalu buat halaman isi yang menggunakan master page dasar. Kemudian buat master page lainnya yang mengacu pada master page dasar. Terakhir buat halaman isi yang memerlukan isi dari master page dasar yang direferensikan oleh master page kedua. Dalam file.master dari master page dasar: –Tambahkan kode HTML umum untuk halaman aplikasi web. –Tambahkan kontrol asp:ContentPlaceHolder untuk tiap- tiap bagian halaman yang memerlukan isi spesifik halaman. –Atur atribut ID dengan pengenal/identifier unik.

13 Web Teknologi 2Minggu …6… Page 12 Master pages bersarang (continued …) Dalam file.aspx dari halaman yang akan menggunakan master page dasar: –Set atribut MasterPageFile dari dengan nama file.master dari master page dasar. –Tambahkan control asp:content untuk tiap-tiap control asp:ContentPlaceHolder dalam file.master dari master page dasar. –Set atribut ContentPlaceHolderID dari asp:content dengan ID yang berhubungan dengan asp:ContentPlaceHolder dalam master page dasar. –Tambahkan isi spesifik halaman dalam control asp:content

14 Web Teknologi 2Minggu …6… Page 13 Master pages bersarang (continued …) Dalam file.master dari master page kedua: –Set atribut MasterPageFile dari dengan nama file.master dari master page dasar. –Tambahkan kode HTML umum untuk halaman aplikasi web. –Tambahkan control asp:ContentPlaceHolder untuk tiap-tiap bagian dalam halaman yang memiliki isi spesifik halaman. –Atur atribut ID dengan pengenal/identifier yang unik.

15 Web Teknologi 2Minggu …6… Page 14 Master pages bersarang (continued …) Dalam file.aspx dari halaman yang akan menggunakan master page kedua: –Set atribut MasterPageFile dari dengan nama file.master dari master page kedua. –Tambahkan control asp:content untuk tiap control asp:ContentPlaceHolder dalam file.master. –Set atribut ContentPlaceHolderID dari asp:content dengan ID yang berhubungan dengan asp:ContentPlaceHolder dalam master page kedua. –Tambahkan isi spesifik halaman dalam control asp:content.

16 Web Teknologi 2Minggu …6… Page 15 Demo Master Pages Bersarang

17 Web Teknologi 2Minggu …6… Page 16 Questions & Answers

18 Web Teknologi 2Minggu …6… Page 17 Thank You


Download ppt "Web Teknologi 2Minggu …6… Page 1 MINGGU Ke Enam Web Teknologi 2 Pokok Bahasan: Master Pages Tujuan Instruksional Khusus: Mahasiswa akan dapat menjelaskan."

Presentasi serupa


Iklan oleh Google