🎯 `Tujuan`

Membuat template di Laravel menggunakan Blade Template Engine dan Tailwind CSS untuk:

Memisahkan desain dari konten.
Mempermudah pengelolaan tampilan.
Menjaga konsistensi desain saat melakukan perubahan atau pemeliharaan.

⏰ `Konteks`

Template ini cocok untuk proyek Laravel yang memerlukan desain responsif dan konsisten. Dengan Blade dan Tailwind CSS, kita bisa membangun struktur halaman utama yang dapat diwariskan (inherited) ke halaman lainnya.

🪵 `Hal yang Diperlukan`

Laravel telah diinstal.
Tailwind CSS terpasang (via npm atau CDN).

📋 `Langkah-Langkah`

STEP 1: Instalasi Laravel
- Jalankan perintah berikut untuk membuat proyek Laravel baru:
```
bash
Copy code
composer create-project laravel/laravel nama-project
```

STEP 2: Menyiapkan Layout dengan Tailwind CSS

Buat file layout utama

Buat folder layouts di dalam resources/views.

Buat file layout.blade.php dengan struktur HTML dasar berikut:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
    <!-- Tambahkan CDN Tailwind CSS -->
    <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css>" rel="stylesheet">
</head>
<body class="bg-gray-100 text-gray-900">

    <header class="bg-blue-600 p-4 text-white">
        <h1 class="text-2xl font-bold">My Laravel App</h1>
    </header>

    <main class="container mx-auto py-8">
        @yield('content')
    </main>

    <footer class="bg-blue-600 p-4 text-white text-center">
        <p>&copy; 2024 My Laravel App</p>
    </footer>

</body>
</html>

Penjelasan:
- @yield: Memberi placeholder untuk konten khusus di setiap halaman.
- Tailwind CSS CDN: Styling langsung aktif tanpa instalasi tambahan.

STEP 3: Membuat Halaman dengan Blade Template

Buat halaman utama (child page)

Buat file home.blade.php di folder resources/views.

html
Copy code
@extends('layouts.layout')

@section('title', 'Home Page')

@section('content')
    <div class="bg-white p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-blue-700 mb-4">Selamat Datang di Halaman Utama</h2>
        <p class="text-gray-700">Ini adalah konten utama halaman dengan Tailwind CSS styling dari CDN.</p>
    </div>
@endsection

Penjelasan:

@extends: Menggunakan template utama layout.blade.php.
@section: Mendefinisikan konten untuk slot yang disediakan oleh @yield.

Tampilkan halaman di route Laravel

Buka file routes/web.php dan tambahkan:

php
Copy code
Route::get('/', function () {
    return view('home');
});

STEP 4: Jalankan Server Laravel
- Jalankan perintah berikut:
```
bash
Copy code
php artisan serve
```
- Buka browser dan akses http://127.0.0.1:8000.
- Anda akan melihat halaman utama dengan styling Tailwind CSS.

Kesimpulan

Menggunakan Blade Template Engine dengan Tailwind CSS via CDN:

Memberikan struktur yang bersih dan modular.

🎯 Tujuan

⏰ Konteks

🪵 Hal yang Diperlukan

📋 Langkah-Langkah

🎯 `Tujuan`

⏰ `Konteks`

🪵 `Hal yang Diperlukan`

📋 `Langkah-Langkah`