Integrasi AdminLTE dengan Laravel

Rifa

January 4, 2024

AdminLTE adalah template kontrol panel yang berbasis Bootstrap. Template ini sangat populer di kalangan pengembang web karena menyediakan tampilan yang bersih, intuitif, dan responsif. Laravel adalah kerangka kerja PHP yang elegan dan kuat. Kombinasi dari Laravel dan AdminLTE dapat memberikan aplikasi web yang kuat dengan tampilan yang menarik.

Langkah-langkah Integrasi

Berikut adalah langkah-langkah untuk mengintegrasikan AdminLTE dengan Laravel:

Instalasi Laravel: Pertama, Anda perlu menginstal Laravel jika belum. Anda dapat melakukannya dengan Composer menggunakan perintah composer create-project --prefer-dist laravel/laravel project-name.
Unduh AdminLTE: Unduh paket AdminLTE dari situs resmi dan ekstrak file-file tersebut.
Pindahkan File: Pindahkan file CSS dan JS AdminLTE ke dalam direktori public di Laravel. Anda bisa membuat subdirektori seperti css dan js untuk mengorganisir file-file tersebut.
Ubah File Konfigurasi: Ubah file konfigurasi Laravel untuk menggunakan file CSS dan JS AdminLTE. Anda dapat melakukan ini di file config/app.php.
Buat View: Buat view baru di Laravel dan gunakan file Blade untuk memanfaatkan template AdminLTE. Anda dapat menggunakan direktif Blade seperti @extends, @section, dan @yield untuk melakukan ini.
Ubah Route: Akhirnya, ubah file route Laravel untuk merender view yang baru dibuat.

Contoh Penggunaan

Berikut adalah contoh penggunaan AdminLTE di Laravel:

// File: resources/views/layouts/admin.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>AdminLTE Dashboard</title>
    <!-- AdminLTE CSS -->
    <link rel="stylesheet" href="{{ asset('css/adminlte.min.css') }}">
</head>
<body class="hold-transition sidebar-mini">
    <div class="wrapper">
        <!-- Navbar -->
        @include('layouts.navbar')
        <!-- /.navbar -->

        <!-- Main Sidebar Container -->
        @include('layouts.sidebar')

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            @yield('header')
            <!-- Main content -->
            @yield('content')
        </div>
        <!-- /.content-wrapper -->
    </div>
    <!-- ./wrapper -->

    <!-- AdminLTE JS -->
    <script src="{{ asset('js/adminlte.min.js') }}"></script>
</body>
</html>

Dalam contoh di atas, kita menggunakan direktif @include untuk memasukkan navbar dan sidebar, dan direktif @yield untuk memasukkan header dan konten halaman.