asp pertemuan02
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
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements xmlns="http://schemas.microsoft.com/AspNet/AdRotator-
Schedule-File">
<Ad>
<ImageUrl>~/images/Contoso_ad.gif</ImageUrl>
<NavigateUrl>http://www.contoso-ltd.com</NavigateUrl>
<AlternateText>Ad for Contoso, Ltd. Web site</AlternateText>
<Impressions>100</Impressions>
</Ad>
<Ad>
<ImageUrl>~/images/Aspnet_ad.gif</ImageUrl>
<NavigateUrl>http://www.asp.net</NavigateUrl>
<AlternateText>Ad for ASP.NET Web site</AlternateText>
<Impressions>50</Impressions>
</Ad>
</Advertisements>
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
7 Joko Christian, S.Kom
XMLFile dan berikan namanya XMLFile_banner.xml
4. Setelah anda klik add, maka anda akan melihat isi file xml tersebut
Tambahkan codenya menjadi seperti berikut
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
8 Joko Christian, S.Kom
pastikan anda mengganti ImageUrl dengan nama file yang valid yang ada di project anda. Lalu
jangan lupa di save
5. Kembali ke halaman MasterPage.Master dan klik kombo dari AdRotator1. Pilih New DataSource
Pada kotak dialog , pilih tipe XML dan berikan id (bebas)
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
9 Joko Christian, S.Kom
Klik Browse disamping Data file
tentukan file xml yang tadi telah dibuat
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
10 Joko Christian, S.Kom
Klik OK secukupnya
BAGIAN III
Membuat halaman web dengan master Page
1. Sekarang kita akan membuat halaman web dengan master page yang telah kita buat
pertama-tama kita hapus dahulu halaman default.aspx karena pada awalnya halaman ini tidak
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
11 Joko Christian, S.Kom
menggunakan master page. Klik kanan Default.aspx lalu pilih delete. Klik OK untuk konfirmasi
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
12 Joko Christian, S.Kom
2. Setelah didelete, tambahkan lagi item baru , hanya saja pada kotak dialog new item, pastikan
checkbox “select master page” tercentang
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
13 Joko Christian, S.Kom
3. Saat ditanya master page apa yang digunakan, pilihlah master page yang telah dibuat
4. Klik OK dan masuklah ke modus desain. Seharusnya anda mendapatkan halaman yang mirip
seperti berikut.
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
14 Joko Christian, S.Kom
Bagian yang abu-abu adalah bagian dari Master Page, sedangkan isi halaman Default.aspx dapat
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
15 Joko Christian, S.Kom
diisi di bagian Content. Seperti berikut
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
16 Joko Christian, S.Kom
5. Jalankan proyek , dan akan tampil seperti berikut
gambar banner akan berganti secara random
D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET
Pertemuan -2
17 Joko Christian, S.Kom
dan bila banner di klik, maka akan dibawa ke link yang telah ditentukan di di file XML.
6. Untuk setiap halaman yang membutuhkan header dan footer yang sama, anda bisa
menggunakan masterpage yang sama. Sehingga satu masterpage bisa dipakai berulang kali.
Hard Facts
Tanda ~ (tilde/cacing) artinya root dari project anda. Sehingga ~/images/foto.jpg mengacu pada file
foto.jpg yang ada dalam folder images yang ada dalam folder root project anda
Agar AdRotator tidak berubah-ubah ukuran (sesuai dengan ukuran gambar yang di-load) maka tentukan
nilai property width dan height dalam pixel (secara default nilainya kosong-berarti mengikuti ukuran
gambar)