Aller au contenu principal
Version: Canary 🚧

🎹 Utiliser les vues

Introduction​

Les vues contiennent le code HTML fourni par votre application et séparent votre logique de contrÎleur/application de votre logique de présentation:

Configuration​

Bow Framework implémente 2 moteurs de template et le template par defaut est Tintin. La configuration des vues ce trouve dans le fichier view.php du dossier config/.

Spécifiez le nom du template à utiliser avec option engine de la configuration, cette option peut prendre le valeur suivant tintin, twig et php. Par défaut Bow utilise tintin.

Notez que si vous définissez php, le rendu des vues se fera sans moteur de template

Vous pouvez aussi changer l'extension de template en modifiant la valeur de l'entré extension. Vous verez également que les vues sont stockées dans le répertoire templates par defaut.

CrĂ©ation de vue​

Une simple vue peut ressembler Ă  ceci

<!-- View stored in templates/greeting.tintin.php -->
<html>
  <body>
    <h1>Hello, {{ $name }}</h1>
  </body>
</html>

Apres avoir modifier et sauvegarde votre vue dans templates/greeting.tintin.php. Vous pouvez maintenant l'envoyer au utilisateur avec le helper view comme ceci:

$app->get('/', function() {
  return view('greeting', ['name' => 'Tintin']);
});

Utilisation​

Exemple d'utilisation: (Avec le classe View) Cette utilise la méthode parse.

View::parse(view, data, status)
ParamĂštretypedescription
viewStringLe chemin de la vue sachant dans le moteur se base sur le dossier des vues
dataArray, ObjectLes données a passé à la vue
statusIntegerLe code http
use Bow\View\View;

echo View::parse('nom-de-la-vue-sans-extension');

Pour passer des variables Ă  la vue

use Bow\View\View;

echo View::parse(
  'nom-de-la-vue-sans-extension',
  ['name' => 'bow'],
  200
);

Vous pouvez utiliser le helper view qui s'utilise de la mĂȘme façon.

Avec la vue suivante:

<!-- View stored in templates/greeting.tintin.php -->
<html>
 <body>
  <h1>Hello, {{ $name }}</h1>
 </body>
</html>

Exemple dans un controlleur:

namespace App\Controllers;

use App\Controllers\Controller;

class HomeController extends Controller
{
  /**
   * Show hello page
   *
   * @return mixed
   */
  public function show()
  {
    return view('greeting', ['name' => 'Bowphp']);
    // Ou
    return $this->render('greeting', ['name' => "Bowphp"]);
    // Ou
    return response()->render('greeting', ['name' => "Bowphp"]);
  }
}

Introduction Tintin​

Tintin est un template PHP qui se veut trĂšs simple et extensible. Il peut ĂȘtre utilisable dans n'importe quel projet PHP. Par dĂ©faut #Tintin est le moteur de template de Bow Framework utilise.

Configuration Tintin​

Vous trouverez la configuration dans le fichier config/view.php et c'est dans le dossier templates que sont sauvegardés le fichier de template avec l'extension .tintin.php.

Affichage des donnĂ©es​

Vous pouvez afficher le contenu de la variable name de la maniĂšre suivante:

Hello, {{ $name }}.

Bien entendu, vous n'ĂȘtes pas limitĂ© Ă  afficher le contenu des variables transmises Ă  la vue. Vous pouvez Ă©galement faire Ă©cho aux rĂ©sultats de toute fonction PHP. En fait, vous pouvez insĂ©rer n'importe quel code PHP dans une instruction echo Blade:

Hello, {{ strtoupper($name) }}.

Les instructions Tintin {{ }} sont automatiquement envoyĂ©es via la fonction PHP htmlspecialchars pour empĂȘcher les attaques XSS.

Affichage des donnĂ©es non Ă©chappĂ©es​

Par dĂ©faut, les instructions Tintin {{ }} sont automatiquement envoyĂ©es via la fonction PHP htmlspecialchars pour empĂȘcher les attaques XSS. Si vous ne souhaitez pas que vos donnĂ©es soient protĂ©gĂ©es, vous pouvez utiliser la syntaxe suivante:

Hello, {{{ $name }}}.

Ajouter un commentaire​

Cette clause {# comments #} permet d'ajouter un commentaire Ă  votre code tintin.

#if / #elseif ou #elif / #else​

Ce sont les clauses qui permettent d'Ă©tablir des branchements conditionnels comme dans la plupart des langages de programmation.

<p>
#if ($name == 'tintin')
  {{ $name }}
#elseif ($name == 'template')
  {{ $name }}
#else
  {{ $name }}
#endif
</p>

Vous pouvez utiliser #elif Ă  la place de #elseif.

#unless​

Petite spécificité, le #unless quant à lui, il permet de faire une condition inverse du #if. Pour faire simple, voici un exemple:

#unless ($name == 'tintin')

// Egale Ă 
#if (!($name == 'tintin'))

#loop / #for / #while​

Souvent vous pouvez ĂȘtre amener Ă  faire des listes ou rĂ©pĂ©titions sur des Ă©lĂ©ments. Par exemple, afficher tout les utilisateurs de votre plateforme.

L'utilisation de #loop​

Cette clause faire exactement l'action de foreach.

#loop ($names as $name)
  Bonjour {{ $name }}
#endloop

Cette clause peux ĂȘtre aussi coupler avec tout autre clause telque #if. Voici un exemple rapide:

#loop ($names as $name)
  #if ($name == 'tintin')
    Bonjour {{ $name }}
    #stop
  #endif
#endloop

Vous avez peut-ĂȘtre remarquer le #stop il permet de stoper l'Ă©xĂ©cution de la boucle. Il y a aussi son conjoint le #jump, lui parcontre permet d'arrĂȘter l'Ă©xĂ©cution Ă  son niveau et de lancer s'Ă©xĂ©cution du prochain tour de la boucle.

Les sucres syntaxiques #jump et #stop​

Souvent le dĂ©vĂ©loppeur est amenĂ© Ă  faire des conditions d'arrĂȘt de la boucle #loop comme ceci:

#loop ($names as $name)
  #if ($name == 'tintin')
    #stop
    // Ou
    #jump
  #endif
#endloop

Avec les sucres syntaxique, on peut réduire le code comme ceci:

#loop ($names as $name)
  #stop($name == 'tintin')
  // Ou
  #jump($name == 'tintin')
#endloop

L'utilisation de #for​

Cette clause faire exactement l'action de for.

#for ($i = 0; $i < 10; $i++)
 // ..
#endfor

L'utilisation de #while​

Cette clause faire exactement l'action de while.

#while ($name != 'tintin')
 // ..
#endwhile

Inclusion de fichier​

Souvent lorsque vous dĂ©vĂ©loppez votre code, vous ĂȘtes amener Ă  subdiviser les vues de votre application pour ĂȘtre plus flexible et Ă©crire moin de code.

#include permet d'include un autre fichier de template dans un autre.

 #include('filename', data)

Exemple d'inclusion​

Considérons le fichier hello.tintin.php suivant:

Hello {{ $name }}

Utilisation:

#include('hello', ['name' => 'Tintin'])
// => Hello Tintin

HĂ©ritage avec #extends, #block et #inject​

Comme tout bon systĂšme de template tintin support le partage de code entre fichier. Ceci permet de rendre votre code flexible et maintenable.

Considérérons le code tintin suivant:

// le fichier `layout.tintin.php`
<!DOCTYPE html>
<html>
<head>
  <title>Hello, world</title>
</head>
<body>
  <h1>Page header</h1>
  <div id="page-content">
    #inject('content')
  </div>
  <p>Page footer</p>
</body>
</html>

Et aussi, on a un autre fichier qui hérite du code du fichier layout.tintin.php

// le fichier se nomme `content.tintin.php`
#extends('layout')

#block('content')
  <p>This is the page content</p>
#endblock

Explication​

Le fichier content.tintin.php va hérité du code de layout.tintin.php et si vous rémarquez bien, dans le fichier layout.tintin.php on a la clause #inject qui a pour paramÚtre le nom du #block de content.tintin.php qui est content. Ce qui veut dire que le contenu du #block content sera remplacé par #inject. Ce qui donnéra à la fin ceci:

<!DOCTYPE html>
<html>
<head>
  <title>Hello, world</title>
</head>
<body>
  <h1>Page header</h1>
  <div id="page-content">
    <p>This is the page content</p>
  </div>
  <p>Page footer</p>
</body>
</html>

Directive personnelisĂ©e​

Tintin peut ĂȘtre Ă©tendu avec son systĂȘme de directive personnalisĂ©, pour ce faire utilisĂ© la mĂ©thode directive. Pour se faire nous avons crĂ©er un configuration et extendre la configuration native \Tintin\Bow\TintinConfiguration::class.

php bow add:configuration TintinConfiguration

Ajouter vos directive de la configuration​

AprÚs avoir créé la configuration vous trouverez le fichier app/Configurations/TintinConfiguration.php qui va étendre la configuration par défaut de Tintin qui est \Tintin\Bow\TintinConfiguration::class et ensuite modifier la méthode onRunning.

use Tintin\Tintin;

class TintinConfiguration extends \Tintin\Bow\TintinConfiguration
{
  /**
   * Add action in tintin
   *
   * @param Tintin $tintin
   */
  public function onRunning(Tintin $tintin)
  {
    $tintin->directive('super', function (array $attributes = []) {
      return "Super !";
    });
  }
}

Pour fin en beauté. remplacez la configuration par defaut de Tintin dans le app/Kernel.php par App/Configurations/TintinConfiguration::class.

Maintenant la directive #super est disponible et vous pouvez l'utiliser.

  return $tintin->render('#super');
  // => Super !

Exemple de crĂ©ation de directive​

Ajoutons une directive simple. On l'appelera #hello

$tintin->directive('hello', function (array $attributes = []) {
  return 'Hello, '. $attributes[0];
});

echo $tintin->render('#hello("Tintin")');
// => Hello, Tintin

Création de directive pour gérer un formulaires:

$tintin->directive('input', function (array $attributes = []) {
  $attribute = $attributes[0];

  return '<input type="'.$attribute['type'].'" name="'.$attribute['name'].'" value="'.$attribute['value'].'" />';
});

$tintin->directive('textarea', function (array $attributes = []) {
  $attribute = $attributes[0];

  return '<textarea name="'.$attribute['name'].'">"'.$attribute['value'].'"</textarea>';
});

$tintin->directive('button', function (array $attributes = []) {
  $attribute = $attributes[0];

  return '<button type="'.$attribute['type'].'">'.$attribute['label'].'"</button>';
});

$tintin->directive('form', function (array $attributes = []) {
  $attribute = " ";
  
  if (isset($attributes[0])) {
    foreach ($attributes[0] as $key => $value) {
      $attribute .= $key . '="'.$value.'" ';
    }
  }

  return '<form "'.trim($attribute).'">';
});

$tintin->directive('endform', function (array $attributes = []) {
  return '</form>';
});

Utilisation des directives​

Pour utiliser ces directives, rien de plus simple. Ecrivez le nom de la directive précédé la par #. Ensuite si cette directive prend des paramÚtres, lancer la directive comme vous lancez les fonctions dans votre programme. Les paramÚtres seront régroupés dans la varibles $attributes dans l'ordre d'ajout.

/** Fichier form.tintin.php **/
#form(['method' => 'post', "action" => "/posts", "enctype" => "multipart/form-data"])
  #input(["type" => "text", "value" => null, "name" => "name"])
  #textarea(["value" => null, "name" => "content"])
  #button(['type' => 'submit', 'label' => 'Add'])
#endform

Compilation du template​

La compilation se fait comme d'habitude, pour plus d'information sur la compilation.

echo $tintin->render('form');

Sortie aprùs compilation​

<form action="/posts" method="post" enctype="multipart/form-data">
  <input type="text" name="name" value="" />
  <textarea name="content"></textarea>
  <button type="submit">Add</button>
</form>

IDE support​

Tintin est supporté actuellement par sublime text.

Comment installer Sublime Package Control​

Allez sur le site et suivez les instructions.

Installer le package Tintin​

  • Recherchez Bow Tintin et installez-le/TĂ©lĂ©chargez ou clonez ce rĂ©fĂ©rentiel dans [install-dir]/Packages/bow-tintin
  • RedĂ©marrez Sublime Text.
  • Rouvrez n’importe quel fichier .tintin ou .tintin.php.
  • Enjoy 😃

Package supplĂ©mentaire​

Dans le cas oĂč vous avez opter pour le moteur de template twig, voici la liste du package twig:

TemplatePackage
Twigtwig/twig

Installation de twig​

composer require twig/twig

Vue avec Twig​

Twig est un moteur de templates pour le langage de programmation PHP, utilisé par défaut par le Framework Symfony.

Il aurait été inspiré par Jinja, moteur de template Python utilisé dans Django.

Exemple de code:

$names = [
  "resque", "hub", "rip"
];
{# templates/greeting.twig #}
<html>
  <body>
    <h1>Hello, User</h1>
    {% for name in names %}
      <p>Hello, {{name}}</p>
    {% endfor %}
  </body>
</html>

Lien de la documentation

Il manque quelque chose ?

Si vous rencontrez des problÚmes avec la documentation ou si vous avez des suggestions pour améliorer la documentation ou le projet en général, veuillez déposer une issue pour nous, ou envoyer un tweet mentionnant le compte Twitter @bowframework ou sur directement sur le github.