Rapport de Stage : à stryve solution morocco

(web creation)
Stagiaire : Superviseur :
El OUARDANI M’hamed Mr. KNTRATE Amine
1ème technician spécialisé
Développement Informatique
Maitre de stage :
Mr. KNTRATE Amine

2022-2023

1
Table des matières
1. Introduction ................................................................................................................. 2
2. Présentation entreprise ................................................................................................ 2
3. Projet de stage ............................................................................................................. 4
1. Objectifs de stage ................................................................................................. 4
2. Etapes du projet.................................................................................................... 5
4. Description du déroulement du stage.......................................................................... 6
1. Site Web de presse : ............................................................................................. 6
1. Réalisation du site ................................................................................................................. 6

2. API ..................................................................................................................... 7
1. Affichage données ............................................................................................................... 7
2. Requête SQL ....................................................................................................................... 7
3. Client et Fonction API......................................................................................................... 8

3. Dialogue ............................................................................................................. 9
1. Site de presse et API............................................................................................................ 9
2. Redirection et gestion des cookies ...................................................................................... 10
3. Parcours des informations ................................................................................................... 11

4. Mise en place VPS ............................................................................................. 12

5. Conclusion ................................................................................................................ 13
1. Bilan objectifs .................................................................................................... 13
2. Perpectives TFE ................................................................................................. 13
6. Outilis informatiues utitlises..........................................................................................14

2
1. Introduction

Afin de comprendre le monde de l'entreprise et de participer à

un vrai projet informatique, j'ai effectué un stage de 6
semaines chez STRVE MOROCCO, qui a débuté le
01/08/2023 et s'est terminé le 06/09/2023.

Durant cette formation, j'ai appris à travailler dans un

environnement technique dans lequel j'ai pu mettre en
application les notions théoriques et pratiques acquises à
MOULIK Group.
.

2. Présentation entreprise

Stryve solution est une société Royaume-Uni et dont le siège est

à London.

Cette société travaille de développement Web et de logiciels

au Maroc, axée sur une qualité supérieure et une gestion de
projet de première classe. Une entreprise qui comprend les
infrastructures et la cybersécurité. Une entreprise composée
de professionnels qui se soucient réellement de votre
entreprise.

3
3. Projet de stage

1. Objectifs de stage

De manière générale, la formation consiste à mettre en œuvre un projet qui répond aux
exigences du maître de formation et donc de l'entreprise. Il faut donc créer le projet à
partir de zéro, imaginer comment il va fonctionner, le structurer et le programmer pour
qu'il soit efficace.

La formation présentée ici consiste à créer un prototype de service web, programmé en

PHP avec une base de données MySQL ainsi que quelques petits morceaux de code en
JavaScript.

L'objectif est de créer un prototype permettant à un site Web de se connecter à un

compte sur le site prototype, similaire aux méthodes de contact utilisées par Google,
qui vous permettent de vous connecter à plusieurs sites Web via votre compte Google.

Le dialogue entre les deux sites se fera au travers d'une interface de programmation
d'application (API), qui gérera les demandes d'accès et autorisera ou non l'écriture dans
la base de données.

La première partie de la formation consiste à créer un site de journal démo, qui

contiendra des articles, simulant ainsi le premier site qui demandera aux utilisateurs de
se connecter. Celui-ci disposera de sa propre base de données SQL qui contiendra les
données relatives aux articles ainsi que les utilisateurs qui préfèrent s'abonner au
premier site plutôt que de passer par le deuxième site et auront donc un accès direct à
l'intégralité du site depuis le site presse.

La deuxième partie de la formation consiste ensuite à créer le deuxième site internet

qui s'occupera de la communication mais aussi de savoir quels utilisateurs réservent
une chambre ou une maison, afin de pouvoir diffuser les bons articles aux bons
utilisateurs. Celui-ci contient également la base de données SQL qui contient les
utilisateurs et les transactions que les utilisateurs ont effectuées pour accéder à leurs
articles.

La dernière partie de l'exercice consiste à créer une interface de programmation

d'application (API) qui permettra aux deux sites de travailler ensemble pour lire des
articles sur le premier site en se connectant au deuxième site.

4
 3.2. Etapes du projet
a) Site Web de presse : marrakechdiscovery.
 Réaliser le site avec liste des articles
 Gestion de la connexion et article Payant

b) Site Web de connexion : WPress

 Base de données
 Affichage données de l’utilisateur

c) API
 Création des fichiers de connections et
configuration de l’API
 Requête SQL
 Objet Client et fichiers de fonctions API

d) Dialogue
 Mise en place API sur site de wpress
 Gestion connexion inter-sites
 Etablissement fonction secondaire

e) Mise en place sur VPS

5
4. Description du déroulement du stage

1. Site Web de Wpress :

1. Réalisation du site

Il est nécessaire de créer un site Internet de presse qui simule les

entreprises de presse qui seront clientes du projet Wpress.

Ainsi les articles du site de presse sont dans une base de données SQL où
sont enregistrées les informations de base de l'article : titre, auteur, date et
contenu.

Les articles sont placés dans la base de données. En effet,

Aucune fonction n'est mise en œuvre pour enregistrer un article de journal
depuis le site, il faut se rendre directement dans la base de données.

Cette fonctionnalité est obsolète car elle ne fait pas partie du projet Wpress au
sens strict.

Le site journalistique affiche sur sa page d'accueil une liste d'articles contenant
le titre de l'article et un prix. Dans cette liste d'articles, il y a un lien qui permet
de lire le contenu de chaque article, ainsi que le nom de l'hôtel, sa localisation
et la date de publication.

6
 2. API

4.3.1. Affichage données

L'API permettra au site journalistique, représenté dans ce projet par

MarrakechDiscovery, de récupérer des informations afin de gérer la
communication et l'accès à des articles spécifiques.

Plusieurs fichiers permettent de configurer cette API, notamment la connexion

à la base de données WPress et la création d'un objet client, qui contiendra
certains attributs par défaut et qui permettra de stocker
Informations client.

Ces informations peuvent être récupérées depuis la base de données, mais

également depuis le site WPress, puis enregistrées dans la base de données,
par exemple lorsqu'un nouveau client souhaite s'inscrire sur le site WPress.

4.3.2. Requête SQL

Les demandes d'informations de la base de données WPress sont effectuées en

SQL. Ces requêtes sont effectuées via des requêtes HTTP dirigées vers l'API
WPress. Le code est codé pour traiter la demande.

Cependant, appeler la fonction objet client ne suffit pas pour utiliser

API correctement, où vous devez gérer la réponse mais également accéder aux
paramètres qui seront utilisés lors de l'utilisation de l'API et de l'exécution
d'une requête SQL.

Pour cela, chaque requête HTTP est liée à un fichier de l’API afin de gérer
celle-ci

7
 4.3.3. Client et Fonction API

Afin d’utiliser convenablement l’API, chaque fonction de celle-ci est

représentée par un fichier PHP, celui-ci va gérer la demande en provenance du
site de presse, exécuté la demande du site et envoyer une réponse au format
JSON permettant au site de presse de modifier son comportement en fonction
de la réponse reçue.

Les fichiers fonctions de l’API vont d’abord établir la connexion avec la base
de données Wpress, dans le but de récupérer ou y stocker des informations.
Ensuite, il faut gérer les paramètres qui seront utilisés par l’API lors du
déroulement de sa requête.

Le plus souvent, ces paramètres sont des ID de client ou d’article ou alors des
informations de connexion (nom de compte et mot de passe).

Une fois les paramètres obtenus, le code va les traiter et appeler une fonction
contenu dans l’objet Client de l’API, les paramètres seront alors transmis à la
fonction de l’objet Client qui va les utiliser afin de réaliser une requête SQL
avec la base de données MyPress.

Une fois la requête effectuée, le code du fichier PHP vérifie le contenu des
informations données par la requête, les traite si celles-ci doivent être traité et
va les encoder en JSON dans la réponse de l’API afin de les transmettre au
site de presse. Cependant, il faut avant cela interpréter ses informations afin
de renvoyer une réponse correcte au site de presse. Si la requête à échouer ou
que la base de données ne possèdent pas l’information demandée, la réponse
sera alors adaptée et permettra au site de presse d’agir en conséquence.

La réponse contient soit l’information demandée, soit un OK affirmant que

tout s’est passé normalement, soit un message d’erreur.

8
 3. Dialogue

1. Site de presse et API

Le site de presse doit installer une partie de code qui

va permettre d’utiliser l’API et gérer son
fonctionnement en fonction de la réponse de celle-ci.

Cette portion de code est installée soit dans le

Contrôleur du site de presse, soit dans un code
JavaScript. Pour déterminer dans quelle zone la portion
de code sera installée, il faut faire attention au rôle de
celle-ci.

En effet, le code installé dans le contrôleur sera exécuté

coté Serveur, et donc du côté du site de presse, alors
que le code qui est installé en JavaScript sera quant à
lui exécuté coté Client, et donc depuis l’ordinateur de
l’utilisateur, sans passé par le site de presse.

Côté serveur, la fonctionnalité principale permet

d'effectuer des requêtes HTTP vers l'API WPress, afin
que l'ID du site appuie et récupère le jeton de sécurité,
vérifiant ainsi que le client a accédé à certains articles
du site..

Pour le client, le morceau de code principal du bouton

qui se connecte au site Wpress via des redirections pour
permettre au client reserve une chamber...etc en
utilisant son compte Wpress. 9
 3.2. Redirection et gestion des cookies

Un autre moyen utilisé afin de faire dialoguer les 2 sites entre eux se fait grâce
à des redirections directement vers le site en question.

Lorsqu'un client souhaite se connecter à son compte WPress afin de lire un

article sur le site du journal, il est dirigé vers le site WPress où il saisit ses
identifiants afin de se connecter.

Une fois connecté, WPress enregistre l'identifiant du client qui vient

d'appeler dans un cookie, puis renvoie le client vers le site de presse en
utilisant l'identifiant client comme paramètre, afin que le client puisse
également enregistrer l'identifiant client.

De plus, cette redirection permet également au client d'acheter un article et de

valider la transaction sur le site WPress, cette redirection est donc codée en
JavaScript afin qu'elle ne doive pas passer par le serveur du site de presse.

Dans cette redirection, le client envoie également plusieurs données, comme

des identifiants et l'URL de retour pour permettre à WPress de traiter la
location mais aussi de savoir où renvoyer le client une fois la location
effectuée.

10
 3.3. Parcours des informations

Ce schéma illustre le parcours des données qui transitent entre le client, le site de Marrakechdiscovery et le projet WPress

 Les flèches simples désignent une simple redirection, sans paramètres stockés à l’intérieur.
 Les flèches de couleurs indiquent une redirection ou une requête/réponse à l’API du site WPress, chacune d’entre
elles contient des paramètres permettant d’effectuer la requête ou de traiter la demande via ces informations.
 Les Mots de couleurs sont les informations stockées dans ses redirections ou requête/réponse.

15
 5.5. Mise en place VPS
Le site a été déplacé vers 2 VPS afin qu'ils puissent évaluer l'état du projet en
conditions réelles d'utilisation et ainsi modifier le site pour qu'il puisse
fonctionner.

Pour configurer le VPS, il a d'abord fallu mettre à jour "apt-get", puis le VPS
fonctionnera principalement avec les services PHP et LAMP et utilisera git
pour la gestion de projet.

Puisque Git est préinstallé, l'installation de LAMP vous permet d'utiliser

PHP, Apache et de gérer la base de données avec MySQL. Certains
fichiers ont dû être modifiés pour configurer LAMP afin qu'il fonctionne
sur le VPS.

Une fois le VPS configuré, les tests des deux sites ont révélé des erreurs liées
au chemin du fichier et à l'utilisation des cookies qui étaient désormais séparés
sur deux domaines différents, et non plus tous ensemble sur « localhost ».

Une fois les bugs corrigés, le site a été mis en ligne et ils ont démontré la
faisabilité du prototype.

12
6. Conclusion

1. Bilan objectifs
 Le site de test presse est programmé correctement, est fonctionnel et
permet de tester le reste du projet à partir de ce site de test.

 WPress vous permet d'accéder aux informations du compte client

après vous être connecté.

 Un dialogue s'instaure entre le site et l'utilisateur, que ce soit via une

interface de programmation d'application (API) qui permettra de gérer
les accès ou via des redirections dans lesquelles sont stockées certaines
informations, le dialogue se crée et permet aux deux sites de
communiquer.

 Le client peut accéder à un article du site de presse et le louer via son

compte Wpress

 La mise en place des boutons WPress dans le site de presse a été

simplifiée et permet au site de presse de travailler directement avec une
partie du logiciel Wpress.

 Implémenté correctement sur un VPS, il permet aux deux sites de

bénéficier d'un domaine différent sans nuire au fonctionnement du
projet.

2. Perpectives TFE

 Tester le prototype sur un véritable site Web extérieur au projet et

permettre la compatibilité entre ceux-ci

 Etablir la demande des clients et la demande des sites de presse afin de

faire un état des lieux de ce qui intéresse les potentiels clients

 Continuer à travailler sur l’aspect sécurité afin de protéger le site

WPress
13
7. Outils informatiques utilises

CSS

JAVASCRIPT

PHP

HTML

SQL

JSON

VPS (virtual private

server)

WORDPRESS

14