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 .

Tips

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.

Tips

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 kelas DbContext 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 PizzaService menggunakan kelas PizzaContext untuk membaca dan menulis pizza ke dalam 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 telah dibuat.
    • 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:

  • Berkas halaman Razor dan berkas 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 PageModel memungkinkan pemisahan logika dan presentasi halaman Razor, menetapkan penangan permintaan halaman, dan merangkum properti data serta logika yang dibatasi pada halaman Razor-nya.

  • Struktur direktori Pages dan permintaan routing

    Halaman Razor menggunakan struktur direktori Pages sebagai konvensi untuk memproses permintaan. Tabel berikut menunjukkan bagaimana URL dipetakan ke nama file.

    URL Pemetaan ke Halaman 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 Pemetaan ke Halaman 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 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.

    Tips

    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 dictionary digunakan untuk meneruskan data antara halaman Razor dan IndexModel kelas.
      • Saat runtime, Title digunakan untuk mengatur elemen <title> halaman.

Biarkan aplikasi berjalan di jendela terminal. Kita akan menggunakannya di unit yang akan datang. Biarkan juga tab browser dengan aplikasi Contoso Pizza yang sedang berjalan. 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 dari System namespace, yang diimpor secara otomatis oleh elemen <ImplicitUsings> 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

Perhatikan dengan seksama jendela terminal dengan dotnet watch setiap kali Anda menyimpan file. 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.