PHP MySQL – Simple Image Gallery CRUD example from scratch

PHP MySQL – Simple Image Gallery CRUD example from scratch

In this post we will give you information about PHP MySQL – Simple Image Gallery CRUD example from scratch. Hear we will give you detail about PHP MySQL – Simple Image Gallery CRUD example from scratchAnd how to use it also give you demo for it if it is necessary.

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);

?>

Also see:Crop, Resize, Frames etc on selected image in php using Aviary

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 >


<h3>PHP - Image Gallery CRUD Example</h3>

<form action="/imageUpload.php" method="POST" enctype="multipart/form-data">


<?php if(!empty($_SESSION['error'])){ ?>

<div >

<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 >

<button type="button" data-dismiss="alert">×</button>

<strong><?php echo $_SESSION['success']; ?></strong>

</div>

<?php unset($_SESSION['success']); } ?>


<div >

<div >

<strong>Title:</strong>

<input type="text" name="title" placeholder="Title">

</div>

<div >

<strong>Image:</strong>

<input type="file" name="image" >

</div>

<div >

<br/>

<button type="submit" >Upload</button>

</div>

</div>


</form>


<div >

<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 rel="ligthbox" href="/uploads/<?php echo $image['image'] ?>">

<img 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" ><i ></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:

Also see:Laravel – Grayscale Image Generate Example from scratch

http://localhost:8000/

I hope it can help you….

Hope this code and post will helped you for implement PHP MySQL – Simple Image Gallery CRUD example from scratch. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

78  +    =  85

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US