PHP Y MySQLi : BUSQUEDA DE REGISTROS EN UNA BASE DE DATOS.

Saludos amigos, en esta ocasión les traemos el post ” PHP Y MySQLi : BUSQUEDA DE REGISTROS EN UNA BASE DE DATOS ” en donde desarrollaremos un pequeño modulo para buscar registros almacenados en nuestras tablas de base de datos.

Y es que, tan importante como almacenar registros en una base de datos es contar con alguna herramienta que nos ayude a encontrar esta información.

Veamos a continuación los pasos para realizar este pequeño proyecto, el cual obviamente comienza creando una pequeña base de datos.:

  1. Crear una base de datos llamada “pruebas ” y una tabla llamada “productos” para almacenar nuestros registros.
  2. Insertar registros en la tabla productos de la base de datos que ha sido creada.
  3. Crear un archivo de conexión PHP para autorizar el acceso de conexión a las demás paginas.
  4. Diseñar una pagina de búsqueda que tenga además un botón que muestre la tabla completa de registros dentro de un IFRAME.
  5. Crear la pagina que muestra la tabla de resultados de la búsqueda.
  6. Crear la pagina que muestra la tabla completa de los registros.

Pongámonos manos a la obra.

1. Crear una base de datos llamada “pruebas ” y una tabla llamada “productos”

Para crear la base de datos:

CREATE DATABASE dbpruebas;

Ingresar a la base de datos creada;

USE dbpruebas;

Crear la tabla “productos”

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;

2. Insertar registros a la base de datos MySQL creada.

Vamos a insertar algunos registros a nuestra tabla “productos” con el siguiente comando:

INSERT INTO productos
(id,producto,serie,fechaing)
VALUES
('1003','IPHONE4','IPH4167','2021-01-05'),
('1004','IPHONE5','IPH4367','2021-01-06'),
('1005','IPHONE6','IPH4577','2021-01-07'),
('1006','IPHONE7','IPH4557','2021-01-08'),
('1007','IPHONE8','IPH4527','2021-01-09');

3. Crear un archivo de conexión PHP.

Muy bien, ahora vamos a crear un archivo de conexión PHP para que nos otorgue los permisos de conexión a todos los módulos de nuestro sistema.

Este archivo se llamara “conectar.php”.

Recuerda que este archivo debe llevar las credenciales de tu base de datos.

<?php
   define('DB_SERVER', "localhost");
   define('DB_USERNAME', "Tu_usuario");
   define('DB_PASSWORD', 'Tu_Clave');
   define('DB_DATABASE', 'dbpruebas');
   $conn = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

Vamos ahora por el paso 4.

4. Crear la pagina principal para la búsqueda de registros.

Esta pagina es la que mostrara nuestro cajón de búsqueda con un selector de columnas extraídas desde la misma tabla.

El resultado de la

Esta pagina la pondremos bonita formateándola con estilos CSS.

El código completo de esta pagina a la que llamaremos “admin_buscar.php” la tienes a continuación:

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

<!DOCTYPE html>
<html>
  
<head>
      
  <!--======================================= ESTILO DE LA TABLA PLOMO ==============================-->      
	<title>pruebas web buscar</title>
  	<meta charset="UTF-8">
   	<link rel="stylesheet"  type="text/css" 	href="total/css_table/main.css">

<!--=========================== ICONO CASITA EN LA PESTAÑA ========================================-->	
  
	<link rel="icon" 		type="image/png" 	href="total/images/icons/favicon.ico"/>

<!--=============================== LUPA DE BUSQUEDA ==============================================-->
  
	<link rel="stylesheet"  type="text/css" 	href="total/fonts/font-awesome-4.7.0/css/font-awesome.min.css">

<!--======================== ESTE ES EL ESTILO PARA LOS BOTONES =============-->	      

  
    <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;
    	}
      
        .select
        {
  		padding: 10px;
  		font-size: 17px;
  		border: 1px solid grey;
  		float: left;
  		width: 80%;
  		background: #f1f1f1;
        }
   
    </style>
          
  
  
	</head>
<!--======================== ESTE ES EL ESTILO PARA LOS BOTONES =============-->      
	<body> 
  
 	  <div class="limiter">
	  <div class="container-table100">
	  <div class="wrap-table100"> 
 	  <h1>MODULO DE BUSQUEDA MYSQL: TECNOCIENCIA PERU</h1>
      <br>
        
      <form class="example "target="iframe_box" method="post" action="ver_buscar_pruebas.php"  style= " margin-left: auto; margin-right: auto; width: 300px;" >
         
      <p>ESCOGER CAMPO:
      <div data-replace-content-item="" data-item-type="input" data-can-edit="true" data-can-remove="false" data-can-move="true">
      <select  class="select" name="DATO2" value="" placeholder="Falla de producto" name="SubscriberFirstName" onblur="fitProListBuilder.blur(this)" onfocus="fitProListBuilder.focus(this)" required="" data-required-name="First Name" style="box-shadow: none; width: 100%; margin-bottom: 10px; box-sizing: border-box; font-size: 15px; border: 1px solid rgb(153, 153, 153); color: rgb(0, 0, 0); padding: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"> 
      <?php
      $result = $conn->query("SHOW COLUMNS FROM productos");
      while ($row = $result->fetch_assoc()) {                
      ?>
      <option value= "<?php echo $row['Field']; ?>"> <?php echo $row['Field']; ?></option>
      <?php
      }
      ?>
      </select>
	  </div>

               
      <p>BUSCAR:       
      <div >
      <input type="text" placeholder="Buscar.." name="DATO1">
  	  <button type="submit"><i class="fa fa-search"></i></button>
      </div>
      </form>
          

      <br>
          
         <div id="wrap">
		 <div id="header">
		 <p align="center">
           
         <form class="example" target="iframe_box"  method="post"  action="" style= " margin-left: auto; margin-right: auto; width: 200px;">  
         <button style= " margin: 5px; width: 200px; background-color: #4CAF50 " type="submit" onclick="javascript: form.action='ver_tabla_pruebas.php';">Ver tabla Completa</button>
       
         </form>               
        
         </div>
	     </div>
       
        <div align="center"> <iframe name="iframe_box" id="iframe_box" class="iframe" scrolling="no" frameborder="0" ></iframe> </div>
        <script> 
        var div = document.getElementById("iframe_box"); 
        div.onload = function() 
        { 
          
         div.style.height = div.contentWindow.document.body.scrollHeight + 'px'; 

         div.style.width =  div.contentWindow.document.body.scrollWidth+'px';
        
        } 
    	</script> 
         
	   	</div>
  		</div>
		</div>
</body>
</html>

5. Crear la pagina que mostrara los resultados de la búsqueda.

Esta pagina a la que llamaremos “ver_buscar_pruebas.php” sera una tabla en la cual se mostraran los resultados de nuestra búsqueda.

El código sera este:

<!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 style = "margin-top:0; background-color:powderblue">
        <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

$sql = "SELECT * FROM productos WHERE `{$_POST['DATO2']}` LIKE '%{$_POST['DATO1']}%' ORDER BY fechaing"; 
$result = mysqli_query($conn, $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?EDITAR_ID=<?php echo $crow['id']; ?>" class="edit_btn" >Edita</a></center></td>
</tr>
<?php
  	    	}		
?>

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

El resultado visual sera este: (has clic en la imagen para verla en alta resolución)

Finalmente agregaremos la pagina que mostrara dentro del IFRAME de la pagina principal la tabla completa de los registros.

6. Crear la pagina que muestra la tabla completa de los registros.

Esta tabla es muy similar a la anterior pero en lugar de realizar un select de búsqueda hace un select total a la tabla de base de datos. La llamaremos “ver_tabla_pruebas.php”

Fíjate en el código:

<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 style = "margin-top:0; background-color:powderblue">
        <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

$sql = "SELECT * from productos order by fechaing DESC";
$result = mysqli_query($conn, $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?EDITAR_ID=<?php echo $crow['id']; ?>" class="edit_btn" >Edita</a></center></td>
</tr>
<?php
  	    	}		
?>

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

Este seria el resultado visual al darle clic al botón ver tabla completa de la pagina principal: (has clic en la imagen para verla en alta resolución)

Todo el contenido del sistema:

Nuestro pequeño sistema en esta ocasión estará conformado por 5 elementos:

Recuerda que la carpeta TOTAL es muy importante por que ella contiene gran parte de los contenidos visuales del sistema.

Este es el link para que descargues todo el sistema:

SISTEMA DE BUSQUEDA MYSQL PHP

Eso ha sido todo amigos en este post ” PHP Y MySQLi : BUSQUEDA DE REGISTROS EN UNA BASE DE DATOS ” esperamos que este trabajo en algún momento te sea de utilidad.

Recuerda que una manera de ayudarnos o agradecer nuestro trabajo es visitando los anuncios que aparecen a lo largo del post. Gracias!
Recuerda también que puedes visitar todo el contenido de nuestro blog en :

BLOG DE TECNOCIENCIA.

Tambien puedes visitar nuestro canal de youtube en :

CANAL DE YOUTUBE TECNOCIENCIA

Agregue un comentario

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