EJEMPLO BOOTSTRAP 4 CON PDO Y PAGINACION






Este es un ejemplo de web usando el framework  Bootsrap 4 con PDO y con un menu horizontal con un icono de home y Dropdown . Lo hemos creado con 2 columnas verticales y una horizontal.que sirve como Footer. Hemos accedido a una tabla de MYSQL con 10000 registros  y para eso hemos tenido tenido que crear una paginacion. Al final he tenido que limitar la seleccion a 50 registros unicamente .




pruebaflex5.php

<?php
 require_once ( "configuracion.php" );

 $datos=new PDO ( "mysql:host=$servidor; dbname=$base_datos;charset=utf8", $usuario, $pass);


?>


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <style type="text/css">
    * {

    margin:0;
    box-sizing: border-box;
  }
</style>
<head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
             <a  href="pruebaflex.html"> <img class="nav-link" src="ic_home_white_24dp_1x.png" alt="icon name" style="color:white">
        </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </li>
   
 
    </ul>
 
 
  </div>

</nav>

 <!-- <div class="jumbotron text-center">

 
  <h1 class="display-3">My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>-->




  <div class="container">

   <div class="row align-items-start justify-content-start" >
    <div class="col-sm-8 p-2" style="background-color:#F5ECCE">
          <h3>Column 1</h3>

          <table class="table table-dark table-hover" style="width: 70%; margin:auto;">
            <tr><th>id</th><th>vorname</th><th>nachname</th><th>pass</th></tr>
          <?php
        $por_pagina=20;
        if (isset($_GET['pagina'])){
            $pagina=$_GET['pagina'];
        }else{
          $pagina=1;
        }
        $empieza=($pagina-1)*$por_pagina;
        $query = $datos->query ("select * from passagier where passagier_id<50 limit $empieza, $por_pagina");
        while ($valores = $query -> fetch()) {?>

               <tr><td><?php echo $valores[passagier_id]?></td>
                <td><?php echo $valores[vorname]?></td>
                <td><?php echo $valores[nachname]?></td>
                <td><?php echo $valores[passnummer]?></td></tr>

         

             
     
        <?php }
        ?>

     </table>

         <?php
         $query = $datos->query ("select * from passagier  where passagier_id<50 ");
         $total_registros=$query->rowCount();
         $total_paginas=ceil($total_registros / $por_pagina);
         echo "<a href='pruebaflex5.php?pagina=1'>".'Primera '. "</a>";
         for ($i=1; $i <=$total_paginas; $i++){

             echo "<a href='pruebaflex5.php?pagina=".$i."'>".$i." "."</a>";
       }

             echo "<a href='pruebaflex5.php?pagina=$total_paginas'>".' Ultima '. "</a>";
          ?>
     
    </div>
    <div class="col-sm-4" style="background-color:#BFFF00">
      <h3>Column 2</h3>
      <ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

    <p>Hueros del  xvxxxcclsos lsfljfsjfle jl lfj</p>
    <p>Hueros del  lsos lsfljfsjfle jl lfj</p>
    <a  href="pruebaflex5.html"> <img  src="Download.jpg" alt="icon name" width="90%" height="auto">
    <p>Hueros del  lsos lsfljfsjfle jl lfj</p>
    <p>Hueros del  lsos lsfljf   cxxcv    xcsjfle jl lfj</p>
    <p>Hueros del  ls         os lsfljfsjfle jl lfj</p>

    </div>
    </div>
</div>
    <div class="col-sm-12 mt-2 p-3" style="background-color:orange">
      <h3>Column 3</h3>     
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>

</body>
</html>
-----------------------------------------------------------------------------------------------
configuracion.php


<?php
$servidor = "localhost";
$usuario = "root";
$pass = "123456";
$base_datos = "FlughafenDB";
?>


Comentarios