Modul Praktikum: ST-RK-1.16-082-007/R

ST-RK-1.
16-082-007/R-
Modul
Praktikum
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
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
Laboratorium Komputer – STIKOM 1

Pemrograman Web
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.
2 Laboratorium Komputer – STIKOM
Pemrograman Web
Untuk menampilkan ASP.NET Web Application Administraton, pilih

menu Website, lalu pilih ASP.NET Configuration.

Pemrograman Web
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
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
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
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
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
Catatan:
Font, warna, ukuran, dan background sesuai selera. Desainlah
tampilan semenarik mungkin untuk tambahan nilai desain.

Pemrograman Web
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 :

Pemrograman Web
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
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
 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

Choose Data Source, lalu pilih <New data source…>

Pemrograman Web
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
<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

Choose Data Source, lalu pilih <New data source…>
e. Setelah muncul Data Source Configuration Wizard, pilih Site Map

Pemrograman Web
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
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
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
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
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 Badan
badan kiri
tengah 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
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
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 :
Hart, Chris; Kauffman, John; Sussman, David; Ullman, Chris, 2005 
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
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
<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
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
<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
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
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
</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
Latihan 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
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.

yang ditampilkan pada repeater menampilkan List HP yang id

Pemrograman Web
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 :

Pemrograman Web
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
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
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
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
Latihan 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
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
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
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 :
Lee, Wei-Meng, ASP.NET 2.0 A Developer’s Notebook, 2005, O’Reilly 
Media, Inc., USA

Pemrograman Web
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
Setelah melakukan hal di atas maka akan terbentuk GridView

beserta SqlDataSource seperti gambar di bawah ini:

Pemrograman Web
Latihan 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
5. Master.aspx berisi control DropDownList dan GridView.

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

HP yang dipilih pada GridView.

Pemrograman Web

Pemrograman Web
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 :

Pemrograman Web
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
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>
<td>Title</td><td><%#Container.DataItem("
title")%></td></tr>
<tr><td>Artist</td><td><%#Container.DataI
tem("artist")%></td></tr>
<td>Country</td><td><%#Container.DataItem
("country")%></td></tr>

Pemrograman Web
<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
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
End Sub

Pemrograman Web
Hasil dapat dilihat sebagai berikut:

Pemrograman Web
Latihan 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
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 :

Pemrograman Web

Pemrograman Web
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
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
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
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
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>
<div class="timer" style="width:
201px; height: 107px">
</div>
Pemrograman Web
</form>
</body>
</html>
Masukkan control UpdatePanel, Timer dan Label di antara tag

<div>… </div>. Sehingga pada source editor akan muncul syntax
berikut:
<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
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
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 :

Pemrograman Web
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
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
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
<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
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.

Modul Praktikum: ST-RK-1.16-082-007/R

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Praktikum: ST-RK-1.16-082-007/R

Diunggah oleh

Hak Cipta:

Format Tersedia

ST-RK-1.

Memberikan pengetahuan dan kemampuan praktis yang dibutuhkan

Laboratorium Komputer – STIKOM 1

Tools yang digunakan untuk praktikum Pemrograman Web adalah

Pilih template ASP.NET Web Site untuk membuat modul 1 sampai 6.

Untuk menampilkan ASP.NET Web Application Administraton, pilih

Laboratorium Komputer – STIKOM 3

The Internet is a Vibration of Where

4 Laboratorium Komputer – STIKOM

1.1 Master Pages

Laboratorium Komputer – STIKOM 5

1.2 Master Pages Sample

Tambahkan Master Pages ke web project anda dengan cara: klik

Akan terbentuk sebuah template yang dapat diedit baik di design

6 Laboratorium Komputer – STIKOM

Gunakan Master Pages pada halaman web yang anda punya.

Laboratorium Komputer – STIKOM 7

badan kiri badan tengah badan kanan

Gunakan CSS / Table untuk desain dari tiap bagian struktur

2. Berikut adalah contoh tampilan dari halaman Default dengan

8 Laboratorium Komputer – STIKOM

Laboratorium Komputer – STIKOM 9

In The World of Ninja,

10 Laboratorium Komputer – STIKOM

2.1 Site Navigation

2.2 Site Navigation Sample

b. Klik tanda [] di sebelah kanan atas control Menu atau

Laboratorium Komputer – STIKOM 11

c. Gunakan Menu Item Editor untuk mendefinisikan setiap menu

12 Laboratorium Komputer – STIKOM

 NavigateUrl: untuk mengarahkan ke halaman web mana setelah

Menggunakan data dinamik

Menggunakan SiteMap di TreeView dan Menu:

a. Klik tanda [] di sebelah kanan atas control Menu atau

Laboratorium Komputer – STIKOM 13

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

c. Jika dijalankan di TreeView dan Menu yang menggunakan file

Menggunakan XML sebagai menu:

c. Masukkan control TreeView atau Menu pada halaman web

d. Klik tanda [] di sebelah kanan atas control Menu atau

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

Laboratorium Komputer – STIKOM 15

g. Tekan OK, maka secara otomatis, struktur menu control

h. Agar menu yang menggunakan XML bisa mengarah ke halaman

16 Laboratorium Komputer – STIKOM

Laboratorium Komputer – STIKOM 17

k. Control treeview akan tampak seperti berikut setelah melakukan

18 Laboratorium Komputer – STIKOM

menu kiri Isi

4. Pada menu kiri terdapat stuktur menu sebagai berikut yang

Jika dipakai pada salah satu halaman web, akan mempunyai

Laboratorium Komputer – STIKOM 19

5. Struktur halaman web untuk member biasa ditunjukkan gambar

6. Pada badan tengah terdapat stuktur menu sebagai berikut yang

20 Laboratorium Komputer – STIKOM

7. Pada badan kanan terdapat stuktur menu sebagai berikut yang

Jika dipakai pada salah satu halaman web, akan mempunyai

Laboratorium Komputer – STIKOM 21

Manusia bisa Bahagia bisa Tidak

22 Laboratorium Komputer – STIKOM

Buatlah file xml dengan nama cdcatalog.xml dengan isi sebagai

Laboratorium Komputer – STIKOM 23

Pertama kali, import ”System.Data” yang akan digunakan untuk