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
Publicar un comentario