How to insert multiple datas in one column of table in mysql database with Symfony

Viewed 34

How to insert multiple datas in one column of table in mysql database. It could be one, two, three... I am asking to my users what languages they want to learn. I am building a web site with Symfony and I created register form.

Here some example :

I want to insert data from different input fields : 1st language, 2nd language, 3rd language... (this could be infinite).

+------------------+------------------+----------------+
|   1st language   |   2nd language   |  3rd language  |
+------------------+------------------+----------------+
|     French       |      Italian     |     German     |
+------------------+------------------+----------------+

I want to insert data like this.

+-----------------------------+
|        wish to learn        |
+-----------------------------+
| French, Italian and German  |
+-----------------------------+

If the user only wants to learn two languages :

+------------------+------------------+
|   1st language   |   2nd language   |
+------------------+------------------+
|     Spanish      |      Chinese     |
+------------------+------------------+

I want to insert data like this.

+-----------------------------+
|        wish to learn        |
+-----------------------------+
|     Spanish and Chinese     |
+-----------------------------+

In the form, I created a select input that can be created several times (endlessly) with JavaScript code. At the moment, my form only sends only one language from the last input created content to mysql database.

register.html.twig

{% extends 'base.html.twig' %}

{% block title %}Incris-toi !{% endblock %}

{% block main %}

{{ form_start(userform) }}

    <div class="form container">

        <div class="formpage">
            <div class="optional mb-3">
                <p>Quelle langue souhaites-tu pratiquer ?</p>
                <div class="wishedlanguagelist">
                    {{ form_widget(userform.wishedlanguages, {'attr' : {'class' : 'form-control mb-3'}}) }}
                </div>
                <div class="d-flex justify-content-between">
                    <button type="button" class="question-button btn btn-outline-secondary" id="addwishedlanguage">+ Ajouter une langue</button>
                    <button type="button" class="question-button btn btn-outline-secondary" id="removewishedlanguage">- Supprimer la dernière langue</button>
                </div>
            </div>
            <div class="d-flex">
                <button type="button" class="prev btn btn-lg btn-outline-secondary mt-4 d-flex align-items-center me-auto">&lt;<span class="previous">Précédent</span></button>
                {{ form_row(userform.save, {'attr' : {'class' : 'btn btn-lg btn-outline-primary'}}) }}
            </div>
        </div>

    </div>

{{ form_end(userform) }}

{% endblock %}

{% block js %}

<script src="../assets/js/scripts.js"></script>

{% endblock %}   

scripts.js

idcounter = 1;
id = "user_wishedlanguages" + idcounter;

document.getElementById("addwishedlanguage").onclick = function() {
    console.log(idcounter)
    const wishedlanguageselect = document.getElementById("user_wishedlanguages");
    const newwishedlanguageselect = wishedlanguageselect.cloneNode(true);
    newwishedlanguageselect.id = id;
    document.querySelector('.wishedlanguagelist').appendChild(newwishedlanguageselect);
    document.getElementById("removewishedlanguage").style.display = "initial";
    idcounter++
}

document.getElementById("removewishedlanguage").onclick = function() {
    console.log(idcounter)
    idcounter--
    document.getElementById(id).remove();
    if(idcounter === 1) {
        document.getElementById("removewishedlanguage").style.display = "none";
    }
}

UserType.php

<?php

namespace App\Form;

use App\Entity\User;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\CallbackTransformer;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\LanguageType;

class UserType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('wishedlanguages', LanguageType::class, [
                'placeholder' => 'Je choisis une langue étrangère',
            ])
            ->add('save', SubmitType::class, [
                'label' => 'Je valide',
            ])
            ;
        ;
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'data_class' => User::class,
            'translation_domain' => 'forms'
        ]);
    }
}

Entity/User.php

<?php

namespace App\Entity;

use App\Repository\UserRepository;
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface;
use Symfony\Component\Security\Core\User\UserInterface;

#[ORM\Entity(repositoryClass: UserRepository::class)]
class User implements UserInterface, PasswordAuthenticatedUserInterface
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(length: 255, nullable: true)]
    private ?string $wishedlanguages = null;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getWishedlanguages(): ?string
    {
        return $this->wishedlanguages;
    }

    public function setWishedlanguages(?string $wishedlanguages): self
    {
        $this->wishedlanguages = $wishedlanguages;

        return $this;
    }

}

0 Answers
Related