Aller au contenu

Travail pratique

ID : A10-TP07.1

But du TP

  • Prendre en main l'IDE IntelliJ IDEA
  • Se familiariser avec l'utilisation du système de gestion de versions Git et la plateforme de gestion de projets GitLab
  • Réaliser collaborativement un site web responsive contenant un formulaire avec HTML et CSS

Travail à réaliser

Site web

  1. Clonez le projet du travail pratique qui se trouve sur GitLab.
  2. Implémentez une page web responsive avec un formulaire en vous basant sur le modèle disponible sous forme d'images dans le dossier /web/template/img.
    • Le but est que votre page web, avec un contenu identique, soit similaire (ou le plus proche possible) au modèle en termes de présentation, disposition, agencement, etc.

Spécifications

  • Intégrez une police de caractères, non standard, de type sans-serif, de votre choix.
    • Les fichiers nécessaires au fonctionnement de la police de caractères doivent être disponibles dans le projet sous /web/font/ dans un dossier portant le nom de la police de caractères.
    • Chaque personne doit utiliser une police de caractères différente de celles des autres.
  • Le header de la page est fixe et le contenu passe en dessous.
  • Utilisez CSS Grid pour la mise en page du formulaire et l'aspect Responsive Web Design de celui-ci.
  • Votre page web, votre feuille de style personnelle et toutes autres ressources (sauf la police de caractères) se trouvent dans un dossier portant votre nom d'utilisateur AAI à la racine du dossier /web.
    • Ex. /web/joel.dacomo (page web index.html)
    • Ex. /web/joel.dacomo/css (feuille de style CSS)
  • Intégrez la feuille de style modern-normalize (qui se trouve sous /web/css/modern-normalize.css) dans votre page web (via une balise <link>).
  • La bordure des éléments est de 1px avec la couleur #d6d8db.
  • Les coins arrondis ont un rayon de 5px.
Formulaire
  • L'ensemble des données du formulaire doivent être stockées dans un tableau portant le nom registration-form[].
    • Pour les valeurs de l'attribut name des champs du formulaire, référez-vous au chapitre Données du formulaire.
  • Les valeurs pour les boutons radio "Sexe" sont m pour "Homme" et w pour "Femme".
  • Les valeurs pour la liste déroulante "Etat civil" sont single pour "Célibataire", married pour "Marié(e)", divorced pour "Divorcé(e)", separated pour "Séparé(e)" et widowed pour "Veuf(ve)".
  • Les valeurs pour les cases à cocher "Connaissances en informatique" sont programming pour "Programmation", network pour "Réseau", system pour "Système" et support pour "Support".
  • Les valeurs pour les boutons radio "Orientation envisagée" sont ISC-IL pour "Informatique logicielle", ISC-RS pour "Réseaux et systèmes" et ISC-ID pour "Ingénierie des données".
  • L'ensemble des champs du formulaire sont obligatoires à l'exception des cases à cocher "Connaissances en informatique" et "Remarque".
  • Les champs "Nom", "Prénom", "Adresse (en Suisse)", "Localité" et "Numéro AVS" sont de type text.
  • Le champ "Email" est de type email.
  • Le champ "Date de naissance" est de type date.
  • Le champ "NPA" est de type number avec des valeurs comprises entre 1000 et 9999.
  • Le champ "Numéro AVS" doit avoir le format 756.XXXX.XXXX.XX (X doit être un chiffre entre 0 et 9).
  • En cliquant sur un label, le focus est mis sur l'élément de formulaire associé.
    • Ex. : en cliquant sur le label "Programmation", la case à cocher correspondante passe à l'état sélectionné, en cliquant sur le label "Prénom", le curseur de saisie se place dans le champ de saisie correspondant, en cliquant sur le label "Etat civil", la liste devient active, etc.
    • "Sexe", "Adresse (en Suisse)", "Connaissances en informatique" et "Orientation envisagée" ne sont pas cliquables.
  • Les labels sur lesquels on peut cliquer, le widget pour la "Date de naissance", la liste déroulante "Etat civil" et le bouton "Envoyer" doivent avoir un curseur de type pointer.
  • Les champs de saisie qui sont obligatoires, le widget pour la "Date de naissance" et la liste déroulante "Etat civil" ont un indicateur rouge tant que le contenu n'est pas valide.
    • L'indicateur est vert lorsque le contenu est valide.
  • Les champs du formulaire (sauf les boutons radio et les cases à cocher) doivent tous être mis en forme via CSS pour avoir la même apparence sur les navigateurs web usuels (Chrome, Firefox, Opera, Safari et Edge).
    • Pour la liste déroulante "Etat civil", l'icône personnalisée est disponible au format SVG dans le fichier /web/img/icon-arrow-down.svg
  • Le champ de saisie multilignes "Remarque" ne peut être redimensionné, par l'utilisateur, qu'en hauteur.
  • Les couleurs pour le bouton "Envoyer" et le lien "Retour à l'accueil" sont :
    • Normal : #007cb7
    • Hover : #005680
  • La couleur des labels bleus est #007cb7.
  • Les couleurs pour les indicateurs de validation sont :
    • Valide : #218838
    • Invalide : #c82333
  • Les champs de saisie du formulaire ont un texte placeholder.
  • La liste "Etat civil" a une option Sélectionnez… non sélectionnable et invalide (au niveau de la validation du formulaire).
  • Tous les champs de saisie, le widget pour la "Date de naissance" et la liste déroulante "Etat civil" ont un padding de 5px en haut et en bas, et de 8px à gauche et à droite.
  • Il y a une marge de 5px entre le champ pour la rue et les champs NPA et localité.
  • Il y a une marge de 10px entre les cases à cocher ainsi que les boutons radio et les labels correspondants.
Conteneurs
  • La marge entre les deux conteneurs gris est de 20px.
  • Le padding des deux conteneurs gris est de 20px.
  • La couleur de fond deux conteneurs gris est #f6f7f8.

container-layout.png

CSS Grid
  • La marge entre le titre "Formulaire d'inscription" et la grille des éléments du formulaire est de 40px.
  • L'espacement entre les lignes d'éléments, dans la grille, est de 20px (en violet ci-dessous).

form-layout.png

Données du formulaire

  • Pour tester votre formulaire, vous pouvez l'envoyer avec la méthode POST sur la page /web/form-ctrl-test.php.

  • Vous devez obtenir l'affichage suivant avec les données du formulaire :

    form-data.png

Workflow Git

Utilisez le workflow Git Gitflow Workflow pour gérer les versions de votre code source et le partager entre vous.

  • Respecter l'ensemble des règles, vues en cours, relatives aux messages de commit, aux conventions de nommage des branches et à la numérotation des versions.

Pour le workflow :

  1. Créez une branche feature par personne (ex. feature/form-joel.dacomo).
  2. Faites un "merge commit" (merge no-fast-forward) de votre branche feature dans la branche develop une fois la page web complètement terminée.
  3. Ajoutez un lien vers votre page web personnelle dans la liste des formulaires de la page principale du site web /web/index.html (dans l'ordre alphabétique de vos noms de famille) (ex. Dacomo Joël).
    • Faites un commit de cette modification dans la branche develop après le merge de la branche feature.
  4. Créez une branche release avec le bon numéro de version.
    • Chaque ajout d'une nouvelle feature (page personnelle) incrémente la version mineure du projet : 0.X.0 (ex. release-0.3.0).
  5. Dans la branche release, mettez à jour le fichier CHANGELOG.md.
  6. Pour terminer, faites un "merge commit" (merge no-fast-forward) de la branche release dans les branches master puis develop (dans cet ordre).
  7. A la fin du travail pratique, seules les branches master et develop doivent exister sur origin (plus de branches feature ou release).

🚨 Pas de merge dans ou depuis les branches origin, uniquement dans les branches locales !

  • Si votre push ne passe pas sur origin, faites un fetch et résolvez les conflits (éventuellement, faites un rebase).
  • Evitez de faire un pull afin de ne pas générer de merge inutile.
  • Utilisez "interactive rebase" pour repositionner, modifier, arranger vos commits dans votre branche feature, si besoin.
  • Utilisez les branches hotfix pour corriger les erreurs ou les oublis dans le code fusionné dans la branche master.

Mise en production

  1. Déployez la dernière version du site web (le dossier /web du projet) sur votre serveur de production (VPS) avec l'URL https://tp07.apiXX.isc.heia-fr.ch (remplacez XX par le numéro de votre serveur personnel).
    • La page d'accueil de nginx doit bien évidemment rester accessible avec l'URL https://apiXX.isc.heia-fr.ch.
    • Le site web fait avec MkDocs doit aussi rester accessible avec l'URL https://tp05.apiXX.isc.heia-fr.ch.
    • Le site web du blog doit aussi rester accessible avec l'URL https://tp06.apiXX.isc.heia-fr.ch.

Rendu du TP

Aucun rapport, manuel ou documentation n'est demandé pour ce travail pratique.

Le dernier commit sur Git doit être fait au plus tard le dimanche 24 novembre à 23h59.

La dernière version du site web doit avoir été mise en ligne sur votre VPS au plus tard le lundi 25 novembre à 13h.

Le TP sera évalué, entre autres, sur les critères suivants :

  • Respect de toutes les consignes de ce document
  • Utilisation correcte du workflow Git
  • Commits respectant les règles vues ensemble
  • Mises à jour correctes et pertinentes du changelog
  • Numérotation correcte des versions
  • Disponibilité de la dernière version du site web sur votre VPS
  • Code source de qualité respectant tous les thèmes vus durant le cours
  • Résultat visuel identique ou le plus proche possible du modèle