Install Bootstrap Dan Membuat Layout Di Svelte Kit Di Laravel 9 Dan Svelte — Part 3

Membangun aplikasi web di era modern memerlukan pondasi yang kokoh. Framework modern memberikan fleksibilitas luar biasa bagi developer untuk menghadirkan fitur kompleks secara cepat tanpa mengabaikan aspek keamanan dan keandalan sistem.

Tahapan Implementasi & Walkthrough Kode

Berikut adalah langkah demi langkah teknis yang dapat Anda ikuti langsung pada codebase Anda:

Tahap 1: Penulisan Kode & Konfigurasi

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%svelte.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap" rel="stylesheet">
		%svelte.head%
		<style>
			body {
				background-color: lightgray;
				font-family: 'Quicksand', sans-serif;
			}
		</style>
	</head>
	<body>
		<div>%svelte.body%</div>
	</body>
</html>

Tahap 2: Penulisan Kode & Konfigurasi

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

Tahap 3: Penulisan Kode & Konfigurasi

<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap" rel="stylesheet">

Tahap 4: Penulisan Kode & Konfigurasi

<style>
    body {
        background-color: lightgray;
        font-family: 'Quicksand', sans-serif;
    }
</style>

Tahap 5: Penulisan Kode & Konfigurasi

<header>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <div class="container">
            <a sveltekit:prefetch href="/" class="navbar-brand fw-bold">LARAVEL + SVELTE KIT</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
                aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a sveltekit:prefetch href="/" class="nav-link" aria-current="page">HOME</a>
                    </li>
                    <li class="nav-item">
                        <a sveltekit:prefetch href="/posts" class="nav-link">POSTS</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
</header>

<div class="container" style="margin-top: 80px">
    <div class="row">
        <div class="col-md-12">

            <!-- render content-->
            <slot></slot>
        </div>
    </div>
</div>

Tahap 6: Penulisan Kode & Konfigurasi

<div class="p-5 mb-4 bg-light rounded-3 shadow-sm border-0">
    <div class="container-fluid py-5">
        <h2 class="display-6 fw-bold">LARAVEL + SVELTE KIT</h2>
        <p class="col-md-8 fs-4">Belajar Laravel dengan Svelte KIT di SantriKoding.com</p>
        <a href="https://santrikoding.com/kategori/svelte" target="_blank" class="btn btn-primary btn-lg" type="button">Selengkapnya</a>
    </div>
</div>

Kesimpulan

Dengan mengikuti langkah-langkah terstruktur di atas, implementasi modul Anda akan jauh lebih rapi, aman dari bug umum, serta siap diskalakan ke lingkungan produksi.

Nantikan artikel tutorial praktis lainnya seputar fullstack development, microservices, dan otomasi AI di Blog Engineering SiHubung. Selamat mencoba!