Membuat Proyek

oleh Erik Reitan

Seri tutorial ini akan mengajari Anda dasar-dasar membangun aplikasi ASP.NET Web Forms menggunakan ASP.NET 4.5 dan Microsoft Visual Studio Express 2013 untuk Web. Proyek Visual Studio 2013 dengan kode sumber C# tersedia untuk menyertai seri tutorial ini.

Dalam tutorial ini Anda akan membuat, meninjau, dan menjalankan proyek default di Visual Studio, yang akan memungkinkan Anda untuk terbiasa dengan fitur-fitur ASP.NET. Selain itu, Anda akan meninjau lingkungan Visual Studio.

Yang akan Anda pelajari:

• Cara membuat proyek Formulir Web baru.
• Struktur file proyek Formulir Web.
• Cara menjalankan proyek di Visual Studio.
• Berbagai fitur aplikasi formulir Web default.
• Beberapa dasar tentang cara menggunakan lingkungan Visual Studio.

Membuat Proyek

1. Buka Visual Studio.

2. Pilih Proyek Baru dari menu File di Visual Studio.

   

3. Pilih grup Templat ->Visual C# ->Templat web di sebelah kiri.

4. Pilih templat aplikasi web ASP.NET di kolom tengah.
   Seri tutorial ini menggunakan .NET Framework 4.5.2.

5. Beri nama proyek Anda WingtipToys dan pilih tombol OK .

   

   Catatan

   Nama proyek dalam seri tutorial ini adalah WingtipToys. Disarankan agar Anda menggunakan nama proyek yang tepat ini sehingga kode yang disediakan di seluruh seri tutorial berfungsi seperti yang diharapkan.

6. Klik tombol Ubah Autentikasi . Pilih Akun Pengguna Individual dan klik tombol OK .

7. Pilih templat Formulir Web dan klik tombol OK .

   

Proyek ini akan memakan waktu sedikit untuk dibuat. Setelah siap, buka halaman Default.aspx .

Anda dapat beralih antara tampilan Desain dan tampilan Sumber dengan memilih opsi di bagian bawah jendela tengah. Tampilan desain menampilkan ASP.NET halaman Web, halaman master, halaman konten, halaman HTML, dan kontrol pengguna menggunakan tampilan near-WYSIWYG. Tampilan sumber menampilkan markup HTML untuk halaman Web Anda, yang bisa Anda edit.

Tip

Memahami kerangka kerja ASP.NET

ASP.NET Web Forms memungkinkan Anda membangun situs web dinamis menggunakan model seret dan letakkan yang sudah dikenal. Permukaan desain dan ratusan kontrol dan komponen memungkinkan Anda membangun situs berbasis UI yang canggih dan kuat dengan akses data dengan cepat. Wingtip Toy Store didasarkan pada ASP.NET Web Forms, tetapi banyak konsep yang Anda pelajari dalam seri tutorial ini berlaku untuk semua ASP.NET.

ASP.NET menawarkan empat kerangka kerja pengembangan utama:

• ASP.NET Web Form
  Kerangka kerja Formulir Web menargetkan pengembang yang lebih suka pemrograman deklaratif dan berbasis kontrol, seperti Microsoft Formulir Windows (WinForms) dan WPF/XAML/Silverlight. Ini menawarkan model pengembangan berbasis desainer WYSIWYG, sehingga populer di kalangan pengembang yang mencari lingkungan pengembangan aplikasi cepat (RAD) untuk pengembangan web. Jika Anda baru menggunakan pemrograman web dan terbiasa dengan alat pengembangan klien Microsoft RAD tradisional (misalnya, untuk Visual Basic dan Visual C#), Anda dapat dengan cepat membangun aplikasi web tanpa memiliki pengalaman dalam HTML dan JavaScript.
• ASP.NET MVC
  ASP.NET MVC menargetkan pengembang yang tertarik dengan pola dan prinsip seperti pengembangan berbasis pengujian, pemisahan kekhawatiran, inversi kontrol (IoC), dan injeksi dependensi (DI). Kerangka kerja ini mendorong pemisahan lapisan logika bisnis aplikasi web dari lapisan presentasinya.
• Halaman WEB ASP.NET
  ASP.NET Web Pages menargetkan pengembang yang menginginkan cerita pengembangan web sederhana, di sepanjang baris PHP. Dalam model Halaman Web, Anda membuat halaman HTML lalu menambahkan kode berbasis server ke halaman untuk mengontrol secara dinamis bagaimana markup tersebut dirender. Halaman Web dirancang khusus untuk menjadi kerangka kerja yang ringan, dan ini adalah titik masuk termampu ke dalam ASP.NET bagi orang-orang yang mengenal HTML tetapi mungkin tidak memiliki pengalaman pemrograman yang luas - misalnya, siswa atau penghobi. Ini juga merupakan cara yang baik bagi pengembang web yang mengetahui PHP atau kerangka kerja serupa untuk mulai menggunakan ASP.NET.
• Aplikasi Halaman Tunggal ASP.NET
  ASP.NET Aplikasi Halaman Tunggal (SPA) membantu Anda membangun aplikasi yang menyertakan interaksi sisi klien yang signifikan menggunakan HTML 5, CSS 3, dan JavaScript. Pembaruan ASP.NET dan Web Tools 2012.2 mengirimkan templat baru untuk membangun aplikasi satu halaman menggunakan knockout.js dan ASP.NET Web API. Selain templat SPA baru, templat SPA baru yang dibuat komunitas juga tersedia untuk diunduh.

Selain empat kerangka kerja pengembangan utama, ASP.NET juga menawarkan teknologi tambahan yang penting untuk diperhatikan dan dipahami, tetapi tidak tercakup dalam seri tutorial ini:

• ASP.NET Web API - Kerangka kerja untuk membangun layanan HTTP yang menjangkau berbagai klien, termasuk browser dan perangkat seluler.
• ASP.NET SignalR - Pustaka yang memudahkan pengembangan fungsionalitas web real-time.

Meninjau Proyek

Di Visual Studio, jendela Penjelajah Solusi memungkinkan Anda mengelola file untuk proyek. Mari kita lihat folder yang telah ditambahkan ke aplikasi Anda di Penjelajah Solusi. Templat aplikasi web menambahkan struktur folder dasar:

Visual Studio membuat beberapa folder dan file awal untuk proyek Anda. File pertama yang akan Anda kerjakan nanti dalam tutorial ini adalah sebagai berikut:

File	Tujuan
Default.aspx	Biasanya halaman pertama ditampilkan saat aplikasi dijalankan di browser.
Site.Master	Halaman yang memungkinkan Anda membuat tata letak yang konsisten dan menggunakan perilaku standar untuk halaman di aplikasi Anda.
Global.asax	File opsional yang berisi kode untuk merespons peristiwa tingkat aplikasi dan tingkat sesi yang dimunculkan oleh ASP.NET atau oleh modul HTTP.
Web.config	Data konfigurasi untuk aplikasi.

Menjalankan Aplikasi Web Default

Aplikasi Web default memberikan pengalaman yang kaya berdasarkan fungsionalitas dan dukungan bawaan. Tanpa perubahan apa pun pada proyek formulir Web default, aplikasi siap dijalankan di browser Web lokal Anda.

1. Tekan tombol F5 saat berada di Visual Studio.
   Aplikasi akan membangun dan menampilkan di browser Web Anda.

   

2. Setelah Anda selesai meninjau aplikasi yang sedang berjalan, tutup jendela browser.

Ada tiga halaman utama dalam aplikasi Web default ini: Default.aspx (Beranda), About.aspx, dan Contact.aspx. Masing-masing halaman ini dapat dijangkau dari bilah navigasi atas. Ada juga dua halaman tambahan yang terkandung dalam folder Akun, halaman Register.aspx dan halaman Login.aspx. Kedua halaman ini memungkinkan Anda menggunakan kemampuan keanggotaan ASP.NET untuk membuat, menyimpan, dan memvalidasi kredensial pengguna.

Latar Belakang Formulir Web ASP.NET

ASP.NET Web Forms adalah halaman yang didasarkan pada teknologi Microsoft ASP.NET, di mana kode yang berjalan di server secara dinamis menghasilkan output halaman Web ke browser atau perangkat klien. Halaman ASP.NET Web Forms secara otomatis merender HTML yang sesuai dengan browser yang benar untuk fitur seperti gaya, tata letak, dan sebagainya. Formulir Web kompatibel dengan bahasa apa pun yang didukung oleh runtime bahasa umum .NET, seperti Microsoft Visual Basic dan Microsoft Visual C#. Selain itu, Formulir Web dibangun di atas .NET Framework Microsoft, yang memberikan manfaat seperti lingkungan terkelola, keamanan jenis, dan pewarisan.

Saat halaman ASP.NET Web Forms berjalan, halaman akan melalui siklus hidup di mana halaman tersebut melakukan serangkaian langkah pemrosesan. Langkah-langkah ini termasuk inisialisasi, kontrol instansiasi, pemulihan dan pemeliharaan status, menjalankan kode penanganan aktivitas, dan penyajian. Saat Anda menjadi lebih akrab dengan kekuatan ASP.NET Web Forms, penting bagi Anda untuk memahami siklus hidup halaman ASP.NET sehingga Anda dapat menulis kode pada tahap siklus hidup yang sesuai untuk efek yang Anda inginkan.

Ketika server Web menerima permintaan halaman, server web menemukan halaman, memprosesnya, mengirimkannya ke browser, lalu membuang semua informasi halaman. Jika pengguna meminta halaman yang sama lagi, server mengulangi seluruh urutan, memproses ulang halaman dari awal. Dengan cara lain, server tidak memiliki memori halaman yang telah diproses-halaman tidak bersifat stateless. Kerangka kerja halaman ASP.NET secara otomatis menangani tugas mempertahankan status halaman Anda dan kontrolnya, dan memberi Anda cara eksplisit untuk mempertahankan status informasi khusus aplikasi.

Tip

Fitur Aplikasi Web di Templat Aplikasi Formulir Web

Templat Aplikasi ASP.NET Web Forms menyediakan serangkaian fungsionalitas bawaan yang kaya. Ini tidak hanya memberi Anda halaman Home.aspx , halaman About.aspx , halaman Contact.aspx , tetapi juga mencakup fungsionalitas keanggotaan yang mendaftarkan pengguna dan menyimpan kredensial mereka sehingga mereka dapat masuk ke situs web Anda. Gambaran umum ini menyediakan informasi selengkapnya tentang beberapa fitur yang terkandung dalam templat Aplikasi ASP.NET Web Forms dan bagaimana fitur tersebut digunakan dalam aplikasi Wingtip Toys.

Keanggotaan

ASP.NET Identitas menyimpan kredensial pengguna Anda dalam database yang dibuat oleh aplikasi. Saat pengguna Anda masuk, aplikasi memvalidasi kredensial mereka dengan membaca database. Folder Akun proyek Anda berisi file yang mengimplementasikan berbagai bagian keanggotaan: mendaftar, masuk, mengubah kata sandi, dan mengotorisasi akses. Selain itu, ASP.NET Web Forms mendukung OAuth dan OpenID. Penyempurnaan autentikasi ini memungkinkan pengguna untuk masuk ke situs Anda menggunakan kredensial yang ada, dari akun seperti Facebook, Twitter, Windows Live, dan Google.

Secara default, templat membuat database keanggotaan menggunakan nama database default pada instans SQL Server Express LocalDB, server database pengembangan yang dilengkapi dengan Visual Studio Express 2013 untuk Web.

SQL Server Express LocalDB

SQL Server Express LocalDB adalah versi ringan dari SQL Server yang memiliki banyak fitur kemampuan pemrograman database SQL Server. SQL Server Express LocalDB berjalan dalam mode pengguna dan memiliki penginstalan konfigurasi nol yang cepat yang memiliki daftar singkat prasyarat penginstalan. Di Microsoft SQL Server, database atau kode Transact-SQL apa pun dapat dipindahkan dari SQL Server Express LocalDB ke SQL Server dan SQL Azure tanpa langkah-langkah peningkatan apa pun. Jadi, SQL Server Express LocalDB dapat digunakan sebagai lingkungan pengembang untuk aplikasi yang menargetkan semua edisi SQL Server. SQL Server Express LocalDB memungkinkan fitur seperti prosedur tersimpan, fungsi dan agregat yang ditentukan pengguna, integrasi .NET Framework, jenis spasial, dan lainnya yang tidak tersedia di SQL Server Compact.

Halaman Induk

Halaman master ASP.NET menentukan tampilan dan perilaku yang konsisten untuk semua halaman dalam aplikasi Anda. Tata letak halaman master digabungkan dengan konten dari halaman konten individual untuk menghasilkan halaman akhir yang dilihat pengguna. Di aplikasi Wingtip Toys, Anda memodifikasi halaman master Site.master sehingga semua halaman di situs web Wingtip Toys memiliki logo dan bilah navigasi yang berbeda.

HTML5

Templat Aplikasi ASP.NET Web Forms mendukung HTML5, yang merupakan versi terbaru dari bahasa markup HTML. HTML5 mendukung elemen dan fungsionalitas baru yang memudahkan pembuatan situs Web.

Modernizr

Untuk browser yang tidak mendukung HTML5, Anda dapat menggunakan Modernizr. Modernizr adalah pustaka JavaScript sumber terbuka yang dapat mendeteksi apakah browser mendukung fitur HTML5, dan mengaktifkannya jika tidak. Dalam templat Aplikasi ASP.NET Web Forms, Modernizr diinstal sebagai paket NuGet.

Bootstrap

Templat proyek Visual Studio 2013 menggunakan Bootstrap, tata letak, dan kerangka kerja tema yang dibuat oleh Twitter. Bootstrap menggunakan CSS3 untuk menyediakan desain responsif, yang berarti tata letak dapat beradaptasi secara dinamis dengan ukuran jendela browser yang berbeda. Anda juga dapat menggunakan fitur tema Bootstrap untuk dengan mudah memengaruhi perubahan tampilan dan nuansa aplikasi. Secara default, templat aplikasi web ASP.NET di Visual Studio 2013 menyertakan Bootstrap sebagai paket NuGet.

Paket NuGet

Templat Aplikasi ASP.NET Web Forms menyertakan sekumpulan paket NuGet . Paket-paket ini menyediakan fungsionalitas komponen dalam bentuk pustaka dan alat sumber terbuka. Ada berbagai macam paket untuk membantu Anda membuat dan menguji aplikasi Anda. Visual Studio memudahkan untuk menambahkan, menghapus, dan memperbarui paket NuGet. Pengembang juga dapat membuat dan menambahkan paket ke NuGet.

Saat Anda menginstal paket, NuGet menyalin file ke solusi Anda dan secara otomatis membuat perubahan apa pun yang diperlukan, seperti menambahkan referensi dan mengubah konfigurasi yang terkait dengan aplikasi Web Anda. Jika Anda memutuskan untuk menghapus pustaka, NuGet menghapus file dan membalikkan perubahan apa pun yang dibuatnya dalam proyek Anda sehingga tidak ada kekacauan yang tersisa. NuGet tersedia dari menu Alat di Visual Studio.

jQuery

jQuery adalah Pustaka JavaScript yang cepat dan ringkas yang menyederhanakan traversing dokumen HTML, penanganan peristiwa, animasi, dan interaksi Ajax untuk pengembangan web yang cepat. Pustaka JavaScript jQuery disertakan dalam templat Aplikasi ASP.NET Web Forms sebagai paket NuGet.

Validasi Tidak Mengganggu

Kontrol validator bawaan telah dikonfigurasi untuk menggunakan JavaScript yang tidak mengganggu untuk logika validasi sisi klien. Ini secara signifikan mengurangi jumlah JavaScript yang dirender sebaris dalam markup halaman dan mengurangi ukuran halaman secara keseluruhan. Validasi yang tidak mengganggu ditambahkan secara global ke templat Aplikasi ASP.NET Web Forms berdasarkan pengaturan di <elemen appSettings> dari file Web.config di akar aplikasi.

Kode Kerangka Kerja Entitas Terlebih Dahulu

Selain fitur dalam templat Aplikasi ASP.NET Web Forms, aplikasi Wingtip Toys menggunakan Kode Kerangka Kerja Entitas Terlebih Dahulu, yang merupakan pustaka NuGet yang memungkinkan pengembangan berpusat pada kode saat Anda bekerja dengan data. Sederhananya, ini membuat bagian database aplikasi Anda untuk Anda berdasarkan kode yang Anda tulis. Dengan menggunakan Kerangka Kerja Entitas, Anda mengambil dan memanipulasi data sebagai objek yang di ketik dengan kuat. Ini memungkinkan Anda fokus pada logika bisnis di aplikasi Anda daripada detail bagaimana data diakses.

Untuk informasi tambahan tentang pustaka dan paket yang diinstal yang disertakan dengan templat ASP.NET Web Forms, lihat daftar paket NuGet yang diinstal. Untuk melakukan ini, Di Visual Studio buat proyek Formulir Web baru, pilih Alat> Pengelola >Paket NuGetKelola Paket NuGet untuk Solusi, dan pilih Paket terinstal dalam kotak dialog Kelola Paket NuGet.

Visual Studio Tur

Jendela utama di Visual Studio mencakup Penjelajah Solusi, Penjelajah Server (Penjelajah Database di Ekspres), Jendela Properti, Kotak Alat, Toolbar, dan Jendela Dokumen.

Untuk informasi selengkapnya tentang Visual Studio, lihat Panduan Visual untuk Visual Web Developer.

Ringkasan

Dalam tutorial ini Anda telah membuat, meninjau dan menjalankan aplikasi Formulir Web default. Anda telah meninjau berbagai fitur aplikasi formulir Web default dan mempelajari beberapa dasar tentang cara menggunakan lingkungan Visual Studio. Dalam tutorial berikut, Anda akan membuat lapisan akses data.

Sumber Daya Tambahan

Proyek Aplikasi Web versus Proyek Situs Web
Gambaran Umum Halaman Formulir Web ASP.NET

SebelumnyaBerikutnya