Bagian 1: Gambaran Umum dan Pembuatan Proyek

oleh Rick Anderson

Unduh Proyek yang Selesai

Entity Framework adalah kerangka kerja pemetaan objek/relasional. Ini memetakan objek domain dalam kode Anda ke entitas dalam database relasional. Untuk sebagian besar, Anda tidak perlu khawatir tentang lapisan database, karena Kerangka Kerja Entitas menanganinya untuk Anda. Kode Anda memanipulasi objek, dan perubahan dipertahankan ke database.

Tentang Tutorial

Dalam tutorial ini, Anda akan membuat aplikasi toko sederhana. Ada dua bagian utama untuk aplikasi. Pengguna normal dapat melihat produk dan membuat pesanan:

Administrator dapat membuat, menghapus, atau mengedit produk:

Keterampilan yang akan Anda Pelajari

Inilah yang akan Anda pelajari:

• Cara menggunakan Entity Framework dengan ASP.NET Web API.
• Cara menggunakan knockout.js untuk membuat UI klien dinamis.
• Cara menggunakan autentikasi formulir dengan Web API untuk mengautentikasi pengguna.

Meskipun tutorial ini mandiri, Anda mungkin ingin membaca tutorial berikut terlebih dahulu:

• API Web ASP.NET Pertama Anda
• Membuat API Web yang Mendukung Operasi CRUD

Beberapa pengetahuan tentang ASP.NET MVC juga bermanfaat.

Gambaran Umum

Pada tingkat tinggi, berikut adalah arsitektur aplikasi:

• ASP.NET MVC menghasilkan halaman HTML untuk klien.
• ASP.NET Web API memaparkan operasi CRUD pada data (produk dan pesanan).
• Entity Framework menerjemahkan model C# yang digunakan oleh Web API ke dalam entitas database.

Diagram berikut menunjukkan bagaimana objek domain diwakili di berbagai lapisan aplikasi: Lapisan database, model objek, dan akhirnya format kawat, yang digunakan untuk mengirimkan data ke klien melalui HTTP.

Membuat Proyek Visual Studio

Anda dapat membuat proyek tutorial menggunakan Visual Web Developer Express atau versi lengkap Visual Studio.

Dari halaman Mulai , klik Proyek Baru.

Di panel Templat , pilih Templat terinstal dan perluas simpul Visual C# . Di bawah Visual C#, pilih Web. Dalam daftar templat proyek, pilih ASP.NET Aplikasi Web MVC 4. Beri nama proyek "ProductStore" dan klik OK.

Dalam dialog Proyek ASP.NET Baru MVC 4 , pilih Aplikasi Internet dan klik OK.

Templat "Aplikasi Internet" membuat aplikasi MVC ASP.NET yang mendukung autentikasi formulir. Jika Anda menjalankan aplikasi sekarang, aplikasi tersebut sudah memiliki beberapa fitur:

• Pengguna baru dapat mendaftar dengan mengklik tautan "Daftar" di sudut kanan atas.
• Pengguna terdaftar dapat masuk dengan mengklik tautan "Masuk".

Informasi keanggotaan disimpan dalam database yang dibuat secara otomatis. Untuk informasi selengkapnya tentang autentikasi formulir di ASP.NET MVC, lihat Panduan: Menggunakan Autentikasi Formulir di ASP.NET MVC.

Memperbarui File CSS

Langkah ini bersifat kosmetik, tetapi akan membuat halaman dirender seperti cuplikan layar sebelumnya.

Di Penjelajah Solusi, perluas folder Konten dan buka file bernama Site.css. Tambahkan gaya CSS berikut:

.content {
    clear: both;
    width: 90%;
}

li {
    list-style-type: none;
}
        
#products li {
    width: 300px;
    background-color: #aaf;
    font-size: 1.5em;
    font-weight: bold;
    color: #ff0;
    margin: 0 0 5px 0;
    padding: 0 5px 0 5px;
}
        
.price  {
    float: right;
    color: #c00;
    font-size: 0.75em;
}
        
.details thead td {
    background-color: #CCCCCC;
    color: #333333;
}

.details td {
padding: 6px;
}
        
.details td.qty {
text-align: center;
}       
        
#cart a {
color: Blue;
font-size: .75em;
} 
        
#update-products li { 
    padding: 5px; 
    color: #666;
    border-style: dashed;
    border-width: 2px;
    border-color: #666;
}

#update-products li .item {
width: 120px;
display: inline-block;
text-align: right;
}

Berikutnya