R- Modul Praktikum

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.


3

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 4


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.


5

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 :

6


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.


7

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

8


Pemrograman Web

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


9

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 : 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 10


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…


11

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:

12


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

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


13

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: 14


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

e.

Setelah muncul Data Source Configuration Wizard, pilih Site Map


15

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.

16


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.


17

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

18


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:


19

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 tengah

badan kiri

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

20


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.


21

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 : 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 22


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 merupakan element yang mengawali control repeater, hanya ditampilkan sekali. Biasanya HeaderTemplate digunakan sebagai Title/Judul dari data yang akan ditampilkan

b. ItemTemplate merupakan element yang menampung semua Isi /Record dari data yang ada. Element ini ditampilkan berulangulang sebanyak data yang ada. c.

Jika ada Header pasti ada Footer, FooterTemplate merupakan element yang berfungsi sama dengan Header. Hanya letak tampilannya yang berada di bawah ItemTemplate element.

d. 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: Empire Burlesque Laboratorium Komputer – STIKOM

23

Pemrograman Web <artist>Bob Dylan USA Columbia <price>10.90 1985 Hide your heart <artist>Bonnie Tyler UK CBS Records <price>9.90 1988 Greatest Hits <artist>Dolly Parton USA RCA <price>9.90 1982 Still got the blues <artist>Gary Moore UK Virgin records <price>10.20 1990 Eros <artist>Eros Ramazzotti EU BMG <price>9.90 1997 Pertama kali, import ”System.Data” yang akan digunakan untuk memanggil Dataset object. 24


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 element ditampilkan pertama dan hanya sekali. element menampilkan tiap “record” yang berada di DataSet, dan element akan ditampilkan sekali dan berada di akhir dari Repeater.

id="cdcatalog"


25

Pemrograman Web

Title Artist Country Company Price Year

<%#Container.DataItem("title")%> <%#Container.DataItem("artist")%> <%#Container.DataItem("country")%> <%#Container.DataItem("company")%> <%#Container.DataItem("price")%> <%#Container.DataItem("year")%>

Untuk variasi dari repeater, dapat ditambahkan element di atas footer element. <%#Container.DataItem("title")%> <%#Container.DataItem("artist")%> <%#Container.DataItem("country")%> <%#Container.DataItem("company")%> <%#Container.DataItem("price")%> <%#Container.DataItem("year")%>

26


Pemrograman Web dan dapat digunakan <SeparatorTemplate> element <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:


27

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: My CD Catalog "<%#Container.DataItem("title")%>" of <%#Container.DataItem("artist")%> $<%#Container.DataItem("price")%> "<%#Container.DataItem("title")%>" of <%#Container.DataItem("artist")%> $<%#Container.DataItem("price")%> © Catalog CD 28


Pemrograman Web Jangan lupa untuk membuat DataSet yang mengambil data dari XML seperti yang ada pada Modul 3. Hasil dari DataList dengan data dari cdcatalog.xml


29

Pemrograman Web

Latihan Modul 3 1. 2.

Buat project dengan nama Modul_3 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.

30


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


31

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 : 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 

32


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)


33

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.

34


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.


35

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.

36


Pemrograman Web


Buat project dengan nama Modul_4 Buat file database baru dengan nama Plotting.mdf, lalu buat tabel di dalamnya dengan struktur berikut:

3.

Isi dengan data-data berikut:


37

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.

38


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.


39

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 : 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 40


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


41

Pemrograman Web

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

42


Pemrograman Web


Buat project dengan nama Modul_5 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.


43

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

44


Pemrograman Web


45

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 : 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  46


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.


47

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

48


Pemrograman Web

Title <%#Container.DataItem(" title")%>

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

Country <%#Container.DataItem ("country")%>

Company <%#Container.Data Item("company")%>

Price <%#Container.DataItem(" price")%>

Year <%#Container.DataIte m("year")%>

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 Laboratorium Komputer – STIKOM

49

Pemrograman Web Hasil dapat dilihat sebagai berikut:

50


Pemrograman Web


Buat project dengan nama Modul_6 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. Laboratorium Komputer – STIKOM

51

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 : 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  52


Pemrograman Web


53

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.

54


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:


55

Pemrograman Web

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


Pemrograman Web ID="PartialPostBackLabel" runat="server" />

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 . 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: Laboratorium Komputer – STIKOM

57

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 PartialPostBackButton_OnClick(ByVal sender As Object, ByVal e System.EventArgs) PartialPostBackLabel.Text DateTime.Now.ToString() End Sub

Sub As =

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: Untitled Page <style type ="text/css" > body{font-familiy: Verdana;} .dropArea{height:500px; border:solid 2px black; background:#ccc;}

58


Pemrograman Web
Masukkan control UpdatePanel, Timer dan Label di antara tag
…
. Sehingga pada source editor akan muncul syntax berikut:

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. Laboratorium Komputer – STIKOM

59

Pemrograman Web


Buat project dengan nama Modul_7 yang memanfaatkan template Ajax 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.

60


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 : 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  Laboratorium Komputer – STIKOM

61

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

62


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 AJAXControlToolkit secara langsung.

8.2

komponen

dari

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; Laboratorium Komputer – STIKOM

63

Pemrograman Web margin-top: 5px; cursor: pointer; } .accordionContent { background-color: #D3DEEF; border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; } Accordion Code: <Panes>
Bagian 1

AJAX Control Toolkit
<Panes>
64


Pemrograman Web Bagian 2

Accordion merupakan salah satu contoh AJAX Control Toolkit
Berikut adalah hasil tampilan dari accordion


65

Pemrograman Web


Buat project dengan nama Modul_8 yang memanfaatkan AJAXControlToolkit Buat satu halaman web dengan nama Jadwal.aspx yang memanfaatkan control Accordion dari AJAX Control Toolkit. Bagian header dari Accordion merupakan nama hari (SeninMinggu) 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.

66


Title	<%#Container.DataItem(" title")%>
Artist	<%#Container.DataI tem("artist")%>
Country	<%#Container.DataItem ("country")%>
Company	<%#Container.Data Item("company")%>
Price	<%#Container.DataItem(" price")%>
Year	<%#Container.DataIte m("year")%>

R- Modul Praktikum

Recommend Documents