Part II: An application in CodeIgniter

Submitted on Fri, 08/14/2020 - 16:43

Now, since we are familiar with the basics of CodeIgniter, we will develop a simple web application for user registration in MVC framework.

Color Codes:

Code in blue

Output in green

URL in red

Notes and comments in dark grey


Scenario:

Let us create a database with following details.

Parameter Value
Database name ci
Database username root
Database password root

Inside, this database we will create a table named members. The table structure shall look like following:

Field Type Remarks
id int(11) Primary key with auto increment 
name varchar(50)  

Database connection:

We need to define database connection variables in the file config.php located in the directory application/config/ as follows:

$db['default'] = array(
    'dsn'    => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => 'root',
    'database' => 'ci',
    'dbdriver' => 'mysqli',
    'dbprefix' => '',
    'pconnect' => FALSE,
    'db_debug' => (ENVIRONMENT !== 'production'),
    'cache_on' => FALSE,
    'cachedir' => '',
    'char_set' => 'utf8',
    'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
    'encrypt' => FALSE,
    'compress' => FALSE,
    'stricton' => FALSE,
    'failover' => array(),
    'save_queries' => TRUE
);

For now, we need to define hostname,username,password and database.

Now, let us dive into the process of user registration.

In terms of MVC, we can breakdown the application into following components:

File Role Path MVC Component
user_add_form.php Web page with input form for user registration. applications/views/ View
User_add_action.php Action file for the user registration input form at user_add_form.php. applications/controllers/ Controller
User_add_db.php Model file to connect to database and add data to database applications/models/ Model
confirmation.php Web page showing confirmation of data entry. applications/views/ View
User.php Main controller file to load user_add_form.php view applications/controllers/ Controller

Note: We can see that User_add_action.php file though being the action file for the input form doesn't add data to the database itself. Rather, it passes the data to the model file User_add_db.php which will then connect to the database and perform the insert operation.

In MVC we should always start with controllers since they manage the flow control of the application and are accessed through URL.

Let us work on the main controller file User.php. The file shall contain following function.

Function Purpose
__construct Constructor function to call the parent class (CI_Controller) constructor function. This makes loading of views and models through controller possible.
add To load the view file user_add_form.php for user registration

File: User.php

Code:

<?php

class User extends CI_Controller

{

public function __construct()

/*

The function is called before add function.

*/

{

parent::__construct();

/*

Calling the constructor of the parent class CI_Controller makes sure we can load models and views from the controller.

Since loading is always done through the controller, parent constructor calling is only required in the controller class.

*/

}    

public function add()

// This function is responsbile for displaying the add form

{

$this->load->view('user_add_form');

/*

Loading view, user_add_form.php for user registration form.

If parent constructor calling was not done in constructor function above, the function view() would not be available.

*/

}

}

?>

Now, add function can be accessed from following URL:

http://localhost/ci/user/add

This URL will load the view file, user_add_form.php


File: user_add_form.php

Code: 

<!DOCTYPE html>

<html>

<head>

<title>Staff List</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

</head>

<body>

<p>

</p>

<div class="w3-container">

<form name="form" method="post" action="http://localhost/ci/user_add_action">

<!--http://localhost/ci/user_add_action refers to the controller file User_add_action.php-->

    <div class="w3-container w3-teal w3-text-black"><h1>Enter your name</h1></div>

    <p><input type="text" class="w3-input" name="name"/></p>

    <p><input class="w3-input" type="submit" name="submit"/></p>

</form>

</div>

</body>

</html>


File: User_add_action.php

Code:

<?php

class User_add_action extends CI_Controller

{

public function __construct() 

{

parent::__construct();

// Caling parent class constructor to load model

$this->load->model('user_add_db');

// Loading model file User_add_db.php

}

public function index() 

{

$result=$this->user_add_db->add_data();

// Calling the function add_data() of the model file User_add_db.php to add data to the database

}

}

?>


File: User_add_db.php

Code:

<?php

class User_add_db extends CI_Model

{

public function __construct()

{

$this->load->database();

// Connects to the database defined in config.php

}

public function add_data() 

{

$name = $this->input->post('name');

/*

Passing the value of input textfield 'name'

Similar to $name=$_POST['name'];

*/

$data = array('name' => $name);

/*

In CI, we can use either array or object to push data to database. Using array in this case.

The key of the array for the given variable should be same as the name of the field in the table. 

*/

$this->db->insert('test',$data);

// This is where the actual data insertion occurs. CI uses short form form SQL queries. 

$this->load->view('confirmation');

// Loads the view file confirmation.php to the user.

}

}

?>


File: confirmation.php

Code:

<html>

<head><title>Congratulations</title></head>

<body>

<h1>Data added successfully.</h1>

</body>

</html>

Output:

Data added successfully.

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.