Create Dynamic Image Gallery with jQuery, PHP & MySQL

Image gallery or photo gallery is a special feature of web applications that allows users to upload images and access their images. If you're working on a web project and want to implement users image gallery then your at right place. In this tutorial you will learn how to create dynamic photo gallery using PHP and MySQL. You will also learn how to create lightbox with image in gallery to increase user experience as it helps to display images in larger size when click on it. In this tutorial we will use jQuery plugin Lightbox2 for lightbox.



So let’s start the coding. We will have following file structure to creating image gallery using PHP MySQL.

• index.php


• user.php


• upload.php


• gallery.php


• logout.php

Steps1: Create Database Tables
As we will handle image gallery example with user login to create theri image gallery by uploading images. So we will create user table usign below table create query.


CREATE TABLE `user` (
`id` int(11) NOT NULL,
`email` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL,
`first_name` varchar(100) NOT NULL,
`last_name` varchar(100) NOT NULL,
`mobile` int(11) NOT NULL,
`address` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


We will insert a user record to login with user to manage their image galllery.

INSERT INTO `user` (`id`, `email`, `password`, `first_name`, `last_name`, `mobile`, `address`) VALUES
(2, 'test@phpzag.com', 'test', 'php', 'zag', 2147483647, '');


We will also create user_gallery table using below query to store uploaded image details.

CREATE TABLE `user_gallery` (
`id` int(11) NOT NULL,
`user_id` int(11) 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;




Steps2: Create Login Form
We will create login form in index.php for user login to access user section to allow access to manage gallery.
<div class="container">
<h2>Create Dynamic Image Gallery with jQuery, PHP & MySQL</h2>
<div class="row">
<div class="col-md-4 col-md-offset-4 well">
<form role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="loginform">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<label for="name">Email</label>
<input type="text" name="email" placeholder="Your Email" required class="form-control" />
</div>
<div class="form-group">
<label for="name">Password</label>
<input type="password" name="password" placeholder="Your Password" required class="form-control" />
</div>
<div class="form-group">
<input type="submit" name="login" value="Login" class="btn btn-primary" />
</div>
</fieldset>
</form>
</div>
</div>
</div>


Steps3: Handle User Login
We will handle user login functionality on login form submit using below code and redirect to user.php to access user section to manage image gallery.
<?php
if(isset($_POST["login"])) {
$email=$_POST["email"];
$password=$_POST["password"];
$sql_query="SELECT id, email, password, first_name, last_name FROM user WHERE email='$email' AND password='$password'";
$resultset = mysqli_query($conn, $sql_query) or die("database error:". mysqli_error($conn));
$row=mysqli_fetch_array($resultset);
if(mysqli_num_rows($resultset)>0) {
$_SESSION["userid"]=$row["id"];
$_SESSION["name"]=$row["first_name"]." ".$row["last_name"];
header("location:user.php");
} else {
echo "Login details not correct! Please try again.";
}
mysql_close($con);
}
?>



Steps4: Handle User Section
In user.php, we will display logged in user with links to image upload section, view gallery and user logout.
<div class="container">
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav navbar-left">
<?php if (isset($_SESSION['userid'])) { ?>
<li><p class="navbar-text"><strong>Welcome!</strong> You're signed in as <strong><?php echo $_SESSION['name']; ?></strong></p></li>
<li><a href="gallery.php"><strong>View Image Gallery</strong></a></li>
<li><a href="logout.php">Log Out</a></li>
<?php } else { ?>
<li><a href="index.php">Login</a></li>
<?php } ?>
</ul>
</div>
</div>


Steps5: Create Image Upload Form
In upload.php, we will design image upload Form with view image gallery link.

<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 well">
<strong><a href="gallery.php">View Image Gallery</a> </strong>
<a href="logout.php">Logout</a> <br><br>
<form role="form" enctype='multipart/form-data' action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<fieldset>
<legend>Upload Images</legend>
<div class="form-group">
<label for="name">Image Title</label>
<input type="text" name="image_title" placeholder="Image Title" class="form-control" />
</div>
<div class="form-group">
<label for="name">Image Description:</label>
<input type="text" name="img_description" placeholder="Image Description" class="form-control" />
</div>
<div class="form-group">
<label for="name">Choose Image:</label>
<input type="file" name="uploaded_file" placeholder="Choose file" class="form-control" />
</div>
<div class="form-group">
<input type="submit" name="upload" value="upload" class="btn btn-primary" />
</div>
</fieldset>
</form>
</div>
</div>
</div>


Steps6: Implement User Image Upload
Now will handle image upload functionality in upload.php and also insert uploaded image details in database table user_gallery
<?php
if(isset($_POST["upload"]) && $_SESSION["userid"]) {
$image_title=$_POST["image_title"];
$img_description=$_POST["img_description"];
$fk_uid=$_SESSION["userid"];
$image_name=$_FILES["uploaded_file"]["name"];
if ($_FILES["uploaded_file"]["type"]=="image/gif"
|| $_FILES["uploaded_file"]["type"]=="image/jpeg"
|| $_FILES["uploaded_file"]["type"]=="image/pjpeg"
|| $_FILES["uploaded_file"]["type"]=="image/png"
&& $_FILES["uploaded_file"]["size"]<20000) {
if ($_FILES["uploaded_file"]["error"]>0) {
echo "Return Code:".$_FILES["uploaded_file"]["error"]."
";
} else {
$i=1;
$success = false;
$new_image_name=$image_name;
while(!$success) {
if (file_exists("uploads/".$new_image_name)) {
$i++;
$new_image_name="$i".$image_name;
} else {
$success=true;
}
}
move_uploaded_file($_FILES["uploaded_file"]["tmp_name"],"uploads/".$new_image_name);
// image details into database table
$insert_sql = "INSERT INTO user_gallery(id, user_id, image_title, image_description, image_name)
VALUES('', '". $_SESSION["userid"]."', '".$image_title."', '".$img_description."', '".$image_name."')";
mysqli_query($conn, $insert_sql) or die("database error: ". mysqli_error($conn));
}
} else {
echo "Invalid file";
}
}
?>


Steps7: Display Images in User Gallery
Now in gallery.php, we will display uploaded images in user gallery. We will also use data-lightbox attribute with anchor to display gallery image in lightbox when click on image.
<div class="container">
<?php if (isset($_SESSION['userid'])) { ?>
<div class="row">
<div class="navbar-collapse gallery">
<ul>
<?php
$sql_query="SELECT id, user_id, image_title, image_description, image_name FROM user_gallery WHERE user_id='".$_SESSION["userid"]."'";
$resultset = mysqli_query($conn, $sql_query) or die("database error:". mysqli_error($conn));
while($rows = mysqli_fetch_array($resultset) ) { ?>
<li>
<a href="http://localhost/phpzag/create-dynamic-image-gallery-with-jquery-php-mysql/uploads/<?php echo $rows["image_name"]; ?>" data-lightbox="<?php echo $_SESSION['userid']; ?>" data-title="<?php echo $rows["image_title"]; ?>"><img
src="http://localhost/phpzag/create-dynamic-image-gallery-with-jquery-php-mysql/uploads/<?php echo $rows["image_name"]; ?>" class="images" width="200" height="200"></a>
</li>
<?php } ?>
</ul>
</div>
</div>
<?php } ?>
</div>


Steps8: Implement Logout User From Gallery
As we have handle user login using SESSION in multiple pages, so handle user logout functionality by SESSION destroy.
<?php
session_start();
session_destroy();
header("location:index.php");
?>



You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]