Codeigniter Insert, Update, Delete, Select Using MySQL and Bootstrap

By | December 22, 2016

Codeigniter is getting very popular thanks to it’s features today we will see codeigniter insert, update, delete and select with the help of MySQL for storing details. These are important features of any operations. Using CRUD in codeigniter you can do anything is Web Application development. For designing our form we will use Twitter bootstrap. In our previous tutorial we covered Registration Form using Codeigniter. You can also check that tutorial.

Codeigniter Insert, Update, Delete, Select

Before we begin make sure you change config.php

$config[‘base_url’] = ”; to

$config[‘base_url’] = ‘http://localhost/codeignter/’;

And in database.php make sure you add database name as codeigniter_insert. We will upload the code soon you will be able to download everything.

Check Image Upload Using Codeigniter

So lets check codeigniter crud tutorial.

Codeigniter Insert, Update, Delete, Select Using MySQL and Bootstrap

database

CREATE TABLE IF NOT EXISTS `details` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`first_name` varchar(55) NOT NULL,
`last_name` varchar(55) NOT NULL,
`email` varchar(55) NOT NULL,
`address` varchar(55) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=18 ;

For our Tutorial we will use three views insert_view, update_view and display. In insert file we will add details, similarly update_view is to update exiting fields. And display view will contain table which fetches details from the database.

In the table we have provided two buttons edit and delete. We have also one controller Crud.php which contains function like add(), update details and delete data. The code is self explanatory.

insert_view.php (View)

<!DOCTYPE html>
<html>
<head>
<title></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>

#main{

position: absolute;
top:200px;
left:550px;
width: 220px;
padding: 10px;
margin: 1;

}

</style>

</head>
<body>

<nav class="navbar navbar-default">

<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TechPlugg Dashboard</a>
</div>

<ul class="nav navbar-nav navbar-right">
</ul>

</div>

<!-- /.navbar-collapse -->
</div>

<!-- /.container-fluid -->
</nav>

<center>

<h1>Welcome to TechPlugg</h1>

We are a Tech Blog with Programming tutorials

</center>
<form enctype="multipart/form-data" action="<?php echo base_url(); ?>index.php/Crud/add" method="post" >
<div id ="main">
<input type="text" name="first_name" size="20" placeholder="Enter first Name" /><br/><br/><br/>
<input type="text" name="last_name" placeholder="Enter last Name"/><br/><br/><br/>
<input type="text" name="email" placeholder="Enter Email"/><br/><br/><br/>
<textarea rows="4" cols="30" name="address" placeholder="Enter Address"></textarea><br/><br/><br/>

<center><input type="submit" value="Add" class="btn btn-primary"/></center>
</form></div>
</form>
</body>
</html>

update_view.php (View)

<?php

$row = $res->row();


?>
<!DOCTYPE html>
<html>
<head>
 <title></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>

#main{

 position: absolute;
 top:200px;
 left:550px;
 width: 220px;
 padding: 10px;
 margin: 1; 

}

</style>

</head>
<body>

<nav class="navbar navbar-default">

<div class="container-fluid">
 <!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">TechPlugg Dashboard</a>
 </div>

<ul class="nav navbar-nav navbar-right">
 </ul>

 </div>

<!-- /.navbar-collapse -->
 </div>

<!-- /.container-fluid -->
</nav>

<center>

<h1>Welcome to TechPlugg</h1>

We are a Tech Blog with Programming tutorials

</center>
 <form enctype="multipart/form-data" action="<?php echo base_url(); ?>index.php/Crud/edit_data/" method="post" >
 <div id ="main">
 <input type="hidden" id="id" name="id" value = "<?php echo $row->id;?>">
 <input type="text" name="first_name" size="20" value = "<?php echo $row->first_name;?>"><br/><br/><br/>
 <input type="text" name="last_name" value = "<?php echo $row->last_name;?>"><br/><br/><br/>
 <input type="text" name="email" value = "<?php echo $row->email;?>"><br/><br/><br/>
 <textarea rows="4" cols="30" name="address" ><?php echo $row->address;?></textarea><br/><br/><br/>

 <center><input type="submit" value="Update" class="btn btn-primary"/></center>
 </form></div>
 </form> 


</body>
</html>

display.php (View)


<?php if($this->session->flashdata('message')){?>
 <div class="alert alert-success"> 
 <?php echo $this->session->flashdata('message')?>
 </div>
 <?php } 

 if($this->session->flashdata('message_delete')){?>
 <div class="alert alert-success"> 
 <?php echo $this->session->flashdata('message_delete')?>
 </div>
 <?php } 
 ?>
<!DOCTYPE html>
<html>
<head>
 <title></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>

#main{

 position: absolute;
 top:200px;
 left:300px;

 padding: 10px;
 margin: 1; 

}

</style>

</head>
<body>

<nav class="navbar navbar-default">

<div class="container-fluid">
 <!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">TechPlugg Dashboard</a>
 </div>

<ul class="nav navbar-nav navbar-right">
 </ul>

 </div>

<!-- /.navbar-collapse -->
 </div>

<!-- /.container-fluid -->
</nav>

<center>

<h1>Welcome to TechPlugg</h1>

We are a Tech Blog with Programming tutorials

</center>
 <form enctype="multipart/form-data" action="<?php echo base_url(); ?>index.php/Crud/edit_data/" method="post" >
 <div id ="main">
 
 <?php
 echo '<table class="table">';
 echo '<tr>';
 echo '<th>Firstname</th>';
 echo'<th>Lastname</th>';
 echo'<th>Email</th>';
 echo'<th>Address</th>';
 echo'<th>Edit</th>';
 echo'<th>Delete</th>';
 echo '</tr>';
 foreach ($qry->result() as $row) {
 
 echo "<tr>";
 echo "<td>$row->first_name</td>";
 echo "<td>$row->last_name</td>";
 echo "<td>$row->email</td>";
 echo "<td>$row->address</td>";
 
 echo "<td valign='center'><a id='edit_click' style='cursor:pointer' onclick='editData(".$row->id.");'>"."Edit"."</a>"."</td>";
 echo "<td valign='center'><a id='delete_click' style='cursor:pointer' onclick='deleteData(".$row->id.");'>"."Delete"."</a>"."</td>";
 
 echo "</tr>";
 

 }
 echo '<table>';
 ?>
 
 <center><a href="<?php echo base_url(); ?>index.php/Crud/add_view"><input type="button" value="Add" class="btn btn-primary"/></a></center>
 </form></div>
 </form> 
 <script> 
 
 function editData(cid)
 {
 if(confirm("Do you really want to Edit this record?"))
 window.location = "<?php echo base_url(); ?>index.php/Crud/edit/"+cid;
 }
 function deleteData(cid)
 {
 if(confirm("Do you really want to Delete this record?"))
 window.location = "<?php echo base_url(); ?>index.php/Crud/deleteRecord/"+cid;
 }
 

 </script>


</body>
</html>

Crud.php (Controller)


<?php
class Crud extends CI_Controller {

function __construct()
{
parent::__construct();
$this->load->helper(array('form', 'url'));
}

//index function
function index()
{
//load file upload form
$this->load->view('insert_view');
}

public function add_view()
{
$this->load->view('insert_view');
}
public function add()
{

$first_name = $this->input->post('first_name');
$last_name = $this->input->post('last_name');
$email = $this->input->post('email');
$address = $this->input->post('address');
if($first_name !='' && $last_name !='' && $email !='' && $address!='')
{
$data = array('first_name'=>$first_name,'last_name'=>$last_name,'email'=>$email,'address'=>$address);
if($this->db->insert('details',$data))
{

redirect(base_url().'index.php/Crud/display');

}
}
else
{
redirect(base_url().'index.php/Crud/add');

}
}
public function edit($id)
{
$data['res'] = $this->db->get_where('details',array('id'=>$id));
$this->load->view("update_view",$data);
}

public function edit_data()
{

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

$additional_data = array(
'first_name' => $this->input->post('first_name'),
'last_name' => $this->input->post('last_name'),
'email' => $this->input->post('email'),
'address' => $this->input->post('address')
);

$this->db->where('id', $id);
$this->db->update('details', $additional_data);
if ($this->db->affected_rows()>0)
{
$this->session->set_flashdata('message', 'Your data has been updated Successfully!');
redirect(base_url()."index.php/Crud/display");
}



}
public function deleteRecord($id)
{

$this->db->where('id' ,$id);
$this->db->delete('details');
$this->session->set_flashdata('message_delete', 'Your data has been deleted Successfully!');
redirect(base_url()."index.php/Crud/display");
}

public function display()
{
$data['qry'] = $this->db->get_where('details');
$this->load->view("display",$data);
}

}
?>

Check Codeigniter Login Sytem

I hope Codeigniter insert, update, delete and select tutorial was simple. I have put hours of work to bring this tutorial for you. A like and share will be highly appreciated. If you have any doubts or suggestions leave your comments below. Thanks 🙂