PhpBB Lab Académie

Comprendre le rôle de PHP par rapport à HTML et CSS, distinguer le navigateur du serveur, comprendre pourquoi un fichier PHP doit être exécuté par un serveur, créer index.php à partir de la vraie page d’accueil du projet et exécuter une première instruction PHP avec echo.

Avant de commencer

Vous avez terminé les cours HTML et CSS.

Vous disposez maintenant du même petit site construit progressivement pendant tout le parcours :

mon-premier-site

index.html
apropos.html
contact.html
ordinateur.jpg
styles.css

Son en-tête affiche toujours :

Mon premier site HTML

HTML nous a permis de construire le sens et la structure du contenu.

CSS nous a permis de contrôler sa présentation.

Nous avons maintenant une page d’accueil, une page À propos, une page Contact, une navigation, une image, un tableau, un formulaire et une feuille de style.

Mais une limite importante reste visible.

Le formulaire de :

contact.html

possède de vrais champs.

Pourtant, aucun programme côté serveur ne reçoit encore les données lorsqu’un utilisateur les envoie.

Nous allons maintenant commencer à apprendre le langage qui ajoutera progressivement cette logique :

PHP

Dans cette première leçon, nous ne traiterons pas encore le formulaire.

Nous ne créerons pas non plus de base de données.

Nous allons d’abord répondre à quatre questions :

- Qu’est-ce que PHP ?
- Où le code PHP est-il exécuté ?
- Pourquoi devons-nous utiliser un serveur local ?
- Comment créer et exécuter notre première page PHP à partir du site existant ?

À la fin de cette leçon, vous aurez créé :

index.php

à partir de votre vraie page d’accueil et vous aurez exécuté votre première instruction PHP.

1. Qu’est-ce que PHP ?

PHP est un langage de programmation principalement utilisé côté serveur pour produire des pages et traiter des données dans une application web.

Pour commencer, retenez cette distinction :

HTML
= structure et sens du contenu

CSS
= présentation du contenu

PHP
= logique exécutée côté serveur

PHP ne remplace donc ni HTML ni CSS.

Il vient compléter ce que nous avons déjà construit.

2. Que signifie côté serveur ?

Jusqu’à présent, nous avons surtout observé ce que le navigateur reçoit.

Lorsque vous ouvrez une page HTML, le navigateur lit le document et construit la page.

Avec PHP, une étape supplémentaire apparaît.

Le navigateur demande une page au serveur.

Le serveur peut alors exécuter le code PHP.

Le résultat produit est ensuite envoyé au navigateur.

Nous pouvons représenter ce cycle simplement :

1. Le navigateur demande une page.

2. Le serveur reçoit la demande.

3. Le serveur exécute le code PHP.

4. PHP produit un résultat.

5. Le serveur envoie le résultat au navigateur.

6. Le navigateur affiche le HTML reçu.

3. Le navigateur ne reçoit pas le code PHP exécuté

C’est une distinction importante.

Imaginons que le serveur exécute :

<?php
echo 'Bonjour';
?>

Le navigateur ne reçoit normalement pas :

<?php
echo 'Bonjour';
?>

Il reçoit le résultat produit :

Bonjour

Si ce résultat se trouve dans une page HTML, le navigateur reçoit du HTML contenant ce résultat.

PHP est donc exécuté avant que la réponse finale soit envoyée au navigateur.

4. Pourquoi ne peut-on pas simplement double-cliquer sur un fichier PHP ?

Un navigateur sait afficher du HTML et appliquer du CSS.

Mais il n’exécute pas lui-même PHP comme le ferait un serveur PHP.

Si vous ouvrez directement un fichier PHP depuis votre disque avec une adresse de type :

file:///...

vous ne reproduisez pas le fonctionnement normal d’une application PHP.

Le fichier doit être traité par un environnement capable d’exécuter PHP.

5. Utiliser un serveur local

Pour apprendre sur votre ordinateur, nous allons utiliser un serveur local.

Sous Windows, un environnement comme :

Wampserver

convient très bien.

Le principe reste le même avec un autre environnement local.

Votre projet doit être placé dans un dossier servi par votre serveur local.

Avec Wampserver, ce dossier se trouve généralement dans :

www

Le site sera ensuite ouvert avec une adresse locale, par exemple :

http://localhost/mon-premier-site/

et non en double-cliquant directement sur le fichier.

6. Vérifier que PHP fonctionne avant de modifier le projet

Avant d’aller plus loin, votre serveur local doit être démarré.

Ouvrez votre navigateur et vérifiez que :

http://localhost/

répond correctement.

Nous ne cherchons pas encore à comprendre la configuration complète du serveur.

Nous voulons seulement nous assurer qu’un environnement PHP est disponible pour exécuter les fichiers que nous allons créer.

7. Reprendre la vraie page d’accueil

Nous n’allons pas créer une page de démonstration sans rapport avec le projet.

Ouvrez le dossier :

mon-premier-site

Vous devez y retrouver notamment :

index.html

Cette page contient déjà :

- l’en-tête ;
- la navigation ;
- le titre Accueil ;
- les quatre grandes sections ;
- l’image ;
- le tableau ;
- les classes ajoutées pendant le cours CSS.

Nous allons partir exactement de cette page.

8. Créer un nouveau fichier index.php

Ne supprimez pas :

index.html

Pour cette première leçon, nous allons conserver l’original comme point de sécurité.

Créez un nouveau fichier :

index.php

dans le même dossier.

Votre projet contient maintenant notamment :

index.html
index.php
apropos.html
contact.html
ordinateur.jpg
styles.css

9. Copier le contenu de index.html

Copiez tout le contenu actuel de :

index.html

dans :

index.php

Enregistrez le nouveau fichier.

Pour le moment, les deux fichiers contiennent donc le même HTML.

C’est volontaire.

Nous allons d’abord vérifier qu’un fichier

.php

peut contenir le HTML que vous connaissez déjà.

10. Pourquoi le HTML fonctionne-t-il dans un fichier PHP ?

Un fichier PHP peut contenir du HTML normal.

Le serveur n’exige pas que chaque ligne soit du code PHP.

Le HTML placé en dehors des balises PHP est envoyé comme contenu de la réponse.

Cela signifie que notre page peut conserver :

<!doctype html>
<html lang="fr">
...
</html>

exactement comme auparavant.

Nous n’allons donc pas réécrire tout le site dans un nouveau langage.

11. Ouvrir index.php par le serveur local

Dans le navigateur, ouvrez :

http://localhost/mon-premier-site/index.php

Adaptez le nom du dossier si votre projet local porte un autre nom.

La page doit ressembler à votre page d’accueil habituelle.

La feuille :

styles.css

continue à être chargée.

L’image :

ordinateur.jpg

continue à fonctionner.

Les éléments HTML conservent leur rôle.

Nous avons seulement changé le type du fichier demandé au serveur.

12. Si la page CSS semble absente

Vérifiez que :

index.php

se trouve dans le même dossier que :

styles.css

et que le

head

contient toujours :

<link rel="stylesheet" href="styles.css">

Le passage de :

index.html

à :

index.php

ne change pas automatiquement les chemins relatifs.

Si les fichiers restent dans le même dossier, le même chemin vers

styles.css

continue à fonctionner.

13. Ajouter notre première instruction PHP

Nous allons maintenant ajouter une petite sortie PHP dans la vraie page.

Dans :

index.php

repérez :

<h1>Accueil</h1>
<p>Bienvenue sur le site que je construis pendant mon apprentissage de HTML.</p>

Juste après ce paragraphe, ajoutez :

<p><?php echo 'Cette phrase a été générée par PHP.'; ?></p>

Enregistrez le fichier.

Actualisez ensuite :

http://localhost/mon-premier-site/index.php

Une nouvelle phrase doit apparaître :

Cette phrase a été générée par PHP.

Vous venez d’exécuter votre première instruction PHP dans le fil rouge du projet.

14. Décomposer la ligne

Reprenons :

<p><?php echo 'Cette phrase a été générée par PHP.'; ?></p>

Cette ligne contient deux langages.

Le début :

<p>

est du HTML.

La partie :

<?php
...
?>

délimite ici le code PHP.

Et :

</p>

ferme le paragraphe HTML.

Nous avons donc conservé la structure HTML et utilisé PHP uniquement pour produire le texte placé à l’intérieur.

15. Comprendre <?php

La séquence :

<?php

indique le début d’un bloc de code PHP.

À partir de cette balise, le serveur interprète ce qui suit comme du PHP jusqu’à la fermeture du bloc.

Dans notre exemple, nous revenons ensuite au HTML avec :

?>

Nous apprendrons plus tard que tous les fichiers PHP ne nécessitent pas forcément une balise fermante.

Pour cette première page mêlant HTML et PHP, cette écriture rend la transition facile à observer.

16. Comprendre echo

Dans :

echo 'Cette phrase a été générée par PHP.';

le mot :

echo

permet d’envoyer une valeur dans la sortie produite par PHP.

Ici, cette valeur est le texte :

Cette phrase a été générée par PHP.

Nous pouvons donc lire :

echo
= envoie cette valeur dans la réponse produite

17. Comprendre les guillemets simples

Le texte est entouré par :

'

Nous obtenons :

'Cette phrase a été générée par PHP.'

Pour le moment, retenez simplement que ces guillemets délimitent une chaîne de caractères.

Une chaîne de caractères représente du texte.

Nous étudierons les valeurs et les types de données plus précisément dans les prochaines leçons.

18. Comprendre le point-virgule

Notre instruction se termine par :

;

Nous avons donc :

echo 'Cette phrase a été générée par PHP.';

En PHP, de nombreuses instructions se terminent par un point-virgule.

Nous prendrons l’habitude de l’écrire lorsque la syntaxe l’exige.

Si vous l’oubliez ici, PHP produira une erreur de syntaxe.

19. Ce que le navigateur reçoit réellement

Lorsque le serveur exécute :

<p><?php echo 'Cette phrase a été générée par PHP.'; ?></p>

le résultat envoyé au navigateur correspond à quelque chose comme :

<p>Cette phrase a été générée par PHP.</p>

Le navigateur reçoit donc du HTML.

Il n’a pas besoin de comprendre :

echo

ni :

<?php

C’est le serveur qui a déjà effectué ce travail.

20. Vérifier avec le code source de la page

Dans votre navigateur, affichez le code source reçu pour :

index.php

Recherchez :

Cette phrase a été générée par PHP.

Vous devez retrouver le résultat dans le HTML reçu.

En revanche, vous ne devez pas retrouver l’instruction PHP exécutée telle quelle :

echo 'Cette phrase a été générée par PHP.';

Cette vérification permet de constater concrètement la différence entre :

code PHP exécuté sur le serveur

et :

résultat envoyé au navigateur

21. PHP ne remplace pas CSS

La phrase produite par PHP se trouve dans :

<p>...</p>

Elle utilise donc la présentation générale de votre site.

Nous n’allons pas utiliser PHP pour choisir les polices, les espacements ou les couleurs ordinaires.

Ces responsabilités restent dans :

styles.css

Nous conservons :

PHP
= logique et production dynamique

CSS
= présentation

22. PHP ne remplace pas HTML

Nous conservons également :

header
nav
main
section
article
table
form
label
input

dans le document.

PHP peut produire du HTML ou décider quel contenu doit apparaître.

Mais les éléments HTML conservent leur rôle sémantique.

Nous ne devons pas abandonner la structure accessible construite dans les cours précédents simplement parce que PHP entre dans le projet.

23. Ne pas traiter le formulaire trop tôt

Notre page :

contact.html

contient déjà des champs comme :

nom
email
telephone
contact-prefere
message
copie

Il serait tentant de vouloir immédiatement recevoir ces données en PHP.

Nous n’allons pas le faire dans cette première leçon.

Avant de traiter un formulaire, nous devons comprendre plusieurs notions :

- les variables ;
- les types de valeurs ;
- les conditions ;
- les tableaux ;
- les fonctions ;
- les données reçues par une requête ;
- la validation ;
- l’échappement des valeurs réaffichées.

Nous suivrons cet ordre pour ne pas utiliser des notions qui n’ont pas encore été expliquées.

24. Conserver index.html pour le moment

Nous avons créé :

index.php

mais nous n’avons pas supprimé :

index.html

C’est volontaire.

Nous sommes au début de la transformation du projet.

Nous allons avancer progressivement.

Lorsque nous aurons compris comment PHP s’intègre au site, nous pourrons décider quelles pages doivent devenir des fichiers

.php

et mettre les liens à jour de manière cohérente.

Nous ne faisons pas cette migration complète avant de l’avoir expliquée.

25. Si PHP s’affiche comme du texte

Si vous voyez littéralement :

<?php echo 'Cette phrase a été générée par PHP.'; ?>

dans la page ou dans un contexte où il ne devrait pas apparaître, vérifiez d’abord que vous ouvrez bien le fichier via le serveur local.

L’adresse doit ressembler à :

http://localhost/mon-premier-site/index.php

et non à :

file:///.../index.php

Vérifiez également que le serveur local est démarré.

26. Si une erreur PHP apparaît

Une erreur n’est pas un échec du cours.

Elle indique qu’une partie du code ne peut pas être interprétée comme prévu.

Pour notre première instruction, vérifiez notamment :

- la présence de

<?php

;
- la présence de

echo

;
- les deux guillemets simples autour du texte ;
- le point-virgule ;
- la fermeture

?>

.

Vérifiez un élément à la fois.

Nous conserverons cette méthode tout au long du cours.

27. Notre premier état PHP du projet

À la fin de cette leçon, le dossier contient notamment :

index.html
index.php
apropos.html
contact.html
ordinateur.jpg
styles.css

Le fichier :

index.php

reprend la vraie page d’accueil et contient une première instruction PHP.

Nous n’avons supprimé aucune partie du fil rouge.

Nous avons simplement ajouté une nouvelle capacité au projet.

28. Ce que PHP a réellement fait dans cette leçon

PHP n’a pas encore :

- lu une base de données ;
- traité le formulaire ;
- créé une session ;
- utilisé une condition ;
- utilisé une boucle.

Il a simplement produit une valeur dans la réponse HTML.

C’est suffisant pour cette première étape.

Nous avons d’abord construit le modèle mental nécessaire :

le navigateur demande

le serveur exécute PHP

le navigateur reçoit le résultat

29. Préparer la prochaine étape

Pour le moment, notre instruction contient directement le texte :

'Cette phrase a été générée par PHP.'

Si nous voulions réutiliser une valeur ou la modifier à plusieurs endroits, écrire directement le texte dans chaque instruction deviendrait peu pratique.

PHP permet de stocker une valeur dans :

une variable

Dans la prochaine leçon, nous continuerons dans :

index.php

et nous découvrirons progressivement :

- ce qu’est une variable ;
- comment la créer ;
- comment lui donner une valeur ;
- comment afficher cette valeur avec

echo

.

Nous utiliserons toujours le même site.

30. Ce que vous devez comprendre avant la prochaine leçon

Vous devez maintenant être capable d’expliquer :

- le rôle général de PHP ;
- la différence entre HTML, CSS et PHP ;
- ce que signifie l’expression côté serveur ;
- pourquoi un fichier PHP doit être traité par un serveur PHP ;
- pourquoi nous utilisons une adresse

http://localhost/...

;
- pourquoi un fichier

.php

peut contenir du HTML normal ;
- le rôle de

<?php

et

?>

dans notre exemple ;
- le rôle de

echo

;
- ce qu’est une chaîne de caractères à ce stade du cours ;
- pourquoi le point-virgule est présent ;
- pourquoi le navigateur reçoit le résultat produit plutôt que le code PHP exécuté ;
- pourquoi nous conservons HTML pour la structure et CSS pour la présentation ;
- pourquoi nous ne traitons pas encore le formulaire de contact.

Retenez surtout :

le navigateur demande la page

le serveur exécute PHP

PHP produit un résultat

le navigateur reçoit et affiche ce résultat

Dans la prochaine leçon, nous garderons exactement le même fichier

index.php

et nous découvrirons les variables.

Reprenons le vrai début du contenu principal de :

index.php

Nous conservons :

<h1>Accueil</h1>
<p>Bienvenue sur le site que je construis pendant mon apprentissage de HTML.</p>

Puis nous ajoutons :

<p><?php echo 'Cette phrase a été générée par PHP.'; ?></p>

Le serveur exécute :

echo 'Cette phrase a été générée par PHP.';

et le navigateur reçoit un résultat équivalent à :

<p>Cette phrase a été générée par PHP.</p>

HTML conserve la structure du paragraphe.

CSS continue à contrôler sa présentation.

PHP produit dynamiquement le texte placé à l’intérieur.

Vous allez maintenant refaire les étapes essentielles de cette première leçon dans le vrai projet.

1. Vérifier le serveur local

Démarrez votre environnement PHP local.

Vérifiez que :

http://localhost/

répond dans le navigateur.

2. Créer index.php

Dans :

mon-premier-site

créez :

index.php

Ne supprimez pas

index.html

.

3. Copier la vraie page d’accueil

Copiez tout le contenu actuel de :

index.html

dans :

index.php

Enregistrez.

4. Ouvrir index.php par le serveur

Ouvrez une adresse de ce type :

http://localhost/mon-premier-site/index.php

Vérifiez que la page conserve sa structure, son image et sa feuille CSS.

5. Ajouter la première instruction PHP

Après le paragraphe d’introduction de la page d’accueil, ajoutez :

<p><?php echo 'Cette phrase a été générée par PHP.'; ?></p>

Enregistrez puis actualisez la page.

6. Vérifier le résultat

Vous devez voir :

Cette phrase a été générée par PHP.

dans la page.

7. Vérifier le code source reçu

Affichez le code source de la page dans le navigateur.

Repérez la phrase produite.

Vérifiez que le navigateur reçoit le résultat HTML et non l’instruction

echo

exécutée sur le serveur.

8. Faire un test temporaire

Remplacez temporairement le texte par :

<p><?php echo 'Mon premier test PHP fonctionne.'; ?></p>

Actualisez la page.

Remettez ensuite :

<p><?php echo 'Cette phrase a été générée par PHP.'; ?></p>

9. Expliquer ce que vous avez fait

Sans regarder la correction, expliquez avec vos propres mots :

1. pourquoi

index.php

doit être ouvert via le serveur local ;
2. où PHP est exécuté ;
3. ce que fait

echo

;
4. pourquoi le paragraphe reste du HTML ;
5. ce que le navigateur reçoit après l’exécution ;
6. pourquoi nous conservons encore

index.html

;
7. pourquoi nous ne traitons pas encore le formulaire de contact.

Dans cette première leçon PHP, nous avons repris directement le site construit en HTML et CSS.

Nous avons appris que :

HTML
= structure et sens

CSS
= présentation

PHP
= logique exécutée côté serveur

Nous avons créé :

index.php

à partir de la vraie page :

index.html

sans supprimer l’original.

Nous avons ensuite exécuté :

echo 'Cette phrase a été générée par PHP.';

dans :

<p><?php echo 'Cette phrase a été générée par PHP.'; ?></p>

Le serveur exécute le code PHP puis envoie son résultat au navigateur.

Le navigateur reçoit donc le HTML produit, pas le code PHP exécuté.

Nous avons également retenu qu’un fichier PHP doit être ouvert via un serveur capable d’exécuter PHP, par exemple avec une adresse locale :

http://localhost/mon-premier-site/index.php

Nous n’avons pas encore traité le formulaire ni utilisé de base de données.

Nous avançons volontairement dans l’ordre.

Dans la prochaine leçon, nous garderons le même

index.php

et nous découvrirons les variables PHP.