PHP MySQL CRUD Operation with Image Upload

Hi guys, you already know about this topic because we have already done this task with uploading images in MySQL database. But then the image was simply uploaded to the MySQL database and saved the images in the directory.

Here is not only uploading the image but also displaying the updating, deleting images and other records in the table. We will upload images and data which will be stored in the MySQL database.

PHP CRUD Operation Tutorial, we have already demonstrated but did not include the upload image functionality. Here we will also upload the image and the image path will be stored in MySQL and the image will be saved in the directory. We will store the image in the folder, update the image from the folder and also delete the image from the folder. We will do all the operations in a phased manner.

What will we learn in CRUD operation with upload image?

In PHP MySQL CRUD operation, we will be covered the following topic.

First, we create a database and table in the MySQL database. Then, create an image directory in the server. We will save the images in a folder and display those images in the table with the data. Will not only upload images but also update images and delete images in the directory when we need them. Delete/update image in the image directory is most useful to replace image and delete image in the directory.

What’s the first thing we’ll create for a PHP CRUD operation?

PHP CRUD operation with image upload, we will create the following file and folder.

CrudWithImage (Main Directory): In this directory we will create PHP file, images folder.

php (directory) : We create a directory inside CrudwithImge for performing PHP MySQL CRUD operation. In this directory, we will store different types of files like PHP insert, display, select, update data as well as we’ll update images in directory data.

Photo(directory): Inside CrudwithImage directory, we will create a directory named photo to store and save uploaded images using PHP.

Json(directory) : We will show images and data in Android GridView. So we will need to convert the data to json format. This topic was already covered in the previous tutorial. Inside json directory we create json named PHP file and then encode the data.

Database_conn(directory): We connect MySQL database to PHP file. So we need a connection file. Inside database_conn, create a config file for connection between MySQL database and PHP script.

Index(file): Create index.php file inside CRUDwithimage directory. This is the main file, using we will upload data into MySQL data and store images in the photo directory.

How to CRUD PHP and MySQL with Image Upload Example?

Now, friends, let’s understand with an example.

Step: 1

First, create a database and table in MySQL database for storing data.

We create the following table inside the MySQL database.

CREATE TABLE `crud_image` (
  `u_id` int(10) NOT NULL,
  `u_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  `u_image` varchar(100) COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Step: 2

After creating the database and table, create a directory inside public_html or inside htdocs. Also, create a new CrudwithImage directory inside public_html or htdocs if required.

Step: 3

Now we need to connect the MySQL database to the PHP script. So create database_conn directory inside public_html. Inside database_conn, create a config named file for MySQL database and PHP script connection.

The following code of MySQL database to PHP script connection file.

config.php

<?php
$server_name='localhost';
$user_name='id18020730_database_username_12345678';
$password='1YH]TS4q%h%Jjxhi';
$db_name='id18020730_12345678_dbname';

$conn=mysqli_connect($server_name,$user_name,$password,$db_name)or die("could not connect");
?>

Step: 4

For storing images, that are inserted in PHP we’ll need a photo directory for storing and saving images. Create a photo named directory.

Step: 5

We’ll be storing PHP script files in a separate directory. So creates a PHP named directory.

Step: 6

MySQL creates the main index file to upload images to the database and store them in the images directory.

After connecting to the PHP script file, create a simple PHP file and write the HTML code.

index.php has the following code

Index.php

<html>
    <head>
        <title>crud with image</title>
    </head>
    <body>
        <form action="php/insert.php" method="POST" enctype="multipart/form-data">
            <label>Name</label><br />
            <input type="text" name="namet" required/><br />
            <label>Upload file</label><br />
            <input type="file" name="file" value="upload"/><br />
            <input type="submit" name="insert"/>
        </form>
        <a href="php/select.php" target="_blank">display data</a>
    </body>
</html>

Step: 7

In step 6 we have created an index file, now we create an insert data file inside the PHP directory. In previous tutorials, we both indexed and inserted files in one-file script. In this tutorial, we will create a separate file for better understanding.

The following code of insert.php script.

Insert.php

<?php
error_reporting(0);
require("../database_conn/config.php");
if(isset($_POST['insert'])){
    $name=$_POST['namet'];
    $file_name=$_FILES['file']['name'];
    $tmp_name=$_FILES['file']['tmp_name'];
    
    $insert="INSERT INTO crud_image(u_name,u_image)VALUES('$name','$file_name')";
    $result=mysqli_query($conn,$insert);
    //upload file in folder
    move_uploaded_file($tmp_name,"../photo/".$file_name);
    header("location:../index.php");
}
echo"<a href='select.php'>go to</a>";
mysqli_close($conn);
?>
Insert data into PHP MySQL database

Congrats, our insert operation work is done.

Now, you upload images to the MySQL database table and store them in the image directory.

Step: 8

Inserted data with images in database table still we don’t reach at the database table without login. Mean we need to show data in the table.

For that, create a new file inside php directory for displaying data.

Create a select named php script file.

The following code of select.php script.

Select.php

<?php
require("../database_conn/config.php");
$select="SELECT *FROM crud_image";
$result=mysqli_query($conn,$select)or die("could not display data");
echo"<table border='1' cellspacing='0' cellpadding='10'>
<tr bgcolor='orange'>
<th>U_ID</th>
<th>U_Name</th>
<th>U_Image</th>
<th>Edit</th>
<th>Delete</th>
</tr>";
while($row=mysqli_fetch_array($result)){
    echo"<tr>";
    echo"<td>".$row['u_id']."</td>";
    echo"<td>".$row['u_name']."</td>";
    //display image
    echo"<td><img src='../photo/".$row['u_image']."' alt='$row[u_name]' width='50'></td>";
    //for edit and delete data
    echo"<td><a href='update.php?id=$row[u_id]'/>Edit</a></td>";
    echo"<td><a href='delete.php?id=$row[u_id]'/>Delete</a></td>";
    echo"</tr>";
}
echo"</table>";
?>
<html>
    <head>
        <title>insert new data</title>
    </head>
    <body>
        <a href="../index.php">insert a new record</a>
    </body>
</html>

Congrats, now you can see your inserted data in the front end.

Step: 9

Displayed the data in the frontend, now we want to update the data with the image.

Create a PHP script called update to update the image. We will also connect the image update PHP script file to update the image inside the folder.

The updated PHP script code is given below

Update.php

<?php
require("../database_conn/config.php");
$id=$_GET['id'];
//select data from database
$select="SELECT *FROM crud_image WHERE u_id='$id'";
$result=mysqli_query($conn,$select)or die("could not select");
while($row=mysqli_fetch_array($result)){
    $name=$row['u_name'];
    $file_name=$row['u_image'];
}
?>
<!--update data from database-->
<?php 
if(isset($_POST['update'])){
    $id=$_POST['u_id'];
    $name=$_POST['namet'];
    $file_name=$_FILES['file']['name'];
    $tmp_name=$_FILES['file']['tmp_name'];
    
    // update image from folder
    include_once("update_image.php");
    //for image upload
    move_uploaded_file($tmp_name,"../photo/".$file_name);
    //update query
    $update="UPDATE crud_image SET u_name='$name', u_image='$file_name' WHERE u_id='$id'";
    $result=mysqli_query($conn,$update)or die("data could not update");
    echo"<script>
    alert('datqa update succssfully');
    window.location.href='select.php';
    </script>";
}
?>

<html>
    <head>
        <title>udpate data</title>
    </head>
    <body>
        <form action="" method="POST" enctype="multipart/form-data">
            <table border="1">
                <tr>
                    <th>Name</th>
                    <th>Image</th>
                    <th>Upload</th>
                </tr>
                <tr>
                    <td><input type="text" name="namet" value="<?php echo $name; ?>"></td><br />
                    <!--//for image -->
                    <td><img src="../photo/<?php echo $file_name;?>" width="50"></td><br />
                    <td><input type="file" name="file" value="<?php echo $file_name;?>"></td><br />
                </tr>
            </table>
            <input type="hidden" name="u_id" value="<?php echo $_GET['id'];?>">
            <input type="submit" name="update" value="update"/>
        </form>
    </body>
</html>
Update data from PHP MySQL database

Step: 10

Now, we don’t need the particular record inside the database table, you update the record otherwise delete the record using the following PHP script. Also, we connect the update image script code to update the image inside the directory.

The following code is for the delete operation.

Delete.php

<?php
require("../database_conn/config.php");
$id=$_GET['id'];
//delete image from folder
include("update_image.php");
//delete query
$delete="DELETE FROM crud_image WHERE u_id='$id' ";
$result=mysqli_query($conn,$delete);
// header("location:select.php");
echo "<script>
alert('image update or delete succssfully from folder');
window.location.href='select.php';
</script>";
?>

Congratulations, your PHP CRUD (create, read, update and delete) operation is done.

Now, you can insert data in PHP MySQL database table, display data in PHP MySQL database table, update data in MySQL database table and also delete data in MySQL database table.

But friends, you saw that we uploaded the image and store it in the image directory, when we update or delete the image then the image disappears in the table but the image inside the directory is not updated or deleted.

In this solution, we have already added this file script code to the update.php and delete.php files.

Now, create a script that deletes or updates images in the images directory as well.

PHP script, create update_image named file.

The following file code to update or delete the image inside a directory.

Update_image.php

<?php 
// select data from database
$select="SELECT *FROM crud_image WHERE u_id='$id'";
$result=mysqli_query($conn,$select);
$row=mysqli_fetch_array($result);
//set path
$path="../photo/".$row['u_image'];
unlink($path);
?>

Congrats, now the images inside the images directory will also be updated or deleted. When you update the record with the image the old image will be replaced as the new image. When you delete record then delete data with image inside image directory.

We have done PHP full CRUD operation with image upload. Now we want to display data in android gridview.

Next, we will display the PHP MySQL data in the Android GridView.

Note: In this post, if you find any mistakes or bugs and errors, feel free to contact or give feedback to improve the quality. Great if you give your feedback about this tutorial and other tutorials.

Leave a Reply