En un post anterior expliqué la forma más simple de hacer una web modular; aunque esa forma funciona bien para proyectos de muchas páginas, proyectos con CMS o sistemas con friendly url (url amigable) no es buena idea usarla.
Tengo pensado hacer 2 partes más del tutorial para explicar además a hacer conexión con la base de datos y friendly URL
Estructura de la Web Modular
Para este caso prefiero separar header de menu, el footer lo separo del final del código html, la estructura general de la página esta en el archivo index.php, todos los contenidos en si están en la carpeta pages, para poder acceder a cualquier página usamos la ruta index.php?page=nombre_del_archivo_sin_extension
index.php
En el anterior post index.php era una página mas, pero ahora es el centro del script, las páginas ahora sólo tendrán el contenido sin ningún include y estarán en la carpeta pages.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <?php include("includes/top_page.php"); ?> <div id="wrapper"> <div id="header"> <? include("includes/header.php"); ?> </div> <div id="menu"> <? include("includes/menu.php"); ?> </div> <div id="contenido"> <? include("includes/pages.php"); ?> <br style="clear:both;" /> </div> <div id="footer"> <? include("includes/footer.php"); ?> </div> </div> <? include("includes/bottom_page.php"); ?> |
Carpeta includes
En esta carpeta colocamos todos los trozos de nuestra páginas, que es casi los mismo del tutorial anterior , la novedad el include encargado de llamar las páginas web
pages.php
Este script llama la página dentro de la carpeta pages que pidamos usando GET index.php?page=nombre_del_archivo_sin_extension
1 2 3 4 5 6 7 | <?php if (!isset($_GET['page'])) { include("pages/homepage.php"); } else { include("pages/".$_GET['page'].".php"); } ?> |
Si por ejemplo en la carpeta pages tengo la pagina servicios.php para llamarla la url sería index.php?page=servicios
UPDATE: Y que ocurre si quisiera una estructura distinta con un menu lateral por ejemplo, simplemente edita el index.php agregando el div que corresponde a ese menu adicional y sobre todo edita el CSS para que se ubique adecuadamente ese div adicional, puedes ver como en este tutorial de maquetación
Hola, no tengo casi dea de php, pero no deberian ser iguales todas las etiquetas ?
o
Es que no se si es debido a la version de easyphp que tengo, la ultima, eso no lo permite.
Gracias
No entiendo muy bien a que te refieres con “todas las etiquetas” si te refieres a las etiquetas php “<?php”. Si no tienes activo “Short Open Tags” en la configuración de tu servidor no podrás usar “<?”
si, me referia a eso.Seguramente sea eso, me comi las comillas antes, lo siento, por eso solo aparecen la o esa ahi.
Instale el pack easyphp 3 y bueno, lo deje tal cual. Gracias
He usado este tutorial y me ha ido bien siempre y cuando solo sean texto las páginas, a la hora de meterle una página mas complicada tipo el register.php para registrarte en la base de datos me salta este error:
Fatal error: Cannot redeclare class MySQLDB in C:\AppServ\www\2\include\database.php on line 14
Y claro, no puedo borrar la redeclaración por que si no me quedo sin register… ¿Que hago?
Fijate bien en el error Cannot redeclare class MySQLDB in C:\AppServ\www\2\include\database.php, te dice que estas tratando de incluir otra vez la clase que crea la base de datos, lo que incluyes en index.php se queda para toda pagina dentro de la pagina modular, en tu archivo register.php elimina el include a database.php
No puedo hacer eso por que si no no me funciona nada :S he probado con include_once require_once etc… y nada me funciona me estoy volviendo loco… gracias de antemano
El error dice que estas incluyendo dos veces database.php, busca donde es que estas incluyendo denuevo es archivo y usa require_once en ambos, no te funciona aun porque no te estas dando cuenta en que parte incluyes por segunda vez database.php
Tengo una duda con respecto al menú, sería bueno que lo hables en la 3º parte de este tutorial.
¿que pasa si quiero poner un menú con items desplegables que tengo los estilos css y archivos Javascript específicos del menú en otra ubicación? lógicamente no quiero mezclar css unos con otro…¿como ligo los estilos del menú con los de la página?
Muchas gracias por el tutorial. está buenisimo, muy aclarador
simplemente en top_page.php agregas el css que corresponde al menu ademas del javascript necesario ya que el menu desplegable es comun a todo el sitio. Web modular es coo un playgo(lego) donde juntas piezas y armas tu sitio, combinado con clases es impresionante lo que se logra muy rápido.
Estoy haciendo un sitio, en el que cargo una tabla de base de datos desde el menú en por ej.
a href=”index.php?page=ciudad”>Ciudades
todo bien, hago lo correspondiente para que me muestre la tabla con sus opciones ya definidas, eliminar, editar, pág siguiente, pág anterior, etc. Todo muy bien puesto dentro del módulo.
mi problema es que al hacer por ej, Agregar registro mediante el a href
a href=”ciudad.php?a=add”>Agregar registro
Me lleva a la página correspondiente a agregar y puedo agregar el registro, pero me lo saca completamente de la web modular.
¿que tendría que editar para que continúe en el modulo y no se pierda el header y el footer? ¿el include pages?
simplemente hay que alterar un poco la ruta de tu link ADD
<a href=”index.php?page=ciudad&a=add”>agregar</a>
Y para el formulario pues lo mismo
<form name="miformulario" action="index.php?page=ciudad&a=add">
Fijate bien la estructura de la cadena que estoy enviando, ya que lo que hago es enviar 2 variables GET y de esa forma no falle con pages.php
gracias!! has sido de mucha ayuda!
Que genial que haya gente con tan buena voluntad.
Otra vez te molesto:
en la parte que debo avanzar por las siguientes páginas que muestro mi tabla le cambie el link asi
href=”index.php?page=ciudad&a=&recid=”>Registro Anterior
pero me sale el siguiente error
Warning: include(pages/2.php) [function.include]: failed to open stream: No such file or directory in C:\xampp\htdocs\wmfModular\includes\pages.php on line 5
Warning: include() [function.include]: Failed opening ‘pages/2.php’ for inclusion (include_path=’.;C:\xampp\php\pear\’) in C:\xampp\htdocs\wmfModular\includes\pages.php on line 5
¿cómo deberia ir el a href?
la línea 5 es la que dice
include(“pages/”.$_GET['page'].”.php”);
Gracias y saludos
No se que paginador estas usando pero estoy casi 100% seguro que esta enviando por GET una variable llamada “page”(pagina del paginador) al igual que la web modular, tienes 2 opciones o buscas una forma que el paginador no use “page” o a la web modular le cambias el nombre de la variable page en la linea 5 a alguna otra (eso implica modificar todos tus menus y links)
Si, esa es la forma de paginación que uso, y cambié todos los links y la variable de la linea 5, y casi perfecto, no me tira warning, ni error visible. pero no me cambia de página, se queda en la página 1 siempre…muy raro. No veo por donde solucionarlo.
:S
gracias de todos modos
Una pregunta.como hacer para que siga siendo modular como esta…pero que por ejemplo el (About Us)tenga otro aspecto por ejemplo el header mas pequeño y otras opciones que solo estarán en esta sección y así con las demás secciones…
Cual seria tu mejor recomendación?
Eso se modifica agregando condiciones en PHP para verificar si estoy en tal o cual pagina y aplicarle un clase al DIV header por ejemplo y luego en la hoja de estilos agregas los cambios necesarios a esa nueva clase(reduces, amplias, cambias el fondo, ocultas, etc).
Hola, Quisiera saber si el diseño modular va a recargar varias veces el contenido, es decir, si tengo en un archivo aparte el header, el cual contiene un flash, lo recargara de nuevo al querer ver otra seccion de mi pagina web?
Hola, la respuesta a esa duda esta aqui
un favor amigo si me puedes ayudar sabes que cargue el código en prueba y todo ok, pero le anexe un páginador y no me hace nada lo evalue y vi que el problema esta en los llamados a las funciones de ajax son muy diferentes y no logre ponerlas a funcionar (claro con todo tu marco y un paginador que encontre en ajax), si me puedes guiar te lo agradecería, de antemano gracias
La web modular no debería causar problemas con ajax salvo tal vez por las rutas relativas que varían un poco, tendrías que ver si los javacripts se están invocando usando firebug
Buenas, muchas gracias por el post. Tengo una inquietud ya que no se mucho de PHP y es como puedo hacer que cada pagina tenga un titulo diferente.
Hay varias formas, ya sea que almacenes los titulos en la base de datos(yo acostumbro hacer eso como parte de mi CMS), puedes crear condiciones IF o case, etc
Hola una orefunta. Yo estoy listando los datos de mi BDD en el div contenido, lo que quiero hacer es que al dar click en uno de los datos que me aparece me envie a otra pagina que se habra en el mismo div contenido pero los datos lo envie mediante post. Como puedo hacer eso??? muchas gracias.
Como hacer que una pagina que se me abrio en la etiqueta div contenido pueda abrir a otra en la misma etiqueta pero pasando los valores mediante POST
Los valores se envian por POST unicamente mediante formularios
Eso se puede mediante ajax pero lo normal debería ser usar un formulario para hacer por ejemplo una busqueda y se enviaría por POST
Hola, bueno solo tengo este comentario que si tengo la web haci igual como se esta explicando en este tutorial.
que pasaria si se consulta una pagina que no exista osea
si se consulta
index.php?page=services // pues se abre la pagina de servicios
pero si abro
page=servicesaa //
pues error el archivo servicesaa.php no existe, tienes que complementar mas el codigo de pages.php para que revise si el archivo existe.
Ese código es sólo una muestra, una base, yo usualmente uso una clase que maneja eso junto a friendly url y reenvie automaticamente a una página error como Wordpress por ejemplo.
Hola. Excelente tutorial!!. Solo tengo una duda: una de las paginas que cargo en el div contenido contiene un formulario que llama mediante POST a otra pagina. Mi duda es: como hago para que lleguen los datos de POST a la pagina llamada?.
Creo que es la misma duda que tenia Sebastian en los comentarios 24 y 25, pero no me quedo muy clara la respuesta.
Desde ya, muchísimas gracias.
Hola, la respuesta un poco más clara la he posteado AQUI
Excelente!! estaba buscando un tutorial asi de claro y bien explicado para terminar de entender este tema. Muchísimas gracias!!! (por tomarte la molestia y por desasnarme)