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 web design yang bagus secara gratis di http://www.csszengarden.com/
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