Débuter la programmation WEB en PHP

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Débuter la programmation serveur en PHP

Après l'apprentissage du langage Javascript pour développer des applications Web clientes, il est désormais temps d'aborder le langage PHP. Le code Javascript s'exécute sur la machine de l'internaute. Il est donc très important pour équilibrer les charges. Si des milliers d'internautes se connectent en même temps, les calculs générés ne sont pas réalisés des milliers de fois par le serveur, mais une seule fois par chacun des milliers de postes connectés. Nous préservons ainsi les ressources du serveur. Tout ce qui peut être calculé par le client doit l'être.

Le code PHP s'exécute quant à lui sur le serveur. A chaque fois qu'il est appelé, il sollicite donc la machine distante située chez l'hébergeur. Il est très important de ne pas coder d'instructions PHP inutiles que pourrait fournir la machine de l'internaute. On l'utilise essentiellement pour attaquer les bases de données. Ainsi, on restitue le contenu d'une page spécifique, les rubriques correspondant à un choix d'une catégorie, le résultat d'une demande dans un moteur de recherche. Mais c'est aussi un moyen d'enrichir la base de données de nouvelles informations liées au contenu du site, aux nouveaux inscrits etc...

Nous le verrons, comme le code PHP s'exécute sur le serveur, il a accès aux ressources de la machine distante contrairement au Javascript. Il peut donc atteindre les répertoires et leurs fichiers pour les consulter, les modifier et les créer.



Nous partons d'une application que nous avions finalisée en Javascript pour calculer l'IMC d'une personne en fonction de son poids et de sa taille à renseigner. Mais cette fois, l'objectif consiste à transmettre ces données au serveur. Si le code PHP est capable de réceptionner les informations, il est capable de les archiver sur la machine distante en base de données par exemple. Nous enrichissons le site et établissons un lien avec chaque internaute. Cela, Javascript n'est pas en mesure de le faire.

Comme le but de cette formation est d'établir le contact avec le langage PHP, nous allons coder des instructions qui vont solliciter inutilement le serveur. Mais il faut bien commencer par un bout.

Au fur et à mesure de l'apprentissage, lorsque nous aurons acquis les notions essentielles, nous veillerons à bien équilibrer le code produit par ces deux langages. Tous deux sont encapsulés dans une page Web formatée en Html et CSS.

Serveur virtuel pour le développement
Comme le développement de pages Web se réalise sur une machine unique, nous avons besoin d'un logiciel spécifique capable d'émuler le serveur. Grâce à lui, le code PHP sera bien exécuté par ce serveur virtuel tandis que le Javascript et le Html continueront d'être exécutés par votre PC. Parmi les utilitaires les plus répandus et accessibles, on peut citer WampServer et EasyPhp. Le second, EasyPhp, est conseillé. Il est plus simple de prise en main et plus ergonomique. Il requiert moins de configurations. Vous le trouverez en téléchargement libre sur le Web en tapant simplement son nom dans un moteur de recherche comme Google.

De même, il est vivement recommandé de l'installer sur un autre lecteur que le C. Depuis Windows 10, ce lecteur est protégé et verrouillé pour des raisons de sécurité. Une fois l'installation achevée en suivant les étapes triviales proposées par l'assistant, EsayPhp peut être exécuté. Il apparaît en sentinelle en bas à droite de la barre des tâches Windows.

• Lancer EasyPhp,
• Cliquer sur la flèche en bas à droite de la barre des tâches pour déployer l'affichage des sentinelles,
• Cliquer sur l'icône d'EasyPhp puis dans la liste, choisir Open Dashboard,

Nous accédons ainsi à l'interface d'EasyPhp.



Pour que l'émulation puisse se faire, les serveurs doivent être démarrés.

• Cliquer sur les boutons Start pour le serveur Http et pour le serveur de base de données (Database Server),

Le second n'est pas encore essentiel pour nous. Il permet d'ouvrir les accès permettant au code PHP d'atteindre les informations de la base de données du site Web. Nous n'en sommes pas encore là. Le premier en revanche permet de simuler le serveur Http, celui de la connexion Web qui exécute le code PHP. Il émule donc le serveur du site Web implanté sur la machine distante de l'hébergeur. Sans lui, nous ne pourrions pas tester les développements en PHP avant de les uploader sur le vrai serveur.

Sources et présentation de la problématique
Comme nous le disions, nous proposons de débuter les premiers travaux depuis une base existante. Il s'agit d'une petite application Web cliente conçue lors d'une formation Javascript.

• Télécharger le fichier debuter-programmation-php.rar en cliquant sur son lien,
• Puis, le décompresser dans le dossier de votre choix,

Comme vous le constatez, la décompression conduit au fichier de la page Web principale : index.php. Ce dernier est accompagné de ses ressources externes, notamment de la feuille de styles CSS placée dans le sous dossier styles.

Dans EasyPhp, il convient de déclarer le répertoire de travail du projet. C'est ainsi qu'une adresse virtuelle lui sera associée, comme un nom de domaine sur le Web. De fait, ces pages pourront être lancées et le code PHP pourra être exécuté.

• Cliquer dans la barre d'adresse de l'explorateur Windows pour prélever le chemin,
• Copier cette adresse avec le raccourci clavier CTRL + C par exemple,
• Revenir sur l'interface d'EasyPhp avec le raccourci clavier ALT + Tab par exemple,
• Cliquer sur le bouton add directory pour référencer le nouveau projet,
• Dans la première zone (working directory name), taper un nom explicite en guise d'url, par exemple : 01-debuter-php,
• Dans la seconde zone (working directory path), coller l'adresse issue de l'explorateur Windows,
• Enfin, cliquer sur le bouton Save pour référencer le projet,

Après quelques instants, le site Web apparaît dans la liste.

Remarque : le nom du projet ne doit pas posséder ni d'accents ni d'espaces. Il sert d'adresse virtuelle. Et sur le Web, comme vous l'avez sans doute constaté, les url ne proposent jamais ni d'accents, ni d'espaces.

• Cliquer avec le bouton droit de la souris sur le lien du projet,
• Dans le menu contextuel, choisir de l'ouvrir dans un nouvel onglet,

Ainsi, nous conservons l'interface d'EasyPhp ouverte en parallèle.

La page Web s'exécute instantanément car elle porte le nom index.php. Par défaut, un serveur cherche à exécuter naturellement toute page située à la racine d'un dossier Web portant le nom index ou default, quelle que soit son extension. Dans le cas contraire, le contenu du dossier est affiché. Il ne reste plus qu'à cliquer sur la page à exécuter. Mais tout cela peut se paramétrer. Nous n'en sommes pas encore là. Notre page porte l'extension PHP nécessaire pour exécuter le code serveur. Pourtant à ce stade, il s'agit simplement des codes Html et Javascript d'une formation Web cliente.

• Cliquer avec le bouton droit de la souris n'importe où sur la page Web,
• Dans le menu contextuel, choisir Afficher la source,

Comme vous le remarquez, le code d'origine consiste essentiellement en une imbrication de calques Html (balises Div) et en une association avec du code Javascript pour l'interaction avec l'internaute.

Nous allons exploiter la base de cette petite application pour intégrer nos premières instructions PHP. Le PHP est un code InLine. Il s'intègre directement au sein du Html, CSS et Javascript. D'autres langages comme le C# sur la plateforme DotNet, proposent de séparer le code Inline du code Behind, soit du code serveur.

Pour revenir aux extensions de pages, lorsque nous aborderons l'URL Rewriting en Php (La réécriture d'URL) pour les bienfaits du référencement naturel notamment, nous choisirons l'extension que nous souhaitons. Il est même possible de les masquer pour des adresses plus compactes et plus claires.

Premiers pas en PHP
Pour les phases de tests, il peut s'avérer précieux de coller l'url du projet dans un navigateur tel que Firefox. Néanmoins, il ne s'agit pas d'une obligation.

• Cliquer dans la barre d'adresse de la page Web pour sélectionner son URL,
• Copier cette adresse avec le raccourci clavier CTRL + C par exemple,
• Dans un navigateur tel que Firefox, coller (CTRL + V) cette url,

Comme vous le constatez, le rendu de l'application Web est strictement identique d'un navigateur à un autre.

• Saisir un poids en Kg dans la première zone de texte,
• Puis, saisir une taille en cm dans la seconde zone de texte,
• Enfin, cliquer sur le bouton Calculer,

Malgré l'extension PHP de la page, le serveur n'est absolument pas sollicité, faute de code PHP précisément. Il s'agit de la restitution HTML/Javascript stricte que nous avions développée dans une formation Web Cliente. Le code Javascript réceptionne les valeurs saisies dans les contrôles InputBox (Zones de saisie) pour réaliser le calcul de l'IMC (Indice de masse corporelle). Il pointe sur le contrôle IMG (Image en Html) correspondant afin de le rendre visible. De fait, le curseur s'affiche au-dessus du schéma sur la graduation correspondant au calcul. Comme ces données sont inconnues sur le serveur, elles ne peuvent être ni stockées ni archivées. Pour la découverte du langage PHP dans ce premier volet des nombreuses formations à venir, l'enjeu consiste à transmettre ces informations clientes sur le serveur.

• A la racine du dossier de décompression, cliquer avec le bouton droit de la souris sur le fichier de la page Web principale : index.php,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,

A l'instar du Javascript, outre l'émulateur de serveur, le PHP ne requiert pas de logiciel spécifique pour l'exploiter. Un simple éditeur de texte comme le bloc note suffit. Le Notepad++ est cependant conseillé. Il est téléchargeable librement et gratuitement. Il offre des aides précieuses visuelles sur la syntaxe et la structure.

Vous notez que cette page Web est accompagnée de ses ressources externes comme la feuille de styles CSS dans le sous dossier Styles, pour la mise en forme et la mise en page. Sa référence est d'ailleurs clairement identifiable dans la section Head en entête de code de la page Html.

...
<meta name='robots' content='index,follow' />
<meta http-equiv='content-language' content='fr' />
<link href='styles/mef.css' rel='stylesheet' type='text/css' />
</head>
<body>
...

Le code PHP doit respecter la syntaxe de balisage employée par le HTML et le Javascript. En Javascript par exemple, la section de code est bornée par les balises ouvrante et fermante script.

En PHP, la balise ouvrante est la suivante : <?php, tandis que la balise fermante est plus courte : ?>.

• Dans l'éditeur de code, atteindre la ligne 128 pour un éditeur Notepad,

Vous devez y trouver une information en commentaire Html : <!--Retour Php-->.

• Insérer une nouvelle ligne sous ce commentaire,
• Créer la section Php à l'aide des balises ouvrante et fermante comme suit :

...
<!--Retour Php-->
<?php

?>
...

Ainsi nous délimitons la section de code PHP dans la page Web. Autant de sections que souhaité peuvent être ajoutées et ce quel que soit l'emplacement. Comme pour le code Javascript, la lecture est chronologique. Les éléments et instructions sont interprétés dans l'ordre où ils interviennent.

En guise de prise de contact, nous souhaitons insérer un message de bienvenue accompagné de la date, dans le calque inférieur entre les balises ouvrantes et fermantes H2. Cette manipulation propose de multiples intérêts :

• Découvrir la déclaration de variables en PHP,
• Découvrir la fonction PHP retournant la date non gérée par le client,
• Imbriquer des codes serveurs dans des codes clients pour des constructions dynamiques,

Voyons tout cela par un code que nous expliciterons ensuite :

• Dans la section PHP, entre les balises, ajouter la ligne de code suivante :

<?php
$la_date = date('d/m/y');
?>
Une variable PHP se déclare préfixée du symbole dollar ($). La fonction PHP retournant la date se nomme Date. Le format qu'elle retourne dépend des arguments qui lui sont passés. Nous aurons l'occasion de l'étudier plus en détail. Avec ces arguments, elle renvoie une date courte classique.

Comme l'information est stockée en variable, nous pouvons désormais l'exploiter plus facilement.

• Dans les balises h2, ajouter le code PHP suivant :

...
<div class='titre_h1'>
<h1>Découverte du PHP, Bienvenue !</h1>
<h2>Nous sommes le : <?php echo $la_date; ?></h2>
</div>
...

Comme il s'agit d'imbriquer un code serveur dynamique dans un code client statique, le balisage est nécessaire. Dès lors, les instructions PHP peuvent être codées. La fonction PHP echo permet d'inscrire un message en lieu et place. Ainsi imbriquée, elle retranscrit la date stockée dans la variable $la_date, associée au message de bienvenue, dans la balise de titre H2, à l'emplacement où elle intervient dans la page.

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur Web,
• Rafraîchir la page à l'aide de la touche F5 du clavier,

La date du jour apparaît en effet à l'endroit choisi. Nous venons de solliciter le serveur à la place du client. Cette date s'actualisera automatiquement chaque jour qui passe. Il est intéressant de constater à quel point il est simple d'imbriquer les différents éléments au sein d'une page Html.



Soumettre les données du client au serveur
Passons maintenant à une autre étape, très importante ! Nous souhaitons transmettre les données du client, celle de la machine de l'internaute (Taille et Poids contenus dans les contrôles Input HTML) au serveur. Pour ce faire, elles doivent réaliser un aller-retour, ce que nous appelons plus communément en programmation Web : Un PostBack. Et pour poster ces données, nous devons les soumettre. Seules les informations encapsulées dans un formulaire peuvent être soumises. Un formulaire Html est délimité par les balises ouvrantes et fermantes Form.

• Dans le calque d'identifiant cadre1, à partir de la ligne 43 pour un Notepad++, ajouter les balises HTML du formulaire comme suit :

...
<div style='float:left; width:15%; height:100px; text-align:center;'>
<div id='cadre1'>
<form id='formulaire' name='formulaire' method='post' action='index.php'>
<div style='height:30px;width:100%;'><input type='text' id='zone_poids' name='zone_poids' value='Votre poids en Kg'   onclick='this.value=vider(this.value);'/></div>
<div style='height:30px;width:100%;'><input type='text' id='zone_taille' name='zone_taille' value='Votre taille en cm' onclick='this.value=vider(this.value);'/></div>
<div style='height:40px;width:100%;'><input type='button' value='Calculer' onClick='calculer()' /></div>
</form>
</div>
</div>
...

Nous encapsulons les contrôles HTML dont nous souhaitons transmettre les valeurs au serveur, dans un formulaire (balises form de part et d'autre).

L'attribut Name permet de le reconnaître pour le piloter par le code Serveur PHP. L'attribut ID permet de le reconnaître pour le piloter par le code client Javascript. La même désignation peut être employée. La méthode est importante. Ici elle est réglée sur Post grâce à l'attribut method. Les valeurs vont subir un postback pour être transmise au serveur. Nous pourrions aussi choisir la méthode Get. Les données seraient alors être réceptionnées par le biais d'une URL reconstruite composée d'arguments. L'attribut action permet de définir la page à appeler pour réaliser l'action. Nous choisissons la même page, celle sur laquelle nous sommes en train de coder (index.php). Dans des développements futurs, nous changerons la page d'action pour mettre en oeuvre les techniques AJAX. Les actions seront transparentes pour l'internaute qui conservera l'affichage sur la page Web en cours. Mais les données traitées en arrière-plan sur le serveur seront restituées instantanément et dynamiquement aux emplacements choisis.

Nous devons soumettre ce formulaire et les données qu'il encapsule.

• Pour ce faire, dans le gestionnaire d'événements onClick du bouton calculer, ajouter l'instruction Javascript suivante :

...
<div style='height:30px;width:100%;'><input type='text' id='zone_taille' name='zone_taille' value='Votre taille en cm' onclick='this.value=vider(this.value);'/></div>
<div style='height:40px;width:100%;'><input type='button' value='Calculer' onClick='calculer(); document.getElementById('formulaire').submit();'/></div>
</form>
...

Cette instruction Javascript est explicite et indispensable. Nous accédons au contrôle HTML du formulaire grâce à la méthode getElementById de l'objet Javascript document, comme nous l'avons démontré dans nos nombreuses formations Web clientes. La méthode submit permet de soumettre le formulaire, soit les données qu'il renferme.

• Enregistrer les modifications puis basculer sur le navigateur et rafraîchir la page Web,
• Saisir un poids ainsi qu'une taille et cliquer sur le bouton Calculer,

Les données semblent ne plus être calculées, le résultat n'apparaît plus. Mais il n'en est rien. Nous n'avons pas eu le temps de les voir réapparaître. Comme elles ont été soumises au serveur, elles ont réalisé un aller-retour, un PostBack. De fait, la page a été rechargée comme l'indique l'attribut action du formulaire.

La question devient : Comment récupérer les données transmises au serveur pour les traiter en PHP. C'est ce que nous proposons de résoudre maintenant.

• Revenir dans l'éditeur de code de la plage Web,
• Dans la section du code PHP, ajouter les instructions suivantes :

<?php
$la_date = date('d/m/y');
$la_taille = $_POST['zone_taille'];
$le_poids = $_POST['zone_poids'];
?>

Nous déclarons deux nouvelles variables la_taille et le_poids, comme nous l'avons appris selon la syntaxe PHP. C'est l'instruction $_POST qui permet de désigner un contrôle par son attribut Name dont la valeur a été soumise au serveur par PostBack. Nous réceptionnons ainsi les saisies de l'internaute.

• Dans le calque Html, sous la balise H2, adapter le code comme suit, pour restituer les variables transmises au serveur :

...
<div class='titre_h1'>
<h1>Découverte du PHP, Bienvenue !</h1>
<h2>Nous sommes le : <?php echo $la_date; ?></h2>
<br />
Le poids de l'internaute est : <strong><?php echo $le_poids; ?>Kg</strong><br />
La taille de l'internaute est : <strong><?php echo $la_taille; ?>cm</strong><br />
<i>Donnes issues du serveur prêtes à être archivées</i>
</div>
...

• Enregistrer les modifications et revenir sur le navigateur,
• Cliquer dans la barre d'adresse et enfoncer la touche Entrée pour recharger la page Web,

En effet, comme nous avions précédemment réalisé un PostBack, il n'était plus possible de la rafraîchir dans son état d'origine, seulement à l'aide de la touche F5.

Comme vous le constatez, des erreurs PHP disgracieuses apparaissent. Elles sont tout à fait logiques. Nous cherchons à récupérer des variables qui n'existent pas. Elles n'ont pas encore été postées et donc ne sont pas définies.



Le résultat est en revanche tout autre si nous postons les données.

• Saisir un poids ainsi qu'une taille et les poster avec le bouton Calculer,

Les résultats s'affichent parfaitement, imbriqués dans la construction Html, attestant que les données ont transité par le serveur et sont désormais gérées par ce dernier.



Nous ne possédons pas encore les acquis nécessaires pour traiter et gérer correctement les erreurs. En revanche et pour l'instant, nous pouvons facilement les ignorer.

• En entête de code, avant la balise ouvrante Html, ajouter l'instruction suivante, dans une section de code PHP :

<?php
ini_set('display_errors', 0);
?>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
<head>
...

La fonction Php init_set est une fonction d'initialisation de la page en cours, comme son nom l'indique. C'est pourquoi elle doit intervenir en entête de code. Avec en premier argument l'attribut display_errors, elle initialise la façon dont sont gérées les erreurs sur la page. Avec en deuxième argument l'attribut 0, elle indique de les ignorer et donc de ne pas les afficher. Dans notre cas, cette gestion bien que grossière est cohérente. Tant qu'un PostBack n'est pas initié, sans endommager le reste des traitements, nous savons que les variables ne sont pas encore exploitables.

• Enregistrer les modifications et basculer sur le navigateur Web,
• Cliquer dans la barre d'adresse et enfoncer la touche Entrée pour recharger la page,

Vous le constatez, bien que le PostBack ne soit pas encore initié, les erreurs n'apparaissent plus au chargement de la page. Pour autant, si vous indiquez une taille et un poids que vous soumettez, les données sont parfaitement réceptionnées par le serveur.

Dans de prochaines formations, nous verrons comment exploiter ces données, car c'est bien l'objectif d'un code serveur.

Remarque : Comme nous l'avions déjà constaté, les variables PHP, à l'instar des variables Javascript, ne sont pas typées lors de la déclaration. Elles se typent seules au moment de l'affectation. Nous en avons la preuve en réalisant ici des opérations sur des données numériques.