Latihan - Membuat proyek aplikasi web ASP.NET Core dari templat

Selesai

Dalam latihan ini, Anda akan:

  • Buat proyek aplikasi web ASP.NET Core dari templat.
  • Periksa struktur proyek yang dibuat.

Membuat aplikasi web ASP.NET Core menggunakan templat

Di Visual Studio Code, buat proyek baru:

  1. Pilih tampilan Explorer:

    Cuplikan layar memilih tampilan Explorer.

  2. Pilih tombol Buat Proyek .NET. Atau, Anda dapat memunculkan Palet Perintah menggunakan +, lalu ketik "+" untuk menemukan dan memilih Baru.

    Cuplikan layar memilih Buat Proyek .NET.

  3. Pilih templat proyek ASP.NET Core Empty dari daftar.

  4. Dalam dialog Lokasi Proyek, buat folder bernama MyWebApp untuk memuat proyek.

  5. Di Palet Perintah, beri nama proyek MyWebApp, termasuk pencocokan kapitalisasi. Menggunakan nama proyek yang tepat ini penting untuk memastikan bahwa namespace untuk kode dalam instruksi ini cocok dengan milik Anda.

  6. Pilih Buat proyek dari Palet Perintah.

Memeriksa struktur proyek

Konten folder proyek MyWebApp ditampilkan di Penjelajah Visual Studio Code:

Cuplikan layar file proyek di Visual Studio Code Explorer.

Dari terminal atau baris perintah, buat proyek baru:

  1. Ubah ke direktori (cd) yang akan berisi proyek.

  2. Buat aplikasi web ASP.NET Core di direktori bernama MyWebApp dengan menjalankan perintah dotnet new.NET CLI :

    dotnet new web -o MyWebApp
    

    Proyek web kosong ASP.NET Core baru dibuat di direktori bernama MyWebApp.

    Berikut menguraikan sintaks perintah:

    • dotnet new: Perintah .NET CLI untuk membuat berbagai artefak pengembangan .NET berdasarkan templat seperti proyek, solusi, pustaka, konfigurasi, dan file khusus lainnya.
    • web: Templat proyek yang digunakan untuk membuat proyek web kosong ASP.NET Core, tidak berisi konten contoh. web adalah salah satu dari banyak templat proyek bawaan yang tersedia di .NET SDK.
    • -o: Opsi output menentukan direktori tempat proyek baru dibuat:
      • Jika direktori tidak ada, .NET CLI membuatnya.
      • Direktori tempat proyek dibuat berfungsi sebagai nama proyek default, namespace layanan, dan nama assembly (nama output yang dikompilasi).
      • Jika opsi -o <directory> output tidak digunakan, maka direktori saat ini digunakan.
  3. Buka folder proyek MyWebApp.

Memeriksa struktur proyek

Konten folder proyek MyWebApp ditampilkan di Penjelajah Visual Studio Code:

Cuplikan layar file proyek di Visual Studio Code Explorer.

Bagian berikut berisi gambaran umum folder proyek utama dan file proyek ASP.NET Core kosong:

File proyek MyWebApp.csproj

File proyek .csproj digunakan untuk:

  • Mengonfigurasi cara membangun proyek
  • Tentukan versi .NET mana yang akan ditargetkan
  • Mengelola dependensi proyek

File solusi .sln

Saat proyek ASP.NET Core dibuat atau dibuka di Visual Studio Code (dengan ekstensi C# Dev Kit), proyek membuat file solusi [nama proyek].sln . File solusi [nama proyek].sln berisi informasi untuk satu atau beberapa proyek terkait, termasuk informasi build, pengaturan, dan file lain-lain yang tidak terkait hanya dengan satu proyek tertentu.

Folder obj

Folder obj berisi file perantara yang digunakan oleh sistem build, termasuk file objek yang dikompilasi yang dihasilkan dari file sumber. Output build akhir ditempatkan dalam folder yang bin dibuat selama proses build.

File Properti/launchSettings.json

File Properti/launchSettings.json berisi data konfigurasi tentang bagaimana aplikasi diluncurkan selama pengembangan. Pengaturan ini mencakup applicationUrl properti , yang menentukan URL akar yang digunakan aplikasi, seperti https://localhost:{port}, di mana {port} adalah nomor port lokal acak yang ditetapkan saat proyek dibuat.

File launchSettings.json berisi konfigurasi berikut:

{
  "$schema": "https://json.schemastore.org/launchsettings.json",
  "profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "http://localhost:5218",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7140;http://localhost:5218",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

File Program.cs

File Program.cs berfungsi sebagai titik masuk untuk aplikasi ASP.NET Core dan memiliki beberapa tujuan utama, yang meliputi:

  • Konfigurasi host: Mengonfigurasi host, termasuk menyiapkan server web.
  • Pendaftaran layanan: Menambahkan layanan ke fungsionalitas aplikasi, seperti konteks database, pengelogan, dan layanan khusus untuk kerangka kerja tertentu.
  • Konfigurasi alur middleware: Menentukan alur penanganan permintaan aplikasi sebagai serangkaian instans middleware.
  • Konfigurasi lingkungan: Menyiapkan pengaturan khusus lingkungan untuk pengembangan, penahapan, dan produksi.

Dalam proyek ASP.NET Core kosong baru yang Anda buat, file Program.cs berisi kode minimal berikut:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapGet("/", () => "Hello World!");

app.Run();

Baris kode berikut dalam file ini membuat WebApplicationBuilder dengan default yang telah dikonfigurasi sebelumnya, dan membangun aplikasi:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

Metode ini app.MapGet() secara langsung menentukan titik akhir yang menangani permintaan HTTP GET:

app.MapGet("/", () => "Hello World!");

app.MapGet("/"): Menentukan rute untuk permintaan HTTP GET. / menunjukkan rute ini merespons permintaan yang dibuat ke URL akar aplikasi. Misalnya, http://localhost:{port}/, di mana {port} adalah nomor port yang ditetapkan secara acak yang ditetapkan dalam file Properti/launchSettings.json saat pembuatan proyek.

() => "Hello World!": Ekspresi lambda yang berfungsi sebagai penangan permintaan. Ketika permintaan GET dibuat ke URL akar, ekspresi lambda ini dijalankan, dan mengembalikan string "Halo Dunia!"