HTML & PHP : quelques bonnes raisons d'utiliser PHP

Vous allez vite vous rendre compte qu'on ne peut pas tout faire avec HTML car il ne s'agit pas d'un langage de programmation.
Dans cette page je vais tenter de vous montrer par cinq exemples l'intérêt d'intégrer un peu de PHP dans les pages d'un site.

pour faciliter mise à jour du site
pour afficher l'instant présent (date courante et/ou heure courante)
pour produire de grands tableaux HTML en quelques lignes de code
pour sécuriser l'accès à une page
Pour obtenir des infos sur le visiteur

Faciliter la maintenance d'un site

L'utilisation du PHP peut faciliter grandement la maintenance de votre site.

Prenons un exemple !

Imaginons un site comprenant une vingtaine de pages. Chaque page comprend quatre grandes divisions (parties) : en-tête de page, zone navigation, corps de page et pied de page.
Pour toutes les pages les contenus des parties en-tête, zone de navigation et pied sont strictement identiques ; seul le contenu de "corps de page" est propre à chaque page.
Les parties en-tête, navigation et pied sont certes identiques mais elles ne sont pas permanentes ; elles doivent être modifiées régulièrement en fonction de l'actualité : chaque semaine !

Vous comprenez qu'il serait fastidieux de changer le code HTML des parties en-tête, navigation et pied dans chacune des vingt pages et cela chaque semaine !
Il faut donc faire en sorte d'actualiser chaque semaine seulement trois fichiers qui seront inclus dans les vingt pages et qui correspondent respectivement à l'en-tête, zone de navigation et pied de page.

Organisation du site

une feuille de style externe (un fichier .css)
trois fichiers HTML partagés par les différentes pages.

Les trois fichiers HTML partagés par les différentes pages

le fichier nommé "debut.htm"

<!doctype html >
<html>
<head>
	<title></title>
	<meta charset ='utf-8'>
	<meta name="description" content="" />
	<meta name="viewport" content=	"width=device-width, user-scalable=yes" />
	<style>
		* {margin : 0px ; padding : 0px ; }
		body {width : 90% ; margin : auto;  background : lime ; }
		h1, h2 {text-align : center; background : olive; }
		p {color : navy ; }
		a {display : block ; background : gray; }
	</style>
</head>
<body>
	<header>
		<h1>Mon site</h1>
	</header>

Il correspond au code HTML de la partie head de chaque page et à la division "en-tête de page"

Le fichier nommé "navigation.htm"

<nav>
	<h2>Zone de navigation</h2>
	<a href ="index.php">Accueil</a>
	<a href ="page1.php">Page 1</a>
	<a href ="page2.php">Page 2</a>
	<a href ="page3.php">Page 3</a>
</nav>

Il correspond au code HTML de la division "navigation".
Ci-dessus j'ai repris des liens vers trois pages seulement mais il y en a en réalité une vingtaine !

Le fichier "fin.htm"

<footer>
	<h2>Pied de  page</h2>
	<p>Ceci est le pied de page.
</footer>
</body></html>

Il correspond au code HTML de la division "pied de page".

Donc chaque semaine pour actualiser le site il suffira de modifier ces trois fichiers. Les modifications seront automatiquement répercutées dans les pages web du site grâce au PHP et plus précisément à la fonction INCLUDE.

Les pages web du site

C'est dans les pages web du site que l'on va trouver du code PHP.

La page d'accueil d'un site doit s'appeler index
Attention dès qu'une page web contient du code PHP son extension doit être .php afin d'avertir le serveur qu'il faut générer du HTML à partir du PHP et retourner au "client" ce HTML.

Le code de la page d'accueil du site : "index.php"

<?php
	include("debut.htm");
	include("navigation.htm");
	/* inclusion des fichiers correspondant au code HTML  de la partie head 
	et aux divisions en-tete et navigation */
?>
<section>
	<h2>Page d'accueil du site</h2>
	<p>Texte de la page d'accueil.
	<br>Blablabla ...
	<br>Blablabla ...
	</p>
<?php
	include("fin.htm");
	//inclusion  du fichier correspondant au code HTML de la division pied de page
?>

Le code PHP doit être entre la balise ouvrante <?php (balise début PHP) et la balise fermante ?> (balise fin PHP).

index.php

dans le premier bloc il y a deux instructions PHP. Chaque instruction est basée sur la fonction include pour intégrer l'en-tête de page puis la zone de navigation
dans le deuxième bloc il y a une instruction PHP. J'inclus donc le code correspondant à la division "pied de page"

Les autres pages du site

Elles auront toutes la même structure. Seul le code HTML à l'intérieur du conteneur section sera différent.

Interprétation du code PHP

Un navigateur est incapable d'interpréter le code PHP. Il ne comprend que HTML, CSS, Javascript, etc.
Seul un serveur est capable d'interpréter le PHP. C'est pour cette raison que l'on dit que PHP est un langage côté serveur.
Naturellement tout hébergeur dispose d'un serveur capable d'interpréter du PHP.
Lorsqu'un internaute demande à charger la page index.php (ou une autre page) de votre site le serveur de l'hébergeur ne va pas se contenter de lui envoyer le code brut mais il va générer le code HTML à partir du code PHP et lui adresser (en réponse à la requête HTTP) ce code HTML.

Code HTML récupéré par le visiteur (ou "client")

<!doctype html >
<html>
<head>
	<title></title>
	<link href ="style.css" rel = "stylesheet" >
	<meta charset ='utf-8'>
	<meta name="viewport" content=	"width=device-width, user-scalable=yes" />
</head>
<body>
<header>
	<h1>Mon site</h1>
</header>
<nav>
	<a href ="index.php">Accueil</a>
	<a href ="page1.php">Page 1</a>
	<a href ="page2.php">Page 2</a>
	<a href ="page3.php">Page 3</a>
</nav>
<section>
	<h2>Page d'accueil du site</h2>
	<p>Texte de la page.
	<br>Blablabla ...
	<br>Blablabla ...
	</p>
</section>
<footer>
	<h2>Pied de  page</h2>
</footer>
</body></html>

Le code PHP a été remplacé par le contenu des différents fichiers inclus.

Tester une page web contenant du PHP

Avant d'envoyer une page chez votre hébergeur vous voulez la tester, c'est normal !
Donc vous ouvrez la page index.php avec un éditeur tel notepad puis vous produisez la commande Exécuter/ Launch in Chrome.
Et voilà ce que le navigateur affiche :

Le navigateur n'a pas pu interpréter le code de la page, il se contente de l'afficher.
Et c'est logique car je le répète, un navigateur ne sait pas interpréter du PHP !
Donc pour tester en local il faut traiter la page PHP avec un serveur web que vous avez installé sur votre machine.

Je vous conseille d'installer le pack wampserver (W pour windows).

le serveur Apache
le pluging PHP (pour que le serveur puisse traduire le PHP en HTML)
MySQL (logiciel de gestion de bases de données relationnelles)

Pour installer sous environnement windows10 le pack wampser64 (64 bits)il faut impérativement que le logiciel visual studio soit préalablement installé !

Par ailleurs les pages PHP que vous voulez tester doivent impérativement être stockées dans le sous dossier www du dossier c:\wamp ; dossier créé lors de l'installation du pack.

démarrer le navigateur
taper dans la barre d'adresse http://localhost

La page d'accueil de WAMP doit s'afficher alors à l'écran.

Affichage des pages du site avec le navigateur

Grâce à la feuille de style externe (voir ci-dessous) et le serveur qui adresse au client du HTML les pages du site (ici limitées à 4) s'affichent proprement.
"Surfez" dans les différentes pages ! Bonne visite !

En cliquant sur n'importe quel des quatre liens vous pouvez observez que chaque page affiche entre autres : <h4>Site réalisé par : <br>Darcheville Patrick</h4>

Donc le code du fichier navigation.htm que je vous ai indiqué n'est pas tout à fait le code réel ...
En effet je profite des liens pour passer des paramètres à chaque page cible. Mais je n'en dis pas plus pour le moment.

La fonction require()

Pour inclure un fichier externe dans une page web vous pouvez utiliser soit la fonction include() soit la fonction require()
Si le fichier externe n'est pas trouvé la fonction include() génère une alerte mais continue d'exécuter le script alors que la fonction require() met fin au script PHP.

Afficher l'instant présent dans une page

Afficher l'instant présent (date et heure courantes) ? impossible avec HTML !
Par contre aucun problème pour PHP (et JavaScript). Ces deux langages disposent des outils ad hoc.

Solution PHP

...
<?php
	$date_courante = date("d/m/y");
	$heure_courante = date("H:i"); 
	
	echo "nous sommes le :" .  $date_courante;
	echo "
"; // saut de ligne
	echo "il est exactement :" . $heure_courante;
?>
...

La fonction date() de PHP retourne l'instant présent.
Pour récupérer la date courante il faut argumenter cette fonction avec la chaîne "d/m/y" (day/month/year);
Pour obtenir l'heure courante il faut argmenter cette fonction avec la chaîne "H:i" (heures : minutes) voire "h:i:s" (heures, minutes, secondes).
Si vous voulez affichez seulement le mois courant il suffit d'écrire date('m').

Dans ce code on voit comment on initialise une variable PHP. Une variable PHP doit impérativement commencer par le caractère $.
Dans l'exemple je crée et initialise deux variables grâce à la fonction date() argumentée. Pratique !

Pour afficher des valeurs il faut utiliser l'instruction echo.
On peut afficher plusieurs valeurs dans la même instruction echo ; il suffit de concaténer ces différentes valeurs . L'opérateur de concaténation en PHP est . (le point).
Avec echo vous pouvez donc afficher des chaînes (entre guillemets simples ou doubles) et des variables (faciles à identifier grâce au caractère $).

Pour pouvez remarquer que le code PHP est à l'intérieur du conteneur H2. Donc la date courante et l'heure courante vont être affichées avec le formatage prévu pour la balise H2 par la feuille de style.

L'instruction echo a un autre rôle : elle permet d'insérer du balisage HTML dans le code PHP. Dans l'exemple j'insère un saut de ligne (instruction : echo ";) entre l'affichage de la date courante et de l'heure courante.

Interprétation du code PHP par le serveur

Supposons que vous demandiez le chargement de la page à 16 h 36 le 3 décembre 2016 ; le serveur va interpréter le code PHP de la page, générer du code HTML qu'il va vous adresser.
Le code HTML généré : <h2>nous sommes le :03/12/2016 <br>il est exactement :16:36</h2>

Mais il y a un problème !
Si la page reste affichée durant plusieurs heures elle va toujours afficher "il est exactement 16:36" ...
Il faudrait donc que la page soit rechargée régulièrement ; toutes les 60 secondes afin que l'heure courante soit actualisée.
Pour que la page soit rechargée toutes les minutes il suffit d'ajouter le code HTML suivant (dans la partie head de la page) : ... <head> ... <meta http-equiv ="Refresh" content ="60" /> </head>

La valeur de l'attribut content doit être un nombre de secondes. Testez le code ; patientez une minute pour voir l'heure courante s'actualiser automatiquement

Attention la fonction date() de PHP affiche l'heure pour le serveur et non pas l'heure pour l'ordinateur du "client".
Il y a bien sûr une solution mais elle est un peu compliquée et dépasse donc la simple initiation au PHP ...

Autre version

Code identique à la version précédente sauf une ligne ! ... $date_courante = date("D d M Y"); ...

Ici j'ai utilisé de nouveaux caractères : D, M, Y (en majuscules).

D : Le jour de la semaine en anglais sur 3 lettres
M : le nom du mois en anglais sur 3 lettres
Y : l'année en 4 chiffres

Testez la nouvelle version

Pour afficher la date avec le nom dujour et le nom du mois en Français il faut créer une fonction personnelle qui manipule des tableaux.

Produire de grands tableaux HTML

Comme vous savez maintenant le serveur PHP transforme le PHP en HTML.
Faut-il rappeler que HTML ignore les structures de contrôles (tests et boucles).

Donc PHP (ou JavaScript) peut être utilisé pour générer via quelques lignes de code une quantité énorme de code HTML.

Imaginons que nous voulions afficher dans une page web la table de multiplication par 8 :

	8 fois 1 = 8 
	8 fois 2 = 16
	...
	8 fois 49 = 392
	8 fois 50 = 400

Donc il faut afficher un tableau HTML comprenant 3 colonnes mais 50 lignes de contenu.
Si vous tapez directement le code HTML correspondant la saisie serait très très fastidieuse (conteneur TABLE contenant 50 fois le conteneur TR contenant à chaque fois trois fois la balise TD) alors qu'avec le PHP ça sera très court.

Extrait du code de la page "table_par8.php"

...
<table>
<caption>Table de multiplication par 8</caption>
<tr><th>8</th><th>fois</th><th>donne</th></tr>
<?php
	for ($i=1; $i<=50; $i++)
	{
		$produit = 8 *$i ; 
		echo "<tr>";
		echo "<td>8</td>";		
		echo "<td>". $i ."</td>";
		echo "<td>" . $produit ."</td>";
		echo "</tr>" ; 
	}
?>
</table>

Le code PHP comprend une boucle qui est exécutée 50 fois.
Pour produire un tableau de 5000 lignes le code PHP ne serait pas plus compliqué.
A chaque passage dans la boucle : génération d'une ligne de tableau
A chaque passage dans la boucle la variable $i est incrémentée de 1. Testez ce code !

Le visiteur ne peut jamais lire le code PHP de la page. En effet s'il demande d'afficher le "code source" de la page qu'il a chargé il ne voit que le HTML généré et envoyé par le serveur.

Table par N

Le visiteur ne souhaite pas forcément afficher la table par 8 et il ne veut pas forcémenent afficher les 50 premières lignes ...
Il faut donc une solution plus réaliste ! ... <form action ="#" method = "get"> <p class ="remarque">Affichez une table de multiplication !</p> <label>Saisir un entier compris entre 1 et 9</label> <input type ="text" name ="entier" required pattern ='[1-9]{1}' maxlength ="1" /> <label>Nombre lignes de la table (entre 1 et 99)</label> <input type ="text" name ="lignes" required pattern ='[0-9]{2}' maxlength ="2" /> <button type ="submit">Confirmer</button> </form> <?php if (isset($_GET['entier'])) { // si soumission effectuée $entier =$_GET['entier']; $lignes =$_GET['lignes']; echo "<table>"; echo "<caption>Table de multiplication par $entier</caption>" ; echo "<tr><th>$entier</th><th>fois</th><th>donne</th></tr>"; for ($i=1; $i<=$lignes; $i++) { $produit = $entier *$i ; echo "<tr>"; echo "<td>$entier</td>"; echo "<td>". $i ."</td>"; echo "<td>" . $produit ."</td>"; echo "</tr>" ; } // fin for echo "</table>"; } // fin alors ?> ...

Commentaire succinct

Le code devient un peu plus compliqué.

PHP ne dispose pas d'instructions de saisie (à la différence de Javascript). Il faut donc utiliser un formulaire HTML.
Notez l'emploi dans le formulaire des attributs pattern, required (introduits par HTML5) et maxlength pour avoir un contrôle de saisie via HTML.

Notez l'emploi d'une fonction : isset() qui retourne une valeur logique ainsi que l'emploi d'un tableau de données :$_GET.

Je n'en dirai pas davantage pour le moment car un dans le tuto PHP un chapitre est consacré aux tableaux PHP et un autre aux fonctions PHP et un troisième sur le traitement en PHP des données de formulaire.
Testez ce code

Page protégée par un mot de passe

Vous êtes chargé de réaliser le site d'une petite entreprise. L'entrepreneur souhaite que le contenu de certaines pages soient réservées au personnel (intranet).

La gestion de mots de passe ne doit jamais être programmé en JavaScript car le code JS est visible !

Le code de la page d'accueil du site (extraits)

<body>
...
	<nav>
	<h2>Menu</h2>
	<a href ="#">Nos services</a>
	<a href ="#">Notre magasin</a>
	<a href ="#">Nous contacter</a>
	<br>
	<form action ="intranet.php" method ="get">
		<label>Intranet</label>
		<input type ="password" name ="motpasse" onchange ="this.form.submit()">
	</form>
</nav>
...

Le formulaire comprend un champ de type password pour saisir un mot de passe.
Notez bien que ce champ se nomme motpasse.

Ce formulaire ne comprend pas de bouton de soumission des données puisque celle-ci s'effectue avec la méthode submit() de Javascript.
Il suffit donc de saisir le mot de passe puis de cliquer sur ENTER.

Le code de la page "intranet.php" (partie BODY)

...
<?php
	if (isset($_GET['motpasse']) AND $_GET['motpasse']=="sesame" )
	{
		echo "<h2>Informations réservées au personnel</h2>"; 
		echo "<p>Suite à de nombreux vols commis par certains membres du personnel ... <br>Blabla ... </p>"; 
	}
	else 
		echo "<h2>Vous n'avez pas accès à cette page</h2>" ; 
?>
...

La méthode d'envoi des données est get (valeur de l'attribut method de la balise FORM). Donc en cas de soumission le tableau associatif $_GET est créé dans la page cible (ici "intranet.php" puisque la valeur de l'attribut action de la balise FORM est intranet.php).
Notez que le mot de passe est sesame !

Je n'en dis pas plus sur le code car il y a un chapitre sur les tableaux PHP et un autre sur les formulaires et PHP. Testez !

Faites un premier essai avec un mot de passe erroné !

Problème

Avez vous observé la barre d'adresse de la page "intranet.php" après avoir saisi "sesame" et cliqué sur "intranet.php" ?

Non. Donc je vous montre une capture d'écran ci-dessous.

Contenu de la barre d'adresse (dans le cas d'un test en local) :
http://localhost/essai_php/intranet.php?motpasse=sesame

Donc le mot de passe "sesame" apparaît ! C'est très génant ...

Mais c'est logique car avec la méthode d'envoi get les données saisies dans le formulaire deviennent des paramètres de l'URL.
Rassurez vous, nous n'aurions pas eu ce problème si nous avions utilisé la méthode d'envoi post.Le mot de passe est certes contenu dans le code PHP mais comme l'utilisateur n'a pas accès à ce code (à la différence du code Javascript)...

Solution

Le code des deux pages est modifié comme suit :

Accueil_plus.php

...
	<form action ="intranet_plus.php" method ="post">
...

intranet_plus.php

...
	if (isset($_POST['motpasse'])AND $_POST['motpasse']=="sesame" )
...

La variable globale créée dans la page cible (intranet_plus.php) après soumission est $_POST ! Testez !

Faites un premier essai avec un mot de passe erroné !

Ne pas indexer les pages

Il ne faut pas qu'un utilisateur tombe par hasard sur une page de l'intranet de l'entreprise, ces pages ayant été indexées par les moteurs de recherche. Il faut donc rajouter une instruction HTML dans la partie HEAD de chaque page : <meta name="robots" content="noindex">

Ainsi les pages dotées de cette instruction ne seront jamais proposées par les moteurs de recherche (google, bing, etc.)

Obtenir des infos sur le visiteur

Il peut être utile pour le site visité de connaître le système d'exploitation, le navigateur utilisé par le visiteur, son adresse IP, etc.
En effet si, par exemple, ces infos précisent que le visiteur "surfe" avec un mobile (tablette ou smartphone) on peut imaginer une redirection vers la version mobile du site ...

Toutes ces infos sont contenues dans le tableau associatif $_server car cette variable est renseigné par le serveur à l'occasion d'une requête HTTP.

Le code de l'exemple (extrait)

...
<h3>
	<?php
		echo "système d'exploitation et navigateur que vous utilisez :" . $_SERVER["HTTP_USER_AGENT"];
		echo "<br>";
		echo "votre adresse IP : " . $_SERVER["REMOTE_ADDR"] ; 
	?>
</h3>
...

Pour avoir des infos sur le système d'exploitation et le navigateur du client il faut utiliser le champ HTTP_USER_AGENT du tableau $_server tandis que la clé remote_addr retourne l'adresse IP du visiteur. Essayez ce code !

Vous avez un PC doté de window 10 et utilisez comme navigateur Chrome le message retourné sera :
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

Si par contre vous utilisez toujours sur le même PC Firefox le message deviendra :
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:53.0) Gecko/20100101 Firefox /53.0

Si toujours avec le même poste vous utilisez le navigaterur Edgele message retourné contiendra la chaîne "Edge".

Si vous utilisez une tablette ou un smartphone SAMSUNG le message contiendra la chaîne "android".

Débuter en HTML & CSS - sommaire

Votre premier site

Allons plus loin

Pour des pages dynamiques : PHP & SQL