Latihan - Menyesuaikan proyek

  • 12 menit

Tim Anda telah membagi pekerjaan untuk aplikasi manajemen inventaris pizza. Rekan satu tim Anda telah membuat aplikasi web ASP.NET Core untuk Anda, dan mereka telah membangun layanan untuk membaca dan menulis data pizza ke database. Anda telah ditetapkan untuk bekerja di halaman Daftar Pizza, yang akan menampilkan daftar pizza dan memungkinkan Anda menambahkan pizza baru ke database. Kita akan mulai dengan mengikuti tur proyek untuk memahami bagaimana proyek diatur.

Catatan

Modul ini menggunakan .NET CLI (Antarmuka Baris Perintah) dan Visual Studio Code untuk pengembangan lokal. Setelah menyelesaikan modul ini, Anda dapat menerapkan konsep menggunakan Visual Studio (Windows) atau melanjutkan pengembangan menggunakan Visual Studio Code (Windows, Linux, dan macOS).

Mendapatkan file proyek

Jika Anda menggunakan GitHub Codespaces, cukup buka repositori di browser, pilih Kode, lalu buat codespace baru di main cabang.

Jika Anda tidak menggunakan GitHub Codespaces, dapatkan file proyek dan buka di Visual Studio Code dengan langkah-langkah berikut:

  1. Buka shell perintah dan klon proyek dari GitHub menggunakan baris perintah:

    git clone https://github.com/MicrosoftDocs/mslearn-create-razor-pages-aspnet-core

  2. Navigasi ke mslearn-create-razor-pages-aspnet-core direktori dan buka proyek di Visual Studio Code:

    cd mslearn-create-razor-pages-aspnet-core
code .

Tip

Jika Anda telah menginstal runtime kontainer yang kompatibel, Anda dapat menggunakan ekstensi Dev Containers untuk membuka repositori dalam kontainer dengan alat yang telah diinstal sebelumnya.

Tinjau pekerjaan rekan satu tim Anda

Mari kita luangkan waktu sejenak untuk membiasakan diri dengan kode yang ada di folder ContosoPizza. Proyek ini adalah aplikasi web ASP.NET Core yang dibuat menggunakan dotnet new webapp perintah . Perubahan yang dilakukan rekan satu tim Anda dijelaskan di bawah ini.

Tip

Jangan menghabiskan terlalu banyak waktu untuk meninjau perubahan ini. Rekan satu tim Anda telah melakukan pekerjaan untuk membuat database dan layanan untuk membaca dan menulis pizza ke database, tetapi mereka tidak membuat perubahan UI apa pun. Anda akan membangun UI yang menggunakan layanan mereka di unit berikutnya.

  • Folder Model ditambahkan ke proyek.
    • Folder model berisi Pizza kelas yang mewakili pizza.
  • Folder Data ditambahkan ke proyek.
    • Folder data berisi PizzaContext kelas yang mewakili konteks database. Ini mewarisi dari DbContext kelas di Entity Framework Core. Entity Framework Core adalah pemeta relasional objek (ORM) yang memudahkan untuk bekerja dengan database.
  • Folder Layanan ditambahkan ke proyek.
    • Folder layanan berisi PizzaService kelas yang mengekspos metode untuk mencantumkan dan menambahkan pizza.
    • Kelas menggunakan PizzaService PizzaContext kelas untuk membaca dan menulis pizza ke database.
    • Kelas terdaftar untuk injeksi dependensi di Program.cs (baris 10).

Entity Framework Core juga menghasilkan beberapa hal:

  • Folder Migrasi dibuat.
    • Folder migrasi berisi kode untuk membuat skema database.
  • File database SQLite ContosoPizza.db dihasilkan.
    • Jika Anda memiliki ekstensi SQLite yang terinstal (atau Anda menggunakan GitHub Codespaces), Anda bisa menampilkan database dengan mengklik kanan file dan memilih Buka Database. Skema database diperlihatkan di tab SQLite Explorer di panel Explorer.

Meninjau struktur proyek Razor Pages

Segala sesuatu yang lain dalam proyek tidak berubah dari ketika proyek dibuat. Tabel berikut ini menjelaskan struktur proyek yang dihasilkan oleh dotnet new webapp perintah .

Nama Deskripsi
Halaman/ Berisi Halaman Razor dan file pendukung. Setiap halaman Razor memiliki file .cshtml dan file kelas .cshtml.csPageModel.
wwwroot/ Berisi file aset statis seperti HTML, JavaScript, dan CSS.
ContosoPizza.csproj Berisi metadata konfigurasi proyek, seperti dependensi.
Program.cs Berfungsi sebagai titik masuk aplikasi dan mengonfigurasi perilaku aplikasi, seperti perutean.

Pengamatan penting lainnya:

  • File halaman Razor dan file kelas yang dipasangkan PageModel

    Halaman razor disimpan di direktori Pages . Seperti disebutkan di atas, setiap halaman Razor memiliki file .cshtml dan file kelas .cshtml.csPageModel. Kelas ini PageModel memungkinkan pemisahan logika dan presentasi halaman Razor, menentukan penangan halaman untuk permintaan, dan merangkum properti data dan logika yang dilingkup ke halaman Razor-nya.

  • Struktur direktori Pages dan permintaan perutean

    Halaman Razor menggunakan struktur direktori Pages sebagai konvensi untuk permintaan perutean. Tabel berikut ini memperlihatkan bagaimana URL memetakan ke nama file:

    URL Halaman Peta ke Razor
    www.domain.com Halaman/Index.cshtml
    www.domain.com/Index Halaman/Index.cshtml
    www.domain.com/Privacy Pages/Privacy.cshtml
    www.domain.com/Error Pages/Error.cshtml

    Subfolder di direktori Pages digunakan untuk mengatur halaman Razor. Misalnya, jika ada direktori Halaman/Produk , URL akan mencerminkan struktur tersebut:

    URL Halaman Peta ke Razor
    www.domain.com/Products Halaman/Produk/Index.cshtml
    www.domain.com/Products/Index Halaman/Produk/Index.cshtml
    www.domain.com/Products/Create Halaman/Produk/Create.cshtml

  • Tata letak dan file bersama lainnya

    Ada beberapa file yang dibagikan di beberapa halaman. File-file ini menentukan elemen tata letak umum dan impor halaman. Tabel berikut ini menjelaskan tujuan setiap file.

    File Deskripsi
    _ViewImports.cshtml Mengimpor namespace layanan dan kelas yang digunakan di beberapa halaman.
    _ViewStart.cshtml Menentukan tata letak default untuk semua halaman Razor.
    Pages/Shared/_Layout.cshtml Ini adalah tata letak yang ditentukan oleh _ViewStart.cshtml file. Menerapkan elemen tata letak umum di beberapa halaman.
    Pages/Shared/_ValidationScriptsPartial.cshtml Menyediakan fungsionalitas validasi ke semua halaman.

Jalankan proyek untuk pertama kalinya

Mari kita jalankan proyek sehingga kita dapat melihatnya beraksi.

  1. Klik kanan pada folder ContosoPizza di Explorer dan pilih Buka di Terminal Terintegrasi. Ini membuka jendela terminal dalam konteks folder proyek.

  2. Di jendela terminal, masukkan perintah berikut:

    dotnet watch

    Perintah ini:

    • Membangun proyek.
    • Memulai aplikasi.
    • Mengawasi perubahan file dan menghidupkan ulang aplikasi saat mendeteksi perubahan.

  3. IDE meminta Anda untuk membuka aplikasi di browser. Pilih Buka di Browser.

    Tip

    Anda juga dapat membuka aplikasi dengan menemukan URL di jendela terminal. Tahan Ctrl dan klik URL untuk membukanya di browser.

  4. Bandingkan beranda yang dirender dengan Pages/Index.cshtml di IDE:

    • Amati kombinasi kode HTML, Razor Sintaks, dan C# dalam file.
      • Sintaks Razor ditandai oleh @ karakter.
      • Kode C# diapit dalam @{ } blok. Perhatikan arahan di bagian atas file:
      • Direktif @page menentukan bahwa file ini adalah halaman Razor.
      • Direktif @model menentukan jenis model untuk halaman (dalam hal ini, IndexModel, yang ditentukan dalam Halaman/Index.cshtml.cs).
    • Tinjau blok kode C#.
      • Kode menetapkan nilai Title item dalam ViewData kamus ke "Halaman beranda".
      • ViewData Kamus digunakan untuk meneruskan data antara halaman Razor dan IndexModel kelas.
      • Pada runtime, Title nilai digunakan untuk mengatur elemen halaman <title> .

Biarkan aplikasi berjalan di jendela terminal. Kita akan menggunakannya di unit yang akan datang. Biarkan tab browser dengan aplikasi Contoso Pizza yang sedang berjalan juga. Anda akan membuat perubahan pada aplikasi dan browser akan secara otomatis me-refresh untuk menampilkan perubahan.

Mengkustomisasi halaman arahan

Mari kita buat beberapa perubahan pada halaman arahan untuk membuatnya lebih relevan dengan aplikasi pizza.

  1. Di Pages/Index.cshtml, ganti kode di blok kode C# dengan kode berikut:

    ViewData["Title"] = "The Home for Pizza Lovers";
TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);

    Kode sebelumnya:

    • Menetapkan nilai Title item dalam ViewData kamus ke "Rumah untuk Pecinta Pizza".
    • Menghitung jumlah waktu yang telah berlalu sejak bisnis dibuka.

  2. Ubah HTML sebagai berikut:

    • <h1> Ganti elemen dengan kode berikut:

      <h1 class="display-4">Welcome to Contoso Pizza</h1>

    • <p> Ganti elemen dengan kode berikut:

      <p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>

    Kode sebelumnya:

    • Mengubah judul menjadi "Selamat Datang di Contoso Pizza".
    • Menampilkan jumlah hari yang telah berlalu sejak bisnis dibuka.
      • Karakter @ digunakan untuk beralih dari HTML ke Sintaks Razor.
      • Metode Convert.ToInt32 ini digunakan untuk mengonversi TotalDays properti timeInBusiness variabel menjadi bilangan bulat.
      • Kelas Convert adalah bagian System dari namespace layanan, yang diimpor secara otomatis oleh <ImplicitUsings> elemen dalam file ContosoPizza.csproj .

  3. Simpan file. Tab browser dengan aplikasi secara otomatis di-refresh untuk menampilkan perubahan. Jika Anda menggunakan GitHub Codespaces, file akan disimpan secara otomatis, tetapi Anda harus me-refresh tab browser secara manual.

Penting

Awasi jendela terminal setiap dotnet watch kali Anda menyimpan file Anda. Terkadang kode Anda mungkin berisi apa yang disebut edit kasar. Ini berarti bahwa kode yang Anda ubah tidak dapat dikompilasi ulang tanpa memulai ulang aplikasi. Jika diminta untuk memulai ulang aplikasi, tekan y (ya) atau a (selalu). Anda selalu dapat menghentikan aplikasi dengan menekan Ctrl+C dua kali di jendela terminal, lalu memulai ulang dengan menjalankannya dotnet watch lagi.

Anda telah membuat perubahan pertama Anda pada halaman Razor! Di unit berikutnya, Anda akan menambahkan halaman baru ke aplikasi untuk menampilkan daftar pizza.