WebParts merupakan ASP.NET server control yang terdapat pada ASP.NET mulai versi 2.0. Control ini digunakan untuk modularisasi konten sebuah web. Kalau anda sering melihat sebuah web portal, misalnya yahoo, maka pasti anda sudah dapat mengetahuinya. Di situs yahoo tersebut kita dapat melihat konten web yang dikategorikan kedalam beberapa topik / kelompok yang bersesuaian dengan tema yang dikandung oleh konten tersebut.
Di Windows Forms mungkin kita terbiasa dengan GroupBox untuk melakukan modularisasi kontrol. Meskipun sebenarnya di WebForms kita dapat melakukannya dengan Panel control atau dengan fieldset object. WebParts lebih dari sekedar container control, lebih dari itu dia memiliki fitur-fitur yang canggih, seperti merubah lokasinya, merubah content, menghubungkannya dengan webpart zone lainnya, dapat di minimize, di close, di restore, dsb.
Untuk keperluan develop kita dapat menggunakan SQL Server 2005 Express Edition sebagai tempat penyimpanan data user, membership, personalisasi, dsb. Secara default VS 2005 menggunakan database tersebut, meskipun kita bisa rubah setting konfigurasinya. Pada tutorial kali ini saya menggunakan VS 2008 Beta2, SQL Server 2005 Express SP2, Win Vista Business Edition.
Sebelumnya kita harus mengetahui terlebih dahulu mengenai User Instancing dan AutoAttach. SQL Server Express 2005 mempunyai fitur User Instancing (fitur ini hanya terdapat di versi Express saja). Fitur ini digunakan hanya untuk keperluan develop saja. Dengan fitur ini maka kita tidak harus secara eksplisit membuat user login yang diberikan hak akses untuk create database, baca dan manipulasi data. Sedangkan fitur AutoAttach akan melakukan attach database secara otomatis. String Koneksi yang digunakan dapat dilihat di file machine.config. Elemennya dapat anda lihat dibawah ini :
1: <connectionStrings>
2: <add name="LocalSqlServer"
3: connectionString="data source=.\SQLEXPRESS;
4: Integrated Security=SSPI;
5: AttachDBFilename=|DataDirectory|aspnetdb.mdf;
6: User Instance=true"
7: providerName="System.Data.SqlClient" />
8: </connectionStrings>
Di element tersebut terdapat atribut AttachDBFileName yang diisi dengan |DataDirectory|. Direktori tersebut nantinya akan diganti dengan folder App_Data yang ada di project. Jadi kita tidak perlu secara hard code menuliskan pathnya. Kalau nantinya web site tersebut akan dipindahkan ke production server atau di publish ke internet, maka koneksi string tersebut harus dirubah. Perubahan tersebut diantaranya yaitu dengan menghilangkan atribut AttachDBFileName yang diganti dengan "Initial Catalog" atau "Database" yang diisi dengan nama databasenya. Atribut lainnya yang harus dihapus yaitu User Instance. Dan tentunya "Integrated Security" diganti dengan "User ID" dan "Password" yang bersesuaian.
Pada tutorial kali ini saya akan menjelaskan dasar-dasar penggunaan WebParts. Agar user dapat melakukan kostumisasi WebPartZone maka terlebih dahulu user tersebut harus diauthentikasi sebelumnya. Jenis authentikasi di ASP.NET ada 4, yaitu :
- Windows
- Forms
- Passport
- None
Windows authentikasi lebih cocok digunakan untuk aplikasi web yang sifatnya lokal intranet. Kalau aplikasi web tersebut akan dipublish di internet maka tipe autentikasinya harus dirubah ke Forms. Sedangkan untuk Passport kita harus membelinya terlebih dahulu ke Microsoft. None autentikasi berarti tidak menggunakan autentikasi.
Ok...sekarang kita buat aplikasi web site lewat visual studio nya. Disini saya menggunakan VS 2008 Beta2 dengan target .net frameworknya yaitu versi 2.0. Langkah-langkahnya seperti dijelaskan berikut ini :
1. Cari toolbox dengan kategori WebParts. Drag n Drop WebPartManager control. Control ini merupakan kontrol yang harus di tambahkan pertama kali di web form. Fungsinya yaitu untuk memanage WebParts control yang ada. Kalau kita tempatkan control ini dibawah kontrol WebParts lainnya maka akan terjadi error.
2. Buat WebUserControl untuk ditempatkan di WebPartZone. WebPartZone tidak dapat digunakan untuk menempatkan kontrol lebih dari satu. Jadi kalau kita tambahkan lebih dari satu kontrol ke dalam sebuah web part maka akan dianggap sebagai WebPartZone yang terpisah. Oleh karena itu solusinya bisa menggunakan WebUserControl atau WebCustomControl. WebUserControl yang dibuat merupakan kontrol yang akan berisi link situs berita online dan daftar 5 produk yang memiliki harga termahal yang diambil dari database Northwind.
3. Untuk membuat situs berita online kita dapat menggunakan control BulletedList yang data source nya di set ke sebuah file xml yang berisi text beserta url. Buat file xml nya seperti ini :
1: <?xml version="1.0" encoding="utf-8" ?>
2: <Sites>
3: <site text="Detik"
4: url="http://www.detik.com" />
5: <site text="Okezone"
6: url="http://www.okezone.com" />
7: <site text="Republika"
8: url="http://www.republika.co.id" />
9: <site text="Pikiran Rakyat"
10: url="http://www.pikiran-rakyat.com" />
11: <site text="Media Indonesia"
12: url="http://www.mediaindonesia.com" />
13: </Sites>
atur kontrol BulletedList nya dengan menambahkan datasource beserta pengaturan properti lainnya :
4. Sekarang kita buat WebUserControl untuk menampilkan Top5ExpensiveProducts. Saya gunakan control DataList dengan data yang diambil dari database Northwind. Ketikkan SQL script seperti di bawah ini ketika pengaturan SQLDataSource nya :
5. Tambahkan sebuah kontrol DropDownlist ke webform dengan ListItem : "Browse" dan "Design". Kontrol ini nantinya digunakan untuk merubah letak atau posisi konten sebuah webpartzone. Jadi kita bisa merubah rubahnya secara runtime. Kemudian set properti AutoPostBack nya ke true, dan tambahkan kode ini di event SelectionIndexChanged DropDownlist sbb:
1: protected void DropDownList1_SelectedIndexChanged(
2: object sender, EventArgs e)
3: {
4: switch (DropDownList1.SelectedIndex)
5: {
6: case 0:
7: WebPartManager1.DisplayMode =
8: WebPartManager.BrowseDisplayMode;
9: return;
10: case 1:
11: WebPartManager1.DisplayMode =
12: WebPartManager.DesignDisplayMode;
13: return;
14: }
15: }
6. Tambahkan kedua WebUserControl yang sudah dibuat diatas kepada masing-masing webpartzone yang berbeda. Hasilnya di browser akan tampak seperti ini :
7. Untuk merubah judul konten sebuah webpartzone dilakukan dengan menambahkan atribut "title" pada kontrol yang bersangkutan. Hal tersebut valid karena kontrol yang berada di dalam sebuah webpartzone akan mewarisi member yang dimiliki oleh webpartzone.
1: <ZoneTemplate>
2: <uc1:SitusBerita title="Situs Berita Online"
3: ID="SitusBerita1" runat="server" />
4: </ZoneTemplate>
8. WebParts tersebut dapat di Minimize / Close / Restore, dan juga dapat kita pindahkan ke webpartzone lainnya dengan merubah mode displaynya ke design dengan melakukan drag n drop kontennya ke webpartzone lain. Mode Browse akan menampilkan webpartzone secara read-only.
Dengan webpart kita bisa berikan keleluasaan pada user untuk mengatur user preference. Pada artikel tutorial lainnya saya akan membahas mengenai kontrol WebParts lainnya. Bagaimana mengembalikan webpart yang sudah di close dengan menggunakan PageCatalogPart, penggunaan CatalogZone, dsb...c u on the next article :)