Tutorial

La idea de este tutorial es poder mostrarte la forma de crear un buscador que pueda filtrar por distintos criterios.

Para poder llevar acabo este tutorial es necesario que dispongas de conocimientos sobre Macromedia Dreamweaver MX, PHP, SQL, MySQL, y tengas configurado un Servidor Web.

Para el mismo se selecciono una base de ejemplo, basada en un sitio real, con tablas de productos marcas y tipos de productos.

Cabe aclarar que se podría hacer todo por código pero considero que para comenzar es bastante útil aprovechar el producto Macromedia Dreamweaver MX y así evitar escribir código innecesariamente.
A continuación veremos los pasos a seguir.

:: Conocimiento de la estructura de la Base de Datos ::
Disponemos de una Base de Datos denominada smr_buscador
Esta Base de datos dispone de tres tablas: marcas, tipos y productos.

La tabla de productos posee las claves a tipos y a marcas por lo cuales mediante SQL realizaremos el enlace de las tres tablas.

:: Creación de la interfase de recolección de datos ::
Debemos crear un archivo que llamaremos buscador.php
Este archivo contendrá un formulario con tres elementos:
1 textfield que denominaremos producto
1 listmenu que llamaremos tipoID
1 listmenu que llamaremos marcaID
1 Botón de Submit

La acción del formulario deberá ser resultados.php (archivo que crearemos mas adelante) y el método será el de POST.

Ambos listmenu se alimentarán de los contenidos de las tablas respectivas, para lo cual se crearán 2 Recordset (RS) que tomarán la información de las tablas deseadas.

Para poder crear los mismos aprovecharemos el producto Macromedia Dreamweaver MX para generar la conexión a nuestra Base de Datos y el armado de los RS.

Antes de crear los RS debemos crear un sitio en Macromedia Dreamweaver MX que apunte a la carpeta elegida (ej: c:tutorialesbuscador)

Recordá que para crear una conexión debemos tener un archivo abierto, por lo cual aprovechamos el que hemos creado para contener el formulario. Nos dirigimos al Grupo de Paneles Application y desde allí seleccionamos el Panel Databases. Desde este panel debemos pulsar el símbolo + y seleccionar MySql Connection.

Introducimos todos los parámetros acorde a nuestra configuración.
Ej:
Connection Name: cnx
MySQL Server: localhost
User Name: root
Password: root
Database: smr_buscador

Al aceptar la configuración dispondremos de una Conexión en nuestro panel Databases.

Para crear el RS de marcas procedemos de la siguiente forma:
Expandimos la conexión (símbolo + situado a la izq. del nombre de la conexión)
Expandimos Tables
Arrastramos la tabla Marcas sobre el área de diseño y le asignamos un nombre (ej: rsMarcas) y pulsamos el botón OK.

Para crear el RS de tipos procedemos de la siguiente forma:
Seleccionamos el Panel Databases
Expandimos la conexión (símbolo + situado a la izq. del nombre de la conexión)
Expandimos Tables
Arrastramos la tabla Tipos sobre el área de diseño y le asignamos un nombre (ej: rsTipos) y pulsamos el botón OK.

En este momento disponemos de 2 RS que poblarán nuestros ListMenu.

Para poblar los ListMenu deberemos seleccionar cada uno de ellos y asignarles que se pueblen desde el RS correspondiente.

Para el caso del RS de Marcas seleccionamos el listmenu denominado marcaID. En el inspector de propiedades pulsamos sobre el botón Dynamic.

En Option From Recordset seleccionamos el RS de marcas. En Values seleccionamos marcaID y en Labels marca.
Como Select Value Equal to ingresamos el valor de 0.

Ahora agregaremos en la parte superior un dato con Value 0 para todas las marcas.
Pulsamos en Static Options el + y editamos Value=0 y Label=Todas las Marcas. Pulsamos el botón de Ok.

Repetimos el paso anterior para poblar el listmenu tipoID utilizando tipoID para Values From RS y tipo como Labels. Recordemos poner el valor Equal to en 0 y agregar el ítem en la parte superior para todos los tipos con value en 0.

Ahora podemos previsualizar el archivo y verificar que los listmenu estén poblados.

:: Creación de la página que mostrará los resultados que cumplan con los criterios seleccionados ::

Creamos un archivo llamado resultados.php
Desde el panel de Databases arrastramos la tabla productos sobre el área de diseño. Al abrirse la interfase de armado de RS le ingresamos un nombre a gusto (ej: rsResultados)
Elegimos Columns: Selected y marcamos productoID + producto + copete, luego en la opción Filter elegimos:

producto Contains
Form Variable producto

Este paso lo realizamos para poder comprender mejor el código.
Ahora pulsamos el botón Ok.
Aprovechando Macromedia Dreamweaver MX genére una Tabla Dinamica que visualice los datos del RS.
Para generarla debemos ir a la Insert Bar -> Application -> Dynamic Table
Elegimos el RS creado, All Records y pulsamos Ok.

Hasta aquí hemos creado un buscador simple que sólo busca por un criterio, el campo producto. Probémoslo ejecutando el archivo buscador.php e ingresando algo en el campo para producto.

Ahora procederemos a modificar el código para que podamos buscar por los demás criterios pero respetando si se selecciona también la opción de todas las marcas o todos los tipos.

Editamos el código fuente del archivo resultados.php (podemos utilizar el mismo Macromedia Dreamweaver MX o el bloc de notas o cualquier otro editor de texto)

Ubicamos la línea que contiene $query_rsResultados= (normalmente sería la línea 8)
Esta línea es la que contiene el string SQL a ejecutar. Visualicémosla un instante para familiarizarnos. Prestemos atención a la sentencia LIKE.

Bueno primero hemos de modificar el string SQL para que vincule las tres tablas y así poder potenciar la búsqueda permitiendo que se busque en los campos de nombre de marca y tipo.

Para ello rescribiremos la string para que quede de esta forma.

$query_rsResultados = sprintf(“SELECT p.productoID, p.producto, p.copete, m.marca, t.tipo FROM productos p inner join marcas m on p.marcaID=m.marcaID inner join tipos t on p.tipoID=t.tipoID WHERE p.producto LIKE ‘%%%s%%’ or m.marca LIKE ‘%%%s%%’ or t.tipo LIKE ‘%%%s%%'”, $colname_rsResultados, $colname_rsResultados, $colname_rsResultados);

Hasta este momento el buscador realiza su búsqueda evaluando si lo ingresado en producto se encuentra en el campo producto de nuestra tabla o en los campos marca o tipo.

Ahora lo modificaremos para que permita tomar los otros criterios.

En la línea 8 tenemos el código del string SQL que ingresamos anteriormente. Borrémoslo, y en ese lugar insertemos el código que figura a continuación:

/* Codigo de Buscador */
$smrTipo=0;
$smrMarca=0;
if ( isset( $_POST[‘marcaID’]) ) {
$smrMarca=$_POST[‘marcaID’];
}
if ( isset( $_POST[‘tipoID’]) ) {
$smrTipo=$_POST[‘tipoID’];
}
$criterios=””;
if ( $smrTipo!=0) {
$criterios .= ” and t.tipoID=”.$smrTipo.” “;
}
if ( $smrMarca!=0) {
$criterios .= ” and m.marcaID=”.$smrMarca.” “;
}

$query_rsResultados = sprintf(“SELECT p.productoID, p.producto, p.copete, m.marca, t.tipo FROM productos p inner join marcas m on p.marcaID=m.marcaID inner join tipos t on p.tipoID=t.tipoID WHERE ( p.producto LIKE ‘%%%s%%’ or m.marca LIKE ‘%%%s%%’ or t.tipo LIKE ‘%%%s%%’ ) “.$criterios, $colname_rsResultados, $colname_rsResultados, $colname_rsResultados);

/* Fin del codigo de Buscador */

En este código cotejamos que nos viene en las variables de formulario marcaID y tipoID para ello hacemos uso de un poco de código de php, el cual ustedes verán optimizado en el código final a fin de evitar que dichos parámetros no lleguen al script.

Ahora podemos probarlo!

Tengamos en cuenta que ahora es un buen momento para maquillar como se desee la página de resultados, agregando cantidad de registros encontrados, link a una página de detalle, o bien la de buscador.

Espero les haya servido y espero sus comentarios al respecto.

Anexo: ASP
Creación de la Conexión
Una vez que dispongamos de una Base de Datos Access (.mdb) con la estructura dada para este ejemplo, deberemos crear un DSN de Sistema (mediante Data Source ODBC, del panel de control) que apunte contra dicho archivo (para este ejemplo usaremos dsnBuscador).

Connection Name: cnx
Data Source Name (DSN): dsnBuscador
Pulse Ok.

:: String SQL 1 ::

En ASP esto esta normalmente en la línea 16 y se ve de la siguiente forma:

rsResultados.Source = “SELECT * FROM productos WHERE producto LIKE ‘%” + Replace(rsResultados__MMColParam, “‘”, “””) + “%'”

Deberemos reemplazarlo por el siguiente:
rsResultados.Source = “SELECT p.productoID, p.producto, p.copete, m.marca, t.tipo FROM productos p inner join marcas m on p.marcaID=m.marcaID inner join tipos t on p.tipoID=t.tipoID WHERE p.producto LIKE ‘%” + Replace(rsResultados__MMColParam, “‘”, “””) + “%’ or m.marca LIKE ‘%”+Replace(rsResultados__MMColParam, “‘”, “””)+”%’ or t.tipo LIKE ‘%”+Replace(rsResultados__MMColParam, “‘”, “””)+”%'”

:: Código para string SQL Final ::

‘ Codigo de Buscador
smrTipo=0
smrMarca=0

If (Request.QueryString(“marcaID”) <> “”) Then
smrMarca=Request.QueryString(“marcaID”)
End If
If (Request.QueryString(“tipoID”) <> “”) Then
smrTipo=Request.QueryString(“tipoID”)
End If

criterios=””

if smrTipo<>0 then
criterios = criterios & ” and tipos.tipoID=” & smrTipo & ” “
end if
if smrMarca<>0 then
criterios = criterios & ” and marcas.marcaID=” & smrMarca & ” “
end if

rsResultados.Source = “SELECT productos.producto, productos.productoID, productos.copete, marcas.marca, tipos.tipo FROM ( productos INNER JOIN tipos ON productos.tipoID = tipos.tipoID ) INNER JOIN marcas ON productos.marcaID = marcas.marcaID WHERE ( productos.producto LIKE ‘%” + Replace(rsResultados__MMColParam, “‘”, “””) + “%’ or marcas.marca LIKE ‘%”+Replace(rsResultados__MMColParam, “‘”, “””)+”%’ or tipos.tipo LIKE ‘%”+Replace(rsResultados__MMColParam, “‘”, “””)+”%’ ) ” + criterios

‘ Fin del codigo de Buscador

25 diciembre, 2014
dreamweaver

Buscador multicriterio en DreamWeaver

La idea de este tutorial es poder mostrarte la forma de crear un buscador que pueda filtrar por distintos criterios. Para poder llevar acabo este tutorial […]
25 diciembre, 2014
dreamweaver

MySQL 4.1 y DreamWeaver

A la hora de tener instalado el MySQL 4.1 y utilizar Macromedia Dreamweaver en entornos Windows te saltara un erro de la validacion del user y […]
25 diciembre, 2014
dreamweaver

Material necesario para realizar Aplicaciones Web

Que se necesita para comenzar a desarrollar aplicaciones web en un ordenador con Windows XP pro. Macromedia Dreamweaver 8 (version actual) —————————————– http://www.macromedia.com/go/trydreamweaver Con esta herramienta […]
25 diciembre, 2014
dreamweaver

Sincronizar archivos en DreamWeaver

Mediante este comando Dreamweaver comprueba, tanto en el sitio local como en el remoto, las correspondencias entre archivos y los actualiza a la versión que deseemos. […]
25 diciembre, 2014
dreamweaver

Ordenar el texto en listas

En muchas ocasiones es interesante ordenar el texto en una lista. En la Barra superior pulsamos sobre Texto tal como se muestra en la siguiente imagen. […]
25 diciembre, 2014
dreamweaver

La composición de páginas usando tablas con DreamWeaver

Los elementos de las páginas se suelen colocar empleando tablas. Si observa las Webs importantes notará que los elementos de las páginas están ordenados dentro de […]
25 diciembre, 2014
dreamweaver

Estructura de la Web en DreamWeaver

El programa Dreamweaver dispone de un sencillo y práctico sistema para gestionar las Webs. Para gestionar un sitio lo abrimos pulsando sobre Sitio en la Barra […]
25 diciembre, 2014
dreamweaver

Doble vista de código en DreamWeaver

Como hemos comentado en la introdución, Dreamweaver no posee por defecto la posibilidad de 2 vistas de código partidas dentro de un mismo documento. Sin embargo, […]
25 diciembre, 2014
dreamweaver

De FONT a SPAN con Buscar y Reemplazar

En los sitio desarrollados hace tiempo era habitual el uso de etiquetas <font> para aplicar formato al texto. Sin embargo, el uso cada vez más extendido […]
25 diciembre, 2014
dreamweaver

Crear comportamientos de servidor en DreamWeaver

Una de las nuevas características que aparecieron a partir de la versión 4 de Ultradev es la posibilidad de crear nuestros propios comportamientos de servidor de […]
25 diciembre, 2014
dreamweaver

Cambio de tamaño de la ventana activa

A veces es necesario ajustar el tamaño de la ventana del explorador para controlar el diseño o mantener una película Flash en un tamaño específico. Aquí […]
25 diciembre, 2014
dreamweaver

Detectar el navegador en DreamWeaver

La mayoría de los navegantes usan el Explorer, pero desde otros navegadores las cosas suelen verse diferente. Aquí un tutorial para detectar el tipo de navegador […]
25 diciembre, 2014
dreamweaver

Alojamiento compartido

El alojamiento web compartido consiste en un servidor que se utiliza para múltiples clientes, una misma máquina aloja multiples dominios. Tiene como principales ventajas: Resulta más […]
25 diciembre, 2014
dreamweaver

Un proyecto en Internet

Un proyecto de Internet es una obra de ingeniería informática que responde a un plan estratégico específico. Todo proyecto de Internet debe tener por tanto una […]
25 diciembre, 2014
dreamweaver

Forzar al navegador a no mostrar las barras de scroll

Digamos que quieres crear una pagina sin scroll, no necesariamente tiene que ser un popup ya que este articulo tratara de mostrarte como crear una ventana […]
25 diciembre, 2014
dreamweaver

Acerca del color en DreamWeaver

Tutorial de nuestro programador Alfredo publicado originalmente en http://www.adrformacion.com/cursos/dream/leccion2/tutorial4.html Se puede definir el color para varios elementos de la página, entre los que se incluyen: Texto. […]
25 diciembre, 2014
dreamweaver

Comparativa entre DreamWeaver MX 2004 y Frontpage 2003

Microsoft Front Page 2003 Se tiene la costumbre de identificar a Front Page como un producto fácil de usar, con pocas prestaciones, y con groseras fallas, […]
25 diciembre, 2014
dreamweaver

Paleta de Colores Web

La ‘paleta Web’ es un conjunto de 216 colores que cada administrador de web debe conocer y utilizar para que los visitantes puedan ver las páginas […]
25 diciembre, 2014
dreamweaver

Ventana PopUp con DreamWeaver

Abrir un Pop-Up utilizando DreamWeaver es una tarea muy sencilla. Un PopUp es una nueva ventana que aparece aparte de nuestra web con la peculiaridad de […]
25 diciembre, 2014
dreamweaver

Comprobar Ortografía en DreamWeaver

En DreamWeaver es normal que se redacten textos para los contenidos de una página web y como es normal, se suelen cometer errores de ortografía que […]
25 diciembre, 2014
dreamweaver

Novedades de DreamWeaver 8

En este punto comentaremos las características que aporta esta nueva versión sobre la anterior, Dreamweaver MX 2004. Integración de RSS: con Dreamweaver 8 podrás integrar entradas […]
25 diciembre, 2014
dreamweaver

Includes PHP en DreamWeaver

En una página web hay porciones que siempre se repiten, sobre todo la cabecera y el pie. El problema llega cuando ya tenemos nuestra página hecha, […]