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.

0bee6a2886272e60be8888ae48baf42d?s=128

Christopher Hertel

August 30, 2019
Tweet

Transcript

  1. @el_stoffel Web Summer Camp 2019 Symfony Forms in Detail

  2. @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
  3. @el_stoffel Web Summer Camp 2019 Workshop Agenda Form Component Basic

    Glue Code Building a Form Extension Points Recap
  4. @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
  5. @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/
  6. @el_stoffel Web Summer Camp 2019 $ bin/console --version Symfony 4.3.4

    (env: dev, debug: true)
  7. @el_stoffel Web Summer Camp 2019 Coding Challenges Defined goals Make

    tests green Rescue branches Merge branches to get new code and challenges
  8. @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
  9. @el_stoffel Web Summer Camp 2019 Form Component

  10. @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
  11. @el_stoffel Web Summer Camp 2019 "Make simple cases simple, make

    complex cases possible" Bernhard Schussek
  12. @el_stoffel Web Summer Camp 2019 chris@sensio.de Hello World Lorem ipsum

  13. @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
  14. @el_stoffel Web Summer Camp 2019 Basic Glue Code

  15. @el_stoffel Web Summer Camp 2019 Controller

  16. @el_stoffel Web Summer Camp 2019

  17. @el_stoffel Web Summer Camp 2019 FormType

  18. @el_stoffel Web Summer Camp 2019

  19. @el_stoffel Web Summer Camp 2019 Template

  20. @el_stoffel Web Summer Camp 2019

  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 ?
  22. @el_stoffel Web Summer Camp 2019 Challenge 1 – Contact Form

  23. @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
  24. @el_stoffel Web Summer Camp 2019 $ git checkout contact/solution Got

    stuck? commit or stash your changes
  25. @el_stoffel Web Summer Camp 2019 Building a Form

  26. @el_stoffel Web Summer Camp 2019 Controller Incoming HTTP Request FormFactory

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

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

    FormType buildForm(…) FormRegistry Core Extension Doctrine Extension DI Extension … Config FormBuilder Form
  29. @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
  30. @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
  31. @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
  32. @el_stoffel Web Summer Camp 2019 Extension Points

  33. @el_stoffel Web Summer Camp 2019 FormType

  34. @el_stoffel Web Summer Camp 2019

  35. @el_stoffel Web Summer Camp 2019 FormType describes structure has options

  36. @el_stoffel Web Summer Camp 2019 FormType describes structure has options

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

    inheritance possible extensible changes behavior
  38. @el_stoffel Web Summer Camp 2019 FormTypeExtension

  39. @el_stoffel Web Summer Camp 2019

  40. @el_stoffel Web Summer Camp 2019 FormTypeExtension manipulate existing form types

    implement extensions across multiple types
  41. @el_stoffel Web Summer Camp 2019

  42. @el_stoffel Web Summer Camp 2019

  43. @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 ?
  44. @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
  45. @el_stoffel Web Summer Camp 2019 Using FormTypes to configure behavior

    of Form handling
  46. @el_stoffel Web Summer Camp 2019 chris@sensio.de Hello World Lorem ipsum

  47. @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
  48. @el_stoffel Web Summer Camp 2019 createForm handleRequest chris@sensio.de Hello World

    Lorem ipsum …
  49. @el_stoffel Web Summer Camp 2019 createForm handleRequest chris@sensio.de 'Hallo World'

    'This is a test' Hallo Welt This is a test
  50. @el_stoffel Web Summer Camp 2019 createForm handleRequest chris@sensio.de 'Hallo World'

    'This is a test' setData submit Hallo Welt This is a test
  51. @el_stoffel Web Summer Camp 2019 DataMapper

  52. @el_stoffel Web Summer Camp 2019 Default Data Mapping

  53. @el_stoffel Web Summer Camp 2019 Default Data Mapping

  54. @el_stoffel Web Summer Camp 2019 PropertyPath Data Mapping

  55. @el_stoffel Web Summer Camp 2019 PropertyPath Data Mapping

  56. @el_stoffel Web Summer Camp 2019 And now?

  57. @el_stoffel Web Summer Camp 2019 chris@sensio.de Hello World Lorem ipsum

    … setData submit Data Mapper
  58. @el_stoffel Web Summer Camp 2019

  59. @el_stoffel Web Summer Camp 2019 DataMapper maps data between model

    and form registered in FormType often combined with empty_data option
  60. @el_stoffel Web Summer Camp 2019

  61. @el_stoffel Web Summer Camp 2019

  62. @el_stoffel Web Summer Camp 2019

  63. @el_stoffel Web Summer Camp 2019 Challenge 2 – Category Form

  64. @el_stoffel Web Summer Camp 2019 $ git merge category/01-base $

    bin/console doctrine:schema:update --force Challenge 2 – Category Form
  65. @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
  66. @el_stoffel Web Summer Camp 2019 $ git checkout category/solution Got

    stuck? commit or stash your changes
  67. @el_stoffel Web Summer Camp 2019 chris@sensio.de Hello World Lorem ipsum

    … setData submit Data Mapper
  68. @el_stoffel Web Summer Camp 2019 DataTransformer

  69. @el_stoffel Web Summer Camp 2019 chris@sensio.de Hello World Lorem ipsum

    … setData submit Data Transformer
  70. @el_stoffel Web Summer Camp 2019

  71. @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
  72. @el_stoffel Web Summer Camp 2019

  73. @el_stoffel Web Summer Camp 2019

  74. @el_stoffel Web Summer Camp 2019

  75. @el_stoffel Web Summer Camp 2019 Challenge 3 – Product Form

  76. @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
  77. @el_stoffel Web Summer Camp 2019 $ git checkout product/solution Got

    stuck? commit or stash your changes
  78. @el_stoffel Web Summer Camp 2019 chris@sensio.de Hello World Lorem ipsum

    … setData submit Data Transformer
  79. @el_stoffel Web Summer Camp 2019 FormEvents

  80. @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
  81. @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
  82. @el_stoffel Web Summer Camp 2019

  83. @el_stoffel Web Summer Camp 2019 More Advanced Extension Points FormTypeGuesserInterface

    FormExtensionInterface . . .
  84. @el_stoffel Web Summer Camp 2019 Recap: Extending Forms

  85. @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
  86. @el_stoffel Web Summer Camp 2019 Thank you! Questions?