42
Participation au développement de sites web Stage effectué à FAZAE sous l'encadrement de M Loïc PICHOUD, tuteur entreprise et M me Laure TOUGNE, tutrice universitaire Aude LE BRAS Faculté de sciences économiques et de gestion UNIVERSITÉ LUMIÈRE LYON 2 Département « Informatique et Statistique » Master 1 Informatique Année universitaire 2009-2010

Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites

web

Stage effectué à FAZAE sous l'encadrement de M

Loïc PICHOUD, tuteur entreprise et Mme Laure

TOUGNE, tutrice universitaire

Aude LE BRAS

Faculté de sciences économiques et de gestion

UNIVERSITÉ LUMIÈRE LYON 2

Département « Informatique et Statistique »

Master 1 Informatique

Année universitaire 2009-2010

Page 2: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis de réaliser ce stage ainsi que pour leur aide et leur disponibilité tout au long de ces derniers mois. Je les remercie également eux et toute la team OCÉBO, Julien, Yannick et Vincent pour leur accueil, l'ambiance de travail a été très agréable.

2 Aude LE BRAS, M1 Informatique

Page 3: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

SommaireIntroduction......................................................................................................................................................................................................................5FAZAÉ.............................................................................................................................................................................................................................7

Présentation.................................................................................................................................................................................................................8Environnement de travail..........................................................................................................................................................................................10

JOOMLA!......................................................................................................................................................................................................................11Présentation...............................................................................................................................................................................................................12Avantages..................................................................................................................................................................................................................13Limites.......................................................................................................................................................................................................................13

SYMFONY....................................................................................................................................................................................................................14Présentation...............................................................................................................................................................................................................15Modèle-Vue-Contrôleur............................................................................................................................................................................................16Doctrine.....................................................................................................................................................................................................................17YAML........................................................................................................................................................................................................................18Programmation Orientée Objet .................................................................................................................................................................................19

SIEA...............................................................................................................................................................................................................................20Le client.....................................................................................................................................................................................................................21Le site........................................................................................................................................................................................................................22

Première page.......................................................................................................................................................................................................22Nouvelle inscription..............................................................................................................................................................................................24Valider les inscriptions..........................................................................................................................................................................................28

Les autres projets............................................................................................................................................................................................................30Le suivi......................................................................................................................................................................................................................31Les graphiques ..........................................................................................................................................................................................................32

Bilan ..............................................................................................................................................................................................................................33Connaissances ...........................................................................................................................................................................................................34

3 Aude LE BRAS, M1 Informatique

Page 4: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Environnement de travail..........................................................................................................................................................................................34Les points à améliorer ..............................................................................................................................................................................................35

Conclusion......................................................................................................................................................................................................................36ANNEXES.....................................................................................................................................................................................................................38

Index des illustrations................................................................................................................................................................................................39Lexique......................................................................................................................................................................................................................40Webographie..............................................................................................................................................................................................................41Plaquette de présentation de SIEA............................................................................................................................................................................42

4 Aude LE BRAS, M1 Informatique

Page 5: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Introduction

5 Aude LE BRAS, M1 Informatique

Page 6: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

L'année précédente, j'ai accepté un stage en programmation web, alors

que j'en avais très peu fait et que ce peu d'expérience ne m'avait pas

vraiment séduit. Mais ce stage m'a permis, de mieux découvrir ce type

de programmation et m'a donné envie de m'y plonger plus intensément.

J'ai donc voulu cette année, refaire un stage dans ce domaine, afin de

confirmer mon choix de m'orienter dans cette voie.

L'offre de FAZAÉ correspondait donc tout à fait à ce que je recherchais

puisqu'il s'agissait de participer au développement de sites web.

De plus, il répondait à un autre souhait qui était de découvrir un nouvel

environnement de travail, alors que durant les années précédentes,

j'avais effectué mes stages dans le domaine médical dans le public au

CHU de Nantes, et dans le domaine des télécoms dans une grande

société privé internationale France Télécom.

N'ayant de pas de mission de stage précise, je ne présenterai pas de

résultats dans ce rapport. Je présenterai dans un premier temps les

outils utilisés, puis quelques exemples de mes travaux et enfin je ferais

un bilan de ce stage.

6 Aude LE BRAS, M1 Informatique

Page 7: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

FAZAÉ

Présentation

Environnement de travail

7 Aude LE BRAS, M1 Informatique

Page 8: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Présentation

FAZAÉ est une S.S.I.I.1 créée et dirigée par Fabrice PICCINALI en 2004. Elle

compte un employé Loïc PICHOUD.

Elle est spécialisée dans le développement de site web, et offre des possibilités

d'hébergement de site ainsi que de l'espace disque afin de pouvoir effectuer des

sauvegardes régulières.

Elle partage ses locaux avec OCÉBO, une société de communication, à

l'origine un collectif de graphistes free-lance avec lesquels FAZAÉ est

régulièrement en partenariat.

1 S.S.I.I. : Société de Services en Ingénierie Informatique

8 Aude LE BRAS, M1 Informatique

Page 9: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Son activité se divise en trois catégories :

• Sites de gestion de contenu (CMS2), ils permettent à toutes personne

avec ou sans connaissance, de créer et personnaliser son site web,

aussi appelé site plaquettes, ce type de site possède très peu de

fonctionnalité ;

• Boutique eCommerce, de plus en plus répandues, elles permettent

d’offrir un catalogue bien précis mais également de donner la

possibilité à un client d’acheter à domicile ;

• La Gestion de relation de client (CRM3), ils permettent entre autres

de garder les informations de chaque client ainsi que son étape de

vente en cours.

2 C.M.S. : Content Management System 3 C.R.M. : Customer Relationship Management

9 Aude LE BRAS, M1 Informatique

Page 10: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Environnement de travail

Nous travaillons sous Linux (Kubuntu), mais sont également installé des

machines virtuelles Windows, permettant de tester les sites sous Internet

Explorer.

L'entreprise a mis en place un wiki, regroupant connaissances et techniques de

chacun. Cet inventaire permet un travail plus rapide, à condition évidemment

qu'il soit mis à jour régulièrement.

Elle dispose également d'un bug-tracker, cet outil permet de référencer tous les

tâches à accomplir, de les affecter, de les commenter, … Il facilite grandement

la communication que ce soit au sein de l'entreprise ou avec le client.

En ce qui concerne le développement, j'ai d'abord travaillé avec Joomla!, puis

symfony 1.4. Je présenterai ces deux outils au cours de mon rapport.

10 Aude LE BRAS, M1 Informatique

Page 11: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

JOOMLA!

Présentation

Avantages

Limites

11 Aude LE BRAS, M1 Informatique

Page 12: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Présentation

Joomla! est un CMS libre, open-source et gratuit. Il est écrit en php et

utilise une base de donnée (BDD) MySQL.

Joomla! a été créé à partir de Mambo suite à un désaccord entre ces

principaux développeurs et la société propriétaire.

Le nom Joomla! est la transcription phonétique d'un mot swahili qui

signifie "tous ensemble", ou encore "en un tout". Le choix s'est porté

vers ce nom car l'intégralité de l'équipe qui était derrière Mambo était

unanime dans la volonté de protéger les intérêts des créateurs et de la

communauté.

Joomla! a pour volonté d'offrir à ces utilisateurs un maximum de

fonctionnalités tout en gardant une simplicité d'utilisation. Ceci afin que

n'importe qui, ne possédant que peu de compétences puisse gérer son

site.

12 Aude LE BRAS, M1 Informatique

Page d'administration Joomla!

Page 13: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Avantages

Le principal avantage de Joomla! est sa simplicité d'utilisation, en effet,

la maîtrise de cet outil a été assez rapide, de part une bonne organisation.

De plus, il reste très modulable, en effet, étant un logiciel open-source et

libre, l'utilisateur a accès au code PHP, qu'il peut modifier selon ses

besoins. Joomla! possède également une grande galerie de plugins

(extensions) qui peuvent intégrer facilement.

Joomla! c'est également une communauté composé de millions

d'individus aux compétences diverses, ce qui permet d'avoir des mises à

jour très fréquentes. Par exemple, entre septembre 2005 et janvier 2006,

Joomla! a réalisé 8 versions de maintenance corrigeant bugs et failles de

sécurité.

Pour finir, dans le concours 2008 du meilleur CMS, Joomla! est arrivé

2ème dans la catégorie Overall Winner Open Source CMS Award et 2ème

dans la catégorie Best PHP Open Source Content Management System.

Limites

Bien que possible, le code PHP de Joomla! est très lourd a modifier, en

effet, le code donne plus l'impression d'une « usine à gaz » qu'un site

bien organisé. La modification directe du code peut donc rapidement

devenir très compliquée.

La gestion des droits d'accès est très limitée dans Joomla!, puisqu'on ne

peut pas réserver l'accès à une partie des contenus.

L'architecture des contenus est prédéfinie, il faut donc s'en accommoder.

Il peut aussi devenir très gourmand en ressources, si trop d'extensions

sont installés. À savoir également que les extensions peuvent être

développée par n'importe qui, il faut donc bien se renseigner sur sa

fiabilité. De plus, certaines d'entre elles peuvent être payante.

13 Aude LE BRAS, M1 Informatique

Page 14: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

SYMFONY

Présentation

Modèle-Vue-Contrôleur

Doctrine

YAML

Programmation Orientée Objet

14 Aude LE BRAS, M1 Informatique

Page 15: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Présentation

Symfony est un framework4 PHP open-source, développé à l'origine par

la société française Sensio.

Ce framework, écrit en PHP 5, se base sur le modèle Modèle-Vue-

Contrôleur (MVC). Il a pour principe de ne pas « réinventer la roue », en

effet, il assemble divers projets reconnus avec leurs spécialités propres,

comme l'object-relational-mapping (ORM) Doctrine.

Quelques caractéristiques de Symfony :

• indépendant de la base de données ;

• possibilité d'ajouter de nombreux plugins pour utiliser d'autres technologies du web ;

• supporte l'internationalisation ;

• protection des attaques d'insertion de script ;

• réécriture d'URL native, très utile en référencement.

Il a également l'avantage de posséder une documentation très complète.

4 Un framework fournit ensemble de fonctions facilitant la création de tout ou d'une partie d'un système.

15 Aude LE BRAS, M1 Informatique

Schéma des technologies utilisées par Symfony

Page 16: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Modèle-Vue-Contrôleur

Le modèle MVC est une architecture qui sépare les différentes couches

de conception d'un projet afin que chaque personne puisse travailler sur

sa couche sans qu'elle aie à se préoccuper du travail de ses voisins.

Cette architecture a donc 3 couches :

• le modèle : c'est l'interaction avec la BDD, il offre des méthodes d'insertion, de modification, ou de récupération des données ;

• la vue : c'est l'interaction avec l'utilisateur, il affiche les données, et reçoit les informations de l'utilisateur mais ne les traite pas ;

• le contrôleur : c'est l'interaction entre les deux couches précédentes, il analyse la requête du client et se contente d'appeler le modèle adéquat et de renvoyer la vue correspondant à la demande.

En résumé, lorsque l'utilisateur fait une requête, elle est envoyée depuis

la vue et analysée par le contrôleur, ce dernier demande au modèle

d'effectuer les traitements et notifie la vue que la requête est traitée. La

vue fait une requête au modèle pour se mettre à jour.

16 Aude LE BRAS, M1 Informatique

Schéma du modèle MVC

Page 17: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Doctrine

Doctrine est l'ORM5 par défaut dans Symfony, il permet d'écrire

simplement des requêtes SQL complexes.

Une de ses principales caractéristiques est la possibilité d'écrire des

requêtes de base de données dans un dialecte SQL orienté objet appelé

Doctrine Query Language (DQL). Le DQL reste donc très proche du

SQL, malgré quelques différences à toujours garder à l'esprit, ce qui rend

son apprentissage très rapide.

Doctrine permet de vérifier les données, protéger la BDD contre les

injections, créer les requêtes SQL et vérifier l'insertion dans les tables.

Une autre force de Doctrine est la possibilité de gérer la notion d'arbre et

de parent/enfant, qui est beaucoup plus compliqué sous SQL.

5 O.R.M. : Object Relational Mapping

17 Aude LE BRAS, M1 Informatique

Exemple d'utilisation de l'ORM Doctrine

Page 18: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

YAML

La plus part des fichiers de configuration sous Symfony sont écrits en

YAML.

Le YAML est un langage permettant la représentation des données, il

reprend les principes du XML en les simplifiant. Il est défini comme le

langage « standard de sérialisation de données compréhensibles par un

humain, quel que soit le langage de programmation ».

Quelques caractéristiques de ce langage :

• les commentaires sont notés avec des « # » ;

• la syntaxe est proche du format JSON et peut inclure du JSON ;

• les éléments de listes sont signalés avec des « - » ;

• les tableaux sont de la forme associative : paire de clé->valeur ;

• Les données scalaires peuvent être accompagnées de guillemets doubles (« ), ou simples (‘) ;

• l'indentation par des espaces construit une arborescence précise ;

• possibilité de préciser le type d’une donnée par des tags.

18 Aude LE BRAS, M1 Informatique

Exemple d'un fichier YAML

Page 19: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Programmation Orientée Objet

Symfony permet d'utiliser toutes les subtilités de la programmation

orientée objet (POO), notamment la notion d'héritage et de surcharge. En

effet, il permet de surcharger des tables, des templates6, ... On peut donc

facilement créer des plugins7, qui seront utilisées dans plusieurs projets,

et facilement les adapter selon le besoin du client. Ce qui permet d'éviter

de refaire ce qui à déjà été fait, et ainsi faciliter la vie du programmeur et

un gain de temps non négligeable.

Un des plugins les plus populaire de Symfony est sfGuard, il permet de

gérer les utilisateurs ainsi que leur authentification. La gestion des

utilisateurs est effectivement redondante dans la création de site mais

toujours différente.

6 Templates : correspond à la vue, modèle de mise en page des données7 Plugins : extension qui complète le logiciel hôte afin de lui apporter de nouvelles

fonctionnalités

19 Aude LE BRAS, M1 Informatique

Graphique humoristique sur le temps d'un programmeur

Page 20: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

SIEA

Le client

Le site

Première page

Nouvelle inscription

Valider les inscriptions

20 Aude LE BRAS, M1 Informatique

Page 21: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Le client

SIEA, Syndicat Intercommunal d'Électricité de l'Ain, est un

établissement public de coopération intercommunale, regroupant 419

communes de l'Ain. Ce syndicat a pour compétence tout ce qui touche à

électricité et ses actions se traduisent principalement par des conseils

techniques et des participations financières. Leur plaquette de

présentation est jointe en annexe.

En 2003, est né l'idée d'un projet « Très Haut Débit », appelé LIAin

(Liaison Internet de l'Ain), qui consiste à mettre en place des fibres

optiques, à la demande d'entreprises ou de particuliers.

C'est à cette occasion que FAZAÉ a été contactée afin de mettre en place

le portail internet permettant de « commander » le raccordement. Cette

« commande » est faite principalement par les fournisseurs d'accès

internet (FAI).

21 Aude LE BRAS, M1 Informatique

www.reso-liain.fr

www.siea.fr

Page 22: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Le site

Première page

Actuellement, deux types d'utilisateurs peuvent se connecter :

• le personnel SIEA : ils peuvent saisir des demandes, en valider,

importer des données (liste des FAI, liste des produits, liste des

utilisateurs) depuis leur base de données, et transmettre les

demandes validées vers leur base de données ;

• les FAI : ils ne peuvent que saisir des demandes.

Je présenterai les modules8, « nouvelle inscription » et « valider les

inscriptions ».

8 Un module est une page ou un groupe de page qui ont un but similaire.

22 Aude LE BRAS, M1 Informatique

Menu des utilisateurs "SIEA"Menu des utilisateurs "FAI"

Page de connexion

Menu des utilisateurs "SIEA"

Page 23: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

23 Aude LE BRAS, M1 Informatique

Étapes d'une inscription

Page 24: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Nouvelle inscription

Ce module permet donc de saisir les informations des personnes

souhaitant se relier au « Très Haut Débit ». Ce formulaire contient des

champs concernant les coordonnées de la personne ou entreprise (nom,

prénom, e mail, téléphone, ...) , les adresses d'installation, de facturation,

et du contact, ainsi que le package (produit) demandé.

Divers scripts jQuery9 ont été mis en place afin de faciliter la saisie de

ces champs. Un script permet notamment de copier les valeurs des

champs de l'adresse d'installation dans les champs facturation et contact

si ceux-ci sont les mêmes. Un autre script permet d'afficher ou de cacher

certain champs selon la valeur d'un autre. Ci-contre, l'exemple pour le

nom de la société. En effet, celui ne doit s'afficher que si la demande

émet d'une société.

9 jQuery : bibliothèque JavaScript libre

24 Aude LE BRAS, M1 Informatique

Exemple de script permettant de cacher un champ selon la valeur d'un autre

Exemple du script permettant de copier les adresses

Page 25: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

J'ai également développé un widget10 pour la saisie des codes-postaux et

villes. L'utilisateur saisi le début d'un code-postal, une liste déroulante

apparait alors lui proposant une liste des codes-postaux commençant par

ce qui a été saisi et le nom des villes correspondantes. Dans l'exemple ci-

contre, j'avais saisi « 014 », une fois sélectionnée la ville « Beauregard »

le code-postal et la ville s'inscrivent automatiquement dans leur champ

respectifs. Cela permet un gain de temps et réduit le risque d'une erreur

de saisie.

Lorsque l'utilisateur est logué comme étant un FAI, la liste des produits

est également mise à jour pour que seul les produits de ce fournisseur

s'affichent.

10 Widget : composant d'interface graphique

25 Aude LE BRAS, M1 Informatique

Exemple du widget CP/ville

Page 26: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Suivant son adresse, SIEA peut renseigner le client sur son éligibilité :

éligible, presque éligible ou non éligible. Pour cela, elle a un outil, qui

nous renvoie l'éligibilité selon des coordonnées X/Y11, elle possède

également un autre outil traduisant des coordonnées latitude/longitude en

coordonnées X/Y.

Afin de lui envoyer des coordonnées latitude/longitude, les plus précises

possibles, nous avons intégré à la page d'inscription une googleMap.

Lorsque l'internaute renseigne l'adresse dans les champs précédents, la

carte se centre automatiquement sur cette adresse, l'internaute n'a plus

qu'à pointer la puce sur le point exact où la fibre optique doit être

installée puis valider ce point. L'API12 googleMap nous permet alors de

récupérer les latitude/longitude de ce point que l'on va alors envoyer à

l'outil SIEA permettant de traduire ses cordonnées en coordonnées X/Y

et enfin récupérer l'éligibilité et renseigner l'internaute.

Pour cela, j'ai modifié la puce de googleMap pour qu'elle affiche une

bulle contenant l'information.

11 X/Y : système de coordonnées utilisé par les systèmes d'information géographique12 API : Application Programming Interface

26 Aude LE BRAS, M1 Informatique

GoogleMap mis en place sur le site SIEA

Page 27: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

J'ai également développé un module, « inscription prospect ». Ce module

ne nécessite pas d'être connecté pour être visible.

C'est sensiblement la même page qu'inscription simplifiée. Ce module

s'adresse aux particuliers, qui ont juste à saisir leur coordonnées. En

effet, les champs adresse de facturation, adresse de contact et produit ont

été supprimé. Le particulier saisi donc ses coordonnées, il peut alors

connaître son éligibilité. S'il est éligible, cette « pré-inscription » est

transmise aux FAI ; s'il est presque éligible, une routine sera mise en

place pour vérifier son éligibilité, et transmettre les informations aux FAI

dès qu'il passe en éligible.

Ci-joint, un graphe de séquence, expliquant les étapes d'une inscription

« prospect ».

27 Aude LE BRAS, M1 Informatique

Étapes d'une inscription "prospect"

Page 28: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Valider les inscriptions

Ce modules n'est accessibles qu'aux utilisateurs du groupe SIEA.

Cette page permet de vérifier les inscriptions, les valider et les

transmettre à la base NetAdmin, envoyer des messages d'erreur ou les

modifier.

Elle s'affiche de manière à ce que les erreurs soient visible au premier

« coup d'œil ». En effet, une fonction permet dans un premier temps de

vérifier si l'adresse saisie n'est pas déjà présente en base. Un drapeau est

affiché devant chaque adresse (installation, facturation, contact) :

• vert : pas de doublon

• orange : doublon sur les adresses de facturation ou de contact

• rouge : doublon sur l'adresse d'installation

L'éligibilité est elle aussi affichée en couleur.

Symfony permet également d'intégrer très facilement des filtres. Et rend

ainsi le travail plus facile et plus rapide.

28 Aude LE BRAS, M1 Informatique

Liste des inscriptions

Filtre de la page « Valider les inscriptions »

Page 29: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Pour chaque inscription, plusieurs actions sont possibles selon le statut

de celle-ci :

• Erreur, permet de noter une erreur, qui sera rentré en base dans

une table suivi, et d'envoyer un mail à la personne qui a fait

l'inscription. L'inscription passe au statut « Problème » ;

• Valider, valide l'inscription, et passe au statut « Validé »,

l'inscription n'est plus modifiable ;

• Modifier, renvoie à la page d'inscription vu précédemment ;

• Voir, renvoie à la page d'inscription mais les champs ne sont pas

modifiable.

Par la suite, une action permettra de transmettre les inscriptions validés à

la BDD NetAdmin, et de passer au statut « transmise ». Elle fait appelle

à des web-service, qui actuellement n'ont pas été mis en place. Il est

néanmoins possible de récupérer ces inscriptions par un export CSV.

29 Aude LE BRAS, M1 Informatique

Actions possibles selon le statut d'une inscription

Page 30: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Les autres projets

Le suivi

Les graphiques

30 Aude LE BRAS, M1 Informatique

Page 31: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Le suivi

Dans le cadre du projet SIEA et d'un autre, GIGALIS, nous avons

développé un module suivi. Il s'intègre à un formulaire déjà existant et

permet de suivre les changements d'une commande.

Ce module permet d'afficher sept champs : la date, l'auteur, un

commentaire, le type (RDV, appel, message, saisie), le statut (en cours,

terminé), une date de relance et une pièce jointe. La POO permet

cependant de le personnaliser suivant le projet où il est utilisé.

Pour, le projet SIEA, les suivis sont créés automatiquement suivant les

changement de statut. Pour le projet GIGALIS, certains sont créés

automatiquement, également lors des changements de statut. Nous avons

aussi créé des formulaires, pour modifier le statut et la date de relance

des suivis, et un formulaire pour créer un nouveau suivi (ce qui n'est pas

possible sur SIEA).

31 Aude LE BRAS, M1 Informatique

Exemple de suivi sur le site GIGALIS

Exemple de suivi sur le site SIEA

Page 32: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Les graphiques

FAZAÉ développe un outil d'envoi de newsletters. Pour celui-ci, j'ai mis

en place des graphiques dynamiques de suivi des envois au cours d'une

période donnée.

J'ai utilisé, à cette occasion, flot, un plugin jQuery pour créer des

graphiques.

Cet outil utilise des sources de données variables. Une fois, le jeu de

données récupérées, il faut spécifier le type de graphique souhaité. Sur

les graphiques ci-contre, j'ai choisit des graphiques de type « ligne » et

« points ».

32 Aude LE BRAS, M1 Informatique

Exemple de graphique avec l'outil FLOT

Page 33: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Bilan

Connaissances

Environnement de travail

Les points à améliorer

33 Aude LE BRAS, M1 Informatique

Page 34: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Connaissances

La première connaissance acquise au travers de ce stage est bien

évidemment le framework Symfony, qui je pense sera un atout

formidable dans ma vie active. Bien que je ne maîtrise pas encore

parfaitement cet outil, avant de pouvoir l'utiliser à peu près correctement

(comprendre l'organisation des fichiers ; la façon de programmer,

notamment le DQL ; …), j'ai passé quelques jours « dans le brouillard ».

Formation, que je n'aurais pas à recommencer.

Le deuxième point est la bibliothèque jQuery, qui m'a été très utile dans

les différents projets, puisqu'il permet de rendre un site plus agréable et

plus interactif.

Et enfin, j'ai découvert Joomla!, bien que je n'ai pas travaillé très

longtemps sur ce CMS. Je connais désormais, son mode de

fonctionnement, son organisation et ses limites. Ce qui est, là aussi, un

très bon atout, puisqu'il reste encore très utilisé dans diverses sociétés.

Environnement de travail

Après, un stage dans le domaine public (CHU de Nantes), un dans le

privé mais dans une grande société multinationale (France Télécom). J'ai

pu cette année, découvrir une autre manière de travailler dans une PME.

Du fait de sa petite taille, l'ambiance y est plus conviviale, la quantité de

travail y est également plus importante. Un autre avantage, non

négligeable est que lorsque j'avais besoin d'un logiciel ou d'une levée de

restriction d'accès à certains sites internet, je n'ai pas eu à demander une

autorisation à une personne, souvent en vacances en cette période de

l'année, ce qui m'avait beaucoup ralenti dans mes stages précédents.

J'ai également été très séduite par le wiki et bug-tracker (ces outils sont

présentés page 10), le wiki particulièrement m'a été d'une grande aide au

cours de mon stage.

34 Aude LE BRAS, M1 Informatique

Page 35: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Les points à améliorer

Le bilan personnel que je pourrai tirer de ce stage, c'est qu'il faut

absolument que je travaille la finition de mes travaux, en effet, je laisse

facilement passer des petites « coquilles », qui font de mes travaux,

quelque chose de bâclé et de non-professionnel. Je retiens donc de ce

stage qu'il faut que je passe plus de temps sur les tests et ce à chaque fois

que je modifie un bout de code même si à priori il n'y a aucun lien entre

ma modification et le reste du code.

Bien que je comprenne parfaitement l'utilité de bien commenter mon

travail, j'ai parfois du mal à le faire automatiquement quand le code ne

me semble pas compliqué. Je pense tout de même, avoir bien progressé

sur ce point.

35 Aude LE BRAS, M1 Informatique

Page 36: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Conclusion

36 Aude LE BRAS, M1 Informatique

Page 37: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

En conclusion, j'ai beaucoup appris durant ce stage, tant en

connaissances techniques, que sur la façon de travailler.

Ce stage m'a également permis, de confirmer mon souhait de travailler

dans la programmation web.

Étant donné qu'il me reste un mois de stage, je vais tenter de le mettre à

profit, pour améliorer les points décrits précédemment. J'espère

également avoir l'occasion d'utiliser les web-services pour le site SIEA,

puisque à l'heure actuelle, certains problèmes n'étant pas de notre ressort,

ne permettent pas leur utilisation.

Comme je l'ai dit dans le bilan, FAZAÉ, m'a permis de découvrir une

autre ambiance de travail, par rapport à mes expériences précédentes. Je

souhaite pour l'année prochaine, effectuer mon stage dans l'université

d'Oklahoma, afin de parfaire ce tour d'horizon, des différents lieux de

travail.

37 Aude LE BRAS, M1 Informatique

Page 38: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

ANNEXES

Table des illustrations

Lexique

Plaquette de présentation SIEA

38 Aude LE BRAS, M1 Informatique

Page 39: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Index des illustrations

Page d'administration Joomla!..............................................................................................................................................................................................12Schéma des technologies utilisées par Symfony..................................................................................................................................................................15Schéma du modèle MVC......................................................................................................................................................................................................16Exemple d'utilisation de l'ORM Doctrine.............................................................................................................................................................................17Exemple d'un fichier YAML.................................................................................................................................................................................................18Graphique humoristique sur le temps d'un programmeur.....................................................................................................................................................19www.siea.fr...........................................................................................................................................................................................................................21www.reso-liain.fr..................................................................................................................................................................................................................21Page de connexion................................................................................................................................................................................................................22Menu des utilisateurs "SIEA"...............................................................................................................................................................................................22Menu des utilisateurs "SIEA"...............................................................................................................................................................................................22Menu des utilisateurs "FAI"..................................................................................................................................................................................................22Étapes d'une inscription........................................................................................................................................................................................................23Exemple du script permettant de copier les adresses............................................................................................................................................................24Exemple de script permettant de cacher un champ selon la valeur d'un autre.....................................................................................................................24Exemple du widget CP/ville.................................................................................................................................................................................................25GoogleMap mis en place sur le site SIEA............................................................................................................................................................................26Étapes d'une inscription "prospect"......................................................................................................................................................................................27Filtre de la page « Valider les inscriptions ».........................................................................................................................................................................28Liste des inscriptions............................................................................................................................................................................................................28Actions possibles selon le statut d'une inscription................................................................................................................................................................29Exemple de suivi sur le site SIEA........................................................................................................................................................................................31Exemple de suivi sur le site GIGALIS.................................................................................................................................................................................31Exemple de graphique avec l'outil FLOT ............................................................................................................................................................................32

39 Aude LE BRAS, M1 Informatique

Page 40: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Lexique

S.S.I.I. : Société de Service en Ingénierie Informatique

C.M.S. : Content Management Système ou système de gestion de

contenu, c'est une famille de logiciels destinés à la conception et à la

mise à jour dynamique de site web ou d'application multimédia.

C.R.M. : Customer Relationship Management ou gestion de la relation

client, ceci consiste à savoir cibler, attirer et conserver les bons clients.

Framework : fournit un ensemble d'outils et de fonctions facilitant la

création de tout ou d'une partie d'un système.

O.R.M. : Object Relational Mapping ou mapping objet-relationnel est

une technique de programmation informatique qui crée l'illusion d'une

base de données orientée objet à partir d'une base de données

relationnelle.

Templates : correspond à la vue dans le modèle MVC, c'est la mise en

page des données.

Plugins : ou module d'extension, complète le logiciel hôte pour lui

apporter de nouvelles fonctionnalités.

Module : page ou groupe de pages qui ont un but similaire.

jQuery : bibliothèque JavaScript libre qui porte sur l'interaction entre

JavaScript (comprenant AJAX) et HTML. Il a pour but de simplifier des

commandes communes de JavaScript.

Widget : contraction de window et gadget, c'est un élément de base d'une

interface graphique.

X/Y : système de coordonnées utilisé par les systèmes d'information

géographique.

A.P.I. : Application Programming Interface ou interface de

programmation, elle permet l'interaction des programmes les uns avec les

autres.

DQL : langage de requête utilisée par Doctrine.

40 Aude LE BRAS, M1 Informatique

Page 41: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Webographie

http://www.php.net/manual/fr/

http://api.jquery.com/

http://www.symfony-project.org/jobeet/1_4/Doctrine/fr/

http://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal

41 Aude LE BRAS, M1 Informatique

Page 42: Participation au développement de sites web · 2013. 4. 11. · Participation au développement de sites web 2009-2010 Merci à Loïc PICHOUD et Fabrice PICCINALI pour m'avoir permis

Participation au développement de sites web 2009-2010

Plaquette de présentation de SIEA

42 Aude LE BRAS, M1 Informatique