Création de modèles HTML en utilisant PHP. HTML, CSS, PHP, JavaScript, SQL – quoi et pourquoi

L'un des avantages de PHP est la façon dont il fonctionne avec les formulaires HTML.

L'essentiel ici est que chaque élément du formulaire devienne automatiquement disponible pour vos programmes PHP. Pour des informations détaillées sur l'utilisation des formulaires en PHP, lisez la section. Voici un exemple de formulaire HTML :

Votre âge:

Il n'y a rien de spécial dans ce formulaire. Il s'agit d'un formulaire HTML standard sans balises spéciales. Lorsque l'utilisateur remplit le formulaire et clique sur le bouton Soumettre, la page action.php sera appelée. Ce fichier pourrait ressembler à quelque chose comme :

Exemple #2 Afficher les données du formulaire .
Bonjour,Pour vous

années.

Exemple de sortie de ce programme :

Bonjour Sergueï. Vous avez 30 ans. Si vous ne tenez pas compte des morceaux de code avec htmlspecialchars() Et(int) Si vous ne tenez pas compte des morceaux de code avec, le principe de fonctionnement de ce code doit être simple et compréhensible. Garantit que les caractères HTML « spéciaux » sont correctement codés afin qu’aucun code HTML ou Javascript malveillant ne soit inséré dans votre page. Le champ d'âge, dont nous savons qu'il doit être un nombre, peut simplement être converti en entier , qui supprimera automatiquement les caractères indésirables. PHP peut également le faire automatiquement en utilisant l'extension de filtre. Les variables $_POST["name"] et $_POST["age"] sont automatiquement définies pour vous par PHP. Auparavant, nous utilisions la variable superglobale $_SERVER, mais ici nous utilisons également la variable superglobale $_POST, qui contient toutes les données POST. Noter que méthode d'envoi (méthode) de notre formulaire est POST. Si nous utilisions la méthode OBTENIR

, alors nos informations de formulaire seraient dans la variable superglobale $_GET .

Selon la spécification HTTP, vous devez utiliser la méthode POST lorsque vous utilisez le formulaire pour modifier l'état de quelque chose du côté du serveur. Par exemple, si une page dispose d'un formulaire permettant aux utilisateurs d'ajouter leurs propres commentaires, comme celui-ci page ici, le formulaire doit utiliser POST. Si vous cliquez sur "Recharger" ou "Actualiser" sur une page que vous avez atteinte via un POST, c'est presque toujours une erreur - vous ne devriez pas publier deux fois le même commentaire -- c'est pourquoi ces pages ne sont ni mises en signet ni mises en cache.

Vous devez utiliser la méthode GET lorsque votre formulaire récupère quelque chose du serveur et ne change rien. Par exemple, le formulaire d'un moteur de recherche doit utiliser GET, car la recherche sur un site Web ne doit rien changer qui puisse intéresser le client, et la mise en signet ou la mise en cache des résultats d'une requête d'un moteur de recherche est tout aussi utile que la mise en signet ou la mise en cache. une page HTML statique.

il y a 1 an

A préciser :

POST n'est pas plus sécurisé que GET.

Les raisons de choisir GET ou POST impliquent divers facteurs tels que l'intention de la demande (est-ce que vous « soumettez » des informations ?), la taille de la demande (il y a des limites à la longueur d'une URL et les paramètres GET sont envoyés). l'URL) et la facilité avec laquelle vous souhaitez que l'action soit partageable. Par exemple, les recherches Google sont GET car elles facilitent la copie et le partage de la requête de recherche avec quelqu'un d'autre simplement en partageant l'URL.

La sécurité n'est ici qu'une considération en raison du fait qu'un GET est plus facile à partager qu'un POST. Exemple : vous ne souhaitez pas qu'un mot de passe soit envoyé par GET, car l'utilisateur pourrait partager l'URL résultante et exposer par inadvertance son mot de passe.

Cependant, un GET et un POST sont tout aussi faciles à intercepter par une personne malveillante bien placée si vous ne déployez pas TLS/SSL pour protéger la connexion réseau elle-même.

Tous les formulaires envoyés via HTTP (généralement le port 80) ne sont pas sécurisés et aujourd'hui (2017), il n'y a pas beaucoup de bonnes raisons pour qu'un site Web public n'utilise pas HTTPS (qui est essentiellement HTTP + Transport Layer Security).

En prime, si vous utilisez TLS, vous minimisez le risque que vos utilisateurs reçoivent du code (AD) injecté dans votre trafic qui n'y a pas été mis par vous.

De l'auteur : PHP ou HTML – quel est le meilleur ? Ne posez jamais une telle question à un professionnel. Premièrement, à ses yeux vous « tomberez » immédiatement au niveau d’une « théière » complète. Et deuxièmement... Une telle question ne peut se poser qu'à partir d'un « service à thé » complet. Eh bien, aujourd’hui, nous organisons un « tea party » dédié à cet étrange sujet.

Poulet, œuf – qui vient en premier ?

Vous ne devriez pas regarder ce titre avec de tels yeux. Croyez-moi, la question de la priorité entre le langage hypertexte me semble aussi un peu effrayante. Pourquoi est-ce ainsi ? Eh bien, parce que ce n'est pas la première fois que nous nous rencontrons et j'espère vraiment que de telles questions ne se poseront pas pour vous. Mais nous allons le découvrir quand même !

Tout d’abord, découvrons ce qu’est un site Web moderne. Afin de ne pas « vous faufiler » pendant longtemps, renseignez-vous tout de suite. Désormais, toute ressource Web est créée à l'aide de quatre technologies :

HTML – il (comme auparavant) est utilisé pour baliser les pages en leurs éléments constitutifs.

CSS – responsable de l'apparence du site.

JavaScript – assure l'interaction de l'UI (interface utilisateur) avec une personne.

PHP – assure la création dynamique des ressources et toutes les « conséquences » qui en découlent : CMS, plugins pour celles-ci, etc.

Oui, j'ai presque oublié MySQL. Il s'agit d'un SGBD. Tu penses que je plaisante ? Pas vraiment! C'est juste que notre sujet est tellement "thé" - en quoi le HTML diffère-t-il du PHP. Je décernerais des prix Ig Nobel pour ces questions (il y en a).

Eh bien, essayez de supprimer l'un des composants répertoriés d'un site Web moderne et vous n'obtiendrez pas une ressource dynamique, mais une horreur statique à peine « tissée ». Surtout si vous vous en débarrassez.

Différences dans les exemples

Les arguments oraux sur la priorité et la différence entre les deux disciplines peuvent être donnés à l’infini. Il est préférable d'examiner les différences entre PHP et HTML à l'aide d'exemples spécifiques. Voyons quelle option sera la plus simple pour changer la couleur d'arrière-plan.

Il existe un moteur très populaire appelé WordPress. Il fonctionne sur PHP. À titre de comparaison, prenons le balisage d'une page Web ordinaire et essayons d'y modifier la couleur d'arrière-plan. Ensuite, nous implémenterons la même chose en utilisant le panneau d'administration du CMS.

Pour mieux comprendre en quoi HTML et PHP diffèrent, essayez de trouver la ligne dans ce code qui contrôle la couleur d'arrière-plan. Laissez-moi vous dire tout de suite qu'elle n'est pas là. Cette propriété de style (background-color) doit être spécifiée. En même temps, il faut savoir où l’ajouter. Et l'ensemble du site ne comprend pas une page, mais des dizaines.

Nous allons maintenant faire la même chose via le panneau d'administration WordPress. Pour ce faire, il faut se rendre dans l'éditeur visuel de la page et modifier le paramètre correspondant dans le thème installé en cliquant sur quelques boutons.

Dans cet article, je ne vous expliquerai pas pourquoi les sites Web sont nécessaires et quel type d'argent vous pouvez gagner avec eux. Ici, je voulais juste parler des différences entre les sites créés à l'aide de différents outils.

Considérez un site Web HTML classique

D'une part, nous prendrons un site HTML classique, essentiellement statique. En termes simples, il existe un certain nombre de pages contenant des informations qui sont reliées entre elles par des liens. Il n'y a généralement pas beaucoup de pages sur un tel site, à quelques exceptions près.

Et il y a peu de pages sur de tels sites car lorsqu'un tel site commence à se développer, il devient très gênant à gérer. Pour cette raison, une personne arrête complètement de surveiller le site ou essaie d'utiliser une sorte de système de gestion de contenu (CMS). Il y a aussi des personnes qui tentent d'apprendre des langages de programmation pour le WEB afin de rendre leur site internet automatisé et donc plus pratique à gérer.

Mais comme le montre l'expérience, seuls quelques-uns s'acquittent de cette tâche et leurs sites continuent de croître et de se développer.

Et tout le monde ?

Certains surfent sur Internet, d’autres tentent d’acheter des livres papier. Mais sans une connaissance de base de la structure de ces langages de programmation, sans comprendre les bases de la création de sites Web, de telles tentatives n’aboutissent généralement à rien.

D'un autre côté, regardons un site réalisé en utilisant une combinaison de HTML classique et d'un langage de programmation simple pour le Web - PHP.

La différence la plus importante entre ce site et le précédent est qu'un tel site peut être créé en tant que constructeur à partir de blocs. Nous avons créé un en-tête de site - nous l'avons placé dans un fichier séparé, nous avons créé un bloc de gauche avec la navigation sur le site - nous l'avons placé dans un fichier séparé, etc.

Qu'est-ce que cela nous donne ?

Cela vous donne la liberté. Ceux. Nous pouvons désormais connecter ces blocs au framework principal, et même si au fil du temps nous avons 10 000 pages sur le site et que nous devons soudainement modifier un élément de navigation, cela n'aura rien de compliqué. Nous avons ouvert le fichier avec le bloc souhaité, l'avons édité et c'est tout ! Sur l’ensemble des 10 000 pages, ce changement s’est produit en un instant.

De plus, toutes les informations utiles (articles, descriptions de biens et services, cours, notes, etc.) d'un tel site peuvent être stockées dans une base de données, ce qui offre encore plus d'avantages :

— Le site prend moins de place ;
— La sauvegarde des données est simplifiée ;
— Cela facilite la modification de n'importe quelle donnée ;
— Il devient possible de compter n'importe quelle information (combien de fois une page a été consultée, un fichier a été téléchargé, des commentaires ont été ajoutés, etc.) ;
— Vous pouvez utiliser de nombreux scripts PHP prêts à l'emploi sur le site ;
- etc.

HTML ou PHP

Si nous faisons une analogie entre les sites Web HTML et PHP avec les voitures, alors, tout comme les voitures modernes sont devenues plus confortables, plus puissantes, plus fonctionnelles et en même temps ont commencé à consommer moins de carburant que leurs homologues d'il y a 50 ans, de même le site Web PHP est devenu plus léger, plus fonctionnel, plus facile à gérer et plus mobile que son adversaire HTML.

Malheureusement, il est impossible de couvrir entièrement ce sujet dans le cadre d'un seul article, mais je pense que même à partir des points que j'ai décrits ici, vous pourrez tirer une conclusion sur le site Web qu'il est préférable de créer afin de suivre le rythme. avec le temps et obtenez un retour sur investissement décent dans les efforts de création du site.

Evgueni Popov– Auteur du cours vidéo de 22,5 heures « Tous les points techniques du commerce en ligne au format vidéo 2 ou PHP+MySQL pour les débutants », qui montre l'ensemble du processus de création d'un site Web PHP à partir de zéro directement sur l'écran de votre ordinateur avec des explications vocales.

En travaillant sur les mises à jour du site Web, j'ai remarqué mon ancienne mise en page alors que j'étais encore nouveau sur PHP. Compte tenu de l'expérience acquise, les défauts de l'ancienne méthode de mise en page sont visibles lorsque le HTML encadre PHP et ne se trouve pas à l'intérieur.

Malheureusement, je n’ai rien trouvé d’intéressant sur ce sujet pour savoir comment le mettre en page au mieux. Cependant, en regardant le code de mise en page moderne, j'ai de plus en plus remarqué que le HTML est presque toujours situé à l'intérieur des structures PHP. Et cela présente des avantages significatifs.

Examinons les avantages d'avoir du HTML dans PHP en utilisant l'exemple de la sortie d'en-tête dans WordPress.

Vous trouverez ci-dessous une construction à partir du type de code suivant : s'il y a des données dans un certain champ personnalisé, alors nous affichons un en-tête avec ces données. J'ai pris le code de mise en page dans sa forme originale, comme avant. Il ressemblait à ceci :

Cette conception de code présente plusieurs inconvénients. Premièrement, ce n'est pas visuel - tout est écrit sur une seule ligne. Cela a été fait exprès pour qu'il n'y ait pas d'espaces vides entre les balises H1, H2, H3. Après tout, il n’y a rien de bon à avoir des espaces dans les balises de titre. Il est impossible de prédire comment dans ce cas, parmi les moteurs de recherche, cela affectera le site. Si des espaces supplémentaires réduiront ou non la force du titre. Étant donné qu’il n’y a pas de réponse à une telle question, il faut s’attendre au pire. Et donc écrire ensemble.

Sinon, dans la continuité de ce qui a été dit, si on rend visuel le code ci-dessus :

Ensuite, lors de la visualisation du code HTML de la page dans le navigateur dans l'en-tête des balises h3, nous verrons ce qui suit :

Nous avons également besoin que le code soit facile à lire lors de l'édition, puis il s'affichera également de manière transparente lors du chargement du site. A savoir, pour que cela ressemble à ceci :

Pour ce faire, vous devez utiliser PHP et y envelopper tout le code HTML. Et nous obtenons le type de code php suivant pour l’en-tête WordPress :

J'ai beaucoup appris sur le fonctionnement des frameworks MVC en regardant et en étudiant ceux existants. Il semble que chaque framework que je vois ait une présentation dans laquelle chaque méthode de chaque contrôleur possède son propre fichier modèle. Il y aura donc un schéma d’entrée, un schéma de sortie, un registre, etc. Etc.

Ma question est de savoir comment et pourquoi créer un modèle pour la page entière dans un seul fichier. Supposons que vous souhaitiez afficher un formulaire de connexion sur plusieurs pages. N'auriez-vous pas besoin de créer un formulaire de connexion pour chaque modèle que vous souhaitez afficher ? N'est-ce pas contraire aux règles de ne pas répéter (DRY) ?

La façon dont j'ai fait les choses jusqu'à présent est de créer des blocs de lettres modèles, puis de les combiner pour créer chaque page. Alors au lieu de faire quelque chose comme ça,

$title = "Blah Blah Blah"; $user = "Jon Miller"; include "index.phtml"; !}

je l'ai fait

$title = "Blah Blah Blah"; include "header.phtml"; $user = "Jon Miller"; include "user.phtml"; include "login_form.phtml"; include "footer.phtml"; header.phtml !} utilisateur.phtml

Comme toujours, j'aimerais simplement connaître la bonne façon de procéder, ainsi que le comment et le pourquoi... Cela semble aller à l'encontre de la règle DRY.

4 réponses

Un mot : Organisation. Séparer chaque partie de la page permettra à chacune d’être visualisée/modifiée séparément. Ce concept simple est très utile. Par exemple, tout membre d'une équipe souhaitant gérer le processus de connexion peut facilement comprendre qu'il doit modifier login_form.phtml , et peut être assuré que la modification de login_form.phtml sera moins susceptible d'interférer par inadvertance avec d'autres fonctionnalités.

La meilleure façon est de savoir comment je le fais (pas exactement, mais similaire).

$Titre = "Blah Blah Blah"; $User = "Jon Miller"; $ThemeName = "MyGreenPage"; $Contents = array("User", "Login_Form"); function Include($FileName) { if (file_exists($FileName)) include $FileName; } !}

MaPageVerte.phtml :

Utilisateur.pcss :

/* Certains styles nécessaires à l'utilisateur */

Utilisateur.pjs :

/* Certains scripts nécessaires à l'utilisateur */

Utilisateur.phtml :

Login_Form.pcss :

/* Certains styles nécessaires à Login_Form */

Login_Form.pjs :

/* Certains scripts nécessaires à Login_Form */

login_form.phtml :

Permettez-moi de vous rappeler encore une fois que ce n'est pas ce que je fais (que j'utilise la POO), donc cela peut ne pas fonctionner exactement tel quel et vous devrez peut-être le modifier.

Vous devriez vérifier les concepts de mises en page et d’assistance d’affichage. Bien que je sois lié à la version Zend Framework de ces concepts, d'autres frameworks MVC (et le concept MVC) devraient également les avoir.

L'idée de base est que votre page « affichage » - par exemple, un formulaire de connexion - est incluse dans la mise en page de votre site - le modèle global utilisé sur votre site. Lorsque vous demandez un autre contrôleur, avec une vue différente – par exemple un profil utilisateur – cette vue est également incluse dans la même présentation.

Pour inclure quelque chose comme un formulaire de connexion sur toutes les pages, vous pouvez utiliser l'assistant d'affichage. Cet assistant de vue peut afficher l'utilisateur actuel ou afficher un formulaire de connexion en fonction de l'état de connexion. Les assistants de vue peuvent être inclus dans la mise en page ou activés par un contrôleur spécifique (tant que le framework MVC autorise certains types de segments de rendu).

La méthode "inclure" en deux étapes fonctionne mieux que l'inclusion linéaire de parties (y compris l'en-tête, puis le contenu, puis le pied de page - ce que vous faites maintenant) car vos modèles n'ont pas besoin de séparer les balises HTML. Le tutoriel Zend contient un bel exemple visuel de modèles de vue dans une mise en page.

La manière la plus courante de créer des modèles HTML avec PHP consiste à utiliser l'un de ces modèles populaires :

Alternativement, vous pouvez simplement placer des espaces réservés dans votre code HTML qui ressemblent à<% variablename %>. Chargez simplement votre code HTML, exécutez l'expression régulière, recherchez tous les espaces réservés et remplacez-les par les variables appropriées.

Alternativement, vous pouvez charger votre HTML, l'analyser comme Document DOM puis changez votre DOM. J'ai créé une bibliothèque