Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Symfony Forms in Detail

Symfony Forms in Detail

Workshop at Web Summer Camp 2019

Forms are a important element on various websites and come in different variations. A simple form is easily set up with Symfony's Form Component, but what about complex scenarios? We will have a look at the architecture of the component, which extension points are helpful and which features might even be implemented without the component.

Christopher Hertel

August 30, 2019
Tweet

More Decks by Christopher Hertel

Other Decks in Programming

Transcript

  1. @el_stoffel Web Summer Camp 2019 Christopher Hertel Consultant & Trainer

    @ SensioLabs Symfony Certified Developer Symfony User Group Berlin Christian Flothmann Software Developer @ SensioLabs Symfony Core & Docs Member
  2. @el_stoffel Web Summer Camp 2019 Workshop Agenda Form Component Basic

    Glue Code Building a Form Extension Points Recap
  3. @el_stoffel Web Summer Camp 2019 Basics Times Workshop 9.30 –

    12.30 coffee break 10.50 – 11.10 Repository: //github.com/chr-hertel/product-crud
  4. @el_stoffel Web Summer Camp 2019 Getting Started $ cd /var/www/html/symfony/forms

    $ git pull $ composer install $ symfony serve -d Open in browser: //localhost:8000/
  5. @el_stoffel Web Summer Camp 2019 Coding Challenges Defined goals Make

    tests green Rescue branches Merge branches to get new code and challenges
  6. @el_stoffel Web Summer Camp 2019 $ bin/check Code Quality Helper

    Yaml, Twig and PHP linting Code style and static code analysis PHPUnit testsuite Composer and schema validation
  7. @el_stoffel Web Summer Camp 2019 Form DependencyInjection Validator HttpKernel Console

    Security HttpFoundation Routing Intl Serializer Messenger Config Mime 56325 40958 32511 26474 24935 24466 23711 18558 17970 16729 16267 12665 12416 Largest Symfony Component Source: symfony/symfony:master on 08/20/19
  8. @el_stoffel Web Summer Camp 2019 "Make simple cases simple, make

    complex cases possible" Bernhard Schussek
  9. @el_stoffel Web Summer Camp 2019 Foundation OptionsResolver Component Form Component

    Core Validation DI CSRF Doctrine Twig PHP Templating Extensions View Source: http://webmozarts.com/2012/03/06/symfony2-form-architecture/ EventDispatcher Component PropertyAccess Component
  10. @el_stoffel Web Summer Camp 2019 Controller Handles Request Creates Form

    Triggers Processing Creates Response Template Renders Form Additional Markup FormType Describes Structure Configures Options ?
  11. @el_stoffel Web Summer Camp 2019 $ git merge contact/01-base Challenge

    1 – Contact Form Implement App\Contact\Dto Implement App\Controller\ContactController::contact implement template templates/contact.html.twig Implement App\Form\ContactType See Challenges.md
  12. @el_stoffel Web Summer Camp 2019 Controller Incoming HTTP Request FormFactory

    FormType buildForm(…) FormRegistry Core Extension Doctrine Extension DI Extension … Config FormBuilder
  13. @el_stoffel Web Summer Camp 2019 Controller Incoming HTTP Request FormFactory

    FormType buildForm(…) FormRegistry Core Extension Doctrine Extension DI Extension … Config FormBuilder
  14. @el_stoffel Web Summer Camp 2019 Controller Incoming HTTP Request FormFactory

    FormType buildForm(…) FormRegistry Core Extension Doctrine Extension DI Extension … Config FormBuilder Form
  15. @el_stoffel Web Summer Camp 2019 Controller Incoming HTTP Request FormFactory

    FormType buildForm(…) FormRegistry Core Extension Doctrine Extension DI Extension … Config FormBuilder Form handleRequest(…) submit(…) Request Handler Data
  16. @el_stoffel Web Summer Camp 2019 Controller Incoming HTTP Request FormFactory

    FormType buildForm(…) FormRegistry Core Extension Doctrine Extension DI Extension … FormBuilder Form handleRequest(…) submit(…) Request Handler Data // … Config
  17. @el_stoffel Web Summer Camp 2019 Controller Incoming HTTP Request FormFactory

    FormType buildForm(…) FormRegistry Core Extension Doctrine Extension DI Extension … FormBuilder Form handleRequest(…) submit(…) Request Handler Data // … buildView(…) finishView(…) Config createView() FormView
  18. @el_stoffel Web Summer Camp 2019 FormType describes structure has options

    inheritance possible extensible changes behavior
  19. @el_stoffel Web Summer Camp 2019 FormType describes structure has options

    inheritance possible extensible changes behavior
  20. @el_stoffel Web Summer Camp 2019 Controller Handles Request Creates Form

    Triggers Processing Creates Response Template Renders Form Additional Markup FormType Describes Structure Configures Options ?
  21. @el_stoffel Web Summer Camp 2019 Controller Handles Request Creates Form

    Triggers Processing Creates Response Template Renders Form Additional Markup FormType Describes Structure Configures Options Configures Behavior
  22. @el_stoffel Web Summer Camp 2019 Controller Incoming HTTP Request FormFactory

    FormType buildForm(…) FormRegistry Core Extension Doctrine Extension DI Extension … FormBuilder Form handleRequest(…) submit(…) Request Handler Data // … buildView(…) finishView(…) Config createView() FormView
  23. @el_stoffel Web Summer Camp 2019 createForm handleRequest [email protected] 'Hallo World'

    'This is a test' setData submit Hallo Welt This is a test
  24. @el_stoffel Web Summer Camp 2019 DataMapper maps data between model

    and form registered in FormType often combined with empty_data option
  25. @el_stoffel Web Summer Camp 2019 $ git merge category/01-base $

    bin/console doctrine:schema:update --force Challenge 2 – Category Form
  26. @el_stoffel Web Summer Camp 2019 $ git merge category/01-base $

    bin/console doctrine:schema:update --force Challenge 2 – Category Form Implement App\Form\CategoryType Catch CategoryException and convert to FormError See Challenges.md
  27. @el_stoffel Web Summer Camp 2019 DataTransformer converts data between representations

    registered in FormType model data to normalized data normalized data to model data view data to normalized data normalized data to view data ModelTransformer ViewTransformer
  28. @el_stoffel Web Summer Camp 2019 $ git merge product/01-base Challenge

    3 – Product Form Implement App\Form\SkuType using DataTransformer Implement App\Form\ProductType using DataMapper See Challenges.md
  29. @el_stoffel Web Summer Camp 2019 Form::setData Form::submit FormEvents::PRE_SET_DATA FormEvents::POST_SET_DATA FormEvents::PRE_SUBMIT

    FormEvents::POST_SUBMIT Transformer Model -> Normalized Normalized -> View Mapper mapDataToForms Transformer View -> Normalized Normalized -> Model Mapper mapFormsToData FormEvents::SUBMIT
  30. @el_stoffel Web Summer Camp 2019 FormEvents interact with Form or

    data dynamically registered in FormType PRE_SET_DATA POST_SET_DATA PRE_SUBMIT SUBMIT Form::setData Form::submit POST_SUBMIT
  31. @el_stoffel Web Summer Camp 2019 Recap: Extending Forms FormType is

    starting point to configure Form and FormView FormTypeExtension to extend given or multiple FormTypes Transformer to transform data between Model and View Mapper to control where data is coming and going FormEvents to manipulate Form and data dynamically