La première fois qu’on m’a présenté Ruby on Rails, j’ai été assez époustouflé. C’était le premier framework de programmation que j’ai appris et je dois dire que je suis un peu tombé amoureux. Je venais d’apprendre à construire des applications à l’aide de Sinatra et je pensais que c’était un outil assez génial, mais ensuite j’ai vu ce que Rails pouvait faire…
Une fonctionnalité principale de Rails que j’ai vraiment aimé utiliser était les From Helpers. Cela me permettait d’éviter d’écrire tout le HTML pour construire un formulaire, et en retour me donnait la possibilité de faire des fonctionnalités plus complexes. Dans cet article, je vais décomposer les différentes aides de formulaire fournies dans Rails et même aborder une nouvelle qui a été lancée dans la version Rails 5.1.
Créer des formulaires avec du HTML peut être une nuisance parfois, surtout quand ils sont extra longs avec beaucoup trop de champs de saisie. Ils peuvent devenir encore plus délicats lorsque vous avez besoin que le formulaire envoie des données à un endpoint ap spécifique ou qu’il soit associé à un modèle de base de données. Voici un formulaire html pour créer un utilisateur:
<form class="new_user" action="/users" method="post">
<label for="user_name">Name</label>
<input type="text" name="user">
<br>
<label for="user_password">Password</label>
<input type="password" name="user">
<br>
<input type="submit" name="commit" value="Create User" data-disable-with="Create User">
</form>
Comme vous pouvez le voir, écrire tout cela peut devenir complexe assez rapidement. Si vous regardez attentivement le formulaire, vous pouvez voir que nous passons un attribut action et méthode à notre formulaire pour créer un nouvel utilisateur. C’est très bien, mais Rails est très pointilleux lorsqu’il s’agit de soumettre des formulaires. Ce formulaire particulier n’a pas pu être soumis. C’est là que les aides de formulaire viennent à la rescousse.
Aides de formulaire
Lorsque j’ai appris à utiliser les aides de formulaire pour la première fois, je ne pouvais honnêtement pas croire ce qu’elles faisaient. Comme vous l’avez vu dans le formulaire précédent que nous avons fait, il faut un certain temps et une certaine complexité pour le réaliser. Cependant, avec les aides de formulaire, cela peut être réalisé avec beaucoup moins de travail et avec pas mal de « magie ».
Il y a trois aides différentes qui nous aident à construire des formulaires rapides et utiles dans Rails, form_tag, form_for, et form_with. La dernière, form_with, a été introduite dans la version de Rails 5.1 et combine essentiellement les deux premières aides.
form_tag
La form_tag est la plus basique des aides et fait à son tour moins de « magie » pour vous. Il construira toujours le formulaire pour vous mais vous devrez être plus explicite lors de la déclaration des chemins d’url et est principalement utilisé lorsque le formulaire n’est pas attaché à un Controller#action. Utilisons un formulaire de recherche basique comme exemple:
<%= form_tag("/search", method: "get") do %>
<%= label_tag(:q, "Search for:") %>
<%= text_field_tag(:q) %>
<%= submit_tag("Search") %>
<% end %>
Cela va générer le HTML suivant:
<form accept-charset="UTF-8" action="/search" method="get">
<input name="utf8" type="hidden" value="✓" />
<label for="q">Search for:</label>
<input name="q" type="text" />
<input name="commit" type="submit" value="Search" />
</form>
Comme vous pouvez le voir, nous déclarons la route que nous voulons que les paramètres du formulaire soient passés dans le form_tag. Vous pouvez voir que cela a lieu dans la ligne <%= form_tag("/search", method: "get") do %> et vous pouvez également voir que nous spécifions la requête http. C’est encore assez impressionnant et vous pouvez voir que Rails prend soin de beaucoup de choses pour nous même dans l’aide de formulaire de base, mais Rails a une version plus puissante de ceci…
form_for
Form_for est la vraie affaire. Cet helper nous permet de lier un formulaire à un objet, ce qui nous permet de créer/modifier un objet. Comme nous l’avons vu dans l’exemple form_tag, nous devions être explicites dans le chemin url à utiliser pour soumettre les paramètres du formulaire mais form_for nous permet d’abstraire cela. Voici un exemple:
<%= form_for @user do |f| %> <%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.submit %><% end %>
Cela produira le même code que nous avons vu dans notre premier exemple de formulaire html.
<form class="new_user" action="/users" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token"
value="QPJXa5iS/XNvodHhpcwV5q42RoGFWsmZkwL3ATHFfeKqxZ8IQsLs1QjJvcrdO3BwCaOfQ4TxNLDD0b6VbxiACg=="> <label for="user_name">Name</label>
<input type="text" name="user">
<br>
<label for="user_password">Password</label>
<input type="password" name="user">
<br>
<input type="submit" name="commit" value="Create User" data-disable-with="Create User"></form>
Vous pouvez voir immédiatement à quel point ce code semble plus propre en utilisant form_for. Honnêtement, c’est un peu hallucinant qu’un si petit code puisse créer tout ce html mais c’est vraiment le cas ! Vous pouvez voir dans la première ligne de form_for que nous passons une variable d’instance de l’utilisateur qui attachera ce formulaire à cet objet. L’autre chose cool à propos du passage de cette variable est que Rails va chercher le chemin d’url approprié sur son on, par rapport au form_tag où il fallait lui dire explicitement où envoyer les données.
form_with
- Peut être parler de form_with et de son utilisation
- Utiliser des extraits de code par exemple
Si vous regardez les Ruby on Rails 5.1 Release Notes, il y a une note que form_for et form_tag s’unifient en form_with. Le plus grand avantage avec cette nouvelle aide est form_withpeut générer des balises de formulaire basées sur des URL, des scopes ou des modèles
Vérifions-le !
form_with using URLs
Reprenons le même exemple que nous avons utilisé dans form_for et appliquons-le avec form_withen utilisant juste une URL :
<%= form_with url: user_path do |f| %>
<%= f.label :first_name %>
<%= f.text_field :first_name %>
<%= f.label :last_name %>
<%= f.text_field :last_name %>
<%= f.submit %>
<% end %>
Comme vous pouvez le voir, c’est très similaire au form_tag où nous spécifions une URL spécifique (user_path)
form_with using models
La chose vraiment cool à propos de form_with est qu’il peut également être utilisé pour passer dans des objets de modèle, similaire à form_for.
<%= form_with model: @user do |f| %>
<%= f.label :first_name %>
<%= f.text_field :first_name %>
<%= f.label :last_name %>
<%= f.text_field :last_name %>
<%= f.submit %>
<% end %>
Cela créera le même HTML que celui produit par l’utilisation de form_for.
Notre plus grand avantage de form_with est que nous n’avons plus à nous soucier de décider entre form_tag et form_for. Nous avons une aide astucieuse qui nous permet de faire l’un ou l’autre travail avec juste un commutateur dans la première ligne du formulaire déclaré.
Conclusion
Les aides de formulaire Rails sont impressionnantes et le nouvel ajout de form_with rassemble vraiment tous les avantages de form_tag et form_for. Vous disposez maintenant d’un outil qui vous permettra de construire un formulaire en fonction de vos besoins. Qu’il s’agisse d’un formulaire de recherche ou d’un formulaire pour persister les données dans votre base de données, vous pouvez vous en occuper avec les aides de formulaire Rails.
Je suggérerais également de parcourir les guides Rails pour apprendre à faire des formulaires plus complexes. Vous avez pas mal d’options, de permettre à un modèle d’accepter des attributs imbriqués, d’avoir des attributs imbriqués et d’autres aides de formulaire pour créer des champs de saisie personnalisés. Il y a tellement de choses avec lesquelles jouer en parcourant ces docs alors profitez-en !
Happy Coding !
.