Konsistensi dengan Master Pages dan CSS
Pada ASP.NET master page dan css adalah kunci dari konsistensi sebuah tampilan web. Untuk itu, mari kita tambahkan sebuah masterpages (DownloadSite.master) dengan mengakses menu website -> new item dan Gambar 5. akan tampil. Selain master pages, konsistensi juga dapat diwujudkan dengan menambah CSS.
Pertama, mari kita tambahkan content page untuk download, dengan nama DownloadForm.aspx. Pada halaman ini kita akan menambahkan:
ListView adalah kontrol baru di ASP.NET 3.5 dengan wajah dejavu, hal ini dikarenakan kontrol tersebut sama fleksibelnya dengan DetailsView dan kontrol pengikat data yang lain dalam hal interface representasi data. Berikut adalah langkah-langkah yang Anda ikuti untuk menambah ListView di web aplikasi kita:
Kita butuh sebuah ruang untuk menampilkan daftar berkas yang telah di-upload. Untuk itu, override ContentPlaceHolder-Bottom, tambahkan beberapa kontrol berikut:
GridView akan kita ikat dengan bantuan wizard yang ada. Gridview ini dapat menampilkan semua column yang terikat dengan database, namun demikian untuk kenyamanan informasi yang ditampilkan. Melakukan pengikatan Gridview hampir sama dengan apa yang telah kita lakukan di ListView, perbedaannya terletak pada mekanisme view yang dapat ditampilkan. Baik Anda diberi kebebasan untuk menampilkan informasi apa yang hendak ditampilkan, sebagai contoh penulis menampilkan informasi. Seperti pada Gambar 9.
Membuat Dataset dapat dilakukan dengan menambah dataset item pada dialog new item. Berkas dengan berekstensi (.xsd) ini akan melakukan pemetaan database yang kita miliki dengan kode C# yang di-generate otomatis. Tambahkan berkas dataset dengan nama dsDownload.xsd.
Pada halaman designer dataset tambahkan table Download-List dengan melakukan drag-drop dari Server explorer. VWD akan menampilkan beberapa opsi, membiarkannya secara default adalah saran penulis pada bagian ini.
Pada ASP.NET master page dan css adalah kunci dari konsistensi sebuah tampilan web. Untuk itu, mari kita tambahkan sebuah masterpages (DownloadSite.master) dengan mengakses menu website -> new item dan Gambar 5. akan tampil. Selain master pages, konsistensi juga dapat diwujudkan dengan menambah CSS.
Menambahkan Teknologi AJAX pada ASP. NET
Teknologi AJAX sudah secara default tertanam pada framework hal ini tidak membutuhkan kita secara eksplisit memasang dan mengonfigurasi dukungan AJAX pada website yang bersangkutan. Untuk menambahkan dukungan AJAX secara menyeluruh kita dapat menambahkan script berikut pada master pages kita.Desain Content Page Download
Setelah mendesain master page, berikutnya kita tambahkan halaman isi yang kita butuhkan. Untuk kemudahan HOL ini, mari kita tambahkan dua buah halaman.- Halaman Download.
- Halaman Upload.
![]() |
Tata letak Upload Document. |
- Sebuah ListView.
- Sebuah SQLdataSource.
ListView adalah kontrol baru di ASP.NET 3.5 dengan wajah dejavu, hal ini dikarenakan kontrol tersebut sama fleksibelnya dengan DetailsView dan kontrol pengikat data yang lain dalam hal interface representasi data. Berikut adalah langkah-langkah yang Anda ikuti untuk menambah ListView di web aplikasi kita:
- Tambahkan Custom Content di bagian tengah halaman (tepatnya di ContentPlaceHolderContent).
- Drag and drop ListView.
- Pada ListView smart tag pilih data source "New data source". ,
- Dialog pemilihan tipe data source akan muncul dan pilih Database.
- Beri nama database yang bresangkutan dengan nama Sql-DataSourceDownload.
- Pilih atau tambahkan koneksi ke database SQL Server yang mengacu pada database download yang telah kita buat. Beri nama downloadConnectionString.
- Pilih semua field kecuali id.
- VWD akan meng-generate default template berdasar pada masukan tersebut.
- Anda dapat juga mengubah template dengan memilih configure ListView pada smart tag kontrol yang bersangkutan.
- Berikutnya, mari kita tambahkan sebuah page dengan nama UploadForm.aspx. Override custom content di content-PlaxceHolderContent kemudian tambahkan kontrol kontrol sebagai berikut:
![]() |
Menampilkan Informasi di Grid View. |
GridView akan kita ikat dengan bantuan wizard yang ada. Gridview ini dapat menampilkan semua column yang terikat dengan database, namun demikian untuk kenyamanan informasi yang ditampilkan. Melakukan pengikatan Gridview hampir sama dengan apa yang telah kita lakukan di ListView, perbedaannya terletak pada mekanisme view yang dapat ditampilkan. Baik Anda diberi kebebasan untuk menampilkan informasi apa yang hendak ditampilkan, sebagai contoh penulis menampilkan informasi. Seperti pada Gambar 9.
Saatnya Pengodean Aplikasi
Setelah mendesain, kini saatnya kita melakukan pengodean. Sebuah cara yang sederhana adalah dengan memikirkan aplikasi kita dengan konteks pemikiran yang berlapis-lapis yang dibagi menjadi.- Presentation Layer -> telah kita buat tadi.
- Business Layer.
- Data Access Layer.
Membuat Business Layer Class
Aplikasi kita menangani tentang download dan upload berkas ini adalah berkas yang di-upload dan di-download. Berdasar pada informasi tersebut kita dapat mendesain class dengan nama Downloadltem. Anda dapat menambahkan class ini dengan memilih menu Add New Item pada konteks menu projects yang bersangkutan (silakan mengacu pada HOL versi penud di web).Membuat Data Access Layer
Membuat DAL dapat dengan mudah dilakukan dengan bantuan Dataset. Walaupun sering kali muncul pro-kontra tentang penggunaan dataset, mari kita ambil nilai positifnya yakni produktivitas. Sebagai catatan, penulis membuat web aplikasi ini sangat terbantu dengan VWD dan otomatisasi yang didukungnya bahkan menulis HOL ini memakan waktu tiga kali lebih lama daripada membuat web aplikasi yang dibuat.Membuat Dataset dapat dilakukan dengan menambah dataset item pada dialog new item. Berkas dengan berekstensi (.xsd) ini akan melakukan pemetaan database yang kita miliki dengan kode C# yang di-generate otomatis. Tambahkan berkas dataset dengan nama dsDownload.xsd.
Pada halaman designer dataset tambahkan table Download-List dengan melakukan drag-drop dari Server explorer. VWD akan menampilkan beberapa opsi, membiarkannya secara default adalah saran penulis pada bagian ini.
Finishing Touch
Kini saatnya merampungkan sedikit lagi pekerjaan kita untuk itu ikuti langkah-langkah sebagai berikut:- Rename berkas DownloadForm.aspx menjadi Default.aspx. Hal ini menjamin bahwa pengguna yang mengakses web aplikasi ini akan diarahkan ke bagian ini.
- Save, Solve the error and see