Université de Sfax ***

Institut supérieur d’informatique et de multimédia de Sfax

Rapport du Stage d’Eté

Présenté à

L’Institut supérieur D’informatique et de Multimédia de Sfax

Effectué à

High Tech Management Systems (HMS)

Elaboré par

Abir Hadj Kacem

Licence Fondamentale

Parcours : Deuxième

Spécialité : Informatique et MultiMedia

AU : 2014/2015

Remerciements

Au terme de ce stage, il est de mon devoir de présenter

mes profondes gratitudes à tous ceux qui m’ont aidée,

encouragée et dirigée pour l'élaboration de ce travail.

Je veux aussi exprimer mes profondes gratitudes à Monsieur Krid

Mohamed, directeur High Tech Management Systems (HMS)

qui m’a acceptée et qui m’a aidée avec

ses conseils précieux et son suivi rigoureux.

Un grand Merci à l’Institut Supérieur

d’Informatique et Multimédia de Sfax.

Table des matières I. Introduction Générale ............................................................................................................... 1

II. Présentation de la société .......................................................................................................... 1

III. Chapitre 1 : Etude préalable .................................................................................................... 2

1. Introduction : ............................................................................................................................. 2

2. Analyse des besoins : ................................................................................................................. 2

3. Fonctionnement du site : ........................................................................................................... 3

4. Objectifs de notre application : ................................................................................................ 3

5. Conclusion :................................................................................................................................ 3

IV. Chapitre 2 : Modélisation Conceptuelle .................................................................................. 4

1. Introduction : ..................................................................................................................................... 4

1.1 Choix de la méthodologie de conception et justification : .............................................. 4

2. Diagramme de cas d’utilisation :..................................................................................................... 5

2.1. Schéma : ............................................................................................................................. 5

2.2. Description textuelle des cas d’utilisation : ..................................................................... 6

3. Diagramme de classes : ............................................................................................................. 6

4. Conclusion :........................................................................................................................................ 8

V. Chapitre 3 : La réalisation ........................................................................................................ 8

1. Environnement de travail : ....................................................................................................... 8

2. Choix des langages de développement : ............................................................................... 8

2.1. Langages de développement : ........................................................................................... 8

2.2. Le Serveur : ........................................................................................................................ 9

2.3. Logiciel de Base de données : ................................................................................................. 10

2.4. Les Logiciels de conception : .................................................................................................. 10

2.5. Les Logiciels de développement : ........................................................................................... 10

3. Description des interfaces de l’application : ................................................................................. 11

3.1. Interface Authentification : ................................................................................................. 11

3.2. Interface Inscription : ..................................................................................................... 11

3.3. Compte étudiant : ............................................................................................................ 12

3.4. Compte administrateur : ................................................................................................ 15

1

I. Introduction Générale

La croissance constante de développement informatique permet d’optimiser l’utilisation

des infrastructures existantes et d’assurer aux usagers une information efficace et fiable.

Dans ce cadre, s'inscrit notre projet de stage d'été, intitulé « annuaire PFE », dont

l'objectif est de concevoir une interface web permettant d’organiser et de structurer tous les

sujets de stage et de fin d’étude dans un seul emplacement, ce qui facilite l’opération de

recherche et assure le bon choix des futurs sujets.

Ce rapport est organisé en cinq chapitres :

Le premier chapitre est consacré à la mise en relief du cadre de développement de

notre site.

Le second chapitre se focalise sur la base théorique et les technologies utilisées pour

réaliser le travail requis.

Dans le troisième chapitre, baptisé « Analyse et spécification des besoins », nous

identifions les besoins fonctionnels et non fonctionnels qui permettent de rependre ou objectifs

de notre site, en les modélisant à travers le diagramme des cas d'utilisation.

Quant au cinquième chapitre, il porte une démonstration de la conception adoptée pour

répondre aux besoins précédemment cités.

Enfin, nous finissons par faire une illustration des détails de la réalisation de notre

travail.

II. Présentation de la société

HMS est un fournisseur de solutions logicielles et de services informatiques qui accompagne

ses clients tout au long du cycle de vie d’un projet d’automatisation dans de nombreux secteurs.

HMS propose des solutions standards, des solutions sur mesure et des services de conseil à

forte valeur ajoutée pour aider les organisations à développer leurs stratégies e-business et à

capitaliser au maximum des outils technologiques.

Consciente que la spécialisation mène obligatoirement à l’excellence, HMS a opté pour une

organisation en pôle d’activité :

Pôle de conseil en organisation et informatique de gestion, HMS Business Solutions

Pôle pour le métier de formation on nouvelles technologies, HMS Academy.

Pôle pour les solutions web et produits de mobilité, HMS Mobility.

2

III. Chapitre 1 : Etude préalable

1. Introduction :

Dans ce chapitre, nous présentons l'étude préalable qui a précédé la mise en place de

notre site web. Cette partie consiste à dégager les fonctions que le site devrait fournir et ce

en mettant en évidence les besoins à l'origine de son développement.

2. Analyse des besoins :

Notre projet de stage a été réalisé entièrement au sein de l’entreprise HMS, qui a

décidé de nous engager afin de développer un nouveau système de gestion des sujets de PFE

qui n’existe pas dans le marché tunisien.

Afin d'approfondir notre compréhension du sujet et avoir une idée plus claire sur notre

projet et ses fonctions attendues, nous avons mené une étude pour dégager les objectifs à

atteindre.

Nous avons principalement quatre acteurs : admin université, admin du rectorat, étudiant

et entreprise.

L’admin de l’université :

Vérifier les informations des sujets déposés (titre, thème, résumé, nom

enseignant …).

Décider de refuser ou accepter le sujet déposé.

L’admin du rectorat :

Consulter le sujet validé par L’admin de l’université pour faire une

deuxième vérification pour déterminer l’état du sujet.

Décision finale à propos du sujet déposé (le refuser ou l’accepter).

L’étudiant :

Consulter la liste des sujets proposés par les enseignants et les entreprises

pour déterminer son choix final.

L’entreprise :

Proposer des offres de stages et de PFE.

3

3. Fonctionnement du site :

D’abord, l’étudiant consulte les listes des sujets proposés par des enseignants et des

entreprises pour valider son choix (exemple : consulter liste de sujet, choisir un sujet, déposer

son sujet, consulter l’état de son sujet (validé ou refusé)).

Ces informations sont ensuite traitées et analysées pour les valider par le responsable

d’établissement qui a son tour, les envoie au responsable de rectorat pour les vérifier.

(Exemple : traitement et vérification de l’existence du sujet dans la base de données,

acceptation et refus du sujet, etc..).

4. Objectifs de notre application :

Améliorer la gestion du site universitaire.

Faciliter la communication entre l’utilisateur et le site

La recherche de nouveaux sujets

La recherche d’une société

Mise à jour en temps réel des informations

5. Conclusion :

Dans ce chapitre, nous avons défini le champ d’étude de notre étude et la présentation

de projet. Nous avons aussi spécifié nos objectifs à atteindre suivis d’une étude de l’existant et

enfin nous avons identifié les solutions envisageables.

Avant de commencer la réalisation, nous présentons dans le deuxième chapitre la démarche de

développements et de conception de notre application.

4

IV. Chapitre 2 : Modélisation Conceptuelle

1. Introduction :

Cette section, sera présentée comme suit : nous commençons par le choix de la

méthodologie de conception et justification. Ensuite nous identifions les acteurs et les

diagrammes des cas d’utilisation, puis nous présentons le diagramme de classe.

1.1 Choix de la méthodologie de conception et justification :

Dans notre projet, nous avons utilisé le langage UML. Ci-dessous, nous présentons ce

langage puis nous justifions notre choix.

Le langage de modélisation unifié, de l’anglais Unified Modeling Language (UML), est un

langage de modélisation graphique à base de diagrammes conçu pour fournir une méthode

normalisée pour visualiser la conception d'un système. Il est couramment utilisé en

développement logiciel et en conception orienté objet.

En plus UML est essentiellement un support de communication, qui facilite la représentation et

la compréhension du sujet.

UML fournit un moyen astucieux permettant de représenter diverses projections d'une même

représentation grâce aux vues.

Une vue est constituée d'un ou plusieurs diagrammes. On a ici la vue :

La vue statique, permettant de représenter le système physiquement :

Diagrammes de cas d’utilisation : identifient les utilisateurs du système (acteurs)

et leurs interactions avec le système.

Diagrammes de classes : représentent des collections d'éléments de modélisation

statiques (classes, paquetages...), qui montrent la structure d'un modèle.

5

2. Diagramme de cas d’utilisation :

Un cas d’utilisation est une manière spécifique d’utiliser un système. C’est l’image

d’une fonctionnalité du système, déclenchée en réponse à la stimulation d’un acteur externe.

Les cas d’utilisation permettent de :

Décrire le comportement du système sous forme d’action et de rédaction

du point de vue d’un utilisateur.

Identifier les acteurs du système

Définir les limites du système, les relations entre le système et

l’environnement.

2.1. Schéma :

Figure 1 : Diagramme de cas d’utilisation

6

2.2. Description textuelle des cas d’utilisation :

Titre : proposer un sujet

But : connaitre si un sujet est disponible

Résumé : Après avoir choisi son sujet, l’étudiant peut consulter une liste des sujets proposés

par des entreprises et des enseignants et valider son choix. Dès qu’il le confirme et l’envoie, il

attend la rèpense des administrateurs qui vont gérer et vérifier l’existence du sujet dans la base

de données. La repense peut être acceptée si le sujet est libre, et refusée s’il a déjà été réservé.

Acteurs : Etudiant

Pré Condition : aucune

Enchaînement :

-l’étudiant s’identifie.

- consulter liste des sujets proposés par les entreprises / les enseignants.

- choisir un sujet et le déposer.

- consulter l’état de son sujet.

Exceptions : aucune

3. Diagramme de classes :

Le diagramme de classes est la représentation de la structure statique en termes de

classes et de relations. Ils représentent les classes constituant le système et les associations

entre elles. C’est le diagramme le plus important de la modélisation orientée objet.

Ce diagramme regroupe les classes du monde réel et les classes nécessaires à

l’implémentation du système et permet de générer la base de données et les classes utilisées

dans la programmation des applications.

7

Figure 2 : Diagramme de classe

8

4. Conclusion :

L’étape de conception est la phase la plus importante dans la résolution d’un problème

donnée. La réalisation de cette phase nous a permis de commencer l’implémentation sur la

base d’une architecture stable et delà passer à la phase de construction.

Durant le chapitre suivant, nous allons décrire l’implémentation de notre application et

nous allons décrire l’environnement logiciel et matériel du travail.

V. Chapitre 3 : La réalisation

1. Environnement de travail : Matériels

L’équipement utilisé pour ce projet est un ordinateur de développement ayant

les caractéristiques suivantes :

Processeur Intel Inside CoreTM i5

Mémoire vive 6 Go

Disque dur 500 Go

Système exploitation Windows 10

2. Choix des langages de développement :

2.1. Langages de développement :

Les principaux outils qui ont contribué à la qualité du développement du site sont :

JavaScript :

JavaScript est un langage de programmation de scripts principalement

employé dans les pages web interactives mais aussi pour les serveurs.

C’est un langage orienté objet à prototype.

PHP5 :

PHP, plus connu sous son sigle PHP, est un via un serveur HTTP,

mais pouvant également fonctionner comme n'importe quel langage

interprété de façon locale. PHP est un langage orienté objet.

9

HTML 5 :

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 permettant d’écrire de l’hypertexte, d’où son nom. HTML permet

également de structurer sémantiquement et de mettre en forme le contenu

des pages, d’inclure des ressources multimédias dont des images, des

formulaires de saisie, et des programmes informatiques. Il permet de créer

des documents interopérables avec des équipements très variés de manière conforme aux

exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec des langages de

programmation (JavaScript) et des formats de présentation (feuilles de style en cascade).

HTML est initialement dérivé du Standard Generalized Markup Language (SGML).

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 2000

2.2. Le Serveur :

MySQL :

mysql (My Structured Query Langage-Langage de requêtes structurées)

est un système de gestion de bases de données relationnelles dédiées Open

source. Il est très rapide, fiable et facile à utiliser et gratuit.il a été développé à

l’origine pour gérer des très grandes bases de données beaucoup plus rapidement

que des solutions déjà établies. Il offre un ensemble de fonctionnalités large et

riche. Sa rapidité et sa sécurisation en font un outil idéal pour les applications

internet.

10

2.3. Logiciel de Base de données :

Easyphp :

Il s'agit d'une plateforme de développement Web, permettant de faire

fonctionner localement (sans se connecter à un serveur externe) des

scripts PHP. EasyPHP n'est pas en soi un logiciel, mais un environnement

comprenant deux serveurs (un serveur web Apache et un serveur de bases de

données MySQL), un interpréteur de script (PHP), ainsi qu'une administration

SQL phpMyAdmin. Il dispose d'une interface d'administration permettant de gérer les alias

(dossiers virtuels disponibles sous Apache), et le démarrage/arrêt des serveurs.

2.4. Les Logiciels de conception :

StarUML :

StarUML est un logiciel de modélisation UML, cédé comme open source par

son éditeur, à la fin de son exploitation commerciale, sous une licence modifiée

de GNU GPL. Puisqu’il ne requiert pas de connaissances particulières et fonctionne, de plus,

sur les systèmes d'exploitation les plus répandus.

2.5. Les Logiciels de développement :

Dreamweaver :

Logiciel créé par Macromedia (et géré maintenant par Adobe)

permettant la conception de sites web. Dreamweaver fonctionne en

mode WYSIWYG ou en mode code et dispose d'un client FTP

permettant le transfert des pages créées sur le serveur hébergeant le

site web.

Le logiciel code les pages au format HTML (format constitué de balises qui s'insèrent dans le

texte des pages) en respectant les recommandations de l'organisme W3C qui gère les normes

de conception des sites web. Ce logiciel est très puissant d'utilisation et nécessite une bonne

formation pour pouvoir le maîtriser. La partie Editeur de code du logiciel permet la

modification rapide du contenu des pages, de leur mise en forme, de l'insertion d'images, de

liens ou d'autres éléments habillant la page Web. La partie Gestion du site permet d'organiser

tous les fichiers composant le site et de les publier sur le serveur distant pour qu'ils soient

accessibles via Internet.

11

3. Description des interfaces de l’application :

3.1. Interface Authentification :

Description :

L’utilisateur doit entrer son CIN et son mot de passe pour accéder à son compte.

Il peut aussi aller à la page d’inscription s’il n’a pas un compte.

3.2. Interface Inscription :

Description :

Après avoir choisi son compte, l’utilisateur doit remplir ses informations.

12

3.3. Compte étudiant :

a) Page d’accueil :

Description :

Cette page contienne principalement une recherche rapide et aussi une option pour

la recherche avancée

Elle contienne aussi les services que l’étudiant peut les consulter :

Proposer un sujet.

Offres de stages.

Offres de PFE.

Etat des sujets proposés.

Description :

La recherche avancée permet de trouver des résultats plus approfondies.

13

Description :

L’étudiant peut proposer un sujet en indiquant son titre, son thème, l’encadreur, etc…

b) Page de proposition d’un sujet :

c) Page d’offre de stages :

Description :

Cette page contienne la liste des offres de stages proposés par les sociétés avec ses

informations détaillées.

14

d) Page d’offres de PFE :

Description :

Cette page contienne la liste des offres de PFE proposés par les sociétés avec ses

informations détaillées.

15

Description :

L’étudiant peut suivre l’état de son sujet déposé dès que l’administrateur le vérifie.

e) Page d’état des sujets proposés :

3.4. Compte administrateur :

L’administrateur possède presque les mêmes pages.

a) Page de consultation des demandes de dépôt de sujets

Description :

L’administrateur consulte les demandes de dépôt des sujets afin de les vérifier

et décider de les accepter ou de les refuser.

16

Conclusion Générale

« Annuaire PFE » vise à faciliter la tâche de choisir les sujets de PFE et de stage aux

étudiants, et aussi aux administrateurs : Ceci en numérisant les opérations visant à

vérifier aussi bien les sujets que la décision finale Plusieurs pistes d'améliorations peuvent être apportées à ce projet, notamment donner

la possibilité aux enseignants d'encadrer un sujet qui leur intéresse. En plus,

l’administrateur du site pourrait avoir la possibilité d'affecter des encadrants,

rapporteurs ou chefs de jury aux sujets non assignés, et de choisir également la salle et

l'heure de la présentation. En résultat, nous obtiendrons un agenda clair et partagé par

tous les participants (étudiants, administrateurs et enseignants) ce qui facilitera la

gestion et l'organisation des PFE et accompagnera ainsi le cycle de vie des sujets

De plus, ce projet peut être implémenté au futur sous des plateformes mobiles pour

améliorer de plus l’interaction entre les étudiants, les enseignants et les entreprises.