Tujuan: Di bagian ini, kita akan mengubah template HTML statis menjadi sebuah layout dasar di Laravel. Kita akan belajar cara Laravel menangani file aset (CSS, JS) dan bagaimana cara memperbaiki tampilan yang "berantakan" menggunakan tools developer. Hasil akhirnya adalah halaman dashboard yang utuh dan siap untuk kita pecah menjadi komponen-komponen di bagian selanjutnya.

Langkah 1: Menyiapkan Aset Template

Pertama, kita siapkan semua "bahan mentah" desainnya.

1. Unduh file template dari link berikut: https://minarsih.com/sl/pelatihan-laravel-2025-template-admin
   
   
    
2. Ekstrak file .zip yang sudah diunduh. Anda akan mendapatkan sebuah folder bernama template-admin.
3. Salin (copy) seluruh folder template-admin tersebut dan tempel (paste) ke dalam folder public/ di proyek Laravel Anda.
4. Pastikan struktur folder Anda sekarang terlihat seperti ini:
    

   proyek-laravel/
   └── public/
   
       └── template-admin/
   
           ├── src/
   
           ├── package.json
   
           └── ...

   
    

Langkah 2: Membuat File Layout Utama & Test Awal

Sekarang, kita buat "kanvas" utama untuk semua halaman admin kita nanti.

1. Buat Struktur Folder & File Menggunakan VS Code:
   • Di dalam folder resources/views/, buat folder baru bernama admin.
     
     
      
   • Di dalam folder admin/, buat lagi folder baru bernama layouts.
     
     
      
   • Di dalam admin/layouts/, buat file baru bernama app.blade.php.
     
     
      
2. Isi File Layout:
   • Buka file public/template-admin/src/html/sample-page.html menggunakan VS Code.
     
     
      
   • Salin semua isinya (Ctrl+A, lalu Ctrl+C).
     
     
      
   • Tempel semua kode tersebut ke dalam file resources/views/admin/layouts/app.blade.php yang baru saja Anda buat.
     
     
      
3. Ubah Rute untuk Test:
   • Buka file routes/web.php.
     
     
      
   • Ubah rute default (/) agar langsung menampilkan file layout baru kita.
   • Ganti baris ini:
      

     Route::get('/', function () {
         return view('welcome');
     
     });

     
     
      

• Menjadi seperti ini:
   

  Route::get('/', function () {
      return view('admin.layouts.app');
  
  });

Langkah 3: Uji Coba Pertama & Investigasi Masalah

Saatnya melihat hasil pertama kita, yang kemungkinan besar akan... berantakan!

1. Jalankan server dengan mengetik php artisan serve di terminal VS Code.
   
   
    
2. Buka http://127.0.0.1:8000 di browser Anda.
3. Hasil yang Diharapkan: Anda akan melihat tampilannya berantakan! Teksnya mungkin muncul, tapi tidak ada style, warna, atau ikon. Ini NORMAL.
   
   
    
4. Saatnya Investigasi! Ini adalah saat yang tepat untuk berkenalan dengan teman terbaik developer: Inspect Element.
   • Klik kanan di mana saja pada halaman yang berantakan itu, lalu pilih Inspect.
   • Di jendela yang muncul, klik tab Console.
   • Anda akan melihat banyak sekali error berwarna merah dengan pesan 404 Not Found. Ini artinya browser tidak bisa menemukan file CSS dan JavaScript yang kita minta.
     
     
      

Langkah 4: Memperbaiki Path Aset dengan Helper asset()

Sekarang kita akan perbaiki masalah ini dengan memberitahu Laravel lokasi aset yang benar.

1. Kembali ke file app.blade.php di VS Code.
   
   
    
2. Masalahnya ada pada path seperti href="../assets/css/styles.min.css". Path relatif seperti ini tidak akan berfungsi dengan benar di Laravel.
   
   
    
3. Kita perlu membungkus semua path aset dengan helper Blade {{ asset() }}. Helper ini akan membuat URL yang benar ke folder public.
4. Contoh Perubahan:
   • SEBELUM: <link rel="shortcut icon" type="image/png" href="../assets/images/logos/favicon.png" />
     
     
      
   • SESUDAH: <link rel="shortcut icon" type="image/png" href="{{ asset('template-admin/src/assets/images/logos/favicon.png') }}" />
     
     
      
5. Tips Cepat dengan Ctrl+D:
   • Untuk mempercepat, cari bagian path yang sama, misalnya ../assets/.
   • Seleksi teks ../assets/ tersebut.
   • Tekan Ctrl+D berulang kali. VS Code akan otomatis menyeleksi semua teks yang sama persis.
     
     
      
   • Setelah semua terseleksi, ketik penggantinya: {{ asset('template-admin/src/assets/.
     
     
      
   • Jangan lupa untuk, ketik penutupnya juga, diakhir value atribut: ) }}. Contoh hasil yang bebar dapat dilihat pada bagian Contoh Perubahan diatas.
     
     
      
   • Lakukan ini untuk semua path CSS (di dalam <head>), semua path JavaScript (biasanya di bagian paling bawah sebelum </body>), dan semua path gambar (<img src="...">).

Langkah 5: Verifikasi Tampilan Dashboard

Saatnya melihat hasil kerja keras kita.

1. Simpan file app.blade.php.
2. Kembali ke browser dan refresh halaman http://127.0.0.1:8000.
3. Tada! Seharusnya sekarang tampilan dashboard Anda muncul dengan sempurna, lengkap dengan style, gambar, dan ikon. Tab Console di Inspect Element juga seharusnya sudah bersih dari error 404.
   
   
    
4. Jika masih ada yang berantakan, periksa kembali tab Console. Mungkin ada path yang terlewat untuk diperbaiki.
   
   
    

Selamat! Anda telah berhasil mengintegrasikan template HTML statis ke dalam proyek Laravel. Di bagian selanjutnya, kita akan memecah file app.blade.php ini menjadi komponen-komponen yang lebih kecil dan bisa digunakan kembali.

Pengantar Singkat: Apa itu Blade Templating?

Sebelum mulai, mari kita pahami apa itu Blade. Blade adalah "mesin" pembuat tampilan (template engine) bawaan Laravel. Blade sangat powerful karena memungkinkan kita untuk:

• Membuat kode HTML lebih bersih dan mudah dibaca.
• Menggunakan logika seperti if, else, dan looping langsung di dalam HTML.
• Memecah tampilan menjadi bagian-bagian kecil yang bisa digunakan kembali, seperti membangun rumah dari balok-balok LEGO.

Kita akan fokus pada 3 perintah utama Blade di bagian ini:

• @include(): Untuk "memasukkan" atau "menempelkan" file Blade lain ke dalam file saat ini.
• @yield(): Untuk menyediakan "slot" atau "area kosong" yang bisa diisi oleh file lain.
• @extends(): Untuk memberitahu sebuah file agar "mewarisi" semua kerangka dari file layout lain.

Mari kita mulai praktiknya!
 

Langkah 6: Memecah Layout Menjadi Komponen

Kita akan memecah file app.blade.php yang besar menjadi bagian sidebar dan header yang lebih mudah dikelola.

1. Pertama, buat dua file kosong baru di dalam folder resources/views/admin/layouts/:
   • header.blade.php
   • sidebar.blade.php
     
     
      

A. Memisahkan Sidebar

1. Buka file app.blade.php.
2. Cari komentar `<!-- Sidebar Start -->`.
   
   
    
3. Seleksi (blok) semua kode mulai dari baris <aside class="left-sidebar"> hingga komentar `<!--  Sidebar End -->`. Anda dapat collapse code nya dengan klik tanda yang ada di sebelah baris kode untuk mempermudah seleksi.
   
   
    
4. Cut (potong) kode tersebut (Ctrl+X). Biarkan komentar tetap di app.blade.php agar menjadi penanda.
   
   
    
5. Buka file sidebar.blade.php yang masih kosong, lalu Paste (Ctrl+V) semua kode tadi di sini. Simpan filenya.
   
   
    
6. Kembali ke app.blade.php, di antara komentar dan yang sekarang kosong, ketikkan perintah @include:
    

   @include('admin.layouts.sidebar')

   
   
    

B. Memisahkan Header

1. Masih di file app.blade.php, cari komentar `<!--  Header Start -->`.
   
   
    
2. Seleksi semua kode mulai dari <header class="app-header"> hingga komentar `<!--  Header End -->`. Anda dapat collapse code nya dengan klik tanda yang ada di sebelah baris kode untuk mempermudah seleksi.
   
   
    
3. Cut kode tersebut.
   
   
    
4. Buka file header.blade.php, lalu Paste kodenya di sana. Simpan.
   
   
    
5. Kembali ke app.blade.php dan ketik @include di antara komentar header:
    

   @include('admin.layouts.header')

   
   

Langkah 7: Membuat Slot untuk Konten dan Aset

Sekarang app.blade.php kita sudah menjadi kerangka. Kita perlu membuat "area kosong" agar bisa diisi oleh halaman lain.

1. Membuat Slot Konten Utama:
   • Di app.blade.php, cari bagian konten utama. Di template ini, kontennya ada di dalam <div class="container-fluid">.
     
     
      
   • Hapus seluruh isi di dalam div tersebut (mulai dari <div class="card"> sampai </div> penutupnya). Anda dapat collapse code nya dengan klik tanda yang ada di sebelah baris kode untuk mempermudah seleksi.
     
     
      
   • Gantikan dengan directive @yield('content').
      

     <div class="container-fluid">
         @yield('content')
     
     </div>

     
     

2. Membuat Slot Aset Tambahan (CSS & JS):
   • Ini adalah persiapan untuk nanti jika ada halaman yang butuh CSS atau JS khusus.
   • Di app.blade.php, cari tag penutup </head>. Tepat di atasnya, tambahkan @yield('css').
      

     @yield('css')
     </head>
     

     
     
      
   • Masih di app.blade.php, scroll ke bagian paling bawah. Setelah semua tag <script> yang ada, tambahkan @yield('js').
      

     <script src="{{ asset('template-admin/src/assets/libs/simplebar/dist/simplebar.js') }}"></script>
     @yield('js')
     </body>

     
     

Langkah 8: Menyesuaikan Judul, Logo, dan Favicon

Aplikasi kita perlu identitas. Mari kita ganti judul, logo, dan favicon default dengan identitas SIMINLAB.

1. Unduh dan Siapkan Aset:
   • Unduh file aset logo dari link berikut: https://minarsih.com/sl/pelatihan-laravel-2025-asset-logo
     
     
      
   • Ekstrak file .zip tersebut. Di dalamnya akan ada file favicon.png dan logo.png.
   • Salin kedua file tersebut dan tempel ke direktori public/template-admin/src/assets/images/logos/. Jika ada file dengan nama yang sama, timpa saja (overwrite).
     
     
     
      
2. Mengganti Judul Halaman (Title Tag):
   • Buka file app.blade.php.
   • Cari tag <title>Modernize Free</title>.
     
     
      
   • Ganti baris tersebut menjadi seperti ini:
      

     <title>SIMINLAB - {{ $title ?? 'Dashboard' }}</title>

     
     
      
   • Penjelasan: Kode {{ ... }} adalah cara Blade untuk menampilkan data. Variabel $title ini nantinya bisa kita kirim dari Controller atau Route untuk membuat judul setiap halaman menjadi dinamis (misal: 'SIMINLAB - Data Item'). Tanda ?? 'Dashboard' berarti jika variabel $title tidak ada, maka gunakan teks 'Dashboard' sebagai default.
3. Mengganti Favicon:
   • Masih di file app.blade.php, cari baris kode untuk shortcut icon.
   • Pastikan path-nya sudah benar menggunakan helper asset().
      

     <link rel="shortcut icon" type="image/png" href="{{ asset('template-admin/src/assets/images/logos/favicon.png') }}" />

     
     
      
4. Mengganti Logo di Sidebar:
   • Buka file sidebar.blade.php.
   • Cari tag <img> untuk logo. Kodenya akan terlihat seperti ini: <img src="{{ asset('template-admin/src/assets/images/logos/dark-logo.svg') }}" ... >.
     
     
      
   • Ganti seluruh tag <img> tersebut dengan kode di bawah ini agar mengarah ke logo baru kita:
      

     <img src="{{ asset('template-admin/src/assets/images/logos/logo.png') }}" width="180" alt="Logo SIMINLAB" />

     
     

Langkah 9: 🧐 Uji Coba & Verifikasi Akhir

Setelah kita memodifikasi layout dan mengganti identitas visualnya, saatnya memastikan semuanya masih bekerja dengan baik.

1. Pastikan semua file yang Anda ubah (app.blade.php, sidebar.blade.php, header.blade.php) sudah disimpan.
2. Pastikan routes/web.php Anda masih menampilkan file layout utama untuk pengujian ini.
    

   // Pastikan rute ini masih sama seperti sebelumnya
   Route::get('/', function () {
   
       return view('admin.layouts.app');
   
   });

   
   
    
3. Sekarang, kembali ke browser Anda dan refresh halaman http://127.0.0.1:8000.
   
   
    

Hasil yang Diharapkan: Tampilan Anda akan terlihat persis seperti sebelumnya, namun sekarang dengan judul tab "SIMINLAB - Dashboard", serta logo dan favicon SIMINLAB yang baru!

Mengapa ini hal yang bagus? Ini membuktikan bahwa proses pemisahan komponen dan kustomisasi kita berhasil tanpa merusak struktur layout. Jika tampilan Anda rusak, kemungkinan ada kesalahan pengetikan pada nama file di dalam perintah @include atau pada path di helper asset().

Selamat! Anda telah berhasil mengubah file HTML monolitik menjadi kerangka Blade yang modular, rapi, dan sudah memiliki identitas visual.

Saat ini, mungkin Anda bertanya-tanya, "Apa gunanya melakukan semua ini jika hasilnya sama saja?" Manfaat sesungguhnya dari Blade Templating ini akan kita ketahui di bagian selanjutnya, saat kita mulai membuat halaman-halaman baru dengan sangat cepat menggunakan kerangka yang sudah kita siapkan ini.