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


Php oop file upload, Upload File in database using OOPs concept with PHP Mysql,PHP Simple Image Upload Function Class,file upload MVC in php, oop php

In this post you will learn  how to upload and display image from database using PHP Mysql using OOPs. 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 OOPs.

I use OOPs 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

1. How to Upload & Display Image Using jQuery AJAX PHP and MySQL

2. How to Upload File in CakePHP 4
3. Ajax Multiple Image Upload with Edit Update Delete using PHP Mysql
4. Upload Multiple Image in Database & Retrieve using jquery AJAX in PHP MYSQL
5. How to Upload Multiple Images using jquery ajax in PHP MYSQL
6. Upload File without using Form Submit button in jQuery AJAX PHP MySQL

In this post will you have Four main topics

1. Create a table in Database

2. Create Class File and Database Connection

3. Create File View or listing

4. Create Insert or Add HTML Form

Create a table in Database

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

CREATE TABLE `customers` (
`id` int(100) NOT NULL,
`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>



Upload File in database using OOPs concept with PHP Mysql




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>

Upload File in database using OOPs concept with PHP Mysql

You can always support by sharing on social media or recommending my blog to your friends and colleagues.   

If you have any suggestions / problems about this tutorial, please comment on the  form below.😊


Leave a Reply