Sentencias preparadas en PHP y MySQL con ejemplos, Parte 2

¡Comparte nuestro contenido!

Continuando con las sentencias preparadas, en la primera parte logramos insertar datos en una base de datos MySQL por medio de parametros. Recordemos que la razón principal de esto, consiste en asegurar que los datos sean correctos, así como evitar inyecciones de código y otro tipo de ataques muy típicos. Con eso en mente, continuemos.

Consulta de selección

Por supuesto, necesitamos mostrar los datos que vayamos insertando en nuestra base de datos. Haremos una consulta simple que no será parametrizada, pero que aprovechará lo que ya tenemos construido. Insertemos una tabla con los campos necesarios.

<table>
   <thead>
      <tr>
         <th>ID</th>
         <th>Nombre</th>
         <th>Edad</th>
         <th>Estatura</th>
      </tr>
   </thead>
   <tbody>
   </tbody>
</table>

Mostraremos los datos dentro del par <tbody></tbody> que se encarga del cuerpo de nuestro tabla. Haremos lo típico, mostrar los datos ordenados por ID de manera descendente, así nos aseguramos de mostrar los registros nuevos en primer lugar.

<?php
$sqlLista = "select id, nombre, edad, estatura from personas order by id desc";

Creamos nuestro Statement y lo ejecutamos

$stmtLista = $enlace->prepare($sqlLista);
$stmtLista->execute();

Como se puede notar, no es necesario usar bind_param ya que no hay parámetros que enviar. Ahora recuperemos la lista de campos.

$stmtLista->bind_result($pid, $pnombre, $pedad, $pestatura);

Necesitamos saber si nuestra tabla esta vacía (0 registros) para eso, ocuparemos la constante num_rows que nos muestra la cantidad de registros en nuestra tabla, pero este debemos acompañarla de la función store_result. Los datos los recorreremos por medio de la función fetch y un sencillo while.

$stmtLista->store_result();
if($stmtLista->num_rows==0){ ?>
   <tr><td colspan="4">No hay datos para mostrar</td></tr>
<?php }else{
   while($stmtLista->fetch()){ ?>
      <tr>
         <td><?= $pid; ?></td>
         <td><?= $pnombre; ?></td>
         <td><?= $pedad; ?></td>
         <td><?= $pestatura; ?></td>
      </tr>
   <?php }
}

Para finalizar esta parte, necesitamos ilberar los recursos ocupados por la función store_result, de eso se encarga free_result, también hay que cerrar el statement y por supuesto finalizar nuestro enlace a la base de datos.

$stmtLista->free_result();
$stmtLista->close();
$enlace->close();

Y este es el resultado hasta ahora.

Apliquemos algo de estilo

Nuestro ejemplo se ve muy triste y gris hasta el momento ¡Es hora de arregrarlo! Insertemos un archivo nuevo llamado estilos.css y coloquemos la línea de código correspondiente para ligarlo a nuestro archivo PHP, justo debajo del título.

<link href="estilos.css" rel="stylesheet" type="text/css" />

Ahora, ajustemos la fuente a un tamaño decente, cambiemos el color de fondo y usemos una fuente sencilla pero más fácil de leer.

body{
    background-color: azure;
    font-size: 1em;
    font-family: sans-serif;
}

Ajustemos un poco el título y los párrafos.

h1{
    text-align: center;
    color: cadetblue;
}
p{
    text-align: center;    
}

Nuestro formulario tendrá de ancho el 60% de la pantalla, un color de fondo diferente para el fieldset y lo separaremos 10 píxeles de cualquier vecino cercano.

form{
    width: 60%;
    padding: 2%;
    margin: 10px auto;
}
fieldset{ background-color: #FFF; }

Los label e input serán distribuidos al 48% de la página con 1% de padding en sus 4 lados, y un margen inferior de 10 píxeles.

label, input{
    display: block;
    width: 48%;
    height: 30px;
    padding: 1%;    
    margin-bottom: 10px;
}

Los objetos label irán a la izquierda, los input a la derecha y sin borde, usaremos una pequeña sombra de 3 píxeles en su lugar, ya que la sombra no forma parte del ancho.

label{ float: left; }
input{    
    float: right;    
    border: none;
    box-shadow: 0 0 3px #AAA;    
}

El botón de tipo submit será diferente. 98% de ancho y un padding de 1%, más un color rojo de fondo.

input[type="submit"]{
    width: 98%;
    padding: 1%;
    background-color: #FF0000;
    color: #FFF;
}

Nuestra tabla ocupará el 50% de la pantalla, centrada y con un margin inferior y superior de 10 píxeles.

table{
    width: 50%;
    padding: 1%;
    margin: 10px auto;    
}

Los elementos th del encabezado de la tabla serán de color negro de fondo y blanco de texto. Además, el texto irá a la izquierda.

th{
    text-align: left;
    background-color: #333;
    color: #FFF;
}

Por último, los elementos td serán de color blanco y una pequeña sombra de 3 píxeles.

td{
    box-shadow: 0 0 3px #CCC;
    background-color: #FFF;
}

Y este es nuestro resultado hasta el momento

Como podemos ver, nuestro ejemplo ya van tomando forma. Si necesitas probar el código completo, lo puedes descargar en este enlace ¡Nos vemos en la próxima entrega!

Xamus Dyson

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

www.cablenaranja.com

¡Comparte nuestro contenido!