Marathon du Web 2017 En coopération avec le Groupe Cerise

Introduction

Le marathon débute le par une présentation du sujet et se termine le . Le vendredi 18 décembre après midi (13h30 - 16h) est consacré à la présentation des projets.

L'IUT de Lens est ouvert exceptionnellement toute la nuit du mercredi au jeudi avec à disposition les ressources informatiques de l'IUT. Les salles machines des départements Informatique et Médias Numériques sont à votre disposition pour ce projet.

Pour les équipes en DUT, vous devez utiliser le framework PHP Laravel. Pour les équipes en LP, il vous est demandé de le réaliser avec Symfony. Des enseignants des 2 départements sont à votre disposition pour des conseils. Cette année, le groupe CERISE est notre partenaire. Le sujet vient des chaînes du groupe et 3 intervenants du groupe CERISE vont également vous épauler durant ces deux jours.

Salles à disposition :

  • Salles Informatiques :
    • 1SE
    • 4SE
    • 6SE
    • 7SE
    • 102F
    • 103F
    • 104F
  • Salle de pause (☕ à votre disposition !) :
    • 4F

Sujet

L'objectif de cette année est de réaliser un site web complet pour l'une des émissions de Gentside ou Ohmymag. Vous aurez le choix entre Daily Workout, notre émission axée musculation et entretien du corps, et Yummy, notre programme sur la cuisine.

Quelque soit votre choix, vous allez devoir développer un espace dédié autour de cette marque. Un carrousel accueillera l'utilisateur du site. Une série d'articles en rapport avec le thème choisi incitera l'utilisateur à intéragir avec le site. Chaque article contient un média (photo, gif, vidéo...). Bien entendu, la création des formulaires devra être faite en ligne lorque l'administrateur est connécté.

Les utilisateurs classiques auront également d'autres moyens d'intéragir avec le site en fonction de l'univers choisi :

Daily Workout

Un catalogue de vidéos sera à disposition de l'utilisateur. Les vidéos seront de courts tutoriels sur la façon de réaliser un exercice. Les utilisateurs pourront réaliser une playlist avec leurs vidéos préférées afin de constituer leurs entrainements. Ils pourront commenter les vidéos, mais également voter pour les meilleures.
NB : Lien pour les vidéos (liste complète à venir plus tard)

Élément d'un tuto :

Pour chaque exercice :

  • Titre
  • Accroche
  • Description
  • Vidéo
  • Difficulté
  • Groupe musculaire
  • Temps
  • Liste des étapes
  • Nombre série
  • Nombre d'itération
  • Temps repos entre séries
  • Le + du coach

Yummy

Un catalogue de recettes de cuisine sera à disposition de l'utilisateur. Chaque fiche recette devra contenir des éléments clés comme : la liste des ingrédients, les temps de préparation/cuisson, l'apport calorique... Chaque utilisateur pourra déposer une review contenant une note et un commentaire.
NB : Lien pour les vidéos

Élément d'une recette :

  • Titre
  • Accroche
  • Description
  • Vidéo
  • Difficulté
  • Temps préparation
  • Temps cuisson
  • Liste ingrédients
  • Liste matériel
  • Liste des étapes
  • Astuce du chef

Cliquez sur le bouton ci-dessous pour modifier l'énoncé en fonction de votre choix

Base de données

Tables Yummy

Articles : Un article sera une actualité dans l'univers de la cuisine. Des astuces inédites, en passant des tops 10 de recettes pour une saison jusqu'à la présentation d'un pays par ses traditions culinaires, tout est possible.
Comments : Chaque utilisateur pourra laisser un commentaire sur une recette, indépendament des votes.
Medias : Un média est une image OU une vidéo qui servira à enrichir un article ou une recette.
Recipes : Une recette de cuisine abordant de manière complète la réalisation d'un plat, de A à Z. Divers éléments sont renseignés dans la table afin de vous permettre de mettre en forme une recette de la manière la plus optimale.
Users : Liste des utilisateurs avec une mention pour savoir si ils ont accès au panneau d'admin.
Votes : Chaque utilisateur pourra laisser un vote sur une recette, indépendament des commentaires. Un seul vote accepté par utilisateur. La note sera un nombre entier entre 0 et 5 inclus.

Particularité : Les champs TEXT

Différents champs de la base de donnée sont des champs TEXT. Ces champs devront contenir du texte saisi via un éditeur de texte en markdown. Au moment de l'affichage, le markdown devra être interprété pour formatter le texte avec des balises html (h2, ul/li, br...). Pour cela on utilisera le plugin php-markdown déjà installé via composer).

De même, on pourra (faites cela à la fin, pas au début) utiliser un éditeur WISWIG pour écrire le markdown comme celui la : medium-editor-markdown.

Travail à réaliser

Vous devez réaliser :

  1. Le code de l'application (backend).
  2. La charte graphique + logo puis intégration (frontend).
  3. 3 articles, dont un rédigé en anglais (rédactionnel).

1 - Backend

Côté site

Homepage

Page principale du site, contiendra un listing basique des articles et des recettes.

Liste articles

Listing des articles avec la possibilité de trier par popularité (nombre de visite).

Liste recettes

Pareil que la liste des articles, mais quelques filtres supplémentaires seront disponibles comme un tri en fonction de la note, du nombre de commentaire. On pourra également mettre en place un moteur de recherche.

Affichage article

Cette page devra servir l'ensemble des informations d'un article. Lors de l'arrivée sur la page, le compteur de visite ('hitcount') devra être incrémenté.

Affichage recette

Pareil que les pages articles, cette page devra également donner la possibilité à l'utilisateur de poster une note ou un commentaire. Si l'utilisateur n'est pas inscrit, on lui proposera de s'inscrire.
La mise en forme de cette page est très importante.

Inscription / Login

Deux formulaires, l'un pour s'inscrire, l'autre pour s'identifier. Pas forcément sur la même page. Ils existent, il suffit de les mettre en forme.

Côté administration

Création article / recette

Un formulaire complet pour pouvoir créer un article ou une recette. Un rédacteur devra être capable de modifier un article existant.

Gestion des commentaires

Afficher les commentaires par recette avec la possibilité de supprimer certains commentaires (en cas de spam).

Gestion des utilisateurs

Possibilité de bloquer/supprimer un utilisateur (dans le cas d'un spammeur par exemple).

2 - Les articles

Vous devez réaliser 3 articles :

  • 2 en français.
  • 1 en anglais, qui n'est pas une traduction des deux premières.

Dans la mesure où les thèmes sont cadrés, vous avez toute liberté pour traiter le sujet sous l’angle de votre choix, c’est à vous qu’il appartient de trouver la tonalité idéale. Votre marge d’action rédactionnelle est complète, c’est à vous de trouver votre ligne éditoriale.

La pertinence de cet angle et la relation avec le contenu seront primordiales dans l’évaluation. Vous gérerez également la relation entre les images et les textes. Vous pourrez ainsi varier la longueur des textes (notices illustratives, texte d’accompagnement, article de fond, édito, etc.) Il pourrait être particulièrement judicieux de procéder à une soigneuse veille informationnelle avant de commencer. Un tiers du site sera rédigé en Anglais.

Rappel : Les textes sont forcément des créations originales. Les logiciels anti-plagiat sont très efficaces et sont capables de détecter la paraphrase par association de champs lexicaux. A éviter, donc. ;)

Vous devez déposer sur moodle votre rédaction (en français et en anglais) au format pdf pour le jeudi 21 décembre 2016 à 18h00. Attention l'accès ne sera plus possible à 18h15.

Pour les étudiants de DUT : Un étudiant informaticien déposera deux fichiers pdf : un pour la rédaction en français et l'autre pour celle en anglais. Deux devoirs sont créés dans Moodle / INFO / DUT2 / communication / section 9. Le fichier comportera les noms des membres du groupe (MMI et INFO).
Pour les LP Créaweb : trois devoirs ont été créés sous moodle / MMI /LPCréaWeb / Marathon du WEB.

3 - Le design de votre application

A vous de jouer, mais nous voulons :

  • Un logo
  • Une charte graphique
  • L'intégration
  • Une page 404 personnalisée...
  • Un site responsive

Base de données

Tables Daily

Articles : Un article sera une actualité dans l'univers du sport. Des astuces inédites, en passant des tops 10 des entrainements à faire cet été jusqu'à la présentation d'un champion du monde de culturisme, tout est possible.
Comments : Chaque utilisateur pourra laisser un commentaire sur un entrainement, indépendament des votes.
Medias : Un média est une image OU une vidéo qui servira à enrichir un article ou un entrainement.
Tranings : Un entrainement abordant de manière complète la réalisation de l'exercice, de A à Z. Divers éléments sont renseignés dans la table afin de vous permettre de mettre en forme l'entrainement de la manière la plus optimale.
Users : Liste des utilisateurs avec une mention pour savoir si ils ont accès au panneau d'admin.
Votes : Chaque utilisateur pourra laisser un vote sur un entrainement, indépendament des commentaires. Un seul vote accepté par utilisateur. La note sera un nombre entier entre 0 et 5 inclus.

Particularité : Les champs TEXT

Différents champs de la base de donnée sont des champs TEXT. Ces champs devront contenir du texte saisi via un éditeur de texte en markdown (avec preview). Au moment de l'affichage, le markdown devra être interprété pour formatter le texte avec des balises html (h2, ul/li, br...).

Lien pour l'éditeur markdown en standalone : Medium Editor.
Il faudra build le standalone sur une machine à part et le fournir aux étudiants. Simple d'utilisation.

Travail à réaliser

Vous devez réaliser :

  1. Le code de l'application (backend).
  2. La charte graphique + logo puis intégration (frontend).
  3. 3 articles, dont un rédigé en anglais (rédactionnel).

1 - Backend

Côté site

Homepage

Page principale du site, contiendra un listing basique des articles et des entrainements.

Liste articles

Listing des articles avec la possibilité de trier par popularité (nombre de visite).

Liste entrainements

Pareil que la liste des articles, mais quelques filtres supplémentaires seront disponibles comme un tri en fonction de la note où du nombre de commentaire.

Affichage article

Cette page devra servir l'ensemble des informations d'un article. Lors de l'arrivée sur la page, le compteur de visite ('hitcount') devra être incrémenté.

Affichage entrainement

Pareil que les pages articles, cette page devra également donner la possibilité à l'utilisateur de poster une note ou un commentaire. Si l'utilisateur n'est pas inscrit, on lui proposera de s'inscrire.
La mise en forme de cette page est très importante.

Inscription / Login

Deux formulaires, l'un pour s'inscrire, l'autre pour s'identifier. Pas forcément sur la même page. Ils existent déjà, il suffit de les mettre en forme.

Côté administration

Création article / entrainement

Un formulaire complet pour pouvoir créer un article ou un entrainement. Un rédacteur devra être capable de modifier un article existant.

Gestion des commentaires

Afficher les commentaires par entrainement avec la possibilité de supprimer certains commentaires (en cas de spam).

Gestion des utilisateurs

Possibilité de bloquer/supprimer un utilisateur (dans le cas d'un spammeur par exemple).

2 - Les articles

Vous devez réaliser 3 articles :

  • 2 en français.
  • 1 en anglais, qui n'est pas une traduction des deux premières.

Dans la mesure où les thèmes sont cadrés, vous avez toute liberté pour traiter le sujet sous l’angle de votre choix, c’est à vous qu’il appartient de trouver la tonalité idéale. Votre marge d’action rédactionnelle est complète, c’est à vous de trouver votre ligne éditoriale.

La pertinence de cet angle et la relation avec le contenu seront primordiales dans l’évaluation. Vous gérerez également la relation entre les images et les textes. Vous pourrez ainsi varier la longueur des textes (notices illustratives, texte d’accompagnement, article de fond, édito, etc.) Il pourrait être particulièrement judicieux de procéder à une soigneuse veille informationnelle avant de commencer. Un tiers du site sera rédigé en Anglais.

Rappel : Les textes sont forcément des créations originales. Les logiciels anti-plagiat sont très efficaces et sont capables de détecter la paraphrase par association de champs lexicaux. A éviter, donc. ;)

Vous devez déposer sur moodle votre rédaction (en français et en anglais) au format pdf pour le jeudi 21 décembre 2016 à 18h00. Attention l'accès ne sera plus possible à 18h15.

Pour les étudiants de DUT : Un étudiant informaticien déposera deux fichiers pdf : un pour la rédaction en français et l'autre pour celle en anglais. Deux devoirs sont créés dans Moodle / INFO / DUT2 / communication / section 9. Le fichier comportera les noms des membres du groupe (MMI et INFO).
Pour les LP Créaweb : trois devoirs ont été créés sous moodle / MMI /LPCréaWeb / Marathon du WEB.

3 - Le design de votre application

A vous de jouer, mais nous voulons :

  • Un logo
  • Une charte graphique
  • L'intégration
  • Un site responsive
  • Une page 404 personnalisée...

Notation

La notation tiendra compte de chaque partie (code, design, écriture). Ne négligez en aucune.

Les notes obtenues seront compatbilisées :

  • Pour les DUT MMI : Le projet marathon compte pour les deux UEs (projet tuteuré)
  • Pour les LPs MMI : le projet sera pris en compte dans le module projet tuteuré
  • Pour les DUT INFOS : Le projet compte pour l'UE 33.
  • Pour les LPs INFO : 1/3 de l'UE 8.

Serveur Web

Vous travaillerez en équipe et partagerez vos développement/création via un outil de travail collaboratif : git. Nous vous avons préparé le travail, l'installation de Laravel/Symfony est déjà faite. Il ne vous reste qu'à déployer votre application sur vos machines locales et sur le serveur web du marathon. Votre projet sera alors accessible à l'adresse : http://172.31.146.100/~LOGIN_GROUPE.

Déploiement initial du projet - A NE FAIRE QUE PAR UN SEUL DES MEMBRES DE L'EQUIPE
Sur votre ordinateur local

Des dépots GIT sont disponibles pour le téléchargement de votre projet initial à partir de la forge de l'Université d'Artois. Vous disposez de 2 dépots : un pour le projet Yummy et un pour le projet DailyWorkout. Vous clonerez l'un de ces deux dépots (en fonction du projet choisi) sur votre machine locale.

Pour les DUTs (projet sous Laravel) :
git clone https://forge.univ-artois.fr/marathon/yummi-laravel.git
ou
git clone https://forge.univ-artois.fr/marathon/dailyworkout-laravel.git

Pour les LPs (projet sous Symfony) :
git clone https://forge.univ-artois.fr/marathon/yummi-symfony.git
ou
git clone https://forge.univ-artois.fr/marathon/dailyworkout-symfony.git

Une fois votre projet téléchargé vous devez configurer votre application pour un fonctionnement local :

  • Copier le fichier env.init en .env et adapter la connexion à la base de données (cf la section ci-dessous)
  • Regénérer le répertoire vendor via la commande suivante : composer install
Votre projet est maintenant opérationnel sur votre machine locale. Vous pouvez le tester sous Laravel via php artisan serve ou sous Symfony via php bin/console server:start

Sur le serveur web marathon

Vous pouvez utiliser phpstorm pour votre développement. Le menu File/Open vous permet d'ouvrir le répertoire contenant votre application. Nous allons maintenant configurer votre projet afin que vos modifications locales soient propagées sur le serveur web marathon lors d'un push.
Dans le menu VCS/Git/Remote, vous éditez le remote origin et modifiez l'URL associée :
Pour les DUTs (projet sous Laravel) :
ssh://LOGIN_GROUPE@172.31.146.100/srv/comptes/marathon17/LOGIN_GROUPE/website.git ou LOGIN_GROUPE représente l'identifiant de votre groupe du type dutGroupeX.
Pour les LPs (projet sous Symfony) :
https://forge.univ-artois.fr/marathon/LOGIN_GROUPE.git ou LOGIN_GROUPE représente l'identifiant de votre groupe du type lpGroupeX.
phpstorm est maintenant correctement configuré, vous pouvez effectuer votre premier commit (clique droit, Git/Commit File puis le bouton Commit and Push).

Vous vous connecterez en ssh sur le serveur web marathon (ssh LOGIN_GROUPE@172.31.146.100) et vous devrez configurer votre application pour qu'elle fonctionne sur le serveur (mêmes étapes que celles effectuées localement) :

  • cd /srv/comptes/marathon17/LOGIN_GROUPE/www
  • Copier le fichier env.init en .env et adapter la connexion à la base de données (cf la section ci-dessous)
  • Regénérer le répertoire vendor via la commande suivante : composer install
Votre projet est maintenant opérationnel sur le serveur web marathon. Vous pouvez le tester à l'adresse http://172.31.146.100/~LOGIN_GROUPE
Déploiement initial du projet - POUR LES AUTRES MEMBRES DE L'EQUIPE

Un dépot GIT est disponible pour votre projet. Vous clonerez ce dépot sur votre machine locale.

Pour les DUTs (projet sous Laravel) :
git clone ssh://LOGIN_GROUPE@172.31.146.100/srv/comptes/marathon17/LOGIN_GROUPE/website.git ou LOGIN_GROUPE représente l'identifiant de votre groupe du type dutGroupeX.

Pour les LPs (projet sous Symfony) :
git clone https://forge.univ-artois.fr/marathon/LOGIN_GROUPE.git ou LOGIN_GROUPE représente l'identifiant de votre groupe du type lpGroupeX.

Une fois votre projet téléchargé vous devez configurer votre application pour un fonctionnement local :

  • Copier le fichier env.init en .env et adapter la connexion à la base de données (cf la section ci-dessous)
  • Regénérer le répertoire vendor via la commande suivante : composer install
  • UNIQUEMENT POUR LES DUT : Donner les bons droits à différents répertoires : fixRights
Votre projet est maintenant opérationnel sur votre machine locale. Vous pouvez utiliser phpstorm pour votre développement. Le menu File/Open vous permet d'ouvrir le répertoire contenant votre application. Vous pouvez tester votre application sous Laravel via php artisan serve ou sous Symfony via php bin/console server:start

Mise à jour de la copie locale

Lorsque des membres de votre groupe auront commité et pushé leurs modifications, il sera nécessaire de les télécharger à votre tour sur votre ordinateur local. Pour cela vous effectuerez un clique droit puis Git/Repository/Pull.

Base de données

Un serveur mysql de base de données est à votre disposition sur la machine 172.31.146.100. Vous disposez de deux bases (LOGIN_GROUPE_Y pour le projet Yummy et LOGIN_GROUPE_D pour le projet Dailyworkout). Les identifiants de connexion à ces bases vous ont été distribués. Vous pouvez directement les utiliser même à partir de vos ordinateurs personnels (attention de bien renseigner le champ DB_HOST avec la valeur 172.31.146.100). Un accès via phpmyadmin est disponible à l'adresse : http://172.31.146.100/phpmyadmin

BON COURAGE !!!!