Symfony Forms at Meetup Symfony Uruguay

Repaso del Form Component en la meetup de Symfony Uruguay del 28 de Octubre de 2015

Transcript

1. Forms!
2. Ismael Ambrosi @iambrosi Frontend Developer en VividCortex Co-organizador meetup PHPmvd Co-organizador meetup Symfony (Fanático de PHP) ¿Quién Soy?
3. Symfony Component
4. Permite crear, procesar y reutilizar formularios HTML “The Form component allows you to easily create, process and reuse HTML forms.”
5. aunque…
6. Se enfoca principalmente en procesar los datos que van y vienen del cliente.
7. Form
8. Form • Tienen un nombre • Tiene un tipo • Tienen datos • Se pueden anidar
9. Form Todo es un Form
10. Form
11. Formatos de datos
12. Formatos de datos • Formato del modelo (model format) • Formato de la vista (view format) • Formato normalizado (normalized format)
13. Formatos de datos Model format Formato que existe en nuestro modelo. Ej: Tal cual querémos que sea persistido por nuestro ORM
14. Formatos de datos View format Tal cual va a ser mostrado al usuario en los elementos de nuestra vista. Ej: Un objeto DateTime se transforma en un array("year" => 2013, "month" => 10, "day" => 12)
15. Formatos de datos Normalized format Formato intermedio entre la vista y el modelo. Se recomienda que este formato guarde cuanta información sea posible.
16. Formatos de datos Al crear el formulario Normalized data View data Model data
17. Formatos de datos Al crear el formulario Normalized data View data Model data
18. Formatos de datos Submit Normalized data View data Model data
19. Formatos de datos Submit Normalized data View data Model data $_POST new User()
20. Construcción
21. Construir un formulario $form = $this->createFormBuilder()
 ->add('name', 'text')
 ->add('email', 'email')
 ->add('password', 'password')
 ->getForm();
22. Construir un formulario $form = $this->createFormBuilder()
 ->add('name', 'text')
 ->add('email', 'email')
 ->add('password', 'password')
 ->getForm(); Campos Nombre Tipo
23. Exportar el formulario al template return $this->render('default/index.html.twig', [
 'form' => $form->createView(),
 ]);
24. Form Types
25. Form Types • Describen el formulario • Existen solamente una vez en la aplicación • Implementan Symfony\Component\Form\FormTypeInterface • Se pueden heredar • Pueden ser servicios • Symfony incorpora muchos types built-in
26. Form Types namespace AppBundle\Form;
 
 use AppBundle\Entity\User;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\OptionsResolver\OptionsResolver;
 
 class UserType extends AbstractType
 {
 public function buildForm(FormBuilderInterface $builder, array $options)
 {
 $builder->add('name', 'text');
 $builder->add('email', 'email');
 $builder->add('password', 'password');
 }
 
 public function configureOptions(OptionsResolver $resolver)
 {
 $resolver->setDefault('data_class', User::class);
 }
 
 public function getName()
 {
 return 'user';
 }
 }
27. Types built-in Text fields text textarea email integer money number password percent search url Choice fields choice entity country language locale timezone currency Date & Time date datetime time birthday Other fields checkbox radio file Group fields collection repeated Hidden fields hidden Button fields button submit reset
28. Renderizado
29. Renderizado public function indexAction(Request $request)
 {
 $form = $this->createForm(new UserType(), null, [
 'method' => 'POST', // default: POST, PUT, DELETE, PATCH
 'action' => '/post'
 ]);
 
 return $this->render('default/index.html.twig', [
 'form' => $form->createView(),
 ]);
 } Creamos la vista del formulario para enviarla al template
30. Renderizado {{ form_start(form) }}
 {{ form_widget(form) }}
 <button type="submit">Submit</button>
 {{ form_end(form) }} Utilizando las funciones helper de Symfony
31. Renderizado
32. Renderizado <form action="/post" method="post"> {{ form_widget(form) }} <button type="submit">Submit</button> </form> Mostrando el formulario dentro de un tag form
33. Renderizado <form action="/post" method="post"> {{ form_row(form.name) }} {{ form_row(form.email) }} {{ form_row(form.password) }} {{ form_rest(form) }} <button type="submit">Submit</button> </form> Mostrando cada elemento del formulario
34. Renderizado <form action="/post" method="post"> {{ form_row(form.name) }} {{ form_row(form.email) }} {{ form_row(form.password) }} {{ form_rest(form) }} <button type="submit">Submit</button> </form> Mostrando cada elemento del formulario Muestra los elementos restantes
35. Submit
36. Submit ¿Qué pasa internamente?
37. Submit Submit Recepción de datos del Request
38. Submit Submit Bind Formulario procesa el Request
39. Submit Validación Submit Bind Cada campo es procesado por el componente de validación y se asigna el error en caso de haberlo
40. Submit Validación Mensaje de error Status 400 Submit Bind Error Envío de respuesta de error si el formulario no es válido
41. Submit Validación Éxito Mensaje de error Status 400 Persistencia del modelo Mensaje de éxito Status 2xx Submit Bind Error Respuesta de éxito si el formulario es válido
42. Submit ¿Código?
43. Submit public function postAction(Request $request)
 {
 $form = $this->createForm(new UserType(), $data, $options);
 
 $form->handleRequest($request);
 if (!$form->isValid()) {
 throw new BadRequestHttpException('Invalid form');
 }
 
 // Persistencia de datos
 
 return new Response('Success');
 }
44. Submit public function postAction(Request $request)
 {
 $form = $this->createForm(new UserType(), $data, $options);
 
 $form->handleRequest($request);
 if (!$form->isValid()) {
 throw new BadRequestHttpException('Invalid form');
 }
 
 // Persistencia de datos
 
 return new Response('Success');
 } bind success error submit validación
45. Submit public function postAction(Request $request)
 {
 $form = $this->createForm(new UserType(), $data, $options);
 
 $form->handleRequest($request);
 if (!$form->isValid()) {
 $this->render('default:index.html.twig', [
 'form' => $form->createView(),
 ]);
 }
 
 $manager = $this->getDoctrine()->getManager();
 $manager->persist($form->getData());
 $manager->flush();
 
 return $this->redirectToRoute('homepage');
 }
46. Submit public function postAction(Request $request)
 {
 $form = $this->createForm(new UserType(), $data, $options);
 
 $form->handleRequest($request);
 if (!$form->isValid()) {
 $this->render('default:index.html.twig', [
 'form' => $form->createView(),
 ]);
 }
 
 $manager = $this->getDoctrine()->getManager();
 $manager->persist($form->getData());
 $manager->flush();
 
 return $this->redirectToRoute('homepage');
 } crea la instancia de User Retorna la entidad
47. Eventos
48. Eventos • Permiten construir el formulario basandose en los datos • Permiten construir el formulario basandose en el estado de la aplicación • Permiten configurar el modelo en base a los datos recibidos
49. Eventos Eventos lanzados por el EventDispatcher • PRE_SET_DATA (form.pre_set_data) • POST_SET_DATA (form.post_set_data) • PRE_SUBMIT (form.pre_bind) • SUBMIT (form.bind) • POST_SUBMIT (form.post_bind)
50. Eventos • Permite modificar los datos asignados al formulario desde nuestro modelo. • Permite modificar el formulario en base a los datos del modelo • Permite modificar el formulario en base al estado de mi aplicación PRE_SET_DATA
51. Eventos PRE_SUBMIT Nos permite acceder y modificar los datos tal cual fueron enviados por el navegador en el submit.
52. Eventos Nos permite modificar los datos en su estado normalizado. SUBMIT
53. Eventos POST_SUBMIT Nos permite acceder a los datos de la vista y modificar los datos que ya fueron asignados al modelo.
54. Eventos Al crear el formulario Normalized data View data Model data PRE_SET_DATA POST_SET_DATA
55. Eventos Submit Normalized data View data Model data POST_SUBMIT PRE_SUBMIT SUBMIT
56. Resumen
57. Resumen 1.Creamos el formulario basado en un tipo 2.Creamos la vista para ese formulario 3.Mostramos el template Vista
58. Resumen •Creamos el formulario basado en un tipo •Enlazamos el $request •Validamos • Error • Mostramos el formulario indicando errores • Retornamos STATUS 400 • Éxito • Persistimos entidades • Mensaje de éxito (Ej: Redirección a un listado) Submit
59. ¿Puedo usar el componente en mi API?
61. API if ('application/json' === $request->getContentType()) {
 $payload = $request->getContent();
 $data = json_decode($payload, true); 
 $request->request->add($data);
 } Pre-proceso de request JSON
62. API public function postAction(Request $request)
 {
 $form = $this->createForm(new UserType(), $data, $options);
 
 $form->handleRequest($request);
 if (!$form->isValid()) {
 throw new BadRequestHttpException('Invalid form');
 }
 
 // Persistencia de datos
 
 return new Response('Success');
 }
63. API public function postAction(Request $request)
 {
 $form = $this->createForm(new UserType(), $data, $options);
 
 $form->handleRequest($request);
 if (!$form->isValid()) {
 throw new BadRequestHttpException('Invalid form');
 }
 
 // Persistencia de datos
 
 return new Response('Success');
 } Atención a la respuesta de la acción
64. ¿Puedo usar el componente fuera del Framework?
66. Composer!!! composer require symfony/form:~2.7
67. FormFactory use Symfony\Component\Form\Forms;
 
 $formFactory = Forms::createFormFactory(); $form = $formFactory->create(new UserType());
68. Formularios + validación use Symfony\Component\Form\Extension\Validator\ValidatorExtension;
 use Symfony\Component\Form\Forms;
 use Symfony\Component\Validator\Validation;
 
 // Instancia de Validator
 $validator = Validation::createValidator();
 
 $formFactory = Forms::createFormFactoryBuilder()
 // Agregamos la extensión
 ->addExtension(new ValidatorExtension($validator))
 ->getFormFactory();
69. ¿Preguntas?
70. ¡Gracias!