Rapport1 - Copie

REFONTE D’UNE PLATEFORME DE VISUALISATION DES MESSAGES D’UNE API
DEDICACE
A MA FAMILLE
REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR I

REMERCIEMENTS
C’est avec le cœur plein de gratitude que nous remercions Dieu pour le souffle de vie
accordé mais pour toutes les grâces dont il nous inonde au quotidien. Nous pensons à l’IUC à
travers son président fondateur M. Paul GUIMEZAP et l’entreprise BETTER PLANNING à
travers son directeur général M. Derick FONTAH qui nous a permis de réaliser un des projets
de son entreprise pour le cadre de ce travail.
Ce travail n’aurait jamais vu le jour sans le soutien des personnes qui y ont participé de
près ou de loin. Nous tenons à adresser nos remerciements à :
• M. TCHOUTA Alain, notre encadreur pour ses précieux conseils, son encadrement et
son suivi dans ce travail.
• M. NGUEGUIM Lionel, développeur a BETTER PLANNING pour sa rigueur dans

la gestion de ce projet.
• M. TADIE Herve, développeur à BETTER PLANNING pour sa disponibilité tout

au long de ce projet, pour tous ses conseils et pour les enseignements.
• Tout le corps professoral de l’école 3IAC de l’Institut Universitaire de la Côte à

Douala Logbessou, et en particulier celui de la filière 3IL pour leur dévouement et la qualité
des enseignements dispensés.
REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR II

SOMMAIRE
DEDICACE _________________________________________________________________ I
REMERCIEMENTS ___________________________________________________________ II
SOMMAIRE _______________________________________________________________ III
LISTE DES ABREVIATIONS ____________________________________________________ IV
LISTE DES FIGURES __________________________________________________________ V
LISTE DES TABLEAUX ________________________________________________________ VI
RESUME __________________________________________________________________ VII
ABSTRACT _______________________________________________________________ VIII
CHOUXIANG DE ____________________________________________________________ IX
AVANT-PROPOS ____________________________________________________________ X
INTRODUCTION _____________________________________________________________ 1
CHAPITRE 1 : CAHIER DE CHARGES _____________________________________________ 2
I- PRESENTATION DU PROJET ___________________________________________________ 2
II- EXPRESSION DES BESOINS ____________________________________________________ 2
III- ESTIMATION DES RESSOURCES ET DU BUDGET PREVISIONNEL ______________________ 3
IV- ORGANISATION DU PROJET __________________________________________________ 4
CHAPITRE 2 : ANALYSE ET CONCEPTION DE LA SOLUTION ___________________________ 7
I- ANALYSE __________________________________________________________________ 7
II- CONCEPTION _____________________________________________________________ 13
CHAPITRE 3 : REALISATION ET PRESENTATION DU RESULTAT OBTENU ________________ 25
I- ENVIRONNEMENT DE TRAVAIL _______________________________________________ 25
II- REALISATION DE L’APPLICATION______________________________________________ 31
III- PRESENTATION DE QUELQUES INTERFACES _____________________________________ 43
CONCLUSION ______________________________________________________________ 46
REFERENCES BIBLIOGRAPHIQUES _____________________________________________ 47
OUVRAGES UTILISES : ___________________________________________________________ 47
SITES WEB VISITES : ____________________________________________________________ 47
RAPPORTS DE PROJETS : ________________________________________________________ 47
TABLE DES MATIERES _______________________________________________________ 48
REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR III

LISTE DES ABREVIATIONS
Tableau 1: Liste des abréviations
Abréviation Définition
IUC Institut Universitaire de la Cote
3IAC Institut d'Ingénierie Informatique de l'Afrique Centrale
3IL Institut d'Ingénierie Informatique de Limoges
SMS Short Message Service
ISTDI Institut Supérieur de Technologies et du Design Industriel
API Application Programming Interface
PISTI Programmes Internationaux des Sciences et Technologies de
l’Innovation
SEAS School of Engineering and Applied Sciences
MBA Master of Business Administration
UML Unified Modeling Language
REST Representational State Transfer
HTML HyperText Markup Language
CSS Cascading Style Sheet
PHP Hypertext Preprocessor
SQL Structured Query Language
ERP Enterprise Resource Planning
URL Universal Resource Locator
MMS Multimedia Messaging Service
PDF Portable Document Format
BPMN Business Process Modeling Notation
ERD Entity Relationship Diagram
DFD Data Flow Diagram
SGBD Système de gestion de base de données
DOM Document Object Model
AJAX Asynchronous Javascript And XML
MVC Model View Controller
REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR IV

LISTE DES FIGURES

Figure 1 : Diagramme de Gantt du planning du projet ........................................................................................... 5
Figure 2 : Page d'authentification de l'utilisateur ................................................................................................... 7
Figure 3 : Page d’authentification de l’administrateur ........................................................................................... 8
Figure 4 : Page d’accueil de l’administrateur .......................................................................................................... 8
Figure 5 : Page d’accueil de l’utilisateur.................................................................................................................. 9
Figure 6 : Page d’accueil de TextMagic ................................................................................................................. 10
Figure 7 : Liens entre les diagrammes UML .......................................................................................................... 15
Figure 8 : Diagramme de cas d'utilisation de SMS Platform ................................................................................. 17
Figure 9 : Diagrammes de séquences de l'authentification .................................................................................. 19
Figure 10 : Diagramme de séquences de la création d'un compte d'entreprise.................................................... 21
Figure 11 : Diagramme de séquences de l'envoi des SMS ..................................................................................... 23
Figure 12 : Diagramme de classe du système ....................................................................................................... 24
Figure 13 : Illustration du MVC.............................................................................................................................. 31
Figure 14 : Schéma de la base de données ............................................................................................................ 34
Figure 15 : Création du projet ............................................................................................................................... 35
Figure 16 : Déploiement du serveur local de Symfony .......................................................................................... 35
Figure 17 : Page d’accueil du serveur Web local de Symfony ............................................................................... 36
Figure 18 : Installation de doctrine ....................................................................................................................... 37
Figure 19 : Création de l’entité entreprise ............................................................................................................. 37
Figure 20 : Configuration de la variable DATABASE_URL...................................................................................... 38
Figure 21 : Migration faite pour l'enregistrement des données de l 'entreprise ................................................... 38
Figure 22 : Enregistrement des informations des entités dans la base de données .............................................. 38
Figure 23 : Création du Controller de la page pour la manipulation des entreprises ............................................ 39
Figure 24 : Installation de webpack-encore .......................................................................................................... 39
Figure 25 : Création de l’entité User ...................................................................................................................... 40
Figure 26 : Création du Controller des utilisateurs ................................................................................................ 41
Figure 27 : Page native du Controller des utilisateurs après authentification ...................................................... 41
Figure 28 : Création du formulaire d’authentification .......................................................................................... 42
Figure 29 : Formulaire d'authentification natif de Symfony.................................................................................. 42
Figure 30 : Formulaire d’authentification final de l’application ............................................................................ 43
Figure 31 : Page de gestion des entreprises .......................................................................................................... 43
Figure 32 : Page de visualisation des SMS (Vue Liste) ........................................................................................... 44
Figure 33 : Page de visualisation des SMS (Vue Carte) ......................................................................................... 45
REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR V

LISTE DES TABLEAUX

Tableau 1: Liste des abréviations ______________________________________________________________ IV
Tableau 2 : Etablissements et Cycles de l'IUC ______________________________________________________ X
Tableau 3 : Gestion des coûts __________________________________________________________________ 3
Tableau 4 : Principaux intervenants au projet _____________________________________________________ 4
Tableau 5 : Planning du projet _________________________________________________________________ 5
Tableau 6 : Faiblesses rencontrées dans SMS Platform ______________________________________________ 9
Tableau 7 : Descriptif des diagrammes UML _____________________________________________________ 13
Tableau 8 : Cas d'utilisation de SMS Platform ____________________________________________________ 16
Tableau 9 : Description textuelle du cas d'utilisation « S'authentifier » ________________________________ 18
Tableau 10 : Description textuelle de la création d'un compte d'entreprise _____________________________ 20
Tableau 11 : Description textuelle de l'envoi des messages __________________________________________ 21
Tableau 12 : Dictionnaire de données ___________________________________________________________ 32
REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR VI

RESUME
Pour le compte de l’année académique 2023 – 2024, nous avons effectué notre projet tuteuré
pour l’entreprise BETTER PLANNING située à Bonamoussadi. Le projet qui nous a été
confié était de refondre une application qui sert de plateforme pour la visualisation des SMS
envoyés par une API créée par l’entreprise car elle effectuait toujours ces actions concernant
cette dernière en arrière-plan. Afin de mener à bien ce projet , nous avons opté pour une
méthode de travail personnalisée constitue de 4 étapes : la première était de cadrer le projet a
travers la réalisation d’un cahier de charges définissant ses contraintes clés et les moyens
utilises, la seconde était une analyse du nouveau système à mettre en place pour pouvoir
définir ses possibilités d’actions vis-à-vis des applications similaires déjà existantes ,la
troisième était la conception du projet pour modéliser la manière dont les données seront
conservées et interagissent ensemble et enfin la quatrième qui était de réaliser l’application en
utilisant les technologies utilises par l’entreprise. Ce projet aura été bénéfique pour nous dans
la mesure où il nous aura permis d’en apprendre un peu plus par rapport aux enseignements
reçus, et d’apprécier l’importance de la technologie et du numérique dans la vie de tous les
jours.
Mots – clés
• API : interface normalisée par l’intermédiaire de laquelle le programmeur a

directement accès aux fonctions d’un système d’exploitation ou d’autres programmes.
• Refonte : Modification d’une application dans le but de renouveler sa charte
graphique (dans les sites Web), et d’améliorer ses performances.
• SMS : En téléphonie mobile, il s’agit d’un système permettant d’envoyer un message
de 160 caractères maximum. SMS désigne aussi le message en lui-même.
• Visualisation : Présentation visuelle sur un écran, sous forme d'image alphanumérique
ou graphique, d'un ensemble d'informations traitées par des moyens informatiques.
• Plateforme : Matériel ou logiciel qui héberge une application ou un service.
REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR VII

ABSTRACT
For the academic year 2023 - 2024, we did a two-month academic internship at BETTER
PLANNING located in Bonamoussadi. The project that was entrusted to us was to redesign an
application that serves as a platform for viewing SMS sent by an API created by the company
because it always performed these actions on them in the background. In order to carry out
this project, we opted for a personalized work method consisting of 4 steps: the first was to
frame the project through the realization of a specification defining its key constraints and the
means used, the second was an analysis of the new system to be put in place to be able to
define its possibilities of actions vis-à-vis similar applications already existing, the third was
the design of the project to model the way in which data will be kept and interact together and
finally the fourth which was to carry out the application using the technologies used by the
company. This project has been beneficial for us in that it has allowed us to learn a little more
about the lessons received, to take a look at the daily life of computer scientists and to
appreciate the importance of technology and digital in everyday life.
Keywords
• API : a standardized interface through which the programmer has direct access to the
functions of an operating system or other programs.
• Redesign : Modification of an application in order to renew its graphic charter (in the
Web sites), and to improve its performances.
• SMS : In mobile telephony, it is a system allowing to send a message of 160
characters maximum. SMS also designates the message itself.
• Visualization : Visual presentation on a screen, in the form of alphanumeric or
graphic image, of a set of information processed by computer means.
• Platform : Hardware or software that hosts an application or a service.
REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR VIII

CHOUXIANG DE
dài biǎo 2023 - 2024 xué nián ， wǒ men zài wèi yú Bonamoussadi de BETTER PLANNING
wán chéng le wéi qī liǎng gè yuè de xué shù shí xí。zài zhè cì shí xí qī jiān wěi tuō gěi wǒ
men de xiàng mù shì chóng xīn shè ji yí gè yòng zuò píng tái de yìng yòng chéng xù yòng yú
chá kàn yóu gōng sī chuàng jiàn de API fā sòng de SMS， yīn wéi tā shǐ zhōng zài hòu tái zhí
xíng yǒu guān hòu zhě de zhè xiē cāo zuò。wèi le kāi zhǎn zhè ge xiàng mù ， wǒ men xuǎn
zé le yì zhǒng yóu 4 gè bù zhòu zǔ chéng de gè xìng huà gōng zuò fāng fǎ ： dì yí gè shì tōng
guò shí xiàn dìng yì qí yuē shù de guī fàn lái gòu jiàn xiàng mù dì èr gè shì fēn xī jiāng yào
jiàn lì de xīn xì tǒng ， yǐ biàn néng gòu dìng yì qí xiāng duì yú yǐ jīng cún zài de lèi sì yìng
yòng chéng xù cǎi qǔ xíng dòng de kě néng xìng ， dì sān gè shì shè ji xiàng mù ， yǐ mó nǐ
shù jù bǎo cún hé jiāo hù de fāng shì ， zuì hòu shì shí xiàn shǐ yòng gōng sī shǐ yòng de jì
shù de yìng yòng chéng xù。zhè cì shí xí duì wǒ men yǒu yì ， yīn wéi tā shǐ wǒ men néng
gòu bǐ suǒ xué dào de kè chéng xué dào gèng duō ， měi tiān kàn kan jì suàn jī kē xué jiā de
jīng yàn ， bìng rèn shi dào jì shù hé shù zì jì shù zài rì cháng shēng huó zhōng de zhòng yào
xìng
guān jiàn zì
• API： yí gè biāo zhǔn huà de jiē kǒu ， chéng xù yuán kě yǐ tōng guò gāi jiē kǒu zhí
jiē fǎng wèn cāo zuò xì tǒng huò qí tā chéng xù de gōng néng.
chóng xīn shè ji ： xiū gǎi yìng yòng chéng xù yǐ gēng xīn qí tú xíng zhāng chéng （
zài wǎng zhàn zhōng ）， bìng tí gāo qí xìng néng .
• duǎn xìn ： zài yí dòng diàn huà zhōng ， tā shì yí gè yǔn xǔ fā sòng zuì duō 160 gè
zì fú de xiāo xi de xì tǒng。SMS hái zhǐ dìng xiāo xi běn shēn.
• kě shì huà ： zài píng mù shàng, yǐ zì mǔ shù zì huò tú xíng tú xiàng de xíng shì zhí
guān de chéng xiàn tōng guò jì suàn jī shǒu duàn chǔ lǐ de yì zǔ xìn xī.
• píng tái ： tuō guǎn yìng yòng chéng xù huò fú wù de yìng jiàn huò ruǎn jiàn.
REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR IX

AVANT-PROPOS
Dans le but d’assurer un développement durable et de fournir aux entreprises une main
d’œuvre compétente et compétitive dans divers domaines, le gouvernement Camerounais par
le biais du ministère de l’enseignement supérieur a permis l’ouverture des instituts privés
d’enseignement supérieur. Donnant ainsi l’opportunité aux institutions privées, de contribuer
à l’acquisition d’une formation académique et professionnelle en adéquation avec le monde
professionnel. C’est ainsi qu’est créé l’ISTDI (Institut Supérieur de Technologie et du Design
Industriel) par l’arrêté N° 02/0094/MINESUP/DDES/ESUP du 13 septembre 2002 et
l’autorisation d’ouverture N° 0102/MINESUP/DDES/ESUP du 18 septembre 2002. Située
dans la région du littoral, département du Wouri, l’arrondissement de Douala 5ème, au
quartier Logbessou. L’ISTDI est ensuite érigé en Institut Universitaire de la Côte (IUC) par
l’arrêté N°5/05156/N/MINESUP/DDES/ESUP/SAC et comporte à ce jour cinq (5)
établissements notamment :
Tableau 2 : Etablissements et Cycles de l'IUC
Etablissements Cycles proposés

L’Institut Supérieur de • BTS Industriels
Technologies & du Design • LICENCES PROFESSIONNELLES INDUSTRIELLES et
Industriel (ISTDI) TECHNOLOGIQUES en partenariat avec l’université de
Dschang.
• MASTER PROFESSIONNEL INDUSTRIEL en partenariat
avec l’université de Dschang
L’Institut de Commerce et • BTS Commerciaux
d’Ingénierie d’Affaires • LICENCES PROFESSIONNELLES COMMERCIALES et
(ICIA) GESTION en partenariat avec l’université de Dschang
• MASTER PROFESSIONNEL COMMERCIAL en
partenariat avec l’université de Dschang
• MASTER ISUGA-France en partenariat avec EMBA France
L’Institut d’Ingénierie • Cycle des TIC en partenariat avec CCNB-DIEPPE du
Informatique d’Afrique Canada
Centrale (3IAC) • MASTER EUROPÉEN en partenariat avec 3IL en France
REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR X

• MASTER PROFESSIONNEL en partenariat avec l’ENSP

Yaoundé
Les Programmes
Internationaux des Sciences • Cycle des Classes Préparatoires aux Grandes Écoles
et Technologies de d’Ingénieurs (CP) en partenariat avec l’université du
l’Innovation (PISTI) Maine en France ;
• Classes préparatoires
• Licences Sciences & Techniques ;
• CYCLE INGÉNIEUR de Génie Industriel (ESSTIN-
France) ;
• Ingénierie Biomédicale
• Architecture et Design Industriel
• HND et DSEP Industriels et Commerciaux
• Génie Civil Option : Géomètre topographe .
• Licence Professionnelle en Télécommunication et

Services
School of Engineering and

Applied Sciences (SEAS)
• Executive Programs/MBA
• Bachelor of Engineering
• Bachelor in Business & Management Sciences
• Bachelor of Heath Science
• Bachelor of Technology / Licence Technologique
• HND Cycle; Commercial and Industrial Fields
Source : KOM Morgane et MEVA’A Jules, Analyse, conception et implémentation d’une
plate-forme de partage de services de transport, 2022, 3IAC
Dans le cadre de notre en formation en cycle d’ingénieur 3IL, nous sommes tenus de faire un
projet tuteuré durant l’année académique. Ce projet permettra aux étudiants de mieux
appréhender les connaissances acquises et surtout de les appliquer à un domaine de la
spécialité. C’est dans cette optique que nous avons effectué un travail sur le thème « Refonte
d’une plateforme de visualisation des messages d’une API ».
REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR XI

INTRODUCTION
De nos jours, la communication avec la clientèle est un point crucial pour le développement et
la pérennité d’une entreprise. Avec l’essor des nouvelles technologies, de nombreux moyens
ont été mis sur pied pour permettre cette communication et la rendre la plus simple possible.
L’un des plus utilisés et fiables actuellement est le SMS qui est un court ou long message
qu’on peut envoyer d’un appareil mobile à un autre. BETTER PLANNING ayant compris
l’importance de ce moyen de communication à créer une API permettant l’envoi de SMS
individuels et en masse : elle se nomme SMS BANKING. Mais malheureusement, il n’existe
aucun moyen visuel permettant de suivre les messages de cette API. Le problème qui se
dégage ainsi est l’impossibilité de suivre, manipuler des données qu’exploitent l’API ainsi que
ses SMS envoyés de manière graphique. Bien qu’il ait été créé une application pour réaliser
cela, elle n’est pas convenable vis-à-vis des nouvelles technologies employées par l’entreprise
actuellement. En tant que stagiaire dans cette entreprise pour le compte de l’année 2023-2024,
il m’a été accordé dans le cadre de ce projet tuteuré de refondre cette plateforme afin de
permettre la traçabilité des messages du SMS BANKING tout en étant en accord avec ces
technologies. Ce rapport est le résultat du travail effectué. Nous l’avons scindé en 3 parties
comme suit : la première correspond à la rédaction d’un cahier de charges pour spécifier les
besoins de l’application et la gestion du projet, la seconde est l’analyse et la conception du
nouveau système pour en dégager le fonctionnement théorique complet et la structure des
données, et enfin la troisième qui est l’implémentation, la présentation et la description des
composants de cette nouvelle plateforme.
REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR 1

CHAPITRE 1 : CAHIER DE CHARGES
I- PRESENTATION DU PROJET
1- Contexte
BETTER PLANNING étant une entreprise de développement d’application a créé un service
de messagerie SMS BANKING permettant aux institutions financières fonctionnant avec leur
logiciel GLOBAL BANK d’envoyer des SMS à leurs clients. Néanmoins, SMS BANKING
permet juste l’envoi groupé de messages et les banques n’ont pas de moyens de retracer les
messages envoyés à leurs clients ou de connaitre leur solde SMS.
2- Définitions et Objectifs
Le but de notre projet consiste à la refonte d’une application SMS PLATFORM Control qui
servira de plateforme de visualisation des messages envoyés par le service SMS BANKING.
SMS PLATFORM a pour objectif principal de servir d’interface pour le suivi et la traçabilité
de la messagerie de SMS BANKING. En plus de cela, elle permet la gestion du crédit SMS
des banques qui exploitent ce service.
II- EXPRESSION DES BESOINS

La capture des besoins fonctionnels et non fonctionnels est une étape primordiale dans la
procédure d’exécution d’un projet informatique, car elle nous permet d’aboutir à une
application de qualité et qui répond aux exigences fixées.
1- Besoins fonctionnels
Il s’agit de la description de nos besoins en termes de fonctionnalités. En clair, ce sont les
opérations réalisables par l’application, fonctions attendues par les utilisateurs du futur
produit, hiérarchisables d’une manière spécifique.
L’objectif de notre projet étant de visualiser les messages du SMS BANKING, notre premier
besoin est celui d’une interface, donc un programme ayant du contenu graphique ou nous
pourrons effectuer les tâches essentielles liées à cette API.

Les besoins fonctionnels nécessaires de ce programme sont les suivants :
- Voir les messages envoyés par les institutions financières à leurs clients
- Télécharger l’historique de ces messages sur une période donnée
- Créer des utilisateurs à travers lesquels la banque pourra gérer ces SMS
- Envoyer des messages à des clients spécifiques
- L’authentification des différents utilisateurs
2- Besoins non fonctionnels

Les besoins non-fonctionnels sont :
• Convivialité : l’application doit avoir une bonne ergonomie. En effet, les interfaces
utilisateur doivent être simples
• Efficacité : L’application doit permettre à l’utilisateur d’avoir facilement accès aux

informations désirées.
• Performance : L’application doit satisfaire toutes les exigences de l’utilisateur de

manière optimale
• Fiabilité : L’application doit fonctionner de façon cohérente et sans erreur le système

doit être performant et répondre aux exigences de l’utilisateur
• Ergonomie : Les couleurs choisies doivent être accueillantes. Les interfaces seront
disponibles en fonction du niveau d'accès de chaque acteur.
III- ESTIMATION DES RESSOURCES ET DU BUDGET PREVISIONNEL
Tableau 3 : Gestion des coûts

Participant Quantité Durée Coût/Semaine Coût (FCFA)
Chef de projet 01 05 semaines 100 000 500 000
Analyste 01 01 semaine 25 000 25 000

Développeur 02 05 semaines 25 000 250 000

Total des Ressources Humaines 775 000
Laptop 10Go de 02 ~ ~ 300 000
RAM, 250Go de
disque dur
Processeur
2.7Ghz
Total des Ressources Matérielles 300 000
Coût Total du Projet 1 075 000
Source : nous- mêmes
IV- ORGANISATION DU PROJET
1- Principaux intervenants
Tableau 4 : Principaux intervenants au projet

Noms Fonctions Rôles
NDZENGUE LOUIS-CYR Etudiant en 3e année 3IL Développeur et Analyste
M. TCHOUTA Alain Enseignant à l’Institut Encadreur

Universitaire de la Cote
Source : nous-même
2- Planning du projet
Pour une bonne gestion de notre projet, nous ferons un planning prévisionnel en vue de
diviser notre travail en étapes que nous mettrons dans notre diagramme de Gantt pour suivre
le projet

Tableau 5 : Planning du projet

N° Nom de l’étape Durée(jour) Début Fin
1 Compréhension du thème et Etude de 3 04/03/2024 06/03/2024
l’existant
2 Rédaction du cahier de charges 2 07/03/2024 08/03/2024
3 Modélisation et réalisation des diagrammes 7 09/03/2024 15/03/2024
4 Conception de l’application 3 16/03/2024 18/03/2024
5 Implémentation 14 19/03/2024 01/04/2024
6 Tests et Modifications 7 02/04/2024 08/04/2024
7 Déploiement 1 09/04/2024 09/04/2024
Figure 1 : Diagramme de Gantt du planning du projet
3- Les livrables
Au terme de notre projet, nous aurons à fournir les livrables suivants :
❖ Le rapport final qui sera constitué de :
o Le cahier de charge
o Le dossier d’analyse
o Le dossier de conception
o Le dossier de réalisation
❖ L’application

o Le code source
o Le code exécutable
o La base de données

CHAPITRE 2 : ANALYSE ET CONCEPTION DE LA SOLUTION
I- ANALYSE
Cette partie repose sur deux synthèses :
• Une analyse technique critique de l’application à refondre, accompagnée des premiers

constats.
• Une analyse de l’existant. Elle repose sur une recherche d’outils similaires sur le Web.
1- Analyse critique de sms platform

SMS PLATFORM est une application Web qui a été mise sur pied par BETTER PLANNING
dans le but de pallier au problème de visualisation des SMS de SMS BANKING. Elle a été
pensée avec le côté administrateur permettant la création des comptes des entreprises et un
côté client leur permettant d’envoyer des SMS.
1.1- Présentation des pages

❖ Page d’authentification
Figure 2 : Page d'authentification de l'utilisateur

Figure 3 : Page d’authentification de l’administrateur
❖ Page d’accueil
Figure 4 : Page d’accueil de l’administrateur

Figure 5 : Page d’accueil de l’utilisateur
Comme nous pouvons le constater :
• Les pages d’authentification sont respectivement constituées d’un formulaire pour

l’identification des divers utilisateurs et admins,
• Les pages d’accueil comportent une barre de navigation permettant aux utilisateurs et
admins d’effectuer leurs opérations. Et pour l’administrateur, nous avons un tableau
ayant les infos des différentes entreprises enregistrées.
1.2- PROBLEMES RENCONTRES

L’analyse critique m’a permis d’une part, de dresser un bilan de l’application existante, d’en
faire ressortir les atouts et les faiblesses. Et, d’autre part, de saisir les finalités du projet ainsi
que les publics qu’il vise. Voici les faiblesses qui ont pu être établies suite à cette analyse :
Tableau 6 : Faiblesses rencontrées dans SMS Platform

Point(s) analysés(s) Faiblesse constatée
Esthétique et Illustration -Ergonomie obsolète
-Application non enrichie

-Les données difficilement lisibles
Liens externes -Présence de liens morts
Performance -L’application a été développée avec PHP 5.4

qui est une version dépasse du langage
(actuellement à 8.2).
-Présence de tables comportant les mêmes

données
2- Analyse de l’existant
2.1- Cas d’une application de messagerie : Textmagic
2.1.1- Présentation
TextMagic est une plateforme de marketing par SMS permettant de mener à bien des
campagnes de marketing par SMS. Elle est utile pour des particuliers ayant des listes de
contacts prédéfinis auxquels ils envoient fréquemment des messages et qui souhaitent
importer leurs listes et envoyer des blasts SMS.
Figure 6 : Page d’accueil de TextMagic

2.1.2- Fonctionnalités
Vous pouvez l'utiliser pour :
• Automatiser vos communications via le chat SMS bidirectionnel, les listes de

distribution et les e-mails vers SMS.
• Planifiez des SMS uniques ou récurrents et supprimez les contacts redondants de
votre base de données avant de le faire
• Configurer des répondeurs automatiques et des modèles de SMS pour les requêtes
courantes.
TextMagic propose des bibliothèques clientes pour 12 langages de programmation largement
utilisés, tels que Java et Python, afin de simplifier la mise en œuvre de l'API SMS.
Autres fonctionnalités de l'API SMS TextMagic
• URL de rappel
• SMS Unicode
• ID d'expéditeur de SMS dans les pays pris en charge
• Numéros SMS virtuels
• Planification des SMS
• Messages texte longs (jusqu'à 918 caractères)
• Sous-comptes et accès basés sur les rôles.
2.1.3- Avantages
• TextMagic offre une API REST pour tous les utilisateurs.
• Il dispose d'une grande quantité de matériel aidant à intégrer les API dans une boîte à
outil SMS.
• Des outils et des connecteurs API étendus permettent de connecter facilement

TextMagic à d'autres applications.
• Les sous-comptes permettent une collaboration entre plusieurs groupes

• Une interface utilisateur simple mais adaptable, qu'il faudra peu de temps pour
maîtriser.
2.1.4- Inconvénients
• TextMagic est l'une des solutions de marketing par SMS les plus chères.
• Les messages MMS sont envoyés sous forme de liens au lieu de médias réels.
• Si vous envoyez un grand nombre de SMS et que vous recevez des réponses des
consommateurs, le coût peut s'accumuler.
2.2- AUTRES SOLUTIONS PROPOSEES

Afin de permettre l’envoi de SMS dans des applications ou même acheter du crédit SMS pour
son utilisation personnelle, il existe d’innombrables applications et API facilement
manipulables et intégrables dans les programmes. Voici quelques-unes faisant partie des
meilleures parmi celles qu’on trouve sur le marché :
2.2.1- Twilio
Twilio permet d'envoyer des messages SMS et WhatsApp. Voici quelques fonctionnalités
supplémentaires de Twilio :
• La programmation de l’envoi de messages.
• Avec la même API, vous pouvez envoyer des alertes de masse à un ensemble de
personnes donné
• À l'aide de l'API SMS, on peut envoyer des messages d'authentification à deux

facteurs, afin que les clients puissent vérifier leurs comptes et leurs connexions.
Twilio prend également en charge WhatsApp.
À l'aide des API, vous pouvez partager toutes sortes de médias, y compris des images et des
PDF, via WhatsApp.
Enfin, en plus de WhatsApp, Twilio prend en charge l'envoi de messages via Facebook
Messenger, mais cette fonctionnalité est actuellement en mode bêta.

2.2.2- Vonage
L'API SMS de Vonage vous permet d'envoyer des notifications et également une
communication bidirectionnelle.
Comme Twilio, l’API de Vonage prend également en charge Facebook Messenger. Les
clients peuvent envoyer un message à votre page pour en savoir plus sur les produits.
De plus, vous pouvez fournir des mises à jour continues via Facebook Messenger, telles que
des mises à jour de stock.
En plus de Facebook Messenger, Vonage prend en charge l'envoi de messages via Viber.
II- CONCEPTION
1- Présentation du langage de modélisation utilise : UML
1.1- Bref Historique
UML (Unified Modeling Language) est un langage de modélisation objet né de la fusion de
trois langages de modélisation objet (Booch, OMT, OOSE) qui ont révolutionné la
modélisation dans les années 90. UML est dit universel car il est indépendant des langages de
programmation, des domaines d’application et aussi du processus de développement adopté. Il
permet de représenter un système sous forme de schémas. Sa notation graphique permet
d’exprimer visuellement une solution objet, ce qui facilite la comparaison et l’évaluation de la
solution. Sa véritable force repose sur un méta modèle qui normalise la sémantique des
concepts, qu’il véhicule. Notez qu’UML est ouvert et n’est la propriété de personne.
1.2- Les diagrammes utilisés

Pour modéliser notre système, nous avons utilisé les trois types de diagrammes suivants :
Tableau 7 : Descriptif des diagrammes UML

Diagramme Objectifs Type
Diagramme de cas 1.Décrire la manière dont une Fonctionnel
d’utilisation organisation ou un système
externe doit interagir avec le
système.

2.Décrire ce que doit faire le

système.
3.Mettre en évidence les
services rendus par le système.
Diagramme de séquences 1.Validation des cas Dynamique
d'utilisation pour comprendre
la logique de l'application.
2.Complète le diagramme des
cas d’utilisation en mettant en
évidence les objets et leurs
interactions d’un point de vue
temporel.
Diagramme de classes 1.Point central de la Statique
modélisation du système pour
décrire ce que le système
doit faire (analyse) et avec
quoi il va le faire (conception).
2.Représentation de la structure
statique du système
l’information.
3.Modélisation des classes et
de leurs relations.

La figure suivante représente les liens entre les diagrammes
Figure 7 : Liens entre les diagrammes UML
2- Conception fonctionnelle : le diagramme de cas d’utilisation

Ce diagramme permet de restituer graphiquement l’analyse de besoin du point de vue de
l’utilisateur.
Il est destiné à représenter les besoins des utilisateurs par rapport au système. Il constitue un
des diagrammes les plus structurants dans l'analyse d'un système. Nous rappelons que :
• Acteur : représente un rôle joué par une entité externe (utilisateur humain, dispositif
matériel ou autre système) qui interagit directement avec le système étudié.
• Tâche : une tâche est l’ensemble des fonctions qu’un acteur bien spécifié peut
effectuer.
• Scénario : C’est une succession particulière d’enchaînement, s’exécutant du début à la
fin du cas d’utilisation.
• Cas d'utilisation (use case) : représente un ensemble de séquences d'actions qui sont
réalisées par le système et qui produisent un résultat observable intéressant pour un
acteur particulier. On trouve plusieurs relations pour lier entre les cas d’utilisation,
citons :

o Relation d'inclusion : Une relation d'inclusion d'un cas d’utilisation

A par rapport à un cas d’utilisation B signifie qu'une instance de A contient le
comportement décrit dans B.
o Relation d'extension : Une relation d'extension d'un cas d'utilisation
A par un cas d'utilisation A signifié qu'une instance de A peut être étendue par
le comportement décrit dans B.
o Relation de généralisation : Les cas d’utilisation descendants héritent de la
description de leurs parents communs. Chacun d'entre eux peut néanmoins
comprendre des interactions spécifiques supplémentaires.
2.1- Identification des acteurs

• L’administrateur : il représente un employé de BETTER PLANNING. Il a pour rôle
de gérer les comptes d’entreprises dans le système
• L’utilisateur d’entreprise : il représente l’employé de l’institution financière qui

utilise le service SMS BANKING.
• L’utilisateur : il désigne toute personne utilisant le système indépendamment de son

rôle.
2.2- Identification des cas d’utilisation

L’analyse des besoins a permis de modéliser l’application SMS PLATFORM en 12 cas
d’utilisation :
Tableau 8 : Cas d'utilisation de SMS Platform

N∘ Acteur Cas d’utilisation
1 Administrateur/Utilisateur d’Entreprise -S’authentifier
-Gérer les messages
- Visualiser les SMS
-Gérer le compte entreprise

- Voir les infos
- Consulter le crédit SMS

2 Administrateur -Gérer le compte entreprise

- Recharger/Réduire le crédit
SMS
- Créer un compte
- Supprimer un compte
3 Utilisateur d’Entreprise -Gérer les messages
- Envoyer / Renvoyer un message
- Supprimer un message
- Télécharger l’historique des
messages
- Archiver un message
Source : nous-mêmes
2.3- Le diagramme de cas d’utilisation du système
Figure 8 : Diagramme de cas d'utilisation de SMS Platform

3- Conception dynamique : le diagramme de séquences

Il permet de décrire les scénarios de chaque cas d’utilisation en mettant l’accent sur la
chronologie des interactions avec les objets. Il montre une interaction présentée en séquence
dans le temps. En particulier, il montre aussi les objets qui participent à l'interaction par leur
"Ligne de vie" et les messages qu'ils échangent présentés en séquence dans le temps.
Rappelons quelques notions de base de ce diagramme :
• Scénario : une liste d'actions qui décrivent une interaction entre un acteur et le
système.
• Interaction : un comportement qui comprend un ensemble de messages échangés par

un ensemble d'objets dans un certain contexte pour accomplir une certaine tâche.
• Message : Un message représente une communication unidirectionnelle entre objets

qui transporte de l’information avec l’intention de déclencher une réaction chez le
récepteur.
3.1- Diagramme de séquences de l’authentification

3.1.1- Description textuelle du cas d’utilisation
Tableau 9 : Description textuelle du cas d'utilisation « S'authentifier »

Libellé Description
Nom S’authentifier
Objectifs Permettre aux utilisateurs habilités d’accéder à
l’application
Acteur principal Utilisateur
Pré – condition Avoir une connexion Internet
Scénario Nominal 1. L’utilisateur demande à accéder à l’application
2. Le système renvoie la page d’authentification
3. L’utilisateur saisit ses identifiants et valide sa

demande d’accession
4. Le système vérifie les infos

5. Le système affiche la page d’accueil

correspondante
Scénario Alternatif 5.1. Le système refuse l’accès et affiche un

message d’erreur car les identifiants sont
erronés
Retour au point 3
Résultat Attendu Accéder à l’application
Source : nous - mêmes
3.1.2- Diagramme de séquences
Figure 9 : Diagrammes de séquences de l'authentification

3.2- Diagramme de séquences de la création de compte d’entreprise

3.2.1- Description textuelle
Tableau 10 : Description textuelle de la création d'un compte d'entreprise

Nom Créer un compte d’entreprise
Objectifs Permettre de créer les comptes pour les entreprises
Acteur principal Administrateur
Pré – condition Être authentifié avec un rôle d’administrateur
Scénario Nominal 1. L’administrateur choisit l’option « Ajouter une
entreprise » dans sa page d’accueil
2. Le système renvoie le formulaire

d’enregistrement
3. L’administrateur saisit les informations de

l’entreprise et valide la création
4. Le système vérifie les infos
5. Le système ajoute le compte
6. Le système envoie un message de

confirmation correspondant
Scénario Alternatif 5. Le système affiche un message d’erreur du a

une ou plusieurs informations invalides
Retour au point 3
Résultat Attendu Création d’un compte entreprise

Figure 10 : Diagramme de séquences de la création d'un compte d'entreprise
3.3- Diagramme de séquences de l’envoi de messages

3.3.1- Description textuelle
Tableau 11 : Description textuelle de l'envoi des messages

Nom Envoyer un message
Objectifs Permettre à un utilisateur d’une entreprise d’envoyer
un message à son client

Acteur principal Utilisateur d’Entreprise

Pré – condition ❖ Être authentifié avec un rôle d’utilisateur
d’entreprise
❖ L’entreprise doit avoir au moins un client
Scénario Nominal 1. L’utilisateur choisit l’option « Envoyer un

message » dans sa page d’accueil
2. Le système renvoie le formulaire d’envoi des

messages
3. L’utilisateur saisit le message voulu et choisit

les clients destinataires
4. Le système vérifie le message et s’il y a un ou

des destinataires.
5. Le système vérifie le crédit SMS de

l’entreprise.
6. Le système envoi le message au client et un

message de confirmation correspondant à
l’utilisateur
Scénario Alternatif 1 5. Le système affiche un message d’erreur si le

message contient plus de 255 caractères ou si le
message est vide.
Retour au point 3
Scénario Alternatif 2 6. Le système affiche un message d’erreur si
l’entreprise n’a plus de SMS.
Retour au point 3
Résultat Attendu Envoi d’un SMS au client

Figure 11 : Diagramme de séquences de l'envoi des SMS
4- Conception statique : Le diagramme de classe

Le diagramme de classe est considéré comme le plus important dans le développement orienté
objet, il représente l’architecture conceptuelle du système, il est utilisé pour représenter la vue
de conception statique. Son intérêt est de modéliser les entités de l’application et de
représenter l’ensemble des informations gérées par l’application.

Figure 12 : Diagramme de classe du système

CHAPITRE 3 : REALISATION ET PRESENTATION DU RESULTAT

OBTENU
I- ENVIRONNEMENT DE TRAVAIL
1- Logiciels utilises
1.1- Outils de modélisation
1.1.1- Visual Paradigme
Visual Paradigme est un outil de conception de logiciels adapté aux projets logiciels agiles.
Il prend en charge UML, BPMN, ERD, DFD, Sys ML. Il prend également en charge les cas
d'utilisation, le Wire framing, l'ingénierie de code, etc.
Il s'agit d'un outil UML CASE prenant en charge UML 2, SysML et Business Process
Modeling Notation (BPMN) de l'Object Management Group (OMG). En plus de la prise en
charge de la modélisation, il fournit des capacités de génération de rapports et d'ingénierie de
code.
1.1.2- StarUML
StarUML est un outil de génie logiciel dédié à la modélisation UML et édité la société
coréenne MKLabs. Il est multiplateforme et fonctionne sous Windows, Linux et MacOS.
La dernière version gère l'ensemble des diagrammes définis par UML 2, ainsi que plusieurs
diagrammes SysML, les organigrammes, les diagrammes de flux de données, et les
diagrammes entité-association.
1.1.3- DBDesigner
DBDesigner est un logiciel de conception de base de données sous forme graphique qui
intègre tous les niveaux de conception, de modification, de création et de maintenance sur la
structure d'une base de données.

1.2- XAMPP
XAMPP est un ensemble de logiciels permettant de mettre en place un serveur Web local, un
serveur FTP et un serveur de messagerie électronique.
Il s'agit d'une distribution de logiciels libres
• X pour cross-plateforme (LAMPP pour Linux, WAMPP pour Windows)
• A pour Apache
• M pour MySQL
• P pour PHP
• P pour Perl
offrant une bonne souplesse d'utilisation, réputée pour son installation simple et rapide.
1.3- PHPStorm
PhpStorm est un éditeur pour PHP3, HTML, CSS et JavaScript, édité par JetBrains.
Il permet d'éditer du code PHP pour les versions allant de la 5.3 à la 8.1
1.4- Microsoft Edge

Microsoft Edge est un navigateur web développé par Microsoft depuis 2015.Edge est installé
par défaut avec Windows 10 et Windows 11, et est disponible également sur MacOS et Linux,
ainsi que sur mobile avec des versions Android et IOS.
1.5- PHPMyAdmin
PhpMyAdmin est un outil logiciel gratuit écrit en PHP, destiné à gérer l'administration de
MySQL sur le Web. PhpMyAdmin prend en charge une large gamme d'opérations sur
MySQL et MariaDB. Les opérations fréquemment utilisées (gestion des bases de données, des
tableaux, des colonnes, des relations, des index, des utilisateurs, des autorisations, etc.)
peuvent être effectuées via l'interface utilisateur ou directement avec une/des requête(s) SQL

2- Les serveurs utilisés

2.1- Apache
C’est le serveur le plus répandu sur Internet, permettant la configuration de l’environnement
d’exécution de pages web. Il s'agit d'une application fonctionnant à la base sur les systèmes
d'exploitation de type Unix, mais porté sur de nombreux systèmes, dont Microsoft Windows.
2.2- MySQL
MySQL est un système de gestion de bases de données relationnelles (SGBDR) libre
fonctionnant sous diverses plates-formes telles que UNIX, Linux et Windows, et permettant
de manipuler des instructions adressées à la base de données Sous forme de requêtes SQL.
3- Langages de programmation
3.1- HTML5
L’HyperText Markup Language , généralement abrégé HTML, est le format de données
conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de
l’hypertexte permettant de structurer sémantiquement le contenu des pages, d’inclure des
ressources multimédias, des formulaires de saisie, et des éléments programmables tels que des
applets. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript)
et des formats de présentation (feuilles de style en cascade).
3.2- CSS3
Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML ou XML.
Le terme CSS est l'acronyme anglais de Cascading Style Sheets qui peut se traduire par
"feuilles de style en cascade".
3.3- Javascript
JavaScript est un langage de scripts incorporé aux balises HTML, permettant d'améliorer la
présentation et l'interactivité des pages Web.

3.4- PHP
Le PHP (HyperText Preprocessor) est un langage informatique utilise pour le back-end c’est
à dire pour faire des traitements sur le serveur. Il est principalement utilisé pour produire un
site web dynamique interagissant avec une base de données.
3.5- Twig
Twig est un moteur de templates pour le langage de programmation PHP, utilisé par défaut
par le framework Symfony. Il aurait été inspiré par Jinja, moteur de templates pour Python. Sa
version est 2.11.3
3.6- SQL
SQL ou (Standard Query Language) est un langage permettant d'interroger les bases de
données de manière simple.
Il couvre les trois fonctions indispensables à la mise en œuvre et à l'exploitation de bases de

données relationnelles :
• La création des données.

• La manipulation des données.
• Le contrôle des données.
A part le fait d'envoyer directement les requêtes SQL telles quelles au SGBD, le but ultime de
l'utilisation de SQL sera aussi d'inclure ces requêtes SQL dans un programme écrit dans un
autre langage. Ceci permet de coupler le SGBD à un langage informatique tel est le cas de
MySQL avec PHP
4- Outils technologiques (Framework)

4.1- Symfony
Symfony est un ensemble de composants PHP ainsi qu’un framework MVC libre écrit en
PHP. Il fournit des fonctionnalités modulables (traduction, manipulation des formulaires,
gestion des autorisations et de la sécurité, etc…) et adaptables qui permettent de faciliter et
d’accélérer le développement d’un site Web.

4.2- Bootstrap
Bootstrap est un framework Web open-source gratuit et ouvert pour la conception de sites
Web et d'applications Web. Il contient des modèles de conception basés sur HTML et CSS
pour la typographie, les formulaires, les boutons, la navigation et d'autres composants
d'interface, ainsi que des extensions JavaScript optionnelles.
4.3- JQuery
JQuery est un Framework Javascript sous licence libre qui permet de faciliter des
fonctionnalités communes de Javascript. L'utilisation de cette bibliothèque permet de gagner
du temps de développement lors de l'interaction sur le code HTML d'une page web, l'AJAX
ou la gestion des évènements.
Il possède les fonctionnalités suivantes :
• Manipulation du DOM (HTML ou CSS)
• Gestion des évènements (clic, survol, soumettre un formulaire ...)
• AJAX
• Effet d'animation
4.4- AJAX
Asynchronous Javascript And Xml (AJAX) : il désigne un nouveau type de conception de
pages Web permettant l'actualisation de certaines données d'une page sans procéder au
rechargement total de cette page.
5- Architecture de l’application
L’application Web qui sera mise en place pour répondre au besoin du projet sera basée sur
une architecture 3-tiers. Elle permet de séparer le client, le serveur d’application et le
réservoir de données.
L’application sera composée de 3 couches indépendantes :

• La couche de présentation des données : La couche présentation correspond à la

partie de l’application visible et interactive avec les utilisateurs. Elle relaie les requêtes
de l’utilisateur à destination de la couche métier, et en retour, lui présente les
informations renvoyées par les traitements de cette couche.
• La couche de traitements métiers : La couche métier correspond à la partie
fonctionnelle de l’application, responsable de l’implémentation de la « logique ». Elle
décrit les opérations que l’application opère sur les données en fonction des requêtes
des utilisateurs, effectuées au travers de la couche présentation. La couche métier offre
des services applicatifs et métiers à la couche présentation. Pour fournir ces services,
elle s’appuie sur les données du système, accessibles au travers des services de la
couche d’accès aux données.
• La couche d’accès aux données : Elle consiste en la partie gérant l’accès aux
données du système. Ces données peuvent être propres au système, ou gérées par un
autre système. La couche métier n’a pas à s’adapter à ces deux cas, ils sont
transparents pour elle ; et elle accède aux données de manière uniforme.
Le design pattern (patron de conception en français) Modèle-Vue-Contrôleur (MVC) permet
de traiter ces trois couches.
❖ MVC
Le MVC permet de séparer la logique de la programmation en trois parties :
-Le modèle est la partie qui permet de représenter les données et les règles métiers. L’objectif
du modèle est de récupérer des informations dans la base de données, de les organiser et de
les assembler.
-La vue correspond à l’IHM (Interface Homme Machine). C’est la partie de l’affichage. Son
objectif est la présentation des données et l’interaction avec l'utilisateur.
-Le contrôleur, quant à lui, se charge d’intercepter les requêtes de l’utilisateur, d'appeler le
modèle puis de rediriger vers la vue adéquate

Figure 13 : Illustration du MVC
II- REALISATION DE L’APPLICATION

1- Implémentation de la BD
Une base de données est un ensemble de données, reliées entre elles, stockées sur support
numérique centralisé ou distribué, servant pour les besoins d’une ou plusieurs applications.
Après avoir modélisé notre application web avec les différents diagrammes offerts par le
langage de modélisation UML, il est nécessaire de mettre en œuvre une base car elle permet
de mettre des données à la disposition de l’utilisateur pour une consultation, une saisie ou une
mise à jour tout en s’assurant des droits accordés à ces derniers.
1.1- Les règles de gestion

• Un utilisateur d’entreprise peut envoyer un ou plusieurs messages
• Un utilisateur d’entreprise appartient à une et une seule entreprise
• Le nom d’utilisateur est unique pour les utilisateurs d’une même entreprise ou pour les
administrateurs

1.2- Le dictionnaire de données
Tableau 12 : Dictionnaire de données

Classe Attribut Signification Type Taille
Message IDM Identifiant Entier 20
is_archive Booléen pour savoir si le 1
message est archive
Contenu Contenu du message Caractères 255
Emet Nom de l’émetteur 15
Dest Numéro du récepteur du

message
dateEnv Date d’envoi du message
Statut Statut du message

(envoyé, non envoyé)
Entreprise IDE Identifiant Entier 11
creditSMS Nombre de SMS que

l’entreprise peut envoyer
creditSeuil Nombre de SMS critique
défini par l’e/se
toujours Booléen définissant si les 1
EnvoyerLesSMS SMS de l’e/se peuvent
être envoyés en dessous
du crédit Seuil
nom Nom de l’entreprise Caractères 50
Tel Contact téléphonique
email Adresse email
adresse Adresse / Localisation
Utilisateur IDU Identifiant Entier 11
username Nom de l’utilisateur Caractères 180
role Rôle de l’utilisateur dans 5

le système

password Mot de passe 255
language Langue de l’application 10

pour cet utilisateur
phone Contact téléphonique 50
1.3- Modèle relationnel

Le concepteur de base de données relationnelles doit élaborer un schéma relationnel de la
base de données. Cette activité consiste à définir toutes les relations de la base de données et
leurs attributs.
1.3.1- Règles de passage au modèle relationnel

Les règles utilisées pour le passage du diagramme de classes de notre application web au
modèle relationnel sont les suivantes :
• Toute entité devient une relation ayant pour clé primaire son identifiant.
• Chaque propriété se transforme en attribut.
• Toute association non hiérarchique (de type [n, n] ou de dimension > 2) devient une
relation. La clé primaire est formée par la concaténation (juxtaposition) de l'ensemble
des identifiants des entités reliées.
• Toutes les propriétés éventuelles deviennent des attributs qui ne peuvent pas faire
partie de la clé.
1.3.2- Modèle relationnel

Après avoir appliqué les règles de passage cité précédemment, nous avons abouti au schéma
relationnel de la base de données suivant :
Message (IDM,#IDU ,contenu ,emet ,dest ,dateEnv ,statut,is _archive)
Utilisateur (IDU,#IDE, username ,password ,role ,phone , language)
Entreprise (IDE,nom,creditSMS,tel,email,adresse,creditSeuil,toujoursEnvoyerLesSMS)

Figure 14 : Schéma de la base de données
2- Implémentation de l’application
Dans cette partie, nous nous intéresserons à la démarche nécessaire à la création, l’utilisation
et au déploiement de l’application dans un serveur local.
2.1- Création du projet

Elle s’effectue à l’aide de la commande Symfony
symfony new ‘sms platform' –webapp

Figure 15 : Création du projet
Elle aura pour effet d’installer les dépendances nécessaires à l’utilisation du framework
Symfony à l’intérieur du projet.
Ensuite, nous pouvons accéder aux pages Web du projet a l’aide du serveur local de Symfony
déployé à l’aide de la commande symfony server: start
Figure 16 : Déploiement du serveur local de Symfony

Figure 17 : Page d’accueil du serveur Web local de Symfony
La bande rouge située en bas est la debug-toolbar de Symfony, elle permet d’avoir des
renseignements sur les requêtes effectuées par la page Web, l’utilisateur connecté et autres
informations utiles pour l’analyse des performances de cette dernière
2.2- Création des entités(Model)

Une entité dans Symfony est une classe qui représente un objet. Ici, les entités représentent les
différents acteurs du système ainsi que les messages stockes. Pour manipuler les entités, on
utilise l’ORM (Mapping objet-relationnel) Doctrine qui va permettre de lier les données de la
base de données aux entités. Afin d’utiliser Doctrine et manipuler nos entités, nous
installerons l’orm-pack de Symfony.

Figure 18 : Installation de doctrine
Figure 19 : Création de l’entité entreprise
Suite à la création des entités pour pouvoir manipuler les données dans la BD avec Symfony,
il faut :
• Définir la variable d’environnement DATABASE_URL dans le fichier .env

permettant l’accès de Symfony à la BD qu’on veut utiliser.

Figure 20 : Configuration de la variable DATABASE_URL
• Enregistrer le changement des données avec la commande symfony console

make :migration
Figure 21 : Migration faite pour l'enregistrement des données de l 'entreprise
Ensuite, on peut effectuer les changements dans notre base de données avec la commande
symfony console doctrine:migrations:migrate
Figure 22 : Enregistrement des informations des entités dans la base de données
2.3- Création des Vues(View) et Controller(Controller)

Ils nous permettent respectivement de créer les fichiers des pages Web et des Controller pour
définir la logique de fonctionnement avec laquelle les données de cette/ces page(s)
communiquent ou interagissent.

La création des vues et des Controller se fait simultanément à l’aide de la commande symfony
console make : controller qui crée un Controller et un fichier .html.twig représentant la vue
associe à ce Controller.
Figure 23 : Création du Controller de la page pour la manipulation des entreprises
En plus de cela, nous installerons node.js dans notre projet et le bundle webpack-encore pour
la manipulation des fichiers externes au pages Web (images, vidéos ,fichiers de style ,etc…)
Figure 24 : Installation de webpack-encore
3- Création et présentation de la page d’authentification

C’est dans cette page qu’un utilisateur donne pourra s’identifier pour accéder à son espace
dans la plateforme.
Symfony permet la génération de la page Web d’authentification et du code correspondant au

contrôle de cette procédure.

3.1- Création des utilisateurs(l’entité User)

Dans Symfony, les données des utilisateurs sont stockées dans une table user correspondant à
l’entité représentant les utilisateurs du système. On la crée à l’aide de la commande symfony
console make :user
Figure 25 : Création de l’entité User
3.2- Création du formulaire d’authentification

Une fois l’entité User créée, on peut maintenant générer le formulaire d’authentification
correspondant aux données de cette dernière. Cela se fait à l’aide de la commande symfony
console make : auth Nous y ajouterons également l’option remember_me pour permettre à
l’utilisateur de conserver ses données afin de lui éviter de les ressaisir à chaque arrive sur
cette page.

Mais avant de le faire, nous allons d’abord créer le Controller associé aux utilisateurs
Figure 26 : Création du Controller des utilisateurs
Figure 27 : Page native du Controller des utilisateurs après authentification

Figure 28 : Création du formulaire d’authentification
Figure 29 : Formulaire d'authentification natif de Symfony

Figure 30 : Formulaire d’authentification final de l’application
III- PRESENTATION DE QUELQUES INTERFACES

1- Page de la gestion des entreprises
Figure 31 : Page de gestion des entreprises
Dans cette page l’administrateur a la possibilité d’effectuer les opérations relatives à la

gestion des entreprises tels que la création, la modification, la suppression (si elle ne comporte
aucun utilisateur) ainsi que la recharge des comptes des SMS des entreprises.

2- Page de visualisation des SMS
Figure 32 : Page de visualisation des SMS (Vue Liste)
Il s’agit de la page principale de toute l’application. Dans cette page l’utilisateur d’une
entreprise a la possibilité de percevoir les SMS envoyés par son entreprise. Et en plus de cela,
il peut éventuellement télécharger ces données au format CSV, PDF, Excel et même
imprimer, l’option Vues, elle permet de changer l’affichage des SMS.

Figure 33 : Page de visualisation des SMS (Vue Carte)

CONCLUSION
Somme toute, il a été question pour nous tout au long de ce projet de refondre une plateforme
Web ayant pour objectif principal de permettre aux entreprises de visualiser les SMS envoyés
par l’API SMS BANKING créée par BETTER PLANNING. Pour atteindre notre objectif,
premièrement, nous avons effectué un cahier de charges pour fixer les besoins réels de la
plateforme ainsi qu’expliquer le problème posé par le projet et ses limites, deuxièmement
nous avons analysé et conçu le nouveau système à mettre en place pour expliciter son
fonctionnement et ses intervenants et troisièmement nous avons réalisé l’application
proprement dite. Il en ressort que la conception d’une application passe par un certain nombre
d’étapes bien précises dont la bonne exécution joue un rôle phare dans la réussite de cette
application. Comme perspective, il serait intéressant d’intégrer dans ce système des
fonctionnalités supplémentaires telles que la gestion des recharges de SMS (conservation des
données de recharge), l’envoi des SMS en masse ainsi que l’envoi des SMS formatés pour les
messages structures selon le profil de ces récepteurs ou la raison du message.

REFERENCES BIBLIOGRAPHIQUES
OUVRAGES UTILISES :
• Remy Manu , Cours n°3 : Diagramme des classes, coursUML3.pdf (remy-manu.no-
ip.biz)
• Remy Manu , Cours n°5 : Diagramme de séquences, coursUML5.pdf (remy-manu.no-
ip.biz)
• Remy Manu , Cours n°2 : Diagramme des cas d’utilisation, coursUML2.pdf (remy-
manu.no-ip.biz)
SITES WEB VISITES :
• Databases and the Doctrine ORM (Symfony Docs) ,
https://symfony.com/doc/current/doctrine.html : 20-03-2024 , 08h00
• Flex-Bootstrap , https://getbootstrap.com/docs/4.0/utilities/flex/ : 21-03-2024 , 13h21
• if - Documentation – Twig , https://twig.symfony.com/doc/2.x/tags/if.html : 22-03-
2024 , 09h39
• jquery Remove Elements,
https://www.w3schools.com/jquery/jquery_dom_remove.asp : 31-03-2024, 19h45
• jquery Validation rules and messages,
https://stackoverflow.com/questions/14179417/jquery-validation-rules-and-messages :
27-03-2024 , 14h29
• Add Tag Input Box in HTML CSS & Javascript ,
https://www.youtube.com/watch?v=BnXv1dwvebY&pp=ugMICgJmchABGAE%3D :
31-03-2024 , 20h01
RAPPORTS DE PROJETS :
• NGAPMEN Ulrich , Conception Et Réalisation D’une Application Web De Suivi Et
Gestion Des Projets , 2022 , IUT
• LONTSIE Dilane , Informatisation de l’archivage des dossiers patient à l’hôpital
catholique notre dame de l’amour de Logpom , 2021 , 3IAC
• KOM Morgane , Mise sur pied d’un site web vitrine : cas d’Easy Life , 2021 , 3IAC
• KOM Morgane et MEVA’A Jules , Analyse, conception et implémentation d’une
plate-forme de partage de services de transport , 2022 , 3IAC

TABLE DES MATIERES
DEDICACE _________________________________________________________________ I
REMERCIEMENTS ___________________________________________________________ II
SOMMAIRE _______________________________________________________________ III
LISTE DES ABREVIATIONS ____________________________________________________ IV
LISTE DES FIGURES __________________________________________________________ V
LISTE DES TABLEAUX ________________________________________________________ VI
RESUME __________________________________________________________________ VII
ABSTRACT _______________________________________________________________ VIII
CHOUXIANG DE ____________________________________________________________ IX
AVANT-PROPOS ____________________________________________________________ X
INTRODUCTION _____________________________________________________________ 1
CHAPITRE 1 : CAHIER DE CHARGES _____________________________________________ 2
I- PRESENTATION DU PROJET ___________________________________________________ 2
1- Contexte _________________________________________________________________________ 2
2- Définitions et Objectifs _____________________________________________________________ 2
II- EXPRESSION DES BESOINS ____________________________________________________ 2

1- Besoins fonctionnels _______________________________________________________________ 2
2- Besoins non fonctionnels ____________________________________________________________ 3
III- ESTIMATION DES RESSOURCES ET DU BUDGET PREVISIONNEL ______________________ 3

IV- ORGANISATION DU PROJET __________________________________________________ 4
1- Principaux intervenants _____________________________________________________________ 4
2- Planning du projet _________________________________________________________________ 4
3- Les livrables ______________________________________________________________________ 5
CHAPITRE 2 : ANALYSE ET CONCEPTION DE LA SOLUTION ___________________________ 7

I- ANALYSE __________________________________________________________________ 7
1- Analyse critique de sms platform _____________________________________________________ 7
1.1- Présentation des pages ________________________________________________________ 7
1.2- PROBLEMES RENCONTRES ______________________________________________________ 9
2- Analyse de l’existant ______________________________________________________________ 10
2.1- Cas d’une application de messagerie : Textmagic ___________________________________ 10
2.1.1- Présentation _____________________________________________________________ 10
2.1.2- Fonctionnalités ___________________________________________________________ 11
2.1.3- Avantages _______________________________________________________________ 11
2.1.4- Inconvénients ____________________________________________________________ 12
2.2- AUTRES SOLUTIONS PROPOSEES ________________________________________________ 12
2.2.1- Twilio ___________________________________________________________________ 12
2.2.2- Vonage __________________________________________________________________ 13
II- CONCEPTION _____________________________________________________________ 13

1- Présentation du langage de modélisation utilise : UML ___________________________________ 13

1.1- Bref Historique ______________________________________________________________ 13
1.2- Les diagrammes utilisés _______________________________________________________ 13
2- Conception fonctionnelle : le diagramme de cas d’utilisation ______________________________ 15
2.1- Identification des acteurs ______________________________________________________ 16
2.2- Identification des cas d’utilisation _______________________________________________ 16
2.3- Le diagramme de cas d’utilisation du système _____________________________________ 17
3- Conception dynamique : le diagramme de séquences ____________________________________ 18
3.1- Diagramme de séquences de l’authentification ____________________________________ 18
3.1.1- Description textuelle du cas d’utilisation _______________________________________ 18
3.1.2- Diagramme de séquences ___________________________________________________ 19
3.2- Diagramme de séquences de la création de compte d’entreprise ______________________ 20
3.2.1- Description textuelle _______________________________________________________ 20
3.3- Diagramme de séquences de l’envoi de messages __________________________________ 21
3.3.1- Description textuelle _______________________________________________________ 21
4- Conception statique : Le diagramme de classe __________________________________________ 23
CHAPITRE 3 : REALISATION ET PRESENTATION DU RESULTAT OBTENU ________________ 25

I- ENVIRONNEMENT DE TRAVAIL _______________________________________________ 25
1- Logiciels utilises __________________________________________________________________ 25
1.1- Outils de modélisation ________________________________________________________ 25
1.1.1- Visual Paradigme __________________________________________________________ 25
1.1.2- StarUML _________________________________________________________________ 25
1.1.3- DBDesigner ______________________________________________________________ 25
1.2- XAMPP ____________________________________________________________________ 26
1.3- PHPStorm __________________________________________________________________ 26
1.4- Microsoft Edge ______________________________________________________________ 26
1.5- PHPMyAdmin _______________________________________________________________ 26
2- Les serveurs utilisés _______________________________________________________________ 27
2.1- Apache ____________________________________________________________________ 27
2.2- MySQL _____________________________________________________________________ 27
3- Langages de programmation ________________________________________________________ 27
3.1- HTML5 _____________________________________________________________________ 27
3.2- CSS3_______________________________________________________________________ 27
3.3- Javascript __________________________________________________________________ 27
3.4- PHP _______________________________________________________________________ 28
3.5- Twig _______________________________________________________________________ 28
3.6- SQL _______________________________________________________________________ 28
4- Outils technologiques (Framework) __________________________________________________ 28
4.1- Symfony ___________________________________________________________________ 28
4.2- Bootstrap __________________________________________________________________ 29
4.3- JQuery _____________________________________________________________________ 29
4.4- AJAX ______________________________________________________________________ 29
5- Architecture de l’application ________________________________________________________ 29
II- REALISATION DE L’APPLICATION______________________________________________ 31
1- Implémentation de la BD ___________________________________________________________ 31
1.1- Les règles de gestion _________________________________________________________ 31
1.2- Le dictionnaire de données ____________________________________________________ 32
1.3- Modèle relationnel ___________________________________________________________ 33

1.3.1- Règles de passage au modèle relationnel ______________________________________ 33

1.3.2- Modèle relationnel ________________________________________________________ 33
2- Implémentation de l’application _____________________________________________________ 34
2.1- Création du projet ___________________________________________________________ 34
2.2- Création des entités(Model) ___________________________________________________ 36
2.3- Création des Vues(View) et Controller(Controller) __________________________________ 38
3- Création et présentation de la page d’authentification ___________________________________ 39
3.1- Création des utilisateurs(l’entité User) ___________________________________________ 40
3.2- Création du formulaire d’authentification ________________________________________ 40
III- PRESENTATION DE QUELQUES INTERFACES _____________________________________ 43
1- Page de la gestion des entreprises ___________________________________________________ 43
2- Page de visualisation des SMS _______________________________________________________ 44
CONCLUSION ______________________________________________________________ 46
REFERENCES BIBLIOGRAPHIQUES _____________________________________________ 47
OUVRAGES UTILISES : ___________________________________________________________ 47
SITES WEB VISITES : ____________________________________________________________ 47
RAPPORTS DE PROJETS : ________________________________________________________ 47
TABLE DES MATIERES _______________________________________________________ 48

Rapport1 - Copie

Transféré par

Droits d'auteur :

Formats disponibles

Rapport1 - Copie

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapport1 - Copie

Transféré par

Droits d'auteur :

Formats disponibles

REFONTE D’UNE PLATEFORME DE VISUALISATION DES MESSAGES D’UNE API

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR I

• M. NGUEGUIM Lionel, développeur a BETTER PLANNING pour sa rigueur dans

• M. TADIE Herve, développeur à BETTER PLANNING pour sa disponibilité tout

• Tout le corps professoral de l’école 3IAC de l’Institut Universitaire de la Côte à

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR II

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR III

LISTE DES ABREVIATIONS

Tableau 1: Liste des abréviations

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR IV

LISTE DES FIGURES

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR V

LISTE DES TABLEAUX

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR VI

• API : interface normalisée par l’intermédiaire de laquelle le programmeur a

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR VII

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR VIII

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR IX

Tableau 2 : Etablissements et Cycles de l'IUC

Etablissements Cycles proposés

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR X

• MASTER PROFESSIONNEL en partenariat avec l’ENSP

• Licence Professionnelle en Télécommunication et

School of Engineering and

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR XI

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR 1

CHAPITRE 1 : CAHIER DE CHARGES

II- EXPRESSION DES BESOINS

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR 2

Les besoins fonctionnels nécessaires de ce programme sont les suivants :

- Télécharger l’historique de ces messages sur une période donnée

- Envoyer des messages à des clients spécifiques

- L’authentification des différents utilisateurs

2- Besoins non fonctionnels

• Efficacité : L’application doit permettre à l’utilisateur d’avoir facilement accès aux

• Performance : L’application doit satisfaire toutes les exigences de l’utilisateur de

• Fiabilité : L’application doit fonctionner de façon cohérente et sans erreur le système

III- ESTIMATION DES RESSOURCES ET DU BUDGET PREVISIONNEL

Tableau 3 : Gestion des coûts

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR 3

Développeur 02 05 semaines 25 000 250 000

IV- ORGANISATION DU PROJET

Tableau 4 : Principaux intervenants au projet

NDZENGUE LOUIS-CYR Etudiant en 3e année 3IL Développeur et Analyste

M. TCHOUTA Alain Enseignant à l’Institut Encadreur

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR 4

Tableau 5 : Planning du projet

Figure 1 : Diagramme de Gantt du planning du projet

❖ Le rapport final qui sera constitué de :

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR 5

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR 6

CHAPITRE 2 : ANALYSE ET CONCEPTION DE LA SOLUTION

• Une analyse technique critique de l’application à refondre, accompagnée des premiers

1- Analyse critique de sms platform

1.1- Présentation des pages

Figure 2 : Page d'authentification de l'utilisateur

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR 7

Figure 3 : Page d’authentification de l’administrateur

Figure 4 : Page d’accueil de l’administrateur

REDIGE ET PRESENTE PAR NDZENGUE LOUIS-CYR 8