Modul Desain Dan Pemrograman Web-101 Rev 1

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



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




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



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 .


http://translate.googleusercontent.com/translate_c?hl=id&sl=en&u=http://reference.sitepoint.com/html/page-structure&prev=/search%3Fq%3DStructure%2Bweb%2Bpages%26hl%3Did%26client%3Dfirefox-a%26hs%3Dqa9%26rls%3Dorg.mozilla:en-US:official&rurl=translate.google.co.id&usg=ALkJrhg7c6qt-hfA85gxNzlQ91Zs1L8Fxg#page-structure__fig-doc-tree

http://translate.googleusercontent.com/translate_c?hl=id&sl=en&u=http://reference.sitepoint.com/html/page-structure&prev=/search%3Fq%3DStructure%2Bweb%2Bpages%26hl%3Did%26client%3Dfirefox-a%26hs%3Dqa9%26rls%3Dorg.mozilla:en-US:official&rurl=translate.google.co.id&usg=ALkJrhg7c6qt-hfA85gxNzlQ91Zs1L8Fxg#page-structure__fig-doc-tree



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.




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




Pemrograman Web

Indianapolis, USA




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




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.




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




Hart, Chris; Kauffman, John; Sussman, David; Ullman,Chris, 2005 Beginning ASP.NET 2.0, Wiley Publishing, Inc.,

Indianapolis, USA




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




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.


http://translate.googleusercontent.com/translate_c?hl=id&sl=en&u=http://www.w3schools.com/tags/tag_tr.asp&prev=/search%3Fq%3DHtml%2Btables%26hl%3Did%26client%3Dfirefox-a%26rls%3Dorg.mozilla:en-US:official&rurl=translate.google.co.id&usg=ALkJrhiTglJRx4DemXQdzYj5yfrAw84ydQ

http://translate.googleusercontent.com/translate_c?hl=id&sl=en&u=http://www.w3schools.com/tags/tag_th.asp&prev=/search%3Fq%3DHtml%2Btables%26hl%3Did%26client%3Dfirefox-a%26rls%3Dorg.mozilla:en-US:official&rurl=translate.google.co.id&usg=ALkJrhgCORFyGadhw43fd7qSI1gTewWUYQ


http://translate.googleusercontent.com/translate_c?hl=id&sl=en&u=http://www.w3schools.com/tags/tag_td.asp&prev=/search%3Fq%3DHtml%2Btables%26hl%3Did%26client%3Dfirefox-a%26rls%3Dorg.mozilla:en-US:official&rurl=translate.google.co.id&usg=ALkJrhhlWPJ3U-FTVQ3YGfRn9hc_GWCBeQ


http://translate.googleusercontent.com/translate_c?hl=id&sl=en&u=http://www.w3schools.com/tags/tag_tr.asp&prev=/search%3Fq%3DHtml%2Btables%26hl%3Did%26client%3Dfirefox-a%26rls%3Dorg.mozilla:en-US:official&rurl=translate.google.co.id&usg=ALkJrhiTglJRx4DemXQdzYj5yfrAw84ydQ





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





Indianapolis, USA





Pemrograman Web




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>




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>




Pemrograman Web

d.




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



Indianapolis, USA

Lee, Wei-Meng, ASP.NET 2.0 A Developer’s Notebook ,

2005, O’Reilly Media, Inc., USA




Pemrograman Web


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>




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.




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.




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






Pemrograman Web


Hart, Chris; Kauffman, John; Sussman, David; Ullman,Chris, Beginning ASP.NET 2.0, Wiley Publishing, Inc.,

Indianapolis, USA





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.




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




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




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:




Pemrograman Web




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.




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



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



Lowe, Doug, 2006, ASP.NET 2.0 Everyday Apps for

Dummies, Wiley Publishing, Inc., Indianapolis, USA


Indianapolis, USA





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.




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:




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




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



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)




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>


<div class="timer" style="width:201px; height: 107px">

</div>

</form>




Pemrograman Web

</body>

</html>

Masukkan control UpdatePanel, Timer dan Label di antaratag <div>… </div>. Sehingga pada source editor akanmuncul syntax berikut:


<asp:ScriptManager ID="ScriptManager1"runat="server" />

<div class="timer" style="width: 201px;height: 107px">

<asp:UpdatePanel ID="UpdatePanel1"runat="server">

<ContentTemplate>

<asp:Timer ID="Timer1" runat="server"

Interval="1000"></asp:Timer>

<asp:Label ID="Label1" runat="server"Text="Label" Font-Bold="True" Font-Size="X-Large" Width="195px">

</asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

Di antara control Timer terdapat properties yang bernamaInterval yang berfungsi sebagai durasi tiap “Tick” (dalammilisecond) isi dengan 1000.




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:




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




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


Edition for Dummies, Wiley Publishing, Inc., Indianapolis,

USA



Indianapolis, USA





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


http://www.asp.net/ajax/downloads/

http://www.asp.net/ajax/downloads/



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




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;




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>




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




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.


Modul Desain Dan Pemrograman Web-101 Rev 1

Documents

Transcript of Modul Desain Dan Pemrograman Web-101 Rev 1