Modul

Praktikum


ST-RK-1.16-082-007/R-

Memberikan pengetahuan dan kemampuan praktis yang dibutuhkan
mahasiswa dalam membangun sebuah aplikasi berbasis web dengan
menggunakan Microsoft Visual Studio .NET dan Microsoft ASP.NET
Pemrograman Web
Laboratorium Komputer STIKOM 1
DAFTAR ISI
Daftar Isi................................................................................................... 1
Pengantar Umum .................................................................................... 2
MODUL 1................................................................................................. 4
1.1 Master Pages ............................................................................... 5
1.2 Master Pages Sample ................................................................. 6
Latihan Modul 1 ................................................................................... 8
MODUL 2................................................................................................10
2.1 Site Navigation ......................................................................... 11
2.2 Site Navigation Sample ............................................................ 11
Latihan Modul 2 ................................................................................. 19
MODUL 3................................................................................................22
3.1 Repeater .................................................................................... 23
3.2 DataList ..................................................................................... 27
Latihan Modul 3 ................................................................................. 30
MODUL 4................................................................................................32
4.1 FormView ................................................................................. 33
4.2 Query (Insert, Update) ............................................................. 34
Latihan Modul 4 ................................................................................. 37
MODUL 5................................................................................................40
5.1 GridView ................................................................................... 41
Latihan Modul 5 ................................................................................. 43
MODUL 6................................................................................................46
6.1 Advanced GridView ................................................................ 47
6.2 GridView Sample ..................................................................... 48
Latihan Modul 6 ................................................................................. 51
MODUL 7................................................................................................52
7.1 AJAX .......................................................................................... 54
Latihan Modul 7 ................................................................................. 60
MODUL 8................................................................................................61
8.1 AJAXControlToolkit ................................................................ 62
8.2 AJAXControlToolkit Sample ................................................... 63
Latihan Modul 8 ................................................................................. 66
Pemrograman Web

2 Laboratorium Komputer STIKOM

PENGANTAR UMUM

Tools yang digunakan untuk praktikum Pemrograman Web adalah
Visual Web Developer 2005 Express Edition dengan database SQL
Server 2005 Express Edition. Sedangkan modul 8 yang membahas
tentang AJAX, menggunakan Ajax Extension 1.0 framework untuk
membuat template yang bisa memanfaatkan AJAX.
Pada saat pertama kali membuat project, pilih Location dengan File
System sedangkan pada pilih Visual Basic pada pilihan Language.
Simpan di local dulu, setelah selesai baru pindahkan project web
yang dibuat ke server masing-masing.


Pilih template ASP.NET Web Site untuk membuat modul 1 sampai 6.
Untuk modul 7, pilih template ASP.NET Web Service. Sedangkan
untuk modul 8, gunakan template Ajax-Enabled Web Site.

Penting:
Gunakan selalu MSDN Library for Visual Studio 2005 Express
Editon sebelum bertanya ke asisten/ko-asisten apabila ada kesulitan.
Pada setiap pembuatan halaman web, selalu pilih checkbox Place
code in separate file dan Select master page.
Pemrograman Web
Laboratorium Komputer STIKOM 3



Untuk menampilkan ASP.NET Web Application Administraton, pilih
menu Website, lalu pilih ASP.NET Configuration.

Pemrograman Web

4 Laboratorium Komputer STIKOM


MODUL 1
MASTER PAGES


The Internet is a Vibration of Where
Were Going Now.
Welcome to The Next Millennium,
Youve Got to Get on it Or Youre
Going To be Like The Dinosaur

- Carlos Santana -





Tujuan :
Praktikan mengerti dan memahami konsep Master Pages serta
mampu mengimplementasikan pada aplikasi web yang dibuat.

Materi :
Master Pages

Referensi :
Simpson, Alan, 2005, Visual Web Developer 2005 Express Edition for
Dummies, Wiley Publishing, Inc., Indianapolis, USA

Lowe, Doug, 2006, ASP.NET 2.0 Everyday Apps for Dummies, Wiley
Publishing, Inc., Indianapolis, USA

Hart, Chris; Kauffman, John; Sussman, David; Ullman, Chris,
Beginning ASP.NET 2.0, Wiley Publishing, Inc., Indianapolis, USA

Pemrograman Web
Laboratorium Komputer STIKOM 5
1.1 Master Pages
Master Pages adalah cara baru pada ASP.Net 2.0 yang bisa
digunakan agar situs yang kita buat menjadi konsisten terhadap
desain dan tampilan. Dengan master pages, kita bisa mendefinisikan
format tampilan umum yang muncul pada setiap halaman website.
Jadi kita tidak perlu lagi melakukan desain di setiap halaman web,
cukup melakukan sekali dengan master pages. Misalnya kita ingin
membuat situs yang mempunyai header, menu di sebelah kanan,
dan footer. Kita cukup mendesain sekali di master pages dan sudah
bisa dipakai di seluruh halaman web yang kita buat. Dengan adanya
satu desain, situs yang akan kita buat akan lebih konsisten dan tidak
membingungkan pengunjung situs. Sebenarnya, jika kita lihat pada
bagian source program, desain yang kita buat di master pages
adalah syntax HTML biasa.
Untuk mendesain tampilan pada master pages, bisa dengan
menggunakan CSS atau juga menggunakan Style Builder dengan
cara melakukan klik kanan pada master pages dan memilih Style.




Pemrograman Web

6 Laboratorium Komputer STIKOM

1.2 Master Pages Sample
Berikut adalah cara menggunakan Master Pages:

Tambahkan Master Pages ke web project anda dengan cara: klik
kanan pada Project dan pilih Add Add New Item, pilih Master
Pages



Akan terbentuk sebuah template yang dapat diedit baik di design
mode atau dalam bentuk HTML :


Pemrograman Web
Laboratorium Komputer STIKOM 7
Ubah isi dari Master Pages untuk mempunyai logo pada posisi atas,
dan gunakan Table (atau CSS) untuk membagi Master Pages menjadi
dua kolom. Letakkan asp:contentplaceholder> control dengan ID
MainContent di kolom kedua, biarkan kolom pertama untuk
Menu yang akan dibahas di modul 2. Jika dilihat dalam design
mode:



Gunakan Master Pages pada halaman web yang anda punya.

Pemrograman Web

8 Laboratorium Komputer STIKOM

Latihan Modul 1
Buat project dengan nama Modul_1
Buat Master Pages yang mempunyai struktur sebagai berikut:
kepala
badan
kiri
tengah
kanan
kaki
Struktur halaman:
Kepala
badan kiri badan tengah badan kanan
Kaki
Gunakan CSS / Table untuk desain dari tiap bagian struktur
halaman. Jika menggunakan CSS, panggil file CSS tersebut pada
halaman HTML secara eksternal. (Letakkan pemanggilan CSS di antara
tag <head></head>)
1. Buatlah 2 halaman web (default.aspx dan berita.aspx) yang
menggunakan Master Pages dengan susunan di atas. Badan kiri
Default.aspx berisi tentang Berita yang dapat di klik untuk
memunculkan halaman Berita.aspx (Berisi detil berita).

2. Berikut adalah contoh tampilan dari halaman Default dengan
struktur di atas yang menggunakan desain dari file CSS / Table.
Pemrograman Web
Laboratorium Komputer STIKOM 9


Catatan:
Font, warna, ukuran, dan background sesuai selera. Desainlah
tampilan semenarik mungkin untuk tambahan nilai desain.

Pemrograman Web

10 Laboratorium Komputer STIKOM

MODUL 2
SITE NAVIGATION


In The World of Ninja,
Those who Break the Rules are Scum,
That's True.
But, Those who Abandon their Friends are
Worse than Scum

- Hatake Kakashi -
Naruto


Tujuan :
Praktikan mengerti dan memahami konsep Site Navigation serta
mampu mengimplementasikan pada aplikasi web

Materi :
Menu, TreeView, XML

Referensi :
Simpson, Alan, 2005, Visual Web Developer 2005 Express Edition for
Dummies, Wiley Publishing, Inc., Indianapolis, USA

Lowe, Doug, 2006, ASP.NET 2.0 Everyday Apps for Dummies, Wiley
Publishing, Inc., Indianapolis, USA

Hart, Chris; Kauffman, John; Sussman, David; Ullman, Chris,
Beginning ASP.NET 2.0, Wiley Publishing, Inc., Indianapolis, USA

Pemrograman Web
Laboratorium Komputer STIKOM 11
2.1 Site Navigation
Kemudahan dalam navigasi situs sangat diperlukan, jika suatu situs
susah dalam mencari apa yang diinginkan, maka pengunjung tadi
akan kehilangan minat dan berpindah ke situs yang lain.
Di sini fungsi control site navigation dibutuhkan. Dengan site
navigation, kita bisa menciptakan navigasi yang mudah dan
konsisten. Dua control utama yang dipakai untuk navigasi situs
yaitu Menu dan TreeView.
Control Menu menawarkan link navigasi dari menu dropdown
sederhana. Bentuk ini cocok untuk situs yang tidak mempunyai
banyak halaman web dan menginginkan bentuk navigasi yang
sederhana.
TreeView menawarkan struktur navigasi dalam bentuk tree yang
bisa dibuka dan ditutup dengan menekan tanda + atau di sebelah
kiri masing-masing link. TreeView cocok untuk navigasi situs yang
kompleks dan memiliki banyak halaman web.
Menu dan TreeView dapat menggunakan data statik ataupun data
dinamik. Apabila menggunakan data statik, maka struktur navigasi
dari situs didefinisikan sebagai bagian dari control. Cara ini lebih
mudah dengan mendefinisikan struktur menu dengan
memasukkannya pada kotak dialog.
Dengan data dinamik, data tentang struktur file ditaruh pada sebuah
file bernama sitemap di luar control. Keuntungan menggunakan cara
ini adalah kita tidak perlu mengubah satu-satu di setiap control jika
ada perubahan. Cukup mengubah file sitemap, dan semua control
yang memakai file ini akan ikut berubah. Konsepnya mirip dengan
file CSS yang di luar file HTML.
2.2 Site Navigation Sample
Menggunakan data statik
a. Drag salah satu dari Menu atau TreeView
b. Klik tanda [] di sebelah kanan atas control Menu atau
TreeView untuk memunculkan Smart Tag. Dari Smart Tag, pilih
Edit Menu Items
Pemrograman Web

12 Laboratorium Komputer STIKOM


c. Gunakan Menu Item Editor untuk mendefinisikan setiap menu
item


Klik Add a root item untuk membuat menu induk, klik Add a child item
untuk membuat submenu. Ada tiga properties utama yang bisa diisi
di sini:
Pemrograman Web
Laboratorium Komputer STIKOM 13
NavigateUrl: untuk mengarahkan ke halaman web mana setelah
sebuah menu ditekan
Text: teks yang muncul di menu
ToolTip: teks informasi yang muncul ketika mouse berada di atas
menu
d. Klik OK jika sudah selesai

Menggunakan data dinamik
a. Klik kanan pada Solution Explorer, pilih Add New Item untuk
membuat file baru. Pilih template Site Map.
b. Edit syntax XML yang muncul untuk membuat struktur menu
Misal:
<siteMapNode url="service.aspx"
title="Layanan" >
<siteMapNode url="antar.aspx"
title="Antar Jemput" />
<siteMapNode url="garansi.aspx"
title="Garansi" />
</siteMapNode>

Menggunakan SiteMap di TreeView dan Menu:
a. Klik tanda [] di sebelah kanan atas control Menu atau
TreeView untuk memunculkan Smart Tag. Dari Smart Tag, pilih
Choose Data Source, lalu pilih <New data source>



Pemrograman Web

14 Laboratorium Komputer STIKOM

b. Setelah muncul Data Source Configuration Wizard, pilih Site Map.
Maka otomatis, Menu atau TreeView akan mempunyai struktur
menu yang dibuat di file site map sebelumnya.


c. Jika dijalankan di TreeView dan Menu yang menggunakan file
SiteMap setelah Auto Format akan jadi seperti berikut:


Menggunakan XML sebagai menu:
a. Buat file XML dengan cara, klik kanan pada Solution Explorer,
pilih Add New Item untuk membuat file baru. Pilih template
XML File
b. Buat struktur menu dengan syntax XML, misal:
Pemrograman Web
Laboratorium Komputer STIKOM 15
<Induk>
<Anak1>
<Anak1a />
<Anak1b />
<Anak1c />
</Anak1>
<Anak2 />
<Anak3 />
</Induk>
c. Masukkan control TreeView atau Menu pada halaman web
d. Klik tanda [] di sebelah kanan atas control Menu atau
TreeView untuk memunculkan Smart Tag. Dari Smart Tag, pilih
Choose Data Source, lalu pilih <New data source>

e. Setelah muncul Data Source Configuration Wizard, pilih Site Map

Pemrograman Web

16 Laboratorium Komputer STIKOM

f. Lalu muncul jendela baru, masukkan nama file XML yang telah
dibuat

g. Tekan OK, maka secara otomatis, struktur menu control
TreeView atau Menu akan mempunyai struktur yang sama
dengan struktur file XML

h. Agar menu yang menggunakan XML bisa mengarah ke halaman
situs sesuai dengan keterangan tujuan pada file XML, klik
tanda [] di sebelah kanan atas control Menu atau TreeView
untuk memunculkan Smart Tag. Pilih Edit TreeNode Databindings
untuk control TreeView atau pilih Edit MenuItem Databindings.
Pemrograman Web
Laboratorium Komputer STIKOM 17

i. Pilih tiap element dari XML (misal Induk), lalu tekan tombol
Add agar muncul pada kotak Selected data binding. Setelah itu,
pilih Induk agar muncul properties pada bagian kiri. Isi property
NavigateUrlField dengan tujuan dan TextField dengan teks
sesuai dengan atribut dari file XML yang digunakan.


Pemrograman Web

18 Laboratorium Komputer STIKOM

j. Atur juga data binding untuk elemen XML yang lain dengan
cara memilih elemen yang akan dipakai, lalu tekan tombol Add



k. Control treeview akan tampak seperti berikut setelah melakukan
proses di atas dan tiap menu akan bisa mengarah ke halaman
aspx yang dituju
Pemrograman Web
Laboratorium Komputer STIKOM 19

Latihan Modul 2
1. Buat project dengan nama Modul_2
2. Buat master pages yang beda untuk admin dan member biasa.
3. Struktur halaman web untuk admin seperti berikut
Kepala
menu kiri Isi
Kaki
4. Pada menu kiri terdapat stuktur menu sebagai berikut yang
menggunakan TreeView dan menggunakan file SiteMap:

Administrasi
Maintain User
Tambah User
Ubah/Hapus User
User Online
Maintain Berita
Maintain Foto

Jika dipakai pada salah satu halaman web, akan mempunyai
tampilan seperti berikut:
Pemrograman Web

20 Laboratorium Komputer STIKOM



5. Struktur halaman web untuk member biasa ditunjukkan gambar
di bawah ini (gunakan struktur HTML dan desain CSS yang ada
pada modul 1)
Kepala
badan kiri
badan
tengah
Badan
kanan
Kaki

6. Pada badan tengah terdapat stuktur menu sebagai berikut yang
menggunakan control Menu dan menggunakan file SiteMap:
Home
Arsip Berita
Berita Terbaru
Berita Favorit
Berita Per Bulanan
Galery Foto
Pemrograman Web
Laboratorium Komputer STIKOM 21
7. Pada badan kanan terdapat stuktur menu sebagai berikut yang
menggunakan control TreeView dan menggunakan file XML:
Situs Referensi
Detik
JawaPos
NetIndonesia

Jika dipakai pada salah satu halaman web, akan mempunyai
tampilan seperti berikut:


Catatan:
Font, warna, ukuran, dan background sesuai selera. Desainlah
tampilan semenarik mungkin untuk tambahan nilai desain.

Pemrograman Web

22 Laboratorium Komputer STIKOM

MODUL 3
REPEATER & DATALIST



Manusia bisa Bahagia bisa Tidak
Adalah Tergantung Pilihannya Sendiri

- Abraham Lincoln -
Presiden Amerika Serikat



Tujuan :
Praktikan mengerti dan memahami konsep Repeater dan DataList
serta memanfaatkan dalam aplikasi web

Materi :
Repeater dan DataList

Referensi :
Simpson, Alan, 2005, Visual Web Developer 2005 Express Edition for
Dummies, Wiley Publishing, Inc., Indianapolis, USA

Lowe, Doug, 2006, ASP.NET 2.0 Everyday Apps for Dummies, Wiley
Publishing, Inc., Indianapolis, USA

Hart, Chris; Kauffman, John; Sussman, David; Ullman, Chris, 2005
Beginning ASP.NET 2.0, Wiley Publishing, Inc., Indianapolis, USA

MSDN Library for Visual Studio Express 2005
Lee, Wei-Meng, ASP.NET 2.0 A Developers Notebook, 2005, OReilly
Media, Inc., USA

Pemrograman Web
Laboratorium Komputer STIKOM 23
3.1 Repeater
Repeater Control digunakan untuk memperlihatkan list dari item
suatu control secara berulang. Data Repeater Control dapat berasal
dari Sebuah Table Database, XML File, atau List-list item yang
lainnya.
Repeater mempunyai beberapa template yang dapat digunakan:
a. <HeaderTemplate>
HeaderTemplate merupakan element yang mengawali control
repeater, hanya ditampilkan sekali. Biasanya HeaderTemplate
digunakan sebagai Title/Judul dari data yang akan ditampilkan
b. <ItemTemplate>
ItemTemplate merupakan element yang menampung semua Isi
/Record dari data yang ada. Element ini ditampilkan berulang-
ulang sebanyak data yang ada.
c. <FooterTemplate>
Jika ada Header pasti ada Footer, FooterTemplate merupakan
element yang berfungsi sama dengan Header. Hanya letak
tampilannya yang berada di bawah ItemTemplate element.
d. <AlternatingItemTemplate>
Sesuai dengan namanya, element ini berfungsi sama dengan
ItemTemplate. Biasanya digunakan untuk variasi row sehingga
data lebih mudah untuk diliat
e. <SeparatorTemplate>
Merupakan element yang berfungsi untuk memisahkan element
yang 1 dengan yang lain

Buatlah file xml dengan nama cdcatalog.xml dengan isi sebagai
berikut:
<?xml version="1.0" encoding="ISO-8859-
1"?>

<catalog>
<cd>
<title>Empire Burlesque</title>
Pemrograman Web

24 Laboratorium Komputer STIKOM

<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
<country>USA</country>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
</cd>
<cd>
<title>Still got the blues</title>
<artist>Gary Moore</artist>
<country>UK</country>
<company>Virgin records</company>
<price>10.20</price>
<year>1990</year>
</cd>
<cd>
<title>Eros</title>
<artist>Eros Ramazzotti</artist>
<country>EU</country>
<company>BMG</company>
<price>9.90</price>
<year>1997</year>
</cd>
</catalog>

Pertama kali, import System.Data yang akan digunakan untuk
memanggil Dataset object.
Pemrograman Web
Laboratorium Komputer STIKOM 25
Imports System.Data

Buatlah Dataset yang mengambil data dari XML cdcatalog dalam
event Page_Load
Protected Sub Page_Load(ByVal sender As
Object, ByVal e As System.EventArgs)
Handles Me.Load
If Not Page.IsPostBack Then
Dim mycdcatalog = New DataSet

Mycdcatalog.ReadXml(MapPath(cdcatalog.xm
l))
cdcatalog.DataSource = mycdcatalog
cdcatalog.DataBind()
End If
End Sub

Buatlah Repeater Control dalam .aspx page. Isi dari
<HeaderTemplate> element ditampilkan pertama dan hanya sekali.
<ItemTemplate> element menampilkan tiap record yang berada di
DataSet, dan <FooterTemplate> element akan ditampilkan sekali
dan berada di akhir dari Repeater.
<form runat="server">
<asp:Repeater id="cdcatalog"
runat="server">

<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</HeaderTemplate>

<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%></td>
Pemrograman Web

26 Laboratorium Komputer STIKOM

<td><%#Container.DataItem("artist")%></td
>
<td><%#Container.DataItem("country")%></t
d>
<td><%#Container.DataItem("company")%></t
d>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</ItemTemplate>

<FooterTemplate>
</table>
</FooterTemplate>

</asp:Repeater>
</form>

</body>
</html>

Untuk variasi dari repeater, dapat ditambahkan
<AlternatingItemTemplate> element di atas footer element.
<AlternatingItemTemplate>
<tr bgcolor="#e8e8e8">
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td
>
<td><%#Container.DataItem("country")%></t
d>
<td><%#Container.DataItem("company")%></t
d>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</AlternatingItemTemplate>

Pemrograman Web
Laboratorium Komputer STIKOM 27
dan dapat digunakan <SeparatorTemplate> element
<SeparatorTemplate>
<tr>
<td colspan="6"><hr /></td>
</tr>
</SeparatorTemplate>

Contoh tampilan dari repeater dengan cdcatalog.xml sebagai data:



3.2 DataList
Control ini dapat digunakan untuk menampilkan data pada format
yang dapat kita definisikan sendiri dengan menggunakan template
dan style. DataList berguna untuk data pada struktur yang berulang
seperti tabel. Dapat juga untuk memilih, mengubah atau menghapus
data yang ada.
Terdapat template yang berfungsi untuk mendefinisikan layout dari
item data dengan menggunakan HTML dan control yang ada.
Berikut adalah macam-macam template dari DataList:


Pemrograman Web

28 Laboratorium Komputer STIKOM

Gunakan kembali file cdcatalog.xml yang anda buat pada modul 3
dengan cara Add Existing Item.
Buatlah DataList dengan nama cdcatalog dan beralihlah kepada
SourceView mode dan tuliskan code sebagai berikut:
<asp:DataList id="cdcatalog"
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-name="Verdana"
headerstyle-font-size="12pt"
headerstyle-horizontalalign="center"
headerstyle-font-bold="True"
itemstyle-backcolor="#778899"
itemstyle-forecolor="#ffffff"
alternatingitemstyle-backcolor="#e8e8e8"
alternatingitemstyle-forecolor="#000000"
footerstyle-font-size="9pt"
footerstyle-font-italic="True">

<HeaderTemplate>
My CD Catalog
</HeaderTemplate>

<ItemTemplate>
"<%#Container.DataItem("title")%>" of
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>

<AlternatingItemTemplate>
"<%#Container.DataItem("title")%>" of
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</AlternatingItemTemplate>

<FooterTemplate>
&copy; Catalog CD
</FooterTemplate>

Pemrograman Web
Laboratorium Komputer STIKOM 29
</asp:DataList>
Jangan lupa untuk membuat DataSet yang mengambil data dari
XML seperti yang ada pada Modul 3.

Hasil dari DataList dengan data dari cdcatalog.xml


Pemrograman Web

30 Laboratorium Komputer STIKOM

Latihan Modul 3
1. Buat project dengan nama Modul_3
2. Buat dua tabel dengan struktur berikut:



3. Isi dengan data berikut:






4. Buat dua halaman web datalist.aspx dan repeater.aspx.
Manfaatkan juga master pages yang dibuat pada modul 1 pada
halaman web tersebut.

Pemrograman Web
Laboratorium Komputer STIKOM 31
5. detail.aspx berisi control DropDownList dan DataList.
DropDownList merupakan id produsen HP yang diambil dari
tabel Produsen_HP. Ketika DropDownList dipilih, maka data
yang ditampilkan pada DataList menampilkan tipe HP yang id
produsennya sesuai dengan id yang dipilih.



6. repeater.aspx berisi control DropDownList dan repeater.
DropDownList merupakan id produsen HP yang diambil dari
tabel Produsen_HP. Ketika DropDownList dipilih, maka data
yang ditampilkan pada repeater menampilkan List HP yang id
produsennya sesuai dengan id yang dipilih.




Pemrograman Web

32 Laboratorium Komputer STIKOM

MODUL 4
FORMVIEW


Sebuah kesuksesan yang besar dapat dicapai
setelah 99% kegagalan

- Soichiro Honda -


Tujuan :
Praktikan dapat melakukan query yang kompleks serta dapat
menggunakan FormView

Materi :
Query, FormView

Referensi :
Simpson, Alan, 2005, Visual Web Developer 2005 Express Edition for
Dummies, Wiley Publishing, Inc., Indianapolis, USA

Lowe, Doug, 2006, ASP.NET 2.0 Everyday Apps for Dummies, Wiley
Publishing, Inc., Indianapolis, USA

Hart, Chris; Kauffman, John; Sussman, David; Ullman, Chris, 2005
Beginning ASP.NET 2.0, Wiley Publishing, Inc., Indianapolis, USA

MSDN Library for Visual Studio Express 2005
Pemrograman Web
Laboratorium Komputer STIKOM 33
4.1 FormView
Control FormView dapat digunakan untuk menampilkan single
record dari table sebuah data source. Ketika menggunakan
FormView, kita menentukan template untuk menampilkan dan
mengubah nilai yang ada. Template bisa berisi format tampilan,
control, dan ekspresi binding untuk menciptakan form.
FormView sering digunakan bersamaan dengan GridView untuk
master/detail.
FormView mempunyai beberapa Template. Untuk melakukan edit
template, tampilkan smart tag dengan klik pojok kanan atas control
FormView, lalu pilih Edit Templates. Akan muncul tampilan berikut:


Kita tinggal memilih template yang akan digunakan. Setelah itu kita
bisa mengubah tampilan dari template yang ada. Untuk mengeset
atau mengambil nilai dari control yang ada di dalamnya, kita perlu
melakukan convert type (Ctype) dari nama control yang ada di
dalam template. Misal di FormView1 pada EditItemTemplate ada
label yang bernama label_id , maka untuk mengeset properti text di
dalamnya, kita bisa menggunakan syntax:
CType(FormView1.FindControl("label_id"),
Label).Text = "Tulisan label"
Untuk mengubah mode template, kita bisa menggunakan syntax:
FormView1.ChangeMode(FormViewMode.Edit)
Pemrograman Web

34 Laboratorium Komputer STIKOM

4.2 Query (Insert, Update)
Ketika menggunakan sebuah data source, kita bisa mendefinisikan
sendiri tentang query pada tabel yang ada. Misalnya kita
memanfaatkan control SqlDataSource, klik pojok kanan atas untuk
menampilkan smart tag, lalu pilih Configure Data Source...



Setelah muncul jendela Configure Data Source, kita bisa memilih
ConnectionString yang ada atau membuat ConnectionString baru.
Klik tombol Next.



Pemrograman Web
Laboratorium Komputer STIKOM 35
Pada jendela selanjutnya, pilih radio button Specify a custom SQL
statement or stored procedure. Klik tombol Next.



Di jendela inilah kita bisa menaruh query SQL kita untuk melakukan
Select, Update, Insert, dan Delete. Ada juga bantuan Query Builder
untuk membuat query secara mudah. Klik tombol Next jika sudah
selesai.



Pemrograman Web

36 Laboratorium Komputer STIKOM


Pada jendela terakhir ini kita bisa mengetes query yang sudah dibuat
dengan cara klik tombol Test Query. Jika hasil sudah seperti yang
diinginkan bisa langsung klik tombol Finish.



Pemrograman Web
Laboratorium Komputer STIKOM 37
Latihan Modul 4
1. Buat project dengan nama Modul_4
2. Buat file database baru dengan nama Plotting.mdf, lalu buat
tabel di dalamnya dengan struktur berikut:



3. Isi dengan data-data berikut:






Pemrograman Web

38 Laboratorium Komputer STIKOM

4. Buat dua halaman web dengan nama Plotting.aspx dan
Plotting_Jaga.aspx

Plotting.aspx
Plotting_Jaga.aspx


5. Pada halaman Plotting.aspx terdapat tampilan yang
menunjukkan daftar jaga dari semua pengajar dengan
menggunakan kolom Kode_Pengajar, Kode_Group,
Nama_Praktikum, Hari, Ruang_Lab yang ditampilkan pada control
DataList. Ada juga filter berdasarkan hari yang didapatkan dari
DropDownList yang hasilnya ditampilkan pada DataList.
Terdapat link yang menuju ke halaman Lihat_Jadual.aspx dan
Plotting_Jaga.aspx.



Pemrograman Web
Laboratorium Komputer STIKOM 39
6. Pada halaman Plotting_Jaga.aspx terdapat tampilan jaga
berdasasrkan filter kode pengajar dari control DropDownList
yang hasilnya ditampilkan pada GridView. Kolom pada
GridView sama seperti kolom pada GridView pada halaman
Plotting.aspx tapi ditambah kolom Select. Apabila record pada
GridView di-klik, maka Kode_Pengajar dan Kode_Group akan
ditampilkan pada control FormView dalam mode template edit.
Terdapat juga tombol Data_Baru yang berfungsi untuk
memasukkan data baru ke tabel Jaga_Praktikum melalui control
FormView pada mode template insert.





Pemrograman Web

40 Laboratorium Komputer STIKOM

MODUL 5
GRIDVIEW AND DETAILVIEW


Pertanyaan yang Paling Mendesak
Dalam Hidup Ini :
Apakah yang Kamu Perbuat
Bagi Orang Lain?

- Martin Luther King Jr. -


Tujuan :
Praktikan dapat membuat database dan table serta dapat
menggunakan skenario master-detail pada control GridView dan
DetailsView

Materi :
GridView, DetailsView

Referensi :
Simpson, Alan, 2005, Visual Web Developer 2005 Express Edition for
Dummies, Wiley Publishing, Inc., Indianapolis, USA

Lowe, Doug, 2006, ASP.NET 2.0 Everyday Apps for Dummies, Wiley
Publishing, Inc., Indianapolis, USA

Hart, Chris; Kauffman, John; Sussman, David; Ullman, Chris, 2005
Beginning ASP.NET 2.0, Wiley Publishing, Inc., Indianapolis, USA

Lee, Wei-Meng, ASP.NET 2.0 A Developers Notebook, 2005, OReilly
Media, Inc., USA

Pemrograman Web
Laboratorium Komputer STIKOM 41
MSDN Library for Visual Studio Express 2005
5.1 GridView
Control baru yang lebih lengkap dan mudah digunakan di ASP.NET
2.0 pengganti DataGrid. Dengan GridView, kita bisa menampilkan,
mengubah, dan menghapus data dari berbagai macam data source,
termasuk database, file XML, file Sitemap dan objek lainnya yang
mengandung data.
Data dalam GridView ditampilkan secara tabular. Bisa juga
dilakukan pemformatan tampilan secara otomatis dengan
menggunakan AutoFormat. Dengan GridView, kita dimudahkan
dalam melakukan paging, sorting, dan pemilihan data. Cukup
dengan mencentang pilihan Enable Paging, Enable Sorting, Enable
Selection pada smart tag.



Cara menggunakan GridView dapat dilakukan dengan cara cepat
yaitu dengan cara menarik tabel yang berada di server explorer
langsung ke halaman web yang diinginkan.
Pemrograman Web

42 Laboratorium Komputer STIKOM



Setelah melakukan hal di atas maka akan terbentuk GridView
beserta SqlDataSource seperti gambar di bawah ini:



Pemrograman Web
Laboratorium Komputer STIKOM 43
Latihan Modul 5
1. Buat project dengan nama Modul_5
2. Buat dua tabel dengan struktur berikut:



3. Isi dengan data berikut:






4. Buat dua halaman web yaitu master.aspx dan detail.aspx.
Manfaatkan juga master pages yang dibuat pada modul
sebelumnya pada kedua halaman tadi.

Pemrograman Web

44 Laboratorium Komputer STIKOM

5. Master.aspx berisi control DropDownList dan GridView.
DropDownList merupakan id produsen HP yang diambil dari
tabel Produsen_HP. Ketika DropDownList dipilih, maka data
yang ditampilkan pada GridView menampilkan tipe HP yang id
produsennya sesuai dengan id yang dipilih.




6. Detail.aspx berisi control DataList yang menampilkan data tipe
HP yang dipilih pada GridView.

Pemrograman Web
Laboratorium Komputer STIKOM 45

Pemrograman Web

46 Laboratorium Komputer STIKOM

MODUL 6
ADVANCED GRIDVIEW


Banyak Kegagalan Dalam Hidup ini
Dikarenakan Orang-Orang Tidak Menyadari
Betapa Dekatnya Mereka dengan Keberhasilan
Saat Mereka Menyerah

- Thomas Alfa Edison -

Tujuan :
Praktikan dapat mengerti dan dapat menggunakan GridView lebih
lanjut sesuai dengan fungsi dari GridView itu sendiri

Materi :
GridView

Referensi :
Simpson, Alan, 2005, Visual Web Developer 2005 Express Edition for
Dummies, Wiley Publishing, Inc., Indianapolis, USA

Lowe, Doug, 2006, ASP.NET 2.0 Everyday Apps for Dummies, Wiley
Publishing, Inc., Indianapolis, USA

Hart, Chris; Kauffman, John; Sussman, David; Ullman, Chris,
Beginning ASP.NET 2.0, Wiley Publishing, Inc., Indianapolis, USA

MSDN Library for Visual Studio Express 2005

Pemrograman Web
Laboratorium Komputer STIKOM 47
6.1 Advanced GridView
Pada modul sebelumnya telah dijelaskan GridView secara singkat.
GridView dapat dikembangkan lebih lanjut karena GridView
merupakan komponen Rich Data Control dengan kemampuan
terlengkap dan memiliki proses pengaturan terkompleks di antara
komponen-komponen yang lain.
Pengaturan GridView biasanya dilakukan melalui fasilitas smart tag
yang didalamnya telah terdapat fasilitas untuk mendefinisikan
kemampuan paging, editing, deleting serta pemilihan record dengan
jalan menempatkan Linkbutton yang bersesuaian dengan fungsi
masing-masing.
Pengaturan lain dalam smart tag adalah pengaturan tampilan field
dalam link Edit Columns. Selain bisa mengatur tampilan header dan
mengurangi jumlah field yang akan ditampilkan, fitur terpenting
dalam kotak dialog ini adalah mengubah field menjadi sebuah
template field. Ini berarti bahwa field yang telah didefinisikan sebagai
template field, didalamnya dapat ditempati tag HTML layaknya
ItemTemplate pada Repeater.
Jenis field yang bisa ditampilkan dalam Gridview antara lain:
a. BoundField
Jenis field default yang melakukan proses databinding dengan
tabel atau hasil query yang dihasilkan komponen Datasource.
b. ButtonField
Menampilkan Button dalam tiap record yang ditampilkan,
biasanya digunakan untuk proses manipulasi data.
c. CheckBoxField
Field yang otomatis tampil jika field asli bertipe boolean.
d. CommandField
Menampilkan Linkbutton default dari fasilitas smart tag.
e. HyperlinkField
Menampilkan field dalam bentuk hyperlink, digunakan untuk
proses manipulasi data yang membutuhkan link ke bagian lain.
Pemrograman Web

48 Laboratorium Komputer STIKOM

f. ImageField
Menampilkan file gambar di tiap record
g. TemplateField
Manipulasi terbesar yang dapat dilakukan dalam GridView
terjadi dalam field jenis ini. Selain mampu disisipi tag HTML,
dapat juga disisipi komponen lainnya.

6.2 GridView Sample
Gunakan kembali cdcatalog.xml yang ada di modul-modul
sebelumnya (hint: modul tentang repeater dan datalist).
Tambahkan komponen GridView dalam halaman web anda,
ketikkan code seperti berikut dalam GridView anda
<asp:GridView ID="cdcatalog"
runat="server" AllowPaging="True"
AutoGenerateColumns="False"
BorderWidth="0px" EmptyDataText="Tidak
ada Katalog" ShowHeader="false"
Height="323px" Width="640px" PageSize="3"
OnPageIndexChanging="gridView_PageChangin
g">
<Columns>
<asp:TemplateField
HeaderText="Comment"
SortExpression="Comment">
<ItemTemplate>
<table>
<tr bgcolor="#e8e8e8">
<td>Title</td><td><%#Container.DataItem("
title")%></td></tr>

<tr><td>Artist</td><td><%#Container.DataI
tem("artist")%></td></tr>

<tr bgcolor="#e8e8e8">
<td>Country</td><td><%#Container.DataItem
("country")%></td></tr>

Pemrograman Web
Laboratorium Komputer STIKOM 49
<tr><td>Company</td><td><%#Container.Data
Item("company")%></td></tr>

<tr
bgcolor="#e8e8e8">
<td>Price</td><td><%#Container.DataItem("
price")%></td></tr>

<tr><td>Year</td><td><%#Container.DataIte
m("year")%></td></tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Ketikkan kode berikut pada page_load dan buat sub baru untuk
handle changepage pada gridview
Dim mycdcatalog = New DataSet
Protected Sub Page_Load(ByVal sender
As Object, ByVal e As System.EventArgs)
If Not Page.IsPostBack Then

mycdcatalog.ReadXml(MapPath("cdcatalog.xm
l"))
cdcatalog.DataSource =
mycdcatalog
cdcatalog.DataBind()
End If
End Sub

Protected Sub gridView_PageChanging
(ByVal sender As Object, ByVal e As
GridViewPageEventArgs)


mycdcatalog.ReadXml(MapPath("cdcatalog.xm
l"))
cdcatalog.DataSource = mycdcatalog

cdcatalog.PageIndex =
e.NewPageIndex
cdcatalog.DataBind()
End Sub
Pemrograman Web

50 Laboratorium Komputer STIKOM

Hasil dapat dilihat sebagai berikut:

Pemrograman Web
Laboratorium Komputer STIKOM 51
Latihan Modul 6
1. Buat project dengan nama Modul_6
2. Buat tabel cdcatalog dengan struktur dan data seperti berikut:



3. Buat halaman web yaitu cdcatalog.aspx. Manfaatkan master pages
yang dibuat pada modul-modul sebelumnya pada halaman
cdcatalog.aspx.

4. cdcatalog.aspx berisi control FormView dan GridView. GridView
menampilkan data dari cdcatalog dan terdapat pilihan edit dan
delete. Ketika edit dipilih, maka data yang dipilih pada
GridView akan ditampilkan dalam FormView dalam Edit mode.


Catatan:
Gunakan LinkButton dalam TemplateField pada GridView untuk
membuat Edit dan Delete.
Pemrograman Web

52 Laboratorium Komputer STIKOM

MODUL 7
ASP .NET 2.0 WITH AJAX

It Has Become Appallingly Obvious
That Our Technology
Has Exceeded Our Humanity

- Albert Einstein -













Tujuan :
Praktikan mengerti dan memahami konsep AJAX
dan dapat memanfaatkan control AJAX
dalam aplikasi web

Materi :
AJAX, Script Manager

Referensi :
Simpson, Alan, 2005, Visual Web Developer 2005 Express Edition for
Dummies, Wiley Publishing, Inc., Indianapolis, USA

Lowe, Doug, 2006, ASP.NET 2.0 Everyday Apps for Dummies, Wiley
Publishing, Inc., Indianapolis, USA

Hart, Chris; Kauffman, John; Sussman, David; Ullman, Chris,
Beginning ASP.NET 2.0, Wiley Publishing, Inc., Indianapolis, USA

MSDN Library for Visual Studio Express 2005
Pemrograman Web
Laboratorium Komputer STIKOM 53

Pemrograman Web

54 Laboratorium Komputer STIKOM

7.1 AJAX
AJAX merupakan singkatan dari Asynchronous JavaScript And
XML. Dengan teknik ini, kita bisa membuat aplikasi web lebih
responsif dan interactif. Inti dari AJAX adalah object
XMLHttpRequest, object ini memfasilitasi dalam pengiriman jumlah
data yang lebih kecil ke web server secara asinchronus.
Dengan AJAX, aplikasi web kita akan lebih ringan karena kita bisa
memanfaatkan partial postback dalam artian hanya bagian tertentu
saja yang dibuat postback, tidak satu halaman penuh. Secara default,
apabila kita melakukan postback pada halaman web, maka seluruh
halaman akan di-render, tidak demikian jika kita menggunakan
AJAX. Jadi, dengan teknik ini maka pengaksesan halaman web bisa
lebih ringan.
AJAX Extension 1.0 Merupakan framework yang memungkinkan
kesulitan dalam pemanfaatan AJAX dapat dihindari karena
menawarkan kemudahan dalam hal implementasi AJAX seperti kita
tidak perlu lagi memikirkan tentang kompabilitas browser yang
berbeda karena framework bisa mengeluarkan output dengan kode
yang benar sesuai dengan web browser client.
Kita perlu meng-install framework ini agar bisa digunakan sebagai
template pada aplikasi web yang kita buat. Setelah kita melakukan
instalasi, maka akan muncul folder baru pada C:\Program
Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions

Untuk menggunakan template ini, kita tinggal memilih template
Atlas ketika membuat project baru.

Pemrograman Web
Laboratorium Komputer STIKOM 55


Ada beberapa control yang digunakan pada modul ini, yaitu:
ScriptManager: jantung dari Ajax yang mengelola pembangunan
dari beberapa library JavaScript yang mengimplementasikan
fungsionalitas client-side runtime dari Atlas.
UpdatePanel: digunakan untuk menandai area pada halaman
web yang akan secara otomatis di-update ketika postback terjadi
tanpa harus melakukan postback secara satu halaman penuh.
UpdateProgress: digunakan untuk memberitahukan bahwa
proses asynchronus sedang berjalan, biasanya dipakai
bersamaan dengan control UpdatePanel.
Timer : Kontrol Timer dapat digunakan untuk melakukan
postback keseluruhan halaman atau sebagaian halaman yang
ada dalam UpdatePanel dalam jangka waktu tertentu.

Contoh penggunaan Ajax:
Setelah kita membuat project baru dengan memilih template Atlas,
maka pada Solution Explorer akan muncul struktur file seperti
berikut:
Pemrograman Web

56 Laboratorium Komputer STIKOM



Pada halaman Default.aspx, masukkan syntax berikut pada bagian
source editor:

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"
runat="server"
EnablePartialRendering="true"/>

<div style="background-color: Yellow;
float: left; width: 100px;">
<asp:Label ID="FullPostBackLabel"
runat="server" /><br />
<asp:Button ID="FullPostBackButton"
runat="server"
text="Full Post Back"

OnClick="FullPostBackButton_OnClick" />
</div>

<asp:UpdatePanel runat="server"
ID="UpdatePanel1"
Mode="Conditional">
<ContentTemplate>
<div style="background-color:
Lime;
width: 100px;">
<asp:Label
Pemrograman Web
Laboratorium Komputer STIKOM 57
ID="PartialPostBackLabel"
runat="server" /><br />
<asp:Button
ID="PartialPostBackButton"
runat="server"
text="Partial Post Back"
OnClick="PartialPostBackButton_OnClick"
/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>

Pada syntax di atas, atribut EnablePatialRendering pada
ScriptManager bernilai True yang menyebabkan kita
bisa memanfaatkan partial rendering.

Terdapat juga control UpdatePanel yang berfungsi untuk melakukan
asinchronus postback dalam tag <ContentTemplate>.
UpdatePanel akan melakukan pengiriman data ke server jika salah
satu dari event ini terjadi:
Method Update() dari UpdatePanel dipanggil secara
explicit/secara langsung
Event dari UpdatePanel menyebabkan method Update()
dipanggil secara implisit/secara tidak langsung
Server control dalam UpdatePanel menyebabkan postback

Pada bagian design editor halaman Default.aspx akan muncul
tampilan berikut:


Double click pada tombol Full Post Back dan Partial Post Back lalu
masukkan syntax berikut:
Pemrograman Web

58 Laboratorium Komputer STIKOM


Protected Sub
FullPostBackButton_OnClick(ByVal sender
As Object, ByVal e As System.EventArgs)
Handles FullPostBackButton.Click
FullPostBackLabel.Text =
DateTime.Now.ToString()
End Sub

Protected Sub
PartialPostBackButton_OnClick(ByVal
sender As Object, ByVal e As
System.EventArgs)
PartialPostBackLabel.Text =
DateTime.Now.ToString()
End Sub

Lihat halaman Default.aspx pada browser, ketika melakukan klik
pada PartialPostBack tidak akan terjadi flicker pada browser dan
proses lebih cepat. Sedangkan ketika klik pada tombol FullPostBack
akan terjadi flicker dan proses lebih lama.


Memanfaatkan control Timer
Buat website project baru, pada halaman web yang ada, misal
Default.aspx ubah syntax HTML yang ada dengan menambahkan
syntax CSS sehingga menjadi tampilan berikut:
<html>
<head runat="server">
<title>Untitled Page</title>
<style type ="text/css" >
body{font-familiy: Verdana;}
.dropArea{height:500px; border:solid
2px black; background:#ccc;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="timer" style="width:
201px; height: 107px">
</div>
Pemrograman Web
Laboratorium Komputer STIKOM 59
</form>
</body>
</html>
Masukkan control UpdatePanel, Timer dan Label di antara tag
<div> </div>. Sehingga pada source editor akan muncul syntax
berikut:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"
runat="server" />

<div class="timer" style="width: 201px;
height: 107px">
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">

<ContentTemplate>
<asp:Timer ID="Timer1" runat="server"
Interval="1000">
</asp:Timer>
<asp:Label ID="Label1" runat="server"
Text="Label" Font-Bold="True" Font-
Size="X-Large" Width="195px">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Di antara control Timer terdapat properties yang bernama Interval
yang berfungsi sebagai durasi tiap Tick (dalam milisecond) isi
dengan 1000.

Jalankan di browser untuk mencoba bagaimana timer bekerja.
Pemrograman Web

60 Laboratorium Komputer STIKOM

Latihan Modul 7
1. Buat project dengan nama Modul_7 yang memanfaatkan
template Ajax
2. Buat satu halaman web dengan nama Tanggal.aspx yang
memanfaatkan control UpdatePanel dan UpdateProgress untuk
menggabungkan nama dan proses perhitungan umur dengan
tampilan berikut:



3. Setelah penekanan tombol Proses pada label Nama Lengkap
akan muncul nama lengkap dari gabungan nama depan dan
nama belakang. Calendar Tanggal Lahir juga mengarah pada
tanggal lahir dari inputan tanggal lahir di atas. Sedangkan label
umur merupakan selisih tahun antara tanggal sekarang dengan
tanggal lahir. Muncul juga tulisan Sedang terhubung ke server
saat proses update sedang berlangsung.

Pemrograman Web
Laboratorium Komputer STIKOM 61

MODUL 8
AJAX CONTROL TOOLKIT

Latihlah Kebiasaanmu,
Karena Kebiasaan akan Menjadikanmu
Sukses atau Menghancurkanmu

- Sean Covey -
The 7 Habits of Highly Effective Teens













Tujuan :
Praktikan dapat memanfaatkan AJAX Control Toolkit pada aplikasi
web

Materi :
AJAX Control Toolkit

Referensi :
Simpson, Alan, 2005, Visual Web Developer 2005 Express Edition for
Dummies, Wiley Publishing, Inc., Indianapolis, USA

Lowe, Doug, 2006, ASP.NET 2.0 Everyday Apps for Dummies, Wiley
Publishing, Inc., Indianapolis, USA

Hart, Chris; Kauffman, John; Sussman, David; Ullman, Chris,
Beginning ASP.NET 2.0, Wiley Publishing, Inc., Indianapolis, USA

MSDN Library for Visual Studio Express 2005
Pemrograman Web

62 Laboratorium Komputer STIKOM

8.1 AJAXControlToolkit
AjaxControlToolkit merupakan kumpulan control yang sudah "ajax -
enabled" dan digunakan untuk membuat aplikasi web yang
mengadopsi ajax control di atas .net platform. Penggunaan ajax
control toolkit ini semudah kita menggunakan asp.net server control
yang biasa kita gunakan dengan drag and drop dari toolbox. Contoh
penggunaan ajax control toolkit telah disediakan pada source
codenya jika anda download lengkap berikut source code yang
diberikan. Ajax control toolkit versi terakhir adalah ajax control
toolkit framework 3.5 yang dapat kita gunakan pada asp.net 3.5.
Link buat download ada di:
http://www.asp.net/ajax/downloads/

Langkah-langkah menggunakan library pada AJAX ControlToolkit:
a. Buka Visual Studio, buat sebuah web project template
b. Buka Toolbox klik kanan pada area kosong di toolbox Add
Tab Ketikkan nama tab baru yang akan digunakan untuk
menyimpan ajax control toolkit, misalkan namanya "Ajax
Control Toolkit".


Pemrograman Web
Laboratorium Komputer STIKOM 63
c. Klik kanan pada area yang kosong di tab baru yang telah dibuat
=> Choose Items => pada .NET Framework Components klik
button Browse => cari file AjaxControlToolkit.dll yang telah
anda download sebelumnya => Klik button OK


Selamat, anda telah dapat menggunakan komponen dari
AJAXControlToolkit secara langsung.
8.2 AJAXControlToolkit Sample
AJAXControlToolkit mempunyai banyak sekali komponen yang
dapat dipergunakan untuk membangun site yang menarik seperti:
accordion, rating, modal popup dan lainnya
Dalam modul ini akan dibahas penggunaan dari accordion
Tambahkan komponen Accordion ke halaman web anda, buat
sourceview halaman web anda seperti berikut:

CSS Style:
<style type="text/css">
.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
Pemrograman Web

64 Laboratorium Komputer STIKOM

margin-top: 5px;
cursor: pointer;
}

.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}

</style>

Accordion Code:
<ajaxToolkit:Accordion ID="Accordion1"
runat="server" SelectedIndex="0"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent"
FadeTransitions="true"
FramesPerSecond="40"
TransitionDuration="450">
<Panes>

<ajaxToolkit:AccordionPane
ID="AccordionPane1" runat="server">
<Header>
<a href="" onclick="return
false" class="accordionLink">Bagian 1</a>
</Header>
<Content>
<p>
AJAX Control Toolkit
</p>
</Content>

</ajaxToolkit:AccordionPane>
</Panes>
<Panes>
<ajaxToolkit:AccordionPane
ID="AccordionPane2" runat="server">
<Header>
Pemrograman Web
Laboratorium Komputer STIKOM 65
<a href="" onclick="return
false" class="accordionLink">Bagian 2</a>
</Header>
<Content>
<p>
Accordion merupakan
salah satu contoh AJAX Control Toolkit
</p>
</Content>

</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

Berikut adalah hasil tampilan dari accordion


Pemrograman Web

66 Laboratorium Komputer STIKOM

Latihan Modul 8
1. Buat project dengan nama Modul_8 yang memanfaatkan
AJAXControlToolkit
2. Buat satu halaman web dengan nama Jadwal.aspx yang
memanfaatkan control Accordion dari AJAX Control Toolkit.
Bagian header dari Accordion merupakan nama hari (Senin-
Minggu) dan Content berisikan rencana anda pada minggu ini.



Catatan:
Tampilan Accordion dapat diubah dengan mengubah CSS yang ada,
Accordion dapat dikembangkan lebih lanjut dengan menggunakan
data dari database
Hint: Untuk mendapatkan nilai dari suatu database dapat melirik
kembali ke modul 3.