Création automatisée de pages Web avec PHP

Il y a des moments dans la vie où vous avez besoin d'une page Web pour faire plus que simplement rester assis sur une page Web. Vous en avez besoin pour gagner sa subsistance. Une façon de le faire est de le mettre au travail pour que vous n'ayez pas à coder chaque mise à jour ou mod de page. La meilleure façon d'apprendre à faire quelque chose comme cela est de le faire. Dans la suite de cet article, je vais vous montrer un moyen de mettre en place un système qui vous permettra de créer de nouvelles pages Web. un bouton.

Dans ce scénario, nous supposerons que votre client est un restaurant qui souhaite proposer 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 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 du genre. 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.

Capture d'écran à 2016 05-30-1.56.52 AM

2. Ajouter Bootstrap

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

Capture d'écran à 2016 05-30-1.56.56 AM

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.

Capture d'écran à 2016 05-30-1.56.48 AM

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.

Capture d'écran à 2016 05-30-1.56.43 AM

5. Ajouter les champs de formulaire

C'est vraiment simple. Nous devons simplement collecter quelques informations de base que le robot utilisera pour créer une nouvelle page Web. Les données que nous devons connaître incluent:

  • 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 de cadrage (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:

Capture d'écran à 2016 05-30-1.56.00 AM

Capture d'écran à 2016 05-30-1.55.54 AM

Capture d'écran à 2016 05-30-1.55.36 AM

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

Capture d'écran à 2016 05-30-1.55.22 AM

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 fastidieuse. 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 de manière dynamique par l'utilisateur. Au lieu de cela, nous créons une page statique qui existera de manière permanente 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. Donc initialiser nos variables est en fait assez facile. C'est également facultatif, mais cela donne simplement au code un aspect plus net et plus facile à lire. Vous pouvez certainement travailler directement avec le $ _POST valeurs si vous préférez.

Capture d'écran à 2016 05-30-1.55.15 AM

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

Faire cela tôt économisera du temps et des ennuis plus tard. Nous vérifions simplement quelles valeurs ont été sélectionnées, puis nous les remplaçons par les noms de police réels.

Capture d'écran à 2016 05-30-1.55.10 AM9. Commencer la construction de la chaîne du générateur

En réalité, tout ce dont nous avons besoin ici est de créer une chaîne très longue qui contiendra tout le nécessaire pour créer la nouvelle page. Nous allons utiliser la concaténation de chaînes pour la garder lisible et faciliter le repérage des endroits où les valeurs de données ont été insérées. Cela commence par la page HTML de base mise en place:

Capture d'écran à 2016 05-30-1.55.06 AM

Vous pouvez probablement voir où nous allons avec cela. Notez le point-virgule à la fin. C'est important. 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 également figurer entre guillemets.

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

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

Capture d'écran à 2016 05-30-1.55.00 AM

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.

Capture d'écran à 2016 05-30-1.54.55 AM

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.

Capture d'écran à 2016 05-30-1.54.50 AM

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.

Capture d'écran à 2016 05-30-1.54.45 AM

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 ravis d'apprendre que nous avons presque terminé et qu'il ne s'agit plus que de tester et de corriger les erreurs éventuelles. Choisissez quelques belles images simples qui ne sont pas trop occupées et qui conviennent à des événements spéciaux ou à des occasions spéciales (dans notre exemple, je suis parti 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 renseignés.

Picture1

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

Capture d'écran à 2016 05-30-1.54.11 AM

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 consistant à créer des fichiers HTML sous forme de chaînes, puis à 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, sinon vous remplirez votre disque dur et planterez le serveur.

Avatar

Catalin Zorzini

Je suis un blogueur en conception de sites Web et j'ai lancé ce projet après quelques semaines de difficultés à trouver la meilleure plateforme de commerce électronique pour moi-même. Découvrez mon courant top Constructeurs de sites de commerce électronique 10.