Monday, March 27, 2017

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>

1 comment:

  1. Your website is very beautiful or Articles. I love it thank you for sharing for everyone. Vue Js Php Tutorial

    ReplyDelete