feat(guestbook): Add a guestbook ^^ to compare form handling

Author: damienalexandre

assets/styles/app.css

@@ -102,7 +102,9 @@ input, textarea {
 .btn--secondary {
     @apply bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded;
 }
-
+textarea, input[type=text], input[type=email], input[type=search] {
+    @apply border-2 hover:bg-gray-100 text-gray-800 py-2 px-4 rounded;
+}
 h1 {
     @apply text-5xl;
 }

src/Controller/GuestbookController.php

@@ -0,0 +1,48 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Controller;
+
+use App\Form\GuestbookType;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class GuestbookController extends AbstractController
+{
+    #[Route('/guestbook', methods: ['POST', 'GET'])]
+    public function index(Request $request): Response
+    {
+        $symfonyWayForm = $this->container->get('form.factory')->createNamed('sf_guestbook', GuestbookType::class);
+        $symfonyWayForm->handleRequest($request);
+        if ($symfonyWayForm->isSubmitted() && $symfonyWayForm->isValid()) {
+            // Save
+            return $this->redirectToRoute('app_guestbook_success');
+        }
+
+        $htmxWayForm = $this->container->get('form.factory')->createNamed('htmx_guestbook', GuestbookType::class);
+        $htmxWayForm->handleRequest($request);
+        if ($htmxWayForm->isSubmitted() && $htmxWayForm->isValid()) {
+            // Save
+            $response = $this->render('guestbook/success.html.twig');
+
+            // Not mandatory, only to be compliant with the "old way".
+            $response->headers->set('HX-Push-Url', $this->generateUrl('app_guestbook_success'));
+
+            return $response;
+        }
+
+        return $this->render('guestbook/index.html.twig', [
+            'symfonyWayForm' => $symfonyWayForm,
+            'htmxWayForm' => $htmxWayForm,
+        ]);
+    }
+
+    #[Route('/guestbook/success', methods: ['POST', 'GET'])]
+    public function success(Request $request): Response
+    {
+        return $this->render('guestbook/success.html.twig');
+    }
+}

src/Form/GuestbookType.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Form;
+
+use App\Entity\Message;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\EmailType;
+use Symfony\Component\Form\Extension\Core\Type\SubmitType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints\Email;
+use Symfony\Component\Validator\Constraints\NotBlank;
+
+class GuestbookType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('content', TextAreaType::class, [
+                'label' => 'Your message',
+                'constraints' => [
+                    new NotBlank(),
+                ]
+            ])
+            ->add('email', EmailType::class, [
+                'label' => 'Email',
+                'constraints' => [
+                    new NotBlank(),
+                    new Email()
+                ]
+            ])
+            ->add('submit', SubmitType::class, [
+                'label' => 'Send',
+            ])
+        ;
+    }
+}

tailwind.config.js

@@ -3,6 +3,7 @@ module.exports = {
   content: [
     "./assets/**/*.js",
     "./templates/**/*.html.twig",
+    "./vendor/symfony/twig-bridge/Resources/views/Form/tailwind_2_layout.html.twig"
   ],
   theme: {
     extend: {},

templates/base.html.twig

@@ -46,6 +46,11 @@
                             Emoji Search
                         </a>
                     </li>
+                    <li>
+                        <a href="{{ path('app_guestbook_index') }}" class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
+                            Guestbook
+                        </a>
+                    </li>
                     {% if app.user %}
                         <li>
                             <a href="{{ path('app_logout') }}" class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">

templates/guestbook/index.html.twig

@@ -0,0 +1,46 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Guestbook{% endblock %}
+
+{% form_theme symfonyWayForm 'tailwind_2_layout.html.twig' %}
+{% form_theme htmxWayForm 'tailwind_2_layout.html.twig' %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <meta name="htmx-config" content='{
+        "responseHandling":[
+            {"code":"422", "swap": true},
+            {"code":"[45]..", "swap": false, "error":true},
+            {"code":"...", "swap": true}
+        ]
+    }' />
+{% endblock %}
+
+{% block body %}
+    <div class="grid grid-cols-2 gap-6">
+        <div>
+            <h2>Symfony Way</h2>
+
+            <form action="{{ path('app_guestbook_index') }}" method="post" class="mt-5" novalidate>
+                {{ form_row(symfonyWayForm.content) }}
+                {{ form_row(symfonyWayForm.email) }}
+
+                {{ form_row(symfonyWayForm.submit, {'attr': {'class': 'btn'}}) }}
+
+                {{ form_rest(symfonyWayForm) }}
+            </form>
+        </div>
+        <div>
+            <h2>HTMX</h2>
+
+            <form hx-boost="true" action="{{ path('app_guestbook_index') }}" method="post" class="mt-5" novalidate>
+                {{ form_row(htmxWayForm.content) }}
+                {{ form_row(htmxWayForm.email) }}
+
+                {{ form_row(htmxWayForm.submit, {'attr': {'class': 'btn'}}) }}
+
+                {{ form_rest(htmxWayForm) }}
+            </form>
+        </div>
+    </div>
+{% endblock %}

templates/guestbook/success.html.twig

@@ -0,0 +1,9 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Guestbook success{% endblock %}
+
+{% block body %}
+    <p class="text-7xl">
+        Thank you! 🤗 🥰
+    </p>
+{% endblock %}

templates/spa/messages/message.html.twig

@@ -1,5 +1,7 @@
 {% extends 'base.html.twig' %}
 
+{% form_theme form 'tailwind_2_layout.html.twig' %}
+
 {% block body %}
     {{ form_start(form, {'attr': {
         'hx-post': path('app_spa_message'),