Dynamic Image Gallery Using PHP 7 & MySQLi

This tutorial help to create a dynamic image gallery using PHP and MySQL. Image upload and listing is very common functionality for a web application. I have already shared Image Crop Functionality In Model Box Using PHP tutorial.

I am extending my previous above tutorial and added image listing and gallery functionality. I have also added a view image into the lightbox2

There are following files ll participate in this tutorial –

index.php – This file is used to display all images.
db_connect.php – This file is used for database connection with MySQL.

Here, You will learn how to create a dynamic image gallery using PHP and MySQL.

Create MySQL Database Tables

We will also create a MySQL database table gallery using the below query to store gallery image information.

CREATE TABLE `gallery` (
  `id` int(11) NOT NULL,
  `user_name` varchar(255) NOT NULL,
  `image_title` varchar(255) NOT NULL,
  `image_description` varchar(255) NOT NULL,
  `image_name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Database Connection Using MySQL

We’ll create a gallery table into the test database, Let’s create a database connection with PHP using mysqli. Open db_connect.php file and add the below code –

<?php
$dbhost = 'localhost';  
$dbuser = 'root';  
$dbpass = "";  
$conn = mysqli_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');  
$dbname = 'test';  
$connection = mysqli_select_db($conn, $dbname); 
?>

You need to replace dbhost, dbuser, dbpass and dbname as per you MySQL configuration.

Upload Image OR Dummy Data

I am extending my previous tutorial, You need to upload an image using UI or insert the record manually using the below SQL –

//insert record
 INSERT INTO `gallery` (`id`, `user_name`, `image_title`, `image_description`, `image_name`) VALUES ('', 'parvez', 'test-image', 'test desc', 'test.jpg');

Step 1: Added css and js file into the header section of index.php file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 	 	
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.min.js"></script>

Step 2: Added css classes into the head section of index.php file –

<style>
ul {
	padding-top: 25px;
}
ul li{
  display: inline;
  padding-left:5px;
}
.image-link {
    display: inline-block;
    padding: 4px;
    margin: 0 0.5rem 1rem 0.5rem;
    background-color: var(--bg-color);
    line-height: 0;
    border-radius: var(--border-radius-large);
}
</style>

Step 3: Added HTML code into the index.php file to display the listing.

<ul>
		<?php			
			$sql_query="SELECT id, image_title, image_description, image_name FROM gallery";
			$resultset = mysqli_query($conn, $sql_query) or die("database error:". mysqli_error($conn));
			while($rows = mysqli_fetch_array($resultset) ) { ?>


 	<li>					
				<a class="image-link" href="http://localhost/image-gallery/uploads/<?php echo $rows[" image_name"];?>" data-title="<?php echo $rows["image_title"]; ?>" data-lightbox="<?php echo $rows["image_name"]; ?>"><img src="http://localhost/image-gallery/uploads/<?php echo $rows[" image_name"]; ?>" class="img-thumbnail" width="200" height="200"/></a>
</li>


			<?php } ?>
</ul>