framework-web:symfony:td3

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
framework-web:symfony:td3 [2018/02/20 19:57] – [Test Ajax] jcheronframework-web:symfony:td3 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 32: Ligne 32:
 ===== Création du projet, intégration des composants ===== ===== Création du projet, intégration des composants =====
  
-Exécuter le script de création de la base de données :+Exécuter le script de création de la base de données : {{:framework-web:symfony:td3:projects.sql|}}
  
 <sxh bash:gutter:false> <sxh bash:gutter:false>
-mysql -u root < path/to/boards.sql+mysql -u root < path/to/projects.sql
 </sxh> </sxh>
  
Ligne 229: Ligne 229:
  public function button(){  public function button(){
  $bt=$this->semantic()->htmlButton("btProjects","Projets","orange");  $bt=$this->semantic()->htmlButton("btProjects","Projets","orange");
- $bt->getOnClick($this->getUrl("/projects"),"#response");+ $bt->getOnClick($this->getUrl("/projects"),"#response",["attr"=>""]);
  return $bt;  return $bt;
  }  }
Ligne 257: Ligne 257:
 </sxh> </sxh>
  
 +Créer le template **Projects/index.html.twig** :
  
 +<sxh html;title:templates/Projects/index.html.twig>
 +{% extends "base.html.twig" %}
 +{%  block body %}
 +    {{ q["btProjects"] | raw }}
 + <div id="response" class="ui segment"></div>
 +{% endblock %}
 +{% block javascripts %}
 +    {{ parent() }}
 +    {{ script_foot | raw }}
 +{% endblock %}
 +</sxh>
 +
 +Ajouter la route **/projects** pour afficher les projets :
 +<sxh php;title:src/Controller/ProductsController.php>
 +...
 +    /**
 +     * @Route("/projects", name="projects")
 +     */
 +    public function all(ProjectRepository $projectRepo){
 +    $projects=$projectRepo->findAll();
 +    return $this->render('Projects/all.html.twig',["projects"=>$projects]);
 +    }
 +</sxh>
 +
 +Le template **Projects/all.html.twig** affiche la liste des projets :
 +
 +<sxh html;title:templates/Projects/all.html.twig>
 + <div class="ui inverted segment">
 + <div class="ui inverted relaxed divided list">
 + {% for project in projects %}
 + <div class="item">
 + <div class="content">
 + <div class="header">{{ project.name }}</div>
 + {{ project.descriptif }}
 + </div>
 + </div>
 + {% endfor %}
 + </div>
 + </div>
 +</sxh>
 +
 +{{:framework-web:symfony:td3:projects.png?|Projects}}
 +
 +==== Composant HtmlButtonGroups ====
 +
 +Créer la méthode **buttons** dans la classe **ProjectsGui** :
 +<sxh php;title:src/Services/semantic/ProjectsGui.php>
 +...
 + public function buttons(){
 + $bts=$this->_semantic->htmlButtonGroups("bts",["Projects","Tags"]);
 + $bts->addIcons(["folder","tags"]);
 + $bts->setPropertyValues("data-url", ["projects","tags"]);
 + $bts->getOnClick("","#response",["attr"=>"data-url"]);
 + }
 +</sxh>
 +Le click sur chaque bouton effectue une requête ajax vers l'url définie dans **data-url** dont le résultat est afficher dans l'élément HTML d'id **response**
 +
 +
 +Modifier le template **Projects/index.html.twig** pour qu'il affiche les boutons :
 +
 +<sxh html;title:templates/Projects/index.html.twig;highlight:[3]>
 +{% extends "base.html.twig" %}
 +{%  block body %}
 +    {{ q["bts"] | raw }}
 + <div id="response" class="ui segment"></div>
 +{% endblock %}
 +{% block javascripts %}
 +    {{ parent() }}
 +    {{ script_foot | raw }}
 +{% endblock %}
 +</sxh>
 +
 +
 +Modifier l'action **index** pour qu'elle appelle la méthode **buttons** de **gui** :
 +
 +<sxh php;title:src/Controller/ProductsController.php;highlight:[6]>
 +class ProjectsController extends Controller{
 +    /**
 +     * @Route("/index", name="index")
 +     */
 +    public function index(ProjectsGui $gui){
 +    $gui->buttons();
 +        return $gui->renderView('Projects/index.html.twig');
 +    }
 +    ...
 +</sxh>
 +
 +{{:framework-web:symfony:td3:buttons.png?|buttons}}
 +==== Composant DataTable ====
 +
 +Créer la classe **TagsGui** dans **src/Services** :
 +<sxh php;title:src/Services/semantic/TagsGui.php>
 +namespace App\Services\semantic;
 +
 +use Ajax\php\symfony\JquerySemantic;
 +
 +class TagsGui extends JquerySemantic{
 + public function dataTable($tags){
 + $dt=$this->_semantic->dataTable("dtTags", "App\Entity\Tag", $tags);
 + return $dt;
 + }
 +}
 +</sxh> 
 +
 +Créer la classe Repository pour les Tags :
 +
 +<sxh php;title:src/Repository/TagRepository.php>
 +namespace App\Repository;
 +
 +use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
 +use Symfony\Bridge\Doctrine\RegistryInterface;
 +use App\Entity\Tag;
 +
 +class TagRepository extends ServiceEntityRepository
 +{
 +    public function __construct(RegistryInterface $registry)
 +    {
 +        parent::__construct($registry, Tag::class);
 +    }
 +}
 +</sxh> 
 +
 +
 +Créer le controller **Tags** et la route **tags** :
 +
 +<sxh php;title:src/Controller/TagsController.php>
 +namespace App\Controller;
 +
 +use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
 +use Symfony\Bundle\FrameworkBundle\Controller\Controller;
 +use Symfony\Component\HttpFoundation\Response;
 +use App\Repository\TagRepository;
 +use App\Services\semantic\TagsGui;
 +
 +class TagsController extends Controller{
 +
 +    /**
 +     * @Route("/tags", name="tags")
 +     */
 +    public function index(TagsGui $gui,TagRepository $tagRepo){
 +    $tags=$tagRepo->findAll();
 +    $dt=$gui->dataTable($tags);
 +    return new Response($dt);
 +    }
 +} 
 +</sxh>
 +
 +
 +Amélioration de l'affichage des tags :
 +
 +<sxh php;title:src/Services/semantic/TagsGui.php>
 +namespace App\Services\semantic;
 +
 +use Ajax\php\symfony\JquerySemantic;
 +use Ajax\semantic\html\elements\HtmlLabel;
 +
 +class TagsGui extends JquerySemantic{
 + public function dataTable($tags){
 + $dt=$this->_semantic->dataTable("dtTags", "App\Entity\Tag", $tags);
 + $dt->setFields(["tag"]);
 + $dt->setCaptions(["Tag"]);
 + $dt->setValueFunction("tag", function($v,$tag){
 + $lbl=new HtmlLabel("",$tag->getTitle());
 + $lbl->setColor($tag->getColor());
 + return $lbl;
 + });
 + return $dt;
 + }
 +}
 +</sxh>
 +
 +{{:framework-web:symfony:td3:tags-2.png?|Tags}}
 +
 +==== Formulaire de modification ====
 +
 +Ajouter une méthode **frm** dans **TagsGui**
 +<sxh php;title:src/Services/semantic/TagsGui.php>
 + public function frm(Tag $tag){
 + $frm=$this->_semantic->dataForm("frm-tag", $tag);
 + return $frm;
 + }
 +</sxh>
 +
 +Créer la vue associée :
 +
 +<sxh html;title:templates/Tags/frm.html.twig>
 +{{ q["frm-tag"] | raw }}
 +{{ script_foot | raw }}
 +</sxh>
 +
 +Créer la route affichant le formulaire dans le contrôleur **Tags** :
 +
 +<sxh php;title:src/Controller/TagsController.php>
 +...
 +    /**
 +     * @Route("tag/update/{id}", name="tag_update")
 +     */
 +    public function update(Tag $tag,TagsGui $tagsGui){
 +    $tagsGui->frm($tag);
 +    return $tagsGui->renderView('Tags/frm.html.twig');
 +    }
 +</sxh>
 +
 +
 +Ajouter le bouton d'édition dans le composant dataTable des tags :
 +
 +<sxh php;title:src/Services/semantic/TagsGui.php;highlight:[12,13,14]>
 +...
 +class TagsGui extends JquerySemantic{
 + public function dataTable($tags){
 + $dt=$this->_semantic->dataTable("dtTags", "App\Entity\Tag", $tags);
 + $dt->setFields(["tag"]);
 + $dt->setCaptions(["Tag"]);
 + $dt->setValueFunction("tag", function($v,$tag){
 + $lbl=new HtmlLabel("",$tag->getTitle());
 + $lbl->setColor($tag->getColor());
 + return $lbl;
 + });
 + $dt->addEditButton();
 + $dt->setUrls(["edit"=>"tag/update"]);
 + $dt->setTargetSelector("#update-tag");
 + return $dt;
 + }
 +</sxh>
 +
 +Modifier la route **/tags** pour qu'elle sollicite une vue et puisse intégrer plus facilement des scripts côté client :
 +
 +<sxh php;title:src/Controller/TagsController.php>
 +...
 +    /**
 +     * @Route("/tags", name="tags")
 +     */
 +    public function tags(TagsGui $gui,TagRepository $tagRepo){
 +    $tags=$tagRepo->findAll();
 +    $gui->dataTable($tags);
 +    return $gui->renderView('Tags/index.html.twig');;
 +    }
 +    
 +</sxh>
 +
 +Ajouter la vue **templates/Tags/index.html.twig** : cette vue contient une zone HTML d'id **update-tag** dans laquelle sera affiché le formulaire de modification
 +
 +<sxh html;title:templates/Tags/index.html.twig>
 +<div id="update-tag"></div>
 +{{ q["dtTags"] | raw }}
 +{{ script_foot | raw }}
 +</sxh>
 +
 +
 +Implémenter la méthode **update** dans **TagRepository** :
 +<sxh php;title:src/Repository/TagRepository.php;highlight:[9,10,11,12]>
 +...
 +class TagRepository extends ServiceEntityRepository
 +{
 +    public function __construct(RegistryInterface $registry)
 +    {
 +        parent::__construct($registry, Tag::class);
 +    }
 +
 +    public function update(Tag $tag){
 +    $this->_em->persist($tag);
 +    $this->_em->flush();
 +    }
 +</sxh>
 +
 +Créer la route **tag/update** dans **TagsController** :
 +<sxh php;title:src/Controller/TagsController.php>
 +...
 +    /**
 +     * @Route("tag/submit", name="tag_submit")
 +     */
 +    public function submit(Request $request,TagRepository $tagRepo){
 +    $tag=$tagRepo->find($request->get("id"));
 +    if(isset($tag)){
 +    $tag->setTitle($request->get("title"));
 +    $tag->setColor($request->get("color"));
 +    $tagRepo->update($tag);
 +    }
 +    return $this->forward("App\Controller\TagsController::tags");
 +    }
 +</sxh>
 +
 +Améliorer le formulaire de modification des tags :
 +
 +<sxh php;title:src/Services/semantic/TagsGui.php>
 +...
 + public function frm(Tag $tag){
 + $colors=Color::getConstants();
 + $frm=$this->_semantic->dataForm("frm-tag", $tag);
 + $frm->setFields(["id","title","color","submit","cancel"]);
 + $frm->setCaptions(["","Title","Color","Valider","Annuler"]);
 + $frm->fieldAsHidden("id");
 + $frm->fieldAsInput("title",["rules"=>["empty","maxLength[30]"]]);
 + $frm->fieldAsDropDown("color",\array_combine($colors,$colors));
 + $frm->setValidationParams(["on"=>"blur","inline"=>true]);
 + $frm->onSuccess("$('#frm-tag').hide();");
 + $frm->fieldAsSubmit("submit","positive","tag/submit", "#dtTags",["ajax"=>["attr"=>"","jqueryDone"=>"replaceWith"]]);
 + $frm->fieldAsLink("cancel",["class"=>"ui button cancel"]);
 + $this->click(".cancel","$('#frm-tag').hide();");
 + $frm->addSeparatorAfter("color");
 + return $frm;
 + }
 +</sxh>
 +
 +{{:framework-web:symfony:td3:tags-frm-2.png?|Tags form}}
  
  • framework-web/symfony/td3.1519153051.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)