Como ya es conocido las Cards "Tarjetas" de Bootstrap proporcionan un contenedor de contenido flexible y extensible con mĂșltiples variantes y opciones; opciones para encabezados y pies de pĂĄgina, con amplia variedad de contenido, colores de fondo contextuales y potentes opciones de visualizaciĂłn.
Si estĂĄs familiarizado con Bootstrap 3, los Cards reemplazan a los paneles de las anteriores versiones, sin embargo la funcionalidad es similar a esos componentes.
En este tutorial haremos uso de Bootstrap 4; el caso a desarrollar consiste en crear una tabla en MySQL que almacenarĂĄ los datos del perfil de un usuario, como el name, address, profile, skills, website, photo, facebook, gplus, twitter y un flag para saber la disponibilidad. AdemĂĄs usaremos php para la manipulaciĂłn de la tabla de la base datos y algo de CSS3 para dar un estilo responsivo a nuestra pagina - para todo el desarrollo se harĂĄ uso del IDE Visual Studio Code, bueno sin mas que decir empecemos.
1. Crear base de datos y tabla - MySQL:
En mi caso siempre uso una base de datos llamado DEMO, y crearé la tabla usuario con los campos ya arriba mencionado:
CREATE TABLE `usuario` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`name` VARCHAR(255) NOT NULL,
`address` VARCHAR(255) NOT NULL,
`profile` TEXT NOT NULL,
`skills` TEXT NOT NULL,
`website` VARCHAR(255) NOT NULL,
`photo` VARCHAR(255) NOT NULL,
`facebook` VARCHAR(255) NOT NULL,
`gplus` VARCHAR(255) NOT NULL,
`twitter` VARCHAR(255) NOT NULL,
`flag` INT(1) NOT NULL DEFAULT 1,
PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;
2. Crear la conexiĂłn a la base de datos - PHP:
Ahora bien, creamos el archivo dbconnect.php y adicionamos el siguiente cĂłdigo PHP:
<?php
$servername = "localhost"; //Servidor web Apache
$username = "root"; //Usuario
$password = ""; //Password
$dbname = "demos";//Nombre de la base datos
$conn = mysqli_connect($servername, $username, $password, $dbname) or
die("Connection failed: " . mysqli_connect_error());
?>
3. Maquetar (HTML5) el contenedor de contenido Cards - Bootstrap:
Para esto creamos el archivo index.php y referenciamos los CDN de Bootstrap, jQuery y nuestro propio archivo css (que lo crearemos en el siguiente paso):
Recuerda, para entender de lo que se ha desarrollado en el archivo index.php, debes leer los comentarios que estĂĄn en cada bloque del archivo en menciĂłn.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="container-fluid bg-success text-center" style="padding-top:10px;padding-bottom:10px">
<h1>Cards in bootstrap, MySQL and PHP</h1>
</div></br>
<?php
/* incluimos el archovo dbconnect.php para acceder a la base de datos*/
include_once("dbconnect.php");
/* query para manipular los datos*/
$sql = "SELECT id, name, photo, profile, address, skills, website, facebook, gplus,
twitter, flag FROM usuario";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
/* recorremos los registro obtenidos*/
while( $record = mysqli_fetch_assoc($resultset) ) {
?>
<!--Cards que viene siendo alimentado desde la base de datos registro por regstro-->
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-12">
<!--SecciĂłn card-header-->
<div class="card-header text-center">
<?php
if ($record['flag'] == 1){
echo '<h3 class="H3Dis">Disponible</h3>';
}elseif($record['flag'] == 2){
echo '<h3 class="H3Ocup">Ocupado</h3>';
}
?>
</div>
</div>
<div class="col-md-3">
<!--figure avatar-->
<figure class="avatar avatar-xl">
<!--img foto-->
<img class="foto" alt="" src="<?php echo $record['photo']; ?>">
</figure>
</div>
<div class="col-md-9">
<!--SecciĂłn card-body-->
<div class="card-body info">
<h3><?php echo $record['name']; ?></h3>
<div> <a target="_blank" href="<?php echo $record['website']; ?>">
<?php echo $record['website']; ?></a></div>
<div><?php echo $record['profile']; ?></div>
<div><?php echo $record['address']; ?></div>
<h6><?php echo $record['skills']; ?></h6>
</div>
</div>
<div class="col-md-12">
<!--SecciĂłn card-footer-->
<div class="card-footer bottom text-center">
<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>
</div>
</div>
<?php } ?>
</div>
</body>
</html>
4. Definir estilos a la pagina del contenedor de contenido Cards - CSS3:
Finalmente creamos el directorio css dentro de la raĂz principal de proyecto y seguidamente creamos el archivos style.css para dar nuestro propio estilo a la pagina responsiva:
Del mismo modo, para entender lo que se ha desarrollado en el archivo style.css, debes leer los comentarios que estĂĄn en cada bloque del archivo en menciĂłn.
/*Inicializar estilo del avatar y foto*/
.avatar {
vertical-align: middle;
width: 200px;
height: 200px;
border-radius: 50%;
border:2px solid rgba(0,0,0,.125);
margin: 5px;
}
.foto {
vertical-align: middle;
width: 195px;
height: 195px;
border-radius: 50%;
}
/* @media queries de CSS3 para controlar la pagina responsiva*/
/* 1. Cuando la resoluciĂłn de la pantalla sea 991, el avanta y foto
al dimenciĂłn sera menor de lo iniciado*/
@media only screen and (max-width: 991px) {
.avatar {
vertical-align: middle;
width: 160px;
height: 160px;
border-radius: 50%;
border:2px solid rgba(0,0,0,.125);
margin: 5px;
}
.foto {
vertical-align: middle;
width: 155px;
height: 155px;
border-radius: 50%;
}
}
/* 2. Cuando la resoluciĂłn de la pantalla sea 767, el avanta se
ocultarĂĄ (la foto estĂĄ dentro del avatar que hereda
la occiĂłn ocultar)*/
@media only screen and (max-width: 767px) {
.avatar {
display: none !important;
}
}
/* Para dar color al texto de header del CARD segĂșn el valor que nos
devuelve el campo flag de la base de datos (1 = verder o 2 = rojo)*/
.H3Dis{
color: seagreen;
}
.H3Ocup{
color: red;
}
5. Validar desde localhost:
Después de concluir el desarrollo a MySQL, PHP, Bootstrap (HTML y CSS) se procede a validar desde localhost con el servidor web Apache que nos facilita el paquete de instalación de XAMPP:
 |
Se hace uso de las tres parte principal del contenedor de contenido Cards de
Bootstrap (header, body y footer) |
6. Conclusiones:
En este tutorial elaboramos el contenedor de contenido Cards de Bootstrap e implementamos el archivo de CSS para dar forma de avatar a la foto y se aplico @media queries de CSS3 para controlar la foto en base a la pagina responsiva todo esto a nivel de Front End y a nivel del Back End manipulamos los datos de MySQL con PHP, asimismo mostramos la foto del usuario en base al componente de figure de Bootstrap que nos permite agregar imĂĄgenes y texto (puede ser un div normal - lo uso con el fin de mantener el patrĂłn de Bootstrap).
El cĂłdigo fuente y script de la base de datos lo podrĂĄs descargar en GitHub:
Gratitud a Dios đ y gracias a todos ustedes por la acogida de este nuevo tutorial, comentarios y sugerencia son bienvenido o me pueden escribir al correo hadson1@gmail.com
Ăxitos y bendiciones đ y un gran abrazo a todos ✌...!!!
0 Comentarios