Enrichir dynamiquement les pages 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 :


URL et pages dynamiques en Php

Dans les formations Php précédentes, nous avons bâti un système de listes déroulantes reliées entre elles. Au choix d'un département dans la première liste et d'une ville dans la seconde, nous avons restitué tous les enregistrements concordants des idées de sorties. C'est un code Php qui exécute une requête SQL pour attaquer la base de données, en recoupant les critères émis dans une clause Where. Nous avons alors mis en oeuvre la technologie Ajax pour restituer les résultats sans induire un rechargement complet de la page Web. Puis, nous avons conçu un système de pagination, offrant à l'internaute la possibilité de parcourir l'ensemble des données, en naviguant au travers des pages.

Désormais, nous souhaitons accéder aux détails des enregistrements. Dans les résultats de la page, l'internaute doit pouvoir cliquer sur l'une des idées de sorties extraites. Ce clic doit conduire vers une page Web offrant le descriptif intégral de l'enregistrement désigné. Ces données sont dynamiques. Il n'est pas possible de connaître leur nombre. Il n'est pas envisageable de prévoir une page Web spécifique pour chaque enregistrement. Une seule page doit réceptionner ces données et adapter son contenu dynamiquement. L'astuce consiste à prélever les paramètres depuis l'Url de la page appelée.

Sources et présentation de la problématique
Les travaux réalisés en amont sont riches et précieux. Nous devons les récupérer avant de débuter.

• Télécharger le fichier pages-et-url-dynamiques.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. Il est nommé index.php. Cette page propose les listes déroulantes reliées restituant les résultats des critères recoupés. Nous le constaterons bientôt. Elle est accompagnée des fichiers reponse.php et fiche.php à la racine. Le premier renferme le code Php externalisé appelé par les techniques Ajax, pour attaquer la base de données sans recharger la page Web. Le second correspond à cette fameuse page Web dont le contenu doit s'adapter dynamiquement, en fonction de l'idée de sortie cliquée, dont il s'agit de restituer le descriptif.

Importer les données SQL
Les sous dossiers proposent les ressources externes comme toujours. L'un d'entre eux se nomme bdd. Il offre les données à importer en base MySql. Nous y avons ajouté un champ supplémentaire, celui du descriptif.

• Lancer EasyPhp,
• Puis, démarrer les deux serveurs (http et Database),
• Cliquer ensuite sur le bouton Open du module d'administration MySql,

Nous accédons ainsi à l'interface d'administration PhpMyAdmin. Si la base de données ids n'existe pas, elle doit être créée. Il s'agit donc de la nommer ids et de définir l'interclassement sur utf8_general_ci. Nous avions appris ces techniques dans la formation pour créer sa première base de données MySql. Si elle existe et qu'elle contient la table liste_id, cette dernière doit être supprimée. Comme nous le disions précédemment, par le jeu de l'importation, nous allons modifier la structure de cette table. Comme nous l'avions appris, pour supprimer une table, elle doit tout d'abord être sélectionnée depuis le volet de gauche de PhpMyAdmin. Ensuite, vous devez cliquer sur l'onglet Opérations en haut de l'interface de PhpMyAdmin. Enfin, vous devez cliquer sur le lien Supprimer la table et confirmer.

La base de données étant créée et vidée de toute table, nous pouvons procéder à l'importation des informations externes.

• Dans le volet de gauche, cliquer sur le lien de la base ids pour la sélectionner,
• En haut de l'interface de PhpMyAdmin, cliquer sur l'onglet Importer,
• Cliquer ensuite sur le bouton Parcourir,
• Puis, double cliquer sur le fichier id2sorties.sql situé dans le sous dossier bdd du dossier de décompression,

Tous les paramétrages peuvent être conservés car il s'agit de données au format SQL.

• Cliquer sur le bouton Exécuter pour procéder à l'importation,

Le processus peut durer plusieurs dizaines de secondes. La masse d'information à intégrer est relativement dense. A l'issue, un message de succès apparaît.

• Dans le volet de gauche, cliquer sur le lien de la table liste_id,

Cette dernière a été automatiquement créée par le fichier Sql importé.



1000 enregistrements sont recensés. Donc 1000 idées de sorties sont proposées. Par rapport aux formations précédentes, vous notez l'apparition du nouveau champ liste_descriptif. C'est lui qui doit permettre d'enrichir dynamiquement les pages appelées au clic sur un enregistrement.

Pour que le code PHP puisse accéder à cette base de données, le compte suivant, avec les droits administrateurs, doit être créé :

• Nom d'utilisateur : codePHP,
• Mot de passe : php123bd,
• Nom d'hôte : L'adresse locale, ici : 127.0.0.1,

Comme vous le savez, ce projet doit ensuite être référencé dans l'interface d'EasyPhp. Un nom doit lui être attribué. De plus, son adresse issue de l'explorateur Windows doit être désignée. Dès lors, le projet apparaît dans la liste des applications serveur émulées.

• Cliquer sur le lien du projet pour afficher sa page d'accueil,
• Sur la page Web, déployer la liste déroulante qui se propose,
• Choisir un département, comme : 26-Drome,
• Dans la seconde liste qui se construit automatiquement, choisir la ville de Valence,

Toutes les idées de sorties concordantes apparaissent en effet. Elles peuvent être parcourues grâce au système de pagination proposé en dessous des résultats, sous forme de numéros de page. A chaque requête, aucun rechargement n'est à déplorer, grâce à l'appui de la technologie Ajax que nous avions mise en oeuvre.

Url dynamiques et paramètres
Nous devons proposer à l'internaute de consulter le détail d'une idée de sortie, au clic sur son lien. Ces liens n'existent pas. Nous devons les créer par le code PHP. Il s'agit d'inclure les désignations extraites dans des balises Html a href, par le code Php. Chaque clic doit conduire vers la page fiche.php, proposée à la racine du dossier de décompression. Mais chaque clic ne doit pas livrer le même résultat. La page fiche.php doit charger son contenu en fonction de l'enregistrement cliqué. L'astuce consiste à enrichir l'Url de la page appelée, avec l'identifiant de l'enregistrement cliqué (fiche.php?ID=num). Nous avions d'ailleurs déjà mis en oeuvre ce principe dans la formation Php pour déconnecter un utilisateur. Un code Php pourra alors questionner la base de données MySql sur l'identifiant récupéré depuis l'URL.

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

Nous y retrouvons le code Php que nous avons développé dans les formations précédentes. Il est appelé à soumission du formulaire. Il restitue les enregistrements correspondant aux critères recoupés, émis par l'internaute à l'aide des listes déroulantes liées. Il construit de même le système de pagination pour naviguer au travers des pages. En entête de ce code, vous notez la présence de la chaîne de connexion, avec les identifiants nécessaires pour atteindre la base de données MySql.

<?php
if(isset($_POST["choix_dep"]) && isset($_POST["choix_ville"]))
{
$liaison2 = mysqli_connect("127.0.0.1", "codePHP", "php123bd");
mysqli_select_db($liaison2, "ids");

$le_dep = $_POST["choix_dep"];
$la_ville = $_POST["choix_ville"];
...

La seconde requête Sql est celle qui extrait les enregistrements en fonction des conditions émises, grâce à sa clause WHERE :

...
$depart = ($depart-1)*10;

$requete = "SELECT liste_nom, liste_activite FROM liste_id WHERE liste_dep='".utf8_decode($le_dep)."' AND liste_ville='".utf8_decode($la_ville)."' ORDER BY liste_nom LIMIT ".$depart.",10;";
$retours = mysqli_query($liaison2, $requete);
$chaine = "";
while($retour = mysqli_fetch_array($retours))
{
$chaine .= "<div style='float:left; width:190px; margin-left:10px; font-size:12px; text-align:left;'>".utf8_encode(str_replace("#", "'", $retour["liste_nom"]))."</div><div style='float:left; width:130px; font-size:10px; text-align:left;'>".utf8_encode(str_replace("#", "'", $retour["liste_activite"]))."</div><br/>";
}
...

Ces enregistrements sont ensuite restitués grâce à une boucle While les parcourant tous. Ils sont encapsulés dans des balises Div (Calques Html), pour des raisons de présentation. Les noms de ces activités doivent devenir cliquables pour accéder à leur détail. Il s'agit d'appeler la page fiche.php avec le numéro de la clé primaire passé en paramètre. Cette clé primaire est identifiée par le champ liste_num. Or, ce dernier n'est pas considéré par la requête sélection. Nous devons l'inclure pour exploiter sa valeur dans la boucle While.

• Adapter le code PHP selon les indications mentionnées en gras :

...
$depart = ($depart-1)*10;

$requete = "SELECT liste_num, liste_nom, liste_activite FROM liste_id WHERE liste_dep='".utf8_decode($le_dep)."' AND liste_ville='".utf8_decode($la_ville)."' ORDER BY liste_nom LIMIT ".$depart.",10;";
$retours = mysqli_query($liaison2, $requete);
$chaine = "";
while($retour = mysqli_fetch_array($retours))
{
$chaine .= "<div style='float:left; width:190px; margin-left:10px; font-size:12px; text-align:left;'><a href='fiche.php?ID=".$retour["liste_num"]."' style='text-decoration:none; color:#666666;'>".utf8_encode(str_replace("#", "'", $retour["liste_nom"]))."</a></div><div style='float:left; width:130px; font-size:10px; text-align:left;'>".utf8_encode(str_replace("#", "'", $retour["liste_activite"]))."</div><br/>";
}
...

Nous commençons par inclure le champ liste_num dans l'énumération de la requête Sql. Nous pourrons ainsi le désigner pour construire l'Url de destination dynamiquement. Puis, dans la boucle While, nous encadrons le nom de l'activité dans une balise de lien (a href). La destination est la page fiche.php avec le paramètre ID réglé sur la valeur de la clé primaire, pour l'enregistrement correspondant. Nous n'oublions pas de fermer la balise du lien dans la concaténation, après le nom de l'activité. C'est ce paramètre ID que nous devrons exploiter pour construire dynamiquement le contenu de la page appelée.

• Enregistrer les modifications et basculer sur le navigateur Internet,
• Recharger la page Web en validant sa barre d'adresse avec la touche Entrée,
• Choisir un département puis une ville liée à l'aide des listes déroulantes,
• Enfin, cliquer sur l'un des noms d'idées de sorties extraits,

En consultant la barre d'adresse, vous remarquez que nous avons appelé la page de destination avec succès, tout en lui greffant le paramètre du numéro de l'enregistrement qu'il s'agira de restituer dynamiquement.

• Cliquer sur l'icône située sur la gauche du bandeau supérieur,

Nous revenons ainsi sur la page d'accueil de notre petit site Web.

Récupérer les paramètres d'Url
Notre attention doit désormais se focaliser sur le code de la page fiche.php. Dans un premier temps, nous devons réceptionner le paramètre transmis. Dans un deuxième temps, il s'agira de l'exploiter pour interroger la base de données et restituer les informations liées.

• A la racine du dossier de décompression, cliquer droit sur le fichier fiche.php,
• Dans le menu contextuel, choisir de l'ouvrir avec éditeur comme le Notepad++,

En entête de page, la section de code Php existe déjà. Elle est vide pour l'instant. Comme nous l'avons déjà appris, c'est l'instruction $_GET qui permet de récupérer les informations de l'Url, selon le nom du paramètre qui lui est passé.

• Dans la section Php, ajouter les lignes de code suivantes :

<?php
if(isset($_GET["ID"]) && $_GET["ID"]!="")
{
$lid = $_GET["ID"];
echo $lid;
}
?>
...

Par mesure de précaution, nous réalisons un test d'existence sur le paramètre transmis. Et pour ce faire, nous exploitons la fonction Php isset. S'il existe en effet, nous stockons sa valeur dans une variable que nous nommons $lid. Puis, à titre de vérification, nous l'affichons en lieu et place, soit en haut de la page, grâce à l'instruction Php echo.

• Enregistrer les modifications et basculer sur le navigateur Internet,
• Choisir un département puis une ville avec les listes déroulantes liées,
• Cliquer sur le nom de l'une des idées de sorties extraites,

Le numéro transmis est parfaitement restitué, comme vous pouvez le constater.

• Cliquer sur l'icône en haut à gauche pour revenir sur la page d'accueil,
• Dans le code de la page fiche.php, supprimer la ligne de l'instruction echo,

Charger dynamiquement le contenu d'une page Web
Le numéro que nous avons réceptionné en paramètre de l'Url correspond à la clé primaire de l'enregistrement cliqué. Nous devons l'exploiter en clause Where d'une requête SQL pour interroger la base de données MySql. Nous pourrons ainsi extraire toutes les informations liées à l'enregistrement concerné. Il ne nous restera plus qu'à les restituer dans la page pour construire son contenu dynamiquement.

• Dans les bornes de l'instruction conditionnelle, ajouter le code suivant :

<?php
if(isset($_GET["ID"]) && $_GET["ID"]!="")
{
$lid = $_GET["ID"];
$liaison = mysqli_connect("127.0.0.1", "codePHP", "php123bd");
mysqli_select_db($liaison, "ids");

$requete_nb = "SELECT * FROM liste_id WHERE liste_num=".$lid;
$retours_nb = mysqli_query($liaison, $requete_nb);
$tab_nb = mysqli_fetch_array($retours_nb);

$le_nom = utf8_encode(str_replace("#", "'", $tab_nb["liste_nom"]));
$le_dep = utf8_encode($tab_nb["liste_dep"]);
$lactivite = utf8_encode(str_replace("#", "'", $tab_nb["liste_activite"]));
$la_ville = utf8_encode(str_replace("#", "'", $tab_nb["liste_ville"]));
$le_contenu = utf8_encode(str_replace("#", "'", $tab_nb["liste_descriptif"]));

mysqli_close($liaison);
}
?>

Pour accéder à la base de données, nous initialisons de nouveau la chaîne de connexion. Nous sommes en effet sur une nouvelle page. Certes, ces paramétrages devraient tous être regroupés dans un fichier commun imbriqué dans la construction, comme nous l'avons appris dans une formation précédente. Qu'à cela ne tienne. En connaissance de cause, à l'issue des traitements, nous n'oublions de refermer la connexion grâce à la fonction Php mysqli_close.

Ensuite, nous initialisons une requête Sql récupérant les informations de tous les champs (SELECT *) à partir de la table liste_id (FROM liste_id) pour lesquels la clé primaire est égale au paramètre transmis dans l'Url (WHERE liste_num=".$lid). Comme il s'agit d'un paramètre numérique, la variable ne doit pas être encadrée de côtes. Puis, comme toujours, nous exécutons cette requête grâce à la fonction Php mysqli_query. Il en résulte un objet stocké dans la variable $retours_nb. Nous la découpons en tableau de variables grâce à la fonction Php mysqli_fetch_array. Ce tableau est nommé $tab_nb. Grâce à lui, les informations de champs sont accessibles par leur nom à spécifier en paramètre de ce tableau. Une boucle while n'est pas nécessaire pour parcourir les enregistrements. La clause Where est posée sur la clé primaire. La clé primaire est unique. Un seul enregistrement est extrait, celui du numéro cliqué par l'internaute.

Dès lors, grâce à ce tableau de variables, nous stockons les informations de champ dans des variables respectives. Comme à chaque fois, nous exploitons la fonction Php utf8_encode pour être en conformité avec le système d'encodage de la page Web. Les accents sont ainsi parfaitement gérés. Dans cette base de données, les apostrophes sont encodées sous forme de dièse (#). C'est pourquoi, nous exploitons aussi la fonction Php str_replace afin de les restituer correctement.

Nous devons désormais exploiter ces variables pour enrichir la page Web, aux endroits clés prévus à cet effet. Deux balises H1 sont proposées dans le code Html pour la mise en avant des titres. Nous souhaitons y inscrire le nom de l'idée de sortie.

• Entre les balises H1, remplacer l'information statique par le code Php suivant :

...
<div style="width:auto; display:block; height:auto; text-align:center; background-color:#ccccff; border:#7030a0 1px solid; padding-top:12px; box-shadow: 6px 6px 0px #aaa; color:#7030a0;">
<h1><?php if(isset($le_nom)){echo $le_nom;} ?></h1>
</div>
...

Il s'agit d'une imbrication classique de code dynamique Php dans un code statique Html. Nous testons néanmoins l'existence de la variable $le_nom avant de restituer son contenu. Nous nous assurons ainsi, en cas de mauvais paramètre, de ne pas générer d'erreur.



Si vous testez ces premières intégrations à ce stade, vous constatez en effet que les informations de l'entête de la page Web sont enrichies dynamiquement. Nous devons poursuivre l'implémentation dans le calque d'identifiant contenu. Pour faciliter son repérage, il contient une répétition de la séquence suivante : test<br />, à partir de la ligne 72 pour un éditeur Notepad.

• Remplacer ces répétitions par la section de code Php suivante :

...
</div>

<div class="titre_centre" id="contenu" style="height:auto; text-align:left;">
<?php
if(isset($le_nom))
{
echo "<strong>".$le_nom."</strong><br/>";
echo"<i>".$lactivite.",".$le_dep.",<strong>".$la_ville."</strong></i>";
echo "<br /><br />";
echo $le_contenu;
}
?>
</div>

<div class="centre">
...

Après un test sur l'existence de l'une des variables, nous restitutions l'ensemble des informations mises en forme, grâce à une imbrication de balises Html et de code Php.

• Enregistrer les modifications et basculer sur le navigateur Internet,
• Revenir sur la page d'accueil,
• Choisir le département de la Drôme et la ville de Valence,
• Dans la petite barre de navigation inférieure, cliquer sur le numéro 2 pour atteindre la deuxième page des enregistrements restitués,
• Puis, cliquer par exemple sur l'idée de sortie : L'Oliveraie,

Comme vous le constatez, nous avons parfaitement réussi à construire dynamiquement le contenu de la page Web, par le code Php. Et pour preuve, si vous revenez sur l'accueil et que vous cliquez sur une autre idée de sortie, la même page est appelée mais son contenu est adapté au nouvel enregistrement.

Voilà donc comment, avec une seule page Php, référencer une infinité de rubriques, selon les informations contenues en base de données. Mais bien que l'aboutissement de ces travaux soit concluant, ils ne sont pas encore tout à fait satisfaisants. L'url ainsi construite est néfaste pour le référencement naturel d'un site internet. Elles sont toutes semblables. Elles ne diffèrent que par le numéro en paramètre. Les robots d'indexation ne les considèrent pas comme crédibles. C'est pourquoi, dans le volet suivant, nous aborderons les techniques de réécriture d'Url, l'Url Rewriting.