Bagikan melalui

Bagian 1: Gambaran Umum dan Proyek Baru File>

oleh Jon Galloway

MVC Music Store adalah aplikasi tutorial yang memperkenalkan dan menjelaskan langkah demi langkah cara menggunakan ASP.NET MVC dan Visual Studio untuk pengembangan web.

MVC Music Store adalah implementasi penyimpanan sampel ringan yang menjual album musik secara online, dan mengimplementasikan administrasi situs dasar, rincian masuk pengguna, dan fungsionalitas ke cart belanja.

Seri tutorial ini merinci semua langkah yang diambil untuk membangun aplikasi sampel MVC Music Store ASP.NET. Bagian 1 mencakup Gambaran Umum dan Proyek Baru File>.

Gambaran Umum

MVC Music Store adalah aplikasi tutorial yang memperkenalkan dan menjelaskan langkah demi langkah cara menggunakan ASP.NET MVC dan Visual Web Developer untuk pengembangan web. Kami akan memulai dengan lambat, jadi pengalaman pengembangan web tingkat pemula baik-baik saja.

Aplikasi yang akan kita bangun adalah toko musik sederhana. Ada tiga bagian utama untuk aplikasi: belanja, checkout, dan administrasi.

Cuplikan layar menu gambaran umum A S P dot Net Music Store, dengan opsi untuk memilih genre atau dari pilihan pilihan teratas.

Pengunjung dapat menelusuri Album berdasarkan Genre:

Cuplikan layar menu pilihan album genre penyimpanan musik A S P dot Net yang menampilkan koleksi album dalam genre tertentu.

Mereka dapat melihat satu album dan menambahkannya ke kelir mereka:

Cuplikan layar jendela pemilihan album, memperlihatkan nama, genre, artis, dan harga album, dengan opsi untuk ditambahkan ke ke cart.

Mereka dapat meninjau kelir mereka, menghapus item apa pun yang tidak lagi mereka inginkan:

Cuplikan layar menu 'Tinjau ke cart Anda', dengan informasi harga total dan opsi untuk mengedit kelir atau checkout Anda.

Melanjutkan ke Checkout akan meminta mereka untuk masuk atau mendaftar untuk akun pengguna.

Cuplikan layar bilah menu Masuk, meminta pengguna untuk memasukkan nama pengguna dan kata sandi, selain opsi untuk mengklik tombol 'ingat saya'.

Cuplikan layar bilah menu Buat Akun Baru, yang meminta nama pengguna, alamat email, dan kata sandi yang berisi enam karakter atau lebih. Tombol daftar ada di bagian bawah layar.

Setelah membuat akun, mereka dapat menyelesaikan pesanan dengan mengisi informasi pengiriman dan pembayaran. Agar tetap sederhana, kami menjalankan promosi yang luar biasa: semuanya gratis jika mereka memasukkan kode promosi "GRATIS"!

Cuplikan layar yang menunjukkan opsi entri untuk informasi pengiriman dan pembayaran pembeli, dengan tempat penampung untuk memasukkan kode promo.

Setelah memesan, mereka melihat layar konfirmasi sederhana:

Cuplikan layar konfirmasi yang berterima kasih kepada pelanggan atas pesanan mereka dan berikan nomor pesanan.

Selain halaman yang berhadapan dengan pelanggan, kami juga akan membangun bagian administrator yang menampilkan daftar album tempat Administrator dapat Membuat, Mengedit, dan Menghapus album:

Cuplikan layar menu bagian administrator yang menampilkan daftar judul, artis, dan genre album yang dimiliki; dengan opsi untuk mengedit atau menghapus masing-masing opsi.

1. File -> Proyek Baru

Menginstal perangkat lunak

Tutorial ini akan dimulai dengan membuat proyek ASP.NET MVC 3 baru menggunakan Visual Web Developer 2010 Express gratis (yang gratis), dan kemudian kami akan secara bertahap menambahkan fitur untuk membuat aplikasi fungsi lengkap. Sepanjang jalan, kita akan membahas akses database, skenario posting formulir, validasi data, menggunakan halaman master untuk tata letak halaman yang konsisten, menggunakan AJAX untuk pembaruan dan validasi halaman, login pengguna, dan banyak lagi.

Anda dapat mengikuti langkah demi langkah, atau Anda dapat mengunduh aplikasi yang telah selesai dari MVC-Music-Store.

Anda dapat menggunakan Visual Studio 2010 SP1 atau Visual Web Developer 2010 Express SP1 (versi gratis Visual Studio 2010) untuk membangun aplikasi. Kita akan menggunakan SQL Server Compact (juga gratis) untuk menghosting database. Sebelum memulai, pastikan Anda telah menginstal prasyarat yang tercantum di bawah ini.

  • [Prasyarat Visual Studio Web Developer Express SP1]
  • [ASP.NET MVC 3 Tools Update]
  • [SQL Server Compact 4.0] - termasuk dukungan runtime dan alat

Membuat proyek MVC 3 ASP.NET baru

Kita akan mulai dengan memilih "Proyek Baru" dari menu File di Pengembang Web Visual. Ini memunculkan dialog Proyek Baru.

Cuplikan layar menu file Pengembang Web Visual yang memperlihatkan pilihan dan perintah keyboard potong pendek untuk membuat proyek baru.

Kita akan memilih grup Visual C# -> Templat Web di sebelah kiri, lalu pilih templat "ASP.NET Aplikasi Web MVC 3" di kolom tengah. Beri nama proyek Anda MvcMusicStore dan tekan tombol OK.

Cuplikan layar menu jendela Dialog Proyek Baru, menyediakan templat opsi aplikasi yang berbeda.

Ini akan menampilkan dialog sekunder yang memungkinkan kita untuk membuat beberapa pengaturan khusus MVC untuk proyek kita. Pilih berikut ini:

Templat Proyek - pilih Kosong

Lihat Mesin - pilih Razor

Gunakan markup semantik HTML5 - diperiksa

Verifikasi bahwa pengaturan Anda seperti yang ditunjukkan di bawah ini, lalu tekan tombol OK.

Cuplikan layar kotak dialog sekunder, memungkinkan pengguna memilih pengaturan yang berbeda untuk proyek mereka.

Ini akan membuat proyek kami. Mari kita lihat folder yang telah ditambahkan ke aplikasi kita di Penjelajah Solusi di sisi kanan.

Cuplikan layar jendela Penjelajah Solusi, setelah pembuatan proyek, yang memperlihatkan daftar folder yang telah ditambahkan ke aplikasi.

Templat Kosong MVC 3 tidak sepenuhnya kosong - templat menambahkan struktur folder dasar:

Tampilan cuplikan layar yang diperbesar dari daftar folder yang disebutkan di atas, menyoroti nama proyek yang dibuat.

ASP.NET MVC menggunakan beberapa konvensi penamaan dasar untuk nama folder:

Folder Tujuan
/Controller Pengontrol merespons input dari browser, memutuskan apa yang harus dilakukan dengannya, dan mengembalikan respons kepada pengguna.
/Pemandangan Tampilan menyimpan templat UI kami
/Model Model menyimpan dan memanipulasi data
/Konten Folder ini menyimpan gambar, CSS, dan konten statis lainnya
/Skrip Folder ini menyimpan file JavaScript kami

Folder ini disertakan bahkan dalam aplikasi Kosong ASP.NET MVC karena kerangka kerja MVC ASP.NET secara default menggunakan pendekatan "konvensi atas konfigurasi" dan membuat beberapa asumsi default berdasarkan konvensi penamaan folder. Misalnya, pengontrol mencari tampilan di folder Tampilan secara default tanpa Anda harus secara eksplisit menentukan ini dalam kode Anda. Tetap dengan konvensi default mengurangi jumlah kode yang perlu Anda tulis, dan juga dapat memudahkan pengembang lain untuk memahami proyek Anda. Kami akan menjelaskan konvensi ini lebih lanjut saat membangun aplikasi kami.

Berikutnya

  • Last updated on