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.