Cara menggunakan template admin bootstrap 5

Question

Table of Contents Show

Step 1: Download SB Admin
Step 2: Memindahkan ke Folder Project
Step 3: Membuat Master Layouts
Step 4: Membuat View Components
Step 5: Membuat Halaman Dashboard
Step 5: Update Controller
Step 6: Testing

Admin・ 11 September 2021

15 min read ・ 7148 views

SB Admin Codeigniter 4 - SB Admin merupakan salah template admin bootstrap terbaik yang banyak digunakan oleh web developer untuk membuat tampilan admin panel. Di artikel ini saya akan share bagaimana cara integrasi atau memasang template SB Admin 2 dan membuat layout view di codeigniter 4. Dan di artikel ini saya tidak akan memulainya dari awal atau dari install codeigniter 4, tapi saya akan melanjutkan project codeigniter 4 yang sebelumnya sudah pernah saya buat dan bagikan.

Baca: Cara Membuat Fitur Authentication (Register & Login) di Codeigniter 4

Baiklah, mari kita langsung saja ke koding. 👇 👨‍💻

Step 1: Download SB Admin

Langkah pertama, silahkan download template SB Admin 2 di situs resminya. Nantinya, template SB Admin ini akan kita pecah-pecah untuk membuat component-component yan nantinya akan kita gunakan sesuai dengan kebutuhan.

🔗 Link Download: SB Admin 2

Step 2: Memindahkan ke Folder Project

Setelah berhasil download template SB Admin, selanjutnya extract file zip SB Admin tersebut. Kemudian rename foldernya menjadi assets dan pindahkan ke folder codeigniter 4 project kita atau lebih tepatnya di dalam direktori public.

Step 3: Membuat Master Layouts

app/Views/layouts/admin.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Codeigniter 4 - Dashboard</title>
        <!-- Custom fonts for this template-->
        <link href="<?= base_url() ?>/assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
        <link
            href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
            rel="stylesheet">
        <!-- Custom styles for this template-->
        <link href="<?= base_url('assets/css/sb-admin-2.min.css') ?>" rel="stylesheet">

        <?= $this->renderSection('styles') ?>
    </head>
    <body id="page-top">
        <!-- Page Wrapper -->
        <div id="wrapper">
            <!-- Sidebar -->
            <?= $this->include('layouts/components/sidebar') ?>
            <!-- End of Sidebar -->
            <!-- Content Wrapper -->
            <div id="content-wrapper" class="d-flex flex-column">
                <!-- Main Content -->
                <div id="content">
                    <!-- Topbar -->
                    <?= $this->include('layouts/components/topbar') ?>
                    <!-- End of Topbar -->
                    <!-- Begin Page Content -->
                    <?= $this->renderSection('content') ?>
                    <!-- /.container-fluid -->
                </div>
                <!-- End of Main Content -->
                <!-- Footer -->
                <footer class="sticky-footer bg-white">
                    <div class="container my-auto">
                        <div class="copyright text-center my-auto">
                            <span>Copyright &copy; Codelapan <?= Date('Y') ?> </span>
                        </div>
                    </div>
                </footer>
                <!-- End of Footer -->
            </div>
            <!-- End of Content Wrapper -->
        </div>
        <!-- End of Page Wrapper -->
        <!-- Scroll to Top Button-->
        <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
        </a>
        <!-- Logout Modal-->
        <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
                        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                        <a class="btn btn-primary" href="logout">Logout</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Bootstrap core JavaScript-->
        <script src="<?= base_url('assets/vendor/jquery/jquery.min.js') ?>"></script>
        <script src="<?= base_url('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>
        <!-- Core plugin JavaScript-->
        <script src="<?= base_url('assets/vendor/jquery-easing/jquery.easing.min.js') ?>"></script>
        <!-- Custom scripts for all pages-->
        <script src="<?= base_url('assets/js/sb-admin-2.min.js') ?>"></script>

        <?= $this->renderSection('scripts') ?>
    </body>
</html>

Oke, kemudian buat folder baru dengan nama layouts di dalam direktori app/Views. Selanjutnya, masuk ke folder layouts yang baru saja dibuat dan buatlah file baru dengan nama admin.php. Kemudian copy kode di atas dan paste di file admin.php yang baru saja dibuat tersebut. Beberapa point dari kode di atas akan dijelaskan di bawah ini.

🔦 Hightlight:

<?= $this->renderSection('styles') ?> : kode ini berfungsi untuk membuat section baru yang nantinya akan kita panggil jika ada tambahan file css di suatu file view yang memang membutuhkan adanya penambahan file css. Jika semua file css ada di file layouts/admin.php ini, maka kemungkinan beberapa file css tidak terpakai di beberapa view. Misalkan, di file admin.php ini kita menyertakan file css datatables.min.css, maka saat kita masuk ke halaman dashboard, file ini juga akan ikut. Padahal di dashboard kita tidak membutuhkan file datatables.min.css.
<?= $this->include('layouts/components/sidebar') ?> : Kode ini berfungsi untuk menyertakan component ke dalam view. Contohnya disini kita akan menyertakan component view dari file layouts/components/sidebar.php.
<?= $this->include('layouts/components/topbar') ?> : Kode ini memiliki fungsi yang sama dengan kode di atas.
<?= $this->renderSection('content') ?> : Kode ini berfungsi untuk merender konten. Jadi saat kita mempunyai file view baru yang mempunyai master layout admin, maka kode in akan kita panggil. Fungsinya hampir sama dengan kode yang di awal tadi. Jika di laravel, kode ini persis dengan @section @endsection.
<?= Date('Y') ?> : Kode ini berfungsi untuk menampilkan tahun saat ini.
<?= $this->renderSection('scripts') ?> : Hampir sama dengan kode yang sudah dijelaskan di awal tadi, kode ini berfungsi untuk membuat section baru yang nantinya akan kita panggil jika ada tambahan file script atau javascirpt di suatu file view yang memang membutuhkan adanya penambahan file script. Jika semua file script atau javascript ada di file layouts/admin.php ini, maka kemungkinan beberapa file script atau javascript tidak terpakai di beberapa view. Misalkan, di file admin.php ini kita menyertakan file script datatables.min.js, maka saat kita masuk ke halaman dashboard, file ini juga akan ikut. Padahal di dashboard kita tidak membutuhkan file datatables.min.js.

Step 4: Membuat View Components

Setelah selesai membuat master layout, sekarang kita akan membuat file component atau biasanya juga disebut dengan partial. Di master layout tadi kita telah membuat kode <?= $this->include('layouts/components/sidebar') ?> dan <?= $this->include('layouts/components/topbar') ?>. Untuk itu, pada langkah ini kita perlu membuat file sidebar.php dan topbar.php di dalam direktori views/layouts/components. Silahkan buat folder components terlebih dahulu di dalam folder layouts, lalu masuk ke folder components yang baru saja dibuat tersebut dan buatlah dua file baru yaitu sidebar.php dan topbar.php.

Sidebar

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
    <!-- Sidebar - Brand -->
    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
        <div class="sidebar-brand-icon rotate-n-15">
            <i class="fas fa-laugh-wink"></i>
        </div>
        <div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
    </a>
    <!-- Divider -->
    <hr class="sidebar-divider my-0">
    <!-- Nav Item - Dashboard -->
    <li class="nav-item active">
        <a class="nav-link" href="index.html">
        <i class="fas fa-fw fa-tachometer-alt"></i>
        <span>Dashboard</span></a>
    </li>
    <!-- Divider -->
    <hr class="sidebar-divider">
    <!-- Nav Item - Tables -->
    <li class="nav-item">
        <a class="nav-link" href="tables.html">
        <i class="fas fa-fw fa-table"></i>
        <span>Contacts</span></a>
    </li>
    <!-- Divider -->
    <hr class="sidebar-divider d-none d-md-block">
    <!-- Sidebar Toggler (Sidebar) -->
    <div class="text-center d-none d-md-inline">
        <button class="rounded-circle border-0" id="sidebarToggle"></button>
    </div>
</ul>

Kemudian, buka file sidebar.php yang baru saja dibuat, lalu tambahkan kode seperti di atas. Kode ini sebagai component untuk tampilan sidebar beserta menu dashboard dan contacts.

FYI. Di artikel codeigniter 4 selanjutnya, saya akan share tutorial CRUD di codeigniter 4 dengan study case membuat management contact.

Topbar

<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
    <!-- Sidebar Toggle (Topbar) -->
    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
    <i class="fa fa-bars"></i>
    </button>
    <!-- Topbar Navbar -->
    <ul class="navbar-nav ml-auto">
        <div class="topbar-divider d-none d-sm-block"></div>
        <!-- Nav Item - User Information -->
        <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="mr-2 d-none d-lg-inline text-gray-600 small"> <?php echo user()->username ?></span>
            <img class="img-profile rounded-circle"
                src="<?= base_url('assets/img/undraw_profile.svg') ?>">
            </a>
            <!-- Dropdown - User Information -->
            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                aria-labelledby="userDropdown">
                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                Logout
                </a>
            </div>
        </li>
    </ul>
</nav>

Oke, component yang selanjutnya yaitu topbar. Silahkan buka file component topbar.php yang baru saja dibuat, lalu tambahkan kode seperti di atas pada file tersebut. Sedikit penjelasan untuk kode di atas akan dijelaskan di bawah ini.

🔦 HightLight:

<?php echo user()->username ?> : Kode ini berfungsi untuk menampilkan username dari user yang sedang login saat ini. Misalnya, jika username kamu Admin, maka di topbar atau lebih tepatnya disebelah foto user akan menampilkan text Admin.

Step 5: Membuat Halaman Dashboard

app/Views/dashboard.php

<?= $this->extend('layouts/admin') ?>
<?= $this->section('content') ?>
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h2 class="h3 mb-0 text-gray-800">Dashboard</h2>
    </div>
    <!-- Content Row -->
    <div class="row">
        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Earnings (Monthly)
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Earnings (Annual)
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">$215,000</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Tasks
                            </div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">50%</div>
                                </div>
                                <div class="col">
                                    <div class="progress progress-sm mr-2">
                                        <div class="progress-bar bg-info" role="progressbar"
                                            style="width: 50%" aria-valuenow="50" aria-valuemin="0"
                                            aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Pending Requests Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Pending Requests
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">18</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-comments fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Content Row -->
</div>
<?= $this->endSection() ?>

Selanjutnya, buatlah file view baru dengan nama dashboard.php di dalam direktori views, lalu tambahkan kode seperti di atas pada file view dashboard tersebut. Pada kode di atas, kita sudah mengimplementasikan method extend dan section yang telah dijelaskan pada langkah sebelumnya.

🔦 HightLight

<?= $this->extend('layouts/admin') ?> : Method ini digunakan untuk mengambil tampilan dasar dari file layouts/admin.php. Kita menggunakan method ini di file dashboard.php, berarti pada tampilan dashboard kita nanti juga akan menggunakan kode-kode dari file layouts/components/sidebar.php, layouts/components/topbar.php dan dari file layouts/admin.php. Di laravel, method ini bisa digunakan dengan menggunakan @extend('app').
<?= $this->section('content') ?> : Method ini digunakan sebagai pembuka konten di file dashboard. Coba kembali lagi di file layouts/admin.php, di file admin.php terdapat kode <?= $this->renderSection('content') ?>. Jadi, agar kode di dashboard dapat mengisi slot pada file admin.php tersebut, kita perlu menggunakan kode <?= $this->renderSection('content') ?> sebagai pembukanya, dengan catatan kita juga sudah menambahkan method extend dari file admin.php.
<?= $this->endSection() ?> : Nah, method ini digunakan sebagai penutup section.

Step 5: Update Controller

app/Controllers/Home.php

public function dashboard()
    {
        return view('dashboard');
    }

Karena kita sudah mempunyai file view dashboard, jadi pada Controller kita sudah bisa mengubah returnnya. Jika sebelumnya function dashboard ini mereturn nilai "Dashboard Page", maka sekarang kita sudah bisa menggantinya dengan view('dashboard'). Jadi saat function ini dipanggil atau saat kita coba akses URL /dashboard, kita akan diarahkan ke halaman dashboard yang telah kita buat sebelumnya.

Step 6: Testing

Oke, setelah melalui langkah-langkah mulai dari download template SB admin, memindahkan fiel-file dari SB Admin ke folder public, sampai melakukan setup view, sekarang waktunya testing. Silahkan jalankan project codeigniter 4 dengan menjalankan perintah php spark serve, lalu buka pada browser dengan URL localhost:8080. Silahkan coba login atau jika belum punya akun, silahkan coba register terlebih dahulu. Setelah login berhasil, maka kita akan di arahkan ke halaman dashboard dengan tampilan seperti gambar di atas.

Sekian artikel seri codeigniter 4 dengan topik pembahasan integrasi template SB Admin atau membuat layout view di codeigniter 4 kali ini. Semoga artikel ini bisa bermanfaat, dan sampai jumpa di artikel seri codeigniter 4 berikutnya dengan topik membuat CRUD di codeigniter 4. See you 👋 🚀

kode bootstrap Cara menggunakan Bootstrap