Las cards de Bootstrap son contenedores de contenido flexible con variedad de opciones como headers, cuerpo, footer, colores de fondo contextuales y una vasta cantidad de opciones de personalización. Estas cards (o tarjetas) te brindan multitud de ventajas como una mayor claridad en el diseño, una estructura clara del contenido mediante categorÃas y un elemento muy, pero que muy visual. Seguramente ya hayas visto estas cards en redes sociales como Facebook y Google, ya que estas plataformas también son conscientes de sus múltiples caracterÃsticas.
Además puedes personalizar estas cards tanto como quieras debido a que su estructura está dividida en múltiples elementos. Por eso, en este tutorial te mostraremos cómo crear este tipo cards dinámicamente con PHP y MySQL.
La estructura de archivos que seguiremos en este ejemplo, será la siguiente:
- index.php
- db_connect.php
- style.css
Crear tabla en la base de datos MySQL
Como vamos a crear cards o tarjetas de Bootstrap dinámicamente, necesitamos de una tabla de nuestra BD de donde extraer la información. Por lo que para ello, vamos a crear una tabla llamada cards e insertaremos unos cuantos registros…
CREATE TABLE `cards` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `address` varchar(255) NOT NULL, `description` text NOT NULL, `website` varchar(255) NOT NULL, `image` varchar(255) NOT NULL, `facebook` varchar(255) NOT NULL, `gplus` varchar(255) NOT NULL, `twitter` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Conectarnos a la base de datos
En el archivo db_connect.php, realizaremos la conexión a nuestra base de datos MySQL para obtener la información que más tarde mostraremos en nuestras cards de Bootstrap.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "noprog";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
?>
Obtener los registros de la base de datos y crear las cards de Bootstrap
Ahora, en index.php obtendremos los registros de la tabla cards que hace poco hemos creado en nuestra base de datos MySQL y los mostraremos en distintas tarjetas en la parte pública. Utilizaremos la clase .cards para crear tarjetas básicas. También utilizaremos la clase .card-header para el encabezado de la tarjeta, y la clase card-footer para el pie. También he añadido algo de CSS personalizado para darle un toque distintivo que, sin duda, le va a ir genial.
<?php
include_once("db_connect.php");
$sql = "SELECT id, name, image, description, address, website, facebook, gplus, twitter FROM cards";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while( $record = mysqli_fetch_assoc($resultset) ) {
?>
<div class="card hovercard">
<div class="cardheader">
<div class="avatar">
<img alt="" src="<?php echo $record['image']; ?>">
</div>
</div>
<div class="card-body info">
<div class="title">
<a href="#"><?php echo $record['name']; ?></a>
</div>
<div class="desc"> <a target="_blank" href="<?php echo $record['website']; ?>"><?php echo $record['website']; ?></a></div>
<div class="desc"><?php echo $record['description']; ?></div>
<div class="desc"><?php echo $record['address']; ?></div>
</div>
<div class="card-footer bottom">
<a class="btn btn-primary btn-twitter btn-sm" href="<?php echo $record['twitter']; ?>">
<i class="fa fa-twitter"></i>
</a>
<a class="btn btn-danger btn-sm" rel="publisher"
href="<?php echo $record['gplus']; ?>">
<i class="fa fa-google-plus"></i>
</a>
<a class="btn btn-primary btn-sm" rel="publisher"
href="<?php echo $record['facebook']; ?>">
<i class="fa fa-facebook"></i>
</a>
</div>
</div>
<?php } ?>