Download - Pemrograman Web - Pemrograman Web (ASP.net)
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
1/68
Modul
Praktikum
ST-RK-1.16-082-007/R-
Memberikan pengetahuan dan kemampuan praktis yang dibutuhkanmahasiswa dalam membangun sebuah aplikasi berbasis web denganmenggunakan Microsoft Visual Studio .NET dan Microsoft ASP.NET
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
2/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
3/68
Pemrograman Web
Laboratorium Komputer STIKOM 1
DAFTAR ISIDaftar Isi................................................................................................... 1Pengantar Umum .................................................................................... 2MODUL 1................................................................................................. 4
1.1 Master Pages ............................................................................... 51.2 Master Pages Sample ................................................................. 6Latihan Modul 1 ................................................................................... 8
MODUL 2................................................................................................102.1 Site Navigation ......................................................................... 112.2 Site Navigation Sample ............................................................ 11Latihan Modul 2 ................................................................................. 19
MODUL 3................................................................................................223.1 Repeater .................................................................................... 233.2 DataList ..................................................................................... 27Latihan Modul 3 ................................................................................. 30
MODUL 4................................................................................................324.1 FormView ................................................................................. 334.2 Query (Insert, Update) ............................................................. 34Latihan Modul 4 ................................................................................. 37
MODUL 5................................................................................................405.1 GridView ................................................................................... 41Latihan Modul 5 ................................................................................. 43
MODUL 6................................................................................................466.1 Advanced GridView ................................................................ 476.2 GridView Sample ..................................................................... 48Latihan Modul 6 ................................................................................. 51
MODUL 7................................................................................................527.1 AJAX .......................................................................................... 54Latihan Modul 7 ................................................................................. 60
MODUL 8................................................................................................618.1 AJAXControlToolkit ................................................................ 628.2 AJAXControlToolkit Sample ................................................... 63Latihan Modul 8 ................................................................................. 66
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
4/68
Pemrograman Web
2 Laboratorium Komputer STIKOM
PENGANTAR UMUM
Tools yang digunakan untuk praktikum Pemrograman Web adalahVisual Web Developer 2005 Express Edition dengan database SQLServer 2005 Express Edition. Sedangkan modul 8 yang membahastentang AJAX, menggunakan Ajax Extension 1.0 framework untukmembuat template yang bisa memanfaatkan AJAX.
Pada saat pertama kali membuat project, pilih Location dengan FileSystemsedangkan pada pilih Visual Basicpada pilihan Language.
Simpan di local dulu, setelah selesai baru pindahkan project web
yang dibuat ke server masing-masing.
Pilih templateASP.NET Web Siteuntuk 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 Placecode in separate filedan Select master page.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
5/68
Pemrograman Web
Laboratorium Komputer STIKOM 3
Untuk menampilkan ASP.NET Web Application Administraton, pilihmenu Website, lalu pilih ASP.NET Configuration.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
6/68
Pemrograman Web
4 Laboratorium Komputer STIKOM
MODUL 1
MASTER PAGES
The Internet is a Vibration of WhereWere Going Now.
Welcome to The Next Millennium,Youve Got to Get on it Or Youre
Going To be Like The Dinosaur
- Carlos Santana -
Tujuan :Praktikan mengerti dan memahami konsep Master Pages serta
mampu mengimplementasikan pada aplikasi web yang dibuat.
Materi :
Master Pages
Referensi :Simpson, Alan, 2005, Visual Web Developer 2005 Express Edition for
Dummies, Wiley Publishing, Inc., Indianapolis, USA
Lowe, Doug, 2006,ASP.NET 2.0 Everyday Apps for Dummies, WileyPublishing, Inc., Indianapolis, USA
Hart, Chris; Kauffman, John; Sussman, David; Ullman, Chris,
Beginning ASP.NET 2.0, Wiley Publishing, Inc., Indianapolis, USA
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
7/68
Pemrograman Web
Laboratorium Komputer STIKOM 5
1.1 Master PagesMaster Pages adalah cara baru pada ASP.Net 2.0 yang bisadigunakan agar situs yang kita buat menjadi konsisten terhadapdesain 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 inginmembuat situs yang mempunyai header, menu di sebelah kanan,dan footer. Kita cukup mendesain sekali di master pages dan sudahbisa dipakai di seluruh halaman web yang kita buat. Dengan adanyasatu desain, situs yang akan kita buat akan lebih konsisten dan tidakmembingungkan pengunjung situs. Sebenarnya, jika kita lihat pada
bagian source program, desain yang kita buat di master pagesadalah syntax HTML biasa.
Untuk mendesain tampilan pada master pages, bisa denganmenggunakan CSS atau juga menggunakan Style Builder dengancara melakukan klik kanan pada master pages dan memilih Style.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
8/68
Pemrograman Web
6 Laboratorium Komputer STIKOM
1.2 Master Pages SampleBerikut adalah cara menggunakan Master Pages:
Tambahkan Master Pages ke web project anda dengan cara: klikkanan pada Project dan pilih Add Add New Item, pilih MasterPages
Akan terbentuk sebuah template yang dapat diedit baik di designmode atau dalam bentuk HTML :
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
9/68
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 menjadidua kolom. Letakkan asp:contentplaceholder> control dengan IDMainContent di kolom kedua, biarkan kolom pertama untuk
Menu yang akan dibahas di modul 2. Jika dilihat dalam designmode:
Gunakan Master Pages pada halaman web yang anda punya.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
10/68
Pemrograman Web
8 Laboratorium Komputer STIKOM
Latihan Modul 1Buat 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 strukturhalaman. Jika menggunakan CSS, panggil file CSS tersebut padahalaman HTML secara eksternal. (Letakkan pemanggilan CSS di antaratag )
1. Buatlah 2 halaman web (default.aspx dan berita.aspx) yangmenggunakan Master Pages dengan susunan di atas. Badan kiriDefault.aspx berisi tentang Berita yang dapat di klik untukmemunculkan halaman Berita.aspx (Berisi detil berita).
2. Berikut adalah contoh tampilan dari halaman Default denganstruktur di atas yang menggunakan desain dari file CSS / Table.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
11/68
Pemrograman Web
Laboratorium Komputer STIKOM 9
Catatan:
Font, warna, ukuran, dan background sesuai selera. Desainlahtampilan semenarik mungkin untuk tambahan nilai desain.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
12/68
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 sertamampu mengimplementasikan pada aplikasi web
Materi :Menu, TreeView, XML
Referensi :
Simpson, Alan, 2005, Visual Web Developer 2005 Express Edition forDummies, 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
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
13/68
Pemrograman Web
Laboratorium Komputer STIKOM 11
2.1 Site NavigationKemudahan dalam navigasi situs sangat diperlukan, jika suatu situssusah 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 sitenavigation, kita bisa menciptakan navigasi yang mudah dankonsisten. Dua control utama yang dipakai untuk navigasi situsyaituMenudan TreeView.
Control Menu menawarkan link navigasi dari menu dropdownsederhana. Bentuk ini cocok untuk situs yang tidak mempunyai
banyak halaman web dan menginginkan bentuk navigasi yangsederhana.
TreeView menawarkan struktur navigasi dalam bentuk tree yangbisa dibuka dan ditutup dengan menekan tanda + atau di sebelahkiri masing-masing link. TreeView cocok untuk navigasi situs yangkompleks dan memiliki banyak halaman web.
Menu dan TreeView dapat menggunakan data statik ataupun datadinamik. Apabila menggunakan data statik, maka struktur navigasi
dari situs didefinisikan sebagai bagian dari control. Cara ini lebihmudah dengan mendefinisikan struktur menu denganmemasukkannya pada kotak dialog.
Dengan data dinamik, data tentang struktur file ditaruh pada sebuahfile bernama sitemap di luar control. Keuntungan menggunakan caraini adalah kita tidak perlu mengubah satu-satu di setiap control jikaada perubahan. Cukup mengubah file sitemap, dan semua controlyang memakai file ini akan ikut berubah. Konsepnya mirip dengan
file CSS yang di luar file HTML.
2.2 Site Navigation SampleMenggunakan data statik
a. Drag salah satu dariMenuatau TreeView
b. Klik tanda [] di sebelah kanan atas control Menu atau
TreeView untuk memunculkan Smart Tag. Dari Smart Tag, pilihEdit Menu Items
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
14/68
Pemrograman Web
12 Laboratorium Komputer STIKOM
c. Gunakan Menu Item Editor untuk mendefinisikan setiap menuitem
KlikAdd a root itemuntuk membuat menu induk, klikAdd a child item
untuk membuat submenu. Ada tiga properties utama yang bisa diisidi sini:
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
15/68
Pemrograman Web
Laboratorium Komputer STIKOM 13
NavigateUrl: untuk mengarahkan ke halaman web mana setelahsebuah menu ditekan
Text: teks yang muncul di menu ToolTip: teks informasi yang muncul ketika mouse berada di atas
menud. Klik OK jika sudah selesai
Menggunakan data dinamik
a. Klik kanan pada Solution Explorer, pilih Add New Itemuntukmembuat file baru. Pilih template Site Map.
b. Edit syntax XML yang muncul untuk membuat struktur menu
Misal:
Menggunakan SiteMap di TreeView dan Menu:
a. Klik tanda [] di sebelah kanan atas control Menu atauTreeView untuk memunculkan Smart Tag. Dari Smart Tag, pilihChoose Data Source, lalu pilih
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
16/68
Pemrograman Web
14 Laboratorium Komputer STIKOM
b. Setelah muncul Data Source Configuration Wizard, pilih Site Map.Maka otomatis, Menu atau TreeView akan mempunyai strukturmenu yang dibuat di file site map sebelumnya.
c. Jika dijalankan di TreeView dan Menu yang menggunakan fileSiteMap 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:
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
17/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
18/68
Pemrograman Web
16 Laboratorium Komputer STIKOM
f. Lalu muncul jendela baru, masukkan nama file XML yang telahdibuat
g. Tekan OK, maka secara otomatis, struktur menu controlTreeView atau Menu akan mempunyai struktur yang sama
dengan struktur file XML
h. Agar menu yang menggunakan XML bisa mengarah ke halamansitus sesuai dengan keterangan tujuan pada file XML, klik
tanda [] di sebelah kanan atas control Menu atau TreeViewuntuk memunculkan Smart Tag. Pilih Edit TreeNode Databindingsuntuk control TreeView atau pilih Edit MenuItem Databindings.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
19/68
Pemrograman Web
Laboratorium Komputer STIKOM 17
i. Pilih tiap element dari XML (misal Induk), lalu tekan tombolAdd agar muncul pada kotak Selected data binding. Setelah itu,pilih Induk agar muncul properties pada bagian kiri. Isi propertyNavigateUrlField dengan tujuan dan TextField dengan tekssesuai dengan atribut dari file XML yang digunakan.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
20/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
21/68
Pemrograman Web
Laboratorium Komputer STIKOM 19
Latihan Modul 21. Buat project dengan nama Modul_22. 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 yangmenggunakan TreeView dan menggunakan file SiteMap:
Administrasi
Maintain User
Tambah User
Ubah/Hapus User
User Online
Maintain BeritaMaintain Foto
Jika dipakai pada salah satu halaman web, akan mempunyaitampilan seperti berikut:
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
22/68
Pemrograman Web
20 Laboratorium Komputer STIKOM
5. Struktur halaman web untuk member biasa ditunjukkan gambardi bawah ini (gunakan struktur HTML dan desain CSS yang adapada modul 1)
Kepala
badan kiribadantengah
Badankanan
Kaki
6.
Pada badan tengah terdapat stuktur menu sebagai berikut yangmenggunakan control Menu dan menggunakan file SiteMap:
Home
Arsip Berita
Berita Terbaru
Berita Favorit
Berita Per Bulanan
Galery Foto
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
23/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
24/68
Pemrograman Web
22 Laboratorium Komputer STIKOM
MODUL 3
REPEATER & DATALIST
Manusia bisa Bahagia bisa TidakAdalah Tergantung Pilihannya Sendiri
- Abraham Lincoln -Presiden Amerika Serikat
Tujuan :
Praktikan mengerti dan memahami konsep Repeater dan DataListserta memanfaatkan dalam aplikasi web
Materi :Repeater dan DataList
Referensi :
Simpson, Alan, 2005, Visual Web Developer 2005 Express Edition forDummies, 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, 2005Beginning ASP.NET 2.0, Wiley Publishing, Inc., Indianapolis, USA
MSDN Library for Visual Studio Express 2005
Lee, Wei-Meng,ASP.NET 2.0 A Developers Notebook, 2005, OReilly
Media, Inc., USA
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
25/68
Pemrograman Web
Laboratorium Komputer STIKOM 23
3.1 RepeaterRepeater Control digunakan untuk memperlihatkan list dari itemsuatu control secara berulang. Data Repeater Control dapat berasaldari Sebuah Table Database, XML File, atau List-list item yang
lainnya.
Repeater mempunyai beberapa template yang dapat digunakan:
a.
HeaderTemplate merupakan element yang mengawali controlrepeater, hanya ditampilkan sekali. Biasanya HeaderTemplatedigunakan sebagai Title/Judul dari data yang akan ditampilkan
b. ItemTemplate merupakan element yang menampung semua Isi/Record dari data yang ada. Element ini ditampilkan berulang-ulang sebanyak data yang ada.
c.
Jika ada Header pasti ada Footer, FooterTemplate merupakanelement yang berfungsi sama dengan Header. Hanya letak
tampilannya yang berada di bawah ItemTemplate element.d.
Sesuai dengan namanya, element ini berfungsi sama denganItemTemplate. Biasanya digunakan untuk variasi row sehinggadata lebih mudah untuk diliat
e.
Merupakan element yang berfungsi untuk memisahkan element
yang 1 dengan yang lain
Buatlah file xml dengan nama cdcatalog.xml dengan isi sebagaiberikut:
Empire Burlesque
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
26/68
Pemrograman Web
24 Laboratorium Komputer STIKOM
Bob DylanUSAColumbia10.901985Hide your heartBonnie TylerUKCBS Records9.901988
Greatest HitsDolly PartonUSARCA9.901982
Still got the bluesGary MooreUKVirgin records10.201990Eros
Eros RamazzottiEUBMG9.901997
Pertama kali, import System.Data yang akan digunakan untukmemanggil Dataset object.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
27/68
Pemrograman Web
Laboratorium Komputer STIKOM 25
Imports System.Data
Buatlah Dataset yang mengambil data dari XML cdcatalog dalamevent Page_Load
Protected Sub Page_Load(ByVal sender AsObject, ByVal e As System.EventArgs)Handles Me.LoadIf 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 element ditampilkan pertama dan hanya sekali. element menampilkan tiap record yang berada diDataSet, dan element akan ditampilkan sekali
dan berada di akhir dari Repeater.
TitleArtistCountryCompanyPriceYear
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
28/68
Pemrograman Web
26 Laboratorium Komputer STIKOM
Untuk variasi dari repeater, dapat ditambahkan
element di atas footer element.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
29/68
Pemrograman Web
Laboratorium Komputer STIKOM 27
dan dapat digunakan element
Contoh tampilan dari repeater dengan cdcatalog.xml sebagai data:
3.2 DataListControl ini dapat digunakan untuk menampilkan data pada formatyang dapat kita definisikan sendiri dengan menggunakan template
dan style. DataList berguna untuk data pada struktur yang berulangseperti tabel. Dapat juga untuk memilih, mengubah atau menghapusdata yang ada.
Terdapat template yang berfungsi untuk mendefinisikan layout dariitem data dengan menggunakan HTML dan control yang ada.
Berikut adalah macam-macam template dari DataList:
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
30/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
31/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
32/68
Pemrograman Web
30 Laboratorium Komputer STIKOM
Latihan Modul 31. Buat project dengan nama Modul_32. 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 padahalaman web tersebut.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
33/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
34/68
Pemrograman Web
32 Laboratorium Komputer STIKOM
MODUL 4
FORMVIEW
Sebuah kesuksesan yang besar dapat dicapaisetelah 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 forDummies, 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, 2005Beginning ASP.NET 2.0, Wiley Publishing, Inc., Indianapolis, USA
MSDN Library for Visual Studio Express 2005
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
35/68
Pemrograman Web
Laboratorium Komputer STIKOM 33
4.1 FormViewControl FormView dapat digunakan untuk menampilkan singlerecord dari table sebuah data source. Ketika menggunakan
FormView, kita menentukan template untuk menampilkan danmengubah nilai yang ada. Template bisa berisi format tampilan,control, dan ekspresi binding untuk menciptakan form.
FormView sering digunakan bersamaan dengan GridView untukmaster/detail.
FormView mempunyai beberapa Template. Untuk melakukan edittemplate, 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 kitabisa mengubah tampilan dari template yang ada. Untuk mengesetatau mengambil nilai dari control yang ada di dalamnya, kita perlumelakukan convert type (Ctype) dari nama control yang ada di
dalam template. Misal di FormView1 pada EditItemTemplate adalabel yang bernama label_id , maka untuk mengeset properti text didalamnya, 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)
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
36/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
37/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
38/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
39/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
40/68
Pemrograman Web
38 Laboratorium Komputer STIKOM
4. Buat dua halaman web dengan nama Plotting.aspx danPlotting_Jaga.aspx
Plotting.aspx
Plotting_Jaga.aspx
5. Pada halaman Plotting.aspx terdapat tampilan yangmenunjukkan daftar jaga dari semua pengajar denganmenggunakan kolom Kode_Pengajar, Kode_Group,
Nama_Praktikum, Hari, Ruang_Lab yang ditampilkan pada controlDataList. Ada juga filter berdasarkan hari yang didapatkan dariDropDownList yang hasilnya ditampilkan pada DataList.Terdapat link yang menuju ke halaman Lihat_Jadual.aspx danPlotting_Jaga.aspx.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
41/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
42/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
43/68
Pemrograman Web
Laboratorium Komputer STIKOM 41
MSDN Library for Visual Studio Express 2005 5.1 GridViewControl 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 yangmengandung data.
Data dalam GridView ditampilkan secara tabular. Bisa jugadilakukan pemformatan tampilan secara otomatis denganmenggunakan AutoFormat. Dengan GridView, kita dimudahkandalam melakukan paging, sorting, dan pemilihan data. Cukup
dengan mencentang pilihan Enable Paging, Enable Sorting, EnableSelectionpada smart tag.
Cara menggunakan GridView dapat dilakukan dengan cara cepatyaitu dengan cara menarik tabel yang berada di server explorerlangsung ke halaman web yang diinginkan.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
44/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
45/68
Pemrograman Web
Laboratorium Komputer STIKOM 43
Latihan Modul 51. Buat project dengan nama Modul_52. 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 modulsebelumnya pada kedua halaman tadi.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
46/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
47/68
Pemrograman Web
Laboratorium Komputer STIKOM 45
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
48/68
Pemrograman Web
46 Laboratorium Komputer STIKOM
MODUL 6
ADVANCED GRIDVIEW
Banyak Kegagalan Dalam Hidup iniDikarenakan Orang-Orang Tidak MenyadariBetapa Dekatnya Mereka dengan Keberhasilan
Saat Mereka Menyerah
- Thomas Alfa Edison -
Tujuan :
Praktikan dapat mengerti dan dapat menggunakan GridView lebihlanjut 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, WileyPublishing, 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
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
49/68
Pemrograman Web
Laboratorium Komputer STIKOM 47
6.1 Advanced GridViewPada modul sebelumnya telah dijelaskan GridView secara singkat.GridView dapat dikembangkan lebih lanjut karena GridView
merupakan komponen Rich Data Control dengan kemampuanterlengkap dan memiliki proses pengaturan terkompleks di antarakomponen-komponen yang lain.
Pengaturan GridView biasanya dilakukan melalui fasilitas smart tagyang didalamnya telah terdapat fasilitas untuk mendefinisikankemampuan paging, editing, deleting serta pemilihan record dengan
jalan menempatkan Linkbutton yang bersesuaian dengan fungsimasing-masing.
Pengaturan lain dalam smart tag adalah pengaturan tampilan fielddalam link Edit Columns. Selain bisa mengatur tampilan header danmengurangi jumlah field yang akan ditampilkan, fitur terpentingdalam kotak dialog ini adalah mengubah field menjadi sebuahtemplate field.Ini berarti bahwa field yang telah didefinisikan sebagaitemplate field, didalamnya dapat ditempati tag HTML layaknyaItemTemplate pada Repeater.
Jenis field yang bisa ditampilkan dalam Gridview antara lain:a. BoundField
Jenis field default yang melakukan proses databinding dengantabel 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 untukproses manipulasi data yang membutuhkan link ke bagian lain.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
50/68
Pemrograman Web
48 Laboratorium Komputer STIKOM
f. ImageField
Menampilkan file gambar di tiap record
g. TemplateField
Manipulasi terbesar yang dapat dilakukan dalam GridViewterjadi dalam field jenis ini. Selain mampu disisipi tag HTML,dapat juga disisipi komponen lainnya.
6.2 GridView SampleGunakan 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
Title
Artist
Country
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
51/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
52/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
53/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
54/68
Pemrograman Web
52 Laboratorium Komputer STIKOM
MODUL 7
ASP .NET 2.0 WITH AJAX
It Has Become Appallingly ObviousThat Our Technology
Has Exceeded Our Humanity
- Albert Einstein -
Tujuan :
Praktikan mengerti dan memahami konsep AJAXdan 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, WileyPublishing, 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
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
55/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
56/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
57/68
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 mengimplementasikanfungsionalitas client-side runtime dari Atlas.
UpdatePanel: digunakan untuk menandai area pada halamanweb yang akan secara otomatis di-update ketika postback terjaditanpa harus melakukan postback secara satu halaman penuh.
UpdateProgress: digunakan untuk memberitahukan bahwaproses asynchronus sedang berjalan, biasanya dipakaibersamaan dengan control UpdatePanel.
Timer : Kontrol Timer dapat digunakan untuk melakukanpostback keseluruhan halaman atau sebagaian halaman yangada 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 sepertiberikut:
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
58/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
59/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
60/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
61/68
Pemrograman Web
Laboratorium Komputer STIKOM 59
Masukkan control UpdatePanel, Timer dan Label di antara tag
. Sehingga pada source editor akan muncul syntaxberikut:
Di antara control Timer terdapat properties yang bernama Intervalyang berfungsi sebagai durasi tiap Tick (dalam milisecond) isidengan 1000.
Jalankan di browser untuk mencoba bagaimana timer bekerja.
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
62/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
63/68
Pemrograman Web
Laboratorium Komputer STIKOM 61
MODUL 8
AJAX CONTROL TOOLKITLatihlah Kebiasaanmu,
Karena Kebiasaan akan MenjadikanmuSukses atau Menghancurkanmu
- Sean Covey -The 7 Habits of Highly Effective Teens
Tujuan :
Praktikan dapat memanfaatkan AJAX Control Toolkit pada aplikasiweb
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, WileyPublishing, 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
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
64/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
65/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
66/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
67/68
-
7/22/2019 Pemrograman Web - Pemrograman Web (ASP.net)
68/68