Comment choisir son framework : view / layout

Introduction
Dans un précédent billet, je vous ai présenté l’initiative de grafikart: http://blog.developpez.com/ducodeetdulibre/p12482/outilsweb/comment-choisir-son-framework-php
Sur les prochains billets, nous allons détailler, analyser et comparer la manière de faire de chaque framework.

But de ce billet
Dans ce billet, nous allons essayer de comprendre commen s’organise la création de page avec chaque framework:
Pour rappel, dans un site web, on à un templage général, appelé layout, qui contient notre bandeau/logo, nos menus de navigation ainsi qu’une partie dynamique: le contenu de notre site.
Nous allons voir ici, comment ont choisi le layout à utiliser (on peut en avoir plusieurs), puis comment on intègre la navigation, et comment on choisi quel template de vue utiliser pour l’affichage de notre contenu.

Voilà la page que nous allons étudier ici
layoutViewSite

On peut voir 4 zones:

  • Le bandeau
  • La navigation des catégories
  • La navigation des derniers posts
  • Le contenu dynamique

layoutViewSite2

Retrouvez un billet de détail sur les frameworks suivants:

Retour au menu principal

Comment choisir son framework : view / layout – Symfony 2

Introduction
Dans un précédent billet, je vous ai présenté l’initiative de grafikart: http://blog.developpez.com/ducodeetdulibre/p12482/outilsweb/comment-choisir-son-framework-php
Sur les prochains billets, nous allons détailler, analyser et comparer la manière de faire de chaque framework.

But de ce billet : Symfony 2
Dans ce billet, nous allons essayer de comprendre comment s’organise la création de page avec chaque framework:
Pour rappel, dans un site web, on à un template général, appelé « layout », qui contient notre bandeau/logo, nos menus de navigation ainsi qu’une partie dynamique: le contenu de notre site.
Nous allons voir ici, comment ont choisi le layout à utiliser (on peut en avoir plusieurs), puis comment on intègre la navigation, et comment on choisit quel template de vue utiliser pour l’affichage de notre contenu.

Voilà la page que nous allons étudier ici:
layoutViewSite

On peut voir 4 zones:

  • Le bandeau
  • La navigation des catégories
  • La navigation des derniers posts
  • Le contenu dynamique

layoutViewSite2

Le layout
Pour afficher la page d’accueil, on appelle la classe controller PostController:
/src/Acme/BlogBundle/Controller/PublicController.php
tree-module-public

Il n’y a pas d’indication sur le layout à charger ici, il est précisé plus tard dans la vue

La/les vues
Lorsque l’on regarde l’action appelée pour afficher cette page d’accueil:
code-module-public-index
Qui appelle la méthode listPosts()
code-module-public-listPost

On peut lire ici que l’on appelle la vue:
/src/Acme/BlogBundle/Resources/views/Public/index.html.twig
tree-view-blogPublicIndex

code-view-blogPublicIndex

On peut lire en amont de cette vue que l’on étend la vue AcmeBlogBundle:Public:layout.html.twig
Voyons à quoi ce layout ressemble:
Pour information, il se situe ici:
/src/Acme/BlogBundle/Resources/views/Public/layout.html.twig
tree-layout

code-layout

On retrouve ici un appel d’extension du layout base.html.twig
/app/Resources/views/base.html.twig
tree-layout-base

code-layout-base

On voit également l’affichage du layout AcmeBlogBundle:Public:sidebar
/src/Acme/BlogBundle/Resources/views/Public/sidebar.html.twig
tree-layout-sidebar

codelayout-sidebar

La syntaxe {{ render(controller(‘AcmeBlogBundle:Public:sidebar’)) }} dans le layout indique qu’il appelle la méthode sidebarAction du module public
/src/Acme/BlogBundle/Controller/PublicController.php
tree-module-public

code-controller-sidebar

Retour au sommaire

Comment choisir son framework : liste admin – Laravel 4

Introduction
Dans un précédent billet, je vous ai présenté l’initiative de grafikart: http://blog.developpez.com/ducodeetdulibre/p12482/outilsweb/comment-choisir-son-framework-php
Sur les prochains billets, nous allons détailler, analyser et comparer la manière de faire de chaque framework.

Le listage des posts coté admin avec Laravel 4
Voici la page en question:
Une liste de posts, paginé avec des liens pour ajouter, modifier et supprimer ceux-ci.
admin-list

L’adresse URL est index.php/admin
Le fichier controlleur concerné est application/classes/Controller/Admin.php
tree-controller

Dans la méthode action_index(), on a le code suivant:
code-controller

On voit ici pour assigner des variables à la vue, via la méthode set() sur l’objet retourné par la méthode statique View::factory() de la vue.

note: ici la pagination et la liste des posts sont « fusionnés »: on assigne à la vue un objet de pagination contenant les posts.

Qui fait appel à la méthode findAll du model application/classes/Model/Post.php
tree-model

note: on a pas la méthode de recupération dans la couche model post, mais dans le controller:
code-model

Et enfin la vue html de listage en elle même:
Fichier module/privatePosts/view/list.php
tree-view

Où on a le code suivant:
code-view

On retrouve les variables $posts passé du controlleur plus haut

Retour au sommaire

Comment choisir son framework : liste admin

Introduction
Dans un précédent billet, je vous ai présenté l’initiative de grafikart: http://blog.developpez.com/ducodeetdulibre/p12482/outilsweb/comment-choisir-son-framework-php
Sur les prochains billets, nous allons détailler, analyser et comparer la manière de faire de chaque framework.

Le listage des posts coté admin
Voici la page en question:
Une liste de posts, paginé avec des liens pour ajouter, modifier et supprimer ceux-ci.
admin-list

Retrouvez un billet de détail sur les frameworks suivants:

L’idée de ces prochains billets est de décortiquer/détailler les différences de developpements de chaque frameworks afin de vous aider à choisir celui qui vous convient le mieux

Note: je n’ai pas fait encore pour Laravel 4, cake php car je rencontre des soucis dans l’installation de ceux-ci (problème dans les projets en question sur github), j’ai remonté les problèmes en questions sur le site de grafikart:
http://www.grafikart.fr/blog/comparer-frameworks-mvc
Pour les autres frameworks: django, rails et asp.mvc, n’étant pas familier avec ces langages (ruby/python), et utilisant un environnement gnu/linux (asp), je ne peux tester ces solutions et donc les commenter, mais si l’un d’entre vous poste un billet, je veux bien rajouter le lien vers celui-ci

Retour au menu principal

Comment choisir son framework : liste admin – MkFramework

Introduction
Dans un précédent billet, je vous ai présenté l’initiative de grafikart: http://blog.developpez.com/ducodeetdulibre/p12482/outilsweb/comment-choisir-son-framework-php
Sur les prochains billets, nous allons détailler, analyser et comparer la manière de faire de chaque framework.

Le listage des posts coté admin avec MkFramework
Voici la page en question:
Une liste de posts, paginé avec des liens pour ajouter, modifier et supprimer ceux-ci.
admin-list

L’adresse URL est public/postadmin
Le fichier controlleur concerné est module/privatePosts/main.php
tree-controller-adminpost

Dans la méthode _list(), on a le code suivant:
code-controller-adminpost
On voit ici pour assigner des variables à la vue, on instancie d’abord un objet view, puis on lui assigne des propriétés.

Qui fait appel à la méthode findAll du model model/model_posts.php
tree-model
code-model

Et enfin la vue html de listage en elle même:
Fichier module/privatePosts/view/list.php
tree-view

Où on a le code suivant:
code-view
On retrouve les variables this->tPost et this->oPagination passés du controlleur plus haut (via une assignation de propriété à l’objet vue)

Retour au sommaire

Comment choisir son framework : liste admin – Kohana

Introduction
Dans un précédent billet, je vous ai présenté l’initiative de grafikart: http://blog.developpez.com/ducodeetdulibre/p12482/outilsweb/comment-choisir-son-framework-php
Sur les prochains billets, nous allons détailler, analyser et comparer la manière de faire de chaque framework.

Le listage des posts coté admin avec Kohana
Voici la page en question:
Une liste de posts, paginé avec des liens pour ajouter, modifier et supprimer ceux-ci.
admin-list

L’adresse URL est index.php/admin
Le fichier controlleur concerné est application/classes/Controller/Admin.php
tree-controller

Dans la méthode action_index(), on a le code suivant:
code-controller

On voit ici pour assigner des variables à la vue, via la méthode set() sur l’objet retourné par la méthode statique View::factory() de la vue.

note: ici la pagination et la liste des posts sont « fusionnés »: on assigne à la vue un objet de pagination contenant les posts.

Qui fait appel à la méthode findAll du model application/classes/Model/Post.php
tree-model

note: on a pas la méthode de recupération dans la couche model post, mais dans le controller:
code-model

Et enfin la vue html de listage en elle même:
Fichier module/privatePosts/view/list.php
tree-view

Où on a le code suivant:
code-view

On retrouve les variables $posts passé du controlleur plus haut

Retour au sommaire

Comment choisir son framework : liste admin – ZendFramework2

Introduction
Dans un précédent billet, je vous ai présenté l’initiative de grafikart: http://blog.developpez.com/ducodeetdulibre/p12482/outilsweb/comment-choisir-son-framework-php
Sur les prochains billets, nous allons détailler, analyser et comparer la manière de faire de chaque framework.

Le listage des posts coté admin avec Zend framework 2
Voici la page en question:
Une liste de posts, paginé avec des liens pour ajouter, modifier et supprimer ceux-ci.
admin-list

L’adresse URL est public/admin/posts
Le fichier controlleur concerné est module/Blog/src/Blog/Application/Post/Controller/PostController.php
tree-controller-adminpost
Dans la méthode indexAdminAction(), on a le code suivant:
code-adminpost
On voit ici que pour assigner des variables à la vue, on retourne un tableau: chaque clé sera une variable disponible dans la vue: ici posts (qui contiendra le tableau des posts) et paginator (un objet pour gérer la pagination)

Qui fait appel à la méthode getActivePost du model /module/Blog/src/Blog/Business/Repository/PostRepository.php
tree-model-adminpost
model-post-rep

Et enfin la vue html de listage en elle même:
Fichier module/Blog/view/blog/post/index-admin.phtml
tree-view
Où on a le code suivant:
code-view-adminpost
On retrouve les variables posts et paginator passé du controlleur plus haut (via un return)

Retour au sommaire

Comment choisir son framework : liste admin – Symfony 2

Introduction
Dans un précédent billet, je vous ai présenté l’initiative de grafikart: http://blog.developpez.com/ducodeetdulibre/p12482/outilsweb/comment-choisir-son-framework-php
Sur les prochains billets, nous allons détailler, analyser et comparer la manière de faire de chaque framework.

Le listage des posts coté admin avec Symfony 2
Voici la page en question:
Une liste de posts, paginé avec des liens pour ajouter, modifier et supprimer ceux-ci.
admin-list

L’adresse URL est /admin/
Le fichier controlleur concerné est src/Acme/BlogBundle/Controller/AdminPostController.php
tree-controller

Dans la méthode indexAction(), on a le code suivant:
code-controller

On voit ici que pour assigner des variables à la vue, on utilise la méthode render, et en deuxième argument on passe un tableau.

Qui fait appel à la méthode findAllQuery du model /src/Acme/BlogBundle/Entity/PostRepository.php
tree-model

code-model

Et enfin la vue html de listage en elle même:
Fichier /src/Acme/BlogBundle/Resources/views/AdminPost/index.html.twig
tree-view

Où on a le code suivant:
code-view

On retrouve la variable posts passé du controlleur plus haut.

Retour au sommaire

La Gamification pour apprendre plus facilement

Introduction

Vous savez tous que l’on apprend mieux en s’amusant, et certains sites on trouver des solutions pour s’amuser en apprenant à coder du css, du ruby…
Je vais ici vous lister plusieurs sites proposant la gamification pour apprendre.

Css : Css Diner
Ce site vous demande de selectionner des elements visuels sur la table en tapant dans un champ texte le code css adéquat.
Vous avez à votre droite une aide CSS contextuel pour vour aider à passer le niveau.

Le site: http://flukeout.github.io/

cssdiner

Ruby On Rails: Rails for zombies
Ici vous devez manipulez une base de données avec la couche modèle de RoR.
Pour chaque challenge, une vidéo d’explication précède l’exercice.

Le site: http://railsforzombies.org/levels/1/challenges/1

railsforzombies

Expressions régulières: Regex Cross­word
Ici le jeu est différent: vous avez des cases vides qu’il faut remplir en respectant les conditions rédigées en expressions régulières.
Par exemple pour la première case, on a A|Z et A|B, la réponse est donc A

Le site: http://regexcrossword.com/

regexp

Conclusion
N’hesitez pas à partager vos sites de gamification.

Reprise du projet MkDraw en SVG jour 3

Introduction
Pour le jour 2, on profite des avantages du SVG:

  • on peut selectionner un objet en cliquant dessus sur le dessin
  • on peut deplacer un objet par drag and drop
  • on peut exporter l’image généré

Sélection d’objet sur le dessin
Lorsque l’on dessine un objet, on met en temporaire l’id de celui-ci,
Dans le fichier public/js/data.js

1
2
3
build:function(){
  oApplication.dataIdDrawed=this.id;
(...)

Et dans le fichier public/js/canvas.js

1
2
3
4
drawRect : function(x,y,ilargeur,ihauteur,lineWidth,strokeStyle,fillStyle){
 
  //on ajoute la methode onMouseDown où l'on indique d'editer l'objet
  sSvg+='onMouseDown="oApplication.selectObject('+oApplication.dataIdDrawed+')" ';

Deplacement des objets en drag and drop
Ici la modification se fait en plusieurs endroits:
Dans public/js/canvas.js on active le drag and drop via l’event onMouseDown/onMouseUp

1
2
3
4
5
6
7
8
drawRect : function(x,y,ilargeur,ihauteur,lineWidth,strokeStyle,fillStyle){
 
  //on ajoute la methode onMouseDown où l'on indique d'editer l'objet
  // + on indique que l'on demarre le drag and drop
  sSvg+=' onMouseDown="oApplication.startDrag('+oApplication.dataIdDrawed+');oApplication.selectObject('+oApplication.dataIdDrawed+')"  ';

  //on stope le drag and drop lorsque l'on l'ache la souris
  sSvg+=' onMouseUp="oApplication.endDrag()" ';

La méthode startDrag() dans la classe public/js/application.js

1
2
3
startDrag:function(id){
    this.dragId=id;
},

Et endDrag()

1
2
3
endDrag:function(id){
    this.dragId=null;
},

Ensuite, sur la div où l’on affiche le svg, on ajoute un attribut onMouseMove

1
onmousemove="oApplication.mousemove(event)"

Qui permet de gérer le moment où l’on déplace l’objet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
mousemove:function(e){
    var x=this.getXmouse(e);
    var y=this.getYmouse(e);
       
    var iWidth=(x-this.tmpX);
    var iHeight=(y-this.tmpY);
       
    if(this.dragId){


        oApplication.updateObject(this.dragId,'x',x-40);
        oApplication.updateObject(this.dragId,'y',y-40);
           
           
        return;
    }
(...)

Exportation de l’image
On ajoute ici un bouton pour exporter l’image

1
 

et la fonction concerné qui récupère le svg généré via la méthode innerHTML du dom

1
2
3
4
5
6
7
8
9
10
11
12
function exportPicture(){
    var oSvg=getById('tCanvas');
    sSvg=oSvg.innerHTML;
   
    var oContent=getById('content');
    oContent.value=sSvg;
   
    var oForm=getById('formexport');
    if(oForm){
        oForm.submit();
    }
}

Le formulaire soumis

1
2
3
<form target="_blank" id="formexport" action="" method="POST">
<textarea id="
content" name="content"></textarea>
</form>

Enfin, coté php pour afficher le code svg envoyé dans le module default, action « export »

1
2
3
4
5
6
7
8
9
public function _export(){
    _root::setConfigVar('site.mode','prod');
       
    $this-&gt;oLayout-&gt;setLayout('download');
    $this-&gt;oLayout-&gt;sFileName='export.svg';
    $this-&gt;oLayout-&gt;sExtension='svg';
       
    $this-&gt;oLayout-&gt;content=$_POST['content'];
}

Le fichier layout layout/download.php

1
2
3
4
5
6
7
sFileName."\"");
header('Content-Transfer-Encoding:binary');
header("Content-Type: application/".$this-&gt;sExtension.";name=\"".$this-&gt;sFileName."\"");

flush();
echo '';
echo $this-&gt;content;

Projet Github
Le projet est toujours hebergé ici: https://github.com/imikado/mkdrawsvg