Présentation Florento

05/2014 – Lycée Pablo Picasso Perpignan BTS IRIST – Session 2014 –Barbe Jérémy

2

Table des matières

I – L’entreprise Nova-Flore ...................................................................................................................... 4

II - Objectif du Service R&D ..................................................................................................................... 4

III - Cahier des charges ............................................................................................................................ 5

I – Objectifs du projet .......................................................................................................................... 5

II – Récolte des données sur le terrain ................................................................................................ 5

I – Déroulement actuel des observations: ....................................................................................... 5

II – Les observations suite à notre projet : ...................................................................................... 6

III - Les contraintes .............................................................................................................................. 6

IV - Expression du besoin ........................................................................................................................ 7

I - Le Besoin Actuel .............................................................................................................................. 7

Gérer les Taxons : ............................................................................................................................ 7

Gérer les essais : .............................................................................................................................. 8

Collecter : ......................................................................................................................................... 8

Observer : ........................................................................................................................................ 8

Synchroniser : .................................................................................................................................. 8

Configurer : ...................................................................................................................................... 9

II - Scenario .......................................................................................................................................... 9

V-Diagrammes de Classe ....................................................................................................................... 10

I - Gestion des essais .......................................................................................................................... 10

II - Taxon Faune ................................................................................................................................. 11

III - Taxon Flore .................................................................................................................................. 11

IV - Observation : ............................................................................................................................... 12

VI – Conception préliminaire ................................................................................................................. 13

I – Diagramme de déploiement ......................................................................................................... 13

II - Répartition des Taches ................................................................................................................. 14

VII - Choix Techniques ........................................................................................................................... 15

I - Pourquoi Apache : ......................................................................................................................... 15

II - Pourquoi MySQL : ......................................................................................................................... 15

VIII - Installation .................................................................................................................................... 16

I - Installation du serveur apache : .................................................................................................... 16

II - Installation de la base de données MySQL : ................................................................................. 16

IX - Les langages PHP & MySQL ............................................................................................................. 17

I - Mise en place de la Base données : ............................................................................................... 17

II - Tables & Champs : ........................................................................................................................ 17

III - Interactions avec la Base de données : ....................................................................................... 18


3

IV - Les Formulaires Html : ................................................................................................................. 19

V - La classe PHP : .............................................................................................................................. 19

L’application FlorExpert permet de : ............................................................................................. 19

X - Conception Préliminaire ................................................................................................................... 20

I - Mise en place de la Base de données : .......................................................................................... 20

Taxon Faune & Taxon Flore : ......................................................................................................... 21

Les Tables d’association : ............................................................................................................... 21

La table insectesObserve peut être associée à : ............................................................................ 21

La Table Unité Experimentation peut être associée à : ................................................................ 21

XI - Conception détaillée ....................................................................................................................... 22

I-Les Templates : ................................................................................................................................ 22

Template CSS: ................................................................................................................................ 22

Template Alertify : ......................................................................................................................... 22

Template JSChart : ......................................................................................................................... 22

II - Diagrammes de classes de l’application : ..................................................................................... 23

III - Exemple d’utilisation des classes: ............................................................................................... 26

III - Générateur de select : ................................................................................................................. 28

IV - Application Type : ........................................................................................................................ 29

X - Présentation de l’application ........................................................................................................... 31

I - Page de Login : ............................................................................................................................... 31

II - Page de Service : ........................................................................................................................... 31

XII - Les Problèmes rencontrés .............................................................................................................. 33

I - Fluidité : ......................................................................................................................................... 33

II - Ergonomie : .................................................................................................................................. 33

III - Affichage Graphique : .................................................................................................................. 33

XIII - Bilan ............................................................................................................................................... 34

XIV - Conclusion ..................................................................................................................................... 34


4

I – L’entreprise Nova-Flore

L’entreprise Nova-Flore est spécialisée dans les semences de

fleurs de jardins et de fleurs sauvages, elle se distingue par sa capacité

à élaborer des mélanges innovants, issus de la recherche et du

développement. Nova-Flore met à disposition une offre de graines

pour tous les types d’espaces et tous les types de publics (responsables

de collectivités, architectes-paysagers, exploitants agricoles et

jardiniers amateurs).

Notre projet consiste à assister l’entreprise dans la récolte de données issues des observations, qui se

font actuellement via des feuilles d’essais et de calculs en papier. Ces observations sont faites sur des

mélanges floristiques venant de différentes parcelles d’expérimentation.

II - Objectif du Service R&D

L'objectif du service Recherche & Développement est de

proposer des solutions pour offrir un meilleur habitat ainsi qu’une

ressource de qualité aux pollinisateurs.

Les pollinisateurs sont des insectes qui transportent le pollen d’une

fleur à l’autre. Par exemple les papillons, les abeilles et les bourdons.

Ces pollinisateurs jouent un rôle particulièrement important dans la

pollinisation des cultures, la lutte contre les insectes nuisibles, et le

maintien de l'équilibre écologique.

Créer des solutions pour les pollinisateurs consiste à développer des mélanges floristiques. Ces

mélanges sont constitués de différentes variétés de fleurs. Ils sont destinés à des groupes d’insectes

précis, c’est-à-dire les pollinisateurs. L’objectif étant de proposer des solutions pour offrir un habitat

et une ressource de qualité.

Les ressources de qualités dont il est question sont des fleurs (espèces pures ou mélanges), qui attirent

les pollinisateurs et leurs procurent un pollen d’exception pour améliorer la pollinisation.

Dans l’optique de permettre une meilleure pollinisation afin de préserver les pollinisateurs des dangers

actuels (disparition des abeilles, traitement à base de pesticides, prédateurs asiatiques), le Service R&D

de Nova-Flore fait régulièrement des essais sur différents mélanges floristiques afin de connaitre les

caractéristiques nécessaires pour attirer les pollinisateurs.


5

III - Cahier des charges

I – Objectifs du projet

II – Récolte des données sur le terrain

Les essais sont faits par un observateur expert en entomologie pour récolter des données en

menant des observations sur le terrain. Les observations consistent à dénombrer visuellement les

insectes ou de les capturer au filet.

Les essais sont élaborés par un chercheur au laboratoire ou par l’observateur

lui-même. Un essai consiste à regarder quels insectes sont présents sur quelles

fleurs pendant un temps défini.

I – Déroulement actuel des observations:

Les observations se font à l’aide d’un formulaire papier qui sert de

support à l’essai. L’observateur notera toutes les informations concernant

l’essai. Une fois l’observation terminée et les essais achevés, celui-ci

retourne au laboratoire pour délivrer le formulaire avec les résultats. Ces

données seront intégrées dans le système du laboratoire.

Assister la saisie des essais par tablette

Faciliter le traitement des données.

Améliorer la visualisation des données.


6

II – Les observations suite à notre projet :

Nova-Flore souhaiterait automatiser l’observation et la récupération des données de

l’observation. Notre but est de développer des applications pour assister la saisie des essais,

faciliter le traitement des données. De plus, nous mettons en œuvre une

exploitation graphique des résultats.

Pour la saisie des essais, Nova-Flore souhaite utiliser des tablettes tactiles

pour leur confort. Notre but sera donc de développer une application qui

assistera l’observateur à la saisie des essais.

Une fois l’observation terminée, l’observateur ou le chercheur n’aura pas à saisir manuellement les

résultats de l’observation. Car de façon automatique les données récoltées seront transférées avec

la base de données du laboratoire.

Une application sera développée pour l’exploitation des résultats. Cette application améliorera la

visualisation des données.

III - Les contraintes

Les sites d'observation peuvent être proches du laboratoire (parcelles d'expérimentation) ou

en milieu naturel. La saisie des données doit donc s'effectuer hors connexion, les réseaux Wi-Fi ou 3G

n'étant pas toujours accessible sur les sites d'observation. Les données saisies hors connexion seront

injectées dans la base de données du laboratoire lors du retour de mission d'observation. Un protocole

de synchronisation devra être respecté.


7

IV - Expression du besoin

I - Le Besoin Actuel

Ci-dessous le diagramme de cas d’utilisation du projet :

Le chercheur peut effectuer les mêmes actions que l’observateur.

L’observateur dispose d’une application pour tablette et le chercheur d’une application web.

Voici les descriptions des Cas d’utilisations :

Définition : Un taxon est le recensement évolutif des espèces animales et végétales selon des

critères prédéfinis.

Gérer les Taxons : Gérer les taxons consiste à ajouter, modifier ou supprimer.

Gérer les critères de taxonomie consiste à identifier, nommer et classer les espèces.


8

Définition : une Unité d’expérimentation est un ensemble de plusieurs fleurs d’une même variété.

Gérer les essais : Le chercheur organise les prochaines expérimentations. C’est-à-dire qu’il :

Crée ou modifie des essais.

Associe des taxons d’insectes à observer à chaque essai.

Crée ou modifie des unités d’expérimentations.

Associe à chaque unité des taxons de fleur.

Associe les unités d’expérimentations à l’essai.

Collecter : Pour collecter il est nécessaire d’observer et de synchroniser.

Collecter consiste à :

Pour l’observateur, récupérer les essais définis par le chercheur.

Pour le chercheur, récupérer les essais effectués par l’observateur.

L’observateur peut gérer les essais depuis la tablette.

Observer : Les observations sont saisies sur la tablette par l’intermédiaire de l’application nommée

« florObserver ».

L’observateur devra :

S’identifier sur l’application.

Sélectionner le ou les essais à effectuer.

Effectuer le ou les essais.

L’application affichera une interface conviviale disposant d’un chronomètre et de la liste

des taxons d’insectes à observer.

Synchroniser : La synchronisation consiste à transférer les essais validés depuis la tablette vers la base de

données du laboratoire en assurant la cohérence et la transmissions des informations.

La synchronisation se compose en 3 étapes :

Identification des essais.

Vérification des cohérences des informations.

Transfert des informations.


9

II - Scenario

Voici un exemple de scénario mettant en œuvre les cas d’utilisation mentionné ci-dessus :

Le chercheur créer un essai « α » depuis l’application web.

Il associe à l’essai des taxons d’insectes à observer, par exemple les abeilles et papillons.

Il définit une date de début et de fin ainsi qu’une durée d’observation, par exemple du

10/02/2014 au 22/02/2014, avec une durée d’observation de 5 minutes.

Il créer une ou plusieurs unité(s) d’expérimentation. Parmi eux, une unité d’expérimentation

« β » semée avec des graines de marguerites et de tulipes.

Il associe les unités d’expérimentations dont « β » à l’essai « α ».

Un observateur part pour une observation, il synchronise d’abord la tablette pour récupérer

l’essai « α » et les informations nécessaires à l’observation.

Il se rend sur l’unité d’expérimentation « β ».

Il se connecte sur l’application « floreObserver » puis sélectionne l’essai « α ».

Sur la tablette s’affiche un compteur de 5 minutes et la liste des insectes à dénombrer, c’est-

à-dire dans notre cas les abeilles et papillons. S’affiche aussi la liste des fleurs de l’unité

d’expérimentation « β », c’est-à-dire dans notre cas les marguerites et tulipes.

L’observateur lance le chronomètre, l’observation commence.

A chaque fois qu’il voit un insecte sur une fleur, il complète les champs correspondants sur

l’application. Par exemple 3 abeilles sur les marguerites et 2 papillons sur les tulipes.

A la fin du chronomètre l’observation se termine, l’observateur peut ajouter un commentaire

avant de valider l’observation, les résultats seront stockés sur la base de données locale

avant d’être synchronisés lors du retour au laboratoire.

Configurer : L’administrateur est capable de modifier directement les tables de la Base de données. Il n'est

pas prévu de développer une interface pour l’administrateur.


10

V-Diagrammes de Classe

I - Gestion des essais

Le Chercheur organise l’essai pour une saison entière. Il sélectionne les unités d’expérimentation qui

serviront pour un Essai et à quelles dates.

Il peut créer ou modifier des Essais et des Unités.

Il associe à chaque Essai, les Taxons d'insectes à observer.

Il associe à chaque Unité, les Taxons de fleurs qui seront semés. Il associe à chaque Essai la ou les unités

concernées ainsi que leur dénomination. Cette dénomination est un repère pour l'Observateur.


11

II - Taxon Faune

Le Taxon de la Faune est soumis à un niveau de classification qui permet aux entomologistes de

sélectionner des familles, des ordres, des genres s’ils n’ont pas le nom de l’espèce en tête.

III - Taxon Flore

Les Taxons de Flore sont associés à une ou plusieurs unités d’expérimentation. Ces unités

d’expérimentations sont répartir sur plusieurs plateformes. Le Taxon de la flore est également soumis

à un niveau de classification.


12

IV - Observation :

Une Observation est associée une position GPS pour localiser le lieu de l’observation, les

conditions météo du jour de l’observation. Les insectes Observe sont sélectionné à partir du Taxon

Faune lié à l’essai. L’observateur aura préalablement choisis une unité d’expérimentation sur laquelle

il effectuera l’observation. L’observateur aura également la possibilité d’insérer des notes a

l’observation si besoin.


13

VI – Conception préliminaire

I – Diagramme de déploiement

Le système sera constitué de 3 machines :

Le poste de travail d’un chercheur qui à l’aide d’un navigateur internet pourra accéder a

l’application web « floreExpert ». Cette application lui permettra de gérer les essais, les

unités d’expérimentations et les taxons. Pour cela il se connectera sur l’intranet du

laboratoire.

Un serveur installé sur le réseau intranet du laboratoire. Sur ce serveur sera installé une base

de données « EntomoFlore » qui stockera les taxons, essais et unités d’expérimentation.

L’application web « floreExpert » accèdera à cette base de données. « florSynchro » servira

pour la synchronisation avec la tablette par Wi-Fi.

La tablette tactile tournera sous le système d’exploitation Android. Celle-ci embarquera une

copie partielle de la base de données « EntomoFlore ». Cette copie partielle de la base

(« florData ») contiendra uniquement les informations nécessaires pour les essais à effectuer

(taxons concernés par les unités d’expérimentations, dates d’observation…). L’application

« florObserver » accèdera à la base « florData » pour y stocker les résultats des observations

effectué avec la tablette.


14

II - Répartition des Taches

Etudiant n°1 Partie « Chercheur » : BARBE Jeremy

• Modèle Conceptuel de données

• Schéma relationnel

• Script de gestion des données

• Application Web pour le chercheur : floreExpert

• Sécurité des données et transactions lors de la synchronisation tablette/SGBD

• Exploitation statistique des résultats (synthèse, moyenne)

Etudiant n°2 Partie « Observateur » - DOUINEAU Romain

• Application floreObserver sur Android

• Conception de l'iHM en accord avec le cahier des charges de l'entreprise

• Conception du stockage local de données sur la Tablette

• Synchronisation Tablette/SGBD


15

VII - Choix Techniques

Pour des raisons qui seront détaillées ci-dessous les choix retenus seront les suivants :

Utilisation d’un Serveur Apache

Utilisation d’une base de données MySQL

I - Pourquoi Apache : Le type de serveur choisis sera Apache. Tout d'abord pour une question

de coût, et parce que c'est un logiciel libre. Apache peut fonctionner assez

bien sur des machines aux performances moindres, et aussi sur des

plateformes de logiciel libre tel que Linux tout en assurant une stabilité

du système. D'où un coût de fonctionnement réduit du serveur Apache.

Tout type de script dynamique est exécutable sur ce type de serveurs tels

que Perl, Python, PHP.

Selon une étude de NetCraft, Apache sert plus de 54% des sites web actuellement. La taille de la

communauté disponible en est tout aussi grande. Apache peut s'exporter sur de nombreux OS : Mac,

Windows, Solaris, Linux, Aix.

II - Pourquoi MySQL :

La base de données sera sous MySQL, car elle est distribuée sous

licence GPL, mais aussi parce que c'est une des meilleures bases de

données. MySQL est notamment le meilleur compromis entre facilité

d'installation, performance et administration. Une majeure partie des

logiciels PHP a été développé exclusivement pour MySQL, le nombre d'hébergeur PHP MySQL est en

conséquence.


16

VIII - Installation

I - Installation du serveur apache :

Depuis le menu de lancement des applications, sélectionnez « Système », puis « configuration » et

« configuration de votre ordinateur ».

Pour la version du lycée: Menu de lancement des applications puis outils->outil système -> configurer

votre ordinateur.

Saisir apache dans l'onglet recherche puis lancer l’installation :

apache-mpm-prefork-2.2.4-6mdv2007.1x86_64.

Pour démarrer le serveur en mode graphique, aller dans « système » puis « gérer les services » et

cochez « alsa ».

Pour démarrer le serveur en ligne de commande :

se mettre en Super utilisateur.

Saisir la commande 1# /etc/init.d/httpd start.

II - Installation de la base de données MySQL :

Il faut en premier lieu mettre à jours le paquet avec la commande suivante :

urpmi.update -a

Pour installer le serveur la commande suivante :

urpmi MySQL MySQL-client

Si le réseau n'est pas disponible, il peut être modifié de la façon suivante :

vi /etc/my.cnf

o et mettre entre commentaire la ligne : skip-networking

Démarrer la base de données MySQL :

/etc/init.d/mysqld start

On test si le réseau est maintenant disponible :

netstat -tap | grep mysql

On met en route la base de données :

mysqladmin -u root password yourrootsqlpassword

mysqladmin -h server1.example.com -u root password yourrootsqlpassword


17

IX - Les langages PHP & MySQL

I - Mise en place de la Base données :

Après avoir installé la base de données MySQL, sur le serveur apache il est nécessaire de mener une étude pour élaborer le modèle conceptuel de données. La cohérence de ce modèle conceptuel de données est primordiale, les erreurs liées à une mauvaise conception sont en effet sources de dysfonctionnements.

II - Tables & Champs : Pour Insérer des champs, des enregistrement, ou créer des tables il y a deux moyens, soit on l

fait au travers de l’interface PhP MyAdmin , soit par requete SQL en ligne de commande.

Via Requete SQL en ligne de commande :

CREATE TABLE `Hotel` ( `idHotel` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `Nom` TEXT NOT NULL , `Adresse` TEXT NOT NULL , `Rue` TEXT NOT NULL ) TYPE = innodb; [Type de la base de données] [ Incrémentation [ idHotel est la clef primaire[ Gérée par MySQL]

Via l’interface de PhpMyAdmin :


18

III - Interactions avec la Base de données :

Interagir avec une base de données est important, sans interaction le site n'a aucune profondeur, et

ne procure aucun service utile. Cette interaction est très procédurale :

Il y a deux manières de le faire. La manière classique et la PDO. Ici la méthode utilisée avec MySQL :

Et ici la méthode PDO :

$bdd = mysql_connect("ex:192.168.1.2","User", "Password");

Sélection de la base de données :

$db = mysql_select_db("BdName",$bdd);

On crée une requête:

$query = SELECT * FROM Hotel ;

Récupérer le résultat de la requête qui est actuellement inexploitable, il faut utiliser la méthode mysql_query() pour obtenir une donnée exploitable.

$result = mysql_query($query) ;

On stocke le résultat de la requête dans un tableau. Ici il n’y aura qu’un seul élément l’utilisation d’un tableau n’est donc pas nécessaire, mais lorsque le résultat de la requête retourne plusieurs résultats il est impératif de les stocker dans un tableau.

$donnees = mysql_fetch_array($result) ;

Ensuite il suffit d’utiliser le tableau de cette façon :

Echo $row[0] ;

On se connecte et on sélectionne la base de données :

$bdd = new PDO('ex:127.0.0.1;Nom de la Bdd', 'User', 'Password');

On récupère le résultat de la requête :

$result = $bdd->query('SELECT nom FROM jeux_video LIMIT 0, 10');

Récupérer le résultat de la requête qui est actuellement inexploitable, il faut utiliser la méthode fetch() en PDO pour obtenir une donnée exploitable.

$donnees = $result->fetch() ;

Le résultat de la requête est stocké dans un tableau. Ensuite il suffit d’utiliser le tableau de la même façon que ci-dessus :

Echo $donnees['nom'] ;


19

IV - Les Formulaires Html :

Pour transmettre des informations depuis le site vers la base de données, on a besoin de requêtes mais aussi d'une interface qui nous permettrait de rentrer facilement les données. Pour cela on utilise des formulaires. <form id="formulaire" method="POST" action="Traitement-formulaire.php"> <input type="text" name ="Nom" id="nom" placeholder="Nom" /> <input type="submit" value="Modifier" class="bouton" /> </form>

L'id du formulaire permet d'identifier le formulaire, la méthode POST nous permet de passer les valeurs

au script PHP par le protocole HTML.La balise action représente le fichier cible auquel le formulaire va

envoyer les valeurs de "nom".

V - La classe PHP :

Il est fortement conseillé de faire une classe pour chaque table de la base de données pour faciliter la gestion et l'utilisation de celles-ci même si on ne les utilise pas dans l'application web. C'est pourquoi toutes les méthodes concernant chaque champ de la table seront répertoriées dans la classe PHP spécialement dédiée.

L’application FlorExpert permet de :

Modifier n’importe quel champ de n’importe quelle table.

Créer des Essais.

Ajouter des Taxons Faunes et Flore.

Visualisation graphique des données.

Visualisation textuelle des données.

Lié Taxon Flore déjà existants à une unité d’expérimentation.


20

X - Conception Préliminaire

L’application web du projet florento sera développée selon trois axes :

La convivialité.

L’ergonomie.

La visualisation.

L’application web devra être intuitive et permettre facilement aux chercheurs d’accéder rapidement

aux options primordiales. Les différentes options de « floreExpert » seront donc listées dans un menu

déroulant.

« floreExpert » sera directement reliée à la base de données pour en consulter les informations, les

données pourront être visualisées avec des graphiques générés par un JavaScript, l’application sera

également doté d’une architecture Ajax permettant d’actualiser les graphiques et les données de

l’application en temps et en heures. « floreExpert » sera principalement développée en Html/Php.

I - Mise en place de la Base de données :

Après avoir bien analysé les besoins du cahier des charges, nous ( Moi, Mon partenaire Romain

Douineau et le professeur M.Gil) avons défini ce schéma relationnel:


21

Taxon Faune & Taxon Flore :

Les deux tables sont identifiées par un identifiant unique, et un identifiant du taxon supérieur pour permettre de situer le taxon actuel par rapport à la classification. C’est la récursivité. Exemple :

Un Taxon A d’id 1, et d’idTaxon Supérieur : 0.

Le Taxon A n’est pas inclus dans un Taxon Supérieur.

Un Taxon B d’id 1, et d’idTaxon Supérieur : 1.

Le Taxon B est inclus dans le Taxon A.

Exemple de Taxon :

Ceci est un exemple de Taxon simple, il on rajoute parfois le sous règne la sous-classe et la sous espèce pour être plus précis sur le taxon cible. Note : Papaver rhoeas est le nom scientifique de Coquelicot.

PlantaeRègne

AngioSpermaeClasse

PapaveracaeFamille

Papaver rhoeasEspèce

Les Tables d’association :

Les Tables Essai_Faune, Unite_Flore sont des tables d’associations qui permettent de

faire le lien entre les Tables. Il est impossible de faire une relation de plusieurs à plusieurs

directement, il faut créer une table intermédiaire qui contient la clé primaire des deux tables :

les tables d’association.

La table insectesObserve peut être associée à :

Un Taxon Faune

Un Taxon Flore

La Table Unité Experimentation peut être associée à : Un ou plusieurs Taxon Flore.


22

XI - Conception détaillée

I-Les Templates :

Dans le cadre de ce projet, j’ai utilisé plusieurs « Template » proposées gratuitement sur le net en open source.

Un Template CSS Un Template alertify Un Template JSChart

Template JSChart :

Ce Template m’a servi pour générer les graphiques en JavaScript en fonction du contenu de tables de la base de données. Ce Template requiert un tableau de tableau en paramètre(un tableau a deux dimensions ) un nombre de couleurs en fonction du nombre de tableau que contient le tableau « container ».Il faut également créer le « Pie-Chart » en utilisant les fonctions propres au Template.

Template Alertify :

Ce Template m’a servi pour afficher des fenetres « pop-up » pour avertir l’utilisateur agréables à la vue.Son utilisation est simple, il suffit de faire comme si on créait une fenêtre normale, mais en rajoutant le préfixe alertify : alertify.confirm(« Voulez vous créer cet Essai ?» ), après avoir inclus le fichier alertify.js

Template CSS:

Ce Template a été créé par Hugo Giraudel et publié sur le site Codrops Tympanus, le CSS n’étant pas ma spécialité, et souhaitant proposé un design propre et soigné pour le site j’ai opté pour une template CSS.


23

II - Diagrammes de classes de l’application :

Tous les classe_array, sont des classes permettant d’instancier un objet qui se comporte

comme un tableau, pour pouvoir intégrer les mêmes types d’accès chaque classe doit implémenter

l’interface ArrayAccess.En effet cette interface permet aux objets créés par cette classe de posséder

les mêmes fonctionnalités qu’un tableau, sauf qu’ici c’est un objet.On cumule donc les avantages et

des objets, et des tableaux ,qui, en php sont très puissants.


24

Chaque table de la base donnée correspond à une classe, et donc chaque classe requiert une connexion

à la base de données. Pour éviter d’encombrer le réseau inutilement, ou d’ouvrir/fermer des

connexions à chaque connexion l’utilisation d’un singleton est recommandée. De cette manière une

seule connexion sera créer et réutilisée à chaque requête.


25

Et à chacune de ces classes est agrégée une classe_array, pour créer/insérer des enregistrements dans la base de données. De cette manière le code est clair et reste ouvert à d’éventuels changements sans avoir à recréer les tableaux dans chaque fichier.


26

III - Exemple d’utilisation des classes:

Voici un exemple d’utilisation des classes, Ici l’exemple se fera la avec méthode Create() de la classe Essai qui est la classe principale. Code de la Fonction Create() :

La classe Essai_array permet d’instancier un objet qui a les mêmes propriétés qu’un tableau et

également les mêmes accès grâce à l’implémentation ArrayAccess et à la gestion des offset. L’utilité

de cette classe est de faciliter les correctifs, et d’éclaircir le code.

En supposant que les l’id du formulaire utilisés soit comme ceux-ci :

-input text id= “Observation”.

-input text id = “idUniteExperimentation“.

-input text id= D_Validite”.

-input text id= “F_Validite”.

-input text id= “NomEssai”.

Exemple ci-dessous, avec l’utilisation de la classe Essai_array :

//Connexion à la base de données public function Create(Essai_array $tableau) {

$query = "INSERT INTO Essai

$query = "INSERT INTO Essai VALUES('','".$tableau['_refUniteExperimentation']."', '".$tableau['_NomEssai']."', '".$tableau['_Duree_Observation']."', '".$tableau['_Debut_Date_Validite']."',

'".$tableau['_Fin_Date_Validite']."')"; $result = mysql_query($query) or die(mysql_error()."\n".$query);

if(!$result) {

die('Requête invalide : ' . mysql_error()); } }

);


27

Sans utilisation de la classe Essai_array :

$essai = new Essai();

$essaiarray = array(

"refUniteExperimentation" => ".$_POST['idUniteExperimentation'].",

"Duree_Observation" => ".$_POST['Observation'].",

"Debut_Date_Validite" => ".$_POST['D_Validite'] .",

"Fin_Date_Validite" =>".$_POST['F_Validite'] .",

"NomEssai" => ".$_POST['NomEssai'] .",

);

$essai->Create($essaiarray); Il faut connaitre la fonction Create()

pour pouvoir faire le tableau.

contrairement à la méthode prèc.

$essaiarray = new Essai_array();

$essai = new Essai();

$essaiarray['_refUniteExperimentation'] = $_POST['idUniteExperimentation'] ;

Récupération des données avec la variable super Globale $_POST.

$essaiarray['_Duree_Observation'] = $_POST['Observation'] ;

$essaiarray['_Debut_Date_Validite'] = $_POST['D_Validite'] ;

$essaiarray['_Fin_Date_Validite'] = $_POST['F_Validite'] ;

$essaiarray['_NomEssai']= $_POST['NomEssai'] ;

$essai->Create($essaiarray);


28

III - Générateur de select :

Il est indispensable de veiller à l’ergonomie de l’application. Elle doit être simple à utiliser et n’oblige pas l’utilisateur à perdre du temps à chercher le nom des Essais, des Taxons, ou des unités d’expérimentations.C’est pourquoi tous les enregistrements de la base de données sont disponibles depuis le site via des selects, des inputs radio etc.

Resultat :

Explications :

(1) On nomme le select « idTaxonFlaune » puisqu’il va retourner l’id.

(2) Tant qu’il y a des résultats on créer des options dans le select.

(3) La valeur de l’option créer sera l’id propre du Taxon sélectionné.

(4) On affiche le Niveau et le Nom pour permettre de reconnaitre le Taxon et sa position.

public function generer_selectTaxonFaune(){

$i = 0 ;

$query = "SELECT * FROM TaxonFaune ORDER BY idTaxonFaune ";

$result = mysql_query($query) or die(mysql_error()."\n".$query);

echo "<center><select name=\"idTaxonFaune\" /> (1)

while($row = mysql_fetch_array($result)) (2)

{

echo "<option value=\"".$row[0]."\">"; (3)

echo $row['Niveau']. " - ". $row['Nom']; (4)

echo "</option>";

$i++ ;

}

echo "</select></center>";

}


29

IV - Application Type :

Voici l’exemple type de d’application, on le fera ici avec un exemple simple celui d’une

suppression d’un essai. On commencera par étudier la partie formulaire, la partie PHP, et la partie

Ajax.

A) Formulaire : Pour le formulaire il n’y a rien de plus classique. On utilisera ici la fonction getCheckList() qui renverra l’id d’un essai , avec un submit pour le bouton qui permet d’envoyer le formulaire. Il faut également spécifier le fichier PHP cible, et la méthode utilisée.

B) Le fichier PHP :

On déclare le fichier ‘essai.class.php’ pour pouvoir utiliser la méthode delete(), et on renvoi 1 si la

suppression à réussie ou 0 si il y a eu une erreur ou, si l’idEssai était inexistant .

<form method="post" name="SuppressionEssai" id="SuppressionEssai" action="supprimerEssai.php" > <label>Selectionner l'essai à supprimer</label> <?php require_once('essai.class.php'); $essai = new Essai(); $essai->getCheckList(); ?> <p class="clearfix"> <center> <input type="submit" name="submit" value="Supprimer l'essai"> </center> </p> </form>

<?php require_once('essai.class.php'); if(isset($_POST['idEssai'])) { $essai = new Essai(); $essai->delete($_POST['idEssai']); echo "1"; } else{ echo "0"; } ?>


30

C) Ajax :

PHP est un outil très puissant. Cependant il ne permet pas d’interactivités entre l’utilisateur

et le site web, et oblige l’actualisation de la page pour réinitialiser un formulaire, or avec JQuery et

Ajax il est possible d’optimiser l’ergonomie du site, et également la rapidité ainsi que la fluidité de la

navigation. Ce script est généralement dans un fichier à part, on fait la référence au fichier contenant

le script dans la page web ou le script doit opérer.

$(document).ready(function() { La fonction est prete une fois la page chargée.

$('#SuppressionEssai').on('submit', function() { On selectionne le formulaire avec l’id Suppression Essai. var $this = $(this); $this désigne les valeurs du formulaire séléctionné. alertify.confirm("Voulez vous supprimer cet essai", function (e) { On demande confirmation avant de supprimer l’essai. if (e) { $.ajax({ url: $this.attr('action'),

On écoute le fichier php pointé par le formulaire. type: $this.attr('method'), On utilize la méthode préscrite dans le formulaire. data: $this.serialize(), On sérialise les données. }).done(function(msg) if(msg == 1){ Si le script PHP renvoi 1 alors ce code sera éxecuté. alertify.success("L'Essai à été supprimé"); $ } else if(msg == 0){

Si le script PHP renvoi 0 alors ce code sera éxecuté. alertify.error("Aucun Essai selectionné"); $('#SuppressionEssai').reset();

On réinitialise le formulaire. } }); return false;

On empeche l’envoi du formulaire.

} else{ alertify.error("Suppression Annulée"); } }); return false; On empeche l’envoi du formulaire si l’utilisateur à annuler. }); });


31

X - Présentation de l’application

I - Page de Login :

Voici la page de Login simple, avec une petite option permettant d’afficher le mot de passe si besoin,

un menu déroulant en haut à gauche pour la navigation.

Une fois connecté, l’accès à toutes les options est déverrouillé.

II - Page de Service :


32

Le générateur de select qui propose les différents Taxons disponibles.

Le générateur de select qui propose les différentes Unités disponibles.

Le champ à renseigner pour le nom de l’essai en cours de création.

Champ à renseigner pour la durée d’observation.

La date de début de validité de l’essai.

La date de fin de validité de l’essai.

FlorExpert affiche le nom de l’utilisateur avec lequel il s’est connecté.

Cette page est une page type de l’application, toutes les options disponibles sur l’application Flor

Expert sont faites de la même façon avec le même design, et le même pattern.


33

XII - Les Problèmes rencontrés

I - Fluidité :

Un des premiers problèmes que j’ai rencontré sur la première maquette du site (soit FlorExpert

v1.0) a été la fluidité de la navigation sur l’application. Etre obligé de rechargé la page pour voir à

nouveau les informations actualisé et pouvoir utiliser le service. La fluidité est également impactée par

des fichiers PHP mal optimisés, des pages longues, un CSS lourd, et des connexions a répétitions.

II - Ergonomie :

Le deuxième problème a été la sélection des objets à modifier. Il était clairement hors de question que l’utilisateur doivent lui-même saisir le nom d’un Taxon, d’un insecte ou d’une plante pour pouvoir la sélectionner (en effet le nom pouvant atteindre une complexité phénoménale ex : Osteospermum ). De même pour les dates début et fin de validité, il était hors de question de faire taper la date elle-même à l’utilisateur, car même si il connaissait le type de variable et la forme il arrive toujours de se tromper.

III - Affichage Graphique :

Le troisième problème à été l’affichage graphique des éléments de la base de données (ici on

parle notamment du ratio de pollinisation entre un Insecte et une Plante).Il faut extraire les données

de la base données et afficher un graphique sans devoir rafraichir la page pour pouvoir lire le

graphique.

Les Solutions :

Scripts Ajax pour permettre une actualisation des données rapide.

Singleton de connexion pour optimiser le débit de bande passante.

Un CSS sobre et adapté, (pas de surcharges d’animations).

Création d’un script qui génère des selects en fonction du contenu de la BDD.

Création d’un script utilisant le template JSChart pour afficher le contenu de la table

insectesObserve en fonction de son Unite d’experimentation associée.

Utilisation d’un DateTimePicker pour choisir la date.


34

XIII - Bilan

XIV - Conclusion

Ce projet a été pour moi une expérience enrichissante dans le sens où elle m’a permis de me mettre « dans la peau » d’un employé auquel on aurait confié un projet. Et pour lequel il doit donner de soi même pour mener le projet à bien. J’ai appris qu’un projet n’est en réalité jamais terminé qu’il y a toujours des choses à améliorer. J’ai également compris qu’un projet ne se résume pas à « coder » mais qu’il y a une véritable étape de compréhension du projet et de son but. Comprendre quel est le type d’utilisateur et pour quel type d’utilisation, la méthode de travail utilisée et le domaine dans lequel nous allons proposer cet « asservissement » informatique.

Ayant des capacités modestes dans le domaine du web (PHP,Ajax,Html,JQuery, etc), ce projet m’a permis de passer au-delà de mes difficultés personnelles pour travailler sur ce projet. J’ai pu acquérir des notions importantes dans le domaine du web notamment avec le singleton de connexion, l’Ajax/JQuery.

Fait

Créer des Essais

Ajouter/Modifier des Taxons

Visualisation Graphique des données

Visualisation Textuelle des données

Créer modifier des Unités

Gestion mot de passe/identifiant pour se connecter

Création d'une interface conviviale

A faire

Synchronisation Bdd Interne/Bdd Externe

Optimisation des scripts PHP

Evoluer le Mysql vers MySQLi pour une meilleure sécurité

Afficher si les unités sont associeés à un essai ou des taxons avant la suppréssion

Optimiser l'affichage graphique des données

Documents

Présentation Florento