Université de Montpellier II

Rapport de Projet du TER M1 Informatique GMIN208du Master informatique 1ère année effectué

de février 2013 à mai 2013

SUJET N°34

PÉTITIONS EN LIGNE ++ : SITE WEB GÉNÉRALISANT LES

PÉTITIONS EN LIGNE CLASSIQUES

Realise par : GROUPE OnlineP

ALIJATE Mehdi EL HASSOUNI Nordine

NKAIRA Otmane

Encadre par : Mme. CROITORU Madalina

Mr. TROMBETTONI Gilles Responsable :

Mr. LAFOURCADE Mathieu

1

S’il est vrai qu’un rapport de projet est le fruit d’un grand travail, beaucoup de personnes ont cependant contribué

de près ou de loin à le faire naître.

Nous tenons à remercier plus particulièrement nos tuteurs Madame Croitoru Madalina

ainsi que Monsieur Trombettoni Gilles

pour l’aide qu’ils nous ont apportés durant ces quatre mois. Leurs disponibilités, pédagogie ainsi que les conseils nous ont été précieux dans nos choix de conception et d’élaboration de

cette application.Nous remercions aussi Madame Tuchming Cathy, adjointe

du service SI2, Administrateur web et bases de données au LIRMM, pour sa disponibilité et sa réactivité.

Nous espérons que ce travail ait atteint ses buts et qu’il soit à

la hauteur du niveau souhaité.

2

Table des Matières

1.Introduction ......................................................................................................................................5

1.1 Généralités sur le projet .....................................................................................................5

1.2 Le sujet ...............................................................................................................................5

1.3 Cahier des charges..............................................................................................................6

1.4 Éléments pour le site...........................................................................................................6

2. Organisation du projet .....................................................................................................................8

2.1 Etapes de travail ….............................................................................................................8

2.2 Choix des équipes de développement ................................................................................9

2.3 Choix des outils de développement ...................................................................................9

2.4 Réunions...........................................................................................................................10

2.5 Organisation du groupe …...............................................................................................11

3. Implémentation...............................................................................................................................13

3.1 Base de données ...............................................................................................................13

3.2 Algorithmes de votes …...................................................................................................21

3.3 Modèle MVC : « CodeIgniter » …...................................................................................31

3.3.1 Création du design.............................................................................................31

3.3.2 Mise en page du site...........................................................................................32

3.3.3 Monture du site...................................................................................................36

4. Résultats et conclusion ..................................................................................................................41

4.1 Résultats ...........................................................................................................................41

4.2 Conclusion .......................................................................................................................41

6. Annexes ….....................................................................................................................................43

3

IINTRODUCTIONNTRODUCTION, O, OBJECTIFSBJECTIFS

4

1. Introduction

1.1 Généralités sur le projet :Le projet qui nous avons choisi consiste à developper et mettre en ligne un site Web

permettant de generaliser les petitions en ligne classiques. Ces derniers ont le defaut majeur de demander aux gens consultes (citoyens par exemple) une reponse de type oui/non. S'ils signent la petition, c'est oui à la "contre-proposition" correspondante et non à la proposition/decision qui a motive la petition. Mais s'ils ne signent pas, cela signifie :

a) non à la contre-proposition (et oui à la proposition) ou bien b) qu'ils n'aiment ni la proposition ni la contre-proposition... ou bien c) qu'ils n'ont pas le temps de les connaître ou bien d) qu'ils s'en moquent

Ce site web doit à la fois être operationnel et repondant aux demandes des tuteurs. Une première etape, qui est primordiale, nous amène à modeliser la Base de Donnees qui va implementer le fonctionnement et la gestion des differentes donnees du site web.

Ensuite, après avoir effectue celle-ci, une deuxième etape consista à reflechir, choisir, modeliser et implementer les algorithmes de votes, qui permettront à notre site web d'elire la proposition ou la contre-proposition gagnante, pour chaque petition.

● Objectifs :

● S’integrer et travailler en groupe (communication, organisation, synchronisation) ;● Étudier differents aspects, concertations, choix et conception ;● Un vrai exercice, derivant directement du monde professionnel ;● Repondre aux demandes des « clients », en l'occurrence nos tuteurs, proposer des

solutions et les mettre en œuvre ;● Durée : 17 semaines ;

1.2 Le sujet :Le sujet de depart etait celui-ci :

En s'inspirant du site web petitions24 (www.petitions24.net), les étudiants devront produire un site généralisant le système de pétitions en ligne classique en offrant plusieurs choix. L'auteur de la pétition saisit plusieurs propositions concurrentes : la proposition à l'origine de la pétition et une ou plusieurs contre-propositions. Les votants (électroniques) classent dans une liste ordonnée leurs choix par ordre de priorité décroissante et le serveur dépouille les résultats automatiquement. L'auteur de la pétition a choisi préalablement le système de vote (algorithme) qui permettra de dépouiller les résultats, et les étudiants devront donc implémenter au moins un système de vote "à liste", notamment le système de vote alternatif.

Les étudiants devront développer le site de A à Z et seront évalués sur la qualité opérationnelle du site qu'ils devront mettre en ligne dans le laboratoire LIRMM.

5

Nous nous sommes penches sur ce sujet, nous en avons degage un cahier de charges et après une reunion avec nos tuteurs, nous avons etablis un planning, puis nous avons commence notre travail en nous axant sur un pre-travail de recherches, qui nous a permis de definir les besoins et les contraintes eventuelles, puis une reflexion pour trouver les solutions, les faire valider par nos tuteurs, ensuite attaquer la phase technique du projet, qui est celle de la realisation.

1.3 Cahier des charges :

Comme indique ci-dessus, les premiers elements pre-programmation nous ont permis d’etablir un cahier de charges et un partage equitable de tâches.

Le cahier de charges joint en annexe de ce rapport (cf. chapitre 6) est le premier cahier de charges etabli suivant les elements qu’on avait et les circonstances. Celui-ci a ete respecte dans ses grandes lignes, mais pas dans les details puisqu’au fur et à mesure de l’avancement du travail sur le projet, de nouvelles idees sont apparues,de nouvelles contraintes aussi, mais en repondant bien evidemment aux besoins des tuteurs .

1.4 Éléments pour le site

Le plan et contenu du site finale sont conformes aux besoins du TER ainsi qu'aux choix valides par nos tuteurs. Il a donc ete convenu ainsi quant aux rubriques :

Home Petitions Help Search Contact

Vote Voting Systems

Create Proposal Voting

Examples

Ainsi, tout utilisateur pourra se rendre sur le site, les actions qu'il pourra effectuer :• Aller sur la page de garde et lire une courte description du site,• Les deux actions principales : Vote et Create

◦ Vote : l'utilisateur pourra consulter les petitions en cours, lire les propositions et contres-propositions, et ainsi voter s'il le desire

◦ Create : l'utilisateur pourra aussi creer sa ou ses propres petitions, en renseignant la proposition et les contres-propositions

• Lire l'aide correspondante aux systèmes de votes, au vote propositionnel ainsi que des exemples concrets qui permettront à notre utilisateur de mieux comprendre le fonctionnement de l'algorithme implemente, derrière le calcul des resultats de chaque petition

• Effectuer une recherche via un moteur de recherche, sur les pages indexees du site• Contacter les administrateurs du site, via un formulaire de contact assez basique.

NB : Les utilisateurs devront se connecter avant d'effectuer les deux actions principales du site, à savoir voter ou creer une petition, sinon un formulaire d'inscription leur est propose, ceci est une action preventive contre toute volonte malsaine de fausser les resultats des votes.

6

Submenu

Menu

OORGANISATIONRGANISATION DUDU PROJETPROJET

7

2. Organisation du projet

2.1 Premiers pas

Après la constitution du groupe, et durant les premières reunions, nous avons pu discuter avec nos tuteurs des fonctionnalites indispensables et plusieurs choix furent pris.

Suite à ces premières reunions, un chef de projet fut designe ''ALIJATE Mehdi'' et un premier cahier des charges fut etablit presentant nos objectifs.

Le projet fut ensuite divisee en quatre etapes :1. Conception et implementation de la BDD2. Choix et implementation des algorithmes de votes3. Proposition et choix d'interface graphique4. Implementer/Integrer les 3 etapes precedentes.

Nous avons decide que l'implementation du site sera assuree grâce au langage PHP (Langage incontournable pour le developpement des sites web) et MYSQL côte serveur et HTML, CSS côte client. L'utilisation de jQuery va nous permettre de coder rapidement et simplement des traitements à base de code javascript pour dynamiser et ameliorer l'ergonomie du site.

Nous avons decide que le site devra être compatible avec les navigateurs de recherche les plus utilises notamment : Google chrome, Safari, Opéra, Mozilla firefox, Internet Explorer et devra aussi être simple d'utilisation et facile d'entretien pour les administrateurs.

Le site sera heberger au LIRMM, le chef de projet s'occupera des formalites administratives et recuperation des accès.

Une fois ces points traites, nous avons pu cerner les premières phases de conception, definir nos outils de travail et etablir une organisation du groupe plutôt homogène.

Je rappel que cela fût notre vision au debut du projet, ces choix seront valides plus tard, nous reviendrons plus en details sur nos choix dans le chapitre dedie à cela.

8

2.2 Choix des équipes de développement :Afin de mener notre projet au mieux nous avons decide de constituer, et ce dès le debut,

deux equipes, l’une qui s’occuperait de la partie BDD/Algos et l’autre qui s’occuperait de la partie design et PHP . Cette repartition de travail ainsi faite nous a paru evidente pour une meilleure organisation. Mais, un evenement imprevu est venu perturber notre groupe, c'est un membre initialement present et ayant effectue avec nous la première partie du projet, CHORFI Hamza, nous a quitte subitement sans prevenir. Ceci nous a un peu perturbe d'autant que les tâches furent dejà distribuee, impliquant une re-organisation totale et une motivation hors norme.Voici les equipes tels que prevues avant le depart d'un membre :

-L’équipe BDD/algos :

Cette equipe est composee de Mehdi Alijate et Otmane Nkaira. Son rôle a ete de concevoir l'architecture de la BDD, ainsi que l'implementation des algorithmes de votes. -L’équipe PHP/Design :

L’equipe PHP/Design est composee de Nordine Elhassouni et Chorfi Hamza.Son rôle a ete de concevoir le design du site autant sur le plan des illustrations que sur le plan de l’organisation des cadres du site : header, menu horizontal, partie centrale, menu vertical et footer, ainsi que l'integration des algorithmes de votes dans le site afin de les faire tourner.

La ré-organisation se fît rapidement, sans perte de temps, ainsi, les trois membres restants, sous la bienveillance du chef de projet, travaillèrent ensemble, bien que leur rôle fût bien defini, ils se sont entraides en travaillant quand il etait necessaire sur les parties des autres membres de l’equipe.

2.3 Choix des outils de développement :

L'obtention d'une communication efficace pendant un projet passe primordialement par le choix des outils de communication et des supports adaptes au projet.

Ce choix se revèle indispensable pour le bon deroulement d'un projet pour que chacun des acteurs qui le composent puissent communiquer et être en totale coordination avec le reste des membres du groupe.Pour ce faire, nous avons decide de :

➔ Utiliser des outils de teleconference ou ceux de video-conference, comme SKYPE, pour communiquer quand on etait dans l'incapacite de se reunir.

➔ Choisir comme outils de developpement : Eclipse, et ce pour sa facilite d'utilisation, son SVN incorpore et son environnement de developpement qui vise notamment à garantir une totale genericite ce qui lui permet de supporter differents langages de programmation tel que PHP, HTML et CSS.

➔ Mettre en place un SVN « google code » pour faciliter le transferts des fichiers entre les differents membres du groupe et pour permettre à toute personne qui souhaite apporter une modification au travail d' avoir à chaque fois la dernière mise à jour pour eviter d'ecraser le travail des autres membres du groupe.

9

➔ On a aussi utilise FIREBUG, un des logicielles incontournables dans le developpement d'un site web et qui se trouve être aussi un excellent outil d'aide à l'integration. ➔ Enfin, pour mettre en ligne le site, il a fallut utiliser fileZilla, ainsi qu'un VPN « FortiClient » afin d’atteindre le repertoire qui nous a ete dedie sur le serveur ftp du LIRMM (users.lirmm.fr), la configuration de celui-ci : Linux Ubuntu avec Apache 2.2, Mysql 5.1 et PHP 5.3.

2.4 Réunions :

– Réunions tuteurées :

On s’est reuni de manière regulière, sur un planning predefinis à l'avance, et même hors ce dernier en fixant une entente sur un creneaux, afin d’assurer un bon rendu de notre travail mais aussi pour être sûr qu’on remplissait nos objectifs. Les reunions se deroulait dans la salle de Reunion E3.24 du LIRMM, reservee par nos tuteurs. C'etais d'autant plus important que le site allait être operationnel à la suite du projet. Mais aussi, cela a permis d'assurer un suivi objectif et efficace grâce aux remarques pertinentes de nos tuteurs.

Les reunions nous permettaient entre autres de faire le point sur le travail dejà fini, le faire valider ou savoir ce qu’il fallait completer ou modifier dans le cas echeant, puis de faire des priorites sur le travail à venir suivant la taille de celui-ci.

De plus, certaines reunions ont permis des reflexions plus profonde sur le sujet, puisqu'à chaque fois avec nos tuteurs, on trouvait de nouvelles idees, qu’il fallait mettre en place.

– Réunions de groupe :

Le groupe aussi s’est reuni de manière regulière, afin de mettre au point certains points techniques, mais aussi pour travailler sur les parties qui demandent un travail collectif (partie plus difficile que d’autres, phase de tests ...), en usant des moyens mis en place pour ce projet, tel que les salles de reunions dedies au bâtiment 16 de l’universite, ou en utilisant les salles de reunions de la bibliothèque. Ce travail collectif a beaucoup servi, puisque cela fait croître l’esprit d’equipe au sein du groupe, et aussi assure un investissement marque par la presence physique et la collaboration, ainsi que le travail collectif du groupe.

Sans oublier bien sûr l’utilisation d’outils de travail collaboratifs sur internet tel que SVN, messageries.

10

2.5 Organisation du groupe :

Comme cite precedemment, Mehdi a ete nomme chef de projet et le travail a ete partage entre les membres de l'equipe.

Bien que le rôle de chacun ait ete clairement defini, chacun a apporte son savoir-faire et l’entraide etait au rendez-vous entre les membres, tout cela fût le fruit d’une bonne communication maîtrisee, via des moyens basiques tels que la messagerie, reunions regulières, etc.

Ainsi Otmane ayant de bonnes bases en PHP a travaille avec Mehdi afin de rendre les algorithmes de votes plus optimaux.

Nordine a travaille avec Otmane pour la creation des differentes composantes essentiels pour une bonne mise en page des liste de petitions sur le site.

...etc

Ce ne sont que des exemples des differentes et nombreuses collaborations qui ont eu lieu entre les membres des equipes, chacun apportant sa pierre à l’edifice..

Enfin, le choix des outils de travail et la strategie mise en place pour l’implementation du site, a ete discutee et validee par tous les membres du groupe, cela a permis à chacun d’exprimer ses propres preferences et sa methode de travail, ce qui a permis d’adopter une strategie commune qui plaide les manières des uns et des autres.

11

IIMPLÉMENTATIONMPLÉMENTATION DUDU SITESITE

12

3. ImplémentationCe chapitre essentiel de notre projet est l’un des plus importants, puisqu’il trace l'historique

des differentes etapes par lequel notre projet est passe.Il a donc ete convenu de decouper le projet en quatre etapes, citees un peu plus loin

auparavant, et les voici en details :

3.1 Base de donnée :

3.1.1 Analyse et modélisation :Cette première etape, qui est primordiale, nous amène à modeliser la Base de Donnees qui va implementer le fonctionnement et la gestion des differentes donnees du site web :

1. http://www.petitiononline.com/

2. http://www.change.org/petition/

3. http://www.ipetitions.com/

4. http://www.petitionduweb.com/

5. http://www.petitions24.net/

6. http://www.mesopinions.com/

7. http://www.avaaz.org/fr/petition/

En suivant ce cap, nous avons parcouru plusieurs site web existant dejà de petitions enligne, afin de constituer notre dictionnaire de donnees (une sorte d'inventaire), ensuite nous avons modelise nos differents cas d'utilisations, pour enfin, avec l'aide des deux resultats trouves, modeliser nos tables sous forme de diagramme de classes.

3.1.1.1 Dictionnaire de données:

Libellé de la propriété Nom du champ Type

N° PétitionTitre petitionContenu petitionDate petitionDate finValidite petitionFermeture petitionImage petition

petition_idpetition_titlepetition_contentpetition_datepetition_end-dateisValideisClosepetition_img

IntVarchar(150)TextDateDateBooleanBooleanByte

N° UtilisateurType utilisateurNom utilisateurPrenom utilisateurEmail utilisateurVille utilisateurPays utilisateurMot de passe

usr_idusr_typeusr_lnameusr_fnameusr_emailusr_cityusr_countryusr_pass

IntVarchar(50)Varchar(50)Varchar(50)Varchar(50)Varchar(50)Varchar(50)Varchar(50)

N° Commentaire comment_id Int

13

Titre CommentaireContenu CommentaireDate Commentaire

comment_titlecomment_contentcomment_date

Varchar(150)TextDate

N° SignatureOrdreDate signatureVisibilite signature

signature_idsignature_ordersignature_datesignature_visibility

IntIntDateVarchar(50)

N° CatégorieNom categorie

cat_idcat_name

IntVarchar(50)

N° Mot cléContenu

keyword_idkeyword_content

IntText

N° PropositionTitre propositionContenu propositionType proposition

proposal_idproposal_titleproposal_contentproposal_type

IntVarchar(50)TextInt

N° SignalementContenu signalement

report_idreport_content

IntText

Ce dictionnaire de données présente toutes les notions et donc les attributs qui nous ont paru essentiels.

Les attributs en gras correspondent aux identifiants de chaque table, qui permettra un accès plus facile aux attributs.

3.1.1.2 Diagramme des cas d'utilisation :

Durant cette phase d'analyse, trois sortes d'acteurs se sont révélés pour interroger notre future base de données. Il s'agit d'un utilisateur lambda non enregistré, un utilisateur enregistré, et un super-utilisateur.

• L'utilisateur lambda , peut effectuer une recherche, signer et/ou commenter une pétition, il peut aussi créer un compte ;

• Pour signer ou commenter une pétition, il doit renseigner ses coordonnées.

• L'utilisateur enregistré , peut effectuer les mêmes actions qu'un utilisateur lambda (d'où l'héritage du comportement de l'actor user), en plus des ces derniers, il peut gérer une pétition, il doit s'identifier pour cela. Une fois authentifié, il peut donc créer une pétition, et peut la modifier ou la supprimer(avec des conditions, par exemple si le nbrSignatures==0).

• Le super-utilisateur , peut effectuer les mêmes actions qu'un utilisateur lambda (d'où l'héritage du comportement de l'actor user), en plus des ces derniers, s'il est authentifié comme administrateur, il peut gérer les comptes utilisateurs, intervenir au niveau des commentaires et aussi des pétitions elles-mêmes (Modérateur).

14

Figure 1 : Diagramme des cas d'utilisations

3.1.1.3 Diagramme de classes UML :

En partant du dictionnaire de données qu'on a définit au dessus, nous avons établis les attributs des différentes classes, ainsi que les relations entre elles.

Nous nous sommes posé la question sur les niveaux des « Users », car en modélisant notre diagramme des classes, on s'est rendu compte qu'on a le choix entre deux types d'utilisations :

L'utilisateur doit obligatoirement avoir un compte, donc il doit s'inscrire avant de signer / créer / modifier / supprimer pétition, de même pour pouvoir commenter.

15

Figure 2 : Diagramme de classes

On définit une pétition avec petition_id, son titre, son contenu, sa date de soumission, un booléen par défaut sur la valeur « Vrai » lors de sa soumission, pour dire qu'elle est valide, l'administrateur peut l'enlever à tous les moments si elle n'est pas valide en changeant sa valeur à « Faux », ainsi qu'une image si l'utilisateur veut en mettre une. Cette pétition a 0 ou plusieurs signatures, qui sont définies par une date et une visibilité. La pétition a aussi une catégorie (politique, écologie, sport..etc) , et peut avoir des commentaires. L'utilisateur peut signer une pétition et/ou la commenter, il peut bien sûr en créer une ou plusieurs.

Revenons aux cas des utilisateurs, il y a deux sortes d'utilisateurs, qui ont les mêmes attributs, ainsi, un Client qui est un utilisateur lambda enregistré sur le site, est reconnu par son type dans la table « users » qui est différent de celui de l'administrateur . Donc, la table « Users » représente les deux entités clients et administrateurs, qui seront différenciés par le champ ''Usr_type '' , et ils sont eux aussi identifiés par un id. Ces informations sont bien évidement supprimés dès que la pétition correspondante arrive à échéance via une simple mise à jour de la table.

Nous avons eux besoin de certaines vues aussi pour le bon fonctionnement du site, notamment pour le vote propositionnel.

16

3.1.1.4 Schéma relationnel

Le schéma relationnel final correspondant à notre diagramme de classes correspondant à notre dernière version (cf. figure 4) qui sera implémenté (3eme chapitre de ce rapport) est le suivant :

• Petition (petition_id, #usr_id, petition_title, petition_content, petition_date,petition_end_date, isClose, isValide,votingType, petition_img)

• User(usr_id, usr_lname, usr_fname, usr_email,usr_password)

• Regisgtred_user(#r_usr_id, r_usr_type, r_usr_city, r_usr_country, r_usr_pass)

• Category(cat_id, cat_name)

• Comment (comment_id, #petition_id, #usr_id,comment_date, comment_title, comment_content)

• Vote(vote_id,#proposal_id, #vote_id,vote_date, vote_order , isPublished)

• Proposal(proposal_id,#petition_id,proposal_type,proposal_title,proposal_content)

• KeyWords(key_id, #petition_id,key_word)

• Report(report_id,#usr_id,#petition_id, report_content)

• hasCategory(#petition_id , #cat_id )

• hasKeyword(#keyword_id , #petition_id)

Le script de création des vues :

• create view prop_petition_view

as SELECT petition.petition_id, petition.votingType, proposal.proposal_title, petition.petition_end_date, proposal.proposal_id, proposal.proposal_content

FROM petition, proposal

WHERE petition.petition_id = proposal.petition_id

AND petition.isValide =1 ;

• create view voting_view

as select petition.petition_id,petition.petition_title,petition.petition_end_date,petition.votingType,proposal.proposal_title,user.usr_id,

17

proposal.proposal_id,vote.vote_order from vote, petition, proposal,userwhere petition.petition_id = proposal.petition_id and proposal.proposal_id = vote.proposal_idand user.usr_id = vote.usr_idand petition.isValide = 1;

3.1.2 Organisation :

3.1.2.1 Formes Normales

✔ Première forme normale : 1FN Notre schema relationnel respecte la première forme normale, nos attributs contiennent des valeurs scalaire non repetitives, et constants dans le temps (par exemple comment_date, signature_date ou petition_date)Exemple : Dans l'exemple qui suit, les valeurs de Petition_title sont multivaluees et ne sont pas atomiques :

Usr_ld Petition_id

ID001 P001,P002,P003Solution : Pour que cette relation soit en 1FN, il faut decomposer les attributs du champ Petition_title :

Usr_ld Petition_id

ID001 P001

ID001 P002

ID001 P003

✔ Deuxième forme normale : 2FN Notre schema relationnel respecte la deuxième forme normale, il doit respecter d'abord la 1FN(verifie ci-dessus), et chaque attribut non cle ne depend pas que de la cle primaire.

Exemple :

Usr_id Petition_id Petition_title

ID001 P001 Title1

ID002 P001 Title1

ID001 P002 Title3Solution : On voit dans l'exemple ci-dessus que le champ Petition_title ne depend que d'une partie de la cle, à savoir « Petition_id », ce qui implique une eventuelle redondance , pour y remedier, il faut scinder la table en deux :

Usr_id Petition_id

ID001 P001

ID001 P002

18

ID002 P001

Petition_id Petition_title

P001 Title1

P002 Title3

Ainsi les redondances sont eliminees.

3.1.2.2 Solution(s) pour la prochaine étapeNous avions discute des eventuelles solutions pour l'implementation de cette base de donnee,nous avons decide d'utiliser l'indexation des tables. En effet, cela va permettre au SGBD d'acceder plus rapidement aux informations, selon la valeur de un ou plusieurs champs, et donc, cela accelère les operations de recherche, de tri, de jointure ou d'agregation effectuees. Cependant, cette etape d'optimisation sera effectuee lors de la dernière etape (Developpement), puisqu'au fur et à mesure de l'integration de notre BDD on decidera des requêtes à simplifier en indexant les donnees que l'on veut.Cette technique ne nous a pas ete enseignee, nous sommes entrain d'y reflechir et de nous renseigner, et cela rentre parfaitement dans nos objectifs vis à vis de ce TER, c'est à dire apprendre de nouvelles techniques.

3.1.3 Résultat :Après cette phase d'analyse, et après avoir valide et rectifie nos choix avec nos tuteurs, nous

nous sommes mis à implementer cette base de donnees. Nous avons aussi implementer quelques vues qui nous permettrai de raccourcir nos futures requêtes. Nous avons fais quelques requêtes en SQL pour illustrer celles qui sont le plus utilisees, afin de montrer la taille des jointures :

• Table Pétitions : - Les pétitions d'une période donnée :

SELECT Petition_title, Petition_content FROM Petition WHERE Petition_date BETWEEN 'date1' AND 'date2' ;

-Les pétitions par catégories :

SELECT Petition_title, Petition_contentFROM Petition WHERE cat_id IN (SELECT cat_id FROM category WHERE cat_name = '….' ) ;

-Nombre de pétitions signées(au moins un utilisateur)

SELECT count(*) FROM Petition WHERE petition_id IN (SELECT petition_id FROM Signature) ;

• Table Signatures : -Nombre de signatures pour une pétition donnée :

19

SELECT count(*) FROM Signature WHERE petition_id IN (SELECT petition_id FROM Petition

WHERE petition_title='...') ;• Table Commentaires :

-Tous les commentaires d'une pétition :

SELECT comment_content FROM commentWHERE petition_id IN (SELECT petition_id FROM Petition

WHERE petition_title='...') ;

-Nombre de commentaires d'une pétition donnée :

SELECT count(*) FROM comment WHERE petition_id IN (SELECT petition_id FROM Petiton WHERE petition_title='...') ;

-Tous les commentaires de toutes les pétitions :

SELECT comment_contentFROM comment WHERE petition_id IN(SELECT petition_id FROM signature) ;

• Tables Users : -Qui sont les utilisateurs qui ont signé une pétition donnée ?

SELECT usr_lname, usr_fname,usr_mailFROM Users WHERE usr_id in(SELECT usr_id FROM signature

WHERE petition_id IN(SELECT petition_id FROM petition WHERE petition_name='...') ) ;

-Qui sont les utilisateurs qui ont commenté une pétition signée ?

SELECT usr_lname,usr_fname,usr_mailFROM UsersWHERE usr_id IN(SELECT usr_id FROM comment

WHERE petition_id IN(SELECT petition_id FROM petitionWHERE petition_name='...')) ;

20

3.2 Algorithmes de votes :

3.2.1 Analyse et modélisation :

Après avoir effectue la première etape, qui a consiste à modeliser la Base de Donnees qui implemente le fonctionnement et la gestion des differentes donnees du site web, cette deuxième etape consiste à reflechir, choisir, modeliser et implementer l'algorithme de vote, qui permettra à notre futur site web d'elire la proposition ou la contre-proposition gagnante, pour chaque petition.

3.2.1.1 Discussions à propos des algorithmes de votes

Après une première réunion où on a fait le point sur l'avancement du travail, on a effectué des recherches sur les différents algorithmes de votes par listes, ou votes pondérés.

Il s'en est sorti 4 algorithmes qui nous ont paru pertinents, et, le chef de projet a distribué aléatoirement le travail à effectuer sur ces quatre algorithmes, ce travail qui est un travail de documentation et recherche allait donc se distribuer comme suit :-Chacun se verra attribuer un système de vote, -Chacun, travaillera sur le système qui lui sera attribue, il devra definir : 1)Une definition,2)Le principe, 3)Des exemples de l'utilisation de ce système, avec avantages et inconvenients4)Le pseudo-code en français ou en anglais de l'algorithme de ce système.

Attribution des systèmes de votes (aleatoire) : - NORDINE : VOTE PREFERENTIEL (appele aussi vote alternatif, vote australien ou instant runoff)- HAMZA : VOTE METHODE BORDA- OTMANE : LE VOTE PAR APPROBATION- MEHDI : VOTE PAR VALEUR (ou rangevoting)

Chacun des quatre membres ayant effectue son travail, une reunion s'en suivi pour faire le bilan, puis une reunion avec les tuteurs où il y'a eu la presentation des algorithmes.

3.2.1.2 Choix des algorithmesA la suite de la réunion organisé au lirmm avec nos tuteurs, deux algorithmes nous ont été

attribués, il s'agit de :

• Algorithme de vote préférentiel opérationnel

• Algorithme de vote par valeurs

Nous nous sommes penchés donc sur la structure et le plan de travail afin de les codé. Cependant, nous avons eu pas mal de contraintes, la plus importante, c'est l'abondant de l'un de nos membres (Hamza), plus de détails plus bas (3.2.2.1 Organisation : contraintes)

21

3.2.1.3 Modélisations• Algorithme de vote préférentiel :

Le vote preferentiel, appele aussi « vote alternatif » ou « vote australien », est un système de vote par classement choisis par chaque votant, afin bien evidemment d’elire un gagnant .

Le principe de cet algorithme est :

– Chaque votant classe les propositions(et contre-propositions) par ordre de preference

– Le gagnant est le candidat qui a reussi à obtenir 50% des voix

– La candidat avec le moins de voix est elimine, et ses voix sont reaffectes en fonction des preferences de l'electeur, et cela se repete jusqu'à ce qu'il y ai un elu.

Ce principe est defini dans la figure ci-dessous :

Figure 3 : Méthode « Australienne » pour trouver un gagnant

22

Compter les premierschoix des votants

Redistribuer lesvotes de la

proposition elimineeau 2eme choix des

votants

Eliminer la proposition

la moins place

On a un gagnant

Est- ce qu'une proposition est majoritaire ? (i.e >=50%)

Non

Oui

L'inventaire ou les entrees pour cet algorithme :

• Une liste de propositions, identifiees par leurs id

• Une liste de vote, ordonnee

En effet, chaque vote est est une liste de propositions classes par ordre de preferences, et de là on fait tourner l'algorithme afin de calculer quelle proposition est gagnante.

A noter que pour cet algorithme, on a definis trois taches essentielles :

1. Il faut additionner les votes pour chaque proposition

2. On doit verifier si une des proposition à au moins 50% des voix

3. A chaque etape, verifier la proposition qui a le moins de vote

Illustrons cela par un exemple :

Proposition 1 (42%) Proposition 2 (26%) Proposition 3 (15%) Proposition 4 (17%)

1. P1 1. P2 1. P3 1. P4

2. P2 2. P3 2. P4 2. P3

3. P3 3. P4 3. P2 3. P2

4. P4 4. P1 4. P1 4. P1

Bulletin 1 Bulletin 2 Bulletin 3 Bulletin 4

Ainsi, la proposition 1 (P1) regroupe 42% des votants, P2 regroupe 26%...etc.

Et il en ressort 4 types de bulletins de votes (Bulletin 1...etc)

Aucune proposition ne recueille la majorite des voix. La proposition 3, qui ne recueille que 15 % des voix, est eliminee au premier tour, et n'est alors plus decomptee dans le depouillement des votes pour les prochains tours, par contre le second choix des electeurs ayant vote pour elle est pris en compte, ici la proposition 4 est le second choix, et donc se voit incremente des 15 points de la P3.À l'issue de premier transfert de voix, la P2 est alors minoritaire. Elle est donc eliminee.De la même manière, on transfert les voix du deuxième choix des electeurs ayant places P2 au premier choix, à leurs deuxième choix. Dans notre exemple c'est leur troisième choix qui recupère les voix puisque leurs deuxième choix est dejà elimine. Ainsi, la P4 se voit incremente de 26 points.Maintenant seules les P1 et P4 restent pour le tour suivant. L'operation de transfert de voix effectue juste avant ce tour a permis à P4 d'avoir 58 points (sur 100), ce qui fait plus que 50% des voix, donc P4 est la proposition gagnante.Cet exemple est illustre dans le tableur ci dessous :

Propositionpremier

toursecond

tourtroisième

tourquatrième

tour

P1 42 42 42 42 0

P2 26 26 26 0 0

P3 15 15 0 0 0

P4 17 17 32 32 58 58

23

Principe général d'implémentation de l'algorithme de vote Préférentiel :

Toutes les propositions sont repertories dans une liste, les butins de vote sont recensees et stockees dans une matrice. La listes de vote contiennent l’ordre que l’utilisateur a attribue à chaque proposition dont l’indice correspond à celui de la liste des propositions, chaque case contient une valeur comprise entre 0 et le nombre de propositions où 0 designe la proposition que l’utilisateur a choisi de ne pas voter.

L’algorithme compte les propositions qui ont ete vote en premier ordre et determine le meilleur ordre attribue à chaque proposition. Les propositions ayant eu le moins ou jamais de vote avec l’ordre 1 sont considerees comme perdantes et se voient s’eliminer et redistribuer leur meilleur ordre aux propositions qui etaient à l’ordre directement inferieur des partisans des propositions eliminees. Par exemple si le meilleur ordre des propositions eliminees est 1, l’ordre 1 sera redistribue aux propositions qui etaient les seconds choix des partisans des propositions eliminees, ainsi si le meilleur ordre des propositions eliminees est 2, l’ordre 2 sera redistribue aux propositions qui etaient les troisièmes choix des votants ayant choisi en second positions des propositions eliminees et ainsi de suite. Ce processus continu jusqu’à ce qu’il y ait un gagnant ou des gagnants avec la majorite absolue ou que toutes les propositions perdantes sont eliminees.

• Vote par valeurs (ou range Voting)

Le vote par valeurs est un système de vote qui permet de donner une note à chaque proposition. C'est donc un système de vote plus expressif, puisque chaque votant peut exprimer son soutient ferme a sa proposition preferee et en même temps son opposition à une autre proposition, pour la même petition. De plus, il peut s'exprimer neutre, ou modere s'il est plus ou moins d'accord avec tel ou tel proposition.

Un système de vote par valeurs se definit d'abord par une echelle choisie au prealable par l'auteur de la petition, indentant de valeurs proposee aux votants pour chaque option de vote.

•L'echelle peut être definie « numeriquement » sur une plage de valeur allant par exemple de -5 à +5 ou de 0 à 100.•L'echelle peut aussi être definie « symboliquement » ou « semantiquement » (par exemple : Très hostile, hostile, neutre, favorable, très favorable)

A la fin des votes, la proposition ayant le plus de votes est celle qui est gagnante. Ce resultat se calcule par une simple somme des votes pour chaque propositions, et le maximum entre ces sommes est celui qui designe le gagnant.

Ce principe est defini dans la figure ci-dessous :

Figure 4 : Méthode de calcul du « RangeVoting » pour trouver un gagnant

24

Compte le nbr devotes par

propostition

Multiplie chaque nbr de votes pour chaque proposition par l’echelle de valeur correspondante et fais leurs sommes

Stocke les totaux relatifs à chaqueproposition et prend le max

d'entres eux

MAX = gagnant

Prenons l'exemple ci-dessus :

Très hostile (-2) Hostile (-1) Neutre (0) Favorable (+1) Très favorable (+2) Total

P1 30 votes 5 5 5 55 50

P2 10 votes 15 25 30 20 35

P3 5 votes 5 5 40 45 115

P4 15 votes 30 10 25 20 5

Le total est calcule comme suit :

– On a 100 votants qui ont attribue leur vote en choisissant pour chaque proposition s'ils sont hostile, favorable..etc.

– Pour la P1 par exemple, on a 30 votes Très hostiles, 5 hostiles, 5 neutres, 5 favorables et 55 Très favorables

– Le total pour P1 est calcule comme suit :

(30*-2)+(5*-1)+(5*0)+(5*1)+(55*2) = 50

– De même pour la P2 , P3 et P4, en fait, même si l'echelle est semantique, on doit attribuer des notes aux valeurs semantiques, afin de faire le calcul.

– Ici, dans notre exemple, c'est la P3 qui gagne, car c'est le max des totaux .

25

3.2.1.4 Pseudo-codesLes algorithmes sous formes de pseudo-code correspondants à notre modélisation des deux

algorithmes ci-dessus , qui seront implémentés sont les suivants :

• Algorithme de vote préférentiel

proposals : String[n]; // n : le nombre de propositions

FirstChoicesCounter : Integer[n]

matriceVoteXProposals :String[n]

Function : countResult(matriceVoteXProposals, res)

C’est une fonction qui prend en paramètre la matrice des votes et execute le processus de comptage et la redistribution des votes sur la base des differents indices de chaque proposition. En effet, la fonction parcoure la matrice, elle calcule dans un premier temps le nombre des propositions en premier ordre, puis le meilleur ordre de chaque proposition, ensuite les propositions perdantes en faisant appelle à la fonction «minIndex». Le processus de redistribution des votes est lance : à chaque tour les propositions perdantes sont recalculees puis eliminees, les votes sont redistribues et les meilleurs ordres de chaque proposition sont egalement recalcules. La majorite absolue des gagnants est verifie en calculant le nombre des ordres 1 grâce à la fonction « maxIndex ». La fonction s’execute recursivement jusqu’à satisfaction de la condition de la majorite absolu ou jusqu'à ce que toutes les propositions perdantes sont eliminees.

orderScore = array(); // compteur des différents ordres de choix des propositions, chaque indice correspond ‡ une proposition.

bestOrder = array(); // tableau des meilleurs ordres de chaque proposition.

LoserIndex = array(); // tableau des indices des propositions perdante.

potentialWinnerIndex = array(); // tableau des indices des propositions gagnantes potentielles.

static eliminatedLoser = array(); // tableau des indices des propositions perdantes ÈliminÈes.

// initialisation du tableau des scores et celui des ordres max

foreach (matriceVoteXProposals[0] as vote0)

orderScore[] = 0;

bestOrder[] = vote0;

EndForEach

/*

Comptage des votes des propositions choisi en premier ordre

et calcule du meilleur ordre de chaque proposition.

*/

for(i=0; i<count(orderScore); i++)

for(j=0; j<count(matriceVoteXProposals); j++)

if(matriceVoteXProposals[j][i] == 1)

orderScore[i]++;

bestOrder[i] = 1;

elseif((bestOrder[i] !=1 and matriceVoteXProposals[j][i] < bestOrder[i])

or (bestOrder[i] == 0 and matriceVoteXProposals[j][i] > bestOrder[i]))

26

bestOrder[i] = matriceVoteXProposals[j][i];

EndIf

EndFor

EndFor

//Récupèrer que les indices des propositions perdantes qui ne sont pas Eliminés

LoserIndex = minIndex(orderScore, eliminatedLoser);

if(count(LoserIndex) !=0)

foreach(LoserIndex as loser)

if(bestOrder[loser] !=0 )// une proposiion qui n'a jamais ÈtÈ votÈ est ÈliminÈe et n'engendre pas la distribution des votes.

for(i=0;i<count(matriceVoteXProposals); i++)

if(matriceVoteXProposals[i][loser]== bestOrder[loser])

for(j=0; j<count(orderScore); j++)

if(matriceVoteXProposals[i][j]== bestOrder[loser] + 1)

matriceVoteXProposals[i][j] = bestOrder[loser];

EndIf

EndFor

EndIf

EndFor

EndIf

eliminatedLoser [] = loser;

EndForEach

EndIf

potentialWinnerIndex = maxIndex(orderScore);

Display 'Order Score :' print(orderScore);

/*Appel récursive jusqu'à la satisfaction de la condition de la majorité absolue des gagnants ou Élimination de toutes des proposition perdantes.*/

if (orderScore[potentialWinnerIndex[0]]<0.5*count(matriceVoteXProposals) and count(LoserIndex) !=0)

countResult(matriceVoteXProposals, res);

else

Display 'the winner score is : '. orderScore[potentialWinnerIndex[0]].'</br> Total :';

print_r(orderScore);

res = potentialWinnerIndex;

EndIf

EndFunction

27

Function : minIndex(array, eliminatedIndex){

C’est une fonction qui prend en paramètre un tableau en l’occurrence celui des propositions un deuxième tableau qui contient les indices des propositions eliminees. Elle calcule le nombre des votes avec l’ordre 1 des propositions et retourne un tableau avec les indices des propositions ayant le minimum donc les perdantes.

array_delta = array_diff_key(array, eliminatedIndex);

IndexMin = array();

if(count(array_delta)!=0)

min=min(array_delta);

foreach(array_delta as key => value)

if(value == min)

IndexMin[] = key;

EndIf

EndForEach

EndIf

Display 'min : ' print_r(IndexMin);

return IndexMin;

End Function

Function : maxIndex(array)

C’est une fonction qui prend en paramètre un tableau et retourne les indices des valeurs maximum en l’occurrence les propositions gagnantes.

max= max(array);

IndexMax = array();

foreach(array as key => value)

if(value == max)

IndexMax[] = key;

EndIf

EndForEach

Display 'max : ' print_r(IndexMax);

return IndexMax;

}

End Function

Function : getWinners(proposals, matriceVoteXProposals)

countResult(matriceVoteXProposals, winners);

foreach(winners as winner)

Display 'The winner is : 'proposals[winner]' ;

EndForEach

EndFunction

28

• Algorithme de vote par valeurs :

// Fonction qui traite les votesproposals : String[n] // n : le nombre de candidats votingCounter : Integer[n]Function vote(votingList : Integer[n]) // valeur 0 ou 1 For i from 0 to n-1 votingCounter[i] = votingCounter[i] + 1 End ForEnd Function //fonction qui donne le gagnant après avoir traité les votesFunction getWinners() : List <Integer> winnersIndex = new List <Integer> max : Integer posMax : Integer max = 0 posMax = 0 For I from 0 to n-1 If votingCounter[i] >= max Then max = votingCounter[i] posMax = i End If End For For j from posMax to n-1 If votingCounter[j] == max Then

Add j to winnersIndex End If End For Return winnersIndexEnd Function

29

3.2.2 Organisation :

3.2.2.1 ContraintesPlusieurs contraintes se sont malheureusement incrustes dans notre organisation pour cette

deuxième etape. Cela nous a vraiment handicape et nous a oblige à rebondir à chaque fois, optimiser encore plus notre travail et revoir presque quotidiennement notre organisation, sous la bienveillance du chef de projet.En effet, après la distribution des tâches, et le debut du travail pour l'implementation des algorithmes, une de nos membres (Hamza CHORFI) nous a abandonne sans nouvelles, au debut nous avons cru qu'il avait juste du retard et qu'il faisait correctement sa tâche. Mais après plusieurs jours et dans l'attente, on l'a contacte, mais sans nouvelles. Après plusieurs relances, et ne le voyant plus en cours, nous constations qu'il a dû abandonner, il nous expliqua plu tard qu'il avait des raisons d'ordres personnelles qui l'ont pousse à abandonner. Ajoutez à cela les problèmes de santes d'un autre membre qui avait subi une operation, des degâts des eaux... Ceci dit, on pense qu'on s'en est bien sorti, même en ayant un peu travailler sur les nerfs, avec des pressions en plus.Enfin, d'autres problèmes d'ordre de comprehension, et surtout d'algorithmique qui reste le point faible d'une partie d'entres nous, nous ont empêches d'avancer un peu plus lentement que prevu, mais ceci fait partie des difficultes et aussi des avantages d'un TER, c'est à dire apprendre à surpasser nos difficultes et ameliorer notre niveau.

3.2.2.2 Solution(s) pour la prochaine étapeLa prochaine etape relative à celle-ci est celle du developpement du Site web. Nous serons

amene à optimiser nos algorithmes afin qu'ils soient plus fonctionnelles, ceci se fera en même temps que l'integration de ceux ci à notre Base de donnees.

30

3.2.3 Implementation :

3.2.3.1 Résultat :

Le resultat de cette etape sera presente sous forme d'une interface basique et rudimentaire,

montrant juste que l'algorithme renvois bien des resultats voulus en lui fournissant quelques donnees. Cette presentation a eu lieu Lundi 7 Avril au Lirmm.

3.2.3.2 Implémentation :

En annexes, vous trouverez les codes sources en format PHP de nos deux algorithmes, conformes aux pseudo-codes ci-dessus ainsi que le script de creation de la BDD.

3.3 Modèle MVC : « CodeIgniter »:

3.3.1 Création du design Après une longue réflexion en parallèle à l'étape de l'implémentation des algorithmes, nous

avons décidé d'utiliser un modèle MVC pour le montage de notre site web. En effet, de nombreux framworks proposent ce service.

Le Modèle-Vue-Contrôleur (en abrege MVC, de l’anglais Model-View-Controller) est une architecture et une methode de conception qui organise l’interface homme-machine (IHM) d’une application logicielle. Ce paradigme divise l’IHM en un modèle (modèle de donnees), une vue (presentation, interface utilisateur) et un contrôleur (logique de contrôle, gestion des evenements, synchronisation), chacun ayant un rôle precis dans l’interface. Cette methode a ete mise au point en 1979 par Trygve Reenskaug, qui travaillait alors sur Smalltalk dans les laboratoires de recherche Xerox PARC.

Pour faire plus simple, il s’agit simplement d’un modèle qui separe la presentation du code.

31

Le framwork qu'on a décidé d'utiliser est CodeIgniter, sur le site de l'éditeur de ce dernier on peut lire : « CodeIgniter est un framework PHP puissant avec un très faible encombrement, construit pour les codeurs PHP qui ont besoin d’une boîte à outils simple et élégante pour créer des applications web complet. Si vous êtes un développeur qui vit dans le monde réel de l’hébergement mutualisé et des comptes clients avec des délais, et si vous êtes fatigué de cadres de grandes lourdement et de manière approfondie sans-papiers »

Je vous épargne les détails sur cet « usine à gaz », car ce framwork est très élaboré, ne pas bien apprendre à l'utiliser peut vite se révéler une mauvaise idée, car on peut facilement s'y perdre et donc handicaper le projet.

Les trois dossiers les plus importants à expliquer sont : •Le dossier « config » qui contient nos donnees de configuration•Le dossier « controllers » contenant des fichiers de class qui sont lies à nos URL•Le dossier « view » correspondant aux vues

Et le schema de fonctionnement dans CodeIgniter est le suivant :➢ Le contrôleur principal analyse l’URL et va charger une vue, cette vue etant executee par une fonction.

Voici un schema concluant le fonctionnement du FramWork :

1. le client fait une demande au contrôleur. Ce contrôleur voit passer toutes les demandes des clients. C'est la porte d'entree del'application. C'est le C de MVC.2. le contrôleur traite cette demande. Pour ce faire, il peut avoir besoin de l'aide de la couche metier, ce qu'on appelle le modèle Mdans la structure MVC.3. le contrôleur reçoit une reponse de la couche metier. La demande du client a ete traitee. Celle-ci peut appeler plusieurs reponsespossibles. Un exemple classique est :

• une page d'erreurs si la demande n'a pu être traitee correctement• une page de confirmation sinon

4. le contrôleur choisit la reponse (= vue) à envoyer au client. Celle-ci est le plus souvent une page contenant des elementsdynamiques. Le contrôleur fournit ceux-ci à la vue.5. la vue est envoyee au client. C'est le V de MVC

32

3.3.2 Le site : Après avoir passe des heures et des heures à apprendre le fonctionnement du framwork, de

nombreux tutoriels ont ete lus, afin d'être prêt au maximum pour l'implementation du site, et surtout ne pas regretter ce choix qui, quand même, a intervenu dans les phases finales du site, où le temps se fait precieux, et donc il n'y a plus de temps à perdre .

Nous n'allons pas detailler toutes les vues, les controllers et les modèles, nous allons montrer un exemple mais le reste fonctionne de la même manière, vous les trouverez dans l'archive jointe à ce rapport.

Les contrôleur CodeIgniter

Un contrôleur est simplement une class qui est nommee dans le but d’être chargee en fonction d’une URL.

L’exemple suivant : « http://www.lirmm.fr/petitions/ »

chargera la class « petitions ». Ce contrôleur devra contenir des fonctions permettant de charger des vues. Par defaut, la fonction « index() » chargera la vue par defaut, dans notre cas index fait appel à acceuil, qui lui charge les vues correpondantes à chaque pages, mais celles qu'on appel tous le temps c'est celles en gras :

//...

$this->accueil();

}

public function accueil(){

$this->load->view('header_view'); $this->load->view('menu_view'); $this->load->view('prop_voting_view'); $this->load->view('footer_view');

…

//

Les vues CodeIgniter

Une vue est simplement une page WEB ou un fragment de page WEB. Cette vue est chargee par le contrôleur en relation avec L’URL

Nous l'avons vu ci-dessus, la vue est chargee par le contrôleur et la fonction qui permet de charger une vue est la suivante :

$this->load->view('prop_voting_view');

Par exemple, la vue pour éditer une proposition est la suivante :

33

//...<?php $this->load->helper('form');

foreach ($proposition_edite as $row){

?><div class="formulaire"> <form method="post" action="<?php echo base_url().'index.php/liste_petition/edite_set_p?id_proposition='.$row->proposal_id.'&id_petition='.$row->petition_id ?>"> <div class="title"> <label> <div class="error"><?php echo form_error('titre'); ?></div> Titre de la petition : <input type="text" name="titre" value="<?php echo $row->proposal_title; ?>"/> </label> </div> <div class="contenu"> <label> <div class="error"><?php echo form_error('editor1'); ?></div> Contenu de la petition: <br /> <textarea name="editor1" rows="7" cols="60"><?php echo $row->proposal_content; ?><?php echo set_value('editor1'); ?></textarea> <script type="text/javascript"> CKEDITOR.replace( 'editor1' );</script> </label> <?php echo form_error('editor1');

} ?> </div> <p> <input type="submit" value="Enregistre votre petition" /> </p> </form></div>Cette vue est appelée par la fonction edit_get() du contrôleur list_petition.php :

34

//...function edite_get(){

$this->load->model('listepetition_model');

$dataP = array();

$id = $this->input->get('id_petition');

$dataP['petition_edite'] = $this->listepetition_model->edite_get($id);

$this->load->view('header_view'); $this->load->view('menu_view'); $this->load->view('edite_petition_view',$dataP ); $this->load->view('footer_view');

}…//

Les helpers

Les helpers sont des bibliothèques de fonctions qui permettent de manipuler des données ; il en existe plusieurs sortes, on peut citer entre autre le helper « url » permettant de manipuler les chaines d’URL ou encore l’helper « email » permettant de manipuler les chaines d’email.

Il existe différentes façon de charger ces helpers, soit un par un ou via un tableau si vous devez en charger plusieurs. Cette opération est exécutée dans le constructeur de vos models.

Par exemple dans l'exemple précédent, on a fait appel au helper

$this->load->helper('form');

Celui-ci nous aide à la création des formulaire.

35

3.3.3 Monture du site

▪ Voici la page de garde de notre site :

Voilà à quoi ressemble la page de garde de notre siteWeb. Ainsi, les utilisateurs peuvent lire une courte description sur le vote et la creation, les invitants à aller lire les pages d'aides au cas où ce nouveau système de petitions n'est pas assimile.

Ensuite ils peuvent se connecter, s'inscrire, partager le site sur les reseau sociaux, effectuer une recherche..etc..

• Créer : Pour ce qui est de la creation des petitions, l'utilisateur doit se connecter, ensuite, il tombe

sur sa liste de petitions :

36

Là l'utilisateur a dejà creer deux petitions, s'il appuie sur le +, il pourra en creer une autre, un editeur de texte integre lui permet de le faire :

Il en est de même pour les propositions. D'ailleurs, une fois la petition cree, elle est par defaut : -Vide en proposition ;-Pas valide, donc pas visible sur le site pour le vote.

L'utilisateur doit donc creer au moins deux propositions, puis de la valider.Pour Creer une proposition, il faut se positionner sur la liste des petitions, et cliquer sur le

titre de la petitions qu'on veut editer :

Et ainsi de suite.

37

• Voter : Ensuite, pour voter, il faut se rendre à la rubrique prevue pour cet effet, la liste des petitions ouvertes au vote s'affiche :

Pour les petitions dont la date a expire, on peut consulter le resultat du vote.Pour voter, il suffit de cliquer sur le bouton prevu à cet effet, une liste des propositions est

visibles, et il faut donner une position à chaque proposition, tel que cela a ete explique plus haut dans le chapitre des algorithmes de votes.

38

• Formulaire de contact :

Un formulaire de contact est mis à disposition des utilisateurs afin de contacter l'administrateur.

Celui-ci doit être configurer pour la reception des mails, les instructions seront donnes au tuteurs.

39

CCONCLUSIONONCLUSION

40

4. Résultats et conclusion 4.1.1 Résultats

Nous avons finalement réussit à se rapprocher au maximum de la demande de nos tuteurs. En effet, on espère que le site répond à leurs attentes car toutes leurs demandes ont été intégrées au site.

Le chef de projet avec toute l'équipe s'engage à rester en contact avec les responsables du site durant les prochaines semaines, pour répondre à leurs questions ainsi que pour assurer la garantie opérationnelle du site. Celui-ci sera mis en ligne sur les serveurs du Lirmm dès la semaine prochaine et avant les soutenances, des bugs minimes sont en cours de correction ainsi que certains fonctionnalités.

4.1.2 Conclusion

Le choix des outils et la façon de travailler a ete la partie la plus longue à mettre en place. De plus, il a fallu s’adapter au plan donne par les tuteurs pour faire un site à la fois fonctionnel et qui leurs conviennent tant sur le plan operationnel, visuel et ergonomique. .

À l’issu de notre travail d’implementation, nous pouvons dire que les objectifs ont ete atteints, malgre qu'il reste encore quelques bugs à corriger avant la livraison finale du site.

Grâce au travail de recherche, de lecture, de comprehension et modelisation des differents algorithmes de votes, nous avons mis en relief notre sens du challenge, puisqu'on a implemente des algorithmes qui n'ont jamais ete implementes auparavant en version php.

Tandis que les autres parties du projet, que ce soit la bdd ou l'implementation graphique du site, nous ont permis d’approfondir nos connaissances acquises lors de nos parcours universitaire ou autres .

Nous devons souligner que bien modeliser, comprendre, en gros, une bonne phase d'analyse prealable est primordial, la precision la concision et l'efficacite, et donc de bons resultats d’implementations obtenus en decoulent fortement.

41

AANNEXESNNEXES

42

6. AnnexesVous trouverez dans cette section la feuille de route, le bilan de mi-parcours ainsi que les

algorithmes de votes. Compte tenu de la taille encombrante des autres codes sources, vous les trouverez en fichier

joint au rapport avec le code, notamment la base de donnee (.sql) se situant dans le dossier bdd.

F euille de r oute:

• Nom du Groupe : ONLINEP

• Noms, prenoms,et mails des membres du groupe (mails institutionnels) :

➢ ALIJATE Mehdi (Chef de projet) : mehdi.alijate@etud.univ-montp2.fr➢ EL HASSOUNI Nordine : nordine.el-hassouni@etud.univ-montp2.fr➢ CHORFI Hamza : hamza.chorfi@etud.univ-montp2.fr➢ NKAIRA Otmane : otmane.nkaira@etud.univ-montp2.fr

• Dans le cadre de ce TER, nous allons lire un ou plusieurs articles scientifiques correspondants aux systèmes de votes, notamment sur le vote alternatif, qui nous interesse1 . Il y aura aussi quelques notes ou recits scientifiques montrant l'implementation de quelques algorithmes permettant le comptage des signatures. Enfin, nous avons opte d'utiliser la technologie HTML5, nous sommes donc à la recherche de quelques tutoriels/cours sur la toile ou sur papier, nous permettant de comprendre mieux les nouveautes de cette nouvelle version.

• Chef de pro j et : ALIJATE MehdiDeveloppeurs : EL HASSOUNI Nordine , NKAIRA Otmane D e signers : CHORFI Hamza , ALIJATE Mehdi Arc h ite c ture BDD : NKAIRA Otmane , ALIJATE MehdiArc h ite c ture du si t e web : CHORFI Hamza , EL HASSOUNI NordineNB : Les phases d'analyse et de conception seront faites en commun.

• Diagramme previsionnel de Gantt :

43

B ilan à mi - pa r cour s :

• Nom choisi par le groupe : ONLINEP

• Noms, prénoms, mails des membres du groupe en indiquant S'ils ont changé depuis l'affectation et pourquoi :

➢ ALIJATE Mehdi : m e h d i . a l i j a t e @ e t u d . u n i v - m o n t p 2 , Chef de projet , Concepteur

BDD et modelisations.➢ EL HASSOUNI Nordine : nordine.el-hassouni@etud.univ-montp2 , Responsable des tâches orientees WEB .

➢ NKAIRA Otmane : otmane.nkaira@etud.univ-montp2 , Responsable Algorithmiques, Concepteur BDD .

➢ CHORFI Hamza : Abondant depuis la deuxième tâche .• Liste des tâches effectuées avec succès en précisant si c'est possible le temps et les personnes qui y ont participé :

✔ La première etape de notre TER a ete effectuer avec succès, cette première etape concernait la conception, la modelisation et l'implementation de la BDD pour le site web qu'on doit implementer. Les tuteurs l'ont valide, un rapport a ete fournis par la même occasion.✔ La deuxième etape, qui concerne la documentation, la modelisation et l'implementation de deux algorithmes de votes vient tout juste d'être boucler. En effet, nous avons modeliser l'algorithme de vote preferentiele et l'algorithme de vote par valeurs, nous les avons implementer aussi puis tester. Un rapport a ete envoyer et nous attendons la validation des tuteurs dans les jours qui viennent.

• Liste des problèmes rencontrés :✗ L'abondon d'un de nos membres, CHORFI Hamza, après la première etape, plus exactement lors de la deuxième phase de la deuxième etape. Toute la distribution des tâches fût à revoir, ainsi que la charge de travail pour chacun d'entre nous.✗ D'autres problèmes d'ordres personnelles, tels que l'hospitalisation de l'un de nos membres pour une appendicite, ainsi que des degâts de eaux... ont un peu freine notre avancement, mais ces problèmes là ont pû être surpasses, et on est toujours dans le respect des delais, ainsi que la regularite de nos reunions.

• Liste des tâches à effectuer avant la fin du TER :➔ L'etape 3, qui consiste à monter des propositions d'interfaces graphiques et une charte graphique est la prochaine à faire, dès la validation d'une des propositions, nous nous pencheront sur l'implementation de celle-ci.➔ L'etape 4 , consistera à developper le site web et le deployer sur les serveurs du LIRMM, sachant que la BDD ainsi que les algorithmes de votes et l'interface graphique seront dejà prêts, donc il ne restera plus qu'à developpeer les differentes fonctionnalites du site web. Une dernière tâche persistera, celle du debogage et des differents tests.

• Le cas échéant, les modifications survenues par rapport à la feuille de route initiale :

Rien n'a change depuis la feuille de route initiale, à part le fait qu'on aura plus de temps pour developper et tester notre site web depuis le changement des dates de soutenances et de la date limite du depôt des TER.

44

Vote_Preferentiel.php<?php$proposals = array('A', 'B', 'C', 'D');

// un vote indique l'ordre de vote de chaque proposition//une proposition non voté son ordre est 0.

ini_set('max_execution_time', 300);//ini_set('xdebug.max_nesting_level', 1000);

$matriceVoteXProposals = array();randomVoting($matriceVoteXProposals, 1000);//appelle d'un vote aléatoire de 1000 personne

//test manuel/*$votingList1 = array(1, 2, 3, 4);$votingList2 = array(4, 3, 2, 1);$votingList3 = array(2, 3, 1, 4);$votingList4 = array(3, 4, 2, 1);$votingList5 = array(2, 3, 2, 4);$votingList6 = array(3, 4, 2, 1);$votingList7 = array(3, 4, 2, 1);$votingList8 = array(2, 3, 1, 4);$votingList9 = array(3, 4, 1, 2);$votingList10 = array(3, 4, 1, 2);

$matriceVoteXProposals = array($votingList1, $votingList2, $votingList3, $votingList4,$votingList5, $votingList6, $votingList7,$votingList8,$votingList9,

$votingList10);*/echo 'propositions : ';print_r($proposals);echo '</br>';getWinners($proposals, $matriceVoteXProposals); // récupérer le resultat

function randomVoting(&$matriceVoteXProposals, $numberOfVoting){for($i=0; $i<$numberOfVoting; $i++){

$rand_Array= array(array(1, 2, 3, 4), array(2, 3, 4, 1), array(3, 4, 1, 2), array(4, 1, 2, 3), array(0, 1, 2, 3),

array(0, 0, 1, 2), array(0, 0, 0, 1), array(0, 1, 2, 3) );/*pour déveloper le jeu de test il suffit de modifier les tables de vote contenu dans $rand_Array

*/

$votingList = $rand_Array[rand(0, count($rand_Array) - 1)];// valeur aleatoir entre 0 et la taille du tableau - 1

print_r($votingList);echo '</br>';vote($votingList,$matriceVoteXProposals);

}

}

function vote($votingList, &$matriceVoteXProposals){$matriceVoteXProposals[] = $votingList;

}

function getWinners($proposals, $matriceVoteXProposals){

countResult($matriceVoteXProposals, $winners);foreach($winners as $winner){

echo 'The winner is : '. $proposals[$winner].' </br>';

45

}}

function countResult(&$matriceVoteXProposals, &$res){$orderScore = array(); // compteur des différents ordres de choix des propositions, chaque indice

correspond à une proposition.$bestOrder = array(); // tableau des meilleurs ordres de chaque proposition.$LoserIndex = array(); // tableau des indices des propositions perdante.$potentialWinnerIndex = array(); // tableau des indices des propositions gagnantes potentielles.static $eliminatedLoser = array(); // tableau des indices des propositions perdantes éliminées.// initialisation du tableau des scores et celui des ordres maxforeach ($matriceVoteXProposals[0] as $vote0){

$orderScore[] = 0;$bestOrder[] = $vote0;

}

/*Comptage des votes des propositions choisi en premier ordre et calcule du meilleur ordre de chaque proposition.*/for($i=0; $i<count($orderScore); $i++){

for($j=0; $j<count($matriceVoteXProposals); $j++){

if($matriceVoteXProposals[$j][$i] == 1){$orderScore[$i]++;$bestOrder[$i] = 1;

}elseif(($bestOrder[$i] !=1 and $matriceVoteXProposals[$j][$i] < $bestOrder[$i]) or ($bestOrder[$i] == 0 and $matriceVoteXProposals[$j][$i] >

$bestOrder[$i])){$bestOrder[$i] = $matriceVoteXProposals[$j][$i];

}}

}

//récupérer que les indices des propositions perdantes qui ne sont pas éliminés$LoserIndex = minIndex($orderScore, $eliminatedLoser);

if(count($LoserIndex) !=0){foreach($LoserIndex as $loser){

if($bestOrder[$loser] !=0 ){// une proposiion qui n'a jamais été voté est éliminée et n'engendre pas la distribution des votes.

for($i=0;$i<count($matriceVoteXProposals); $i++){if($matriceVoteXProposals[$i][$loser]== $bestOrder[$loser]){

for($j=0; $j<count($orderScore); $j++){if($matriceVoteXProposals[$i][$j]== $bestOrder[$loser] + 1){

$matriceVoteXProposals[$i][$j] = $bestOrder[$loser];}

}}

}}

$eliminatedLoser [] = $loser;

}

}

$potentialWinnerIndex = maxIndex($orderScore);

echo 'Order Score : ';print_r($orderScore);echo '</br>';/*appel récursive jusqu'a la satisfaction de la condition de la majorité absolue des gagnants ou

élimination de toutes des proposition perdantes.

46

*/if ($orderScore[$potentialWinnerIndex[0]] < 0.5 * count($matriceVoteXProposals) and

count($LoserIndex) !=0){countResult($matriceVoteXProposals, $res);

}else{echo 'the winner score is : '. $orderScore[$potentialWinnerIndex[0]].'</br> Total :';print_r($orderScore);echo '</br>';$res = $potentialWinnerIndex;

}}

//calculer les indices des proposition perdantes.function minIndex($array, $eliminatedIndex){

$array_delta = array_diff_key($array, $eliminatedIndex);$IndexMin = array();

if(count($array_delta)!=0){$min=min($array_delta);foreach($array_delta as $key => $value){

if($value == $min){$IndexMin[] = $key;

}}

}echo 'min : ';print_r($IndexMin);echo '</br>';return $IndexMin;

}

//calculer les indices des proposition ayant le max des premier ordres.function maxIndex($array){

$max= max($array);$IndexMax = array();

foreach($array as $key => $value){if($value == $max){

$IndexMax[] = $key;}

}echo 'max : ';print_r($IndexMax);echo '</br>';return $IndexMax;

}

?>

Vote_Par_Valeurs.php<?php$proposals = array('A', 'B', 'C', 'D');$votingCounters = array(0, 0, 0, 0);

$votingList1 = array(-2, 1, 2, 0);$votingList2 = array(-1, 2, 0, 0);$votingList3 = array(-2, 1, 1, 1);

vote($votingCounters, $votingList1);vote($votingCounters, $votingList2);vote($votingCounters, $votingList3);

showResults($proposals, getWinnersIndex($votingCounters));

47

function vote(&$votingCounters, $votingList){

for($i=0;$i<count($votingList); $i++){$votingCounters[$i] = $votingCounters[$i] + $votingList[$i];

}}

function getWinnersIndex($votingCounters){$winnersIndex = array();$max = 0;$posMax = 0;for($i=0;$i<count($votingCounters); $i++){

if($votingCounters[$i]>=$max){

$max = $votingCounters[$i];$posMax = $i;

}}

for($j=0;$j<=$posMax; $j++){if($votingCounters[$j]==$max){

$winnersIndex [] = $j;}

}return $winnersIndex;

}

function showResults($proposals, $winnersIndex){

for($i=0; $i < count($winnersIndex); $i++)echo '<Strong>'.$proposals[$winnersIndex[$i]]. ' Win !<Strong></br>';

}

?>

48