ASP.NET MVC 5 - [Part 03] Membuat View

Setelah kita berhasil membuat controller di ASP.Net MVC 5, maka langkah berikutnya adalah kita membuat membuat view untuk applikasi web. Berikut ini adalah langkah-langkah membuat view di ASP.Net MVC 5.


1. Membuka Controller
View sangat erat hubungannya dengan controller, karena view akan ditampilkan melalui controller. Controller akan mencari Action mana yang diminta oleh user, kemudian Action menampilkan view dan data sesuai dengan pemintaan dari pengguna. Pada tutorial ini kita sudah membuat controller bernama ProfileController dengan Action Index. Agar lebih jelas anda dapat melihat pada gambar berikut ini.



2. Menambahkan View
Setelah anda berhasil membuka controller ProfileController, silahkan klik kanan pada blok atau area action Index. Agar lebih jelas silahkan lihat gambar berikut ini.



3. Menentukan Jenis Templat View.
Setalah anda memilih menu Add View, maka anda disuguhkan dengan layar Add View. Pada tahap ini anda mengisi kolom masukan View Name dengan nama Action yakni Index dan kita pilih Template dengan Empy(without model). Agar lebih jelas anda dapat melihat gambar berikut ini.



Karena kita memilih Template Empty(without model) maka kolom input Model class dan Data context class tidak akan aktif. anda dapat melihat seperti gambar berikut ini.



4. Menentukan Layout Page.
Layout Page pada ASP.Net MVC 5 adalah halaman utama. Kenapa dikatakan halaman utama, karena View yang kita buat sebenarnya hanyalah bagian content saja. Sedangkan menu utama, sidebar, footer semua terletak pada halaman Layout Page. Untuk menggunakan Layout Page tertentu, anda dapat memilihnya pada saat membuat view. Klik tombol pilih .. pada kolom User a layout Page. Kemudian pilih layout page yang tersedia. Pada tutorial ini terletak di folder Views/Shared/_layout. Agar lebih jelas anda dapat melihat gambar berikut ini.



Kemudian klik tombol Add, maka file Index.cshtml akan ditambahkan oleh Visual Studio kedalam folder Views/Profile. Agar lebih jelas anda dapat melihat pada gambar berikut ini.



5. Memasukan kode HTML.
Pada dasarnya View adalah tampilan HTML biasa. Jika anda sudah terbiasa dengan kode HTML untuk membuat halaman web, maka anda tidak akan mengalami kesulitan. Mari kita tambahkan Index.cshtml dengan informasi profile sederhana. Agar lebih jelas anda dapat melihat gambar berikut ini.



6. Menampilkan ke web browser.
Untuk mengetahui hasil halaman HTML yang sudah kita buat, kita dapat menjalankan langsung lewat tombol Run yang ada di Visual Studio. Agar lebih jelas anda dapat melihat pada gambar berikut ini.



Karena yang aktif adalah halaman Index.cshtml dari folder View/Profile, maka automatis yang tampil pada halaman browser adalah Profile/index. Berikut adalah hasil viewnya.



Mudah bukan membuat view di ASP.Net MVC 5, semoga anda dapat mempraktekan toturial ini dengan mudah.


Terimakasih telah bersedia membaca tutorial ini, silahkan beri pendapat anda tentang tutorial ini dengan menulis komentar dibawah ini. ^_^