1 | u y u m h u s n e e . b l o g s p o t . c o m

◊◊ Assalamualaikum warrahmatullohi wabbarakatuh… ◊◊

Dari tutorial PEMBUATAN WEB DATA MAHASISWA MENGGUNAKAN

ASP.NET sebelumnya. Mari kita lanjutkan ke tahap selanjutnya….. jangan lupa

bismillah.

TAHAP 4

Dalam tahap 4 ini kita akan membuat Stlyesheet.css. Sebelum memulai ke langkah

berikutnya tentu ada baiknya kita mengetahui apa itu Stylesheet.css beserta tujuan kenapa

harus menggunakan dan fungsinya dalam ASP.NET. Berikut ulasannya.

Definisi CSS

CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet

language) yang mengontrol format tampilan sebuah halaman web yang ditulis

dengan menggunakan penanda(markup laguage. CSS terdiri dari style sheet yang

memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada

halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS,

kita tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen.

Setelah kita membuat sebuah style sheet, kita dapat menyimpan kode tersebut sekali saja dan

dapat kembali menggunakannya bila diperlukan.

CSS dibuat untuk memisahkan konten utamadengan tampilan dokumen yang meliputi

layout, warna dan font. Pemisahan ini dapat meningkatkann daya akses konten pada web,

menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik

dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan

mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik

tableless pada desain web.

2 | u y u m h u s n e e . b l o g s p o t . c o m

CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style

dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print, by

voice, dan lain-lain. Sementaraitu, pemilik konten web bisa menentukan link yang

menghubungkan konten dengan file CSS.

Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari

tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih

mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukura dan

formatting. Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi

memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu

web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada

akhirnya dapat memangkas waktu pembuatan web.

Fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman

wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu

dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

Lanjut lagi ke pengerjaan project bismillah nya yaaaa……..

Langkah-langkahnya sebagai berikut :

1. Klik kanan pada Web Project (Bismillah), Add New Item

2. Pilih Stylesheet lalu klik OK

Gambar 11

3. Ketik source sebagai berikut

3 | u y u m h u s n e e . b l o g s p o t . c o m

Gambar 12

4. Setelah tahapan ini, mari kita lakukan drag & drop. Mari kita buka pada halaman Webform1Di

dalam folder style berisi 2 format atau form lalu kita pilih pada stylesheet.css

Gambar 13

5. Dan seperti langkah di atas, kita lakukan drag & drop juga pada halaman

bismillahMaster.master.

4 | u y u m h u s n e e . b l o g s p o t . c o m

Gambar 14

TAHAP 5

Menambahkan AjaxToolKit Pada ToolBox VB.Net 2010

A-Ja-x merupakan singkatan daru Asynchronous JavaScript And XML. Ajax adalah suatu

teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya

adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan

pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca

ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan.

AjaxToolKit ini berguna sekali untuk mengatur dan membuat tampilan lebih atraktif,

contohnya membuat kalender, dan lain-lain.. karena AjaxToolKit akan banyak memberi

kemudahan pada pembuatan aplikasi web. Namun AjaxToolKit tidak terdapat pada VB.Net

sehingga kita harus mendownload sendiri dan memasukkannya kedalam VB.Net.

Bagi kamu yang belum punya AjaxToolKit, kamu bisa dapatkan disini

1. Buka AjaxToolKit yang telah di download tadi atau kopian mentahannya dari teman

(hehhe..) kemudian install di pc.

2. Buka Toolbox, kemudian cari lah Ajax Extension. lalu klik kanan > Choose Items

5 | u y u m h u s n e e . b l o g s p o t . c o m

Gambar 15

3. Setelah kita install, kemudian akan muncul tampilan seperti berikut

Gambar 16

4. Setelah di klik Browse maka akan menuju ke Windows Explorer PC kita, marikita cari File

AjaxToolKit nya.

6 | u y u m h u s n e e . b l o g s p o t . c o m

Gambar 17

5. Setelah di Klik Open maka akan tampil seperti ini pada VB.Net. Ada File yang bertanda

biru, itu menandakan bahwa file berhasil di include dan menunggu persetujuan dengan

mengklik OK.

Gambar 17

7 | u y u m h u s n e e . b l o g s p o t . c o m

6. Setelah kamu Approv dengan menekan OK, maka pada Tool Box Ajax Extension akan

banyak muncul tool-tool baru yang bisa kamu gunakan. Perlu diketahui setelah

dilakukan tahap ini loading menunggu beberapa saat.

TAHAP 6

Menampikan Fitur Kalender dengan AjaxToolKit pada ASP.Net

1. Buka konten Webform1 dan cari Kalender pada Source Code nya. Kemudian buka

Toolbox, pilih Folder AjaxToolKit dan cari CalenderExtender. Drag Tool tersebut lalu

tambahkan source ini TargetControlID="txttgllahir" Format="dd/MMM/yyyy"

setelah runat="server". lihat gambar dibawah ini.

Gambar 18

3. Setelah kita drag CalenderExtender kedalam source, makan akan otomatis manambahkan side

script ajax kedalam source. Lihat gambar dibawah ini

8 | u y u m h u s n e e . b l o g s p o t . c o m

Gambar 19

4. Langkah selanjutnya kita tambahkan ToolKitScriptManager di ToolBox AjaxToolKit.

letakkan source ini di bagian konten (letakkan saja dibagian atas).

Gambar 20

6. Jika source sudah dirasa benar, mari kita mulai running. Kita buka tampilan jendela di

local host nya dank li textbox Tanggal Lahir maka akan muncul otomatis pilihan tanggal

seperti gambar di bawah ini.

9 | u y u m h u s n e e . b l o g s p o t . c o m

Gambar 21

7. Berhasil…….. Alhamdulillah.

Tutorial selanjutnya masih ada lohhh…silahkan dibuka lagi di blog saya.

uyumhusnee.blogspot.com ;) Selamat Mencoba.

10 | u y u m h u s n e e . b l o g s p o t . c o m