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 3
Author: Admin
| Posted at: Sunday, May 03, 2009 |
Filed Under:
Web Aggregator Hands On Lab
|
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment