Les moteurs de templates



Documents pareils
Modélisation PHP Orientée Objet pour les Projets Modèle MVC (Modèle Vue Contrôleur) Mini Framework

Initiation à html et à la création d'un site web

SYSTÈMES D INFORMATIONS

Django. Framework de développement Web

Soon_AdvancedCache. Module Magento SOON. Rédacteur. Relecture & validation technique. Historique des révisions

TP JAVASCRIPT OMI4 TP5 SRC

RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado

CREATION d UN SITE WEB (INTRODUCTION)

Mysql avec EasyPhp. 1 er mars 2006

INTRODUCTION A JAVA. Fichier en langage machine Exécutable

STID 2ème année : TP Web/PHP

HTML, CSS, JS et CGI. Elanore Elessar Dimar

Auteur LARDOUX Guillaume Contact Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA

Gestion d identités PSL Exploitation IdP Authentic

Présentation du Framework BootstrapTwitter

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

Classe ClInfoCGI. Fonctions membres principales. Gestion des erreurs

PHP et mysql. Code: php_mysql. Olivier Clavel - Daniel K. Schneider - Patrick Jermann - Vivian Synteta Version: 0.9 (modifié le 13/3/01 par VS)

Serveur d'application Client HTML/JS. Apache Thrift Bootcamp

Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP

Nouveautés joomla 3 1/14

Gestion Électronique de Documents et XML. Master 2 TSM

WordPress Référencement naturel (SEO) Optimiser. son référencement. Daniel Roch. Préface d Olivier Andrieu

Les Bases. Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015.

Rapport de projet Site web pour une association

La programmation orientée objet Gestion de Connexions HTTP Manipulation de fichiers Transmission des données PHP/MySQL. Le langage PHP (2)

Comment développer et intégrer un module à PhpMyLab?

Généralités. javadoc. Format des commentaires. Format des commentaires. Caractères spéciaux. Insérer du code

Formation HTML / CSS. ar dionoea

Démonstration de la mise en cache via HTML 5 sur iphone

PHP et les Bases de données - Généralités

Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s

Dans nos locaux au 98 Route de Sauve NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur

Zen, SASS, responsive design

Projet en nouvelles technologies de l information et de la communication

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

L envoi d un formulaire par courriel. Configuration requise Mail Texte Mail HTML Check-list

Programmation Web. Madalina Croitoru IUT Montpellier

Formulaire pour envoyer un mail

FORMATION DRUPAL. Support de cours - Mise à jour 02/11. Drupal / Matthieu Levet / JlGestion

Failles XSS : Principes, Catégories Démonstrations, Contre mesures

RAPPORT DE STAGE. Terrasse Hugo 1/12

Attaques de type. Brandon Petty

Joomla! Création et administration d'un site web - Version numérique

Proxies,, Caches & CDNs

Modernisation, développement d applications et DB2 sous IBM i Technologies, outils et nouveautés Volubis.fr

SERVEUR WEB. Christian Dupaty BTS Systèmes Numériques Lycée Fourcade Gardanne Académie d Aix Marseille

Les services usuels de l Internet

Sana Sellami. Licence Professionnelle SIL

Introduction à MATLAB R

Seance 2: En respectant la méthode de programmation par contrat, implémentez les autres fonctions de jeu.

WDpStats Procédure d installation

Sécurité des sites Web Pas un cours un recueil du net. INF340 Jean-François Berdjugin

Stockage du fichier dans une table mysql:

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

Panorama des CMS open sources. Sylvain Ferrand, CMAP École Polytechnique Journées Mathrice, Poitiers, 19 mars 2008

The Book for Symfony 2.1

PHP 5.4 Développez un site web dynamique et interactif

Introduction. PHP = Personal Home Pages ou PHP Hypertext Preprocessor. Langage de script interprété (non compilé)

PDO : PHP Data Object 1/13

Pack Fifty+ Normes Techniques 2013

XML par la pratique Bases indispensables, concepts et cas pratiques (3ième édition)

Module : programmation site Web dynamique Naviguer entre les pages via site map

2 Formation utilisateur

Master1 ère année. Réseaux avancés I. TP nº5 filière ISICG

Créer une base de données vidéo sans programmation (avec Drupal)

Tutoriel : Feuille de style externe

PUPPET. Romain Bélorgey IR3 Ingénieurs 2000

Module BD et sites WEB

Django et PostgreSQL sous la charge

Documentation CAS à destination des éditeurs

Aspects techniques : guide d interfaçage SSO

Attaques applicatives

Panel des technologies Web

Serveur d Applications Web : WebObjects

HTML. Notions générales

Logiciels de référencement

Hébergement de site web Damien Nouvel

Les grandes facettes du développement Web Nicolas Thouvenin - Stéphane Gully

Séance d ED n 5 : HTML et JavaScript

Sécurité des applications web. Daniel Boteanu

Programmer en JAVA. par Tama

DOCUMENTATION - FRANCAIS... 2

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP

Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall

Devenez un véritable développeur web en 3 mois!

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web

ING & NEWSLETTER NEWSLETTER RESPONSIVE

Les tablettes et l'extranet Intermixt Mode d'emploi

WordPress Référencement naturel (SEO) Optimiser. son référencement. Daniel Roch. Préface d Olivier Andrieu

UwAmp. Serveur d'evaluation

RÉALISATION D UN SITE DE RENCONTRE

Mise en place d un serveur Proxy sous Ubuntu / Debian

CREATION WEB DYNAMIQUE

Gérer ses environnements de développement avec Vagrant RMLL 2012

Transcription:

Les moteurs de templates Les principaux moteurs de templates php raintpl smarty twig mustache savant3 talus'tpl...

2/15 Avantages : Utilité des moteurs de templates Séparer le traitement de l'affichage Permettre aux designers de développer rapidement des gabarits sans spécialement connaître le langage utilisé Minimiser le code et le rendre plus clair Inconvénients Un peu plus lent à exécuter (cache obligatoire) Casse la structure xhtml...

3/15 Cas pratique : TWIG (http://twig.sensiolabs.org) initialisation de la librairie (après téléchargment de l'archive) <?php?> require_once("twig/lib/twig/autoloader.php"); Twig_Autoloader::register(); $loader = new Twig_Loader_Filesystem("templates"); $twig = new Twig_Environment($loader, array("cache" => false)); D'autres options disponibles : http://twig.sensiolabs.org /doc/api.html#environment-options

4/15 Twig : démonstration Créez un nouveau fichier templates/demo.html : Démonstration de l'utilisation de {{ moteur_templates }}. Ajouter sous l'initialisation de Twig : echo $twig->render("demo.html", array("moteur_templates" => "Twig")); Résultat : Démonstration de l'utilisation de Twig.

5/15 Twig : les filtres Twig inclut par défaut quelques filtres, vous permettant de modifier un peu l'affichage de vos valeurs : {{ ma_variable le_filtre }} Ou {% filter le_filtre %} Mon texte... {{ ma_variable }} {% endfilter %} D'autres : capitalize date length upper/lower/trim/nl2br http://twig.sensiolabs.org/doc/filters/index.html

6/15 Les conditions dans Twig {% if nb_articles >= 2 %} Il y a {{ nb_articles }} articles sur le blog. {% elseif nb_articles == 1 %} Il n'y a pour l'instant qu'un seul article sur le blog. {% else %} Il n'y a encore aucun article sur ce blog. Reviens plus tard. {% endif %} {% if pseudo is defined %} Vous êtes connecté. {% endif %} {% if pseudo is defined and pseudo is not empty%} Bonjour {{ pseudo }}. {% endif %}

Twig : les tableaux Côté PHP : <?php echo $twig->render("articles.html", array( "articles" => array( array( "titre" => "Titre 1", "url" => "titre-1", "img" => "http://abc.fr/image1.jpg", "tags" => array("tag 1", "Tag 2", "Tag 3") ), array( "titre" => "Titre 2", "url" => "titre-2", "img" => "http://abc.fr/image2.jpg", "tags" => array("tag 4", "Tag 5") ), array( "titre" => "Titre 3", "url" => "titre-3", "img" => "http://abc.fr/image3.jpg", "tags" => array("tag 6", "Tag 7", "Tag 8") ) ) ));?> 7/15

8/15 Twig : les tableaux Côté Twig : {% if articles length > 0 %} {% for each in articles %} <article class="article"> <div class="icone"> <img src="{{ each.img }}" alt="{{ each.img }}"> </div> <div class="content"> <header> <h2><a href="{{ each.url }}">{{ each.titre }}</a></h2> </header> <p> {% for tag in each.tags %} <strong>{{ tag }}</strong> {% endfor %} </p> </div> </article> {% endfor %} {% else %} <b>aucun article pour l'instant.</b> {% endif %}

9/15 Twig : les includes Possibilité d'inclure des templates dans des templates : {% include "menu.html" %}

10/15 Twig : héritage <!DOCTYPE html> <html> <head> {% block head %} <link rel="stylesheet" href="style.css"> <title>{% block title %}{% endblock %} - My Webpage</title> {% endblock %} </head> <body> <div id="content">{% block content %}{% endblock %}</div> <div id="footer"> {% block footer %} Copyright 2011 by <a href="http://domain.invalid/">you</a>. {% endblock %} </div> </body> </html>

11/15 Twig : héritage {% extends "base.html" %} {% block title %}Index{% endblock %} {% block head %} {{ parent() }} <style type="text/css">.important { color: #336699; } </style> {% endblock %} {% block content %} <h1>index</h1> <p class="important"> Welcome to my awesome homepage. </p> {% endblock %}

12/15 Dans un fichier forms.html : Twig : les macros {% macro input(name, value, type, size) %} <input name="{{ name }}" <br="" type="{{ type default('text') }}"> value="{{ value e }}" size="{{ size default(20) }}" /> {% endmacro %} Importation des macros dans un template : {% import "forms.html" as forms %} <p>{{ forms.input('username') }}</p> Une macro en particulier : {% from 'forms.html' import input as input_field %} <dl> <dt>username</dt> <dd>{{ input_field('username') }}</dd> <dt>password</dt> <dd>{{ input_field('password', '', 'password') }}</dd> </dl>

13/15 Twig : les expressions Possibilité d'utiliser des expressions un peu partout : {% set greeting = 'Hello' %} {% set name = 'Fabien' %} {{ greeting ~ name lower }} {# Hello fabien #} {# use parenthesis to change precedence #} {{ (greeting ~ name) lower }} {# hello fabien #} Mais aussi : des opérateurs mathématiques des opérateurs logiques des opérateurs de contenu... http://twig.sensiolabs.org/pdf/twig.pdf

14/15 Comparaisons boucles Résumé (boucles) Test tot. tempstot. mémoiretaille libr. php 5.4.4-14+deb7u52086 μs 40.63 KB 4 KB raintpl 2.7.0 5110 μs 345.8 KB 37 KB twig 1.5.1 19097 μs 844.88 KB 647 KB smarty 3.1.11 20112 μs 1.51 MB 1100 KB

15/15 Comparaisons affectations Résumé (affectation) Test tot. tempstot. mémoiretaille libr. php 5.4.4-14+deb7u52001 μs 12.16 KB 4 KB raintpl 2.7.0 5113 μs 321.86 KB 37 KB twig 1.5.1 17671 μs 844.86 KB 647 KB smarty 3.1.11 20411 μs 1.52 MB 1100 KB