Ticker

6/recent/ticker-posts

Cards en Bootstrap, MySQL y PHP


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 BootstrapjQuery 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, profileaddress, 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-alignmiddle;
  width200px;
  height200px;
  border-radius50%;
  border:2px solid rgba(0,0,0,.125);
  margin5px;
}

.foto {
  vertical-alignmiddle;
  width195px;
  height195px;
  border-radius50%;
}

/* @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-width991px) {
  .avatar {
     vertical-alignmiddle;
     width160px;
     height160px;
     border-radius50%;
     border:2px solid rgba(0,0,0,.125);
     margin5px;
  }
  .foto {
    vertical-alignmiddle;
    width155px;
    height155px;
    border-radius50%;
  }
 }

 /* 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-width767px) {
  .avatar {
     displaynone !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{
   colorseagreen;
 }

 .H3Ocup{
  colorred;
 }


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 ✌...!!!


Publicar un comentario

0 Comentarios