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
    Symfony Forms in Detail

    View full-size slide

  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

    View full-size slide

  3. @el_stoffel
    Web Summer Camp 2019
    Workshop Agenda
    Form Component
    Basic Glue Code
    Building a Form
    Extension Points
    Recap

    View full-size slide

  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

    View full-size slide

  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/

    View full-size slide

  6. @el_stoffel
    Web Summer Camp 2019
    $ bin/console --version
    Symfony 4.3.4 (env: dev, debug: true)

    View full-size slide

  7. @el_stoffel
    Web Summer Camp 2019
    Coding Challenges
    Defined goals
    Make tests green
    Rescue branches
    Merge branches to get new code and challenges

    View full-size slide

  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

    View full-size slide

  9. @el_stoffel
    Web Summer Camp 2019
    Form Component

    View full-size slide

  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

    View full-size slide

  11. @el_stoffel
    Web Summer Camp 2019
    "Make simple cases simple,
    make complex cases possible"
    Bernhard Schussek

    View full-size slide

  12. @el_stoffel
    Web Summer Camp 2019
    [email protected]
    Hello World
    Lorem ipsum …

    View full-size slide

  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

    View full-size slide

  14. @el_stoffel
    Web Summer Camp 2019
    Basic Glue Code

    View full-size slide

  15. @el_stoffel
    Web Summer Camp 2019
    Controller

    View full-size slide

  16. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

  17. @el_stoffel
    Web Summer Camp 2019
    FormType

    View full-size slide

  18. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

  19. @el_stoffel
    Web Summer Camp 2019
    Template

    View full-size slide

  20. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

  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
    ?

    View full-size slide

  22. @el_stoffel
    Web Summer Camp 2019
    Challenge 1 – Contact Form

    View full-size slide

  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

    View full-size slide

  24. @el_stoffel
    Web Summer Camp 2019
    $ git checkout contact/solution
    Got stuck?
    commit or stash your changes

    View full-size slide

  25. @el_stoffel
    Web Summer Camp 2019
    Building a Form

    View full-size slide

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

    Config
    FormBuilder

    View full-size slide

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

    Config
    FormBuilder

    View full-size slide

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

    Config
    FormBuilder
    Form

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  32. @el_stoffel
    Web Summer Camp 2019
    Extension Points

    View full-size slide

  33. @el_stoffel
    Web Summer Camp 2019
    FormType

    View full-size slide

  34. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. @el_stoffel
    Web Summer Camp 2019
    FormTypeExtension

    View full-size slide

  39. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

  40. @el_stoffel
    Web Summer Camp 2019
    FormTypeExtension
    manipulate existing form types
    implement extensions across multiple types

    View full-size slide

  41. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

  42. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

  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
    ?

    View full-size slide

  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

    View full-size slide

  45. @el_stoffel
    Web Summer Camp 2019
    Using FormTypes to
    configure behavior of
    Form handling

    View full-size slide

  46. @el_stoffel
    Web Summer Camp 2019
    [email protected]
    Hello World
    Lorem ipsum …

    View full-size slide

  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

    View full-size slide

  48. @el_stoffel
    Web Summer Camp 2019
    createForm
    handleRequest
    [email protected]
    Hello World
    Lorem ipsum …

    View full-size slide

  49. @el_stoffel
    Web Summer Camp 2019
    createForm
    handleRequest
    [email protected]
    'Hallo World'
    'This is a test'
    Hallo Welt
    This is a test

    View full-size slide

  50. @el_stoffel
    Web Summer Camp 2019
    createForm
    handleRequest
    [email protected]
    'Hallo World'
    'This is a test'
    setData
    submit
    Hallo Welt
    This is a test

    View full-size slide

  51. @el_stoffel
    Web Summer Camp 2019
    DataMapper

    View full-size slide

  52. @el_stoffel
    Web Summer Camp 2019
    Default Data Mapping

    View full-size slide

  53. @el_stoffel
    Web Summer Camp 2019
    Default Data Mapping

    View full-size slide

  54. @el_stoffel
    Web Summer Camp 2019
    PropertyPath Data Mapping

    View full-size slide

  55. @el_stoffel
    Web Summer Camp 2019
    PropertyPath Data Mapping

    View full-size slide

  56. @el_stoffel
    Web Summer Camp 2019
    And now?

    View full-size slide

  57. @el_stoffel
    Web Summer Camp 2019
    [email protected]
    Hello World
    Lorem ipsum …
    setData
    submit
    Data Mapper

    View full-size slide

  58. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

  59. @el_stoffel
    Web Summer Camp 2019
    DataMapper
    maps data between model and form
    registered in FormType
    often combined with empty_data option

    View full-size slide

  60. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

  61. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

  62. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  66. @el_stoffel
    Web Summer Camp 2019
    $ git checkout category/solution
    Got stuck?
    commit or stash your changes

    View full-size slide

  67. @el_stoffel
    Web Summer Camp 2019
    [email protected]
    Hello World
    Lorem ipsum …
    setData
    submit
    Data Mapper

    View full-size slide

  68. @el_stoffel
    Web Summer Camp 2019
    DataTransformer

    View full-size slide

  69. @el_stoffel
    Web Summer Camp 2019
    [email protected]
    Hello World
    Lorem ipsum …
    setData
    submit
    Data Transformer

    View full-size slide

  70. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

  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

    View full-size slide

  72. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

  73. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

  74. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  77. @el_stoffel
    Web Summer Camp 2019
    $ git checkout product/solution
    Got stuck?
    commit or stash your changes

    View full-size slide

  78. @el_stoffel
    Web Summer Camp 2019
    [email protected]
    Hello World
    Lorem ipsum …
    setData
    submit
    Data Transformer

    View full-size slide

  79. @el_stoffel
    Web Summer Camp 2019
    FormEvents

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  82. @el_stoffel
    Web Summer Camp 2019

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  86. @el_stoffel
    Web Summer Camp 2019
    Thank you! Questions?

    View full-size slide