SlideShare una empresa de Scribd logo
1 de 30
Descargar para leer sin conexión
Rapport de stage de fin d’année
Réalisation d’un site intranet
Soutenu par : Sous la direction de :
Hatim AHADRI M. Ismail MECHBAL
Yassine AAZEDINE
Année Universitaire 2014-2015
Ecole Nationale Supérieure d’Informatique
et d’Analyse des Systèmes
Projet de Fin d’Année 2014-2015
2
Remerciements
Nous tenons d’abord à remercier Mr Ismail MECHBAL de nous avoir accueilli
durant ce mois et de nous avoir donné l’opportunité, à travers ce stage, de nous initier au
métier d’ingénieur. Nous sommes très reconnaissant du temps qu’il m'avait consacré mais
aussi de son accueil chaleureux et sa coopération professionnelle tout au long de ce mois.
Nous tenons à remercier également les membres du jury, ainsi que tous ceux qui ont
contribué de près ou de loin à la réalisation de ce projet.
En espérant que ce travail soit à la hauteur de vos attentes.
Cordialement, Yassine et Hatim.
Projet de Fin d’Année 2014-2015
3
Résumé
Dans le cadre du stage de fin de première année à l’ENSIAS, J’ai effectué un stage de
un mois dans la société MyAppConverter à Casablanca, durant lequel j’ai été appelé à
réaliser un site intranet au sein de l’entreprise.
Ce projet consiste à réaliser un site intranet qui permet aux employés de l’entreprise de
mieux collaborer et de profiter de l’outil informatique dans leur travail quotidien. En effets, il
résout en grande partie les problèmes liés à la circulation des documents et la communication
entre les différents agents.
Projet de Fin d’Année 2014-2015
4
Abstract
Within the end of the first year internship ENSIAS, we did a one month internship in
MyAppConverter company in Casablanca, during which we were called to perform an
intranet within the company.
This project is to achieve an intranet site that allows company employees to better collaborate
and take advantage of computers in their daily work. In effect, it largely solves the problems
related to the circulation of documents and communication between the different agents.
Projet de Fin d’Année 2014-2015
5
Liste des abréviations
CMS : Système de gestion de contenue.
CSS : Cascading Style Sheets.
ENSIAS : Ecole National d’Informatique et d’Analyse des Systemes.
HTML: HyperText Markup Language.
PHP: Hypertext Preprocessor.
SQL: Structured Query Language.
Table des matières
Projet de Fin d’Année 2014-2015
6
Table des figures
Figure 1 : Work flowactuel de service MyAppConverter
Figure 2: MyAppConverter Workflow à la fin du projet
Figure 3: Diagramme de cas d’utilisation
Figure 4: La base de données
Figure 5: Page d’authentification
Figure 6: La page d’accueil
Figure 7: La page des « Hobbies »
Figure 8: La page de « Kernel Development »
Figure 9: La page de « Web Development »
Figure 10: Calendrier
Figure 11: Exemple de page de discussion
Figure 12 : Exemple de page de document
Figure 13 : Exemple de page de Fichiers
Figure 14 : Exemple de page des taches
Figure 15 : Galerie
Table des matières
Projet de Fin d’Année 2014-2015
7
Table des matières
Liste des abréviations................................................................................................................. 5
Table des figures ........................................................................................................................ 6
Table des matières...................................................................................................................... 7
Chapitre 1................................................................................................................................... 9
Présentation d’organisme d’accueil......................................................................................... 9
1 Organisme d’accueil :....................................................................................................... 10
1.1 Organisation : ........................................................................................................... 10
1.2 Activité de la société : .............................................................................................. 10
1.2.1 MyAppConverter : ........................................................................................... 10
2 Présentation du projet:...................................................................................................... 12
Chapitre 2 ................................................................................................................................ 15
Analyse et Conception............................................................................................................ 15
3 Analyse et conception : .................................................................................................... 16
4 Modèle conceptuel de la base de données :...................................................................... 17
Chapitre 3 ................................................................................................................................ 18
Réalisation............................................................................................................................... 18
5 Les sites Web: .................................................................................................................. 19
6 Langages de programmation :.......................................................................................... 19
7 Développement du site :................................................................................................... 21
8 Réalisation :...................................................................................................................... 23
Conclusion................................................................................................................................ 29
9 Bibliographie.................................................................................................................... 30
Introduction générale
Projet de Fin d’Année 2014-2015
8
Introduction
L’apport et la valeur ajoutée des technologies de l’information sont désormais de plus
en plus palpables et visibles. En effet, il devient primordial et nécessaire pour tout organisme,
désireux de poursuivre sa marche vers la performance, de se munir d’un système
d’information adapté, surtout s’il s’agit de la gestion d’un nombre important de données Ainsi
le sujet de mon stage est la réalisation d’un site intranet dynamique interactif fondé aussi bien
sur la connaissance et l'intelligence collective, que sur les moyens et les structures, le but de
ce site et de permettre un accès simple et rapide à un bouquet de services créé pour répondre
aux divers préoccupations des opérateurs.
L’intranet n’est pas uniquement une technologie mais aussi une méthode de
circulation des idées et de vitalité de groupes de travail collectifs et autonomes fonctionnant à
la fois en tant que système de diffusion et de partage de l’information ainsi que moyen de
facilitation de la communication, de la coordination et de la coopération entre les différents
acteurs à l’échelle interne. L’intranet est en fait une structure de plate-forme à forte valeur
ajoutée dont la stratégie aurait décliné vers l’optimisation et la facilité des processus de
travail, le partage des connaissances et des compétences, le renforcement de la culture du
groupe et la familiarisation du management à des nouveaux modes de gestion de
l’information.
Le présent rapport a un double objectif. D’une part, la représentation de la démarche
poursuite pour l’implémentation de cette application et d’autre part l’explication détaillée de
son fonctionnement. Ce rapport se décompose en quatre chapitres qui permettent de montrer
progressivement, avec leurs détails, les différentes étapes par lesquels nous avons passé pour
aboutir la réalisation de cette application :
Chapitre 1 : Présentation d’organisme d’accueil ;
Chapitre 2 : Analyse et conception ;
Chapitre 3 : Réalisation ;
Projet de Fin d’Année 2014-2015
9
Chapitre 1
Présentation d’organisme d’accueil
Dans ce premier chapitre, nous essayerons premièrement de présenter l’organisme
d’accueil, et après nous définirons le projet en décrivant le cahier de charge.
Projet de Fin d’Année 2014-2015
10
1 Organisme d’accueil :
1.1 Organisation :
Figure : Diagramme des cofondateurs et les équipes
1.2 Activité de la société :
1.2.1 MyAppConverter :
MyAppConverter est un service basé sur le cloud computing permettant la conversion
instantané d’une application mobile d’un OS ‘A’ vers un OS ‘B’ est ce, sans la nécessite de
télécharger ou de configurer un quelconque outil.
Figure 1 : Work flowactuel de service MyAppConverter
Projet de Fin d’Année 2014-2015
11
Actuellement le service MyAppConverter, permette à un développeur ayant une
application iOS vers Android et Objectiv C vers swift, sans avoir la développer une autre fois.
La convertion passe via le Cloud automatiquement et instantanément.
Figure 2: MyAppConverter Workflow à la fin du projet
Par la suite MyAppConverter se généralisera dans le but de permettre une conversion
d’une application développer sous une plateforme – OS mobiles : iOS, Android, Windows
Phone et BlackBerry – a n’importe qu’elle autre plateforme.
Projet de Fin d’Année 2014-2015
12
2 Présentation du projet:
Afin de simplifier l’exercice de ses missions, le service informatique a adopté le choix d’un
site intranet fondé aussi bien sur la connaissance et l’intelligence collective, que sur les
moyens et les structures. En effet, il a conçu un site à la fois en tant que système de diffusion
et de partage de l’information ainsi que moyen de facilitation de la communication, la
coordination et de la coopération entre les différents acteurs à l’échelle interne.
L’objectif de ce site est de permettre un accès simple et ergonomique a un bouquet de
services crée pour répondre aux diverses préoccupations des opérateurs.
Sachant que l’Intranet n’est pas uniquement une technologie mais aussi une méthode
de circulation des idées et de vitalité de groupes de travail collectifs et autonomes, il offrira
donc à chacun des dispositifs d’incitation à la création de connaissance et d’enrichissement
des savoirs.
Au départ, son rôle était de fournir à ses utilisateurs un outil d’information et de
publication, mais les métiers du groupe étant par nature très diversifies, la seconde génération
de l’Intranet a vite évolue vers une structure de plate-forme à forte valeur ajoutée dont la
stratégie aurait décline vers les quatre axes suivants :
• Optimiser et faciliter les processus de travail.
• Partager connaissances & compétences.
• Renforcer et développer la culture du groupe.
• Familiariser le management a de nouveaux modes de gestion de l’information.
L’Intranet sera en fait un outil de management des connaissances collectives, il
permettra de répondre a des préoccupations pragmatiques et essentielles telles que :
• Perdre moins de temps à chercher l’information pertinente nécessaire a une décision,
une action ou une tache.
• Apprendre à diffuser la bonne information a la bonne personne.
• Créer une culture du partage où chaque utilisateur devient consommateur et
potentiellement producteur d’information
Projet de Fin d’Année 2014-2015
13
Ce site Intranet comprendra, en plus d’une partie classique d’actualités, d’informations
générales et de bases de données, une partie qui constituera un outil de travail pour tous les
agents du service informatique et pourra être constamment adaptée à leurs besoins.
Sachant que la société est composée de deux départements (Kernel Development,
Web Development), nous devons créer deux espaces indépendants pour gérer chaque
département en soi. Et comme l’organisme dispose d’une Xbox, nous avons décidé de créer
un troisième espace « Hobbies » qui gèrera les tournois (l’heure et le jour des matchs, les
résultats et les équipes).
Notre Intranet répondra aux besoins suivants :
 L’administrateur est le seul qui a le droit d’ajouter un nouveau compte.
 La gestion des documents.
 L’administrateur est le seul qui peut publier sur l’espace « Hobbies » et gérer
le contenue.
 La gestion des évènements.
 La gestion de la galerie des photos.
 Créer un espace de communication (une propre boite de messagerie) pour
chaque employé.
 Gestion du forum.
 Gestion des publications des taches.
Et il doit aussi satisfaite d’autres besoins qui permettent d’améliorer la qualité des
Services du site comme :
 La Sécurité : il faut avoir une interface d’authentification qui permet à chaque
utilisateur de se connecter pour consulter son profil.
 La Convivialité : le site doit être facile à utiliser. Il doit présenter un
enchainement logique entre les interfaces et un ensemble de liens suffisants
pour assurer une navigation rapide et un texte compréhensible, visible et
lisible.
 La Disponibilité : lorsque n’importe quel utilisateur désire consulter le site, il
doit être disponible.
Projet de Fin d’Année 2014-2015
14
Dans ce chapitre, nous avions pu insérer notre projet dans son contexte en
présentant la solution adoptée pour résoudre les problèmes et qui répond à nos besoins.
Dans le chapitre suivant, nous allons présenter la conception de notre projet.
Projet de Fin d’Année 2014-2015
15
Chapitre 2
Analyse et Conception
Dans cette partie, nous utilisons la modélisation UML pour représenter les spécifications
des exigences grâce au diagramme de cas d’utilisation, et la modélisation Merise pour
représenter le modèle conceptuel de la base de données.
Chapitre 2 Titre chapitre 2
Projet de Fin d’Année 2014-2015
16
3 Analyse et conception :
Pour ce projet, il y en a deux types d’utilisateurs de ce site : les administrateurs, les
employés (hors les administrateurs).
<extends> <extends>
<extends>
<extends>
<extends>
<extends>
<extends>
<extends>
<include>
<include>
Employe
Administrateur_d'un_espace
Ajouter_Document
Participer_Evenement
Administrer Espace
Gestion_des_taches
Gestion_du_calendrier
Creer_Evenement
Creer_une_tache
Participer_a_une_tache
Ajouter_employe
Supprimer_employe
Supprimer_un_document
Gestion_document
S'authentifier
Participer_au_shoutbox
Figure 3: Diagramme de cas d’utilisation
Comme on le remarque chaque utilisateur doit d’abord s’authentifier pour se
connecter.
Premièrement pour les employés (non administrateurs), ils ont droit de participer au
ShoutBox ou à un évènement, d’ajouter des documents, créer des taches et de participer à
des forums.
Chapitre 2 Titre chapitre 2
Projet de Fin d’Année 2014-2015
17
Alors que pour les administrateurs, c’est eux qui fait la gestion des employés (ajouter
ou supprimer un compte), des documents, des taches, du forum et du calendrier.
4 Modèle conceptuel de la base de données :
1,n
1,n
0,n
1,n
0,n
0,n
0,n
1,1
1,n
1,n1,n
0,n
0,n
0,n
Espace
nom_espace <pi> Caractère long (10) <O>
Identifiant_1 <pi>
Employe
id
nom_employe
prenom_employe
<pi> Entier
Caractère variable (10)
Caractère variable (10)
<O>
Identifiant_1 <pi>
Avoir
ShoutBox
pub_id
publication
<pi> <Indéfini>
Caractère long (20)
<O>
Identifiant_1 <pi>
Document
document_id
titre_document
document
pub_date
<pi> Entier
Caractère variable (15)
Texte (500)
Date
<O>
Identifiant_1 <pi>
Contenir
Publier
Partager
Tache
tache_id
tache
<pi> <Indéfini>
Texte (250)
<O>
Identifiant_1 <pi>
Travailler
Evenement
evnt_id
evenement_Desc
evenement_date
<pi> Entier
Texte (250)
Date
<O>
Identifiant_1 <pi>
Association_6 Participer
Figure 4: La base de données
Comme on le constate dans cette figure, chaque employé peut travailler sur une ou
plusieurs taches, et il peut participer de 0 à plusieurs évènements, et c’est le même cas pour le
ShoutBox et les documents, il peut publier de 0 à plusieurs commentaires ou documents.
Chapitre 3 Titre chapitre 2
Projet de Fin d’Année 2014-2015
18
Chapitre 3
Réalisation
Après avoir effectué l’étude de la conception de notre plate-forme nous passerons à la
phase d’implémentation. Ce chapitre présente le résultat du travail effectue durant notre stage.
Nous allons présenter les outils de développements utilises. Nous clôturons par quelques
captures d’écran démontrant les fonctionnalités de notre plate-forme.
Chapitre 3 Titre chapitre 2
Projet de Fin d’Année 2014-2015
19
5 Les sites Web:
Un site web est composé d'un ensemble de documents structurés, nommés pages
web, stockés (hébergés) sur un ordinateur (serveur) connecté au réseau mondial
(internet).
Une page web contient essentiellement du texte, et est souvent enrichie de de
médias (images, photos, musiques), les contenues ont accessibles par des
adresses(URL).
Il existe deux catégories de sites web :
-Les sites statistiques : dont le contenu est figé, constitué de pages
destinés à ne pas évoluer et sans que l’internaute puisse inter-agir avec
elles.
-Les sites dynamiques: dont le contenue évolue dynamiquement et en
fonction des internautes sans l’intervention du webmaster.
6 Langages de programmation :
HTML :
L’HTML est un langage informatique utilisé sur l’internet. Ce langage
est utilisé pour créer des pages web. L’acronyme signifie HyperText Markup
Language, ce qui signifie en français « langage de balise d’hypertexte ». Cette
signification porte bien son nom puisqu’effectivement ce langage permet de
l’hypertexte à base d’une structure de balisage.
Ce n’est pas à proprement parlé un langage de programmation, mais
plutôt un langage qui permet de mettre en forme du contenu. Les balises
permettent de mettre en forme le texte et de placer des éléments ne sont pas
dans le code source d’une page codé en HTML mais “à coté” et la page en
HTML ne fait que reprendre ces éléments.
Chapitre 3 Titre chapitre 2
Projet de Fin d’Année 2014-2015
20
Pour visualiser une page HTML il est nécessaire d’utiliser un
navigateur web.
CSS :
Le terme CSS est l’acronyme anglais de Cascading Style Sheets qui
peut se traduire par « feuilles de style en cascade ». Le CSS est un langage
informatique utilisé sur l’internet pour mettre en forme les fichiers HTML ou
XML. Ainsi, les feuilles de style, aussi appelé fichiers CSS, comprennent du
code qui permet de gérer le design d’une page en HTML.
Bien que l’HTML puisse etre mis en forme à l’aide de balises prévus à
cet effet, de nos jours il est plus judicieux d’utiliser le CSS et de n’utiliser le
XHTML que pour le contenue.
L’avantage de l’utilisation d’un fichier CSS pour la mise en forme d’un
site réside dans la possibilité de modifier tous les titres du site en une seule fois
en modifiants une seule partie du fichier CSS. Sans ce fichier CSS, il serait
nécessaire de modifier chaque titre de chaque page du site (difficilement
envisageable pour les énormes sites de plusieurs milliers de pages).
D’autres points forts sont perceptibles. Il est par exemple possible de
créer une feuille de style et toutes les parties inutiles lors de l’impression. De
même, une feuille de style peut être utilisée pour les utilisateurs d’un
téléphone portable, ce qui permet de mieux gérer la mise en forme
particulièrement pour les petits écrans de ces appareils.
PHP :
Le PHP est un langage informatique utilisé sur l’internet. Le terme PHP
est un acronyme récursif de « PHP : Hypertext Preprocessor ».
Ce langage est principalement utilisé pour produire un site web
dynamique. Il est courant que ce langage soit associé à une base de données, tel
que MySQL. Exécute du coté serveur (l’endroit où est héberge le site) il n’y a
pas besoin aux visiteurs d’avoir des logiciels ou plugins particulier.
Chapitre 3 Titre chapitre 2
Projet de Fin d’Année 2014-2015
21
Néanmoins, les webmasters qui souhaitent développer un site en PHP doivent
s’assurer que l’hébergeur prend en compte ce langage.
Lorsqu’une page PHP est exécutée par le serveur, alors celui-ci renvois
généralement au client (aux visiteurs du site) une page web qui peut contenir
du HTML, XHTML, CSS…..
MySQL :
MySQL est un serveur de bases de données relationnelles Open Source.
Un serveur de bases de données stocke les données dans des tables
séparées plutôt que de tout rassembler dans une seule table. Cela améliore la
rapidité et la souplesse de l’ensemble. Les tables sont reliées par des relations
définies, qui rendent possible lq combinaison de données entre plusieurs tables
durant une requête. Le SQL dans « MySQL » signifie « Structured Query
Language » : le langage standard pour les traitements de bases de données.
7 Développement du site :
WampServer :
WampServeur est une plate-forme de développement Web sous Windows pour
des applications Web dynamiques à l’aide du serveur Apache2, du langage de scripts
PHP et d’une base de données MySQL. Il possède également PHPMyAdmin pour
gérer plus facilement vos bases de données.
Développement avec Open Atrium :
Open Atrium:
Open Atrium, maintenu par Phase2 Technology, est une distribustion Drupal qui vous
permet d’engager en toute confiance avec vos collègues grâce à la collaboration pratique.
Cette nouvelle architecture pour Drupal 7 qui est construite à l’aide du module
Organic Groups et Panopoly et conçu comme un cadre de collaboration extensible. Ajoute la
Chapitre 3 Titre chapitre 2
Projet de Fin d’Année 2014-2015
22
possibilité d’avoir des « sections » privées dans un espace de collaboration avec le contrôle
d’accès granulaire. Glisser / déposer contrôle de la mise en page avec des dizaines de widgets
qui peuvent être places sur les tableaux de bord et des pages d’atterrissage.
Drupal :
Drupal est un système de gestion de contenu (abrégé CMS en anglais) libre et open
source. Un CMS est un logiciel qui permet de gérer le contenue d’un site Web. Ceci permet
aux utilisateurs de faire évoluer le site sans recourir systématiquement à un programmeur.
Drupal est un outil qui s’adresse à la fois à des débutants ou des programmeurs
experts. Sa flexibilité lui permet de répondre à la très grande majorité des besoins du marché:
sites institutionnels, blog, annuaire, communautaire, marchand ou intranets, tout est possible.
*Ses avantages :
-Rapidité de mise en place :
Drupal permet d’obtenir un site fonctionnel et évoluer en quelques clics
sans écrire une seule ligne de code.
-Modularité :
On peut étendre les possibilités en ajoutant des modules. Ceux-ci sont
très
Nombreux, proposes par la communauté et toujours sous licence libre GPL.
Cette architecture permet aux programmeurs de réaliser des modules
personnalises afin d’étendre les fonctionnalités sans pour autant modifier le
corps de Drupal.
-Robustesse de son API :
La qualité du code et la robustesse de son interface de programmation
modules gravitant autour d’un noyau très léger. Chaque module est en quelque
sorte une bibliothèque de fonctions qui enrichit l’application et augmente ses
possibilités.
Une des forces de Drupal est la possibilité qu’ont les modules
d’interagir entre eux. La contrepartie de cette flexibilité est la complexité, ainsi,
Drupal propose souvent une ou plusieurs solutions pour résoudre le même
Chapitre 3 Titre chapitre 2
Projet de Fin d’Année 2014-2015
23
problème. D’autre part, le plus dur est quelquefois de trouver « le » module qui
répondra le mieux à vos besoins.
Un autre point qui distingue Drupal des autres CMS est que le site et
son interface d’administration sont intimement lies : les administrateurs éditent
leur contenu dans le même contexte graphique ou presque que celui du
visiteur. Cette fonctionnalité peut-être déroutante au premier abord, mais est
par la suite particulièrement productive et intuitive.
Comme tous les CMS. L’architecture d’un site Drupal repose sur un
modèle de contenue spécifique qui permet de structurer l’information. Drupal
utilise un système de nœud couplé à une taxonomie particulièrement flexible.
8 Réalisation :
Figure 5: Page d’authentification
Comme notre site est réservé juste pour les employés de l’entreprise, cette page aidera
les visiteurs de s’identifier pour avoir l’accès à la page principal du site.
Chapitre 3 Titre chapitre 2
Projet de Fin d’Année 2014-2015
24
Figure 6: La page d’accueil
Voilà c’est la page principale du site, elle permet aux utilisateurs d’accéder aux
trois « Spaces » existants (Hobbies, Kernel Development, Web Development). En bas à droite
en remarque la petite barre qui nous informe sur les employeurs connectés sur le site.
Figure 7: La page des « Hobbies »
C’est la page du premier « Space » nomme Hobbies. Le visiteur va vite remarquer que
la page est divise en trois colonnes. Dans la première colonne à gauche, sous le logo du space
existe deux boutons qui aideront l’utilisateur de créer un évènement ou publier le résultat d’un
match. La colonne du milieu est réservée aux résultats des anciens matchs du tournoi. Et la
dernière colonne est réservée premièrement aux évènements (le temps ou de déroulera les
Chapitre 3 Titre chapitre 2
Projet de Fin d’Année 2014-2015
25
matchs..), ainsi elle est réservée aux petit espace de Shat ou les utilisateurs peuvent poster
leurs commentaire ou communiquer entre eux.
Figure 8: La page de « Kernel Development »
Voilà c’est la page du deuxième Space « Kernel Development ». Comme le premier
Space, la page est divise en trois colonnes. La première colonne est réservée au menu, un
bouton qui permet d’accéder à la page de la galerie et au champ des points de publications.
Dans le menu, il y a 5 boutons qui permettent d’accéder un champ précis (calendrier,
discussion, document, fichier, espace des taches).
La deuxième colonne est réservée à différentes publications postées par les
employeurs comme les documents, les fichiers, les discussions et les taches.
La troisième colonne est réservée aux 4 champs sont : Les « Follow », les
évènements, le calendrier et finalement un champ ou on peut créer de nouveaux documents,
fichiers, évènements, taches, team, discussion ou album.
Chapitre 3 Titre chapitre 2
Projet de Fin d’Année 2014-2015
26
Figure 9: La page de « Web Development »
Cette page représente la page du troisième Space « Web Development », elle est aussi
divisée en trois colonnes et contient les mêmes champs que celle du deuxième space « Kernel
Development ».
Figure 10: Calendrier
Cette page permet aux visiteurs d’accéder au calendrier et de s’informer sur les
différentes enlèvements indiques.
Chapitre 3 Titre chapitre 2
Projet de Fin d’Année 2014-2015
27
Figure 11: Exemple de page de discussion
C’est la page des discussions ou les visiteurs peuvent trouver les différentes
discussions publiées en s’informant sur la personne qui l’a publié, la date et l’heure de
publication, ainsi le nombre de commentaires.
Figure 12 : Exemple de page de document
C’est la page des documents publies (chaque space a sa propre page des documents).
Elle nous permet de consulter les différents documents, et qui les a posté et la date de
publication.
Figure 13 : Exemple de page de Fichiers
Chapitre 3 Titre chapitre 2
Projet de Fin d’Année 2014-2015
28
C’est la page des fichiers ou les utilisateurs peuvent trouver les différents fichiers
publiés en s’informant sur la personne qui l’a publié, la date et l’heure de publication.
Figure 14 : Exemple de page des taches
C’est la page des taches ou les utilisateurs peuvent trouver les différentes taches
publiées.
Figure 15 : Galerie
Voilà c’est la page de la galerie ou les photos sont ordonnes par album.
Conclusion
Projet de Fin d’Année 2014-2015
29
Conclusion
A la fin de ce stage nous avons pu créer une plate-forme qui facilite la
communication et l’accès à l’information aux employés de la société MyAppConverter. En les
permettant de consulter toutes les taches pour chaque équipe, participer aux forums, partager
des documents, consulter la gallérie des photos, accéder à la boite de messagerie personnelle
et à l’espace de chat. Enfin, en créant un espace de divertissement où ils trouvent tous les
résultats des matches joues et le programme des prochains matches.
Cependant, le site n’est pas à sa version finale, il peut être améliore d’avantage en
intégrant à chaque fois de nouveaux modules qui automatisent et optimisent le travail au sein
de l’entreprise.
Durant la réalisation de ce projet, nous avons fait beaucoup de recherche pour
atteindre nos objectifs, ce qui nous a permis de développer notre technique de recherche
d’information. Ce projet nous a donné la chance d’enrichir nos connaissances sur la
programmation web en découvrant des outils très intéressante comme Open Atrium.
En fin, même si beaucoup d’efforts et de patience nous a été demandé pour réaliser ce
travail, nous avons été satisfaits du résultat final que nous éperons aussi satisfaire nos
encadrons.
Annexe B Modèle Bibliographie
Projet de Fin d’Année 2014-2015
30
9 Bibliographie
[1] : http://www.aidice-web.com/accueil/definition-site-web.php date de consultation
20/10/2015.
[2] : http://glossaire.infowebmaster.fr/html/ date de consultation 20/10/2015.
[3] : http://glossaire.infowebmaster.fr/css/ date de consultation 20/10/2015.
[4] : http://glossaire.infowebmaster.fr/php/ date de consultation 20/10/2015.
[5] : http://www.futura-sciences.com/magazines/high-tech/infos/dico/d/internet-mysql-
4640/ date de consultation 20/10/2015.
[6] : http://www.wampserver.com/ date de consultation 20/10/2015.
[7] : http://drupalfr.org/documentation/quest-drupal date de consultation 20/10/2015.

Más contenido relacionado

Destacado

Etude achats végétaux fêtes de fin d'année tns nov2015
Etude achats végétaux fêtes de fin d'année tns nov2015Etude achats végétaux fêtes de fin d'année tns nov2015
Etude achats végétaux fêtes de fin d'année tns nov2015Val'hor - En Quête de Vert
 
SGBDR - MySQL
SGBDR - MySQLSGBDR - MySQL
SGBDR - MySQLMusatge
 
Rapport de pfe gestion de parc informatique et Helpdesk
Rapport de pfe gestion de parc informatique et HelpdeskRapport de pfe gestion de parc informatique et Helpdesk
Rapport de pfe gestion de parc informatique et HelpdeskRaef Ghribi
 
Projet de fin d'etude gestion informatique
Projet de fin d'etude gestion informatiqueProjet de fin d'etude gestion informatique
Projet de fin d'etude gestion informatiquejihene Ab
 
Présentation Projet de fin d'année
Présentation Projet de fin d'annéePrésentation Projet de fin d'année
Présentation Projet de fin d'annéeYassine DAHMANE
 
Gateway d’un système de monitoring
Gateway d’un système de monitoringGateway d’un système de monitoring
Gateway d’un système de monitoringGhassen Chaieb
 
Dematerialisation a valeur probante avec EREGEX
Dematerialisation a valeur probante avec EREGEXDematerialisation a valeur probante avec EREGEX
Dematerialisation a valeur probante avec EREGEXEREGEX FR
 
Desk Study 2015 - La créativité des locaux au service du développement et de ...
Desk Study 2015 - La créativité des locaux au service du développement et de ...Desk Study 2015 - La créativité des locaux au service du développement et de ...
Desk Study 2015 - La créativité des locaux au service du développement et de ...Amandine Aubriet
 
Modulo 3 - Tarea Nº3
Modulo 3 - Tarea Nº3 Modulo 3 - Tarea Nº3
Modulo 3 - Tarea Nº3 Marlon Perea
 
Accroitre la confiance dans les personnes et les machines qui se connectent à...
Accroitre la confiance dans les personnes et les machines qui se connectent à...Accroitre la confiance dans les personnes et les machines qui se connectent à...
Accroitre la confiance dans les personnes et les machines qui se connectent à...Alice and Bob
 
Duchess France Women in Tech
Duchess France Women in TechDuchess France Women in Tech
Duchess France Women in TechAlice Barralon
 
Retour d’expérience Big Compute & HPC sur Windows Azure [TechDays 2014]
Retour d’expérience Big Compute & HPC sur Windows Azure [TechDays 2014]Retour d’expérience Big Compute & HPC sur Windows Azure [TechDays 2014]
Retour d’expérience Big Compute & HPC sur Windows Azure [TechDays 2014]Antoine Poliakov
 
Différence innovation expérimentation
Différence innovation expérimentationDifférence innovation expérimentation
Différence innovation expérimentationibertrand
 
Édition de savoir en langue française & bibliothèques universitaires. Enje...
Édition de savoir en langue française & bibliothèques universitaires. Enje...Édition de savoir en langue française & bibliothèques universitaires. Enje...
Édition de savoir en langue française & bibliothèques universitaires. Enje...Cairn.info
 
Floral de pierre auguste renoir - artisoo
Floral de pierre auguste renoir  - artisooFloral de pierre auguste renoir  - artisoo
Floral de pierre auguste renoir - artisooparkupton
 
Etat des lieux et futur(s) du Copyleft
Etat des lieux et futur(s) du CopyleftEtat des lieux et futur(s) du Copyleft
Etat des lieux et futur(s) du CopyleftColas Zibaut
 
Standart & Tendances du E-Fashion dans le monde
Standart & Tendances du E-Fashion dans le mondeStandart & Tendances du E-Fashion dans le monde
Standart & Tendances du E-Fashion dans le mondeDigital Thursday
 

Destacado (20)

Etude achats végétaux fêtes de fin d'année tns nov2015
Etude achats végétaux fêtes de fin d'année tns nov2015Etude achats végétaux fêtes de fin d'année tns nov2015
Etude achats végétaux fêtes de fin d'année tns nov2015
 
SGBDR - MySQL
SGBDR - MySQLSGBDR - MySQL
SGBDR - MySQL
 
Procédure de formation
Procédure de formationProcédure de formation
Procédure de formation
 
Rapport de pfe gestion de parc informatique et Helpdesk
Rapport de pfe gestion de parc informatique et HelpdeskRapport de pfe gestion de parc informatique et Helpdesk
Rapport de pfe gestion de parc informatique et Helpdesk
 
Projet de fin d'etude gestion informatique
Projet de fin d'etude gestion informatiqueProjet de fin d'etude gestion informatique
Projet de fin d'etude gestion informatique
 
Présentation Projet de fin d'année
Présentation Projet de fin d'annéePrésentation Projet de fin d'année
Présentation Projet de fin d'année
 
Gateway d’un système de monitoring
Gateway d’un système de monitoringGateway d’un système de monitoring
Gateway d’un système de monitoring
 
Dematerialisation a valeur probante avec EREGEX
Dematerialisation a valeur probante avec EREGEXDematerialisation a valeur probante avec EREGEX
Dematerialisation a valeur probante avec EREGEX
 
Desk Study 2015 - La créativité des locaux au service du développement et de ...
Desk Study 2015 - La créativité des locaux au service du développement et de ...Desk Study 2015 - La créativité des locaux au service du développement et de ...
Desk Study 2015 - La créativité des locaux au service du développement et de ...
 
Modulo 3 - Tarea Nº3
Modulo 3 - Tarea Nº3 Modulo 3 - Tarea Nº3
Modulo 3 - Tarea Nº3
 
Accroitre la confiance dans les personnes et les machines qui se connectent à...
Accroitre la confiance dans les personnes et les machines qui se connectent à...Accroitre la confiance dans les personnes et les machines qui se connectent à...
Accroitre la confiance dans les personnes et les machines qui se connectent à...
 
Premiers pas - Formation Gmail
Premiers pas - Formation GmailPremiers pas - Formation Gmail
Premiers pas - Formation Gmail
 
Duchess France Women in Tech
Duchess France Women in TechDuchess France Women in Tech
Duchess France Women in Tech
 
Retour d’expérience Big Compute & HPC sur Windows Azure [TechDays 2014]
Retour d’expérience Big Compute & HPC sur Windows Azure [TechDays 2014]Retour d’expérience Big Compute & HPC sur Windows Azure [TechDays 2014]
Retour d’expérience Big Compute & HPC sur Windows Azure [TechDays 2014]
 
Saintines.pdf
Saintines.pdfSaintines.pdf
Saintines.pdf
 
Différence innovation expérimentation
Différence innovation expérimentationDifférence innovation expérimentation
Différence innovation expérimentation
 
Édition de savoir en langue française & bibliothèques universitaires. Enje...
Édition de savoir en langue française & bibliothèques universitaires. Enje...Édition de savoir en langue française & bibliothèques universitaires. Enje...
Édition de savoir en langue française & bibliothèques universitaires. Enje...
 
Floral de pierre auguste renoir - artisoo
Floral de pierre auguste renoir  - artisooFloral de pierre auguste renoir  - artisoo
Floral de pierre auguste renoir - artisoo
 
Etat des lieux et futur(s) du Copyleft
Etat des lieux et futur(s) du CopyleftEtat des lieux et futur(s) du Copyleft
Etat des lieux et futur(s) du Copyleft
 
Standart & Tendances du E-Fashion dans le monde
Standart & Tendances du E-Fashion dans le mondeStandart & Tendances du E-Fashion dans le monde
Standart & Tendances du E-Fashion dans le monde
 

Similar a IntenrnshipMyApp

Gestion programme moussanada avec openerp
Gestion programme moussanada avec openerpGestion programme moussanada avec openerp
Gestion programme moussanada avec openerpHORIYASOFT
 
salwfrarapp137.pdf
salwfrarapp137.pdfsalwfrarapp137.pdf
salwfrarapp137.pdfSASarah3
 
Rapport-PfA-ACHKAOU-SARA.pdf
Rapport-PfA-ACHKAOU-SARA.pdfRapport-PfA-ACHKAOU-SARA.pdf
Rapport-PfA-ACHKAOU-SARA.pdfsaraachkaou
 
Platform freelance ASP .NET / C#
Platform freelance ASP .NET / C# Platform freelance ASP .NET / C#
Platform freelance ASP .NET / C# Saâd Zerhouni
 
Application web de gestion de recrutement- Recruitement managment system
Application web de gestion de recrutement- Recruitement managment systemApplication web de gestion de recrutement- Recruitement managment system
Application web de gestion de recrutement- Recruitement managment systemSarra ERRREGUI
 
Formation: Du prototype au site web responsive
Formation: Du prototype au site web responsiveFormation: Du prototype au site web responsive
Formation: Du prototype au site web responsiveLe Wagon Montréal
 
Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5YounessLaaouane
 
PFE::Conception et développement du Back Office d'une application mobile de g...
PFE::Conception et développement du Back Office d'une application mobile de g...PFE::Conception et développement du Back Office d'une application mobile de g...
PFE::Conception et développement du Back Office d'une application mobile de g...Rami Raddaoui
 
Rapport de stage d'initiation 2015 Mahmoudi Mohamed Amine
Rapport de stage d'initiation 2015 Mahmoudi Mohamed AmineRapport de stage d'initiation 2015 Mahmoudi Mohamed Amine
Rapport de stage d'initiation 2015 Mahmoudi Mohamed AmineMohamed Amine Mahmoudi
 
Conception, développement et mise en ligne d’une plateforme Odoo destinée à l...
Conception, développement et mise en ligne d’une plateforme Odoo destinée à l...Conception, développement et mise en ligne d’une plateforme Odoo destinée à l...
Conception, développement et mise en ligne d’une plateforme Odoo destinée à l...Nabil EL Moudden
 
PFE :Conception, développement et mise en ligne d’une plateforme Odoo destiné...
PFE :Conception, développement et mise en ligne d’une plateforme Odoo destiné...PFE :Conception, développement et mise en ligne d’une plateforme Odoo destiné...
PFE :Conception, développement et mise en ligne d’une plateforme Odoo destiné...Nabil EL Moudden
 
Refonte de site web : cas pratique - site du master INI
Refonte de site web  : cas pratique - site du master INIRefonte de site web  : cas pratique - site du master INI
Refonte de site web : cas pratique - site du master INICédric Mouats
 
Le web sémantique pour mieux anticiper le futur
Le web sémantique pour mieux anticiper le futurLe web sémantique pour mieux anticiper le futur
Le web sémantique pour mieux anticiper le futurSylvain Gateau
 
Catalogue de stage
Catalogue de stageCatalogue de stage
Catalogue de stagemzoughi Anis
 
rapport de stage de découverte
rapport de stage de découverte rapport de stage de découverte
rapport de stage de découverte SamirElkhyati
 
Rapport mini-projet Gestion Commerciale D’un Supermarché
Rapport mini-projet  Gestion Commerciale D’un SupermarchéRapport mini-projet  Gestion Commerciale D’un Supermarché
Rapport mini-projet Gestion Commerciale D’un SupermarchéMouad Lousimi
 
CS_rapport_final_fr_v3_1
CS_rapport_final_fr_v3_1CS_rapport_final_fr_v3_1
CS_rapport_final_fr_v3_1Solin TEM
 
Migration gmao de openerp 6.1 vers odoo 8
Migration gmao de openerp 6.1 vers odoo 8Migration gmao de openerp 6.1 vers odoo 8
Migration gmao de openerp 6.1 vers odoo 8HORIYASOFT
 

Similar a IntenrnshipMyApp (20)

Gestion programme moussanada avec openerp
Gestion programme moussanada avec openerpGestion programme moussanada avec openerp
Gestion programme moussanada avec openerp
 
salwfrarapp137.pdf
salwfrarapp137.pdfsalwfrarapp137.pdf
salwfrarapp137.pdf
 
Rapport-PfA-ACHKAOU-SARA.pdf
Rapport-PfA-ACHKAOU-SARA.pdfRapport-PfA-ACHKAOU-SARA.pdf
Rapport-PfA-ACHKAOU-SARA.pdf
 
Platform freelance ASP .NET / C#
Platform freelance ASP .NET / C# Platform freelance ASP .NET / C#
Platform freelance ASP .NET / C#
 
Application web de gestion de recrutement- Recruitement managment system
Application web de gestion de recrutement- Recruitement managment systemApplication web de gestion de recrutement- Recruitement managment system
Application web de gestion de recrutement- Recruitement managment system
 
Formation: Du prototype au site web responsive
Formation: Du prototype au site web responsiveFormation: Du prototype au site web responsive
Formation: Du prototype au site web responsive
 
Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5
 
PFE::Conception et développement du Back Office d'une application mobile de g...
PFE::Conception et développement du Back Office d'une application mobile de g...PFE::Conception et développement du Back Office d'une application mobile de g...
PFE::Conception et développement du Back Office d'une application mobile de g...
 
Rapport de stage d'initiation 2015 Mahmoudi Mohamed Amine
Rapport de stage d'initiation 2015 Mahmoudi Mohamed AmineRapport de stage d'initiation 2015 Mahmoudi Mohamed Amine
Rapport de stage d'initiation 2015 Mahmoudi Mohamed Amine
 
Conception, développement et mise en ligne d’une plateforme Odoo destinée à l...
Conception, développement et mise en ligne d’une plateforme Odoo destinée à l...Conception, développement et mise en ligne d’une plateforme Odoo destinée à l...
Conception, développement et mise en ligne d’une plateforme Odoo destinée à l...
 
PFE :Conception, développement et mise en ligne d’une plateforme Odoo destiné...
PFE :Conception, développement et mise en ligne d’une plateforme Odoo destiné...PFE :Conception, développement et mise en ligne d’une plateforme Odoo destiné...
PFE :Conception, développement et mise en ligne d’une plateforme Odoo destiné...
 
Refonte de site web : cas pratique - site du master INI
Refonte de site web  : cas pratique - site du master INIRefonte de site web  : cas pratique - site du master INI
Refonte de site web : cas pratique - site du master INI
 
Le web sémantique pour mieux anticiper le futur
Le web sémantique pour mieux anticiper le futurLe web sémantique pour mieux anticiper le futur
Le web sémantique pour mieux anticiper le futur
 
Catalogue de stage
Catalogue de stageCatalogue de stage
Catalogue de stage
 
rapport de stage de découverte
rapport de stage de découverte rapport de stage de découverte
rapport de stage de découverte
 
Ansible
AnsibleAnsible
Ansible
 
Rapport mini-projet Gestion Commerciale D’un Supermarché
Rapport mini-projet  Gestion Commerciale D’un SupermarchéRapport mini-projet  Gestion Commerciale D’un Supermarché
Rapport mini-projet Gestion Commerciale D’un Supermarché
 
CS_rapport_final_fr_v3_1
CS_rapport_final_fr_v3_1CS_rapport_final_fr_v3_1
CS_rapport_final_fr_v3_1
 
Migration gmao de openerp 6.1 vers odoo 8
Migration gmao de openerp 6.1 vers odoo 8Migration gmao de openerp 6.1 vers odoo 8
Migration gmao de openerp 6.1 vers odoo 8
 
etude de cas m.p
etude de cas m.petude de cas m.p
etude de cas m.p
 

IntenrnshipMyApp

  • 1. Rapport de stage de fin d’année Réalisation d’un site intranet Soutenu par : Sous la direction de : Hatim AHADRI M. Ismail MECHBAL Yassine AAZEDINE Année Universitaire 2014-2015 Ecole Nationale Supérieure d’Informatique et d’Analyse des Systèmes
  • 2. Projet de Fin d’Année 2014-2015 2 Remerciements Nous tenons d’abord à remercier Mr Ismail MECHBAL de nous avoir accueilli durant ce mois et de nous avoir donné l’opportunité, à travers ce stage, de nous initier au métier d’ingénieur. Nous sommes très reconnaissant du temps qu’il m'avait consacré mais aussi de son accueil chaleureux et sa coopération professionnelle tout au long de ce mois. Nous tenons à remercier également les membres du jury, ainsi que tous ceux qui ont contribué de près ou de loin à la réalisation de ce projet. En espérant que ce travail soit à la hauteur de vos attentes. Cordialement, Yassine et Hatim.
  • 3. Projet de Fin d’Année 2014-2015 3 Résumé Dans le cadre du stage de fin de première année à l’ENSIAS, J’ai effectué un stage de un mois dans la société MyAppConverter à Casablanca, durant lequel j’ai été appelé à réaliser un site intranet au sein de l’entreprise. Ce projet consiste à réaliser un site intranet qui permet aux employés de l’entreprise de mieux collaborer et de profiter de l’outil informatique dans leur travail quotidien. En effets, il résout en grande partie les problèmes liés à la circulation des documents et la communication entre les différents agents.
  • 4. Projet de Fin d’Année 2014-2015 4 Abstract Within the end of the first year internship ENSIAS, we did a one month internship in MyAppConverter company in Casablanca, during which we were called to perform an intranet within the company. This project is to achieve an intranet site that allows company employees to better collaborate and take advantage of computers in their daily work. In effect, it largely solves the problems related to the circulation of documents and communication between the different agents.
  • 5. Projet de Fin d’Année 2014-2015 5 Liste des abréviations CMS : Système de gestion de contenue. CSS : Cascading Style Sheets. ENSIAS : Ecole National d’Informatique et d’Analyse des Systemes. HTML: HyperText Markup Language. PHP: Hypertext Preprocessor. SQL: Structured Query Language.
  • 6. Table des matières Projet de Fin d’Année 2014-2015 6 Table des figures Figure 1 : Work flowactuel de service MyAppConverter Figure 2: MyAppConverter Workflow à la fin du projet Figure 3: Diagramme de cas d’utilisation Figure 4: La base de données Figure 5: Page d’authentification Figure 6: La page d’accueil Figure 7: La page des « Hobbies » Figure 8: La page de « Kernel Development » Figure 9: La page de « Web Development » Figure 10: Calendrier Figure 11: Exemple de page de discussion Figure 12 : Exemple de page de document Figure 13 : Exemple de page de Fichiers Figure 14 : Exemple de page des taches Figure 15 : Galerie
  • 7. Table des matières Projet de Fin d’Année 2014-2015 7 Table des matières Liste des abréviations................................................................................................................. 5 Table des figures ........................................................................................................................ 6 Table des matières...................................................................................................................... 7 Chapitre 1................................................................................................................................... 9 Présentation d’organisme d’accueil......................................................................................... 9 1 Organisme d’accueil :....................................................................................................... 10 1.1 Organisation : ........................................................................................................... 10 1.2 Activité de la société : .............................................................................................. 10 1.2.1 MyAppConverter : ........................................................................................... 10 2 Présentation du projet:...................................................................................................... 12 Chapitre 2 ................................................................................................................................ 15 Analyse et Conception............................................................................................................ 15 3 Analyse et conception : .................................................................................................... 16 4 Modèle conceptuel de la base de données :...................................................................... 17 Chapitre 3 ................................................................................................................................ 18 Réalisation............................................................................................................................... 18 5 Les sites Web: .................................................................................................................. 19 6 Langages de programmation :.......................................................................................... 19 7 Développement du site :................................................................................................... 21 8 Réalisation :...................................................................................................................... 23 Conclusion................................................................................................................................ 29 9 Bibliographie.................................................................................................................... 30
  • 8. Introduction générale Projet de Fin d’Année 2014-2015 8 Introduction L’apport et la valeur ajoutée des technologies de l’information sont désormais de plus en plus palpables et visibles. En effet, il devient primordial et nécessaire pour tout organisme, désireux de poursuivre sa marche vers la performance, de se munir d’un système d’information adapté, surtout s’il s’agit de la gestion d’un nombre important de données Ainsi le sujet de mon stage est la réalisation d’un site intranet dynamique interactif fondé aussi bien sur la connaissance et l'intelligence collective, que sur les moyens et les structures, le but de ce site et de permettre un accès simple et rapide à un bouquet de services créé pour répondre aux divers préoccupations des opérateurs. L’intranet n’est pas uniquement une technologie mais aussi une méthode de circulation des idées et de vitalité de groupes de travail collectifs et autonomes fonctionnant à la fois en tant que système de diffusion et de partage de l’information ainsi que moyen de facilitation de la communication, de la coordination et de la coopération entre les différents acteurs à l’échelle interne. L’intranet est en fait une structure de plate-forme à forte valeur ajoutée dont la stratégie aurait décliné vers l’optimisation et la facilité des processus de travail, le partage des connaissances et des compétences, le renforcement de la culture du groupe et la familiarisation du management à des nouveaux modes de gestion de l’information. Le présent rapport a un double objectif. D’une part, la représentation de la démarche poursuite pour l’implémentation de cette application et d’autre part l’explication détaillée de son fonctionnement. Ce rapport se décompose en quatre chapitres qui permettent de montrer progressivement, avec leurs détails, les différentes étapes par lesquels nous avons passé pour aboutir la réalisation de cette application : Chapitre 1 : Présentation d’organisme d’accueil ; Chapitre 2 : Analyse et conception ; Chapitre 3 : Réalisation ;
  • 9. Projet de Fin d’Année 2014-2015 9 Chapitre 1 Présentation d’organisme d’accueil Dans ce premier chapitre, nous essayerons premièrement de présenter l’organisme d’accueil, et après nous définirons le projet en décrivant le cahier de charge.
  • 10. Projet de Fin d’Année 2014-2015 10 1 Organisme d’accueil : 1.1 Organisation : Figure : Diagramme des cofondateurs et les équipes 1.2 Activité de la société : 1.2.1 MyAppConverter : MyAppConverter est un service basé sur le cloud computing permettant la conversion instantané d’une application mobile d’un OS ‘A’ vers un OS ‘B’ est ce, sans la nécessite de télécharger ou de configurer un quelconque outil. Figure 1 : Work flowactuel de service MyAppConverter
  • 11. Projet de Fin d’Année 2014-2015 11 Actuellement le service MyAppConverter, permette à un développeur ayant une application iOS vers Android et Objectiv C vers swift, sans avoir la développer une autre fois. La convertion passe via le Cloud automatiquement et instantanément. Figure 2: MyAppConverter Workflow à la fin du projet Par la suite MyAppConverter se généralisera dans le but de permettre une conversion d’une application développer sous une plateforme – OS mobiles : iOS, Android, Windows Phone et BlackBerry – a n’importe qu’elle autre plateforme.
  • 12. Projet de Fin d’Année 2014-2015 12 2 Présentation du projet: Afin de simplifier l’exercice de ses missions, le service informatique a adopté le choix d’un site intranet fondé aussi bien sur la connaissance et l’intelligence collective, que sur les moyens et les structures. En effet, il a conçu un site à la fois en tant que système de diffusion et de partage de l’information ainsi que moyen de facilitation de la communication, la coordination et de la coopération entre les différents acteurs à l’échelle interne. L’objectif de ce site est de permettre un accès simple et ergonomique a un bouquet de services crée pour répondre aux diverses préoccupations des opérateurs. Sachant que l’Intranet n’est pas uniquement une technologie mais aussi une méthode de circulation des idées et de vitalité de groupes de travail collectifs et autonomes, il offrira donc à chacun des dispositifs d’incitation à la création de connaissance et d’enrichissement des savoirs. Au départ, son rôle était de fournir à ses utilisateurs un outil d’information et de publication, mais les métiers du groupe étant par nature très diversifies, la seconde génération de l’Intranet a vite évolue vers une structure de plate-forme à forte valeur ajoutée dont la stratégie aurait décline vers les quatre axes suivants : • Optimiser et faciliter les processus de travail. • Partager connaissances & compétences. • Renforcer et développer la culture du groupe. • Familiariser le management a de nouveaux modes de gestion de l’information. L’Intranet sera en fait un outil de management des connaissances collectives, il permettra de répondre a des préoccupations pragmatiques et essentielles telles que : • Perdre moins de temps à chercher l’information pertinente nécessaire a une décision, une action ou une tache. • Apprendre à diffuser la bonne information a la bonne personne. • Créer une culture du partage où chaque utilisateur devient consommateur et potentiellement producteur d’information
  • 13. Projet de Fin d’Année 2014-2015 13 Ce site Intranet comprendra, en plus d’une partie classique d’actualités, d’informations générales et de bases de données, une partie qui constituera un outil de travail pour tous les agents du service informatique et pourra être constamment adaptée à leurs besoins. Sachant que la société est composée de deux départements (Kernel Development, Web Development), nous devons créer deux espaces indépendants pour gérer chaque département en soi. Et comme l’organisme dispose d’une Xbox, nous avons décidé de créer un troisième espace « Hobbies » qui gèrera les tournois (l’heure et le jour des matchs, les résultats et les équipes). Notre Intranet répondra aux besoins suivants :  L’administrateur est le seul qui a le droit d’ajouter un nouveau compte.  La gestion des documents.  L’administrateur est le seul qui peut publier sur l’espace « Hobbies » et gérer le contenue.  La gestion des évènements.  La gestion de la galerie des photos.  Créer un espace de communication (une propre boite de messagerie) pour chaque employé.  Gestion du forum.  Gestion des publications des taches. Et il doit aussi satisfaite d’autres besoins qui permettent d’améliorer la qualité des Services du site comme :  La Sécurité : il faut avoir une interface d’authentification qui permet à chaque utilisateur de se connecter pour consulter son profil.  La Convivialité : le site doit être facile à utiliser. Il doit présenter un enchainement logique entre les interfaces et un ensemble de liens suffisants pour assurer une navigation rapide et un texte compréhensible, visible et lisible.  La Disponibilité : lorsque n’importe quel utilisateur désire consulter le site, il doit être disponible.
  • 14. Projet de Fin d’Année 2014-2015 14 Dans ce chapitre, nous avions pu insérer notre projet dans son contexte en présentant la solution adoptée pour résoudre les problèmes et qui répond à nos besoins. Dans le chapitre suivant, nous allons présenter la conception de notre projet.
  • 15. Projet de Fin d’Année 2014-2015 15 Chapitre 2 Analyse et Conception Dans cette partie, nous utilisons la modélisation UML pour représenter les spécifications des exigences grâce au diagramme de cas d’utilisation, et la modélisation Merise pour représenter le modèle conceptuel de la base de données.
  • 16. Chapitre 2 Titre chapitre 2 Projet de Fin d’Année 2014-2015 16 3 Analyse et conception : Pour ce projet, il y en a deux types d’utilisateurs de ce site : les administrateurs, les employés (hors les administrateurs). <extends> <extends> <extends> <extends> <extends> <extends> <extends> <extends> <include> <include> Employe Administrateur_d'un_espace Ajouter_Document Participer_Evenement Administrer Espace Gestion_des_taches Gestion_du_calendrier Creer_Evenement Creer_une_tache Participer_a_une_tache Ajouter_employe Supprimer_employe Supprimer_un_document Gestion_document S'authentifier Participer_au_shoutbox Figure 3: Diagramme de cas d’utilisation Comme on le remarque chaque utilisateur doit d’abord s’authentifier pour se connecter. Premièrement pour les employés (non administrateurs), ils ont droit de participer au ShoutBox ou à un évènement, d’ajouter des documents, créer des taches et de participer à des forums.
  • 17. Chapitre 2 Titre chapitre 2 Projet de Fin d’Année 2014-2015 17 Alors que pour les administrateurs, c’est eux qui fait la gestion des employés (ajouter ou supprimer un compte), des documents, des taches, du forum et du calendrier. 4 Modèle conceptuel de la base de données : 1,n 1,n 0,n 1,n 0,n 0,n 0,n 1,1 1,n 1,n1,n 0,n 0,n 0,n Espace nom_espace <pi> Caractère long (10) <O> Identifiant_1 <pi> Employe id nom_employe prenom_employe <pi> Entier Caractère variable (10) Caractère variable (10) <O> Identifiant_1 <pi> Avoir ShoutBox pub_id publication <pi> <Indéfini> Caractère long (20) <O> Identifiant_1 <pi> Document document_id titre_document document pub_date <pi> Entier Caractère variable (15) Texte (500) Date <O> Identifiant_1 <pi> Contenir Publier Partager Tache tache_id tache <pi> <Indéfini> Texte (250) <O> Identifiant_1 <pi> Travailler Evenement evnt_id evenement_Desc evenement_date <pi> Entier Texte (250) Date <O> Identifiant_1 <pi> Association_6 Participer Figure 4: La base de données Comme on le constate dans cette figure, chaque employé peut travailler sur une ou plusieurs taches, et il peut participer de 0 à plusieurs évènements, et c’est le même cas pour le ShoutBox et les documents, il peut publier de 0 à plusieurs commentaires ou documents.
  • 18. Chapitre 3 Titre chapitre 2 Projet de Fin d’Année 2014-2015 18 Chapitre 3 Réalisation Après avoir effectué l’étude de la conception de notre plate-forme nous passerons à la phase d’implémentation. Ce chapitre présente le résultat du travail effectue durant notre stage. Nous allons présenter les outils de développements utilises. Nous clôturons par quelques captures d’écran démontrant les fonctionnalités de notre plate-forme.
  • 19. Chapitre 3 Titre chapitre 2 Projet de Fin d’Année 2014-2015 19 5 Les sites Web: Un site web est composé d'un ensemble de documents structurés, nommés pages web, stockés (hébergés) sur un ordinateur (serveur) connecté au réseau mondial (internet). Une page web contient essentiellement du texte, et est souvent enrichie de de médias (images, photos, musiques), les contenues ont accessibles par des adresses(URL). Il existe deux catégories de sites web : -Les sites statistiques : dont le contenu est figé, constitué de pages destinés à ne pas évoluer et sans que l’internaute puisse inter-agir avec elles. -Les sites dynamiques: dont le contenue évolue dynamiquement et en fonction des internautes sans l’intervention du webmaster. 6 Langages de programmation : HTML : L’HTML est un langage informatique utilisé sur l’internet. Ce langage est utilisé pour créer des pages web. L’acronyme signifie HyperText Markup Language, ce qui signifie en français « langage de balise d’hypertexte ». Cette signification porte bien son nom puisqu’effectivement ce langage permet de l’hypertexte à base d’une structure de balisage. Ce n’est pas à proprement parlé un langage de programmation, mais plutôt un langage qui permet de mettre en forme du contenu. Les balises permettent de mettre en forme le texte et de placer des éléments ne sont pas dans le code source d’une page codé en HTML mais “à coté” et la page en HTML ne fait que reprendre ces éléments.
  • 20. Chapitre 3 Titre chapitre 2 Projet de Fin d’Année 2014-2015 20 Pour visualiser une page HTML il est nécessaire d’utiliser un navigateur web. CSS : Le terme CSS est l’acronyme anglais de Cascading Style Sheets qui peut se traduire par « feuilles de style en cascade ». Le CSS est un langage informatique utilisé sur l’internet pour mettre en forme les fichiers HTML ou XML. Ainsi, les feuilles de style, aussi appelé fichiers CSS, comprennent du code qui permet de gérer le design d’une page en HTML. Bien que l’HTML puisse etre mis en forme à l’aide de balises prévus à cet effet, de nos jours il est plus judicieux d’utiliser le CSS et de n’utiliser le XHTML que pour le contenue. L’avantage de l’utilisation d’un fichier CSS pour la mise en forme d’un site réside dans la possibilité de modifier tous les titres du site en une seule fois en modifiants une seule partie du fichier CSS. Sans ce fichier CSS, il serait nécessaire de modifier chaque titre de chaque page du site (difficilement envisageable pour les énormes sites de plusieurs milliers de pages). D’autres points forts sont perceptibles. Il est par exemple possible de créer une feuille de style et toutes les parties inutiles lors de l’impression. De même, une feuille de style peut être utilisée pour les utilisateurs d’un téléphone portable, ce qui permet de mieux gérer la mise en forme particulièrement pour les petits écrans de ces appareils. PHP : Le PHP est un langage informatique utilisé sur l’internet. Le terme PHP est un acronyme récursif de « PHP : Hypertext Preprocessor ». Ce langage est principalement utilisé pour produire un site web dynamique. Il est courant que ce langage soit associé à une base de données, tel que MySQL. Exécute du coté serveur (l’endroit où est héberge le site) il n’y a pas besoin aux visiteurs d’avoir des logiciels ou plugins particulier.
  • 21. Chapitre 3 Titre chapitre 2 Projet de Fin d’Année 2014-2015 21 Néanmoins, les webmasters qui souhaitent développer un site en PHP doivent s’assurer que l’hébergeur prend en compte ce langage. Lorsqu’une page PHP est exécutée par le serveur, alors celui-ci renvois généralement au client (aux visiteurs du site) une page web qui peut contenir du HTML, XHTML, CSS….. MySQL : MySQL est un serveur de bases de données relationnelles Open Source. Un serveur de bases de données stocke les données dans des tables séparées plutôt que de tout rassembler dans une seule table. Cela améliore la rapidité et la souplesse de l’ensemble. Les tables sont reliées par des relations définies, qui rendent possible lq combinaison de données entre plusieurs tables durant une requête. Le SQL dans « MySQL » signifie « Structured Query Language » : le langage standard pour les traitements de bases de données. 7 Développement du site : WampServer : WampServeur est une plate-forme de développement Web sous Windows pour des applications Web dynamiques à l’aide du serveur Apache2, du langage de scripts PHP et d’une base de données MySQL. Il possède également PHPMyAdmin pour gérer plus facilement vos bases de données. Développement avec Open Atrium : Open Atrium: Open Atrium, maintenu par Phase2 Technology, est une distribustion Drupal qui vous permet d’engager en toute confiance avec vos collègues grâce à la collaboration pratique. Cette nouvelle architecture pour Drupal 7 qui est construite à l’aide du module Organic Groups et Panopoly et conçu comme un cadre de collaboration extensible. Ajoute la
  • 22. Chapitre 3 Titre chapitre 2 Projet de Fin d’Année 2014-2015 22 possibilité d’avoir des « sections » privées dans un espace de collaboration avec le contrôle d’accès granulaire. Glisser / déposer contrôle de la mise en page avec des dizaines de widgets qui peuvent être places sur les tableaux de bord et des pages d’atterrissage. Drupal : Drupal est un système de gestion de contenu (abrégé CMS en anglais) libre et open source. Un CMS est un logiciel qui permet de gérer le contenue d’un site Web. Ceci permet aux utilisateurs de faire évoluer le site sans recourir systématiquement à un programmeur. Drupal est un outil qui s’adresse à la fois à des débutants ou des programmeurs experts. Sa flexibilité lui permet de répondre à la très grande majorité des besoins du marché: sites institutionnels, blog, annuaire, communautaire, marchand ou intranets, tout est possible. *Ses avantages : -Rapidité de mise en place : Drupal permet d’obtenir un site fonctionnel et évoluer en quelques clics sans écrire une seule ligne de code. -Modularité : On peut étendre les possibilités en ajoutant des modules. Ceux-ci sont très Nombreux, proposes par la communauté et toujours sous licence libre GPL. Cette architecture permet aux programmeurs de réaliser des modules personnalises afin d’étendre les fonctionnalités sans pour autant modifier le corps de Drupal. -Robustesse de son API : La qualité du code et la robustesse de son interface de programmation modules gravitant autour d’un noyau très léger. Chaque module est en quelque sorte une bibliothèque de fonctions qui enrichit l’application et augmente ses possibilités. Une des forces de Drupal est la possibilité qu’ont les modules d’interagir entre eux. La contrepartie de cette flexibilité est la complexité, ainsi, Drupal propose souvent une ou plusieurs solutions pour résoudre le même
  • 23. Chapitre 3 Titre chapitre 2 Projet de Fin d’Année 2014-2015 23 problème. D’autre part, le plus dur est quelquefois de trouver « le » module qui répondra le mieux à vos besoins. Un autre point qui distingue Drupal des autres CMS est que le site et son interface d’administration sont intimement lies : les administrateurs éditent leur contenu dans le même contexte graphique ou presque que celui du visiteur. Cette fonctionnalité peut-être déroutante au premier abord, mais est par la suite particulièrement productive et intuitive. Comme tous les CMS. L’architecture d’un site Drupal repose sur un modèle de contenue spécifique qui permet de structurer l’information. Drupal utilise un système de nœud couplé à une taxonomie particulièrement flexible. 8 Réalisation : Figure 5: Page d’authentification Comme notre site est réservé juste pour les employés de l’entreprise, cette page aidera les visiteurs de s’identifier pour avoir l’accès à la page principal du site.
  • 24. Chapitre 3 Titre chapitre 2 Projet de Fin d’Année 2014-2015 24 Figure 6: La page d’accueil Voilà c’est la page principale du site, elle permet aux utilisateurs d’accéder aux trois « Spaces » existants (Hobbies, Kernel Development, Web Development). En bas à droite en remarque la petite barre qui nous informe sur les employeurs connectés sur le site. Figure 7: La page des « Hobbies » C’est la page du premier « Space » nomme Hobbies. Le visiteur va vite remarquer que la page est divise en trois colonnes. Dans la première colonne à gauche, sous le logo du space existe deux boutons qui aideront l’utilisateur de créer un évènement ou publier le résultat d’un match. La colonne du milieu est réservée aux résultats des anciens matchs du tournoi. Et la dernière colonne est réservée premièrement aux évènements (le temps ou de déroulera les
  • 25. Chapitre 3 Titre chapitre 2 Projet de Fin d’Année 2014-2015 25 matchs..), ainsi elle est réservée aux petit espace de Shat ou les utilisateurs peuvent poster leurs commentaire ou communiquer entre eux. Figure 8: La page de « Kernel Development » Voilà c’est la page du deuxième Space « Kernel Development ». Comme le premier Space, la page est divise en trois colonnes. La première colonne est réservée au menu, un bouton qui permet d’accéder à la page de la galerie et au champ des points de publications. Dans le menu, il y a 5 boutons qui permettent d’accéder un champ précis (calendrier, discussion, document, fichier, espace des taches). La deuxième colonne est réservée à différentes publications postées par les employeurs comme les documents, les fichiers, les discussions et les taches. La troisième colonne est réservée aux 4 champs sont : Les « Follow », les évènements, le calendrier et finalement un champ ou on peut créer de nouveaux documents, fichiers, évènements, taches, team, discussion ou album.
  • 26. Chapitre 3 Titre chapitre 2 Projet de Fin d’Année 2014-2015 26 Figure 9: La page de « Web Development » Cette page représente la page du troisième Space « Web Development », elle est aussi divisée en trois colonnes et contient les mêmes champs que celle du deuxième space « Kernel Development ». Figure 10: Calendrier Cette page permet aux visiteurs d’accéder au calendrier et de s’informer sur les différentes enlèvements indiques.
  • 27. Chapitre 3 Titre chapitre 2 Projet de Fin d’Année 2014-2015 27 Figure 11: Exemple de page de discussion C’est la page des discussions ou les visiteurs peuvent trouver les différentes discussions publiées en s’informant sur la personne qui l’a publié, la date et l’heure de publication, ainsi le nombre de commentaires. Figure 12 : Exemple de page de document C’est la page des documents publies (chaque space a sa propre page des documents). Elle nous permet de consulter les différents documents, et qui les a posté et la date de publication. Figure 13 : Exemple de page de Fichiers
  • 28. Chapitre 3 Titre chapitre 2 Projet de Fin d’Année 2014-2015 28 C’est la page des fichiers ou les utilisateurs peuvent trouver les différents fichiers publiés en s’informant sur la personne qui l’a publié, la date et l’heure de publication. Figure 14 : Exemple de page des taches C’est la page des taches ou les utilisateurs peuvent trouver les différentes taches publiées. Figure 15 : Galerie Voilà c’est la page de la galerie ou les photos sont ordonnes par album.
  • 29. Conclusion Projet de Fin d’Année 2014-2015 29 Conclusion A la fin de ce stage nous avons pu créer une plate-forme qui facilite la communication et l’accès à l’information aux employés de la société MyAppConverter. En les permettant de consulter toutes les taches pour chaque équipe, participer aux forums, partager des documents, consulter la gallérie des photos, accéder à la boite de messagerie personnelle et à l’espace de chat. Enfin, en créant un espace de divertissement où ils trouvent tous les résultats des matches joues et le programme des prochains matches. Cependant, le site n’est pas à sa version finale, il peut être améliore d’avantage en intégrant à chaque fois de nouveaux modules qui automatisent et optimisent le travail au sein de l’entreprise. Durant la réalisation de ce projet, nous avons fait beaucoup de recherche pour atteindre nos objectifs, ce qui nous a permis de développer notre technique de recherche d’information. Ce projet nous a donné la chance d’enrichir nos connaissances sur la programmation web en découvrant des outils très intéressante comme Open Atrium. En fin, même si beaucoup d’efforts et de patience nous a été demandé pour réaliser ce travail, nous avons été satisfaits du résultat final que nous éperons aussi satisfaire nos encadrons.
  • 30. Annexe B Modèle Bibliographie Projet de Fin d’Année 2014-2015 30 9 Bibliographie [1] : http://www.aidice-web.com/accueil/definition-site-web.php date de consultation 20/10/2015. [2] : http://glossaire.infowebmaster.fr/html/ date de consultation 20/10/2015. [3] : http://glossaire.infowebmaster.fr/css/ date de consultation 20/10/2015. [4] : http://glossaire.infowebmaster.fr/php/ date de consultation 20/10/2015. [5] : http://www.futura-sciences.com/magazines/high-tech/infos/dico/d/internet-mysql- 4640/ date de consultation 20/10/2015. [6] : http://www.wampserver.com/ date de consultation 20/10/2015. [7] : http://drupalfr.org/documentation/quest-drupal date de consultation 20/10/2015.