[{"data":1,"prerenderedAt":95},["ShallowReactive",2],{"\u002Fposts\u002Fblade-template-layouting-dengan-bootstrap-5-dmwo?{\"username\":\"irezabdullah\"}":3},{"success":4,"message":5,"data":6},true,"Post retrieved successfully",{"post":7,"seriesInfo":25,"seriesItems":28,"seoDescription":94},{"id":8,"title":9,"slug":10,"body":11,"cover_image_path":12,"view_count":13,"part_number":14,"created_at":15,"updated_at":16,"category":17,"author":20},50,"Blade Template & Layouting dengan Bootstrap 5","blade-template-layouting-dengan-bootstrap-5-dmwo","## 🎯 Tujuan\n\nMemahami konsep **Blade Template** dan cara membuat layout utama yang dapat digunakan ulang di beberapa halaman, dengan routing lewat **Controller**.\n\n---\n\n## 🧩 Materi & Langkah Praktik\n\n### 1. Apa itu Blade Template?\n\n* **Blade** adalah template engine bawaan Laravel.\n* Kita bisa menggunakan `@yield`, `@section`, dan `@extends` untuk membuat layout utama dan mewarisinya ke halaman lain.\n* Tujuannya agar tampilan **konsisten** dan **mudah dikelola**.\n\n---\n\n### 2. Buat Layout Utama\n\n📂 Struktur folder:\n\n```\nresources\u002F\n└── views\u002F\n    └── layouts\u002F\n        └── main.blade.php\n```\n\n📝 `resources\u002Fviews\u002Flayouts\u002Fmain.blade.php`:\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Ctitle>@yield('title', 'CRUD Produk')\u003C\u002Ftitle>\n    \u003Clink href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbootstrap@5.3.3\u002Fdist\u002Fcss\u002Fbootstrap.min.css\" rel=\"stylesheet\">\n\u003C\u002Fhead>\n\u003Cbody class=\"bg-light\">\n    \u003Cnav class=\"navbar navbar-dark bg-dark\">\n        \u003Cdiv class=\"container\">\n            \u003Ca href=\"\u002F\" class=\"navbar-brand\">CRUD Produk\u003C\u002Fa>\n\n            \u003Cul class=\"navbar-nav flex-row ms-auto\">\n                \u003Cli class=\"nav-item me-3\">\n                    \u003Ca href=\"\u002F\" class=\"nav-link text-white\">Home\u003C\u002Fa>\n                \u003C\u002Fli>\n                \u003Cli class=\"nav-item me-3\">\n                    \u003Ca href=\"\u002Fabout\" class=\"nav-link text-white\">About\u003C\u002Fa>\n                \u003C\u002Fli>\n                \u003Cli class=\"nav-item me-3\">\n                    \u003Ca href=\"\u002Fcontact\" class=\"nav-link text-white\">Contact\u003C\u002Fa>\n                \u003C\u002Fli>\n            \u003C\u002Ful>\n        \u003C\u002Fdiv>\n    \u003C\u002Fnav>\n\n    \u003Cdiv class=\"container mt-4\">\n        @yield('content')\n    \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n---\n\n### 3. Buat Controller\n\nJalankan perintah:\n\n```bash\nphp artisan make:controller HomeController\n```\n\n📝 `app\u002FHttp\u002FControllers\u002FHomeController.php`:\n\n```php\n\u003C?php\n\nnamespace App\\Http\\Controllers;\n\nuse Illuminate\\Http\\Request;\n\nclass HomeController extends Controller\n{\n    public function home()\n    {\n        return view('home');\n    }\n\n    public function about()\n    {\n        return view('about');\n    }\n\n    public function contact()\n    {\n        $data = [\n            'name' => 'John Doe',\n            'email' => 'john@example.com'\n        ];\n        return view('contact', $data);\n    }\n}\n```\n\n---\n\n### 4. Buat Halaman View\n\n📂 Struktur folder:\n\n```\nresources\u002F\n└── views\u002F\n    ├── layouts\u002F\n    │   └── main.blade.php\n    ├── home.blade.php\n    ├── about.blade.php\n    └── contact.blade.php\n```\n\n#### 📝 `resources\u002Fviews\u002Fhome.blade.php`:\n\n```html\n@extends('layouts.main')\n\n@section('title', 'Halaman Utama')\n\n@section('content')\n\u003Cdiv class=\"text-center\">\n    \u003Ch1>Selamat Datang di CRUD Produk\u003C\u002Fh1>\n    \u003Cp class=\"lead\">Latihan Laravel untuk Pemula\u003C\u002Fp>\n\u003C\u002Fdiv>\n@endsection\n```\n\n#### 📝 `resources\u002Fviews\u002Fabout.blade.php`:\n\n```html\n@extends('layouts.main')\n\n@section('title', 'Tentang Aplikasi')\n\n@section('content')\n\u003Cdiv class=\"card\">\n    \u003Cdiv class=\"card-body\">\n        \u003Ch4>Tentang Aplikasi\u003C\u002Fh4>\n        \u003Cp>Aplikasi ini dibuat untuk latihan CRUD menggunakan Laravel dan Bootstrap 5.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n@endsection\n```\n\n#### 📝 `resources\u002Fviews\u002Fcontact.blade.php`:\n\n```html\n@extends('layouts.main')\n\n@section('title', 'Kontak')\n\n@section('content')\n\u003Cdiv class=\"card\">\n    \u003Cdiv class=\"card-body\">\n        \u003Ch4>Kontak\u003C\u002Fh4>\n        \u003Cp>Nama: {{ $name }}\u003C\u002Fp>\n        \u003Cp>Email: {{ $email }}\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n@endsection\n```\n\n---\n\n### 5. Atur Route\n\n📝 `routes\u002Fweb.php`:\n\n```php\nuse App\\Http\\Controllers\\HomeController;\n\nRoute::get('\u002F', [HomeController::class, 'home']);\nRoute::get('\u002Fabout', [HomeController::class, 'about']);\nRoute::get('\u002Fcontact', [HomeController::class, 'contact']);\n```\n\n---\n\n## ✅ Struktur Akhir Project\n\n```\nproject-laravel\u002F\n├── app\u002F\n│   └── Http\u002F\n│       └── Controllers\u002F\n│           └── HomeController.php\n├── resources\u002F\n│   └── views\u002F\n│       ├── layouts\u002F\n│       │   └── main.blade.php\n│       ├── home.blade.php\n│       ├── about.blade.php\n│       └── contact.blade.php\n├── routes\u002F\n│   └── web.php\n└── vendor\u002F\n```\n\n---\n\n##### Screenshoot salah satu halaman\nHalaman **Home**\n![](https:\u002F\u002Fi.imgur.com\u002F04l4S77.png)\n\n---\nHalaman **About**\n![](https:\u002F\u002Fi.imgur.com\u002FRwhVcRL.png)","https:\u002F\u002Fcdn.rezweb.my.id\u002Fposts\u002Fy1qWx7tTHI6HFHT4ln5tmzJiufuiqyxWowN1BvXr.jpg",1200,3,"2025-10-14T15:58:45+07:00","2026-09-07T11:59:38+07:00",{"name":18,"slug":19},"LARAVEL","laravel",{"id":21,"name":22,"username":23,"avatar":24},1,"Irez Abdullah","irezabdullah","https:\u002F\u002Fcdn.rezweb.my.id\u002Favatars\u002Fd139726e-348f-4dab-95c6-bb87e2ad125e.jpeg",{"name":26,"slug":27},"Belajar Laravel dari Nol (Praktikum Web Framework) – Ringkas & Praktis","belajar-laravel-dari-nol-praktikum-web-framework-ringkas-praktis",[29,33,38,39,44,49,54,59,64,69,74,79,84,89],{"id":30,"slug":31,"title":32,"part_number":21},48,"pengenalan-web-framework-instalasi-laravel","Pengenalan Web Framework & Instalasi Laravel",{"id":34,"slug":35,"title":36,"part_number":37},49,"struktur-folder-routing-dasar","Struktur Folder & Routing Dasar",2,{"id":8,"slug":10,"title":9,"part_number":14},{"id":40,"slug":41,"title":42,"part_number":43},51,"database-migration-qbsa","Database & Migration",4,{"id":45,"slug":46,"title":47,"part_number":48},52,"model-seeder","Model & Seeder",5,{"id":50,"slug":51,"title":52,"part_number":53},53,"controller-read-data-menampilkan-produk","Controller & Read Data (Menampilkan Produk)",6,{"id":55,"slug":56,"title":57,"part_number":58},54,"form-tambah-produk-create","Form Tambah Produk (Create)",7,{"id":60,"slug":61,"title":62,"part_number":63},55,"edit-update-produk","Edit & Update Produk",8,{"id":65,"slug":66,"title":67,"part_number":68},56,"hapus-produk-validasi-form","Hapus Produk & Validasi Form",9,{"id":70,"slug":71,"title":72,"part_number":73},63,"upload-file-gambar-dan-validasi-cpw3","Upload File (Gambar) dan Validasi",10,{"id":75,"slug":76,"title":77,"part_number":78},62,"menampilkan-grafik-stok-produk","Menampilkan Grafik Stok Produk",11,{"id":80,"slug":81,"title":82,"part_number":83},64,"login-dan-implementasi-middleware-at","Login Dan Implementasi Middleware",12,{"id":85,"slug":86,"title":87,"part_number":88},61,"membuat-dashboard-admin-dengan-statistik-dan-grafik","Membuat Dashboard Admin dengan Statistik dan Grafik",13,{"id":90,"slug":91,"title":92,"part_number":93},65,"teknik-debugging-di-laravel","Teknik Debugging di Laravel",15,"🎯 Tujuan Memahami konsep Blade Template dan cara membuat layout utama yang dapat digunakan ulang di beberapa halaman, dengan routing lewat Controller. 🧩 Mater...",1788757407061]