RAPPORT DE STAGE - Kevin WERTHEkevin-werthe.fr/ppe/RapportKevinWerthe-min.pdfRAPPORT DE STAGE SESSION 2019 WERTHE Kevin LYCEE SAINT JOHN-PERSE BTS SERVICE INFORMATIQUE AUX ORGANSATIONS

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



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.



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



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



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.



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.



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à :



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.



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,



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.



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.



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.



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é :



« 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.



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.

Documents

RAPPORT DE STAGE - Kevin WERTHEkevin-werthe.fr/ppe/RapportKevinWerthe-min.pdfRAPPORT DE STAGE SESSION 2019 WERTHE Kevin LYCEE SAINT JOHN-PERSE BTS SERVICE INFORMATIQUE AUX ORGANSATIONS