Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 05:18, 4 Mai 2017 par MichelBuffa
0

Technologie Web M1 Miage 2016-2017

De $1

  1. 1. Introduction
  2. 2. Séance 1 : rappels sur l'histoire du Web et des technologies Web, introduction à la technologie JavaEE
    1. 2.1. Rappels historiques (les parties non vues en cours sont à voir à la maison) :
    2. 2.2. Rappels HTML/CSS/JS
    3. 2.3. Obligatoire: inscription au MOOC HTML5 part 1!
  3. 3. Séance 2 Introduction à JavaEE, rappels HTML/CSS/JavaScript
    1. 3.1. TP1 : écriture d'un gestionnaire de livres, avec deux implémentations, CDI, JDBC 
    2. 3.2. TP2: étude d'une correction du TP1 en Ajax, prise en main des EJBs et de JPA
  4. 4. Séance 2 de cours: EJB/JPA + visite surprise
    1. 4.1. TP3: terminer le TP2 + démarrer le nouveau TP
      1. 4.1.1. Nouveau TP : Ajout de relations dans le TP3 / démarrage du mini projet  
      2. 4.1.2.
  5. 5. Séance 4: présentation des projets, JavaScript intro
  6. 6. JavaScript
    1. 6.1. Mini projet
      1. 6.1.1. Sujet 1: site Web pour les JNMs 2018
      2. 6.1.2. Sujet 2: la galerie de photos pour le site des JNMs

Introduction

Séance 1 : rappels sur l'histoire du Web et des technologies Web, introduction à la technologie JavaEE

Rappels historiques (les parties non vues en cours sont à voir à la maison) :

    Introduction aux technologies du Web 
    • Ici une vidéo (en anglais, activer les sous-titres) qui retrace l'histoire du Web et des technologies, aussi des services marquants que nous connaissons aujourd'hui, avec leur date d'apparition et de nombreuses anecdotes : 

       
  • Le Web ce n'est pas l'Internet (c'est entre autre sa couche hypertexte, et bien plus...) : cette vidéo retrace "histoire de l'internet de 1957 à nos jours", n'oubliez pas d'activer les sous-titres (petite flèche vers le haut, en bas à droite du lecteur) :

     
  • Vidéo pour fêter l'anniversaire de Tim Berners Lee (anglais), linventeur du web, retrace à travers son parcours, l'histoire du Web : , penser à activer les sous-titres.
     
  • Du Web aux wikis : une histoire des outils collaboratif (par Michel Buffa) : pour bien comprendre l'évolution du web dans sa phase 1993 jusqu''à 2005, soit l'apparition du Web 2.0 appelé aussi le "web social" dont il reste de grosses traces aujourd'hui (facebook, twitter, wikis, blogs, etc). Cet article retrace en particulier les premiers pas de l'internet en France, la naissance du Web et son évolution vers un Web servant non pas à relier des documents entre eux, mais des personnes, des objets, etc. Pour ceux que l'histoire du Web intéresse.
     
  • Le protocole HTTP au coeurs du Web et des Web Services : ProtocoleHTTP.pdf

Rappels HTML/CSS/JS

Obligatoire: inscription au MOOC HTML5 part 1!

Michel Buffa est l'auteur de deux MOOCs sur HTML5 : HTML5 part 1 et HTML5 part 2 Il s'agit de cours interactifs, couvrant l'intégralité de HTML5 et même beaucoup plus. L'inscription (gratuite) à HTML5 part 1 est obligatoire car on s'y réfèrera plusieurs fois. Sur la plateforme edX vous trouverez d'excellents MOOCs sur CSS, JavaScript etc. N'oubliez pas les cours sur les technos de référence du Web (HTML/CSS/JS bientôt sont sur la chaine W3Cx).

Séance 2 Introduction à JavaEE, rappels HTML/CSS/JavaScript

TP1 : écriture d'un gestionnaire de livres, avec deux implémentations, CDI, JDBC 

TP2: étude d'une correction du TP1 en Ajax, prise en main des EJBs et de JPA

Vous commencerez par étudier une correction en Ajax du TP1. Votre enseignant de TP vous donnera des infos complémentaires.

Correction du TP1 + aussi un client Ajax / Xhr2 avec des échanges en JSON

  • TP1M1Miage2015.zip, la partie Ajax se trouve pour le client dans ajaxClient.html, et côté serveur, dans les deux servlets BookListServlet.java et BookEditorServlet.java. Les appels Ajax utilisent les mêmes URLs mais ajoutent à la fin "?format=json", ce qui permet aux servlets de savoir si elles ont affaire à un appel Ajax ou pas...
     
  • Dans le cas d'un appel Ajax, les Servlets renvoient du JSON. Pour transformer des objets Java en JSON, on utilise la bibliothèque Jackson (voir bon tutorial ici).
    • Les deux jars ont été placés dans le répertoire lib du projet. C'est une bonne pratique si on veut distribuer un projet avec des .jars...
  • De la même manière dans le cas d'un ajout de livre en JSON, on envoie depuis ajaxClient.html, en JavaScript, un livre en JSON, et on le décode (transforme en objet Java instance de Book) avec Jackson. Vous verrez qu'on peut envoyer d'autres types d'encodage l'an prochain, notamment avec le format multipart, qui est aussi très pratique pour envoyer des formulaires en Ajax.

Passez donc un peu de temps à tester le projet, et à étudier ajaxClient.html et le code des de BookListServlet.java

Supports de cours JSP et JDBC

  • Les JSPs 2.0 (Java Server Pages, les composants "Vue" complémentaires des Servlets : JSPs.pptx

    • Comment "programmer des vues" dans des pages JSPs: support de cours en anglais sur le langage de templates JSTL (Java Standard Tag Library) et sur le langage EL (ou Expression language, à partir du transparent 31, JSTL à partir du 61), le reste n'est pas pertinent : jsp2.pdf.
  • 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. On ne va plus faire de JDBC. Ces deux documents ont là comme référence au cas où.

Sujet du TP2: 

Séance 2 de cours: EJB/JPA + visite surprise

Support de cours :

TP3: terminer le TP2 + démarrer le nouveau TP

Vous commencerez par terminer le TP2. Il est à rendre pour la semaine prochaine. En binome. Il sera remis + démo pendant la prochaine séance de TP. Attention: si soupçon de triche -> zéro immédiat. 

Nouveau TP : Ajout de relations dans le TP3 / démarrage du mini projet  

Modifier la section

Le sujet cette fois-ci est assez simple:

1 - Ajoutez à chaque utilisateur une adresse sous la forme d'une relation 1-n (une personne a plusieurs adresses), vous commencerez par créer une entity Adresse.java qui contiendra comme propriétés :

  • No et nom de la rue,
  • Code postal
  • Ville
  • Pays

Puis vous rajouterez une collection d'adresse dans la classe Utilisateur.java (sous la forme d'une ArrayList, mais utilisez le wizard avec la petite lampe jaune pour cela).

Vous modifierez ensuite la méthode qui crée des données de test, et afficherez les adresses des personnes dans le tableau, soit directement (une liste dans une colonne du tableau), soit indirectement (affichage d'un lien qui renverra vers une autre page).

2 - Ajoutez aussi des numéros de téléphones

Idem

Séance 4: présentation des projets, JavaScript intro

JavaScript

Un MOOC "JavaScript intro" est ouvert aux inscriptions sur W3Cx/EDx, inscription obligatoire. Il démarre le 30 Mai et il est fait par M.Buffa.

JSIntroMooc.jpg

En attendant, je recommande ces cours:

Exemples vus en cours:

 

Mini projet

Sujet 1: site Web pour les JNMs 2018

Vous avez sans doute vu le site Web permettant de s'inscrire pour les journées Miage (http://jnm2017.fr/). 

Le site Web permet de s'enregistrer en tant que Miagiste, enseignant ou entreprise partenaire. Il possède une interface front-end et une interface back-end (admin).

Prenons le cas d'un élève qui s'inscrit et qui désire participer (bouton "participer" en haut à droite, qui sert à s'inscrire, en fait). Quand on clique on a un formulaire en plusieurs étapes

  1. On lui demande son nom, son prénom, un email, un mot de passe
  2. On demande ensuite s'il s'agit d'un miagiste, d'un enseignant ou d'une entreprise partenaire
    • S'il s'agit d'un miagiste, on demande ensuite sa date de naissance, la Miage à laquelle il appartient (liste déroulante), une photo à uploader, puis il doti cocher si il est un miagiste diplômé (un ancien élève).
    • S'il s'agit d'une entreprise, on demande sa fonction, son tel, nom de l'entreprise, adresse de l'entreprise, secteur d'activité de l'entreprise
    • S'il s'agit d'un enseignant je ne sais pas, le truc est grisé. Mais de mémoire, l'an dernier une fois qu'on avait dit par mail à la miage organisatrice qu'on venait, un admin devait nous enregistrer dans la base et on pouvait alors se connecter et valider les élèves qui s'étaient inscrits.
       
  3. Une fois inscrit on peut se connecter. Ca ne sert pas à grand chose à part qu'on peut voter pour le concours de tee shirt et pour le concours de videos, on peut voir les trombinoscopes des élèves par miage, on peut voir les résultats des votes
  4. Les votes ont un sujet, une liste de réponses possibles (la liste des miages), et on devait voter pour 3 miages maxi. Les votes ont une date/heure de départ et une date/heure de fin (en général une tranche de 30mns après les présentations des videos et des tee shirts)

     
  5. Une fois inscrit on peut choisir un pack (menu "informations pratiques"): pack étudiant à 110 euros, pack diplômé à 160 euros ou pack diplômé sans hébergement à 100 euros. 
  6. Quand on a choisi on peut soit payer directement (on fera un mini formulaire qui simulera la chose), soit on ne paye pas, et dans ce cas, c'est la direction de la Miage qui paye de son côté. Dans ce cas on validera le paiment d'un élève depuis l'interface d'administration. (ce sont les admins qui valideront le paiement, c'est toujours le cas pour les enseignants par exemple).
     
  7. Les entreprises partenaires ne paient pas.

Sujet 2: la galerie de photos pour le site des JNMs

Ici on attend un site permettant du téléchargement de photos, de vidéos, la gestion d'albums, les commentaires, etc. A la facebook/YouTube. Pour ne pas trop se compliquer la vie, on ne va pas mélanger les deux projets (à moins que deux groupes distincts aient envie de travailler ensembles).

L'idée de ce projet est de faire un peu moins de JavaEE et un peu plus de JavaScript/HTML5 et/ou si vous êtes à l'aise en JS, de teste des frameworks (angular 1 ou 2 par exemple, jquery).

Sujet plus difficile sur lequel on attend plus de JavaScript, de trucs dynamiques, etc.

 
Powered by MindTouch Deki Open Source Edition v.8.08