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 por tu apoyo!

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 :

Agregue un comentario

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