1 Sommaire Remerciements ........................................................................................................ 2 Introduction .............................................................................................................. 3 Partie I : L’organisme d’accueil .................................................................................. 4 1. La fiche d’identité de l’entreprise : .................................................................... 5 2. Les Services ..................................................................................................... 6 2.1. Charte graphique .......................................................................................... 6 2.2. Impression .................................................................................................... 6 2.3. Création des sites web (Html, Flash, Dynamique, e-Vitrine, e-Commerce, CMS...) ................................................................................................................ 6 2.4. Solution logiciel (Géstion de stock, facturation, commandes...) .................... 6 2.5. Animation et montage vidéo ......................................................................... 7 3. L’organigramme de l’entreprise ........................................................................ 7 4. Les clients ........................................................................................................ 8 Partie II : Projet réalisé ............................................................................................... 9 1. Présentation de projet .................................................................................... 10 1.1. Cahier de charge ..................................................................................... 10 1.2. Cycle de vie ............................................................................................. 10 1.3. Diagramme de Gantt ................................................................................ 11 1.4. Choix technologique ................................................................................ 12 1.5. Conception de base de données ............................................................. 17 1.6. Front office ............................................................................................... 20 Conclusion.............................................................................................................. 32
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Est un outil permettant de modéliser la planification de tâches nécessaires à la
réalisation d'un projet. Il s'agit d'un outil inventé en 1917 par Henry L. GANTT.
Dans un diagramme de GANTT chaque tâche est représentée par une ligne, tandis
que les colonnes représentent les jours, semaines ou mois du calendrier selon la
durée du projet. Le temps estimé pour une tâche se modélise par une barre
horizontale dont l'extrémité gauche est positionnée sur la date prévue de démarrage
et l'extrémité droite sur la date prévue de fin de réalisation. Les tâches peuvent
s'enchaîner séquentiellement ou bien être exécutées en parallèle.
Cahier des charges Formation en PHP5 et HTML5
Test d’intégration/unitaire
Etude de faisabilité
Design
Codage
Conception
Formation en MVC
12
Auto-Formation en PHP5 et HTML5
L’ancienne application étais développée en HTML5 et PHP5, chose qui nous impose
d’utiliser les capacités d’autonomie pour comprendre les nouveautés sur HTML5 et
PHP5.
Rencontre avec client
Durant le développement de notre projet on à réaliser 4 réunions avec notre client :
1. Expliquer le cahier de charge et les besoins de client
2. Des remarques et des modifications
3. Voir l’avancement de travail
4. Livraison de l’application
1.4. Choix technologique La première question qui s'est posée pour la réalisation de la partie technique du projet
a été de choisir une architecture pour l'application.
1.4.1. La Méthode Modèle-Vue-Contrôleur (MVC)
L'architecture Modèle/Vue/Contrôleur (MVC) est une architecture et une méthode de
conception qui organise l'Interface Homme-Machine d'une application logicielle (dans
notre cas un site web). Elle consiste à distinguer trois entités distinctes qui sont,
le modèle, la vue et le contrôleur ayant chacun un rôle précis dans l'interface.
modèle : données (accès et mise à jour) vue : interface utilisateur (entrées et sorties) contrôleur : gestion des événements et synchronisation
Grossièrement, cela permet une séparation entre les traitements de données et
la présentation.
Rôle du modèle
Le modèle contient les données manipulées par le programme. Il assure la gestion de ces données et garantit leur intégrité. Dans le cas typique d'une base de données, c'est le modèle qui la contient.
Le modèle offre des méthodes pour mettre à jour ces données (insertion suppression, changement de valeur). Il offre aussi des méthodes pour récupérer ses données. Dans le cas de données importantes, le modèle peut autoriser plusieurs vues partielles des données. Si par exemple le programme manipule une base de données pour les emplois du temps, le modèle peut avoir des méthodes pour avoir, tous les cours d'une salle, tous les cours d'une personne ou tous les cours d’un groupe de Td.
13
Rôle de la vue
La vue fait l'interface avec l'utilisateur. Sa première tâche est d'afficher les données qu'elle a récupérées auprès du modèle. Sa seconde tâche est de recevoir tous les actions de l'utilisateur (clic de souris, sélection d'une entrées, boutons, etc.). Ses différents événements sont envoyés au contrôleur.
La vue peut aussi donner plusieurs vues, partielles ou non, des mêmes données. Par exemple, l'application de conversion de bases a un entier comme unique donnée. Ce même entier est affiché de multiples façons (en texte dans différentes bases, bit par bit avec des boutons à cocher, avec des curseurs). La vue peut aussi offrir la possibilité à l'utilisateur de changer de vue.
Rôle du contrôleur
Le contrôleur est chargé de la synchronisation du modèle et de la vue. Il reçoit tous les événements de l'utilisateur et enclenche les actions à effectuer. Si une action nécessite un changement des données, le contrôleur demande la modification des données au modèle et ensuite avertit la vue que les données ont changé pour que celle-ci se mette à jour. Certains événements de l'utilisateur ne concernent pas les données mais la vue. Dans ce cas, le contrôleur demande à la vue de se modifier.
Dans le cas d'une base de données des emplois du temps. Une action de l'utilisateur peut être l'entrée (saisie) d'un nouveau cours. Le contrôleur ajoute ce cours au modèle et demande sa prise en compte par la vue. Une action de l'utilisateur peut aussi être de sélectionner une nouvelle personne pour visualiser tous ses cours. Ceci me modifie pas la base des cours mais nécessite simplement que la vue s'adapte et offre à l'utilisateur une vision des cours de cette personne.
Le contrôleur est souvent scindé en plusieurs parties dont chacune reçoit les événements d'une partie des composants. En effet si un même objet reçoit les événements de tous les composants, il lui faut déterminer quelle est l'origine de chaque événement. Ce tri des événements peut s'avérer fastidieuse et peut conduire à un code pas très élégant (un énorme switch). C'est pour éviter ce problème que le contrôleur est réparti en plusieurs objets.
14
Interactions
Les différentes interactions entre le modèle, la vue et le contrôleur sont résumées par le schéma de la figure suivante.
1.4.2. Design avec le BOOTSTRAP Afin de bien organiser les interfaces de notre application, c’est-à-dire la partie vue de
notre projet, nous avons travaillé avec le BOOTSTRAP, qui est un framework CSS,
mais pas seulement, puisqu'il embarque également des composants HTML et
JavaScript. Il comporte un système de grille simple et efficace pour mettre en ordre
l'aspect visuel d'une page web. Il apporte du style pour les boutons, les formulaires,
la navigation… Il permet ainsi de concevoir un site web rapidement et avec peu de
lignes de code ajoutées.
Il existe actuellement deux versions. Nous avons travaillé avec la version la plus
récente : la 3e. Avant d’utiliser le Framework, faut d’abord comprendre le système de
grilles. Une grille est tout simplement un découpage en cellules de mêmes
dimensions. La grille de Bootstrap comporte 12 colonnes et découpée en rangées
(appelées row, parce que tout est en anglais) et colonnes (col), comme à la figure
suivante.
Les fichiers les plus importantes de BOOTSTRAP sont :
15
bootstrap.css : ou bootstrap.min.css correspond au thème de base (couleurs,
polices, colonnes, icônes…) et se trouve dans le dossier dist/css.
bootstrap.js : regroupe l’ensemble des plugins proposés par Bootsrap
(carrousel, modales, alertes…). Ce fichier se trouve dans le dossier dist/js. Et
on peut inclure individuellement chaque plugin proposé (dans le dossier js à la
racine du dossier Bootstrap). Aussi faut-il inclure jQuery pour faire fonctionner
les plugins JavaScript.
1.4.3. Outils de réalisation
Pour la réalisation de tous les projets web au sein de la société FEDALA SOLUTION,
on utilise les mêmes logiciels à distribution libre : PHP 5, la SGBD MySQL et le serveur
Wampserver.
1.4.3.1. PHP 5
PHP5 n'est pas une révolution mais une évolution. Cette évolution introduit
quelques changements majeurs tout en conservant une compatibilité totale avec la
version antérieure. Les principales nouvelles fonctionnalités sont:
SQL ite: Un SGBD embarqué dont nous verrons les principales forces et
faiblesses.
Simple XML: Un nouveau parseur XML très efficace et très simple.
Un nouveau modèle POO: Le modèle objet complètement remanié, l'ancien
Le HTML5 est la dernière version en date du langage de développement web HTML. Le HTML5 comprend de nouvelles balises et de nouveaux attributs pour les pages web et ouvre surtout de nouvelles possibilités de développement pour les sites mobiles.
Avec un navigateur mobile compatible, le HTML5 doit notamment permettre d’utiliser et d’échanger avec des fonctionnalités propres aux smartphones (carnet d’adresse, géolocalisation, appareil photo, etc.). Avant le HTML5, seules des applications mobiles natives pouvaient utiliser ces fonctionnalités.