UNIVERSITE SIDI MOHAMED BEN ABDELLAH FACULTE DES SCIENCES ET TECHNIQUES FES DÉPARTEMENT D INFORMATIQUE

(1)

P P P rr r o o o jj j ee e tt t d d d ee e F F F ii i n n n d d d ’’ ’ E E E tt t u u u d d d ee e ss s

L Li L iic cc ee e n nc n cc ee e S S Sc cc iie i ee n nc n cc ee e ss s ee e tt t T T Te ee cc c h hn h n ni ii q qu q u ue ee ss s G G G éé é n ni n iie ee II I n nf n ff oor o rr m ma m aat tti ii q qu q u ue ee

C C C oon o n n cc c ee e p p p tt t ii i oon o n n ee e tt t d d d éé é vve v ee ll l oop o p p p p p ee e m m m ee e n n n tt t d d d ’’ ’ u u u n n n ee e aa a p p p p p p lli l ii cc c aat a tt ii i oon o n n w w w eeb e b b p p p oo o u u u rr r ll l aa a C C C rr r éé é aat a tt ii i oon o n n ee e tt t ll’ l ’’ E En E n nv vvo ooi ii d d de ee N N N eew e w w ss s lle l ee tt t tt t ee e rr r ss s

L

Li ie eu u d de e s st ta ag ge e : : La L a S So oc c ié i ét té é W WE EB BC CO ON NS SU UL LT TI IN NG G

Ré R é al a li is sé é pa p ar r : : En E nc c ad a dr ré é p pa ar r : :

Derraz Amine Pr. Zahi Azeddine Saidi Mohammed Pr. Mrabti Fatiha

So S ou ut te en nu u l le e 1 15 5/ /0 06 6/ /2 20 01 12 2 d de ev va an nt t l le e j ju ur ry y c co om mp po os s é é d de e : :

Pr. ZENKOUAR KHALID Pr. ABBAD KHALID Pr. ZAHI AZEDDINE

Année Universitaire 2011-2012

(2)

DÉPARTEMENT D’INFORMATIQUE

DEDICACE

A nos pères affectueux, à nos très chères mères.

Aucune dédicace ne saurait exprimer nos sentiments, que dieu le toutpuissant vous préserve et vous procure santé et longue vie.

A nos professeurs pour leurs énormes efforts.

A nos sœurs, nos frères et nos camarade de FST Fès, pour l’amour, le respect le courage qu’ils nous ont toujours octroyés.

Au personnel du WEBCONSULTING.

A nos familles.

A tous nos amis.

Remerciement

Au terme de ce travail et avant tout développement sur cette

expérience professionnelle, il apparait opportun de commencer ce

rapport par des remerciements, à ceux qui m’ont beaucoup appris

au cours de ce stage et qui ont eu la gentillesse d’en faire un

moment très profitable.

(3)

Mr ZAHI AZEDDINE, pour l’aide et les conseils concernant le projet réalisé.

A cet égard, nos vifs remerciements s’adressent naturellement à l’ensemble du personnel de la société WEBCONSULTING.

Outre les formalités de politesse coutumières, je tiens à remercier sincèrement Mr ALLOU MOHAMMED pour son accueil au sein de la société.

On garde également une noble expression de gratitude envers Mr ESSAIDI ABDESSAMAD et Mr FARID ROUAH, nos deux encadrants de stage et l’ensemble du personnel de la société qui n’ont ménagé aucun effort chaque fois que le besoin s’est fait sentir et pour leur disponibilité jamais démentie.

On voudrait remercier toutes les personnes qui ont contribué de près ou de loin à l’aboutissement de ce projet

Enfin, Veuillez trouver dans ce travail, mesdames et messieurs les

membres du jury, le témoignage de mon profond respect, espérant

que ce travail soit à la hauteur des exigences formulées .

(4)

DÉPARTEMENT D’INFORMATIQUE

TABLE DES MATIERES

DEDICACE ... 2

REMERCIEMENT ... 2

INTRODUCTION ... 6

CHAPITRE 1 : CONTEXTE DU PROJET ... 7

1- PRESENTATION DU LIEU DE STAGE ... 7

1-1- PRESENTATION DU WEBCONSULTING : ... 7

1-2- DOMAINE DE SPECIALISATION : ... 7

1-3- L’EQUIPE DE WEBCONSULTING : ... 8

1-4- L’ORGANIGRAMME DU WEBCONSULTING :... 9

1-5- LA METHODOLOGIE EN CREATION DE LOGICIEL ET SITE INTERNET : ... 9

1-6- LES PROJETS REALISES : ... 10

2- PRESENTATION DU PROJET ... 11

2-1- PROBLEMATIQUE : ... 11

2-2- BESOINS FONCTIONNELS : ... 11

3- DEMARCHE SUIVI ... 14

3-1- PROCESSUS DE DEVELOPPEMENT ... 14

3-2- LE PROCESSUS 2TUP ... 14

CHAPITRE 2 : ANALYSE ET CONCEPTION ... 17

1- CAPTURE DES BESOINS FONCTIONNELS ... 18

1-1- IDENTIFICATIONS DES ACTEURS : ... 18

1-2- IDENTIFICATION DES MESSAGES : ... 18

1-3- MODELISATION DU CONTEXTE : ... 19

1-4- IDENTIFICATION DES CAS D’UTILISATION : ... 20

2- ANALYSE ... 25

2-1- DIAGRAMME DE CLASSE : ... 26

2-2- MODELE DYNAMIQUE : ... 27

3- CONCEPTION :... 31

3-1- ARCHITECTURE ADOPTEE : ... 31

3-2- DEVELOPPEMENT DE L’APPLICATION : ... 32

3-3- MODELE LOGIQUE DE DONNEES : ... 32

CHAPITRE 3 : REALISATION ... 33

1- OUTILS DE DEVELOPPEMENT : ... 34

(5)

2- CAPTURE D’ECRAN : ... 36 CONCLUSION... 40 BIBLIOGRAPHIE ... 41

(6)

DÉPARTEMENT D’INFORMATIQUE

Introduction

Il ne fait aucun doute que l’informatique représente la révolution la plus importante et la plus innovante qui a marqué la vie de l’humanité durant toutes ces années. En effet, loin d’être un éphémère phénomène de mode, ou une tendance passagère, l’informatique vient nous apporter de multiples conforts à notre mode de vie. Aucun domaine n’est resté étranger à cette stratégie qui offre tant de services aussi bien pour l’entreprise ou l’administration que pour le personnel

Au terme de nos études à la FST, on aura certainement à faire face à un milieu professionnel qui, au-delà de la formation, exige une certaine connaissance du milieu du travail ainsi qu’une élasticité au niveau de la communication, d’où le stage qu’on a effectué au WEBCONSULTING, il s’agit en fait de concevoir et développer une application permettant « la création et l'envoi de newsletters »,ce stage est une étape importante pour un étudiant, non seulement du point de vue de la scolarité, mais aussi d’un point de vue personnel.

Durant cette durée de stage, on a pu constater tout d’abord que l’activité du stagiaire doit se partager entre une activité d’apprentissage « fondamentale » et une activité d’apprentissage « professionnel ».

Notre rapport est structuré en trois chapitres :

Le premier chapitre permettra de donner un aperçu sur l’histoire de la société et son organisation, et donnera une vision générale sur le projet réalisé.

Le second chapitre concerne l’étude détaillée où on a présenté la méthodologie UML et la conception de l’application.

Finalement, dans le troisième chapitre s’achève le rapport par une

illustration de l’application et des différentes interfaces du projet.

(7)

1- Présentation du lieu de stage

1-1- Présentation du Webconsulting :

Webconsulting est une société informatique spécialisée dans l’édition de logiciels. Elle s’engage au côté de ses clients à traduire et interpréter le plus fidèlement possible leurs besoins. Elle offre une équipe passionnée, qualifiée et pluridisciplinaire entièrement dédiée au projet des stagiaires.

1-2- Domaine de spécialisation :

Web Consulting offre des services dans les domaines suivants : La conception de sites Web

Analyse et architecture Création de site Web

La programmation de logiciels de gestion de site Web

Chapitre 1 : Contexte du projet

(8)

DÉPARTEMENT D’INFORMATIQUE

Gestion de contenu

Gestion de base de données clients Gestion des accès (intranet et extranet) Gestion du commerce en ligne

L'indexation et le référencement dans les moteurs de recherche Optimisation des pages par mots clés

Accroissement des liens externes (Page Rank) Suivi de positionnement de trafic

1-3- L’équipe de Webconsulting :

L'équipe de Webconsulting est composée de spécialistes dans la programmation Web, le design et l'ergonomie de site, le marketing sur Internet et la gestion de projet.

(9)

1-4- L’organigramme du webconsulting :

Figure 1 : Organigramme du WEBCONSULTING 1-5- La méthodologie en création de logiciel et site internet :

La démarche de gestion de projet de Webconsulting s'articule en 5 étapes distinctes.

Cette organisation permet d'améliorer le suivi du projet et de permettre au client de suivre le projet en tant qu'acteur afin d'optimiser la réussite du projet et de respecter les délais prévus.

ETAPE 1 : Prise de contact client avec Webconsulting

Définition du positionnement stratégique de la société Analyse des besoins du client

(10)

DÉPARTEMENT D’INFORMATIQUE

ETAPE 2 : Conseil pour optimiser la création de site internet

Proposition des solutions technique et commerciale en réponse aux attentes client.

Accord du client.

ETAPE 3: Organisation récupération des données

Création des outils de gestion de projet : email projet / Compte client Création cahier des charges

Récupération des données client Rétro-planning

Validation client

Récupération des informations (textes, photos) ETAPE 4 : Conception

Conception de la maquette avec intégration des éléments Validation client avec une série de modifications

Prise en compte des modifications et correction de la maquette Validation de la maquette

Orientation de la charte graphique

Réalisation de la charte graphique par l'équipe de webdesigner Validation client avec une série de modifications

Prise en compte des modifications et correction de la charte graphique Validation définitive de la charte graphique

ETAPE 5 : Création du logiciel, site Internet et mise en ligne

Réalisation du logiciel et site Internet en fonction de la maquette validée Test avec le client

Prise en compte des modifications Validation finale

Mise en ligne du site Internet.

1-6- Les projets réalisés :

Clic-job.com

(11)

Clic-cv.com

Sitespouravocats.com Morocco-immo.com Achat-groupes.com I-ecole.com

Tutorielinformatique.com

2- Présentation du projet

2-1- Problématique :

La société

Webconsulting

,spécialisée dans le domaine de création et de gestion des sites web, a réalisé plusieurs projets citant par exemple :

clic-job.com : C’est un site où les internautes peuvent s’inscrire afin d’avoir les nouveautés sur les offres d’emploi.

morocco-immo.com : Portail immobilier du Maroc qui regroupe les annonces immobilières de vente, delocation et de location vacances de toutes les villes du Maroc.

Pour améliorer l’accessibilité aux sites, la

Webconsulting

avise régulièrement les internautes des nouveautés des sites en leurs envoyant des newsletters.

Newsletter ou lettre d'information, c'est une lettre électronique à laquelle les internautes peuvent s'abonner sur un site Web, afin de recevoir régulièrement par courrier électronique des informations brèves et récentes associées à ce site.

Avant, les employés du

Webconsulting

créaient et envoyaient manuellement les newsletters en utilisant les langages HTML, PHP ce qui n’est pas trop efficace.

Pour remédier à cette problématique la société décide de nous chargerde concevoiruneapplication Web, qui permettra de créer une Newsletter automatiquement et de l’envoyer vers plusieurs contacts groupés.

Nous avons effectué plusieurs recherches pour identifier au mieux les besoins de l’application, et ceci afin de répondre aux attentes des utilisateurs.

2-2- Besoins fonctionnels :

(12)

DÉPARTEMENT D’INFORMATIQUE

Nous avons recueilli les informations au sein de la société. Cette phase correspond à une recherche sur le terrain pour bien définir le cadre de notre système.

L’application doit permettre à ses utilisateurs de se connecter à une interface :

Administrateur : Après authentification il peut : - Gérer les utilisateurs.

- Gérer les destinataires.

- Gérer les bulletins.

- Importer/Exporter des contactsdes contacts à partir des fichiers.

- Gérer les groupes.

- Gérer les sites.

- Envoyer les bulletins.

Utilisateur : Après authentification il peut : - Gérer les destinataires.

- Importer/Exporter des contacts à partir des fichiers.

- Gérer les groupes.

- Gérer les sites.

Le but principal de l’application c’est de permettre à l’utilisateur la gestion des activités suivantes dont on va détaillés chacune d’eux :

•

Gestion des groupes :

Le groupe c’est un ensemble des emails importés à partir d’un fichier CSV ou TXT, l’application permettra aux utilisateurs d’ajouter, modifier ou supprimer un groupe.

Chaque utilisateur créera ses propres groupes.

•

Gestion des utilisateurs :

L’application permet à l’administrateur d’ajouter, modifier ou bien supprimer un utilisateur.

•

Import/Export :

Chaque utilisateur peut importer des contacts à partir des fichiers CSV/TXT, dans un groupe déjà créé.

L’utilisateur peut de même exporter ses contacts dans un fichier CSV.

•

Gestion des bulletins :

Le bulletin c’est une Newsletter qu’on forme pour aviser les internautes des différentes nouveautés des sites.

(13)

Création des bulletins : Chaque utilisateur crée ses propres bulletins, il aura aussi le droit de les modifier ou les supprimer.

• Gestion des destinataires :

Permet à l’utilisateur de lister tous les destinataires dans un tableau, ainsi l’utilisateur peut gérer plusieurs contacts à la fois.

L’application permet aussi :

– Changer l’état des contacts en utilisant les outils activer/désactiver.

– Lister les contacts selon le groupe.

– Lister les contacts selon l’état activé/désactivé.

– Rechercher des contacts précis.

– Ajouter, modifier ou supprimer des contacts.

• Gestion des sites :

L’utilisateur peut ajouter un nouveau site, le modifier ou bien le supprimer.

• Envoyer un bulletin :

C’est la partie la plus importante dans l’application, elle permet d’envoyer un bulletin au groupe de contacts choisi.

IL y’a aussi l’option d’envoyer le bulletin test qui sera expédier à l’email de l’utilisateur.

(14)

DÉPARTEMENT D’INFORMATIQUE

3- Démarche suivi

3-1- Processus de développement

Le processus de développement constitue un facteur déterminant dans la réussite d’un projet, du fait qu’il cadre ses différentes phases et caractérise les principaux traits de sa conduite. Pour cela, le choix d’une méthode de développement, qui soit adéquate aux particularités et exigences d’un projet, doit être élaboré au préalable afin d’obtenir un produit de qualité qui répond aux besoins et attentes des utilisateurs.

3-2- Le processus 2TUP

Le processus 2TUP (TwoTrackUnifiedProcess) est un processus unifié. Il gère la complexité technologique en donnant part à la technologie dans son processus de développement.

Le 2TUP propose un cycle de développement qui sépare les aspects techniques des aspects fonctionnels et propose une étude parallèle des deux branches : fonctionnelle (étude de l’application) et la technique (étude de l’implémentation), le processus 2TUP s’articule autour de trois branches :

• Une branche technique

• Une branche fonctionnelle

• Une branche de conception et de réalisation.

La figure suivante détaille les étapes de développement des trois branches du processus :

(15)

Figure 2 : L’approche de 2TUP Branche fonctionnelle

:

Les principales étapes de la branche fonctionnelle se présentent comme suit : L’étape capture des besoins fonctionnels: Cette phase a pour objectif de définir :

• La frontière fonctionnelle entre le système et son environnement.

• Les activités attendues des différents utilisateurs par rapport au système.

L’étape d’analyse: Consiste à étudier précisément les spécifications fonctionnelles de manière à obtenir une idée de ce que va réaliser le système en terme de métier.

Branche technique :

Les principales étapes de la branche technique se présentent comme suit :

L’étape capture des besoins techniques : Cette étape recense toutes les contraintes sur les choix de technologies pour la conception du système. Les outils et le matériel sélectionnés ainsique la prise en compte des contraintes d’intégration avec l’existant (pré requis d’architecturetechnique).

L’étape conception générique: Définit les composants nécessaires à la construction del’architecture technique. Cette conception est complètement indépendante des aspectsfonctionnels. Elle permet de générer le modèle de conception technique qui définit les Framework.

Phase conception – réalisation

:

(16)

DÉPARTEMENT D’INFORMATIQUE

Les principales étapes de cette branche se présentent comme suit :

L’étape conception préliminaire: Cette étape permet de produire le modèle de conception système. Ce dernier organise le système en composants, délivrant les services techniques et fonctionnels, Ce qui induit le regroupement des informations des branches technique et fonctionnelle.

L’étape conception détaillée: permet d’étudier comment réaliser chaque composant.

Le résultat fournit l’image prête à fabriquer du système complet.

L’étape de codage : permet d’effectuer la production des composants et les tests des unités de code au fur et à mesure de leur réalisation.

L’étape de recette : consiste à valider les fonctionnalités du système développé.

(17)

Chapitre 2 : Analyse et Conception

(18)

DÉPARTEMENT D’INFORMATIQUE

1- Capture des besoins fonctionnels

Nous allons procéder selon le processus 2TUP qui consiste à recenser et modéliser les différents processus métiers. Cette analyse présente une abstraction totale et indépendante de toute technologie ou implémentation.

La spécification des besoins va nous permettre d’avoir une meilleure approche des utilisateurs, des fonctionnalités et de la relation entre les deux. Elle sera sous forme de cas d’utilisation. Pour cela nous allons procéder ainsi:

• Identification des acteurs du nouveau système.

• Identification des messages.

• Identification des cas d’utilisations.

• Description des cas d’utilisations.

1-1- Identifications des acteurs :

Un acteur est représenté par un stick man.Il signale un genre d’utilisateur (Administrateur, Utilisateur, Gérant….).Les acteurs suivants ont été identifiés pour notre application:

L’utilisateur : Après l’authentification, l’utilisateur peut modifier, ajouter ou supprimer un groupe, un bulletin, un contact, importer ou exporter des fichiers contenant des contacts, envoyer des bulletins.

L’administrateur : Après l’authentification, seul l’administrateur a le droit d’ajouter, modifier ou supprimer un utilisateur, comme il peut aussi effectuer le même travail d’un simple utilisateur.

1-2- Identification des messages :

Un messagereprésente la spécification d’une communication unidirectionnelle entre les objets qui transportent de l’information avec l’intention de déclencher une activité chez le récepteur. Les messages ci-dessous ont été identifiés pour notre système.

Le système reçoit les messages suivants :

• La création, modification et suppression des groupes.

• La création, recherche, modification et suppression des bulletins.

• L’envoi des bulletins.

• Import ou export des fichiers.

• La création, recherche, modification et suppression des contacts.

(19)

Le système émet les messages suivants :

• La liste des groupes.

• La liste des contacts.

• La liste des bulletins.

• La liste des sites.

1-3- Modélisation du contexte :

A partir des informations qu’on vient d’obtenir, la modélisation du contexte de l’application peut être effectué. Ceci va permettre dans un premier temps, de définir le rôle de chaque acteur dans le système :

Acteur Action

L’administrateur : L’application permet à l’administrateur de :

• S’authentifier

• Créer/Modifier/rechercher/supprimer un utilisateur.

• Créer/Modifier /supprimer un groupe ou site.

• Créer/Modifier/rechercher/supprimer un bulletin.

• Envoyer un bulletin.

• Importer/exporter des contacts à partir des fichiers CSV ou TXT.

L’utilisateur : L’application permet à l’utilisateur de :

• S’authentifier

• Créer/Modifier/supprimer un groupe ou site.

• Créer/Modifier/rechercher/supprimer un bulletin.

• Envoyer un bulletin.

• Importer/exporter des contacts à partir des fichiers CSV ou TXT.

Pour faciliter la création d’un bulletin, l’utilisateur aura besoin du plugin CK-EDITOR, c’est un éditeur de texte qui transforme le contenu en code HTML.

(20)

DÉPARTEMENT D’INFORMATIQUE

Figure 3 : plugin CK-EDITOR 1-4- Identification des cas d’utilisation :

Les cas d’utilisation ont pour principal objectif la capture des fonctionnalités couvertes par le système.

Pour constituer les cas d’utilisation, il faut considérer l'intention fonctionnelle de l'acteur par rapport au système dans le cadre de l'émission ou de la réception de chaque message, en regroupant les intentions fonctionnelles en unités cohérentes.

Le diagramme des cas d’utilisation peut se présenter comme suit :

(21)

uc Use Case Model

User

Authentification Gérer un groupe

Gérer un site Gérer un bulletin

Env oyer un bulletin

Admin

Gérer un contact Gérer les utilisateurs

Imoprter un fichier Exporter un fichier

«precedes»

«include»

«precedes»

«include»

Figure 4 : Diagramme des cas d’utilisations

La figure montre que l’administrateur a un privilège supplémentaire, c’est la gestion des utilisateurs, ce que n’est pas accessible pour un simple utilisateur.

(22)

DÉPARTEMENT D’INFORMATIQUE

La figure suivante montre le diagramme de cas d’utilisation associé à la gestion des groupes :

uc Use Case Model

User

Ajoute un groupe

Modifier un groupe

Authentification Supprimer un groupe

Importer un fichier Exporter fichier

«precedes»

Figure 5 : diagramme de cas d’utilisation « Gérer groupe » 1-5- Description détaillée des cas d’utilisation :

Pour chaque d’utilisation nous avons développé une description détaillée contenant : l’acteur concerné par le cas d’utilisation, l’intention et les scénarios possibles. Dans la suite nous allons présenter la description détaillée de quelques cas d’utilisation.

(23)

Ajouter un groupe : Intention : Gérer un groupe.

Actions : Créer un nouveau groupe.

Scénario :

Scénario nominal :

• L’utilisateur remplit les champs du formulaire ″ajouter un groupe″.

• Le système vérifie si les champs ont été remplis correctement, si oui un message s’affiche pour dire que le groupe a été ajouté correctement

• Donner la main à l’utilisateur.

Scénario alternatif :

• L’utilisateur saisit les informations sur le groupe et valide.

• Le système trouve que certains champs ne sont pas remplis correctement et demande de reprendre la saisit.

Modifier un groupe : Intention : Modifier un groupe.

Actions : Editer un groupe déjà existant.

Scénario :

Scénario nominal :

• L’utilisateur choisit le groupe à modifier.

• Il modifie les champs du groupe.

• Le système vérifie si les champs ont été modifiés correctement, si oui le groupe sera modifié.

• L’utilisateur saisit les informations à modifier sur le groupe et valide.

Importer un fichier:

Intention : Importer un fichier CSV/TXT.

Actions : Importation des contacts à partir des fichiers.

Scénario :

Scénario nominal :

• L’utilisateur sélectionne le groupe dont les contacts seront importés.

• Le système redirige l’utilisateur vers la page d’importation.

• Il sélectionne le type de fichier à importer.

(24)

DÉPARTEMENT D’INFORMATIQUE

• Le système enregistre les informations et donne la main à l’utilisateur.

• L’utilisateur ressaisit le fichier à importer et valide.

Envoyer un bulletin : Intention : Envoi d’un bulletin.

Actions : Envoi d’un bulletin vers un groupe de contacts.

Scénario :

Scénario nominal :

• L’utilisateurchoisit le bulletin à envoyer.

• Après avoir choisi le groupe,l’utilisateur sélectionne les contacts auxquels le bulletin sera envoyé.

• Le système vérifie si les champs ont été remplis correctement, si oui le système effectue le traitement d’envoi.

• Donner la main à l’utilisateur.

• Le système trouve qu’un des champs n’est pas sélectionné.

• L’utilisateur ressaisit les informations sur le groupe et le bulletin et valide.

• Le système vérifie si les champs ont été remplis correctement.

• Le système effectue le traitement avec succès.

(25)

Pour chaque cas d’utilisation, nous avons réalisé un diagramme de séquence système. La figure ci-dessous montre le diagramme de séquence « Gérer les groupes» :

Figure 6 : diagramme de séquence « Gérer groupe »

Le dialogue entre l’utilisateur et le système peut se présenter comme suit :

L’utilisateur choisit la rubrique « Gérer groupe ».

Le système affiche la liste de tous les groupes.

Si l’utilisateur choisit d’ajouter un nouveau groupe, un formulaire s’affiche comportant les informations à remplir.

Le système vérifie les données.

Si L’utilisateur sélectionne un groupe, il peut le modifier ou bien le supprimer, comme il peut aussi importer ou exporter des contacts à ce groupe.

2- Analyse

(26)

DÉPARTEMENT D’INFORMATIQUE 2-1- Diagramme de classe :

Un diagramme de classe permet de capturer la partie statique du système, la figure ci- dessous montre le diagramme de classe de notre application

Dans cette section nous donnerons le diagramme de classe de chaque partie de la solution que nous proposons avec l’explication détaillée des classes utilisées.

class Class Model

User - ID_USER: int - LOGIN: varchar - PASSWORD: varchar - ROLE: varchar

Groupe - ID_GROUPE: int - ID_USER: int - NOM_GROUPE: varchar

Bulletin - CONT ENU: varchar - DATE_CREAT ION: date - EMAIL_CONCERNE: varchar - ID_MSG: int - ID_SITE: int - T ITRE: varchar

contact - DATE_CREATION: date - Email_CNT : int - ID_CNT: int - Nom: varchar

Site - ID_SITE: int - NOM_SITE: string

1

0..*

0..* 1..*

1 1..*

0..*

Envoyer

recevoir

Concerner

Figure 7: Diagramme de classe

(27)

2-2- Modèle dynamique :

Après l’étude des besoins nous avons détaillée les scénarios de chaque cas d’utilisation, pour chaque cas d’utilisation, nous avons:

o Un acteur

o Une fenêtre d’interface

o Un contrôleur: c’est un script qui réalise le traitement des cas d’utilisation.

o La base de données.

Pour chaque scénario nous avons réalisé un diagramme de séquence.

La figure suivante montre le diagramme de séquence détaillé du cas d’utilisation « Ajouter Groupe »

Scénario de ‘Ajouter Groupe’ :

-

Scénario nominal

: ce scénario commence lorsque l’utilisateur demande au système de créer un nouveau groupe.

a- L’utilisateur demande la création d’un groupe.

b- Une interface contenant le formulaire d’ajout s’affiche.

c- L’utilisateur remplit les champs du formulaire à travers la fenêtre d’ajouter groupe.

d- L’interface vérifie si les champs sont été bien remplis.

e- Le contrôleur capture les informations et les transmettent à la base de données.

f- La base de données enregistre les informations, et renvoie le résultat.

g- Un message box affiche le résultat par la suite.

Pour illustrer ce scénario, nous allons faire intervenir les instances suivantes : – Un acteur

utilisateur

.

– Un objet

Fenêtre d’ajouter groupe

. – Un objet

Contrôleur.

– Un objet

Base de donné

.

(28)

DÉPARTEMENT D’INFORMATIQUE

sd Class Model

User

MessagBox

Fenetre d'ajouter groupe

Control eur Base de donnée

rempli r les champs()

Verifi er les champs() Enregistrer les information du groupe()

Demande d'enregistrement() [Champ saisit correctement]:

groupe ajouter avec succès()

resultat()

[else]:erreur lors de l'ajout()

Donner la main()

Figure 8 : Diagramme de séquence ‘Ajouter Groupe’

La figure suivante montre le diagramme de séquence détaillé du cas d’utilisation « Modifier groupe »

-

Scénario nominal

: ce scénario commence lorsque l’utilisateur demande au système de modifier un groupe

Scénario de ‘MODIFIER GROUPE’ :

a- L’utilisateur demande la modification d’un groupe.

b- Le contrôleur retourne la page de modification.

c- L’utilisateur remplit les champs de la modification à travers la fenêtre de

« modifier groupe »

d- L’interface vérifie si les champs ont été bien remplis.

e- Le contrôleur capture les informations et les transmettent à la base de données.

f- La base de données modifie les informations, et renvoie le résultat.

g- Un message s’affiche indiquant le résultat.

Pour décrire ce scénario, nous allons faire intervenir les instances suivantes :

(29)

– Un acteur

Auteur

. – Un objet

Fenêtre

– Un objet

Base de donné

. – Un objet

Contrôleur

.

sd Class Model

User fenetre modifier

groupe

Controleur Base de donnée

MessageBox

alt tant que les champs n'ont pas modifier correctement alt traitement==true

Choisir modifier un groupe()

demande de modifier un groupe()

retourne la page de modification()

Modifier les champs()

Verifier les champs()

Mettre à jour le groupe ()

demande d'enregistrment du groupe()

resultat()

[Champ modifié correctement]:

Groupe modifier avec succès()

[else]:erreur() Donner la main à l'utilisateur()

Figure 9 : Diagramme de séquence « Modifier Groupe »

(30)

DÉPARTEMENT D’INFORMATIQUE

La figure suivante montre le diagramme de séquence détaillé du cas d’utilisation « Envoyer bulletin ».

Scénario de ‘Envoyer bulletin :

-

Scénario nominal

: ce scénario commence lorsque l’utilisateur demande au système d’envoyer un bulletin.

a- L’utilisateur demande l’envoi d’un bulletin.

b- L’interface d’envoie s’affiche.

c- Après avoir choisi le groupe, l’utilisateur sélectionne les contacts auxquels le bulletin sera envoyé.

d- L’utilisateur choisit le bulletin à envoyer.

e- Lafenêtre vérifie les champs sélectionnés.

f- Le contrôleur capture le groupe et le bulletin, ensuite il effectue l’envoie.

g- La base de données enregistre les informations.

sd Class Model

Utilisateur Fenetre envoyer

bulletin

Controleur Base de donnée

Messag box selectionner les informations()

Verification() [champs séléctionnés correctement]:

bulletin envoyé avec succès()

capture des infortmations()

demande d'enregistrement()

resultat()

[else]:message d'erreur()

Donner la main à l'utilisateur()

Figure 10 : Diagramme de séquence « Envoyer bulletin »

(31)

3- Conception ^:

3-1- Architecture adoptée :

L’architecture adoptée pour notre application est celle la plus utilisée dans le développement des grandes applications, c’est l’architecture 3-tière. Elle permet de rendre les trois couches (présentation, métier et base de données) indépendantes les unes des autres grâce aux interfaces.

Dans cette approche, les couches communiquent entre elles à travers un « modèle d'échange », et chacune d'entre elles propose un ensemble de services rendus. Les services d'une couche sont mis à disposition de la couche supérieure. On s'interdit par conséquent qu'une couche invoque les services d'une couche plus basse que la couche immédiatement inférieure ou plus haute que la couche immédiatement supérieure (chaque niveau ne communique qu'avec ses voisins immédiats).

Figure 11 : Architecture 3-tière

– la présentation des données : correspondant à l'affichage, la restitution sur le poste de travail, le dialogue avec l'utilisateur.Dans cette couche, le navigateur web est le seul composant nécessaire.

– le traitement métier des données : correspondant à la mise en œuvre de l'ensemble des règles de gestion et de la logique applicative. Plusieurs composants sont employés par exemple : Le serveur Apache et PHPMyAdmin pour gérer facilement la base de données. Les scripts que nous avons développés seront aussi dans cette couche.

APACHE est le serveur le plus répandu sur Internet. Il s'agit d'une application fonctionnant à la base sur les systèmes d'exploitation de type Unix, mais il a désormais été porté sur de nombreux systèmes, dont Microsoft

Windows. Le pack PHPdev (désormais EasyPHP) est ainsi téléchargeable, il regroupe les applications suivantes :

(32)

DÉPARTEMENT D’INFORMATIQUE

* Le serveur web Apache.

* Le serveur de bases de données MySQL.

* Le serveur d'application PHP.

* L'outil phpMyAdmin permettant de gérer des bases MySQL.

– L'accès aux données : correspondant aux données qui sont destinées à être conservées sur la durée, voire de manière définitive. Pour notre application nous avons choisi comme système de gestion de base de données : MySQL.

MYSQL est un système de gestion de base de données (SGBD). Selon le type d'application, sa licence est libre ou propriétaire. Il fait partie des logiciels de gestion de base de données les plus utilisés au monde, autant

par le grand public (applications web principalement) que par des professionnels, le couple PHP/MySQL est très utilisé

par les sites web et proposé par la majorité des hébergeurs Web. Plus de la moitié des sites Web fonctionnent sous Apache, qui est le plus souvent utilisé conjointement avec PHP et MySQL.

3-2- Développement de l’application :

Les traitements modélisés dans les cas d’utilisation seront implémentés sous forme de scripts dynamiques. Un script permet de réaliser les taches suivantes :

• utilisation des formulaires HTML

• l’écriture et l’appel de fonctions partagées

• L’exécution des traitements des cas d’utilisations

• la connexion à une base MySQL

• l’exécution de requêtes SQL de sélection, d’insertion, de suppression et de mise à jour.

• l’affichage des résultats par tranche

• les redirections HTTP

3-3- Modèle Logique de Données :

A partir du diagramme de classe nous avons pu construire la base de données selon les règles du passage :

(33)

class Class Model

User + ID_USER: int - LOGIN: varchar - PASSWORD: varchar - ROLE: varchar

Groupe - ID_GROUPE: int - ID_USER: int - NOM_GROUPE: varchar

Bulletin - CONTENU: varchar - DATE_CREATION: date - EMAIL_CONCERNE: varchar - ID_MSG: int

- ID_SITE: int - TITRE: varchar

contact - DATE_CREATION: date - Email_CNT: int - ID_CNT: int - Nom: varchar

Site - Id_site: int - nom_site: string

Env oyer - ID_GROUPE: int

- ID_MSG: int Recev oir

- DATE_ENVOI: date - ID_CNT: int - ID_MSG: int

Appartenir - ID_CNT: int - ID_GRP: int

Figure 12 : Modèle logique de données

Chapitre 3 : Réalisation

(34)

DÉPARTEMENT D’INFORMATIQUE

1- Outils de développement :

La réalisation de notre application a nécessité de définir clairement les langages utilisés dans le codage. Nous aurons donc des pages HTML et CSS générées par des scripts PHP, JavaScript, Ajax et JQuery.

HTML 5 :

Utilisé pour définir le format de donnée conçu pour représenter les pages web,mais il reste mal utilisé tous seul sans le CSS.

CSS 3 :

CSS est un langage de style qui définit la présentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images d'arrière-plan, les positionnements évolués et bien d'autres choses.

PHP :

(35)

PHP: HyperText Préprocesseur

, plus connu sous son sigle

PHP

, est un langage de scripts libre principalement utilisé pour produire des pages Web dynamiques via un serveur http , mais pouvant également fonctionner comme n'importe quel langage interprété de façon locale, en exécutant les programmes en ligne de commande. PHP est un langage impératif disposant depuis la version 5 de fonctionnalités de modèle objet complètes. En raison de la richesse de sa bibliothèque, on désigne parfois PHP comme une plate-forme plus qu'un simple langage.

JQuery :

JQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant Ajax) et HTML, et a pour but de simplifier des commandes communes de JavaScript. La première version date de janvier 2006.

Ajax :

Ajax (acronyme d'Asynchronous JavaScript and XML) est une manière de construire des applications Web et des sites web dynamiques basés sur diverses technologies Web ajoutées aux navigateurs dès 1995. Ajax n’est pas un véritable langage, mais un savant mélange de langage utilisés sur Internet. Le but est d’échanger intelligemment des informations entre le navigateur et le serveur web sans recharger entièrement la page. Cela permet une plus grande fluidité, une économie de ressources et permet de créer de véritables applications en ligne.

Ajax permet ainsi d'effectuer des traitements sur le poste client (avec JavaScript) à partir d'informations prises sur le serveur. Cela répartit la charge de traitement.

(36)

DÉPARTEMENT D’INFORMATIQUE

2- Capture d’écran ^:

Index :

Pour pouvoir accéder à l’application, il est obligatoire de s’authentifier :

Figure 13 : Fenêtre d’authentification

Si l’identifiant ou le mot de passe est incorrecte, une fenêtre d’erreur s’affiche :

Fi gure 14 : Message d’Erreur

Page d’accueil :

Si l’utilisateur s’authentifie, il peut accéder à la page d’accueil :

(37)

Figure 15 : Page d’accueil Menu :

Le menu de l’application contient les rubriques de la gestion des bulletins, la gestion des destinataires, la gestion des sites, la gestion des groupes, et une rubrique accessible pour l’administrateur qui comporte la gestion des utilisateurs.

Figure 16 : Menu

(38)

DÉPARTEMENT D’INFORMATIQUE

Création des bulletins :

L’utilisateur peut créer un nouveau bulletin à l’aide du plugin CK-EDITOR comme suit :

Figure 17 : Fenêtre « Création de bulletin »

Importer/exporter un fichier :

L’utilisateur peut importer ou exporter un groupe de contact dans un fichier dans la fenêtre suivante :

Figure 18 : Fenêtre « Import / Export » Ajouter un nouvel utilisateur :

L’administrateur peut créer un nouvel utilisateur à l’aide du formulaire suivant :

(39)

Figure 19 : Fenêtre « Ajouter utilisateur » Gestions des destinataires :

Dans la gestion des destinataires on peut ajouter, éditer, supprimer, activer ou désactiver un destinataire.

L’outil

Filtre

permet à l’utilisateur d’afficher les contacts selon le groupe ou selon leur état (activé/désactivé).

Figure 20 : fenêtre « gestion des destinataires L’envoi d’un bulletin :

Après avoir sélectionné un groupe, un tableau s’affiche contenant la liste des contacts qui reçoivent le bulletin, L’utilisateur peut ainsi modifier l’état d’un contact.

Ensuite, on choisit le bulletin à envoyer.

(40)

DÉPARTEMENT D’INFORMATIQUE

Figure 21 : fenêtre « envoyer un bulletin »

Conclusion

Ainsi, nous avons effectué notre stage de fin d’étude de la

Licence Professionnelle en Informatique au sein de l’entreprise

Webconsulting . Lors de ce stage de 2 mois, nous avons pu mettre

en pratique nos connaissances théoriques acquises durant notre

(41)

formation, de plus, nous nous somme confronté aux difficultés réelles du monde du travail.

Nous avons aussi appris qu’il faut faire preuve de dynamisme et de flexibilité afin de s’adapter à toutes les situations pour satisfaire les exigences du responsable.

De même, nous avons pu nous rendre compte que le contact ainsi que des relations humaines cordiales et respectueuses tiennent une place majeure dans le monde du travail et que ceux-ci favorisaient l’intégration et le bien-être au sein de l’entreprise.

Ce stage est donc déjà une expérience significative dans notre parcours professionnel, enfin, on tient à exprimer notre satisfaction d’avoir pu travailler dans de bonnes conditions matérielles et un environnement agréable.

Bibliographie

Ouvrage :

[1]UML 2 PRATIQUE DE LA MODEDILSATION par Benoît CHARROUX,Aomar OSMANI et Yann THIERRY-MIEG, SYNTEX.

[2] UML 2 MODELISER UNE APPLICATION WEB par Pascal Roques, EYROLLES.

[3] Concevez votre site web avec PHP et MySQL par Mathieu Nebra, SITE DU ZERO.

[4] Support de cours du génie logiciel du professeur Azzedine ZAHI.

Adresse internet :

[1] http://www.wikipedia.fr [2] http://www.php.net/manual/fr [3] http://www.siteduzero.com/

[4] http://www.toutjavascript.com [5] http://www.w3schools.com/