Laundry Management Website (Part 3-Homepage Admin)

Created by: Anisa Damayanti, S.Kom.
For Study Purpose Only!

Situs web dapat dibagi menjadi dua kategori utama: situs web statis dan situs web dinamis. Situs web statis adalah jenis situs di mana konten halaman tidak berubah secara otomatis berdasarkan interaksi pengguna. Ini berarti bahwa semua informasi pada halaman tersebut ditentukan sebelumnya dan harus diperbarui secara manual oleh pengembang. Situs web statis cenderung lebih sederhana dalam hal pelaksanaan dan kecepatan akses, tetapi mungkin kurang interaktif dan tidak dapat dengan mudah disesuaikan dengan preferensi pengguna.

Di sisi lain, situs web dinamis mengadopsi pendekatan yang lebih interaktif dan disesuaikan. Konten pada situs web dinamis dapat berubah secara otomatis berdasarkan tindakan pengguna atau faktor lainnya. Teknologi pemrograman seperti PHP, Python, dan basis data digunakan untuk menghasilkan konten yang dinamis dan personal. Contohnya termasuk platform media sosial yang menyesuaikan aliran berita dengan preferensi pengguna atau situs e-commerce yang menampilkan produk berdasarkan sejarah belanja.

Sama halnya dengan Aplikasi Pengelolaan Laundry berbasis Website (Laundry Management Website) yang akan kita bangun, Website ini menerapkan konsep Statis dan Dinamis menyesuaikan dengan kebutuhan dan akan dibahas pada artikel ini.

Pada artikel ini akan membahas cara menerapkan konsep Statis dan Dinamis pada pengguna/user yang berperan sebagai Admin. Di mana peran Admin ini nantinya bisa mengelola fitur CRUD pada menu berikut;

Menu Outlet
Menu User
Menu Paket
Menu Member
Menu Transaksi

A. Persiapan Tools

Pada aplikasi XAMPP pastikan mengaktifkan Module Apache dan MySQL dengan mengklik tombol Start

Pada Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge pastikan sudah membuka url berikut: localhost/ci4_nama_kelas/public

contoh memanggil url
**localhost**/**ci4_anisa_xiirpl3/public**

Pada VSCode pastikan sudah membuka folder project yang sudah dibuat sebelumnya

contoh membuka folder project
**ci4_anisa_xiirpl3**

Sebelum melanjutkan ke tahapan konsep Homepage Statis dan Dinamis, pastikan Tools di atas sudah dipersiapkan terlebih dahulu.

B. Langkah-langkah Pembuatan Homepage

1. View

Pada VSCode buatlah folder baru bernama bernama Admin di dalam folder app/Views

Selanjutnya buatlah file baru bernama v_homepage.php di dalam folder app/Views/Admin

Copy seluruh paragraf script berikut dan Paste ke dalam file v_homepage.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= $title; ?></title>

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="<?php echo base_url('assets/adminlte') ?>/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<?php echo base_url('assets/adminlte') ?>/dist/css/adminlte.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="<?php echo base_url('assets/adminlte') ?>/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
    <!-- Tempusdominus Bootstrap 4 -->
    <link rel="stylesheet" href="<?php echo base_url('assets/adminlte') ?>/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
</head>

<body class="hold-transition sidebar-mini">
    <!-- Site wrapper -->
    <div class="wrapper">
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
            <!-- Left navbar links -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
                </li>
            </ul>

            <!-- Right navbar links -->
            <ul class="navbar-nav ml-auto">

                <!-- Logout Dropdown Menu -->
                <li class="nav-item dropdown">
                    <a class="nav-link" data-toggle="dropdown" href="#">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                        <div class="dropdown-divider"></div>
                        <a href="<?= base_url('auth/logout') ?>" class="dropdown-item dropdown-footer">Logout</a>
                    </div>
                </li>
                <!-- Fullscreen -->
                <li class="nav-item">
                    <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                        <i class="fas fa-expand-arrows-alt"></i>
                    </a>
                </li>
            </ul>
        </nav>
        <!-- /.navbar -->

        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4">
            <!-- Brand Logo -->
            <a href="https://www.instagram.com/ansdyi/" class="brand-link">
                <img src="<?php echo base_url('assets/adminlte') ?>/dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
                <span class="brand-text font-weight-light">My Laundry <?= session()->get('id_outlet') ?></span>
            </a>

            <!-- Sidebar -->
            <div class="sidebar">
                <!-- Sidebar user (optional) -->
                <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                    <div class="image">
                        <img src="<?php echo base_url('assets/adminlte') ?>/dist/img/avatar3.png" class="img-circle elevation-2" alt="User Image">
                    </div>
                    <div class="info">
                        <a href="https://www.instagram.com/ansdyi/" class="d-block"><?= session()->get('nama_pengguna') ?></a>
                    </div>
                </div>
                <div class="user-panel mt-3 mb-4 d-flex">
                    <div class="info">
                        <p class="text-white">Your Role as: <?= session()->get('role') ?></p>
                    </div>
                </div>

                <!-- SidebarSearch Form -->
                <div class="form-inline">
                    <div class="input-group" data-widget="sidebar-search">
                        <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
                        <div class="input-group-append">
                            <button class="btn btn-sidebar">
                                <i class="fas fa-search fa-fw"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Sidebar Menu -->
                <nav class="mt-2">
                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                        <!-- Add icons to the links using the .nav-icon class
                            with font-awesome or any other icon font library -->
                        <li class="nav-header">Dashboard</li>
                        <li class="nav-item">
                            <a href="<?= base_url('admin/dashboard') ?>" class="nav-link">
                                <i class="nav-icon fas fa-tachometer-alt"></i>
                                <p>
                                    Dashboard
                                </p>
                            </a>
                        </li>
                        <li class="nav-header">Data Master</li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-th"></i>
                                <p>
                                    Data Master
                                    <i class="fas fa-angle-left right"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview">
                                <li class="nav-item">
                                    <a href="<?= base_url('admin/pengguna') ?>" class="nav-link">
                                        <i class="nav-icon far fa-circle"></i>
                                        <p>Data Pengguna</p>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="<?= base_url('admin/paket') ?>" class="nav-link">
                                        <i class="nav-icon far fa-circle"></i>
                                        <p>Data Paket Cucian</p>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="<?= base_url('admin/outlet') ?>" class="nav-link">
                                        <i class="nav-icon far fa-circle"></i>
                                        <p>Data Outlet</p>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-header">Transaksi</li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-table"></i>
                                <p>
                                    Transaksi
                                    <i class="fas fa-angle-left right"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview">
                                <li class="nav-item">
                                    <a href="<?= base_url('admin/pelanggan') ?>" class="nav-link">
                                        <i class="nav-icon far fa-circle"></i>
                                        <p>Registrasi Pelanggan</p>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="<?= base_url('admin/transaksi') ?>" class="nav-link">
                                        <i class="nav-icon far fa-circle"></i>
                                        <p>Entri Transaksi</p>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-header">Laporan</li>
                        <li class="nav-item">
                            <a href="<?= base_url('admin/laporan') ?>" class="nav-link">
                                <i class="nav-icon fas fa-copy"></i>
                                <p>
                                    Laporan
                                </p>
                            </a>
                        </li>
                    </ul>
                </nav>
                <!-- /.sidebar-menu -->
            </div>
            <!-- /.sidebar -->
        </aside>

        <!-- Content Wrapper. Contains page content -->
        <?php
        if (isset($page)) {
            echo $page;
        }
        ?>
        <!-- /.content-wrapper -->

        <!-- Footer -->
        <footer class="main-footer">
            <div class="float-right d-none d-sm-block">
                <b>Version</b> 3.2.0
            </div>
            <strong>Copyright © 2023 Anisa Damayanti for 12th Grade of Software Engineering [Ujikom P3 Website]. </strong> All rights reserved.

        </footer>

        <!-- Control Sidebar -->
        <aside class="control-sidebar control-sidebar-dark">
            <!-- Control sidebar content goes here -->
        </aside>
        <!-- /.control-sidebar -->
    </div>
    <!-- ./wrapper -->

    <!-- jQuery -->
    <script src="<?php echo base_url('assets/adminlte') ?>/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="<?php echo base_url('assets/adminlte') ?>/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="<?php echo base_url('assets/adminlte') ?>/dist/js/adminlte.min.js"></script>
    <!-- SweetAlert2 -->
    <script src="<?php echo base_url('assets/adminlte') ?>/plugins/sweetalert2/sweetalert2.min.js"></script>
    <script>
        $(function() {
            var Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });

            $('document').ready(function() {
                <?php if (session()->getFlashdata('title')) { ?>
                    Toast.fire({
                        icon: 'success',
                        title: '<?= session()->getFlashdata('title') ?>',
                        text: '<?= session()->getFlashdata('text') ?>',
                    });
                <?php } ?>
            });
        });
    </script>
    <!-- bs-custom-file-input -->
    <script src="<?php echo base_url('assets/adminlte') ?>/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
    <script>
        $(function() {
            bsCustomFileInput.init();
        });
    </script>
    <!-- InputMask -->
    <script src="<?php echo base_url('assets/adminlte') ?>/plugins/moment/moment.min.js"></script>
    <!-- Tempusdominus Bootstrap 4 -->
    <script src="<?php echo base_url('assets/adminlte') ?>/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
    <script>
        $(function() {
            $('#tglTransaksi').datetimepicker({
                icons: {
                    time: 'far fa-clock'
                }
            });
            $('#batasWaktu').datetimepicker({
                icons: {
                    time: 'far fa-clock'
                }
            });
            $('#tglBayar').datetimepicker({
                icons: {
                    time: 'far fa-clock'
                }
            });
        })
    </script>
</body>

</html>

PHP

Selanjutnya buatlah file baru bernama v_dashboard.php di dalam folder app/Views/Admin

Copy seluruh paragraf script berikut dan Paste ke dalam file v_dashboard.php

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1><?= $header; ?></h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="<?= base_url('admin/dashboard') ?>">Homepage</a></li>
                        <li class="breadcrumb-item active"><?= $header; ?></li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">

            <!-- Default box -->
            <div class="row">
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3></h3>

                            <p>Data Member</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-stats-bars"></i>
                        </div>
                        <a href="<?= base_url('admin/pelanggan') ?>" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3></h3>

                            <p>Data Transaksi</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-stats-bars"></i>
                        </div>
                        <a href="<?= base_url('admin/transaksi') ?>" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3></h3>

                            <p>Data User</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-stats-bars"></i>
                        </div>
                        <a href="<?= base_url('admin/pengguna') ?>" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-danger">
                        <div class="inner">
                            <h3></h3>

                            <p>Data Paket Cucian</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-stats-bars"></i>
                        </div>
                        <a href="<?= base_url('admin/paket') ?>" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
            </div>
            <!-- /.card -->
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>

PHP

2. Controller

Pada VSCode buatlah folder baru bernama Admin di dalam folder app/Controllers

Selanjutnya buatlah file baru bernama Dashboard.php di dalam folder app/Controllers/Admin

Copy seluruh paragraf script berikut dan Paste ke dalam file Dashboard.php

<?php

namespace App\Controllers\Admin;

use App\Controllers\BaseController;

class Dashboard extends BaseController
{
    public function index()
    {
        $data = [
            'title' => "Admin Dashboard | My Laundry",
            'header' => "Dashboard",
        ];

        $data['page'] = view('admin/v_dashboard', $data);

        echo view("admin/v_homepage", $data);
    }
}

PHP

Selajutnya pada Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge buka url berikut: localhost/ci4_nama_kelas/public/admin/dashboard

contoh memanggil url
localhost/ci4_anisa_xiirpl3/public/**admin/dashboard**

Pada halaman Dashboard tersebut nantinya akan memunculkan jumlah total isian data yang berasal dari Data Member, Transaksi, User, dan Paket. Agar dapat mengeluarkan total data pada menu tersebut, maka harus terlebih dahulu membuat konsep MVC dan juga memastikan fungsi-fungsinya sudah berjalan dengan baik.