Skip to content
Snippets Groups Projects
Forked from EBABIL HAKAN / TP1
10 commits behind the upstream repository.

Travaux pratiques - 1

L'objectif du TP est de réécrire l'application todo list en suivant le paradigme MVC.

Fonctionnalitées attendues

  • Login (email / mot de passe) : récupère et vérifie dans la table des users une occurence qui correspond au couple. Si tout est bon on le redirige vers la page de listing des tâches.
  • Logout : déconnecte l'utilisateur et retourne sur la page de login.
  • Formulaire d'ajout d'une tâche: titre / description / personne assignée (optionnel) et date d'échéance. Modale ou fenêtre à part, libre à vous de choisir la solution la plus ergonomique.
  • Liste et détail des tâches: sur deux colonnes: à gauche une liste des tâches. On pourra imaginer qu'on affiche uniquement le titre avec un lien vers le détail de la tâche.
  • Le détail de la tâche s'affiche dans le panneau de droite. On y trouver un formulaire pour ajouter un commentaire sur cette tâche (un textarea). On pourra aussi y mettre un "toggle" pour spécifier si la tâche a été réalisée ou non.

Fonctionnalités Bonus

  • Filtrage des tâches dans le pannel de gauche par "utilisateur assigné" et par "traité ou non"
  • Utilisation de composant Javascript Rich Text Editor pour les description des todos et des commentaires. Utilisations de composant datetime picker pour les selecteurs de date.

Indications

Pour réaliser le TP Il faudra utiliser le framework Symfony et le moteur de template Twig. La persistance se fera avec l'ORM Doctrine. Nous utiliserons également la dernière version de Bootstrap pour notre vue. Dans l'idéal, vous effectuez au moins une requête en AJAX (XMLHTTPRequest). Vous récupérez vos dépendances avec composer et npm.

Dans votre composer.json, n'oubliez pas de spécifier les noms des deux auteurs si vous faites le projet en groupe (ce que je vous conseille de faire).

Docker

Docker va me permettre de tester plus facilement vos applications. Soit vous utilisez le Dockerfile et le docker-compose fourni, soit vous en fournissez un qui sera correctement configuré. Si le docker-compose up ne fonctionne pas, je ne testerais pas. (Et donc forcément une partie de la notation du projet s'en ressentira).

Pour utiliser Docker, copiez les fichiers vhost.cong, docker-compose.yml, Dockerfile et le répertoire init-database à la racine de votre projet. Puis tapez dans la CLI :

docker-compose up

Vous devriez accéder à votre site en tappant dans votre navigateur http://localhost:8001

Votre base de données sera accessible sur le port 8002. Voici les information de connexion:

MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: todos
MYSQL_USER: todos-user
MYSQL_PASSWORD: todos-pwd

N'oubliez pas de modifier votre fichier de configuration de symfony .env à la racine de votre projet en modifiant la variable DATABASE_URL :

DATABASE_URL=mysql://todos-user:todos-pwd@mysql:3306/todos

Hints

  • Pour créer votre projet, vous pouvez utiliser la ligne de commande
symfony new --full todos
  • Pour créer vos modèles, vous pouvez suivre la documentation qui se trouve là : https://symfony.com/doc/current/doctrine.html
  • Vous devriez / pourriez retrouver les propriétés suivantes dans les entités:
    • Todo, une propriété "author" (Many to one), une propiété "assignee" (Many to one), et une propriété "comments" (One to Many)
    • Comments, une propriété "todo" (Many to One)
    • User : "createdTodos" (One to Many) et "assignedTodos" (One to Many)
  • Vous avez la possibilité de ne pas mapper les propriétés que vous n'utilisez pas.
  • Les routes de symfony se trouvent dans le répertoire config/routes.yaml
home:
        path: /
        controller: App\Controller\TodoListController::index
  • Au niveau du contrôleur, pour afficher un template vous devez utiliser la fonction "render" comme suit :
        return $this->render('login.twig', [
            'email' => $email,
            'error' => $error,
        ]);