Un guide complet sur la création automatisée de pages Web avec PHP en 2023

Il y a certains moments dans la vie où vous avez besoin d'une page Web pour faire quelque chose de plus que de rester assis sur une page Web. Vous en avez besoin pour gagner sa vie. Une façon de le faire est de le faire fonctionner pour vous, de sorte que vous n'aurez pas à coder à la main chaque mise à jour ou mod de page. Le moyen le plus simple d'apprendre à faire quelque chose comme ça est de le faire réellement, donc dans le reste de cet article, je vais vous montrer une façon de mettre en œuvre un système qui créera de nouvelles pages Web pour vous au contact de un bouton.

Dans ce scénario, nous supposerons que votre client est un restaurant qui souhaite offrir des bons pour différentes occasions spéciales tout au long de l'année. Mais bien sûr, ils ne veulent pas vous payer pour le mettre à jour pour eux, alors vous feriez mieux de vous assurer de leur facturer suffisamment pour ce système d'automatisation qui fera les mises à jour pour eux.

1. Nous devons d'abord créer un modèle de page Web de base.

Ceci est juste un squelette de page Web standard. Vous pouvez lui donner un nom comme "pageBuilder.php" ou quelque chose comme ça. Vous n'êtes pas obligé d'utiliser PHP pour cela. Vous pouvez utiliser un autre langage de programmation, mais pour cet exemple, nous allons garder les choses simples et tout faire en PHP.

2. Ajouter Bootstrap

Cela aidera à améliorer l'apparence du formulaire sans aucun travail supplémentaire. Bien sûr, vous aurez besoin de Bootstrap pour que cela fonctionne.

3. Mettre en place un conteneur

Pour que tout soit bien rangé, nous devons définir un conteneur dans lequel nous allons stocker le contenu de la page.

4. Créer un formulaire Web

Définissez un formulaire Web, et nous ajouterons également un titre sophistiqué au formulaire, qui est facultatif mais une bonne idée.

5. Ajouter les champs de formulaire

C'est vraiment simple. Nous avons juste besoin de collecter quelques détails de base que le robot utilisera pour créer une nouvelle page Web. Les données que nous devons connaître comprennent:

• L'image de fond de la page
• Nom de l'événement célébré
• Headline
• Déclaration d'ouverture
• Une citation ou une déclaration supplémentaire
• Attribution pour devis cite
• Style de police à utiliser pour chacun des quatre éléments de texte d’encadrement (individuellement).
• Plage de dates pour laquelle les bons seront valables
• Offre 1 et Offer 2 qui seront annoncés sur les bons.
• Messages de bons supplémentaires (conditions générales, par exemple)
• Données pour les codes QR du coupon qui seront générés

Voici à quoi cela ressemble:

Et après tout cet effort, nous finirons avec une page qui ressemble à ceci:

 

La bonne nouvelle est que la moitié du travail est maintenant terminée et que c'était la moitié la plus difficile et la plus longue. Le reste est beaucoup plus facile.

6. Créez le fichier de processeur de formulaire

Après avoir créé un formulaire, vous avez besoin d'un logiciel qui traitera les données soumises et en fera quelque chose. Dans ce cas, nous utiliserons les données soumises pour générer un nouveau HTML .

Maintenant, gardez à l'esprit que ce n'est pas la même chose qu'une réponse PHP normale où les données sont utilisées en temps réel et reflétées dynamiquement à l'utilisateur. Au lieu de cela, nous créons une page statique qui existera en permanence jusqu'à ce que nous la remplacions.

Le fichier doit être nommé comme le action valeur d'attribut dans la déclaration de formulaire, donc dans notre exemple qui serait voucherGen.php, et parce que nous n’avons pas spécifié de chemin, il faudrait le stocker au même endroit que pageBuilder.php pour que cela fonctionne.

7. Initialiser les variables

Les données soumises par pageBuilder.php a été retourné comme un tableau associatif appelé $ _POST, et toutes les valeurs de données du tableau sont accessibles via leur contrôle de formulaire HTML prénom les attributs. Par conséquent, l'initialisation de nos variables est en fait assez facile. C'est également facultatif, mais cela rend simplement le code un peu plus ordonné et plus facile à lire. Vous pouvez certainement travailler directement avec le $ _POST valeurs si vous préférez.

 8. Utilisez des conditions pour modifier les polices à leurs valeurs correctes

Faire cela tôt permettra d'économiser du temps et des problèmes plus tard. Nous vérifions simplement quelles valeurs ont été sélectionnées, puis les remplaçons par les noms de police réels.

9. Commencer la construction de la chaîne du générateur

Vraiment, tout ce que nous devons faire ici est de créer une très longue chaîne qui contiendra tout ce qui est nécessaire pour créer la nouvelle page. Nous utiliserons la concaténation de chaînes pour le garder lisible et faciliter la visualisation de l'emplacement des valeurs de données. Cela commence par la configuration de la page HTML de base:

Vous pouvez probablement voir où nous allons avec cela. Notez le point-virgule à la fin. C'est important. De plus, tous les points-virgules qui apparaissent dans le texte (dans le cadre d'une déclaration CSS ou d'un script côté client) doivent être placés entre guillemets.

10. Commencez à ajouter le corps de la page à la chaîne du générateur

Il existe des moyens plus efficaces de créer cette chaîne, mais j'aime rendre le code bien rangé, afin qu'il soit facile à lire. Vous pouvez utiliser des méthodes abrégées pour ce faire, et vous n'avez pas non plus à le faire en tant que processus séparé à l'étape 9. Je pense qu'il est plus facile de comprendre lorsque les différentes sections de la page sont divisées de cette façon.

11. Ecrivez la chaîne du générateur dans un HTML

Dans ce cas, nous codons en dur le nom du fichier, mais vous pourriez (et devriez probablement) en faire un champ dans votre formulaire pageBuilder.

12. Ajouter un lien de test

Lorsque vous cliquez sur le bouton BUILD IT, car il ne redirige pas vers une page Web comme le ferait un programme PHP normal, vous devez ajouter un lien ou quelque chose pour voir le résultat.

13. Créez le fichier CSS personnalisé

Vous pouvez stocker des instructions de style supplémentaires dans ce fichier, mais pour le moment, le seul important est l’instruction de style principal div.

14. Créer et télécharger wrap.png

Pour que cela fonctionne correctement, vous devez créer une image de pixel translucide unique et la nommer wrap.png puis téléchargez-le sur le chemin que vous avez spécifié dans le custom.css fichier.

15. Téléchargez des images d'arrière-plan appropriées et testez votre pageBuilder

Vous serez ravi de savoir que nous avons presque terminé, et il ne s'agit plus que de tester et de corriger les erreurs qui se produisent. Choisissez de belles images simples qui ne sont pas trop chargées et qui conviennent pour des événements ou des occasions spéciales (dans notre exemple, je suis allé avec la fête des mères et la fête des pères). Téléchargez les images sur le chemin où vous stockez vos images pour votre site Web. Remplissez ensuite le formulaire, cliquez sur le bouton et voyez ce qui se passe. Voici un exemple de formulaire avec tous les champs de données remplis.

Ce qui devrait aboutir à créer quelque chose de très similaire à ceci:

Nous avons déjà deviné que vous ne voudriez pas taper tout cela à partir de rien, vous pouvez donc télécharger le code source pour pageBuilder.php et voucherGen.php zip.

Vous pouvez appliquer cette technique de création de fichiers HTML sous forme de chaînes, puis de les écrire dans des fichiers dans toutes sortes de situations. Faites juste attention à ne jamais mettre quelque chose comme ça dans une boucle récursive ou vous remplirez votre disque dur et planterez le serveur.