9 juin 2024
Input Texte en multiple data avec Symfony
Dans cette formation, nous aborderons comment créer un input de type texte pour qu'il puisse intégrer “X” données et ainsi les insérer en base de données.
Le résultat sera comme l'image ci-dessus. Pour ça, créons un nouveau projet Symfony :
symfony new inputMultiple --version="7.0.*" --webapp
Avant de créer le formulaire et ainsi de gérer l'input en question, on va devoir créer une base de données et son entité qui comportera une table avec 1 colonne “mots” :
<?php
namespace AppEntity;
use AppRepositoryMotsRepository;
use DoctrineORMMapping as ORM;
#[ORMEntity(repositoryClass: MotsRepository::class)]
class Mots
{
#[ORMId]
#[ORMGeneratedValue]
#[ORMColumn]
private ?int $id = null;
#[ORMColumn(length: 100)]
private ?string $mots = null;
public function getId(): ?int
{
return $this->id;
}
public function getMots(): ?string
{
return $this->mots;
}
public function setMots(string $mots): static
{
$this->mots = $mots;
return $this;
}
}
Maintenant, que notre base de données, nous allons créer notre formulaire :
symfony console make:form
Rendons-nous sur notre formulaire puis ajoutons son type :
Créons un contrôleur pour afficher notre formulaire :
symfony console make:controller
Ajouter la création du formulaire et insérer le dans la vue twig :
class MainController extends AbstractController
{
#[Route('/', name: 'app_main')]
public function index(Request $request): Response
{
$form = $this->createForm(MotsType::class);
$form->handleRequest($request);
if($form->isSubmitted() && $form->isValid())
{
$listeMots = $form->get("mots")->getData();
dd($listeMots);
}
return $this->render('main/index.html.twig', [
'form'=>$form
]);
}
}
Vérifions que notre input fonctionne correctement en testant un envoi de formulaire :
On sait que notre input répond bien et nous retourne une chaîne de caractères.
Ajoutons les CDN à dans la partie <head></head> de notre base.html.twig :
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>
A partir de là, nous avons fait le plus gros du “travail”, il ne reste plus qu'à définir quel input sera ciblé et insérer les données en base de données.
Étape 1 : Vérifions le nom de notre input. Pour ça, clique droit sur l'input et inspecter :
Et prenons son "id" dans notre cas “mots_mots” puis rendez-vous dans “app.js” qui se trouve dans le dossier “asset”:
Étape 2 : Insérer le code JavaScript pour cibler notre input
new TomSelect('#mots_mots',{
persist: false,
createOnBlur: true,
create: true
});
On peut constater que notre input à changer de forme et peut maintenant contenir plusieurs mots ou phrases :
Si on envoie le formulaire, on peut voir que toutes nos entrées sont séparées par une virgule :
Étape 3 : Exploser la chaîne de caractères pour en faire un tableau et insérer le tout en base de données
Retournons sur notre contrôleur et rendons notre chaîne de caractères en tableau :
Toujours après avoir envoyé notre formulaire, on doit explode() notre chaîne de caractères, ça nous retournera un tableau des différentes valeurs entrées dans notre input.
if($form->isSubmitted() && $form->isValid())
{
$listeMots = $form->get("mots")->getData();
$listeMots = explode(',', $listeMots);
dd($listeMots);
}
Et pour terminer, il ne reste plus qu'à boucler sur la totalité du tableau tout en insérant les valeurs à chaque fois dans notre table SQL :
class MainController extends AbstractController
{
public function __construct(
readonly private EntityManagerInterface $entityManagerInterface,
)
{ }
#[Route('/', name: 'app_main')]
public function index(Request $request): Response
{
$form = $this->createForm(MotsType::class);
$form->handleRequest($request);
if($form->isSubmitted() && $form->isValid())
{
$listeMots = $form->get("mots")->getData();
$listeMots = explode(',', $listeMots);
for($i = 0; $i < count($listeMots); $i++){
$mots = new Mots();
$mots->setMots($listeMots[$i]);
$this->entityManagerInterface->persist($mots);
$this->entityManagerInterface->flush();
}
}
return $this->render('main/index.html.twig', [
'form'=>$form
]);
}
}
Et nous pouvons constater que dans notre table SQL Mots, nous avons nos trois (3) entrées :
J'espère que vous aurez appris des choses !
Mots clés:
php symfony input
Cours Du Dev
Recevez les dernières formations disponibles en vous inscrivant à la newsletter
Créé par arkunis