Tuesday, March 28, 2017

How to make a autocomplete using jquery and php pdo with parsing json data from mysql


Here is the video tutorial for easy understanding


create mysql database autocomplete and create table autocomplete

Table structure:

id int value=12 , primary key autoincrement
title varchar=255 ,

 

json.php file


  1. <html>

  2. <head></he

  3. <html>

  4. <head>

  5. <title>tutu</title>
  6. <link rel="stylesheet" href="js/easy-autocomplete.min.css"/>

  7. <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

  8. <script type="text/javascript" src="js/jquery.easy-autocomplete.min.js"></script>

  9. </head>

  10. <body>

  11. <h1>Auto complete plugin with php pdo and jquery</h1> 
  12. <input id="provider-json" />

  13. <script type="text/javascript">

  14.     var options = {
  15.     url: "json.php",
  16.     getValue: "jsondata",

  17.     list: {

  18.         match: {

  19.             enabled: true

  20.         }

  21.     }
  22. };

  23. $("#provider-json").easyAutocomplete(options);

  24. </script>

  25. </body
  26. </html>

json.php file



  1. <?php

  2.  

  3.  $dbhost = "localhost";

  4.  $dbuser = "root";

  5.  $dbpass = "";

  6.  $dbname = "autocomplete";

  7.  

  8.  try{

  9.   

  10.   $dbcon = new PDO("mysql:host=$dbhost;dbname=$dbname",$dbuser,$dbpass);

  11.   $dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  12.   

  13.  }catch(PDOException $ex){

  14.   

  15.   die($ex->getMessage());

  16.  }
  17.  $sqlquery = "select * from autocomplete";

  18. $run = $dbcon->prepare($sqlquery);
  19. $run->execute();
  20. $out = array();

  21. while($row=$run->fetch(PDO::FETCH_ASSOC)) {

  22.     $out[]= array('jsondata'=>$row['title']);

  23. }

  24. echo json_encode($out);

  25. ?>

How can we load PHP file into DIV by jQuery?




In this tutorial, I am going to show you, How we can load .php file using jquery.
To load .php file, we simply use load() function to call php file in a div.

Here is the example how i load php file with jquery load() function


 Database Name: `load`

Table structure for table `categories`

CREATE TABLE IF NOT EXISTS `categories` (
  `cat_id` int(100) NOT NULL,
  `cat_title` varchar(500) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=latin1;

 Dumping data for table `categories`
 

INSERT INTO `categories` (`cat_id`, `cat_title`) VALUES
(3, 'What is html?'),
(4, 'What is css?'),
(5, 'What is php?\r\n'),
(10, 'What is linux?'),
(13, 'toit');

db.php

  1. <?Php
  2.     $dbhost = 'localhost';
  3.     $dbname = 'load';  
  4.     $dbuser = 'root';                  
  5.     $dbpass = ''; 
  6.     
  7.     try{
  8.         
  9.         $dbcon = new PDO("mysql:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);
  10.         $dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  11.         
  12.     }catch(PDOException $ex){
  13.         
  14.         die($ex->getMessage());
  15.     }
  16.     
  17. ?>

index.php

  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>onlinestudy.bramento.com</title>
  6. <script type="text/javascript">
  7. $(document).ready(function() {
  8.     $("#results").load("getcat.php");  //using load() functions here 
  9.     
  10. });
  11. </script>
  12. </head>
  13. <h1> How we can load .php file using jquery.</h1>
  14. <div id="results"></div>
  15. <body>
  16. </body>
  17. </html>

 getcat.php

  1. <?php
  2.         require_once 'db.php';  
  3.         $stmt = $dbcon->prepare('SELECT * FROM categories');
  4.         $stmt->execute();
  5.         
  6.         while($row=$stmt->fetch(PDO::FETCH_ASSOC))
  7.         {
  8.             extract($row);
  9.             ?>         
  10.        <p> <?php echo $row['cat_title']; ?></p>
  11.             <?php
  12.         }
  13.         ?>

How to create page views counter with php pdo

How to Create Visitors counter by IP address in php pdo




This Tutorial is about How to Create Visitors counter by IP address in php pdo
First Create the database and name it as view and then create table

 

Table structure for table `visitors`

CREATE TABLE `visitors` (
  `id` int(11) NOT NULL,
  `ip` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `visitors`
--
INSERT INTO `visitors` (`id`, `ip`) VALUES
(2, ''),
(3, ''),
(4, '::1'),
(5, '127.0.0.1');

<?Php
    $dbhost = 'localhost';
    $dbname = 'views';
    $dbuser = 'root';                
    $dbpass = '';
  
  
    try{
      
        $dbcon = new PDO("mysql:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);
        $dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
      
    }catch(PDOException $ex){
      
        die($ex->getMessage());
    }
  
?>
<?php
        $ip = $_SERVER['REMOTE_ADDR'];
         $stmt = $dbcon->prepare("SELECT ip  FROM visitors WHERE ip= '$ip'");
         $stmt->execute();
         $stmt1=$stmt->rowCount();
         if ($stmt1==0) {
              $stmt2 = $dbcon->prepare("INSERT INTO visitors(id, ip) VALUES(NULL, '$ip')");
              $stmt2->execute();
         }
         $stmt = $dbcon->prepare('SELECT * FROM visitors');
        $stmt->execute();
       
        while($row=$stmt->fetch(PDO::FETCH_ASSOC))
        {
            extract($row);
             
            echo $row['ip'];
           
        }
       
        ?>

How to install laravel? xampp-window-php framework

How to install laravel? xampp-window-php framework
laravel download and setup link used in the video

Worlds Best Amazing flute played on Resham Firiri by young guys



Amazing flute played on resham firiri  by Nepali young guys
Amazing flute played on resham firiri  by Nepali young guys
Amazing flute played on resham firiri  by Nepali young guys
Worlds Best Amazing flute played on Resham Firiri  by  young guys

Monday, March 27, 2017

How to find out the last inserted id in Mysql with PhP?

How to integrate kcfinder-filemanager in ckeditor(CKEditor in PHP Tutorial)

How to integrate kcfinder-filemanager in ckeditor(CKEditor in PHP Tutorial) 


In this video, you will know how to integrate kcfinder-filemanager in ckeditor
links for ckeditor: http://ckeditor.com/
links for kcfinder https://kcfinder.sunhater.com/integrate

How to Display Mysql Data in a Select List of Bootstrap framework With php pdo?


In this video tutorial you will know to Display Mysql Data in a Select List of Bootstrap framework With php pdo.
Bootstrap link : http://getbootstrap.com/
.php mysql pdo connection

index.php file 



  1. <?Php

  2.   $dbhost = 'localhost';

  3.   $dbname = 'selectlist';  

  4.   $dbuser = 'root';                  

  5.   $dbpass = ''; 

  6.   try{
  7.     $dbcon = new PDO("mysql:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);

  8.     $dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);    

  9.   }catch(PDOException $ex){  

  10.     die($ex->getMessage());

  11.   }

  12.   ?>

  13. <!DOCTYPE html>

  14. <html lang="en">

  15.   <head>

  16.     <meta charset="utf-8">

  17.     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  18.     <meta name="viewport" content="width=device-width, initial-scale=1">

  19.     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  20.     <title>Bootstrap 101 Template</title>

  21.     <!-- Bootstrap -->

  22.     <!-- Latest compiled and minified CSS -->
  23. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  24.   </head>

  25.   <body>

  26.     <h1>Dynamic Select List in php mysql!</h1>

  27.     <div class="col-md-4">

  28.      <div class="form-group">

  29.      <label for="sel1">Select list:</label>

  30.     <select class="form-control" id="sel1">

  31.     <?php

  32.      $sqlquery = $dbcon->prepare('SELECT * FROM selectlist ORDER BY id DESC');
  33.      $sqlquery->execute();

  34.      while($row=$sqlquery->fetch(PDO::FETCH_ASSOC))

  35.      {

  36.        extract($row)

  37.     ?>
  38.     <option>

  39.       <?php

  40.     

  41.      echo $row['title'];

  42.     

  43.     ?>

  44.      </option>

  45.     <?php

  46.     } 

  47.     ?>

  48.   </select>

  49.    </div>

  50.     </div>

  51.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

  52.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  53.     <!-- Latest compiled and minified JavaScript -->

  54. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  55. </body>
  56. </html>

How Can we Convert MySQL Rows into JSON Format in PHP PDO

How  Can we Convert MySQL Rows into JSON Format in PHP PDO


In this video tutorial you will know How To Parse JSON With PHP
JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.
 JSON is a data exchange format between web/mobile applications.
It can easily convert data into plain text in human readable format.

Easily understand Get And Post Methods in PhP




Easily understand Get And Post Methods in PhP

           Above Scripts

  1. <?php
  2. $x = 'Hello';
  3. echo $x; 
  4. ?>
  5. <a href= "index.php?id">get</a>
  6. <?php 
  7. if(isset($_GET['id']))
  8. {
  9.     echo '<br>hello i got it';
  10. }
  11. ?>
  12. <form action="index.php" method="post">
  13. <input type="submit" value='post' name="submit">
  14. </form>
  15. <?php 
  16. if(isset($_POST['submit']))
  17. {
  18.     echo '<br>hello i got it';
  19. }
  20. ?>

How To Install Wordpress on localhost


Dynamic autocomplete with bootstrap typeahead.js in php(Video Tutorial)

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. </table> 
  14. <button type="submit" name="Submit" class="btn btn-primary">upload</button>   
  15. </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.     try{

  8.         $db_con = new PDO("mysql:host={$db_host};dbname={$db_name}",$db_user,$db_pass);
  9.         $db_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  10.     }
  11.     catch(PDOException $e){
  12.         echo $e->getMessage();
  13.     }
  14. ?>

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.         $post_image=$_FILES["image"]["name"];
  6. $image_title=$_POST['image_title'];
  7. }

  8.         try{
  9.              move_uploaded_file($_FILES["image"]["tmp_name"],"uploads/" . $_FILES["image"]["name"]);
  10. //sql query for insertion 
  11.             $stmt = $db_con->prepare("INSERT INTO posts(image_title,post_image) VALUES( :image_title, :post_image)");

  12.             $stmt->bindParam(":image_title", $image_title);
  13.             $stmt->bindParam(":post_image", $post_image);
  14.             if($stmt->execute())
  15.             {
  16.                 echo "<script>alert('Successfully Added..')</script>";    
  17.         echo "<script>window.open('index.php','_self')</script>";
  18.             }
  19.             else{
  20.                 echo "Query Problem";
  21.             }    
  22.         }
  23.         catch(PDOException $e){
  24.             echo $e->getMessage();
  25.         }
  26. ?>

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.          <img src="uploads/<?php echo $row['post_image']; ?>" class="img-rounded" alt="image" style="width:200px" height="200px;">
  15.             </div>
  16.             </div>
  17.             <?php
  18.         }
  19.         ?>
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. </head>
  10. <body>
  11.     <div class="container">
  12.   <div class="thumbnail">
  13.   <h3 style="color:#F06"> How to upload images with text in php pdo</h3>
  14.  <form method="post" action="upload.php"  enctype="multipart/form-data">
  15. <table class="table1">
  16.     <tr>
  17.         <td><label style="color:#3a87ad; font-size:18px;">Image Title</label></td>
  18.         <td width="30"></td>
  19.         <td><input type="text" name="image_title" placeholder="image_title" required /></td>
  20.     </tr>
  21.     <tr>
  22.         <td><label style="color:#3a87ad; font-size:18px;">Select  Image</label></td>
  23.         <td width="30"></td>
  24.         <td><input type="file" name="image"></td>
  25.     </tr>    

  26. </table> 
  27. <button type="submit" name="Submit" class="btn btn-primary">upload</button>   
  28. </form>
  29. </div>

  30.         <?php
  31.         include('db.php');
  32.         //query for selecting database table
  33.        $results = $db_con->prepare("SELECT * FROM posts ORDER BY post_id");
  34. $results->execute();
  35.         // this while statement displays rows of database table
  36.         while($row=$results->fetch(PDO::FETCH_ASSOC))
  37.         {
  38.             extract($row);
  39.             ?>     
  40.             <div class="col-sm-4">
  41.             <div class="thumbnail">   
  42.          <h4 style="color:red" align="center"><?php echo $row['image_title']; ?></h4>

  43.          <img src="uploads/<?php echo $row['post_image']; ?>" class="img-rounded" alt="image" style="width:200px" height="200px;">
  44.             </div>
  45.             </div>
  46.             <?php
  47.         }
  48.         ?>
  49.        </div>
  50. </body>
  51. </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.     try{

  8.         $db_con = new PDO("mysql:host={$db_host};dbname={$db_name}",$db_user,$db_pass);
  9.         $db_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  10.     }
  11.     catch(PDOException $e){
  12.         echo $e->getMessage();
  13.     }
  14. ?>

How to use facebook comment ,like,share buttons or plugins dynamically?


Hello Guys!
This tutorial is about plugins of facebook. As we all know that facebook have made us soo easy to use its share,like button and coment plugin etc for developer.
Any one can use this by copying soo easily bt its some tricky too use it dynamically.
Today, in this tutorial , i am going to show you how I have used it dynamically.
First go to this website of facebook for developer to use its plugins and like button , share,send etc.facebook for developer.
Now, just grab the codes from there of coment,share , like plugins and paste it where to in your website.
I have used it like this  giving link on 9,12 line as like this using link id "http://onlinestudy.bramento.com/pages/detail.php?post_id=<?php echo($row['post_id']); ?>
  1.  <div id="fb-root"></div> 
  2.             <script>(function(d, s, id) {
  3.   var js, fjs = d.getElementsByTagName(s)[0];
  4.   if (d.getElementById(id)) return;
  5.   js = d.createElement(s); js.id = id;
  6.   js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
  7.   fjs.parentNode.insertBefore(js, fjs);
  8. }(document, 'script', 'facebook-jssdk'));</script>         
  9.     <div class="fb-like" data-href="http://onlinestudy.bramento.com/pages/detail.php?post_id=<?php echo($row['post_id']); ?>" data-layout="button_count" data-action="like" data-size="large" data-show-faces="true"></div>&nbsp<div class="fb-send" data-href="http://onlinestudy.bramento.com/pages/detail.php?post_id=<?php echo($row['post_id']); ?>"></div>
  10.     
  11.     <br />
  12.     <div class="fb-comments" data-href="http://onlinestudy.bramento.com/pages/detail.php?post_id=<?php echo($row['post_id']); ?>" data-numposts="5"></div>

Vue.js tutorial,v-model directive

Vue.js tutorial,v-model directive 



Vue.js tutorial. Reverse in Vue.js, v-on directive


Vue.js tutorial. Reverse in Vue.js, v-on directive 

In this tutorial you will learn to know the v-on directive to attach event listeners

Vue js tutorial-Conditionals and Loops

Vue js tutorial-Conditionals and Loops


V-bind in vue js

Vue js project setup and getting started

Vue js project setup and getting started 

Displaying or Fetching records from multiple mysql tables using php pdo in a bootstrap table.

This is a  method for displaying or fetching data from multiple mysql tables using php pdo in a bootstrap table.

  • First Create A Database called "multitable" in phpmyadmin.
  • After Creating Database in phpmyadmin create tables called 'makes' and 'country' .
  • Then Add Column's on country as country_id and set as autoincrement ,country_name,love and set as varchar.
  • Then Add Column's on makes as makes_id and set as autoincrement ,makes_name,love and set as varchar and set country_id as int.
  • And last of database section insert some values on tables columns of country,makes table and insert country_id of table makes as equal to country_id of country table.

Now Lets Start displaying or fetching data from multiple mysql tables using php pdo.

Lets create new file and save it as index.php and write some php pdo scripts in a php file index.php for database connection now which connect to your database multitable.

  •    <?Php
  •     // pdo database connection
  •     $dbhost = 'localhost';
  •     $dbname = 'multitable';  
  •     $dbuser = 'root';                  
  •     $dbpass = '';    
  •     try{       
  •         $dbcon = new PDO("mysql:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);
  •         $dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);        
  •     }catch(PDOException $ex){       
  •         die($ex->getMessage());
  •     }    
  • ?>

Now write some php pdo scripts for fetching records from a multiple mysql tables in a index.php file again.

  •      <?php
  •         
  •         //query for selecting database table and displays records from multiple tables 
  •         $stmt = $dbcon->prepare('select c.* , p.* from country c,makes p where c.country_id= p.country_id LIMIT 0 , 10');
  •         $stmt->execute();
  •         // this while statement displays rows of database table
  •         while($row=$stmt->fetch(PDO::FETCH_ASSOC))
  •         {
  •             extract($row);
  •             ?>        
  •          <?php echo $row['country_name']; ?>
  •          <?php echo $row['makes_name']; ?>
  •         <?php echo $row['love']; ?>      
  •          </tr>
  •             <?php
  •         }
  •         ?>
Full scripts in a file index.php 
  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>Displaying or Fetching records from multiple mysql tables using php pdo in a bootstrap table</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.     <?Php
  14.     // pdo database connection
  15. date_default_timezone_set("Asia/Kathmandu");
  16.     $dbhost = 'localhost';
  17.     $dbname = 'multitable';  
  18.     $dbuser = 'root';                  
  19.     $dbpass = ''; 
  20.     
  21.     
  22.     try{
  23.         
  24.         $dbcon = new PDO("mysql:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);
  25.         $dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  26.         
  27.     }catch(PDOException $ex){
  28.         
  29.         die($ex->getMessage());
  30.     }
  31.     
  32. ?>
     
  33.   <h3>Displaying or Fetching records from multiple mysql tables using php pdo in a bootstrap table</h3>
  34.  
  35.   <table class="table table-striped">
  36.     <thead>
  37.       <tr class="danger">
  38.         <th>Countryname</th>
  39.         <th>Makes name</th>
  40.         <th>love</th>
  41.       </tr>
  42.     </thead>
  43.     <tbody>
  44.        <?php
  45.         
  46.         //query for selecting database table
  47.         $stmt = $dbcon->prepare('select c.* , p.* from country c,makes p where c.country_id= p.country_id LIMIT 0 , 10');
  48.         $stmt->execute();
  49.         // this while statement displays rows of database table
  50.         while($row=$stmt->fetch(PDO::FETCH_ASSOC))
  51.         {
  52.             extract($row);
  53.             ?>     
  54.             <tr class="info">    
  55.          <td><?php echo $row['country_name']; ?></td>
  56.          <td> <?php echo $row['makes_name']; ?></td>
  57.         <td><?php echo $row['love']; ?></td>       
  58.          </tr>
  59.             <?php
  60.         }
  61.         ?>
  62.     </tbody>
  63.   </table>
  64.         </div>
  65.        
  66. </body>
  67. </html>

preview before uploading images using bootstrap imageupload form in jquery and php pdo.

How to preview before uploading  images using bootstrap imageupload form in jquery and php pdo.


I have already discuss how to upload images in our previous tutorial.
Now in this tutorial, i am just going to show you how we can preview before uploading images with using bootstrap plugin for uploading images.

You can download it freely here from ;github for this plugin.
Now Lets Start,First create database first "upload"


 Table structure for table `images`
 

CREATE TABLE IF NOT EXISTS `images` (
  `id` int(14) NOT NULL,
  `image` varchar(123) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

File path should be like this

  • index.php file
  • db.php file
  • create.php file
  • uploads folder

db.php file
  1. <?php
  2. date_default_timezone_set("Asia/Kathmandu");
  3.     $db_host = "localhost";
  4.     $db_name = "upload";
  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. ?>

index.php file

Here we create form and  used this plugin as like this

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>onlinestudy.bramento.com></title>
  7. <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  8. <link rel="stylesheet" href="../css/style.css" type="text/css" />
  9. <script type="text/javascript" src="../assets/jquery-1.11.3-jquery.min.js"></script>
  10. <script src="../bootstrap/js/bootstrap.min.js"></script>
  11. <!--this is a plugin i have used to display images before uploading with pdo --> 
  12. <link href="../assets/dist/css/bootstrap-imageupload.css" rel="stylesheet">
  13.         <style>
  14.            
  15.             .imageupload {
  16.                 margin: 20px 0;
  17.             }
  18.         </style>
  19. </head>
  20. <body>
  21.  <form method="post" action="create.php" enctype="multipart/form-data">
  22.     <!-- bootstrap-imageupload. -->
  23.             <div class="imageupload panel panel-default">
  24.                 <div class="panel-heading clearfix">
  25.                     <h3 class="panel-title pull-left">Upload Image</h3>
  26.                     <div class="btn-group pull-right">
  27.                         <button type="button" class="btn btn-default active">File</button>
  28.                         <button type="button" class="btn btn-default">URL</button>
  29.                     </div>
  30.                 </div>
  31.                 <div class="file-tab panel-body">
  32.                     <label class="btn btn-default btn-file">
  33.                         <span>Browse</span>
  34.                         <!-- The file is stored here. -->
  35.                         <input type="file" name="image">
  36.                     </label>
  37.                     <button type="button" class="btn btn-default">Remove</button>
  38.                 </div>
  39.                 <div class="url-tab panel-body">
  40.                     <div class="input-group">
  41.                         <input type="text" class="form-control hasclear" placeholder="Image URL">
  42.                         <div class="input-group-btn">
  43.                             <button type="button" class="btn btn-default">Submit</button>
  44.                         </div>
  45.                     </div>
  46.                     <button type="button" class="btn btn-default">Remove</button>
  47.                     <!-- The URL is stored here. -->
  48.                     <input type="hidden" name="image">
  49.                 </div>
  50.             </div>
  51.             <!-- bootstrap-imageupload method buttons. -->
  52.             <button type="button" id="imageupload-disable" class="btn btn-danger">Disable</button>
  53.             <button type="button" id="imageupload-enable" class="btn btn-success">Enable</button>
  54.             <button type="button" id="imageupload-reset" class="btn btn-primary">Reset</button>
  55.         </div>
  56.  <button type="submit" class="btn btn-primary" name="Submit" id="btn-save">
  57.             <span class="glyphicon glyphicon-plus"></span> Save this Record
  58.             </button>  
  59. </form>
  60. <!-- include this too, its a js of  bootstrap image upload-->
  61. <script src="../assets/dist/js/bootstrap-imageupload.js"></script>
  62.       <script>
  63.             var $imageupload = $('.imageupload');
  64.             $imageupload.imageupload();
  65.             $('#imageupload-disable').on('click', function() {
  66.                 $imageupload.imageupload('disable');
  67.                 $(this).blur();
  68.             })
  69.             $('#imageupload-enable').on('click', function() {
  70.                 $imageupload.imageupload('enable');
  71.                 $(this).blur();
  72.             })
  73.             $('#imageupload-reset').on('click', function() {
  74.                 $imageupload.imageupload('reset');
  75.                 $(this).blur();
  76.             });
  77.         </script>
  78. </body>
  79. </html>

NOw finally create.php file

This file is for php scripts for image uploading process

  1. <?php
    require_once 'db.php';  
  2.  
  3.  if(isset($_POST['Submit']))
  4.     {
  5.         
  6.         $images=$_FILES["image"]["name"];
  7. $image_tmp = $_FILES['image']['tmp_name'];
  8.     if($images=='')    {
  9.         echo "<script>alert('Please Choose Images')</script>";    
  10.         echo "<script>window.open('index.php','_self')</script>";    
  11.     }
  12. else {    try{
  13.                move_uploaded_file($image_tmp,"uploads/$images");
  14.             $stmt = $db_con->prepare("INSERT INTO images(image) VALUES( :image)");
  15.            
  16.             $stmt->bindParam(":image", $images);
  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.     }}
  30.     }
  31. ?>