CRUD operations are the most used functionality for the CodeIgniter application. CodeIgniter CRUD functionality helps to implement the view, add, edit, and delete operations in the web application. Generally, the CRUD functionality is used to manage data with the database. Not only the data management but also the image file upload functionality can be managed with CRUD.
The image files management system is useful to integrate a dynamic image gallery in the web application. Image Gallery CRUD helps to manage images and control the visibility of the images in the gallery. It very useful when you want to provide an admin interface to manage the image files of the gallery. In this tutorial, we will show you how to create a dynamic image gallery and manage image files (upload, view, edit, and delete) in CodeIgniter with MySQL database.
In the sample CodeIgniter application, we will implement an image gallery CRUD with the database in the CodeIgniter framework.
Before getting started to integrate Image Gallery CRUD in CodeIgniter, take a look at the files structure.
codeigniter_gallery_crud/ ├── application/ │ ├── controllers/ │ │ ├── Gallery/ │ │ └── Manage_gallery.php │ ├── models/ │ │ └── Image.php │ ├── views/ │ │ ├── gallery/ │ │ │ └── index.php │ │ ├── manage_gallery/ │ │ │ ├── index.php │ │ │ ├── view.php │ │ │ └── add-edit.php │ │ └── templates/ │ │ ├── header.php │ │ └── footer.php ├── assets/ │ ├── js/ │ │ └── jquery.min.js │ ├── fancybox/ │ │ ├── jquery.fancybox.js │ │ └── jquery.fancybox.css │ ├── bootstrap/ │ │ └── bootstrap.min.css │ ├── css/ │ │ └── style.css │ └── images/ └── uploads/ └── images/
To store the file information of the images a table is required in the database. The following SQL creates an images
table with some basic fields in the MySQL database.
CREATE TABLE `images` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`created` datetime NOT NULL,
`modified` datetime NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Inactive',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
autoload.php
In the config/autoload.php
file, define the library and helper which will be used frequently in the application.
$autoload['libraries'] = array('database', 'session');
$autoload['helper'] = array('url');
Gallery.php
The Gallery controller helps to display the images in a gallery view.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Gallery extends CI_Controller {
function __construct() {
parent::__construct();
// Load image model
$this->load->model('image');
// Default controller name
$this->controller = 'gallery';
}
public function index(){
$data = array();
$con = array(
'where'=> array(
'status' => 1
)
);
$data['gallery'] = $this->image->getRows($con);
$data['title'] = 'Images Gallery';
// Load the list page view
$this->load->view('templates/header', $data);
$this->load->view('gallery/index', $data);
$this->load->view('templates/footer');
}
}
Manage_gallery.php
The Manage_gallery controller handles the CRUD operations (view, add, edit, and delete) of the image files and data.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Manage_gallery extends CI_Controller {
function __construct() {
parent::__construct();
// Load image model
$this->load->model('image');
$this->load->helper('form');
$this->load->library('form_validation');
// Default controller name
$this->controller = 'manage_gallery';
// File upload path
$this->uploadPath = 'uploads/images/';
}
public function index(){
$data = array();
// Get messages from the session
if($this->session->userdata('success_msg')){
$data['success_msg'] = $this->session->userdata('success_msg');
$this->session->unset_userdata('success_msg');
}
if($this->session->userdata('error_msg')){
$data['error_msg'] = $this->session->userdata('error_msg');
$this->session->unset_userdata('error_msg');
}
$data['gallery'] = $this->image->getRows();
$data['title'] = 'Images Archive';
// Load the list page view
$this->load->view('templates/header', $data);
$this->load->view($this->controller.'/index', $data);
$this->load->view('templates/footer');
}
public function view($id){
$data = array();
// Check whether id is not empty
if(!empty($id)){
$con = array('id' => $id);
$data['image'] = $this->image->getRows($con);
$data['title'] = $data['image']['title'];
// Load the details page view
$this->load->view('templates/header', $data);
$this->load->view($this->controller.'/view', $data);
$this->load->view('templates/footer');
}else{
redirect($this->controller);
}
}
public function add(){
$data = $imgData = array();
$error = '';
// If add request is submitted
if($this->input->post('imgSubmit')){
// Form field validation rules
$this->form_validation->set_rules('title', 'image title', 'required');
$this->form_validation->set_rules('image', 'image file', 'callback_file_check');
// Prepare gallery data
$imgData = array(
'title' => $this->input->post('title')
);
// Validate submitted form data
if($this->form_validation->run() == true){
// Upload image file to the server
if(!empty($_FILES['image']['name'])){
$imageName = $_FILES['image']['name'];
// File upload configuration
$config['upload_path'] = $this->uploadPath;
$config['allowed_types'] = 'jpg|jpeg|png|gif';
// Load and initialize upload library
$this->load->library('upload', $config);
$this->upload->initialize($config);
// Upload file to server
if($this->upload->do_upload('image')){
// Uploaded file data
$fileData = $this->upload->data();
$imgData['file_name'] = $fileData['file_name'];
}else{
$error = $this->upload->display_errors();
}
}
if(empty($error)){
// Insert image data
$insert = $this->image->insert($imgData);
if($insert){
$this->session->set_userdata('success_msg', 'Image has been uploaded successfully.');
redirect($this->controller);
}else{
$error = 'Some problems occurred, please try again.';
}
}
$data['error_msg'] = $error;
}
}
$data['image'] = $imgData;
$data['title'] = 'Upload Image';
$data['action'] = 'Upload';
// Load the add page view
$this->load->view('templates/header', $data);
$this->load->view($this->controller.'/add-edit', $data);
$this->load->view('templates/footer');
}
public function edit($id){
$data = $imgData = array();
// Get image data
$con = array('id' => $id);
$imgData = $this->image->getRows($con);
$prevImage = $imgData['file_name'];
// If update request is submitted
if($this->input->post('imgSubmit')){
// Form field validation rules
$this->form_validation->set_rules('title', 'gallery title', 'required');
// Prepare gallery data
$imgData = array(
'title' => $this->input->post('title')
);
// Validate submitted form data
if($this->form_validation->run() == true){
// Upload image file to the server
if(!empty($_FILES['image']['name'])){
$imageName = $_FILES['image']['name'];
// File upload configuration
$config['upload_path'] = $this->uploadPath;
$config['allowed_types'] = 'jpg|jpeg|png|gif';
// Load and initialize upload library
$this->load->library('upload', $config);
$this->upload->initialize($config);
// Upload file to server
if($this->upload->do_upload('image')){
// Uploaded file data
$fileData = $this->upload->data();
$imgData['file_name'] = $fileData['file_name'];
// Remove old file from the server
if(!empty($prevImage)){
@unlink($this->uploadPath.$prevImage);
}
}else{
$error = $this->upload->display_errors();
}
}
if(empty($error)){
// Update image data
$update = $this->image->update($imgData, $id);
if($update){
$this->session->set_userdata('success_msg', 'Image has been updated successfully.');
redirect($this->controller);
}else{
$error = 'Some problems occurred, please try again.';
}
}
$data['error_msg'] = $error;
}
}
$data['image'] = $imgData;
$data['title'] = 'Update Image';
$data['action'] = 'Edit';
// Load the edit page view
$this->load->view('templates/header', $data);
$this->load->view($this->controller.'/add-edit', $data);
$this->load->view('templates/footer');
}
public function block($id){
// Check whether id is not empty
if($id){
// Update image status
$data = array('status' => 0);
$update = $this->image->update($data, $id);
if($update){
$this->session->set_userdata('success_msg', 'Image has been blocked successfully.');
}else{
$this->session->set_userdata('error_msg', 'Some problems occurred, please try again.');
}
}
redirect($this->controller);
}
public function unblock($id){
// Check whether is not empty
if($id){
// Update image status
$data = array('status' => 1);
$update = $this->image->update($data, $id);
if($update){
$this->session->set_userdata('success_msg', 'Image has been activated successfully.');
}else{
$this->session->set_userdata('error_msg', 'Some problems occurred, please try again.');
}
}
redirect($this->controller);
}
public function delete($id){
// Check whether id is not empty
if($id){
$con = array('id' => $id);
$imgData = $this->image->getRows($con);
// Delete gallery data
$delete = $this->image->delete($id);
if($delete){
// Remove file from the server
if(!empty($imgData['file_name'])){
@unlink($this->uploadPath.$imgData['file_name']);
}
$this->session->set_userdata('success_msg', 'Image has been removed successfully.');
}else{
$this->session->set_userdata('error_msg', 'Some problems occurred, please try again.');
}
}
redirect($this->controller);
}
public function file_check($str){
if(empty($_FILES['image']['name'])){
$this->form_validation->set_message('file_check', 'Select an image file to upload.');
return FALSE;
}else{
return TRUE;
}
}
}
The Image model handles the database related operations (Fetch, Add, Edit, and Delete).
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Image extends CI_Model{
function __construct() {
$this->table = 'images';
}
/*
* Returns rows from the database based on the conditions
* @param array filter data based on the passed parameters
*/
public function getRows($params = array()){
$this->db->select('*');
$this->db->from($this->table);
if(array_key_exists("where", $params)){
foreach($params['where'] as $key => $val){
$this->db->where($key, $val);
}
}
if(array_key_exists("returnType",$params) && $params['returnType'] == 'count'){
$result = $this->db->count_all_results();
}else{
if(array_key_exists("id", $params)){
$this->db->where('id', $params['id']);
$query = $this->db->get();
$result = $query->row_array();
}else{
$this->db->order_by('created', 'desc');
if(array_key_exists("start",$params) && array_key_exists("limit",$params)){
$this->db->limit($params['limit'],$params['start']);
}elseif(!array_key_exists("start",$params) && array_key_exists("limit",$params)){
$this->db->limit($params['limit']);
}
$query = $this->db->get();
$result = ($query->num_rows() > 0)?$query->result_array():FALSE;
}
}
// Return fetched data
return $result;
}
/*
* Insert image data into the database
* @param $data data to be insert based on the passed parameters
*/
public function insert($data = array()) {
if(!empty($data)){
// Add created and modified date if not included
if(!array_key_exists("created", $data)){
$data['created'] = date("Y-m-d H:i:s");
}
if(!array_key_exists("modified", $data)){
$data['modified'] = date("Y-m-d H:i:s");
}
// Insert member data
$insert = $this->db->insert($this->table, $data);
// Return the status
return $insert?$this->db->insert_id():false;
}
return false;
}
/*
* Update image data into the database
* @param $data array to be update based on the passed parameters
* @param $id num filter data
*/
public function update($data, $id) {
if(!empty($data) && !empty($id)){
// Add modified date if not included
if(!array_key_exists("modified", $data)){
$data['modified'] = date("Y-m-d H:i:s");
}
// Update member data
$update = $this->db->update($this->table, $data, array('id' => $id));
// Return the status
return $update?true:false;
}
return false;
}
/*
* Delete image data from the database
* @param num filter data based on the passed parameter
*/
public function delete($id){
// Delete member data
$delete = $this->db->delete($this->table, array('id' => $id));
// Return the status
return $delete?true:false;
}
}
1. templates/
The views/templates/
directory holds the element parts (header, footer, etc.) of the web page.
1.1. templates/header.php
The header.php
file holds the header part of the web page. The Bootstrap 4 library is used for styling the HTML table and form. So, include the CSS file of the Bootstrap library and the custom stylesheet file (if any). Also, other required, JS or CSS library files can be included in this view element.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title><?php echo $title; ?> | Gallery CRUD in CodeIgniter</title>
<meta charset="utf-8">
<!-- Bootstrap library -->
<link rel="stylesheet" href="<?php echo base_url('assets/bootstrap/bootstrap.min.css'); ?>">
<!-- Stylesheet file -->
<link rel="stylesheet" href="<?php echo base_url('assets/css/style.css'); ?>">
<!-- jQuery library -->
<script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
</head>
<body>
1.2. templates/footer.php
This file holds the footer section of the web page.
</body>
</html>
2. gallery/
The views/gallery/
directory holds the view files of the Gallery controller.
2.1. gallery/index.php
Initially, all the images are retrieved from the database and listed in a gallery view with lightbox popup.
data-fancybox="gallery"
and data-caption
attributes in the anchor tag of the images to enable the fancyBox popup.<div class="container">
<h2>Gallery Images</h2>
<hr>
<div class="head">
<a href="<?php echo base_url('manage_gallery/'); ?>" class="glink">Manage</a>
</div>
<div class="gallery">
<?php if(!empty($gallery)){ ?>
<?php
foreach($gallery as $row){
$uploadDir = base_url().'uploads/images/';
$imageURL = $uploadDir.$row["file_name"];
?>
<div class="col-lg-3">
<a href="<?php echo $imageURL; ?>" data-fancybox="gallery" data-caption="<?php echo $row["title"]; ?>" >
<img src="<?php echo $imageURL; ?>" alt="" />
<p><?php echo $row["title"]; ?></p>
</a>
</div>
<?php } ?>
<?php }else{ ?>
<div class="col-xs-12">
<div class="alert alert-danger">No image(s) found...</div>
</div>
<?php } ?>
</div>
</div>
<!-- Fancybox CSS library -->
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/fancybox/jquery.fancybox.css'); ?>">
<!-- Fancybox JS library -->
<script src="<?php echo base_url('assets/fancybox/jquery.fancybox.js'); ?>"></script>
<!-- Initialize fancybox -->
<script>
$("[data-fancybox]").fancybox();
</script>
3. manage_gallery/
The views/manage_gallery/
directory holds the view files of the Manage_gallery controller.
3.1. manage_gallery/index.php
Initially, all the images data is retrieved from the database and listed in a tabular view with the Upload, Edit, and Delete options.
<div class="container">
<h2>Gallery Images Management</h2>
<!-- Display status message -->
<?php if(!empty($success_msg)){ ?>
<div class="col-xs-12">
<div class="alert alert-success"><?php echo $success_msg; ?></div>
</div>
<?php }elseif(!empty($error_msg)){ ?>
<div class="col-xs-12">
<div class="alert alert-danger"><?php echo $error_msg; ?></div>
</div>
<?php } ?>
<div class="row">
<div class="col-md-12 head">
<h5><?php echo $title; ?></h5>
<!-- Add link -->
<div class="float-right">
<a href="<?php echo base_url('manage_gallery/add'); ?>" class="btn btn-success"><i class="plus"></i> Upload Image</a>
</div>
</div>
<!-- Data list table -->
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<tr>
<th width="5%">#</th>
<th width="10%"></th>
<th width="40%">Title</th>
<th width="19%">Created</th>
<th width="8%">Status</th>
<th width="18%">Action</th>
</tr>
</thead>
<tbody>
<?php if(!empty($gallery)){ $i=0;
foreach($gallery as $row){ $i++;
$image = !empty($row['file_name'])?'<img src="'.base_url().'uploads/images/'.$row['file_name'].'" alt="" />':'';
$statusLink = ($row['status'] == 1)?site_url('manage_gallery/block/'.$row['id']):site_url('manage_gallery/unblock/'.$row['id']);
$statusTooltip = ($row['status'] == 1)?'Click to Inactive':'Click to Active';
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $image; ?></td>
<td><?php echo $row['title']; ?></td>
<td><?php echo $row['created']; ?></td>
<td><a href="<?php echo $statusLink; ?>" title="<?php echo $statusTooltip; ?>"><span class="badge <?php echo ($row['status'] == 1)?'badge-success':'badge-danger'; ?>"><?php echo ($row['status'] == 1)?'Active':'Inactive'; ?></span></a></td>
<td>
<a href="<?php echo base_url('manage_gallery/view/'.$row['id']); ?>" class="btn btn-primary">view</a>
<a href="<?php echo base_url('manage_gallery/edit/'.$row['id']); ?>" class="btn btn-warning">edit</a>
<a href="<?php echo base_url('manage_gallery/delete/'.$row['id']); ?>" class="btn btn-danger" onclick="return confirm('Are you sure to delete data?')?true:false;">delete</a>
</td>
</tr>
<?php } }else{ ?>
<tr><td colspan="6">No image(s) found...</td></tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
3.2. manage_gallery/view.php
This view file is loaded by the view() method of Manage_gallery controller. The selected image details are displayed on the webpage.
<div class="container">
<div class="row">
<div class="col-md-12">
<h5><?php echo !empty($image['title'])?$image['title']:''; ?></h5>
<?php if(!empty($image['file_name'])){ ?>
<div class="img-box">
<img src="<?php echo base_url('uploads/images/'.$image['file_name']); ?>">
</div>
<?php } ?>
</div>
<a href="<?php echo base_url('manage_gallery'); ?>" class="btn btn-primary">Back to List</a>
</div>
</div>
3.3. manage_gallery/add-edit.php
This view file is loaded by the add() and edit() functions of Manage_gallery controller.
<div class="container">
<h1><?php echo $title; ?></h1>
<hr>
<!-- Display status message -->
<?php if(!empty($error_msg)){ ?>
<div class="col-xs-12">
<div class="alert alert-danger"><?php echo $error_msg; ?></div>
</div>
<?php } ?>
<div class="row">
<div class="col-md-6">
<form method="post" action="" enctype="multipart/form-data">
<div class="form-group">
<label>Title:</label>
<input type="text" name="title" class="form-control" placeholder="Enter title" value="<?php echo !empty($image['title'])?$image['title']:''; ?>" >
<?php echo form_error('title','<p class="help-block text-danger">','</p>'); ?>
</div>
<div class="form-group">
<label>Images:</label>
<input type="file" name="image" class="form-control" multiple>
<?php echo form_error('image','<p class="help-block text-danger">','</p>'); ?>
<?php if(!empty($image['file_name'])){ ?>
<div class="img-box">
<img src="<?php echo base_url('uploads/images/'.$image['file_name']); ?>">
</div>
<?php } ?>
</div>
<a href="<?php echo base_url('manage_gallery'); ?>" class="btn btn-secondary">Back</a>
<input type="hidden" name="id" value="<?php echo !empty($image['id'])?$image['id']:''; ?>">
<input type="submit" name="imgSubmit" class="btn btn-success" value="SUBMIT">
</form>
</div>
</div>
</div>
Multiple Image Upload with View, Edit and Delete in CodeIgniter
This sample gallery CRUD helps you to integrate images upload and management functionality in the website. It allows you to create a dynamic image gallery with lightbox popup (fancyBox) in CodeIgniter application. Use this image gallery CRUD to manage the images of the gallery. You can easily enhance the functionality of this CodeIgniter photo gallery management system as per your needs.
Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request
Very useful sir