Panduan Lengkap Membangun Situs E-Commerce dengan Blazor .NET 6

Daftar Isi

Pengantar Blazor dan .NET 6
Persiapan Lingkungan Pengembangan
Membuat Struktur Proyek Blazor
Membuat Komponen Utama
Routing dan Navigasi
Data Binding dan Event Handling
Integrasi API dan Backend
Autentikasi dan Otorisasi
Membuat Keranjang Belanja
Proses Checkout dan Pembayaran
Deploy Aplikasi ke Server
Sumber Belajar dan Source Code

1. Pengantar Blazor dan .NET 6

Blazor adalah framework dari Microsoft yang memungkinkan pengembangan aplikasi web interaktif menggunakan C# dan .NET, tanpa harus menulis JavaScript secara langsung. Dengan Blazor, Anda dapat membangun aplikasi web modern yang berjalan di browser menggunakan WebAssembly atau di server dengan Blazor Server.

.NET 6 adalah versi terbaru dari platform .NET yang membawa banyak peningkatan performa dan fitur baru. Dalam panduan ini, kita akan menggunakan Blazor WebAssembly dengan .NET 6 untuk membangun situs e-commerce yang lengkap.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai membangun aplikasi, pastikan Anda sudah menyiapkan lingkungan pengembangan berikut:

Visual Studio 2022 atau Visual Studio Code dengan ekstensi C#
.NET 6 SDK terbaru (unduh dari dotnet.microsoft.com )
Browser modern seperti Chrome, Firefox, atau Edge
Git untuk version control (opsional tapi direkomendasikan)

Setelah semua terpasang, buka terminal dan jalankan perintah berikut untuk memastikan .NET 6 sudah terinstall:

$ dotnet --version
6.0.xxxxx

Tampilan Visual Studio 2022 dengan proyek Blazor .NET 6 terbuka

3. Membuat Struktur Proyek Blazor

Kita akan membuat proyek Blazor WebAssembly baru dengan template standar. Jalankan perintah berikut di terminal:

$ dotnet new blazorwasm -o ECommerceBlazorApp
$ cd ECommerceBlazorApp
$ dotnet run

Struktur folder utama yang akan kita gunakan:

wwwroot/ - folder untuk file statis seperti gambar, CSS, dan JS
Pages/ - folder untuk halaman Blazor (.razor)
Shared/ - komponen yang digunakan bersama seperti navbar dan footer
Data/ - tempat menyimpan model dan layanan data

Diagram struktur folder proyek Blazor WebAssembly dengan folder Pages, Shared, Data, dan wwwroot

4. Membuat Komponen Utama

Komponen utama yang akan kita buat meliputi:

ProductList.razor - menampilkan daftar produk
ProductCard.razor - kartu produk individual
ShoppingCart.razor - keranjang belanja
Checkout.razor - halaman checkout

Contoh kode ProductCard.razor :

@code {
  [Parameter]
  public Product Product { get; set; }

  [Parameter]
  public EventCallback<Product> OnAddToCart { get; set; }
}


  
  @Product.Name
  Rp @Product.Price.ToString("N0")

Tampilan kartu produk e-commerce dengan gambar produk, nama, harga, dan tombol tambah ke keranjang

5. Routing dan Navigasi

Blazor menggunakan routing berbasis komponen. Setiap halaman memiliki directive @page untuk menentukan URL-nya.

Contoh routing di ProductList.razor :

@page "/products"

<h2>Daftar Produk</h2>
<ProductCard Product="product" OnAddToCart="AddToCart" />

@code {
  List<Product> products = new();

  protected override void OnInitialized()
  {
    // Load produk dari service atau API
  }

  void AddToCart(Product product)
  {
    // Tambah produk ke keranjang
  }
}

Navigasi antar halaman dapat menggunakan komponen <NavLink> yang otomatis menandai link aktif.

Tampilan menu navigasi Blazor dengan link aktif dan halaman produk

6. Data Binding dan Event Handling

Blazor mendukung two-way data binding menggunakan directive @bind dan event handling dengan @onclick atau event lain.

Contoh input pencarian produk dengan binding:

<input type="text" placeholder="Cari produk..."
       @bind="searchTerm"
       class="border rounded px-3 py-2 w-full mb-4" />

@code {
  string searchTerm = "";

  void OnSearchChanged(ChangeEventArgs e)
  {
    searchTerm = e.Value.ToString();
    // Filter produk berdasarkan searchTerm
  }
}

Tampilan input pencarian produk dengan binding data dan event handling di Blazor

7. Integrasi API dan Backend

Untuk mengambil data produk dan mengirim data transaksi, kita akan menggunakan HttpClient untuk berkomunikasi dengan API backend.

Contoh pemanggilan API untuk mendapatkan daftar produk:

@inject HttpClient Http

@code {
  List<Product> products = new();

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

Pastikan API backend sudah menyediakan endpoint yang sesuai dan mendukung CORS agar aplikasi Blazor dapat mengaksesnya.

Ilustrasi diagram integrasi aplikasi Blazor dengan API backend menggunakan HttpClient

8. Autentikasi dan Otorisasi

Untuk mengamankan aplikasi, kita perlu menambahkan autentikasi pengguna. Blazor mendukung autentikasi berbasis token JWT, ASP.NET Core Identity, dan layanan eksternal seperti Azure AD.

Contoh sederhana menggunakan autentikasi token JWT:

// Tambahkan HttpClient dengan header Authorization
Http.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);

// Cek status login dan tampilkan konten sesuai role
@attribute [Authorize]

@code {
  // Logic autentikasi dan otorisasi
}

Anda juga bisa menggunakan template Blazor yang sudah include autentikasi saat membuat proyek baru.

Ilustrasi proses login dan autentikasi pengguna di aplikasi Blazor

9. Membuat Keranjang Belanja

Keranjang belanja menyimpan produk yang dipilih pengguna sebelum checkout. Kita akan menggunakan service singleton untuk menyimpan state keranjang.

Contoh service keranjang belanja:

public class ShoppingCartService
{
  public List<Product> Items { get; private set; } = new();

  public event Action OnChange;

  public void AddToCart(Product product)
  {
    Items.Add(product);
    NotifyStateChanged();
  }

  public void RemoveFromCart(Product product)
  {
    Items.Remove(product);
    NotifyStateChanged();
  }

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

Daftarkan service ini di Program.cs dengan builder.Services.AddSingleton<ShoppingCartService>(); dan inject di komponen yang membutuhkan.

Tampilan keranjang belanja di aplikasi e-commerce Blazor dengan daftar produk dan tombol hapus

10. Proses Checkout dan Pembayaran

Halaman checkout akan menampilkan ringkasan pesanan dan form pengisian data pengiriman serta metode pembayaran.

Contoh form checkout sederhana:

<EditForm Model="order" OnValidSubmit="HandleValidSubmit">
  <DataAnnotationsValidator />
  <ValidationSummary />

  <InputText id="name" @bind-Value="order.Name" placeholder="Nama Lengkap" class="border rounded p-2 w-full mb-3" />
  <InputText id="address" @bind-Value="order.Address" placeholder="Alamat Pengiriman" class="border rounded p-2 w-full mb-3" />
  <InputText id="phone" @bind-Value="order.Phone" placeholder="Nomor Telepon" class="border rounded p-2 w-full mb-3" />

  <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Bayar</button>
</EditForm>

@code {
  Order order = new();

  void HandleValidSubmit()
  {
    // Proses pembayaran dan simpan data pesanan
  }
}