Mise en place d un site web dynamique

Application sur Internet Mise en place d un site web dynamique Vincent D, Florent L, Antoine L, Jérémy P 2IN 17 juin 2011 1 Présentation générale du projet 1.1 Présentation du concept 1.1.1 Concept de base Le concept de base de notre projet est de faire un site internet perme ant de créer, participer à, regrouper et partager des questionnaires que l on désignera plus simplement sous le nom de quizzes. Un tel site internet s inscrit dans la lignée des sites internet du web 2.0 dont le contenu provient majoritairement des utilisateurs. 1.1.2 Inscription des utilisateurs Tout individu pourra s inscrire gratuitement sur le site, à condition de disposer d une adresse e- mail valide. L inscription se fera à l aide d un formulaire classique d inscription. Tous les utilisateurs possèderont les mêmes droits : création, participation et partage/invitation à tout quizz. 1.1.3 Profil d utilisateur En plus des options classiques (photo, e-mail, goûts, ) le profil d utilisateur contiendra l ensemble des quizzes auxquels l utilisateur a participé et ses scores. On peut imaginer qu un utilisateur fasse plusieurs fois un quizz auquel cas on retiendra tous ses scores. On retiendra aussi les dates/heures de participation aux quizzes. L utilisateur pourra aussi se former (voire importer d autres protocoles si le temps le permet) une liste de contacts. 1.1.4 Les quizzes Un quizz est affilié à un thème et possède un titre. Il est composé d une éventuelle courte introduction et d un nombre fini de questions. Dans un premier temps, on n autorisera que des quizzes à n réponses données. Si le temps le permet, on changera ce système pour proposer d éventuelles questions à réponse libre. Tous les quizzes sont publiques. Chaque question pourra être accompagnée d une image. 1

1 PRÉSENTATION GÉNÉRALE DU PROJET 2 1.1.5 Navigation parmi l ensemble des quizzes On proposera plusieurs navigations possibles dans la liste des quizzes. Chaque navigation pourra être pré-filtrée par un choix de thème/sous-thème (culture, culture/musique, culture/cinéma, informatique, informatique/programmation, informatique/programmation/c, ). Navigation par Top n (quizzes les plus populaires) - Navigation par Préférences de vos contacts (quizzes les plus populaires parmi vos contacts), etc 1.1.6 Participation à un quizz Tout utilisateur pourra participer à tout quizz. Une fois un quizz rempli, le score obtenu sera affiché et l utilisateur pourra proposer à ses contacts sur le site de participer aussi au quizz. 1.2 Te nologies et logiciels utilisés Integrated Development Environment Eclipse IDE for Java EE Developers Decentralized Version Control Mercurial intégré à Eclipse à l aide de MercurialEclipse. Nous avons choisi ce e solution car nous avions déjà utilisé Mercurial à d autres occasions. Mercurial permet aussi de commiter sans être connecté à Internet, ce qui peut se révéler pratique. Serveur Web Nous avons choisi d utiliser un serveur Web Geronimo 2.2.1. Ce serveur est opensource et développé par la Fondation Apache sous la licence Apache. Il est bien sûr compatible avec Java Enterprise Edition 5.0 et nous permet donc d utiliser toute la panoblie d outils JEE rencontrés (JDBC, JavaBeans, etc ) Base de données Nous avons choisi d utiliser OpenJPA qui est une solution open-source pour utiliser JPA. OpenJPA est aussi publié sous licence Apache. Gestion des templates Plutôt que de mélanger du HTML et du code Java au sein des JSP, nous avons préféré une solution qui sépare bien les deux. Pour ça, nous avons utilisé le moteur de template Freemarker. Les fichiers.ftl ne contiennent donc que du HTML et des directives Freemarker qui perme ent de récupérer les variables passées en paramètre et d effectuer quelques opérations simple : condition, boucle, etc. Création et validation des formulaires La création de formulaires HTML est une tâche fastidieuse et propice aux erreurs. On la délègue donc souvent à une brique logicielle dédiée. Ici nous avons choisi de réaliser nous-mêmes ce composant : les champs de formulaire et les formulaires sont des classes. Ce sont ces classes qui génèrent le code HTML de chaque élément et qui gèrent la validation des formulaires. La validation consiste à vérifier la conformité du type de données entre le modèle et ce qu entre l utilisateur, mais on peut être plus précis : on vérifie par exemple qu une adresse e-mail est correcte à l aide d une expression rationnelle.

2 CONCEPTION 3 2 Conception 2.1 Administration La partie administration permet de modifier/créer/supprimer les thèmes, sous-thèmes et utilisateurs. 2.2 Inscription (/inscription) L inscription nécessite un nom d utilisateur, un mot de passe (et confirmation) qui sera stocké en SHA et une adresse e-mail. Un captcha permet d éviter les bots. SE CONNECTER CRÉER UN COMPTE Accueil» Inscription Inscription Nom d utilisateur Mot de passe Confirmation du mot de passe Adresse e-mail valide Code de sécurité F. 1 : Inscription 2.3 Accueil (/accueil ou /) La page d accueil présente le site et invite les visiteurs non connectés à s enregistrer. Si on est connecté, elle affiche les derniers quizzes créés sur le site. SE CONNECTER CRÉER UN COMPTE BIENVENUE! est un site qui vous propose de créer vos propres quizzes de façon simple et rapide. Vous pouvez ensuite facilement partager vos quizzes avec vos contacts. Il est aussi possible de naviguer à travers les différents thèmes et sous-thèmes afin de trouver des quizzes concernant vos passions : musique, cinéma, littérature belge, droit international, stations spatiales, ananas, middleware,... Pour profiter entièrement du site il vous faudra créer un compte. Ceci est gratuit, rapide et ne demande qu'une adresse e-mail (qu'on spammera bien entendu à l'aide de scams nigériens). Créer mon compte dès maintenant F. 2 : Accueil 2.4 èmes (/themes/ ou /themes/[id]) Ce e page présente tous les thèmes et sous-thèmes disponibles. Les sous-thèmes ne sont pas affichés par défaut : Il faut cliquer sur un nom de thème pour les déplier, avec une animation (ceci utilise le script J ery collapse ) Si un identifiant de sous-thème est fourni sur l URL, l intégralité des quizzes affectés à ce sousthème est affichée.

2 CONCEPTION 4 Accueil» Tous les thèmes Culture Géographie Facile Avancé Expert Histoire F. 3 : Index des thèmes ADMINISTRATION Accueil» Administration» Administration des thèmes» Administration du thème Culture Modifier le thème Titre Culture SOUS-THÈMES Titre Cinéma Littérature Enseeiht Ajouter un sous-thème Titre F. 4 : Édition des thèmes 2.5 Détails des quizzes (/quizzes/, /quizzes/[id]) Par défaut, ce e page affiche les quizzes créés par l utilisateur ; si un identifiant est fourni, elle affiche les détails du quizz courant (sous-thèmes, nombre de questions, description), et propose de l éditer (si l utilisateur courant est l auteur du quizz) ou d y jouer (dans le cas contraire). 2.6 Création de quizz (/quizzes/nouveau) Ce e page permet de créer de nouveaux quizzes. L utilisateur est alors invité à entrée un titre de quizz et une description. 2.7 Édition de quizzes (/editquizz/[id]) Ce e page permet à un utilisateur d ajouter des questions à un quizz qu il a créé. Un formulaire lui permet d entrer une question, et une série de réponses (une vraie et entre une et quatre fausses). 2.8 Jouer à un quizz (/jouerquizz/[id]) Ce e page permet de jouer à un quizz. Elle se rafraîchit automatiquement pour passer de l affichage des résultats à la question suivante, et également pour limiter le temps de réponse à 10 secondes. and une question est affichée, un compteur affiche via JavaScript le temps restant pour répondre (avec une animation de fondu si le navigateur implémente les transitions CSS).

3 BILAN 5 Accueil» Tous les quizzes» Première visite PREMIÈRE VISITE 10 Question 1/3 Que signifie le T dans le nom de l'école? Téléphonie Toulon Toulouse Télécommunications F. 5 : Situation de jeu 3 Bilan Sur le plan technique, ce projet nous a permi d une part de me re en œuvre les acquis des cours et TP d application sur Internet, mais aussi d expérimenter des solutions technologiques pour la première fois (Geronimo, Freemarker, etc.). Nous avons validé ces choix techniques en déployant notre site sur plusieurs machines, avec comme bases de données indifféremment MySQL et PostgreSQL. Au final c est une expérience intéressante qui nous donne des bases pour la construction d applications de grande envergure. F. 6 : Architecture