Daftar Isi

1. Pengantar dan Gambaran Umum
2. Persiapan Lingkungan Pengembangan
3. Membuat Struktur Proyek Blazor
4. Desain UI Website Booking Resor
5. Integrasi dengan Azure
6. Membangun Fitur Booking dan Manajemen
7. Deploy Website ke Azure
8. Sumber Belajar dan Source Code

1. Pengantar dan Gambaran Umum

Dalam ebook ini, Anda akan belajar bagaimana membangun website booking resor profesional menggunakan Blazor, framework web modern dari Microsoft yang memungkinkan pembuatan aplikasi web interaktif dengan C# dan Razor, serta memanfaatkan layanan cloud Azure untuk hosting dan manajemen data.

Website booking resor ini akan memiliki fitur utama seperti pencarian kamar, pemesanan, manajemen ketersediaan, dan integrasi pembayaran. Dengan pendekatan step-by-step, Anda akan memahami mulai dari setup lingkungan, pembuatan UI, backend, hingga deployment.

2. Persiapan Lingkungan Pengembangan

Sebelum memulai pengembangan, pastikan Anda sudah menyiapkan beberapa hal berikut:

• Visual Studio 2022 atau Visual Studio Code dengan ekstensi C# dan Blazor
• .NET 7 SDK terbaru terinstall di komputer Anda
• Akun Microsoft Azure aktif untuk deployment dan layanan cloud
• Pengetahuan dasar C# dan HTML/CSS

Jika belum memiliki akun Azure, Anda bisa mendaftar di https://azure.microsoft.com/free/ untuk mendapatkan kredit gratis.

3. Membuat Struktur Proyek Blazor

Langkah pertama adalah membuat proyek Blazor WebAssembly yang akan menjadi basis website booking resor.

1. Buka Visual Studio, pilih Create a new project .
2. Pilih template Blazor WebAssembly App , klik Next.
3. Beri nama proyek, misalnya ResortBookingApp , lalu klik Create.
4. Pilih opsi ASP.NET Core hosted agar backend API otomatis dibuat, lalu klik Create.

Struktur proyek akan terdiri dari tiga bagian utama:

• Client - aplikasi Blazor WebAssembly frontend
• Server - backend API ASP.NET Core
• Shared - model dan kode yang dibagikan antara Client dan Server

4. Desain UI Website Booking Resor

Kita akan mulai dengan membuat halaman utama yang menampilkan daftar kamar resor yang bisa dipesan. Gunakan komponen Blazor dan Tailwind CSS untuk styling.

Contoh kode komponen daftar kamar (Rooms.razor):

@code {
  public class Room
  {
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public decimal PricePerNight { get; set; }
    public string ImageUrl { get; set; }
  }

  private List<Room> rooms = new List<Room>()
  {
    new Room { Id=1, Name="Deluxe Room", Description="Kamar luas dengan pemandangan laut", PricePerNight=1200000, ImageUrl="https://placehold.co/400x250/png?text=Deluxe+Room" },
    new Room { Id=2, Name="Suite Room", Description="Kamar mewah dengan fasilitas lengkap", PricePerNight=2000000, ImageUrl="https://placehold.co/400x250/png?text=Suite+Room" },
    new Room { Id=3, Name="Standard Room", Description="Kamar nyaman dengan harga terjangkau", PricePerNight=800000, ImageUrl="https://placehold.co/400x250/png?text=Standard+Room" }
  };
}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  @foreach(var room in rooms)
  {
    <div class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col">
      <img src="@room.ImageUrl" alt="Foto kamar @room.Name dengan pemandangan dan fasilitas lengkap" class="w-full h-48 object-cover" />
      <div class="p-4 flex flex-col flex-grow">
        <h3 class="text-xl font-semibold mb-2">@room.Name</h3>
        <p class="text-gray-600 flex-grow">@room.Description</p>
        <p class="mt-4 font-bold text-indigo-700">Rp @room.PricePerNight.ToString("N0") / malam</p>
        <button class="mt-4 bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition">Pesan Sekarang</button>
      </div>
    </div>
  }
</div>
      

Kode di atas membuat grid responsif yang menampilkan tiga tipe kamar dengan gambar, deskripsi, harga, dan tombol pemesanan.

5. Integrasi dengan Azure

Untuk menyimpan data booking dan kamar, kita akan menggunakan Azure SQL Database dan Azure App Service untuk hosting backend API.

Langkah-langkah integrasi:

1. Buat Azure SQL Database melalui portal Azure.
2. Konfigurasi connection string di appsettings.json pada proyek Server.
3. Buat model Entity Framework Core untuk tabel kamar dan booking.
4. Gunakan migration EF Core untuk membuat skema database.
5. Deploy backend API ke Azure App Service.

Contoh konfigurasi connection string di appsettings.json :

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=tcp:namaserver.database.windows.net,1433;Initial Catalog=ResortBookingDb;Persist Security Info=False;User ID=adminuser;Password=PasswordAnda;MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;"
  }
}
      

6. Membangun Fitur Booking dan Manajemen

Berikut contoh kode API endpoint untuk membuat booking di backend Server (BookingController.cs):

using Microsoft.AspNetCore.Mvc;
using ResortBookingApp.Shared;
using ResortBookingApp.Server.Data;
using System.Threading.Tasks;

namespace ResortBookingApp.Server.Controllers
{
  [ApiController]
  [Route("api/[controller]")]
  public class BookingController : ControllerBase
  {
    private readonly ApplicationDbContext _context;

    public BookingController(ApplicationDbContext context)
    {
      _context = context;
    }

    [HttpPost]
    public async Task<ActionResult> CreateBooking(Booking booking)
    {
      _context.Bookings.Add(booking);
      await _context.SaveChangesAsync();
      return Ok(new { message = "Booking berhasil dibuat", bookingId = booking.Id });
    }
  }
}
      

Dan contoh model Booking di Shared/Booking.cs :

using System;

namespace ResortBookingApp.Shared
{
  public class Booking
  {
    public int Id { get; set; }
    public int RoomId { get; set; }
    public string CustomerName { get; set; }
    public string CustomerEmail { get; set; }
    public DateTime CheckInDate { get; set; }
    public DateTime CheckOutDate { get; set; }
    public int NumberOfGuests { get; set; }
  }
}
      

Pada sisi Client, Anda bisa membuat form booking yang mengirim data ke API ini menggunakan HttpClient Blazor.

7. Deploy Website ke Azure

Setelah aplikasi selesai dikembangkan, langkah terakhir adalah melakukan deploy ke Azure agar website dapat diakses publik.

1. Publish proyek Server ke Azure App Service melalui Visual Studio dengan opsi Publish to Azure .
2. Pastikan connection string sudah benar dan environment variable di Azure sudah diset.
3. Publish proyek Client Blazor WebAssembly ke Azure Static Web Apps atau juga ke App Service.
4. Uji coba website di URL yang diberikan Azure.

Anda juga bisa menggunakan Azure DevOps atau GitHub Actions untuk otomatisasi deployment.

8. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar dan referensi yang sangat membantu dalam membangun website booking resor dengan Blazor dan Azure:

• Dokumentasi Resmi Blazor - Microsoft Learn
• Azure App Service - Hosting Web Apps
• Azure SQL Database Documentation
• Channel YouTube .NET Official
• Source Code ASP.NET Core di GitHub

Source Code Contoh Proyek:

• https://github.com/username/ResortBookingApp

Anda dapat meng-clone repositori tersebut dan mulai eksplorasi serta modifikasi sesuai kebutuhan.