Crear Filtros de Productos en Php y Mysql

Después de un tiempo de no poder subir nada al blog hoy regresamos con algo de desarrollo web, mas concretamente veremos como crear filtros de productos en php y mysql con un ejemplo sencillo y practico paso a paso con código de por medio. Al final de este articulo tendremos a nuestra disposición un sitio web capaz de listar todos los productos de nuestra base de datos mysql (eso si, muy sencilla) y crear filtros para no tener que mostrar los miles de registros en ella, te mostraremos todo lo relacionado a la base de datos mysql, código php de conexión y consulta, así como la creación de estos filtros de la mano de un elementos html como select y option.

Hoy veremos

1 La base de datos
2 Mostrando productos con php
3 Filtrando resultados
4 Crear Filtros de Productos en Php y Mysql

La base de datos

Como en todo en cualquier proyecto de desarrollo hoy en dia necesitamos la base de datos, nosotros hemos creado una base de datos llamada filtros con una tabla llamada productos:

Como puedes ver es una sencilla y rápida base de datos, también notaras que hemos agregado 5 registros para propósitos demostrativos.

Ahora lo que sigue es crear un sitio web para mostrar estos productos contenidos en esta tabla.

Mostrando productos con php

Tenemos un sitio web tambien muy basico donde lo unico que resalta es la conexion a la base de datos y nuestro archivo index.php que es donde haremos todo el trabajo.

Este index es capaz de listar los productos de la tabla productos mediante un archivo de conexion a la base de datos.

index.php

<?php require("connection.php"); ?>

<?php 
$sql = "select * from productos;";
?>

<?php include("templates/header.php"); ?>
<h1>Crear Filtros de Productos en Php y Mysql</h1>
<h3>Listado de Productos</h3>
<div id="filtros">
</div>
<div id="productos">
<?php
$result = mysql_query($sql, $link);
if(!$result )
{
die('Ocurrio un error al obtener los valores de la base de datos: ' . mysql_error());
}
echo "<center><table><th>Id</th><th>Nombre</th><th>Descripcion</th><th>Precio</th><th>Fecha de Registro</th>";

while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "<tr><td>{$row['id']}</td> ".
"<td>{$row['nombre']} </td> ".
"<td>{$row['descripcion']} </td> ".
"<td>{$row['precio']} </td> ".
"<td>{$row['fecha_registro']} </td></tr>";
} 
echo "</table></center>";
mysql_close($link);
?>
</div>
<?php include("templates/footer.php"); ?>

<?php require("connection.php"); ?>

<?php

$sql = "select * from productos;";

<?php include("templates/header.php"); ?>

<h1>Crear Filtros de Productos en Php y Mysql</h1>

<h3>Listado de Productos</h3>

</div>

<?php

$result = mysql_query($sql, $link);

if(!$result )

{

die('Ocurrio un error al obtener los valores de la base de datos: ' . mysql_error());

}

echo "<center><table><th>Id</th><th>Nombre</th><th>Descripcion</th><th>Precio</th><th>Fecha de Registro</th>";

while($row = mysql_fetch_array($result, MYSQL_ASSOC))

{

echo "<tr><td>{$row['id']}</td> ".

"<td>{$row['nombre']} </td> ".

"<td>{$row['descripcion']} </td> ".

"<td>{$row['precio']} </td> ".

"<td>{$row['fecha_registro']} </td></tr>";

}

echo "</table></center>";

mysql_close($link);

</div>

<?php include("templates/footer.php"); ?>

connection.php

<?php
$servername = "localhost";
$username = "******";
$password = "******";

$link = mysql_connect($servername,$username,$password);
mysql_select_db("filtros", $link);
?>

<?php

$servername = "localhost";

$username = "******";

$password = "******";

$link = mysql_connect($servername,$username,$password);

mysql_select_db("filtros", $link);

Listando productos de la base de datos en nuestro sitio web

mas información http://php.net/manual/es/function.mysql-fetch-array.php

Filtrando resultados

Ahora para crear el sistema de filtros primero necesitamos algo de codigo html dentro del div filtros:

<div id="filtros">
Selecciona los filtros deseados para encontrar los productos <form action="index.php" method="post"><select name="filtro"><option value="todos"></option><option value="recientes">Mas Recientes</option><option value="antiguos">Mas Antiguos</option><option value="caros">Mas Caros</option><option value="economicos">Mas Economicos</option></select> <button type="submit">Filtrar</button></form>
</div>

Selecciona los filtros deseados para encontrar los productos <form action="index.php" method="post"><select name="filtro"><option value="todos"></option><option value="recientes">Mas Recientes</option><option value="antiguos">Mas Antiguos</option><option value="caros">Mas Caros</option><option value="economicos">Mas Economicos</option></select> <button type="submit">Filtrar</button></form>

</div>

donde lo mas importante es que establecemos el name del select a filtros y el value de cada option de este.

También debemos notar que hacemos postback a esta misma pagina para enviar los resultados del filtro.

En base a esta selección debemos construir nuestra sentencia sql antes de todo así,

<?php require("connection.php"); ?>

<?php 
if(isset($_POST['filtro'])){
switch($_POST['filtro']){
case "todos":
$sql = "select * from productos;";
break;
case "recientes":
$sql = "select * from productos order by fecha_registro asc;";
break;
case "antiguos":
$sql = "select * from productos order by fecha_registro desc;";
break;
case "caros":
$sql = "select * from productos order by precio desc;";
break;
case "economicos":
$sql = "select * from productos order by precio asc;";
break;
}
}else{
$sql = "select * from productos;";
}
?>

<?php include("templates/header.php"); ?>

<?php require("connection.php"); ?>

<?php

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

switch($_POST['filtro']){

case "todos":

$sql = "select * from productos;";

break;

case "recientes":

$sql = "select * from productos order by fecha_registro asc;";

break;

case "antiguos":

$sql = "select * from productos order by fecha_registro desc;";

break;

case "caros":

$sql = "select * from productos order by precio desc;";

break;

case "economicos":

$sql = "select * from productos order by precio asc;";

break;

}

}else{

$sql = "select * from productos;";

}

<?php include("templates/header.php"); ?>

Ahora los registros que aparezcan en nuestra sección de productos serán los que el usuario a pulido con sus filtros.

Puedes descargar el completo proyecto para crear filtros de productos en php y mysql a continuación..

Descargar proyecto completo

Crear Filtros de Productos en Php y Mysql

11 Comentarios ¿Qué opinas tú del tema?

Andres

Hola, una pregunta como puedo hacer filtras pero que sean dos a la vez, por ejemplo
tenemos dos variables: ‘tipo’ y ‘año’
necesito que en una tabla me aparezca lo que el usuario escribio, por ejemplo
carro y 12/10/2016. Necesito que solo me aparezcan los datos que cumplan esas dos condiciones a la vez. Pero que no sea un select, sino que el usuario pueda escribir manualmente lo que necesita.
Gracias

Responder

Jonathan Melgoza

Hola Andres,
Simplemente la consulta sql tendra dos condiciones por ejemlpo select * from productos where tipo = 0 AND año > 2010; y listo! No entiendo que no debe de ser un select y que el usuario pueda escribir su condicion, puedes explicarme a detalle?
Saludos!

ccessaro

Buenas tardes,! Soy novato y me gusto mucho como se hace un combox con filtro php, pero quiero algo parecido pero que se vea como un menu y haga el filtro de categorias (como un menu) , es una solucion optima para muchas aplicaciones, te agradezco la colaboracion.

Responder
cesar

Buenas tardes !
Excelente script, me sirvio mucho pero no lo entiendo muy bien, yo necesito un filtro ede un campo de la tabla (categoria) me haga un menu con el campo (marca) de la misma tabla, …la verdad no pude hacer los cambios, te agradeceria tu ayuda, muchas gracias.

Responder
Joel

Gracias, muchisimas gracias, funciona y ya estoy desarrollando mi s primeros codigos en PHP con MYSQL, que se esta enlazando con mi base de datos y mi sistema esta en VISUAL BASIC 6.0. y modo para los vendedores en su tablet estan en pruebas en ANDROID.

Responder
vhan

hola!!!
esta increíble tu explicación muy centrada y al punto (lo cual no se por que no le hacen los demas, un saludo gracias 😀

Responder
Camilo

Primero que todo gracias por el código, a funcionado perfecto salvo un pequeño detalle, el primer dato que muestra me aparece al lado… y cada vez que filtro un resultado me aparece el primer dato ahí, te dejo una foto
http://i1126.photobucket.com/albums/l617/Eurogol/Sin%20tiacutetujhgfdlo_zpsddasooge.png
Donde hago el salto de línea?

Responder

Camilo

SOLUCIONADO, me habia comido un
Jonathan Melgoza

Que bien Camilo, suele pasar no te preocupes..
Saludos!

juan

buen tema

Responder

Alejandro Peña Salazar

Juan, hola, tienes el codigo completo relacionado con “Crear Filtros de Productos en Php y Mysql”???
Agradecerè tu apoyo por favor.