Upload And Display Image From Database Using PHP Mysql Oops Concept.

In this post you will learn how to upload and display image from database using PHP Mysql using OOP. In the previous post, we saw an example of CRUD Application using OOPs PHP and Mysql. In this example, I added code to upload a file in database using PHP OOP.

I use OOP concept to implement image uploads. There is a form with file input fields and a upload buttons. When a form with the select a file sent request with the uploaded image.

The PHP code moves the uploaded image to the uploads folder and insert the image unique name in database and returns the HTML image to display the preview in index page.

First of all, you need to understand that uploading users to your server can be a major security risk if you don’t validate correctly. So the most important part to consider is validation.

See also

Table of Contents

Create a table in Database

--
-- Database: `crud_oops`
--
-- Table structure for table `customers`
--

CREATE TABLE `customers` (
  `id` int(100) NOT NULL PRIMARY KEY AUTO INCEAMENT,
  `name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `username` varchar(100) NOT NULL,
  `dob` date NOT NULL,
  `profile_image` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Create Class File and Database Connection

customers.php

<?php

  class Customers
  {
    private $servername = "localhost";
    private $username   = "root";
    private $password   = "";
    private $dbname     = "crud_oops";
    public  $con;


    // Database Connection 
    public function __construct()
    {
        try {
          $this->con = new mysqli($this->servername, $this->username, $this->password, $this->dbname);  
        } catch (Exception $e) {
          echo $e->getMessage();
        }
    }

    // Insert customer data into customer table
    public function insertData($name, $email, $username, $dob, $file)
    { 
      $allow = array('jpg', 'jpeg', 'png');
        $exntension = explode('.', $file['name']);
        $fileActExt = strtolower(end($exntension));
        $fileNew = rand() . "." . $fileActExt;  // rand function create the rand number 
        $filePath = 'uploads/'.$fileNew; 
      
      if (in_array($fileActExt, $allow)) {
          if ($file['size'] > 0 && $file['error'] == 0) {
              if (move_uploaded_file($file['tmp_name'], $filePath)) {
                  $query = "INSERT INTO customers(name, email, username, dob, profile_image) VALUES('$name','$email','$username','$dob','$fileNew')";
                $sql = $this->con->query($query);
                if ($sql==true) {
                   return true;
                }else{
                  return false;
                }          
            }
          }
       }
    }

    // Fetch customer records for show listing

    public function displayData()
    {
        $sql = "SELECT * FROM customers";
        $query = $this->con->query($sql);
        $data = array();
        if ($query->num_rows > 0) {
          while ($row = $query->fetch_assoc()) {
              $data[] = $row;
          }
          return $data;
        }else{
          return false;
        }
    }

  }

?>

Create Insert or Add HTML Form

add.php

<?php

// Include database file
include 'customers.php';

$customerObj = new Customers();

// Insert Record in customer table
if(isset($_POST['submit'])) {

    $name = $_POST['name'];
    $email = $_POST['email'];
    $username = $_POST['username'];
    $dob = $_POST['dob'];
    $file = $_FILES['image'];
    $insertData = $customerObj->insertData($name, $email, $username, $dob, $file);

    if ($insertData){
        header("Location:index.php");
    }else{
        return false;
    }

}
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Upload File in database using OOPs concept with PHP Mysql</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="card text-center" style="padding:15px;">
      <h4>Upload File in database using OOPs concept with PHP Mysql</h4>
    </div><br>
    <div class="container">
      <form method="POST" action="add.php" enctype="multipart/form-data">
        <div class="form-group">
          <label for="name">Name:</label>
          <input type="text" class="form-control" name="name" placeholder="Enter name" required="">
        </div>
        <div class="form-group">
          <label for="email">Email address:</label>
          <input type="email" class="form-control" name="email" placeholder="Enter email" required="">
        </div>
        <div class="form-group">
          <label for="username">Username:</label>
          <input type="text" class="form-control" name="username" placeholder="Enter username" required="">
        </div>
        <div class="form-group">
          <label for="dob">Date of Birth:</label>
          <input type="date" class="form-control" name="dob" required="">
        </div>
        <div class="form-group">
          <label for="profile_image">Profile Image:</label>
          <input type="file" class="form-control" name="image" required="">
        </div>
        <input type="submit" name="submit" class="btn btn-primary" style="float:right;" value="Submit">
      </form>
    </div>
  </body>
</html>

Output

Upload and display image from database using PHP Mysql oops concept.

Create File View or listing

index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Upload File in database using OOPs concept with PHP Mysql</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="card text-center" style="padding:15px;">
  <h4>Upload File in database using OOPs concept with PHP Mysql</h4>
</div><br><br> 

<div class="container">
  <h2>View Records
    <a href="add.php" class="btn btn-primary" style="float:right;">Add New Record</a>
  </h2>
    <table class="table table-hover">
      <thead class="bg-dark" style="color:white">
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Email</th>
          <th>Username</th>
          <th>Date of Birth</th>
          <th>Profile Image</th>
        </tr>
      </thead>
    <tbody>
      <?php 
      // Include database file
      include 'customers.php';

      $customerObj = new Customers();
      $customers = $customerObj->displayData(); 

      foreach ($customers as $customer) {
       
      ?>
        <tr>
          <td>#<?php echo $customer['id']; ?></td>
          <td><?php echo $customer['name']; ?></td>
          <td><?php echo $customer['email']; ?></td>
          <td><?php echo $customer['username']; ?></td>
          <td><?php echo date('d-M-Y', strtotime($customer['dob'])); ?></td>
          <td><img src="<?php echo 'uploads/'. $customer['profile_image'] ?>" width="180px"></td>
        </tr>
      <?php } ?>
    </tbody>
  </table>
</div>
</body>
</html>

You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊