Skip to main content

Add, Edit, Delete Image with data table using PDO in PHP/MySQL


Related Code: Add, Edit, Delete with data table using PDO in PHP/MySQL

This simple project is created using PDO or it's called PHP Data Objects and it's a database driven using MySQL as a database. This project is intended for beginners in using PDO. It has a basic code so everyone can easily to understand and learn. This is Add, Edit, Delete Image with data table using PDO in PHP/MySQL. Let's start with:

Creating our Table

We are going to make our database.

  1. Open the PHPMyAdmin.
  2. Create a database and name it as "upload_image".
  3. After creating a database name, then we are going to create our table. And name it as "tbl_image".
  4. Kindly copy the code below.

  1. CREATE TABLE `tbl_image` (
  2. `tbl_image_id` INT(11) NOT NULL,
  3. `first_name` VARCHAR(100) NOT NULL,
  4. `last_name` VARCHAR(100) NOT NULL,
  5. `image_location` VARCHAR(100) NOT NULL
  6. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Database Connection

  1. <?php
  2. $conn = new PDO('mysql:host=localhost; dbname=upload_image','root', '');
  3. ?>

Add, Update, and Delete Image in PDO Query

Modal Add Form

Result Add

  1. <!-- Modal -->
  2. <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3. <div class="modal-header">
  4.  
  5. <h3 id="myModalLabel">Add</h3>
  6. </div>
  7. <div class="modal-body">
  8. <form method="post" action="upload.php" enctype="multipart/form-data">
  9. <table class="table1">
  10. <tr>
  11. <td><label style="color:#3a87ad; font-size:18px;">FirstName</label></td>
  12. <td width="30"></td>
  13. <td><input type="text" name="first_name" placeholder="FirstName" required /></td>
  14. </tr>
  15. <tr>
  16. <td><label style="color:#3a87ad; font-size:18px;">LastName</label></td>
  17. <td width="30"></td>
  18. <td><input type="text" name="last_name" placeholder="LastName" required /></td>
  19. </tr>
  20. <tr>
  21. <td><label style="color:#3a87ad; font-size:18px;">Select your Image</label></td>
  22. <td width="30"></td>
  23. <td><input type="file" name="image"></td>
  24. </tr>
  25. </div>
  26. <div class="modal-footer">
  27. <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  28. <button type="submit" name="Submit" class="btn btn-primary">Upload</button>
  29. </div>
  30. </form>
  31. </div>

Add Query Using PDO

  1. <?php
  2.  
  3. require_once ('db.php');
  4.  
  5. if (isset($_POST['Submit'])) {
  6. // echo "";
  7. // }else{
  8. // $file=$_FILES['image']['tmp_name'];
  9. // $image = $_FILES["image"] ["name"];
  10. // $image_name= addslashes($_FILES['image']['name']);
  11. // $size = $_FILES["image"] ["size"];
  12. // $error = $_FILES["image"] ["error"];
  13. //
  14. // if ($error > 0){
  15. // die("Error uploading file! Code $error.");
  16. // }else{
  17. // if($size > 10000000) //conditions for the file
  18. // {
  19. // die("Format is not allowed or file size is too big!");
  20. // }
  21. //
  22. // else
  23. // {
  24. move_uploaded_file($_FILES["image"]["tmp_name"],"uploads/" . $_FILES["image"]["name"]);
  25. $location=$_FILES["image"]["name"];
  26. $fname=$_POST['first_name'];
  27. $lname=$_POST['last_name'];
  28.  
  29. $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  30. $sql = "INSERT INTO tbl_image (first_name, last_name, image_location)
  31. VALUES ('$fname', '$lname', '$location')";
  32.  
  33. $conn->exec($sql);
  34. echo "<script>alert('Successfully Added!!!'); window.location='index.php'</script>";
  35. // }
  36. }
  37. // }
  38. ?>

Modal Edit Form

Result Edit

  1. <!-- Modal Update Image -->
  2. <div id="updte_img<?php echo $id;?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3. <div class="modal-header">
  4. <h3 id="myModalLabel">Update</h3>
  5. </div>
  6. <div class="modal-body">
  7. <div class="alert alert-danger">
  8. <?php if($row['image_location'] != ""): ?>
  9. <img src="uploads/<?php echo $row['image_location']; ?>" width="100px" height="100px" style="border:1px solid #333333; margin-left: 30px;">
  10. <?php else: ?>
  11. <img src="images/default.png" width="100px" height="100px" style="border:1px solid #333333; margin-left: 30px;">
  12. <?php endif; ?>
  13. <form action="edit_PDO.php<?php echo '?tbl_image_id='.$id; ?>" method="post" enctype="multipart/form-data">
  14. <div style="color:blue; margin-left:150px; font-size:30px;">
  15. <input type="file" name="image" style="margin-top:-115px;">
  16. </div>
  17. </div>
  18. <hr>
  19. <div class="modal-footer">
  20. <button class="btn btn-inverse" data-dismiss="modal" aria-hidden="true">No</button>
  21. <button type="submit" name="submit" class="btn btn-danger">Yes</button>
  22. </form>
  23. </div>
  24. </div>
  25. </div>

Edit Query Using PDO

  1. <?php
  2.  
  3. require_once ('db.php');
  4.  
  5. $get_id=$_REQUEST['tbl_image_id'];
  6.  
  7. move_uploaded_file($_FILES["image"]["tmp_name"],"uploads/" . $_FILES["image"]["name"]);
  8. $location1=$_FILES["image"]["name"];
  9.  
  10.  
  11. $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  12. $sql = "UPDATE tbl_image SET image_location ='$location1' WHERE tbl_image_id = '$get_id' ";
  13.  
  14. $conn->exec($sql);
  15. echo "<script>alert('Successfully Updated!!!'); window.location='index.php'</script>";
  16. ?>

Modal Delete Form

Result Delete

  1. <!-- Modal Deleting Image -->
  2. <div id="delete<?php echo $id;?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3. <div class="modal-header">
  4. <h3 id="myModalLabel">Delete</h3>
  5. </div>
  6. <div class="modal-body">
  7. <div class="alert alert-danger">
  8. <?php if($row['image_location'] != ""): ?>
  9. <img src="uploads/<?php echo $row['image_location']; ?>" width="100px" height="100px" style="border:1px solid #333333;">
  10. <?php else: ?>
  11. <img src="images/default.png" width="100px" height="100px" style="border:1px solid #333333; margin-left:15px;">
  12. <?php endif; ?>
  13. <b style="color:blue; margin-left:25px; font-size:30px;"><?php echo $row['first_name']." ".$row['last_name']; ?></b>
  14. <br />
  15. <p style="font-size: larger; text-align: center;">Are you Sure you want to Delete?</p>
  16. </div>
  17. <hr>
  18. <div class="modal-footer">
  19. <button class="btn btn-inverse" data-dismiss="modal" aria-hidden="true">No</button>
  20. <a href="delete.php<?php echo '?tbl_image_id='.$id; ?>" class="btn btn-danger">Yes</a>
  21. </div>
  22. </div>
  23. </div>

Delete Query Using PDO

  1. <?php
  2. require_once('db.php');
  3.  
  4. $get_id=$_GET['tbl_image_id'];
  5.  
  6. // sql to delete a record
  7. $sql = "Delete from tbl_image where tbl_image_id = '$get_id'";
  8.  
  9. // use exec() because no results are returned
  10. $conn->exec($sql);
  11. header('location:index.php');
  12. ?>

Result

And, that's all, you can have Add, Edit, Delete Image with data table using PDO in PHP/MySQL or kindly click the "Download Code" button to download the full source code.

This is the full source code for Inserting Image, Updating Image, and Deleting Image in MySQL.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Submitted byHecker (not verified)on Wed, 10/24/2018 - 17:55

Nicely done Really liked it

Submitted bysalim21on Thu, 11/28/2019 - 23:14

hi, i love your work, but i have a question. please can you help me and send me a update copy of the above project with a edit function on the update image button. at the moment you can change the image but not the first name or the last name. can you show me this code added to the update box showing above on your project.
thank you. please can you send it to my email at [email protected]

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.