Hébergement du site en PHP et Mysql par WDMédia-hébergement
Vous aussi adpotez les éléPHPants de Vincent Pontier !  
CONCOURS
 
 
PLUS DE PHP
 
 
PLUS DE JAVASCRIPT
 
COMMENT CA MARCHE
 
 
EXPLIQUE-MOI
 
 
NEWS LETTER
 

 
PARTENAIRES
 
Découvrez scriptsphp.org
Découvrez phpteam.net
Tout sur les expressions régulières
IE sucks :-)
 
DESIGN DU SITE
 
Les pseudos-frames
Tuto écrit par LionZion et Molokai, revu en août 2004 par Molokai et Raf

Cet tutorial a pour but de répondre aux questions fréquentes posées sur le forum à savoir : "Comment faire un site avec des url du type domain.com?page=news". Ce type d'architecture s'appelle les pseudo-frames, car elles remplacent plus qu'avantageusement l'archaïque système de frame HTML. A savoir que les url de ce type ne servent pas qu'à la création de pseudo-frames, mais c'est le rôle qu'elles auront ici.

L'inclusion de fichier

Quelques explications

Voyons tout d'abord ce que sont les pseudo-frames. Il s'agit en fait de découper votre site en plusieurs parties, chacune dans un fichier différent, puis les regrouper dans une page. Pourquoi donc ? Et bien afin de faciliter les mises à jour, tout comme c'était le cas avec les frames originales. En effet imaginons que vous avez un menu sur votre site. Ce menu est affiché sur toutes les pages de votre site. Si vous deviez le recopier dans chaque page, cela voudrait dire qu'à chaque mise à jour du menu, il faudrait aller le corriger dans chaque page.

Avec les pseudo-frames, ce problème ne se pose plus.Vous créez un fichier menu.htm, et vous appeler ce fichier dans chaque page. Lorsque vous mettez à jour le fichier menu.htm, votre menu est mis à jour sur chaque page automatiquement. Cela n'explique pas encore la raison du "page=news" dans l'url, mais cela va nous servir de point de départ.

Un peu de pratique

Nous allons donc créer notre menu dans le fichier menu.htm. Il s'agit ici simplement d'un peu de HTML, notez qu'il n'y a pas de balise <head>, <html> ou <body>, car comme nous l'avons vu, cette page sera insérée dans une autre qui, elle, contiendra ces balises. On n'y met donc que le strict nécessaire. Notez également que ce code sera modifé par la suite, pour le moment on se contente d'un menu simple, sans pseudo-frames.

Le code de la page menu.htm

<ul>
  <li>

    <a href="accueil.php" title="L'accueil">Accueil</a>
  </li>
  <li>
    <a href="news.php" title="Les News ">News</a>
  </li>
</ul>

 

Puis nous allons créer deux autres pages pour notre site, la page accueil.php et la page news.php (qui sont les pages sur lesquelles pointe notre menu).

Le code de la page accueil.php

<div class="colonneGauche">
<?php
  include('menu.htm');  // Nous appelons notre menu

?>
</div>
<div class="colonneDroite">
  <p>Ici nous aurions le contenu de notre page d'accueil.</p>

</div>


Le code de la page news.php

<div class="colonneGauche" >
<?php
  include('menu.htm');  // Nous appelons notre menu

?>
</div>
<div class="colonneDroite">
  <p>Ici nous aurions les news de notre site.</p>

</div>

 

Explication

Comme vous pouvez le voir, le processus est le même sur ces deux pages. Nous utilisons la structure de langage include() qui permet d'inclure un ficher et d'exécuter son contenu. Là en l'occurence il s'agit simplement de HTML, donc il n'a rien à exécuter mais cela aurait très bien pu être du PHP comme nous allons le voir plus loin. Je vous invite à vous documenter sur cette structure de langage dans la doc PHP afin d'en connaître le fonctionnement.

Ce que nous avons fait aura pour effet d'afficher le menu sur ces deux pages. Les avantages sont que le rendu final se fera sur une page unique, et, comme nous l'avons vu plus haut, en cas de modification du menu, vous ne modifiez que menu.htm. Comme c'est le même fichier qui est inclus à chaque fois, les changements se répercuteront automatiquement sur tout le site (du moins partout où vous avez inclus ce fichier).

Tout ceci est bien beau mais cela ne nous explique pas la raison du paramètre d'url "page=news", vu plus haut...

 

Les pseudos-frames

Encore quelques explications

Nous avons donc vu qu'il était possible et très facile d'inclure un fichier dans un autre fichier en PHP. Cela va nous ouvrir la voie des pseudos-frames. En effet imaginons que nous soyons capable de prévoir quelle page doit être incluse et quand, nous pourrions découper tout notre site en plusieurs morceaux tout gardant une page centrale qui se chargerait d'appeler le bon morceau au bon moment.

C'est ici que va nous servir le paramètre d'url. En effet c'est lui va nous permettre de savoir que quand l'utilisateur clique sur tel lien, c'est tel page qu'il faut appeler et afficher. Comment ? C'est ce que nous allons voir...

La preuve par l'exemple

Veuillez noter que le code qui va suivre contient un énorme trou de sécurité. Il n'est qu'à titre d'exemple et d'apprentissage par pallier. Le code sécurisé suit, merci donc de lire le tutorial jusqu'au bout.

Nous allons commencer par créer les morceaux de pages. Ici nous avons besoin de l'accueil et des news. Le menu lui aussi va être légèrement modifié, vous comprendrez plus tard pourquoi.

Le code de la page accueil.php

<p>Mettez ici simplement le contenu que vous voulez voir afficher en accueil.</p>


Le code de la page news.php

<p>Mettez ici simplement le contenu que vous voulez voir afficher dans les news. Il y a de forte chance que cela soit du code PHP qui vous génère ces news. Cela ne pose aucun problème, procédez comme à votre habitude: requête, boucle et echo.</p>


Le code de la page menu.htm

<ul>
  <li>

    <a href="index.php?page=accueil" title="L'accueil">Accueil</a>
  </li>
  <li>
    <a href="index.php?page=news" title="Les News ">News</a>
  </li>
</ul>

 

Nous allons maintenant créer une page index.php qui va être le noyau de notre site. Elle va se charger d'inclure tout les éléments découpés afin de construire une page complète.

Le code de la page index.php

<div class="entete" >
<?php
  include('entete.htm');  // Nous appelons l'entete du site

?>
</div>
<div class="colonneGauche" >
<?php
  include('menu.htm');   // Nous appelons notre menu

?>
</div>
<div class="colonneDroite">
<?php
  include($_GET['page'].'.php');   // Nous appelons le contenu central de la page

?>
</div>

<div class="pied">
<?php
  include('pied.htm');   // Nous appelons le pied de page

?>
</div>

Comme vous l'avez sûrement compris, tout le problème consiste à savoir quand il faut inclure les news ou l'accueil. Notez les modifications de la page menu : les liens pointent dorénavant tous sur la page index.php, mais il y a plus. Ces derniers ont été complétés avec un paramètre page auquel nous affectons une valeur en fonction de ce que nous voulons afficher.

Sur la page index.php nous récupérons ce paramètre ainsi que la valeur qu'il contient à l'aide de $_GET['page']. Cette dernière est ce l'on appelle une variable globale. Tout comme $_POST permet de récupérer des valeurs passées par formulaires (voir le tutoriel 5), $_GET permet de récupérer des valeurs passées dans l'URL.

Conclusion

Donc lorsque le visiteur clique sur le lien news, le paramètre page avec la valeur news est transmis à la page index.php. Sur cette dernière on récupère cette valeur. Et donc l'include qui dans le code est include($_GET['page'].'.php') va devenir dynamiquement include('news.php') et c'est donc bien la page contenant le news qui va être incluse dans la page noyau. De même pour l'accueil. Cette fois le paramètre page sera égal à accueil et donc l'include sera modifié en fonction.

 

Problème de sécurité

Le problème

Si vous avez bien lu, vous savez que le paramètre page est affiché en clair dans la barre d'adresse du navigateur. Il est donc facilement modifiable par l'utilisateur. Ce dernier peut dès lors inclure n'importe quoi dans votre page index.php ! Il convient donc de tester ce que vaut ce paramètre avant d'inclure la page demandée et surtout vérifier que cela correspond bien à ce que vous permettez.

Nous allons pour cela créer un tableau contenant un listing de toutes les pages que vous autorisez dans cet include.

Le code

Le code de la page index.php

<div class="entete" >
<?php

  include('entete.htm');  // Nous appelons l'entete du site
?>
</div>
<div class="colonneGauche" >
<?php

  include('menu.htm');   // Nous appelons notre menu
?>
</div>
<div class="colonneDroite">
<?php

  // On définit le tableau contenant les pages autorisées
  //
 ----------------------------------------------------
  $pageOK
= array('news' => 'news.php',
                  'accueil' => 'accueil.php');


  // On teste que le paramètre d'url existe et qu'il est bien autorisé
  // -----------------------------------------------------------------

  if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']])) ) {
    include($pageOK[$_GET['page']]);   // Nous appelons le contenu central de la page
  } else {
    include('accueil.php');   // Page par défaut quant elle n'existe pas dans le tableau
  }

?>
</div>
<div class="pied">
<?php
  include('pied.htm');   // Nous appelons le pied de page
?>
</div>

 

Explication

Comme vous le voyez nous avons créé un tableau associatif. Ce tableau est construit ainsi : son index représente les paramètres d'inclusion autorisés dans l'url, les valeurs représentent le chemin réel du fichier. En l'occurence les fichiers sont dans le même répertoire que la page index.php, mais vous auriez pu vouloir inclure un fichier dans le répertoire colGauche contenu dans le répertoire courant. Dans ce cas vous auriez dû rajouter une ligne au tableau de cette forme :
'page'
=> 'colGauche/fichier.php'.

Ensuite nous testons l'existence de cette ligne du tableau avec comme index du tableau, le paramètre passé en url. Si la ligne existe c'est que le paramètre est autorisé, on inclu donc le fichier en utilisant la valeur de la ligne concernée du tableau.

Note : vous l'avez sûrement remarqué, j'ai spécifié des classes dans mes divs. Elles sont là à titre purement indicatif, vous pouvez les modifier à loisir.

 

Conclusion

Voilà c'est terminé. Si vous avez bien suivi vous pouvez maintenant créer des architectures de sites plus ou moins complexes qui vous faciliteront les mises à jour et le graphisme tout en restant parfaitement accessibles (si vous respectez les standards au niveau du code HTML bien sûr). N'oubliez jamais le problème de sécurité et le moyen d'y remédier sans quoi vous pourriez rencontrer quelques surprises.

Sachez également que vous pouvez utiliser plus d'un paramètre dans vos url, il suffit pour cela de les séparer par des "&" (domain.com?paramOne=1&paramTwo=2).

Voilà cette fois c'est tout, bonne chance.



Ajouter une réponse
Nom
Email
Titre

Mise en forme : gras = [b]...[/b], italic = [i]...[/i], souligné = [u]...[/u], citation = [quote]...[/quote], lien = [url]liens_externe[/url] ou [url nom=texte]liens_externe[/url], code source : [code]...[/code]

Mémoriser mon nom et mon email : Oui Non
www.phpdebutant.org © 2024 - L'équipe de phpDebutant - Hébergement : WDMédia-hébergement
DEBUTEZ !
 
  0.  Introduction
  1.  Afficher une phrase ou une image
  2.  Afficher la date et l'heure
  3.  PHP dans du code HTML
  4.  La concaténation
  5.  Récupérer les valeurs d'un formulaire
  6.  Les structures de contrôle
  7.  Ecrire et lire dans un fichier texte
  8.  Les fonctions utilisateurs
  9.  Les variables d'environnement
  10.  Quelques fonctions utiles
  11.  SQL/MySQL (Create, Alter & Drop)
  12.  SQL/MySQL (Insert et Select)
  13.  SQL/MySQL (Delete et Update)
  14.  SQL/MySQL (Where)
  15.  Fonctions PHP pour mySQL
  16.  Interroger une table MySQL
  17.  Alimenter une ou plusieurs tables mySQL
  18.  Les pseudos-frames
  19.  Les sessions php4
  20.  Affichage page par page
  21.  Images dynamiques
  22.  Ca marche pas ?
  23.  Variables globales à OFF
  24.  Les variables dynamiques