Projet d’été en Symfony

Dans le cadre de votre formation, je vais vous demander de réaliser un petit projet web

« FullStack » en Symfony :

-

Front-end avec html, css, javascript, twig et bootstrap/tailwind

Back-end avec le framework Symfony (PHP)

Base de données avec MySQL

Ce projet va vous demander de mettre en pratique vos connaissances acquissent durant les

cours de votre formation en tant que Web Développeurs.

Il sera demandé de bien respecter les bonnes pratiques (indentation, nom de variable

cohérent, nom des tables en base de données, nom des entités en rapport avec le nom de leur

Controller etc.). Je veux aussi que votre site soit multi langue (2 min). Il faut le français d’office.

Durant les « vacances d’été » vous pourrez bien entendu toujours demander de l’aide si

quelque chose ne va pas, je resterai à disposition durant cette période aux heures ouvrable

bien entendu.

Basez-vous sur toutes les étapes qu’on a vu aux cours (+ vich + paginator + barre de recherche

+ deploiement).

Bonne chance à tous.

Projet Vidéo Center

Je vais vous demander de créer un site web avec des Vidéos mise en ligne un peu comme

YouTube. Durant le cours nous avons créé des Recettes, c’est un peu le même principe.

Les utilisateurs connectés sur le site pourront avoir accès à toutes les vidéos, chaque vidéo

sera relié à un utilisateur, ils pourront lire, créer, éditer et supprimer une vidéo (CRUD).

Les utilisateurs non connectés eux pourront juste regarder une vidéo (attention pas toutes les

vidéos). En gros il y aura un système de vidéo premium accessible que par les utilisateurs

connectés et vérifiés.

Partie 1 :

Vous allez tout d’abord dans votre dossier « C:/cfitech » et vous créerez votre projet là-

dedans, il s’appellera « projet_video_center_prenom ».

Vous allez créer une Base de Données « video_center_prenom_db » avec Symfony.

Je veux une Entité au nom de « Video.php » avec ces propriétés dans un premier temps :

-

title, string, 50, no null

videoLink, string,500, no null

descritpion, text, no null

createdAt, datetime, no null (configuré comme on l’a fait dans tutosymfony)

uptdatedAt, datetime, no null(configuré comme on l’a fait dans tutosymfony)

Ici le champ « videoLink » reprendra un lien YouTube en chaine de caractères. Je veux aussi

qu’en base de données quand vous ferez la migration, que la table ait bien le nom

« videos ».

Un Controller au nom de « VideoController.php » et dans celui-ci je veux retrouver ces

fonctions :

-

La page d’accueil (« / », « app_home ») nous donnera la liste des vidéos.

La page création video (« /video/create », « app_video_create ») nous permettra de

créer une vidéo.

-

La page détails vidéo (« /video/id », « app_video_show ») nous permettra de voir la

vidéo dans une page avec ses détails quand on cliquera sur le titre.

La page éditer video (« /video/id/edit », « app_video_edit ») nous permettra

d’éditer une vidéo existante.

La méthode pour supprimer une vidéo (« /video/id/delete », « app_video_delete »)

nous permettra de supprimer une vidéo existante en base de données.

Basez vous sur ce qu’on a fait pour les recettes.

Bien entendu il vous faudra des Templates appropriés :

-

index (avec la liste des vidéos en Base de données)

create

edit

show(avec bouton éditer, supprimer et retour qui nous renvoie vers l’index)

Dans index

-

On doit voir le titre limité à 20 caractères à l’affichage, en cliquant dessus un lien

amène vers la page show qui montrera le titre complétement.

Les vidéos s’afficheront en 300x200

-

La description limitée à 25 caractères à l’affichage (si on veut voir la description

complète, on doit cliquer sur le titre, pour qu’il nous renvoie vers la page show)

Et voir depuis combien de temps elle a été mise en ligne.

-

Dans show

-

On verra le titre, la vidéo en 640x480, la description, la date de publication.

Dans create

-

On aura un formulaire de création avec un titre, une description et un champ vidéo

(pour mettre le lien YouTube)

Dans edit, on aura les mêmes données que dans create.

Exemple de lien YouTube (il faut remplacer watch?v= par embed/. Vérifier si la vidéo

s’affiche avec le lien embed dans votre navigateur, si YouTube refuse ça ne marchera pas) :

src="https://www.youtube.com/embed/lcZDWo6hiuI"> </iframe>

Dans index je veux width = "300 " et height= "200 " et dans show je veux width= "640" et

height="480 ".

Il faudra aussi un Formulaire « VideoType.php » qui aura juste :

-

title (je veux qu’on voit en français titre)

videoLink(je rappelle que c’est le lien de la vidéo qu’on aura, en français lien vidéo )

description

Vous pouvez aussi récupérer une barre de navigation Bootstrap(navbar) et un footer

Bootstrap que vous modifierez. Pour les formulaires je les veux tous dans le même format

bien centré avec les boutons. Vous pouvez utiliser votre propre CSS si vous voulez.

Vous pouvez implémenter bien entendu Bootstrap/Tailwind dans votre projet (que ce soit

pour la forme des formulaires, la barre de navigation, les messages flash etc.).

Pour un titre on ne peut pas avoir moins de 3 lettres, je veux un message d’erreur

personnalisé. Description, pas moins de 20 lettres. Bien entendu pas de champs vide pour

les deux. Je ne veux pas pouvoir écrire « shit » dans titre. Ni « callypige » dans description.

Partie 2 :

Création de l’Entité « User.php », l’email sera notre identifiant et le mot de passe bien

entendu encrypté. En base de données je veux comme nom de table « users ».

Une fois créé comme on l’a vu dans le cours, je veux que vous rajoutiez ces attributs :

-

firstname, string, 50, no null

lastname, string, 50, no null

createdAt, datetime, no null(même config que pour Video.php)

updatedAt, datetime, no null(même config que pour Video.php)

Je veux aussi une relation entre l’entité User et l’entité Video :

-

Un utilisateur peut avoir 0 à plusieurs vidéos

Une vidéo est liée qu’à un seul utilisateur

Ça va rajouter un champ dans chaque entité. Je veux que quand on est sur la page d’accueil

et sur la page show, on voit le prénom et nom de l’utilisateur qui a publié une vidéo.

Il faudra aussi créer l’authentification (la partie login/logout).

Bien entendu pour la barre de navigation je veux qu’en fonction de si vous êtes connecté et

vérifiés, on voit Create video et Logout. Si vous êtes connecté mais pas vérifié vous ne verrez

que Logout. Si vous n’êtes pas connecté on doit voir Register et Login. Dans la page Login, je

veux un « Mot de passe oublié ? » qui renverra vers la bonne page plus tard et un « Pas

encore enregistré ? Crée un compte » qui renverra vers la page d’inscription que vous

devrez faire aussi.

Partie 3 :

Il faudra aussi une page avec formulaire d’inscription (Register) qui nous demandera notre

prénom, nom, email et mot de passe. Tous les champs doivent afficher un message si on

n’écrit rien. Nom et prénom 2 caractères minimum, email 5 minimum et format email. Avec

message en français.

Je veux aussi le même système de vérification des utilisateurs avec mailtrap comme on a fait

pour le projet Recette, je veux un lien actif pendant 5 heures. Donc bien entendu ça va

rajouter un nouveau champ dans votre entité User(isVerified). Chaque personne qui s’inscrit

devra confirmer son adresse mail. Il faudra aussi la possibilité de pouvoir changer son

password en utilisant « mot de passe oublié ?» comme on l’a fait durant le cours, avec

mailtrap. Attention je veux tout en Français. Les messages, les mails etc. Utilisez le même

lien pour recevoir les emails de RecetteVie et de Vidéo Center.

J’avais dit que je voulais un système de vidéo réservé aux utilisateurs enregistré

(premiumVideo). Ce champ devra être dans l’entité Video :

-

premiumVideo, boolean, no null

Vous aurez compris, ce sera à l’utilisateur, quand il crée une vidéo, de décider si ce champ

est vrai ou faux (Vidéo Premium). A vous de voir ou il faudra le mettre. Si le champ est à vrai,

seul les utilisateurs connectés et vérifiés pourront voir la vidéo, si c’est faux tout le monde

même les non connectés pourront voir la vidéo. Bien entendu un utilisateur peut modifier

par après s’il souhaite changer le statut de sa vidéo(éditer).

Partie 4 :

Je vous demanderai aussi d’implémenter la pagination comme on l’a fait durant le cours. Je

vous impose 9 vidéos par pages. Je veux bien entendu une pagination propre avec du

Bootstrap de ce style ci et centré :

Implémenter une barre de recherche dans la page d’accueil qui cherchera sur le titre et la

description d’une vidéo. Il y aura bien entendu une pagination, et je vous impose 6 vidéos

par page. Essayer de faire en sorte qu’ils disent en dessous de votre barre de recherche

combien de vidéo il a trouvé lors de la recherche :

Je voudrais aussi une page de Profile pour laquelle on aura un onglet attribué comme on l’a

fait. Dans profile, l’utilisateur pourra voir ses informations (Email, Prénom, Nom et date de

création). Un utilisateur connecté bien entendu pourra modifier uniquement son nom,

image de profile et prénom.

Implémenter ensuite le composant vich pour pouvoir avoir une photo de profil. Faites

comme nous l’avons fait dans le cours. Je veux aussi que quand un utilisateur s’enregistre il

reçoit une photo de profil par default. Bien entendu on pourra modifier sa photo de profil

quand on est connecté.

Dans la page de profile je veux voir toutes les vidéos que l’utilisateur à créer/poster.

Il faut que les vidéos soient les unes à côtés des autres, allez voir les illustrations en

dernières pages.

A la fin de votre projet, il faudra le déployer sur ALWAYSDATA. J’insiste fortement !!!

Partie 5 :

Voici quelques petites consignes/contraintes :

-

N’hésitez pas à faire des commit pour votre GitHub

Je veux que tout le site soit traduit en 2 langues (dont le Français), que ce soit les

messages, les onglets, les mails, les formulaires etc…

-

Ne changez pas le nom des variables que j’ai donné.

Je veux au moins 4 utilisateurs dont 1 non vérifié

Je veux minimum 20 vidéos, dont 8 non premium réparti parmi les 3 utilisateurs

vérifiés.

-

Faites en sorte qu’on ait aucune faille via les urls

Quand je suis connecté je ne peux pas aller sur la page Register et Login

Quand je ne suis pas connecté/ou pas vérifié, je ne peux ni créer ni éditer de vidéo.

Quand je suis connecté pas vérifié, je peux accéder et modifier ma page de profile.

Faites en sorte que quand vous vous enregistrez ça vous retourne vers la page de

Login

-

Quand vous vous loguez ça vous retourne vers la page de profile avec la liste des

vidéos que la personne a créée s’il y en a.

Rajoutez messages flash pour la création(vert), modification(vert),

enregistrement(vert), confirmation mail(bleu), message de bienvenu quand on se

connecte avec le prénom de l’utilisateur(bleu), changer le message invalid credentials

quand on met un mauvais mail ou mot de passe pour se loguer(rouge).

Ajouter un message avec Javascript si on veut vraiment supprimer une vidéo.

Faire un trait Timestampable avec les éléments de createdAt et updatedAt.

Seul l’utilisateur connecté ayant créé une vidéo peut voir le bouton éditer et

supprimer dans show.

-

Quand je suis connecté avec un utilisateur, je ne peux modifier/supprimer que les

vidéos lui appartenant.

Si je ne suis pas connecté ou un utilisateur non vérifié, faites en sorte qu’on ne puisse

pas accéder via l’URL aux pages des vidéos premium.

Pour la recherche de vidéo, seuls les utilisateurs connectés, pourront voir la barre de

recherche mais attention les non vérifiés ne doivent pas voir les vidéos premium

dans le résultat de leurs recherches.

-

Rajouter l’image de l’utilisateur à coté du nom des utilisateurs.

Vous pouvez rajouter du CSS/HTML/JavaScript à votre guise.

Quelques visuelles :

Quand je ne suis pas connecté ou pas vérifié, on ne voit pas les vidéos premium :

Quand je suis connecté et vérifié, accès au vidéo premium ainsi qu’à la barre de recherche :

On voit aussi la pagination étant donné que c’est 9 vidéos par page.

Voici un aperçu de comment un utilisateur définit s’il veut rendre sa vidéo premium :

Ici on voit que si je suis connecté avec un utilisateur différent de celui qui a créé la vidéo, je

ne peux que la regarder et retourner en arrière, pareil que si on n’est pas connecté :

Le site est bien responsive :

Si j’essaye de taper l’url d’une vidéo premium alors que je ne suis pas connecté :

Si j’essaye de taper l’url d’une vidéo premium alors que je suis connecté mais pas vérifié :

On voit bien dans profil qu’on a tous les vidéos postés par l’utilisateur connecté :

Quand on est connecté, on a une barre de recherche fonctionnelle :

Voilà vous avez assez d’information pour pouvoir réaliser ce projet durant vos vacances.

Basez-vous sur mon cours et vos notes pour réaliser toutes les étapes demandées.

N’hésitez pas à me consulter si vous avez de gros problèmes, je reste à disposition tous les

jours de la semaine (il faut me prévenir à l’avance).

Une fois le projet totalement terminé, vous m’enverrez le lien de votre site sur alwaysdata

et de votre GitHub. Pour ce qui est de la base de données, vous la mettrez à la racine du

projet sur GitHub. Il sera à remettre au plus tard pour le 30 Aout 23h59.

Présentation le lundi 31 Aout.

Bon courage/travail à tous et je vous souhaite de très bonnes vacances