YOU ARE DOWNLOADING DOCUMENT

Please tick the box to continue:

Transcript
Page 1: Asp pertemuan02

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

Page 2: Asp pertemuan02

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,

Page 3: Asp pertemuan02

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

Page 4: Asp pertemuan02

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)

Page 5: Asp pertemuan02

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>

Page 6: Asp pertemuan02

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>

Page 7: Asp pertemuan02

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

Page 8: Asp pertemuan02

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)

Page 9: Asp pertemuan02

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

Page 10: Asp pertemuan02

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

Page 11: Asp pertemuan02

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

Page 12: Asp pertemuan02

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

Page 13: Asp pertemuan02

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.

Page 14: Asp pertemuan02

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

Page 15: Asp pertemuan02

D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET

Pertemuan -2

15 Joko Christian, S.Kom

diisi di bagian Content. Seperti berikut

Page 16: Asp pertemuan02

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

Page 17: Asp pertemuan02

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)


Related Documents