Menu desplegable con registros de una BD

KingColt · #1 (**permalink**) 20/03/2008, 13:07

Como crear un menu desplegable con registros de una base de datos mysql
es decir mis tabla serian

Cita:

create table producto
(
codprod int(5)not null auto_increment primary key,
descripcion text not null,
precio numeric(6,2)not null,
codcateg char(02)not null
);

create table categoria
(
codcateg int(02)not null auto_increment primary key,
nomcateg varchar(30)not null
);

Y el resultado debe mostrarse asi al ejecutar el codigo
http://img.tomatone.net/big/N006549.gif
y al hacer click en la categoria mostrar y/o desplegar los productos
http://img.tomatone.net/big/M006548.gif
Es decir crear un menu tipico de oscommerce

korg1988 · #2 (**permalink**) 20/03/2008, 14:22

Código PHP:

  $consultaCategorias = mysql_query("SELECT * FROM categoria;");

while($categorias = mysql_fetch_array($consultaCategorias))
{
    echo $categorias[nomcateg]."<br />";
    
    $consultaProductos = mysql_query("SELECT * FROM producto WHERE codcateg = '{$categorias[codcateg]}';");
    
    while($productos = mysql_fetch_array($consultaProductos))
    {
        echo $productos[nomprod]."<br />";
    }
}

primero realizas la consulta que te da las categorias, entonces depsues por cada categoria realizas una consulta interna que te de los productos se entiendE???----

cualquier cosa volves a consultar,,,, y donde hago echo $productos[nomprod]."<br />";
le puse nomprod para poner algo porque no vi que haya un campo que se llame nombre o algo asi para mostrar el nombre del producto

suerte!!

KingColt · #3 (**permalink**) 20/03/2008, 15:57

Bueno el codigo esta quedo asi utilizando el campo "Descripcion" de la tabla producto.

Código PHP:

 
<html> 
<body> 
<h1>Productos</h1> 
<?php 
$conexion = mysql_connect('localhost','root',''); 
mysql_select_db('MENU'); 
 
$consultaCategorias = mysql_query("SELECT * FROM categoria;"); 
 
while($categorias = mysql_fetch_array($consultaCategorias)) 
{ 
    echo $categorias[nomcateg]."<br />"; 
     
    $consultaProductos = mysql_query("SELECT * FROM producto WHERE codcateg = '{$categorias[codcateg]}';"); 
     
    while($productos = mysql_fetch_array($consultaProductos)) 
    { 
        echo $productos[descripcion]."<br />"; 
    } 
}   
 
mysql_free_result($consultaCategorias); 
mysql_close($conexion); 
?> 
</body> 
</html>

Pero solo me muestra las categorias con texto estatico y no me muestra los productos, es decir para lograr eso tendria que usar la etiquta <a></a> en las categorias, para que al hacer click en una categoria me muestre los productos desplegarse de dicha categoria?

espero te dés un tiempo para ayudarme

saludos

korg1988 · #4 (**permalink**) 20/03/2008, 23:48

bueno justamente esta hecho asi a proposito, pense que ibas a saber resolver el tema de javascript y css necesario para resolver el menu desplegable
voy a plantearte una forma "basica de hacerlo" despues podes intentar algo mas ingenioso por tu parte y si se te plantean dudas me consultas de nuevo

Código PHP:

 
 <html> 
<body> 
<h1>Productos</h1> 
<?php 
$conexion = mysql_connect('localhost','root',''); 
mysql_select_db('MENU'); 

$consultaCategorias = mysql_query("SELECT * FROM categoria;"); 
$menu_numero = 0;
while($categorias = mysql_fetch_array($consultaCategorias)) 
{ 
    echo "<a href=\"#\" onclick=\"document.getElementById('menu_".$menu_numero."').style.display = 'block';\">".$categorias[nomcateg]."</a><br />"; 
     
    $consultaProductos = mysql_query("SELECT * FROM producto WHERE codcateg = '{$categorias[codcateg]}';"); 
    echo "<div id=\"menu_".$menu_numero."\" style=\"display:none;\">";
    while($productos = mysql_fetch_array($consultaProductos)) 
    { 
        echo "<a href=\"#\">".$productos[descripcion]."</a><br />"; 
    } 
    echo "</div><br />";
    $menu_numero++;
}   

mysql_free_result($consultaCategorias); 
mysql_close($conexion); 
?> 
</body> 
</html>

espero que funcione, cualquier cosa si no llegara a funcionar avisame porque lo programe en la misma ventanita donde estoy respondiendo el mensaje y sin probarlo en ningun lado

suerte

KingColt · #5 (**permalink**) 21/03/2008, 11:15

el codigo aun no corre, aunque la idea que planteas es buena, no se donde esta el fallo ademas no pense que fuera asi de simple crear el menu desplegable.
Vere si encuentro el error aunque me confundo un poco al ver \" podria simplificarse usando ' al menos para mi jeje.
Espero revises el codigo a ver donde esta el error

korg1988 · #6 (**permalink**) 21/03/2008, 18:34

Código PHP:

 
<html> 
<body> 
<h1>Productos</h1> 
<?php 
$conexion = mysql_connect('localhost','root',''); 
mysql_select_db('MENU'); 

$consultaCategorias = mysql_query("SELECT * FROM categoria;"); 
$menu_numero = 0;
while($categorias = mysql_fetch_array($consultaCategorias)) 
{ 
    echo '<a href="#" onclick="document.getElementById(\'menu_'.$menu_numero.'\').style.display = \'block\'; return false;">'.$categorias[nomcateg].'</a><br />'; 
     
    $consultaProductos = mysql_query("SELECT * FROM producto WHERE codcateg = '{$categorias[codcateg]}';"); 
    echo '<div id="menu_'.$menu_numero.'" style="display:none;">';
    while($productos = mysql_fetch_array($consultaProductos)) 
    { 
        echo '<a href="#">'.$productos[descripcion].'</a><br />'; 
    } 
    echo '</div><br />';
    $menu_numero++;
}   

mysql_free_result($consultaCategorias); 
mysql_close($conexion); 
?> 
</body> 
</html>

ahi simplifique el asunto de las comillas, el menu funciona 10 puntos, verifica si la consulta a la base de datos te esta devolviendo bien los productos!

suerte! cualquier cosa seguiremos luchando jaj

KingColt · #7 (**permalink**) 21/03/2008, 20:00

Bueno seguia sin funcionar y quite la comilla al select del producto
$consultaProductos = mysql_query("SELECT * FROM producto WHERE codcateg={$categorias[codcateg]};");
Y funciono perfectamente, al hacer click me muestra los productos.

Ahora quiero que al volver a hacer click oculte nuevamente los productos, me parece que esto ya es cuestion de javascript, bueno espero puedas darme la solucion para dar por finalizado el tema

Desde ya muchas gracias me has ayudado un monton colega jaja

korg1988 · #8 (**permalink**) 21/03/2008, 22:54

bueno para mostrar y ocultar la capa con el mismo link habria que crear una funcion que compruebe si ya esta oculto entonces que lo muestre y si esta visible que lo oculte
ahi abajo te deje la funcion javascript ya insertada y bueno le hice los cambios en el codigo para que todo funcione directamente.... analiza el codigo y fijate si lo entendes

cualquier duda ya sabes donde consultar jajaj

suerte!

Código PHP:

 
<html>
<head>
<script>
function desplegar(id_div)
{
    var capa = document.getElementById(id_div);
    
    if(capa.style.display == 'none')
    {
        capa.style.display = 'block';
    }
    else
    {
        capa.style.display = 'none';
    }
}
</script>
</head>
<body> 
<h1>Productos</h1> 
<?php 
$conexion = mysql_connect('localhost','root',''); 
mysql_select_db('MENU'); 

$consultaCategorias = mysql_query("SELECT * FROM categoria;"); 
$menu_numero = 0;
while($categorias = mysql_fetch_array($consultaCategorias)) 
{ 
    echo '<a href="#" onclick="desplegar(\'menu_'.$menu_numero.'\'); return false;">'.$categorias[nomcateg].'</a><br />'; 
     
    $consultaProductos = mysql_query("SELECT * FROM producto WHERE codcateg = {$categorias[codcateg]};"); 
    echo '<div id="menu_'.$menu_numero.'" style="display:none;">';
    while($productos = mysql_fetch_array($consultaProductos)) 
    { 
        echo '<a href="#">'.$productos[descripcion].'</a><br />'; 
    } 
    echo '</div>';
    $menu_numero++;
}   

mysql_free_result($consultaCategorias); 
mysql_close($conexion); 
?> 
</body> 
</html>

KingColt · #9 (**permalink**) 22/03/2008, 11:15

Que tal entiendo casi todo el codigo menos el contador me imagino que sera para crear un id es decir menu_1,menu_2.... ?

Otra cosa que note es que al cambiar el \' por ' de la parte color roja que resalte no funciona el despliegue, a que se debe, podrias explicar un poco hacerca de usar barra comilla o simple comilla
$menu_numero = 0;

echo '<a href="#" onclick="desplegar(\'menu_'.$menu_numero.'\'); return false;">'.$categorias[nomcateg].'</a><br />';

echo '<div id="menu_'.$menu_numero.'" style="display:none;">';

$menu_numero++;

korg1988 · #10 (**permalink**) 22/03/2008, 12:06

el contador de $menu_numero sirve para crear como vos lo dijiste id's diferentes por cada vuelta que realiza en primer while en los resultados....
de esta mandera logramos que el primer link de categorias despliegue a menu_1 y despues el segundo link despliegue solamente a menu_2 y asi susesivamente.... me parecio una forma sensilla de hacerlo dada la circunstancia

y lo de las comillas es todo un tema que tendrias que leer. pero mas o menos seria algo asi

supongamos que inicias un conjunto de comillas de este modo

Código PHP:

  echo "hola";

pero supongamos que quieres resaltar un nombre entre comillas simples

Código PHP:

  echo "hola 'cristian' ";

esto funcionaria perfecto, el problema se presentaria si quisieramos poner el nombre entre comillas dobles

Código PHP:

  echo "hola "cristian" "; //forma totalmente incorrecta porque el echo estaria suponiendo que en la primer comilla antes del nombre "cristian" se estaria cerrando el string y estaria faltando o un . para unir con una variable o una ; para terminar la sintaxis

echo "hola \"cristian\" "; //esta seria la forma correcta ya que con la barra le indicas que tiene que escribir esas comillas en ves de tomarlas como parte de la sintaxis del comando echo, y esto imprime hola "cristian"

lo mismo sucede cuando se usan comillas simples, seria lo contrario a los ejemplos anteriores

Código PHP:

  echo 'hola "cristian" '; //funciona e imprime hola "cristian"
echo 'hola 'cristian' '; // no funciona
echo 'hola \'cristian\' '; // funciona e imprime hola 'cristian'

espero que te haya sido de ayuda, perdon por la forma de explicar , no soy profesor jajaja... solamente un simple ayudante!

cualqiuer cosa me preguntas

KingColt · #11 (**permalink**) 30/04/2008, 11:16

Que tal el menu funciona bien, ahora quiero que solo haga un solo despligue por categoria es decir si seleciono hardware se desplieguen sus productos y si seleciono software se oculte los productos de hardware y se desplieguen los de software

saludos

korg1988 · #12 (**permalink**) 09/05/2008, 23:36

podrias crear una funcion javascript que te apague todos los menues excepto el que hiciste clic, usando el Id de php como lo usaste en menu_bla bla
solo que hace un bucle en javascript que valla apagando menos el id que hiciste clic