Technologies Web, Master 1 Miage, 2012-2013

De $1

Version de 15:00, 28 Oct 2020

cette version.

Revenir à liste des archives.

Voir la version actuelle

Introduction

Dans ce cours nous allons voir des "bases avancées" de programmation web. Vous devez tous ou presque avoir des "bases" sur la manière de créer des sites/applications webs (en Php, en .Net ou en Java côté serveur, et vous devez avoir entendu parler de HTML/CSS/JavaScript), cette année nous allons partir d'une approche simple du développement d'applications et aller doucement vers des approches plus "méthodologiques". Nous utiliserons les technologies Java EE mais aussi JavaScript, HTML/HTML5 et CSS2/3...

Ressources disponibles

Ces ressources peuvent être utilses à ceux qui pensent ne pas connaître "les bases" ou bien qui ne sont pas très à l'aise avec CSS, JavaScript, HTML etc...

JavaScript/jQuery:

  • Cours JavaScript de Michel Buffa (transparents faits en HTML5). Archive ici : Cours JavaScript.zip. Ce cours couvre "JavaScript" classique Ecma 5, pas les nouvelles APIs apparues avec HTML5 (voir le cours HTML5).
  • Transparents powerpoint sur jQuery : jquery.ppt et aussi la présentation interactive de John Resig, auteur de jQuery :  http://ejohn.org/blog/spring-2010-jquery-talks/ , la première "introduction to jQuery" est très bien pour un premier contact avec cette librairie.
  • N'oubliez pas d'aller faire un tour sur la page : Ressources JQuery que j'ai préparée à votre attention et qui contient de nombreuses ressources intéressantes au sujet de cette librairie (tutorials, transparents, livres, etc). Je recommande à 200% d'imprimer ou d'avoir sous la main les "jQuery chart sheets", des images qui résument en un coup d'oeil toute la librairie. 
  • La page officielle avec la doc de jQuery (exemples interactifs) :  http://api.jquery.com/

CSS

Un bon exemple CSS3 avec zoom, rotation, bords arrondis, ombres, etc...

HTML

(vous aurez un cours complet HTML5 en M2 NTDP/MBDS)

Séance 1 : rappels historiques, protocole HTTP, introduction aux Servlets et JSPs

Pour la culture (à faire à la maison),

Regarder les vidéos suivantes (histoire du net) et lire les articles proposés qui retracent l'histoire du web.

Supports de cours

  • ProtocoleHTTP.pdf (en TP on vous montrera qu'un serveur web complet acceptant de multiples connexions s'écrit en 2 fichiers Java).
  • Servlets (2).pptx
  • JSPs.pptx
    • Support de cours en anglais sur JSTL/EL (EL à partir du transparent 31, JSTL à partir du 61), le reste n'est pas pertinent : jsp2.pdf

TP 1 : écriture d'un gestionnaire de livres en JSP / Servlet / JDBC / MySQL

Séance 2 : best practices JSPs et Servlets, JDBC

Supports de cours JSP et JDBC

  • On a pas eu le temps de faire les JSPs lors de la première séance, on va reprendre donc le support de cours dans une version mise à jour : JSPs (1) (1).pptx 
  • JDBC : deux supports de cours très complets, en français, par Richard Grin : jdbc.pdf et jdbcavance.pdf. Le support utilisé en cours est un résumé de ce qui se trouve dans ces deux supports.

TP 2 : prise en main des EJBs/JPA 

Séance 3 : introduction aux EJBs/JPA/JavaEE

Support de cours :

 

ANCIENS COURS ET TPs de l'année 2012-2013

TP 1 : écriture d'un gestionnaire de livres en JSP / Servlet / JDBC / MySQL

Séance 2 : best practices JSPs et Servlets, JDBC

Supports de cours JSP et JDBC

  • On a pas eu le temps de faire les JSPs lors de la première séance, on va reprendre donc le support de cours dans une version mise à jour : JSPs (1) (1).pptx 
  • JDBC : deux supports de cours très complets, en français, par Richard Grin : jdbc.pdf et jdbcavance.pdf. Le support utilisé en cours est un résumé de ce qui se trouve dans ces deux supports.

Si on a le temps pendant cette séance, on fera une intro à JavaScript/jQuery/Ajax. Voici quelques supports de cours qui pourront servir...

JavaScript/jQuery

  • Cours JavaScript de Michel Buffa (transparents faits en HTML5). Archive ici : Cours JavaScript.zip. Ce cours couvre "JavaScript" classique Ecma 5, pas les nouvelles APIs apparues avec HTML5 (voir le cours HTML5).
  • Cours complet JS/jQuery/Modernizr/tools/libs, en français. Idéal pour débutants : Cours JavaScript CNRS Dec 2013.zip 
  • Transparents powerpoint sur jQuery : jquery.ppt et aussi la présentation interactive de John Resig, auteur de jQuery :  http://ejohn.org/blog/spring-2010-jquery-talks/ , la première "introduction to jQuery" est très bien pour un premier contact avec cette librairie.
  • N'oubliez pas d'aller faire un tour sur la page : Ressources JQuery que j'ai préparée à votre attention et qui contient de nombreuses ressources intéressantes au sujet de cette librairie (tutorials, transparents, livres, etc). Je recommande à 200% d'imprimer ou d'avoir sous la main les "jQuery chart sheets", des images qui résument en un coup d'oeil toute la librairie. 
  • La page officielle avec la doc de jQuery (exemples interactifs) :  http://api.jquery.com/

 CSS

Un bon exemple CSS3 avec zoom, rotation, bords arrondis, ombres, etc...

TP 2 : JavaScript décrassage, prise en main de jQuery

 

Séance 3: introduction aux EJBs et à Java Persistence API

Support de cours :

 Séance 4: TP sur JPA/EJB partie 1

Support de cours :

Travail à faire:

  1. Relire le support de cours de la séance 3, le cours porte sur la mise en application de ce qui est dans ce support.
  2. TP4 à rendre, noté : un gestionnaire d'utilisateurs avec JPA/EJBs. 

Sujets de Mini projets

Sujet No 1 : un site de vente en ligne de jeux vidéo

Il s'agit ici du projet "classique", recommandé pour ceux qui ne sont pas très à l'aise avec cette matière. Vous vous inspirerez du projet Igift pour réaliser un site de vente en ligne de jeux vidéos.

Quelques contraintes vous sont imposées néanmoins :

  • Template de présentation du site avec header, footer, menus, et champs de saisie pour la connexion,
  • Gestion de la session de connexion comme dans les TPs, mais en AJAX (à l'aide de jQuery ou de Dojo) : la page ne va pas se réafficher lorsqu'on entre un mauvais login/password mais simplement afficher un message d'erreur.
  • Vous devrez utiliser un modèle de données avec des relations, à vous de voir quel modèle utiliser. On vous recommande de partir des classes entités pour générer les tables, comme dans les derniers TPs.
  • On distinguera des catégories de supports pour les jeux : PC, xbox360, PS3, etc. A vous de voir si il faut une relation ici ou pas... vous justifierez le choix dans le rapport qui sera rendu avec le projet.
  • On peut associer des "tags" (des mots-clé) aux produits (un ou plusieurs), comme sur youtube, flickr, etc. On pourra rechercher des produits par tags (plusieurs tags possibles). Par exemple, le jeu "Crysis2" appartiendra aux catégories PS3, PC, xbox360, et sera taggué avec "fps, action, multi-joueur".
  • Un jeu a un code pour la catégorie d'âge à laquelle il est destiné (voir http://www.pegi.info/fr/)
  • Un jeu a une description résumée, un prix, une référence (un id), le nom du distributeur (on veut pouvoir faire des recherches par distributeurs, catégorie ou pas ?), une ou plusieurs photos, etc.
  • Gestion des comptes des clients + un ou plusieurs admins.
  • On veut pouvoir mettre des jeux dans son panier et passer la commande.
  • On veut un jeu de plusieurs dizaines (voir centaines) de données. A vous de vous débrouiller pour le générer.
  • Le logiciel, lorsqu'on le lance, doit par défaut peupler la base de données avec le jeu de test, sauf si la base est déjà pleine. (comme igift)
  • Vous devrez utiliser quelques fonctionnalités Ajax + quelques widgets et effets javascript dans votre application, à l'aide de Dojo ou jQuery (pas d'autres choix svp!). Vous documenterez dans le rapport les éléments de ces frameworks que vous aurez utilisé. Obligatoire : valider tout ce que l'on peut dans les formulaires en javascript avant de les envoyer sur le serveur.

Facultatif :

  • Interface d'administration : faites ce que vous pouvez. Par exemple, le degré zéro c'est de ne rien faire ! Les produits sont créés par programme, les images sont dans un rep sur le serveur, etc. Degré un : on peut rajouter un produit, on donnera l'url de l'image sur le web, degré deux : on peut uploader les images, etc.
  • Associer des vidéos youtube ou dailymotion aux produits,
  • Noter les produits (avec des étoiles), tri par popularité (stats de consultation), par note (étoiles),
  • Poser des commentaires sur les produits (il faut être loggué),
  • Mettre plein de gadgets supplémentaires dans l'interface (un caroussel pour animer les photos, des dialogues qui se poppent enb javascript, etc)

Sujet No 2 : un site à la Allo Ciné/Imdb.org

Il s'agit d'un site type allocine.fr/imdb.fr qui permet de récupérer des informations sur des films, voir un résumé, date de sortie, acteurs, réalisateurs, année, etc. 

Contraintes:

  • Plusieurs modes : visiteur, visiteur connecté (il pourra laisser des commentaires et mettre des notes aux films), administrateur (peut modifier les contenus). La gestion de la connexion se fera comme dans les TPs, en Ajax, et en gérant une session HTTP. Si on est pas connecté on peut faire des recherche, naviguer dans les films, acteurs, réalisateurs, années, etc... on proposera une navigation "par facettes" (chaque nom d'acteur, de réalisateur, de film, d'année, sera un lien qui débouchera sur une nouvelle "vue").
  • Il faut au moins 300 entrées réelles dans votre base de données. Pour cela vous avez le choix pour récupérer des informations: utiliser les APIs disponibles pour les sites les plus populaires (on appelle des URLs et on récupère des données en XML ou en JSON), ou encore, si elles sont disponibles, récupérer les bases en local (c'est possible pour IMDB), ensuite vous en re-injecterez une partie dans la base de votre projet (souvent c'est du XML ou du texte, ou du .csv)
  • Fonctionnalités attendues :
    • recherche par titre, année, acteur, réalisateur, etc. 
    • Affichage des détails d'un film, acteur, réalisateur
    • Pagination des résultats (20 par 20 par exemple), avec requêtes JPQL adaptées,
    • Commentaires (si on est loggué) et notes,
    • Voir les films les mieux notés, les plus commentés,
    • Facultatif : administration: modifier un contenu, regénérer la base de données, etc.
  • Facultatif : liens vers bandes annonce youtube, gallerie d'images en jQuery, etc.

Modalités de rendu, contraintes

  • Le projet est à rendre pour la fin du mois d'Avril. Il y a aura des mini soutenances et des questions individuelles. Prévoir une démonstration devant les enseignants.
  • Un mini rapport devra accompagner le projet, contenant : points forts, points faibles, fonctionnalités, indications claires de ce que vous avez récupéré sur internet (données, code, css, etc), photos d'écrans.
  • Une archive zip ou rar portant le nom du binome devra être fournie lors de la soutenance.
  • Vous êtes fortement invités à utiliser un gestionnaire de versions logicielles (svn ou autre) pour le développement du mini projet.