D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET Pertemuan -2 1 Joko Christian, S.Kom topik : mendesain halaman web asp menggunakan master page dan adrotator tujuan : mengetahui konsep penggunaan masterpage dan salah satu cara menampilkan iklan (banner) dengan mudah Teaser : Pasti anda pernah mengunjungi halaman web yang memiliki format umum yang sama pada tiap halamannya, seperti banner iklan di atas halaman atau disamping. Format tersebut merupakan template yang dapat dipakai ulang dan terpisah dengan isi halaman spesifik. Pada PHP dikenal konsep template (.tpl) . Pada ASP.NET digunakan konsep MasterPage (.master). Pertemuan kali ini akan membimbing anda membuat sebuah halaman master lengkap dengan penampil banner untuk iklan (tampil random). Bagian I Membuat halaman master page 1. Buatlah sebuah website baru dengan nama asp_pertemuan02 2. Klik kanan nama project pada solution explorer dan pilih new Item
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
1 Joko Christian, S.Kom
topik : mendesain halaman web asp menggunakan master page dan adrotator
tujuan : mengetahui konsep penggunaan masterpage dan salah satu cara menampilkan iklan (banner)
dengan mudah
Teaser : Pasti anda pernah mengunjungi halaman web yang memiliki format umum yang sama pada
tiap halamannya, seperti banner iklan di atas halaman atau disamping. Format tersebut merupakan
template yang dapat dipakai ulang dan terpisah dengan isi halaman spesifik. Pada PHP dikenal konsep
template (.tpl) . Pada ASP.NET digunakan konsep MasterPage (.master).
Pertemuan kali ini akan membimbing anda membuat sebuah halaman master lengkap dengan penampil
banner untuk iklan (tampil random).
Bagian I
Membuat halaman master page
1. Buatlah sebuah website baru dengan nama asp_pertemuan02
2. Klik kanan nama project pada solution explorer dan pilih new Item
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
2 Joko Christian, S.Kom
lalu pilihlah template “MasterPage”
3. Anda akan dihadapkan pada halaman master yang kosong
Halaman master adalah sebuah template umum yang dapat digunakan berkali2 oleh halaman
lain (cocok untuk header dan footer dari sebuah halaman). Pada halaman master yang kosong,
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
3 Joko Christian, S.Kom
akan anda temukan sebuah ContentPlaceholder yang berfungsi sebagai penampung halaman
lain. Jadi bagian diluar contentPplaceHolder adalah bagian yang akan kita edit (sebagai header
dan footer).
Pada bagian Header akan kita tambahkan sebuah banner (umumnya berfungsi sebagai iklan),
dan bagian footer akan kita isi dengan tulisan copyright.
4. Berikan jarak antara awal page dengan ContentPlaceHolder (gunakan kursor dan enter)
pilih control bernama Adrotator dan drag keposisi kosong tadi
AdRotator akan menanyakan sumber datanya, saat ini abaikan saja dulu
5. Kita buat footer dengan menambahkan sebuah image dan signature pada bagian bawah dari
contentPlaceHolder.
pilih control dengan nama panel dan tarik ke bawah contentPlaceHolder, dan sesuaikan
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
4 Joko Christian, S.Kom
ukurannya sehingga urutannya seperti berikut.
6. Kita tambahkan gambar latar belakang untuk panel dengan mengubah property BackImageUrl
Klik dan tentukan file gambar yang ingin digunakan. (cara membuat folder images dan
menambahkan gambar ke folder tersebut telah dibahas di pertemuan 1)
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
5 Joko Christian, S.Kom
7. Buatlah signature yang ingin anda buat (warna font bisa diganti bila terganggu gambar)
Bagian II
Membuat file XML untuk sumber data AdRotator
menset Adrotator
Adrotator membutuhkan sumber data agar berfungsi dengan baik. Sumbernya bisa berupa database,
bisa juga berupa file XML, disini kita akan menggunakan file XML, karena cocok untuk banner yang
sederhana (jika banner rumit disarankan menggunakan database). Sekaligus mempelajari struktur file
XML
1. Sekilas tentang XML
XML (Extended Markup Language) Merupakan pengembangan dari HTML yang mampu
mendukung penyimpanan data dengan baik dan terstruktur, cocok untuk sinkronisasi antar
program , antar database atau antar platform.
Struktur file XML teratur dan selalu memiliki tag buka dan tag tutup antara data
<xml>
…
…
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
6 Joko Christian, S.Kom
</xml>
atau
<advertisement>
…
…
</advertisement>
2. XML untuk AdRotator membutuhkan format standar seperti berikut:
baris pertama menjelaskan versi dan jenis encoding dari file XML tsb
diantara tag <ad> adalah property untuk satu ad (ad=advertisement=iklan), jadi pada dua
contoh diatas ada 2 iklan.
diantara tag <imageUrl> ialah file gambar yang ingin ditampilkan (lokasi relative)
diantara tag <NavigateUrl> adalah link yang akan dieksekusi bila iklan diclick
diantara tag <AlternateText> adalah tulisan yang ditampilkan bila browser tidak mendukung
gambar
diantara tag <Impressions> adalah besarnya kemungkinan iklan itu tampil dari proses acak
(random)
3. Setelah mengenal struktur dasar XML nya, kita lanjutkan dengan membuat sebuah file XML
untuk iklan tadi
Klik kanan nama project pada solution explorer danpilih addNewItem,pada kotak dialognya, pilih