rapport de stage - kevin werthekevin-werthe.fr/ppe/rapportkevinwerthe-min.pdfrapport de stage...
TRANSCRIPT
RAPPORT DE STAGE
SESSION 2019
WERTHE Kevin
LYCEE SAINT JOHN-PERSE
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 2
SOMMAIRE
1. REMERCIEMENT .............................................................................................................................. 3
2. PRESENTATION DE L’ENTREPRISE ................................................................................................. 4
2.1. Que fait mon entreprise ? ....................................................................................................... 4
2.2. Historique ................................................................................................................................ 4
2.3. Analyse financière de l’entreprise ........................................................................................... 4
2.4. Présentation des différents services de l’entreprise ............................................................... 5
2.4.1. Le service où je travaille .................................................................................................. 5
Organigramme ................................................................................................................................ 5
3. Activités Réalisées EN ENTREPRISE ......................................................................................... 6
3.1. Les tâches réalisées ................................................................................................................. 6
3.1.1. Préparation de mon environnement ............................................................................... 6
3.1.2. Utilisation de Skrollr ........................................................................................................ 7
3.1.3. Création d’une page web ................................................................................................ 8
3.2. L’activité principale ............................................................................................................... 11
3.2.1. Problèmes rencontrés ................................................................................................... 11
4. CONCLUSION GENERALE ................................................................................................................ 12
5. ANNEXES ........................................................................................................................................ 13
5.1. Annexe 1 ................................................................................................................................ 13
5.1.1. Installation ..................................................................................................................... 13
5.1.2. Présentation .................................................................................................................. 13
5.2. Annexe 2 ................................................................................................................................ 14
5.2.1. Git .................................................................................................................................. 14
5.2.2. Yarn ................................................................................................................................ 14
5.2.3. Composer ...................................................................................................................... 14
5.2.4. PHP ................................................................................................................................ 15
5.2.5. Yarn Watch .................................................................................................................... 16
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 3
1. REMERCIEMENT
Il n'est jamais facile pour un étudiant de trouver un stage, c'est pourquoi je remercie l'entreprise
Wehub de m'avoir accueilli durant ce mois de Juin
Je tiens à remercier tout particulièrement Mr. Loustaunau, qui m'a accordé sa confiance et
attribué des missions valorisantes durant ce stage. Qui a su trouver du temps pour m'aider dans
certaines missions.
Faire mon stage de cette fin de première année dans votre entreprise a été un plaisir, j'ai pu
apprendre beaucoup grâce à vous, et j'ai surtout été conforté dans mon projet professionnel, ce qui
est un aboutissement de mon cursus.
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 4
2. PRESENTATION DE L’ENTREPRISE
2.1. Que fait mon entreprise ? L’entreprise qui m’as accueilli pour faire mon stage, pratique plusieurs activités. Ils font
principalement du développement (vitrine, e-commerce, intranet et application), ils pratiquent aussi
le graphisme. Puis enfin, ils font du référencement ainsi que de l’hébergement web.
2.2. Historique
DATES IMPORTANTES EXPLICATIONS
26/10/16 Création de la société 01/04/17 Ouverture du coworking à Lescar 15/01/18 Fermeture du coworking à Lescar
2.3. Analyse financière de l’entreprise
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 5
2.4. Présentation des différents services de l’entreprise
2.4.1. Le service où je travaille
Organigramme
Paul LoustaunauDévellopeur full-stack, Graphiste
WERTHE Kévin Stagiaire en dévellopement
Etienne PeretDévellopeur full-stack
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 6
3. Activités Réalisées EN ENTREPRISE
3.1. Les tâches réalisées
3.1.1. Préparation de mon environnement
Pour pouvoir avancer dans mon stage, j’ai dû tout d’abord créer un environnement sous le
système d’exploitation Linux. Pourquoi Linux ? Car l’installation des différents logiciels, et des
différentes commandes avec lesquelles ils me permettent de lancer le SGBD par exemple, ou bien
démarrer le visuel du site en local plus facilement que sur la plateforme Windows.
Le logiciel que j’ai utilisé pour mon environnement de codage est Microsoft Visual Studio
Code. Ce logiciel est très pratique pour le codage, car nous pouvons ajouter plusieurs extensions sur
celui-ci. Comme par exemple le terminal qui est très utile, et permettra de taper directement mes
lignes de commandes.
Présentation du logiciel et installation des commandes utiles. Voir Annexe 1.
Une fois avoir installé mon logiciel, il va nous falloir installer Apache2 qui est un serveur HTTP. Et
il va aussi nous falloir installer MySQL, qui permet d’administrer des bases de données.
Une fois que la configuration est terminé, il ne me reste plus qu’à faire la commande : « service
mysql start ». Nous aurons ensuite accès à PHPMyAdmin, pour ensuite créer une base de donnée,
celle-ci sera automatiquement remplie grâce à ce fichier qui envoie directement toutes les tables
dont le site aura besoins. On insère un fichier directement dans le dossier du site.
Quand cette partie de la préparation de mon environnement est terminé,
j’ai ensuite du installer d’autres composants qui me permettrons d’accéder directement au site en
local et voir en temps réel les changements fait dessus.
Les commandes d’installation. Voir Annexe 2.
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 7
3.1.2. Utilisation de Skrollr
Une fois que tous ces composants sont installé, on lance la commande « yarn watch », je vais
devoir installer WordPress, puis ensuite j’arrive sur mon site en « localhost ».
Maintenant que mon site est fonctionnel en local, j’ai donc apporté des modifications sur
celui-ci.
En page d’accueil, un carrousel qui change de photo toutes les trois secondes, a été mise en
place pour mettre en avant des photos de maisons, qui montre bien que le site appartient à une
agence immobilière. Et sur les autres pages, nous avons le même type de style, mais ce sont de
simple images fixes. La modification que j’ai dû apporter, et d’incorporer un skrollr.
Un skrollr permet de donner des effets sur une page internet en scrollant.
Pour pouvoir apporter ces changements, je me suis donc rapporter à une documentation que
l’on m’a donnée.
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 8
Cette documentation va me permettre de connaitre à partir de quels nombres de pixels
l’effet commence ou disparait.
Ici on peut donc lire, quand la page de l’effet est présente, rien ne se passe, puis quand on
scrolle, l’effet s’anime vers le bas et vers le haut.
3.1.3. Création d’une page web
Ensuite on m’a demandé de créer intégralement une page internet, que ce soit dans le côté
front-end que dans le côté back-end. Tout d’abord je dois recréer mon environnement
(voir annexe2). Puis ensuite je commence à créer mon code en HTML et en utilisant Bootstrap.
Bootstrap me permet d’avoir plusieurs outils qui seront utile pour le design du site. Celui-ci a été
créé par Twitter.
Dans la balise <header>, on peut voir que j’utilise quatre classes appartenant à Bootstrap. La classe
« container-fluid » permet à notre contenu de prendre toute la page de bord à bord. Ici on parle de la
bannière bleue.
Ensuite nous avons la classe « container » celle-ci va permettre de centrer notre contenu, dans
ce code je veux donc centrer mon titre. Vu que Bootstrap travaille sur une grille, il faut donc lui
indiquer la classe « row » qui permet de le placer sur la première ligne de la grille. Et ensuite mon
titre est séparé en deux, donc pour ce faire je mets une partie de mon titre dans une classe « col-md-
6 » et l’autre partie dans une autre classe « col-md-6 ». Ces classes représentent trois choses
différentes. « col » veut dire que je prends deux colonnes différentes, « md » représente la taille de
l’écran, ici c’est la taille medium, il existe aussi ces tailles-là :
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 9
Puis le « 6 » représente la taille de la colonne. Ici c’est divisé en deux, car la totalité de nos colonnes
ne doivent pas dépasser 12.
Ensuite, je vais devoir placer un carousel. Un carousel permet de faire défiler plusieurs images.
Toujours à l’aide de Bootstrap, on va utiliser ses classes, qui permettrons de le créer simplement, il
me suffira juste de mettre les liens de mes images.
Carousel du site internet
Après avoir fait l’en-tête et le carousel, je m’attaque à la barre de navigation du site. Pour cela,
j’utilise un outil de Bootstrap pour avoir un menu pré-fait niveau design, il me suffira de rajouter les
noms de mes différentes pages. Les classes utilisées servent pour ce design que j’ai choisi.
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 10
Une fois que ceci est fait, on peut maintenant passer aux articles, et description que l’on veut mettre
dans notre page web. J’utilise donc les balises que j’avais expliqué un peu plus haut qui me
permettrons de créer les articles comme présentés sur l’image ci-dessous.
Puis enfin, je m’occupe
de la partie de bas de
page grâce à la balise
<footer> et bien sûr
avec les classes citées
plus haut.
Maintenant que j’ai
produit ma page web
en HTML et CSS, on va
maintenant tous passer en PHP et créer notre Template qui sera ici « France Libris », pour ensuite
retrouver, toutes les informations du site sur le back-end. Pour cela, j’ai utilisé WordPress, qui est le
système de gestion de contenu le plus courant. Pour que tout fonctionne correctement j’ai dû
installer une extension WordPress qui se nomme Advanced Custom Fields (ACF). Cette extension
nous fait gagner du temps, il suffit juste de créer un groupe de champs avec tous les renseignements
que l’on veut lui attribuer.
Pour l’image ci-dessus, nous avons un groupe de champs, pour le carousel,
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 11
3.2. L’activité principale
3.2.1. Problèmes rencontrés
Plusieurs problèmes ont été rencontrés, tout d’abord pour le premier projet sur lequel j’ai
travaillé, une erreur est apparue sur la première page de mon serveur en local.
J’ai eu cette erreur car il me manquait un autre composant, pour que celui-ci fonctionne. Il m’a fallu
installer ACF (Advanced Custom Fields) celui-ci est une extension de WordPress très importante, car
elle permet d’apporter beaucoup de modifications en plus que WordPress ne peut pas faire. Une fois
installer, le site pourra donc apparaitre comme ici.
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 12
4. CONCLUSION GENERALE
Ce stage a été très enrichissant pour moi car il m’a permis de découvrir dans le détail le métier de
développeur web. Il m’a permis de participer concrètement à ses enjeux au travers de mes missions
variées comme celle de la création intégrale d’une page, aussi bien du côté front-end que back-end,
que j’ai particulièrement apprécié. Ce stage m’a aussi permis de comprendre qu’il faut constamment
se mettre à jour sur l’actualité du codage. Car c’est un des métiers où les nouvelles technologies
progressent rapidement.
Fort de cette expérience et en réponse à ses enjeux, j’aimerai beaucoup par la suite continuer mes
études dans ce domaine très intéressant, qui m’a apporté beaucoup de savoir.
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 13
5. ANNEXES
5.1. Annexe 1
5.1.1. Installation
Pour l’installation de Microsoft Visual Studio Code, je l’ai installé sous forme de ligne de code, car
nous nous trouvons sur Linux, et c’est la méthode la plus simple pour pouvoir installer des logiciels.
- Tour d’abord on télécharge le fichier de studio code en .deb (compatible Ubuntu).
- Ensuite on ouvre le terminal et on entre la commande :
« sudo dpkg –i code_1.24.0-1528306776_amd64.deb ». Cette commande
permet d’utiliser le mode administrateur pour dépaqueter les paquets du
fichiers.
- Une fois que les paquets sont dépaquetés, on installe les dépendances, avec cette ligne de
commande : « sudo apt-get install –f ».
- Après l’installation des dépendances, on passe à la mise à jour des paquets du cache avec :
« sudo apt-get update ». Puis l’installation du paquet que l’on veut utiliser avec : « sudo apt-get
install code ». A partir de là, le logiciel sera fonctionnel.
5.1.2. Présentation
Dans ce logiciel, nous avons accès à plusieurs extensions que l’on peut télécharger. Ce qui fait
que ce logiciel peut être au goût de tout le monde. L’extension qui met la plus utile est celle du
terminal.
Grâce à lui, nous
n’avons pas besoin
d’ouvrir le terminal
de l’ordinateur, ce
qui me fait gagner
du temps, pour
mettre rapidement
la commande en « localhost » par exemple, ou d’autres installation de commandes qui pourrons me
servir dans le futur pour mon environnement.
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 14
Le logiciel se présente comme ceci, en haut à gauche, nous avons les différentes extensions que l’on
a choisi, la partie centrale permet de coder, puis en bas nous avons le terminal. Tout à fait à gauche,
nous avons une barre avec 5 logos :
Cette icône permet d’avoir accès à toutes mes pages de codes qui se présente
comme sur l’image à droite :
La loupe permet de faire une recherche, d’une commande par exemple.
Celle-ci permet d’écraser la sauvegarde de toutes les pages que nous avons
modifiées. La petite notification en bleu montre d’ailleurs le nombre de pages que
nous avons modifiées.
Cette icône permettra de débuguer le code.
Enfin la dernière icône permet d’avoir accès aux différentes extensions, pour en installer par
exemple.
5.2. Annexe 2
5.2.1. Git
Git est très simple à installer sur Linux, il n’a besoin que d’une seule ligne de commande qui
est : « sudo apt-get install git ».
5.2.2. Yarn
Pour l’installation de Yarn, je dois d’abord configurer le référentiel en deux lignes de
commandes :
Après avoir configuré le référentiel, on doit installer une version récente de Node.js (logiciel
libre orienté vers les réseaux pour monter en charge) avec la commande : « sudo apt-get update &&
sudo apt-get install yarn ».
Une fois que cela est fait, je vérifie avec « yarn –version » s’il me propose bien la dernière
version. Puis enfin pour installer tous ces composants suffit juste de faire la commande « yarn ».
5.2.3. Composer
Tout d’abord, pour que Composer s’installe rapidement, on doit exécuter le script suivant,
dans le dossier intéressé :
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 15
« php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" » // Télécharger le
programme d'installation dans le répertoire en cours
« php -r "if (hash_file('SHA384', 'composer-setup.php') ===
'544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f23
3e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-
setup.php'); } echo PHP_EOL;" » // Vérifie l’installateur
« php composer-setup.php » // Exécution du programme
« php -r "unlink('composer-setup.php');" » // Supprime le programme d’installation
Une fois que l’installation est terminé, je fais la commande « composer self-update » qui
permettra par la suite de le mettre à jour. Puis enfin, je fais la commande « composer » pour voir s’il
s’est bien installé correctement.
5.2.4. PHP
Pour activer php, il faudra se placer dans le dossier public du projet, puis lancer la commande
« php –S 127.0.0.1 :8000 » et il lancera automatiquement le serveur php.
BTS SERVICE INFORMATIQUE AUX ORGANSATIONS
WERTHE Kévin Page 16
5.2.5. Yarn Watch
Yarn étant déjà installé, il suffira juste de faire la commande « yarn watch » et celui-ci me
redirigera directement vers un navigateur. Bien sûr en aillant le php activé. Celui-ci me permettra de
lancer un proxy, qui me permettra à la suite de voir en temps réel, les modifications faites sur les
fichiers, directement sur la page web.