CodeIgniter 4 AJAX Tutorial
About Lesson

Creating my account system in CodeIgniter 4 involves several steps, including setting up the database, creating controllers, models, and views, and implementing user registration, login, and logout functionalities. Below is a simple tutorial to guide you through the process. Make sure you have CodeIgniter 4 installed on your server before starting.

Step 1: Database Setup

Create a database and a table to store user information. 

 

Step 2: CodeIgniter Configuration

Make sure your CodeIgniter configuration files are set up correctly, especially the App/Config/Database.php configuration file with the database connection details.

 

Step 3: Controller

Create a controller for handling user registration, login, and logout. In your app/Controllers/myaccount/MyAccount.php file:

<?php
namespace App\Controllers\myaccount;

use App\Controllers\BaseController;

use App\Models\login\LoginModel;

class MyAccount extends BaseController {

public function __construct() {
$db = db_connect();
$this->session = \Config\Services::session();
$this->login = new LoginModel($db);

$this->ip_address = $_SERVER['REMOTE_ADDR'];
$this->datetime = date("Y-m-d H:i:s");

}

public function index() {
$this->myaccount();
}

public function myaccount() {
if($this->session->get('login_status')) {
$data = [];
$data ["result"] = $this->login->getEntry(['id' => $this->session->get('login_id')]);
$data ['content_title'] = 'My Account';
echo view('myaccount/myaccount', $data);
} else {
return redirect()->to(base_url('login'));
}
}

public function update() {
$id = $this->request->getPost('id');
$name = $this->request->getPost('name');
$email = $this->request->getPost('email');
$password = $this->request->getPost('password');
$mobile_number = $this->request->getPost('mobile_number');

$where = [
'email' => $email,
'id !=' => $id,
];
$has_account = $this->login->getEntry($where);
if($has_account) {
$json = [
'status' => false,
'message' => showDangerMessage("Entered email address is already registered"),
];
} else {
if($password) {
$data = [
'name' => $name,
'email' => $email,
'password' => md5($password),
'mobile_number' => $mobile_number,
'ip_address' => $this->ip_address,
];
} else {
$data = [
'name' => $name,
'email' => $email,
'mobile_number' => $mobile_number,
'ip_address' => $this->ip_address,
];
}

$result = $this->login->updateEntry(['id' => $id], $data);
if($result) {
$result = $this->login->getEntry(['id' => $id]);
if($result) {
$data = [
'login_id' => $result->id,
'login_email' => $result->email,
'login_name' => $result->name,
'login_mobile_number' => $result->mobile_number,
'user_status' => $result->status,
'login_status' => TRUE,
];
$this->session->set($data);
}
$json = [
'status' => true,
'message' => showSuccessMessage("Your account has been updated successfully"),
];
} else {
$json = [
'status' => false,
'message' => showDangerMessage("Something went wrong. Please try again!"),
];
}
}
echo json_encode($json);
}
}

 

Step 4: Views

Create views for user registration and login in the app/Views/myaccount directory

<?php $session    = \Config\Services::session();
?>
<!DOCTYPE html>
<html lang="en">

<head>
<title><?php echo $content_title; ?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
<div class="jumbotron text-center">
<h1>Welcome <?php echo $session->get('login_name'); ?></h1>
<p>My Account</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">

</div>
<div class="col-sm-6">
<div class="message"></div>
<form id="form-update-myaccount" method="post" autocomplete="off">
<input type="hidden" name="id" value="<?php echo $result->id; ?>">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name" value="<?php echo $result->name; ?>" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email" value="<?php echo $result->email; ?>" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<div class="form-group">
<label>Mobile No.</label>
<input type="text" class="form-control" id="mobile_number" name="mobile_number" placeholder="Mobile No." value="<?php echo $result->mobile_number; ?>" maxlength="10" required>
</div>
<div class="form-group">
<button type="submit" id="btn-login" class="btn btn-success">Update</button>
</div>
</form>
</div>
</div>
</div>

<script>
$(document).ready(function() {
$("#form-update-myaccount").on("submit", function(e) {
e.preventDefault();
let data = $(this).serialize();
$.post('<?php echo base_url("myaccount/update"); ?>', data, function(result) {
$(".message").html(result.message);
}, 'json');
});
});
</script>
</body>

</html>

 

Step 5: Routes

Define the routes in app/Config/Routes.php:

// My Account Routes
$routes->group('myaccount', function($routes) {
$routes->get('/', 'myaccount\MyAccount::index', ['filter' => 'auth']);
$routes->post('update', 'myaccount\MyAccount::update', ['filter' => 'auth']);
});
My Account