PHP y MySQLi Formulario Consulta y registro en una base de datos MySQL.

Como están amigos, en este articulo compartiré con ustedes el post PHP y MySQLi Consulta y registro en una base de datos MySQL.

Este sistema lo podrás adaptar a tus necesidades simplemente modificando algunos parámetros del código principal o utilizarlo tal como aquí lo presentamos ya que es 100% funcional.

Características del sistema de consulta y registro en una base de datos MySQL con PHP y MySQLi

Este sistema básico de consulta y registro tendrá las siguientes características:

  • Se creara una base de datos MySQL llamada dbpruebas y dentro de ella una tabla de nombre productos para agregar y consultar su contenido mediante una interface PHP.
  • La pantalla principal web del sistema contendrá dos botones, el primero de ellos nos llevara a una consulta completa de la tabla productos y el segundo botón nos llevara a un formulario mediante el cual podremos registrar datos a esta misma tabla.
  • El mecanismo de registro se realizara mediante un formulario PHP formateado con CSS y permitirá el ingreso de datos a la tabla pruebas evitando la inyección de instrucciones maliciosas.
  • El contenido total de la tabla productos se mostrara en una tabla formateada con CSS para una mejor presentación visual.
  • Ambas paginas tanto la que muestra la tabla como la que permite el registro de datos se abrirán en pestañas distintas a la de la pagina principal.

Paso 1 : Creación de la base de datos y de la tabla productos.

El primer paso sera crear la base de datos y la tabla para ello ingresamos a nuestro sistema desde un terminal o lo puedes hacer desde webmin si deseas.

ingresando a MySQL

mysql -u tu_usuario_de_base_de_datos -p

creando la base de datos dbpruebas

CREATE DATABASE dbpruebas;

dentro de la base de datos dbpruebas crear la tabla productos.

USE dbpruebas;
CREATE TABLE IF NOT EXISTS productos ( id int(11) NOT NULL, 
producto varchar(25) NOT NULL, 
serie varchar(20) NOT NULL, 
fechaing date NOT NULL, 
PRIMARY KEY (id) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Si observas la tabla creada desde webmin debería tener el siguiente aspecto:

Paso 2: Crear el archivo PHP para conectarse a la base de datos.

Se creara el archivo conectar.php que contendrá las credenciales del usuario y contraseña que permitirán el acceso y la conexión a la base de datos. Revisa el contenido y reemplaza los datos que correspondan a tus credenciales.

Contenido del archivo conectar.php:

<?php
   define('DB_SERVER', "localhost");
   define('DB_USERNAME', "tu_usuario_de_base_de_datos");
   define('DB_PASSWORD', 'tu_contraseña');
   define('DB_DATABASE', 'dbpruebas');
   $con=mysqli_connect('localhost','tu_usuario_de_base_de_datos','tu_contraseña','dbpruebas');
?>

Paso 3: Crear la pagina WEB principal del sistema

Como ya mencionamos la web principal contendrá 2 botones que nos permitirán consultar el contenido de la tabla y el registro de datos.

Esta pagina principal se llamara admin_pruebas.php

La pagina PHP que mostrara el contenido de la tabla se llamara ver_tabla_pruebas.php .

La pagina PHP mostrara el formulario para el ingreso de datos se llamara formulario_producto.php.

Contenido de la pagina admin_pruebas.php

<!DOCTYPE html>
<html>
<head>
      
<!--======================================= ESTILO DE LA TABLA PLOMO ==============================-->      
	<title>SERTEC PRUEBAS</title>
  	<meta charset="UTF-8">
	<link rel="icon" 		type="image/png" 	href="total/images/icons/favicon.ico"/>
	<link rel="stylesheet"  type="text/css" 	href="total/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet"  type="text/css" 	href="total/css_table/main.css">

      
<!--======================== ESTE ES EL ESTILO PARA LOS BOTONES Y EL CAJON DE BUSQUEDA=============-->	      
    <style>
		body {
		font-family: Arial;
			 }

		* {
  		box-sizing: border-box;
		}
		form.example input[type=text] {
  		padding: 10px;
  		font-size: 17px;
  		border: 1px solid grey;
  		float: left;
  		width: 80%;
  		background: #f1f1f1;
		}
		form.example button {
  		float: left;
  		width: 20%;
  		padding: 10px;
  		background: #2196F3;
  		color: white;
  		font-size: 17px;
  		border: 1px solid grey;
  		border-left: none;
  		cursor: pointer;
		}
		form.example button:hover {
  		background: #0b7dda;
		}
        form.example::after {
  		content: "";
  		clear: both;
  		display: table;
		}
  		h1 {text-align: center;}
  		h2 {text-align: center;}
  		p {text-align: center;}
        iframe{
        width: 100%;
        border: 2px solid #ccc;
    	}
   
    </style>
	</head>
<!--======================== ESTE ES EL ESTILO PARA LOS BOTONES Y EL CAJON DE BUSQUEDA=============-->      
	<body> 
  
 		<div class="limiter">
		<div class="container-table100">
		<div class="wrap-table100"> 
 		<h1>BASE DE DATOS DE PRUEBAS: TECNOCIENCIA PERU</h1>
        <br>

         <div id="wrap">
		 <div id="header">
		 <p align="center">
   
         <form class="example" target="_blank"  method="post"  action="ver_tabla_pruebas.php" style= " margin-left: auto; margin-right: auto; width: 425px;">
		 <input id="TABLA" name="TABLA" type="hidden" value="productos">
          <button style= " margin: 5px; width: 200px; background-color: #4CAF50 " type="submit" onclick="javascript: form.action='ver_tabla_pruebas.php';">Ver tabla completa</button>
         <button style= " margin: 5px; width: 200px; background-color: #4CAF50 " type="submit" onclick="javascript: form.action='formulario_producto.php';">Registrar Producto</button>
  
        </form>               
        </div>
		</div>
	   	</div>
  		</div>
		</div>
</body>
</html>

Ten en cuenta que esta pagina admin_pruebas.php hace referencia a la carpeta de nombre “total” que contiene los estilos CSS que permiten el formateo de los formularios y de la tabla. Es muy importante que copies toda esta carpeta en la misma raíz donde se ubica tu pagina.

Una vez que cargues esta pagina tendrá este aspecto:

Consulta y registro a una base de datos MySQL con PHP

Paso 4: Creación de la pagina que muestra el contenido de la tabla productos.

El botón de nombre : “Ver tabla completa” envía mediante el método POST la variable TABLA cuyo valor es “productos”. Esta variable es enviada y recogida por la pagina ver_tabla_pruebas.php y mediante estos datos se hace una consulta completa a la tabla productos y la respuesta a esta consulta se muestra en una tabla con formato CSS.

Pagina ver_tabla_pruebas.php

<!DOCTYPE html>
<html>
   
	<head>
	<link rel="stylesheet" type="text/css" href="total/css_table/main.css">
    <style>
	.content {
  	max-width: auto;
  	margin: auto;
			 }
	</style>
           
	</head>   
<center>
		<body>
        <div class="content"> 
		<div class="container">
        <div class='wrap-table100'>  
        <div class='table100 ver1 m-b-110'>    
        <table data-vertable='ver1'>
          					<br>
              				<h2>TABLA DE PRODUCTOS</h2>
          					<br>
                        	<thead>
							<tr class='row100 head'>
							<th align="center" style='width:50px'>ID</th> 
							<th class='column100 column2' data-column='column2'><center>PRODUCTO</center></th>
							<th class='column100 column3' data-column='column3'><center>SERIE</center></th>
							<th class='column100 column4' data-column='column4'><center>FECHA INGRESO</center></th>
                            <th class='column100 column4' data-column='column4'><center>EDIT</center></th>
           					</tr>
							</thead>   
              <tbody>
				

<?php
require('conectar.php');
?>
						                      


<?php
$tabla = $_POST['TABLA'];
$sql = "SELECT * from `".$tabla."` order by fechaing DESC";
$result = mysqli_query($con, $sql);
while($crow = mysqli_fetch_assoc($result))
            			{	
?>
<tr class='row100'>
<td style='width:10px'><center> <?php echo $crow['id'];?> </center></td>
<td> <center><?php echo $crow['producto']; ?>  </center> </td>
<td> <center><?php echo $crow['serie']; ?></center></td>
<td> <center><?php echo $crow['fechaing']; ?></center></td>
<td><center><a href="editar_registro.php?EDITAME=<?php echo $crow['id']; ?>" class="edit_btn" >Edita</a></center></td>
</tr>
<?php
  	    	}		
?>

          	</tbody>
	    	</table>             
        	    
	</div>
	</div>
	<div>
	</div>
	</div>
	</div>
	</body>
  	</center>
	</html>

Al ser invocada esta tabla tendra este aspecto:

Consulta y registro a una base de datos MySQL con PHP

Paso 5: Creación del formulario para el ingreso de datos a la tabla “productos”

Vamos a crear un documento PHP del tipo formulario de nombre formulario_producto.php mediante el cual podremos registrar nuevos datos dentro de nuestra tabla productos.

Este formulario validara la información ingresada y la procesara para su posterior registro en la tabla de base de datos por medio de otro archivo de nombre registrar_producto.php el cual recibirá todas las variables ingresadas en el formulario.

Contenido de formulario_registro.php

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FORMULARIO DE PRODUCTOS</title>
<!--======================================= ESTILO DE LA TABLA PLOMO ==============================-->        
<link rel="stylesheet" type="text/css" href="total/ccs_form/view.css" media="all">

<script type="text/javascript" src="total/js_calendar/calendar.js"></script>
</head>

<body id="main_body" >
	
	<img id="top" src="top.png" alt="">
	<div id="form_container">
	
		<h1><a>FORMULARIO DE PRODUCTOS</a></h1>
		<form id="form_18653" class="appnitro"  method="post" action="registrar_producto.php">
					<div class="form_description">
                      <h2>FORMULARIO PARA REGISTRO DE PRODUCTOS</h2>
			<p>Base de datos DBPRUEBAS</p>
		</div>						
			<ul >
			
					<li id="li_1" >
		<label class="description" for="element_1">CODIGO ID : </label>
		<div>
			<input id="element_1" name="element_1" class="element text small" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_2" >
		<label class="description" for="element_2">NOMBRE DEL PRODUCTO : </label>
		<div>
			<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_3" >
		<label class="description" for="element_3">NUMERO DE SERIE : </label>
		<div>
			<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_4" >
		<label class="description" for="element_4">FECHA DE INGRESO : </label>
		<span>
			<input id="element_4_1" name="element_4_1" class="element text" size="2" maxlength="2" value="" type="text"> /
			<label for="element_4_1">MM</label>
		</span>
		<span>
			<input id="element_4_2" name="element_4_2" class="element text" size="2" maxlength="2" value="" type="text"> /
			<label for="element_4_2">DD</label>
		</span>
		<span>
	 		<input id="element_4_3" name="element_4_3" class="element text" size="4" maxlength="4" value="" type="text">
			<label for="element_4_3">YYYY</label>
		</span>
	
		<span id="calendar_4">
			<img id="cal_img_4" class="datepicker" src="total/js_calendar/calendar.gif" alt="Pick a date.">	
		</span>
		<script type="text/javascript">
			Calendar.setup({
			inputField	 : "element_4_3",
			baseField    : "element_4",
			displayArea  : "calendar_4",
			button		 : "cal_img_4",
			ifFormat	 : "%B %e, %Y",
			onSelect	 : selectDate
			});
		</script>
		 
		</li>
			
					<li class="buttons">
			    <input type="hidden" name="form_id" value="18653" />
			    
				<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
		</li>
			</ul>
		</form>	
		
	</div>
	</body>
</html>

El aspecto de nuestro formulario sera como este:

Consulta y registro a una base de datos MySQL con PHP

Ten muy en cuenta que este formulario también hace referencia a la carpeta de nombre “total”, que como ya hemos dicho contiene los estylos para la correcta visualización del formulario y en este caso también del calendario que es un script JAVA.

Ahora veamos el contenido del archivo registrar_producto.php

<?php
//include connection
include("conectar.php");

if(isset($_POST['submit']))
{

$id = $_POST['element_1'];
$producto = $_POST['element_2'];
$serie = $_POST['element_3'];
$fechaing = $_POST['element_4_3']."-".$_POST['element_4_1']."-".$_POST['element_4_2'];
  
$stmt = $con->prepare("INSERT INTO productos ( id, producto, serie, fechaing ) VALUES (?, ?, ?, ?)");
$stmt->bind_param('isss', $id, $producto, $serie, $fechaing );
$stmt->execute();
} 

if ($stmt->error)
	{
echo '<script type="text/javascript">'; 
echo 'alert("ERROR REVISAR SI FALTA ALGUN DATO");'; 
echo 'window.location = "formulario_producto.php";';
echo '</script>';
    }
    else
    {
echo '<script type="text/javascript">'; 
echo 'alert("REGISTRO DE DATOS CORRECTO OK MKS");'; 
echo 'window.location = "formulario_producto.php";';
echo '</script>';
    }
$stmt->close();
?>  

Cuando el registro de datos en la tabla sea exitoso se mostrara en el navegador un mensaje como este:

Por el contrario si hubo algún error con el ingreso de datos a la tabla se mostrara el siguiente mensaje:

Resumen de los elementos del sistema PHP

En resumen nuestro pequeño sistema que nos permite interactuar con nuestra base de datos consta de los siguientes elementos:

Consulta y registro a una base de datos MySQL con PHP

Descripción de los elementos del sistema:

  1. La carpeta “Total“: Contiene los estilos CSS para formatear todos los archivos PHP y además contiene los scripts JAVA para el calendario del formulario.
  2. El archivo “admin_pruebas.php” : Es la pagina de presentación del sistema, contiene 2 botones, uno llama a la tabla y el otro al formulario para el registro de productos.
  3. El archivo “conectar.php” : Contiene las credenciales para establecer conexión con la base de datos MySQL. Recuerda cambiar estos datos con los tuyos.
  4. Archivo “formulario_producto.php” : Es el formulario en donde se llena la información que se desea ingresar a la tabla de la base de datos.
  5. Archivo “registrar_producto.php” : Este archivo recibe los datos del “formulario_producto.php” los valida y genera la sentencia INSERT INTO para llevar los datos finalmente dentro de la tabla.
  6. El archivo “ver_tabla_pruebas.php” : es el archivo que se conecta a la base de datos y le consulta por todos los datos registrados mediante un SELECT *, luego los muestra en una tabla formateada con CSS.

Enlace para descargar los archivos:

Link para descargar todos los elementos del sistema:

LINK DESCARGA SISTEMA PHP MySQL

Bueno estimado lector llegamos al fin de este post “Consulta y registro a una base de datos MySQL con PHP” estimados lectores.

Recuerda que una manera de ayudarnos a mantener este contenido en linea y actualizado es visitando los anuncios que aparecen a lo largo del post. Gracias !

Recuerda tambien que puedes visitar todo el contenido de nuestro blog en :

BLOG DE TECNOCIENCIA.

https://www.tecnocienciaperu.com/blog/

https://www.youtube.com/c/MarcosAguilar_mks/videos?view_as=subscriber

También puedes visitar nuestro canal de YouTube en :

2 Replies to “PHP y MySQLi Formulario Consulta y registro en una base de datos MySQL.

  1. Saludos amigo, estoy creando una página a base de wordpress y requiero crear un buscador de registros, que al momento de ingresar el ID me muestre información como apellido, nombre y Cédula (ID), esto de tal manera que solo muestre información al momento de ingresar el ID correspondiente.

    Agradezco cualquier ayuda acerca del tema. Gracias.

    1. Hola Fabian pues lo que necesitas primero es crear un formulario de búsqueda que envíe el ID hacia alguna otra pagina que procese ese dato.
      El formulario de búsqueda puede ser algo como esto:
      ///////////////////////////FORMULARO DE BUSQUEDA //////////////////
      formx method=”post” action=”pagina_que_procesara_el_ID.php”
      input type=”text” placeholder=”COLOCAR ID..” name=”ID_BUSCAR”
      buttonx type=”submitx”>buscar> button
      formx_
      /////////////////////////////////////////////////////////////////////

      luego la pagina que recibe el dato “ID_BUSCAR” hace la consulta a tu base de datos y si encuentra informacion crea una tablota y te muestra los resultados, algo como esto:

      //////////////////////////////////////////////////////////////////////

      sql = “SELECT * FROM TU_TABLA WHERE `{$_POST[‘ID_BUSCAR’]}` ORDER BY fecha”;

      result = $con->query($sql);

      if ($row = mysqli_fetch_array($result)){

      echo “

      \n”;

      while ($field = mysqli_fetch_field($result)){

      echo “

      \n”;

      }

      echo “ \n”;

      do {

      echo “

      \n”;

      echo “

      \n”;
      echo “

      \n”;
      echo “

      \n”;
      echo “

      \n”;
      echo “

      \n”;

      Espero que te sirva de alguna ayuda estas ideas, pronto crearemos un Post completo acerca de este tema.

      Suerte.

      $field->name
      “.$row[“ID”].”“.$row[“APELLIDO”].”“.$row[“NOMBRE”].”“.$row[“CEDULA”].”

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *