DOSSIER TECHNIQUE · permettre aux développeurs d’héerger leur site. Ensuite il y a fallu...
Transcript of DOSSIER TECHNIQUE · permettre aux développeurs d’héerger leur site. Ensuite il y a fallu...
DOSSIER TECHNIQUE
INFODEV DOSSIER TECHNIQUE
InfoDev
2
Sommaire
Introduction ______________________________________________________________________ 3
Partie I : Réseau ___________________________________________________________________ 4
L’architecture du réseau __________________________________________________________ 4
Serveurs web et DNS _____________________________________________________________ 5
Serveurs FOG ___________________________________________________________________ 7
Logiciel de gestion de projet ______________________________________________________ 9
Installation de GLPI et OCS Inventory _______________________________________________ 11
Partie II : Développement __________________________________________________________ 13
Les schémas de la base de données ________________________________________________ 13
Arborescence du site ____________________________________________________________ 15
Organisation du répertoire du serveur ______________________________________________ 16
Liste des scripts ________________________________________________________________ 17
Charte graphique _______________________________________________________________ 18
Maquettes ____________________________________________________________________ 22
TESTS des fonctionnalités ________________________________________________________ 27
Conclusion _____________________________________________________________________ 29
InfoDev
3
Introduction
Travaillant pour la SSII InfoDev, un projet pour la FFE nous à été confié.
Composée de 3 développeurs et de 3 professionnels en réseau, notre équipe à
pour but de mener à bien le projet de la fédération française d'équitation qui
consiste à créer une application de gestion simplifiée pour les concours de
l'organisation.
Cette application doit donc permettre à toutes personnes qui le souhaitent de
visualiser le classement des participants pour chaque concours. De plus,
l'application doit gérer 2 types d'utilisateur qui pourront se connecter, les
responsables et les juges arbitres. Les responsables doivent pouvoir gérer la
création de concours et la gestion des inscriptions de participants à un
concours et les arbitres doivent posséder un module leur permettant
d'effectuer une notation efficace de chaque participant lors des concours.
Nécessitant des enregistrements et d'être accessible par tous, une architecture
technique doit être mise en place pour gérer ces enregistrements et une
accessibilité via internet.
InfoDev
4
Partie I : Réseau
L’architecture du réseau
Voici l’architecture du réseau que nous avons mis en place. Nous avons tout d’abord à notre disposition un serveur VMS. Celui-ci comprend une infrastructure de virtualisation de type ProxMox et donc un serveur appelé PXPPE34. Il a permis de mettre en place un serveur de test (pour effectuer toutes nos installations, vérifier le bon fonctionnement) ainsi que d’un serveur
de
production.
InfoDev
5
Serveurs web et DNS
Nous avons tout d’abord installé un serveur web apache depuis Proxmox pour permettre aux développeurs d’héberger leur site. Ensuite il y a fallu créer des enregistrements A et PTR pour le server DNS.
Il a fallu se connecter sur ppe34 : ssh –X ppe34@vms
Ensuite il faut se placer à la racine du répertoire de base : cd
Créer dnsppe34.direct pour les enregistrements A : vim dnsppe34.direct
Créer dnsppe34.rev pour les enregistrements PTR: vim dnsppe34.rev
InfoDev
6
Copier sur le dns :
Scp dns* root@ns:/tmp
Envoyer le contenu des fichiers à la suite du fichier dns :
Cat /tmp/dnsppe34.direct >> etc/bind/db.ldij-lecastel.lan
Cat /tmp/dnsppe34.rev >> etc/bind/db.ldij-lecastel.lan.rev
Changer le numéro de série :
Zsu –f db.ldij-lecastel.lan
zsu –f db.ldij-lecastel.lan.rev
Enfin il faut relancer bind9: service bind9 reload
InfoDev
7
Serveurs FOG
Avant d’installer le serveur, nous nous somme aperçu que par la suite nous aurons besoin d’une partition suplémentaire. Nous avons donc créé une partition sur virtualBox.
Ensuite nous avons pu commencer l’installation
Se placer dans cd / opt /
Copier le lien : http://downloads.sourceforge.net/project/freeghost/FOG/fog_0.32/fog_0.32.tar.gz
fog_0.32.tar.gz tar-xvzf
cd fog_0.32/bin /
. / Installfog.sh
nano / etc/php5/apache2/php.ini
tapez 2 et appuyez sur Entrée
utiliser N pour une installation normale
Entrer l’adresse IP du serveur (la machine sur laquelle on travaille)
Appuyer sur Y pour entrer l’adresse du server DHCP puis taper l’adresse IP
Mettre l’adresse par défaut du dns
Puis appuyer sur « N »
Êtes-vous sûr de vouloir continuer (Y / N) : Y
Aller dans /Opt /fog /service/etc/config.php et dans /var/www/fog/commons/config.php et ajouter root en face de MYSQL_USERNAME et MYSQL_PASSWORD
Se connecter avec mozzilla en tapant dans la barre d’adresse l’adresseIP/fog
Fog permet de gérer des images disques permettant le déploiement de stations
via PXE. Cela permet par exemple d'éviter d'avoir à réinstaller et configurer un
InfoDev
8
poste utilisateur. Il suffit de déployer une image que l'on souhaite sur le poste
et il sera immédiatement prêt à l'utilisation
InfoDev
9
Logiciel
de gestion de projet
Nous avons installé un logiciel de gestion de projet Après avoir comparé plusieurs logiciels nous avons retenus trois logiciel : Redmine, AceProject et FusionForge. Nous les avons donc tester :
- Installation de Redmine avec un tutoriel en ligne Echec
- Installation de Aceproject Solution non retenue car la possibilité de
créations d’utilisateur était insuffisante.
- Installation FusionForge sur ppetest :
vim /etc/hosts : 10.121.38.64 pxppe34.ldij-lecastel.lan -> lien vers
serveur proxmox
vim etc/apt/sources.lit : deb http://fusionforge.fusionforge.org/deb/5.2
wheezy main
wget -q http://fusionforge.fusionforge.org/deb/5.2/key -0- |apt-key add
- (clé)
proxy > aptitude update
aptitude search fusionforge > aptitude install fusionforge-minimal
création compte forge :
ID :admin
Mot de passe : azerty
Enlever site parasite par défaut :
- Cd /etc/apache2/sites-availaible
-A2dissite default
-Service apache2 reload
Se connecter à FusionForge avec un navigateur :
https://ppe34test.ldij-lecastel.lan/
- Rédaction d’un document d’utilisation de FusionForge « Utilisation
FusionForge.docx» et mise à disposition sur FusionForge dans Docs.
InfoDev
10
InfoDev
11
Installation de GLPI et OCS Inventory
Il faut savoir que GLPI et OCSInventory sont une suite logicielle pour gérer un parc informatique. En installant l’agent sur les machines clientes, celles-ci seront automatiquement répertoriées dans une base de données et nous pouvons ainsi à distance consulter leur configuration matérielle et les logiciels installés. De plus, nous pouvons mettre en place une hotline avec la gestion de tickets pour dépanner les utilisateurs. Le point fort de de cette suite logiciel est qu’elle dispose d’une grande communauté de développeurs et d’utilisateurs.
Tout d’abord, nous allons utiliser cette suite pour pouvoir gérer notre parc informatique. Il est préférable de pouvoir répertorier toutes les machines présentes sur le réseau afin de mieux comprendre l’architecture. De plus, si un nouvel administrateur réseau vient à remplacer l’ancien, il pourra prendre connaissance plus facilement du parc, des machines et des différentes connexions.
Cela va aussi permettre aux utilisateurs de formuler des tickets signalant une panne. Les problème seront donc classé et traité ce qui permettra un gain de temps considérable (plus de déplacement inutiles) Passons à l’installation : Prérequis:
Il faut une Debian Squeeze installé et configuré (adresse IP fixe, PHP, MySQL et Apache).
Installation de GLPI Installez certains modules PHP nécessaires à GLPI pour fonctionner : php5-gd | mysql-server-5.0 | php5-mysql Créez la base de données et un utilisateur avec les droits pour GLPI après avoir téléchargé et installer la dernière version de GLPI il suffit d’entrer l’adresse du serveur qui héberge glpi avec un navigateur, saisissez l’adresse suivante http://adresse_de_votre_serveur/glpi/ Une configuration rapide sera requise, ensuite entrez le login et le mot de passe par défaut : glpi et glpi. Installation de OcsInventory
Télécharger la dernière versions d’OCS et l’installé dans le dossier www d’Apache. Créez la base de données et un utilisateur avec les droits pour OCS puis lancé
InfoDev
12
OCSInventory via l’adresse suivante http://192.168.0.59/ocsreports Entrez votre login, votre de mot de passe, le nom de la base pour OCS et où se situe le serveur (dans notre cas toujours en localhost) Il faut maintenant mettre en relation OcsInventory avec GLPI. Une fois logué dans l’interface de gestion de GLPI, on va installer import OCS dans la liste des plugins et activer le mode OCSNG Tout est bien configuré pour que GLPI et OCSInventory communiquent entre eux. Il nous faut intégrer des machines clientes en installant l’agent OCS sur chacune d’entre elles puis faire la migration des données les concernant d’OCS vers GLPI. Les ordinateurs recensés par ocs inventory vont être présent dorénavant dans glpi
InfoDev
13
Partie II : Développement
Les schémas de la base de données
Schéma conceptuel :
InfoDev
14
Schéma relationnelle :
InfoDev
15
Arborescence du site
Page de gestion des inscriptions
Affichage du dernier classement clôturé,
possibilité de changer de concours.
Choix du concours Page sélection de l’action
Identification
Juge Responsable de l’organisation
Page de saisie lors du déroulement du
concours.
Page de création des
concours
InfoDev
16
Organisation du répertoire du serveur
Le projet est dans le dossier ProjetJumping, puis il y a les pages du site et un dossier CSS, un JS, un include et un image. Dans le dossier CSS il y a la feuille de style, le JS est composer des scripts javaScript de chaque page et d’un dossier libs qui a la librairie jQuery. Dans le dossier images il y a toutes les images. Include est composé de dossier comportant les dossiers de chaque page avec leurs scripts php et des scripts php concernant toutes les pages. Le dossier mobile contient le site mobile avec la même organisation que le projet principal.
ProjetJumping
CSS JS include images mobile
CSS, JS, include, images,
mobile
InfoDev
17
Liste des scripts
SCRIPT PHP:
-connect.inc: permet la connexion à la base de donnée en PDO
-menuD.inc: gère le menu dynamique
-chercherConcours.inc: renvoi la liste des concours non clôturé
-chercherConcours2.inc: renvoi la liste des concours clôturé
-afficherClassement.inc: permet l'affichage du tableau et de ces valeurs pour
construire le classement après choix d'un concours
-afficherConcours.inc: permet l'affichage du récapitulatif des concours crée
dans la page de création des concours
-afficherModifierConcours.inc:permet de récupérer les valeurs du concours qui
à été sélectionné pour être modifié
-insertionCreationConcours.inc: gère l'insertion dans la base de données des
données saisies dans le formulaire de création de concours
-modifierConcours.inc: gère la modification dans la base de données après
validation des modifications d'un concours
-supprimerConcours.inc: gère la suppression dans la base de données du
concours qui à été sélectionné pour être supprimé
SCRIPT JQUERY:
-jqueryClassement: permet de récupérer et d'afficher le tableau de classement
après choix d'un concours.
-jqueryCreationConcours: gère les différents contrôle de saisie, l'insertion des
concours dans la base de données, l'affichage du tableau récapitulatif des
concours crées, l'effet de changement de couleur après choix d'une ligne, les
effets d'affichage, et l'action des boutons présent sur la page de création des
concours
InfoDev
18
Charte graphique
I – Charte graphique du site :
I. Code couleur
Gris fonce (arrière-plan) : #C0C0C0 ;
Bleu fonce (survol de liens) : #4E5254;
Bleu fonce (texte, bordure) : #4E5254;
Gris clair (arrière-plan fieldset) : #CCC;
Blanc (bordure) : #FFFFFF;
II. Code typographie
La police utilisée est Calibri, sans-serif.
InfoDev
19
III. Gabarit général
InfoDev
20
II – Charte graphique du site pour mobile :
I. Code couleur
Noir (footer, header): #000;
Blanc (arrière-plan) : #FFFFFF;
Gris clair (div avec le numéro) : #CCC ;
II. Code typographie
La police utilisée est Helvetica,Arial,sans-serif.
InfoDev
21
III. Gabarit général
InfoDev
22
Maquettes
Page identification :
InfoDev
23
Page classement :
InfoDev
24
Page de création des concours :
InfoDev
25
Page de gestion des inscriptions:
InfoDev
26
Page de notation des participants :
InfoDev
27
TESTS des fonctionnalités
Page Identification :
Test de Connexion avec différents type d’utilisateur pour voir si les options de
chacun sont bien disponibles.
Page Classement :
La liste déroulante sélectionner concours n'affiche que les concours qui sont
terminé. Le tableau affiche le classement des participants selon les temps
cumulé. Et affiche les participants du concours sélectionné.
Page Création Concours :
Lors de la création d’un concours il faut remplir tous les champs sinon un pop-
up l’avertit. La date Saisie doit être supérieur à la date d’aujourd’hui.
La modification est effective ainsi que la suppression dans la base de données.
Si l’ajout est effectif, le concours s’affiche dans le tableau en dessous reprenant
sa désignation, sa date et son lieu.
Page Inscription Concours :
La liste déroulante sélectionné un concours n'affiche que les concours qui ne
sont pas clôturé et dont la date n'est pas passer. La liste déroulante pour
sélectionner un cavalier n'affiche que les cavaliers ne participant pas encore au
concours. La liste déroulante sélectionner un cheval n'affiche que les chevaux
disponibles ne participant pas au concours. La fonction du bouton validé ne
s'effectue que lorsque les 3 listes déroulantes contiennent une valeur.
InfoDev
28
Page notation concours :
La liste déroulante sélectionner concours n’affiche que les concours non
clôturés. La liste couple/cheval n’affiche que les couples inscrits au concours
sélectionner. Il y a un chronomètre avec un bouton début et un bouton fin. Il y
a un bouton abandon qui met dans la base de données que le couple a
abandonner. Le tableau de faute/obstacle permet d’un click gauche d’ajouter
+1 a ce type de faute/obstacle et d’un click droit de faire -1 a ce type de
faute/obstacle. Le bouton valider permet d’enregistrer les informations dans la
base de donnés.
InfoDev
29
Conclusion
Dans ce projet nous nous sommes repartis les tâches afin de réussir à fournir à
la Fédération Françaises d’Equitation un site fonctionnel d’abord et esthétique.
Il nous était demandé de gérer un site et de développer une application qui
s’adapte au format mobile et tablette pour en faire une présentation. Nous
pensons avoir répondu a ces attends car notre site développe tous les
fonctionnalités demandées et il est adapté pour différent format.
Par contre il y a quelques améliorations que nous pourrions réaliser par la
suite, comme enregistre le détail des fautes dans la base de données même
quand la personne abandonne, ou encore gérer le cas ou le site est ouvert avec
Mozilla Firefox car il y a quelque fonctionnalité ou détail qui ne fonctionne pas.
Nous avons eux beaucoup de mal à mettre en place le logiciel de gestion de
projet. De plus pour la partie notation nous avons eux dut mal à savoir
comment faire l’ajout et la suppression des fautes, nous avons opté pour des
zone de texte cliquable. Concernant les pages comportant un tableau
récapitulatif avec la modification et la suppression de données, la récupération
de donnée pour la modification n’a pas été facile mais au final en récupèrent
les données d’un fichier XML qui avait été générer ce problème a été résolu.