Belajar Visual Web

Section Targeting

noreply@blogger.com (Admin) — Mon, 21 Sep 2009 11:54:00 +0000

Probably the most effective way to ensure the crawlers read the keywords
you want to emphasize though is to use Section Targeting. This is a fantastic technique. By simply inserting a couple of lines of HTML code into your Web page, you can tell the crawler which parts of your site are the most important and ensure that you get ads relevant to that content.

The lines you want to use to emphasize particular sections of your Web page
are:



Section text.



The rest of the page won’t be ignored, but those particular lines will receive a heavier weighting. If you want to tell the crawlers to ignore particular sections, you can use these lines:



Section text.



You can highlight (and de-emphasize) as many or as few sections as you wish, but what you can’t do is use these instructions solely to highlight keywords. So you can’t put them around particular single words or phrases on your page and hope to see ads that relate only to those terms.

In fact, Google recommends that you highlight a sizeable portion of text — as much as 20 percent — for the targeting to be most effective. The result of targeting small amounts of text could be irrelevant ads, public service ads... or even a banning if you deliberately tried to bring up ads that have nothing to do with your site.

Section Targeting is probably most useful if you have a Web page that covers lots of different topics. So if you had a blog about MP3 players but had written an article about rap music for example, you could use Section Targeting to ensure that you didn’t lose ads about the music players to ads about rap music. Or you could tell the crawlers to ignore your readers’ comments and focus on your own entries.

And presumably, there’s nothing wrong with stuffing a paragraph with keywords related to your subject and telling the crawlers to focus on that section to ensure that your ads stay targeted.

It’s definitely something that you want to play with.

If there’s one problem with Section Targeting though, it’s that it can take up to two weeks before you see the results — the time it can take for the crawler to re-visit your page. So it’s not a fast process and that can make it a bit of a blunt tool. But it’s not blunt enough to be ignored.

Funny SEO Comics

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 05:00:00 +0000

SEO Tools : Website to Country

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 04:56:00 +0000

Description

Many people wonder why their websites dont rank well in Country specific Search Engines, most of the Search Engines (including Google) determines country of the website based on the physical location of the website's IP Address. You would probably rank well in a Country Specific Search Engine if your website is hosted in the same country.

This tools helps determine the Country in which the specified website is Hosted.

Website / Domain Name

SEO Tools : Keyword-Rich Domain Suggestion Tool

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 04:55:00 +0000

Description

Having a KEYWORD-RICH domain name is an important factor of Search Engine Optimization. Choosing the right domain could BOOST your search engine rankings.

This tools will suggest keyword rich domain names.

SEO Tools : URL Rewriting Tool

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 04:54:00 +0000

Description

Static URLs are known to be better than Dynamic URLs because of a number of reasons
1. Static URLs typically Rank better in Search Engines.
2. Search Engines are known to index the content of dynamic pages a lot slower compared to static pages.
3. Static URLs are always more friendlier looking to the End Users.

Example of a dynamic URL
http://www.widgets.com/product.php?categoryid=1&productid=10

This tool helps you convert dynamic URLs into static looking html URLs.

Example of the above dynamic URL Re-written using this tool
http://www.widgets.com/product-categoryid-1-productid-10.htm

Eg. http://www.widgets.com/product.php?categoryid=1&productid=10

SEO Tools : Website Keyword Suggestions

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 04:50:00 +0000

Description

The basis of ALL search engine rankings is keywords. Users enter keyphrases in Search Engines to get information they need, It is VERYimportant that you optimize for such keyphrases.

This tools tries to determine the theme of your website and provides keyword suggestions along with keyword traffic estimates.

SEO Tools : Keyword Playground

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 04:48:00 +0000

Description

The basis of ALL search engine rankings is keywords. Users enter keyphrases in Search Engines to get information they need, It is VERYimportant that you optimize for such keyphrases.

This tool provides you keyword suggestions and reports on their monthly search estimates.

SEO Tools : Domain Age Tool

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 04:47:00 +0000

Description

This tools displays the approximate age of a website on the Internet and allows you to view how the website looked when it first started.

It also helps you find out the age of your competitor's domains, older domains may get a slight edge in Search Engine Rankings.

This tools has been build using Archive's Wayback Machine.

SEO Tools : Domain Stats Tool

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 04:46:00 +0000

Description

This tool helps you get all kind of statistics of your competitor's domains.

The statistics include Alexa Taffic Rank, Age of the domains, Yahoo WebRank, Dmoz listings, count of backlinks and number of pages indexed in Search Engines like Google, Yahoo, Msn etc.
It will probably help you figure out why some of your competitors are ranking better than you.

SEO Tools : Check Yahoo WebRank

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 04:45:00 +0000

Description

Find out the Yahoo WebRank of your and your competitors websites.

Yahoo WebRank is basically a rank assigned to a URL by Yahoo on a scale of 0-10. It was introduced a couple of months ago as a Beta feature of the Yahoo toolbar, since it was an experimental feature it is no longer available as a part of their toolbar.
You can just search for "Yahoo WebRank" in your favorite SearchEngine to know more about it.

This tool help you evaluate the importance of a URL as perceived by Yahoo.

SEO Tools : Search Engine Friendly Redirect Checker

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 04:41:00 +0000

Description

A lot of us lose out on valuable search engine traffic due to incorrectly configuring our redirects.
It is very import that when a search engine comes to crawl your website it is able to follow any redirects you have set up.

Suppose you have a website http://www.foo.com and you create a redirect such that whenever any visitor types in the URL http://www.foo.com he is automatically redirected to http://www.foo.com/widgets/, If the Search Engine is not able to follow the redirect it would think that http://www.foo.com has NO contents, http://www.foo.com would end up ranking very badly in search engines.

This tools help you determine if the redirect you have created is Search Engine Friendly.

SEO Tools : Keyword Density Checker - Keyword Cloud

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 04:40:00 +0000

Decription

Keyword Cloud is a visual depiction of keywords used on a website, keywords having higer density are depicted in a larger fonts.
Ideally your main keywords should appear in larger fonts at the start of the cloud.

Keyword Density is the percentage of occurrence of your keywords to the text in the rest of your webpage.
It is important for your main keywords to have the correct keyword density to rank well in Search Engines.

This tool will crawl the given URL, extract text as a search engine would, remove common stop words and Analyze the density of the keywords.

SEO Tools : Backlink Summary

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 04:39:00 +0000

Description

This tool will give you a summary of your competitors backlinks.

SEO Tools : Backlink Builder

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 04:30:00 +0000

Description

Building Quality backlinks is one of the most important factors in Search Engine Optimization.
It is not enough just to have a lot of backlinks, it is the Quality of backlinks along with the Quantity that help you rank better in Search Engines.

A backlink could be considered as a Quality Backlink if
1. The Theme of the backlinking website is the same as your website.
2. It links to your website with the keyword (keyphrase) that you are trying to optimize for.

This tools searches for websites of the theme you specify that contain keyphrases like "Add link", "Add site", "Add URL", "Add URL", "Submit URL", "Add Article" etc. Most of the results could be quality potential backlinks.

SEO Tools : Anchor Text Analysis

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 04:25:00 +0000

Description

Quality backlinks is one of the most important factors in SEO.
It is not enough just to have a lot of backlinks, "it is the Quality of backlinks along with the Quantity that help you rank better in Search Engines".

A backlink could be considered as a Quality Backlink if :
1. It links to your website with the keyword (keyphrase) that you are trying to optimize for.
2. The Theme of the backlinking website is the same as your website.

This tools help you determine the backlinks of your website and link text used by your backlinks to Link to your wesbite.

SEO Tools : Search Engine Spider Simulator

noreply@blogger.com (Admin) — Mon, 06 Jul 2009 04:21:00 +0000

Description

A lot of Content and Links displayed on a webpage may not actually be visible to the Search Engines, example :

Flash based content, content generated through javascript, content displayed as images etc.

This tool Simulates a Search Engine by displaying the contents of a webpage exactly how a Search Engine would see it.

It also displays the hyperlinks that will be followed (read : crawled) by a Search Engine when it visits the particular web page.

Penutup

noreply@blogger.com (Admin) — Sat, 13 Jun 2009 07:49:00 +0000

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.

Pengikatan Data melalui Web Services (2)

noreply@blogger.com (Admin) — Sat, 13 Jun 2009 07:38:00 +0000

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.

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

18. Lakukan build (F6) kemudian ujikan aplikasi yang telah dibuat, dengan melakukan debugging (F5)

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

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

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

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.

Pengikatan Data melalui Web Services

noreply@blogger.com (Admin) — Sat, 13 Jun 2009 07:12:00 +0000

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.

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

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.

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

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.

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

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.

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

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

10. Hal tersebut juga berlaku pada Amazon Search

Mekanisme Penyimpanan Informasi Autentifikasi Web Services

noreply@blogger.com (Admin) — Sat, 13 Jun 2009 06:47:00 +0000

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

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.

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

4. Tabel berikut menggambarkan makna dari setiap key yang ada

Web Aggregator Hands On Lab Bagian 2

noreply@blogger.com (Admin) — Sat, 13 Jun 2009 06:24:00 +0000

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.

Gambar Peran Kerja Proxy Class pada aplikasi Web Services

Penambahan Web Reference pada Live Search 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.

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

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)

Pembuatan Project dan Rancangan Antarmuka Web Aggregator 3

noreply@blogger.com (Admin) — Sun, 03 May 2009 00:47:00 +0000

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.

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.

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.

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.

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.

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.

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

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.

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

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.

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.

35. Pada bagian berikutnya akan diintegrasikan antarmuka yang ada dengan web services Live Search dan Amazon.

Pembuatan Project dan Rancangan Antarmuka Web Aggregator 2

noreply@blogger.com (Admin) — Sun, 03 May 2009 00:30:00 +0000

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.

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.

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

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.

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.

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.

19. Pemetaan dari tiap Content adalah sebagai berikut.

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

Pembuatan Project dan Rancangan Antarmuka Web Aggregator

noreply@blogger.com (Admin) — Sun, 03 May 2009 00:10:00 +0000

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.

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

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

9. Pada kode diatas tampak digunakan beberapa kontrol esensial yang mungkin bermanfaat pad
saat pengembangan aplikasi web. Tabel berikut menggambarkan control dan fungsinya. Tabel 3.1 Kontrol ASP.NET pada halaman Site Master

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.

Rencana Pengembangan Aplikasi

noreply@blogger.com (Admin) — Sat, 02 May 2009 23:36:00 +0000

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 , menunjukkan aliran informasi yang menunjukkan proses bisnis dari aplikasi web Aggregator.

Gambar Deployment Diagram Aplikasi Web Aggregator

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

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.

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

Gambar Komposisi Aplikasi Web Aggregator