Rapport de Stage : Projet de développement

Web

Stagiaire :
Chebbi Talel Karim
1 ère année cycle ingénieur
Réseaux informatiques et télécommunications

Superviseur :
Abdelhamid Turki
Signature de Superviseur:
Table des matières
1. Introduction ................................................................................................................. 3

2. Présentation entreprise ................................................................................................ 3

3. Projet de stage ............................................................................................................. 4
3.1. Objectifs de stage ................................................................................................. 4
3.2. Etapes du projet .................................................................................................... 4

4.1. Site Web de presse : ............................................................................................. 5

4.1.1. Réalisation du site ................................................................................................................. 5
4.1.2. Connexion ............................................................................................................................. 5
4.2. Site Web de connexion : ...................................................................................... 9

4.2.1. Base de données .................................................................................................................... 9

4.2.2. Affichage données ................................................................................................................. 9
4.3. API ..................................................................................................................... 10
4.3.1. Affichage données ............................................................................................................... 10
4.3.2. Requête SQL ....................................................................................................................... 10
4.3.3. Client et Fonction API ......................................................................................................... 11
4.4. Dialogue ............................................................................................................. 12
4.4.1. Site de presse et API ............................................................................................................ 12
4.4.2. Token API ........................................................................................................................... 13

4.4.3. Redirection et gestion des cookies ...................................................................................... 14

4.4.4. Parcours des informations ................................................................................................... 14
4.4. Mise en place VPS ............................................................................................. 14
4. Conclusion ................................................................................................................ 15
5.1. Bilan objectifs .................................................................................................... 15
5.2. Perpectives TFE ................................................................................................. 15

1. Introduction:
Au cours de ma première année de cycle d'ingénierie, j'ai eu l'opportunité de
réaliser un stage de développement web chez Gomycode, une entreprise
reconnue dans le domaine de la formation en technologies numériques. Ce
stage, d'une durée d'un mois, s'est déroulé du 14 juin au 14 juillet, et m'a
permis d'acquérir une expérience pratique dans le domaine du développement
web tout en approfondissant mes connaissances théoriques.
Dans le cadre de ma formation d'ingénieur en informatique, il est essentiel
d'appliquer les concepts théoriques appris en classe à des projets réels. C'est
dans cette optique que j'ai choisi Gomycode, une entreprise réputée pour son
expertise dans le développement web, afin de développer mes compétences
techniques et de découvrir l'environnement professionnel dans lequel je
pourrais évoluer à l'avenir.
L'objectif principal de mon stage était de mettre en pratique mes connaissances
en développement web acquises jusqu'à présent et de contribuer à des projets
concrets au sein de l'entreprise. J'ai été affecté à une équipe expérimentée de
développeurs web, qui m'a encadré tout au long de mon stage, me guidant dans
mes tâches et me fournissant des retours constructifs.
2. Présentation entreprise
Gomycode est une entreprise renommée dans le domaine de la formation en
technologies numériques et du développement web. Fondée en 2014, elle s'est
rapidement imposée comme un acteur majeur de l'écosystème numérique,
offrant des programmes de formation novateurs et adaptés aux besoins du
marché de l'emploi.
Gomycode se distingue par son approche pratique et axée sur les compétences.
L'entreprise vise à former une nouvelle génération de professionnels du
numérique en mettant l'accent sur l'apprentissage par la pratique et la
réalisation de projets concrets. Les formations proposées couvrent un large
éventail de domaines, tels que le développement web, le développement
mobile, la data science, l'intelligence artificielle, le design graphique, le
marketing digital, et bien d'autres encore.
L'entreprise se caractérise par une équipe passionnée et hautement qualifiée,
composée d'experts du secteur du numérique. Les formateurs de Gomycode
sont des professionnels expérimentés, issus de diverses entreprises et startups,
ce qui leur permet de partager des connaissances approfondies et des bonnes
pratiques du secteur.
Gomycode se démarque également par son environnement d'apprentissage
dynamique et collaboratif. Les apprenants bénéficient
d'un accompagnement personnalisé et d'un suivi régulier de leur progression.
L'entreprise encourage la créativité, l'innovation et l'esprit d'entrepreneuriat
chez ses apprenants, en les incitant à développer leurs propres projets et à
explorer de nouvelles idées.
Un autre aspect remarquable de Gomycode est sa volonté de favoriser
l'employabilité de ses apprenants. L'entreprise entretient des partenariats
stratégiques avec des acteurs majeurs du secteur, tel que

des entreprises technologiques, des agences de développement web et des

startups innovantes. Ces partenariats offrent aux apprenants de Gomycode des
opportunités d'emploi et de stages, renforçant ainsi leur intégration dans le
marché du travail.
En plus de ses programmes de formation, Gomycode organise régulièrement
des événements, des ateliers et des hackathons, rassemblant ainsi la
communauté numérique et favorisant les échanges entre les apprenants, les
experts du secteur et les entreprises partenaires.
L'impact de Gomycode ne se limite pas à un seul pays. L'entreprise a étendu son
influence à l'échelle internationale, en établissant des centres de formation
dans plusieurs pays, offrant ainsi une expérience d'apprentissage accessible à
tous.

3.1. Objectifs du stage

Dans l'ensemble, le stage vise à réaliser un projet conforme aux exigences du
maître de stage et de l'entreprise. Il s'agit de créer un projet à partir de zéro, en
concevant son fonctionnement, en le structurant et en le programmant pour
qu'il soit opérationnel.
Le stage présenté ici implique la création d'un prototype d'un service web,
programmé en PHP avec une base de données MySQL, ainsi que quelques
courts extraits de code en JavaScript. L'objectif est de développer un prototype
permettant à un site web de se connecter à un compte existant sur le site du
prototype, à l'instar des méthodes de connexion utilisées par Google, qui
permettent de se connecter à de nombreux sites web via un compte Google.
La communication entre les deux sites web se fera par le biais d'une 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 du stage consistera à créer un site web de presse à des fins
de test, qui comprendra des articles simulés. Ce site web simulera donc le
premier site qui demandera aux utilisateurs de se connecter. Il aura sa propre
base de données SQL contenant les données relatives aux articles, ainsi que les
informations des utilisateurs qui préfèrent s'abonner directement au premier
site plutôt que de passer par le deuxième site. Ces utilisateurs auront donc un
accès complet au site de presse.

La deuxième partie du stage consistera à créer le deuxième site, chargé de gérer

les connexions des utilisateurs et de suivre les articles achetés par chaque
utilisateur. Cela permettra de diffuser les bons articles aux bons utilisateurs. Ce
site aura également une base de données SQL contenant les informations des
utilisateurs et les transactions effectuées par ces derniers pour accéder à leurs
articles.

Enfin, la dernière partie du stage consistera à créer l'API qui permettra aux deux
sites de collaborer, permettant ainsi la lecture des articles sur le premier site en
passant par la connexion sur le deuxième site.
3.2. Etapes du projet
a) Site Web de presse : BelgiumPost
Réaliser le site avec liste des articles
Gestion de la connexion et article Payant
b) Site Web de connexion : MyPress
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 presse
Gestion connexion inter-sites
Etablissement fonction secondaire
e) Mise en place sur VPS
4.1. Site Web de presse :
4.1.1. Réalisation du site
L'objectif est de créer un site web de presse qui simule les entreprises de presse
clientes du projet MyPress. Les articles du site de presse sont stockés dans une
base de données SQL, où les informations de base de chaque article sont
enregistrées, telles que le titre, l'auteur, la date et le contenu. La création des
articles se fait directement dans la base de données, car aucune fonction n'a été
développée pour enregistrer un article depuis le site web. Cette fonctionnalité
n'est pas considérée comme faisant partie intégrante du projet MyPress.
Le site de presse affiche une liste d'articles sur sa page d'accueil, ne montrant
que les titres. Chaque article de la liste est lié à sa page individuelle, où le
contenu complet de l'article, ainsi que des informations sur l'auteur et la date
de publication, sont affichés.
4.1.2. Connexion
Certains articles sont gratuits et accessibles à tous les utilisateurs, tandis que
d'autres sont payants et nécessitent une connexion pour y accéder. Cette
distinction entre articles gratuits et payants est enregistrée dans la base de
données. Lorsqu'un utilisateur non connecté essaie d'accéder à un article
payant, il ne peut voir que les 400 premiers caractères de l'article. Le reste de
l'article est masqué, et le site de presse invite l'utilisateur à se connecter pour
accéder à l'intégralité de l'article.
Un bouton de connexion est disponible sur le site de presse, permettant
d'afficher une fenêtre modale où l'utilisateur peut se connecter ou s'inscrire.
L'inscription sur le site de presse simule l'achat d'un abonnement, et une fois
connecté, l'utilisateur a accès à tous les articles du site de presse.
Un autre bouton permet de rediriger l'utilisateur vers le site MyPress. Les détails
de la connexion à MyPress seront expliqués dans une autre section.

4.2. Site Web de connexion :

4.2.1. Base de données
MyPress agit comme une plateforme intermédiaire entre les utilisateurs et les
articles de presse, permettant aux utilisateurs de se connecter et d'accéder aux
articles disponibles sur d'autres sites de presse. Lorsqu'un utilisateur s'inscrit, il
dispose de crédits qu'il peut dépenser pour acheter l'accès à un article de
presse. L'utilisateur peut recharger son compte en crédits sur le site MyPress en
échange d'une certaine somme d'argent.
MyPress possède une base de données qui contient les données des utilisateurs
enregistrés sur la plateforme. Elle stocke également des informations sur les
articles de presse auxquels MyPress peut donner accès aux utilisateurs
connectés, en précisant le site de presse d'origine de chaque article. De plus,
une table enregistre les transactions effectuées par les utilisateurs lorsqu'ils
achètent un article, contenant des informations telles que l'utilisateur, l'article,
le site de presse propriétaire de l'article, la date d'achat et un statut indiquant si
l'article a été payé ou non.
4.2.2. Affichage des données
Une fois connecté, un utilisateur qui accède au site de MyPress verra
les informations de base de son compte utilisateur, telles que le nom
du compte et ses crédits restants. Il aura la possibilité de se
déconnecter ou de recharger son compte pour obtenir davantage de
crédits.
4.3. API
4.3.1. Affichage des données
L'API permet au site de presse (représenté dans ce projet par le site de
test BelgiumPost) de récupérer des informations pour gérer la
connexion et l'accès à certains articles. Plusieurs fichiers de
configuration de l'API sont utilisés, notamment pour la connexion à la
base de données de MyPress et la création de l'objet Client, qui
contient certains attributs par défaut et permet de stocker les
informations d'un client. Ces informations peuvent être récupérées
depuis la base de données de MyPress ou depuis le site MyPress, puis
enregistrées dans la base de données lorsqu'un nouveau client s'inscrit
sur le site MyPress, par exemple.
4.3.2. Requête SQL
Les requêtes d'informations vers la base de données de MyPress sont
effectuées en SQL. Ces requêtes sont envoyées via des requêtes HTTP à
l'API du site MyPress. Le code qui gère la requête est encodé comme
une fonction de l'objet Client. Cependant, appeler une fonction de
l'objet Client ne suffit pas à utiliser l'API correctement, car il est
nécessaire de gérer la réponse et l'accès aux paramètres utilisés lors de
l'utilisation de l'API et de l'exécution de la requête SQL. Pour cela,
chaque requête HTTP est liée à un fichier de l'API qui la gère.
4.3.3. Client et Fonction API
Pour utiliser l'API correctement, chaque fonction de l'API est
représentée par un fichier PHP. Ce fichier gère la demande en
provenance du site de presse, exécute la demande et envoie une
réponse au format JSON, permettant au site de presse d'adapter son
comportement en fonction de la réponse reçue. Les fichiers de
fonctions de l'API établissent d'abord la connexion avec la base de
données MyPress pour récupérer ou stocker des informations. Ensuite,
ils gèrent les paramètres utilisés par l'API lors de l'exécution de la
requête, tels que des identifiants de client ou d'article, ou des
informations de connexion (nom du compte et mot de passe). Une fois
les paramètres obtenus, le code les traite et appelle une fonction de
l'objet Client de l'API, transmettant ainsi les paramètres à cette
fonction qui effectue une requête SQL avec la base de données
MyPress. Après l'exécution de la requête, le code du fichier PHP vérifie
le contenu des informations renvoyées par la requête, les traite si
nécessaire, puis les encode en JSON dans la réponse de l'API pour les
transmettre au site de presse. La réponse peut contenir les
informations demandées, un message "OK" indiquant que tout s'est
déroulé normalement, ou un message d'erreur.
4.4. Dialogue
4.4.1. Site de presse et API
Le site de presse doit installer une partie de code qui utilise l'API et
gère son fonctionnement en fonction de la réponse de celle-ci. Ce code
peut être installé soit dans le contrôleur du site de presse, soit en
JavaScript, en fonction du rôle de cette partie de code. Le code installé
dans le contrôleur est exécuté côté serveur, du côté du site de presse,
tandis que le code installé en JavaScript est exécuté côté client, c'est-à-
dire sur l'ordinateur de l'utilisateur, sans passer par le site de presse.
Côté serveur, le code concerne principalement les fonctions
permettant d'effectuer des requêtes HTTP vers l'API de MyPress, soit
pour identifier le site de presse et récupérer le jeton de sécurité, soit
pour vérifier l'accès d'un client à certains articles du site de presse.
Côté client, la partie de code réside principalement dans le bouton qui
interagit avec le site MyPress via des redirections, permettant au client
d'acheter un article avec son compte MyPress.
4.4.2. Token API
L'API joue un rôle central dans la communication entre les deux sites de presse,
permettant des redirections directes vers l'URL de l'un des deux sites.
Cependant, il est important de vérifier quel site a le droit d'utiliser l'API et ses
fonctions. Cette vérification garantit que seuls les sites autorisés peuvent
accéder à l'API et l'utiliser légitimement, évitant ainsi les abus ou les attaques
qui pourraient perturber son fonctionnement.
En plus des paramètres éventuellement requis, les fonctions de l'API demandent
également un jeton (token) qui doit être connu uniquement par le site de presse
et MyPress. Ce jeton sert à authentifier le site de presse et, s'il est correct,
permet l'accès aux fonctions de l'API. Si le jeton est incorrect, la requête HTTP
est interrompue et la réponse de l'API indique que le jeton est invalide.
La mise en place de ce jeton se fait lorsque MyPress et le site de presse
collaborent et acceptent de travailler ensemble. Dans la base de données de
MyPress, le fournisseur (site de presse) est enregistré avec un nom de compte
et un mot de passe. Ces informations de connexion sont transmises de manière
privée au site de presse. Lorsque le site de presse souhaite se connecter, il inclut
ces informations dans sa requête. Ensuite, l'API vérifie ces informations et, si
elles sont correctes, renvoie le jeton au site de presse.
Le site de presse stocke le jeton dans un fichier, tandis que du côté de MyPress,
il est stocké dans la base de données.
4.4.3. Redirection et gestion des cookies
Une autre méthode utilisée pour permettre la communication entre les deux
sites consiste en des redirections directes vers le site concerné.
Lorsqu'un client souhaite se connecter à son compte MyPress pour lire un
article sur le site de presse, il est redirigé vers le site MyPress où il entre ses
identifiants de connexion.
Une fois connecté, MyPress enregistre l'ID du client dans un cookie, puis
redirige le client vers le site de presse en incluant l'ID du client en tant que
paramètre, afin que le site de presse puisse également enregistrer l'ID du client.
De plus, cette redirection permet également au client d'acheter un article et de
valider la transaction sur le site MyPress. Cette redirection est réalisée en
utilisant JavaScript afin d'éviter de passer par le serveur du site de presse
Lors de cette redirection, le client envoie plusieurs données, telles que des
identifiants (ID) et une URL de retour. Cela permet à MyPress d'effectuer l'achat
et de savoir où renvoyer le client une fois l'achat effectué.
4.4.4. Parcours des informations

Ce schéma illustre le parcours des données qui transitent entre le client, le site
de presse et le projet MyPress
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 MyPress, 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.
Le site de presse ainsi que le site MyPress ont été déplacés vers 2 VPS afin de
pouvoir évaluer l’état du projet dans des conditions réelles d’utilisation et
modifier ainsi les 2 sites afin que ceux-ci puissent fonctionner malgré qu’ils
soient sur 2 domaines différents.
Pour configurer les VPS, il fallut d’abord mettre à jour « apt-get », ensuite les
VPS vont principalement fonctionner avec PHP, les services LAMP et
l’utilisation de git afin de gérer le projet.
Git étant préinstallé, l’installation de LAMP permet alors d’utiliser PHP,
Apache et gérer la base de données avec MySQL. Il fallut changer quelque
fichier afin de configurer LAMP pour qu’il fonctionne sur le VPS.
Une fois les VPS configurés, les tests du fonctionnement des 2 sites mis en
lumière des erreurs liés au chemin des fichiers et à l’utilisation des cookies qui
à présent, sont séparée sur 2 domaines différents, et non plus tous ensemble
sur « Localhost »
Une fois ses erreurs réparés, les 2 sites fonctionnaient et montraient alors la
faisabilité du prototype.
5. Conclusion
5.1. Bilan objectifs
Le site Web de presse de test à été correctement programmé, est
fonctionnel et permet de tester le reste du projet en se basant sur ce site
de test.
Le site MyPress permet bien d’accéder aux informations du compte
d’un client, après s’être connecté et de recharger les crédits de celui-ci.
Le dialogue entre les 2 sites a été mis en place, que ce soit à travers une
API qui va permettre de gérer les accès ou via les redirections dans
lesquels certaines informations sont stockées, le dialogue est établi et
permet aux 2 sites de communiquer.
Un client peut accéder et acheter un article du site de presse, grâce à
son compte MyPress
L’implémentation des boutons MyPress dans le site de presse a été
simplifiée et permet au site de presse de travailler directement avec une
partie du programme MyPress
La mise en place sur les VPS s’est faite correctement et permet aux 2
sites de profiter d’un domaine différent sans pour autant nuire au
fonctionnement du projet.
5.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 MyPress