Cómo crear cards de Bootstrap mediante PHP y MySQL

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 } ?>

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.