May 14, 2024
Category : PHP
Javascript
Bootstrap
jQuery
MySql
PHP MySQL Image Gallery CRUD Example
Today we will learn how to create simple image gallery crud using bootstrap, mysql database, fancy box and PHP. We will create example from scratch so it will be easy to get full script example.
Sometimes, we almost require to create image gallery or insert update and delete module for user, employee, admin, students etc. Photo album will help to easily upload image and remove that with proper validation. So we always want to built good bootstrap layout with image gallery. However in this tutorial, we will make photo gallery from scratch with good layout that way you can simply built it with your project. I make proper validation using session with proper error and success message. So if you insert successfully image then gives proper message with success.
In this example, we will create "image_gallery" table with main 'title' and 'image' columns. I created one files for display form and error messages, validation etc. After finish this example you will find layout as like bellow preview:
Preview:
Step 1: Create image_gallery table
In this step we will create new new table "image_gallery" in database. You can use following SQL Query for create "image_gallery" table. So let's create using bellow sql query:
item table:
CREATE TABLE `image_gallery` (
`id` int(10) UNSIGNED NOT NULL,
`title` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`image` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
Step 2: Create DB Configuration File
In this step, we require to create database configuration file, here we will set database name, username and password of phpmyadmin database. So let's create "db_config.php" file on your root directory and put bellow code:
db_config.php
<?php
define (DB_USER, "root");
define (DB_PASSWORD, "root");
define (DB_DATABASE, "sole");
define (DB_HOST, "localhost");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
?>
Step 3: Create Index.php File
Here, we will create index.php file, in this file we will write code for display images with delete button and also display with title of image. So let's create index.php file on your root directory and put bellow code.
index.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery Example</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- References: https://github.com/fancyapps/fancyBox -->
<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">
.gallery
{
display: inline-block;
margin-top: 20px;
}
.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: 15px;
}
</style>
</head>
<body>
<div class="container">
<h3>PHP - Image Gallery CRUD Example</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">
<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('db_config.php');
$sql = "SELECT * FROM image_gallery";
$images = $mysqli->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> <!-- text-center / end -->
</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> <!-- col-6 / end -->
<?php } ?>
</div> <!-- list-group / end -->
</div> <!-- row / end -->
</div> <!-- container / end -->
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"
});
});
</script>
</html>
Step 4: Create imageUpload.php File
In this step we will create imageUpload.php file, in this file we will create write code for validation using session, image upload code and insert database code, so let's create another file imageUpload.php on your root path and put bellow code.
imageUpload.php
<?php
session_start();
require('db_config.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'];
if(move_uploaded_file($tmp, 'uploads/'.$image_name)){
$sql = "INSERT INTO image_gallery (title, image) VALUES ('".$_POST['title']."', '".$image_name."')";
$mysqli->query($sql);
$_SESSION['success'] = 'Image Uploaded successfully.';
header("Location: http://localhost:8000");
}else{
$_SESSION['error'] = 'image uploading failed';
header("Location: http://localhost:8000");
}
}else{
$_SESSION['error'] = 'Please Select Image or Write title';
header("Location: http://localhost:8000");
}
?>
Step 5: Create imageDelete.php File
In this step we will create imageDelete.php file, in this file we will write code for remove records from database, so let's create another file imageDelete.php on your root path and put bellow code.
imageDelete.php
<?php
session_start();
require('db_config.php');
if(isset($_POST) && !empty($_POST['id'])){
$sql = "DELETE FROM image_gallery WHERE id = ".$_POST['id'];
$mysqli->query($sql);
$_SESSION['success'] = 'Image Deleted successfully.';
header("Location: http://localhost:8000");
}else{
$_SESSION['error'] = 'Please Select Image or Write title';
header("Location: http://localhost:8000");
}
?>
Ok, now we are ready to run our Image Gallery example. Make sure you have to create "uploads" directory on your root folder with full permission because images will store on uploads folder. So let's run bellow command on your root directory for quick run:
php -S localhost:8000
Now you can open bellow URL on your browser:
http://localhost:8000/
I hope it can help you....
;void(0);){kind=link}
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
Subscribe me on: Youtube
We are Recommending you
- How to Create Zip Folder and Download in PHP?
- PHP Ajax Form Validation Example Tutorial
- PHP MySQL DataTables Server-side Processing Example
- PHP JQuery Ajax Image Upload Example Tutorial
- Laravel Grayscale Image Generate Example
- Laravel Image Gallery CRUD Example Tutorial
- Codeigniter Image Upload with Validation Example
- PHP Ajax Dependent Dropdown List Example
- Laravel Ajax Image Upload with Validation Example
- PHP MySQL Highcharts Chart Example
- Laravel Image Resize & Upload with Intervention Image Example
- How to Upload Image using jQuery Ajax in PHP?
- Crop, Resize, Frames etc on Selected Image in PHP using Aviary
;void(0);){kind=link}