Plateforme Communautaire de Partage de Projet : Partie 3

Sommaire

 

Organisation de l’application côté Front-End:

 

Page Home:

 

Page de Projets:

 

Le dropdown et la barre de recherche d’autocomplétions  :

 

Connexions et liaisons des onglets entre les pages:

 

Prochaines étapes :

 

Organisation de l’application côté Front-End

  1. Page Home :

 

  • Menu avec onglets Home, Projets, Recherche
  • A droite, une barre de recherche avec autocomplétions en fonction du nom des projets
  • Le lien vers la page de connexion avec photo de l’utilisateur
  • Une alerte avec le protocole d’upload
  • Un formulaire de contact

 

 

  1. Page de Connexion :

 

  • Redirection vers le home mais en mode connecté
  • A droite : mon compte, mes projets (popin modifier, supprimer, ajouter, visualiser), se déconnecter

 

 

  1. Page de Projets :

 

  • Une liste des projets soit d’une personne soit de tout le monde
  • Va être accessible par plusieurs manières :
  1. En cliquant sur l’onglet Recherche.
  2. En cliquant sur voir les projets
  3. Dans le dropdown

*La page de projets va revenir sans cesse en fonction des requêtes faites.

 

Page Home

Pour la partie Front-End on va se servir de Bootstrap et plus particulièrement de Bootstrap 4. En faisant une recherche google de Bootstrap 4 on retrouve un site d’explication avec les instructions complètes de l’utilisation de toutes ses fonctionnalités tels que les grids, les menus et les footers. Pour définir Bootstrap en quelques mots, on peut dire qu’il s’agit d’une compostion de fichier IHM qui sont utilisés en HTML, CSS et Javascript.

 

Pour mettre en place notre partie Front-End nous allons faire appel cette fois non à PHP Storm (Back-End) mais à PHP WebStorm qui est la même que du PHP Storm mais pour du HTML et du CSS. On va mettre ce projet aussi dans le répertoire B2 projet et ici on va faire des requêtes qu’on appellera dans le Javascript.

 

Pour développer un peu le dynamisme des fenêtres on va créer les pages de manière responsive c’est-à-dire que le pages seront adaptables au différents types d’écrans comme des tablettes ou smartphones.

 

 

La première page qu’on a commencée à développer c’est la page home. Tout d’abord nous avons les links CSS tout en haut de notre fichier index car il s’exécute en premier et puis nos links Javascript tout en bas car il s’exécute après que tout soit téléchargé. Il faut préciser que le PHP va rendre le site dynamique côté serveur alors que le Javascript va rendre la page dynamique côté client.

 

En premier nous avons créé en haut un menu bar avec 3 onglets : Home, Projets et Recherche. L’onglet Home permettra toujours au visiteur ou aux abonnés ou aux connectés de rebasculer vers cette page initiale. Ensuite la partie Projet permettra de lister l’arborescence des projets complets sans trie. Cette option sera également accessible via le bouton « Voir projets » un peu plus au bas de la page.

 

 

A droite du menu bar on a une barre de recherches qui permet de surfer les noms des projets. Nous allons utiliser AJAX pour y parvenir. Grâce au guide de Bootstrap 4 j’ai pu créer cet menu et le modifier à ma guise grâce au bon padding. J’ai également pu mettre un avatar qui remplacera après la photo de l’utilisateur. Nous allons de même trouver dans le coin droit du menu un lien vers la page de connexion.

 

 

 

Juste en bas du menu nous avons inséré un petit paragraphe expliquant l’utilité du site avec juste en bas une banderole du programme. En bas de la banderole nous avons mis une alerte avec les contraintes d’upload pour les utilisateurs inscrits. C’est-à-dire le programme doit grâce à ce protocole pouvoir être capable d’interpréter la bonne version avec le serveur et savoir quel langage on utilise pour que tout le monde puisse le voir. Pour cela il faut insérer le fichier install.txt pour l’installation ou le fichier uninstall.txt et suivre les instructions demandées.

 

 

Enfin, on ajoute tout en bas du home un formulaire de contact pour faire des demandes particulières.

 

 

Page de Projets

Pour créer le Front-End de notre page projet je me suis aidé de la documentation de Bootstrap 4. Tout d’abord, j’ai mis dans le header la même barre de recherche en haut de la page home. J’ai également mis le footer c’est-à-dire le formulaire en bas de page.

 

Pour que nos projets soient affichés de manière responsive nous avons établi ensuite dans le main une class col-sm-12 col-md-6 col-lg-4. Cela fait que sur un grand écran on aura 3 projets sur la ligne, puis sur un moyen 2 et enfin sur un petit 1. Ensuite on va créer des cards pour tester. Pour que le titre du projets soit placé en bas à gauche du card nous avons mis un margin-top à 270 pixels.

 

Il faut dire que dans le le_style.css si on cherche à modifier un style comme le margin-top ou le margin-height dans une classe qui se trouve dans d’autres classes, on doit y mettre les classes précédentes.

 

 

Ensuite pour créer une sorte de résumé qui pourra être entièrement accessible en cliquant sur le lien « voir plus » j’ai ajouté un anchor élément en plus d’un autre lien pour télécharger le projet. Le résumé du projet et ces deux liens sont mis dans un div sachant que j’ai du rétrécire le card-img-overlay pour qu’il soit cliquable. Ensuite j’ai crée une deuxième classe pour ce div que j’ai appelée data-max-length que j’ai attribuée à 60. Ce chiffre est le nombre de caractères lu avant que les « … » remplacent le reste du contenu.

 

 

Pour rendre cet événement dynamique côté client nous allons dans un fichier JS  écrire une fonction init_paragraphe_size qui permet d’accomplir cette tâche. Dans notre fonction nous allons d’abord boucler sur notre elem de la classe card-body. Ensuite nous récupérerons la valeur de data-max_length de l’élément courant qu’on attribut à la variable max_length. Ensuite s’il existe, je récupère le contenu en format text du premier élément du card-body sachant qu’on doit compter les childnodes dans une liste d’élément. Il faut préciser qu’on a affaire à une sorte de tableau d’éléments avec les retours à la ligne qui comptent comme du texte.

 

 

En effet le texte entre les balises <p> correspondent en comptant du div au childnode 1, le lien « Télécharger » au childnode 3 et le lien « Voir plus » au childnode 5.  Après avoir ciblé le childnode du content j’appelle la longueur de ce contenu et je le récupère dans la variable content_length. Enfin quand content_length est supérieur à max_length qui est établi à 60 je divise grâce à substr de 0 à max-length-3 et puis je concatène avec « … ». Cela se termine en remplaçant le childNode 1 par le contenu html de content.

 

 

Le dropdown et la barre de recherche d’autocomplétions  

Grâce à la documentation de Bootstrap 4 j’ai pu récupérer le code d’un dropdown que j’ai modifié pour qu’il puisse dévoiler Paramètres, Mes projets et Déconnexion. Ensuite j’ai ajouté une icône pour chacune grâce au site Fontawsome. J’ai crée une petite classe menu-icon- dans le CSS pour la marge droite.

 

 

 

Pour gérer ensuite la recherche d’autocomplétions retour dans notre fichier JS nous allons utiliser le concept d’Ajax. Ajax pour rappel n’est pas un langage de programmation. Il s’agit d’un concept qui se base sur du Json, XML ou Javascript. Il permet de communiquer entre le server web et la page web sans qu’on ait besoin de recharger la page.

 

 

Pour revenir vers notre code, en JQuery on met d’abord $(‘.autocomplete-search:first’); dans la variable autocomplete_search. Ensuite j’initialise la classe de l’élément à hide. Je crée après une fonction on_search_change je récupère la valeur « .val() » de l’élément dans une variable. A la fin de cette fonction je fais un test ternaire pour voir si la longueur est supérieure ou égale à deux pour que le dropdown s’affiche sinon je le cache.

 

Pour gérer ensuite le focus c’est-à-dire lorsqu’on rentre dans l’élément et le blur lorsqu’on click à côté de l’élément pour effacer les propositions, on doit d’abord mettre l’élément html dans une variable. Autrement dit je sélectionne le premier élément input de type search. Par la suite je fais deux listenner sur ce dernier grâce à « on » et puis j’enregistre l’évènement « keydown » et « blur » sur la barre de recherche.

 

Ensuite j’ai récupéré une forme d’autocomplétion sur la documentation de bootstrap. Pour pouvoir la placer juste en dessus de la barre de recherche j’ai crée une classe CSS où j’ai défini les bons paramètres.

 

Je crée dans mon script.js une fonction jquery qui s’apppelle write_projects_cards et qui récupère d’abord dans la variable projects_container, l’élément card-projects-list. Je le mets ensuite dans la variable project_template toute une card et je modifie le contenu en mettant les données en forme json. Par exemple au lieu d’un titre concret « + projects.name + » de notre tableau json fake_data. Pour voir si on a la possibilité de télécharger un projet ou non j’ai fait un petit test ternaire. Ensuite pour écrire dans le container je récupère project_template puis je le récupère dans le code html. Enfin j’appelle la fonction init_paragraphe_size pour passer derrière chaque card afin de tester la longueur de la description.

 

 

L’objectif est d’enlever les cards pré-remplis et puis de mettre des données en dure grâce à du json c’est-à-dire de créer une front-end semi-dynamique grâce au tableau fake_data. Le résultat final sera une fois que ce squelette marche de remplacer ce data avec des requêtes ajax de notre partie back-end. Plus spécifiquement on met  celles-ci dans les paramètres de write_projects_cards.

Bilan de la démarche :

  1. J’ai mis les cards mis manuellement avec bootstrap
  2. Puis je les ai mis en commentaire et grâce au Json j’ai rendu ma page semi-dynamique
  3. Ensuite je remplace le Json avec des requêtes ajax pour faire la liaison avec le back-end. (php)

 

Connexions et liaisons des onglets entre les pages

Pour les href je les ai remplis un à un avec les bonnes pages de bootstrap. Par exemple dans mes projets j’ai inséré le lien « index.html ».  Ensuite j’ai copié/collé le même code avec des petites modifications comme avec Les projets dans Recherche. Concrètement la page Les projets et Recherche se ressemblent. Aussi en cliquant sur Home la page d’accueil apparait avec le bouton Mes Projets qui nous redirige vers la fenêtre des projets aussi.

 

Ensuite pour le dropdown en haut à droite on a un onglet Mes projets aussi. J’ai créé aussi pour le moment une page vide pour les paramètres qui seront destinés à l’information du compte comme le téléphone, email et photo de profil de chaque user. Le dernier onglet c’est déconnexion qui renvoie à la page home.

Prochaines étapes

  • Faire la page de settings, la page de connexion et lier le Back-End avec la BDD avec le Front-End grâce à des requêtes ajax

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *