Daftar Isi

1. Pengantar Blazor dan .NET 9
2. Persiapan Lingkungan Pengembangan
3. Struktur Proyek Blazor
4. Membuat Komponen Dasar
5. Routing dan Navigasi
6. Data Binding dan Event Handling
7. State Management
8. Integrasi API dan HTTP Client
9. Autentikasi dan Otorisasi
10. Proyek Nyata: Aplikasi E-Commerce
11. Sumber Belajar dan Channel Pembelajaran

1. Pengantar Blazor dan .NET 9

Blazor adalah framework dari Microsoft yang memungkinkan Anda membangun aplikasi web interaktif menggunakan C# dan .NET, tanpa harus menulis JavaScript secara langsung. Dengan rilis .NET 9, Blazor semakin matang dan mendukung pengembangan aplikasi web modern dengan performa tinggi.

Dalam panduan ini, Anda akan belajar langkah demi langkah membangun aplikasi e-commerce menggunakan Blazor dan .NET 9, mulai dari setup lingkungan hingga deployment.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai coding, pastikan Anda sudah menyiapkan:

• Visual Studio 2022 atau Visual Studio Code dengan ekstensi C#
• .NET 9 SDK terbaru yang bisa diunduh dari situs resmi .NET
• Browser modern seperti Chrome, Edge, atau Firefox

Perintah untuk cek versi .NET di terminal:

dotnet --version
      

3. Struktur Proyek Blazor

Setelah membuat proyek Blazor, Anda akan melihat struktur folder seperti berikut:

• wwwroot/ - folder untuk file statis seperti CSS, gambar, dan JavaScript
• Pages/ - berisi komponen halaman Blazor (.razor)
• Shared/ - komponen yang digunakan bersama antar halaman
• Program.cs - titik masuk aplikasi dan konfigurasi layanan

4. Membuat Komponen Dasar

Komponen Blazor adalah blok bangunan UI yang dapat digunakan kembali. Komponen dibuat dengan file .razor .

Contoh komponen sederhana:

@code {
    private int count = 0;

    void IncrementCount()
    {
        count++;
    }
}

<h3>Counter</h3>
<p>Klik tombol untuk menambah hitungan:</p>
<button class="btn btn-primary" @onclick="IncrementCount">Klik saya (@count)</button>
      

Komponen ini menampilkan tombol yang ketika diklik akan menambah nilai hitungan.

5. Routing dan Navigasi

Routing memungkinkan navigasi antar halaman. Setiap komponen halaman memiliki directive @page untuk menentukan URL.

Contoh routing:

@page "/produk"

<h3>Daftar Produk</h3>
<p>Ini adalah halaman produk.</p>
      

Navigasi dapat dilakukan menggunakan komponen NavLink :

<NavLink href="/produk" class="nav-link">Produk</NavLink>
      

6. Data Binding dan Event Handling

Blazor mendukung binding data satu arah dan dua arah serta event handling.

Contoh binding dua arah dan event:

<input @bind="namaProduk" placeholder="Masukkan nama produk" />
<p>Nama produk: @namaProduk</p>

@code {
    private string namaProduk = "";
}
      

Contoh event handling tombol:

<button @onclick="TambahProduk">Tambah Produk</button>

@code {
    void TambahProduk()
    {
        // Logika tambah produk
    }
}
      

7. State Management

State management penting untuk menyimpan data yang dibutuhkan antar komponen atau halaman.

Contoh menggunakan service singleton untuk state:

// Service CartState.cs
public class CartState
{
    public List<string> ProdukDalamKeranjang { get; set; } = new();

    public event Action? OnChange;

    public void TambahProduk(string produk)
    {
        ProdukDalamKeranjang.Add(produk);
        NotifyStateChanged();
    }

    private void NotifyStateChanged() => OnChange?.Invoke();
}
      

Daftarkan service ini di Program.cs :

builder.Services.AddSingleton<CartState>();
      

Kemudian inject dan gunakan di komponen:

@inject CartState Cart

<button @onclick="() => Cart.TambahProduk("Produk A")">Tambah Produk A</button>

@code {
    protected override void OnInitialized()
    {
        Cart.OnChange += StateHasChanged;
    }

    public void Dispose()
    {
        Cart.OnChange -= StateHasChanged;
    }
}
      

8. Integrasi API dan HTTP Client

Blazor dapat berkomunikasi dengan backend API menggunakan HttpClient .

Contoh mengambil data produk dari API:

@inject HttpClient Http

<ul>
@foreach(var produk in daftarProduk)
{
    <li>@produk</li>
}
</ul>

@code {
    private List<string> daftarProduk = new();

    protected override async Task OnInitializedAsync()
    {
        daftarProduk = await Http.GetFromJsonAsync<List<string>>("https://api.example.com/produk");
    }
}
      

9. Autentikasi dan Otorisasi

Blazor mendukung autentikasi dan otorisasi untuk mengamankan aplikasi.

Contoh penggunaan AuthorizeView :

<AuthorizeView>
    <Authorized>
        <p>Selamat datang, pengguna terautentikasi!</p>
    </Authorized>
    <NotAuthorized>
        <p>Silakan login untuk mengakses fitur ini.</p>
    </NotAuthorized>
</AuthorizeView>
      

Untuk setup autentikasi, Anda bisa menggunakan ASP.NET Core Identity atau layanan pihak ketiga seperti Azure AD.

10. Proyek Nyata: Aplikasi E-Commerce

Mari kita buat aplikasi e-commerce sederhana dengan fitur utama seperti daftar produk, keranjang belanja, dan checkout.

Langkah 1: Model Produk

public class Produk
{
    public int Id { get; set; }
    public string Nama { get; set; } = string.Empty;
    public decimal Harga { get; set; }
    public string GambarUrl { get; set; } = string.Empty;
}
      

Langkah 2: Komponen Daftar Produk

@code {
    private List<Produk> produkList = new()
    {
        new Produk { Id = 1, Nama = "Sepatu Sneakers", Harga = 350000, GambarUrl = "https://placehold.co/150x150/png?text=Sepatu" },
        new Produk { Id = 2, Nama = "Tas Ransel", Harga = 450000, GambarUrl = "https://placehold.co/150x150/png?text=Tas" },
        new Produk { Id = 3, Nama = "Jam Tangan", Harga = 750000, GambarUrl = "https://placehold.co/150x150/png?text=Jam+Tangan" }
    };

    private List<Produk> keranjang = new();

    void TambahKeKeranjang(Produk produk)
    {
        keranjang.Add(produk);
    }
}

<h3>Daftar Produk</h3>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
    @foreach (var produk in produkList)
    {
        <div class="border rounded-lg p-4 shadow hover:shadow-lg">
            <img src="@produk.GambarUrl" alt="Gambar produk @produk.Nama" class="w-full h-40 object-cover rounded mb-3" />
            <h4 class="font-semibold text-lg">@produk.Nama</h4>
            <p class="text-indigo-700 font-bold">Rp @produk.Harga.ToString("N0")</p>
            <button class="mt-2 bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700" @onclick="() => TambahKeKeranjang(produk)">
                <i class="fas fa-cart-plus mr-2"></i>Tambah ke Keranjang
            </button>
        </div>
    }
</div>

<h3 class="mt-8">Keranjang Belanja (@keranjang.Count) Produk</h3>
<ul>
    @foreach(var item in keranjang)
    {
        <li>@item.Nama - Rp @item.Harga.ToString("N0")</li>
    }
</ul>
      

Langkah 3: Checkout Sederhana

<h3>Checkout</h3>
<p>Total Harga: Rp @keranjang.Sum(p => p.Harga).ToString("N0")</p>
<button class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700" @onclick="Checkout">Bayar Sekarang</button>

@code {
    void Checkout()
    {
        if (keranjang.Count == 0)
        {
            Console.WriteLine("Keranjang kosong.");
            return;
        }
        // Logika pembayaran dan konfirmasi
        keranjang.Clear();
        Console.WriteLine("Pembayaran berhasil. Terima kasih!");
    }
}
      

Setelah klik "Bayar Sekarang", keranjang akan dikosongkan dan pembayaran dianggap berhasil.

11. Sumber Belajar dan Channel Pembelajaran

Berikut beberapa sumber dan channel yang dapat membantu Anda memperdalam Blazor dan .NET 9:

• Dokumentasi Resmi Blazor (.NET 9)
• Channel YouTube Tim Corey (Tutorial Blazor dan .NET)
• Channel YouTube Official .NET
• Repository GitHub ASP.NET Core
• Pluralsight Course: Building Web Applications with Blazor