AlpineJS

Partie 1/3 - Développer un formulaire CRUD avec AlpineJS et API Platform

Cet article est la première partie d'une série :

Lors d'un projet Bolt CMS, nous avons mis en œuvre un formulaire de modification de ses données personnelles dans un annuaire. L’individu disposait d’informations dont les champs (nom, prénom, téléphone, email, adresse, profession ...) et le but était de pouvoir modifier, ajouter ou supprimer ses informations personnelles.

Nous nous sommes basés sur ce modèle de données pour notre formulaire :

 

Lorsqu’on parle de modèle de données, trois principaux termes sont importants: entité, attribut et relation.

Concernant les relations, elles se font sur du OneToMany pour une personne:

  • Une personne possède un ou plusieurs emails (1,N) et plusieurs emails sont possédés par une personne (N,1).
  • Une personne possède un ou plusieurs téléphones (1,N) et plusieurs téléphones sont possédés par une personne (N,1).
  • Une personne possède une ou plusieurs professions (1,N) et plusieurs professions sont possédées par une personne (N,1).
  • Une personne possède une ou plusieurs adresses (1,N) et plusieurs adresses sont possédées par une personne (N,1).

Voici un code d’exemple d’une entité accompagné de ses attributs (get + setters inclus) et d’une relation avec une autre entité nommé Person:

   

// src/Entity/Profession.php

<?php 
namespace App\Entity; 
use App\Repository\ProfessionRepository;
use Doctrine\ORM\Mapping as ORM;

/**
 * @ORM\Entity(repositoryClass=ProfessionRepository::class)
 * @ORM\HasLifecycleCallbacks
 */

class Profession{       
    /**
     * @ORM\Id
     * @ORM\GeneratedValue
     * @ORM\Column(type="integer")
     */
    private $id; 
    /** @ORM\Column(type="string", length=255) */
    private $description; 
    /**
     * @ORM\ManyToOne(targetEntity=Person::class, inversedBy="professions")
     * @ORM\JoinColumn(nullable=false)
     */
    private $person; 
     
    public function getId(): ?int
    {
        return $this->id;
    } 
    public function getDescription(): ?string
    {
        return $this->description;
    } 
    public function setDescription(string $description): self
    {
        $this->description = $description; 
        return $this;
    } 
    public function getPerson(): ?Person
    {
        return $this->person;
    } 
    public function setPerson(?Person $person): self
    {
        $this->person = $person; 
        return $this;
    }
} 
  
   

Nous allons voir dans une deuxième partie, qu'est-ce que API Platform ? Et comment l'a-t-on utilisé dans notre projet Bolt CMS pour le formulaire ?

Lire la suite :  Partie 2/3 - Installation et configuration d'API Platform