How to Display Dynamic Image in a Modal in CodeIgniter 3
In this topic, we will show how to dynamically display a photo in a bootstrap modal using jQuery with CodeIgniter 3 and MySQL. We will create a simple application in CodeIgniter 3 to display a list of users with their photos. When you click on a photo, a larger size of the photo will be popped up. You will learn how to display data from the database in an html table andshow the modal image using jQuery.
Take a look at the below code snippet. While calling the modal, data-id attribute is used to send a value to the modal.
In the above code, a modal is called when the user clicks on the photo, note the 'data-id' attribute with a value of the image name. This image will be displayed in a bootstrap modal.
Below jQuery scripts display the image in a modal.
<script>
// To display image in modal
$(document).on("click", ".view", function () {
var path = "uploads/";
var image = $(this).data('id');
var str = '<img src="'+path+image+'">';
$(".modal-body").html(str);
});
</script>
Let us see the entire application developed in CodeIgniter 3.
Create a table in MySQL database for user profiles
We will create a table named 'user_profile' in MySQL database. This table will have user details, - user name, email and image. The table structure is given below:
Table: user_profile
This table stores details of all users.
Below are the columns in this table.
id - Unique user id, primary key and auto incremented
name - Name of the user
email - Email of the user
image - Image file name of the user
user_profile.sql
CREATE TABLE `user_profile` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`image` varchar(500) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `user_profile` (`id`, `name`, `email`, `image`) VALUES
(1, 'Avatar1', 'avatar1@test.com', 'avatar1.png'),
(2, 'Avatar2', 'avatar2@test.com', 'avatar2.png'),
(3, 'Avatar3', 'avatar3@test.com', 'avatar3.png');
ALTER TABLE `user_profile`
ADD PRIMARY KEY (`id`);
ALTER TABLE `user_profile`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
Folder Structure
We will be using a folder named 'userlist' under xampp/htdocs. So, the root directory will be xampp/htdocs/userlist.
Write Controller code (UserController.php)
We will have an index() method to get all users and load the view with the user data.
In the index() method, we call a model method named get_user() to get all the users from the database and load the view with the user data.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class UserController extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->model('ModelUser');
}
public function index(){
$data['image_path'] = $this->config->item('image_file_path');
$data['user_data'] = $this->ModelUser->get_user();
$this->load->view('view_users',$data);
}
} // end of Controller class
Note that we have a folder named 'uploads' in our root directory. In this folder, all uploaded images are kept. So, we have defined image_file_path in application/config/config.php and here we are using it in line 11 above. $this->config->item('image_file_path') gives the image file path from config.php and it is defined as below:
$config['image_file_path'] = 'uploads/';
Write Model code (ModelUser.php)
get_user() method in the model:
application/models/ModelUser.php
<?php
class ModelUser extends CI_Model {
function __construct() {
parent::__construct();
}
function get_user() {
$this->db->select('*');
$this->db->from('user_profile');
$query = $this->db->get();
return $query->result();
}
}
get_user() method selects all the users from the user_profile table.
Develop the view to display the users (view_users.php)
The view displays the list of users with links to view the photo of each user. Below is a list of users displayed.
It is a simple html table to display details of each user using a for-loop. When you click on a photo, a larger size of the profile photo will be displayed in a modal. So, we will put the modal code also in this view. Let's see the code:
Look at the last column of the table which is the Photo. Here a modal is called (this modal is defined later). A parameter $row->image is sent to the modal using a data-id attribute.
There is a custom stylesheet used in the views. It is given below:
jQuery script takes the parameter value sent to the modal and creates an <img> element with source as the image file name. Then it displays the image in a Bootstrap modal. Let's see the code below:
<script>
// To display image in modal
$(document).on("click", ".view", function () {
var path = "uploads/";
var image = $(this).data('id');
var str = '<img src="'+path+image+'">';
$(".modal-body").html(str);
});
</script>
It creates an <img> element with the source as the image name with an upload path. The <img> element is written in the modal body.
Update Configuration files and Test the Application
Let us now update few setup files before we run the application.
Run localhost/userlist in the browser. You will see the users are displayed as below:
You can see users are displayed along with their photos. Click on a photo of any user, the photo will be displayed in a modal. See below when I clicked on one of the photos:
Conclusion
In this example, we have seen how to display a photo in a modal in CodeIgniter 3 dynamically by selecting data from the database. We have used a photo here to display in the modal, but you can use it for any similar requirement, like you can display some data in a modal when the user clicks on a button or a link, by passing a parameter to the modal.
Conclusion
Post a Comment