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

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.

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.