Upload
uyumumyatihusnee
View
176
Download
0
Embed Size (px)
DESCRIPTION
projectasp.net
Citation preview
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