Utilisation des "layouts"

Version imprimable

10/01/2009, 15h33
Feng-Huang

Utilisation des "layouts"

Bonjour,

Tout d'abord je dirais : "Oui j'ai déjà lu la doc"
Puis : "Oui j'ai déjà recherché pour mon problème"

Voilà :

J'ai installé Zend, avec le Quick Start du site officiel.
Etant débutant en ce qui concerne le MVC, j'ai du mal à comprendre comment fonctionnent les layouts, de plus Zend évolue assez vite visiblement donc trouver un tutoriel toujours d'actualité est difficile.

Je ne comprends pas comment gérer différents layouts pour un site.
Dans la doc officielle ils partent dans tous les sens, commence par du code qui dis "récupère la clé "lacle" ..." alors qu'on a rien défini du tout, ils parlent de 15.000 trucs à la fois....
Je PANIQUE à voir tout ça.

Ca fait des années que je fais du séquentiel, et passer à Zend est un gros effort pour moi, j'ai besoin de cas concrets pour comprendre, la doc' c'est bien quand on a comprit l'essence...

Merci de me porter un coup de pouce, et merci de votre indulgence envers ce post désespéré.
10/01/2009, 17h02
Alexandre T

Bonjour et bienvenue,

Alors avant toute chose, je voulais savoir si tu avais lu ce tutoriel sur les layouts :

http://julien-pauli.developpez.com/t...d-layout/#LI-A

Enfin, si tu "débarques" du monde séquentiel, avant de partir dans les Layouts, je te conseille de te renseigner et de comprendre dans un premier temps le modèle MVC. Ta démarche est la bonne de d'orienter vers ce type de programmation, mais j'imagine aisément que l'effort n'est pas si aisé :) Suit le tutoriel MVC que voici, il est très bien fait :

http://g-rossolini.developpez.com/tu...ework/debuter/

Il a l'avantage de présenter tout cela sans compliquer les choses et sans utiliser de layout, mais en utilisant de simple vue (avec Zend_View) Quand tu auras assimilé cela, il te sera plus aisé de comprendre les Zend_Layout.

Bonne formation :) Et n'hésite pas à revenir pour les points que tu ne comprendrais pas.

Slt,

Merci de ta réponse.

Pour la deuxième lien, j'avais déjà lu ce tutoriel. J'ai lu avec attention le premier lien que tu m'a donné,et j'ai trouvé un autre document, que j'ai lu dans son intégralité. J'ai tout compris, sauf les layouts :/

Voici comment se déroulé mon pseudo layout séquentiel :

Une page index appel :

include/header.php,
include/sidebar.php
$_GET['view'].php
include/footer.php

Cependant, en mettant à neuf mon site avec Zend, je voudrais intégrer la possibilité de gérer plusieurs design, et plusieurs layouts par design : un pour le site et un pour le forum. Voici comment j'imagine ma structure :
Code:

1 2 3 4 5 6 7 8 9 application/design1/layouts/layout.phtml application/design1/layouts/site/[header.php,sidebar.php,footer.php] application/design1/layouts/forum/[header.php,sidebar.php,footer.php] application/design1/layouts/[mes_feuilles_de_style] application/design2/layouts/layout.phtml application/design2/layouts/site/[header.php,sidebar.php,footer.php] application/design2/layouts/forum/[header.php,sidebar.php,footer.php] application/design2/layouts/[mes_feuilles_de_style]
Il s'agirait donc de definir le path du layout, mais comment le faire ? dans le boostrap.php ?
Je comprends pas trop dans quel ordre sont appelé les fichiers avec Zend.

Si je consulte la page ~/public/index.php , quelles sont les pages qui sont appelées et dans quel ordre ? Mon hypothèse :

bootstrap.php (qui définit le comportement de l'api, et le path des layouts ?)
IndexController (avec les actions que j'ai écris)
et automatiquement : method => indexAction
indexAction (qui fait son script, puis appel la vue en lui transmettant toute ses variables)
index.phtml (la vue qui va exploiter les variables et les intégrer au html pour obtenir le rendu pour le client)

enfin le dispatcher qui va créer notre page utlisant layouts.phtml, placant les éléments au bon endroit, car layout.phtml appel header.php, sidebar.php, NOTRE_VUE, footer.php

J'ai décris tout ça comme je l'imagine, je conçois que c'est sûrement faux, et c'est là que j'implore votre aide :)

De plus, je ne sais pas écrire l'api que je viens de vous décrire, même si le raisonnement tenu est bon. Une petite intro au code serait maintenant la bienvenue :D

Citation:
Envoyé par Feng-Huang
Code:

1 2 3 4 5 6 7 8 9 application/design1/layouts/layout.phtml application/design1/layouts/site/[header.php,sidebar.php,footer.php] application/design1/layouts/forum/[header.php,sidebar.php,footer.php] application/design1/layouts/[mes_feuilles_de_style] application/design2/layouts/layout.phtml application/design2/layouts/site/[header.php,sidebar.php,footer.php] application/design2/layouts/forum/[header.php,sidebar.php,footer.php] application/design2/layouts/[mes_feuilles_de_style]
Il s'agirait donc de definir le path du layout, mais comment le faire ? dans le boostrap.php ?
Attention dans l'architecture que tu montres, tu as deux modules
design1 et design2, c'est à dire deux sites complètement indépendant l'un de l'autre.

Citation:

Envoyé par Feng-Huang

Il s'agirait donc de definir le path du layout, mais comment le faire ? dans le boostrap.php ?

je pense que c'est une piste, dans le bootstrap tu pourrais faire avec une session, mais attention je suis null dans cette matière, mais j'imagine comme ceci
Code:

1 2 3 4 5 6 7 8 9 $session = new Zend_Session_Namespace('default'); //on est pas dans le forum if (! isset($session->forum)) { Zend_Layout::startMvc(array('layoutPath' => '../application/layouts/site')); }else{ Zend_Layout::startMvc(array('layoutPath' => '../application/layouts/forum')); }

12/01/2009, 12h31
Feng-Huang

Humm ok.

Pour l'architecture, effectivement d'après ce que j'ai lu, tous les layouts doivent être mis en vrac, mais via le système que tu propose, je pourrais séparer les éléments. Car si je mets tout en vrac ça va être le bordel...

N'empêche que j'ai toujours pas compris comment les layouts fonctionnent, pour l'affichage proprement dit... j'ai relu plusieurs fois plusieurs documents mais je pige que dale :/

Si la doc des différents éléments est bien faite et très complète, on ne trouve rien concernant le fonctionnement à proprement dit de Zend.

Ton layout.phtml reprend l'ensemble de ta charte graphique, et puis tu lui passe le contenu te tes controller(explication simple hein).

Voici le mien

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<?php
/**
 * Layout de l'application
 *
 *
 * @copyright  2008 Formatux Technologies
 * @author     info@formatux.be  Ernaelsten Gerard
 * @license    http://www.formatux.be/contact   Merci de prendre contact avec l'auteur
 * @version    Release: 0.3
 * @link       http://www.formatux.be
 * @since      Class available since Release 1.7.0
 * @deprecated Class deprecated in Release 2.0.0
 * @category   Pontaury
 * @package    Layout
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />-->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title><?php echo TITLE ?></title>
 
<!-- Scripts Jquery -->
<script type="text/javascript" src="<?php echo $this->baseUrl()?>/html/scripts/jquery.js"></script>
 
 
 
<link rel="stylesheet" href="<?php echo $this->baseUrl()?>/html/styles/reset.css" type="text/css" />
<link href="<?php echo $this->baseUrl()?>/html/styles/style.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->baseUrl()?>/html/styles/form.css" rel="stylesheet" type="text/css" />
 
 
 
</head>
 
<body>
 
<div>
      	<?php echo $this->layout()->content;?>
 
      </div>
 
 
 
</body>
</html>

Merci pour cet exemple ; j'ai deux question :

TITLE est une constante (?), or je veux changer mon title à chaque page, donc j'ai (lors de mes essais) fait dans mon controller :
Code:

1 2 3 4 // IndexControler::indexAction $this->view->title = "monsite.tld"; // Puis dans layout.phtml echo $this->title;
Es-ce comme ça qu'il est correct de procéder ?

Voici ce à quoi j'aspiré :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <?= $this->doctype() ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><?= $this->view->title?></title> <?= $this->layout()->stylesheet /* Procéder ainsi permet de définir le chemin de la feuille de style correctement suivant le layout utilisé */?> <?= $this->layout()->metaDescription ?> <meta name="keywords" content="<?= $this->layout()->standardKeyWords ?>,<?= $this->view->keywords?> "/> <?= $this->layout()->httpEquiv ?> <?= $this->layout()->rss ?> <?= $this->view->jscript ?> </head> <body> <?= $this->layout()->header ?> <?= $this->layout()->navigation ?> <?= $this->layout()->sidebar ?> <?= $this->layout()->content ?> <?= $this->layout()->footer ?> </body> </html>
Comment puis-je procéder ??

Le but étant évidemment de permettre la séparation en multiple fichier pour faciliter la maintenance, car nous sommes 3 à toucher à la mise en page donc ça va vite devenir un enfer si y'a un seul fichier layout par design.

12/01/2009, 21h55
Eusebe

Bonjour,

Pour le titre tu peux utiliser l'aide de vue HeadTitle().

Dans ton layout, faire simplement :

Code:

<?= $this->headTitle() ?>

Et dans tes actions :

Code:

$this->view->headTitle('titre de la page');

Regardes aussi les autres aides de vues proposées par défaut, il y en a des très intéressantes pour gérer les balises meta, les scripts, les feuilles de style, etc...
13/01/2009, 13h42
Feng-Huang

Ouais pour le titre, les meta ok. Mais pour les <link /> et le reste, ça dépend du layout ! Je pourrais faire un seul layout, et faire des includes avec une variable dans le chemin pour définir le fichier en fonction du design utilisé, mais je pense qu'il y a une manière plus propre de faire avec Zend, non ?
13/01/2009, 22h46
Eusebe

Citation:

Envoyé par Feng-Huang

Ouais pour le titre, les meta ok. Mais pour les <link /> et le reste, ça dépend du layout ! Je pourrais faire un seul layout, et faire des includes avec une variable dans le chemin pour définir le fichier en fonction du design utilisé, mais je pense qu'il y a une manière plus propre de faire avec Zend, non ?

Je n'ai pas d'autre réponse, pour la simple raison qu'il ne me semble pas "propre" de faire plusieurs layouts pour les mêmes données. En effet, une bonne pratique est de générer du (X)HTML sémantique, et de pas y intégrer d'éléments de présentation. La présentation des informations doit se faire, elle, à l'aide des feuilles de style. Il n'est pas nécessaire de changer le balisage pour modifier l'apparence d'un site. Si tu ne connais pas, va faire un tour sur http://www.csszengarden.com/ pour t'en convaincre...
14/01/2009, 09h49
Alexandre T
Citation:

Envoyé par Eusebe

En effet, une bonne pratique est de générer du (X)HTML sémantique, et de pas y intégrer d'éléments de présentation. La présentation des informations doit se faire, elle, à l'aide des feuilles de style. Il n'est pas nécessaire de changer le balisage pour modifier l'apparence d'un site. Si tu ne connais pas, va faire un tour sur http://www.csszengarden.com/ pour t'en convaincre...

J'applaudis haut et fort et m'incline !

Plus sérieusement, il a parfaitement raison. La présentation n'est pas le travail de XHTML ou du layout à une exception près. J'utilise trois layout personnellement dans mes applications.
- Le premier est le layout par défaut (ou standard) j'y ai mes entêtes (headers), ma têtière, mon menu principal, mon menu contextuel, mon corps de page, mon pied de page. C'est tout.
- Le second est le layout pour les téléphones portables. L'interface est simplifiée pour alléger le code XHTML car en certains lieux seule une connexion GPRS (très lente) existe. J'y ai un entête simplifié, le menu principal, le corps de page, le menu contextuel.
- Le dernier est le layout pour les retours AJAX. Le layout est quasiment vide, il ne contient que le corps de page. (une ligne quoi)
Ce que je veux mettre en avant est qu'un layout répond à un besoin métier et non pas à un besoin ergonomique et de présentation. Par exemple, pour mes sites, j'ai parfois trois chartes graphiques. Une charte graphique avec des CSS complexes et pleins de données et de scripts javascript AJAX, une charte graphique simple, fonctionnant sans ses javascripts donc. Et une charge graphique textuelle permettant une excellent accessibilité de mes pages. Tout cela je ne le gère pas avec des layouts différents, c'est inutile, cela n'apporte rien car mes fichiers XHTML sont les mêmes. Ce sont UNIQUEMENT mes fichiers CSS qui s'occupent de cela.
14/01/2009, 12h54
Feng-Huang

Merci de vos réponses.

Il est vrai que le css défini l'apparence.. en fait j'avais pensé à carrement rendre possible de changer le squelette du site, mais après vous avoir lu, et quelques minutes de réflexion, je pense que c'est assez futile...

Je vais donc me contenter de définir le path de la feuille de style dans le layout avec $_COOKIE.

Merci de vos lumières, je mets en résolu.

Salut à vous,

Ce sujet m'intéresse car je cherche moi aussi à changer le "squellette" de mon site bati sur le ZF.

Pour le moment, je suis parti d'un layout avec 3 colonnes fluides (layout gala).
A ce layout, j'y ai appliqué un fichier global.css (qui correspond au design avec les 3 colonnes fluides).
Si je souhaite passer sur un design avec 2 colonnes (choix de l'admin par exemple), je surcharge le css en appelant, après le global.css, un fichier only_left.css qui :
- met la valeur display:none pour le div représentant la colonne de droite
- agrandit la colonne centrale (content).

Que pensez-vous de cette solution ?

Si vous n'avez rien compris, voici mes fichiers de test :

Fichier layout.phtml :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
<?php echo $this->doctype() . PHP_EOL; ?>
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
	<title>ZF</title>
	<meta http-equiv="content-type" content="text/html; charset=<?php echo $this->charset; ?>">
    <?php echo $this->headLink()->appendStylesheet('css/global.css') . PHP_EOL; ?>
    <?php echo $this->headLink()->appendStylesheet('css/only_left.css') . PHP_EOL; ?>
</head>
<body>
<!-- START : container -->
<div id="container">
 
    <!-- START : header -->
    <div id="header">
        <h1>Header</h1>
    </div>
    <!-- END : header -->
 
    <!-- START : wrapper -->
    <div id="wrapper">
         <!-- START : content -->
        <div id="content">
			<p><strong>1) Content here.</strong> <?php echo $this->layout()->content; ?></p>
			<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
			<p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
			<p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>
		</div>
        <!-- END : content -->
    </div>
    <!-- END : wrapper -->
 
    <!-- START : navigation -->
    <div id="navigation">
        <p><strong>2) Navigation here.</strong> </p>
        <h3>Main Navigation</h3>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
    <!-- END : navigation -->
 
    <!-- START : extra -->
    <div id="extra">
        <p><strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
    </div>
    <!-- END : extra -->
 
    <!-- START : footer -->
    <div id="footer">
        <p>Here it goes the footer</p>
    </div>
    <!-- END : footer -->
 
</div>
<!-- END : container -->
</body>
</html>

Fichier global.css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
html,body{
    margin:0;
    padding:0;
}
 
body{
    font: 76% arial,sans-serif;
}
 
p{
    margin:0 10px 10px;
}
 
a{
    display:block;
    color: #981793;
}
 
div#header h1{
    height:80px;
    line-height:80px;
    margin:0;
    padding-left:10px;
    background: #EEE;
    color: #79B30B;
}
 
div#content p{
    line-height:1.4;
}
 
div#navigation{
    background:#B9CAFF;
}
 
div#extra{
    background:#FF8539;
}
 
div#footer{
    background: #333;
    color: #FFF;
}
 
div#footer p{
    margin:0;
    padding:5px 10px;
}
 
div#wrapper{
    float:left;
    width:100%
}
 
div#content{
    margin: 0 25%
}
 
div#navigation{
    float:left;
    width:25%;
 
    margin-left:-100%;
}
 
div#extra{
    float:left;
    width:25%;
    margin-left:-25%;
}
 
div#footer{
    clear:left;
    width:100%;
}

Fichier only_left.css :

Code:

1
2
3
4
5
6
7
8
 
div#content{
    width: 75%;
}
 
div#extra{
    display: none;
}

16/01/2009, 09h32
Alexandre T

Sur certains sites du ministère nous utilisons cette méthode. L'expérience nous a montré que, sur les pages, où la colonne de droite n'apparaît pas, des informations manquent aux utilisateurs.

Alors finalement, désormais, sur les pages où nous n'affichons que deux colonnes (afin d'afficher un large contenu, comme un grand tableau ou une grande carte), nous avons décidé de placer le contenu de l'ancienne colonne de droite sous la colonne de gauche plutôt que de le cacher.

Mais la théorie que tu expliques est la bonne à mon sens.
16/01/2009, 10h01
ova13

Ouf...déjà c'est une bonne chose que certains fasse comme moi ! ;)

Par contre, ce que tu expliques m'intéresse car comment fais-tu pour rajouter le contenu de la colonne de droite en dessous de la colonne de gauche sans toucher au layout (rajout de div) ?