Kata Pengantar

Alhamdulillah akhirnya buku ini berhasil di selesaikan. Buku ini adalah buku kecil yang memfokuskan
pendekatan konsep How-To. Konsep How-To menekankan pada pendekatan praktis bagaimana suatu
teknologi diterapkan dan dipakai menggunakan perangkat bantu yang ada.

Pada kesempatan kali ini buku yang dibuat adalah buku yang memfokuskan pengembangan aplikasi
Web dengan menggunakan Visual Web Developer 2008. Buku ini memang membahas berbagai fitur
yang dimiliki oleh Visual Web Developer sebagai perangkat pengembangan web yang baik dan tanpa
investasi alias gratis. Tetapi, jangan salah sangka apapun perangkat yang anda miliki anda tetap dapat
berinovasi dengan ide dan ketekunan anda. Jadi buku ini juga dapat dipakai bagi anda yang
menggunakan perangkat lain untuk pengembangan aplikasi web berbasis ASP.NET.

Buku kecil ini tak luput dari keterlibatan berbagai pihak yang membantu penulis untuk menyelesaikan
buku ini. Penulis ucapkan terima kasih pada Mas Narendra Wicaksono, MIC-UGM Gokilz Team (Bume,
Buem, Kakol, Linq2).. you are the best guys, dan pihak-pihak lain dari komunitas dan juga dari rekan-
rekan penulis yang membantu buku ini sehingga dapat selesai dengan baik.

Tidak ada gading yang tak retak dan tak ada kesempurnaan kecuali milikNYA, alhasil penulis ucapkan
terima kasih untuk menyempatkan membaca buku ini, selamat membaca, dan selamat berinovasi.

Februari 2008

Ridi Ferdiana | http://ridilabs.net

Daftar Isi
Sebelum Memulai ................................................................................................................................... 1
Prakata ................................................................................................................................................ 1
Ikon pada Buku Ini ............................................................................................................................... 1
Kebutuhan Perangkat Keras ................................................................................................................. 1
Kebutuhan Perangkat Lunak ................................................................................................................ 2
Dukungan Teknis ................................................................................................................................. 2
101 TNT {Technology aNd Tools} ............................................................................................................. 3
ASP.NET............................................................................................................................................... 3
Mengapa ASP.NET ........................................................................................................................... 3
Anatomi Aplikasi ASP.NET ................................................................................................................ 4
ASP.NET 3.5 Web Services ............................................................................................................... 6
ASP.NET 3.5 What’s New ................................................................................................................. 7
AJAX dan ASP.NET ............................................................................................................................... 7
Visual Web Developer 2008 ................................................................................................................. 9
SQL Server Express 2005 .................................................................................................................... 10
Sebuah Penutup ................................................................................................................................ 11
Tour De Visual Studio Web Developer Hands ON ................................................................................... 12
Sebelum Memulai.............................................................................................................................. 12
IDE Knowledge Base .......................................................................................................................... 12
Membuat Project Web Aplikasi.......................................................................................................... 14
IDE Designer ...................................................................................................................................... 15
Hello Hutang (Aplikasi Web Perhitungan Hutang) .............................................................................. 15
AJAX-enabled Web Application .......................................................................................................... 19
Deployment Project ........................................................................................................................... 23
Web Aggregator Hands On Lab Bagian 1 ................................................................................................ 29
Sebelum Memulai.............................................................................................................................. 29
Pendaftaran Layanan Live Search Web Services ............................................................................. 29
Pendaftaran Layanan Web Services Amazon .................................................................................. 31
Rencana Pengembangan Aplikasi ....................................................................................................... 33
 Business Statement Aplikasi ........................................................................................................... 33
Business Process Aplikasi ............................................................................................................... 33
Batasan Pengembangan Aplikasi .................................................................................................... 34
Pembuatan Project dan Rancangan Antarmuka Web Aggregator ....................................................... 35
Web Aggregator Hands On Lab Bagian 2 ................................................................................................ 49
Sebelum Memulai.............................................................................................................................. 49
Referensi Web Services pada Web Aggregator................................................................................... 49
Penambahan Web Reference pada Live Search Web Services ........................................................ 50
Penambahan Web Reference pada Amazon Web Services ............................................................. 50
Lebih Dalam Tentang Web Reference ............................................................................................ 51
Mekanisme Penyimpanan Informasi Autentifikasi Web Services ........................................................ 52
Pengikatan Data melalui Web Services .............................................................................................. 53
Sebuah Penutup ................................................................................................................................ 64
1 Chapter 0 - Perkenalan

Sebelum Memulai

Prakata
Buku ini dibuat bagi siapapun yang hendak mempelajari teknologi pengembangan dengan ASP.NET 3.5.
Bagian ini akan membahas berbagai persiapan yang dibutuhkan agar anda dapat secara optimal
menggunakan buku ini sebagai salah satu bahan belajar anda. Sebagai persyaratan awal, penulis
berharap bahwa anda telah mengetahui pemograman berorientasi objek, mengetahui sintaks C#, dan
juga dapat memiliki kemauan untuk belajar.

Buku ini akan terbagi menjadi dua bagian yakni.

1. Visual Web Developer 2008 Overview

2. H.O.L Visual Web Developer 2008

Setalah membaca buku ini, pembaca diharapkan dapat mengetahui dan mengimplementasikan konsep
pemograman ASP.NET 3.5 dengan Visual web Developer 2008 sebagai salah satu perangkat
pengembangannya.

Ikon pada Buku Ini

Pada buku ini anda menemukan tokoh dengan nama jeyuk, jeyuk akan memberikan informasi tambahan
yang membuat anda mengeksplor lebih lanjut buku ini. Berikut adalah ikon jeyuk yang digunakan pada
buku ini.

Informasi
Berisi informasi yang selayaknya anda perhatikan demi
kemudahan dan kelancaran penggunaan buku ini

Referensi
Referensi tambahan yang bersifat suplemen dari buku ini

Hindari Ini
Berisi informasi dan rekomendasi berbagai hal yang sebaiknya
tidak dilakukan

Kebutuhan Perangkat Keras

Perangkat keras berikut dibutuhkan agar anda dapat belajar secara optimal.

 Komputer dengan kecepatan 1 Ghz atau yang lebih tinggi.

2 Chapter 0 - Perkenalan

 512 MB Ram atau yang lebih tinggi.

 2 GB ruang kosong pada harddisk.
 DVD-ROM drive
 1024x768 monitor dengan dukungan warna 16 Bit atau yang lebih tinggi.
 Keyboard, Mouse, dan perangkat masukan lainnya.

Kebutuhan Perangkat Lunak

Perangkat lunak berikut dibutuhkan agar anda dapat belajar secara optimal.

 Salah satu sistem operasi berikut.

o Windows XP Professional SP2 x86/x64 (WOW).
o Windows 2003 SP1 dengan berbagai variannya (R2, x86, x64 (WOW)).
o Windows Vista Business, Home Premium, Ultimate atau Enterprise.
o Windows 2008
 Salah satu perangkat pengembang berikut.
o Visual Web Developer 2008, atau
o Visual Studio 2008 Standard, atau yang lebih tinggi.
 Software Development Kit berikut.
o Live Search SDK

Gratis
“anda dapat memperoleh Visual Web Developer 2008 secara
gratis di http://msdn.microsoft.com/vsexpress ”

Dukungan Teknis
Setiap usaha telah dilakukan agar buku ini dan juga kode didalamnya dapat dijadikan referensi anda
belajar. Namun demikian, tidak ada gading yang tak retak, tidak ada ciptaan manusia yang sempurna.
Berbagai masukan, kritik atau ide dapat disampaikan melalui blog penulis yakni.

http://geeks.netindonesia.net/blogs/ridi

atau menghubungi penulis melalui email yakni

[email protected]

Dukungan terbatas yang bersifat non-komersial dapat anda sampaikan pula melalui dua alamat di atas.

Source Kode Buku

“anda dapat memperoleh kode aplikasi buku ini pada sesi
download di blog penulis yakni
http://geeks.netindonesia.net/blogs/ridi”
3 Bagian 1 – Teknologi dan Perangkat

101 TNT {Technology aNd Tools}

“Pada bagian ini akan didiskusikan secara singkat mengenai berbagai teknologi dan perangkat yang
terkait yang digunakan pada bahasan selanjutnya”

ASP.NET
Mengapa ASP.NET
ASP.NET sebuah teknologi yang mungkin sudah tak asing lagi ditelinga web programmer. Teknologi
pengganti ASP yang telah diperkenalkan pada kisaran tahun 2000-an bersamaan dengan .NET
framework, menjadi salah satu standar pengembangan web dinamis yang berskala enterprise. ASP.NET
dapat didefinisikan sebagai platform teknologi yang didesain untuk mengembangkan aplikasi berbasis
web. ASP.NET memungkinkan penggunanya untuk mengembangkan aplikasi web yang dinamis, data-
driven, dan berbagai kemungkinan aplikasi lain yang berjalan di atas sebuah web server. ASP.NET berdiri
sebagai platform teknologi yang secara langsung berkait dengan bahasa pemograman berorientasi objek
(seperti C#), framework pengembangan terkelola berbasis komponen (.NET), dan sebuah perangkat
bantu yang meningkatkan produktifitas pengembangan (seperti Visual Web Developer).

ASP.NET bekerja dengan model pemograman yang sedikit berbeda dengan ASP klasik ataupun PHP.
ASP.NET bekerja dengan suatu runtime eksekusi yang dikenal dengan CLR (Common Language Runtime).
CLR adalah suatu lingkungan eksekusi terkelola (managed) yang merupakan bagian dari teknologi .NET
framework. Linkungan terkelola atau lebih dikenal dengan “managed environment”. Arsitektur
lingkungan terkelola memberikan berbagai keuntungan pada teknologi pengembangan web ini
diantaranya

 Performa yang lebih baik, kode ASP.NET dikompilasi oleh CLR. Hal ini yang membedakan
teknologi web ASP.NET dengan teknologi script web seperti ASP. CLR lebih baik dari sisi
performa karena memiliki beberapa optimalisasi performa melalui just-in-time execution,
caching, hingga native optimazation. Konsepnya tidaklah terlalu rumit, trik dibelakang ini adalah
teknologi ASP.NET yang dikompilasi sebanyak dua kali. Pada kompilasi pertama kode diubah
menjadi kode MSIL (Miscrosoft Intermediate Language), sebuah bahasa taingkat menengah
yang bersifat platform agnostics, berikutnya kode MSIL diubah menjadi kode natif, hal yang
menarik JIT tidak mengubah semua kode MSIL menjadi kode natif melainkan hanya kode yang
hendak dieksekusi saja, inilah yang dikenal dengan just-in-time, pada eksekusi selanjutanya
engine tidak perlu melakukan kompilasi karena masih terdapat pada cache.

Platform Agnostics
“Istilah yang mengungkapkan sebuah kemungkinan bahwa
kode/teknologi yang ada dapat diterjemahkan serta dieksekusi
pada suatu lingkungan dengan kombinasi hardware dan software
yang berbeda“
4 Bagian 1 – Teknologi dan Perangkat

 Fleksibilitas, ASP.NET dapat menggunakan semua pustaka .NET Base Class Library, sebagai
tambahan pengguna juga dapat memiliki kebebasan untuk memilih bahasa pemograman yang
digunakan seperti VB atau C#.
 Setting dan Konfigurasi, ASP.NET menggunakan XML dalam pengaturan setting dan konfigurasi
aplikasi web. Walaupun terkesan sepele, banyak informasi yang esensial yang dapat disimpan
dan memudahkan kita dalam melakukan distribusi serta konfigurasi web.
 Keamanan, ASP.NET yang menggunakan pustaka keamanan yang sama dengan .NET framework
dapoat secara fleksibel dikombinasikan dengan menggunakan schema berbasis xml yang dapat
dibuat sesuai dengan kebutuhan.

Anatomi Aplikasi ASP.NET

Berbeda dengan aplikasi berbasis executable (.exe), aplikasi web berbasis ASP.NET pada umumnya
terdiri dari satu atau lebih halaman web dinamis. Pengguna aplikasi web dapat masuk melalui link yang
berbeda, dengan cara yang berbeda, hingga menggunakan perangkat yang berbeda.

Setiap halaman pada aplikasi web berbasis ASP.NET menggunakan konsep sharing common resources ,
tentu saja hal ini hanya berlaku pada halaman halaman web yang terdapat dalam satu aplikasi web. Bagi
pakai sumber daya ini diatur oleh suatu mekanisme domain yang dikenal dengan application domain.

Application domain adalah suatu area yang terisolasi yang memisahkan pemetaan sumber daya dari
aplikasi yang satu dengan aplikasi yang lain. Konsep ini memungkinkan bahwa satu web aplikasi yang
satu dengan yang lain saling terisolasi dan aman apabila terjadi kesalahan fatal antara satu web aplikasi
dengan web aplikasi yang lain. Setiap aplikasi web memiliki sesi, cache, dan konfigurasinya sendiri.
Dalam lingkungan pemograman asp.net pada umumnya sebuah aplikasi web memiliki satu direktori
khusus pada web server yang dikenal dengan Virtual Directory. Gambar 1.1 menggambarkan aplikasi
web dalam sebuah web server.

Web Server (IIS)

ASP.NET Application Domain
Runtime

Applicatiuon
Others Web Pages Web Services Configuration & Session
Runtime Data
i.e. ISAPI

Gambar 1.1 Aplikasi ASP.NET

5 Bagian 1 – Teknologi dan Perangkat

Application Domain != Virtual Directory

“Virtual directory adalah direktori fisik pada file system yang
diekspos ke lingkungan internet berdasar pada konfigurasi IIS,
sementara application domain adalah suatu area non-fisik yang
diisolasi berdasar .NET runtime”

Sebuah aplikasi ASP.NET berada dalam sebuah application domain dan sebuah virtual directory, tetapi
dalam sebuah virtual directory dapat dimungkinkan terdapat lebih dari satu aplikasi ASP.NET. Pada
keadaan ini maka aplikasi ASP.NET akan bekerja dalam sebuah application domain, walaupun ini adalah
satu hal yang harus dihindari tetapi secara implisit keadaan ini dapat diatasi melalui konfigurasi per-
aplikasi atau pemisahan application domain pada setiap web aplikasi.

Aplikasi ASP.NET pada umumnya terdiri dari berbagai tipe berkas. Secara umum tipe-tipe berkas pada
ASP.Net digambarkan pada tabel 1.1

Tabel 1.1 Tipe Berkas ASP.NET

Ekstensi Berkas Deskripsi

.aspx Halaman web asp.net biasanya terdiri dari
deklarasi antarmuka dan juga kode script.
.ascx User control, berupa bagian antarmuka yang
bersifat reusable
.asmx Ekstensi khusus untuk halaman web services.
Secara umum IIS akan memperlakukan halaman
dengan ekstensi ini dengan suatu aplikasi web
yang dapat meng-generate komunikasi web
services.
Web.config Berkas konfigurasi ASP.NET
Global.asax Berkas kode dan variabel global yang dibagi-pakai
untuk beberapa aplikasi web sekaligus
.cs/.vb Berkas kode pemograman pada ASP.NET
.master Halaman web yang dijadikan template untuk
sebuah aplikasi web.
.skin Berkas deifinisi tampilan yang memungkinkan
sebuah aplikasi web dapat berubah-rubah dari sisi
tampilan

ASP.NET juga memiliki struktur direktori yang khusus dan konsisten. Konsistensi ini memberi kemudahan
bagi pengembang dalam memetakan berkas-berkas yang sejenis dalam sebuah direktori. Tabel 2
menampilkan folder-folder yang terdapat dalam ASP.NET
6 Bagian 1 – Teknologi dan Perangkat

Tabel 1.2 Berkas direktori yang terdapat pada ASP.NET

Nama Direktori Deskripsi

Bin Berisi komponen .NET dll yang direferensikan pada
aplikasi web. Folder ini juga berisi hasil kompilasi
kode pemograman asp.NET pada aplikasi yang
bersangkutan.
App_Code Berisi kode pemograman yang secara dinamis
dikompilasi dan dapat diubah sewaktu waktu
tanpa harus mengkompilasi seluruh aplikasi web
secara keseluruhan.
App_GlobalResources Berisi berkas definisi yang dapat diakses secara
global. Pada umumnya direktori ini berisi berkas
yang dapat digunakan untuk dukungan multi-
bahasa
App_LocalResources Berisi berkas definisi yang hanya dapat diakses
oleh halaman web tertentu
App_webReferences Berisi berkas referensi aplikasi web yang
bersangkuitan dengan web services yang terdapat
pada aplikasi web lain.
App_Data Berisi data yang digunakan untuk aplikasi web
sebagai contoh berkas xml, access, atau berkas
SQL Server 2005 express.
App_Theme Berisi theme atau skin yang digunakan pada
sebuah aplikasi web.

ASP.NET 3.5 Web Services

Web Services dapat didefinisikan sebagai bagian dari suatu sistem yang memberikan layanan melalui
protokol web, mulai dari mengekspos data hingga memberikan layanan dengan fungsionalitas tertentu.
Web Services dikenal karena memiliki suatu standar yang bisa diadopsi oleh platform yang berbeda dan
dengan teknologi yang berbeda.

ASP.NET Web Services adalah bagian dari teknologi ASP.NET yang memfokuskan pada mekanisme
komunikasi dan penggunaan layanan berbasis web. Saat ini teknologi ASP.NET memungkinkan
pengembang untuk mengembangkan layanan dengan dua cara yakni menggunakan ASP.NET Web
Services atau menggunakan WCF.

Adopsi yang luas dari web services menjadikan web services sebagai solusi primer yang dijadikan
sebagai salah satu enabler technology, yang sangat mendukung proses komunikasi Business To Business
(B2B), multi platform, hingga dukungan komunikasi perangkat yang heterogen.
7 Bagian 1 – Teknologi dan Perangkat

ASP.NET 3.5 What’s New

Sebagai sebuah framework yang kini telah mencapai versi 3.5 berbagai perbaikan telah diupayakan dan
diwujudkan. Walaupun secara mendasar tidak terdapat sesuatu yang baru dari sisi pengembangan dan
pemograman, berbagai perbaikan telah dimasukkan terutama dari sisi kontrol antarmuka yang beragam,
hingga produktifitas pengembang melalui AJAX dan LINQ. Berikut adalah pengembangan utama pada
ASP.NET 3.5.

 Type data baru, kontrol server, serta pustaka script client yang dapat membantu pengembang
mengembangkan aplikasi berbasis AJAX.
 Ekstensi kontrol autentikasi berbasis form, manajemen role, serta konfigurasi profil web services
yang digunakan pada aplikasi web.
 ListDataView control penampil data yang fleksibel dari sisi tampilan UI.
 LinqDataSource control pengikat data yang berbasiskan teknologi LINQ.
 Merge tool aspnet (aspnet_merge.exe) sebuah perangkat yang memberi kemudahan dan
alternatif deployment aplikasi web yang lebih fleksibel.

AJAX dan ASP.NET

Istilah AJAX kerapkali didefinisikan sebagai “sebuah pendekatan baru dalam pengembangan aplikasi
web”. Ajax adalah suatu istilah baru yang lahir di penghujung tahun 2005, sebuah istilah baru dengan
teknologi lama. Teknologi lama dibelakang Ajax adalah JavaScript, JavaScript yang berperan sebagai
script klien yang akan memberi respon terhadap aksi klien dan juga mengirimkan data berupa xml ke
server untuk diproses secara lebih lanjut. Ajax terdiri dari tiga bagian penting seperti yang dikemukakan
pada tabel 1.3 berikut.

Tabel 1.3 Komponen Utama Ajax

Objek Deskripsi
XMLHTTPRequest Objek yang berfungsi untuk melakukan panggilan
secara asinkronus melalui protokol HTTP
XMLDocument Objek yang berfungsi untuk memparsing xml data
yang dikirim dan diterima oleh aplikasi
JSON (JavaScript Object Notation) Notasi alternatif dari xml yang banyak digunakan
sebagai data yang dikirim dan diterima

Bila deskripis di atas terlalu teknis, maka secara sederhana Ajax sebenarnya memfokuskan pada suatu
user experience bagi pengguna web yang tengah mengakses web. Pada tabel 1.4 Berikut digambarkan
perbedaan antara sebuah aplikasi web yang menggunakan teknologi Ajax dan tidak menggunakan
teknologi Ajax.
8 Bagian 1 – Teknologi dan Perangkat

Tabel 1.4 Perbandingan User Experience antara aplikasi web yang menggunakan Ajax dengan aplikasi
web yang tidak menggunakan Ajax

Tanpa Ajax Dengan Ajax

Penguna membuka aplikasi web Penguna membuka aplikasi web
Aplikasi web tampil dengan meload seluruh Teknologi Ajax memungkinkan web tampil
halaman secara sekaligus. perbagian dengan meload halaman dari satu
bagian ke bagian tertentu.
Pada saat meload halaman yang bersangkutan Pada saat meload halaman yang bersangkutan
layar browser berwarna putih ataupun tidak layar browser akan menampilkan suatu label
lengkap dari dari sisi fungsional notifikasi menunggu, dan bagian-bagian fungsional
akan tampil perbagian.
Pengguna melakukan aksi yang membutuhkan Pengguna melakukan aksi yang membutuhkan
aplikasi web melakukan perubahan state dan aplikasi web melakukan perubahan state dan
pengiriman data pengiriman data
Pada saat aplikasi mengalami perubahan state dan Pada saat aplikasi mengalami perubahan state dan
menampilkan data lain maka seluruh halaman menampilkan data lain maka halaman akan di-
akan di-render ulang render ulang hanya pada bagian yang perlu
dirubah

Selain user experience yang lebih baik, sebenarnya Ajax juga memberikan suatu peluang komunikasi
yang lebih efisien. Peluang komunikasi yang efisien ini dapat secara mudah dilihat berdasar pola
komunikasi yang dilakukan oleh aplikasi web berteknologi Ajax, pola komunikasi round-trip hanya
dilakukan pada sebagian halaman yang mengalami perubahan saja.

Salah satu fitur utama ASP.NET 3.5 adalah kehadiran pustaka Ajax yang terintegrasi. Apabila pada saat
ASP.NET 2.0 , pustaka Ajax adalah pustaka tambahan bagi ASP.NET yang terpisah, maka pada versi 3.5
ini Ajax adalah bagian dari pustaka ASP.NET. Pembuatan aplikasi Web dengan Ajax memng bukan
perkara yang sulit dan juga bukan perkara yang mudah tanpa framework pustaka ASP.NET, hal ini
dikarenakan pengembang terkadang sering melakukan rutin-rutin yang sama untuk membuat sebuah
aplikasi web menjadi Ajax enabled. Teknologi ASP.NET mengenkapsulasi semuanya menjadi sebuah
pusata terintegrasi dan memberikan kemudahan bagi pengembang untuk menambahkan kemampuan
Ajax pada suatu aplikasi web. Pada Bab 2 , akan dilihat betapa mudahnya pengembang membuat
aplikasi web yang mendukung framework Ajax.

ASP.NET 3.5 dikembangkan lebih lanjut dengan pola pikir produktifitas. Tabel 1.5 menggambarkan
elemen kunci framework ASP.NET 3.5 sub komponen Ajax.

Tabel 1.5 Elemen Kunci ASP.NET Ajax pada ASP.NET 3.5

Elemen Kunci Keterangan

AJAX Server Control Berupa Non-UI control yang memudahkan
pengembang untuk menambahkan fasilitas Ajax
pada aplikasi web.
AJAX Services Berupa layanan aplikasi yang akan terintegrasi
9 Bagian 1 – Teknologi dan Perangkat

dengan mekanisme layanan seperti autentifikasi,

profile, hingga membership.
AJAX Library Berisi kode Java script yang memungkinkan
pengembang untuk mengembangkan aplikasi web
berbasis Ajax tanpa campur tangan server control
Web Services Dukungan teknologi web services (WCF) dengan
komunikasi berbasis Ajax

ASP.NET 3.5 Ajax Server Control

“Asp.NET Ajax Server control adalah daily need ketika kita
bermain dengan Ajax jadi yakinkan kita mengetahui dengan baik “

Gambar 1.2 Elemen Kunci AJAX pada ASP.NET 3.5

Visual Web Developer 2008

November 2005, pada saat itu penulis cukup dikagetkan dengan adanya keinginan Microsoft
memberikan suatu IDE berbasis teknologi Visual Studio secara Cuma-Cuma. Pernagkat legendaris Visual
Studio sudah cukup terkenal dan ditambah dengan hadirnya versi Express maka komunitas semakin
berkembang dan niat baik Microsoft semakin jelas dengan tetap menghadirkan Visual Web Developer
dan Visual Studio Express yang lain secara Cuma-Cuma.
10 Bagian 1 – Teknologi dan Perangkat

Kata tanpa investasi atau gratis, mungkin oleh sebagian orang dijadikan suatu penghalang yang
membuat sebagian pemikiran bahwa yang gratis itu pasti kurang bagus atau kosong fitur. Microsoft
membuat IDE Visual Studio Express dengan target yang berbeda, perbedaan fitur IDE hanyalah dijadikan
sebagai batasan segmen pengguna, selebihnya teknologi yang digunakan sama tanpa ada kehilangan
satu pusataka-pun yakni .NET Framework.

.NET Akan Selalu Gratis

“.NET adalah framework dasar yang tidak berbayar baik
pemakaian maupun distribusi, bahkan CLI sebagai bagian dari
.NET Framework adalah standard yang berada di lingkungan
shared source. Pengembang dan pengguna dapat melihat kode
secara bebas dan bertanggung jawab“

Pengembang mungkin dapat mengembangkan kode ASP.NET tanpa bantuan Visual Studio, tetapi
melakukan hal tersebut secara berulang-ulang akan menjadi rutinitas yang terkadang membosankan
dan terkadang menurunkan produktifitas. Berapa alasan mengapa menggunakan IDE dapat diungkapkan
sebagai berikut.

 IDE memberi kita kemudahan produktifitas dalam melakukan rutin-rutin utama pengembangan
web, seperti membuat project baru, membuat berkas aspx, dan sebagainya.
 Solusi pengecekan kesalahan yang terintegrasi. IDE memberi kemudahan kita dalam melakukan
mendeteksi kesalahan yang lebih intuitif.
 Web Form Desain, IDE memungkinkan pengembangan dan desain antarmuka semakin mudah
dengan WYSIWYG.
 Kemudahan dalam mendebug dan menguji, IDE memberikan kemudahan pengembang dalam
melakukan pengujian aplikasi hingga melakukan debugging perbaris kode.
 Ekstensibilitas, IDE memungkinkan kita membuat makro yang memudahkan rutin pekerjaa,
template project custom sesuai kebutuhan, hingga dukungan aplikasi tambahan yang dapat
menempel di Visual Studio.
 Web Server yang terintegrasi, IDE menyediakan web server mini yang bersifat fleksibel dan
melekat pada setiap project aplikasi web.

Visual Studio Family

“Visual Studio 2008 Express akan senantiasa gratis dan Visual
Studio 2008 dengan versi lain menggunakan investasi yang
memberi trade of seimbang bagi pengembangan“

SQL Server Express 2005

Paket instalasi Visual Web Developer 2008 mengintegrasikan sebuah basis data SQL Server Express
2005. SQL Server Express 2005 adalah RDBMS gratis yang memudahkan pengembang untuk
mengembangkan aplikasi web yang bersifat data-driven, mudah dikembangkan, dan mudah
didistribusikan.
11 Bagian 1 – Teknologi dan Perangkat

SQL Server Express 2005 didesain untuk kebutuhan bisnis dan personal dengan konteks yang bersifat
sederhana dari sisi availibilitas dan juga jumlah data. Bila melihat lebih jauh SQL Server sendiri terbagi
menjadi beberapa versi mulai dari yang bersifat portable (compact) untuk pengguna perangkat windows
mobile, hingga versi Enterprise untuk pengguna yang membutuhkan skalabilitas. Gambar 3
menunjukkan target penggunaan SQL Server bagi berbagai macam pengguna.

SQL Server Express

“SQL Server Express versi terbaru dapat didownload di
http://go.microsoft.com/fwlink/?LinkId=31401 “

Gambar 1.3 Edisi SQL Server.

Pengguna SQL Server Express 2005 secara default hanya ditargetkan untuk individu dan akademik,
tetapi penggunaannya dapat ditingkatkan dengan berbagai macam cara. Hal yang paling menarik adalah
adanya dukungan lebih SQL Server Express agar memiliki kemampuan lebih melalui paket terpisah yang
dikenal dengan SQL Server Express Advance Services. SQL Server dengan embel-embel dengan Advance
Services memberi dukungan untuk reporting, pencarian text yang canggih, dan juga perangkat
pengelolaan yang lebih baik.

Sebuah Penutup
Pada bagian ini telah dibicarakan berbagai teknologi yang terkait dengan buku ini. Pengguna akan
memanfaatkan teknologi yang telah diungkapkan pada bagian ini dan menjadi dasar pada bagian buku
lainnya. Teknologi ASP.NET, AJAX, Web Services, hingga SQL Server akan dipadukan dalam suatu Hands
On Lab yang menuntun pembaca untuk dapat memahami teknologi lebih dari sekedar konsep yang
diungkapkan pada bagian ini.
12 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

pi daftTour De Visual Studio Web Developer Hands ON

“Pada bagian ini akan dibahas berbagai fitur dan dukungan Visual Web Developer dalam pengembangan
aplikasi web dengan ASP.NET.”

Sebelum Memulai
Sebelum memulai Hands On Lab ini diharapkan pengguna telah memasang Visual Web Developer 2008.
Pengguna juga dapat memasang IDE dengan versi yang lebih tinggi seperti Visual Studio 2008 standard
atau yang lebih tinggi.

Bila sudah memasangnya, silahkan membukanya melalui start menu

Gambar 2.1 Microsoft Visual Web Developer 2008 Start menu

IDE Knowledge Base

IDE akan melakukan konfigurasi apabila pertamakali dibuka, gambar 2.2 menggambarkan IDE Visual
Web Developer yang tampil, tabel 2.1 berikut menggambarkan fungsi deri masing-masing IDE.

Tabel 2.1 Referensi Gambar IDE

Nama Deskripsi
Start Page Halaman yang berisi informasi dan link tentang project terakhir dan headlines dari
internet.
Properties Jendela yang berisi property dari setiap elemen yang dipilih pada IDE
CSS Explorer Berisi navigasi struktural mengenai desain CSS yang akan dikembangkan
Data Source Berisi halaman yang menampilkan sumber data yang dapat diikat oleh aplikasi
ToolBox Berisi sekumpulan control ASP.NET yang terbagi berdasar kategori aplikasi
Style Berisi navigasi terstruktur skin aplikasi
13 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

Gambar 2.2 Visual Web Developer

Apabila semua menu tidak tampak maka pengguna dapat melihatnya melalui akses menu View seperti
pada Gambar 2.3.

Gambar 2.3 View Menu

14 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

Membuat Project Web Aplikasi

Project web aplikasi dapat diakses melalui create new website di menu File -> Create New Web Site.

Gambar 2.4 Layar Pembuatan Web Site Baru.

Pada gambar 2.4. Tampak bahwa VWD dapat membantu kita untuk membuat beberapa tipe project
seperti pada tabel 2.2 berikut.

Tabel 2.2 Jenis Project pada VWD.

Jenis Project Deskripsi

ASP.NET Web Site Tipe project membuat aplikasi web dengan ASP.NET
ASP.NET Web Services Tipe project membuat aplikasi web services. Web services adalah aplikasi
yang berisi fungsi-fungsi yang dapat dieksekusi melalui protocol web.
WCF Services Tipe project yang memfokuskan pada pengembangan Windows
Communication Foundations
Empty Website Tipe project kosong yang dapat dikembangkan sesuai dengan kebutuhan

VWD memungkinkan pengguna untuk membuat project dengan lokasi yang berbeda. Setiap tipe project
yang ada dapat dikembangkan di tiga lokasi yakni FileSystem, dimana berkas di simpan dalam sebuah
sistem berkas, FTP dan juga HTTP. Pada pengembangannya kita dapat menggunakan bahasa Visual Basic
dan Visual C#.
15 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

IDE Designer
Salah satu fitur utama IDE adalah kemampuan melakukan pengembangan dengan menggunakan
tampilan ala WYSIWYG. Setelah membuat sebuah project baru, kita dapat membuka designer pada
bagian halaman yang berkestensi seperti aspx, ascx, dsb. Berkas yang terasosiasi pada project dapat
memiliki view yang berbeda-beda. Design memungkinkan kita mendesain dengan tampilan WYSIWYG.
Source akan menampilkan kode antarmuka berkas. Dan Split akan menampilkan antarmuka baik kode
dan tampilan WYSIWYG secara bersamaan.

Gambar 2.5 Navigasi IDE Designer

Pada saat di design view ataupun di source, pengguna dapat melakukan drag and drop komponen dari
toolbox, dengan kata lain pengguna tidak perlu melakukan pengketikan kode secara penuh.

Hello Hutang (Aplikasi Web Perhitungan Hutang)

Baik untuk mencobanya kita akan membuat aplikasi sederhana yang melakukan perhitungan kredit.
Demi kemudahan lakukan langkah langkah berikut.

1. Buat sebuah web aplikasi dengan nama HitungHutang. Lihat langkah membuat project web
aplikasi pada bab ini.
2. Berikutnya rancang antarmuka sebagai berikut.

Gambar 2.6 Rancangan Antarmuka Form HitungHutang

3. Beri nama masing-masing antarmuka kontrol dengan nama sebagai Tabel 2.3.
Tabel 2.3 Tabel Nama Kontrol
Nama Control Properties Value Jenis Control
Label1 Text Beban Hutang Label
16 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

Label2 Text Tingkat Bunga Label

Label3 Text Lama Waktu Label
Label4 Text Total Yang Dibayarkan Label
txtHutang Text - TextBox
txtBunga Text - TextBox
txtWaktu Text - TextBox
txtTotal Text - TextBox
btnHitung Text Hitung Button

4. Berikutnya kita dapat melakukan pengkodean, untuk melakukan pengkodean kita dapat
melakukan dua buah pendekatan yakni dengan menggunakan inline code atau dengan
menggunakan code behind model. Penulis sendiri menyarankan untuk senantiasa menggunakan
code behind, karena memudahkan dari sisi pengelolaan dan pemisahan kode dengan
antarmuka. Pada Visual Web Developer Designer lakukan pemilihan pada button btnHitung
dengan melakukan klik dua kali.
Setelah anda klik dua kali pada button btnHitung, maka akan ditampilkan kode editor yang
dapat anda isi kode untuk menjalankan komputasi menghitung hutang, seperti Gambar 2.7.

Gambar 2.7 Kode Editor

5. Sebelum anda menulis kode dibawah button btnHitung, lebih baik anda tentukan dulu
mekanisme komputasi perhitungan hutang. Dengan field yang tersedia yaitu Beban Hutang,
Tingkat Bunga, Lama Waktu, dan Total Yang Dibayarkan, pengguna diminta untuk memasukkan
nilai Beban Hutang, Tingkat Bunga, dan Lama Waktu, sedangkan untuk field Total Yang
17 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

Dibayarkan akan ditampilkan oleh program setelah pengguna menekan tombol Hitung. Total
Yang Dibayarkan akan dikomputasi oleh program dengan rumus sbb:
Total Yang Dibayarkan= Beban Hutang + ((Beban Hutang * Tingkat Bunga / 100) * Lama Waktu)
Sebagai contoh,
Beban Hutang = Rp. 1.000.000,-
Tingkat Bunga = 5% per bulan
Lama Waktu = 2 bulan

Maka:

Total Yang Dibayarkan

= Beban Hutang + ((Beban Hutang * Tingkat Bunga / 100) * Lama Waktu)

= 1000000 + ((1000000 * 5 / 100) * 2)

= 1000000 + 100000

= 1100000

6. Implementasikan rumus komputasi perhitungan hutang yang harus dibayarkan tersebut ke

dalam code editor dengan bahasa C#.

Gambar 2.8 Implementasi Kode BtnHitung

Pada kode di Gambar 2.8, dapat kita lihat implementasinya terdiri dari empat bagian, yaitu:
 Inisialisasi variabel
Disini kita menginisialisasi empat variabel baru yaitu total, hutang, bunga dan waktu
dengan tipe data integer.
 Konversi tipe data (string to double)
Pada bagian ini kita mengkonversi tipe data dari teks-teks yang dimasukkan ke dalam
textbox txtHutang, txtBunga, dan txtWaktu yang berupa string. Konversi dilakukan
18 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

karena kita akan melakukan operasi komputasi yang hanya dapat dilakukan pada data-
data numerik. Digunakan tipe data double dibandingkan tipe data lainnya seperti
integer karena mempertimbangkan persentase bunga dan total yang mungkin bertipe
data double.
 Komputasi Hitung hutang
Pada bagian ini kita implementasikan rumus komputasi hitung hutang dengan
melakukan komputasi terhadap variabel-variabel double yang kita miliki.
 Menampilkan hasil ke textbox
Pada bagian ini kita tampilkan hasil komputasi yang ditampung dalam variabel total ke
dalam textbox txtTotal, sehingga ada proses konversi lagi dari total yang bertipe double
menjadi string.

7. Menguji program hitung hutang melalui Debug > Start Debugging atau tekan tombol F5. Lihat
Gambar 2.9.

Gambar 2.9 Menu Start Debugging

Tahap ini akan membuka aplikasi dalam web browser dan ditampilkan form penghitung hutang.
Isikan beban hutang, tingkat bunga, dan lama waktu. Lihat Gambar 2.10.

Gambar 2.10 Form hitung hutang

Setelah itu, tekan tombol Hitung, sehingga didapatkan jumlah total yang harus dibayarkan pada
field terakhir. Lihat Gambar 2.11.
19 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

Gambar 2.11 Hasil komputasi dalam form

AJAX-enabled Web Application

Apakah AJAX? AJAX merupakan paduan dari beberapa teknologi yang sudah dikenal sebalumnya yaitu
HTML, DOM, XML, Javascript dan teknologi pendukung lainnya. AJAX adalah singkatan dari
Asynchronous JavaScript and XML. Komponen-komponen AJAX meliputi HTML (HyperText Markup
Language), XHTML (Extensible HyperText Markup Language), CSS (Cascading Style Sheets), JavaScript,
DOM (Document Object Model), XML (Extensible Markup Language), XSLT (Extensible Stylesheet
Language Transformations), XMLHttpRequest, dan JSON (JavaScript Object Notation).

Dalam penerapannya, tidak semua teknologi di atas digunakan. Terdapat beberapa teknik komunikasi
yang digunakan untuk implementasi AJAX. Teknik yang umum digunakan adalah dengan menggunakan:

 Hidden Frame
Metode ini memanfaatkan frame yang tersembunyi. Biasanya salah satu frame diset dengan
ukuran tinggi/lebar 0 sehingga tidak terlihat di halaman. Frame tersembunyi inilah yang
sebenarnya melakukan request ke dan menerima respon dari server, sehingga frame yang
tampil kelihatan tidak melakukan postback ke server. Javascript digunakan untuk mengambil
data dan mengisi data yang ada di frame tersembunyi ini.
 Hidden IFrame
Metode ini hampir sama dengan hidden frame, perbedaannya hanya pada elemen yang
digunakan yaitu IFrame, bukan Frame.
 Objek XMLHttpRequest
Metode yang satu ini memanfaatkan ActiveX Objek (IE) atau objek javascript XMLHttpRequest
(Mozilla/Firefox, Safari, Opera). Objek ini yang akan melakukan postback ke server dan
menerima respon balik berupa data (bukan halaman). Data yang didapat dari server kemudian
diolah di klien untuk ditampilkan ke halaman.

Teknik pemprosesan halaman secara umum ada dua:

20 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

 Pemprosesan halaman dengan pembuatan/manipulasi objek dokumen menggunakan javascript.

Klien mengirimkan data dalam format XML/JSON kepada server dan mendapatkan data dari
server berupa XML/JSON. Data XML/JSON kemudian diolah untuk memanipulasi objek dokumen
menggunakan DOM dan javascript.
 Parsial rendering. Pada teknik ini UI dan behaviour tidak diproses di klien melainkan diproses di
server. Klien menerima UI dan behaviour kemudian melakukan rendering pada bagian halaman
tertentu.

Perpaduan teknologi-teknologi tersebut dapat meningkatkan kinerja aplikasi web dan lebih responsif
terhadap aksi pengguna. Dengan AJAX pertukaran data antara klien dan server lebih ringan karena
hanya data yang dipertukarkan (bukan halaman) sehingga aplikasi web dapat berjalan lebih cepat.

Penggunaan Dasar
Dua keistimewaan Ajax adalah dapat:

 Membuat permintaan kepada server tanpa memuat kembali (reload) halaman.

 Mengurai (parse) dan bekerja dengan dokumen XML dan atau JSON.

Langkah-langkah:

1. Pada berkas design form Default.aspx tambahkan komponen ScriptManager dari AJAX
Extentions di Toolbox. Lihat Gambar 2.12.

Gambar 2.12 Komponen ScriptManager

Letakkan diposisi teratas dari semua komponen label atau teksbox yang menyusun form default
HitungHutang. Lihat Gambar 2.13.
21 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

Gambar 2.13 Posisi Komponen ScriptManager

2. Pada jendela source Default.aspx, geser kode komponen ScriptManager ke posisi dibawah kode
form seperti Gambar 2.14

Gambar 2.14 Kode ScriptManager

3. Tetap di jendela source, tambahkan komponen UpdatePanel dari AJAX Extentions di Toolbox.
Lihat Gambar 2.15.

Gambar 2.15 Toolbox UpdatePanel

22 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

Letakkan kode dari komponen UpdatePanel pada posisi diatas kode label, seperti pada Gambar
2.16.

Gambar 2.16 Kode UpdatePanel

4. Pindahkan semua kode label, textbox, dan button diantara kode UpdatePanel, sehingga pada
jendela design akan terlihat semua label, textbox dan button akan ditampung didalam
UpdatePanel. Lihat Gambar 2.17.

Gambar 2.17 Posisi Kode UpdatePanel

5. Menguji program HitungHutang melalui Debug > Start Debugging atau tekan tombol F5. Isikan
beban hutang, tingkat bunga, dan lama waktu. Setelah itu, tekan tombol Hitung, sehingga
didapatkan jumlah total yang harus dibayarkan pada field terakhir. Tahap ini sama seperti
pengujian pada program yang belum dipasangi AJAX. Bedanya pada saat tombol Total ditekan,
kita tidak akan melihat form di-reload.
23 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

Deployment Project
Untuk mendeploy aplikasi web, ada tiga cara yang dapat anda pilih yaitu menyalin berkas-berkas dari
mesin deployment ke mesin server (XCopy deployment), menggunakan Microsoft Visual Studio untuk
menyalin website, atau membuat setup program yang menginstall aplikasi. Dalam tutorial ini,
diasumsikan bahwa kita akan mendeploy website pada mesin yang menjalankan IIS.

1. Deploy Aplikasi Menggunakan XCopy Deployment

Dalam folder aplikasi web dari mesin deployment anda, anda akan mendapati berkas-berkas
dengan ekstensi .aspx, .aspx.cs, dan .config, seperti pada folder aplikasi HitungHutang pada
Gambar 2.18.

Gambar 2.18 Folder aplikasi web

Menyalin semua berkas merupakan solusi yang paling sederhana, khususnya setelah IIS
dikonfigurasi. Penyalinan dapat dilakukan menggunakan xcopy dari command prompt, atau
biasanya menggunakan Windows Explorer atau tool yang mengijinkan transfer FTP.

2. Deploy Aplikasi Menggunakan Visual Studio

Pilihan lain untuk menyalin aplikasi dari mesin deployment ke server adalah menggunakan
pilihan Copy Web Site di Visual Studio.
Klik Website > Copy Web Site… di Visual Studio. Lihat Gambar 2.19.
24 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

Gambar 2.19 Menu Copy Web Site

Muncul jendela penyalinan website seperti Gambar 2.20., yang menampilkan semua folder dan
berkas pada local project.

Gambar 2.20 Jendela Copy Web

Untuk memilih tujuan penyalinan website, klik Connect. Lihat Gambar 2.21.
25 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

Gambar 2.21 Menu Connect

Muncul dialog box Open Web Site seperti yang ditampilkan pada Gambar 2.22.
Sisi kiri dari dialog box ini mengijinkan anda untuk menyalin ke salah satu dari empat jenis
tujuan penyalinan.
a. File System. Klik File System, dan anda akan dapat bernavigasi ke sebuah folder dalam local
file system atau sebuah networked drive.

Gambar 2.22 Dialog Open Web Site

b. Local IIS. Klik icon Create New Web Application yang terletak paling kiri diantara tiga icon di
pojok kanan atas. Sebuah folder website baru muncul dalam tree view dari sistem IIS lokal.
Ubah namanya menjadi Tujuan dan klik Open.
26 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

Pilih semua berkas kemudian klik tombol panah kanan memindah semua berkas terpilih ke
aplikasi virtual yang baru dibuat dalam IIS lokal anda.
c. FTP Site. Pilihan ini mengijinkan anda untuk menggunakan FTP untuk mengirimkan berkas
dari mesin lokal ke server manapun dengan server FTP yang dapat diakses mesin anda.
d. Remote Site. Mirip dengan pilihan Local IIS, namun server tujuan harus menjalankan
Microsoft FrontPage Server Extentions.

3. Deploy Aplikasi Menggunakan Web Setup Project

Buka project HitungHutang pada Visual Studio.
Pada menu File di Visual Studio, klik Add > New Project. Lihat Gambar 2.23.

Gambar 2.23 Menu Add New Project

Pada dialog box yang muncul, pilih Other Project Types > Setup and Deployment > Web Setup
Project. Lihat Gambar 2.24.

Gambar 2.24 Dialog Add New Project

Pada jendela WebSetup1, klik kanan lalu pilih Add > Project Output… Lihat Gambar 2.25.
27 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

Gambar 2.25 Menu Add Project Output

Muncul jendela seperti gambar dibawah ini, lalu klik OK. Lihat Gambar 2.26.

Gambar 2.26 Dialog Add Project Output Group

Klik menu Build > Build WebSetup1 untuk mengkompilasi setup project ini. Lihat Gambar 2.272.
28 Bagian 2 - Tour De Visual Studio Web Developer Hands ON

Gambar 2.27 Menu Build WebSetup1

Dalam folder Debug dibawah folder proyek, anda akn menemukan berkas Setup.exe dan berkas
WebSetup1.msi.

Jika anda menjalankan Setup.exe, program akan menginstal aplikasi web HitungHutang. Anda
akan diminta untuk menentukan nama dari folder virtual dimana aplikasi web harus diinstal.
Setup program akan membuat direktori virtual didalam IIS.
29 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

Web Aggregator Hands On Lab Bagian 1

“Pada bagian ini akan mulai dikembangkan aplikasi web Aggregator, khususnya tentang pengembangan
antarmuka dan persiapan pengembangan aplikasi mulai dari perancangan hingga persiapan yang
dibutuhkan”

Sebelum Memulai
Pada bagian ini akan dikembangkan sebuah aplikasi web bernama web Aggregator. Aplikasi web ini
secara sederhana adalah layanan search engine yang memberikan informasi berbagai hal yang terkait
dengan kata kunci yang dimasukkan pada kotak masukan.

Aplikasi web Aggregator akan melakukan pencarian ke dua sumber yakni Live Search dan Amazon.
Kedua sumber tersebut menyediakan web services yang akan diakses oleh aplikasi web Aggregator.
Layanan yang diberikan keduanya bersifat gratis namun demikian ada kewajiban pengguna untuk
mendaftar terlebih dahulu untuk menggunakan layanan ini. Pada bagian berikut akan digambarkan
bagaimana cara melakukan pendaftaran di kedua buah web services tersebut.

Pendaftaran Layanan Live Search Web Services

Pendaftaran layanan live search terbilang tidak sulit dan tak berbelit belit, pengguna hanya perlu
mengarahkan browsernya ke alamat http://search.live.com/developer . Pada bagian tersebut pengguna
dapat mendaftarkan diri untuk mengikuti program akses web services dengan menggunakan Live ID.
Bagi pengguna yang tidak memiliki Live ID dapat mendaftarkan diri ke http://live.login.com . Pada saat
berhasil login maka terdapat beberapa menu yang dapat membantu pengguna untuk mengaktifkan
layanan web services yang dapat dikonsumsi secara Cuma-Cuma.
30 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

Gambar 3.1 Layanan Live Search Developer

Pada gambar 3.1 tampak bahwa pengguna dapat mendownload SDK yang dibutuhkan untuk membuat
aplikasi berbasis web services yang dibutuhkan. Berbeda dengan SDK pada umumnya yang mewajibkan
untuk dipasang sebelum mengembangkan aplikasi yang bersangkutan. SDK yang diberikan pada situs ini
hanya seputar contoh dan beberapa referensi dokumentasi yang dapat digunakan untuk
mengembangkan aplikasi. Dengan kata lain, SDK ini bersifat sunah untuk dipasang.

Hal yang wajib untuk dilakukan adalah membuat Application ID. Application ID adalah ID unik yang
digunakan untuk mengidentifikasi pengguna atau konsumen web services yang bersangkutan.
Application ID terdiri dari dua bagian yakni identifier dan nomor identifier. Application ID ini akan
digunakan pada setiap aplikasi yang dikembangkan.

Hal yang menarik pengguna dapat membuat application ID sebanyak-banyaknya, setiap application ID
pada umumnya digunakan untuk mengidentifikasi banyaknya query dalam satu waktu. Pembatasan ini
sebenarnya semata mata untuk menghindari Denial Of Services akibat request akun yang tak terkendali.

Setelah membuat Application ID, pengguna dapat melihat situs yang memudahkan pembelajaran
penggunaan SDK yang bersangkutan dengan alamat http://dev.live.com/livesearch/sdk/ . Pada situs ini
pengguna dapat mengeksplorasi kemampuan Live Search dan mengetahui bagaimana mengembangkan
aplikasi klien dengan web services.
31 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

Gambar 3.2 Live Search Interactive SDK

Pendaftaran Layanan Web Services Amazon

Amazon, adalah suatu perusahaan e-commerce ternama yang menjual berbagai barang secara online.
Amazon saat ini menjual dan memiliki data barang konsumsi beraneka ragam dari jenis dan jumlah.
Berdasar pada jumlah dan pengalaman perusahaan yang dimiliki amazon memberikan suatu layanan
akses data menggunakan web services yang memiliki peran utama untuk berbagi informasi tentang
barang yang dijualnya. Layanan Amazon Web Services dapat diakses melalui http://aws.amazon.com .

Layanan Amazon Web Services terbilang banyak dan beragam, dan tidak semuanya tanpa investasi,
terdapat beberapa layanan Amazon yang mewajibkan pemakainya untuk membayar untuk setiap
transaksi layanan tertentu misalnya Alexa. Hal lain yang menarik dari layanan Web Services adalah,
Amazon memiliki program refrensi penjualan, jadi pengguna yang menggunakan dan mengembangkan
layanan web services amazon ini dapat pula memperoleh tambahan penghasilan melalui program yang
dinamakan DevPay.

Pendaftaran Web Services Amazon bukanlah hal yang sulit pengguna hanya cukup menavigasi ke
http://aws.amazon.com dan memilih sign me up pada halaman kanan dari situs yang bersangkutan
32 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

Gambar 3.3 Amazon Web Services

Setelah mengisi beberapa informasi yang dibutuhkan pengguna dapat mengaktifkan akun web services
amazonnya melalui menu “Your Web Services Account” seperti pada gambar 3.4 berikut.

Gambar 3.4 AWS Account

Sama halnya dengan Live Search, akses web services amazon juga membutuhkan identifikasi yang unik
pengguna dapat mengetahuinya melalui menu AWS Access Identifier. Pada AWS Access Identifier
pengguna akan memperoleh dua identifier yakni.

 Access Key ID, berupa ID utama yang digunakan untuk layanan Web Services amazon yang tidak
berbayar
 Secret Key, berupa ID khusus yang digunakan untuk layanan web services amazon yang
berbayar.

Selain itu pengguna juga dapat menambahkan keamanan request melalui penambahan sertifikat x509.
Gambar 3.5
33 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

Gambar 3.5 Access ID Amazon

Rencana Pengembangan Aplikasi

Business Statement Aplikasi

Aplikasi yang akan dikembangkan adalah aplikasi pengikat informasi yang mengikat dua informasi dari
dua sumber yang berbeda dan menampilkannya di sebuah web site yang sama. Aplikasi akan menerima
masukan berupa kata kunci dan mengeluarkan hasil berupa daftar informasi yang terkait dengan aplikasi
yang bersangkutan. Informasi yang dihasilkan diperoleh dari dua buah web site yakni Amazon dan Live
Search. Hasil informasi juga dapat ditelusuri lebih lanjut melalui link lebih lanjut pada masing-masing
infomasi yang keluar.

Business Process Aplikasi

Secara sederhana gambar 6, menunjukkan aliran informasi yang menunjukkan proses bisnis dari aplikasi
web Aggregator.

Gambar 3.6 Deployment Diagram Aplikasi Web Aggregator

Berdasar pada arsitektur deployment pada gambar 6 maka dapat diungkapkan skenario aplikasi sebagai
berikut.
34 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

1. Pengguna membuka browser dan mengarahkan ke alamat aplikasi web Aggregator.

2. Aplikasi akan menampilkan halaman ASP.NET dari aplikasi Web Aggregator yang bersangkutan.
3. Pengguna memasukkan kata kunci pada borang yang telah di sediakan pada aplikasi.
4. Aplikasi akan melakukan komunikasi melalui web services berdasar pada masukan pengguna.
5. Pengguna menunggu hasil keluaran aplikasi.
6. Aplikasi akan memperoleh keluaran berupa komunikasi SOAP Web Services
7. Aplikasi memformat keluaran sehingga dapat ditampilkan pada antarmuka aplikasi web
aggregator
8. Pengguna akan melihat hasil dari kata kunci yang dimasukkan.

Skenario Aplikasi
“Pada beberapa buku software engineering yang mengacu pada
UML, bentuk baku dari skenario aplikasi adalah Use Case”

Bila digenerikkan lagi, secara sederhana komposisi aplikasi Web Aggregator dapat digambarkan seperti
pada gambar berikut.

Live Search
web
Amazon
Services
web
Services

Own Web
Services

Web Aggregator

Gambar 3.7 Komposisi Aplikasi Web Aggregator

Batasan Pengembangan Aplikasi

Pada H.O.L ini aplikasi yang dikembangkan adalah aplikasi yang masih bersifat functional prototype,
dalam artian aplikasi ini dapat berfungsi secara fungsional tetapi belum begitu sempurna dari tingkat
kedetailan dan aspek non fungsionalnya.
35 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

Pembuatan Project dan Rancangan Antarmuka Web Aggregator

Demi kemudahan mengikuti H.O.L ini dilahkan mengikuti langkah langkah pengembangan berikut.

1. Buat sebuah project aplikasi web dengan nama WebAggregator.

2. Demi kemudahan dan keseragaman pilih bahasa C# dan simpan pada FileSystem.
3. Visual Studio akan membuatkan struktur berkas dan project ASP.NET yang dibutuhkan.
4. Hapus berkas default.aspx, sehingga tidak terdapat satu halaman ASP.NET pun
5. Berikutnya tambahkan berkas Master Page, berkas ini adalah berkas template yang akan
dijadikan desain dasar untuk halaman-halaman yang terdapat pada aplikasi yang bersangkutan.
Pengguna dapat menambahkan berkas site.master melalui Project -> Add New Item. Pilih
Site.master pada jendela pemilihan new item

Gambar 3.8 Menambahkan Berkas Master Page

6. Beri nama dengan Site.Master adalah halaman khusus yang dapat diturunkan ke halaman
ASP.NET lainnya. Site.Master ibarat abstract class untuk antarmuka web pada ASP.NET

Site.Master

Default.aspx Others.aspx

Gambar 3.9 Master Page dan Content Page

7. Pada Site.Master lakukan pembuatan desain antarmuka web, Visual Studio ataupun Visual Web
Developer mendukung pembuatan antarmuka web yang mengikuti standard seperti XHTML
profile, dan accesibility access.

Menemukan Antarmuka Yang Standard

“Situs http://oswd.org memberi banyak template untuk aplikasi
web, selain gratis template di situs tersebut juga mengikuti
standar , dengan kata lain diyakini antarmukanya dapat konsisten
di berbagai browser”
36 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

8. Pada kesempatan ini pengguna menggunakan tamplate sederhana dengan tiga kolom pada
bagian isi. Snippet kode berikut akan membantu anda membuatnya.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs"

Inherits="WebResearch.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Web Aggregator</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="wrapper">
<div id="header">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="leftcolumn">
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Loading Result...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="centercolumn">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="rightcolumn">
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="footer">
<a href="http://jigsaw.w3.org/css-validator/validator">Valid CSS</a> :: <a
href="http://validator.w3.org/check">
Valid XHTML</a>
<br />
Copyright &copy; 2008 by Ridilabs :: Designed by: <a href="http://ridilabs.net"
title="free css templates and layouts">
37 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

OSWD.ORG</a>
</div>
</div>
</form>
</body>
</html>

9. Pada kode diatas tampak digunakan beberapa kontrol esensial yang mungkin bermanfaat pada
saat pengembangan aplikasi web. Tabel berikut menggambarkan control dan fungsinya.
Tabel 3.1 Kontrol ASP.NET pada halaman Site Master
Nama Kontrol Fungsi
ContentPlaceHolder Ibarat suatu ruang yang berperan sebagai ruang panel yang isinya akan
di-override pada bagian content page.
ScriptManager* Berupa kontrol utama pengelola halaman web yang menggunakan
teknologi AJAX
UpdatePanel* Kontrol yang memungkinkan daerah panel yang bersifat asinkron dari
sisi komunikasi update. Daerah didalam UpdatePanel bersifat
asinkron,sementara diluarnya akan menggunakan konsep render
seperti halaman aspx pada umumnya
UpdateProgress* Kontrol update progress berperan menotofikasi perubahan pada saat
terjadi komunikasi asinkron berlangsung antara client dan server

10. Server kontrol yang bertanda * adalah server kontrol yang baru dirilis pada ASP.NET 3.5. Server
kontrol ini juga dikenal dengan Server Kontrol yang didesain untuk Ajax.

ASP.NET Ajax
“Server kontrol Ajax sebenarnya bukanlah kontrol baru pada
ASP.NET. Sekitar tahun 2007, ASP.NET AJAX adalah paket kontrol
server yang terpisah dan dapat didownload secara gratis”

11. Pada kode tampak bahwa dibutuhkan berkas main.css sebagai standar tampilan antarmuka
cascading style sheet. Kode berikut menunjukkan berkas CSS yang digunakan pada aplikasi ini.

* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
}

img
{
padding: 3px;
border: solid 1px #e1e1e1;
}
38 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

img.floatTL
{
float: left;
margin-right: 1.3em;
margin-bottom: 1.0em;
margin-top: 0.5em;
}

blockquote{
font-family: monospace;
color: #838383;
padding: 15px;
border: 1px #d9d9d9 solid;}

#header {
border: 1px solid #ccc;
margin: 5px 5px 5px 5px;
padding: 4px;
height: 60px;
background-color: #C9C9BE;
background-image: url(images/img2.jpg);}

ul {
line-height: 180%;
}

ul {
margin-left: 0;
padding-left: 0;
list-style-position: inside;
}

#header p {
color: #5dff35;
float: left;
padding: 25px 0em 0px 0px;}

#header h1 {
float: left;
padding: 15px 0em 0px 20px;
font-size: 14px;
color: #5dff35;
}

#header h2 {
float: left;
padding: 25px 0em 0px 0px;
font-size: 11px;
font-weight: normal;
}

#header ul {
float: right;
margin: 0;
padding: 25px 0em 0px 0em;
list-style: none;
font-size: 11px;
}

#header li {
39 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

display: inline;
}

#header a {
display: block;
float: left;
height: 25px;
margin: 0 0 0 8px;
padding: 12px 20px 0 20px;
text-decoration: none;
font-weight: bold;
color: #ffb536
}

#header a:hover {
color: #5dff35;
}

#leftcolumn { /* Parent Wrapper for inside boxes */

margin: 0 5px 5px 5px;
display: inline; /* IE Hack */
width: 49%;
float: left;
min-height: 300px;
padding: 4px;
border: 1px solid #ccc;
background-color: #fff;
text-align: justify;}
* html #leftcolumn {height:300px} /* IE Min-Height Hack */

#leftcolumn h1{
color: #7059ff;
font-size: 18px;
text-indent: 10px;}

#leftcolumn h2{
color: #7059ff;
font-size: 16px;
text-indent: 10px;
border-top: 1px dashed;
padding-top: 5px;
margin-top: 10px;}

#centercolumn { /* Parent Wrapper for inside boxes */

border: 1px solid #ccc;

margin: 0px 5px 0px 0px;
display: inline; /* IE Hack */
padding: 4px;
width: 23%;
float: left;
min-height: 300px;
background-color: #f0f0f0;}
* html #centercolumn {height:300px} /* IE Min-Height Hack */

#centercolumn p{
text-align: justify;
}

#centercolumn h2{
40 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

color: #7059ff;
font-size: 14px;
text-indent: 10px;
border-top: 1px dashed;
padding-top: 5px;
margin-top: 10px;
}

#centercolumn img {
margin-left: 12%;}

#rightcolumn {
margin: 0 5px 0px 0px;
padding: 4px;
display: inline; /* IE Hack */
width: 21%;
float: left;
border: 1px solid #ccc;
background-color: #fff;
min-height: 300px;
}
* html #rightcolumn {height:300px} /* IE Min-Height Hack */

#rightcolumn h4{
font-size: 13px;
padding-top: 7px;
margin-top: 15px;
border-top: 1px solid;}

#rightcolumn ul, #rightcolumn li {

text-align:center;
list-style: none;
margin: 0;
padding: 0;
}

#rightcolumn a {
border-bottom: none;
color:#999999;
}

#rightcolumn h3{
text-align: center;
position:static;
}

#rightcolumn a:link, a:visited{

color:#999999;
}

#rightcolumn a:hover, a:active{

color:#5B8FBE;
}

#footer {
font-size: 10px;
background-color: #fff;
text-align: center;
margin: 10px 5px 5px 5px;
display: inline; /* IE Hack */
41 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

padding: 4px;
float: left;
width: 97.7%;
}

12. Berita gembiranya CSS dapat didesain dengan mudah tanpa harus melakukan pengkodean
secara manual. Visual Web Developer 2008 dan Visual Studio mendukung desain CSS yang
muktahir dengan bantuan CSS Outline, CSS Builder , dan juga CSS Properties. Berikut
menggambarkan fungsi dari masing-masing perangkat.
a. CSS Outline , berperan menampilkan hirarki CSS dalam bentuk tree.
b. CSS Builder, berperan menampilkan wiyasa atau petunjuk WYSIWYG yang dibutuhkan
dalam mengembangkan CSS.
c. CSS Properties, berupa dialog yang memudahkan pengguna untuk merubah nilai dari
suatu CSS.

Gambar 3.10 CSS Builder

Gambar dan hal yang terkait

“Pada berkas css ditemukan beberapa referensi yang mengacu
pada gambar, pembaca dapat menggunakan image sendiri atau
menggunakan gambar yang diperoleh pada saource code”

13. Menambahkan Gambar bukanlah hal yang sulit. Pada CSS tampak bahwa gambar berada di
lokasi /image/namaimage.jpg. Hal ini dapat dilakukan dengan menambahkan sebuah folder.
Pada visual Studio tambahkan sebuah folder melalui kontek menu pada Project (klik kanan) ->
Add Folder seperti pada gambar berikut.
42 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

Gambar 3.11 Menambahkan Folder

14. Berikutnya tambahkan image dengan cara menyalin secara langsung melalui copy paste ke
folder yang bersangkutan, atau melalui menu Existing Item. Sehingga akan tampak seperti
gambar berikut.

Gambar 3.12 Struktur Folder Gambar

15. Berikutnya akan ditambahkan content page. Content Page adalah halaman yang berisi isi sebuah
halaman web, secara struktural content page adalah halaman turunan dari halaman master
page. Pada Visual Studio pembuatan content page dapat dilakukan dengan memilih berkas
Master Page yang ada pada solution explorer, kemudian memilih kontek menu pada berkas
tersebut dan pilih Add Content Page.

Gambar 3.13. Konteks Menu Berkas Site.Master

16. Secara default penamaan dari content page adalah halaman dengan nama WebForm1.aspx,
rename berkas tersebut menjadi Default.aspx, dengan cara memilih konteks menu berkas yang
bersangkutan dan memilih rename.
17. Klik dua kali berkas Default.aspx, maka akan tampak kode berikut.

<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"

CodeBehind="Default.aspx.cs" Inherits="WebAggregator.WebForm1" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder3" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder4" runat="server">
</asp:Content>
43 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

18. Tampak terdapat kontrol yang dinamakan Content, kontrol ini adalah kontrol yang mengacu
pada kontrol ContentPlaceHolder, fungsinya sebagai panel yang dapat diisikan secara bebas
untuk tiap-tiap halaman content page dari master page. Fleksibilitas ini yang menghadirkan
konsitensi isi dan tata letak halaman menggunakan master page.

Tidak semua kontrol dapat diletakkan di content page

Kontrol seperti AJAX Control dan kontrol lain yang menggunakan
client script harap dihindari untuk diletakkan pada Content Page.
Walaupun kontrol tersebut tidak bermasalah pada saat
pemasangan dan build process tapi diyakini terdapat
permasalahan dari sisi prilaku script yang bersangkutan. Solusi
dari ini adalah meletakkan kontrol tersebut di master page.

19. Pemetaan dari tiap Content adalah sebagai berikut.

Gambar 3.12 Pemetaan Halaman Content

20. Berikutnya tambahkan kode berikut pada Content 1, sehingga akan tampak sebagai berikut.

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<h1>Web Aggregator | VWD 2008</h1>
</asp:Content>

21. Pada content 2 akan ditambahkan sebuah kotak masukan yang akan menerima masukan
penguna dalam memasukkan kata kunci yang hendak dimasukkan. Pada content 2 tambahkan
kode berikut.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">

<fieldset>
<legend>Search Here</legend>
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="Search"/>
</fieldset>
</asp:Content>
44 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

22. Pada bagian tersebut kita menambahkan satu buah tombol dan satu buah textbox yang
keduanya berada didalam filedset, Filedset adalah standar pada CSS untuk melakukan
pengelompokan antarmuka. Pernyataan runat server menandakan bahwa control tersebut akan
dirender oleh server sementara bagian yang lain adalah properties yang dibutukan agar kontrol
dapat ditampilkan sebagaimana mestinya.

ASP.NET Control Statement

“kontrol ASP dinyatakan dengan sintaksis
<asp:namacontrol></namacontrol>, namun demikian
menggunakan <asp:namacontrol /> juga diperbolehkan. PAda
sebuah ASP.NET control statement pengguna minimal
menambahkan properties untuk ID dan pernyataan rendering
melalui runat”

23. Pada Content 2 juga ditambahkan sebuah ListView. ListView adalah kontrol terbaru pada
ASP.NET 3.5 yang berperan mengikat data dan menampilkan data sesuai dengan keinginan dan
template pengguna. ListView dapat ditambahkan melalui kontrol ToolBox pada kategori Data.

Gambar 3.13 ListView pada ToolBox

Drag and Drop Rule

“Drag and Drop tidak harus pada mode design view, mode code
view pun dapat dilakukan drag and drop, cukup memilih kontrol
dan tarik ke tampilan kode”

24. Lakukan drag and drop dari toobox ke kode. Tambahkan sebuah fieldset dan ubah nama fieldset
yang bersangkutan menjadi ListViewResult sehingga akan tampak sebagai berikut.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">

45 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

<fieldset>
<legend>Search Here</legend>
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="Search"/>
</fieldset>
<fieldset>
<legend>Search Result</legend>
<asp:ListView ID="ListViewResult" runat="server">
</asp:ListView>
</fieldset>
</asp:Content>

25. Sebelum menggunakan LIstVIew pengembang wajib mengembangkan apa yang dinamakan
template. Template pada ListView terbagi menjadi beberapa bagian
a. LayoutTemplate, template utama berupa tag html yang merepresentasikan bagaimana
data ditampilkan secara keselurtuhan.
b. EmptyDataTemplate, template untuk data yang tidak ada
c. ItemTamplate, template utama berupa tag html yang menampilkan tiap-tiap data.
d. ItemSeparatorTemplate, template pemisah antara satu data yang satu dengan data
yang lain.
e. AlternatingTemplate, template data pembeda antara data yang satu dengan data yang
lain.
26. Semua template diatas ditambahkan pada bagian diantara ListView ASP.NET , walaupun secara
struktural ke empat template di atas tidak perlu berurut. Penambahan yang sesuai urutan akan
memudahkan dalam memahami kode. Pertama ditambahkan kode LayoutTemplate.

<asp:ListView ID="ListViewResult" runat="server">

<LayoutTemplate>
<ul ID="itemPlaceholderContainer" runat="server"
style="font-family: Verdana, Arial, Helvetica, sans-serif;">
<li ID="itemPlaceholder" runat="server" />
</ul>
<div style="text-align: center;background-color: #5D7B9D;font-family: Verdana,
Arial, Helvetica, sans-serif;color: #FFFFFF;">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button"
ShowFirstPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button"
ShowLastPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</div>
</LayoutTemplate>
</asp:ListView>
46 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

27. Pada layoutTemplate di atas tampak bahwa penambahan beberapa tombol dan juga template
List HTML ditambahkan. Kontrol DataPager berguna dalam mekanisme paging (pembagian
halaman) pada data yang cukup banyak.
28. Berikutnya ditambahkan empty data template, item separator template, dan juga
ItemTemplate.

<EmptyDataTemplate>
No data was returned.
</EmptyDataTemplate>
<ItemTemplate>
<li style="background-color: #E0FFFF;color: #333333;">
<br />
Judul:
<asp:Label ID="nameLabel" runat="server" Text=”” />
<br />
Deskripsi:
<asp:Label ID="descriptionsLabel" runat="server"
Text=”” />
<br />
Links:
<a href=”">Here</a>
<br />
</li>
</ItemTemplate>
<ItemSeparatorTemplate>
<br />
</ItemSeparatorTemplate>

29. Bagian utama yang tampak menarik untuk diperhatikan adalah keberadaan dari ItemTemplate.
ItemTemplate pada kode di atas ditambahkan sebuah list yang kerangkanya telah dideskripsikan
pada bagian layout. Pada kode di atas ditambahkan tiga buah kontrol asp.net yang berupa label
dan link. Tiga kontrol ini pada H.O.L bagian selanjutnya akan mengikat hasil dari web services.
30. Terakhir ditambahkan AlternatingItemTemplate sebagai berikut

<AlternatingItemTemplate>
<li style="background-color: #FFFFFF;color: #284775;">
<br />
Judul:
<asp:Label ID="nameLabel" runat="server" Text=”” />
<br />
Deskripsi:
<asp:Label ID="descriptionsLabel" runat="server"
Text=”” />
<br />
Links:
<a href="">Here</a>
<br />
</li>
</AlternatingItemTemplate>

31. AlternatingTemplate secara sederhana memiliki kesamaan dengan ItemTemplate, manfaat

ALternatingTemplate ini bertujuan memvariasikan tampilan antara data yang satu dengan yang
lain. Lebih mudahnya perhatikan gambar berikut.
47 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

Gambar 3.14 Makna Item dan AlternateItem

32. Berikutnya pada content 2 ditambahkan DataGridView , beri nama seperti pada kode berikut

<asp:GridView ID="GridViewBookList" runat="server" CellPadding="4"

ForeColor="#333333" GridLines="None">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />

</asp:GridView>

33. Untuk mengatur template dan format tampilan, dapat dilakukan melalui designer view. Hal yang
dilakukan adalah merubah view code ke designer. Pilih kontrol GridView yang bersangkutan
kemudian dilanjutkan dengan memilih smart tag seperti gambar berikut.

Gambar 3.15 Smart Tag dan GridView

34. Berikutnya dapat dilakukan Build untuk web site yang bersangkutan. Hal ini dapat dilakukan
dengan menekan tombol Shift+F5 atau memilih menu Build Solution. Tekan F5 maka halaman
default.aspx akan tampil seperti gambar berikut.
48 Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

Notifikasi Web Config

“Pada saat melakukan debugging pertamakali pengguna akan
dihadapkan untuk memodifikasi web.config agar mendukung
mekanisme debugging pada saat aplikasi web yang
dikembangkan ”

Gambar 3.16 Perancangan Antarmuka

35. Pada bagian berikutnya akan diintegrasikan antarmuka yang ada dengan web services Live
Search dan Amazon.
49 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

Web Aggregator Hands On Lab Bagian 2

“Pada bagian ini dikembangkan lebih aplikasi web Aggregator, khususnya tentang pengembangan logika
bisnis dan pengikatandata yang diperoleh dari web services amazon dan live search”

Sebelum Memulai
Sebelum memulai bagian ini diharapkan pembaca telah berhasil mengembangkan antarmuka yang telah
dikemukakan pada bab sebelumnya dan dapat mengeksekusinya hingga tampak halaman web utama
(default.aspx).

Pada bagian ini selain akan melakukan pengkodean aplikasi web, akan dilakukan pula penambahan web
reference untuk itu diharapkan apda saat melakukan Hand On Lab ini, pembaca terhubung dengan
internet.

Referensi Web Services pada Web Aggregator

Bentuk web reference adalah proxy class yang didesain untuk menangani mekanisme komunikasi antara
aplikasi web dengan web services yang dikonsumsi. Secara umum proxy class adalah class dengan
bahasa pemograman tertentu yang dibangkitkan dari WSDL sebuah web services. Peran proxy class
dapat dipahami pada mekanisme komunikasi web services sebagai berikut.

• Web Services dikembangkan dengan bahasa pemograman

tertentu
Web service • Web Services dipublikasikan dalam bentuk WSDL

• Proxy Class dibangkitkan dari berkas WSDL melalui perangkat

bantu pengkonversi wsdl -> kode
Proxy Class • Proxy Class direferensikan ke aplikasi pengkonsumsi web services

• Klien memanggil fungsi web services melalui proxy class

• Proxy class menjadi mediasi komunikasi yang berbasis XML dan
Web Services SOAP
Client

Gambar 4.1 Peran Kerja Proxy Class pada aplikasi Web Services
50 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

Penambahan Web Reference pada Live Search Web Services

1. Buka dialog penambahan web reference dengan cara memilih menu Web Site -> Add Web
Reference

Gambar 4.2 Penambahan Referensi Web memalui Add Web Reference

2. Akan tampil dialog penambahan web reference sebagai berikut.

Gambar 4.3 Dialog Web Reference Live Search

3. Ketikkan halaman web Live Search WSDL yakni

http://soap.search.msn.com/webservices.asmx?wsdl
4. Beri nama web reference dengan nama livesearch.

Penambahan Web Reference pada Amazon Web Services

1. Buka dialog penambahan web reference dengan cara memilih menu Web Site -> Add Web
Reference
2. Akan tampil dialog penambahan web reference sebagai berikut.
51 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

Gambar 4.4 Dialog Web Reference Amazon Web Services

3. Ketikkan halaman web Amazon Web Services WSDL yakni

http://webservices.amazon.com/AWSECommerceService/AWSECommerceService.wsdl?
4. Beri nama web reference dengan nama amazonews.

Lebih Dalam Tentang Web Reference

Web Reference yang telah ditambahkan akan tampil pada struktur folder project seperti pada gambar
berikut.

Gambar 4.5 Struktur Web Reference pada aplikasi Web Aggregator

Bila dieksplorasi lebih lanjut melalui explorer, maka sebenarnya web reference adalah metadata dari
sebuah web services yang dijabarkan sesuai dengan kebutuhan satndar komunikasi web ala Microsoft
.NET yang didalamnya terdiri dari

 WSDL
 Proxy Class
 Berkas komunikasi pengikatan data (.datasource)
 Berkas pemetaan ala DISCO (reference.map)
52 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

Gambar 4.6 Struktur Berkas pada Web Reference

Mekanisme Penyimpanan Informasi Autentifikasi Web Services

Pengaksesan informasi ke web services membutuhkan identifikasi unik. Pada bagian tiga telah
dikemukakan bahwa pada saat mengakses web services dibutuhkan beberapa informasi yang
dibutuhkan agar dapat mengakses web services tersebut sebagai contoh Live Search membutuhkan App
ID dan Amazon membutuhkan Key ID.

Informasi mengenai identifikasi unik tersebut dapat ditaruh pada kode, namun demikian ASP.NET
menyediakan cara yang lebih elegan dalam menyimpan infomasi yang bersifat unik dan penting ini.
ASP.NET memiliki suatu struktur mekanisme untuk penyimpanan informasi konfigurasi melalui berkas
terpisah yang dikenal dengan web.config

Config pada .NET

.NET menyediakan struktur konfigurasi yang sejenis baik untuk
aplikasi desktop maupun web. Perbedaannya secara signifikan
hanya terletak pada class yang menangani pembacaan
kongigurasi tersebut.

Berikut adalah informasi spesifik yang hendak kita simpan pada web.config

 Informasi autentifikasi live ID

 Informasi autentifikasi Amazon
 Informasi akses web services bila melalui proxy.

Berikut adalah langkah-langkah yang dilakukan untuk menambahkan informasi pada Web.config.

1. Buka berkas web.config.

2. Pada berkas halaman web.config temukan xml element berikut.

<appSettings/>
<connectionStrings/>

3. Buka elemen tag pada appsettings dan ubah menjadi sebagai berikut.

<appSettings>
<add key="proxy" value="xxxxxxx"/>
<add key="user" value="xxx"/>
53 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

<add key="password" value="xxxxx"/>

<add key="amazonWSID" value= "xxxxxxxxxxxxxxx"/>
<add key="associateTag" value = "xxx"/>
<add key="liveappid" value="xxxxxxxxxxxxxxxxxxxxx"/>
</appSettings>

<connectionStrings/>

4. Tabel berikut menggambarkan makna dari setiap key yang ada

Tabel 4.1 Kunci dan NIlai pada Application Settings

Key Deskripsi Contoh value
Proxy Alamat proxy untuk web http:// ridilabs.net:3128 atau
server yang membutuhkan 172.20.2.11:8080
Proxy seperti ISA atau SQUID
User Autentifikasi user untuk proxy, Asep
kosongkan bila tidak
digunakan
Password Password user untuk proxy, ******
kosongkan bila tidak
digunakan
amazonWSID ID amazon -
Associatetag Tag pencarian pada amazon. Mysearch, RightSearch, dsb
Isikan bebas sesuai dengan
keinginan pembaca
Liveappid Application ID Live Search -

5. Simpan berkas web.config dan yakinkan berkas xml yang bersangkutan well formed

Pengikatan Data melalui Web Services

Setelah menambahkan referensi web dari web services maka saatnya melakukan pengikatan hasil
pemanggilan web services. Konsep pengikatan data yang akan dilakukan dengan mekanisme sebagai
berikut.

Pemanggilan Web Service

Pengembalian hasil dalam bentuk

xml response

Pemetaan xml response menjadi tipe

data .NET

Gambar 4.7 Pengikatan Data Web Services

54 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

Pemetaan XML response dapat dilakukan dengan berbagai cara yakni menggunakan custom Business
Logic atau menggunakan tipe data yang mendukung koleksi dan pengikatan data seperti menggunakan
DataTable.

Berikut dikemukakan langkah-langkah yang dapat dilakukan untuk melakukan pengikatan data pada
project yang bersangkutan.

1. Tambahkan sebuah class dengan nama Agregator.cs. Hal ini dapat dilakukan dengan cara add
new item -> pilih class -> beri nama Aggregator.cs

Gambar 4.8 Penambahan Class

2. Visual Studio akan menampilkan berkas class pada solution explorer. Class ini akan menjadi class
yang berkomunikasi langsung dengan web services dan akan mengkonversi hasilnya menjadi
class .NET yang dalam hal ini akan diubah dalam bentuk datatable.

Datatable
”Datatable dapat dibayangkan suatu tabel database yang
disimpan pada memori. Selain memiliki kesamaan dari struktur
tabel yang disimpan secara fisik, datatable juga memberikan
kemampuan sinkronisasi antara tabel fisik yang tersimpan dalam
sistem berkas dengan yang disimpan dalam memori”
55 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

3. Pada class yang bersangkutan tambahkan sebuah method untuk memanggil web services ke
LIve Search sebagai berikut.

public static DataTable LiveDoSearch(string query)

{
MSNSearchService aSearch = new MSNSearchService();

// check if it use proxy like SQUID

string webProxy = WebConfigurationManager.AppSettings.Get("proxy");
if (webProxy.Length != 0)
{
string user = WebConfigurationManager.AppSettings.Get("user");
string passsword = WebConfigurationManager.AppSettings.Get("password");

WebProxy myProxy = new System.Net.WebProxy(webProxy, true);

myProxy.Credentials = new System.Net.NetworkCredential(user, passsword);
aSearch.Proxy = myProxy;
}

// request web services

SearchRequest sr = new SearchRequest();
SourceRequest[] srcr = new SourceRequest[1];
srcr[0] = new SourceRequest();
srcr[0].Source = SourceType.Web;
sr.Requests = srcr;
sr.CultureInfo = "en-us";
sr.Flags = SearchFlags.MarkQueryWords;
sr.Query = query;
sr.SafeSearch = SafeSearchOptions.Strict;

//identity
sr.AppID = WebConfigurationManager.AppSettings.Get("liveappid");
SearchResponse srsp = aSearch.Search(sr);

//convert result to native object

DataTable resultTable = new DataTable("ResultTable");
resultTable.Columns.Add("Title");
resultTable.Columns.Add("Descriptions");
resultTable.Columns.Add("URL");

foreach (SourceResponse item in srsp.Responses)

{
Result[] sourceResults = item.Results;
if (item.Total > 0)
{
foreach (Result sourceResult in sourceResults)
{
resultTable.Rows.Add(sourceResult.Title,
sourceResult.Description,sourceResult.Url);
}
}
}

return resultTable;
}
56 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

4. Kode di atas melakukan beberapa hal yakni menerima masukan berupa query string ke Live
Search web services dan mengembalikan dalam bentuk DataTable. Hal-hal yang dilakukan
adalah sebagai berikut
a. Melakukan pengesetan nilai query dan beberapa properties, seperti bahasa kata kunci,
dukungan safesearch, hingga app ID.
b. Mengirim sekumpulan properties dan kata kunci tersebut ke web services yang
bersangkutan.
c. Hasil dari Web Services berupa response diterima dalam variable tertentu (dalam hal ini
SearchResponse).
d. Variabel yang menyimpan hasil kemudian dipetakan ke dalam Datatable. DataTable
yang dibuat memetakan beberapa informasi yakni judul hasil pencarian, deskripsi hasil
pencarian, dan link hasil pencarian.
e. Nilai datatable kemudian dikembalikan sebagai keluaran method.

Safe Search
“Safe Search adalah properti yang digunakan untuk melakukan
filterisasi terhadap hasil keluaran dari Search Engine. Dukungan
Safe Search cukup baik dalam memfilter hasil search engine yang
mungkin tidak layak ditampilkan seperti yang terkait dengan
kekerasan. Pengguna dapat melakukan pengesetan properties
Safe Search secara fleksibel”

5. Pada class yang sama tambahkan method untuk memanggil web services Amazon. Berikut
adalah code untuk melakukan pemanggilan Web Services Amazon

public static DataTable AmazonDoSearch(string query)

{
string accessKeyID = WebConfigurationManager.AppSettings.Get("amazonWSID");
string associateTag = WebConfigurationManager.AppSettings.Get("associateTag");

AWSECommerceService amazoneService = new AWSECommerceService();

//if proxy enabled, set the web proxy for amazone services
string webProxy = WebConfigurationManager.AppSettings.Get("proxy");
if (webProxy.Length != 0)
{
string user = WebConfigurationManager.AppSettings.Get("user");
string passsword = WebConfigurationManager.AppSettings.Get("password");

WebProxy myProxy = new System.Net.WebProxy(webProxy, true);

myProxy.Credentials = new System.Net.NetworkCredential(user, passsword);
amazoneService.Proxy = myProxy;
}

//set up amazone service

ItemSearch isearch = new ItemSearch();
isearch.AWSAccessKeyId = accessKeyID;
isearch.AssociateTag = associateTag;
ItemSearchRequest ireq = new ItemSearchRequest();
ireq.Keywords = query;
57 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

ireq.SearchIndex = "Books";
ItemSearchRequest[] lreq = new ItemSearchRequest[1];
lreq[0] = ireq;
isearch.Request = lreq;

ItemSearchResponse iresp = amazoneService.ItemSearch(isearch);

//mapping objects
DataTable refTable = new DataTable();
refTable.Columns.Add("Image");
refTable.Columns.Add("Title");
refTable.Columns.Add("URL");

//Tampilkan hasil
Items[] itemsList = iresp.Items;
foreach (Items items in itemsList)
{
Item[] itemList = items.Item;
foreach (Item item in itemList)
{
WebAggregator.amazonews.Image img = item.SmallImage;
string title = item.ItemAttributes.Title;
string url = item.DetailPageURL;
refTable.Rows.Add((img == null ? @"~/images/def.png" : img.URL), title, url);
}
}

return refTable;
}

6. Kode di atas melakukan beberapa hal yakni menerima masukan berupa query string ke Amazon
web services dan mengembalikan dalam bentuk DataTable. Hal-hal yang dilakukan adalah
sebagai berikut
a. Melakukan pengesetan nilai query dan beberapa properties, seperti bahasa kata kunci,
dukungan safesearch, hingga app ID.
b. Mengirim sekumpulan properties dan kata kunci tersebut ke web services yang
bersangkutan.
c. Hasil dari Web Services berupa response diterima dalam variable tertentu (dalam hal ini
ItemSearchResponse).
d. Variabel yang menyimpan hasil kemudian dipetakan ke dalam Datatable. DataTable
yang dibuat memetakan beberapa informasi yakni judul hasil pencarian, URL hasil
pencarian, dan Image hasil pencarian.
e. Nilai datatable kemudian dikembalikan sebagai keluaran method.
7. Pada kode akses Web Services di Amazon dan Live Search tampak jelas bahwa terdapat rutin
yang sama dalam melakukan pengecekan proxy. Hal tersebut harus dihindari demi tercapainya
efisiensi dalam pemograman. Hal ini dikenal dengan konsep refactoring. Pengecekan proxy dan
pengesetan proxy dilakukan dengan mengeset proxy autentifikasi ke proxy class Web Services
yang bersangkutan. Hal yang menarik baik Amazon Proxy Class maupun Live Search keduanya
adalah turunan mendasar dari class SOAPHTTPClientProtocol.
58 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

System.Web.Services.Protocols.
SoapHttpClientProtocol

Amazon Live Search Others

Proxy Class Proxy Class Proxy Class

Gambar 4.9 Relasi antara Proxy Class pad .NET Web Services Class

8. Berdasar pada informasi di atas maka dapat dilakukan pembuatan method yang menerima
masukan SoapClientProtocol. Berikut adalah kode yang dapat ditambahkan pada class
Aggregator.

private static void Proxy(SoapHttpClientProtocol Service)

{
string webProxy = WebConfigurationManager.AppSettings.Get("proxy");
if (webProxy.Length != 0)
{
string user = WebConfigurationManager.AppSettings.Get("user");
string passsword = WebConfigurationManager.AppSettings.Get("password");

WebProxy myProxy = new System.Net.WebProxy(webProxy, true);

myProxy.Credentials = new System.Net.NetworkCredential(user, passsword);
Service.Proxy = myProxy;
}
}

9. Berikutnya pembaca dapat menghapus kode dibagian pengesetan proxy hingga sebagai berikut
(perhatikan yang bercetak tebal)

public static DataTable LiveDoSearch(string query)

{
MSNSearchService aSearch = new MSNSearchService();

Proxy(aSearch);

// request web services

SearchRequest sr = new SearchRequest();
SourceRequest[] srcr = new SourceRequest[1];
srcr[0] = new SourceRequest();
srcr[0].Source = SourceType.Web;
sr.Requests = srcr;
sr.CultureInfo = "en-us";
sr.Flags = SearchFlags.MarkQueryWords;
sr.Query = query;
sr.SafeSearch = SafeSearchOptions.Strict;

//identity
sr.AppID = WebConfigurationManager.AppSettings.Get("liveappid");
59 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

SearchResponse srsp = aSearch.Search(sr);

//convert result to native object

DataTable resultTable = new DataTable("ResultTable");
resultTable.Columns.Add("Title");
resultTable.Columns.Add("Descriptions");
resultTable.Columns.Add("URL");

foreach (SourceResponse item in srsp.Responses)

{
Result[] sourceResults = item.Results;
if (item.Total > 0)
{
foreach (Result sourceResult in sourceResults)
{
resultTable.Rows.Add(sourceResult.Title,
sourceResult.Description,sourceResult.Url);
}
}
}

return resultTable;
}

10. Hal tersebut juga berlaku pada Amazon Search

public static DataTable AmazonDoSearch(string query)

{
string accessKeyID = WebConfigurationManager.AppSettings.Get("amazonWSID");
string associateTag = WebConfigurationManager.AppSettings.Get("associateTag");

AWSECommerceService amazoneService = new AWSECommerceService();

//if proxy enabled, set the web proxy for amazone services
Proxy(amazoneService);

//set up amazone service

ItemSearch isearch = new ItemSearch();
isearch.AWSAccessKeyId = accessKeyID;
isearch.AssociateTag = associateTag;
ItemSearchRequest ireq = new ItemSearchRequest();
ireq.Keywords = query;
ireq.SearchIndex = "Books";
ItemSearchRequest[] lreq = new ItemSearchRequest[1];
lreq[0] = ireq;
isearch.Request = lreq;

ItemSearchResponse iresp = amazoneService.ItemSearch(isearch);

//mapping objects
DataTable refTable = new DataTable();
refTable.Columns.Add("Image");
refTable.Columns.Add("Title");
refTable.Columns.Add("URL");

//Tampilkan hasil
Items[] itemsList = iresp.Items;
foreach (Items items in itemsList)
60 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

{
Item[] itemList = items.Item;
foreach (Item item in itemList)
{
WebAggregator.amazonews.Image img = item.SmallImage;
string title = item.ItemAttributes.Title;
string url = item.DetailPageURL;
refTable.Rows.Add((img == null ? @"def.png" : img.URL), title, url);
}
}

return refTable;
}

11. Bila telah direfaktorisasi pengembang dapat melanjutkan melakukan pengikatan data hasil web
service yang dihasilkan ke dalam antarmuka yang telah dirancang. Pengikatan yang dilakukan
sebenanya adalah melakukan pengikatan data hasil web services ke kontrol yang bersangkutan
dalam hal ini LIstview akan diikat dengan data hasil web services dari LiveSearch sementara ,
hasil web services amazon akan diikat dengan DataGRidiew
12. Pada ListView yang telah dirancang modifikasi kodenya hingga tampak sebagai berikut.

<ItemTemplate>
<li style="background-color: #E0FFFF;color: #333333;">
<br />
Judul:
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("Title") %>' />
<br />
Deskripsi:
<asp:Label ID="descriptionsLabel" runat="server"
Text='<%# Eval("Descriptions") %>' />
<br />
Links:
<a href="<%# DataBinder.Eval(Container.DataItem, "URL") %>">Here</a>
<br />
</li>
</ItemTemplate>
<ItemSeparatorTemplate>
<br />
</ItemSeparatorTemplate>
<AlternatingItemTemplate>
<li style="background-color: #FFFFFF;color: #284775;">
<br />
Judul:
<asp:Label ID="nameLabel" runat="server" Text='<%# Eval("Title") %>' />
<br />
Deskripsi:
<asp:Label ID="descriptionsLabel" runat="server"
Text='<%# Eval("Descriptions") %>' />
<br />
Links:
<a href="<%# DataBinder.Eval(Container.DataItem, "URL") %>">Here</a>
<br />
</li>
</AlternatingItemTemplate>
61 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

13. Pernyataan DataBinder.Eval atau Eval adalah suatu perintah untuk melakukan pengikatan data
yang bersifat dinamis dalam hal ini data yang dihasilkan web services. Data yang diikat
diidentifikasi dengan cara menggunakan id dari masing masing kolom yang telah dikemukakan
pada class Agregator.
14. Hasil dari amazon web services juga diikat oleh daragridview. Berikut adalah kode yang
digunakan pada halaman default.aspx.

<asp:GridView ID="GridViewBookList" runat="server" CellPadding="4"

ForeColor="#333333" GridLines="None" AutoGenerateColumns="False">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<Columns>
<asp:HyperLinkField DataNavigateUrlFields="url" DataTextField="Title"
Text="Title" />
</Columns>
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />

</asp:GridView>

15. GridView di atas menggunakan sebuah kolom dan mengikat dua buah data yang ditampilkan
dalam sebuah Hyperlinks. Hal ini tampak jelas pada kode didalam GRidView yang
mengemukakan tag Columns yang didalamnya terdapat HyperLinkField.
16. Lakukan mekanisme build dan yakinkan tidak ada kesalahan.
17. Berikutnya dilakukan pengikatan data yang secara sederhana melakukan pemanggilan melalui
kode pada saat button search di klik. Lakukan

protected void btnSearch_Click(object sender, EventArgs e)

{
ListViewResult.DataSource =
Aggregator.LiveDoSearch(Server.HtmlDecode(txtSearch.Text));
ListViewResult.DataBind();

GridViewBookList.DataSource = Aggregator.AmazonDoSearch(txtSearch.Text);
GridViewBookList.DataBind();
}

18. Lakukan build (F6) kemudian ujikan aplikasi yang telah dibuat, dengan melakukan debugging
(F5)
62 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

Gambar 4.10 Aplikasi WebAggregator

19. Setelah menguji coba lakukan deployment atau distribusi aplikasi hal ini dapat dilakukan dengan
melakukan Copy WebSite yang dapat diakses melalui menu WebSite -> Copy Website

Gambar 4.11 Dialog Salin web Site

20. Pilih tombol Connect dan dialog gambar berikut, pilih sesuai dengan kebutuhan. Pada
kesempatan ini penulis memilih local IIS. Pilih Create New Web Application.
63 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

Gambar 4.12 Copy Web Site Dialog

21. Kemudian pilih open dan lakukan pemindahan berkas dengan menggunakan tombol sinkronisasi
berikut.

Gambar 4.13 Sinkronisasi Web

22. Dengan melakukan mekanisme demikian maka web telah siap diakses dengan alamat yang
bersangkutan. Bila pengguna menggunakan Visual Studio 2008 standard atau yang lebih tinggi
pengguna dapat melakukan berbagai alternatif seperti melakukan distribusi tanpa source code
(multi assembly), single assembly, dan melalui pemaketan project.
64 Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

Sebuah Penutup
Program diatas masih membutuhkan berbagai perbaikan atau fitur tambahan, misalkan kata kunci
pencarian yang bisa lebih dikembangkan (advance search), sebagai contoh mencari kata kunci untuk
jurnal juranal resmi (ACM, IEEE), pencarian expert consultant , dan sebagainya.

Penulis berharap dengan membaca ini pembaca dapat terinspirasi dan mengembangkan aplikasi web
yang bermanfaat bagi masyarakat sekitar.