"KEEP LEARNING, DON'T STOP."
"KEEP LEARNING, DON'T STOP."
In this tutorial you will learn how to display images from database in Php using MySQL in very easy way. Here I will explain each and every thing in step by step so that you can easily understand this tutorial.
Note: - Here we will use previous tutorial table for the image records. For showing image from database we will use how to upload image in database using mysql? tutorial table. If you don’t have images in table then see the previous tutorial table.
First we need to create an image display design page where we will display the images from database. So deign the image display page like as below design. To making the same design just copy the below design code and paste it in your file. My image display design page name is show.php.
Design your show image page like below.
Copy the below complete HTML code and paste it in show.php page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Show Image in PHP - Campuslife</title>
<style>
body{background-color: #f2f2f2; color: #333;}
.main{box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; margin-top: 10px;}
h3{background-color: #4294D1; color: #f7f7f7; padding: 15px; border-radius: 4px; box-shadow: 0 1px 6px rgba(57,73,76,0.35);}
.img-box{margin-top: 20px;}
.img-block{float: left; margin-right: 5px; text-align: center;}
p{margin-top: 0;}
img{width: 375px; min-height: 250px; margin-bottom: 10px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; border:6px solid #f7f7f7;}
</style>
</head>
<body>
<!-------------------Main Content------------------------------>
<div class="container main">
<h3>Showing Images from database</h3>
<div class="img-box">
</div>
</div>
</body>
</html>
After completing the designing part now we will create database and table structure. As we know we are using the previous tutorial how to upload image in database using mysql? database and table to show the image, so no need to create new database and table. Just follow the previous tutorial section.
If you are new in this tutorial section then see the previous tutorial and use the same database and insert the some images.
I am creating separate connection file so that I can access it anywhere in page. Now create a connection.php file. In this we will add connection information of MySQL so that we can create connection between PHP to MySQL for login.
Because we can call that file in many pages. If we can’t create separate file for connection then we have to write same code in every pages manually. It is good for single or two pages, but not good for 10 or more pages.
Connection file contain below information like (host name, MySQL user name, MySQL password, database name). Change the connection information as your MySQL login information in connection.php file.
Copy the below code and paste it in connection.php page.
<?php
$host ="localhost";
$uname = "root";
$pwd = '123456';
$db_name = "campuslife";
?>
Now we will do Php coding inside the design page of show.php to display the images from database. We will use MySQL select query to retrieve the image in database.
Copy the below code and paste it in between <div class="img-box"> ... </div> of show.php page.
<?php
/*-- we included connection files--*/
include "connection.php";
$result = mysqli_connect($host,$uname,$pwd) or die("Could not connect to database." .mysqli_error());
mysqli_select_db($result,$db_name) or die("Could not select the databse." .mysqli_error());
$image_query = mysqli_query($result,"select img_name,img_path from image_table");
while($rows = mysqli_fetch_array($image_query))
{
$img_name = $rows['img_name'];
$img_src = $rows['img_path'];
?>
<div class="img-block">
<img src="<?php echo $img_src; ?>" alt="" title="<?php echo $img_name; ?>" class="img-responsive" />
<p><strong><?php echo $img_name; ?></strong></p>
</div>
<?php
}
?>
In above Php code we have used img tag to display the image. In img tag (src=" ") we have passed the Php variable to call the image. Understand the working of below code.
//In src=" " of image tag getting the image from database and in title getting the image name. <img src="<?php echo $img_src; ?>" alt="" title="<?php echo $img_name; ?>" class="img-responsive" /> //also fetching the image name. <p><strong><?php echo $img_name; ?></strong></p>
Now our task has completed and now test your application on browser.