Slicing Template Bootstrap ke Laravel

Halo teman-teman 👋
Setelah berhasil menjalankan Laravel, kita masuk ke tahap slicing template dari Bootstrap ke Laravel. Selain memahami Blade, hal penting yang sering terlewat adalah penempatan struktur folder agar project tetap rapi dan scalable.

Pada awalnya, template Bootstrap biasanya berupa HTML statis lengkap dengan folder seperti css, js, dan images. Di Laravel, semua ini tidak langsung digunakan begitu saja, tetapi harus disesuaikan dengan struktur project.

Untuk bagian tampilan (view), semua file HTML dipindahkan ke dalam folder resources/views. Di sinilah kita mulai membuat struktur Blade. Biasanya dibuat satu file utama seperti layout.blade.php yang berisi kerangka halaman, lalu file lain seperti home.blade.php sebagai isi konten. Agar lebih rapi, kita bisa mengelompokkan file berdasarkan fungsi seperti pages dan partials.

Gambaran struktur folder di bagian views biasanya seperti ini:

resources/
└── views/
├── layout.blade.php
├── pages/
│ ├── home.blade.php
│ ├── about.blade.php
│ └── contact.blade.php
└── partials/
├── navbar.blade.php
└── footer.blade.php

Dengan struktur ini, layout berfungsi sebagai kerangka utama, folder pages berisi halaman, dan partials berisi komponen yang bisa digunakan berulang.

Sementara itu, semua asset dari template Bootstrap tidak diletakkan di dalam resources, melainkan dipindahkan ke folder public karena folder ini yang bisa diakses langsung oleh browser. Penataannya biasanya tetap mengikuti struktur umum agar mudah dikenali.

Gambaran struktur folder asset di Laravel:

public/
├── css/
│ └── style.css
├── js/
│ └── script.js
├── images/
│ └── logo.png
└── vendor/
└── bootstrap/

Setelah dipindahkan, pemanggilan asset di Blade harus menggunakan helper Laravel seperti asset() agar path sesuai dengan sistem Laravel dan tidak error saat dijalankan.

Di sisi Blade, kita memanfaatkan @yield pada layout sebagai placeholder, lalu @extends dan @section pada halaman untuk mengisi konten. Komponen seperti navbar dan footer dipanggil menggunakan @include dari folder partials, sehingga tidak perlu ditulis berulang di setiap halaman.

Setelah struktur selesai, routing di routes/web.php akan mengarah ke view yang sesuai, misalnya pages.home. Ketika diakses, Laravel akan merender layout, memanggil partial, lalu menampilkan konten dari halaman tersebut.

Untuk menjalankan project, bisa menggunakan php artisan serve atau langsung akses domain .test jika menggunakan Laragon atau Laravel Herd. Jika menggunakan Vite, jalankan juga npm run dev agar asset frontend berjalan dengan baik.

Dengan memahami struktur folder ini, proses slicing menjadi jauh lebih terarah karena kita tidak hanya memindahkan HTML, tetapi juga menyusun project Laravel dengan pola yang rapi dan siap dikembangkan.

Kalau masih ada yang ingin didalami, seperti membuat layout lebih kompleks, bisa lanjut diskusi di bawah 👇