5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 1/47
Pemrograman Web
DAFTAR ISIDaftar Isi..........................................................................1
Pengantar Umum.............................................................21.1 Struktur Web Page ......................................................31.2 Tags Dasar dalam Web Page ......................................41.3 HTML Elemen .............................................................81.4 HTML Attribute ............................................................81.5 HTML Text Formatting ..............................................111.6 HTML Styles ..............................................................111.7 HTML Images ............................................................111.8 HTML Tables .............................................................12
1.9 HTML List ..................................................................151.10 HTML Links .............................................................151.11 HTML Frames ..........................................................161.12 HTML Forms ...........................................................191.13 HTML Input .............................................................191.14 HTML Scripting ........................................................201.15 Advanced GridView .................................................241.16 GridView Sample ....................................................251.17 AJAX ........................................................................32
1.18 AJAXControlToolkit ..................................................421.19 AJAXControlToolkit Sample .....................................44
Laboratorium Komputer – STIKOM1
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 2/47
Pemrograman Web
PENGANTAR UMUM
Tools yang digunakan untuk praktikum Pemrograman Webadalah sembarang editor teks yang support dengan bahasaHTML, CSS dan Bahasa Scripting serta browser yang supportdengan HTML 4.01.
Beberapa editor teks yang disediakan di LABPEMROGRAMAN :Notepad++Visual Studio 2005
Browser yang disediakan untuk ujicoba halaman web :Internet ExplorerMozilla Firefox
Laboratorium Komputer – STIKOM2
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 3/47
Pemrograman Web
MODUL 1
WEB PAGES
The Internet is a Vibration of WhereWe’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 Web Pages serta
mampu mengimplementasikan pada aplikasi web yangdibuat.
Materi :Web Pages
Referensi :http://www.w3schools.com/html/html_intro.a
sp
1.1 Struktur Web Page
Sebuah halaman web dibangun menggunakan HTML yang
memiliki struktur dasar dan esensial. Halaman yang selaluLaboratorium Komputer – STIKOM
3
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 4/47
Pemrograman Web
dimulai dengan tag awal html elemen dan selalu berakhirdengan tag akhir html elemen sebagai berikut:
<html>
...web page...
</html>
1.2 Tags Dasar dalam Web Page
Halaman web dapat dianggap sebagai pohon dokumen yang
dapat berisi jumlah cabang. Ada aturan seperti apa itemsetiap cabang dapat berisi (dan ini rinci dalam elemen'sreferensi masing-masing dalam "Berisi" dan "Terdapat oleh"bagian). Untuk memahami konsep pohon dokumen, iniberguna untuk mempertimbangkan sebuah halaman websederhana dengan fitur-fitur konten khas bersama tampilanstruktur pohon, sebagaimana ditunjukkan pada Gambar 1 .
Laboratorium Komputer – STIKOM4
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 5/47
Pemrograman Web
Jika kita melihat perbandingan ini, kita dapat melihat bahwahtml elemen sebenarnya mengandung dua elemen: headdan body . head memiliki dua kantor cabang pembantu-sebuah meta elemen dan title . The body element containsa number of headings, paragraphs, and a blockquote . Parabody elemen berisi sejumlah judul, paragraf, dan
blockquote .
a.
Web Page dasar yang mengimplementasikan semua tagsyang sudah dipelajari di pertemuan ini.
Laboratorium Komputer – STIKOM5
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 6/47
Pemrograman Web
MODUL 2
DEEPER WITHIN WEB PAGE
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 Deeper Within
Web Pages serta mampu mengimplementasikan padaaplikasi web
Materi :
HTML Elements, HTML Attribute
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.,
Laboratorium Komputer – STIKOM6
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 7/47
Pemrograman Web
Indianapolis, USA
Laboratorium Komputer – STIKOM7
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 8/47
Pemrograman Web
1.3 HTML Elemen
Dalam dokumen HTML, elemen dibagi menjadi dua kategori
utama, yaitu elemen-elemen <HEAD> yang memberikaninformasi tentang dokumen, seperti judul dokumen atauhubungannya dengan dokmen lain. Dan elemen-elemen<BODY> yang menentukan bagaimana isi suatu dokumenditampilkan oleh browser, seperti paragraf, list (daftar),tabel dan lain-lain. Di dalam elemen HTML terdiri dari tag-tag beserta yang ada dalam tag-tag tersebut.
Elemen Dasar HTML
PARAGRAPH( <p>……..…..</p> )Untuk membuat suatu paragraphBLOCKQUOTE( < blockquote >.......</blockquote> )Untuk membuat suatu kutipan teksPREFORMATTED( <pre>…….</pre> )Untuk membuat suatu paragraphDIVIDER( <div>……</div> )Untuk membuat suatu paragraph
1.4 HTML Attribute
Atribut yang digunakan untuk memperkuat tag. Yang kamimaksud dengan memperkuat adalah bahwa ketika sebuahweb browser menafsirkan tag, juga akan mencari atribut setdan kemudian menampilkan elemen (tags + atribut) secarakeseluruhan. Pada titik tertentu Anda mungkin inginmemberikan elemen tubuh Anda warna latar belakang atau
mungkin mengubah lebar tabel. Semua ini dan lebih dapatdicapai dengan menggunakan Atribut.
Attribut Id:
Kelas dan atribut id hampir identik. Mereka tidakmemainkan peran langsung dalam format elemen Anda,tetapi lebih melayani di belakang layar untuk scripting danCascading Style Sheets (CSS). Peran klasifikasi dan
Laboratorium Komputer – STIKOM8
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 9/47
Pemrograman Web
mengidentifikasi unsur-unsur akan menjadi lebih nyatasebagai Anda belajar CSS.Idenya adalah bahwa Anda dapat mengklasifikasikan atau
id tertentu tag dan kemudian format tag menggunakanCascading Style Sheets. Hal ini menjadi penting bila Andamemiliki dua atau lebih dari unsur yang sama pada halaman(seperti tag <p>) tetapi ingin mereka berbeda dalampenampilan.
<p id="italicsparagraph"> Ayat tipe 1 Cetak miring</ p> <p id="boldparagraph"> Ayat Bold tipe 2 </ p>
Attribute Nama:Nama jauh berbeda dari id dan kelas. Dengan
allotting nama untuk elemen, bahwa nama menjadi variabelscripting untuk bahasa script seperti Javascript, ASP, danPHP. Atribut nama yang paling sering dilihat dengan bentukdan lain-masukan pengguna elemen.
<input type="text" name="TextField" />
Attribut Judul:Atribut judul ini adalahsebuah elemen dan
menambahkan teks kecil pop-up untuk setiap elemen HTML.Banyak seperti teks pop-up program pengolah kata, atribut-atribut ini tidak boleh dilupakan. Anda mungkin judul sebuahelemen apapun yang Anda inginkan, efek dari atribut initidak terlihat sampai Anda membawa mouse ke elemenselama beberapa detik.<h2 There!" title="Hello> Titled Pos Tag </ h2>
Attribut rata:<h2 align="left"> Posisi Kanan </ h2><h2 align="center"> Posisi tengah </ h2><h2 align="right"> Posisi Kanan </ h2>
b.
Laboratorium Komputer – STIKOM9
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 10/47
Pemrograman Web
MODUL 3
HOW TO DISPLAY
Manusia bisa Bahagia bisa Tidak Adalah Tergantung Pilihannya Sendiri
- Abraham Lincoln -Presiden Amerika Serikat
Tujuan :Praktikan mengerti dan dapat membuat ulang halaman web
serta memanfaatkan dalam aplikasi web
Materi :HTML Text Formating, HTML Styles, HTML Images, HTML
Tables
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
Laboratorium Komputer – STIKOM10
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 11/47
Pemrograman Web
MSDN Library for Visual Studio Express 2005
Lee, Wei-Meng, ASP.NET 2.0 A Developer’s Notebook ,2005, O’Reilly Media, Inc., USA
1.5 HTML Text Formatting
<Teks </ b> menulis teks dengan huruf tebal<i> teks </ i> menulis teks dalam huruf miring<u> teks </ u> menulis teks yang digarisbawahi Teks <<sub> / sub> menurunkan teks dan membuatnyalebih kecil <sup> text </sup lift teks dan membuatnya lebih kecil
<BLINK> text teks </blink> tebak sendiri!<strike> teks </ strike> pemogokan line melalui teks <tt> text </tt menulis teks seperti pada mesin tik klasikTeks <<pre> / pre> menulis teks persis seperti itu,termasuk spasi.<em> text </em biasanya membuat teks miring <strong> text <strong biasanya membuat teks tebal
1.6 HTML Styles
<html><head> <head><style type="text/css"> <style type="text/css">h1 {color:red} h1 (color: red)p {color:blue} p (warna: biru)</style> </ Style></head> </ Head>
<body> <body><h1>Header 1</h1> <h1> Header 1 </ h1><p>A paragraph.</p> <p> ayat A </. p></body> </ Body></html> </ Html>
1.7 HTML Images
<img src=" url "alt=" some_text "/>
Laboratorium Komputer – STIKOM11
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 12/47
Pemrograman Web
URL yang menunjuk ke lokasi di mana foto tersebutdisimpan
Atribut alt diperlukan menentukan sebuah teks alternatif bagi gambar, jika gambar tidak dapat ditampilkan.
1.8 HTML Tables
<table border="1"><tr><Bulan <th> / th> Tabungan <th> </ th>
</ Tr><tr><td> Januari </ td><td> $ 100 </ td></ Tr></ Table>
Sebuah meja sederhana HTML terdiri dari elemen meja dan
satu atau lebih tr , th , dan td elemen.
Unsur tr mendefinisikan baris tabel, elemen th mendefinisikan
header tabel, dan elemen td mendefinisikan sebuah sel tabel.
Sebuah tabel HTML yang lebih kompleks juga dapat
mencakup keterangan, col, colgroup, thead, tfoot, dan elemen
tbody.
c.
Laboratorium Komputer – STIKOM12
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 13/47
Pemrograman Web
MODUL 4
CONTENT FOCUS
Sebuah kesuksesan yang besar dapat dicapai setelah 99% kegagalan
- Soichiro Honda -
Tujuan :Praktikan dapat membuat frames serta links dan Listnya
dengan menggunakan Syntax HTML
Materi :HTML Lists, HTML Links, HTML Frames
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
Laboratorium Komputer – STIKOM13
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 14/47
Pemrograman Web
Laboratorium Komputer – STIKOM14
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 15/47
Pemrograman Web
1.9 HTML List
List HTML Tak Berurutan
<ul><li>Coffee</li> <li> Kopi </ li><li>Milk</li> <li> Susu </ li></ul> </ Ul>
List HTML Berurutan<ol><li>Coffee</li> <li> Kopi </ li><li>Milk</li> <li> Susu </ li>
</ol> </ Ol>
HTML Definition List<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>
1.10 HTML Links
HTML Links Syntax<a href="url">Link text </a>Contoh<a href="http://www.w3schools.com/">VisitW3Schools</a>HTML Links – Target Attribute<a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
HTML Links – Name AttibuteDalam satu folder<a href="#tips"> Kunjungi Bagian Tips berguna </ a>Lain Folder<a href="http://www.w3schools.com/html_links.htm#tips">Visit the Useful Tips Section</a> Kunjungi <Tips BergunaBagian / a>
Laboratorium Komputer – STIKOM15
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 16/47
Pemrograman Web
1.11 HTML Frames
Dengan frame, Anda dapat menampilkan lebih dari satudokumen HTML di jendela browser yang sama. Each HTML
document is called a frame, and each frame is independentof the others. Setiap dokumen HTML disebut bingkai, dansetiap frame tidak tergantung pada orang lain.
Elemen Frameset HTMLElemen frameset memiliki unsur-unsur dua atau lebih frame.Each frame element holds a separate document. Setiapelemen frame memegang dokumen terpisah.
Elemen HTML Bingkai<frameset cols="25%,75%"><frame src="frame_a.htm" /> <framesrc="frame_a.htm" /><frame src="frame_b.htm" /> <framesrc="frame_b.htm" /></frameset> </ Frameset>
Laboratorium Komputer – STIKOM16
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 17/47
Pemrograman Web
d.
Laboratorium Komputer – STIKOM17
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 18/47
Pemrograman Web
MODUL 5
INTERACTION
Pertanyaan yang Paling Mendesak Dalam Hidup Ini :
Apakah yang Kamu Perbuat Bagi Orang Lain?
- Martin Luther King Jr. -
Tujuan :Praktikan dapat membuat sebuah halaman web dengan
interaksi input dan script dasar
Materi :HTML Forms, HTML Input, HTML Scripting
Referensi :
Simpson, Alan, 2005, Visual Web Developer 2005 ExpressEdition 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
Laboratorium Komputer – STIKOM18
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 19/47
Pemrograman Web
MSDN Library for Visual Studio Express 2005
1.12 HTML Forms
HTML form digunakan untuk melewatkan data ke server.Form dapat berisi unsur-unsur input seperti textBox,checkbox, radiobutton, tombol submit dan banyak lagi.Formulir juga dapat berisi daftar pilih, textarea, fieldset danelemen label.
Tag <form> digunakan untuk membuat bentuk HTML:<form>
.input elements
.</form>
1.13 HTML Input
Text Field<form>
First name: <input type="text" name="firstname" /><br />Last name: <input type="text" name="lastname" /></form>
Password Field<form>Password: <input type="password" name="pwd" /></form>
Radio Button<form><input type="radio" name="sex" value="male" />Male<br /><input type="radio" name="sex" value="female" />Female</form>
Laboratorium Komputer – STIKOM19
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 20/47
Pemrograman Web
ChekBox<form><input type="checkbox" name="vehicle" value="Bike" /> Ihave a bike<br /><input type="checkbox" name="vehicle" value="Car" /> Ihave a car</form>
Submit Button<form name="input" action="html_form_action.asp"method="get">Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form>
1.14 HTML Scripting
Elemen Script HTML Tag <script> digunakan untuk mendefinisikan script sisiklien, seperti JavaScript.
Elemen script baik berisi laporan scripting atau menunjuk kefile skrip eksternal melalui atribut src.Script di bawah ini menulis Hello World! to the HTML output:ke output HTML:<script type="text/javascript">document.write("Hello World!") document.write ("HelloWorld!")</script> </ Script>
Elemen non Script HTML Tag <noscript> digunakan untuk menyediakan kontenalternatif bagi pengguna yang memiliki skrip dinonaktifkanpada browser mereka atau memiliki browser yang tidakmendukung script sisi pelanggan.Elemen noscript dapat berisi semua elemen yang dapatAnda temukan di dalam elemen body dari halaman HTMLbiasa.
Laboratorium Komputer – STIKOM20
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 21/47
Pemrograman Web
Isi dalam elemen noscript hanya akan ditampilkan jika scripttidak didukung, atau dinonaktifkan dalam browserpengguna:<script type="text/javascript">document.write("Hello World”)</ Script><noscript> Maaf, browser Anda tidak mendukung
JavaScript </ noscript>
Tag HTML Script<Script> Mendefinisikan Client – side Script<noscript> Menetapkan konten alternatif bagi penggunayang tidak mendukung skrip sisi klien
e.
Laboratorium Komputer – STIKOM21
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 22/47
Pemrograman Web
MODUL 6
MORE INTERACTION
Banyak Kegagalan Dalam Hidup iniDikarenakan Orang-Orang Tidak
Menyadari Betapa Dekatnya Merekadengan Keberhasilan Saat Mereka
Menyerah
- Thomas Alfa Edison -
Tujuan :Praktikan dapat mengerti dan dapat Membuat sebuah
halaman web yang mampu menangani interaksi yang telahditentukan
Materi :Scriptng Variables, Scripting Arithmetic, Scripting
Comparison, Scripting Branching, Scripting PopUp, ScriptingFunction
Referensi :Simpson, Alan, 2005, Visual Web Developer 2005 Express
Edition for Dummies, Wiley Publishing, Inc., Indianapolis,USA
Laboratorium Komputer – STIKOM22
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 23/47
Pemrograman Web
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 – STIKOM23
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 24/47
Pemrograman Web
1.15 Advanced GridView
Pada modul sebelumnya telah dijelaskan GridView secara
singkat. GridView dapat dikembangkan lebih lanjut karenaGridView merupakan komponen Rich Data Control dengankemampuan terlengkap dan memiliki proses pengaturanterkompleks di antara komponen-komponen yang lain.
Pengaturan GridView biasanya dilakukan melalui fasilitassmart tag yang didalamnya telah terdapat fasilitas untukmendefinisikan kemampuan paging, editing, deleting sertapemilihan record dengan jalan menempatkan Linkbuttonyang bersesuaian dengan fungsi masing-masing.
Pengaturan lain dalam smart tag adalah pengaturantampilan field dalam link Edit Columns. Selain bisa mengaturtampilan header dan mengurangi jumlah field yang akanditampilkan, fitur terpenting dalam kotak dialog ini adalahmengubah field menjadi sebuah template field. Ini berartibahwa field yang telah didefinisikan sebagai template 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 prosesdatabinding dengan tabel atau hasil query yang dihasilkankomponen Datasource.
b. ButtonField
Menampilkan Button dalam tiap record yangditampilkan, biasanya digunakan untuk proses manipulasidata.
c. CheckBoxField
Field yang otomatis tampil jika field asli bertipeboolean.
d. CommandField
Menampilkan Linkbutton default dari fasilitas smarttag.
Laboratorium Komputer – STIKOM24
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 25/47
Pemrograman Web
e. HyperlinkField
Menampilkan field dalam bentuk hyperlink,digunakan untuk proses manipulasi data yang
membutuhkan link ke bagian lain.
f. ImageField
Menampilkan file gambar di tiap record
g. TemplateField
Manipulasi terbesar yang dapat dilakukan dalamGridView terjadi dalam field jenis ini. Selain mampu disisipitag HTML, dapat juga disisipi komponen lainnya.
1.16 GridView Sample
Gunakan kembali cdcatalog.xml yang ada di modul-modulsebelumnya (hint: modul tentang repeater dan datalist).
Tambahkan komponen GridView dalam halaman web anda,ketikkan code seperti berikut dalam GridView anda
<asp:GridView ID="cdcatalog"runat="server" AllowPaging="True"AutoGenerateColumns="False"BorderWidth="0px" EmptyDataText="Tidakada Katalog" ShowHeader="false"Height="323px" Width="640px" PageSize="3"OnPageIndexChanging="gridView_PageChanging">
<Columns>
<asp:TemplateFieldHeaderText="Comment"SortExpression="Comment">
<ItemTemplate>
<table>
<tr bgcolor="#e8e8e8"><td>Title</td><td><
Laboratorium Komputer – STIKOM25
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 26/47
Pemrograman Web
%#Container.DataItem("title")%></td></tr>
<tr><td>Artist</td><td><%#Container.DataItem("artist")%></td></tr>
<tr bgcolor="#e8e8e8"><td>Country</td><td><%#Container.DataItem("country")%></td></tr>
<tr><td>Company</td><td><%#Container.DataItem("company")%></td></tr>
<trbgcolor="#e8e8e8"> <td>Price</td><td><%#Container.DataItem("price")%></td></tr>
<tr><td>Year</td><td><%#Container.DataItem("year")%></td></tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Ketikkan kode berikut pada page_load dan buat sub baruuntuk handle changepage pada gridview
Dim mycdcatalog = New DataSet
Protected Sub Page_Load(ByVal senderAs Object, ByVal e As System.EventArgs)
If Not Page.IsPostBack Then
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
Laboratorium Komputer – STIKOM26
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 27/47
Pemrograman Web
cdcatalog.DataSource =mycdcatalog
cdcatalog.DataBind()
End If
End Sub
Protected Sub gridView_PageChanging(ByVal sender As Object, ByVal e AsGridViewPageEventArgs)
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
cdcatalog.DataSource = mycdcatalog
cdcatalog.PageIndex =e.NewPageIndex
cdcatalog.DataBind()End Sub
Hasil dapat dilihat sebagai berikut:
Laboratorium Komputer – STIKOM27
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 28/47
Pemrograman Web
Laboratorium Komputer – STIKOM28
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 29/47
Pemrograman Web
f.
Buat project dengan nama Modul_6
Buat tabel cdcatalog dengan struktur dan data seperti berikut:
Buat halaman web yaitu cdcatalog.aspx. Manfaatkan master
pages yang dibuat pada modul-modul sebelumnya pada
halaman cdcatalog.aspx.
cdcatalog.aspx berisi control FormView dan GridView.
GridView menampilkan data dari cdcatalog dan terdapat
pilihan edit dan delete. Ketika edit dipilih, maka data yangdipilih pada GridView akan ditampilkan dalam FormView
dalam Edit mode.
Laboratorium Komputer – STIKOM29
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 30/47
Pemrograman Web
Catatan:
Gunakan LinkButton dalam TemplateField pada GridView
untuk membuat Edit dan Delete.
MODUL 7
AND MORE INTERACTION
It Has Become Appallingly ObviousLaboratorium Komputer – STIKOM
30
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 31/47
Pemrograman Web
That Our Technology Has Exceeded Our Humanity
- Albert Einstein -
Tujuan :Praktikan mengerti dan dapatmembuatsebuah halaman web dengan interaksi
yang lebih kompleks
Materi :Scriptng Loops, Scripting Events, Scripting Error Handling,Scripting Special Characters
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 – STIKOM31
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 32/47
Pemrograman Web
1.17 AJAX
AJAX merupakan singkatan dari Asynchronous JavaScript
And XML. Dengan teknik ini, kita bisa membuat aplikasi weblebih responsif dan interactif. Inti dari AJAX adalah objectXMLHttpRequest, object ini memfasilitasi dalam pengiriman jumlah data yang lebih kecil ke web server secaraasinchronus.
Dengan AJAX, aplikasi web kita akan lebih ringan karena kitabisa memanfaatkan partial postback dalam artian hanyabagian tertentu saja yang dibuat postback, tidak satuhalaman penuh. Secara default, apabila kita melakukan
postback pada halaman web, maka seluruh halaman akandi-render, tidak demikian jika kita menggunakan AJAX. Jadi,dengan teknik ini maka pengaksesan halaman web bisalebih ringan.
AJAX Extension 1.0 Merupakan framework yangmemungkinkan kesulitan dalam pemanfaatan AJAX dapatdihindari karena menawarkan kemudahan dalam halimplementasi AJAX seperti kita tidak perlu lagi memikirkan
tentang kompabilitas browser yang berbeda karenaframework bisa mengeluarkan output dengan kode yangbenar sesuai dengan web browser client.
Kita perlu meng-install framework ini agar bisa digunakansebagai template pada aplikasi web yang kita buat. Setelahkita melakukan instalasi, maka akan muncul folder barupada C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAXExtensions
Untuk menggunakan template ini, kita tinggal memilihtemplate Atlas ketika membuat project baru.
Laboratorium Komputer – STIKOM32
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 33/47
Pemrograman Web
Ada beberapa control yang digunakan pada modul ini, yaitu:
ScriptManager : jantung dari Ajax yang mengelolapembangunan dari beberapa library JavaScript yang
mengimplementasikan fungsionalitas client-side runtimedari Atlas.
UpdatePanel: digunakan untuk menandai area padahalaman web yang akan secara otomatis di-updateketika postback terjadi tanpa harus melakukan postbacksecara satu halaman penuh.
UpdateProgress: digunakan untuk memberitahukanbahwa proses asynchronus sedang berjalan, biasanyadipakai bersamaan dengan control UpdatePanel.
Timer : Kontrol Timer dapat digunakan untuk melakukanpostback keseluruhan halaman atau sebagaian halamanyang ada dalam UpdatePanel dalam jangka waktutertentu.
Contoh penggunaan Ajax:Setelah kita membuat project baru dengan memilihtemplate Atlas, maka pada Solution Explorer akan munculstruktur file seperti berikut:
Laboratorium Komputer – STIKOM33
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 34/47
Pemrograman Web
Pada halaman Default.aspx , masukkan syntax berikut padabagian source editor:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"runat="server"
EnablePartialRendering="true"/>
<div style="background-color: Yellow;
float: left; width: 100px;">
<asp:Label ID="FullPostBackLabel"runat="server" /><br />
<asp:Button ID="FullPostBackButton"
runat="server"
text="Full Post Back"
OnClick="FullPostBackButton_OnClick" />
Laboratorium Komputer – STIKOM34
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 35/47
Pemrograman Web
</div>
<asp:UpdatePanel runat="server"
ID="UpdatePanel1"
Mode="Conditional">
<ContentTemplate>
<div style="background-color:Lime;
width: 100px;">
<asp:Label
ID="PartialPostBackLabel"
runat="server" /><br />
<asp:Button
ID="PartialPostBackButton"
runat="server"
text="Partial Post Back"
OnClick="PartialPostBackButton_OnClick"/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
Pada syntax di atas, atribut EnablePatialRendering padaScriptManager bernilai True yang menyebabkan kitabisa memanfaatkan partial rendering.
Terdapat juga control UpdatePanel yang berfungsi untuk
melakukan asinchronus postback dalam tagLaboratorium Komputer – STIKOM
35
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 36/47
Pemrograman Web
<ContentTemplate>. UpdatePanel akan melakukanpengiriman data ke server jika salah satu dari event initerjadi:
Method Update() dari UpdatePanel dipanggil secaraexplicit/secara langsung
Event dari UpdatePanel menyebabkan method Update()dipanggil secara implisit/secara tidak langsung
Server control dalam UpdatePanel menyebabkanpostback
Pada bagian design editor halaman Default.aspx akanmuncul tampilan berikut:
Double click pada tombol Full Post Back dan Partial Post Back lalu masukkan syntax berikut:
Protected SubFullPostBackButton_OnClick(ByVal senderAs Object, ByVal e As System.EventArgs)Handles FullPostBackButton.Click
FullPostBackLabel.Text =
DateTime.Now.ToString()
End Sub
Protected SubPartialPostBackButton_OnClick(ByValsender As Object, ByVal e AsSystem.EventArgs)
Laboratorium Komputer – STIKOM36
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 37/47
Pemrograman Web
PartialPostBackLabel.Text =DateTime.Now.ToString()
End Sub
Lihat halaman Default.aspx pada browser, ketika melakukanklik pada PartialPostBack tidak akan terjadi flicker padabrowser dan proses lebih cepat. Sedangkan ketika klik padatombol FullPostBack akan terjadi flicker dan proses lebihlama.
Memanfaatkan control TimerBuat website project baru, pada halaman web yang ada,misal Default.aspx ubah syntax HTML yang ada denganmenambahkan syntax CSS sehingga menjadi tampilanberikut:
<html>
<head runat="server">
<title>Untitled Page</title>
<style type ="text/css" >
body{font-familiy: Verdana;}
.dropArea{height:500px; border:solid
2px black; background:#ccc;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="timer" style="width:201px; height: 107px">
</div>
</form>
Laboratorium Komputer – STIKOM37
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 38/47
Pemrograman Web
</body>
</html>
Masukkan control UpdatePanel, Timer dan Label di antaratag <div>… </div>. Sehingga pada source editor akanmuncul syntax berikut:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"runat="server" />
<div class="timer" style="width: 201px;height: 107px">
<asp:UpdatePanel ID="UpdatePanel1"runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server"
Interval="1000"></asp:Timer>
<asp:Label ID="Label1" runat="server"Text="Label" Font-Bold="True" Font-Size="X-Large" Width="195px">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Di antara control Timer terdapat properties yang bernamaInterval yang berfungsi sebagai durasi tiap “Tick” (dalammilisecond) isi dengan 1000.
Laboratorium Komputer – STIKOM38
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 39/47
Pemrograman Web
Jalankan di browser untuk mencoba bagaimana timerbekerja.
g.
Buat project dengan nama Modul_7 yang memanfaatkantemplate AjaxBuat satu halaman web dengan nama Tanggal.aspx yangmemanfaatkan control UpdatePanel dan UpdateProgressuntuk menggabungkan nama dan proses perhitungan umurdengan tampilan berikut:
Laboratorium Komputer – STIKOM39
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 40/47
Pemrograman Web
Setelah penekanan tombol Proses pada label Nama Lengkapakan muncul nama lengkap dari gabungan nama depan dannama belakang. Calendar Tanggal Lahir juga mengarahpada tanggal lahir dari inputan tanggal lahir di atas.Sedangkan label umur merupakan selisih tahun antaratanggal sekarang dengan tanggal lahir. Muncul juga tulisan
“Sedang terhubung ke server” saat proses update sedangberlangsung.
MODUL 8
WEB STYLISH
Laboratorium Komputer – STIKOM40
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 41/47
Pemrograman Web
Latihlah Kebiasaanmu,Karena Kebiasaan akan
Menjadikanmu
Sukses atau Menghancurkanmu
- Sean Covey -The 7 Habits of Highly Effective Teens
Tujuan :
Praktikan dapat mengkonversi styling dari HTML based keCSS
Materi :CSS Syntax, CSS Id dan Class, CSS Formatting
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 – STIKOM41
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 42/47
Pemrograman Web
1.18 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 kitamenggunakan asp.net server control yang biasa kitagunakan dengan drag and drop dari toolbox. Contohpenggunaan ajax control toolkit telah disediakan padasource codenya jika anda download lengkap berikut sourcecode yang diberikan. Ajax control toolkit versi terakhiradalah ajax control toolkit framework 3.5 yang dapat kitagunakan pada asp.net 3.5.
Link buat download ada di:http://www.asp.net/ajax/downloads/
Langkah-langkah menggunakan library pada AJAXControlToolkit:
a. Buka Visual Studio, buat sebuah web projecttemplate
b. Buka Toolbox klik kanan pada area kosong di
toolbox Add Tab Ketikkan nama tab baru yang akandigunakan untuk menyimpan ajax control toolkit, misalkannamanya "Ajax Control Toolkit".
Laboratorium Komputer – STIKOM42
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 43/47
Pemrograman Web
c. Klik kanan pada area yang kosong di tab baru yang
telah dibuat => Choose Items => pada .NET FrameworkComponents klik button Browse => cari fileAjaxControlToolkit.dll yang telah anda downloadsebelumnya => Klik button OK
Laboratorium Komputer – STIKOM43
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 44/47
Pemrograman Web
Selamat, anda telah dapat menggunakan komponen dariAJAXControlToolkit secara langsung.
1.19 AJAXControlToolkit Sample
AJAXControlToolkit mempunyai banyak sekali komponenyang dapat dipergunakan untuk membangun site yangmenarik 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;
margin-top: 5px;
cursor: pointer;
}
.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
Laboratorium Komputer – STIKOM44
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 45/47
Pemrograman Web
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
Accordion Code:
<ajaxToolkit:Accordion ID="Accordion1"
runat="server" SelectedIndex="0"
HeaderCssClass="accordionHeader"ContentCssClass="accordionContent"
FadeTransitions="true"FramesPerSecond="40"TransitionDuration="450">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>
<a href="" onclick="returnfalse" class="accordionLink">Bagian 1</a>
</Header>
<Content>
<p>
AJAX Control Toolkit
</p>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
Laboratorium Komputer – STIKOM45
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 46/47
Pemrograman Web
<Panes>
<ajaxToolkit:AccordionPaneID="AccordionPane2" runat="server">
<Header>
<a href="" onclick="returnfalse" class="accordionLink">Bagian 2</a>
</Header>
<Content>
<p>
Accordion merupakansalah satu contoh AJAX Control Toolkit
</p>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
Berikut adalah hasil tampilan dari accordion
Laboratorium Komputer – STIKOM46
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
http://slidepdf.com/reader/full/modul-desain-dan-pemrograman-web-101-rev-1 47/47
Pemrograman Web
h.
Buat project dengan nama Modul_8 yang memanfaatkan
AJAXControlToolkitBuat satu halaman web dengan nama Jadwal.aspx yangmemanfaatkan control Accordion dari AJAX Control Toolkit.Bagian header dari Accordion merupakan nama hari (Senin-Minggu) dan Content berisikan rencana anda pada mingguini.
Catatan:
Tampilan Accordion dapat diubah dengan mengubah CSS
yang ada, Accordion dapat dikembangkan lebih lanjutdengan menggunakan data dari databaseHint: Untuk mendapatkan nilai dari suatu database dapat
melirik kembali ke modul 3.
Laboratorium Komputer – STIKOM47
Top Related