Creación automatizada de páginas web con PHP

Hay ciertos momentos en la vida en los que necesita una página web para hacer algo más que simplemente sentarse allí siendo una página web. Lo necesitas para ganar su 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 cómo hacer algo como esto es hacerlo en realidad, 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 el toque de un botón.

En este escenario, asumiremos que su cliente es un restaurante que desea ofrecer vales para diferentes ocasiones especiales a lo largo del año. Pero, por supuesto, no quieren pagarle para que se los actualice, así que mejor asegúrese de facturarlos 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.

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

Captura de pantalla en 2016 05-30 1.56.52-AM

2. Añadir Bootstrap

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

Captura de pantalla en 2016 05-30 1.56.56-AM

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.

Captura de pantalla en 2016 05-30 1.56.48-AM

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.

Captura de pantalla en 2016 05-30 1.56.43-AM

5. Agregue los campos de formulario

Esto es realmente simple. Solo necesitamos recopilar algunos detalles básicos que utilizará el robot 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 para usar para cada uno de los cuatro elementos de texto de encuadre (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:

Captura de pantalla en 2016 05-30 1.56.00-AM

Captura de pantalla en 2016 05-30 1.55.54-AM

Captura de pantalla en 2016 05-30 1.55.36-AM

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

Captura de pantalla en 2016 05-30 1.55.22-AM

La buena noticia es que la mitad del trabajo ya está completo, y fue la mitad más difícil y lenta. 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, utilizaremos los datos enviados para generar un nuevo HTML .

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

El archivo debe tener el mismo nombre que acción 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ías trabajar directamente con el $ _POST valores si lo prefiere.

Captura de pantalla en 2016 05-30 1.55.15-AM

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

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

Captura de pantalla en 2016 05-30 1.55.10-AM9. Comenzar a construir la cadena del generador

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

Captura de pantalla en 2016 05-30 1.55.06-AM

Probablemente puedas 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 estar contenido 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 de mano corta para hacer esto, y tampoco tiene que hacerlo como un proceso separado para el paso 9. Creo que es más fácil de entender cuando las diferentes secciones de la página se dividen de esta manera.

Captura de pantalla en 2016 05-30 1.55.00-AM

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.

Captura de pantalla en 2016 05-30 1.54.55-AM

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.

Captura de pantalla en 2016 05-30 1.54.50-AM

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

Captura de pantalla en 2016 05-30 1.54.45-AM

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ás encantado de saber que casi hemos terminado, y en realidad ahora es solo una cuestión de probar y corregir cualquier error que ocurra. Elija algunas imágenes simples y agradables que no estén demasiado ocupadas y que sean adecuadas para relacionarse con eventos u ocasiones especiales (en nuestro ejemplo, He ido con el Día de la Madre y el Día del Padre). Suba las imágenes a la ruta donde almacena sus imágenes para su 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 rellenados.

Picture1

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

Captura de pantalla en 2016 05-30 1.54.11-AM

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 no poner algo como esto en un bucle recursivo o llenará su disco duro y bloqueará el servidor.

Catalin Zorzini

Soy un blogger de diseño web y comencé este proyecto después de pasar algunas semanas luchando por descubrir cuál es la mejor plataforma de comercio electrónico para mí. Echa un vistazo a mi actual top constructores de sitios de comercio electrónico de 10.