Optimiser le code PHP par imbrications

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


Sujets que vous pourriez aussi aimer :


Optimiser le code PHP par imbrications

Dans cette formation PHP, nous abordons une notion intéressante et importante. Il s'agit d'optimiser la construction des pages d'un site Internet. Chaque page d'un site Web est unique. Mais chaque page d'un site Web est conçue sur un moule qui est répercuté sur l'ensemble du site. Ainsi on note généralement que l'entête et le pied de page sont identiques. De même, les menus sont restitués fidèlement sur chaque page. Toutes ces portions ne doivent pas être recodées à chaque fois. Elles doivent exister une seule fois. Ainsi elles peuvent être appelées par un code PHP permettant d'imbriquer les pages, comme les pièces d'un Puzzle pour restituer l'intégralité de l'information mise en page.

L'intérêt est double. Il consiste à optimiser le développement du site. Mais il consiste aussi à optimiser et simplifier les modifications et adaptations. Prenons pour exemple un site qui compte des centaines de pages avec des mises à jour à prévoir dans l'entête par exemple. En aucun cas il ne s'agira d'intervenir des centaines de fois, mais une seule. La portion de l'entête comme toutes les autres parties communes, doit être appelée dans la construction par toutes les autres pages du site internet. Un changement est ainsi répercuté automatiquement sur les centaines de pages qui l'utilisent dans la construction.

Sources et présentation de la problématique
Pour bien comprendre le concept et l'enjeu de ces constructions Web, nous proposons de débuter depuis des sources existantes à récupérer.

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

La décompression conduit au fichier de la page Web principale nommée index.php. Il est accompagné de ses ressources externes dans les sous dossiers.



A ce titre et comme l'illustre la capture ci-dessus, vous notez la présence du sous dossier nommé Commun. Il stocke toutes les portions de code PHP communes aux autres pages Web.

Tous ces bouts de codes client et serveur doivent être assemblés avec chaque partie centrale d'une page Web. L'enjeu est de restituer l'information dans son intégrité et dans son intégralité. Pour le comprendre, nous proposons d'exécuter la page d'accueil, index.php.

Pour cela, comme nous l'avons appris dans les formations précédentes, nous devons référencer le projet dans l'interface d'EasyPhp. C'est lui qui émule le serveur distant. Il s'agit de prélever l'adresse du projet depuis l'explorateur Windows puis de la coller dans la zone Working directory path, grâce au bouton Add Directory, après lui avoir donné un nom.

Bien sûr, les serveurs virtuels doivent être démarrés, en tous cas le premier des deux au moins. Il s'agit du serveur Http. En effet, nous n'avons pas encore les compétences pour attaquer les bases de données. Une fois le projet ajouté, il est référencé dans la liste des sites à émuler.

• Cliquer sur le lien du projet ainsi référencé pour ouvrir sa page d'accueil,

Comme vous le remarquez, la page index.php est fort naturellement appelée par défaut. Il s'agit de la petite application que nous avions développé dans la formation précédente pour démontrer la portée des variables. Mais elle apparaît déstructurée, dénuée de mise en forme et de mise en page.



A ce stade, elle ne contient que son propre code. Il manque les sections d'entête et de pied de page notamment. De fait, des balises Html sont manquantes et le document est mal formé. Pour en avoir le coeur net, nous proposons d'accéder au code de cette page.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.php,
• Dans le menu contextuel, choisir de l'ouvrir dans un éditeur tel que le Notepad++,

Comme vous le remarquez, le code débute directement par la construction des calques, balises Div en Html. Il n'y a ni section Body, ni section Head et pas de déclaration Html. En conséquence, la construction est incorrecte et la page apparaît déstructurée.

• A la racine du dossier, double cliquer sur le sous dossier commun pour l'ouvrir,
• Puis, ouvrir les trois pages : connexion.php, entete.php et pied-page.php dans l'éditeur Notepad,

Comme vous le constatez, le fichier entete.php propose le début de la section de code commune à chaque page Web. Nous y notons la partie déclarative du code Html. Elle est accompagnée de sa section d'entête (Head) et des premières balises ouvrantes pour la construction Html de chaque page du site.

...
</head>
<body>
<div class='div_conteneur_parent'>

<div class='div_conteneur_page'>
<a href='.' target='_self'>
<img src='images/le_formateur.png' style='width:50px;border:none;' align='left' alt='formateur informatique' />
</a>
<div class='titre_page'><h1>Instruction Include - Construction de sites Web</h1></div>

<div class='div_int_page'>

Dans le fichier pied-page.php, nous notons la partie commune de la section inférieure. Elle consiste à fermer toutes les balises ouvertes y compris le body et le html. Au même titre que la section d'entête, elle doit être incluse pour assurer une construction correcte. Chaque page sera ainsi bien formée.

...
<a href='mentions-legales.php' target='_self'>
<img src='images/mentions-legales.png' style='width:40px;border:none;' alt='Conditionsd'utilisation' />
</a>
</div>
</div>
</div>
</body>
</html>

Le fichier Connexion.php est particulier quant à lui. On l'utilise conventionnellement comme fichier de configuration. Il permet notamment de définir les informations d'accès à la base de données. Nous aborderons ces notions en temps voulu. Nous allons l'exploiter pour récolter les informations délivrées par l'Url de chaque page. Nous comprendrons ainsi que ces données peuvent être transmises entre les sections imbriquées, là encore pour optimiser le code.

Constructions Web - Fonction Php Include
En PHP, C'est l'instruction include qui permet de faire référence à des pages externes à imbriquer dans la construction de la page Web finalisée. Ces références doivent intervenir chronologiquement. La section de code désignée est imbriquée à l'emplacement défini par l'appel de la fonction PHP Include.

• Revenir dans le code de la page index.php,

La section de l'entête doit fort naturellement intervenir en début de code, tant qu'à faire, juste après les informations de configuration.

• Tout en haut de l'éditeur, avant la première balise Div ouvrante, créer la section de code Php,
• Puis, ajouter les instructions include suivantes :

<?php
include('commun/connexion.php');
include('commun/entete.php');
?>
<div style='width:100%; display:block; text-align:center;'>
</div>

<div class='div_saut_ligne' style='height:30px;'>
...

La fonction PHP include ne requiert donc qu'un seul argument. Il s'agit de l'adresse de la page à imbriquer dans la construction. Comme pour tout site Web, nous raisonnons en chemin relatif par rapport au dossier local de la page Web en cours. Les fichiers connexion et entete sont situés dans le sous dossier commun de l'application. Et c'est ainsi que nous les désignons dans la construction. Toute balise ouverte doit être fermée. C'est pourquoi, avant de tester le résultat, nous devons ajouter la section du pied de page, cette fois en toute fin de code donc.

• En bas de l'éditeur, après la dernière balise fermante (?>), ajouter l'imbrication suivante :

...
</script>
<?php
}
?>
<?php
include('commun/pied-page.php');
?>

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

Comme vous le constatez, les éléments se sont parfaitement imbriqués dans l'ordre où ils ont été appelés. Désormais la page Web est parfaitement construite et propose un entête ainsi qu'un pied de page.

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

Nous notons la déclaration Html, la présence des sections Head et Body et la fermeture de chacune des balises ouvertes en bas de page.

• Fermer la fenêtre de ce code source pour revenir sur la page Web,
• Taper une valeur numérique entière dans la zone de saisie,
• Puis, cliquer sur le bouton Envoyer pour la soumettre au serveur,

Nous constatons que le code PHP de la formation sur les traitements itératifs par les boucles, est toujours fonctionnel. La valeur est transmise au serveur. C'est un code PHP qui la réceptionne pour réaliser un traitement itératif.

• Cliquer sur l'une des icônes du pied de page,

Les pages de contact et de mentions légales sont prévues et liées. Mais toutes deux présentent les mêmes symptômes que la page d'accueil originelle. Elles ne sont pas correctement structurées pour les mêmes raisons. Nous devons finaliser leur construction par les mêmes appels grâce à la fonction Php include.

• En haut du navigateur, cliquer sur la flèche du bouton précédent pour revenir sur la page d'accueil,
• A la racine du dossier de décompression, ouvrir les fichiers mentions-legales.php et contacter-le-support-technique.php dans l'éditeur Notepad,
• Ajouter les instructions PHP permettant les appels des sections communes tout en haut et tout en bas de chacune des deux pages de code,

<?php
include('commun/connexion.php');
include('commun/entete.php');
?>
Et
<?php
include('commun/pied-page.php');
?>

Si vous enregistrez les modifications et que vous testez leurs appels depuis la page d'accueil, vous remarquez qu'elles sont désormais parfaitement structurées.

Optimiser les modifications et le développement
Nous proposons maintenant de constater l'intérêt de ces constructions en pièces de puzzle. Les incidences sur le développement sont importantes. Une modification dans une partie commune doit se répercuter sur chacune des pages appelantes. Et pour ce faire, nous proposons simplement de changer l'icône située dans la section de l'entête. Il s'agit du fichier le_formateur.png à remplacer par le fichier formation.png lui aussi situé dans le sous dossier images de l'application.

• Revenir dans l'éditeur de code de la page entete.php,
• En ligne 16 pour un éditeur Notepad, dans la balise img, remplacer le nom du fichier image :

...
<div class='div_conteneur_page'>
<a href='.' target='_self'>
<img src='images/formation.png' style='width:50px;border:none;' align='left' alt='formateur informatique' />
</a>
<div class='titre_page'><h1>Instruction Include - Construction de sites Web</h1></div>
...

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur Web,
• Rafraîchir la page d'accueil avec la touche F5 du clavier,

L'image du logo dans l'entête a effectivement été modifiée.

• En bas de page, cliquer sur les icônes permettant d'accéder aux rubriques de contact et de mentions légales,

La même modification a été opérée. En résumé donc, si notre site contient des centaines de pages, cette seule modification se répercute des centaines de fois. L'intérêt de ces constructions par imbrications prend peu à peu toute son ampleur.



Il s'agit d'ailleurs de la même philosophie que celle du développement client avec les styles CSS.

Ces derniers sont codés dans des fichiers externes et référencés dans chacune des pages ou plutôt une seule fois, dans la section commune de l'entête.

• Revenir dans l'éditeur de code de la page entete.php,

...
<meta http-equiv='content-language' content='fr' />
<link href='styles/mef.css' rel='stylesheet' type='text/css' />

</head>
<body>
...

C'est la balise link associée à son attribut href qui permet de le désigner. Une modification dans ce fichier de styles mef.css, comme une couleur, un arrière-plan, une taille de police ou autre, est immédiatement répercutée sur toutes les pages du site Web.

Portabilité des variables
L'intérêt de ces jeux de construction ne se limite pas à l'optimisation des modifications. Ces imbrications assurent une grande productivité en termes de développement. Elles permettent de porter les valeurs des variables au travers des sections. Ainsi, une information récoltée en amont peut être diffusée au sein de chacune des pages Web pour assurer une implémentation dynamique. C'est ainsi que nous procéderons pour questionner la base de données en fonction de la page appelée. Nous serons alors en mesure de restituer l'information qui lui correspond.

Mais puisque nous n'avons pas encore ces compétences, nous proposons de démontrer cette propagation en récupérant simplement les informations de l'url. L'objectif est de les restituer sous forme de texte dans les rubriques de titre de chacune des pages. Le fichier de code concerné est celui de la page de connexion. Chronologiquement, c'est elle qui intervient avant toutes les autres.

En Php, c'est l'instruction $_SERVER avec l'attribut REQUEST_URI en paramètre qui permet de récupérer l'Url en cours, celle de la page chargée. Si nous savons où nous sommes, nous savons ce que nous avons à faire.

• Afficher le code de la page connexion.php dans l'éditeur Notepad,
• Dans la section PHP, après les commentaires, ajouter les instructions suivantes :

$url_en_cours=$_SERVER['REQUEST_URI'];
echo $url_en_cours;

Nous stockons l'url dynamique vraisemblablement récoltée dans la variable url_en_cours. Puis, nous affichons temporairement son contenu sur la page Web, en lieu et place, grâce à la fonction PHP echo.

• Enregistrer les modifications et basculer sur le navigateur Web,
• Cliquer sur l'icône de l'entête pour revenir sur la page d'accueil,

L'adresse virtuelle du projet Web s'affiche tout en haut de la page.

• Cliquer sur l'une des icônes du pied de page pour changer de destination,

L'information sur l'adresse s'adapte dynamiquement. Elle est portée d'une page à une autre bien qu'elle ne soit écrite qu'une seule fois, dans la section connexion, commune à toutes les pages.

Nous proposons d'exploiter cette donnée dynamique à des fins utiles, notamment pour le référencement Web. Il s'agit d'enrichir pertinemment les balises title et h1 en fonction des termes qui composent l'url. Cependant, il convient de traiter la chaîne de caractères pour supprimer les tirets notamment. Mais ce n'est pas tout. L'adresse virtuelle du projet, commune à toute page, ne procure aucun intérêt. Nous devons seulement prélever l'information située après le dernier slash (/). C'est elle qui renseigne sur la nature et la fonction de la page. Nous allons donc réviser des fonctions Php que nous avions apprises précisément dans la formation sur l'intérêt des fonctions en PHP.

• Revenir dans le code de la page Connexion.php,

Nous avions découvert la fonction Php strpos. Elle permet de trouver la position d'une occurrence dans une chaîne de caractères. Ici, nous cherchons le symbole du slash, mais le dernier. Or à l'instar de strpos, Php propose la fonction strripos (ri pour reverse). Elle réalise cette recherche à l'envers, soit en partant de la fin de la chaîne de caractères.

• Avant l'instruction echo, ajouter le traitement suivant consistant à ne conserver que la partie finale de l'adresse :

$url_en_cours=$_SERVER['REQUEST_URI'];
$url_en_cours=substr($url_en_cours, strripos($url_en_cours,'/')+1);
echo $url_en_cours;

Nous utilisons la fonction substr que nous avions aussi découverte dans les formations passées. Elle permet de découper une chaîne de caractères passée en premier paramètre (L'URL ici) en prélevant à partir d'une position donnée. Cette position est précisément retournée par la fonction PHP strripos. Elle localise l'emplacement de l'occurrence du slash passé en second paramètre. Nous ajoutons une unité à cette position pour prélever la chaîne située après le dernier slash. Comme nous l'avions appris, le troisième argument de la fonction substr est facultatif. Il permet de définir la longueur de découpe. S'il n'est pas renseigné comme ici, la fonction prélève à partir de la position définie jusqu'à la fin de la chaîne.

• Enregistrer les modifications et basculer sur le navigateur,
• Cliquer sur l'une des icônes du pied de page pour afficher sa rubrique,

Comme vous le constatez, seule la partie utile de l'Url subsiste en effet. Seule la page d'accueil retourne une information vierge. Pour une page d'accueil, le serveur ne conserve que le nom de domaine fort logiquement. Nous devrons donc gérer cette exception pour adapter l'information dynamique dans la page. Il s'agit de remplacer les tirets par des espaces grâce à la fonction Php str_replace. Nous la connaissons elle aussi. Elle permet de remplacer une occurrence (le tiret) par une autre (l'espace) dans une chaîne de caractères (L'Url).

• Revenir dans le code de la page connexion.php,
• Ajouter les traitements suivants avant l'instruction echo :

$url_en_cours=$_SERVER['REQUEST_URI'];
$url_en_cours=substr($url_en_cours, strripos($url_en_cours,'/')+1);
$url_en_cours = str_replace('.php', '', str_replace('-','',$url_en_cours));
$url_en_cours = strtoupper(substr($url_en_cours, 0, 1)).substr($url_en_cours,1);
echo $url_en_cours;

Nous avions déjà exploité cette technique de l'imbrication des fonction str_replace pour réaliser des remplacements successifs à la volée, dont l'extension du nomde fichier ici (.php). Ensuite et c'est nouveau, nous utilisons la fonction php strtoupper. Elle permet de convertir en majuscules la chaîne qui lui est passée en paramètre. Comme elle est associée à la fonction substr qui travaille sur le premier caractère de l'URL, elle passe la première lettre de l'expression en majuscule. Puis, la fin de la chaîne lui est concaténée dans sa forme d'origine.

• Enregistrer les modifications et basculer sur le navigateur Web,
• Cliquer sur l'une des icônes du pied de page pour atteindre sa rubrique,

Cette fois la donnée textuelle et dynamique apparaît explicitement purgée de ses parasites. Il convient de l'exploiter pour adapter l'information sur chaque page.

• Revenir dans le code de la page connexion.php,
• Passer l'instruction echo en commentaire,

...
$url_en_cours = strtoupper(substr($url_en_cours, 0, 1)).substr($url_en_cours, 1);
//echo $url_en_cours;
?>

Nous proposons d'ajouter un traitement conditionnel dans la page de l'entête tout en haut du code. Ainsi, nous considèrerons le cas de la page d'accueil et nous restituerons l'information sous forme de variable. C'est l'instruction if dont nous avons déjà appris la syntaxe en Php qui permet de vérifier des critères.

• Afficher le code de la page entete.php dans l'éditeur Notepad,
• Tout en haut du code, avant la balise Html ouvrante, ajouter les instructions suivantes :

<?php
$titre='';
if(isset($url_en_cours) && $url_en_cours!='')
$titre=$url_en_cours;
else
$titre = 'Imbriquer les pages en PHP';
?>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
<head>
...

Comme vous le constatez, nous faisons référence à la variable déclarée dans la section de connexion, tout simplement par son nom. Du fait de l'imbrication chronologique de ces sections, l'entête intervenant après, sa valeur est portée et reconnue par la variable elle-même. Si l'url est définie (fonction isset) et qu'elle n'est pas vide (!=''), nous en déduisons que nous ne sommes pas sur la page d'accueil. En conséquence, nous réceptionnons cette information dans une nouvelle variable $titre. Dans le cas contraire, nous adaptons l'information dédiée à la page d'accueil dans cette même variable. Nous devons l'exploiter pour constater l'impact des données dynamiques portées au travers des sections, dans ces constructions PHP par imbrications.

• Dans la balise title de la section de l'entête, ajouter l'imbrication suivante, à la place du titre statique :

...
else
$titre = 'Imbriquer les pages en PHP';
?>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<title><?php echo $titre; ?></title>
...

• Dans la balise H1 plus bas dans la page, remplacer l'information statique par l'imbrication dynamique suivante :

...
<a href='.' target='_self'>
<img src='images/formation.png' style='width:50px;border:none;' align='left' alt='formateur informatique' />
</a>
<div class='titre_page'><h1><?php echo $titre; ?></h1></div>
...

• Enregistrer les modifications et basculer sur le navigateur Web,
• Cliquer sur les différentes icônes permettant d'atteindre leur page respective,

Comme vous le constatez, les titres dans l'onglet du navigateur et dans le cadre supérieur de chaque page se sont adaptés dynamiquement. C'est ce procédé que nous devons exploiter à grande échelle pour développer nos sites Web. Nous avons codé une seule fois les instructions consistant à récupérer les données dynamiquement. Et nous avons codé une seule fois les instructions consistant à les répliquer pour adapter les informations de page. Une fois encore, si notre site propose des centaines de pages, nous obtenons aussi facilement, des centaines d'informations adaptées au contexte.

Bientôt nous imbriquerons toutes ces connaissances pour bâtir de véritables applications Web et professionnelles.