Scribd
Cargar
13 vistas

Menú Con PHP y MySQL

Menu con Php YMysql

Cargado por

Elio MIlano
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
13 vistas

Menú Con PHP y MySQL

Menu con Php YMysql

Cargado por

Elio MIlano
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 4

Hazlo tú mismo Unirme

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

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 imprimir
ia 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 s
iempre 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

También podría gustarte