How to display dynamic image in a modal in a CodeIgniter 3 application
In this topic, we will show how you can display a photo in a bootstrap modal using jQuery with CodeIgniter 3 and MySQL. I will create a simple application in CodeIgniter 3 to display a list of users with their details along with their photos. When you click on a photo thumbnail, larger size of the photo will be popped up.
This topic will show how you can display data from database in a html table and also show modal image using jQuery.
Look at the below code snippet. While calling the modal, data-id attribute is used to send a value to the modal.
In above code a modal is called when user clicks the photo, note 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.
Let us see the entire application developed in CodeIgniter 3.
Step 1 - Create a table in MySQL database for user profiles
Let us create a table named 'user_profile' in MySQL database. This table will have user details, - user name, email and image. Table structure is given below:
This table stores details of all users.
Below are the columns in this table.
id - It is unique id of a user, primary key and auto incremented
name - Name of the user
email - Email of the user
image - Image file name of the user
Create table script for this table are given below; you can use this code to create the table.
After you create the table, verify that the table structure is same as above and the rows are inserted in the table. Data in the table should be as below:
Before I go to next step, let me show the folder structure I am using. I have created a folder named 'userlist' under xampp/htdocs and kept all CodeIgniter folder/files in this folder along with our custom files. So, the root directory is xampp/htdocs/userlist.
Also, note that since we will be displaying photos, so we need a folder where photos to be kept. So, I have created a folder named 'uploads' under root directory and kept few image files in it.
Our controller class will have an index() method to get all users using a model method 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 "view_users" with the user data. Below is the code for UserController:
Note that we have folder named 'uploads' in our root directory. In this folder all images are kept. So, I have defined image_file_path in application/config/config.php and here I am using it. $this->config->item('image_file_path') gives me the image file path from config.php, see below, how it is defined in config file. Changes in config file and other setup files are discussed in Step 6.
Step 3 - Write Model code (ModelUser.php)
We have seen only one method of the model used in the controller. This is get_user(). So now let's see the code for this method in the model:
get_user() method selects data from user_profile table. It selects all users from the table. It returns the result set to the controller.
Step 4 - 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 where I am displaying details of each user in a for loop. When you click on the photo, a larger size of the profile photo will be displayed in a modal. So, I 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 which is $row->image is sent to the modal using data-id attribute.
There is a custom stylesheet used in the views. It is given below:
I just added few simple styles here, you can always add better styles.
Step 5 - Write jQuery script to display photo in modal
jQuery script takes the parameter value sent to the modal and creates an <img> element with source as image file name with the defined. Then it displays the image in the modal. Let's see the code below:
It creates an <img> element with source as image name with upload path. <img> element is written in the modal-body.
Our controller, model and views are developed. Now we need to do some setup changes before we run the application. Let's do that in next step.
Step 6 - Update Configuration files and Test the Application
Let us now update few setup files before we run the application.
As I mentioned before, I am using a database named 'demo' in localhost with user 'root' and blank password, so I updated database.php as below:
Update routes file (application/config/routes.php)
I updated routes.php for default controller which is UserController. So, below code is for routes.php
Update .htaccess (hypertext access) file to remove index.php from the URL
.htaccess file is used to do configuration changes for a directory. I have kept .htaccess file in my root folder which is xampp/htdocs/userlist.
Content of .htaccess file is given below:
Using URL rewriting rule, it redirects all request except those which are not existing files or directories.
Test The Application
Make sure in your XAMPP control panel Apache and MySQL services are running. Open the browser and run localhost/userlist. 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, photo will be displayed in a modal. See below when I clicked on one of the photos:
Our development and testing are done. Hope you could understand all the steps and could test it successfully.
Download source code
I have put codes for controller, model and view in a zip file. You can download it by clicking on the Download button below. You do not need to register yourself to download it. You can use the code as is or you can modify them as per your requirements.
In this example I have showed how you can display a photo in a modal in CodeIgniter 3 dynamically by selecting data from the database. I have used 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 user clicks on a button or a link, by passing a parameter to the modal.