Membuat Proyek MVC ASP.NET Baru

oleh Microsoft

Unduh PDF

Ini adalah langkah 1 dari tutorial aplikasi "NerdDinner" gratis yang memandu cara membangun aplikasi web kecil, tetapi lengkap menggunakan ASP.NET MVC 1.

Langkah 1 menunjukkan kepada Anda cara menempatkan struktur aplikasi NerdDinner dasar.

Jika Anda menggunakan ASP.NET MVC 3, kami sarankan Anda mengikuti tutorial Memulai Dengan MVC 3 atau MVC Music Store .

NerdDinner Langkah 1: Proyek File-Baru>

Kita akan memulai aplikasi NerdDinner dengan memilih item menu File-New> Project dalam Visual Studio 2008 atau Visual Web Developer 2008 Express gratis.

Ini akan memunculkan dialog "Proyek Baru". Untuk membuat aplikasi MVC ASP.NET baru, kita akan memilih simpul "Web" di sisi kiri dialog lalu memilih templat proyek "ASP.NET MVC Web Application" di sebelah kanan:

Penting: Pastikan Anda telah mengunduh dan menginstal ASP.NET MVC - jika tidak, itu tidak akan muncul dalam dialog Proyek Baru. Anda dapat menggunakan V2 dari Microsoft Web Platform Installer jika Anda belum menginstalnya (ASP.NET MVC tersedia di bagian "Web Platform-Frameworks> and Runtimes").

Kita akan memberi nama proyek baru yang akan kita buat "NerdDinner" dan kemudian klik tombol "ok" untuk membuatnya.

Ketika kita mengklik "ok" Visual Studio akan memunculkan dialog tambahan yang meminta kita untuk secara opsional membuat proyek pengujian unit untuk aplikasi baru juga. Proyek pengujian unit ini memungkinkan kami membuat pengujian otomatis yang memverifikasi fungsionalitas dan perilaku aplikasi kami (sesuatu yang akan kami bahas nanti dalam tutorial ini).

Dropdown "Uji kerangka kerja" dalam dialog di atas diisi dengan semua templat proyek pengujian unit MVC ASP.NET yang tersedia yang diinstal pada komputer. Versi dapat diunduh untuk NUnit, MBUnit, dan XUnit. Kerangka kerja Pengujian Unit Visual Studio bawaan juga didukung.

Catatan: Visual Studio Unit Test Framework hanya tersedia dengan Visual Studio 2008 Professional dan versi yang lebih tinggi. Jika Anda menggunakan VS 2008 Standard Edition atau Visual Web Developer 2008 Express, Anda harus mengunduh dan menginstal ekstensi NUnit, MBUnit, atau XUnit untuk ASP.NET MVC agar dialog ini ditampilkan. Dialog tidak akan ditampilkan jika tidak ada kerangka kerja pengujian yang diinstal.

Kita akan menggunakan nama default "NerdDinner.Tests" untuk proyek pengujian yang kita buat, dan menggunakan opsi kerangka kerja "Visual Studio Unit Test". Ketika kita mengklik tombol "ok" Visual Studio akan membuat solusi untuk kita dengan dua proyek di dalamnya - satu untuk aplikasi web kita dan satu untuk pengujian unit kita:

Memeriksa struktur direktori NerdDinner

Saat Anda membuat aplikasi MVC ASP.NET baru dengan Visual Studio, aplikasi tersebut secara otomatis menambahkan sejumlah file dan direktori ke proyek:

ASP.NET proyek MVC secara default memiliki enam direktori tingkat atas:

Direktori	Tujuan
/Controller	Tempat Anda menempatkan kelas Pengontrol yang menangani permintaan URL
/Model	Tempat Anda menempatkan kelas yang mewakili dan memanipulasi data
/Pemandangan	Tempat Anda meletakkan file templat UI yang bertanggung jawab untuk merender output
/Skrip	Tempat Anda meletakkan file dan skrip pustaka JavaScript (.js)
/Konten	Tempat Anda menempatkan file CSS dan gambar, dan konten non-dinamis/non-JavaScript lainnya
/App_Data	Tempat Anda menyimpan file data yang ingin Anda baca/tulis.

ASP.NET MVC tidak memerlukan struktur ini. Bahkan, pengembang yang bekerja pada aplikasi besar biasanya akan mempartisi aplikasi di beberapa proyek untuk membuatnya lebih mudah dikelola (misalnya: kelas model data sering masuk dalam proyek pustaka kelas terpisah dari aplikasi web). Namun, struktur proyek default menyediakan konvensi direktori default yang bagus yang dapat kami gunakan untuk menjaga kekhawatiran aplikasi kami tetap bersih.

Ketika kami memperluas direktori /Controllers, kami akan menemukan bahwa Visual Studio menambahkan dua kelas pengontrol - HomeController dan AccountController - secara default ke proyek:

Saat memperluas direktori /Views, kami akan menemukan tiga sub-direktori - /Home, /Account dan /Shared – serta beberapa file templat di dalamnya juga ditambahkan ke proyek secara default:

Saat memperluas direktori /Content dan /Scripts, kita akan menemukan file Site.css yang digunakan untuk menata semua HTML di situs, serta pustaka JavaScript yang dapat mengaktifkan dukungan ASP.NET AJAX dan jQuery dalam aplikasi:

Ketika kami memperluas proyek NerdDinner.Tests, kami akan menemukan dua kelas yang berisi pengujian unit untuk kelas pengontrol kami:

File default yang ditambahkan oleh Visual Studio ini memberi kami struktur dasar untuk aplikasi kerja - lengkap dengan halaman beranda, halaman tentang halaman, halaman masuk/keluar/pendaftaran akun, dan halaman kesalahan yang tidak tertangani (semua kabel dan bekerja di luar kotak).

Menjalankan Aplikasi NerdDinner

Kita dapat menjalankan proyek dengan memilih item menu Debug-Start> Debugging atau Debug-Start> Tanpa Debugging :

Ini akan meluncurkan ASP.NET Web-server bawaan yang dilengkapi dengan Visual Studio, dan menjalankan aplikasi kami:

Di bawah ini adalah beranda untuk proyek baru kami (URL: "/") saat dijalankan:

Mengklik tab "Tentang" menampilkan halaman tentang (URL: "/Beranda/Tentang"):

Mengklik tautan "Masuk" di kanan atas membawa kami ke halaman Masuk (URL: "/Akun/Masuk")

Jika kami tidak memiliki akun login, kami dapat mengklik tautan register (URL: "/Account/Register") untuk membuatnya:

Kode untuk mengimplementasikan fungsionalitas home, about, dan logout/ register di atas ditambahkan secara default ketika kami membuat proyek baru kami. Kami akan menggunakannya sebagai titik awal aplikasi kami.

Menguji Aplikasi NerdDinner

Jika kita menggunakan Visual Studio 2008 versi Professional Edition atau yang lebih tinggi, kita dapat menggunakan dukungan IDE pengujian unit bawaan dalam Visual Studio untuk menguji proyek:

Memilih salah satu opsi di atas akan membuka panel "Hasil Pengujian" dalam IDE dan memberi kami status lulus/gagal pada 27 pengujian unit yang disertakan dalam proyek baru kami yang mencakup fungsionalitas bawaan:

Nanti dalam tutorial ini kita akan berbicara lebih lanjut tentang pengujian otomatis dan menambahkan pengujian unit tambahan yang mencakup fungsionalitas aplikasi yang kami terapkan.

Langkah Selanjutnya

Kita sekarang memiliki struktur aplikasi dasar. Sekarang mari kita buat database untuk menyimpan data aplikasi kita.

SebelumnyaBerikutnya