Codeigniter Image Gallery Using Ajax

Codeigniter Image Gallery Using Ajax

img_ci_image_gallery

Hello Friends, here is the tutorial to create a simple Image Gallery using codeigniter and ajax. So to achieve this task, just follow these simple steps.

Step 1.

Set up the basics of Codeigniter framework.

Step 2.

Now change your database setting and create a table gallery.

[php]

— Table structure for table `gallery`

CREATE TABLE IF NOT EXISTS `gallery` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`path` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=39 ;
[/php]

 

Step 3.

Now create a controller in CI controller folder (welcome.php) and paste the following code.

[php]
<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’); class Welcome extends CI_Controller { public function __construct() { parent::__construct(); $this->load->model(‘Upload_model’);
$config[‘upload_path’] = realpath(APPPATH.’../upload’);
$config[‘allowed_types’] = ‘jpg|jpeg|png’;
$config[‘max_size’] = ‘204800’;
$this->load->library(‘upload’, $config);
}
public function index()
{
$this->load->view(‘upload_form’,array(‘error’ => ‘ ‘ ));
//
// echo realpath(APPPATH).’\upload’;
// exit;
}
public function do_upload(){
if ( ! $this->upload->do_upload())
{
$error = array(‘error’ => $this->upload->display_errors());

foreach ($error as $item => $value){
echo’

<ol class="alert alert-danger">

<li>’.$value.'</ol>

</li>

‘;
}
exit;
}
else
{$upload_data = array(‘upload_data’ => $this->upload->data());
foreach ($upload_data as $key=> $value){

$image = $value[‘file_name’];
$name = preg_replace(‘/\\.[^.\\s]{3,4}$/’, ”, $value[‘file_name’]);
$data = array(
‘path’ => $image,
‘name’=>$name
);
$this->db->insert(‘gallery’, $data);
}

echo’

<h4 style="color:green">Image uploaded Succesfully</h4>

‘;
exit;
}
}
function fillGallery(){
$uploadpath = base_url().’upload/’;
$rs = $this->db->get(‘gallery’);
foreach ($rs->result() as $row) {
$src= $uploadpath.$row->path;
$alt = $row->name;
$lid = $row->id.’g’;
echo "

<li class=’thumbnail’ id=’$lid’>
<span id=’$row->id’ class=’btn btn-info btn-block btn-delete’><i class=’glyphicon glyphicon-remove’></i>&nbsp;&nbsp;&nbsp;Delete</span>
<img src=’$src’ alt=’$alt’ style=’height: 150px; width: 150px’>
<span class=’btn btn-warning btn-block’>$alt</span></li>

";
}
}
function deleteimg(){
$this->db->where(‘id’, $this->input->post(‘id’));
$this->db->delete(‘gallery’);
echo’

<h4 style="color:green">This image deleted successfully</h4>

‘;
exit;
}
}
/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */
[/php]

 

Step 4.

In this step create a view file in CI views folder(upload_form.php) and paste following code.

[php]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
<!– Latest compiled and minified CSS –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!– Latest compiled and minified JavaScript –>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-2.1.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fjquery.form%2F3.50%2Fjquery.form.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%23loader%7Bdisplay%3A%20none%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%23preview%7Bdisplay%3A%20none%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
</head>
<body>

<div class="container">

<blockquote>
<h2>Codeigniter image gallery using ajax</h2>

</blockquote>

<div class="row clear-fix">
<div class="col-md-12">
<form class="form-inline" role="form" action="<?php echo base_url()?>
index.php/welcome/do_upload" method="POST" enctype="multipart/form-data">

<div class="form-group" style="background: #f5f5f5">
<label for="">Choose image</label>
<input type="file" name="userfile" id="userfile" multiple>
</div>

<div class="form-group">
<input type="submit" class="btn btn-info btn-block" style="width: 200px;" value="Add">
</div>

<div class="form-group">
<img id="loader" src="<?php echo base_url() ?>asset/images/486.GIF" style="height: 30px;">
</div>
<div class="form-group">
<img id="preview" src="#" style="height: 80px;border: 1px solid #DDC; " />
</div>

</form>

</div>

</div>

<div class="row clear-fix">
<div class="col-md-12">
<div id="response">
</div>
</div>
</div>

<div class="row clear-fix">
<div class="col-md-12">
<div style="margin-top: 1%;">
<blockquote>
<ul class="list-inline" id="gallery">
</ul>

</blockquote>

</div>

</div>

</div>
</div>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20%24(document).ready(function%20()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20loadgallery()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20function%20readURL(input)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23preview%22).show()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(input.files%20%26%26%20input.files%5B0%5D)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20reader%20%3D%20new%20FileReader()%3B%0A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20reader.onload%20%3D%20function%20(e)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(‘%23preview’).attr(‘src’%2C%20e.target.result)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%0A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20reader.readAsDataURL(input.files%5B0%5D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%24(%22%23userfile%22).change(function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20readURL(this)%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(‘form’).ajaxForm(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20beforeSend%3A%20function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23loader%22).show()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20complete%3A%20function(xhr)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23response%22).html(xhr.responseText)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23loader%22).hide()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(‘form’).resetForm()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loadgallery()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20function%20%20loadgallery()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%24.ajax(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%3A’http%3A%2F%2Flocalhost%2Ftuts%2FCI_upload%2Findex.php%2Fwelcome%2FfillGallery’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A’GET’%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D).done(function%20(data)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23gallery%22).html(data)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20btnDelete%20%20%3D%20%24(%22%23gallery%22).find(%24(%22.btn-delete%22))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20(btnDelete).on(‘click’%2C%20function%20(e)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20e.preventDefault()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20id%20%3D%20%24(this).attr(‘id’)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23%22%2Bid%2B%22g%22).hide()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24.ajax(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%3A’http%3A%2F%2Flocalhost%2Ftuts%2FCI_upload%2Findex.php%2Fwelcome%2Fdeleteimg’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3A’id%3D’%2Bid%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A’POST’%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D).done(function%20(data)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>
</html>
<!–<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A(function()%20%7B%0A%20%20%20%20%20%0Avar%20bar%20%3D%20%24(‘.bar’)%3B%0Avar%20percent%20%3D%20%24(‘.percent’)%3B%0Avar%20status%20%3D%20%24(‘%23status’)%3B%0A%20%20%20%20%0A%24(‘form’).ajaxForm(%7B%0A%20%20%20%20beforeSend%3A%20function()%20%7B%0A%20%20%20%20%20%20%20%20status.empty()%3B%0A%20%20%20%20%20%20%20%20var%20percentVal%20%3D%20’0%25’%3B%0A%20%20%20%20%20%20%20%20bar.width(percentVal)%0A%20%20%20%20%20%20%20%20percent.html(percentVal)%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20uploadProgress%3A%20function(event%2C%20position%2C%20total%2C%20percentComplete)%20%7B%0A%20%20%20%20%20%20%20%20var%20percentVal%20%3D%20percentComplete%20%2B%20’%25’%3B%0A%20%20%20%20%20%20%20%20bar.width(percentVal)%0A%20%20%20%20%20%20%20%20percent.html(percentVal)%3B%0A%20%20%20%20%20%20%20%20%2F%2Fconsole.log(percentVal%2C%20position%2C%20total)%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20success%3A%20function()%20%7B%0A%20%20%20%20%20%20%20%20var%20percentVal%20%3D%20’100%25’%3B%0A%20%20%20%20%20%20%20%20bar.width(percentVal)%0A%20%20%20%20%20%20%20%20percent.html(percentVal)%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20complete%3A%20function(xhr)%20%7B%0A%20%20%20%20%20%20%20%20status.html(xhr.responseText)%3B%0A%20%20%20%20%7D%0A%7D)%3B%20%0A%20%0A%7D)()%3B%20%20%20%20%20%20%20%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />–>
[/php]

 

Step 5.

In last step hit the url like http://localhost/your_ci_gallery. and see the output..

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends becaus“You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:

                       1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3.  Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.