epelpad

El post que buscas se encuentra eliminado, pero este también te puede interesar

[Programando] Menú con PHP y MySQL

HOLA GENTE! cómo va? En esta ocación empezaré a hacer tutoriales sobre como hacer una página web con PHP, Mysql, Javascript, etc.. parte por parte.
Hoy empezaremos con un Menú y subsmenús con base a una web de compra y venta de artículos.

RECUERDEN CHEKEAR ALGUN TUTO BASICO DE PHP Y MYSQL COMO TAMBIÉN DE HTML/CSS
Les dejo uno mío

Necesitas una host si no tenes, con este programa podés tener tu propio localhost.

Una vez descargado e instalado, lo iniciamos (RECUERDEN DONDE LO INSTALARON):

[Programando] Menú con PHP y MySQL

Seleccionamos en START en MYSQL Y APACHE. Si quieren que siempre esté funcionando su localhost (sin necesidad de abrir el programita), tienen que instalar MYSQL Y APACHE haciendo click en el checkbox

Se dirigen a la carpeta donde lo instalaron: (en mi caso disco C) C:/xampp/htdocs y creamos una carpeta para luego ir a nuestro navegador y poder entrar con http://localhost/nuestranombrecarpeta
Donde no tendrán nada todavía, obviamente.

Dirijámonos a http://localhost/phpmyadmin que es nuestra BASE DE DATOS

Programacion

Hacemos click en base de datos (arriba en el menú) y ponemos el nombre a nuestra db, por ahora: miweb.
Lo que está la costado, llamado cotejamiento esta en lenguaje español para que permita subir informacion a la base de datos como ñ tildes, etc.

PHP

Nos dirigimos a la sección SQL para crear una tabla y ponemos lo siguiente:

CREATE TABLE IF NOT EXISTS `menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(20) COLLATE utf8_spanish_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;

INSERT INTO `menu` (`id`, `nombre`) VALUES
(1, 'Hogar / Oficina'),
(2, 'Empleos'),
(3, 'Electrónica'),
(4, 'Indumentaria'),
(5, 'Automotores'),
(6, 'Inmobiliaria'),
(7, 'Música'),
(8, 'Servicios'),
(9, 'Mascotas'),
(10, 'Otros');


Eso fue con respecto al menu, ahora vamos con los listados del mismo
ID: identificador del submenu.
Nombre: titulo del submenu
Menu_id: menu al que pertenece (usando ID: identificador)
Cont_item: para contar la cantidad de publicaciones vinculadas a el. (Opcional)


CREATE TABLE IF NOT EXISTS `submenu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(40) COLLATE utf8_spanish_ci NOT NULL,
  `menu_id` int(11) NOT NULL,
  `cont_item` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;

INSERT INTO `submenu` (`id`, `nombre`, `menu_id`, `cont_item`) VALUES
(1, 'Limpieza', 1, 0),
(2, 'Decoración', 1, 0),
(3, 'Muebles', 1, 0),
(4, 'Baño', 1, 0),
(5, 'Cocina', 1, 0),
(6, 'Sala de estar', 1, 0),
(7, 'Dormitorio', 1, 0),
(8, 'Seguridad', 1, 0),
(9, 'Jardín y exteriores', 1, 0),
(10, 'Pisos, paredes y aberturas', 1, 0),
(11, 'Audio / Video', 3, 0),
(12, 'Computación', 3, 0),
(13, 'Electrodomésticos', 3, 0),
(14, 'Automóviles', 5, 0),
(15, 'Camionetas', 5, 0),
(16, 'Bicicletas', 5, 0),
(17, 'Motos y cuatriciclos', 5, 0),
(18, 'Departamentos', 6, 0),
(19, 'Casas', 6, 0),
(20, 'Fondos de comercio', 6, 0),
(21, 'Instrumentos musicales', 7, 0),
(22, 'Microfonía', 7, 0),
(23, 'Sonido e Iluminación', 7, 0),
(24, 'Instrumentos de cuerda', 7, 0),
(25, 'Instrumentos de percusión', 7, 0),
(26, 'Teclados / pianos', 7, 0),
(27, 'Cursos y clases', 8, 0),
(28, 'Ciudad personal', 8, 0),
(29, 'Arte, música y cine', 8, 0),
(30, 'Delivery', 8, 0),
(31, 'Construcción / mantenimiento', 8, 0),
(32, 'Vehículos', 8, 0),
(33, 'Profesionales', 8, 0),
(34, 'Servicio técnico', 8, 0),
(35, 'Servicio para mascotas', 8, 0),
(36, 'Transporte', 8, 0),
(37, 'Viajes / turismo', 8, 0);


Ahora iremos al php:

MYSQL.PHP
Nos conectaremos a la base de datos:


<?php
$bd_host 
"localhost"//localhost XD
$bd_usuario "root"//usuario
$bd_password ""//contraseña
$bd_base "miweb"//Nombre de la db
$con mysql_connect($bd_host$bd_usuario$bd_password);
mysql_select_db($bd_base$con);
?>


MENU.PHP


    <div id="menu">
<?php
include("mysql.php"); //Incluimos los datos de la conexion de base de datos
$menu_sql mysql_query("SELECT id,nombre FROM menu"); //Selecciona los titulos del menu
while($menu mysql_fetch_row($menu_sql)) //Entregara los datos en forma de $menu[numero], empezando con el 0
{  //Repetira el siguiente echo con todos los datos de la consulta
echo '        <ul>
            <li>
                <a href="'
.$menu[0].'">'.$menu[1].'</a>'//Se usa el '. .' para "pausar" el echo y mostrar una variable acompañada siempre por puntos.
$submenu_sql mysql_query("SELECT id,nombre,menu_id,cont_item FROM submenu WHERE menu_id = '".$menu[0]."'"); //Selecciona los subsmenu con la condición de mostrar en el menu que corresponda (Por id)
if(mysql_num_rows($submenu_sql) > 0//Si la cantidad de filas que muestra la consulta es mayor a 0 imprimiria lo siguiente ( echo )
{
echo 
'
                <div>
                    <ul>'
;
while(
$submenu mysql_fetch_row($submenu_sql))
{
echo 
'
                        <li><a href="'
.$submenu[0].'">'.$submenu[1].' ('.$submenu[3].')</a></li>';
}
mysql_free_result($submenu_sql); //Liberamos memoria para no saturar el servidor, si es muy visitado, pero siempre es mejor tomar precauciones :)
echo '
                    </ul>
                </div>'
;
}
echo 
'
            </li>
        </ul>
'
;
}
mysql_free_result($menu_sql); //Aqui tambien liberamos la memoria en la consulta del menu
mysql_close(); //Cerramos la conexion a la db
?>
    </div>


menu

html

EXPLICACIÓN GENERAL:
Hemos tomado los nombres de los menus y las listas directamente de nuestra base de datos, habilitando el <div> si este menu tenía alguna lista.


Y... de yapa:

STYLE.CSS


#menu {
    background: #585858;
    border-bottom: 1px solid #000000;
    height: 37px;
    margin-bottom: 15px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
    padding: 0px 5px;
}
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu > ul > li {
    position: relative;
    float: left;
    z-index: 20;
    padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
    font-size: 13px;
    color: #FFF;
    line-height: 14px;
    text-decoration: none;
    display: block;
    padding: 6px 10px 6px 10px;
    margin-bottom: 5px;
    z-index: 6;
    position: relative;
}
#menu > ul > li:hover > a {
    background: #000000;
}
#menu > ul > li> div {
    display: none;
    position: absolute;
    z-index: 5;
    padding: 5px;
    border: 1px solid #000000;
    -webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -khtml-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    background: url('../img/menu.png');
}
#menu > ul > li:hover > div {
    display: table;
}
#menu > ul > li > div > ul {
    display: table-cell;
}
#menu > ul > li ul + ul {
    padding-left: 20px;
}
#menu > ul > li ul > li > a {
    text-decoration: none;
    padding: 4px;
    color: #FFFFFF;
    display: block;
    white-space: nowrap;
    min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
    background: #000000;
}
#menu > ul > li > div > ul > li > a {
    color: #FFFFFF;
}



GRACIAS POR EL VER EL POST

13 comentarios - [Programando] Menú con PHP y MySQL

Intel_Nvidia +2
desp lo pruebo. Gracias
juliangorge
cualquier duda al privado!
Budoka +1
ta lindo, buen post
KingSpardock +1
Gracias por compartir, Espero contenido de este tipo para aprender un poco. +10
juliangorge
Empezaré a subir más! seguime!
angelozluiko
Dirijámonos a http://localhost/phpmyadmin que es nuestra BASE DE DATOS (ES UN MANEJADOR DONDE ESTAN LAS BASES DE DATOS no es una bases de datos como tal aun que tambien tiene la suya)
juliangorge
Tenes razón, sip.
Espero que sea para ayudar y no para refregarlo
angelozluiko +1
es para ayudar a los usuarios que no conocen nada al respecto, si yo fuera nuevo en esto confundiría las dos cosas, buen post..
NekitoBlackPY -1
Para qué crear un menú usando base de datos?? digoo... en que será mejor que hacerlo escribiendo en códigos? :v
juliangorge
La mayoría de los sitios tienen todo en sus bases de datos, haciendo más ordenados los archivos.
juliangorge +1
PD: el del unlike no fue yo xD
stavgraff +1
hola bro buen aporte pero tengo una duda como le puedo insertar el menu a cada pestaña un URL/// para navegar entre pagina saludos (Y)
stavgraff +1
@juliangorge si bro aver si me funciona gracias x la respuesta gracias
stavgraff
@juliangorge si bro aver si me funciona gracias x la respuesta gracias
stavgraff +1
@juliangorge gracias muchas gracias si me salio eres grande bro !!!! saludos
Patsurishio +1
excelente, y como se puede hacer ese mismo menu pero en vertical ?
juliangorge
Cambiá el "display: inline"