How to Image Gallery CRUD example in PHP?
Mar 13, 2022 . Admin
Hello Friends,
I am going to explain you php mysql image gallery example. You will learn how to PHP MySQL - Simple Image Gallery CRUD example. In side this article we will see how to Image Gallery CRUD using PHP MySQL.
This article will give you simple example of Create Dynamic Image Gallery with jQuery, PHP & MySQL. We will use get simple Gallery System with PHP, MySQL and JS.
You can use from how to PHP Image Gallery - Create Photo Gallery with Database. I will give you simple how to Build Dynamic Image Gallery with PHP & MySQL.
So, let's see bellow solution:
connection.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "db_php";
$conn = new mysqli($servername,$username,$password,$dbname);
if ($conn->connect_error) {
die("connection failed: ".$coon->connect_error);
}
?>
index.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP MySQL Image Gallery Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<style type="text/css">
.close-icon
{
border-radius: 50%;
position: absolute;
right: 5px;
top: -10px;
padding: 5px 8px;
}
.form-image-upload
{
background: #e8e8e8 none repeat scroll 0 0;
padding: 25px;
margin-bottom: 40px;
}
.thumbnail img
{
height: 200px !important;
width: 200px !!important;
}
.wrapper
{
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<h3 class="text-center">How to Image Gallery CRUD Example in PHP? - Mywebtuts.com</h3>
<form action="/imageUpload.php" class="form-image-upload" method="POST" enctype="multipart/form-data">
<?php if(!empty($_SESSION['error'])){ ?>
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
<li><?php echo $_SESSION['error']; ?></li>
</ul>
</div>
<?php unset($_SESSION['error']); } ?>
<?php if(!empty($_SESSION['success'])){ ?>
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong><?php echo $_SESSION['success']; ?></strong>
</div>
<?php unset($_SESSION['success']); } ?>
<div class="row pt-5">
<div class="col-md-5">
<strong>Title:</strong>
<input type="text" name="title" class="form-control" placeholder="Title">
</div>
<div class="col-md-5">
<strong>Image:</strong>
<input type="file" name="image" class="form-control">
</div>
<div class="col-md-2">
<br/>
<button type="submit" class="btn btn-success">Upload</button>
</div>
</div>
</form>
<div class="row">
<div class='list-group gallery'>
<?php
require('connection.php');
$sql = "SELECT * FROM image_gallery";
$images = $conn->query($sql);
while($image = $images->fetch_assoc()){
?>
<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
<a class="thumbnail fancybox" rel="ligthbox" href="/uploads/<?php echo $image['image'] ?>">
<img class="img-responsive" alt="" src="/uploads/<?php echo $image['image'] ?>" />
<div class='text-center'>
<small class='text-muted'><?php echo $image['title'] ?></small>
</div>
</a>
<form action="/imageDelete.php" method="POST">
<input type="hidden" name="id" value="<?php echo $image['id'] ?>">
<button type="submit" class="close-icon btn btn-danger"><i class="glyphicon glyphicon-remove"></i></button>
</form>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"
});
});
</script>
</html>
imageUpload.php
<?php
session_start();
require('connection.php');
if(isset($_POST) && !empty($_FILES['image']['name']) && !empty($_POST['title'])){
$name = $_FILES['image']['name'];
list($txt, $ext) = explode(".", $name);
$image_name = time().".".$ext;
$tmp = $_FILES['image']['tmp_name'];
$title = $_POST['title'];
if(move_uploaded_file($tmp, 'uploads/'.$name)){
$sql = "INSERT INTO image_gallery(title, image) VALUES ('$title', '$name')";
$conn->query($sql);
$_SESSION['success'] = 'Image Uploaded successfully.';
header("Location: index.php");
}else{
$_SESSION['error'] = 'image uploading failed';
header("Location: index.php");
}
}else{
$_SESSION['error'] = 'Please Select Image or Write title';
header("Location: index.php");
}
?>
imageDelete.php
<?php
session_start();
require('connection.php');
if(isset($_POST) && !empty($_POST['id'])){
$sql = "DELETE FROM image_gallery WHERE id = ".$_POST['id'];
$conn->query($sql);
$_SESSION['success'] = 'Image Deleted successfully.';
header("Location:index.php");
}else{
$_SESSION['error'] = 'Please Select Image or Write title';
header("Location: index.php");
}
?>
Output:
It will help you...