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

Si se suscribe a un servicio desde un enlace en esta página, Reeves and Sons Limited puede ganar una comisión. Vea nuestro Declaración de Ética.

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 ganarte la vida. Una forma de hacerlo es ponerlo a trabajar para usted, de modo que no tenga que codificar a mano cada actualización o modificación de página. La manera más fácil de aprender cómo hacer algo como esto es haciéndolo realmente, así 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, supondremos 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 pagarle para que lo actualice por ellos, por lo que será mejor que se asegure 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 el esqueleto de una página web estándar. Puede 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, deberá 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 el contenido 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 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 que se utilizará para cada uno de los cuatro elementos de texto de encuadre (endividualmente).
  • 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 eso:

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 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, utilizaremos los datos enviados para generar una nueva 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. Sin duda podría trabajar directamente con el $ _POST valores si lo prefiere.

Captura de pantalla en 2016 05-30 1.55.15-AM

 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.

Captura de pantalla en 2016 05-30 1.55.10-AM9. 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:

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 aparezca dentro del texto (como parte de una declaración CSS o un script del lado del cliente) debe estar 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 ordenar el código 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.

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 CONSTRUIRLO, debido a que no redirige a una página web como lo haría un programa PHP normal, debe 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

Le encantará saber que casi hemos terminado y, en realidad, ahora solo es cuestión de probar y corregir los errores que se produzcan. Elige algunas imágenes bonitas y sencillas que no sean demasiado cargadas y que sean adecuadas para relacionarlas con eventos u ocasiones especiales (en nuestro ejemplo, he optado por el Día de la Madre y el Día del Padre). Cargue las imágenes en 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 completados.

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 supusimos que no querría 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 colapsará el servidor.

Comentarios Comentarios 2

  1. Webmaster de Ufas dice:

    Très très instructif, j'ai essayé et ça marche à merveille, milles merci

    1. Bogdan Rancea dice:

      ¡Eres bienvenido! 👍👍👍

Deje un comentario

Su dirección de correo electrónico no será publicada. Las areas obligatorias están marcadas como requeridas *

Clasificación *

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.