ST-RK-1.16-082-007/R- Modul Praktikum -...
Transcript of ST-RK-1.16-082-007/R- Modul Praktikum -...
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 We’re Going Now.
Welcome to The Next Millennium, You’ve Got to Get on it Or You’re
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 Developer’s Notebook, 2005, O’Reilly
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>
© 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 Developer’s Notebook, 2005, O’Reilly 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.