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.
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.
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.
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 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:
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, 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.
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 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.
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 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.
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
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.
Lo cual debería resultar en la creación de algo bastante similar a esto:
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.
Très très instructif, j'ai essayé et ça marche à merveille, milles merci
¡Eres bienvenido! 👍👍👍