Home >Technology >Asp pertemuan02

Asp pertemuan02

Date post:22-Jul-2015
Category:
View:63 times
Download:2 times
Share this document with a friend
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

  • D3 Unggulan Universitas Budi Luhur Kerangka belajar ASP.NET

    Pertemuan -2

    6 Joko Christian, S.Kom

    atau

    2. XML untuk AdRotator membutuhkan format standar seperti berikut:

    baris pertama menjelaskan versi dan jenis encoding dari file XML tsb

    diantara tag adalah property untuk satu ad (ad=advertisement=iklan), jadi pada dua

    contoh diatas ada 2 iklan.

    diantara tag ialah file gambar yang ingin ditampilkan (lokasi relative)

    diantara tag adalah link yang akan dieksekusi bila iklan diclick

    diantara tag adalah tulisan yang ditampilkan bila browser tidak mendukung

    gambar

    diantara tag 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

    ~/images/Contoso_ad.gif

    http://www.contoso-ltd.com

    Ad for Contoso, Ltd. Web site

    100

    ~/images/Aspnet_ad.gif

    http://www.asp.net

    Ad for ASP.NET Web site

    50

  • 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)