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