Blazor dari Nol: Bab 2 — Aplikasi Blazor pertamamu

· 2 menit baca
Blazor .NET Web Development Series
Available in: Bahasa Indonesia · English · Español · Français · Deutsch · Português · 한국어 · 日本語 · Русский · 中文 · العربية · हिन्दी · Polski · Türkçe · Nederlands

Selamat datang di Bab 2 Blazor dari Nol. Kalau kamu melewatkan Bab 1, baca dulu agar konteks model rendering masih segar.

Di bab ini, kita akan membuat aplikasi Blazor baru, menjalankannya secara lokal, dan memahami fungsi file-file penting.

Langkah 1: Buat proyek

Di terminal:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

Perintah ini membuat Blazor Web App .NET 9 dengan struktur bawaan.

Kalau tooling meminta model interaktivitas, mulai dengan Interactive Server.

Langkah 2: Jalankan secara lokal

Jalankan aplikasinya:

dotnet watch

Lalu buka URL yang muncul di terminal (biasanya https://localhost:5xxx). Kamu akan melihat aplikasi bawaan dengan halaman Home, Counter, dan Weather.

Kalau ini berjalan, lingkunganmu sudah siap.

Langkah 3: Pahami struktur proyek

Ini file dan folder utama yang perlu kamu kenal lebih dulu:

  • Program.cs — mendaftarkan service dan mengatur HTTP pipeline.
  • Components/App.razor — komponen root aplikasi.
  • Components/Routes.razor — pemetaan route halaman.
  • Components/Pages/ — halaman ber-route seperti Home dan Counter.
  • Components/Layout/ — layout bersama (MainLayout.razor, menu navigasi).
  • wwwroot/ — aset statis (CSS, gambar, favicon).
  • appsettings.json — nilai konfigurasi.

Kamu belum perlu paham semua file. Untuk tahap ini, cukup tahu lokasi UI dan konfigurasi startup.

Langkah 4: Lakukan perubahan pertama

Buka Components/Pages/Home.razor lalu ganti isinya dengan:

@page "/"

<PageTitle>Blazor dari Nol</PageTitle>

<h1>Blazor dari Nol</h1>
<p>Bab 2 berjalan di lokal.</p>

Simpan file dan refresh browser. Dengan dotnet watch, aplikasi akan ter-update langsung.

Perubahan kecil ini memvalidasi alur penuh: edit -> build -> render.

Langkah 5: Baca Program.cs sekali

Tidak perlu dihafal, tapi kenali baris penting berikut:

  • AddRazorComponents() mengaktifkan komponen Razor.
  • AddInteractiveServerComponents() mengaktifkan komponen interaktif sisi server.
  • MapRazorComponents<App>() memetakan komponen root ke endpoint.

Baris-baris ini menunjukkan cara aplikasi booting dan kemampuan rendering yang aktif.

Masalah umum

Kalau ada error, biasanya salah satu ini:

  • SDK lama: jalankan dotnet --version dan pastikan .NET 9.
  • Sertifikat HTTPS: jalankan dotnet dev-certs https --trust.
  • Konflik port: hentikan proses dotnet lama lalu jalankan lagi.

Selanjutnya

Di Bab 3 kita akan membahas komponen lebih dalam: parameter, komposisi, dan cara menyusun UI reusable.