Aprende a crear una plantilla (Template) con PHP y Bootstrap

Aprende a crear una plantilla (Template) con PHP y Bootstrap

Hola que tal, bienvenido a este nuevo artículo donde aprenderás a crear una plantilla (Template) con PHP y Bootstrap, crear una plantilla base para nuestros proyectos es muy importante porque nos permite organizar y no redundar código,  a que me refiero con esto, pues bien, por lo general y casi siempre en cualquier proyecto de desarrollo de software o en diseño web, la maquetación está divididad en una sección llamada cabecera o header y un pie o footer como se aprecia en la imagen:

APRENDE A CREAR UNA PLANTILLA (TEMPLATE) CON PHP Y BOOTSTRAP

Básicamente estas dos partes se repiten en todo el programa o página web, lo que cambia es la parte del contenido (content) o también llamado section en HTML5. Por ejemplo, si en alguna pantalla quieres hacer el ingreso de un registro en otra muestras los usuarios registrados, como verás el contenido cambia pero se mantiene lo que se conoce como cabecera y pie. Dicho esto, cuando no utilizamos una plantilla base, tenemos que en todas las páginas repetir el mismo código cabecera y pie, ahora bien, la idea de tener una plantilla base, es cambiar sólo código html para la parte del contenido dependiendo la circunstancias y utilizar la misma cabecera y pie.

Algo importante que también ayuda el tener una plantilla base es que, si quieres modificar una parte del menú de opciones (cabecera) de tu proyecto, sólo lo haces una vez, mientras que si no tienes diseñada una plantilla, y asumiendo que tienes 100 páginas, tendrías que ir cambiando una a una, tedioso verdad?.

Ejemplo de cómo crear una plantilla (Template) con PHP y Bootstrap

A continuación te dejo una imagen de cómo quedará la plantilla al final del ejercicio, la parte pintada de color negro, que es el menú de opciones, lo creamos una sola vez y sólo lo incluimos en el contenido, en este caso el contenido es un formulario para el registro de clientes, así mismo el footer que para el ejemplo es un texto, pero que puede ser cualquier otra cosa.

APRENDE A CREAR UNA PLANTILLA (TEMPLATE) CON PHP Y BOOTSTRAP

Qué es Bootstrap?

Bootstrap es un framework responsive (adaptable a todo tipo de dispositivo, teléfonos, tablets, computadoras, etc) para la parte de la vista o también llamado Front End, como todos los frameworks lo que hace Bootstrap, es acelerar el proceso de diseño. Bootstrap tiene un conjunto de elementos HTML como formularios, botones, divs, alertas, tablas, themes etc, con clases CSS prediseñadas, componentes que usan también JavaScript, y que para usarlos sólo basta con llamar a su respectiva clase, así mismo Bootstrap te permite crear sitios web completamente responsive y adaptables a cualquier tipo de dispositivo.

Integrar Bootstrap en un proyecto PHP

Primero lo debes descargar desde su sitio web: Descarga aquí Bootstrap, (botón Download Bootstrap), luego descomprimes y renombras la carpeta con el nombre de bootstrap, dentro de esta carpeta deben quedar las carpetas css, font y js.

Esta carpeta la copias y la pegas dentro de tu proyecto PHP, al final del artículo te dejo la estructura completa del proyecto.

Crear la cabecera (header)

Primero empezamos creando una carpeta que la llamaremos Layouts y dentro el archivo header.php, este archivo contiene el menú de opciones que va aparecer en todas las páginas del proyecto.

Como te mencionaba, utilizamos elementos html pero con clases prediseñadas de Bootstrap, por ejemplo: utilizo un div con la clase navbar navbar-inverse para pintar la barra del menú, luego utilizo otro div interno con un navbar-header para la parte del título del sitio, además le agrego una imagen con la clase glyphicon, luego agrego más opciones al menú con el elemento ul y la clase nav navbar-nav.

Crear el pie (footer)

Crear la plantilla principal e incluir las partes (header y footer)

La plantilla principal va ha llamar al archivo header.php y a footer.php, podríamos obviar este paso y no crear este archivo, ya que bien podríamos llamar al header.php y al footer.php desde una página en concreto, por ejemplo desde mostrar.php, pero tendríamos que cargar las librerías de bootstrap para cada página en concreto y estaríamos repitiendo esto para todas las páginas y la idea no es eso. La idea es sólo escribir el código específico para una página en concreto o sección y tomar la cabecera y el pie definido en un inicio.

Bien, creamos el archivo layout.php (dentro de la carpeta Layouts) con el siguiente código:

Lo primero que se incluyen en este archivo son las librerías para que funcione Bootstrap, luego hemos incluido los archivos header.php y footer.php, en la section se agrega también el archivo routing.php, este archivo direcciona a la página que se incluirá dentro de la plantilla.

Cargando la plantilla base e incrustando una página concreta

Ahora vamos a crear el archivo index.php (dentro de la raíz del proyecto) que carga la plantilla layout.php

Para redireccionar a una página concreta en incrustarla dentro del layout.php creamos el archivo routing.php.

Por último creas una carpeta llamada Clientes y dentro los archivos registrar.php y mostrar.php (estos archivos quedan en la descarga del proyecto), estos archivos son llamados desde el menú en la sección Clientes y Ver Clientes respectivamente.

A partir de ahora puedes incluirle las páginas .php que tu quieras sin repetir el código, sino únicamente cargando la plantilla layout e incluyendo las páginas específicas.

Por se acaso te perdiste en la creación y organización de los archivos, está es la estructura que debe tener el proyecto para que funcione correctamente:

APRENDE A CREAR UNA PLANTILLA (TEMPLATE) CON PHP Y BOOTSTRAP

Descarga el ejemplo completo desde el siguiente enlace: Descargar Ahora.

Espero que este artículo te haya ayudado. Para cualquier duda, inquietud o agradecimiento utiliza los comentarios. Nos vemos en la próxima entrada!!, saludos.

Opt In Image
Aprende a crear aplicaciones PHP con este sencillo tutorial!!
Suscribete y descarga el tutorial: Introducción al Desarrollo de Aplicaciones Web con PHP

Tus datos estarán protegidos y 100% libre de Spam

Full Stack Developer, JavaScript, PHP, Java, Spring, Laravel, Vuejs, Blogger, aprendiendo y compartiendo conocimientos. Cursos de Programación Web en: https://programacionfullstack.com/

Artículos Recomendados

9 Thoughts to “Aprende a crear una plantilla (Template) con PHP y Bootstrap”

  1. Horacio

    Hola que tal, muy buena explicación, ahora me gustaria saber como agregarle el codigo de loggeo en esta estructura. Saludos.

    1. Elivar Largo

      Hola, puedes revisar este artículo Autenticación de usuarios en PHP y MySQL (Login) y formulario de registro. En donde explico como puedes hacerlo usando sesiones. Para aplicarlo con más de un tipo de usuario debes validarle en el archivo routing.php para cada usuario

  2. alejandro

    si en el index quisiera agregar mas enlaces , de manera que siempre se cargue el contenido en el div=content como se podria realizar, es decir que cualquier enlace se cargue en el div content , solo usando puro php no jquery

  3. Juan M

    Que tal a mi me sale este error al correr la pagina, el menu y el footer me los muestra bien

    Notice: Undefined index: menu in C:\xampp\htdocs\plantilla\routing.php on line 7

    Notice: Undefined index: menu in C:\xampp\htdocs\plantilla\routing.php on line 9

    1. Elivar Largo

      Revisa que la variable ?menu=registrar esté enviándose desde el header.php, aunque en si el Notice solo es un aviso pero no influye en el desempeño de la aplicación, si deseas puedes deshabilitar este tipo de mensajes. Modifica el archivo php.ini en la siguiente línea: error_reporting = E_ALL & ~E_NOTICE & ~E_DEPRECATED

  4. Alms

    como hago para que se mire todo eso en mi sublime text?

    1. Solo debes crear una carpeta en el server wamp o xxamp y abrir de ahí el proyecto

  5. Buenas noche Elivar, gracias por compartir el proyecto, lo estoy utilizando como base de los desarrollos, tengo una consulta para hacerle
    Como comenta el lector Juan M, respecto al mensaje cuando carga la pantalla
    “Notice: Undefined index: menu in C:\xampp\htdocs\plantilla\routing.php on line 7
    Notice: Undefined index: menu in C:\xampp\htdocs\plantilla\routing.php on line 9” obtengo el mismo mensaje, no así en el servidor ya que esta deshabilitada esa opción, el tema es poder cargar una pagina inicial, hasta que el usuario haga click en algun menú y pueda comenzar a obtener las variables desde $_GET, o algun consejo para mostrar una pagina solo por única vez al inicio? Espero que se comprenda la consulta, saludos y un fuerte abrazo¡

    1. Hola que tal, puedes cargar en primera instancia tu pagina index y en un menú redireccionar la parte de menús, login etc.

Dejar un Comentario