Pemrograman Web DAFTAR ISI Daftar Isi..........................................................................1 Pengantar Umum.............................................................2 1.1 Strukt ur Web Page ...................................................... 3 1.2 Tags Dasar d alam Web Page...................................... 4 1.3 HTML Elemen............................................................. 8 1.4 HTML Attribu te............................................................ 8 1.5 HTML Text Formatting.............................................. 11 1.6 HTML Styles .............................................................. 11 1.7 HTML Images............................................................ 11 1.8 HTML Tables ............................................................. 12 1.9 HTML List .................................................................. 15 1.10 HTML Links............................................................. 15 1.11 HTML Frames.......................................................... 16 1.12 HTML Forms........................................................... 19 1.13 HTML Input ............................................................. 19 1.14 HTML Scripting........................................................ 20 1.15 Advanced GridView ................................................. 24 1.16 GridView Sample.................................................... 25 1.17 AJAX........................................................................ 32 1.18 AJAXControlT oolkit .................................................. 42 1.19 AJAXControlT oolkit Sample ..................................... 44 Laboratorium Komputer – STIKOM 1
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
5/12/2018 Modul Desain Dan Pemrograman Web-101 Rev 1 - slidepdf.com
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
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
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 .
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
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
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
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
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
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.
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>
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
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
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
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
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
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
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:
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
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
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".
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
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
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