part 2
AdminLTE,  CodeIgniter4

Laundry Management Website (Part 2-Assets AdminLTE)

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

AdminLTE adalah sebuah template atau tema gratis yang dibuat oleh Almsaeed Studio yang dirancang untuk digunakan sebagai antarmuka pengguna (user interface) pada proyek-proyek web. Template ini didasarkan pada framework CSS Bootstrap dan menyediakan berbagai komponen dan fitur untuk membangun antarmuka web yang modern dan responsif.

Umumnya AdminLTE ini digunakan untuk membangun dashboard administrasi atau panel administratif pada aplikasi web, terutama aplikasi yang berbasis manajemen data, sistem informasi, dan aplikasi yang memerlukan banyak tampilan data yang terorganisir dengan baik. Jadi mengapa template ini cocok digunakan untuk membuat Aplikasi Pengelolaan Laundry berbasis Website (Laundry Management Website) yang akan kita bangun.

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 konfigurasi AdminLTE, pastikan Tools di atas sudah dipersiapkan terlebih dahulu.

B. Langkah-langkah Konfigurasi AdminLTE

  • Download terlebih dahulu AdminLTE versi terbaru dengan cara¬†klik di sini¬†saja, setelah di klik akan secara otomatis mendownload folder AdminLTE dalam format Zip
AdminLTE setelah berhasil di downlod
  • Buat folder baru di dalam folder project Website CodeIgniter yang sudah kita miliki. Pembuatan folder dimulai dari membuka folder xampp -> htdocs -> ci4_nama_kelas -> public
  • Pada folder public buatlah folder baru yang diberi nama assets
contoh membuat folder baru bernama assets di dalam project ci4_anisa_xiirpl3
  • Selanjutnya mengekstrak folder Zip AdminLTE yang sudah di-download tadi dengan cara Klik kanan pada Folder -> pilih Extract Here.

folder setelah berhasil di Ekstrak
  • Selanjutnya rename atau ganti nama folder menjadi adminlte agar lebih mudah mengkonfigurasi saat membangun project

  • Selanjutnya memindahkan folder adminlte yang sudah di rename tadi ke dalam folder assets yang sudah dibuat sebelumnya
contoh folder adminlte yang berada di xampp/htdocs/ci4_anisa_xiirpl3/public/assets
  • Setelah selesai, buka VSCode dan buatlah file baru bernama v_login_auth.php di dalam folder app/Views

  • Copy seluruh paragraf script berikut dan Paste ke dalam file v_login_auth.php
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login | My Laundry</title>
    <style>
        body {
            background-image: url('https://i.pinimg.com/564x/c5/d5/b3/c5d5b3a7bcc91b1c4729c950639db0dd.jpg');
        }
    </style>

    <!-- 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="assets/adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- icheck bootstrap -->
    <link rel="stylesheet" href="assets/adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="assets/adminlte/dist/css/adminlte.min.css">
</head>

<body class="hold-transition login-page">
    <div class="login-box">
        <!-- /.login-logo -->
        <div class="card card-outline card-primary">
            <div class="card-header text-center">
                <p class="h1"><b>My Laundry</b></p>
            </div>
            <div class="card-body">
                <p class="login-box-msg">Sign in to start your session</p>

                <form action="" method="post">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="Username" name="username" value="">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fas fa-user"></span>
                            </div>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        <input type="password" class="form-control" placeholder="Password" name="password">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fas fa-lock"></span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-2 mb-3">
                        <button type="submit" class="btn btn-primary btn-block">Sign In</button>
                    </div>
                </form>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.login-box -->

    <!-- jQuery -->
    <script src="assets/adminlte/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="assets/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="assets/adminlte/dist/js/adminlte.min.js"></script>
</body>

</html>
PHP

  • Selanjutnya buatlah file baru bernama Auth.php di dalam folder app/Controllers

  • Copy seluruh paragraf script berikut dan Paste ke dalam file Auth.php
<?php

namespace App\Controllers;

class Auth extends BaseController
{
    public function index()
    {
        return view('v_login_auth');
    }
}
PHP

  • Selajutnya pada Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge buka url berikut: localhost/ci4_nama_kelas/public/auth
contoh memanggil url
localhost/ci4_anisa_xiirpl3/public/auth

Setelah mengikuti langkah-langkah konfigurasi assets AdminLTE dan contoh mengimplementasikan kepada tampilan Login, ada bagian yang harus dilengkapi terkait pembuatan fitur Login. Yaitu bagian yang berhubungan dengan Database yang bertujuan untuk pengelolaan data seperti username, password, dan role yang digunakan untuk mengakses Aplikasi Pengelolaan Laundry berbasis Website (Laundry Management Website) yang kita bangun. Klik di sini untuk tutorial terkait pengolahan data Login.

a founder of december skies code, a software engineering teacher, and a lifelong learner who just tries her best at whatever she does. let's work together!

Leave a Reply

Your email address will not be published. Required fields are marked *