Daftar Isi

1. Pengantar Blazor dan C#
2. Persiapan Lingkungan Pengembangan
3. Struktur Proyek Blazor
4. Membuat Komponen Blazor Pertama
5. Data Binding dan Event Handling
6. Routing dan Navigasi
7. Interaktivitas dengan C# di Blazor
8. Mengakses API dan Data Eksternal
9. Deploy Aplikasi Blazor
10. Sumber Belajar dan Source Code

1. Pengantar Blazor dan C#

Blazor adalah framework dari Microsoft yang memungkinkan Anda membuat aplikasi web interaktif menggunakan bahasa C# dan .NET, tanpa harus menulis JavaScript secara langsung. Dengan Blazor, Anda dapat membangun aplikasi Single Page Application (SPA) yang berjalan di browser menggunakan WebAssembly atau di server.

C# adalah bahasa pemrograman modern yang kuat dan mudah dipelajari, sangat cocok untuk pengembangan aplikasi web, desktop, dan mobile. Dalam ebook ini, Anda akan belajar bagaimana menggabungkan Blazor dan C# untuk membuat aplikasi web interaktif dengan mudah.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai membuat aplikasi Blazor, Anda perlu menyiapkan beberapa alat berikut:

• Visual Studio 2022 (atau versi terbaru) dengan workload .NET desktop development dan ASP.NET and web development .
• .NET SDK 7.0 atau versi terbaru, dapat diunduh dari dotnet.microsoft.com .
• Browser modern seperti Microsoft Edge, Chrome, atau Firefox.

Setelah menginstal, Anda dapat memverifikasi instalasi dengan membuka terminal dan menjalankan perintah:

dotnet --version

Jika muncul versi .NET, berarti instalasi berhasil.

3. Struktur Proyek Blazor

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

• wwwroot/ - Folder untuk file statis seperti gambar, CSS, dan JavaScript.
• Pages/ - Folder untuk komponen halaman Blazor (.razor files).
• Shared/ - Folder untuk komponen yang digunakan bersama di beberapa halaman.
• Program.cs - Titik masuk aplikasi dan konfigurasi layanan.

Contoh isi Program.cs untuk aplikasi Blazor WebAssembly:

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();

4. Membuat Komponen Blazor Pertama

Komponen adalah blok bangunan utama aplikasi Blazor. Komponen ditulis dalam file .razor dan dapat berisi HTML, C#, dan binding data.

Contoh komponen sederhana HelloWorld.razor :

<h3>Halo, Blazor!</h3>
<p>Ini adalah komponen Blazor pertama Anda.</p>

Untuk menampilkan komponen ini, Anda bisa menambahkannya ke halaman Index.razor dengan menulis:

<HelloWorld />

5. Data Binding dan Event Handling

Blazor mendukung data binding dua arah dan event handling yang memudahkan interaktivitas.

Contoh komponen dengan input dan binding:

@code {
    private string nama = "";
}

<h3>Halo, @nama!</h3>
<input @bind="nama" placeholder="Masukkan nama Anda" class="border rounded p-2 w-full max-w-sm" />

Contoh event handling tombol:

@code {
    private int hitung = 0;

    private void TambahHitung()
    {
        hitung++;
    }
}

<p>Anda sudah menekan tombol sebanyak: @hitung</p>
<button @onclick="TambahHitung" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Tekan Saya</button>

6. Routing dan Navigasi

Blazor menggunakan routing untuk navigasi antar halaman. Anda dapat menentukan route dengan directive @page di bagian atas file .razor .

Contoh halaman dengan route:

@page "/tentang"

<h3>Halaman Tentang</h3>
<p>Ini adalah halaman tentang aplikasi Blazor Anda.</p>

Untuk navigasi, gunakan komponen <NavLink> atau NavigationManager di C#.

<NavLink href="/tentang" class="text-indigo-600 hover:underline">Tentang</NavLink>

7. Interaktivitas dengan C# di Blazor

Anda dapat menulis logika interaktif menggunakan C# langsung di komponen Blazor. Contoh membuat daftar tugas (todo list) sederhana:

@code {
    private string tugasBaru = "";
    private List<string> daftarTugas = new();

    private void TambahTugas()
    {
        if (!string.IsNullOrWhiteSpace(tugasBaru))
        {
            daftarTugas.Add(tugasBaru);
            tugasBaru = "";
        }
    }

    private void HapusTugas(string tugas)
    {
        daftarTugas.Remove(tugas);
    }
}

<h3>Daftar Tugas</h3>
<input @bind="tugasBaru" placeholder="Masukkan tugas baru" class="border rounded p-2 w-full max-w-sm" />
<button @onclick="TambahTugas" class="ml-2 bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Tambah</button>

<ul class="mt-4 list-disc list-inside">
    @foreach (var tugas in daftarTugas)
    {
        <li class="flex justify-between items-center">
            @tugas
            <button @onclick="() => HapusTugas(tugas)" class="text-red-600 hover:text-red-800 ml-4"><i class="fas fa-trash-alt"></i></button>
        </li>
    }
</ul>

8. Mengakses API dan Data Eksternal

Blazor dapat mengakses API eksternal menggunakan HttpClient . Contoh mengambil data dari API publik:

@inject HttpClient Http

@code {
    private List<Post> posts;

    protected override async Task OnInitializedAsync()
    {
        posts = await Http.GetFromJsonAsync<List<Post>>("https://jsonplaceholder.typicode.com/posts");
    }

    public class Post
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Body { get; set; }
    }
}

<h3>Daftar Post</h3>
@if (posts == null)
{
    <p>Memuat data...</p>
}
else
{
    <ul class="list-disc list-inside space-y-2">
        @foreach (var post in posts.Take(5))
        {
            <li>
                <strong>@post.Title</strong>
                <p>@post.Body</p>
            </li>
        }
    </ul>
}

9. Deploy Aplikasi Blazor

Setelah aplikasi selesai dibuat, Anda dapat melakukan deploy ke berbagai platform seperti Azure, GitHub Pages, atau server hosting lain.

Contoh perintah publish untuk Blazor WebAssembly:

dotnet publish -c Release

Folder hasil publish akan berada di bin/Release/net7.0/publish/wwwroot dan dapat diupload ke server hosting.

10. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar dan channel yang dapat membantu Anda memperdalam Blazor dan C#:

• Microsoft Official Blazor Documentation
• Tim Corey - YouTube Channel (C# & Blazor tutorials)
• Raw Coding - YouTube Channel (Blazor & .NET)
• Blazor Sample Projects on GitHub
• Blazor University - Tutorial Website

Berikut contoh source code lengkap aplikasi todo list interaktif yang bisa Anda gunakan sebagai referensi:

@code {
    private string tugasBaru = "";
    private List<string> daftarTugas = new();

    private void TambahTugas()
    {
        if (!string.IsNullOrWhiteSpace(tugasBaru))
        {
            daftarTugas.Add(tugasBaru);
            tugasBaru = "";
        }
    }

    private void HapusTugas(string tugas)
    {
        daftarTugas.Remove(tugas);
    }
}

<h3>Daftar Tugas</h3>
<input @bind="tugasBaru" placeholder="Masukkan tugas baru" class="border rounded p-2 w-full max-w-sm" />
<button @onclick="TambahTugas" class="ml-2 bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Tambah</button>

<ul class="mt-4 list-disc list-inside">
    @foreach (var tugas in daftarTugas)
    {
        <li class="flex justify-between items-center">
            @tugas
            <button @onclick="() => HapusTugas(tugas)" class="text-red-600 hover:text-red-800 ml-4"><i class="fas fa-trash-alt"></i></button>
        </li>
    }
</ul>

Semoga ebook ini membantu Anda memulai perjalanan membuat aplikasi web interaktif dengan Blazor dan C# dengan mudah dan menyenangkan!