Symfony Forms in Detail

Slide 1

Slide 1 text

@el_stoffel Web Summer Camp 2019 Symfony Forms in Detail

Slide 2

Slide 2 text

@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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

@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

Slide 5

Slide 5 text

@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/

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

@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

Slide 9

Slide 9 text

@el_stoffel Web Summer Camp 2019 Form Component

Slide 10

Slide 10 text

@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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

@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

Slide 14

Slide 14 text

@el_stoffel Web Summer Camp 2019 Basic Glue Code

Slide 15

Slide 15 text

@el_stoffel Web Summer Camp 2019 Controller

Slide 16

Slide 16 text

@el_stoffel Web Summer Camp 2019

Slide 17

Slide 17 text

@el_stoffel Web Summer Camp 2019 FormType

Slide 18

Slide 18 text

@el_stoffel Web Summer Camp 2019

Slide 19

Slide 19 text

@el_stoffel Web Summer Camp 2019 Template

Slide 20

Slide 20 text

@el_stoffel Web Summer Camp 2019

Slide 21

Slide 21 text

@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 ?

Slide 22

Slide 22 text

@el_stoffel Web Summer Camp 2019 Challenge 1 – Contact Form

Slide 23

Slide 23 text

@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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

@el_stoffel Web Summer Camp 2019 Building a Form

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

@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

Slide 30

Slide 30 text

@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

Slide 31

Slide 31 text

Slide 32

Slide 32 text

@el_stoffel Web Summer Camp 2019 Extension Points

Slide 33

Slide 33 text

@el_stoffel Web Summer Camp 2019 FormType

Slide 34

Slide 34 text

@el_stoffel Web Summer Camp 2019

Slide 35

Slide 35 text

@el_stoffel Web Summer Camp 2019 FormType describes structure has options

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

@el_stoffel Web Summer Camp 2019 FormTypeExtension

Slide 39

Slide 39 text

@el_stoffel Web Summer Camp 2019

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

@el_stoffel Web Summer Camp 2019

Slide 42

Slide 42 text

@el_stoffel Web Summer Camp 2019

Slide 43

Slide 43 text

@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 ?

Slide 44

Slide 44 text

@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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

@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

Slide 51

Slide 51 text

@el_stoffel Web Summer Camp 2019 DataMapper

Slide 52

Slide 52 text

@el_stoffel Web Summer Camp 2019 Default Data Mapping

Slide 53

Slide 53 text

@el_stoffel Web Summer Camp 2019 Default Data Mapping

Slide 54

Slide 54 text

@el_stoffel Web Summer Camp 2019 PropertyPath Data Mapping

Slide 55

Slide 55 text

@el_stoffel Web Summer Camp 2019 PropertyPath Data Mapping

Slide 56

Slide 56 text

@el_stoffel Web Summer Camp 2019 And now?

Slide 57

Slide 57 text

@el_stoffel Web Summer Camp 2019 chris@sensio.de Hello World Lorem ipsum … setData submit Data Mapper

Slide 58

Slide 58 text

@el_stoffel Web Summer Camp 2019

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

@el_stoffel Web Summer Camp 2019

Slide 61

Slide 61 text

@el_stoffel Web Summer Camp 2019

Slide 62

Slide 62 text

@el_stoffel Web Summer Camp 2019

Slide 63

Slide 63 text

@el_stoffel Web Summer Camp 2019 Challenge 2 – Category Form

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

@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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

@el_stoffel Web Summer Camp 2019 chris@sensio.de Hello World Lorem ipsum … setData submit Data Mapper

Slide 68

Slide 68 text

@el_stoffel Web Summer Camp 2019 DataTransformer

Slide 69

Slide 69 text

@el_stoffel Web Summer Camp 2019 chris@sensio.de Hello World Lorem ipsum … setData submit Data Transformer

Slide 70

Slide 70 text

@el_stoffel Web Summer Camp 2019

Slide 71

Slide 71 text

@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

Slide 72

Slide 72 text

@el_stoffel Web Summer Camp 2019

Slide 73

Slide 73 text

@el_stoffel Web Summer Camp 2019

Slide 74

Slide 74 text

@el_stoffel Web Summer Camp 2019

Slide 75

Slide 75 text

@el_stoffel Web Summer Camp 2019 Challenge 3 – Product Form

Slide 76

Slide 76 text

@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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

@el_stoffel Web Summer Camp 2019 chris@sensio.de Hello World Lorem ipsum … setData submit Data Transformer

Slide 79

Slide 79 text

@el_stoffel Web Summer Camp 2019 FormEvents

Slide 80

Slide 80 text

@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

Slide 81

Slide 81 text

@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

Slide 82

Slide 82 text

@el_stoffel Web Summer Camp 2019

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

@el_stoffel Web Summer Camp 2019 Recap: Extending Forms

Slide 85

Slide 85 text

@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

Slide 86

Slide 86 text

@el_stoffel Web Summer Camp 2019 Thank you! Questions?