TP DEVELOPPEUR WEB

Session de rattrapage de la partie back-end du titre en candidat libre

Commencer

Présentation

Titre profesionnel Developpeur(se) web et web mobile

Développer la partie back-end d'une application web ou web mobile en intégrant les recommandations de sécurité

Conclusion

Avenir du projet

Merci

Réalisations

Amorçage

Index

Présentation

J’avais envie pour ce projet de m’inspirer de sites web comme " senscritique.com " mais avec un panel de contenu personnalisé, qui reprend mes préférences en ce qui concerne les films et les séries. L' objectif étant de donner des idées de films et séries à regarder et d'en faire découvrir. Les utilisateurs de cette application peuvent consulter un catalogue de films et de séries, rechercher un film à partir de son titre, avoir accès à leurs fiche d’informations et laisser des commentaires si ils le souhaitent, à condition qu’ils aient crée un compte.

Présentation du projet

Watched

Étapes de conception du projet

Déploiement

Développement de l'application

Recherche de documentation

Analyse du besoin

Idée de l'application

• Users Stories

• Conception de la BDD

Amorçage du projet

D'en savoir davantage sur le film

Afficher la page des films

Retrouver un film à partir de son nom

Pouvoir rechercher des films

Gérer les données du site

Avoir accès à la base de données

Pouvoir voir si le film peut me plaire

Voir les commentaires des autres utilisateurs

D'avoir accès à plus de fonctionnalités

Pouvoir créer un compte

Faire connaître mon avis à la communauté

Pouvoir écrire des commentaires

Avoir un espace pour les admins

Ajouter du contenu, l'éditer et le supprimer

Gérer le site internet

Pouvoir créer un profil avec un rôle admin

Utilisateur

Admin

Afin de

Je veux

En tant que

Définition:Les Users Stories permettent de définir les besoins des utilisateurs de l'application selon leurs rôles.

Users Stories

Après avoir déterminé ce dont on avait besoin de retrouver dans l'application grâce aux Users Stories, on peut envisager la conception de la base de données de celle-ci.La conception d’une base de données passe, dans un premier temps, par sa modélisation. Les modèles de données consistent à représenter sous forme graphique les informations qui devront apparaître dans la base de données de notre application, ce qui permet de visualier la conception de celle-ci.

Conception de la base de données

Modèle Conceptuel de Données

Modèle Logique de Données

• Structure de l'application
• Les outils utilisés
• Le code

Réalisations du projet

Structure de l'application

La base de données

Les outils utilisés

ROUTES

MODÈLE

CONTRÔLEUR

BASE DE DONNÉES

VUE

URL

Modèle - Vue - Contrôleur

Le projet Watched est conçu à l'aide du framework Laravel, qui utilise le modèle MVC.Le principe modèle-vue-contrôleur est d'utliser un patron de conception qui permet d'organiser le code. Il met l'accent sur la séparation entre le front (Vue) et le back (Modèle et Contrôleur).Le modèle permet de se connecter à la base de données et gère la logique du code. la vue génère le html et permet l’affichage de la page web. Le contrôleur permet de récupérer et gérer les données envoyées par la vue et le modèle et valider les données entrées par un utilisateur.

Concrètement, Laravel est un framework PHP multi-plateforme, qui utilise l’architecture MVC et est développé en programmation orientée objet, permettant de créer des applications web. Son installation est basée sur le gestionnaire de paquets Composer.- Il se décrit comme un framework progressif, ce qui signifie qu’il inclut une variété de fonctionnalités que les utilisateurs de tous niveaux trouveront utiles. - Il dispose d’un formidable écosystème soutenu par une vaste communauté de développeurs. Étant l’un des frameworks PHP les plus utilisés, la bibliothèque d’applications et de paquets (package en anglais) pour Laravel disponibles est importante. Pour cette application j’ai utilisé les paquets Voyager pour l’interface administrateur et Livewire pour le système de recherche et de filtre. - Il offre un certaine sécurité. Par exemple, lorqu’on crée un formulaire, Laravel génère automatiquement des tokens qui empêchent les attaques CSRF. - Il intègre de nombreuses autres fonctionnalités dont plusieurs proviennent de frameworks connus. Elles permettent de gagner du temps et de concevoir facilement et rapidement une application web optimisée (ex : "php artisan make:auth " permet de créer rapidement un système d’authentification complet).

Laravel

Définition:Le versioning (versionnage en français) est une méthode de gestion des versions d’un même produit (logiciel, base de données…). Il consiste à travailler directement sur le code source du projet, en gardant toutes les versions précédentes. Les outils du versioning aident les développeurs à travailler parallèlement sur différentes parties du projet et à revenir facilement aux étapes précédentes de leur travail en cas de besoin.

La gestion de version

Modèle

Extrait de code

Page admin (désactivée)

navbar.blade.php

Vue

Extrait de code

CommentController.php

MainController.php

Contrôleur

Extrait de code

Sous Laravel, les routes sont codés dans le fichier "web.php"

Les routes

Extrait de code

Livewire

Extrait de code

Rendu visuel de l'application

Rendu visuel de l'application

Rendu visuel de l'application

Rendu visuel de l'application

Rendu visuel de l'application

Fonctionnalités que je vais rajouter :

• Ajouter régulièrement des films et séries à la liste existente.
• Permettre à l’utilisateur d’éditer et de supprimer les commentaires qu’il a posté.
• En plus de la recherche d’une œuvre par son titre et le tri des films par sa catégorie, ajouter un système de filtre par la première lettre du titre de l’œuvre.
• Créer un espace membres pour que les utilisateurs inscrits sur le site web puissent avoir un profil personnel, conserver un historique des films et séries consultées et personnaliser leur compte, ajouter un avatar par exemple, qui apparaîtrait à côté de leurs pseudonymes si ils écrivent un commentaire.
• Aouter à la base de données du projet, des tables pour ajouter des noms d’acteurs et de réalisateurs, permettant de faire une recherche à partir de ces informations.
• Modifier la bdd afin de pouvoir assigner plusieurs catégories à une œuvre.
• Sur la page d’information sur le film et la série, ajouter éventuellement un lien vers la plateforme de streaming ou VOD où on peut le ou la visionner.
• Ajouter une table et une page intitulée Watchlist, qui permettra à l’utilisateur, à l’aide d’un système de favoris, d’ajouter sur cette page les films et séries qu’il l’intéresse et qu’il souhaite voir. - Incorporer un système de notation, voire une page Top, comme sur l’application anime-ranking, pour chaque catalogues, pour connaître les préférences des utilisateurs.
• Enfin, je vais probablement ajouter les tables animes, dessins animés et documentaires pour élargir le panel de contenus trouvable sur le site.

Avenir du projet

J'ai véritablement aimé travailler sur ce projet.Il m’a permise d’apprendre à m’autoformer et m’organiser, de mieux comprendre des concepts que je n’avais pas correctement assimilé, de progresser et d’en apprendre davantage sur l’utilisation des technologies que j’avais déjà utilisé pour de précédentes applications et de travailler sur un thème qui me passionne particulièrement. J’ai aussi découvert durant la conception de ce projet de nouvelles technologies très pratiques qui me seront utiles pour améliorer les prochaines applications que je développerai.

Conclusion

Merci de votre intérêt pour la présentation de mon projet.