Como Buscar Datos en MYSQL desde Formulario HTML y PHP | TUTORIAL 8

Como Buscar datos en mysql desde un formulario php y html con estos pasos....

En el artículo anterior les enseñe a INSERTAR DATOS en una base de datos mysql y continuando con el curso HTML, PHP y MYSQL DESDE CERO, hoy aprenderemos a BUSCAR DATOS en MYSQL desde un formulario PHP.

Primeramente tenemos que agregar el Botón Buscar en el Formulario de la Principal, que se llamaba pagina-principal.html pero lo vamos a renombrar por pagina-principal.php ya que necesitaremos agregar el método $_POST más adelante.

A continuacion el Codigo de pagina-principal.php:

<html>
<head>
<h1>Suscripcion de usuario</h1>
</head>
<body>
<style type="text/css">
h1 {text-align:center; color:white; background-color:9B1313; }
input{background-color:9B1313; color:white;}
</style>
<h1> Datos del Usuario</h1>
<form method="post"/>
<p>Codigo: <input type="int" name="codusu" value="<?php echo $_POST['codusu']?>"/>
<br>
<p>Nombre:<input type="text" name="nomusu" value="<?php echo $_POST['nomusu'];?>"/>
<br>
<p>Contrasena: <input type="password" name="pasusu" value="<?php echo $_POST['pasusu'];?>"/>
<br>
<p> Correo: <input type="varchar" name="correousu" value="<?php echo $_POST['correousu'];?>"/>
<br>
<p><input type="submit" value="Guardar Datos" formaction="conectarbasedatos.php"/>
<input type="submit" value="Buscar" formaction="buscar.php">
</body>
</html>

Como pueden observar se realizaron algunos cambios y uno de ellos es que en <form method="post"/> hemos eliminado la acción del formulario para colocar la acción en los botones de la parte inferior, esto lo realizamos ya que necesitas tener 2 botones que redirigen a diferentes páginas php.

Por ejemplo en el botón Guardar Datos tenemos el formaction="conectarbasedatos.php" y en el botón Buscar tenemos el formaction="buscar.php".

Además también se puede observar que en los cuadros de texto Input, hemos agregado el valor o value con el método $_POST, este método post recibe las variables buscadas en el formulario buscar.php, pero no se preocupen que ya les explico mas adelante y lo entenderán sin problema. 

Es por eso que tenemos agregado el value="<?php echo $_POST['codusu']?>", En donde hemos abierto <?php para poder recibir variables del otro formulario buscar.php y con echo mostramos la variable recibida con el método $_POST['codusu'].

Una vez entendido el primer formulario pagina-principal.php, ya puedo mostrarles el segundo formulario buscar.php:

<?php
$hostname="localhost";
$username="root";
$password="";
$dbname="usuarios_prueba";
$usertable="suscripcion_usuario";
$codigo= $_POST['codusu'];
// Crear conexion
$conn =mysqli_connect($hostname,$username, $password, $dbname);
// Chequear Conexion
if (!$conn) {
die("Fallo la Conexion con la Base de Datos: " . mysqli_connect_error());
}

//echo "Conectado a la Base de Datos";

$sql = "SELECT * FROM suscripcion_usuario where cod_usu=$codigo" ;

$result = mysqli_query($conn, $sql);

if(mysqli_num_rows($result) > 0)
{
$table = '
<table border=1>
<tr>
<th>CODIGO </th>
<th>NOMBRE</th>
<th>CONTRASEÑA</th>
<th>CORREO</th>
</tr>
';
while($row = mysqli_fetch_array($result))
{
$table .= '
<tr>
<td>'.$row["cod_usu"].'</td>
<td>'.$row["nom_usu"].'</td>
<td>'.$row["pas_usu"].'</td>
<td>'.$row["correo_usu"].'</td>
</tr>
';
$cod_usu= $row["cod_usu"];
$nom_usu=$row["nom_usu"];
$pas_usu=$row['pas_usu'];
$correo_usu=$row["correo_usu"];
}
$table .= '</table>';
echo $table;
}

?>
<html>
<form action="pagina-principal.php" method="post" name="formulario">
<p>Codigo: <input type="l" name="codusu" value="<?php echo $cod_usu;?>" readonly />
<br>
<p>Nombre:<input type="text" name="nomusu" value="<?php echo $nom_usu;?>" readonly />
<br>
<p>Contrasena: <input type="password" name="pasusu" value="<?php echo $pas_usu;?>" readonly />
<br>
<p> Correo: <input type="varchar" name="correousu" value="<?php echo $correo_usu;?>" readonly />
<input type="submit" name="Guardar" value="Enviar Datos">
</form>
</html>

Lo que se puede observar es que tenemos abierto la etiqueta <?php para poder conectarnos a la base de datos, lo que ya habíamos aprendido en el TUTORIAL 6 de este curso.


Además estamos recibiendo el codigo enviado desde la pagina-principal.php con $codigo= $_POST['codusu']; ya que vamos a buscar el usuario por medio del código que identifica a cada usuario.

Echa la conexión con la Base de Datos vamos a realizar la consulta sql que sirve para buscar datos en mysql y nos quedaria asi: $sql = "SELECT * FROM suscripcion_usuario where cod_usu=$codigo" ; 

Estamos diciendo que vamos a buscar dentro de la tabla suscripcion_usuario cuando el código de la base de datos que se llama cod_usu sea igual a la variable $codigo recibida.

Luego realizamos la consulta con mysqli_query y agregando la conexión que es $con y la búsqueda select que está en la variable $sql y tenemos: $result = mysqli_query($conn, $sql);

Echa la consulta preguntamos con un if, si el numero de filas es mayor que 0 entonces quiere decir que si tenemos un resultado y quedaria asi: if(mysqli_num_rows($result) > 0) .

Ahora vamos a dibujar una tabla y agregarla a la variable $table, para mostrar el resultado y empezamos agregando el encabezado de la tabla con <table border=1> abrimos la tabla y algo muy importante que deben saber es que con <tr> se pueden agregar filas a la tabla y con <th> se agregan columnas a la tabla. 

Entonces agregamos una fila <tr> y como tenemos 4 campos en nuestra base de datos, agregaremos 4 columnas <th> como muestro a continuación:

$table = '
<table border=1>
<tr>
<th>CODIGO </th>
<th>NOMBRE</th>
<th>CONTRASEÑA</th>
<th>CORREO</th>
</tr>

Una vez echo el encabezado de la tabla ya podemos rellenar la tabla y para eso agregamos un bucle repetitivo while y un mysqli_fetch_array que devuelve una fila como resultado de una consulta mysql y tenemos:

while($row = mysqli_fetch_array($result))
{
$table .= '
<tr>
<td>'.$row["cod_usu"].'</td>
<td>'.$row["nom_usu"].'</td>
<td>'.$row["pas_usu"].'</td>
<td>'.$row["correo_usu"].'</td>
</tr>

Lo que estamos diciendo con ese código es que mientras la fila consultada tenga un resultado, entonces nos rellene la fila de la tabla con <tr> agregamos la fila y con <td> ponemos el valor a la celda y tenemos: <td>'.$row["nom_usu"].'</td>

Cerramos la tabla y con echo mostramos la tabla y tenemos:
$table .= '</table>';
echo $table;

Hasta ahí ya podremos darle clic al botón Buscar y nos encontrara el resultado y lo mostrará en la tabla que acabamos de crear como muestro en las imagenes:





Ahora si lo que queremos es que no se muestren los resultados en una tabla sino que se muestran en cuadros de texto Input  dentro de un formulario, entonces agregaremos lo siguiente:

<html>
<form action="pagina-principal.php" method="post" name="formulario">
<p>Codigo: <input type="l" name="codusu" value="<?php echo $cod_usu;?>" readonly />
<br>
<p>Nombre:<input type="text" name="nomusu" value="<?php echo $nom_usu;?>" readonly />
<br>
<p>Contrasena: <input type="password" name="pasusu" value="<?php echo $pas_usu;?>" readonly />
<br>
<p> Correo: <input type="varchar" name="correousu" value="<?php echo $correo_usu;?>" readonly />
<input type="submit" name="Guardar" value="Enviar Datos">
</form>
</html>

Estamos agregando el formulario con la acción pagina-principal.php y el método POST para pasar estas variables y en cada cuadro de texto mostramos el resultado con echo y tenemos: value="<?php echo $pas_usu;?>.

Además tenemos el botón Enviar Datos que sirve para dirigirnos a la pagina-principal.php y enviar las variables del formulario, variables que luego servirán para rellenar los campos de la pagina-principal.php.

Cuando le den clic al Botón Enviar Datos, los datos pasarán a la pagina-principal.php, es por esa razón que en cada cuadro texto habíamos agregado el Valor o value que recibimos con el metodo POST y nos quedaria asi: value="<?php echo $_POST['nomusu'];?>".

Recuerden que también pueden copiar directamente el código de las dos páginas que les deje arriba y colocarle el nombre pagina-pincipal.php y buscar.php, además para crear la base de datos denle click aqui.

Ejecuten su servidor apache y la base de datos Mysql y ya pueden probar las páginas que acabamos de codificar y tendremos:
Cuando le den clic a Enviar Datos, regresaras a la pagina principal pero con los datos consultados en mysql, se rellenaran automáticamente los cuadros de texto como en la imagen:

Para Mayor Facilidad Mira el Video Completo a Continuación:

Recuerda que para crear la base de datos tienes que ver el TUTORIAL 5 de este curso y para no perderte debes Leer totos los TUTORIALES que te dejo a continuación:

TUTORIAL 1: Descargar XAMPP Y NOTEPAD

TUTORIAL 2: Listado de Etiquetas HTML, su Función y sus Atributos

TUTORIAL 3: Crear un Formulario de Registro con Etiquetas Input Type en HTML y CSS

TUTORIAL 4 : Pasar Variables de un Formulario Html a otro PHP con el metodo $_POST

TUTORIAL 5: Crear Base de Datos en Mysql

TUTORIAL 6: Conectar Base de Datos MySQL con PHP XAMPP

TUTORIAL 7: Insertar Datos en Mysql con PHP y HTML






Publicar un comentario