Membuat Master Pages Pada ASP.Net

Master Pages adalah desain dan tampilan web yang konsisten, bisa dipakai di semua webForm. Selain itu, master pages adalah halaman tunggal yang menangani struktur dari situs web Anda.

Kebanyakan situs Web sekarang ini memiliki elemen umum yang sama yang terdapat di keseluruhan atau sebagian besar halaman dalam project website anda. Elemen umum itu misalnya elemen header yang berada di atas, elemen navigasi yang berada di kiri, dan elemen footer yang berada di bawah halaman.
Contohnya seperti halaman web facebook. di situs facebook terdapat navigasi menu yang ada di atas halaman web maupun di kiri, halaman footer yang berisi iklan2, halaman kanan web itu terdapat iklan2. Sedangkan halaman tengah pada situs itu dapat berubah-ubah tergantung menu yang kita pilih. Nah, di halaman tengah itulah yang akan kita tempatkan contentPlaceHolder pada halaman Master Pages. Halaman Kanan, Kiri, Atas, dan bawah desainnya paten di semua halaman web.Desain halaman web yang paten dapat dibuat di master pages



Ketika bekerja dengan Master Pages, Anda akan membuat file .master yang merupakan template untuk referensi bagi subpage atau halaman isi/content page. Master Pages menggunakan ekstensi file .master, sedangkan halaman isi menggunakan ekstensi file .aspx



Master pages berisi kontrol ContentPlaceHolder. Di kontrol itu, kita dapat menambah berbagai macam kata-kata dan control-control toolbox di halaman .aspx yang sudah terpasang dengan master pages. INGAT!! ContentPlaceHolder yang ada di file .master jangan diisi kata-kata dan control-control toolbox jadi dibiarkan kosong.
Jika ingin melihat desain anda yang ada di file .master, jalankan dari file .aspx yang sudah terpasang dengan master pages.

Bagaimana cara menggunakan master pages? Berikut ini langkah-langkah membuat master pages :
1. Buat Project Website baru.
Pilih menu File, pilih New, Pilih WebSite. Kemudian pilih ASPNet WebSite.



2. Klik kanan pada project anda yang ada di Solution Explorer. Pilih Add New Item



3. Pilih Master Pages. Klik tombol Add

4. File .master telah terbuat, anda akan menjumpai ContentPlaceHolder di halaman master pages. Buat layout tabelnya di halaman desain master pages, caranya pilih menu Layout, pilih Insert Table, pilih template default yg telah disediakan oleh Microsoft Visual Studio yang anda inginkan atau setting row dan column-nya. Klik OK

5. Drag contentPlaceHolder ke salah satu sel yang ada di tabel yang telah anda buat sebelumnya. Kemudian Save file .master itu. Jika ingin mendesain tampilan tabel dapat dilakukan dengan cara klik kanan di salah satu sel, pilih "Style..."

6. Setelah file .master terbuat, klik kanan pada project anda yang ada di solution explorer. Pilih Add New Item, Pilih WebForm, centang "Select Master Page". Klik tombol Add. Pilih file master yang anda inginkan. Klik OK. Nah, Content1 yang ada di halaman .aspx yang akan diisi kata-kata ataupun control-control toolbox.



JANGAN RUN dari file .master tapi run dari file .aspx yang sudah konek dengan master pages

Form View pada ASP.Net

Form View merupakan salah satu data control yang terdapat di toolbox berfungsi untuk menampung dan menampung single record dari sebuah tabel pada data source.

FormView sering digunakan bersama control GridView untuk master/detail. Form View memiliki beberapa template yaitu :



- Item Template -> Template yang berisi format tampilan dari form view
- Footer Template -> Template yang menampilkan tulisan yang berada di bagian bawah tampilan dari form view. Tulisan yang berada di bawah itu biasanya berisikan tulisan nama perusahaan.
- EditItemTemplate -> Template yang berfungsi memanipulasi data/record yang ada di tampilan formview.
- HeaderTemplate -> Template yang menampilkan tulisan yang berada di bagian atas tampilan dari form view. Tulisan yang berada di bawah itu biasanya berisikan tulisan judul dari tampilan form view.
- PagerTemplate -> Template yang berfungsi menampilkan page yang ada di tampilan formview.

Bagaimana cara membuat formView ????
1. Drag Drop control FormView yang ada di toolbox data
2. Klik smartTags yang ada di di pojok kiri atas formView. Pilih (New DataSource) pada Choose Data Source jika kalian akan membuat query baru pada formView.
3. Setelah anda memilih (New Data Source), pilih database pada DataSource Configuration Wizard. Klik tombol OK.
4. Setelah langkah ketiga, pilih ConnectionString yang telah anda set sebelumnya. Jika ConnectionString belum anda set/belum anda buat, maka pilihlah nama database yang telah anda buat atau klik tombol New Connection. Setelah meng-klik tombol New Connection pilih Microsoft SQLServer Database File jika database anda diletakkan di komputer lokal, jika database anda diletakkan di server jaringan komputer maka anda memilih Microsoft SQLServer Database.
Setelah menset Connection Stringnya, klik tombol Next
5. pilih Specify Columns from a table or view jika anda ingin mengambil data dari salah satu tabel dalam bentuk query select. Jika anda ingin mengambil data dari beberapa tabel lakukanlah dengan join tabel atau melakukan perintah Insert, Update, Delete atau mengedit perintah select maka dilakukan cara memilih Specify a custom SQL Statement or Stored Procedure.
Langkah-langkah pada no 5 dilakukan ketika anda mengklik tombol Next pada langkah no 4
6. Klik Next setelah anda mengatur perintah SQL pada Configure Data SOurce.
7. Klik Finish. Jika anda ingin melihat data-datanya klik tombol Test Query.

FormView anda telah terbuat. Jika anda ingin memodifikasi data-data itu maka ganti template formView dari ItemTemplate menjadi EditItemTemplate. Setelah memilih EditItemTemplate, atur properties DefaultMode dari readOnly menjadi Edit atau Insert jika anda ingin melakukan editing data ke database atau menginputkan data yang ada di formView ke database.

Selamat Mencoba...Jika ada pertanyaan segera ditanyakan

Repeater dan DataList pada ASP.Net

Repeater dan Datalist merupakan salah satu dari control yang ada di TOOLBOX, berfungsi untuk menampung sejumlah record yang ada pada database.

Bedanya apa? Repeater merupakan control toolbox yang codingnya ditulis dengan menggunakan HTML jd seringkali qta ingin menginputkan data atau mengedit data qta harus mengetik source code HTML utk menampilkan record dari database.
Sedangkan, DataList merupakan control toolbox yang menampilkan record (yang ada pada database) secara otomatis tanpa menulis coding HTML ketika anda telah melakukan configure Data Source.



Di bawah ini merupakan petikan source code secara singkat tentang cara membuat repeater (sebelum coding source code di bawah ini, terlebih dahulu anda drag&drop control toolbox repeater ke dalam master page ato webForm. Setelah itu, anda klik control repeater itu 1x kmudian anda menuju source code HTML) :

asp: repeater="" server="">
Itemtemplate>
table>
tr>
td><%#Container.DataItem ("Ketik nama field yang ada pada tabel anda")%>
/td>/tr>
"/table>
"/ItemTemplate>
"/asp:repeater>

atau menggunakan cara lain yakni
mengcopy source code HTML pada DataList ke source code HTML pada control toolbox repeater. Contoh source code

Membuat Database Pada ASP.Net

Jika anda ingin menyimpan transaksi di web ato mungkin ingin tahu data-data transaksi maka anda harus membuat database.

Ada sebuah ilustrasi sederhana tentang database :
Ketika anda membeli makanan nasi goreng untuk dimakan di rumah maka anda harus membungkusnya di kertas coklat. Nasi goreng yang dibungkus itu akan dibuka lagi ketika kita akan memakannya di rumah. jadi bungkusan yang brisi nasi goreng tinggal dibuka kpn aja dimana pun anda berada....hehehe

Langkah-Langkah detail membuat database pada ASP.Net :



1. Buat project website baru (Klik File->Klik New Web Site->Pilih ASP.NET WebSite.Jika anda ingin mengganti nama project,pada bagian Location ganti nama website1 dengan nama project sesuai yg kalian inginkan (C:\...\WebSite1)->klik OK)

2. Pada Solution Explorer. Klik Kanan pada project anda->Pilih Add New Item -> Pilih SQL Database -> Ketik Nama Database sesuai yang kalian inginkan -> klik Add. Setelah itu, maka akan keluar perintah yang brisikan tentang "Would You Like To Place The Database in the 'App_Data' Folder?",Anda tekan tombol Yes. Atau Menggunakan Cara Yang Kedua Yaitu: Klik Kanan pada folder 'App_Data' -> pilih Add New Item -> pilih SQL Database. Beri Nama Database sesuai yang kalian inginkan -> Klik Add.
Maka Database Anda Telah Dibuat Silahkan Buat Tabel-Tabelnya beserta isi data-datanya pada window Server Explorer.

- Jika anda telah membuat database beserta isi sebelumnya, maka langkah yg harus kalian lakukan adalah : klik kanan pada folder App_Data -> Pilih Add Existing Item -> Carilah file database yang ada di direktori windows anda -> Klik Add

Mengapa harus ditempatkan di folder App_Data? Karena secara default ASP.Net telah menyiapkan folder khusus buat menyimpan file-file yg digunakan sebagai data sperti file MDF(SQL server), file XML, file MDB(Microsoft Access)

Membuat Menu Horizontal Pada ASP.Net 2.0

Ketika menampilkan struktur menu, tampilan default dari control Navigation Menu pada Toolbox adalah vertikal. Tapi bagaimana caranya mengubah tampilan menu secara horizontal seperti yang ada pada menu situs facebook.com??



Tampilan menu secara horizontal akan diperlukan terutama jika ingin menaruh menu tadi di sebelah atas atau di bagian header.

Berikut cara membuat menu secara horizontal.


1. Buat web project baru, klik File, pilih New, klik WebSite, kemudian pilih Empty Website atau ASP.Net Website

2. Tambahkan file SiteMap dengan cara klik menu File, pilih New File atau tekan kombinasi tombol Ctrl+N untuk menaruh file baru. Pilih template Site Map. Atau dengan cara klik kanan pada web project, klik add New Item, pilih SiteMap File. Beri nama File SiteMap, misal Web.sitemap.

3. Buat struktur menu dari file Web.sitemap tadi.

4. Tambahkan file xx.aspx dengan cara yang sama di atas(no 2), lalu pilih template Web Form. Beri nama Default.aspx.

5. Drag control navigasi Menu pada ToolBox, lalu letakkan pada halaman Default.aspx atau Web Form.

6. Klik tanda [segitiga] yang ada di sebelah kanan atas control Menu untuk memunculkan Smart Tag. Dari Smart Tag, pilih Choose Data Source, lalu pilih

7. Setelah muncul Data Source Configuration Wizard, pilih Site Map. Maka otomatis akan menampilkan root,node dari siteMap, control Menu akan mempunyai struktur menu yang dibuat di file site map sebelumnya.

8. Klik kanan pada control Menu, lalu pilih Properties untuk menampilkan properties dari control Menu tadi. Pilih property Orientation, ubah nilainya dari Vertical menjadi Horizontal. Lalu ubah nilai property StaticDisplayLevel dari 1 menjadi 2.

9. Lakukan proses debugging pada file Default.aspx dengan cara klik menu Debug, pilih Start Debugging atau tekan tombol F5. Akan keluar window berikut, pilih yang pertama untuk menaruh file Web.config baru pada project.

10. Setelah itu pada browser akan muncul menu yang tampil secara horizontal.

Dari Berbagai Sumber(http://dna.blogsome.com)

Multiple SiteMap

Ketika kita membuat sebuah situs, ada kalanya dalam sebuah situs kita ingin menggunakan struktur menu lebih dari satu. Kasus ini bisa terjadi jika kita ingin membedakan struktur menu untuk admin dengan struktur menu untuk member biasa. Atau bisa juga dalam satu halaman web ada dua atau lebih struktur menu yang digunakan.

Yang Menjadi permasalahannya, secara default,kita hanya boleh menggunakan satu file sitemap dengan nama Web.sitemap, tidak boleh menggunakan nama sitemap selain Web.sitemap.




Untuk mengatasinya, kita bisa menggunakan satu file sitemap saja dan beberapa file XML untuk struktur menu yang lain. Tapi gimana caranya??? agar tetap ingin menggunakan beberapa file sitemap untuk struktur menu.

Berikut caranya untuk menggunakan multiple sitemap dalam satu project web.

1. Buat web project baru, pilih Empty Web Site

2. Tambahkan file SiteMap dengan cara klik menu File, pilih New File atau tekan kombinasi tombol Ctrl+N untuk menaruh file baru. Pilih template Site Map atau klik kanan pada project anda, klik Add New Item, pilih SiteMap File. Beri nama file tadi, misal Web.sitemap.

3. Buat struktur menu dari file Web.sitemap tadi sesuai prmintaan

4. Setelah anda membuat struktur menunya maka buatlah file siteMap baru dengan cara yg sama seperti langkah no 2. Kemudian, Beri nama file itu, misal dengan nama Web2.sitemap

5. Buat struktur menu dari file Web.sitemap tadi sesuai prmintaan

6. Lakukan proses run dengan cara klik menu Debug, pilih Start Debugging atau tekan tombol F5 atau tekan tombol Ctrl+F5. Akan keluar sebuah window yang mempunyai dua pilihan, pilih yang pertama untuk menaruh file Web.config baru pada project.

7. Setelah muncul file Web.config masukkan syntax XML berikut dalam file Web.Config di antara tag … .







name="TesSiteMapProvider1"
type="System.Web.XmlSiteMapProvider"
siteMapFile="Web.sitemap" />
name=" TesSiteMapProvider2"
type="System.Web.XmlSiteMapProvider"
siteMapFile=" Web2.sitemap" />






8. Setelah anda mengcopy source diatas, maka anda harus membuat web form baru. Beri nama webForm itu terserah.

9. Drag Kontrol Navigasi yang berupa TreeView atau Menu pada Toolbox, Masukkan kontrol navigasi itu ke dalam WebForm

10. Klik tanda [segitiga] di sebelah kanan atas control Menu atau TreeView untuk memunculkan Smart Tag. Dari Smart Tag. Dari Smart Tag, pilih Choose Data Source, lalu pilih . Ketik nama SiteMap DataSource itu

11. Setelah muncul Data Source Configuration Wizard, pilih Site Map. Maka secara otomatis, Menu atau TreeView akan mempunyai struktur menu yang dibuat di file site map sebelumnya.

12. Setelah itu akan muncul control SiteMapDataSource di bawah control TreeView atau Menu. Klik kanan pada control SiteMapDataSource, lalu pilih Properties untuk menampilkan properties dari control tadi. Lalu, masukkan nama provider dari file site map tadi pada SiteMapProvider untuk menampilkan struktur menu yang ada. Misal, jika ingin menggunakan file Web1.sitemap, maka panggil TesSiteMapProvider1, jika ingin menggunakan file Web2.sitemap, maka panggil TesSiteMapProvider2. Nama TesSiteMapProvider1 atau TesSiteMapProvider2 sesuai dengan nama yang dimasukkan di Web.config

13. Lakukan proses debugging dengan cara klik menu Debug, pilih Start Debugging atau tekan tombol F5 atau tekan tpmbol Ctrl+5pada Default.aspx untuk melihat hasilnya.

Dari Berbagai Sumber