Penggunaan CSS pada ASP.Net

Setelah kita mengetahui apa itu CSS, sekarang saya akan membahas bagaimana cara pemakaian file CSS di ASP.Net..Bingung? Gimana Ya Caranya? Apa diberi bumbu nasi goreng biar lezat...hehehe...gak lah...

Cara Pemakaian File CSS pada ASP.Net yaitu :
1. Buat Project Website baru
2. Klik Kanan pada project anda. Pilih AddNew Item. Pilih StyleSheet. Ganti nama file CSS anda sesuai dengan keinginan anda, misalnya kita beri nama FILECSSSaya.CSS. Lalu, tekan tombol Add.
3. Source Code default di file FILECSSSaya.CSS adalah body{}..bener gak?....untuk belajar penggunaan CSS anda masukkan source code berikut ini :

body
{
background-color: Black;
margin: 5px;
padding: 0;
font: 12px Arial;
color: White;
}

#Header {
margin-bottom: 0.3em;
font-family : ComicSans MS;
font-size: 14px;
color: White;
text-align: center;
}

div.procedure {
border: solid 1px white;
margin: 5px;
padding: 5px;
float:left;
}

#footer {
margin-top: 0.3em;
font-family : Verdana;
font-size: 12px;
text-align: center;
color: White;
}

4. Klik 2 kali file "Default.aspx". Drag dan Drop file "FILECSSSaya.css" yang ada di Solution Explorer ke Default.aspx di bagian bawah tag "(title)". Contoh source code penempatan posisi file CSS tersebut adalah :

(%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %)

(!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd")
(html xmlns="http://www.w3.org/1999/xhtml")
(head runat="server")
(title)TesFile CSS(/title)
(link href="FILECSSSaya.css" rel="Stylesheet" type="text/css" /)
(/head)
(body)
(form id="form1" runat="server")

Pada source code "(link href="FILECSSSaya.css" rel="Stylesheet" type="text/css" /)" inilah file CSS anda dapat digunakan pada "DEFAULT.aspx"

5. Setelah anda menempatkan file "FILECSSSaya.css" pada "DEFAULT.aspx", tambahkan source code berikut ini setelah source code "(form id="form1" runat="server")" pada Source View "DEFAULT.aspx" :

(div)
(table)
(tr)
(td colspan="2" style="height: 43px" id="Header" )
Selamat Datang Di WEB Testing CSS(/td)
(/tr)
(tr)

(td style="width: 220px; height: 216px")
(/td)
(td style="width: 437px; height: 216px")
(div class="procedure")
AKU ADALAH SEorANg Kapiten dengan gagah berani(br /)
hahhahaha.....(br /)
Identitas Saya Adalah :(br /)
(br /)
(asp:Label ID="Label1" runat="server" Text="Nama Lengkap")(/asp:Label)
(asp:Label ID="Label2" runat="server" Text="JOKO Tole")(/asp:Label)(br /)
(br /)
(asp:Label ID="Label3" runat="server" Text="Lahir di ")(/asp:Label) 
(asp:Label ID="Label4" runat="server" Text="Papua")(/asp:Label)(br /)
(/div) (/td)
(/tr)
(tr)
(td colspan="2" style="height: 41px" id="footer")
Copyright © Richard Production
(/td)
(/tr)
(/table)

(/div)
(/form)

6. Jadi tanda selector .(titik) pada file CSS anda digunakan di "(div class="procedure")"
Sedangkan tanda # digunakan pada file CSS anda digunakan di "(div id="Header")"

Keterangan pada source code no 5 tanda () diganti dengan tanda <>.

Selamat Mencoba

CSS (Cascading Style Sheet)

Ketika kita tinggal di rumah atau mungkin di kos. Tentunya kalian pengen membuat tampilan kamar di rumah atau kos anda semenarik mungkin. Menempatkan lemari, komputer, laptop, meja, alas tidur/kasur anda sesuai keinginan atau mungkin dinding kamar rumah/kos anda ditempelin poster artis pujaan anda. Bagi cwek, biasanya kamar kos/rumah anda selalu ada boneka imut dgn ukuran kecil maupun besar. Nah, barang-barang itu diatur secara rapi agar tidak terlihat sumpek. Desain dan tampilan kamar kos yang menarik dan rapi mengidentifikasikan sosok anda..

Sama seperti ketika kita akan membuat website. Sebelum kita membuat proses transaksi di dalam website anda, tentunya kita harus mendesain halaman web kita semenarik mungkin agar dikunjungi banyak orang, orang menjdi tidak bosan ketika mengunjungi web anda. Misalnya di halaman anda diberi animasi atau mungkin diberi gambar atau mungkin diberi gambar-gambar bercorak atau mungkin font(huruf) diberi warna atau mungkin anda ingin mengganti model font(huruf)....



Pakai apa ya kira-kira supaya tampilan halaman web kita tampil semenarik mungkin? hmmmm....mikir dl....ah gampang banget. pakai aja CSS.

Apa itu CSS? Makanan apa sih CSS itu? Kepanjangan dari CSS adalah CASCADING STYLE SHEET. CSS merupakan file yang berfungsi untuk mendesain dan membuat tampilan halaman web semenarik mungkin. file CSS berekstensi *.css, CSS dapat diimplementasikan di berbagai tools pemrograman web seperti ASP.Net, ASP, PHP, Crypton,dll.

Contoh kecil isi dari file CSS yaitu :
body
{
background-color:blue;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
Penjelasan dari contoh kecil di atas: body{} merupakan coding yang berfungsi untuk mendesain tampilan halaman web anda secara global. Misal anda memiliki halaman web DEFAULT.aspx atau mungkin DEFAULT.php. Secara default, background dari halaman web itu putih mulus...Waow...putih mulus...hehehe...Ketika kita memakai file CSS dengan isian filenya adalah body{} aja dengan warna background sperti yang ada di contoh kecil itu maka background dari halaman web DEFAULT.aspx atau DEFAULT.php berubah menjadi warna biru...udah ngerti belum? tanya aja gan jgn skedar baca aja.... :D
Penjelasan dari coding p{} merupakan coding yang berfungsi untuk mendesain tampilan kalimat-kalimat yang ada di masing-masing paragraf pada halaman web anda. Jika di halaman web anda berisikan info-info suatu perusahaan.
body{} merupakan kode secara default dari file CSS yang ada di ASP.Net...

CSS memiliki class dan selector. apa itu class dan apa itu selector? source code dari class adalah ada tanda # pada awal nama class. misal #classku{}. source code itu memiliki fungsi untuk mendesain halaman web anda elemen per elemen.
Misal di halaman web anda ada header (tempat kita menuliskan nama perusahaan), ada footer (tempat kita menuliskan siapa pembuat web anda), ada badan kiri (tempat menaruh menu sperti di situs facebook), ada badan kanan (tempat menaruh info-info perusahaan atau mungkin tempatnya proses transaksi). Kita tentunya ingin mendesain satu per satu elemen-elemen tersebut. Supaya bisa mendesain satu per satu gunakanlah class. Untuk implementasinya bisa baca postingan aku selanjutnya...xixixi...
Fungsi dari selector adalah source code yang berfungsi untuk mendesain control-control secara menarik. source code dari selector adalah ada tanda [] pada awal nama selector. misal [slectortitle]{}. Untuk implementasinya bisa baca postingan aku selanjutnya...xixixi...

Saya tidak membahas secara lengkap masing-masing kegunaan dari isi dari file CSS.
Info lebih lanjut bisa lihat di http://www.w3schools.com/css/css_reference.asp

SELAMAT MENCOBA teman-teman

Advanced GridView

Control Data GridView merupakan control data yang dapat menampung sejumlah record data. Selain itu, gridview juga dapat memanipulasi data lewat fungsi insert,update,delete. Secara default, gridview mempunyai tampilan kolom per kolom secara horizontal.

Nah, gimana caranya agar tampilan gridView bisa mempunyai tampilan kolom per kolom secara vertikal. Lalu, gimana caranya qta dapat mendesain sendri tampilan yang sesuai dengan keinginan qta atau user.
Caranya yaitu :



Misal qta mempunyai database CDCatalog. Dalam database itu, terdapat 1 tabel yaitu tabel catalog. Field-field yang terdapat di dalam tabel catalog adalah Title(Primary Key), artis, Country,Company,Year. Silahkan isi datanya sesuai dengan keinginan kalian.
1. Setelah tabel dan isi datanya telah dibuat, drag n drop tabel catalog ke dalam webForm. Ketika tabel itu di drag, maka SQL Data Source telah mlakukan konfigurasi secara otomatis baik itu query select, insert,update maupun delete. Nah, kalian akan melihat tampilan default dari gridView.

2. Klik panah kecil(smart tags) yang ada di pojok kanan atas control gridView. Pilih 'EditColumns'. Kemudian hapus field-field title,artis,country,company, Year. Lalu, Pilih 'TemplateField' pada kolom 'available Fields' , tekan tombol Add. Pada properties TemplateField, Isi 'Header Text' sesuai dengan yang anda inginkan misal qta isi CDCatalog. Klik tombol OK.

3. Klik panah kecil(smart tags) yang ada di pojok kanan atas control gridView. Pilih 'Edit Templates'.

4. Pada templates 'ItemTemplate', anda drag n drop control label yang ada di toolbox. Kemudian klik panah kecil(smart tags) yang ada di pojok kanan atas control label. Pilih 'Edit DataBindings'. Pilih 'Text'. Pada BoundTo yang ada di 'Text', pilih field yang akan anda tampilkan terlebih dahulu,misal field title. Klik Tombol OK.
Lakukan secara berulang drag n drop label dan data bindings hingga field terakhir yang ingin anda tampilkan misalnya field Year dalam kasus ini.

5. Drag n Drop LinkButton yang ada di toolbox. secara default, LinkButton memiliki nama linkbutton1. Pada properties LinkButton, ubah nama linkButton1 menjadi Edit. Pada properties commandName yang ada di linkButton, ketik SELECT.
Lakukan drag n drop LinkButton satu kali lagi. Pada properties LinkButton, ubah nama LinkButton2 menjadi Delete. Pada properties commandName yang ada di linkButton, ketik DELETE.
**Lakukan running program, jika masih ada error ttg linkButton. Anda hapus LinkButton yang udah anda buat. Drag n drop lagi kemudian setting ulang lagi.

6. Kluar dari EditTemplates adalah klik panah kecil(smart tags) yang ada di pojok kanan atas ItemTemplates. Klik 'End Templates Editing'. Cek Properties 'DataKeyNames' yang ada di GridView apakah udah ada nama field yang akan di select harus field ID yang ada primaryKey. Misal, Pada properties 'DataKeyNames' yang ada di GridView pilih Title.

7. Tambahkan FormView di webForm anda, klik panah kecil(smart tags) yang ada di pojok kanan atas control FormView. Pada ChooseDataSoure, Pilih''. Lakukan Setting Konfigurasi Data Source. Misal dalam kasus ini, yang di-select adalah semua field yang ada di dalam tabel catalog. Kemudian, tekan tombol 'where'. Pilih Column 'Title'. Pada pilihan Source, pilih 'Control'. Kemudian, pada ControlID pilih 'GridView1'. Tekan tombol Add. Lalu, tekan tombol OK. Klik Tombol Next. Kemudian klik Tombol Finish.

8. klik panah kecil(smart tags) yang ada di pojok kanan atas control gridView. Pilih 'Edit Templates'. Lalu pada 'ItemTemplates', Klik 2x pada linkButton Edit, ketik source code brikut ini:
"FormView1.ChangeMode(FormViewMode.Edit)" (tanpa tanda petik ketika anda mengetik source code itu).

9. Kemudian anda running. Ketika anda melakukan proses Update pada formView maka data di gridView akan berubah tapi tidak nampak perubahannya. Caranya gimana supaya nampak perubahannya di GridView.
Jawabannya adalah: pada file ***.aspx.vb (file itu mrupakan tempat dimana anda mengetik kode no 8). Mengerti kah? Pada 'className' (pilihan yang ada di sebelah kiri atas file vb itu), pilih 'FormView1'. Pada 'MethodName' (pilihan yang ada di sebelah kanan atas file vb itu), pilih 'ItemUpdated'. Kemudian ketik source code berikut ini:
"GridView1.DataBind()"(hilangkan tanda petiknya).

Selamat Mencoba

Selection pada GridView

Salah satu fungsi dari GridView adalah dapat melakukan selection pada salah satu kolomnya. Jadi ketika qta men-select kolom Id_TipeHP maka data yang ada di field itu akan dibaca oleh control data lainnya (formView ato mungkin DataList ato repeater)



Contoh Kasus : Buat database ProdusenHP. Di dalam database, ada 2 tabel yaitu tabel ProdusenHP dan tabel Tipe_HP. Field yang ada di dalam tabel ProdusenHP adalah ID_Produsen(Primary Key), Nama_Produsen, dan Negara_Produsen. Field yang ada di dalam tabel Tipe_HP adalah ID_Tipe(Primary Key), ID_Produsen, Nama_Tipe, dan Harga. Gunakan tipe Data varchar pada seluruh field. Setelah itu, isi datanya pada kedua tabel tersebut. Berikut ini isi data yang ada di masing-masing tabel:

Tabel ProdusenHP

Tabel Tipe_HP


Setelah data terisi, buat web form baru yg udah ada master page. Beri nama Master.apx.... Drag tabel ID_Tipe pada database ProdusenHP yang terdapat di server Explorer. Kemudian, lakukan CONFIGURE DATA SOURCE. Query-nya "SELECT ID_Tipe, Nama_Tipe, Harga FROM Tipe_HP".
Setelah itu, klik smart tags (tanda segitiga kecil yang ada di pojok kanan atas gridview). pilih "edit columns". Remove ID_Tipe. Add "HyperLink Field".
Setting properties Hyperlink Field. Cari properties "HyperLInk URL Field".
Tekan tombol Add.
ketik Nama Field yang akan di-klik pada Header Text, dalam kasus ini ketik ID_Tipe. Kemudian cari properties "Hyperlink URL FormatString", ketik ~/[webform yang akan dituju?[nama field yang akan diselection]={0}. dalam kasus ini anda ketik ~/detil.aspx?ID_Tipe={0}. Cari Properties "Hyperlink text" pilih ID_Tipe.
Setelah selesai pengaturan selection, kemudian buat webForm baru yang sudah ada master pages beri nama detil.aspx..Di detil.aspx, anda drag formView.
Lakukan setting SQLDataSource. Query-nya "SELECT ID_Tipe, Nama_Tipe, Harga FROM Tipe_HP WHERE ID_Tipe=@ID_Tipe",where ID_Tipe berasal dari queryString "ID_Tipe"(sesuaikan dengan ID_Tipe pada Hyperlink URL Field GridView).
Finish,selesai qta mencobanya segera di-Run dari Master.aspx

Selamat Mencoba