jak-stik.ac.idjak-stik.ac.id/files/lpk/workshop_5_hari/modul_asp_net.docx · web viewkata tanpa...

Daftar Isi

Sebelum Memulai........................................................................................................................................1

Prakata.....................................................................................................................................................1

Ikon pada Modul 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

PrakataModul 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 modul 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.

Modul ini akan terbagi menjadi dua bagian yakni.

1.Visual Web Developer 2008 Overview2. H.O.L Visual Web Developer 2008

Setalah membaca modul 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 Modul IniPada modul ini anda menemukan tokoh dengan nama jebo, jebi akan memberikan informasi tambahan yang membuat anda mengeksplor lebih lanjut modul ini. Berikut adalah ikon jebo yang digunakan pada modul ini.

InformasiBerisi informasi yang selayaknya anda perhatikan demi kemudahan dan kelancaran penggunaan modul ini

ReferensiReferensi tambahan yang bersifat suplemen dari modul ini

Hindari IniBerisi informasi dan rekomendasi berbagai hal yang sebaiknya tidak dilakukan

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.NETASP.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 pemrograman 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. Lingkungan terkelola atau lebih dikenal dengan “managed environment”. Arsitektur lingkungan terkelola memberikan berbagai keuntungan pada teknologi pengembangan web ini di antaranya

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“

Others Runtime

i.e. ISAPI

ASP.NET Runtime

Web Pages

Web Server (IIS)

Application Domain

Web Services ConfigurationApplicatiuon

& Session Data

Gambar 1.1 Aplikasi ASP.NET


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


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

EkstensiBerkas .aspx

DeskripsiHalaman 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.NETGlobal.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 sisitampilan

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


Tabel 1.2 Berkas direktori yang terdapat pada ASP.NET

Nama DirektoriBin

Deskripsi 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 tertentuApp_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 ServicesWeb 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.


ASP.NET 3.5 What’s NewSebagai 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.NETIstilah 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 DeskripsiXMLHTTPRequest Objek yang berfungsi untuk melakukan panggilan

secara asinkronus melalui protokol HTTPXMLDocument Objek yang berfungsi untuk memparsing xml data

yang dikirim dan diterima oleh aplikasiJSON (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.


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

Tanpa AjaxPenguna membuka aplikasi web

Dengan AjaxPenguna membuka aplikasi web

Aplikasi web tampil dengan meload seluruh halaman secara sekaligus.

Teknologi Ajax memungkinkan web tampil perbagian dengan meload halaman dari satu

bagian ke bagian tertentu.Pada saat meload halaman yang bersangkutan

layar browser berwarna putih ataupun tidak lengkap dari dari sisi fungsional

Pada saat meload halaman yang bersangkutan layar browser akan menampilkan suatu label

notifikasi menunggu, dan bagian-bagian fungsional akan tampil perbagian.

Pengguna melakukan aksi yang membutuhkan aplikasi web melakukan perubahan state dan

pengiriman data

Pengguna melakukan aksi yang membutuhkan aplikasi web melakukan perubahan state dan

pengiriman dataPada saat aplikasi mengalami perubahan state dan

menampilkan data lain maka seluruh halaman akan di-render ulang

Pada saat aplikasi mengalami perubahan state dan menampilkan data lain maka halaman akan di-

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 KeteranganAJAX Server Control Berupa Non-UI control yang memudahkan

pengembang untuk menambahkan fasilitas Ajax pada aplikasi web.

AJAX Services Berupa layanan aplikasi yang akan terintegrasi


dengan mekanisme layanan seperti autentifikasi, profile, hingga membership.

AJAX Library Berisi kode Java script yang memungkinkanpengembang untuk mengembangkan aplikasi web berbasis Ajax tanpa campur tangan server control

Web Services Dukungan teknologi web services (WCF) dengankomunikasi 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 2008November 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.

1 0 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 2005Paket 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.

1 1 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 PenutupPada bagian ini telah dibicarakan berbagai teknologi yang terkait dengan modul ini. Pengguna akan memanfaatkan teknologi yang telah diungkapkan pada bagian ini dan menjadi dasar pada bagian modul 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.

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

Tour 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 MemulaiSebelum 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, silakan membukanya melalui start menu

Gambar 2.1 Microsoft Visual Web Developer 2008 Start menu

IDE Knowledge BaseIDE 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 DeskripsiStart 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 IDECSS Explorer Berisi navigasi struktural mengenai desain CSS yang akan dikembangkanData Source Berisi halaman yang menampilkan sumber data yang dapat diikat oleh aplikasiToolBoxBerisi sekumpulan control ASP.NET yang terbagi berdasar kategori aplikasiStyle Berisi navigasi terstruktur skin aplikasi


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


Membuat Project Web AplikasiProject 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 DeskripsiASP.NET Web Site Tipe project membuat aplikasi web dengan ASP.NETASP.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 FoundationsEmpty 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#.

Label1 Text Beban Hutang Label


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


Label2 Text Tingkat Bunga LabelLabel3 Text Lama Waktu LabelLabel4 Text Total Yang Dibayarkan LabeltxtHutang Text - TextBoxtxtBunga Text - TextBoxtxtWaktu Text - TextBoxtxtTotal Text - TextBoxbtnHitung 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 di bawah 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


Dibayarkan akan ditampilkan oleh program setelah pengguna menekan tombol Hitung. TotalYang 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 bulanLama 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

1 8

Setelah itu, tekan tombol Hitung, sehingga didapatkan jumlah total yang harus dibayarkan pada field terakhir. Lihat Gambar 2.11.

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 hutangPada bagian ini kita implementasikan rumus komputasi hitung hutang dengan melakukan komputasi terhadap variabel-variabel double yang kita miliki.

Menampilkan hasil ke textboxPada 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


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 FrameMetode 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 IFrameMetode ini hampir sama dengan hidden frame, perbedaannya hanya pada elemen yang digunakan yaitu IFrame, bukan Frame.

Objek XMLHttpRequestMetode 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:

Letakkan diposisi teratas dari semua komponen label atau teksbox yang menyusun form default HitungHutang. Lihat Gambar 2.13.


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


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


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.


Deployment ProjectUntuk 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 DeploymentDalam 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 StudioPilihan 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.

2 4

Untuk memilih tujuan penyalinan website, klik Connect. Lihat Gambar 2.21.


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


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.

2 6

Pada jendela WebSetup1, klik kanan lalu pilih Add > Project Output... Lihat Gambar 2.25.


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


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.


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.

2 9 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 yangdibutuhkan”

Sebelum MemulaiPada 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 ServicesPendaftaran 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.


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.

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


Gambar 3.2 Live Search

Interactive SDK

Pendaftaran Layanan Web Services AmazonAmazon, 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.


Gambar 3.3 Amazon Web Services

Setelah mengisi beberapa informasi yang dibutuhkan pengguna dapat mengaktifkan akun web servicesamazonnya 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

Berdasar pada arsitektur deployment pada gambar 6 maka dapat diungkapkan skenario aplikasi sebagai berikut.


Gambar 3.5 Access ID Amazon

Rencana Pengembangan Aplikasi

Business Statement AplikasiAplikasi 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 AplikasiSecara sederhana gambar 6, menunjukkan aliran informasi yang menunjukkan proses bisnis dari aplikasi web Aggregator.

Gambar 3.6 Deployment Diagram Aplikasi Web Aggregator

Amazon web

Services

Own Web Services

Live Search

web Services


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 Services7.Aplikasi memformat keluaran sehingga dapat ditampilkan pada antarmuka aplikasi web

aggregator8.Pengguna akan melihat hasil dari kata kunci yang dimasukkan.

Skenario Aplikasi“Pada beberapa modul software engineering yang mengacu padaUML, bentuk baku dari skenario aplikasi adalah Use Case”

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

Web Aggregator

Gambar 3.7 Komposisi Aplikasi Web Aggregator

Batasan Pengembangan AplikasiPada 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.

Default.aspx Others.aspx

Site.Master


Pembuatan Project dan Rancangan Antarmuka Web AggregatorDemi 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 pun5.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

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”


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:UpdatePanel></div><div id="rightcolumn">

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always"><ContentTemplate><asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">


</asp:UpdatePanel></div><div id="footer">

<a href="http://jigsaw.w3.org/css-validator/validator">Valid CSS</a> :: <ahref="http://validator.w3.org/check">

Valid XHTML</a><br />Copyright © 2008 by Ridilabs :: Designed by: <a href="http://ridilabs.net"

title="free css templates and layouts">


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 FungsiContentPlaceHolder 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 AJAXUpdatePanel* 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 saatterjadi 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;}

3 83 9 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 {

Bagian 3 – Web Aggregator Part 1 | Perancangan Antarmuka

4 0 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; }


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


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


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>


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

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


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.


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


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.


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

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.


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.

4 8

Gambar 4.1 Peran Kerja Proxy Class pada aplikasi Web Services

Web service

Web Services dikembangkan dengan bahasa pemograman tertentu

Web Services dipublikasikan dalam bentuk WSDL

Proxy Class dibangkitkan dari berkas WSDL melalui perangkat bantu pengkonversi wsdl -> kode

Proxy Class direferensikan ke aplikasi pengkonsumsi web servicesProxy Class

Web Services Client

Klien memanggil fungsi web services melalui proxy class Proxy class menjadi mediasi komunikasi yang berbasis XML

dan SOAP

4 9 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 MemulaiSebelum 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 AggregatorBentuk 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.


Penambahan Web Reference pada Live Search Web Services1.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 Services1.Buka dialog penambahan web reference dengan cara memilih menu Web Site -> Add Web

Reference2.Akan tampil dialog penambahan web reference sebagai berikut.


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

WSDLProxy ClassBerkas komunikasi pengikatan data (.datasource)Berkas pemetaan ala DISCO (reference.map)


Gambar 4.6 Struktur Berkas pada Web Reference

Mekanisme Penyimpanan Informasi Autentifikasi Web ServicesPengaksesan 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 IDInformasi autentifikasi AmazonInformasi 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"/>

Pemanggilan Web Service

Pengembalian hasil dalam bentuk xml response

Pemetaan xml response menjadi tipe data .NET

Gambar 4.7 Pengikatan Data Web Services


<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 SettingsKey Deskripsi Contoh valueProxy 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, Asepkosongkan 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 ServicesSetelah menambahkan referensi web dari web services maka saatnya melakukan pengikatan hasil pemanggilan web services. Konsep pengikatan data yang akan dilakukan dengan mekanisme sebagai berikut.


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”


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 SQUIDstring 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 servicesSearchRequest 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;

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

//convert result to native objectDataTable 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);

}}

}


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 servicesstring webProxy = WebConfigurationManager.AppSettings.Get("proxy");if (webProxy.Length != 0){


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

}

//set up amazone serviceItemSearch isearch = new ItemSearch(); isearch.AWSAccessKeyId = accessKeyID; isearch.AssociateTag = associateTag; ItemSearchRequest ireq = new ItemSearchRequest();


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

ItemSearchResponse iresp = amazoneService.ItemSearch(isearch);

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

//Tampilkan hasilItems[] 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);

}}

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.

5 8

Amazon Proxy Class

System.Web.Services.Protocols. SoapHttpClientProtocol

Live Search Proxy Class

Others Proxy Class

Bagian 4 – Web Aggregator Part 2 | Pengembangan Business Process

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


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


SearchResponse srsp = aSearch.Search(sr);

//convert result to native objectDataTable 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 serviceItemSearch 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 objectsDataTable refTable = new DataTable();refTable.Columns.Add("Image"); refTable.Columns.Add("Title"); refTable.Columns.Add("URL");

//Tampilkan hasil

6 0

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

r /> </li>

</AlternatingItemTemplate>


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


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

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)

6 2

20. Pilih tombol Connect dan dialog gambar berikut, pilih sesuai dengan kebutuhan. Pada kesempatan ini penulis memilih local IIS. Pilih Create New Web Application.


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


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.


Sebuah PenutupProgram 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.

jak-stik.ac.idjak-stik.ac.id/files/lpk/workshop_5_hari/modul_asp_net.docx · web viewkata tanpa...

Documents