Développement d'un site web sur la ville de Lessines
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Année académique 2017-2018
HAUTE ECOLE DE LA COMMUNAUTE FRANCAISE EN HAINAUT
Catégorie technique
8A Avenue Victor Maistriau – 7000 Mons
Développement d’un site web sur la ville de
Lessines
Travail de fin d'études réalisé en vue de l'obtention du titre de bachelier en Informatique et
systèmes, orientation réseaux et télécommunications
Promoteur : De Bodt Julien Étudiant : Delcampe Thomas
Année académique 2017-2018
HAUTE ECOLE DE LA COMMUNAUTE FRANCAISE EN HAINAUT
Catégorie technique
8A Avenue Victor Maistriau – 7000 Mons
Développement d’un site web sur la ville de
Lessines
Travail de fin d'études réalisé en vue de l'obtention du titre de bachelier en Informatique et
systèmes, orientation réseaux et télécommunications
Promoteur : De Bodt Julien Étudiant : Delcampe Thomas
Remerciements
À l’issue de ce travail, je tiens à adresser mes
remerciements à Philippe Hocepied membre du
conseil communal de Lessines, ainsi qu’à Gianni
Matton et Éric Martin, camarades de classe,
pour leurs conseils sur la conception de mon
projet et leur aide durant les tests des
fonctionnalités.
Lessines, le 8 juin 2018
Thomas DelcampeHEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Table des matières
Table des illustrations................................................................................................................................... 6
Liste des tableaux ......................................................................................................................................... 7
Résumé ......................................................................................................................................................... 8
Abstract ...................................................................................................................................................... 10
Introduction................................................................................................................................................ 12
Analyse des besoins.................................................................................................................................... 13
Cahier des charges ................................................................................................................................. 13
GDPR....................................................................................................................................................... 15
Mise en conformité ............................................................................................................................ 16
Acteur externe........................................................................................................................................ 18
Site web ou application web ? ............................................................................................................... 19
Outils utilisés .............................................................................................................................................. 20
HTML 5 et CSS 3...................................................................................................................................... 20
PHP 7 ...................................................................................................................................................... 21
Pourquoi utiliser PHP ? ....................................................................................................................... 21
MySQL .................................................................................................................................................... 22
Pourquoi utiliser MySQL ? .................................................................................................................. 22
JavaScript ................................................................................................................................................ 22
Pourquoi utiliser JavaScript ? ............................................................................................................. 22
Sublime Text ........................................................................................................................................... 22
Pourquoi utiliser Sublime Text ? ........................................................................................................ 22
WampServer ........................................................................................................................................... 23
Pourquoi utiliser WampServer ? ........................................................................................................ 23
Firefox Quantum : Developer Edition .................................................................................................... 23
Pourquoi utiliser Firefox : Developer Edition ? .................................................................................. 23
Framework Laravel ................................................................................................................................. 23
Pourquoi utiliser le framework Laravel ? ........................................................................................... 23
Fonctionnalités ................................................................................................................................... 24
Conception ................................................................................................................................................. 25
Design pattern MVC ............................................................................................................................... 25
Méthodologie CRUD ............................................................................................................................... 26
Convention de nommage ....................................................................................................................... 26
Tables de la base de données............................................................................................................. 27
3HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Modèles .............................................................................................................................................. 27
Contrôleurs ......................................................................................................................................... 27
Vues .................................................................................................................................................... 27
Permissions......................................................................................................................................... 27
Base de données .................................................................................................................................... 28
Utilisateurs ............................................................................................................................................. 29
Catégories............................................................................................................................................... 30
Articles et pages ..................................................................................................................................... 30
Commerces............................................................................................................................................. 32
Signalements .......................................................................................................................................... 34
Ergonomie et design............................................................................................................................... 36
Design ................................................................................................................................................. 36
Ergonomie .......................................................................................................................................... 37
Développement .......................................................................................................................................... 40
Bases de données, relations et modèles ................................................................................................ 40
Agencement ........................................................................................................................................... 42
Authentification ..................................................................................................................................... 42
Catégories............................................................................................................................................... 43
Pages et articles...................................................................................................................................... 44
Création et modification .................................................................................................................... 44
Affichage ............................................................................................................................................. 45
Contact ............................................................................................................................................... 46
Commerces............................................................................................................................................. 46
Création et modification .................................................................................................................... 46
Affichage ............................................................................................................................................. 47
News ................................................................................................................................................... 47
Signalements .......................................................................................................................................... 49
Création et modification .................................................................................................................... 49
Affichage ............................................................................................................................................. 51
Réponses ............................................................................................................................................ 52
Permissions............................................................................................................................................. 53
Tests et sécurisation ................................................................................................................................... 54
Sécurité................................................................................................................................................... 54
Côté utilisateur ................................................................................................................................... 54
4HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Côté serveur ....................................................................................................................................... 56
Mise en production .................................................................................................................................... 57
Référencement ....................................................................................................................................... 57
Maintenance .......................................................................................................................................... 58
Erreurs .................................................................................................................................................... 58
Hébergement ......................................................................................................................................... 58
Sauvegarde ............................................................................................................................................. 58
Conclusion .................................................................................................................................................. 59
Lexique ....................................................................................................................................................... 61
Bibliographie .............................................................................................................................................. 62
Liste des annexes........................................................................................................................................ 65
5HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Table des illustrations
Figure 1 : Étapes de conception d'une application web ............................................................................ 13
Figure 2 : Site web vs application web [ thecodingbull.com, novembre 2017, Justin Chan Tsan Ting ] .... 19
Figure 3 : Logos de HTML 5 et CSS 3........................................................................................................... 20
Figure 4 : Pourcentage d'utilisation des langages de programmation côté serveur par les sites web.
[W3Techs.com, 9 juin 2018] ....................................................................................................................... 21
Figure 5 : Schéma du MVC [Geekboots, 08 avril 2017] .............................................................................. 25
Figure 6: Diagramme UML de la base de données..................................................................................... 28
Figure 7 : Statistiques d'utilisation des résolutions d'écrans sur une période d'un an à l'échelle mondiale
[StatCounter, may 2018] ............................................................................................................................ 37
6HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Liste des tableaux
Tableau 1 : Table "users" ............................................................................................................................ 29
Tableau 2 : Table "password_resets" ......................................................................................................... 29
Tableau 3 : Table "taxonomies" ................................................................................................................. 30
Tableau 4 : Table "posts"............................................................................................................................ 31
Tableau 5 : Table "shops" ........................................................................................................................... 32
Tableau 6 : Table "shops_infos" ................................................................................................................. 33
Tableau 7: Table "shops_news" ................................................................................................................. 33
Tableau 8 : Table "tickets".......................................................................................................................... 34
Tableau 9: Table "tickets_locations" .......................................................................................................... 35
Tableau 10 : Table "tickets_responses" ..................................................................................................... 35
Tableau 11 : Relations établies entre les modèles ..................................................................................... 41
7HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Résumé
Ce rapport de Travail de Fin d’Études détaille la création d’une application web sur la ville de
Lessines, qui pourra permettre à ses utilisateurs de s’authentifier et de créer des pages et articles.
L’application contiendra aussi des fonctionnalités communautaires, permettant :
La création de signalements géo localisé et de réponses par le service travaux ou les
échevins communaux,
La création de commerces et d’annonces sur ceux-ci par leur propriétaire,
Une page communautaire permettant les échanges courts entre utilisateurs du site,
Un calendrier des événements.
Ce document est décomposé en fonction des étapes principales de la création d’une application
web.
La première étape est l’analyse des besoins, dans laquelle j’analyserai le cahier des charges et le
mettrai en conformité avec la GDPR, qui a restreint les pages et fonctionnalités pouvant être
créées sur le site.
Ensuite vient la sélection des outils utilisés, à savoir les langages :
HTML 5,
CSS 3,
PHP 7,
JavaScript,
Le framework Laravel,
Le système de gestion de bases de données MySQL avec le moteur InnoDB.
Et les outils :
Firefox Quantum : Developer Edition,
Sublime Text,
WampServer.
La seconde étape a été la conception du site, dans laquelle j’ai choisi de créer l’intégralité de
l’application à l’aide du design pattern « MVC » et de la méthodologie «CRUD ». Dans la même
étape, j’ai modélisé chaque fonctionnalité du site en créant les tables des bases de données en
fonction de l’analyse des besoins.
L’ergonomie et le design du site ont aussi été conceptualisés, et il a été choisi de respecter les
résolutions d’écran les plus utilisées à l’heure actuelle afin de rendre le site adaptable à tous les
appareils. Ces résolutions sont la largeur de 1366 pixels pour les desktops, 360 pour les
smartphones et 728 pour les tablettes.
La troisième étape a été le développement de toutes les fonctionnalités précédemment
modélisées grâce au framework Laravel et de ses bibliothèques officielles ou communautaires.
Plusieurs API Google ont été utilisées afin de créer des cartes géo localisées et géo localisables.
8HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Différents rôles associés à des permissions ont aussi été créés afin de limiter les fonctionnalités
du site aux utilisateurs adéquats.
La quatrième étape a été la recherche de toutes les failles de sécurité d’une application web et
la sécurisation de celles-ci. Toutes les fonctionnalités du site ont aussi été testées par des acteurs
externes afin de détecter des bugs, d’autres failles de sécurité et recevoir des avis sur l’interface
afin de rendre l’application plus user-friendly.
Enfin, la dernière étape consiste au déploiement de l’application sur Internet et à l’optimisation
de son référencement naturel afin qu’elle soit rapidement accessible sur Google. Ainsi que divers
points permettant de tenir l’application à jours, de surveiller le comportement et l’avis des
utilisateurs afin de pouvoir l’améliorer, gérer les erreurs, l’hébergement et les sauvegardes du
site.
9HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Abstract
This end-of-studies report details the creation of a web application on the city of Lessines, which
will allow its users to authenticate themselves and create pages and articles. The application will
also contain community features, allowing:
The creation of geolocalized reports and answers by the works department or the
municipal aldermen,
The creation of businesses and ads on them by their owner,
A community page allowing short exchanges between users of the site,
A calendar of events.
This document is broken down according to the main steps in creating a web application.
The first is the needs analysis, in which I will analyze the specifications and bring them into
compliance with the GDPR, which has restricted the pages and features that can be created on
the site.
Then comes the selection of the tools used, namely the languages :
• HTML 5,
• CSS 3,
• PHP 7,
JavaScript,
The Laravel framework,
MySQL database management system with InnoDB engine.
And the tools:
• Firefox Quantum : Developer Edition,
• Sublime Text,
• WampServer.
The second step was the design of the site, in which I chose to create the entire application using
the "MVC" design pattern and the "CRUD" methodology. In the same step, I modeled each
functionality of the site by creating database tables based on the needs analysis.
The ergonomics and design of the site were also conceptualized, and it was chosen to respect
the screen resolutions most used at present in order to make the site adaptable to all devices.
These resolutions are the width of 1366 pixels for desktops, 360 for smartphones and 728 for
tablets.
The third step was the development of all the functionalities previously modelled using the
Laravel framework and its official or community libraries. Several Google APIs have been used to
create geolocated and geolocatable maps. Various roles associated with permissions have also
been created to limit the site's functionality to the appropriate users.
10HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
The fourth step was the search for all the security holes in a web application and securing them.
All site features have also been tested by external players to detect bugs, other security holes
and receive feedback on the interface to make the application more user-friendly.
Finally, the last step consists in deploying the application on the Internet and optimizing its
natural referencing so that it is quickly accessible on Google. As well as various points to keep the
application up to date, monitor user behavior and feedback to improve it, and manage site errors,
hosting and backups.
11HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Introduction
Dans le cadre de ma dernière année de « bachelier en informatique et systèmes orientation
réseaux et télécommunications option sécurité », il m’a été demandé de réaliser un Travail de
Fin d’Études pour lequel le choix du sujet et des techniques utilisées est entièrement libre.
Voulant améliorer le site communal de ma ville de résidence, j’ai décidé d’en faire mon projet.
J’ai ainsi choisi de concevoir une application web qui sera dotée, d’une part des éléments
standard d’un site, c’est-à-dire d’une plateforme d’authentification utilisateur et de création et
gestion de pages, mais surtout de plusieurs fonctionnalités communautaires.
Alors que les communes sont chargées de fournir un service à leurs citoyens, leurs sites sont la
plupart du temps dénués de tels services. Ainsi, mon application permettra à tous les citoyens de
créer une page dédiée à leur commerce, entreprise ou association et d’y créer des articles afin
de plébisciter celui-ci.
Ensuite, une plateforme de tickets sera créée, permettant aux citoyens de créer des signalements
géo localisés sur les problèmes dans la ville. Ces tickets permettront les échanges entre leur
créateur et les personnes habilitées, tels que les échevins ou le service travaux.
De plus, l’application contiendra une page permettant à chaque citoyen d’interagir entre eux au
format réseau social. Un calendrier des événements Lessinois devra aussi être créé.
Ce rapport s’attellera à relater l’ensemble des étapes permettant de réaliser cette application.
La première étape sera l’analyse des besoins, dans laquelle sera établi un cahier des charges en
prenant en considération les avis d’un échevin communal et les réglementations imposées par le
GDPR. Dans cette étape seront ensuite sélectionnés les outils à utiliser afin de réaliser au mieux
ce projet.
Viendra ensuite la phase de conception, où les méthodologies et patrons de conception
permettant de réaliser l’application seront définis, et les fonctionnalités du site modélisées de
manière à réaliser efficacement l’étape suivante.
Ensuite, le rapport décrira toutes les étapes de développement du site, les problèmes rencontrés
et les solutions apportées. Cette étape débouchera directement sur la phase de tests de
l’application et l’analyse de sécurité de celle-ci.
Pour finir, le site sera mis en production sans oublier de gérer le référencement sur les moteurs
de recherche et la gestion de la maintenance et des retours utilisateurs.
Ce rapport sera clôturé par une conclusion relatant l’état d’avancement du projet et les
améliorations à lui apporter.
12HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Analyse des besoins
La conception d’une application web se réalise en plusieurs étapes.
1) Analyse des besoins : Cette étape consiste en la réalisation d’un cahier des charges
décrivant toutes les fonctionnalités de l’application et ses contraintes.
2) Conception : La phase de conception consiste à représenter et modéliser les éléments et
fonctionnalités du cahier des charges de manière à pouvoir réaliser le programme.
3) Réalisation : Cette phase consiste au développement des fonctionnalités conçues lors de
la précédente étape.
4) Tests : Chaque fonctionnalité développée doit être testée et vérifiée.
5) Mise en production : L’application réalisée et les tests validés, la dernière étape consiste
à publier l’application web et à surveiller son évolution auprès du public.
Analyse des Mise en
Conception Réalisation Tests
besoins production
Figure 1 : Étapes de conception d'une application web
Cahier des charges
Ce Travail de Fin d’Études consiste au développement d’une application web consacré à la ville
de Lessines. Celui-ci disposera de fonctionnalités permettant de créer, éditer et afficher des
pages classiques pour le site d’une ville, telles que : informations utiles, loisirs, économie,
membres du conseil communal, services ... Ainsi que de pages d’articles triés par catégories tels
que des actualités, des travaux, des évènements, des enquêtes publiques … Et d’un calendrier
général recensant tous les événements, travaux planifiés, débuts et fins d’enquêtes … Toutes ces
pages devront être facilement accessibles et lisibles pour tous les utilisateurs.
En plus de ces fonctionnalités habituelles pour un site communal, ce projet comportera une
multitude de fonctionnalités dédiées à la communauté.
Communauté
Une page permettra les conversations publiques entre chaque utilisateur du site, au format
réseau social : chaque utilisateur pourra y rédiger un article, qui pourra être répondu ou
commenté.
Cette fonctionnalité permettra à chaque citoyen le désirant de s’exprimer sur la ville ou le site.
Ils pourront par exemple y féliciter les fonctionnalités du site, en proposer de nouvelles, des
améliorations … Ou parler des nouveautés de la ville, proposer des idées aux membres du conseil
communal …
13HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Commerces
Cette fonctionnalité communautaire permettra à chaque citoyen d’enregistrer un commerce,
entreprise ou association dans la base de données et d’y définir ses informations : nom, adresse,
informations de contact, horaires d’ouvertures.
Après l’ajout du commerce, une page contenant les données pré remplies sera disponible sur le
site et permettra au propriétaire du commerce d’y rédiger des annonces diverses : description
complète de leurs services, nouveaux services, nouveaux produits, jour de fermeture
extraordinaire …
Cette fonctionnalité sur un site communal permet, pour les citoyens de pouvoir visualiser la liste
de leurs commerces ainsi que leurs annonces aisément dans un même site, mais permet surtout
aux commerçants de disposer gratuitement d’une présence en ligne sans avoir le besoin
d’imaginer, acheter, gérer … eux-mêmes leur propre site Internet.
Signalements
La fonctionnalité communautaire la plus importante est la création de signalements. Cette
fonctionnalité permet :
À chaque citoyen de déclarer facilement un signalement : Dégradations aux infrastructures, à la
voirie, sentiers ou trottoirs impraticables, poubelles qui débordent, dépôts clandestins … En plus
du type de signalement, ceux-ci seront accompagnés d’un nom, d’une photo éventuelle et d’une
courte description, mais aussi d’une géolocalisation soit manuelle en écrivant l’adresse, soit
automatique en déplaçant un curseur sur une carte Google Maps.
À chaque personne habilitée (échevins, service travaux …) de modifier le statut du signalement,
ainsi que d’y répondre. Les citoyens peuvent aussi répondre sur leurs propres tickets.
De les visualiser, de plusieurs manières :
Dans une liste paginée reprenant les informations essentielles de chaque signalement.
Dans une carte Google Maps disposant d’un marqueur par signalement.
Individuellement, en visualisation toutes les données du signalement ainsi que toutes les
réponses apportées par le créateur du signalement ou les personnes habilitées.
14HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
GDPR
Le General Data Protection Regulation, ou « règlement général sur la protection des données »
en français est un texte de loi européen qui vise à protéger les données de tout individu au sein
de l’Union européenne. Ce règlement s’applique à chaque entité1 en et hors UE qui traitent2 les
données personnelles de citoyens européens.
Par données personnelles, la GDPR entend « toutes les données personnelles ou impersonnelles
qui révèlent l’entité d’un individu sont uniques à cette personne ».
Données personnelles classiques :
Nom et prénom
Adresse du domicile
Numéro de téléphone
Date et/ou lieu de naissance
Carte d’identité
Lieu de travail ou d’école
Données personnelles digitales :
Adresse IP
Comptes ou posting sur les réseaux sociaux
Métadonnées
Adresse email
Données sensibles
Données génétiques et biométriques
Orientation politique et religieuse
Orientation sexuelle
1
Le terme « entité » renvoie à chaque personne, physique ou morale
2
Par « traiter », on entend tout ce que l’on peut faire avec une donnée personnelle : Collecte, enregistrement,
intégration, diffusion, organisation, sauvegarde, transfert, suppression…
15HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Le GDPR propose une multitude de règles permettant de protéger toutes ces données, entre
autres :
Consentement : Pour que les données personnelles soient traitées, chaque individu doit
donner son consentement.
Opt-in : Les checkbox permettant d’accepter un élément sur un site « CGU, newsletter,
… » ne peuvent pas être cochées par défaut : l’individu doit obligatoirement cliquer lui-
même sur la case pour accepter.
Chiffrement et sécurité : Les données personnelles doivent être protégées, la GDPR
recommande d’utilise le chiffrement. En cas de brèches de sécurité, les personnes
concernées doivent en être averties dans les 72 heures.
Renseignement : L’individu doit pouvoir connaître toutes ses données personnelles qui
sont traitées, à quoi sont-elles utilisées, comment y accéder, les modifier ou les
supprimer.
Accès : L’individu doit pouvoir accéder à ses données traitées dans un format intelligible.
Droit à l’oubli : L’individu doit pouvoir supprimer toutes ses données personnelles.
Mise en conformité
Le GDPR étant obligatoire pour tout le monde à dater du 25 mai 2018, j’ai été obligé de mettre
en conformité mon cahier des charges et donc l’ensemble de mon projet avec ce traité, sous
peine de disposer d’une application web illégale.
Pages classiques
Le cahier des charges comprend la création de diverses pages statiques classiques pour le site
d’une ville, celles-ci se sont vues lourdement impactées par la GDPR.
En effet, la grande majorité des pages devaient contenir des données personnelles (adresses mail
ou fiche de personnes) :
Services : L’objectif pour ses pages était de présenter succinctement chaque service de la
ville de Lessines, mais surtout d’y renseigner le numéro de téléphone et adresse email du
dit service. Le problème étant que la commune n’utilise pas des adresses email
impersonnelles (de type « travaux@lessines.be »), mais des adresses email personnelles
(de type « delcampe-thomas@lessines.be »). Ces adresses étant des données
personnelles permettant d’identifier un individu, il est interdit de les traiter.
Membres du conseil communal : Les membres du conseil communal devaient être
enregistrés dans une table afin d’être réutilisés dans une page comprenant tous les
membres, voire potentiellement dans d’autres pages du site. Ces données étant
personnelles, je ne peux pas les traiter.
16HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
La publication de pages dans lesquelles il manque des données ou dans lesquelles ses données
ne se seraient que partielles n’étant pas envisageable, ses pages ne peuvent pas être crées.
Afin de pouvoir complètement créer ces pages, il faudrait que je dispose de l’autorisation
explicite de chaque personne concernée (chaque chef de service, chaque membre du conseil
communal, …) afin de pouvoir traiter leurs données. Ne voulant pas créer de pages incomplètes,
la liste des membres du conseil communal, par exemple, ne pourrait être créée sans
l’autorisation d’une seule personne.
Conditions Générales d’Utilisation
Une page autorisant le site à traiter les données personnelles de ses utilisateurs doit être créée.
Parmi ces données, le site traitera :
Leurs adresses email,
Leur nom,
Leur(s) adresse(s) IP.
Cette page doit aussi renseigner :
Où ces données ont été ou seront traitées,
Où les modifier, voir ou supprimer.
Diverses informations doivent aussi y être renseignées :
La raison du traitement de ces données,
La durée de leur stockage,
Les coordonnées du « Data Protection Officer ».
Inscription
La page d’inscription devra contenir une checkbox interdisant l’accès aux utilisateurs n’ayant pas
accepté les CGU.
Cette checkbox, ainsi que tous les autres formulaires de consentements ne pourront pas être
cochés par défaut.
Profil d’utilisateur
L’utilisateur pourra y voir et modifier ses données personnelles. Il lui sera aussi possible d’exercer
son droit à l’oubli en supprimant facilement son compte.
Sécurité
Le site implémentera le « HTTP Strict Transport Security » (HSTS) et ne sera donc accessible qu’en
HTTPS, tout le trafic sera donc chiffré à l’aide d’un certificat Comodo Positive SSL installé sur
l’hébergement de production.
17HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Acteur externe
En mars 2018, j’ai pu lire dans un article de L’Avenir que Philippe Hocepied, tête de liste Ecolo à
Lessines et membre du conseil communal, réclamait un système de signalements afin de
permettre aux Lessinois de déclarer des problèmes dans la ville.
Celui-ci relevait le fait que les Lessinois ne savent pas à quel service communal s’adresser
lorsqu’un problème survient dans leur environnement, mais aussi qu’aucun enregistrement des
demandes faites par les moyens traditionnels (administration communale, téléphone) n’était
réalisé, ce qui ne permet pas aux citoyens de disposer d’un suivi de la demande formulée, ni de
visualiser la quantité de travail que cela représente.
Le système de signalements étant la principale fonctionnalité de mon application web, je l’ai donc
contacté afin de lui demander ses attentes dans un tel système, et lui ai présenté mon projet.
Lors de ces échanges, j’ai pu voir que les fonctionnalités prévues dans mon cahier des charges
étaient les mêmes dont il voudrait disposer sur un site parallèle à la ville, mais m’a aussi apporté
quelques conseils.
J’ai ainsi modifié ou pris en considération certains points de mon application, tels que :
Modification du nom de la fonctionnalité « Tickets » en « Signalements », l’utilisateur
lambda n’étant pas familier avec la première expression ;
Afficher la date de création et de clôture d’un signalement ;
Créer une « boite à idée » permettant aux citoyens d’interagir et donc de fournir des avis,
suggestions, conseils, remerciements … sur le site ou la ville. Cette boite à idées
correspond à la fonctionnalité « communauté » du cahier des charges ;
Afficher un lien sur les pages de tickets qui rédigera les utilisateurs vers la fonctionnalité
« communauté ».
Il m’a aussi conseillé de contacter et présenter mon application aux services communaux afin de
récolter leurs critiques, étant donné que c’est eux qui devront éventuellement traiter les
signalements. Cette prise de contact était prévue et sera effectuée après la mise en production
de la première version de l’application.
18HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Site web ou application web ?
Le rôle d’un site web est de fournir et présenter du contenu informatif à ses visiteurs. Ses pages
de contenu sont statiques, donc ne sont pas ou très rarement éditées. Les sites web sont
développés en HTML, CSS et parfois un peu de JavaScript. Étant statique, leur développement ne
requiert pas de langage de programmation ni même de base de données. Par exemple, le site
web officiel de la ville de Lessines ne fait que diffuser des pages statiques et ne dispose pas de
fonctionnalités communautaires (commentaires, ajout d’articles …), c’est donc un site web.
Une application web est en revanche un site web dynamique qui permet à ses utilisateurs
d’accomplir certaines tâches spécifiques et ajouter du contenu dans les bases de données. Une
application web utilise donc des langages de programmation tels que PHP et des bases de
données.
Même si la ligne séparant les deux est floue (un site ne faisant que présenter du contenu statique,
mais disposant de fonctionnalités dynamiques pouvant être désigné par les deux noms), il est
très fréquent de confondre « application web » avec « application (Android, IOS…) » et dès lors
parler de « site web » pour tout ce qui est accessible via un navigateur Internet.
Étant donné que mon projet consiste principalement au développement de fonctionnalités
interactives (ajout, édition et suppression d’articles, de signalements, de commerces …), il
convient mieux de parler d’une application web que d’un site web, qui ne ferait que présenter
du contenu à ses visiteurs dans sa forme la plus basique.
Figure 2 : Site web vs application web [ thecodingbull.com, novembre 2017, Justin Chan Tsan Ting ]
19HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
Outils utilisés
HTML 5 et CSS 3
La version 5 du HyperText Markup Language est la dernière révision majeure de ce langage de
balisage, développé par le W3C. Le HTML 5 est utilisé pour la représentation des pages web en
permettant d’écrire l’hypertexte, de structurer sémantiquement et logiquement ainsi que de
mettre en forme des pages, d’inclure des ressources multimédias, des formulaires de saisie et
des programmes informatiques. HTML permet de créer des documents interopérables avec une
multitude d’autres langages web, se conformant ainsi aux exigences du web.
Dans ce projet, HTML est utilisé dans sa version 5, qui a ajouté de nombreux nouveaux éléments
afin de limiter l’utilisation des balises « vides » et , et améliore ainsi l’accessibilité
d’un site. Il convient ainsi d’utiliser des balises de type , , , au
lieu des .
HTML 5 dispose aussi de nombreux nouveaux éléments dédiés aux applications web et à
l’interactivité : nouveaux types d’, , , et bien d’autres… ainsi que des API
JavaScript nativement intégrées dans le langage.
Associé au HTML, le CSS pour « Cascading Style Sheets » est un langage permettant de décrire la
présentation des documents HTML et XML. Les éléments de ce langage sont eux aussi définis par
le W3C, et son développement et mise à jour se font en même temps que celles de HTML.
Il n’y a pas de solution alternative à HTML et CSS.
Figure 3 : Logos de HTML 5 et CSS 3
20HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
PHP 7
PHP, pour Hypertext Preprocessor est un langage de programmation libre utilisé afin de produire
des pages web dynamiques via un serveur HTTP. PHP est le langage impératif orienté objet le
plus utilisé afin de créer des applications web. Facebook et Wikipedia sont, par exemple, créés
en PHP.
Dans ce projet, la version 7.1, dernière version disponible sur l’hébergement web est utilisé.
Pourquoi utiliser PHP ?
J’ai choisi de développer mon application web avec le langage PHP pour toute une série de
questions.
Facilité d’apprentissage : PHP est un langage simple à apprendre, il est possible de faire
beaucoup juste en apprenant quelques simples fonctions.
Vitesse : PHP utilisant sa propre mémoire, la charge de travail et les temps de chargement
sont réduits. Les temps de traitements des pages sont donc très réduits.
Peu cher : PHP est open source, facile à apprendre, et ses fonctionnalités peuvent être
rapidement étendues, ses serveurs multipliés. Il est gratuit, ne dispose pas de charges
éventuelles, et est rapide à mettre en place, diminuant les couts du personnel.
HTML-friendly : PHP est le langage le plus interopérable avec HTML, son intégration est
donc très facile, le code PHP peut être écrit dans des fichiers HTML et inversement.
MySQL-friendly : le support entre PHP et les bases de données MySQL, couramment
utilisées sur le web est optimal.
Documentation et popularité : Facilitant encore plus son apprentissage, la communauté
de PHP est énorme, il est donc aisé de trouver une réponse à ses problèmes grâce aux
communautés de développeurs ou aux documentations (officielles ou non) de PHP.
Utilisation : En accord avec les points précédents, PHP est toujours le langage de
programmation le plus utilisé pour les sites web, avec 83.5% de parts de marché.
Figure 4 : Pourcentage d'utilisation des langages de programmation côté serveur par les sites web. [W3Techs.com, 9 juin 2018]
21HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
MySQL
MySQL est le système de gestion de bases de données relationnelles (SGBDR) le plus utilisé au
monde, tant par les applications web que par les professionnels en concurrence à Oracle et
Microsoft SQL Server.
Pourquoi utiliser MySQL ?
MySQL est développé dans un souci de performances élevées en lecture, ce qui convient
parfaitement aux applications et sites web. Il est aussi libre et open source.
MySQL dispose de deux moteurs de base de données principaux : MylSAM et InnoDB. Ce dernier
étant le seul à supporter les transactions, les clefs étrangères et l’intégrité automatique des
tables, c’est celui-ci qui sera utilisé dans ce projet. Si MylSAM ne permet pas de garantir la
cohérence des données d’une application, ses performances sont cependant, en théorie
meilleure qu’InnoDB.
De même, MyISAM n’est plus mis à jour, contrairement à InnoDB.
JavaScript
JavaScript est un langage de programmation de scripts orienté objet à prototype qui est
principalement employé dans les pages web interactives, mais aussi pour les serveurs. L’orienté
objet à prototype signifie que ses bases sont fournies par des objets qui ne sont pas des instances,
mais sont chacun équipés de constructeurs permettant de créer leurs propriétés, telles que
l’héritage personnalisé.
Pourquoi utiliser JavaScript ?
Hormis quelques éventuels courts scripts du côté client, l’utilisation du JavaScript n’était pas
initialement définie.
J’ai cependant dû l’utiliser du côté serveur afin d’utiliser l’API Google Maps, permettant la
géolocalisation des signalements.
Sublime Text
Sublime Text est un éditeur de texte pour code. Il est codé en C++ et Python et a initialement été
conçu comme une extension de Vim. Il prend en charge plus de 44 langages de programmation.
Pourquoi utiliser Sublime Text ?
Sublime Text est ici utilisé dans sa dernière version. Il n’y a pas de réel atout à choisir un éditeur
de texte plutôt qu’un autre, autre que l’appréciation du développeur. Sublime Text est simple,
dispose d’une interface moderne, permet d’ouvrir l’entièreté d’un dossier dans une sidebar
permettant de naviguer aisément dans les divers fichiers d’un projet, …
22HEH campus Technique Développement d’un site web Rapport
Section informatique sur la ville de Lessines Thomas Delcampe
Année académique 2017-2018
WampServer
WAMP est un acronyme signifiant Windows Apache MySQL PHP. Le rôle de ce logiciel est
d’installer les composants requis au développement d’un site web localement sur une machine
Windows.
Apache est le serveur web frontal permettant de répondre aux requêtes HTTP des clients,
PHP est le langage de programmation le plus utilisé des sites web,
MySQL est le SGBDR,
Windows assure l’attribution des ressources à ces composants.
Pourquoi utiliser WampServer ?
WampServer dispose de nombreux concurrents permettant de faire du WAMP, dont les
différences consistent surtout au nombre de modules installés et la version de ceux-ci.
WampServer est régulièrement tenu à jour et dispose de tous les composants requis à mon
projet.
Firefox Quantum : Developer Edition
Cette version du navigateur internet a été repensée pour être plus rapide et plus puissante que
jamais. Elle inclut entre autres un nouveau moteur CSS ultra rapide, des outils de
développements permettant de modifier son code directement dans le navigateur, d’un
débuggeur JavaScript, des grilles CSS, d’une console et de différents outils relatifs au réseau, à la
sécurité, à la mémoire et aux performances d’une application web.
Pourquoi utiliser Firefox : Developer Edition ?
J’ai utilisé Firefox dans cette version, tout d’abord car ce navigateur dispose de toutes les
possibilités possibles pour l’affichage d’une page web, il n’y aura donc pas de problèmes de
comptabilité envers les autres navigateurs avec une application développée sur celui-ci. La
version développeur a été utilisée afin de pouvoir utiliser la multitude d’outils dont elle dispose
afin d’aider et déboguer le développement d’une application.
Framework Laravel
D'après Wikipedia un framework est un "ensemble cohérent de composants logiciels structurels,
qui sert à créer les fondations ainsi que les grandes lignes de tout ou d’une partie d'un logiciel".
Il existe des frameworks pour tous les langages de programmation.
Laravel est un framework d’application web PHP permettant de concevoir des applications web.
C’est le framework PHP le plus populaire. Le framework Laravel n’a pas conçu chacune de ses
fonctionnalités, mais a agi de la même façon qu’un développeur : plutôt que de tout réinviter, il
a utilisé ce qui se faisait de mieux dans d’autres framework ou bibliothèques. Laravel regroupe
donc les meilleures bibliothèques existantes au sein d’un seul framework.
Pourquoi utiliser le framework Laravel ?
L’utilité d’un framework est d’éviter de passer du temps à développer des éléments déjà
développés par d’autres personnes souvent plus compétentes. De plus, ces éléments ont étés
23Vous pouvez aussi lire
