Ingénierie des données

Sous le thème :

Création d’une application web Next-Js Qui communique

avec une API drupal.

Rèaliser par : Encadré par :

Abdennour Bourguig Aymane Saqi

Soutenu le 05/06/2018 devant la commision d’examen :

Pr.XXXXX Enseignant,ESTagadir Examinateur
Pr.XXXX Enseignant,EST agadir Examinateur

Année universitaire :2024/2025

 Dédicace
Quelque soit l’importance d’un travail exécuté, on ne peut le
dédier qu’aux personnes chères à notre cœur.
De ce fait,je dédie ce travail :

A’ mes chers parents,preuves de nom d’amour,pour leurs

sacrifices,Leur soutien moral
L’attention qu’ils eu envers moi.Que dieu les protège et leur
donne santé et longue vie.

A toute ma famille.

A tous mes amis,auxquels j’exprime ma plus grande gratitude.

2
 Remerciment

Je tiens,en première lieu,à remercier dieu le tout puissant,

le tout miséricordieux pour j’avoir aidés à mener à bien
mon projet.
Au terme de mon sujet de stage ,j’exprime ma gratitude et
mes sincères remerciments à tous ceux qui ont contribué à
la réalisation et à l’aboutissment de ce sujet.
Je tiens à exprimer toute ma reconnaissance à mon
encadrant
Aymane Saqi gérant de la société 5HOOKS de casablanca
pour j’avoir soutenus et encourages et ses conseils
pertinents qui j’ai été d’un apui considérable dans mon
démarche , ainsi que l’ensemble de 5HOOKS pour leur
précieuse aide et leur sympathie qui ont favorise notre
intégration dans l’entreprise.

3
 Sommaire
Dédicace… ............................................................................................................ 2
Remerciment ....................................................................................................... 3
Introduction… ...................................................................................................... 5
Chapitre 1 :Présentation de la société 5HOOKS ................................................. 6
Chapitre 2 :C’est quoi Next-Js ............................................................................. 7
I- Next-Js est un framework ?.................................................................... 9
1- La definition de Next-Js ................................................................. 9
2- l’utiliter de Next-JS .........................................................................9
3- Style et caractéristiques ............................................................... 9
I- introduction à l’api ............................................................................. 11
1- Comment fonctionne les api.................................................... 11
1- Types d'API ................................................................................ 12
III- Les principes de drupal .................................................................... 13
1- définir drupal .............................................................................. 14
2- Histoire de drupal...................................................................... 14
3- architecture de drupal................................................................ 15
Chapitre 3 :La création d’un front qui se connecte à l’api
http://sandbox.api.edujahiz.net/fr/ enfin de crée modifier un eleve ou le
supprimer .................................................................................................... 17
I- Préparation D’environnement de Travail ............................................ ….18
1- Se connecter à api avec un nom utilisateur et un mot de pass .....19
2- crée un élève ................................................................................ 21
3- modifier un élève ........................................................................ 24
4- supprimer un élevé ..................................................................... 24

4
 Introduction
Une application Web est un logiciel qui s'exécute dans votre
navigateur Web. Les entreprises doivent échanger des
informations et fournir des services à distance. Elles utilisent
des applications Web pour se connecter aux clients de
manière pratique et sécurisée. Les fonctionnalités de site Web
les plus courantes telles que les paniers d'achats, la recherche
et le filtrage de produits, la messagerie instantanée et les flux
d'actualités sur les réseaux sociaux sont de par leur
conception des applications Web, qui vous permettent
d'accéder à des fonctionnalités complexes sans installer ni
configurer de logiciel.
Dans mon projet,Je vais crée une application web qui
communique avec une api drupale.
Après toute période de stage le rapport vient en dernier lieu
afin de récapituler l’ensemble des travaux effectués lors de ce
stage ,ainsi il sera une archive de toute la période de stage
Le présent travail est organisée en trois parties distinctes :
i. Je commençerais tout d’abord par une présentation
globale de lentreprise 5HOOKS
ii. Puis j’entamerai la partie concernant le sujet à
developper durant la période du stage,qui est la création
dune appication web
iii. Enfin , Je présenterai les tâches que j’ai effectuées
pendant ce stage.

5
 Chapitre 1 :
Présentation de la société 5HOOKS

6
 La société 5HOOKS de Casablanca fondée le 23-03-2023 ses principaux
partenaire sont :OVH ,microsoft azure ,AWS,et voici les activités de 5HOOKS :

1. TECHNOLOGIES DE L’INFORMATION ET DE LA COMMUNICATION :

 Les Technologies de l’Information et de la Communication, souvent appelées TIC,

regroupent l’ensemble des outils, services et techniques utilisés pour produire,
stocker, traiter et transmettre des informations. Elles jouent un rôle essentiel dans
notre société moderne, que ce soit dans le domaine de l’éducation, de la santé, de
l’économie ou de la communication.
 Grâce aux TIC, il est aujourd’hui possible de communiquer instantanément à
travers le monde, d’accéder à une grande quantité d’informations via Internet, ou
encore de travailler à distance. Elles ont transformé les méthodes d’apprentissage,
facilité l’échange de données et renforcé la productivité des entreprises.

2.DEVELOPPEMENT INFORMATIQUE :

 Le développement informatique est un domaine clé des technologies numériques.

Il consiste à créer, concevoir et maintenir des logiciels, des applications ou des
sites web. Le développeur informatique utilise différents langages de
programmation comme Python, JavaScript, C++ ou Java pour répondre à des
besoins spécifiques, qu’ils soient personnels, professionnels ou industriels.
 Ce domaine est au cœur de la transformation digitale des entreprises. Il permet
d’automatiser des tâches, de proposer des services en ligne, de faciliter la
communication ou encore d’analyser des données à grande échelle. Le
développement informatique ne se limite pas à l’écriture de code : il comprend
aussi la phase de conception, les tests, la sécurité et la mise à jour des programmes.
 De plus, le développement est un secteur en constante évolution. Les nouvelles
technologies comme l’intelligence artificielle, le cloud computing ou les
applications mobiles poussent les développeurs à apprendre en permanence et à
s’adapter aux besoins changeants du marché.

3.CONSEIL EN SYSTEMES INFORMATIQUES :

 Le conseil en systèmes informatiques est un domaine qui consiste à accompagner

les entreprises dans le choix, l’organisation et l’optimisation de leurs outils
informatiques. Les consultants en informatique analysent les besoins d'une
structure, proposent des solutions techniques adaptées, et participent à la mise en
place de systèmes efficaces et sécurisés.
 Ils peuvent intervenir sur plusieurs aspects : choix du matériel, installation de
logiciels, gestion des réseaux, cybersécurité, migration vers le cloud, ou encore
transformation digitale. Leur rôle est stratégique : ils aident les entreprises à gagner
en performance, à réduire les coûts et à mieux exploiter les technologies
disponibles.

Et voici l'identifiant de l'entreprise 5HOOKS: 003193306000061

Et voici son logos :

77
Chapitre 2 :C’est quoi
Next-Js

8
I- Next-Js est un framework :
La différence entre React et Next-js et que Next js est une library
plus les outils.
1- Définition de NextJs :
NextJs est un framework gratuit et open source s’appuyant sur la
bibliothèque Javascript ,React et sur la technologie Node.js .Le
framework permet de créer des applications web universelles ou
parfois appelées isomorphiques
Next.js prend en charge les techniques de rendu des pages
web côté serveur (SSR : Server Side Rendering), le rendu statique
de pages web (SSG: Static Site Generation). Il prend également en
charge la génération hybride de pages web et / ou incrémentale
des pages (ISR: Incremental Static Generation)

2- Usages :
L'application construite avec Next.js peut être utilisée dans un
navigateur comme une application web monopage mais elle peut
aussi être utilisée comme un ensemble de pages générées par le
serveur
3- Style et caractéristiques :
Next.js supporte le stylisme avec CSS, ainsi que Scss et Sass pré-
compilés, CSS-in-JS et JSX stylisé. Il est également construit avec
TypeScript et une prise en charge intelligente du regroupement. Le
transpondeur SWC open source est utilisé pour convertir et
compiler le code en JavaScript qui peut être utilisé par le
navigateur. Webpack, un autre outil open source, est utilisé pour
fusionner les modules par la suite, mais il est maintenant remplacé
par TurboPack]. Tous ces outils sont utilisés avec npm dans le
terminal.

9
La principale caractéristique de Next.js est l'utilisation du rendu côté
serveur pour réduire la charge sur les navigateurs web et fournir une
sécurité accrue. Cela peut être fait pour n'importe quelle partie de
l'application ou pour l'ensemble du système, ce qui permet d'allouer
des pages à contenu riche pour un rendu côté serveur.
Cela peut également être fait pour les premières visites uniquement,
afin de réduire la charge des navigateurs web, qui n'ont pas à
charger toutes les ressources du site. La fonction de rechargement à
chaud détecte les modifications au fur et à mesure qu'elles sont
apportées et réaffiche les pages concernées, de sorte que le serveur
n'a pas besoin d'être redémarré. Cela permet aux modifications
apportées au code de l'application d'être reflétées immédiatement
dans le navigateur web, bien que certains navigateurs nécessitent un
rafraîchissement de la page. Le logiciel utilise le routage par page
pour faciliter la tâche du développeur et prend en charge le routage
dynamique. Parmi les autres fonctionnalités, citons le remplacement
à chaud des modules en temps réel, la division automatique du code
qui n'inclut que le code nécessaire au chargement de la page, et
l'extraction préalable des pages pour réduire les temps de
chargement.

10
II-I ntroduction à l’api :
En informatique, une interface de programmation
d’application ou interface de programmation applicative, souvent
désignée par le terme API pour « Application Programming Interface »
en anglais, est un ensemble normalisé de classes, de méthodes,
de fonctions et de constantes qui sert de façade par laquelle
un logiciel offre des services à d'autres logiciels. Elle est offerte par
une bibliothèque logicielle ou un service web, le plus souvent
accompagnée d'une description qui spécifie comment des
programmes « consommateurs » peuvent se servir des fonctionnalités
du programme « fournisseur ».
1- Comment fonctionne les api :
Il est utile de considérer la communication API comme une requête et
une réponse entre un client et un serveur. L'application qui soumet la
requête est le client, et le serveur fournit la réponse. L'API est le pont
qui établit la connexion entre eux.
Pour comprendre simplement le fonctionnement des API, prenons
l'exemple courant du traitement des paiements par des tiers.
Lorsqu'un utilisateur achète un produit sur un site commerce , celui-ci
peut l'inviter à « Payer avec PayPal » ou un autre système tiers. Cette
fonction s'appuie sur des API pour établir la connexion.
 Lorsque l'acheteur clique sur le bouton de paiement, un appel
API est envoyé pour récupérer les informations. Il s'agit de la
requête. Cette requête est traitée depuis une application vers le
serveur web via l'URI (Uniform Resource Identifier) de l'API et
comprend un verbe de requête, des en-têtes et, parfois, un corps
de requête.

 Après avoir reçu une demande valide de la page Web du produit,

l'API appelle le programme externe ou le serveur Web, dans ce
cas, le système de paiement tiers.
11
  L'API transfère les données à l'application demandeuse initiale,
dans ce cas, le site Web du produit.
Bien que le transfert de données diffère selon le service web utilisé,
les requêtes et les réponses s'effectuent toutes via une API.
L'interface utilisateur est invisible, ce qui signifie que les API
échangent des données au sein de l'ordinateur ou de l'application, et
l'utilisateur perçoit une connexion transparente.
2- Types d'API :
Les API peuvent être classées par cas d'utilisation, y compris les API de
données, les API de système d'exploitation, les API distantes et les API
Web.
API WEB :
Les API Web permettent le transfert de données et de fonctionnalités
sur Internet à l'aide du protocole HTTP.

Aujourd'hui, la plupart des API sont des API Web. Il s'agit d'API
distantes (utilisant des protocoles pour manipuler des ressources
externes) qui exposent les données et les fonctionnalités d'une
application sur Internet.
Les quatre principaux types d’API Web sont :
API ouvert-API partenaire-API interne-API composite.
Autre type d’api :
Les types d'API les moins courants incluent :
 API de données (ou de base de données) , utilisées pour

connecter des applications et des systèmes de gestion de bases

de données

 API du système d'exploitation (ou locales) , utilisées pour définir

la manière dont les applications utilisent les services et les
ressources du système d'exploitation

 API distantes , utilisées pour définir comment les applications

sur différents appareils interagissent
12
III- Les principes de drupal :
Drupal peut être utilisé à quatre niveaux différents :

1. Tel quel : une fois celui-ci installé et paramétré, il est utilisable

pour créer du contenu structuré et annotable par des
utilisateurs qui peuvent s'enregistrer sur le site. Les menus du
site ont alors un aspect standard.
2. Personnalisation simple : il est ensuite possible de
personnaliser l'emplacement d'affichage ou l'affichage lui-
même, de composants visuels standards (date et heure,
derniers posts, nombre de connectés, etc.) ainsi que le thème
d'affichage (terme expliqué plus bas) du site.
3. Extension par ajouts externes : ajout, paramétrage et
personnalisation de modules optionnels n'appartenant pas au
noyau. À ce stade et au suivant, il n'est pas rare que le
développeur du site écrive aussi un thème de présentation qui
lui soit propre.
4. Extension par développement interne : écriture de nouveaux
modules régis par la GPL, qu'il est souvent efficace (mais
nullement obligatoire) de présenter ensuite à la communauté
afin que celle-ci puisse participer à leur évolution.
Drupal lui-même utilise une base de données , qui comprend 60 à
300 tables selon les modules activés – et une hiérarchie de
fonctions toutes substituables, qui permettent au développeur
d'application expérimenté de réécrire la seule partie qu'il désire
modifier, et uniquement au niveau d'abstraction auquel il
s'intéresse, sans toucher au reste. La bonne ou la mauvaise
connaissance du niveau exact auquel intervenir peut diviser ou
multiplier le temps de réalisation d'un facteur 10 ou plus.
Drupal comporte environ 4 000 fonctions d'API, mais le site
api.drupal.org permet de les retrouver en accès direct par une
partie quelconque du contenu de leur nom. Dans la pratique, un
module simple peut fort bien n'en utiliser qu'une dizaine, voire
moins.
13
1- Définir drupal :
Drupal (prononcé à l'anglaise ) est un système de gestion de
contenu (CMS) libre et open-source publié sous la licence publique
générale GNU et écrit en PHP. Il permet la création et l'entretien de
sites Web de manière plus rapide et plus efficace que la mise en
œuvre d'une arborescence de pages HTML/CSS classique.
2- Historique de drupal :
Conçu en 2000 à l'université d'Anvers par Dries Buytaert comme un
forum (message board) entre amis, Drupal évolue vers un
« assembleur rapide de site web » (rapid website assembler). Son
code est ouvert depuis 2001.
Le nom Drupal est une traduction anglaise du mot
néerlandais druppel, qui signifie “goutte”. L'idée est sans doute liée
à l'existence d'un site Drop.org, aujourd'hui disparu, que Dries
Buytaert avait voulu appeler “dorp” (mot néerlandais signifiant
"village") en raison de son but communautaire. L'histoire veut que
Dries Buytaert ait fait une erreur de frappe lors de la vérification du
nom de domaine et ait pensé que l'erreur sonnait mieux].
En 2009, Drupal est classé 1er du concours organisé par la société
britannique Packt dans la catégorie Best Open Source PHP
CMS, devant WordPress et Joomla!. Il fait également son entrée en
première position dans le Hall of Fame Award nouvellement créé,
suivi par Joomla!.
En septembre 2009, 500 000 sites l'utilisent.
En 2010, Angela Byron annonce que Drupal équipe à peu près 1 %
des sites Internet mondiaux.
En mai 2014, la société Acquia (dédiée à Drupal et créée par son
fondateur) lève 50 millions de dollars auprès de New Enterprise
Associates (NEA) et Split Rock Partners.
14
En 2018, Drupal est utilisé par 3,5% des sites web à travers le monde.
C'est le 3e système de gestion de contenu le plus utilisé derrière
WordPress et Joomla
3- Architecture de drupal :
Visibilité par les moteurs de recherche
Toute page d'information dans Drupal possède une URL sous la
forme : http://www.exemple.com/?q=node/83 Cette forme d'URL, non
reconnue par les moteurs de recherche, peut le devenir grâce à
CleanURL (dans Drupal 8, CleanURL est activé par
défaut) : http://www.exemple.com/node/83 De plus, l'URL peut être
rendue plus significative en utilisant un

alias : http://www.exemple.com/nos_prestations .
Langage hôte
Drupal est développé en PHP. De nombreuses fonctionnalités sont
aussi programmées en JavaScript, principalement en utilisant la
bibliothèque JQuery. À partir de la version 10 de drupal, cette
bibliothèque est progressivement abandonnée au profit de vanilla
JavaScript].
Composants
Drupal comporte deux types de composants bien distincts :

 un « cœur » fiable et robuste, largement testé

 des « modules » de volume et qualité diverses développés librement
par la communauté et mis à disposition de tous en l'état (1 800 en
mars 2008, 7 210 en novembre 2010, 24 900 en décembre 2013,
50 000 en août 2023).
Le cœur est totalement francisé, ainsi qu'une partie des modules non
officiels. Il est aisé de se faire une première idée de la qualité de ces
modules, car le site officiel les recense et met en regard de chacun
les bogues remontées avec leur date et celle de résolution s'il y en a eu.
15
Pour les corriger, on ne sera jamais si bien servi que par soi-même, ce
qui est le principe même de l'Open source : les modules sont écrits en
PHP ordinaire. . Lorsque l'usage de certains modules est durablement
plébiscité, ceux-ci peuvent être incorporés dans le cœur d'une version
ultérieure. Celui de Drupal 7 intègre par exemple la suite de tests
automatiques SimpleTests, jusqu'alors module séparé Les modules
sont composables entre eux pour en donner de plus puissants. Un
exemple typique est OG Minutes, qui combine le module OG (organic
groups gérant des communautés privées ou publiques d'utilisateurs),
et Minutes (gérant les présences à un meeting), etc.
Internationalisation et localisation en standard
Il est possible à chaque utilisateur de se déclarer un fuseau horaire et
une langue. La langue de chaque contenu lui étant associé, la
construction de sites internationaux et multilingues est une fonction
standard de Drupal. Le site PHP-GTK, par exemple, a été l'un des
premiers à posséder des contenus en français, anglais et portugais
brésilien. Le grec, le kanji , le cyrillique et l'arabe, pour ne citer qu'eux,
ne posent pas davantage de problème.

16
 Chapitre 3 :
La création d’un fronte qui se connecte à
l’api http://sandbox.api.edujahiz.net/fr/
enfin de crée modifier un eleve , le
supprimer ou afficher la liste des eleves

17
I- Préparation D’environement de Travail :
Tout d’abord enfin que je me connecte au serveur dans vscode il me
faut installer l’extension « remote SSH » puis cliquer sur icone ou’
indiqué par la flèche :

Puis entrer les information qui concerne le serveur : adresseip :

5.135.208.149 ; nom :sandbox.front.edujahiz.net
Après avoir cliquée sur icône open a remote windows puis choisir
connecte to host puis configure SSH hosts puis
C:\users\bnadem\.SSH\config ;

Puis cliquée sur connecte in new window… enfin décceder au

serveur :

18
Voici le Serveur qui m’ont donnée avec une app NextJs crée:

Pour crée une application Next-JS on tape cette commande : npx

create-next-app@latest mon-app
En fait moi j’était juste condanée à de crée un front qui communique
avec api :
-pour cela je suis besoin de me connecter à api tous d’abord ;
Au côtée serveur il faut se dirigée ou’ se trouve app crée par Nextjs qui
s’appele front3 puis taper sur le teminale npm run dev enfin que
lorsque je entre ceci : http://sandbox.front.edujahiz.net/ il m’affiche
pas 502 Bad Gatway
1- Se connecter à api avec un nom utilisateur et un mot de pass
Après plusieurs essaie Voici le code qui me permet de me connecter à
l’api qui est dans page.tsx :
'use client';

import { useState } from 'react';

import axios from 'axios';

export default function Home() {

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [message, setMessage] = useState('');
19
// Connexion à l'API Drupal 7
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
setMessage('');
if (!username || !password) {
setMessage('Veuillez saisir un nom d\'utilisateur et un mot de passe');
return;
}
try {
const response = await axios.post(
'http://sandbox.api.edujahiz.net/api/user/login.json',
{ username, password },
{ headers: { Accept: 'application/json' }, withCredentials: true }
);
if (response.data?.user && response.data?.sessid) {
setIsLoggedIn(true);
setMessage('Connexion réussie !');
} else {
setMessage('Échec de la connexion');
}
} catch (error: any) {
if (error.response && error.response.status === 406) {
setMessage('Déjà connecté');
setIsLoggedIn(true);
} else {
setMessage('Identifiants incorrects ou erreur de connexion');
}
}
};
return (
<main className="p-4 max-w-md mx-auto">
{!isLoggedIn ? (
<div>
<h2 className="text-xl font-bold mb-4">Connexion à l'API</h2>
<form onSubmit={handleLogin} className="space-y-4">
<div>
<label className="block mb-1">Nom d'utilisateur</label>
<input
type="text"
value={username}
onChange={e => setUsername(e.target.value)}
className="border p-2 w-full rounded"
/>
</div>
<div>
<label className="block mb-1">Mot de passe</label>
<input
type="password"
value={password}
onChange={e => setPassword(e.target.value)}
className="border p-2 w-full rounded"
/>
</div>
<button
type="submit"

20
 className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded w-full"
>
Se connecter
</button>
</form>
</div>
) : (
<div className="text-green-700 font-bold text-lg">
Vous êtes connecté à l'API !
</div>
)}
{message && (
<div className="mt-4 p-3 rounded bg-gray-100 text-gray-800 border">
{message}
</div>
)}
</main>
);
}
Et voici le résultat depuis Navigateur :

Après avoir remplis son nom

d’utilisateur et motsdepass correct
puis appuyer sur se connecter ;La
connection est réussi en voyant le
message en vert

Puis apèrs une longue recherche et réflexion pour modifier ou

supprimer un éleve j’ai réussi juste de crée les buttons pour modifier
ou supprimer mais je peux crée un eleve depuis ce front vers api et il
s’affiche ausssi dans la liste des éleves:
2- crée un eleve

21
Voici une partie de cette liste avant que je crée un eleve nommé
Ziad Zakaria :

Et maintenant après sa création :

22
Et Voici maintenant eleve crée souligner par le rouge après remplis le
champ Nom et prenom puis cliquée sur crée un eleve ;
23
3- Modifier un élève :
Mais quand je clique sur Modifier ou supprimer et je veux effectuée
lune de ces actions il maffiche ceci dans la consol ;
Prenons par exemple modifier le nom de Ziad par Alae Voici ce qui
affiche après avoir emplis le nouveau prenom ou nom :

Il affiche erreur Put Could not found the controller .

4- Supprimer un élève :
Et pour Le supprimer :

Puis cliquée sur OK

24
Il maffiche erreur Delete could not found the controller.

25
 Conclusion :
Le stage est une phase mirroir pendant laquelle le
stagiaire est en mesure de connaître ,mettre à l’épreuve
et dévelloper ses qualités, capacités et technique
professionneles Le stage est une bonne occasion pour
frôler du travail et ses différents volets.Il permet aussi de
capitaliser de nouveaux acquiq en termes de
professionnalisme et de sens d’adaptation, ce qui
prépare le stagiaire à ce qui l’attend éventuellement
dans son parcours professionnel.Pour moi ce stage a été
une utilité pour une meilleure acquisition,une période
d’adaptation avec le monde du travail et tous cela grâce
à tout le personnel de la société 5HOOKS .

26