Projet récapitulatif procédural

Header :

Nous avons maintenant abordé tous les points que je pouvais aborder avec le nombre d'heures qui nous étaient donné et qui me semblait le plus important pour que vous ayez une maîtrise de la programmation basique. Cependant, cette approche, même si vitale pour la suite du cours, n'est pas encore la manière de coder moderne et compétitive, cela, on le garde pour les heures qu'il nous reste. Mais avant ça, nous allons nous attaquer à un gros exercice récapitulatif de la matière vue depuis le début de l'année. Réussir ce projet est une bonne manière de voir si vous maîtrisez les aspects important de la programmation web. Si vous rencontrez des difficulté lors de la réalisation de cet exercice, je vous invite à prendre note de ceci, et de travailler les points notés seul, en groupe, ou accompagné par un formateur. Au menu :

  • Html
  • Css (bootstrap si vous le souhaitez !)
  • SQL
  • Algorithmie de PHP
  • Communication entre le front-end et la base de donnée en PHP
  • Javascript si vous le souhaitez

Pour ce projet en particulier, je vous demande de vous en tenir à ça, pour le projet final, je ne vous interdirai pas d'utiliser toutes les technos que vous voulez, mais ici, contentez vous de ce qui a été vu au cours, et uniquement cela.
C'est un entrainement pour le projet final, donc jouez le jeu à fond !


Body

Préparation

  • Groupe de minimum 3 personnes
  • Un depot Github par groupe qui accueillera le projet
  • Une base de donnée pour le projet
  • Une architecture de dossier et fichier pour que l'équipe s'en sorte
  • Répartition des tâches au sein de l'équipe

Temps de travail en cours

  • 3 heures : Choix du projet et soumission du sujet
  • 12 heures : Travail sur le projet
  • 3 heures : Présentations
  • Vous pouvez travailler autant que vous voulez à la maison, mais attention : Si vous travaillez seul, soyez raccord avec votre groupe, documentez votre travail, communiquez avec votre groupe pour ne pas perdre vos compagnons

Projet

Le sujet est libre, c'est à vous de le choisir, mais le projet doit comporter certains aspects obligatoires :

  1. Un site avec une vue visiteur ne montrant pas toutes les informations sur notre site
  2. Un formulaire de connexion
  3. Un formulaire d'inscription en tant que membre
  4. Une vue membre de notre site permettant d'accéder à notre site en entier, mais ne permettant pas d'ajouter de nouvelles données
  5. Une vue Administrateur de notre site, permettant d'accéder à tout le site comme un membre mais aussi de rajouter des données à l'aide d'un formulaire, données qui seront ensuite ajoutée au site comme le reste

Ceci est le minimum syndical, the sky is the limit, ajoutez ce que vous voulez : Formulaire de contact, formulaire pour postuler à devenir administrateur, un mini jeu, un chat, ...

Veillez à bien soigner votre site visuellement (Css, Bootstrap), qu'il soit responsive (mobile first), et accessible.

Veilliez à sécuriser un maximum vos champs pour éviter les différentes attaques.

Exemple

Un exemple de projet qui pourrait être fait reprenant le minimum syndical, je le développerais comme ça :

  • Je pars sur l'idée d'un site de critiques de jeux vidéos
  • Lorsque je ne suis pas connecté, mon site affiche simplement une landing page très jolie avec le nom du site en grand, sa catch-phrase et un encart "Vous connecter pour continuer". Un champs de username, password, un bouton se connecter, un bouton créer un compte. (1),(2)
  • Lorsque je clique sur le bouton pour créer un compte, ça m'amène vers un formulaire d'inscription classique (Nom d'utilisateur, adresse e-mail, mot de passe, ...). Lorsque je soumet le formulaire plusieurs choses sont possible en fonction des données dans la base de donnée, si tout se passe bien, je pourrais me connecter en tant que membre (3):
    • Le nom d'utilisateur est déjà pris, on me propose d'en prendre un autre
    • Le mot de passe n'est pas assez sécurisé, on me donne les informations que je dois respecter pour un mot de passe assez sécurisé (minimum X caractères, X chiffres,...)
    • Tout est bon, ça m'affiche une page "Compte créé" et ça m'envoie un e-mail de confirmation du compte qui a été créé
  • Lorsque je me connecte en tant que membre, j'ai accès à un site, avec une nav bar, un footer, un header, la classique. Dans ma navbar il y a plusieurs catégories de jeu action, aventure , plateforme,... Lorsque que je clique sur un style de jeu, une suite d'articles, du plus récent au plus vieux, se suivent avec une image de la jaquette du jeu, une note du rédacteur (ex : 8/10) et ensuite la critique écrite (4). Je peux éventuellement y laisser un commentaire !
  • Dans la base de données, certains comptes spéciaux, ajoutés ou modifié à la main, sont considéré comme administrateur (un booléen). Si je suis connecté au site avec un compte administrateur, j'ai accès à la même chose que les membres, sauf que tout en haut des différentes page de style de jeu, j'ai un formulaire d'ajout d'une nouvelle critique avec différents champs (5):
    • Nom du jeu
    • Lien vers une image de la jaquette du jeu
    • ma note sur 10
    • Text area pour la critique du jeu
    • une menu déroulant avec le style du jeu (correspondant aux différents onglets de la navbar)

Il est donc à comprendre avec ce dernier point que c'est un petit script automatique qui, lorsque je vais cliquer sur mon onglet aventure dans ma navbar, va aller dans la base de données, choper tous les élément stocké avec le tag aventure qui vont être affiché, de la dernière entrée à la première, en les formattant pour former des articles similaires.
Pour que cela s'affiche bien, je ferais d'abord 2 article en pur front-end, je copie/colle ensuite la structure dans mon script en remplaçant les lorem-ipsum par mes variables PHP, on met le tout dans une boucle, et hop, notre site se construit tout seul !

Présentation

Pour votre présentation, il se peut que vous n'ayez pas fini entièrement le projet, je vous donne quelques conseils :

  • N'essayez pas de rajouter une nouvelle fonctionnalité trop proche de la présentation ! Les dernières heures ne devraient être consacrée à préparer la présentation, peaufiner le rendu et corriger les bugs.
  • Vendez votre projet comme si c'était le meilleur. N'insistez pas sur ce qui ne va pas, tournez ça de manière profitable ! (ex : On a pas fini cette page là car pour nous c'est très simple à faire et on trouvait plus pertinent de vous montrer cette fonctionnalité super cool !)
  • Vendez un projet évolutif ! (ex : Si on pouvait continuer le projet, on rajouterai ça, ça, ça, mais pour ça, il nous faut des subsides)
  • Entraidez-vous ! (Il se peut que l'un de vous bégaye, perde ses mots, se retrouve bloqué,... Pas de panique, c'est pas grave, essayez d'appeler les autres à l'aide, et les autres, si vous voyez que ça bloque trop : AIDEZ !)
  • Présentez votre projet de manière ludique, vous pouvez préparer un power point de présentation, mais rien n'est obligatoire, vous pouvez aussi, sur votre site, faire un onglet équipe pour vous présenter, dire qui à fait, quoi, soyez inventif !
  • Donnez vos sources d'inspiration, pourquoi vous faites ce site, qu'elle est l'idée derrière, pourquoi vous avez développé tel ou tel fonctionnalité plutôt qu'une autre, qu'est-ce qui a été envisagé puis abandonné,...
  • Racontez une anecdote marrante qui vous est arrivé pendant le développement, une situation difficile que vous avez surmonté, essayez de faire vibrer avec une anecdote !
  • Ne préparez ni trop ni trop peu de texte. On ne doit pas avoir l'impression que vous lisez un texte, mais il ne faut pas croire que vous êtes perdus.