Pemrograman Web - Pemrograman Web (ASP.net)

download Pemrograman Web - Pemrograman Web (ASP.net)

of 68

Transcript of 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