POO : Vues composites

**CinePhil** · 31/12/2017, 17h56

Bonjour,

Après avoir réussi à faire un routeur qui va chercher la bonne méthode du bon contrôleur selon l'URL demandée, je passe à la mise en POO de la partie vue.

Le tutoriel de Baptiste Pesquet est basé sur des vues équivalentes à des pages.

Dans mon cas, une page peut être composée de plusieurs morceaux que j'aurais tendance à appeler chacun des vues.

J'ai déjà un gabarit de page qui contient :
- un header (logo, titre, connexion/bienvenue/déconnexion et, plus tard, choix de la langue) ;
- au bas du header, je prévois un menu personnalisé pour l'utilisateur connecté selon son type ;
- une partie contenu divisée en trois colonnes (menu général, contenu selon l'action demandée, actualités du site)
- un pied de page.

Selon le cas (page d'accueil ou page dans l'application, utilisateur connecté ou pas), il y donc des morceaux (vues) variables qui viennent se positionner dans un gabarit global.

Dans mon début de développement en mode procédural, j'avais notamment mis en oeuvre dans le gabarit :
- une partie dans le <head> qui charge les différents fichiers css et javascript via des tableaux $css_files et $js_files :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php 
if(isset($css_files))
{
	foreach ($css_files as $css_file)
	{
?>
	<link rel="stylesheet" href="<?php echo 'public/'.$css_file; ?>" type="text/css">
<?php 
	}
}
 
if(isset($js_files))
{
	foreach ($js_files as $js_file)
	{
?>
	<script src="<?php echo 'public/'.$js_file; ?>" ></script>
<?php 
	}
}
?>

- une partie dans la colonne centrale chargeant les différents morceaux (vues) nécessaires selon l'action lancée via un tableau $liste_vues :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<?php 
if(isset($listeVues) && count($listeVues) > 0)
{
	// S'il y a au moins une vue supplémentaire à afficher, on l'inclut ici
	foreach($listeVues as $vue)
	{
		require RACINE.$vue;
	}
}
?>

- idem pour les actualités dans la colonne de droite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php 
if(isset($liste_actualites) && count($liste_actualites) > 0)
{
	foreach($liste_actualite AS $id_actualite => $actualite)
	{
?>
			<div class="div_actualite">
				<div class="titre_actuatite">
					<h4><?php echo $actualite['titre']; ?></h4>
				</div>
				<div class="debut_actualite">
					<p>
						<?php echo $actualite['debut_texte']; ?><br />
						<a href="<?php echo BASE.'fr/Actualites/voir/actu='.$id_actualite; ?>" target="_self">
							Lire la suite...
						</a>
					</p>
				</div>
			</div>
<?php 
	} // Fin foreach($liste_actualite AS $id_actualite => $actualite)
} // Fin if(isset($liste_actualites) && count($liste_actualites) > 0)
?>

Puis-je garder mon gabarit tel quel ou bien y a t-il une meilleur façon de faire une page composite en POO ?

**rawsrc** · 01/01/2018, 10h35

Salut,

Envoyé par CinePhil

Puis-je garder mon gabarit tel quel ou bien y a t-il une meilleur façon de faire une page composite en POO ?

Vu que tu te mets à la POO, donc pourquoi ne considérais-tu pas chaque vue (au sens large) comme un objet ?
Ainsi tu profiterais pleinement de l'héritage et du polymorphisme.

**CinePhil** · 01/01/2018, 13h59

C'est bien ce que j'ai l'intention de faire mais j'ai du mal à voir comment architecturer l'instanciation des vues dans la page.

Ma réflexion en est à créer une classe Page et une classe Vue générique mais comme ça diffère du tutoriel de Baptiste Pesquet, je suis dubitatif sur cette stratégie ; d'où mon appel à conseils en la matière.

**rawsrc** · 01/01/2018, 16h16

Sache que c'est tout à fait faisable.
J'ai moi-même créé un moteur de rendu complet en PHP basé sur cette approche (purée, démarré en 2007 et là je suis en train de faire une énorme mise à jour pour PHP 7+)

Je vais te mettre sur la piste : considère tout ce qui se rapporte à la vue comme un bloc.
Une page c'est bloc, un header c'est un bloc, une partie de l'affichage encore un bloc...

Tu dois tendre vers cette finalité :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
use Site\View\Login;
 
$page = new Login($params);
$page->render();
 
echo $page;

Vise la simplicité la plus absolue dans le code.
Quand tu maîtriseras pleinement les concepts de la programmations orientée objet et les fonctionnalités s'y rapportant dans le core PHP, tu pourras réduire le code à ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
use Site\View\Login;
echo new Login($params);

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo new Site\View\Login($params);

**CinePhil** · 03/01/2018, 10h42

Pas trop compris ton message, rawsrc, mais voilà où j'en suis...

J'ai commencé par la page d'accueil qui est plus simple, pour le moment sans données à extraire de la BDD et avec seulement un texte de bienvenue dans la colonne du milieu de la partie contenu.

Dans mon contrôleur Accueil, j'ai une méthode index qui est la méthode par défaut :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
	/**
	 * Affiche la page par défaut
	 */
	function index()
	{
		$titre_page = 'Accueil'; // TODO i18n
 
		$page = new Page($titre_page);
		$page->addViewFile('public/bienvenue.phtml');
		$page->afficherPage();
	}

Elle fait appel au contrôleur générique Page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
76
77
78
79
80
81
82
83
/**
 * Classe contrôleur générique pour les pages HTML
 * @author philippe
 */
class Page
{
	/** Titre de la page HTML */
	private $titrePage;
 
	/** Liste des fichiers CSS à charger avec la page */
	private $cssFiles = array();
 
	/** Liste des fichiers Javascript à charger avec la page */
	private $jsFiles = array();
 
	/** Liste des fichiers de vue à intégrer à la page */
	private $viewFiles = array();
 
	/** Liste des messages d'erreur à afficher éventuellement dans la page */
	private $errorMessages = array();
 
	/** Racine web du site */
	private $racineWeb;
 
	/**
	 * Initialise la page HTML à afficher
	 * @param string $titre_Page : Le titre de la page HTML
	 */
	public function __construct($titre_Page)
	{
		$this->racineWeb = Configuration::get('racineWeb');
 
		if($titre_Page != '')
		{
			$this->titrePage = $titre_Page;
		}
		else 
		{
			$this->titrePage = 'Accueil'; // Page par défaut
			$this->viewFiles[] = 'public/bienvenue.phtml';
		}
	}
 
	public function addCssFile($cssFile)
	{
		if($cssFile != '')
		{
			$this->cssFiles[] = $cssFile;
		}
	}
 
	public function addJsFile($jsFile)
	{
		if($jsFile != '')
		{
			$this->jsFiles[] = $jsFile;
		}
	}
 
	public function addViewFile($viewFile)
	{
		if($viewFile != '')
		{
			$this->viewFiles[] = $viewFile;
		}
	}
 
	public function addErrorMessage($errorMessage)
	{
		if($errorMessage != '')
		{
			$this->errorMessages[] = $errorMessage;
		}
	}
 
	/**
	 * Affiche la page composée en appelant le gabarit page.phtml
	 */
	public function afficherPage()
	{
		require 'public/page.phtml';
	}
}

J'ai modifié mon gabarit de page, qui est donc appelé systématiquement par le contrôleur Page, de cette manière (extraits) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
	<base href="<?php echo $this->racineWeb; ?>" />
	<title>LIBRE ÉCOLE - <?php echo $this->titrePage; ?></title>
...
<?php 
if(!empty($this->cssFiles))
{
	foreach ($this->cssFiles as $css_file)
	{
?>
	<link rel="stylesheet" href="<?php echo 'public/'.$css_file; ?>" type="text/css">
<?php 
	}
}
 
if(!empty($this->jsFiles))
{
	foreach ($this->jsFiles as $js_file)
	{
?>
	<script src="<?php echo 'public/'.$js_file; ?>" ></script>
<?php 
	}
}
?>
</head>
...
<?php if(!empty($this->errorMessages)): ?>
		<div id="error_msg">
			ERREUR !<br />
	<?php foreach($this->errorMessages as $errorMessage): ?>
			<p class="errorMEssage"><?php echo $error_msg; ?></p>
	<?php endforeach;?>
		</div><!-- Fin div id="error_msg" -->
<?php endif; ?>
<?php 
if(!empty($this->viewFiles))
{
	// S'il y a au moins une vue supplémentaire à afficher, on l'inclut ici
	foreach($this->viewFiles as $viewFile)
	{
		require $viewFile;
	}
}
?>

Tout ça fonctionne bien et ma page d'accueil s'affiche comme je le souhaite.

Maintenant, je passe à la page de création d'un compte utilisateur et ça se complique car y figure un formulaire avec une liste déroulante devant contenir la liste des pays... extraite de la base de données.

Le problème n'est pas tellement l'extraction de la liste qui se fera dans le contrôleur Accueil, méthode inscription, mais plutôt sur la manière de passer cette liste au formulaire qui est requis par Page et non pas par Accueil.

Pour le moment, j'en suis là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
	/**
	 * Inscription d'un utilisateur
	 */
	function inscription()
	{
		if(!isset($_POST['btn_creer_compte']))
		{
			// Affichage du formulaire vide de création d'un compte utilistaeur
			$titre_page = 'Inscription'; // TODO i18n
 
			$page = new Page($titre_page);
 
			$page->addViewFile('application/modules/Accueil/View/formInscription.phtml');
			$page->addCssFile('css/formInscription.css');
			$page->addCssFile('jquery/jquery-ui-1.12.1/jquery-ui.min.css');
			$page->addCssFile('jquery/jquery.simpleCaptcha.css');
			$page->addJsFile('js/inscription.js');
			$page->addJsFile('jquery/jquery-3.2.1.min.js');
			$page->addJsFile('jquery/jquery-ui-1.12.1/jquery-ui.min.js');
			$page->addJsFile('jquery/jquery.simpleCaptcha.js');
 
			$page->afficherPage();
		}
	}

La page avec son formulaire s'affiche mais, bien entendu, la liste des pays est vide puisque je n'ai pas encore extrait les données ni, surtout, transmis la liste au formulaire. C'est sur ce transfert que je sèche un peu.

**grunk** · 03/01/2018, 11h53

Et déléguer cette partie vue à une librairie comme twig par exemple , ce n'est pas envisageable ?

**CinePhil** · 03/01/2018, 13h42

Je n'ai pas très envie d'utiliser des librairies existantes. Je préfère comprendre et faire.

Pour la petite histoire, j'ai réessayé Zend Framework 3 et son tuto MVC la semaine dernière et ça a planté avec un message d'erreur d'un élément de Zend Framework qui était pour moi incompréhensible alors j'ai arrêté, après avoir de plus trouvé la mise en oeuvre beaucoup plus complexe et obscure que le Zend Framework 1 avec lequel j'avais quand même réussi à développer une petite application il y a quelques années.

Là je développe from scratch un projet personnel et qu'au moins je maîtriserai de bout en bout.

Je souhaite comprendre les principes et les mettre en oeuvre moi-même.

**grunk** · 03/01/2018, 16h59

Si ça à une vocation didactique ça à du sens

Pour la petite histoire, j'ai réessayé Zend Framework 3 et son tuto MVC la semaine dernière et ça a planté avec un message d'erreur d'un élément de Zend Framework qui était pour moi incompréhensible alors j'ai arrêté, après avoir de plus trouvé la mise en oeuvre beaucoup plus complexe et obscure que le Zend Framework 1

Perso j'ai abandonné les gros ZF et Symfony , 'jai l'impression de passer mon temps à faire des fichiers de config pour lancer une usine à gas.

Sur mon framework j'ai une classe View très simple qui en gros me permet d'inclure un fichier php de vue et de définir des variables à utiliser. Et dès que j'ai des besoin plus avancés comme des vues composites je passe à un outil comme twig.

**CinePhil** · 03/01/2018, 21h02

Dans ta classe, la notion de vue est équivalente à celle de page ou à celle de morceau de page ?

J'ai regardé vite fait twig et quand j'ai vu qu'il y avait une syntaxe nouvelle à assimiler, j'ai laissé tomber.

**rawsrc** · 03/01/2018, 21h54

Salut,

Envoyé par CinePhil

Pas trop compris ton message, rawsrc,

Je dois t'avouer que je ne compte plus les fois où tu me dis ne pas comprendre mes messages...
Y a un truc chez moi qui te reste en travers ou bien ?

J'essaie d'être clair et Dieu sait combien c'est difficile de nos jours de l'être vu le niveau linguistique global, mais bon vu ton "grand" âge, je ne pense pas que tu sois concerné par ce problème.

Revenons à tes moutons.
Quand je te disais :

Envoyé par rawsrc

Je vais te mettre sur la piste : considère tout ce qui se rapporte à la vue comme un bloc.
Une page c'est bloc, un header c'est un bloc, une partie de l'affichage encore un bloc...

je voulais juste que tu déduises l'abstraction sous-jacente. Cela t'aurait permis de saisir les contours d'une solution à ta problématique de gestion du rendu web.
En gros je voulais que tu arrives à ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
namespace View;
 
abstract
class Block
{
    private $blocks = [];
 
    public function addChild(Block ...$p)
    {
        array_push($this->blocks, ...$p);
    }
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
class Page
extends Block 
{
 
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
class MonMenu
extends Block
{
 
}

// etc
Ainsi tu respectes la logique de l'arborescence d'une page HTML sauf que tu travailles sur des ensembles plus conséquents.

Tu gagnerais je pense à éviter de t'embarquer dans la conception objet pure et dure sans avoir au préalable bien digéré les concepts abstraits qui s'y rattachent, enfin ce n'est que mon avis...

**CinePhil** · 04/01/2018, 01h41

Y a un truc chez moi qui te reste en travers ou bien ?

Ou bien tu expliques mal, peut-être.

J'essaie d'être clair

Ben c'est raté. Dommage parce qu'apparemment tu connais assez bien le sujet mais dis toi que ce qui est devenu évident pour toi qui maîtrise ne l'est pas pour le néophyte en la matière.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

public sub addChild(Block ...$p)

C'est quoi les ... ?
Et c'est quoi sub ?

On ajoute un block dans un block ?

Je vais essayer.

**rawsrc** · 04/01/2018, 11h16

Ben j'ai pas fait gaffe pour le public sub, j'étais en train de coder une classe en VBA et hop j'ai pas tilté au changement de langage. C'est bien évidemment public function qu'il fallait lire (corrigé dans le post initial).

Pour l'opérateur ..., cela existe depuis PHP 5.6, un peu de lecture par ici partie "Fonctions variables via l'opérateur de décomposition ...".

Pour le reste, on va s'arrêter là. Je passe la main.
Mais je pense que tu présumes de tes compétences en la matière et t'attaques d'emblée à bien trop haut pour le niveau conceptuel que tu maîtrises.
Pour bien se comprendre, il faut déjà parler le même vocabulaire et là visiblement ce n'est pas le cas. Pour apprendre la POO, il faut d'abord prendre le temps de lire un peu de théorie afin d'acquérir le vocable et la logique de base avant de se lancer dans quoi que ce soit. Cette étape est essentielle et ne doit pas être passée à la va vite.

Bonne continuation

**CinePhil** · 04/01/2018, 19h39

Bon ben si quelqu'un de plus pédagogue que rawsrc veut bien m'expliquer comment son machin de Block peut fonctionner, je suis preneur.

Ou alors une autre solution à me proposer ?

**grunk** · 05/01/2018, 10h40

Envoyé par CinePhil

Dans ta classe, la notion de vue est équivalente à celle de page ou à celle de morceau de page ?

J'ai regardé vite fait twig et quand j'ai vu qu'il y avait une syntaxe nouvelle à assimiler, j'ai laissé tomber.

Dans ma classe une vue est une page.
Pour twig ca reste relativement simple : {{variable}} ou {% fonction %}{% finfonction%} avec ça t'as déjà de quoi faire un site

En ce qui concerne ta méthode , je pense que tu cherches trop compliqué. Gérer les js , css et compagnie via PHP c'est une fausse bonne idée. Laisse tout ça dans des fichiers de vue que tu inclues plutôt que de vouloir absolument les gérer en php.

Par exemple :

header.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<head>
	<meta charset="utf-8">
	<title><?php echo $title ?></title>
</head>

page.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
	<?php include 'header.php'; ?>
	<body>
		<?php echo $test ?>
	<body>
</html>

index.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$viewVariables = array('title' => 'ceci est mon titre','test' => 'ceci est un test');
extract($viewVariables);
include 'page.php';

Et juste avec ça tu te retrouve avec un gestion de vue. La partie dans index.php est ce que tu retrouve dans ma classe View (en simplifié).

Pour détailler un peu :
header.php un "bloc" de vue que je peux venir inclure où je veux
page.php est ce que je considère une "page" dans laquelle je peux venir inclure (ou pas) autant de bloc que je veux pour la composer et ainsi réutiliser au maximum du code commun à plusieurs page
index.php représente par exemple un controller ou une classe de gestion de vue. Je créer les variables utilisables dans la vue (ici $title et $test) et j'inclue la page à afficher.

POO : Vues composites

Langage PHP

Discussions similaires

Partager

Partager