Simple CodeIgniter Session Example with Bootstrap

CodeIgniter is a popular PHP framework for web development task. Bootstrap is not included in CodeIgniter by default like other framework. This tutorial will help the reader to know the way to use bootstrap with codeigniter 3, basic routing process and implement authentication system using CodeIgniter and MySQL. Follow the steps properly to understand the task shown in this tutorial.

Steps.

1. Create a database named ‘ci_db‘ and add a table named ‘users’ by executing the following SQL.

CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`name` varchar(50) NOT NULL,
`username` varchar(50) NOT NULL,
`email` varchar(100) NOT NULL,
`password` varchar(255) NOT NULL,
`dob` varchar(15) NOT NULL,
`contactno` varchar(16) NOT NULL,
`code` varchar(255) NOT NULL,
`status` char(1) NOT NULL
);

2. Open database.php file from application/config folder and modify the database connection to connect with the database.

'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'ci_db',

3. Add the files like the following file structure shown below.

controllers
–>main.php
models
–>main_model.php
views
–>header.php
–>footer.php
–>user_header.php
–>user_page.php
–>login.php
–>registration.php

4. Create a folder named assets under project root folder.
5. Create two folders named css and js under assets folder.
6. Create style.css under css folder with the following script.

body {
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
}
header.masthead {
position: relative;
background-color: #343a40;
background: url("../img/bg-masthead.jpg") no-repeat center center;
background-size: cover;
padding-top: 8rem;
padding-bottom: 8rem;
}
header.masthead .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.3;
}
.header-bg-dark{
border-top: 5px solid #6BB4D2;
background-color: #0084B4!important;
}
.showcase .container {
min-height: 350px;
background-color: #F9F9F9;
margin-top: 10px;
margin-bottom: 10px;
}
.call-to-action {
position: relative;
background-color: #343a40;
background: url("../img/bg-masthead.jpg") no-repeat center center;
background-size: cover;
padding-top: 7rem;
padding-bottom: 7rem;
}
.call-to-action .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.3;
}
.bg-login-page {
background-color: #0084B4;
}
.padall {
padding: 3px;
}
footer.footer {
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
padding-top: 1rem;
padding-bottom: 1rem;
}
.footer-bg-dark {
background-color: #0084B4!important;
}
.list-inline {
list-style-type: none;
}
.list-inline-item a {
padding-bottom: 1rem;
}

7. Create common.js file under js folder and add the following code.

jQuery(document).on('click', 'button#contact-send-a', function() {
var formData = new FormData();
formData.append('fullname', jQuery('form#ajax-contact-a-frm').find('.input-ca-fullname').val());
formData.append('email', jQuery('form#ajax-contact-a-frm').find('.input-ca-email').val());
formData.append('comment', jQuery('form#ajax-contact-a-frm').find('.input-ca-comment').val());
formData.append('uplfile', jQuery('form#ajax-contact-a-frm').find('input.input-ca-uplfile')[0].files[0]);
jQuery.ajax({
url:baseurl+'contact/sendWithAttachData',
type: 'post',
data: formData,
cache: false,
processData: false,
contentType: false,
dataType:'json',
beforeSend: function () {
jQuery('button#contact-send-a').button('loading');
},

complete: function () {
jQuery('button#contact-send-a').button('reset');
jQuery("form#ajax-contact-a-frm").find('textarea, input, file').each(function () {
jQuery(this).val('');
});

setTimeout(function () {
jQuery('span#success-msg').html('');
}, 4000);
},
success: function (json) {
$('.text-danger').remove();
if (json['error']) {
for (i in json['error']) {
var element = $('.input-ca-' + i.replace('_', '-'));
if ($(element).parent().hasClass('input-group')) {
$(element).parent().after('<small class="text-danger">' + json['error'][i] + '</small>');
} else {
$(element).after('<small class="text-danger">' + json['error'][i] + '</small>');
}
}
} else {
jQuery('span#success-msg').html('<div class="alert alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert">&times;</button>Your query has been successfully submitted.</div>');
}
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});

8. Add the following code in header.php under views folder.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Codeigniter</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<!-- Custom fonts for this template -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="<?php echo base_url();?>assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top " style="background-color: lightgreen !important;">
<a class="navbar-brand font-weight-bold" href="https://codeigniter.com" style="color: gray !important;"><h1>Front Page</h1></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive" >
<ul class="navbar-nav ml-auto" >
<li class="nav-item active">
<a class="nav-link" href="<?php echo base_url();?>" style="font-size:20px;color:navy;">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="<?php echo base_url();?>main/login" style="font-size:20px;color:navy;">Login
<span class="sr-only"></span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="<?php echo base_url();?>main/registration" style="font-size:20px;color:navy;">Register
<span class="sr-only"></span>
</a>
</li>
</ul>
</div>
</nav>

9. Add the following code in footer.php under views folder.

<!-- Footer -->
<footer class="footer footer-bg-dark" style="background-color: lightgreen !important;">

<div class="row">
<div class="col-md-12 h-100 text-center text-lg-center my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item">
<a href="#" style="color:navy;">About</a>
</li>
<li class="list-inline-item">&sdot;</li>
<li class="list-inline-item">
<a href="#" style="color:navy;">Contact</a>
</li>
<li class="list-inline-item">&sdot;</li>
<li class="list-inline-item">
<a href="#" style="color:navy;">Terms of Use</a>
</li>
<li class="list-inline-item">&sdot;</li>
<li class="list-inline-item">
<a href="#" style="color:navy;">Privacy Policy</a>
</li>
</ul>
<p class="small mb-4 mb-lg-0" style="color: navy">Copyright &copy; <?php print date('Y', time());?>

</div>

</footer>
<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
<script>
$(document).ready(function () {
bsCustomFileInput.init()
})
</script>
<script src="<?php echo base_url();?>assets/common.js"></script>

</body>
</html>

10. Add the following code in front_page.php under views folder.

<?php $this->load->view('header');?>
<!-- container -->
<section class="showcase" style="min-height:550px;">
<br/><br/><br/>
<div class="row justify-content-center">
<div class="col-12 col-md-6 col-lg-6 pb-4">

<h3 style="color:green;">Authentication System using CodeIgniter and Bootstrap</h3>
</div>
</div>
</section>
<?php $this->load->view('footer');?>

11. Set the following configuration in config.php under config folder.

$config['base_url'] = 'http://localhost/ci_project/';
$config['index_page'] = '';

12. Create .htaccess file in root folder and add the following content.

DirectoryIndex index.php
RewriteEngine on
RewriteCond $1 !^(index\.php|(.*)\.swf|forums|images|css|downloads|jquery|js|robots\.txt|favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ ./index.php?$1 [L,QSA]

13. Add the following code in main.php under controllers folder.

<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');
class Main extends CI_Controller {
public function __construct() {
parent::__construct();
//load model
$this->load->model('Main_model', 'main');
$this->load->library('form_validation');
$this->load->library('session');
$this->load->helper('url');
$this->load->database();
}

public function index()
{

$this->load->view('front_page');
}
// index method
public function registration() {
$data = array();
$data['metaDescription'] = 'Registration';
$data['metaKeywords'] = 'Registration';
$data['title'] = "Registration - CodersMag";
$data['breadcrumbs'] = array('Login' => '#');

$this->load->view('registration', $data);
}

// action create user method
public function actionRegister() {
$this->form_validation->set_rules('name', 'First Name', 'required');
$this->form_validation->set_rules('email', 'Email', 'trim|required|valid_email');
$this->form_validation->set_rules('contactno', 'Contact No', 'required|regex_match[/^[0-9]{11}$/]');
$this->form_validation->set_rules('password', 'Password', 'trim|required|min_length[6]');
$this->form_validation->set_rules('confirm_password', 'Password Confirmation', 'trim|required|matches[password]');

$this->form_validation->set_rules('dob', 'Date of Birth(DD-MM-YYYY)', 'required');

if ($this->form_validation->run() == FALSE) {
$this->registration();
} else {
$Name = $this->input->post('name');

$email = $this->input->post('email');
$password = $this->input->post('password');
$contactNo = $this->input->post('contactno');
$dob = $this->input->post('dob');

$status = 1;
$verificationCode = 1;
$userName = $this->main->generateUniqueUserName('users', trim($Name), 'username', NULL, NULL);
$this->main->setUserName($userName);
$this->main->setName(trim($Name));

$this->main->setEmail($email);
$this->main->setPassword($password);
$this->main->setContactNo($contactNo);

$this->main->setDOB($dob);
$this->main->setVerificationCode($verificationCode);

$this->main->setStatus($status);
$chk = $this->main->create();
redirect('main/login');
}
}

// login method
public function login() {
$data = array();
$data['metaDescription'] = 'Login';
$data['metaKeywords'] = 'Login';
$data['title'] = "Login";
$data['breadcrumbs'] = array('Login' => '#');

$this->load->view('login', $data);
}

// action login method
function doLogin() {
// Check form validation
$this->load->library('form_validation');
$this->form_validation->set_rules('username', 'User Name', 'trim|required');
$this->form_validation->set_rules('password', 'Password', 'trim|required');
if ($this->form_validation->run() == FALSE) {
//Field validation failed. User redirected to login page
$this->login();
} else {
$sessArray = array();
//Field validation succeeded. Validate against database
$username = $this->input->post('username');
$password = $this->input->post('password');

$this->main->setUserName($username);
$this->main->setPassword($password);
//query the database
$result = $this->main->login();

if (!empty($result) && count($result) > 0) {
foreach ($result as $row) {
$mainArray = array(
'user_id' => $row->user_id,
'first_name' => $row->name,

'user_name' => $row->username,
'email' => $row->email,
'is_mainenticate_user' => TRUE,
);
$this->session->set_userdata('ci_session_key_generate', TRUE);
$this->session->set_userdata('ci_seesion_key', $mainArray);
// remember me
if(!empty($this->input->post("remember"))) {
setcookie ("loginId", $username, time()+ (10 * 365 * 24 * 60 * 60));
setcookie ("loginPass", $password, time()+ (10 * 365 * 24 * 60 * 60));
} else {
setcookie ("loginId","");
setcookie ("loginPass","");
}
}
redirect('main/profile');
} else {
$this->login();
}
}
}
// profile page
public function profile() {
if ($this->session->userdata('ci_seesion_key')['is_mainenticate_user'] == FALSE) {
redirect('main/login');
} else {
$data = array();
$data['metaDescription'] = 'Profile';
$data['metaKeywords'] = 'Profile';
$data['title'] = "User Dashboard";
$data['breadcrumbs'] = array('Profile' => '#');
$this->load->view('user_page', $data);
}
}
//logout method
public function logout() {
$this->session->unset_userdata('ci_seesion_key');
$this->session->unset_userdata('ci_session_key_generate');
$this->session->sess_destroy();
$this->output->set_header("Cache-Control: no-store, no-cache, must-revalidate, no-transform, max-age=0, post-check=0, pre-check=0");
$this->output->set_header("Pragma: no-cache");
redirect('main/login');
}

}

14. Add the following code in main_model.php under models folder.

<?php

if (!defined('BASEPATH')) exit('No direct script access allowed');

class Main_model extends CI_Model {
// Declaration of a variables
private $_userID;
private $_userName;
private $_Name;

private $_email;
private $_password;
private $_contactNo;

private $_dob;
private $_verificationCode;

private $_status;

//Declaration of a methods
public function setUserID($userID) {
$this->_userID = $userID;
}

public function setUserName($userName) {
$this->_userName = $userName;
}

public function setPassword($password) {
$this->_password = $password;
}

public function setName($Name) {
$this->_Name = $Name;
}

public function setEmail($email) {
$this->_email = $email;
}

public function setContactNo($contactNo) {
$this->_contactNo = $contactNo;
}

public function setDOB($dob) {
$this->_dob = $dob;
}

public function setVerificationCode($verificationCode) {
$this->_verificationCode = $verificationCode;
}

public function setStatus($status) {
$this->_status = $status;
}

//create new user
public function create() {
$hash = $this->hash($this->_password);
$data = array(
'username' => $this->_userName,
'name' => $this->_Name,

'email' => $this->_email,
'password' => $hash,
'contactno' => $this->_contactNo,

'dob' => $this->_dob,
'code' => $this->_verificationCode,
'status' => $this->_status
);
$this->db->insert('users', $data);
if (!empty($this->db->insert_id()) && $this->db->insert_id() > 0) {
return TRUE;
} else {
return FALSE;
}
}

// login method and password verify
function login() {
$this->db->select('id as user_id, username, email, name, password');
$this->db->from('users');
$this->db->where('email', $this->_userName);
$this->db->where('code', 1);
$this->db->where('status', 1);
//{OR}
$this->db->or_where('username', $this->_userName);
$this->db->where('code', 1);
$this->db->where('status', 1);
$this->db->limit(1);
$query = $this->db->get();
if ($query->num_rows() == 1) {
$result = $query->result();
foreach ($result as $row) {
if ($this->verifyHash($this->_password, $row->password) == TRUE) {
return $result;
} else {
return FALSE;
}
}
} else {
return FALSE;
}
}

// password hash
public function hash($password) {
$hash = password_hash($password, PASSWORD_DEFAULT);
return $hash;
}

// password verify
public function verifyHash($password, $vpassword) {
if (password_verify($password, $vpassword)) {
return TRUE;
} else {
return FALSE;
}
}

// generate Unique Username
public function generateUniqueUserName($tableName, $string, $field, $key = NULL, $value = NULL) {
$slug = $this->cleanUserName($string);
$i = 0;
$params = array();
$params[$field] = $slug;
if ($key)
$params["$key !="] = $value;
while ($this->db->where($params)->get($tableName)->num_rows()) {
if (!preg_match('/[0-9]+$/', $slug))
$slug .= '' . ++$i;
else
$slug = preg_replace('/[0-9]+$/', ++$i, $slug);
$params [$field] = $slug;
}
return $slug;
}

// clean Username
public function cleanUserName($string) {
//Lower case everything
$string = strtolower(trim($string));
//Make alphanumeric (removes all other characters)
$string = preg_replace("/[^a-z0-9_\s-]/", "", $string);
//Clean up multiple dashes or whitespaces
$string = preg_replace("/[\s-]+/", " ", $string);
//Convert whitespaces and underscore to dash
$string = preg_replace("/[\s_]/", "", $string);
$string = rtrim($string, '');
return $string;
}

}
?>

15. Set the following configuration in routes.php under config folder.

$route['default_controller'] = 'main/index';

16. Run the project from the browser.

17. Add the following code in login.php under views folder.

<?php $this->load->view('header');?>
<!-- container -->
<section class="showcase" style="min-height:550px;">
<br/><br/><br/>

<form action="<?php print site_url();?>main/doLogin" class="remember-login-frm" id="remember-login-frm" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<div class="row justify-content-center">
<div class="col-12 col-md-6 col-lg-3 pb-5">
<div class="row"><?php echo validation_errors('<div class="col-12 col-md-12 col-lg-12"><div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert">&times;</button>', '</div></div>'); ?></div>
<!--Form with header-->
<div class="card border-info rounded-0">
<div class="card-header p-0">
<div class="bg-login-page text-white text-center py-2" style="background-color: lightgreen;">
<h3>LogIn</h3>
</div>
</div>
<div class="card-body p-3">
<!--Body-->
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-user text-info"></i></div>
</div>
<input type="text" class="form-control" id="remail" name="username" placeholder="Email *" value="<?php if(isset($_COOKIE["loginId"])) { echo $_COOKIE["loginId"]; } ?>">
</div>
</div>
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-key text-info" aria-hidden="true"></i></div>
</div>
<input type="password" class="form-control" id="rpassword" name="password" placeholder="Password *" value="<?php if(isset($_COOKIE["loginPass"])) { echo $_COOKIE["loginPass"]; } ?>">
</div>
</div>

<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember" <?php if(isset($_COOKIE["loginId"])) { ?> checked="checked" <?php } ?>> Remember Me
</label>
</div>
</div>

<div class="text-center">
<button type="submit" id="contact-send-a" class="btn btn-success btn-block rounded-0 py-2">Submit</button>
</div>
<br>
<span>New user? <a href="<?php echo base_url()?>auth/registration">Register</a></span>

</div>
</div>
</div>
</div>
</form>

</section>
<?php $this->load->view('footer');?>

18. Run the project from the browser.

19. Add the following code in registration.php under views folder.

<?php $this->load->view('header');?>
<!-- container -->
<section class="showcase">

<form action="<?php echo base_url();?>main/actionRegister" class="remember-login-frm" id="remember-login-frm" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6 pb-5">
<div class="row"><ul style="color: #CB0000"><?php echo validation_errors('<li>', '</li>'); ?></div>
<!--Form with header-->
<div class="card border-info rounded-0">
<div class="card-header p-0">
<div class="bg-login-page text-white text-center py-2" style="background-color: lightgreen;">
<h3>Registration</h3>
</div>
</div>
<div class="card-body p-3">
<!--Body-->
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-user"></i></div>
</div>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>

<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope-square"></i></div>
</div>
<input type="text" class="form-control" id="email" name="email" placeholder="Email *">
</div>
</div>
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-key"></i></div>
</div>
<input type="password" class="form-control" id="password" name="password" placeholder="Password *">
</div>
</div>
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-key"></i></div>
</div>
<input type="password" class="form-control" id="confirm-password" name="confirm_password" placeholder="Confirm Password *">
</div>
</div>
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-phone-square"></i></div>
</div>
<input type="text" class="form-control" id="contactno" name="contactno" placeholder="Contact No">
</div>
</div>

<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="far fa-calendar-alt"></i></div>
</div>
<input type="date" class="form-control" id="dob" name="dob" placeholder="Date of Birth">
</div>
</div>

<div class="text-center">
<button type="submit" id="contact-send-a" class="btn btn-success btn-block rounded-0 py-2">Register</button>
</div>

</div>
</div>
</div>
</div>
</form>

</section>
<?php $this->load->view('footer');?>

20. Run the project from the browser.

21. Add the following code in user_header.php under views folder.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>Codeigniter</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<!-- Custom fonts for this template -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="<?php echo base_url(); ?>assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top " style="background-color: lightgreen !important;">

<a class="navbar-brand font-weight-bold" href="https://codeigniter.com" style="color: gray !important;"><h1>Dashboard</h1></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive" >
<ul class="navbar-nav ml-auto" >
<li class="nav-item active">
<a class="nav-link" href="<?php echo base_url();?>" style="font-size:20px;color:navy;">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="<?php echo base_url();?>main/logout" style="font-size:20px;color:navy;">Logout
<span class="sr-only"></span>
</a>
</li>

</ul>
</div>

</nav>

22. Add the following code in user_page.php under views folder.

<?php $this->load->view('user_header');?>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.title {
color: grey;
font-size: 18px;
}
.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #3498DB;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
button:hover, a:hover {
opacity: 0.9;
}
</style>

<?php
$name="Welcome ".$this->session->userdata('ci_seesion_key')['first_name'];
?>
<!-- container -->
<section class="showcase" style="min-height: 550px;">

<div class="pb-2 mt-4 mb-2">
<h2><?php echo $name ?></h2>
</div>
<span id="success-msg"></span>

</section>
<?php $this->load->view('footer');?>

23. Finally, run the project from the browser.

The steps are shown in the following video tutorial.