Download PRAKTIKUM ASP.NET 9

PRAKTIKUM ASP.NET 9
THEME
ASP.NET Theme
ASP.NET Theme digunakan untuk membuat tampilan yang konsisten dari halaman
websites, Anda dapat menggunakan theme untuk menentukan style dari HTML
control dan ASP.NET control dapat digunakan dalam halaman.
ASP.NET Theme berbeda dengan Master Pages yang
digunakan untuk sharing
content antarhalaman, sedangkan theme digunakan untuk mengatur tampilan dari
content tersebut.
Membuat Theme
Untuk membuat theme pertama Anda harus menambahkan folder App_Theme
untuk menyimpan theme yang akan dibuat. Setiap folder yang Anda buat dalam
App_Theme merepresentasikan theme yang berbeda.
Folder theme dapat berisi jenis file yang bervariasi seperti image dan text. File yang
terpenting yang ada pada folder theme adalah Skin file dan CSS (Cascading Style
Sheet) file.
Perhatikan folder App_Theme seperti contoh dibawah ini:
Menambahkan Skin ke dalam Theme
Theme dapat berisi lebih dari satu Skin. Skin digunakan untuk memodifikasi
tampilan dari ASP.NET Control. Misalkan Anda menginginkan untuk memberi warna
pada background yang sama dari textbox untuk semua TextBox yang ada pada
form registrasi, maka Anda dapat mendefinisikan satu skin yang digunakan pada
setiap textbox yang ingin diganti background-nya.
Menambahkan Skin Pada Theme
1. Buat ASP.NET empty application baru dengan contoh penamaan Solution
ThemeSkin dan Project Bab6 seperti dibawah ini:
2. Untuk menambahkan skin, klik kanan pada root folder > pilih Add > pilih
Add ASP.NET Folder > pilih Theme, dan beri nama MyTheme
3. Pada Folder MyTheme klik kanan > pilih Add > pilih Skin File, beri nama
TextBox.skin
4. Tambahkan kode seperti contoh dibawah ini:
5. Tambahkan web form pada project beri nama ThemePage1.aspx dan isikan
kode seperti contoh dibawah ini:
6. Set konfigurasi pada web.config tambahkan kode seperti contoh dibawah ini:
7. Jika Anda perhatikan pada ThemePage1.asps, textbox txtnama diberi
backcolor merah tetapi saat di running di browser tidak ada efeknya karena
skin sudah diset property-nya di skin file. Perhatikan hasil dibawah ini
dengan menekan Ctrl+F5:
Menambahkan CSS ke dalam Theme
Selain Skin Anda juga dapat menggunakan CSS file untuk memformat tampilan
HTML dan ASP.NET Control, ikuti langkah berikut:
1. Buat lagi Theme dengan menambahkan Folder di App_Theme dan beri nama
CSSTheme.
2. Klik kanan pada CSSTheme > pilih Add > pilih Style Sheet, beri nama
MyStyleSheet.css
3. Ketikkan kode css seperti contoh dibawah ini:
4. Tambahkan web form, beri nama ThemeCSS.aspx dan ketikkan kode
dibawah ini:
ASP.NET Control diatas akan dirender menjadi HTML, misal jika Anda menggunakan
<asp:TextBox /> maka ketika dijalankan di browser akan otomatis diubah menjadi
<input type=”text”> dan sebagainya. Maka tags HTML tersebut akan diformat
menggunakan MyStyleSheet.css yang Anda buat dalam theme.
Penggunaan CSS pada theme lebih disarankan daripada penggunaan skin,
alasannya karena CSS adalah teknologi standar yang digunakan oleh hampir semua
browser modern saat ini. Penggunaan CSS juga mempercepat loading halaman
web, karena browser hanya me-load CSS satu kali untuk semua halaman kemudian
dapat disimpan secara temporer dalam chace browser.
CSS tidak hanya dapat digunakan untuk memformat tampilan seperti warna font
dan warna background dll,
tetapi juga digunakan untuk mengubah layout/tata
letak halaman. Jika Anda hendak mempelajari CSS lebih dalam, Anda dapat
mendapatkan
teknik-teknik
http://www.csszengarden.com/
web
design
yang
bagus
secara
gratis
di
5. Lihat hasilnya dengan menekan Ctrl+F5
Menggunakan Theme Secara Dinamis
Anda dapat berganti-ganti theme pada website Anda secara dinamis (seperti jika
Anda menggunakan aplikasi blog). Caranya, Anda harus menyimpan informasi
theme yang digunakan dalam object profile agar tidak hilang ketika menutup
browser. Anda juga harus menambahkan kode pada event PreInit, yaitu event yang
pertama kali dijalankan ketika halaman di-request. Agar dapat menyimpan object
dalam profile, Anda harus menjalankan ASP.NET Configuration dan membuat paling
tidak 1 user baru (akan dibahas pada bab tentang authentication dan membership).
Langkah-langkah membuat theme dinamis sebagai berikut:
1. Pertama Anda harus membuat theme yang berbeda, misal ThemeMerah dan
ThemeBiru seperti contoh dibawah ini:
2. Tambahkan CSS file pada masing-masing folder theme, Anda dapat
mencontoh isi kode atau ubah sesuai selera Anda untuk Merah.css seperti
dibawah ini:
3. Untuk isi kode Biru.css dapat Anda isikan seperti contoh dibawah ini:
4. Tambahkan web form dan beri nama DynamicTheme.aspx, kemudian
ketikkan kode berikut:
5. Klik kanan pada halaman tersebut dan pilih View Code, kemudian ketikkan
kode berikut:
6. Pada web.config tambahkan kode setting berikut:
7. Jalankan file DynamicTheme.aspx dengan menekan Ctrl+F5, perhatikan
hasilnya:
Jika Anda menjalankan hasil kode diatas maka akan tampil pilihan dua theme yang
dapat Anda pilih. Ketika Anda menutup browser dan membuka lagi halaman web
tersebut maka theme yang terakhir Anda pilihlah yang akan muncul. Ini terjadi
karena theme terakhir yang Anda pilih sudah tersimpan dalam object profile
sehingga tidak hilang.
TUGAS
1. Praktikkan contoh theme diatas sehingga tampak solution dan project Anda
seperti berikut (file dan kode dapat Anda improvisasi)
2. Terapkan/tambahkan tombol/link 2 theme warna dengan tampilan yang lebih
menarik menggunakan CSS pada MasterPage Praktikum ASP.NET 8!
Contoh:
Selamat mengerjakan, share di blog Anda masing-masing dan semoga berhasil!
Salam Hangat,

Hadi Wijaya