Développement de plusieurs pages d’un site web existant

que prestataire de services pour sa société mère, Procurion Consulting sprl (créée en Belgique en 2008). Procurion, et donc Quintel, propose des services de site de marketing internet à des clients en Belgique et en France.
2. Missions et objectifs
La société QUINTEL SARL (marque de PROCURION Consulting) est une société de services de communication Internet proposés aux professionnels indépendants et aux petites entreprises.
L\’objectif de Quintel jusqu\’à présent était de fournir des services dans le but d\’augmenter la capacité du Procurion (grâce à la présence de constructeurs de sites Web, de graphistes, de secrétaires, etc.) et de travailler dans le développement de clientèle pour psychologues.
Parce que Quintel est devenu une entreprise plus stable au cours des 3 dernières années, il a maintenant été décidé que l\’entreprise commencerait à offrir ses services aux nouveaux clients du Maroc.
3. Organigramme

II. Tâches effectuées
1. Ajout d’un système de modification de l’affichage sur l’ancienne page d’accueil
Les besoins fonctionnels :
– Modification du contenu de la page d’accueil
2. Création de la page d’accueil, paramétrages et statistiques du nouveau site
Les besoins fonctionnels :
– Modifier les paramètres de notifications
– Afficher les statistiques des RDV par période
3. Création et déploiement d’une plateforme entière de recherche d’emploi
Les besoins fonctionnels :
– Gestion de profil
– Gestion de CV
– Recherche d’emploi
– Candidature
– Gestion des demandes d’emplois
– Proposition d’offre d’emploi
– Gestion des candidats

Chapitre II : Problématique traitée
I. Mise en contexte
Le premier projet ou j’ai participé à son développement a pour but de créer des agendas électronique pour des psychologues en Belgique afin de permettre à leurs clients de prendre des rendez-vous directement depuis cet agenda, et permettre la gestion de ces derniers. Ce projet a été recommencé après une semaine de mon arrivée ce qui m’a permis d’avoir le temps d’y faire quelques réalisations.
La réalisation du deuxième projet par contre m’a été entièrement confiée.
II. Présentation de la problématique
-Les développeurs étaient très occupés avec la réalisation de l’agenda électronique et gestion des calendriers, il y avait donc un manque de plusieurs pages qui devaient normalement être développé en premier notamment celle de l’accueil.
-Mettre en place une plateforme web qui intervient de manière dynamique entre les chercheurs et offreurs d’emplois.
III. Déroulement de stage
1. Environnement de travail
Un petit bureau dans la même salle des développeurs a été mis à ma disposition avec une machine HP sous le système d’exploitation Windows 7 et avec une configuration largement suffisante pour développer à l’aise.

2. Semainier
Pour avoir une idée plus précise de mon travail tout au long de ce stage, voici un diagramme de Gantt qui résume le déroulement des missions que j’ai réalisé.

Mon stage s’est décliné en différentes phases :
• Jaune : En début de stage c’est une phase de découverte de l’entreprise et du projet, ainsi que la réalisation de ma première tâche.
• Bleu : Deuxièmement, l’apprentissage du Framework Symfony et le développement de trois pages sur le nouveau site.
• Rouge : Le développement de l’application WEB de recherche et offre d’emploi.
Sans oublier que tout au long de mon stage, des réunions et des mises au point régulières avec mes collègues de travail et le gérant pour s’assurer que le travail que je fais répond bien aux attentes.
IV. Méthodologie de travail et outils de résolution

1. Les outils utilisé
Afin de bien mener à la réalisation de toutes mes tâches, j’ai utilisé :
• PhpStorm comme IDE pour le développement
• Firefox Developer Edition comme navigateur
• SVN versionning
• Direct Admin & FileZilla pour l’hébergement de mon projet sur le serveur
• Cmder pour une console de commande plus propre visuellement
Je vais maintenant présenter les langages ainsi que les technologies utilisés :
• HTML (HyperText Markup Language)
Issu d’une des trois inventions à la base du World Wide Web, le HTML a été créé dans le but de pouvoir concevoir des pages web.
• CSS
Il permet un gain de temps lors d’une modification à porter sur le style, le CSS défini dans une feuille de style externe, évite une redondance de classes identiques, tout en clarifiant le code.
• JavaScript
JavaScript permet de programmer des scripts, il est à ce jour utilisé majoritairement sur Internet, conjointement aux pages Web (HTML ou XHTML).
• JQUERY
Le Framework JQuery est une bibliothèque logicielle, rapide, concise et très riche conçue pour les programmeurs JavaScript. Elle facilite le développement rapide d\’applications web, et simplifie de nombreuses tâches en réduisant la quantité de code que nous avons besoin d\’écrire.
• BootStrap
Bootstrap est un Framework (une librairie) développé par Twitter et mis en open-source en février 2012.
Ce langage utilise les principaux langages de développement web (HTML, CSS & JavaScript). Il s’agit d’un code qui raccourcit différentes fonctionnalités permettant au développeur de gagner du temps et de réaliser simplement des codes complexes (animation, carrousel, tableau, histogramme, …) et tout en réduisant la quantité de caractères requis, et donc le poids du site web.
• AJAX
Ajax (Asynchronous JavaScript and XML) est la combinaison de technologies telles que JavaScript et CSS, dans le but de réaliser des applications internet riche sans recharger toute la page. Cela offre une maniabilité et un confort d\’utilisation supérieur.
• PHP
Ressemblant syntaxiquement et structurellement au JAVA, proche du C, le PHP se distingue de ces langages par le fait qu’il puisse intégrer du code HTML.
Il permet de rendre un site internet dynamique et reste très convoité par son utilité à communiquer avec des bases de données.
• SQL
Étant à la fois un langage de définition, de manipulation, de contrôle des données et d’interrogation de la base de données, il est notamment très utilisé pour communiquer avec les données d’un site web.
• Symfony
Symfony est un Framework qui représente un ensemble de composants (aussi appelés librairies) PHP autonomes qui peuvent être utilisés dans des projets web privé ou open source. Mais c’est également un puissant Framework PHP développé par la société française : SensioLabs. Il permet de réaliser des sites internet dynamiques de manière rapide, structurée, et clair. Les développeurs peuvent travailler sur ce Framework très facilement, seuls ou en équipe, grâce à la facilité de prise en main.

V. Conception & Diagrammes :
1. Modification sur l’ancienne Page d’accueil :
La tâche était de rajouter des formulaires sur la page d’accueil qui vont permettre à l’utilisateur de faire des modifications sur les textes affichés sur la page.
a. Diagramme de cas d’utilisation :

b. Description des scénarios :
Cas d’utilisation : Customiser sa page d’accueil
Acteurs Client Admin
Précondition L’utilisateur doit être connecté
Scénario -L’utilisateur choisi la section souhaitée et clic sur modifier.
-L’application affichera un formulaire.
-L’utilisateur saisit les données et valide le formulaire.
-Le système enregistre les données et met à jour la page.

c. Diagramme de séquence :
3 formulaires ont été créés sur la page pour permettre la modification de ces sections, pour mieux comprendre le traitement voici un diagramme de séquence qui le résume.

d. Diagramme de classe :
Il y avait 3 sections à modifier donc j’ai ajouté 3 tables sur la base de données, comme indiqué sur ce diagramme de classe :

2. Création de la nouvelle page d’accueil & notifications:
Mes collègues développeur ont eu la décision de recommencer le projet en entier avec le Framework Symfony, vu que le directeur a proposé une nouvelle Template qui de toute façon pour l’intégrer fallait recommencer la quasi-totalité du code. Comme ça au moins le projet sera mieux organisé et facile à travailler en équipe qu’en PHP seul.
Le projet a été initialisé, et on m’a confié le développement de la page d’accueil.
Cette fois-ci, les formulaires de personnalisations ne sont pas présents, car ils vont être développés sur une autre page.
Le seul traitement qui a été fait sur la page est celui des switchers orange à gauche de la page. Ces derniers permettent à l’utilisateur d’activer ou désactiver les notifications pour ces clients d’un simple clic puis une confirmation.
a. Diagramme de cas d’utilisation :

b. Description des scénarios :
 Page d’accueil :
Cas d’utilisation : Changer notifications
Acteurs Tous les Acteurs
Précondition L’utilisateur doit être connecté
Scénario -L’utilisateur active ou désactive une notification.
-L’application demande une confirmation.
-L’utilisateur confirme positivement son choix, sinon Exp1
-L’application enregistre le changement sur la base de données et notifie l’utilisateur du succès.

Les Exceptions
Exp1 L’application remet le switcher à son état initial.
 Page de notifications :
Cas d’utilisation : Changer notifications
Acteurs Tous les Acteurs
Précondition L’utilisateur doit être connecté
Scénario -L’utilisateur active ou désactive une notification.
-L’application enregistre le changement sur la base de données et notifie l’utilisateur du succès.

c. Diagramme de séquence :
Ceci est un diagramme de séquence qui décrit le fonctionnement de la page d’accueil :
Pour la page de notifications, les mêmes entités ont été utilisées.
Il y a par contre quelques différences donc voici le diagramme de séquence pour cette page :

d. Diagramme de classe :
Seulement deux entités ont été utilisées sur la page.

Chaque utilisateur a un provider qui contiendra ces paramètres de notifications.
3. Création de la page de statistiques :
Le but de cette page est d’avoir une représentation statistique de nombre de rendez-vous pour chaque agenda avec 4 différents graphes dans une période défini par l’utilisateur.
a. Diagramme de cas d’utilisation :

b. Description des scénarios :
Cas d’utilisation : Afficher Statistiques
Acteurs Tous les Acteurs
Précondition L’utilisateur doit être connecté
Scénario -L’utilisateur défini la plage de dates.
-L’application récupère les statistiques des RDV pendant la durée sélectionnée et l’affiche sur les graphes.

c. Diagramme de séquence :
Voici le diagramme de séquence dédié à cette page :

d. Diagramme de classe :
Les données sont fournies par la table rdv.

4. Création de la plateforme JOB :
Le but de cette Application WEB est de mettre en relation les chercheurs et offreurs d’emplois.
a. Diagramme de cas d’utilisation :
Pour mieux comprendre comment la plateforme fonctionne, voici un diagramme de cas d’utilisation globale :

b. Description des scénarios :
Cas d’utilisation : Gestion du CV
Acteurs User chercheur
Précondition L’utilisateur doit être connecté
Scénario -L’utilisateur choisi d’ajouter ou de supprimer une formation, expérience, compétence ou récompense.
-L’application vérifie qu’aucun champ n’est vide en cas d’ajout, sinon Exp.
-L’application enregistre l’ajout ou suppression sur la base de données et fait la mise à jour sur la page.

Cas d’utilisation : Recherche d’emploi
Acteurs Tous les acteurs
Précondition L’utilisateur doit être connecté
Scénario -L’utilisateur rentre les informations sur les champs de recherche.
-l’application renvoie l’utilisateur vers la page du résultat.

Cas d’utilisation : Candidature
Acteurs User chercheur
Précondition L’utilisateur doit être connecté
Scénario Nominal Demander un emploi -L’utilisateur candidate à une offre en cliquant sur le bouton vert s’il ne l’a pas déjà fait.
-L’application enregistre la demande.
Supprime une demande -L’utilisateur supprime une demande depuis sa page de profil.
-L’application supprime la demande de la base de données et met à jour l’affichage des demandes.

Cas d’utilisation : Gestion du profil
Acteurs Tous les acteurs
Précondition L’utilisateur doit être connecté
Scénario -L’utilisateur saisit les informations ou l’image sur le formulaire de profil.
-L’application vérifie que les champs sont bien remplis, sinon Exp.
-L’application enregistre les données et notifie l’utilisateur.

Cas d’utilisation : Publication des offres
Acteurs User professionnel
Précondition L’utilisateur doit être connecté
Scénario -L’utilisateur saisit les informations sur le formulaire de publication.
-L’application vérifie que les champs sont bien remplis, sinon Exp.
-l’application publie l’offre d’emploi et notifie l’utilisateur.

Cas d’utilisation : Gestion des offres
Acteurs User Professionnel
Précondition L’utilisateur doit être connecté
Scénario Nominal Consultation des demandes -L’utilisateur choisi une des offres qu’il a postée.
-L’application affiche tous les candidats de ce poste.
-L’utilisateur clic sur l’un des candidats.
-L’application affiche son CV.

Supprime une offre -L’utilisateur supprime une offre depuis sa page de profil.
-L’application supprime la demande de la base de données et met à jour l’affichage des demandes.

Les Exceptions
Exp Redemande à l’utilisateur de correctement remplir le formulaire.
c. Diagramme de classes
Ce diagramme représente la structure du système sous forme de classes et de relations entre classes qui constituent la base pour la génération de code et pour la génération des schémas de bases de données.

VI. Mise en œuvre de la solution proposée
1. Modification sur l’ancienne page d’accueil
La première tâche n’était pas compliqué à réaliser, suffisait de créer 3 tables qui vont stoker chaqu’une une partie des modifications à apporter sur la page d’accueil
3 formulaires ont été créés pour permettre ces modifications.
Ces formulaires seront affichés sur une fenêtre lorsque l’utilisateur cliquera sur le bouton de modification d’une des 3 sections.
Il aura un affichage comme celui-là :

Dès que l’utilisateur fait des modifications, ces derniers sont enregistrés dans la base de données et affichés à la place du texte par défaut de la page d’accueil, ceci permettra à chaque administrateur de customiser sa page d’accueil comme il voudra.
Jusqu’à présent, rien n’est difficile, je n’ai pas eu de problème pour créer ce formulaire et le traitement qu’il fait.
Par contre, fallait respecter une nouvelle contrainte (que je n’ai jamais vécu) celle de valider les formulaires et de faire la nouvelle mise en page sans que le navigateur ne rafraîchisse la page. C’était l’occasion idéale d’apprendre Jquery et de faire mes premiers codes avec cette bibliothèque.
La fonctionnalité AJAX de cette bibliothèque permettra donc d’envoyer une requête POST qui contient le formulaire au fichier PHP qui fait le traitement et de recevoir une réponse de ce dernier.

2. Création de la nouvelle page d’accueil :
Voici le résultat final de la page d’accueil :
J’ai utilisé les classes bootstrap pour avoir une bonne organisation de la page ainsi une bonne responsivité.
Toutes les traductions de la page ont été faites grâce au bundle de traduction utilisé sur ce projet (Lexik).
6 types de notifications sont modifiables (activer ou désactiver), chaqu’une est assigné à son Switcher.
Ce qui permet d’enregistrer les états de chaque type de notifications (activé ou désactivé) facilement dans la base de données.
Une fenêtre de confirmation s’affiche lors du clique :

3. Création de la page de notifications :
Voici l’interface finale de la page de notifications :

Dans cette page, l’utilisateur peut modifier ces notifications comme dans l’accueil avec des paramétrages de plus.
L’utilisateur aura des détails qu’il peut afficher en un petit click s’il veut des explications de chaque block.
Lors de l’activation ou désactivation d’une notification, le navigateur bloque l’accès au block dédié en attendant que la requête se lance correctement comme sur la capture d’écran suivante pour éviter un spam sur les switchers qui peut charger le serveur.

Ainsi qu’un petit toast qui s’affiche à la fin pour confirmer l’enregistrement de la requête.

4. Création de la page de Statistiques :
Par défaut, la page charge les statistiques des derniers 30 jours (date de serveur)

Ces statistiques sont fournies de la table RDV ou sont enregistrées tous les rendez-vous crées par les utilisateurs avec tous leurs données nécessaires.
En changeant de date

Afin de réaliser ceci, j’ai utilisé les bibliothèques Morris de Bootstrap.
Dès que l’utilisateur choisit la plage de dates voulu et valide avec le bouton, 4 requêtes POST sont envoyé avec AJAX chaqu’un à sa fonction dédié pour récupérer les données de la base et les avoir comme résultat puis mettre à jour les graphes.
Voici un exemple de réponse JSON qui est ensuite lit par JS et attribué au graphe :

5. Le projet :
a. Choix de Symfony
Le projet suivant m’a été accordé avec la possibilité de la travailler avec n’importe quelle technologie ou Framework.
J’ai vite fait mon choix qui est de le réaliser avec Symfony pour les raisons suivantes :
• Les premières tâches mon permis d’apprendre le fonctionnement du Framework, donc le développement avec sera plus rapide.
• Symfony prend en charge de la création des entités et leurs persistances dans la base de manière sécurisée.
• Pas besoin de faire les requêtes SQL et les formulaires.
• Grace à tous les bundles disponibles, plusieurs fonctionnalités peuvent être réalisées en un temps record.
• Le Framework est open source, donc aucune crainte à se retrouver sans solutions.

• Le Framework permet aussi de travailler dans le respect des bonnes pratiques, notamment avec le design pattern MVC, acronyme de l’expression (Modèle – Vue – Contrôleur). MVC est un modèle qui a fait ses preuves et qui s\’avère indispensable à connaitre dans le domaine de la programmation.
Modèle : Le modèle se charge d\’interagir avec la base de données. On y retrouve les requêtes SQL que nous aurons définies.
Vue : La vue se charge d\’afficher les données qui lui ont été fournies. En aucun cas, la vue ne doit pas effectuer de traitement sur les données.
Contrôleur : Le contrôleur est le centre de notre architecture MVC. Il reçoit la requête HTTP, l\’interprète et coordonne le tout. Il se charge de demander au modèle les données puis effectue si demandé des traitements dessus afin d\’envoyer à la vue les données à afficher et de retourner une réponse à l\’émetteur de la requête.

b. Présentation des bundles utilisées :
• FOS User Bundle :
Un bundle qui permet de gérer des utilisateurs très rapidement, ainsi que les formulaires associés, et le tout sécurisé.
• Vich Uploader Bundle :
Ce bundle permet l’Upload des fichiers ou images et leurs persistances en base de données de manière efficace.

• FOS Js Routing Bundle
L’utilité de ce bundle, c’est qu’il permet d’utiliser les routes sur le code java script pour générer les URL sur les requêtes AJAX.
• Nzo Url Encryptor Bundle
Ce bundle est utilisé pour crypter les paramètres envoyé en URL pour des raisons de sécurité.
c. Les traitements
Voici la page d’accueil (pas final) du projet :

On peut faire la recherche d’un emploi depuis cette page sans avoir besoin à se connecter.
En haut de la page, on peut cliquer sur Register ou Sign in pour se connecter.
Lors du clique sur Register par exemple une fenêtre avec un formulaire d’inscription va s’afficher sur la page comme ceci :

Pour l’inscription l’utilisateur peut donc choisir le type de compte qu’il aura (candidat ou employeur)
Après la connexion, l’utilisateur peut se diriger vers la page de profil, elle se représente de cette manière :

Celle-ci grâce au menu à gauche permet d’accéder à plusieurs fonctionnalités sans avoir besoin de changer de page.
Premièrement, l’employeur peut modifier les informations de son Entreprise, faire une proposition d’emploi grâce à ce formulaire :

Ainsi que gérer ces offres d’emploi et les candidats :

En cliquant sur les Applications, une nouvelle page affichera tous les candidats qui ont postulé pour l’emploi.

Un simple clic lui permettre d’afficher le CV du candidat.
En attendant la décision de la mise en pages du CV, j’ai fait un modèle rapidement pour bien s’assurer du fonctionnement.

Restant sur la page du profil, mais cette fois du côté d’un utilisateur normal.
Il aura la possibilité de modifier ces informations lui aussi, ainsi que la possibilité de customisé son CV.

Dès que le CV est enregistré il pourra être consulté par les entreprises ou l’utilisateur a fait sa candidature.
Et de voir ces demandes d’emploi :

Retour à la page d’accueil, ou l’on peut faire la recherche d’un emploi sur 3 critères (le titre, la ville et le secteur)
La requête SQL dédiée va chercher sur la base de données tous les emplois contenant dans leurs titres, ville et secteur ce que l’utilisateur à rentrer sur les champs de recherche.

Voici un exemple de résultat de recherche :

J’ai mis en place un système de pagination, une page ne peut afficher qu’un nombre limité des offres (j’ai fait 5 ici pour s’assurer que ça fonctionne), faudra donc cliquer sur suivant pour afficher les autres offres.

Ainsi que l’utilisateur peut trier ces recherches par l’ancienneté de l’offre et le type de contrat.
Le footer de la page contient également une liste des secteurs et des villes avec les plus d’offres d’emploi (calculé de manière dynamique par la base de données).
Si l’utilisateur clique sur le nom de l’entreprise en bleu, il aura une page descriptif de celle-ci.

S’il clique sur l’offre, la page d’emploi va s’afficher avec tous les informations concernant l’offre (salaire, date de publication, deadline de candidature, nombres de candidatures, description d’emploi, niveau d’étude requis et l’expérience requise)

Reste qu’à candidater à l’offre, pour le faire, il faut être connecté en tant que candidat et cliquer sur le bouton vert.
Un utilisateur ne peut pas faire une demande sur la même offre plusieurs fois, le bouton donc se bloque est deviens gris s’il la déjà fait.
S’il veut annuler sa candidature, il doit se rendre à la partie profil et la supprimer.
d. Hébergement
J’ai hébergé ce projet sur le lien : http://procudev8.be qui est un domaine acheté par l’entreprise pour faire les tests.
Chaque semaine, je fais une mise à jour pour permettre au gérant de voir l’avancement du projet et avoir ces remarques et propositions.
L’outil DirectAdmin permet facilement l’upload des fichiers sur le serveur avec son interface ainsi que la gestion de la base de données.

VII. Impacte de la solution sur l’entreprise
Toutes les tâches réalisées sont des travaux en moins pour les développeurs…

VIII. Perspectives
Le projet est toujours en cours de développement, de ce fait, j’ai prolongé mon stage d’un moi afin de finaliser ce projet et s’assurer qu’il peut être facilement modifié par les autres développeurs avant de quitter l’entreprise
Conclusion

J’ai effectué mon stage de fin d’études au sein de l’entreprise Quintel SARL. Ma mission était au début de participer au développement d’un projet WEB en cours de réalisation avec une équipe de 4 développeurs, et par la suite travailler sur un deuxième projet tout entier.
J’ai capitalisé sur mes compétences acquises au cours de ma formation, mais j’ai dû faire preuve de partialité afin de les exploiter dans un milieu professionnel, et sélectionner ce dont j’avais besoin pour réaliser ce qui était attendu de moi.
C’est ainsi que j’ai aussi complété ma formation en me formant à l’utilisation de JQuery, AJAX et le Framework Symfony.
Au final, toutes mes tâches ont été réalisées et les résultats répondent bien aux exigences demandés.
N’ayant jamais travaillé dans un milieu professionnel, ce stage m’a permis une première expérience enrichissante et très impliquée du monde professionnel que je considère un premier pas vers la réalisation de mon projet professionnel de devenir un chef de projet web et mobile.

Bibliographie & Webographie

Documentation Symfony :
– https://symfony.com/
Documentation générale :
– https://stackoverflow.com/
– https://openclassrooms.com/fr/
– https://www.w3schools.com/
Documentation Bootstrap :
– https://getbootstrap.com/

Glossaire

Framework
Bundle
footer
Bundle