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


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):



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



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.



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>






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