Créer votre site avec Smarty en MVC – Partie 1

Par
Fredods
-

A travers cet article, nous allons voir comment ce concevoir une architecture MVC avec Smarty en générateur de vue au travers d’un projet que je mène, il s’agit d’un site d’emploi de petite annonce.

La toute première chose à faire est d’aller sur le site de Smarty afin de télécharger la dernière version stable, au moment de la rédaction de l’article c’est la version 3.1.12 (http://www.smarty.net/files/Smarty-3.1.12.zip).

Bien entendu il vous faut de quoi faire tourner un serveur sur votre ordinateur en local comme Wamp.

Pendant que votre version de Smarty télécharge, créons un nouveau dossier qui contiendra tout notre projet à l’intérieur du dossier www de Wamp. Mon dossier s’appellera « pixyjob« . A l’intérieur de ce dossier voici les dossiers que vous devrez créer :

  • config
  • controllers
  • core
  • logs
  • tpl
  • web

Et à l’intérieur du dossier web vous devrez également créer les dossiers suivants :

  • css
  • img
  • js
  • tools

Normalement à ce stade, votre téléchargement de Smarty devrait avoir fini. Décompresser donc votre archive sur votre disque dur. Copiez le dossier « libs » et collez dans web/tools/ et renommez le « smarty« .

A la racine de votre dossier « pixyjob » créer un document index.php que nous allons éditer tout de suite.

C’est ce fichier « index.php » qui va permettre de faire fonctionner toute notre architecture MVC, d’appeller les vues, controllers et modèles correspondant à ce dont on a besoin, ce fichier est la clé.

A l’intérieur de votre fichier, définissiez le code fichier php avec les balises adéquate et on y va mettre un include afin de charger l’environnement à l’aide du fichier config_init.php que l’on créera plus tard.

<?php

// Initialisation de l'environnement
include('./config/config_init.php');

?>

On va maintenant définir le routing, à savoir comment on doit charger nos controllers, on pense notamment bien à prévoir le cas si c’est une action ou une page qui est requise. (Code à inclure dans votre index.php  avant la balise de fermerture de php » ?> »  )

// Gestion de Routing
if (isset($_GET['action']) && file_exists(_CTRL_.'action/'.str_replace('.', '', $_GET['action']).'.php'))
    include(_CTRL_.'action/'.$_GET['action'].'.php');

if (isset($_GET['page']) && file_exists(_CTRL_.str_replace('.', '', $_GET['page']).'.php'))
    include(_CTRL_.$_GET['page'].'.php');
else
    include(_CTRL_.'index.php');

Et maintenant on va lui définir l’empacement des templates, le header, le footer et bien entendu la page qui sera demandé.(Code à inclure dans votre index.php  avant la balise de fermerture de php » ?> » )

    // Affichage des templates
    $smarty->display(_TPL_ . 'header.tpl');

    if (isset($_GET['page']) && file_exists(_TPL_.'pages/'.str_replace('.', '', $_GET['page']).'.tpl'))
        $smarty->display(_TPL_.'pages/'.$_GET['page'].'.tpl');
    else
        $smarty->display(_TPL_ . 'pages/home.tpl');

    $smarty->display(_TPL_ . 'footer.tpl');

Ce qui signifie que sur chaque page le header.tpl et footer.tpl seront toujours affichés, et le contenu est par défaut pages/home.tpl et si jamais on a une page demandé et que le fichier existe, c’est celui ci qui sera affiché.

Vous remarquez l’extension .tpl propre à Smarty pour ses vues (templates).

On va maintenant s’occuper de créer nos fichiers de configuration. Rendez-vous au sein de votre dossier config/ et créons un fichier nommé « defines.inc.php » à l’intérieur nous allons définir les chemins relatifs

<?php

// Si on a pas ces infos, rien ne peut fonctionner : die
if (!isset($_SERVER['DOCUMENT_ROOT']))
    die();

// Define de la racine du site
define('_PATH_', $_SERVER['DOCUMENT_ROOT'].'/');

// Define du dossier Coeur
define('_CORE_', _PATH_ . 'core/');

// Define du dossier des Controleurs
define('_CTRL_', _PATH_ . 'controllers/');

// Define du dossier des Configs
define('_CONFIG_', _PATH_ . 'config/');

// Define du dossier des TPL
define('_TPL_', _PATH_ . 'tpl/');

// Define du dossier des logs
define('_LOGS_', _PATH_ . 'logs/');

?>

Maintenant on va créer un fichier « config_init.php » dont on a déjà mentionné l’appel via un include dans notre index.php, à l’intérieur de ce fichier de config on va tout initialiser pour que le système tourne parfaitement.

A l’intérieur de ce fichier on va démarrer la session, charger Smarty, inclure tout le « coeur » du projet pour que toute les classes soit chargées, on va également y mettre une connexion à la base de donnée et pour finir on va créer notre instance de Smarty.

// Initialisation de la session
session_start();
header("Cache-Control: no-cache");

// Chargement Smarty et Defines
require('defines.inc.php');
require(_PATH_ . 'web/tools/smarty/Smarty.class.php');

// Chargement du coeur
$files = scandir(_CORE_);
foreach ($files as $filename)
{
    if (is_file(_CORE_.$filename))
        require_once(_CORE_.$filename);
}

// Connexion Database
try {
$bdd = new PDO("mysql:host=localhost;dbname=pixyjob", "root", "");
$bdd->query("SET NAMES UTF8");
} catch (Exception $e) {
    echo "Problème de connexion à la base de donnée PixyJob...";
    die();
}

// Initialisation Smarty
$smarty = new Smarty();

Si plus tard vous avez besoin d’inclure une Application Facebook pour gérer un Facebook connect ou autre, c’est ici que vous devrez inclure la configuration à Facebook.

Maintenant la première chose à faire avant que votre architecture fonctionne on va encore créer un premier controller, et quelques vus car sans celà rien ne marchera car dans notre fichier index.php.

Donc rendez-vous dans votre dossier « controllers » et créez un fichier nommé index.php, ensuite dans votre dossier « tpl » nous allons créer deux fichiers, footer.tpl et header.tpl et dans votre dossier « tpl/pages » créons index.tpl.

Maintenant votre architecture est prête. Le code qui se trouvera dans footer.tpl et header.tpl sera affiché sur toutes vos pages.

Editons donc notre header.tpl, voici le code que j’y ai mis

<!DOCTYPE html>
<html lang="fr">
<head>
        <title>PixyJob</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="/web/css/base.css" media="screen" />
        <link rel="shortcut icon" href="/web/images/favicon.ico" />
        <!-- On importe jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>
<body>
<div>
        Ceci est notre header
</div>

Maintenant on va éditer notre footer.tpl pour lui mettre la balise de fermeture du code HTML

<div>
       Ceci est notre footer
</div>
</body>
</html>

Et maintenant dans notre index.tpl nous allons y mettre

<div>
      Le contenu de notre page index.tpl
</div>

Victoire, l’architecture est en place et fonctionne.

Maintenant si vous n’êtes pas habituées des architectures MVC vous devez vous demandez comment on fait transiter des variables php vers Smarty ?

Tout simplement, si on veut récupérer des variables dans notre vues « index » nous allons devoir mettre du code dans notre controllers « index », logique jusque là.

Imaginons que dans notre controllers index.php nous ayons ceci

<?php
       //On crée une variable qui a pour valeur '15'
       $maVariable = 15;
       //On envoie la variable à la vue avec un smarty->assign
       $smarty->assign('nomDeMaVariableSousSmarty', $maVariable);
?>

Comme vous le voyez on viens d’envoyer à Smarty $maVariable, pour récupérer cette variable sous Smarty elle s’appellera : nomDeMaVariableSousSmarty.

Dans votre vue index.tpl vous pouvez éditer votre fichier et modifier votre texte en :

Ma variable vaut {$nomDeMaVariableSousSmarty} , le nom que vous avez défini précédé d’un $ et tout ceci entre accolades.

Sauvegarder et vérifier, Bingo ça marche.

On se retrouve très vite pour la partie 2 où l’on créera des classes et des fonctions pour les faire intervenir dans notre projet.

Pour faire vos pages il faut comprendre et retenir ces choses importantes :

Lorsque vous créer une nouvelle vues, le controller doit avoir exactement le même nom car c’est notre index.php principal qui va appeler le controllers portant le nom de la vue automatiquement.

-Dans vos core, vos classes et fonctions qui vous permettront de faire vos traitement de données.

-Dans vos controllers, du code php qui fera des appels aux classes stocké dans notre « core » pour avoir les éléments désirées et on les enverra à a vue sous forme de « variable smarty » pour les afficher.

-Dans vos vues (tpl/pages) il faut uniquement du code HTML et JS

Lien vers la partie 2

ARTICLES CONNEXESPLUS DE L'AUTEUR

34 Commentaires

  1. Très interessant…j’utilise Smarty depuis quelques temps mais je ne l’ai jamais orienté poo / MVC…

    Un très bon tuto simple et efficasse où nous allons pouvoir faire des merveilles avec…

    A quand la partie 2 ?? terriblement préssé d’avoir mon MVC opérationnel ^^

  2. ahhh genial ! j’avou que j’adore smarty depuis plusieur année et créer un MVC avec synfonie ou zend ne m’emballe pas particulièrement…un peu trop gros pour moi…bien que super puissant, j’adore la simplicité de smarty ^^ !

    super comme boulot…encore merci a toi ^^

    • C’est sur que c’est plus gros comme Framework a prendre en main avec les méthodos imposés !

      Mais pour des sites de petites – moyennes envergures, tu verras que ce Framework fera bien l’affaire 🙂

  4. Bonjour,

    Merci pour ce tuto bien expliquer… mais j’aurai quelques questions.

    1 . Le fichier core est bien vide? parce que j’ai une erreur au niveau de $files = scandir(_CORE_);

    2 . Quand on créer un nouveau controller et un nouveau tpl quelle fichier doit t’on appeler dans l’url le controller ou le tpl ?

    Cordialement

    Subzeros

    • Bonjour Subzeros,

      Pour répondre à tes questions :
      1 – Oui à la fin de notre tutorial le dossier core est vide car nous n’avons pas encore crée de class à l’intérieur (Ca sera dans la suite du chapitre)

      2 – Pour appeller tes pages c’est ainsi index.php?page=clients qui appellera automatiquement le controller clients.php et le template clients.tpl

      Après tu peux te créer un htacess pour avoir de plus url du genre

      RewriteRule ^clients$ index.php?page=clients[L]

      La suite du tutorial arrive en vidéo pour que ce soit plus facile pour tout le monde 🙂

      Cordialement,

      Fredods

  8. Pour ma part une erreur, qu’elle erreur j’ai fait ?

    [function.require]: Failed opening required ‘C:/wamp/www//web/tools/smarty/Smarty.class.php’
    (include_path=’.;C:\\php\\pear’) in C:\\wamp\\www\\test\\config\\config_init.php on line 8

    require(« C:\wamp\www\test\web\tools\smarty\Smarty.class.php »);

    • Comme tu le voies :

      [function.require]: Failed opening required ‘C:/wamp/www//web/tools/smarty/Smarty.class.php’

      Tu n’a pas défini ton dossier « test » dans tes configs

      Il faut que dans ton defines.inc.php à cette ligne

      // Define de la racine du site
      define(‘_PATH_’, $_SERVER[‘DOCUMENT_ROOT’].’/’);

      Tu mettes ton dossier comme ceci

      // Define de la racine du site
      define(‘_PATH_’, $_SERVER[‘DOCUMENT_ROOT’].’/tondossier/’);

  9. Bonjour, je cherchais un moyen d’optimiser mon développement, d’avoir une base pour ne pas repartir de zéro a chaque fois, et le MVC et smarty me semblait la bonne méthode. Votre tuto est intéressant, le problème est que j’ai une erreur 500 ! je ne comprend pas pourquoi ! Avez vous deja vu ce problème?

  10. Bonjour, je cherchais un moyen d’optimiser mon développement, d’avoir une base pour ne pas repartir de zéro a chaque fois, et le MVC et smarty me semblait la bonne méthode. Votre tuto est intéressant, le problème est que j’ai une erreur 500 ! je ne comprend pas pourquoi ! Avez vous deja vu ce problème?

  11. Bonjour,

    Je débute et je m’essaye à SMARTY en espérant que grâce à votre tutoriel je vais y arriver 🙂

    Je ne suis pas sûr, mais pour ma part, le footer et le contenu du template ne voulais pas s’afficher seul le header s’affichait, en cherchant je crois avoir vu une petite erreur dans le tuto :

    Dans la partie ci dessous vous indiquer « $smarty->display(_TPL_ . ‘pages/home.tpl’);  »

    // Affichage des templates
    $smarty->display(_TPL_ . ‘header.tpl’);

    if (isset($_GET[‘page’]) && file_exists(_TPL_.’pages/’.str_replace(‘.’,  », $_GET[‘page’]).’.tpl’))
    $smarty->display(_TPL_.’pages/’.$_GET[‘page’].’.tpl’);
    else
    $smarty->display(_TPL_ . ‘pages/home.tpl’);

    $smarty->display(_TPL_ . ‘footer.tpl’);

    Par la suite vous dîtes :

    « ensuite dans votre dossier « tpl » nous allons créer deux fichiers, footer.tpl et header.tpl et dans votre dossier « tpl/pages » créons index.tpl.  »

    Ne faut-il pas créer un fichier home.tpl ? ou changer home.tpl par index.tpl ?

    Merci

  14. Salut, j’essaye de faire une page de login qui renverra directement sur un dashboard.
    Je voudrais savoir comment procéder avec ton architecture MVC parceque je n’y arrive pas du tout a structurer tout ça.
    Merci de ton aide par avance.

  15. qlq’un peut m’aider ?

    Warning: require_once(C:/wamp64/www/web/tools/smarty/Smarty.class.php): failed to open stream: No such file or directory in C:\wamp64\www\pixyjob\config\config_init.php on line 5

  16. Salut à vous !
    J’ai suivi votre cours mais j’ai cette « jolie » erreur :
    Fatal error: Smarty error: the $compile_dir ‘templates_c’ does not exist, or is not a directory. in C:\Program Files (x86)\EasyPHP-DevServer-14.1VC11\data\localweb\web\tools\smarty\Smarty.class.php on line 1100
    Je ne sais pas quoi faire dépuis je suis bloqué du coup je n’ai plus le goût de suivre la partie 2 de votre cours.
    J’espère que vous avez une solution pour moi.
    Merci !

LAISSER UN COMMENTAIRE

Merci de rentrer votre commentaire
Merci de rentrer votre nom

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.