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
- Pada VSCode pastikan sudah membuka folder project yang sudah dibuat sebelumnya
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>
PHPController
- 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
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
- Jika data user berhasil didaftarkan maka akan muncul notifikasi sukses
- Data user yang berhasil didaftarkan akan tersimpan di dalam database