st-rk-1.16-082-007/r- modul praktikum · 8.1 ajaxcontroltoolkit ... gunakan selalu msdn library for...

68
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

Upload: lammien

Post on 23-May-2018

224 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 2: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila
Page 3: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 4: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 5: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

Pemrograman Web

Laboratorium Komputer – STIKOM 3

Untuk menampilkan ASP.NET Web Application Administraton, pilih

menu Website, lalu pilih ASP.NET Configuration.

Page 6: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 7: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 8: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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 :

Page 9: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 10: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 11: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

Pemrograman Web

Laboratorium Komputer – STIKOM 9

Catatan:

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

Page 12: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 13: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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…

Page 14: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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:

Page 15: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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…>

Page 16: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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:

Page 17: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 18: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 19: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 20: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 21: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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:

Page 22: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 23: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 24: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 25: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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>

Page 26: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 27: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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>

Page 28: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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>

Page 29: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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:

Page 30: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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>

Page 31: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 32: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 33: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 34: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 35: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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)

Page 36: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 37: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 38: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 39: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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:

Page 40: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 41: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 42: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 43: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 44: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

Pemrograman Web

42 Laboratorium Komputer – STIKOM

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

Page 45: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 46: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 47: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

Pemrograman Web

Laboratorium Komputer – STIKOM 45

Page 48: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 49: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 50: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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>

Page 51: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 52: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

Pemrograman Web

50 Laboratorium Komputer – STIKOM

Hasil dapat dilihat sebagai berikut:

Page 53: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 54: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 55: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

Pemrograman Web

Laboratorium Komputer – STIKOM 53

Page 56: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 57: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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:

Page 58: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 59: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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:

Page 60: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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>

Page 61: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 62: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.

Page 63: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 64: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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".

Page 65: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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;

Page 66: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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>

Page 67: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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

Page 68: ST-RK-1.16-082-007/R- Modul Praktikum · 8.1 AJAXControlToolkit ... Gunakan selalu MSDN Library for Visual Studio 2005 Express Editon sebelum bertanya ke asisten/ko-asisten apabila

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.