Una guía completa para la creación automatizada de páginas web con PHP en 2023

Hay ciertos momentos en la vida en los que necesita una página web para hacer algo más que simplemente sentarse allí como una página web. Lo necesitas para ganarte el sustento. Una forma de hacerlo es ponerlo a trabajar para usted, para que no tenga que codificar manualmente cada actualización o modificación de página. La forma más fácil de aprender a hacer algo como esto es haciéndolo realmente, por lo que en el resto de este artículo, le mostraré una forma de implementar un sistema que creará nuevas páginas web para usted con solo tocar un botón.

En este escenario, asumiremos que su cliente es un restaurante que quiere ofrecer vales para diferentes ocasiones especiales a lo largo del año. Pero, por supuesto, no quieren pagarte para que lo actualices, así que es mejor que te asegures de facturarles lo suficiente por este sistema de automatización que hará las actualizaciones por ellos.

1. Primero, necesitamos crear una plantilla básica de página web.

Este es solo un esqueleto de página web estándar. Puedes darle un nombre como “pageBuilder.php” o algo así. No tiene que usar PHP para esto. Podría usar otro lenguaje de programación, pero para este ejemplo, haremos las cosas simples y lo haremos todo en PHP.

2. Añadir Bootstrap

Esto ayudará a que el formulario se vea mejor sin ningún trabajo adicional. Por supuesto, necesitará tener Bootstrap para que esto funcione.

3. Configura un contenedor

Para ayudar a mantener todo limpio y ordenado, debemos definir un contenedor en el que almacenaremos los contenidos de la página.

4. Crea un formulario web

Defina un formulario web y también agregaremos un título elegante al formulario, que es opcional pero una buena idea.

5. Agregue los campos de formulario

Esto es realmente sencillo. Solo necesitamos recopilar algunos detalles básicos que el robot usará para crear una nueva página web. Los datos que necesitamos saber incluyen:

• La imagen de fondo para la página
• Nombre del evento que se celebra
• Titular
• Declaración inicial
• Alguna cita trillada o declaración adicional
• Atribución por cita trillada
• Estilo de fuente a utilizar para cada uno de los cuatro elementos de texto que enmarcan (individualmente).
• Rango de fechas en que los comprobantes serán válidos
• Ofrezca 1 y Offer 2 que se anunciarán en los cupones.
• Mensajes adicionales de cupones (términos y condiciones, por ejemplo)
• Datos para los códigos QR de vales que se generarán

Así es como se ve:

Y después de todo este esfuerzo, terminaremos con una página que se ve así:

 

La buena noticia es que la mitad del trabajo ya está completo, y fue la mitad más difícil y que llevó más tiempo. El resto es mucho más fácil.

6. Crear el archivo de procesador de formulario

Después de crear un formulario, necesita algún software que procese los datos enviados y haga algo con ellos. En este caso, usaremos los datos enviados para generar un nuevo HTML .

Ahora, tenga en cuenta que esto no es lo mismo que una respuesta PHP normal donde los datos se utilizan en tiempo real y se reflejan al usuario de forma dinámica. En cambio, estamos creando una página estática que existirá permanentemente hasta que la sobrescribamos.

El archivo debe tener el mismo nombre que DE ACTUAR! valor del atributo en la declaración del formulario, por lo que en nuestro ejemplo sería voucherGen.php, y debido a que no especificamos una ruta, tendría que estar almacenada en la misma ubicación que pageBuilder.php para que funcione.

7. Inicializar variables

Los datos enviados desde pageBuilder.php fue devuelto como una matriz asociativa llamada $ _POST, y se puede acceder a todos los valores de datos en la matriz a través de su control de formulario HTML nombre atributos. Por lo tanto, inicializar nuestras variables es bastante fácil. También es opcional, pero solo hace que el código se vea un poco más ordenado y más fácil de leer. Ciertamente podría trabajar directamente con el $ _POST valores si lo prefiere.

 8. Utilice condicionales para cambiar las fuentes a sus valores correctos.

Hacer esto temprano le ahorrará tiempo y problemas más adelante. Simplemente verificamos qué valores se seleccionaron y luego los reemplazamos con los nombres de fuente reales.

9. Comenzar a construir la cadena del generador

Realmente todo lo que tenemos que hacer aquí es crear una cadena realmente larga que contendrá todo lo necesario para crear la nueva página. Usaremos la concatenación de cadenas para mantenerla legible y facilitar la visualización de dónde se han insertado los valores de datos. Esto comienza con la configuración básica de la página HTML:

Probablemente pueda ver a dónde vamos con esto. Tenga en cuenta el punto y coma al final. Eso es importante. Además, cualquier punto y coma que ocurra dentro del texto (como parte de una declaración CSS o un script del lado del cliente) debe incluirse entre comillas.

10. Comience a agregar el cuerpo de la página a la cadena del generador

Hay formas más eficientes de construir esta cadena, pero me gusta hacer el código ordenado, para que sea fácil de leer. Puede usar métodos abreviados para hacer esto, y tampoco tiene que hacerlo como un proceso separado del paso 9. Creo que es más fácil de entender cuando las diferentes secciones de la página se dividen de esta manera.

11. Escriba la cadena del generador en un HTML

En este caso, estamos codificando el nombre del archivo, pero usted podría (y probablemente debería) hacer de este un campo en su formulario de pageBuilder.

12. Agregar un enlace de prueba

Cuando hace clic en el botón CONSTRUIR, porque no redirige a una página web como haría un programa PHP normal, necesita agregar un enlace o algo para ir y ver cuál fue el resultado.

13. Crea el archivo CSS personalizado

Puede almacenar instrucciones de estilo adicionales en este archivo, pero por ahora la única importante es la instrucción de estilo para el principal div

14. Crea y carga wrap.png

Para que esto funcione correctamente, debe crear una sola imagen de píxeles translúcidos y nombrarla wrap.png luego cárguelo a la ruta que especificó en el custom.css archivo.

15. Suba algunas imágenes de fondo adecuadas y pruebe su pageBuilder

Estará encantado de saber que casi hemos terminado, y realmente ahora es solo una cuestión de probar y corregir cualquier error que ocurra. Elija algunas imágenes bonitas y sencillas que no estén demasiado ocupadas y que sean adecuadas para relacionarse con eventos u ocasiones especiales (en nuestro ejemplo, he elegido el Día de la Madre y el Día del Padre). Sube las imágenes a la ruta donde almacenas tus imágenes para tu sitio web. Luego complete el formulario, haga clic en el botón y vea qué sucede. Aquí hay un ejemplo del formulario con todos los campos de datos completados.

Lo cual debería resultar en la creación de algo bastante similar a esto:

Ya hemos adivinado que no desea escribir todo eso desde cero, por lo que puede descargar el código fuente de pageBuilder.php y voucherGen.php en este archivo zip.

Puede aplicar esta técnica de crear archivos HTML como cadenas y luego escribirlos en archivos en todo tipo de situaciones. Solo tenga cuidado de nunca poner algo como esto en un bucle recursivo o llenará su disco duro y bloqueará el servidor.