Blog Development and Profile Management Using CodeIgniter4 (Part 2-Register Page Setup)

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

Dalam tahapan pertama kita telah membahas instalasi framework CodeIgniter4 & AdminLTE serta persiapan database yang akan menjadi fondasi dari pengembangan blog ini. Melanjutkan dari tahap tersebut, kita akan beralih ke pengaturan halaman pendaftaran (Register Page).

Pada tahapan ini akan membahas langkah-langkah penting untuk mengkonfigurasi halaman pendaftaran sehingga pengguna baru dapat membuat akun dengan mudah. Proses ini melibatkan pembuatan form pendaftaran yang intuitif, pengaturan validasi data untuk memastikan keakuratan informasi yang diinputkan, dan integrasi dengan database untuk menyimpan data pengguna.

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/myblog-nama-kelas/public

Contoh memanggil url
**localhost:8080** dengan metode **php spark serve**

Pada VSCode pastikan sudah membuka folder project yang sudah dibuat sebelumnya

Contoh membuka folder **myblog-anisa-xiirpl3**

B. Langkah-langkah Pengaturan Halaman Register

1. Persiapan View, Controller, & Route

View

Bukalah folder app/Views
Buatlah folder baru bernama auth di dalam folder app/Views

Kemudian buatlah file baru bernama v_authpage.php di dalam folder app/Views/auth

Copy seluruh paragraf script berikut dan Paste ke dalam file v_authpage.php lalu simpan

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= $title; ?></title>
    <style>
        body {
            background-image: url('https://i.pinimg.com/originals/3c/9a/9f/3c9a9f962f51ce58731c1ab14498fcb9.jpg');
            background-size: cover;
        }

        .card.card-outline.card-pink {
            background: linear-gradient(to bottom right, #F5F7FB, #E8D0CF);
            border: none;
        }

        .card-body.bg-pink {
            background: linear-gradient(to bottom right, #E8D0CF, #F5F7FB);
        }

        .card.card-outline.card-pink .card-header {
            background-color: transparent;
        }
    </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="<?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">
</head>

<body class="hold-transition login-page">
    <div class="login-box">
        <!-- /.login-logo -->
        <div class="card card-outline card-pink">
            <div class="card-header text-center">
                <p class="h1"><b><?= $header; ?></b></p>
            </div>
            <div class="card-body bg-pink">
                <p class="login-box-msg text-dark"><?= $message; ?></p>

                <!-- Calling pages -->
                <?php
                if (isset($page)) {
                    echo $page;
                }
                ?>

            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.login-box -->

    <!-- 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>
</body>

</html>

PHP

Selanjutnya buatlah file baru bernama v_register.php di dalam folder app/Views/auth

Copy seluruh paragraf script berikut dan Paste ke dalam file v_register.php lalu simpan

<form action="" method="post">
    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Username" name="username" value="" required>
        <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" required>
        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-lock"></span>
            </div>
        </div>
    </div>
    <div class="input-group mb-3">
        <input type="password" class="form-control" placeholder="Confirm Password" name="password_confirm" required>
        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-lock"></span>
            </div>
        </div>
    </div>
    <div class="text-center mt-2 mb-3">
        <button type="submit" class="btn bg-gray-dark btn-block">Register</button>
    </div>
</form>

<p class="mb-1 text-dark">Already have an account? <a href="">Login here</a></p>

PHP

Controller

Bukalah folder app/Controllers
Buatlah file baru bernama AuthController.php di dalam folder app/Controllers

Selanjutnya isi file AuthController.php dengan paragraf script berikut lalu simpan

Route

Bukalah folder app/Config
Ubah file Routes.php dengan mendaftarkan url baru untuk memanggil halaman register lalu simpan

Selanjutnya mencoba membuka halaman register pada Web Browser dengan mengetikan url berikut: localhost/myblog-nama-kelas/public/register, kemudian tekan Enter

Contoh memanggil url
**localhost:8080/register** dengan metode **php spark serve**

2. Aktifasi Fungsi Form Register

Model

Bukalah folder app/Models
Buatlah file baru bernama UserModel.php di dalam folder app/Models

Kemudian isi file UserModel.php dengan paragraf script berikut lalu simpan

Controller

Bukalah folder app/Controllers
Ubah file AuthController.php dengan mengimpor class UserModel di bagian atas sebelum class AuthController lalu simpan

Selanjutnya tambahkan function baru di dalam class AuthController lalu simpan

Kemudian di dalam function register() tambahkan perintah method post lalu simpan

View

Bukalah folder app/Views/auth
Ubah file v_register.php dengan menambahkan perintah validasi error & success sebelum tag <form> lalu simpan

Kemudian tambahkan perintah mengirimkan data di dalam atribut action pada tag <form> lalu simpan

Selanjutnya tambahkan perintah mempertahankan nilai input username di dalam atribut value pada tag <input> lalu simpan

Kemudian tambahkan perintah berpindah ke halaman login di dalam atribut href pada tag <a> lalu simpan

Route

Bukalah folder app/Config
Ubah file Routes.php dengan mendaftarkan url baru untuk menyimpan proses input data user ke dalam database dari halaman register

Selanjutnya mencoba mendaftarkan user baru di halaman register dengan mengisi data (opsional) pada kolom Username, Password, Confirm Password