How To Upload And Display Images And Text Together Using PHP PDO.

In this section, we are going to  Upload And Display Images And Text Together Using PHP  PDO.

This is just a simple techniques to upload images as well as add text in PHP  PDO. This is soo easy to do it.

To do this first just create database uploads  and then create table as posts and then create columns  post_id ,image_title and post_image as integer,varchar,varchar respectively..

First create uploads folder for images saving on it and displaying on your browser through server.

Now Lets Begin, Create index.php file.

and create form on index.php as like this

1.  <form method="post" action="upload.php"  enctype="multipart/form-data">
2. <table class="table1">
3.     <tr>
4.         <td><label style="color:#3a87ad; font-size:18px;">Image Title</label></td>
5.         <td width="30"></td>
6.         <td><input type="text" name="image_title" placeholder="image_title" required /></td>
7.     </tr>
8.     <tr>
9.         <td><label style="color:#3a87ad; font-size:18px;">Select  Image</label></td>
10.         <td width="30"></td>
11.         <td><input type="file" name="image"></td>
12.     </tr>    
13. 
    
14. </table> 
15. <button type="submit" name="Submit" class="btn btn-primary">upload</button>   
16. </form>

Now lets jump on php pdo scripts to proceed for database connection first.

create new php file again and save it as db.php and paste these scripts on this file.

1. <?php
2. //this scripts connect to your database
3.     $db_host = "localhost";
4.     $db_name = "uploads";
5.     $db_user = "root";
6.     $db_pass = "";
7. 
   
8.     try{
9. 
   
10.         $db_con = new PDO("mysql:host={$db_host};dbname={$db_name}",$db_user,$db_pass);
11.         $db_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
12.     }
13.     catch(PDOException $e){
14.         echo $e->getMessage();
15.     }
16. ?>

And Again lets create upload.php where our form gonna submited on this page and proceed for uploading and adding text on uploads folder and mysql table that we have created.

Add some scripts for uploading now on upload.php

1. <?php
2.      include('db.php');
3.     if(isset($_POST['Submit']))
4.     {
5. 
   
6.         $post_image=$_FILES["image"]["name"];
7. $image_title=$_POST['image_title'];
8. }
9. 
   
10.         try{
11.              move_uploaded_file($_FILES["image"]["tmp_name"],"uploads/" . $_FILES["image"]["name"]);
12. //sql query for insertion 
13.             $stmt = $db_con->prepare("INSERT INTO posts(image_title,post_image) VALUES( :image_title, :post_image)");
14. 
    
15.             $stmt->bindParam(":image_title", $image_title);
16.             $stmt->bindParam(":post_image", $post_image);
17.             if($stmt->execute())
18.             {
19.                 echo "<script>alert('Successfully Added..')</script>";    
20.         echo "<script>window.open('index.php','_self')</script>";
21.             }
22.             else{
23.                 echo "Query Problem";
24.             }    
25.         }
26.         catch(PDOException $e){
27.             echo $e->getMessage();
28.         }
29. ?>

And last to display uploaded images from the uploads folder and text or image title from the database table posts just copy and paste thes scripts on your index.php file .

1.       <?php
2.         include('db.php');
3.         //query for selecting database table
4.        $results = $db_con->prepare("SELECT * FROM posts ORDER BY post_id");
5.       $results->execute();
6.         // this while statement displays rows of database table
7.         while($row=$results->fetch(PDO::FETCH_ASSOC))
8.         {
9.             extract($row);
10.             ?>     
11.             <div class="col-sm-4">
12.             <div class="thumbnail">   
13.          <h4 style="color:red" align="center"><?php echo $row['image_title']; ?></h4>
14. 
    
15.          <img src="uploads/<?php echo $row['post_image']; ?>" class="img-rounded" alt="image" style="width:200px" height="200px;">
16.             </div>
17.             </div>
18.             <?php
19.         }
20.         ?>

full index.php file

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>Bramento.com</title>
6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
7.  <script src="../js/jquery.min.js"></script>
8.   <script src="../bootstrap/bootstrap.min.js"></script>
9. 
   
10. </head>
11. <body>
12.     <div class="container">
13.   <div class="thumbnail">
14.   <h3 style="color:#F06"> How to upload images with text in php pdo</h3>
15.  <form method="post" action="upload.php"  enctype="multipart/form-data">
16. <table class="table1">
17.     <tr>
18.         <td><label style="color:#3a87ad; font-size:18px;">Image Title</label></td>
19.         <td width="30"></td>
20.         <td><input type="text" name="image_title" placeholder="image_title" required /></td>
21.     </tr>
22.     <tr>
23.         <td><label style="color:#3a87ad; font-size:18px;">Select  Image</label></td>
24.         <td width="30"></td>
25.         <td><input type="file" name="image"></td>
26.     </tr>    
27. 
    
28. </table> 
29. <button type="submit" name="Submit" class="btn btn-primary">upload</button>   
30. </form>
31. </div>
32. 
    
33.         <?php
34.         include('db.php');
35.         //query for selecting database table
36.        $results = $db_con->prepare("SELECT * FROM posts ORDER BY post_id");
37. $results->execute();
38.         // this while statement displays rows of database table
39.         while($row=$results->fetch(PDO::FETCH_ASSOC))
40.         {
41.             extract($row);
42.             ?>     
43.             <div class="col-sm-4">
44.             <div class="thumbnail">   
45.          <h4 style="color:red" align="center"><?php echo $row['image_title']; ?></h4>
46. 
    
47.          <img src="uploads/<?php echo $row['post_image']; ?>" class="img-rounded" alt="image" style="width:200px" height="200px;">
48.             </div>
49.             </div>
50.             <?php
51.         }
52.         ?>
53.        </div>
54. </body>
55. </html>

full upload.php file 

  <?php

     include('db.php');

    if(isset($_POST['Submit']))

    {

  $post_image=$_FILES["image"]["name"];

$image_title=$_POST['image_title'];
}
        try{
             move_uploaded_file($_FILES["image"]["tmp_name"],"uploads/" . $_FILES["image"]["name"]);
            $stmt = $db_con->prepare("INSERT INTO posts(image_title,post_image) VALUES( :image_title, :post_image)");

            $stmt->bindParam(":image_title", $image_title);
            $stmt->bindParam(":post_image", $post_image);
          

            if($stmt->execute())
            {
                echo "<script>alert('Successfully Added..')</script>"; 
        echo "<script>window.open('index.php','_self')</script>";
            }
            else{
                echo "Query Problem";
            } 
        }
        catch(PDOException $e){
            echo $e->getMessage();
        } 
?>

Full db.php file

1.  <?php
2. date_default_timezone_set("Asia/Kathmandu");
3.     $db_host = "localhost";
4.     $db_name = "uploads";
5.     $db_user = "root";
6.     $db_pass = "";
7. 
   
8.     try{
9. 
   
10.         $db_con = new PDO("mysql:host={$db_host};dbname={$db_name}",$db_user,$db_pass);
11.         $db_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
12.     }
13.     catch(PDOException $e){
14.         echo $e->getMessage();
15.     }
16. ?>