Bagikan melalui

Bagian 1: File-> Proyek Baru

  • Artikel

oleh Joe Stagner

Tailspin Spyworks menunjukkan betapa sangat sederhananya membuat aplikasi yang kuat dan dapat diskalakan untuk platform .NET. Ini menunjukkan cara menggunakan fitur baru yang hebat di ASP.NET 4 untuk membangun toko online, termasuk belanja, checkout, dan administrasi.

Seri tutorial ini merinci semua langkah yang diambil untuk membangun aplikasi sampel Tailspin Spyworks. Bagian 1 mencakup Gambaran Umum dan File/Proyek Baru.

Gambaran Umum

Tutorial ini adalah pengantar ASP.NET WebForms. Kami akan memulai dengan lambat, jadi pengalaman pengembangan web tingkat pemula baik-baik saja.

Aplikasi yang akan kita bangun adalah toko on-line sederhana.

Cuplikan layar yang memperlihatkan toko online sederhana.

Pengunjung dapat menelusuri Produk berdasarkan Kategori:

Cuplikan layar yang menunjukkan bahwa pengunjung dapat menelusuri produk berdasarkan kategori.

Mereka dapat melihat satu produk dan menambahkannya ke kelir mereka:

Cuplikan layar yang menunjukkan bahwa pengunjung dapat melihat satu produk dan menambahkannya ke ke cart mereka.

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

Cuplikan layar yang menunjukkan bahwa pengunjung dapat meninjau ke cart mereka dan menghapus item yang tidak lagi mereka inginkan.

Melanjutkan ke Checkout akan meminta mereka untuk

Cuplikan layar yang memperlihatkan perintah untuk masuk saat checkout.

Cuplikan layar yang memperlihatkan perintah untuk membuat akun baru saat checkout.

Setelah memesan, mereka melihat layar konfirmasi sederhana:

Cuplikan layar yang memperlihatkan layar konfirmasi.

Kita akan mulai dengan membuat proyek ASP.NET WebForms baru di Visual Studio 2010, dan kita akan secara bertahap menambahkan fitur untuk membuat aplikasi yang berfungsi lengkap. Sepanjang jalan, kita akan membahas akses database, tampilan daftar dan kisi, halaman pembaruan data, validasi data, menggunakan halaman master untuk tata letak halaman yang konsisten, AJAX, validasi, keanggotaan pengguna, dan banyak lagi.

Anda dapat menggunakan Visual Studio 2010 atau Visual Web Developer 2010 gratis dari https://www.microsoft.com/express/Web/. Untuk membangun aplikasi, Anda dapat menggunakan SQL Server atau SQL Server Express gratis untuk menghosting database.

File / Proyek Baru

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

Cuplikan layar yang memperlihatkan layar Proyek Baru.

Kita akan memilih grup Visual C# / Web Templates di sebelah kiri, lalu pilih templat "ASP.NET Web Application" di kolom tengah. Beri nama proyek Anda TailspinSpyworks dan tekan tombol OK.

Cuplikan layar yang memperlihatkan tempat untuk memberi nama proyek Anda.

Ini akan membuat proyek kami. Mari kita lihat folder yang disertakan dalam aplikasi kita di Penjelajah Solusi di sisi kanan.

Cuplikan layar yang memperlihatkan folder yang muncul saat Anda membuat proyek.

Solusi Kosong tidak sepenuhnya kosong - menambahkan struktur folder dasar:

Cuplikan layar yang memperlihatkan struktur folder dasar.

Perhatikan konvensi yang diterapkan oleh templat proyek default ASP.NET 4.

  • Folder "Akun" mengimplementasikan antarmuka pengguna dasar untuk ASP. Subsistem keanggotaan NET.
  • Folder "Skrip" berfungsi sebagai repositori untuk file JavaScript sisi klien dan file .js jQuery inti disediakan secara default.
  • Folder "Gaya" digunakan untuk mengatur visual situs web kami (Lembar Gaya CSS)

Ketika kami menekan F5 untuk menjalankan aplikasi kami dan merender halaman default.aspx, kami melihat yang berikut ini.

Cuplikan layar yang memperlihatkan aplikasi saat Anda menekan F 5.

Penyempurnaan aplikasi pertama kami adalah mengganti file Style.css dari templat WebForms default dengan kelas CSS dan file gambar terkait yang akan merender astetika visual yang kami inginkan untuk aplikasi Tailspin Spyworks kami.

Setelah melakukannya, halaman default.aspx kami dirender seperti ini.

Cuplikan layar yang memperlihatkan bagaimana halaman default dirender.

Perhatikan tautan gambar di kanan atas halaman dan item menu yang telah ditambahkan ke halaman master. Hanya tautan "Masuk" dan "Akun" yang menunjuk ke halaman yang ada (dihasilkan oleh templat default) dan halaman lainnya yang akan kami terapkan saat membangun aplikasi kami.

Kita juga akan memindahkan Halaman Master ke direktori Gaya. Meskipun ini hanya preferensi, ini dapat membuat segalanya sedikit lebih mudah jika kita memutuskan untuk membuat aplikasi kita "dapat dikuliti" di masa depan.

Setelah melakukan ini, kita harus mengubah referensi halaman master di semua file .aspx yang dihasilkan oleh halaman ASP.NET WebForms default.

Berikutnya