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)
Extremadamente genial, aunque se podría remejorar incluyendo mas variedad, en cuanto algunos detalles de comienzo, en cuanto a la maquetación, el diseño web y la utilización de elementos php, es abundante la información sobre las diferentes partes que conforman la creación de un sitio web dinámico, pero he visto muy poco la formación en conjunto paso a paso como aquí, realmente FELICIDADES, bien organizado y profesional, es de ayuda a unos cuantos neófitos como yo que quieren aprender, y al princiio todo es un enredo, pero esto le va dando luz al comienzo.GRACIAS…
utilizo «index.php?page=detalle» para ir a la pagina detalle pero como deberia utilizarlo si debo ir a detalle y pasandole un valor? detalle?codigo
si «index.php?page=detalle?codigo» no funciona, como deberia realizar la llamada? muchas gracias
hola, para enviar varias variables se usa la direccion index.php?page=detalle&mivariable=codigo&otravariable=otrovalor y asi sucesivamente
Excelente!!! gracias por responder y agrezco lo bien y claro que esta el tutorial. Gracias y saludos
Hola , ante todo gracias por el trabajo tan genial que estas haciendo, eres un crack la verdad. Mi pregunta es, si quiero hacer el include de mas de una pagina, como deberia modificar el codigo de pages.php para que me lo pille sin problemas?
GRACIAS !!
Primeros recordemos que un include es como si pegaras todo el codigo de un archivo dentro de otro. Asi que puedes hacer todos los includes que desees y de ser necesario duplicando el código de pages.php y cambiando unicamente el nombre de la variable. Con un link como index.php?page=mipagina&sidebar=mibarra
Hola, gracias, andaba buscando algo así ya que habría encontrado varios módulos por google, pero este me da la ventaja de no tener que hacer tantos enlaces ya que me carga los archivos que van en la carpeta pages, mi duda es en el código de pages.php donde pone.
include(«pages/».$_GET[‘page’].».php»);
Ya que solo carga archivos que lleven esa extensión, en tiendo que puedo poner la extensión que yo quiera.
Mi duda es como puedo hacer que cargue archivos de extensiones diferentes como html, txt pdf, etc… ya que voy a poner de diferentes extensiones.
Hola, yo te sugiero que no pongas otras extensiones aparte de PHP, ya que el objetivo es posteriormente usar esta web modular con friendly url y al final obtener una direccion como http://www.misitio.com/test.html en vez de http://www.misitio.com/index.php?page=test
en las paginas del contenido utilizo distintos scripts javascript cuando paso de una a otra los scrips se siguen ejecutando como se pueden detener. es que a de cuenta uno que tengo que es una galeria agrega el numero d la foto en el navegador y si salgo de la galeria y estoy en otra pagina los numeros en el navegador siguen moviendose
Al cambiar de página deberían dejar de ejecutarse los javascripts ya que es una web distinta reviza que no estés ejecutando código javascript fuera de un evento o tal vez el lio es que al compartir el mismo encabezado ejecutas el script de la galería donde no debes.
Hola, estoy tratando de entender este tutorial, y hasta donde yo se, entiendo lo que es una web mnodular, para que sirve, las ventajas que tiene, etc…, entiendo el código php que escribes el css y el html… Lo que no entiendo del todo es este ejemplo, no se si está del todo bien explicado.
No soy un experto en desarrollo web, soy mas bien diseñador gráfico. Veamos, existe una página «index.php» en la raíz de las carpetas, (entiendo que el archivo index debe estar siempre en la raiz de los sitios para que la web funcione correctamente y los buscadores «indexen» primero esa página), bien, en ese «index.php», haces un include de cada uno de los trozos que en realidad juntos, en un solo archivo compondrían una página web «html/php» típica… Bueno, lo que entiendo es que para que los enlaces del menu funcionen siempre y no haya que modificar la URL de los mismos, la única página real de base que hay cargada es la de «index.php», y las URL de los enlaces del menú están creadas con la ruta apropiada para ir a la carpeta «pages» y cargar el contenido en la DIV de contenido de «index.php»… No entiendo a ver, como es que en el «menu.php» incluido en el «index.php» no hay código que lo relacione con la página que procesa qué página se está cargando…??? Es que no entiendo. O igual si lo entiendo, no se no estoy seguro.. Por favor, ¿podrías explicarmelo un poco mas detalladamente o de manera fácil?
Magnífica tu web tus tutoriales son de una inestimable ayuda.
La idea central es que los pedazos (includes) se combinan formando un todo, al final los navegadores entienden que es un todo asi es como estan relacionados, si te fijas mas abajo del menu hay un codigo que te indica que página debe ser invocada(me parece que justo ahi esta la respuesta a tu duda) segun la ruta index.php?page=mipagina, esa estructura de la url es muy util ya que nos permite implementar url amigable
HEY, DE VERDAD ES UN BUEN EJEMPLO EL TUYO… Y ANTES QUE NADA GRACIAS.
PERO TENGO UNA PREGUNTA,ESTOY IMPLEMENTANDO EL EJM CON FORMULARIO Y FUNCIONA BIEN. PERO CUANDO LE HAGO UNA VALIDACION CON JQUERY, POR EJEMPLO UN DATO OBLIGATORIO (IDENTIFICACION), NO FUNCIONA LA VALIDACION DESDE EL ARCHIVO INDEX CON EL DIV CONTENIDO Y LO DEJA PASAR AUN ESTANDO VACIO, PERO SI LO CORRO POR APARTE (DANDOLE LA RUTA SOLO DEL FORMULARIO, NO DEL INDEX QUE TIENE TODOS LOS BLOQUES DE LA PAGINA) SI FUNCIONA COMO DEBERIA…
SI ME PUEDES COLABORAR TE LO AGRADEZCO, SI TIENES UN EJEMPLO DE FORMULARIO Y QUE USE VALIDACIONES DE (SOLO NUMEROS, SOLO LETRAS,CAMPO OBLIGATORIO,EMAIL, ETCETERA)NO IMPORTA LA TECNICA, EL TODO ES QUE FUNCIONE… YA HE INTENTADO VARIAS COSAS, ELPROBLEMA ES QUE NO CUENTO CON LOS SUFICIENTES CONOCIMIENTOS
A CONTINUACION ESCRIBO EL CODIGO DEL FORMULARIO
<link href=\\\\\\\\
he seguido este tutorial simplemente por practicar y me parecio muy util, pero a la hora de implementarlo en algo importante no logro hacer que muestre una imagen en los archivos pages como por ejemplo en el de contactenos o servicios, mas importante aun si quiero usar imagenes de captcha para los formularios, si me pudieras ayudar te lo agradezco mucho.
de ante mano muchas gracias y por favor sigue con ese espiritu de enseñar y compartir el conocimiento
¡Buenas noches!
¿Cómo puedo usar Dompdf, para crear pdf desde los html, pero en una web modular?
Ya probe sin usar web modular y funcion pero cuando lo uso en un modulo no?
De antemano gracias!
En realidad no hay ninguna diferencia entre modular y no modular, tal vez tu problema es solamente de rutas
Gracias por compartir, voy a desarrollar el administrador y conectarlo a mySQL, pero la base ya la tengo! thanks!
Estimado Miguel:
Excelente tutorial, me has sacado un peso de encima… ahora estoy recien entendiendo que los estilos son una potentísima herramienta.
Muchas Gracias
me queda la duda de como asignar el title debido a cada page ya que según el top_page.php el title siempre sera el mismo en toda la web, saludos y muchas gracias por la ayuda brindada.
Buenos Días, he seguido tu tutorial me parece excelente. Pero tengo una consulta si quiere integrar un buscador por ejemplo en la página de home como hago para enviar las variables
Gracias
Buenas Miguel
He estado echando un vistazo a algunos tutoriales,y son fantásticos,nada parecido a la bazofia que nos sirvieron en clase cuando dimos diseño web.
Sin embargo,no consigo que pages.php muestre el contenido de las páginas,y no veo ningun fallo,y me parece que tampoco no difiere nada con respecto a tu ejemplo.¿Sabrías decirme alguna posible causa que se me haya pasado por alto? En la vista previa de la página pincho en las secciones del menu,pero éste desaparece y tampoco sem e muestra la sección (la página,en su zona central,consta de dos columnas,una para el menu,en vertical,y la otra para mostrar el contenido,no se si quizá al hacer esto pasé algo por alto y está afectando al resultado)
Gracias de antemano,¡un blog muy útil!
Muy interesante, me ha despejado muchas dudas Gracias
Yo suelo usar una base de datos donde se guardan los contenidos y los títulos, en realidad las webs modulares sin base de datos no tienen mucho sentido
Muy buen aporte 🙂 me sirvio de mucho gracias 🙂
Hola me baje el archivo pero en WAMPSERVER no me muestra como debe ser, ( no no muestra los menus, los contenidos ni nada sólo los colores de fondo) cuando subo a un servidor si muestra como el ejemplo
alguien me ayuda con eso? gracias
Hola! Muchas gracias por el tutorial, estoy practicando y aprendiendo mucho. He hecho una web con varias páginas y he implementado friendly url.
Me surge una duda, cuando escribo un enlace que no existe, me muestra el Warning. ¿Qué debo hacer para redirigir al usuario cuando no existe una determinada página?
Muchas gracias de nuevo.
Tengo una duda, copie las carpetas y he ejecutado el proyecto, pero no me muestra el menu.
Alguna idea del porque no se muestra el menu. Estoy trabajando sobre Eclipse PDT.
Saludos.
Buenisima nota!
Siempre quise hacerlo y nunca supe como era.
La duda que me quedó es como hacer las Friendly URL con la Web Modular, ya que probe de las 2 formas que explicas en otra nota pero no me funcionó.
Nada mas para preguntar si solo debe cargar paginas php, si deseo que cargue otro tipo de extension como html como puedo agregarlo al código page.php
Un poco tarde ya, pero para los que tienen problemas con sus servidores, deben cambiar esto: <? por esto <?php , este cambio deben hacerlo en todos los archivos.
ppff, ya lo habian respondido 🙁
hola y que pondria en el archivo pages.php
si no encontrara una pagina y saliera un mensaje diciendo pagina no encontrada como le aria
Hola muy bueno el tutorial, tengo un problema y una consulta, resulta que segui todos los tutoriales de programacion modular y ninguno me funcionaba y vi este tutorial que es muy bueno, y vi el ejemplo que anda de maravilla, decidi descargar el ejemplo y colocarlo a funcionar en mi localhost para ver que es lo q hacia yo mal, pero resulta que no anda, en primera no carga contenido de inicio, solo me aparece el diseño del header,footer y donde se supone que va el menu, solo eso, y no carga el include de dichos archivos, y muy aparte de eso me di cuenta que no carga un include dentro de otra pagina que tenga otro include en sintesis no carga el segundo include y ademas que no funciona el script modular como ya me habia pasado antes con otros ejemplos que puede ser??? la ver pienso q es mi version de php la verdad nose cual sea el problema, dudo que sea el navegador pork lo probe con mozilla y explorer & chrome y nada, tengo xampp 1.8 q creo q tiene php5 asi q es una version reciente ayuda xfa
saludos
Hola tengo un problema con mi web modular, esta no me carga las imágenes en el área de contenido, utilizo el clásico no se si ese sea el error, espero me puedan ayudar
Hola Miguel Manchego ,en primer lugar te queria agradecer los aportes de conocimientos que haces…yo como novato en php te lo agradezco mucho..
en segundo lugar queria preguntarte:
Estoy haciendo unas pàginas en php con los includes cabecera y footer .Todo estaba bièn hasta q se me ocurrio meter una radio con striming (creo que se escribe asì .) la radio anda perfecta pero cuando cambio a otra pàgina se corta (al recargar pàgina)
mi pregunta es como puedo dejar la parte de la radio que no se recargue ,para seguir escuchando mùsica en el recorrido de la web?
Desde ya muchas gracias…