Projet NFactoryJob

Projet de groupe réalisé par :

Maxence BOSSIN
Anthony CHEVALIER en tant que chef de projet
Léonard JOUEN
Romain LALLEMENT

Description du besoin client

Une agence de recrutement cherche à moderniser sa lecture de CV.

Avant, les candidats devaient envoyer des CV manuscrits à l'agence ou bien des PDF en ligne par mail.

Elle desire numériser son processus pour qu'un utilisateur puisse directement saisir son CV en ligne.
Une fois le CV créé par l'utilsateur (connecté ou non) les recruteurs du cabinet pourront le générer en PDF.
L'utilisateur pourra également le générer en PDF pour ces besoins personnels.

Réponse au besoin

Compte

Nous avons créé un site WEB via WORDPRESS

Il y a trois rôles d'utlisateur :

• Administrateur => Gestion des comptes via l'interface de wordpress
• Recruteur => Possiblité de trier les CV correspondant au besoin des entreprises | possibilité de télécharger les CV en PDF
• Chercheur d'emploi => Possibilité de s'enregister pour garder en mémoire ces informations | créer un CV

Technologies Utilisés

Backend

• PHP avec wordpress, interagit avec le serveur. Il nous a également servi à créer les API pour l'ajax.

FrontEnd

• HTML Il permet d'enrichir un texte avec des informations structurelles, sémantiques et de présentation.
• SASS librairie CSS, stylise le HTML
• JQUERY librairie Javascript, interaction avec les pages WEB

Système de gestion de base de données

• PhpMyAdmin est une application Web de gestion pour les systèmes de gestion de base de donnée

• UML de la base de données NfactoryJob

Mise en place du projet

Installation de WORDPRESS

L'installation en local

Installation de XAMPP, simule un serveur en local sur windows

Installation de Xampp (téléchargement de la version correspondant à votre système d'exploitation) : https://www.apachefriends.org/fr/index.html
Ensuite Allumer XAMMP cliquer sur RUN pour Apache et MySql

Pour WINDOW : Une fois l'installation fini un dossier xampp s'est créé à l'endroit où vous l'avez installé. Normalement, il se situe sur votre disque C à l'emplacement : C:\xampp\htdocs

Installation de MAMP, simule un serveur en local sur IOS

Installation de MAMP (téléchargement de la version correspondant à votre système d'exploitation) : https://www.mamp.info/en/downloads/
Ensuite Allumer MAMP cliquer sur Démarrer les serveurs pour lancez MySQL et Apache

Installation de WORDPRESS

Une fois fait, vous devez installer l'archive de WORDPRESS

Rendez-vous sur ce site : https://fr.wordpress.org/download/ Il faut descendre un peu et cliquer sur le bouton "Télecharger WordPress 5.9" à noter que la version peut changer, ça n'a pas d'importance.

Vous allez ensuite telercharger un dossiers au format ZIP
Ouvrez le zip qu'on vient de telercharger
Si vous n'avez pas de quoi décomprésser un fichier ZIP vous pouvez installer WINRAR (gratuit) : https://www.win-rar.com/start.html?&L=10

Ensuite vous devez décomprésser le fichier dans votre dossier htdocs

Installation de WORDPRESS

Téléchargement du thème NFactoryJob

Via GITHUB :

Bien vérifier que vous êtes sur la branche Master comme l'encadré en rouge en haut à droite.
Ensuite cliquer sur 'code' une petite fenêtre va s'ouvrir. Alors cliquer sur les deux carrés surlignés en rouge sur l'image.

Via ZIP :

Bien vérifier que vous êtes sur la branche Master comme l'encadré en rouge en haut à droite.
Ensuite cliquer sur code une petite fenêtre va s'ouvrir.
Alors cliquer sur 'Download ZIP' qui se trouve dans l'encadré blanc.

Installation du thème NFactoryJob

Rendez-vous dans votre explorateur de fichier et allez là ou vous voulez créer votre site.
Après cette étape nous allons commencer l'installation de WORDPRESS :

Installation de Wordpress :

Précédemment nous vous avons demandé de télécharger : il est temps de les utiliser.

En premier lieu, nous allons installer les fichiers de wordpress dans le dossier de notre site.
Pour cela vous allez devoir ouvrir via (WinRar ou 7Zip) l'archive que vous avez téléchargé tout à l'heure.

Dans cette archive vous allez trouver un fichier "wordpress".
Ce fichier contient tout ce que le site à besoin pour fonctionner.

Maintenant, il va falloir mettre le dossier dans le dossier de votre site.
Pour cela vous allez copier le dossier dans l'archive et le copier dans le dossier de votre site.

Installation du thème NFactoryJob

Pour installez le thème vous avez donc deux façons :

Via GitHub :

Pour installez le thème via GitHub il va falloir ouvrir le terminal de commandes :
Dans ce terminal vous allez devoir marquer le chemin vers le thème.
Pas de panique on vous aide :
Tout d'abord, il va falloir marquer "cd" puis le chemin vers votre dossier racine du site, ce qui donne dans votre invite de commandes :

Une fois cette étape faite, vous allez pouvoir cloner le thème : pour cela toujours dans l'invite de commande vous allez devoir marquer :

Une fois tous les étapes exécutées le thème est installé.

Via ZIP :

Un peu plus tôt, je vous avais dit que vous pouviez télécharger une archive pour mettre en place le thème, il est donc temps de l'installer.

Pour cela rendez-vous dans votre explorateur de fichier dans le dossier de votre site.
Ensuite, il va falloir se rendre dans le dossier des thèmes, pour cela vous allez devoir rentrer dans le dossier 'wp-content' / 'themes'.

Une fois dans ce dossier vous allez retrouver :

Ensuite, comme pour le fichier wordpress vous allez devoir ouvrir l'archive ou ce trouve le thème et glisser le thème avec les autres thèmes par défaut de wordpress.

Ce qui doit donner :

Une fois tous les étapes exécutées le thème est installé.

Mise en place de la BDD

Pour la mise en place de la BDD vous allez devoir retrouner sur XAMPP et appuyez sur "Admin" au niveau de "MySQL" (encadré bleu) :

Vous allez avoir une page de "phpMyAdmin" qui s'est donc ouverte :

Je vais donc maintenant vous expliquez comment créé une base de données pour wordpress :

Création d'une base de données

• Première étape : vous allez devoir appuyer sur le bouton "Nouvelle base de données" sur la gauche du site.

• Seconde étape : vous allez devoir créer la base de données :
  (Attention au nom de votre base de données, il faut éviter tous ce qui est espace, majuscule, accent).
  Vous marquez par exemple le nom de votre site en remplaçant donc les espaces par des "_".
  Puis vous appuyer sur le bouton "Créer".

Retenez bien le nom de votre base de données, elle va être importante pour la suite de l'installation du site.

Installation de Wordpress

Nous y sommes : dernière étape de l'installation de wordpress, après cette étape vous pourrez accéder à votre site.
Nous allons faire la dernière installation de wordpress.
Pour cela, il va falloir retourner sur votre XAMPP et cette fois-ci appuyer sur le bouton Admin de la catégorie Apache (encadré vert)

Après cette étape, vous avez donc lancé votre "LocalHost" ce qui vous permet de voir votre site sans le mettre en ligne.

Une fois que vous êtes dans votre localhost, il suffit de cliquer en direction des fichiers de votre site.

Une fois que vous êtes au bon endroit une page d'installation de wordpress va s'afficher et là, rien de plus simple, il suffit de suivre ce que dit l'installateur.

Attention cependant certaines choses sont à changer avec précaution !

Pour le nom de la base de données, il faut bien mettre le nom de votre site.
Pour les identifiants, nous sommes en local, pour les utilisateurs windows seul l'identifiant est à changer pas le mot de passe !
Pour les utilisateurs windows :
Identifiant : root
Mot de passe :

Pour les utilisateurs d'ordinateur sur IOS donc sur MAC l'identifiant est le même mais il faut appliquer root au mot de passe donc :

L'Adresse de la base de données ne doit pas être changé et pour finir le préfixe des tables doit être changé par "nfj_" le site à étais pensé avec ce prefix de table si celui la n'est pas bien rentré cela peux causer des bugs sur le site.

Une fois ses informations inscrites vous pouvez passez à la prochaine étape :

Pour cette étape vous allez simplement devoir enregistrer le nom du site, vos identifiants et un mot de passe :

Attention au mot de passe que vous mettez.
Bien mettre un mot de passe dont vous pouvez vous rappeler mais qui reste assez complexe pour éviter que n'importe qui vienne sur la partie admin de votre site !

Installation du thème NFactoryJob

Bien! Vous êtes maintenant dans la partie administateur du site.
Avant toute chose nous allons choisir le bon thème pour notre site pour cela rien de plus simple.
Il vous suffit de cliquer sur "Apparence" à droite de votre écran.
Une fois cela fait 4 thèmes s'offrent à vous mais nous allons prendre celui qui nous interesse c'est à dire le thème NfactoryJob.
Pour l'activer, il suffit de passer votre curseur sur le thème et de cliquez sur "Activer".

Configuration du thème NFactoryJob

Une fois cette étape faite, nous allons faire une partie assez simple qui va faire en sorte que le site fonctionne bien, pour cela rendez-vous dans l'onglet "Réglages" puis "Permaliens".

Vous allez donc devoir cliquer sur le bouton à gauche de "Titre de la publication" comme sur l'exemple ci dessous :

N'oubliez pas d'enregistrer les modifications et maintenant je vous laisse aller dans l'onglet "Pages".

Une fois dans cet onglet, deux pages par défaut seront déjà présentes mais elle ne nous interesse pas.
Nous allons donc créer notre page principale.
Pour cela en haut de la page vous allez devoir cliquez sur "Ajouter".

Une fois sur cette page vous allez pouvoir donc suivre certaines étapes pour la création de la page.
Première chose au niveau de "Saisissez le titre" vous allez pouvoir noté "HomePage" puis sur la droite de la page dans le petit menu dans la catégorie "Modèle" sélectionnez le modèle de page "HomePage" puis vous pouvez publier votre page avec le bouton en haut à droite du site.

Pour le bon fonctionnement du site vous allez devoir repêter plusieur fois cette étape pour crée les pages suivantes :

. Inscription (modele de page : inscription)
. Connexion (modele de page : connexion)
. Editor (modele de page : editor)
. Dashboard (modele de page : dashboard)
<<<<<<< HEAD . Logout (modele de page : lougout) . API (modele de page : API) . 404 (modele de page : 404)

. logout (modele de page : lougout)

387c93b3733e940c82aff455c51a5d86a6439979

Après cette étape, nous allons mettre la page que nous venons de créer en page principale. Pour cela, je vous laisse aller au niveau de l'onglet "Réglages" puis dans "Lecture".

Ce paramètre va dire au site quelle page afficher en premier pour cela il va falloir cliquez sur le bouton "Une page statique" et choisir comme 'Page d'accueil' la page "HomePage" comme indiqué ci dessous :

Encore une fois n'oubliez pas d'enregistrer les modifications.

Comment passer un compte en recruteur

Information complémentaire

Enlever les thèmes qui nous servent à rien

Dans cette étapes je vais vous expliquer comment enlever dans nos fichier les thèmes qui nous servent à rien et garder une interface admin propore.

Pour cela rendez-vous dans le dossier thèmes de votre site qui se trouve pour rappel dans le dossier "wordpress\wp-content\themes"
Une fois dans ce dossier nous allons donc enlevez les thèmes qui ne sont pas utile pour votre site :
Avant la manipulation nous retrouvont donc 4 dossiers et un fichier "index" . Pour notre site seul le dossier "NFactoryJob" nous interesse donc les trois autres fichiers nous allons pouvoirs les supprimer mais attention à ne pas supprimer le fichier "index" il est important pour le fonctionnement du site.

Une fois la manipulation faite votre fichier thème devrais resembler à l'exemple ci-dessus.

Mettre une images en avant

Pour ce site, certaines pages donc la page inscription et la page connexion utilisent le fonctionnement de l'image mise en avant nous allons donc voir comment faire cela :

Pour mettre une image en avant rendez-vous en premier lieux dans l'espace administrateur puis dans l'onglet "Médias".

Dans cette onglet vous allez pouvoir ajouter l'image que vous voulez mettre en avant pour cela cliquer sur le bouton "Ajouter" puis sélectionnez l'image que vous voulais dans vos fichiers.

Une fois cette étapes faites rendez-vous dans l'éditeur de la page inscription qui se trouve dans l'onglet "Pages".

Une fois dans l'onglet page vous n'avez plus qu'a cliquer sur la page que vous voulez modifier. Dans cette exemple nous allons modifier la page inscription.

Une fois dans l'éditeur mettre une image en avant est simple, sur la droite de l'éditeur vous avez un menu, cherchez "Image mise en avant" puis cliquez dessus puis sur "Definir l'image mise en avant", choisissez l'une des images dans votre Médiathèque une fois fait vous pouvez cliquer sur Définir l'image mise en avant en bas à droite et voila votre image est mise en avant. Maintenant vous pouvez faire la même chose pour la page connexion.