organiser (structurer) la réalisation d'un site internet

organiser (structurer) la réalisation d'un site internet - PHP - Programmation

Marsh Posté le 24-03-2004 à 09:25:46    

voila
etant developpeur j'aimerai savoir quelles sont les techniques pour dissocier le code (requete, calcul etc..) de l'interface?
 
je connais un peu le principe des CSS  
 
j'aimerai dissocier par exempele mes resultat des requete et leur affichage
pouvoir avoir n'importe quelle interfca sans avoir a changer quoi que se soit de la partie developpement.
 
exemple d'un de mes problemes:
 
je fais uen fonction recursive qui fais une requete de recuperation de produit dans une table enfonction de la categorie etc.... et en meme temps j'affiche ces produits.
 
commander dissocier l'affichage de la recuperation?
 
si je suis pas clair faite le moi savoir   :D  
 
ou alors pour etre plus clair :
 
comment doit-on organiser son code?
comment doit-on commencer a developper et a creeer son site pour ensuite ne pas etre bloquer et pour bien dissocier?
quelles sont les techniques  asavoir pour developper un site qui peu deveneir d'envergure et facilement modfiable et bien structurer (du point de vue du code) ?
 
merci d'avance


Message édité par saxgard le 24-03-2004 à 16:37:25
Reply

Marsh Posté le 24-03-2004 à 09:25:46   

Reply

Marsh Posté le 24-03-2004 à 09:52:19    

Tu peux faire un modèle statique avec son CSS du genre :
 

Code :
  1. <html>
  2. <head>
  4. <style type="text/css" media="all" title="currentStyle">@import "/ta_feuille.css";</style>
  5. <title>
  7. {titre}
  9. </title>
  10. </head><body>
  11. <div id="cadre_principal">
  12. <!-- Zone de contenu -->
  13. <div id="menu_1">
  14. <ul>
  15.    {menu_haut}
  16. </ul>
  17. </div>
  18. <div id="menu_2">
  19. <ul>
  20.    {menu_bas}
  21. </ul>
  22. </div>
  23. <div id="sous_menu">
  24. <ul>
  25.    {sous_menu}
  26. </ul>
  27. </div>
  28. <div id="texte">
  29.    <h3>Titre du texte</h3>
  30. <p>    {texte}
  31. </p>
  32. </div>
  33. <div id="langues">
  34. <ul>
  35.    {langues}
  36. </ul>
  37. </div>
  38. <div id="references">
  39. <ul>
  40. <li><a href="#" id="ref"><span>References</span></a></li>
  41. </ul>
  42. </div>
  43. <!-- Fin de zone de contenu -->
  45. </div>
  46. <!-- Fin du document -->
  47. </body>
  48. </html>


Puis une fonction
 

Code :
  1. <?php
  3. function applique_modele($motif, $remplacement, $modele) {
  5. $text = "";
  6. if (is_file($modele)) {
  7.  //cherche et remplace
  8.  $id = fopen($ou, "rb" );
  9.  while (!feof ($id)) {
  10.        $text .= fgets($id, 4096);
  11.       }
  12.       $text = preg_replace($motif, $remplacement, $text);
  13.       fclose($id);
  15. }
  17. return $text;
  19. }
  20. ?>


$motifs = array ('{titre}', '{menu_haut}', ...);
$remplacement = array ('ton titre', 'ton menu', ...);
qui remplace tous tes {motifs} par leur contenu réel.
 
Comme cela tu as tes fonctions qui récupèrent ton contenu et le mettent en forme, tu as ton modèle, tu intégre le contenu dans le modèle et tu renvoies au client.


Message édité par T509 le 24-03-2004 à 12:03:31
Reply

Marsh Posté le 24-03-2004 à 11:35:21    

hmmm attend j'ai du mal a comprendre  ;)
 
euh la 1er partie c'est admettons ma page accueil
j'ai la feuille de style gabarit.css qui n'est pas affiché dans tes exemples.
 
et la fonction sert a modifier la feuille de style?  
de quel fichier on parle dans cette fonction?
 
je suis désolé si je suis un peu lourd c'est quelquechose de nouveau pour moi  ;)

Reply

Marsh Posté le 24-03-2004 à 11:58:30    

Le gabarit.css c'est un exemple.
 
1-Tu as une page (x)html et une feuille CSS associée statiques.
2- tu as dedans des mots clé comme {titre}, {menu}, {sous_menu} ...
3- Tu prépares avec des scripts le contenu qui correspond à ces éléments
4- tu lis le contenu de ton modèle (x)html et tu remplaces les mots clé par le contenu précédent avec la fonction indiquée.
5- tu fais un echo de tout cela


Message édité par T509 le 24-03-2004 à 12:01:13
Reply

Marsh Posté le 24-03-2004 à 12:37:51    

enregistre le fichier html exemple sur ton disque
 
et teste le script suivant :

Code :
  1. <?php
  2. $entree = array(
  3.  "/{titre}/",
  4.  "/{menu_haut}/",
  5.  "/{sous_menu}/",
  6.  "/{langues}/" );
  8. $sortie = array(
  9.  "un joli titre",
  10.  "un beau menu",
  11.  "un sous menu",
  12.  "une langue chargée" );
  14. $modele = "modele.html";
  15. $page = applique_modele($entree, $sortie, $modele);
  16. echo $page;
  17. ?>


et tu comprendras comment cela fonctionne


Message édité par T509 le 24-03-2004 à 12:38:18
Reply

Marsh Posté le 24-03-2004 à 13:00:46    

d'accord je te remercie j'essayerai ca  :D  
je te tiens au courant
Si d'autres personnes on d'autres remarques ou suggestion ou idées etc.. je suis prenneur
 
si vous pouviez expliquez vos demarche pour realiser un site web
 
 

Reply

Marsh Posté le 24-03-2004 à 13:05:28    

Le principe général, c'est les templates (modèles en français) comme expliqué par T509.
 
Mais un template c'est limité, par exemple, tu peux avoir le sequelete d'une page et réserver une place pour un tableau de produits. Le problème, c'est que le tableau HTML, il faut bien le générer quelque part en PHP et là on remélange le code et la présentation.
 
Il existe une méthode de plus en plus répandue pour gérer celà :
XML / XSL
 
Ton application récupère les données d'une base ou d'ailleur, et les stocke dans une structure XML.
 
La présentation (génération du HTML final) est confiée à une feuille de style XSL. Cette dernière est un fichier XML qui contient le squelette HTML ( XHTML en fait :D ), et des instruction pour générer les morceaux qui dépendent des données variables. Ses instructions forment (pour simplifier) des sous modèles à appliquer à des portions du XML représentant les données.
 
Avec la même application, il est ainsi possible de choisir la feuille de style XSL ( à ne pas confondre avec les feuilles de style CSS :/ ) pour une présentation donnée : XHTML pour le WEB, XHTML pour WAP, XSL-FO pour générer un PDF ou du PostScript...
 
Pour celà, il suffit d'appeler une fonction magique qui fait la transformation :D
 
Un exemple simple :
 
XML des données :

<?xml version="1.0" encoding="UTF-8"?>
<root>
 <document id="1">
  <auteur>Maurice</auteur>
  <titre>Mon premier essai</titre>
  <contenu>Bla bla bla ...</contenu>
 </document>
 <document id="27" selected="yes">
  <auteur>Pierre</auteur>
  <titre>Qui roule</titre>
  <contenu>Vous connaissez la suite</contenu>
 </document>
 <document id="51">
  <auteur>Moi</auteur>
  <titre>J'ai rien</titre>
  <contenu>a dire ...</contenu>
 </document>
</root>


 
XSL pour un rendu XHTML sous forme de tableau BASIQUE !

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
 
<xsl:template match="root">
 <h1>Liste de document</h1>
 <table cellpadding="2" cellspacing="2" border="1" width="100%">
  <tr>
   <th>ID</th>
   <th>Auteur</th>
   <th>Titre</th>
   <th>Contenu</th>
  </tr>
  <xsl:apply-templates select="document" mode="seleted" />
  <xsl:apply-templates select="document" mode="other" />
 </table>
</xsl:template>
 
<xsl:template match="document" mode="seleted" >
 <xsl:if test="@selected">
  <tr bgcolor="green">
   <td><xsl:value-of select="@id" /></td>
   <td><xsl:value-of select="auteur" /></td>
   <td><xsl:value-of select="titre" /></td>
   <td><xsl:value-of select="contenu" /></td>
  </tr>
 </xsl:if>
</xsl:template>
 
<xsl:template match="document" mode="other" >
 <xsl:if test="not(@selected)">
  <tr bgcolor="pink">
   <td><xsl:value-of select="@id" /></td>
   <td><xsl:value-of select="auteur" /></td>
   <td><xsl:value-of select="titre" /></td>
   <td><xsl:value-of select="contenu" /></td>
  </tr>
 </xsl:if>
</xsl:template>
 
</xsl:stylesheet>


 
Résultat, (dans ce cas) un morceau de HTML :

<h1>Liste de document</h1>
 <table cellpadding="2" cellspacing="2" border="1" width="100%">
  <tr>
   <th>ID</th>
   <th>Auteur</th>
   <th>Titre</th>
   <th>Contenu</th>
  </tr>
  <tr bgcolor="green">
   <td>27</td>
   <td>Pierre</td>
   <td>Qui roule</td>
   <td>Vous connaissez la suite</td>
  </tr>
  <tr bgcolor="pink">
   <td>1</td>
   <td>Maurice</td>
   <td>Mon premier essai</td>
   <td>Bla bla bla ...</td>
  </tr>
  <tr bgcolor="pink">
   <td>51</td>
   <td>Moi</td>
   <td>J'ai rien</td>
   <td>a dire ...</td>
  </tr>
 </table>


 
Bon, mon XSL est un peu rouillé :D Il est sans doute très loin de la perfection, mais c'est uste un exemple de comment ça marche.
 
Le premier <xsl:template match="root"> indique qu'on va traiter tous les documents. Il donne le sequelette général du tableau avec la ligne d'en-tête.
 
<xsl:apply-templates select="document" mode="seleted" /> et <xsl:apply-templates select="document" mode="other" /> indique les templates à appliquer DANS <root>
 
Ensuite <xsl:template match="document" mode="seleted" > avec <xsl:if test="@selected"> permet de traiter le (ou les) document marqué selected="yes" en premier.
Le contenu est mis dans des lignes sur fond "green"
 
Le reste est facile à comprendre...
 
Un autre XSL pourait par exemple avec les mêmes données, générer une combo avec les auteurs/titre, et presenter celui sélectionné dans la liste.
 
Les possibilités d'XSL sont bien ententdu beaucoup plus importantes que ce petit exemple :D


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 24-03-2004 à 13:32:00    

On peut faire des boucles dans les templates. Pas mal de moteurs ont un pseudo langage. Donc, on peut generer le tableau par le template.

Reply

Marsh Posté le 24-03-2004 à 14:08:51    

Mara's dad a écrit :

Le principe général, c'est les templates (modèles en français) comme expliqué par T509.
 
...
 
Il existe une méthode de plus en plus répandue pour gérer celà :
XML / XSL
 
...


 
Très intéressant, je ne connais pas. il faudrait que je m'y intéresse

Reply

Marsh Posté le 24-03-2004 à 14:25:59    

moi la seule chose que je sais faire c'est:
 des fonctions  pour decomposer un peu
un peu de CSS pour au moin rendre dynamique le choix des couleurs la taille des tableaux etc..
 
mais sinon c vrai que je ne sais pas decomposer distinctement l'interface de code resultat  
 
tt ca me parait interessant mais ca a l'air d'etre du serieux et un peu plus compliquer à apprehender  ;)
va vraiment falloir que j'approfondisse tt ca
 
C'est un peu comme le principe SPIP qui fait en sorte de dissocier le developpement (squelette), le contenu (texte , article) et l'interface (pour webdesigner)
 
je me sens encore vraiment incompetent dans le domaine  , ca craint un peu pour quelqu'u qui se dit webmaster  ou developpeur web ;)


Message édité par saxgard le 24-03-2004 à 14:31:31
Reply

Marsh Posté le 24-03-2004 à 14:25:59   

Reply

Marsh Posté le 24-03-2004 à 14:29:34    

On est tous là pour apprendre !
Alors vas-y

Reply

Marsh Posté le 24-03-2004 à 14:40:17    

>>marad's : super ton exemple. j'avais jamais travaillé comme ça. comment tu lies les deux ? au final tu as donc 2 fichiers (xml et xsl ou 3 (xhtml) ?

Reply

Marsh Posté le 24-03-2004 à 15:03:28    

JagStang a écrit :

>>marad's : super ton exemple. j'avais jamais travaillé comme ça. comment tu lies les deux ? au final tu as donc 2 fichiers (xml et xsl ou 3 (xhtml) ?


 
 
ouaip pareil ca m'interesse un peu ce truc mais aux dernière nouvelles c t assez chiant a gerer non ??
tj ou c moi qui aie fabulé pour rien ???
 
si t'as qq exemple ou lien direct dessus on est tj preneur je crois

Reply

Marsh Posté le 24-03-2004 à 15:08:24    

- Un fichier XSL -> string en entrée.
- Un document XML (un objet en mémoire) converti String http://www.php.net/manual/fr/funct [...] mp-mem.php en entrée
- En sortie, un document XHTML en string http://www.php.net/manual/fr/function.xslt-process.php


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 24-03-2004 à 15:12:54    

ok merci :jap:

Reply

Marsh Posté le 24-03-2004 à 15:26:43    

2 docs que j'ai trouvées que je mets à dispo pour quelques temps :
 
http://www.dar-leila.com/cours/
 
C'est pas de moi, et cela peut être utile.  
1 sur XML et 1 sur les template

Reply

Marsh Posté le 24-03-2004 à 15:47:43    

T509 a écrit :

2 docs que j'ai trouvées que je mets à dispo pour quelques temps :
 
http://www.dar-leila.com/cours/
 
C'est pas de moi, et cela peut être utile.  
1 sur XML et 1 sur les template


 
ca ma l'air bien sympatique   :)

Reply

Marsh Posté le 25-03-2004 à 09:20:10    

pti up

Reply

Marsh Posté le 25-03-2004 à 09:29:57    

Domage qu'il manque la part 8 (XSL/XSLT et XPath) à http://www.dar-leila.com/cours/Initiation_XML.pdf


Message édité par Mara's dad le 25-03-2004 à 09:31:28

---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
Reply

Marsh Posté le 25-03-2004 à 10:02:00    

Mara's dad a écrit :

Domage qu'il manque la part 8 (XSL/XSLT et XPath) à http://www.dar-leila.com/cours/Initiation_XML.pdf
 


 
moi a cahque fois que j'essaye d'ouvrir cette doc ca plante  :/

Reply

Marsh Posté le 25-03-2004 à 10:12:28    

Mara's dad a écrit :

Domage qu'il manque la part 8 (XSL/XSLT et XPath) à http://www.dar-leila.com/cours/Initiation_XML.pdf
 


Elle est ici http://www.asp-php.net/tutorial/xml/xml_8.php  :)  
Téléchargeable sur la même page en PDF

Reply

Marsh Posté le 25-03-2004 à 19:03:40    

Voilà la partie 8 est intégrée ;)

Reply

Marsh Posté le 26-03-2004 à 11:49:54    

upupup

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed