Simple CRUD Apps With Codeigniter Tutorial For Beginners

Continuing my two previous CodeIgniter tutorial articles. On this occasion, I will discuss how to create a simple CRUD application using CodeIgniter framework for beginners. Codeigniter is a PHP framework that is suitable for beginner. All libraries for develop application have been provided by CodeIgniter. The concept of MVC on CodeIgniter allows a beginner to code neatly and regularly. Follow the following tutorial.

In the previous article, I have discussed the basic knowledge of what is CodeIgniter and MVC concept on CodeIgniter. If you are a beginner who learning about this PHP framework, it’s good first to read my previous article to follow this article correctly.

To understand more detail our CodeIgniter tutorial, we will make a simple CRUD application to display product list, add, edit and delete data in the product database. In this CodeIgniter tutorial, will be divided into several step like the following table of contents.

Table of Contents

1 Codeigniter tutorial for beginners step by step

Codeigniter tutorial for beginners step by step

Installing Codeigniter

I have discussed in full how to install CodeIgniter in the article “Introduction – PHP Codeigniter Tutorial For Dummies Step By Step.” Please download Master CodeIgniter on the official site. Then extract and create a new project named mycodeigniter.

Next step we will do the basic configuration of CodeIgniter. Please open the config.php file in the “application/config” folder and do the settings according to the following script:

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

1	$config['base_url'] = 'http://localhost/mycodeigniter';

Make sure the installation has been successful and run the URL http://localhost/mycodeigniter like the following picture below:

Configure MYSQL database on CodeIgniter using PDO – Codeigniter Tutorial

Next, we will tell the CodeIgniter about what libraries we need during the development process. This configuration contained in the autoload.php file in the “application/config folder”.

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url','form');

1 2	$autoload['libraries'] = array('database'); $autoload['helper'] = array('url','form');

How to connect CodeIgniter and MySQL using PDO is quite easy. You just need to add the following settings to the database.php file in the folder (application/config/database.php).

$db['default'] = array(
	'dsn'	=> 'mysql:host=localhost; dbname=pos; charset=utf8;',
	'hostname' => 'localhost',
	'username' => 'root', // user db
	'password' => '123456', // password db
	'database' => '',
	'dbdriver' => 'pdo', // pdo connection
	'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
);

$db['default'] = array(

'dsn' => 'mysql:host=localhost; dbname=pos; charset=utf8;',

'hostname' => 'localhost',

'username' => 'root', // user db

'password' => '123456', // password db

'database' => '',

'dbdriver' => 'pdo', // pdo connection

'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

);

Create database “pos” in MySQL and add data in the product table

Create a new database with the name “pos.” Then create a new table with the name “m_item” with fields like the following picture:

Add 2 data in the “m_item” table with the following MySQL script:

insert into 'm_item' ('id_item', 'item_name', 'note', 'stock', 'price', 'unit') values('PB0001','Razor Blade','best razor blade in the world','9.00','12000','PCS');
insert into 'm_item' ('id_item', 'item_name', 'note', 'stock', 'price', 'unit') values('PB0002','Muscle Face','for build body','10.00','50000','PCS');

insert into 'm_item' ('id_item', 'item_name', 'note', 'stock', 'price', 'unit') values('PB0001','Razor Blade','best razor blade in the world','9.00','12000','PCS');

insert into 'm_item' ('id_item', 'item_name', 'note', 'stock', 'price', 'unit') values('PB0002','Muscle Face','for build body','10.00','50000','PCS');

Displays the product list

To interact with the product table we have to create a new model stored in the “application/model” folder, and please create a model with the name Product_model.php then type the following script

<?php 
class Product_model extends CI_Model {
	function list_product(){
		$product = $this->db->query('select * from m_item');
		return $product;
	}
}
?>

<?php

class Product_model extends CI_Model {

function list_product(){

$product = $this->db->query('select * from m_item');

return $product;

}

When finished creating the model then the next step, we will create a controller that will connect to the model and view, the controller will be stored in the “application/controller” folder. Create a new controller named Product.php and write the following script:

<?php
class Product extends  CI_Controller {
	public function index(){
		$this->load->model('product_model');
		$data['product_list'] = $this->product_model->list_product()->result();
		$data['title'] = "Product";
		$this->load->view('product_list',$data);
	}
}

<?php

class Product extends CI_Controller {

public function index(){

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

$data['product_list'] = $this->product_model->list_product()->result();

$data['title'] = "Product";

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

}

Now that the model and controller is done, the final step is to build a view to display the data to the application user, and this view is stored in the “application/view” folder. Create a view with the name of product_list.php and type the following script:

<h2>List of <?php echo $title; ?></h2>
<hr />
<?php echo anchor('product/add','NEW PRODUCT'); ?>
<br/>
<br>
<table border="1">
	<thead>
		<tr>
			<th>ID</th>
			<th>NAME</th>
			<th>NOTE</th>
			<th>PRICE</th>
			<th>STOCK</th>
		</tr>
	</thead>
	<tbody>
		<?php foreach ($product_list as $list) { ?>
		<tr>
			<td><?php echo $list->id_item ?></td>
			<td><?php echo $list->item_name ?></td>
			<td><?php echo $list->note ?></td>
			<td><?php echo $list->price ?></td>
			<td><?php echo $list->stock.' '.$list->unit ?></td>
		</tr>
		<?php	} 	?>	
	</tbody>
</table>

<hr />

<?php echo anchor('product/add','NEW PRODUCT'); ?>

<br/>

<br>

<thead>

<tr>

<th>PRICE</th>

<th>STOCK</th>

</tr>

</thead>

<tbody>

<?php foreach ($product_list as $list) { ?>

<tr>

<td><?php echo $list->price ?></td>

<td><?php echo $list->stock.' '.$list->unit ?></td>

</tr>

<?php } ?>

</tbody>

</table>

Please try at your browser with url: http://localhost/mycodeigniter/index.php/product/

If successful then the system will display the product list as shown below.

Create a new product

The data-added process requires two functions on the controller:

add function:
The task is to invoke the view to display the input form.

save function:
The task is to store data inputted by the user and submitted to the model to saved in the database

Add the following script to the Product.php controller:

public function add()
	{
		$this->load->view('product_form');
	}
	public function save()
	{
		$array_item = array(
			'id_item' => $this->input->post('item_id'),
			'item_name' => $this->input->post('item_name'),
			'note' => $this->input->post('item_note'),
			'stock' => $this->input->post('item_stock'),
			'price' => $this->input->post('item_price'),
			'unit' => $this->input->post('item_unit')
			);
		$this->load->model('product_model');
		$this->product_model->save($array_item);
		redirect('product');
	}

public function add()

{

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

}

public function save()

{

$array_item = array(

'id_item' => $this->input->post('item_id'),

'item_name' => $this->input->post('item_name'),

'note' => $this->input->post('item_note'),

'stock' => $this->input->post('item_stock'),

'price' => $this->input->post('item_price'),

'unit' => $this->input->post('item_unit')

);

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

$this->product_model->save($array_item);

redirect('product');

}

To communicate with the database, create new function in the product_model.php to save new data to “m_item” table.

function save($array)
	{
		$this->db->insert('m_item',$array);
	}

function save($array)

{

$this->db->insert('m_item',$array);

}

Up to this point, the display of our application will be as follows:

Update item data

The two processes will be discussed at this step is the process of retrieve data from the database and update process to change the existing records.

Like my previous CRUD tutorial, where the user will select the product to be edited. Then customize the product with the new data and then the save process will update the database.

The update process requires two functions on the controller product:
edit function:
Used to display the edit product form

save_edit function:
This function stores the result of data changes and passes it to the model to update the items in the database.

Copy the following script to create update controller:

public function save_edit()
	{
		$id = $this->input->post('item_id');
		$array_item = array(
			'item_name' => $this->input->post('item_name'),
			'note' => $this->input->post('item_note'),
			'stock' => $this->input->post('item_stock'),
			'price' => $this->input->post('item_price'),
			'unit' => $this->input->post('item_unit')
			);
		$this->load->model('product_model');
		$this->product_model->update($id,$array_item);
		redirect('product');
	}
	public function edit(){
		$this->load->model('product_model');
		$data['product'] = $this->product_model->product($this->uri->segment(3))->row_array();
		$this->load->view('product_edit',$data);
	}

public function save_edit()

{

$id = $this->input->post('item_id');

$array_item = array(

'item_name' => $this->input->post('item_name'),

'note' => $this->input->post('item_note'),

'stock' => $this->input->post('item_stock'),

'price' => $this->input->post('item_price'),

'unit' => $this->input->post('item_unit')

);

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

$this->product_model->update($id,$array_item);

redirect('product');

}

public function edit(){

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

$data['product'] = $this->product_model->product($this->uri->segment(3))->row_array();

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

}

Create a new view as product_edit.php to display the edit form. Copy the following script to product_edit.php

<?php echo form_open('product/save_edit') ?>
<?php echo form_hidden('item_id',$product['id_item']) ?>
<table>
	<tr>
		<td>NAME</td>
		<td><?php echo form_input('item_name',$product['item_name'],array('placeholder'=>'Name')) ?></td>
	</tr>
	<tr>
		<td>NOTE</td>
		<td><?php echo form_textarea('item_note',$product['note'],array('placeholder'=>'Note')) ?></td>
	</tr>		
	<tr>
		<td>PRICE</td>
		<td><?php echo form_input('item_price',$product['price'],array('placeholder'=>'Price')) ?></td>
	</tr>
	<tr>
		<td>STOCK</td>
		<td><?php echo form_input('item_stock',$product['stock'],array('placeholder'=>'Stock')) ?></td>
	</tr>
	<tr>
		<td>UNIT</td>
		<td><?php echo form_input('item_unit',$product['unit'],array('placeholder'=>'Unit Name')) ?></td>
	</tr>
	<tr>
		<td colspan="2"> <hr><?php echo form_submit('submit', 'Update Item!'); ?> <?php echo anchor('product','Back') ?></td>
	</tr>
</table>
<?php echo form_close(); ?>

<?php echo form_open('product/save_edit') ?>

<?php echo form_hidden('item_id',$product['id_item']) ?>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>PRICE</td>

<td><?php echo form_input('item_price',$product['price'],array('placeholder'=>'Price')) ?></td>

</tr>

<tr>

<td>STOCK</td>

<td><?php echo form_input('item_stock',$product['stock'],array('placeholder'=>'Stock')) ?></td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<?php echo form_close(); ?>

Create update function on Product_model.php to update data in the database:

function update($id,$array_item)
	{
		$this->db->where('id_item',$id);
		$this->db->update('m_item',$array_item);
	}

function update($id,$array_item)

{

$this->db->where('id_item',$id);

$this->db->update('m_item',$array_item);

}

The next step is edit your product_list.php view and add the following script:

<td> <?php echo anchor('product/edit/'.$list->id_item,'Edit') ?> </td>

1	<td> <?php echo anchor('product/edit/'.$list->id_item,'Edit') ?> </td>

Explanation:

Anchor is a function in the helper URL in Codeigniter library used to create a link.

Until this step the display of our application as shown below:

Delete product data

In the last section of this CodeIgniter tutorial, I will explain how the process of deleting data from the database.

To delete the data just needed one function on the controller and one function on the model. Please copy the script below to the Product.php controller:

public function delete()
	{
		$id = $this->uri->segment(3);
		$this->load->model('product_model');
		$this->product_model->delete($id);
		redirect('product');
	}

public function delete()

{

$id = $this->uri->segment(3);

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

$this->product_model->delete($id);

redirect('product');

}

And please copy the script below and paste in the Product_model.php

function delete($id)
	{
		$this->db->where('id_item',$id);
		$this->db->delete('m_item');
	}

function delete($id)

{

$this->db->where('id_item',$id);

$this->db->delete('m_item');

}

The last step is create anchor to execute the delete function, please add the following script to product_list.php view.

<td> <?php echo anchor('product/edit/'.$list->id_item,'Edit') ?> || <?php echo anchor('product/delete/'.$list->id_item,'Delete') ?></td>

1	<td> <?php echo anchor('product/edit/'.$list->id_item,'Edit') ?> \|\| <?php echo anchor('product/delete/'.$list->id_item,'Delete') ?></td>

Please save and run the application in your browser.

Up to this point, the CodeIgniter tutorial for beginners with CRUD examples has been completed. If you have some advice or want to ask question for me, please fill the comment form below.

To download the entire project please use the following url:

Thus my article about tutorial how to create simple CRUD apps with codeigniter for beginner, hope useful.

Simple CRUD Apps With Codeigniter Tutorial For Beginners

Codeigniter tutorial for beginners step by step

Installing Codeigniter

Configure MYSQL database on CodeIgniter using PDO – Codeigniter Tutorial

Create database “pos” in MySQL and add data in the product table

Displays the product list

Create a new product

Update item data

Delete product data

About Sigit Prasetya Nugroho

Comments

Leave a Reply Cancel reply

Codeigniter tutorial for beginners step by step

Installing Codeigniter

Configure MYSQL database on CodeIgniter using PDO – Codeigniter Tutorial

Create database “pos” in MySQL and add data in the product table

Displays the product list

Create a new product

Update item data

Delete product data

About Sigit Prasetya Nugroho

Reader Interactions

Comments

Leave a Reply Cancel reply