Modélisation de la BD et architecture du site

Projet : site web de gestion d’itinéraires de voyage
Partie 1 (modélisation et architecture du site)
UCBL - Département Informatique de Lyon 1 – LIF4 - automne 2014
1
Description générale du projet
Le projet est à réaliser en binôme ou individuellement (pas de trinôme). Il porte sur la création d’un site
Web permettant de gérer des itinéraires de voyage, de saisir ou d’importer de nouveaux itinéraires, et enfin de
visualiser un itinéraire sur une carte et proposer des recommandations.
Partie 1 (TP5) Modélisation de la base de données, architecture du site
Partie 2 (TP6) Ajout d’itinéraire dans la BD via un formulaire Web
Partie 3 (TP7) Intégration d’une base de données externe
Partie 4 (TP8) Visualisation cartographique et recommandations
Partie 5 (TP9) Cette séance est réservée à une soutenance de 10 à 15 minutes pour évaluer chaque binôme
(déroulement d’un scénario, explication de code, etc.). Le projet sera à rendre sur Spiral le jour même de
votre soutenance (avant minuit)
2
Rendu et notation du projet
2.1
Rendu du projet
Ce projet est à rendre avec les consignes de rendu suivantes :
– Le fichier rendu (un seul par binôme) aura une extension .zip et il doit inclure votre/vos noms à la
fois dans le nom de fichier et à l’intérieur des fichiers
– Ce fichier zip contiendra 3 fichiers :
– le répertoire contenant les pages de votre site (code commenté et indenté). Le projet sera évalué avec
le navigateur Mozilla Firefox, donc vérifiez le rendu de votre site avec ce navigateur !
– un fichier .txt qui contiendra le script SQL "exécutable” de création de votre base de données ainsi
que les requêtes demandées
– un rapport au format pdf de 6 pages maximum (annexes inclues), qui détaillera vos choix de
conception pour la BD, les problèmes rencontrés aussi bien au niveau organisationnel (travail en équipe)
qu’au niveau technique, les réponses aux questions, d’éventuelles explications sur les choix de logo/titre,
votre MCD (schéma E/A) et votre MLD (schéma Relationnel), et toute information que vous jugerez
pertinente de préciser.
– Ce fichier zip est à rendre le jour de la séance de TP9 avant minuit dans la zone de dépôt projet :
http://spiralconnect.univ-lyon1.fr/webapp/activities/activities.jsp?containerId=3651528
2.2
Notation
Le projet compte pour 30% dans la note de l’UE, et la note de projet se calcule ainsi :
1
1
1
soutenance + code + rapport
3
3
3
De plus, les conditions suivantes s’appliquent :
– Concernant la soutenance : au sein du binôme, la note de soutenance peut être différente pour les 2
étudiant-e-s (contrairement aux notes de code et rapport qui sont identiques)
– Concernant le code : toute ressemblance trop importante entre des projets sera sanctionnée par un 0 pour
la note de code et ce pour chacun des protagonistes
note_projet =
1
– Concernant le rapport : il doit être au format PDF, de 6 pages maximum, organisé, clair, au format
A4 et en police de taille 12, et l’orthographe sera prise en compte. Le contenu doit nous être instructif,
par exemple pour nous permettre de comprendre des choix de conception/programmation, d’évaluer des
problèmes organisationnels, ou d’obtenir des critiques constructives sur le sujet de projet. En résumé, il
vaut mieux un rapport de 3 pages avec des informations pertinentes plutôt qu’un rapport de 6 pages truffé
d’évidences ou de copier-coller...
2.3
Utilisation d’un framework
Il est possible d’utiliser un framework PHP ou CSS de votre choix, sous les conditions suivantes :
– Vous êtes autonome(s) : les chargé-e-s de TP ne sauront pas forcément vous aider en cas de problème avec
le framework
– Vous devez vous assurer que votre site fonctionnera sous XAMPP (sans configuration ni installation,
excepté la création de la BD)
– L’aide que procure le framework sera compensée par une plus grande exigence au niveau des résultats, en
terme de fonctionnalités, qualité du code, etc.
3
Documentation MySQL et PHP
Rien de tel que la consultation des docs officielles pour répondre à vos questions !
Documentation de MySQL (et les commandes SQL implémentées dans ce SGBD) :
http://dev.mysql.com/doc/refman/5.0/fr/index.html
Documentation de PHP et index des fonctions de PHP :
http://www.php.net/manual/fr/
http://www.php.net/manual/fr/funcref.php
4
Description de la partie "modélisation et architecture"
Dans cette première partie du projet, vous allez concevoir la base de données. Ensuite, vous créerez
l’architecture de votre site Web et deux premières pages (accueil et à propos).
4.1
Conception de la base de données
Objectifs de cette étape :
– Produire le modèle conceptuel (schéma entité/association) à partir des spécifications
– Produire le modèle logique (modèle Relationnel)
– Produire le script de création de la base
– Importer ce script dans MySQL (avec l’interface PhpMyAdmin)
4.1.1
Produire le schéma entité/association
Vous êtes libre(s) d’utiliser le logiciel de votre choix pour concevoir le schéma entité association, avec le
formalisme Merise. Vous inclurez dans votre rapport une exportation de votre schéma entité/association de
bonne qualité (lisible). Les spécifications de l’application Web à réaliser sont les suivantes :
Le site Web a pour objectif principal la gestion d’itinéraires de voyage. En particulier, le site doit permettre à
des utilisatrices de saisir un nouvel itinéraire de voyage, de commenter un lieu visité, de visualiser un itinéraire
sur une carte et de suggérer des recommandations de voyages.
Décrivons tout d’abord les utilisatrices. Celles-ci possèdent un pseudo, un nom, un prénom. Le pseudo est
unique et ne peut plus être modifié une fois choisi. On stocke la date d’inscription d’une utilisatrice à des
fins statistiques. Chaque utilisatrice possède également une à trois adresses, par exemple celle du domicile, du
travail et d’une éventuelle maison secondaire. Une adresse doit inclure les renseignements complets permettant
de contacter une personne, c’est à dire le numéro et la rue, le code postal, la ville, la région et enfin le pays.
Une notion cruciale dans ce projet est celle de "lieu" au sens large, et en particulier à vocation touristique
dans notre contexte (e.g., le Mont Blanc, le mur des Canuts, le musée des Beaux Arts de Lyon). Un lieu
2
possède un nom, des coordonnées géographiques (longitude et latitude), une élévation (ou altitude), une éventuelle
population, un niveau administratif et au moins un intérêt touristique (e.g., "sentier de randonnée", "monument
historique", "patrimoine culturel"). Un intérêt touristique n’est accordé de manière officielle qu’à partir d’une
date donnée. Un lieu peut posséder une adresse (numéro, rue, code postal, ville, région et pays) mais ce n’est
pas le cas de tous les lieux (e.g., le Mont Blanc).
Une utilisatrice peut commenter un lieu, mais uniquement à condition de l’avoir visité au préalable. Chaque
commentaire comprend une note (entre 0 et 5) et un avis sous forme de texte libre. Si la personne visite plusieurs
fois le même lieu, elle peut ajouter un nouveau commentaire. Les itinéraires sont une suite d’étapes. Chaque
itinéraire possède un nom unique, qui est généralement fourni par l’utilisatrice. En effet, les utilisatrices peuvent
proposer à une date donnée et ainsi partager sur le site des itinéraires (par exemple, pour trouver d’autres
voyageuses avec qui partir). Bien entendu, les utilisatrices peuvent partir en voyage sur des itinéraires. Dans ce
cas, une date de début et une date de fin sont enregistrées. Un itinéraire se divise en étapes, qui sont ordonnées
par leur numéro (première valeur à 1). Chaque étape possède aussi un nom, une durée (nombre de jours), et un
certain nombre de lieux qui seront visités. Par exemple, un itinéraire de découverte de la région Rhône Alpes
peut inclure une première étape de deux jours pour visiter des lieux de Lyon (mur des Canuts, musée des Beaux
Arts, Vieux-Lyon), puis une seconde étape de trois jours dans les Monts d’Or (sentier des Rapaces, demeure du
Chaos, musée de l’électricité), etc.
4.1.2
Produire le modèle Relationnel
Selon l’outil de modélisation choisi à l’étape précédente, il est possible de générer le modèle Relationnel
automatiquement, mais il est recommandé de bien vérifier le résultat obtenu et de le modifier si nécessaire.
Sinon, la dérivation du MCD vers le MLD se fait à partir des règles énoncées en cours. Vous inclurez une
exportation de votre modèle Relationnel dans le rapport.
4.1.3
Produire le script SQL de création de la base
Selon l’outil de modélisation choisi à l’étape précédente, il est possible de générer le script de création
des tables automatiquement (mais il est recommandé de bien vérifier le résultat obtenu et de le modifier si
nécessaire). Sinon, écrivez les requêtes de création de vos tables. Ajoutez un utilisateur lif4projet qui a pour
mot de passe lif4projet, et donnez-lui les privilèges de lecture et d’écriture dans votre BD. Vous inclurez une
exportation de votre base de données dans le fichier zip de rendu. Finalement, importez votre script dans la
base de données MySQL et ajoutez des n-uplets si besoin.
4.2
Architecture du site
Objectifs de cette étape :
– Créer la hiérarchie de fichiers de votre site
– Structurer les différentes parties d’une page (menu, contenu principal, etc.)
– Personnaliser la page d’accueil
– Personnaliser la page "à propos"
4.2.1
Créer la hiérarchie de fichiers
Dans le répertoire de XAMPP, vous trouverez un sous-répertoire htdocs/. Ce sous-répertoire contient les
différents sites qui sont hébergés par votre ordinateur. Pour accéder à l’un de ces sites, par exemple, celui dans
le sous-répertoire repertoire_de_votre_site, il suffit de taper dans un navigateur (numéro de port variable selon
votre configuration) : http://localhost:8081/repertoire_de_votre_site/. En tapant cette URL, le navigateur cherche alors à afficher un fichier index.* présent à la racine du sous-répertoire repertoire_de_votre_site.
En général, c’est le fichier index.html, index.php ou index.asp 1 .
Créez un nouveau répertoire à l’intérieur du répertoire htdocs de XAMPP. C’est ici que vous allez stocker les
fichiers de votre site. Pour illustrer un exemple, on considère que vous avez créé un répertoire qui a pour nom
repertoire_de_votre_site. Pour créer la hiérarchie de fichiers pour votre site, vous pouvez vous référer à la Figure
1. Sur cette figure, les répertoires sont en gras. À la racine de ce répertoire repertoire_de_votre_site, on trouve
un fichier index.php, la page d’accueil de votre site. On trouve également d’autres fichiers PHP qui représentent
1. L’extension des fichiers (php, asp, etc.) dépend de la technologie utilisée.
3
soit une fonctionnalité proposée par votre application (e.g., ajout avec un formulaire, intégration, recherche)
soit une information générale sur l’application (e.g., à propos). Vous pouvez dès à présent créer ces fichiers.
Concernant les sous-répertoires images et includes, le
premier contiendra toutes vos images tandis que le second stockera des fichiers destinés à être utilisés par les
fichiers situés à la racine de repertoire_de_votre_site.
Parmi ces fichiers utilisés, il y aura un fichier entête, un
fichier pied de page et un fichier statistiques (fichiers
que l’on retrouve sur toutes les pages du site), et un
fichier de style CSS. Créez les répertoires images/ et
includes/ ainsi que les fichiers qu’ils contiennent. Vous
pouvez ajouter d’autres répertoires ou fichiers si besoin.
Maintenant que la hiérarchie de votre site est réalisée 2 ,
vous allez éditer certains des fichiers créés.
Figure 1 – Hiérarchie du site
4.2.2
Structurer les parties d’une page
La Figure 2 présente deux exemples de maquette 3 pour votre site. Vous pouvez adapter la mise en page/mise
en forme, mais on doit retrouver les cinq zones décrites ci-dessous. Les couleurs vives de cette maquette sont
utilisées pour faciliter la compréhension, mais ne reflètent en aucun cas les critères esthétiques de vos enseignante-s !
Figure 2 – Des exemples de maquette pour votre site
On distingue cinq zones sur cette maquette :
– Une entête (fond vert)
– Un menu (fond vert pour la maquette de gauche ou fond rose pour la maquette de droite)
– Des statistiques (fond rose ou fond gris selon la maquette)
– Le contenu de la page (fond jaune)
– Un pied de page (fond bleu)
Les zones entête, menu, pied de page et statistiques sont identiques sur chaque page, aussi leur contenu doit
être factorisé dans des fichiers séparés et placés dans le répertoire includes. Ces fichiers seront appelés ensuite
dans vos autres pages (recherche, ajout, etc.) en utilisant la commande PHP require ou include. Concernant la mise en forme (couleurs, polices, etc.), vous êtes libre(s) de la personnaliser, sauf indication spécifique.
Il est évident que cette mise en forme se fera avec des feuilles CSS. L’esthétique est prise en compte lors de la
notation, aussi soignez votre site.
Détails sur l’entête (fond vert) : cette zone contient deux éléments :
– Le logo (image) de votre site, situé sur la gauche. Vous êtes libres de mettre le logo qui vous convient. Ce
logo sert également de lien hypertexte vers la page d’accueil de votre site.
2. Vous pouvez évidemment ajouter de nouveaux fichiers ou de nouveaux répertoires plus tard.
3. Maquettes réalisées avec Pencil, http://pencil.evolus.vn/
4
– Au centre, le nom de votre application Web, également libre de choix.
Détails sur le menu (fond vert ou fond rose) : la navigation sur votre site se fait au moyen de liens
hypertexte. Les libellés de ces liens seront explicites (ne pas mettre "menu1", "menu2" !).
Détails sur les statistiques (fond rose ou fond gris) : comme son nom l’indique, ce panel contient des
statistiques sur la BD. On souhaite des statistiques sur le nombre total d’itinéraires et le nombre d’utilisatrices
inscrites selon plusieurs critères : l’année, le pays. Ainsi, si le critère année est choisi, il faudra détailler le nombre
d’itinéraires pour chaque année, et le nombre d’inscriptions pour chaque année. L’utilisatrice peut changer le
critère grâce à une liste déroulante. Bien que la fonction de connexion à la BD ne soit pas encore implémentée,
vous pouvez déjà écrire les requêtes SQL nécessaires à la production de ces statistiques.
Détails sur la zone pied de page (fond bleu) : cette zone contient trois informations, à savoir un lien
vers le site de l’université, un second lien vers la page de l’UE de LIF4 et enfin l’année courante.
Détails sur la zone de contenu (fond jaune) : c’est à cet endroit que s’affichera le contenu. Par exemple,
si l’utilisatrice demande la page ajout.php, le formulaire d’ajout sera affiché dans cette zone de contenu. Les
contenus de ces pages spécifiques seront à réaliser lors des prochaines séances de projet. Par défaut, c’est la page
d’accueil (index.php) qui est affichée, et vous allez maintenant y mettre du contenu.
4.3
Personnaliser la page d’accueil (index.php)
Lorsqu’une utilisatrice arrive sur le site par la page index.php, la zone de contenu ne peut pas rester vide :
vous allez donc personnaliser cette page. Voici les éléments que l’on doit trouver dans sa zone de contenu (fond
jaune), libre à vous d’en ajouter :
– Une courte description de l’utilité du site
– Les activités récentes sur le site, par exemple les derniers ajouts en termes d’itinéraires, de commentaires
et d’utilisatrices. Ceci requiert une connexion à la BD, que l’on verra dans la partie 2, mais vous pouvez
déjà écrire les requêtes.
4.4
Personnaliser la page "à propos” (apropos.php)
Comme pour la page d’accueil, la page apropos.php est assez sommaire. Voici les éléments que doit contenir
sa zone de contenu (fond jaune), mais vous êtes libres d’en ajouter d’autres :
– Vos/votre nom(s) et prénom(s)
– Une courte explication sur le choix du logo et du nom de votre application
– Une image de votre MCD
– Des remerciements ou liens externes si vous avez par exemple utilisé des images ne vous appartenant pas
5
Questions (répondre dans le rapport)
Question 1 : Dans le rapport, vous inclurez votre modèle entité/association ainsi que votre modèle Relationnel. Vous pouvez également y justifier certains choix de modélisation (uniquement des choix non triviaux,
pas la peine de décrire votre modèle !).
Question 2 : Une application Web comme celle que vous développez est en général multi-utilisatrice. Dans
le contexte du projet, on ne s’occupera pas de la gestion des utilisatrices. En effet, le mécanisme d’authentification se doit d’être propre et sécurisé (mots de passe cryptés, protocole HTTP sécurisé, etc.) et ces notions ne
sont pas abordées à votre niveau. Hormis l’authentification, quelle(s) modification(s) apporteriez-vous au projet
pour prendre en compte l’aspect multi-utilisatrice ?
Concours (facultatif) : Pour vous détendre (en cas de blocage sur un bug, d’engueulade avec votre binôme, etc.), deux concours sont organisés, celui du meilleur nom
d’application et celui du plus beau logo. Les deux binômes gagnants remporteront
un paquet de chamallows. Soyez créatifs/ves !
5

Download Report