Como Usar Bootstrap en PHP

Recuerdo cuando PHP estaba en las versión 5 y aledañas, en esa época no habían muchas herramientas como los frameworks CSS que te permiten montar rápidamente una rescatable interface de usuario HTML, asi que todo lo hacimos a puro CSS acompañado de JavaScript cuando se le tenia que añadir algo de dinamismo. Al día de hoy existe una vasta cantidad de herramientas y frameworks que hacen que el desarrollo sea una carrera profesional muy extensa. En PHP podemos implementar el framework Bootstrap y en este tutorial te enseñaré a Como Usar Bootstrap en PHP, vamos con ello.

Te Puede Interesar:

• Que es Bootstrap, Historia y tu Primer Hola Mundo
• Como Crear una Página Web con Bootstrap 5 – Parte 1
• Diseña Tu Primera Página Web con Bootstrap 4
• Como Crear una Tabla con Cabecera Fija (Sticky) en Bootstrap 4
• Ocultando elementos según el tamaño de pantalla de Manera Ágil en Bootstrap 4
• Como Crear una Notificación de tipo Toast con Bootstrap 4 y Javascript
• Como Crear Formularios en Línea (Inline) con Bootstrap 4
• Como Usar el Componente Tooltip de Bootstrap 5
• Puedes leer más en la categoría Bootstrap.

Podcast: “Que Hacer Cuando Estamos En Casa” y “La Inteligencia Artificial (IA) y el Machine Learning (ML) Siempre Trabajan de la Mano” (Anchor Podcast): 

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Continuemos con el Post: Como Usar Bootstrap en PHP.

Como Usar Bootstrap en PHP

Si recién estás aprendiendo a usar Bootstrap en PHP, es importante que aprendas ciertos aspectos técnicos, estos te servirán para diferentes áreas del desarrollo y no solo para Bootstrap y PHP.

Conceptos importantes

Para entender como se usa Bootstrap en PHP es importante saber cual es la diferencia entre un lenguaje o tecnología del lado front y un lenguaje o tecnología del lado back.

Lenguaje o tecnología del lado front

Cuando hablamos de un lenguaje o tecnología del lado front estamos hablando de lenguajes o tecnologías como CSS, HTML, JavaScript, etc. Y cuando hablamos de un lenguaje o tecnología del lado back estamos hablando de lenguajes o tecnologías como Node JS, PHP, Python, etc.

Cuando se habla de una tecnología del lado front, nos referimos al lado del cliente o el dispositivo que esté usando el usuario para ver una página web, este dispositivo necesita de un lenguaje o tecnología integrado nativamente como CSS, HTML y JavaScript, para mostrar la parte visual de una web y puede ser un navegador web como Google Chrome, este navegador puede ser usado en una computadora con Linux, Mac o Windows, incluso en una tablet o smartphone Android, hasta en un iPad o iPhone y demás dispositivos. Es decir todos los navegadores traen soporte para los lenguajes y tecnologías front como CSS, HTML, JavaScript, etc.

Lenguaje o tecnología del lado back

Cuando se habla de una tecnología del lado back, nos referimos al lado del servidor o un servidor en donde se encuentre alojada o publicada una página web, este servidor necesita de un lenguaje o tecnología configurado como PHP, para procesar tareas en el servidor como la petición de datos a una base de datos en el servidor, manejo de sesiones, etc. Todas las tareas que solo se realizan en el servidor y no en un cliente o el lado front, son realizadas por un lenguaje o tecnología del lado back o servidor como PHP.

El framework Bootstrap esta creado sobre los lenguajes CSS, HTML y JavaScript, por ende no tiene sentido decir que podemos usar directamente Bootstrap en PHP, ya que ambos funcionan en diferentes entornos, uno en el lado front y otro en el lado back, sino que podemos renderizar elementos o componentes de Bootstrap mediante PHP.

Uso estático de Bootstrap en PHP

Existen determinados escenarios en donde podemos usar Bootstrap en PHP, uno es por ejemplo cuando queremos imprimir un elemento o componente como una alerta o alert.

Usando un componente de Bootstrap

El componente alert de Bootstrap permite mostrar una mensaje llamativo que alerte al usuario, el código del componente es el siguiente:

Si colocas el código anterior en una página HTML se vería la alerta sin problemas, pero también lo podemos hacer con PHP, sería de esta manera:

En el código anterior puedes ver que estoy usando el método echo de PHP para imprimir la alerta de Bootstrap, ese código en si se debería de ejecutar en un servidor, técnicamente se debería de ejecutar en un archivo PHP, por ejemplo un archivo index.php y no en un archivo index.html, recuerda que PHP es un lenguaje del lado de servidor y necesita trabajar sobre el formato de archivo PHP.

Si vamos al navegador, la alerta que imprimimos mediante PHP, se debería de ver sin problemas:

Entonces podemos crear cualquier página con la extensión PHP por ejemplo: contacto.php, index.php, servicios.php, etc., y en ellas imprimir código de componentes o elementos de Bootstrap como el alert que vimos anteriormente o un formulario, badget, botón, tooltip, etc.

Código completo para usar Bootstrap en PHP

El código de la alerta que mostramos anteriormente se debe usar en un archivo PHP, este archivo PHP debe mantener la estructura de un archivo HTML normal, el siguiente código es el código completo del archivo index.php:

Uso dinámico de Bootstrap en PHP

Algo habitual en donde se suele usar Bootstrap en PHP, es cuando se quiere mostrar datos desde una base de datos, en una tabla de Bootstrap, los datos son solicitados al servidor mediante PHP, el servidor debería de tener ya configurado una base de datos como MySQL, PostgreSQL, etc.

Lo que se suele hacer para mostrar los datos es cargar los datos dentro de las etiquetas <tbody></tbody> de la tabla y allí se usan las etiquetas <tr></tr> como contenedores padres de las etiquetas <td></td> que almacenan los datos:

Una tabla puede tener muchos campos, para este ejemplo estoy usando 5 campos: id, nombre, stock, precio e imagen.

Si vamos al navegador, podemos ver que los datos llamados desde el servidor mediante PHP, se muestran sin problemas en la tabla HTML de Bootstrap:

Conclusión

En este tutorial has aprendido a Como Usar Bootstrap en PHP, te he compartido aspectos técnicos que debes conocer a la hora de hacer esta implementación. Pueden haber diferentes entornos o procesos en donde se pueda usar Bootstrap en PHP, pero los conceptos expuestos en este artículo son una base que te servirán como referencia.

Nota(s)

• No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.