Accueil

Traduction

Débuter en programmation web - sommaire

Débuter en programmation web - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

i

Découverte de PHP & MYSQL - chapitre introductif

Cette page est la première relative à une initiation au couple PHP & MYSQL.
Le langage PHP a été créé en 1994 par Rasmus Lerdorf (photo ci-contre) pour son site web.
PHP est l'acronyme récursif de Hyperertext Prerocessor.
PHP est "open source" c'est à dire gratuit.
Il est souhaitable qu'un développeur web même orienté "front end" ait des compétences en PHP.
PHP ne sert pas qu'à appeler des requêtes SQL. Même si un site n'a pas de base de données, le PHP peut être utile. Je pense entre autres aux fonctions include() & require() ...

Rôle du PHP

PHP permet de créer des applications web.
Une application web est un site où le contenu des pages différe selon les visiteurs.
C'est possible grâce à la connexion du site à une base de données.

Quel langage de développement 'back-end' retenir ?

PHP est un langage "côté serveur" ou langage "back-end". PHP retourne au "client" du HTML standard.
Mais PHP n'est pas le seul langage serveur envisageable. Vous pouvez utiliser Java ou Python ou Node.js.

PHP obsolète ?

Certains prédissent la mort de PHP depuis plusieurs années ; or il reste encore utilisé par 80% des sites ...

PHP bonifie en vieillisant en proposant entre autres de nouvelles fonctions. PHP propose des centaines de fonctions prédéfinies.
Ainsi la version PHP 8.4 (la dernière) introduit de nouvelles fonctions pour la manipulation des tableaux.
La documentation officielle de PHP

Il faut aussi signaler que la plupart des CMS sont écrits en PHP tels Wordpress, Drupal, Magento, joomla, etc.

Un CMS (Content Management System ou système de gestion de contenu en français) est une plateforme logicielle qui permet de créer, gérer et modifier des sites web de manière simplifiée sans avoir besoin de connaissances en programmation web.

Contenu de ce chapitre

Dans la suite de ce chapitre je vous montre via quelques exemples l'intérêt d'utiliser PHP. Même dans le cas d'un site sans base de données, le PHP peut simplifier sensiblement le travail du webmaster.

Mise à jour rapide du site via PHP

Thématique

Imaginez 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 doivent être modifiées régulièrement en fonction de l'actualité ! Par exemple, chaque semaine voire chaque jour.

Il serait fastidieux d'actualiser le code HTML des parties "en-tête", "navigation" et "pied" dans chacune des vingt pages chaque semaine voire chaque jour.
Il faut donc faire en sorte de modifier seulement trois fichiers qui correspondent respectivement aux en-tête, zone de navigation et pied de page.
Et la mise à jour de ces trois fichiers doit être répercutée automatiquement dans les vingt pages du site.

Organisation du projet

Les trois fichiers HTML

Présentons ces trois fichiers d'inclusion.

le fichier nommé "debut.htm"

Il correspond à la partie HEAD de chaque page et à la division "en-tête" de chaque page.

Le fichier "navigation.htm"

Il correspond à la division "navigation" de chaque page.

Le fichier "fin.htm"

Il correspond à la division "pied" de chaque page.

Donc chaque semaine, pour actualiser le site, il suffira de modifier ces trois fichiers. Les modifications seront automatiquement repercutées dans les vingt pages du site grâce à PHP !

Les pages web du site

Elles contiennent des blocs de code PHP et leur nom doit avoir obligatoirement l'extension .php
Ainsi le serveur de site appelle l'interpréteur PHP pour générer du HTML qui est retourné au client.

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

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

Les autres pages du site

Elles auront toutes la même structure que "index.php" ; seul le code à l'intérieur du conteneur section sera différent d'une page à une autre.

include() OU require() ?

Pour inclure un fichier externe dans une page web vous pouvez utiliser soit la fonction include() soit la fonction require().
Ces deux fonctions ne sont pas tout à faire équivalentes. Si le fichier à inclure 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.
Disons que include() est adapté à la phase de développement et require() pour la version finale.

Interprétation du code PHP

Un navigateur (Chrome, Firefox; Edge) est incapable d'interpréter le code PHP. Il ne comprend que HTML, CSS, Javascript, etc.
Par contre le 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 de site dispose d'interpréteur de PHP.
Lorsqu'un internaute demande à charger (requête HTTP) une page PHP de votre site, le serveur va générer le code HTML à partir du code PHP et adresser ce code HTML au navigateur du client.

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

Imaginons une requête concernant la page d'accueil ("index.php").
Le code de ce document PHP est plus haut dans cette page.
Le code HTML retourné par le serveur :

Le code PHP a été remplacé par du code HTML.

Le rendu

Le serveur PHP de mon hébergeur interprète le code PHP et retourne du HTML.

"Surfez" dans les différentes pages !

Comment tester en local un script PHP ?

Avant d'envoyer une page web contenant du PHP chez votre hébergeur, vous voulez la tester en local. 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 (ou FireFox ou Edge ou Opera).
Et voilà ce que le navigateur affiche :

Le navigateur n'a pas su interpréter le code de la page, il se contente de l'afficher.
C'est logique car, au risque de me répéter, 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 aurez installé sur votre ordinateur.
Je vous conseille d'installer le pack WampServer (W pour windows).

WampServer

WampServer est une plateforme de développement de sites utilisant PHP.

Il existe Lampserver pour les ordinateurs sous Linux et Mamperserver pour les macs.

Installer WampServer pour Windows11

Utiliser Wampserver

Grâce à Wampserver vous allez pouvoir désormais tester en local un script PHP.

Par ailleurs les pages PHP que vous voulez tester doivent obligatoirement être stockées dans le sous dossier www du dossier c:\wamp.

La liste des fichiers du dossier WWW apparait dans la fenêtre :

Vous n'avez plus qu'à double-cliquer sur une des pages web avec du PHP pour exécuter le code.

Afficher l'instant présent dans une page

Solution avec PHP

Voyons la solution PHP qui fonctionnera toujours (alors que la solution JS ne fonctionnera pas si ce langage est désactivé par le navigateur).

Le code du document PHP

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) ; h (en minuscule) : heure au format 12 ; H (en majuscule) : heure au format 24.
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 deux variables et leur affecte une valeur.

Pour afficher des valeurs il faut utiliser la commande 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.

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 générer le code HTML suivant :

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) :

...
	<meta http-equiv ="Refresh" content ="60" />

La valeur de l'attribut content doit être un nombre de secondes.
Toutes les 60 secondes, une requête HTTP auprès du serveur sera exécutée.

Le rendu

L'horloge retarde de 2 heures !

Attention la fonction date() de PHP affiche par défaut l'heure locale du serveur et non pas l'heure locale de l'utilisateur.
La solution pour obtenir l'heure locale du visiteur :

Si vous souhaitez afficher la date et l’heure en fonction du fuseau horaire de l’utilisateur vous devez utiliser la fonction date_default_timezone_set() avant d'appeler la fonction date().

Le rendu après correction du script

Précisions

Dans tous les chapitres du tuto PHP, les pages web tenant lieu d'exemples ont exactement le même code pour la partie HEAD. Donc dans les extraits de code je ne mentionnerai plus le code de la partieAD HEAD.

Aide mémo : les paramètres possibles de la fonction date()

Générer du HTML (voire du SVG) via PHP

Comme vous savez maintenant, le serveur interprète le code PHP et retourne du HTML standard.
Faut-il rappeler que HTML est seulement un langage de balisage qui ignore les structures de contrôles (tests et boucles).

Donc PHP peut être utilisé pour générer en quelques lignes de code une quantité importante de HTML.

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

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_par_8.php"

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.

La chaine suivant le mot clé echo doit impérativement être délimitée par guillemets doubles afin que les variables insérées dans cette chaine soient évaluées (affichage de leur contenu).
Faites un test : délimitez une chaine par des guillemets simples : l'instruction echo affiche alors le nom des variables incluses et non pas leur contenu.

Le rendu :

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 !
L'utilisateur choisit la table qu'il veut afficher et le nombre de lignes.
La page web comprend un formulaire puis un script PHP.

Le code du formulaire

PHP ne dispose pas d'instructions de saisie ; il faut donc utiliser un formulaire HTML et plus précisément un formulaire de soumission (attributs method & action dans l'élément form ; bouton de type 'submit'.
Je n'en dis pas plus ; cette question est traitée en détail dans le chapitre 24 : PHP et les formulaires de soumission

Le script PHP

Ce script est bien sûr délimité par les balises <?php & ?> !

Notez le test basé sur la fonction isset(). J'aurai l'occasion d'expliquer plus tard l'intérêt de cette condition.

Le rendu

Générer du SVG

Si vous voulez dessiner dans une page web vous devez utiliser le langage SVG pour remplir le canevas (zone de dessin définie par l'élément SVG).
Comme le HTML, le SVG natif ne propose pas de structures de contrôle (variables, boucles, tests).
Il peut donc être intéressant de générer du code SVG répétitif via PHP.

Le canevas

Ci-dessous le rendu dans un Iframe d'une page web contenant un canevas SVG.

Le code de cette page web (partie BODY)

Sachez que j'ai réalisé un tuto sur le langage SVG.
Dessins vectoriels avec SVG

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ée en JavaScript car le code JS est visible ; il suffit d'afficher la console du navigateur).

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

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)

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. Toujours un peu de patience.

Rendu dans un nouvel onglet

Faites un premier essai avec un mot de passe erroné puis un deuxième avec le mot de passe correct.

Problème

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

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 dans la barre d'URL ! 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.

Solution

Le code des deux pages est modifié comme suit :

Page "accueil_plus.php"

La méthode d'envoi est désormais "post".

Page "intranet_plus.php"

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

Rendu dans un nouvel onglet

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" >

Les pages dotées de cette instruction ne seront jamais proposées par les moteurs de recherche (google, bing, firefox.) aux internautes.

Utilisez des variables PHP dans un script JS

Et oui, vous avez bien lu ; il y a moyen de créer une passerelle entre PHP et JS.

Exemple - le code

Thème : la fonction date() de PHP est beaucoup plus simple à utiliser que son équivalent JS.
L'instant présent est donc déterminé via le PHP ; les variables correspondantes sont récupérées par un script JS.

En début de page un script PHP qui évalue les variables $heure_serveur & $heure_locale à partir de la fonction date().
Puis une instruction HTML meta http-equiv ="Refresh" ... recharge la page toutes les 5 secondes donc exécute de nouveau le script PHP.

Toujours dans la partie HEAD un script avec la déclaration de la fonction afficherHeure(). Cette fonction se contente d'afficher les variables $heure_serveur & $heure_locale.

Dans la partie BODY un script appelle toutes les 5 secondes la fonction JS afficherHeure()

Le rendu

Observez durant au moins 10 secondes, notez le changement d'heure toutes les 5 secondes.

Bien sûr j'aurais pu utiliser seulement Javascript ou uniquement PHP.
Mais je veux vous montrer la possibilité d'échange de données entre un script PHP et un script JS.