Programmation web pour les nuls support complet
Introduction à la Programmation Web
Section Z1
3 crédits
Dzenan Ridjanovic, Ph.D.
Enseignant :
Pavillon Palasis-Prince, local 2519
Coordonnées :
Université Laval, Québec, G1V 0A6
Par Skype (ridjanod)
Les heures du bureau :
Le cours sur Web en
Mercredi 15h30 – 18h15
direct :
Courriel :
dzenanr [at] google [dot] com
Site Web :
Forum :
Remarque : le genre masculin est utilisé tout au long de ce plan de cours dans le seul but d’en alléger la lecture.
1. Description du cours
Ce cours a pour objectif de permettre à l'étudiant de se familiariser avec les concepts de
base de la programmation Web, le cycle de développement d'une application et les différents
outils d'aide au développement. L'étudiant apprendra à développer une application Web
fonctionnelle avec le langage de programmation orienté objet Java et le cadre d'application
Wicket, en utilisant une approche de développement par spirale et des outils d'aide au
développement comme Eclipse, JUnit, Assembla et Subversion.
Ce cours s'adresse aux étudiants ayant peu d'expérience de programmation, mais peut aussi
convenir aux étudiants voulant parfaire leurs connaissances dans la programmation Web
ou les différentes technologies utilisées dans le cadre de ce cours. Les concepts abordés
aideront les futurs spécialistes en systèmes d'information à se familiariser avec les différents
aspects de la conception et réalisation d'une application web, ce qui leur donnera la chance
de pouvoir mieux estimer l'envergure, la durée et les embûches de la création d'un système
d'information. En effet, il est important pour un analyste en systèmes d'information de
maîtriser à la fois le langage des gestionnaires et celui des informaticiens.
Remarque concernant la charge de travail : Ce cours universitaire de premier cycle exige
en moyenne 9 heures de travail par semaine. Soyez donc bien conscient qu’il est essentiel
pour votre apprentissage et pour la réussite du cours d’avoir du temps à y consacrer.
2. Objectifs
2
Ce cours a pour principal objectif de familiariser les étudiants aux différents concepts de
base de la programmation Web.
De plus, le cours vise à faire acquérir des connaissances de base dans ces différentes
technologies et outils d'aide au développement:
• Java
Langage de programmation orienté objet populaire, utilisé autant pour les
applications clients que serveurs.
• Wicket
Cadre d'application web qui utilise Java pour fournir du contenu dynamique à des
pages web. Wicket utilise (X)HTML pour définir le contenu statique des pages web.
• XHTML ou eXtensible HyperText Markup Language
Langage de balisage; version plus stricte et épurée de HTML.
• CSS ou Cascading Style Sheets
Langage de présentation qui permet de contrôler l'agencement et la stylisation, hors
des documents XHTML.
• Eclipse
Environnement de développement intégré (IDE), utilisé pour écrire le code de
programmation.
• JUnit
Cadre de tests du code de programmation.
• Subclipse
Plug-in d'Eclipse qui permet l'utilisation du système de gestion des versions
Subversion et l'emmagasinage du code de programmation sur Assembla.
• Assembla
Site web dédié à faciliter la collaboration entre développeurs de logiciels à l'aide de
différents outils avancés et de pratiques de gestion de projets.
Assembla fournis un espace Subversion ou le code de programmation peut être
sauvegardé de façon similaire à la sauvegarde de données dans une base de
données.
Outre que Subversion, Assembla offre plusieurs autres outils comme Wiki pour
organiser de l'information de base sur notre projet et Scrum pour faire la gestion des
contributions individuelles au projet.
3. Méthodes pédagogiques
Le cours est alimenté par 9 spirales (00 à 08). Chaque spirale est un projet Eclipse qui
peut être importé (Checkout) du projet Modelibra sur Google Code, dans le répertoire tags/
iEducNews : ;.
La première spirale consiste en une simple page XHTML statique. La dernière spirale est une
application web fonctionnelle à propos des nouvelles éducationnelles (iEducNews), qui est
inspirée du site Hacker News. Les spirales du projet couvertes dans ce cours permettront aux
étudiants de créer une application web simple, avec affichage de liste et entrée d'utilisateur
simple. Le cours suivant abordera les concepts plus avancés tels que l'authentification, les
3
sessions, les relations entre entités, la sécurité web, les versions internationales (i18n) et
Ajax.
L'approche spirale est utilisée pour introduire de nouveaux concepts de programmation
à chaque nouvelle spirale. Seulement les concepts utilisés dans la nouvelle spirale sont
expliqués.
Nous utiliserons cette approche, principalement pour les raisons suivantes :
1. Bien voir la progression du processus de développement
2. Obtenir un exemple d'application fonctionnel à la fin du cours
3. Modèle de cycle de développement utilisé en entreprise
Nous utiliserons le contexte de la programmation web pour expliquer les concepts de
bases de la programmation. Ce choix est principalement justifié par les tendances de
développements actuelles et le potentiel de réutilisabilité des concepts web à la suite du
cours. En effet, plutôt que d'utiliser un système d'affichage relié à une plateforme ou un
langage, l'affichage web permettra aux étudiants de créer ou éditer des pages web en
utilisant n'importe quelle plateforme. De plus, l'utilisation de XHTML et CSS (et non HTML)
permettra aux étudiants de connaître les standards web établis.
Nous utiliserons le cadre d'application Wicket pour fournir le contenu dynamique aux pages
web. Le choix de Wicket est justifié par son accent sur le langage Java pur et non annoté. De
plus, Wicket utilise une approche de différenciation marquée entre la portion modèle (Java)
et vue (HTML, CSS) d'une application web, ce qui permet de bien répliquer l'environnement
de travail en entreprise, pour les positions de designer web et programmeur.
La gestion de projets se fera en utilisant deux outils principaux, soit Assembla et Subversion.
Ces outils permettront aux étudiants d'avoir une version unique de leur projet (en ligne), de
présenter leur projet, d'organiser le débogage et de faire la gestion de leur équipe.
Remarque : Étant donné la nature pratique des méthodes pédagogiques utilisées, il est
impératif que vous ne preniez pas de retard. Les concepts appris chaque semaine sont
préalables à la semaine suivante.
4. Évaluation des apprentissages
Il y aura trois exercices en équipe (2-3 membres) et un exercice individuel. Ils seront réalisés
en utilisant l'approche spirale. L'exercice zéro est un projet Eclipse avec un fichier statique
XHTML. Le dernier exercice est une simple application Web basée sur un modèle librement
choisi.
Exercice-0 (0 %)
Cet exercice est un projet Eclipse avec un fichier statique XHTML.
Exercice-1 (équipe 20 %)
Cet exercice est un projet Eclipse avec un paquet modèle et un paquet vue. Le projet doit
être partagé dans le dossier trunk de votre espace de travail en ligne (Assembla). Le modèle
de votre choix doit avoir un concept avec quelques propriétés. La classe de concept devrait
être testée avec JUnit. Le paquet vue devrait avoir un fichier HTML avec CSS. Les données
statiques dans la page html doivent refléter les données de test.
Exercice-2 (équipe 20 %)
Cet exercice est un projet Eclipse avec une application Web basée sur un concept avec un tri.
Les classes doivent être testées avec JUnit. Le projet dans le dossier trunk de votre espace
de travail en ligne doit être utilisé pour envoyer des changements.
4
Exercice-3 (équipe 20 %)
Cet exercice est un projet Eclipse avec une application Web basée sur deux concepts avec
une sélection. Les classes doivent être testées avec JUnit. Le projet dans le dossier trunk de
votre espace de travail en ligne doit être utilisé pour envoyer des changements.
Exercice-4 (individuel 30 %)
Cet exercice est un projet Eclipse avec une application web complète basée sur un nouveau
modèle avec la persistance. Les classes doivent être testées avec JUnit. Le projet au
Assembla dans le dossier trunk de votre espace de travail en ligne doit être utilisé pour
envoyer des changements.
Pour les exercices en équipe (10 %)
Une évaluation d'effort en équipe, où chaque membre d'équipe évalue d'autres membres
(avec quelques explications).
Pondération et barème d’attribution des cotes
La note finale sera transformée en une cote en fonction du barème suivant :
Intervalle
Cote
Intervalle
Cote
[ 100 – 96 ]
A +
[ 70 – 66 ]
C+
[ 95 – 91 ]
A
[ 65 – 61 ]
C
[ 90 – 86 ]
A-
[ 60 – 56 ]
C -
[ 85 – 81 ]
B +
[ 55 – 51 ]
D +
[ 80 – 76 ]
B
[ 50 – 46 ]
D
[ 75 – 71 ]
B -
[ 45 – 0 ]
E (Échec)
M
Retard motivé
Z
Note retardée
Règles disciplinaires
Tout étudiant qui commet une infraction au Règlement disciplinaire à l’intention des étudiants
de l’Université Laval dans le cadre du présent cours, notamment en matière de plagiat,
est passible des sanctions qui sont prévues dans ce règlement. Il est très important pour
tout étudiant de prendre connaissance des articles 28 à 32 du Règlement disciplinaire.
Celui-ci peut être consulté à l’adresse suivante :
.
5
5. Évaluation du cours
Une évaluation formative du cours sera effectuée. Cette évaluation confidentielle sera
uniquement consultée par votre enseignant afin de valider si la formule pédagogique est
correcte et si certains ajustements s’imposent avant la fin de la session.
À la fin de ce cours, la Faculté procédera à l’évaluation du cours afin de vérifier si la formule
pédagogique a atteint ses buts et si vous êtes satisfait en recueillant vos commentaires
et vos suggestions. Cette évaluation est très importante et les responsables du cours
vous remercient à l'avance pour votre collaboration. Veuillez noter que l'évaluation est
confidentielle.
Correspondance entre le cours et les buts et objectifs du programme
de BAA
utilisée
1. S’initier à la prise de décision.
Amorce
2. Communiquer.
En développement
Exercices en équipe
3. Collaborer et travailler en Intégration
Exercices en équipe
équipe.
4. Être ouvert sur le monde.
Amorce
5.
Maitriser
les
outils Intégration
Exercices
technologiques.
6. Être ouvert au changement.
Amorce
7.
Avoir
un
comportement Amorce
éthique.
Correspondance entre le cours et les buts et objectifs du programme
de MBA
utilisée
1.Résoudre
des
problèmes
complexes
en
contexte Amorce
d’incertitude.
2. Communiquer efficacement.
En développement
exercices en équipe
3. Gérer des équipes de travail.
Intégration
Exercices en équipe
6
4. Reconnaitre les principaux
enjeux sur les scènes locales et
Amorce
internationales.
5. Démontrer des aptitudes de En développement
Exercices en équipe
leadership.
6. Utiliser les technologies de
l’information
et
de
la
communication
dans
la Intégration
Exercices
conception,
le
design,
le
développement et la gestion des
organisations.
7. Favoriser l’adoption d’un
comportement socialement
Amorce
responsable.
1 L’amorce veut dire qu’un apprentissage commence à se manifester chez l’étudiant en
lien avec les buts ou les objectifs du programme. En développement indique des acquis
identifiables en relation avec l’apprentissage de ces mêmes buts et objectifs. L’intégration
indique que l’apprentissage des buts et objectifs est compris et appliqué de manière
pertinente à une variété de contextes ou de situations nouvelles. Un cours donné peut couvrir
un ou plusieurs buts et objectifs de programme. Aussi, un cours peut amorcer l’apprentissage
d’un but et intégrer l’apprentissage d’un autre, selon les habiletés et les compétences visées
par le cours.
2 Nous faisons référence ici à la méthode d’évaluation utilisée dans le cours pour évaluer
le degré d’atteinte du but du programme, par exemple : étude de cas, question ouverte
à l’examen, projet, portfolio, quiz, etc. Ces mêmes méthodes d’évaluation pourraient être
utilisées pour collecter des données pour l’Assurance of Learning.
7
6. Contenu des séances
Semaine Date
Séance
Spirale
Échéance
1
2010-01-13 1 : Introduction
2
2010-01-20 2 : XHTML
iEducNews-00
3 : Première
3
2010-01-27
iEducNews-01
Exercice-0
application
4
2010-02-03 4 : CSS
iEducNews-02
5
2010-02-10 5 : Objet
iEducNews-03
6
2010-02-17 6 : Objet
iEducNews-03
Exercice-1
7
2010-02-24 7 : Application Web
iEducNews-04
Semaine de
Semaine de
8
2010-03-03 Semaine de lecture
lecture
lecture
9
2010-03-10 8 : Application Web
iEducNews-04
Exercice-2
10
2010-03-17 9 : Modèle
iEducNews-05
11
2010-03-24 10 : Héritage
iEducNews-06
12
2010-03-31 11 : Persistance
iEducNews-07
Exercice-3
13
2010-04-07 12 : Persistance
iEducNews-07
14
2010-04-14 13 : Formulaire
iEducNews-08
15
2010-04-21 14:
Exercice-4
Séance 1 : Introduction
Installation et vue d'ensemble des différents logiciels utilisés au cours de la session.
Thèmes abordés
• Installation Java JDK
• Installation d'Eclipse
Outil
• Installation de Subclipse
• Introduction à l'environnement Eclipse
• Introduction à Assembla
• Checkout de la spirale 00 de iEducNews
Programmation
Modèle
Web
• Application web iEducNews
Activité(s)
Échéance(s)
8
Séance 2 : XHTML
Spirale 00
Introduction au projet Eclipse, à Subversion et au langage de balisage XHTML.
Thèmes abordés
• Eclipse? Projet? Propriétés
Outil
? Dossiers
? Vues
? Perspectives
• SVN Checkout
Programmation
Modèle
•
HTML
? Sections
? html
? head ? title
? body
? Balises (Tags) de bases
Web
? Heading
? Ordered List
? List Item
? Anchor
? attributs (href et target)
? Break Return
? Italic
? HTML versus XHTML
Activité(s)
Échéance(s)
Séance 3 : Première application
Spirale 01
Introduction au langage objet Java avec un exemple simple de sortie de données.
Thèmes abordés
• Console
• Propriétés de projet Eclipse
• Subversion
Outil
? Share
? Update
? Commit
? Ignore (Propriété pour le dossier bin)
? Team Synchronizing Perspective
• Java naming standards
Programmation
• Package
• Classe? Déclaration
9
? package
? Modificateur d'accès externe (public)
? Nom de classe
• Méthode
? Main
? Déclaration
? Modificateur d'accès (de type public)
? Emballage (de type static)
? Type de retour (de type void)
? Nom de méthode
? Arguments
? Argument de type String
? Tableau de type Array
• Objet de sortie standard
? Méthode println
Modèle
Web
Activité(s)
Échéance(s)
Exercice-0
Séance 4 : CSS
Spirale 02
Introduction à présentation de document XHTML avec CSS.
Thèmes abordés
Outil
Programmation
Modèle
• Feuille de style en cascade
? Lien d'intégration html
• Identifiant
? Tag
? Id
? Classe
• Syntaxe des règles de styles
? Élément(s)
? Propriété(s)
Web
? Attribut
• Ordre d'interprétation des styles et cascade
? Héritage
? Priorité
? Override !important
• Mise en page
? Division
? Centrer une division
? Placement (clear et float)
• Problèmes d'affichage dans différents fureteurs
Activité(s)
Échéance(s)
10
Séance 5 et 6 : Objet
Spirale 03
Introduction au concept d'objet et aux tests. Création du premier objet de notre modèle,
l'objet WebLink.
Thèmes abordés
• Tests JUnit
? Run As, JUnit Test
? Répertoire test
? Package test
Outil
? Classe test
? Fichier jar de JUnit
• Refactorisation d'Eclipse
• Eclipse project properties, Java Build Path, Source
• Eclipse project properties, Java Build Path, Libraries
• Objet? Attributs
? Champs private de la classe
? Variable de type String
? Propriétés
? Méthodes public set et get ensemble
• Méthode
? Argument de type String
? Type de retour:
? String
? void
Programmation
• Boucle For
• Tableau redimensionnable (ArrayList)
? Héritage de la méthode add
? Class casting
? Concaténation de chaine de caractères (String)
• Tests ? Correspondance du nom de package de test
? Classe JUnit
? Class import
? Annotations de test
? Object constructor
? Java new keyword
? Méthodes statiques de JUnit
Modèle
• Package Model
• Classe WebLink
Web
Activité(s)
Échéance(s)
Exercice-1
11
Séance 7 et 8 : Application Web
Spirale 04
Introduction à Wicket, au serveur Jetty et création de notre première application web.
Thèmes abordés
• Fonction Compare d'Eclipse (avec les deux dernières
Outil
spirales)
• Propriété SVN ignore pour les classes
• Héritage de classe
? Accès aux membres de la classe hérité avec le
mot clé super
• Classe Interne
? Modificateur d'accès de méthode de
Programmation
type protected
• Alertes du compilateur
• Conditions
? if [then]
? if [then] else
• Boucle while
? Iterator
Modèle
• Serveur Jetty
? Fichier de configuration
? Fichier par défaut
? Classe Start
• Application Web
? WEB-INF
? Répertoire
? Répertoire de classes
? Répertoire lib avec les fichiers jar de
wicket et autres
? Page par défaut
• Classe WebApp
? Méthode init de l'application
? Annotation @Override
? Utilisation de modèle dans la classe d'application
Web
• HomePage
? Classe? Liste de liens WebLink avec Wicket
? Fichier HTML
? Changement du chemin CSS
? wicket:id
• Wicket? Identifiant
? Composant
? Label
? ExternalLink
? ListView
? ListItem
? Méthode add
• Wicket Tests
? Annotation @BeforeClass
12
? WicketTester
? Méthodes de tests
Activité(s)
Échéance(s)
Exercice-2
Semaine de lecture (entre la séance 7 et 8)
Séance 9 : Modèle
Spirale 05
Perfectionnement de notre modèle et tests Wicket.
Thèmes abordés
Outil
• Aide au débogage avec Eclipse
• Initialisation d'attribut
• Méthode privée (private)
• Interface Collection
? List ? Différence avec ListArray
? Information caché de ArrayList (accès
par une méthode publique de WebLinks)
? Méthode static de triage
• Interface Comparator
• Mots clé Java
Programmation
? implements
? instanceof
? throw
• Type primitif Integer (int)
• Opérateur
? Négation (!)
• Commentaires (Javadoc)
• Tests ? Attribut statique
? Méthode statique
? Différente méthodes statique d'assertion (assert)
• Classes
? DomainModel
? WebLink
Modèle
? Méthode output
? WebLinks
? Méthodes de la classe WebLinks
? Triage
? NameComparator (Classe interne)
• WebApp
Web
? DomainModel
• HomePage avec liens triés
• Tests Web relié au changement du modèle
Activité(s)
Échéance(s)
13
Séance 10 : Héritage
Spirale 06
Concept d'héritage de page dans Wicket et introduction aux Panels.
Thèmes abordés
Outil
• Aide au débogage de classes Web avec Eclipse
• Classe abstraite (abstract class)
• Héritage de classe
• Constructeur
? Constructeur par défaut versus constructeur
? Constructeur avec argument
? super avec un argument appel le constructeur du
Programmation
parent hérité avec un argument
• Méthode
? Signature (ou la méthode est la même qu'un
parent hérité)
? implements
? @Override
• Tests ? assertEquals
Modèle
• Héritage de Page
? Markup HTML
? BasePage
? Balise "wicket:child"
? HomePage
Web
? Balise "wicket:extend"
• Wicket Panel
? Menu Component
? Footer Component
? Nouvelle division CSS
• Wicket BookmarkablePageLink
Activité(s)
Échéance(s)
Séance 11 et 12 : Persistance
Spirale 07
Sauvegarde objet
Thèmes abordés
• Wicket 1.4 (version 1.4.3) avec Java Generics
• Propriétés d'Eclipse
Outil
? Java Build Path
? Libraries
? Ajouter des fichiers jar
• Aide au débogage avec Eclipse
Programmation
• Java Generic Type
14
? Comparateur
? ArrayList
? List
• Java fichier de propriété
• Fichier classe
• Méthodes
? load
? save
• Transmission d'objet
? Input
? Output
? buffered stream
• Sérialisation
? Constante
? Fichier
• Constante (final static)
• Pointeur d'état null
? Erreures
• Try catch statement
• Propriétés du modèle
? Classe ModelProperties
Modèle
? Fichier .properties
• Tests ? Triage
? Suppression
• Type Générique
? ListView
Web
? ListItem
? List
? BookmarkablePageLink
• Constante de sérialisation
Activité(s)
Échéance(s)
Séance 13 : Formulaire
Spirale 08
Introduction au Wicket Form et à la validation.
Thèmes abordés
• Serveur Web Apache Tomcat
Outil
• Refactorisation des paquets avec Eclipse
• Aide au débogage de classes Web avec Eclipse
Programmation
Modèle
• Wicket Form
? TextField
Web
? RequiredTextField
? Button
? Validation
? Required
15
? UrlValidator
? Messages d'erreurs
? Méthode error
• Wicket PageableListView
• Wicket PagingNavigator
• Visibilité des composants
• Noms standards
• Wicket Tests
? Annotation @Before
? Méthodes assert
? Classe FormTester
? Méthodes
• Déploiement d'une application web Java
? Apache Tomcat
Activité(s)
Échéance(s)
Séance 14
Remise des travaux
Thèmes abordés
Outil
Programmation
Modèle
Web
Activité(s)
Échéance(s)
Exercice-4
Fin de session
7. Références du cours
• Apache Tomcat
• Assembla
• Assembla Tutorial
• Code Review
• CSS Tutorial
16
• Eclipse
• Eclipse Tutorial
• Eclipse Subclipse plug-in
• Eclipse Subclipse Tutorial
• Forms
• Hacker News/Tips
• HTML Tutorial
• JavaScript Tutorial
• Java
• Java Book
• Java Collections
• Java Installation
• Java Serialization
• Java Tutorial
17
• JUnit
• JUnit Tutorial
• Modelibra at Google code
• XHTML Tutorial
• Wicket
• Wicket Tutorial
• World Wide Web Consortium (W3C)
Document Outline
- Pondération et barème d’attribution des cotes
- Règles disciplinaires
- Correspondance entre le cours et les buts et objectifs du programme de BAA
- Correspondance entre le cours et les buts et objectifs du programme de MBA
- Semaine Date Séance Spirale Échéance 1 2010-01-13 1 : Introduction 2 2010-01-20 2 : XHTML iEducNews-00 3 2010-01-27 3 : Première application iEducNews-01 Exercice-0 4 2010-02-03 4 : CSS iEducNews-02 5 2010-02-10 5 : Objet iEducNews-03 6 2010-02-17 6 : Objet iEducNews-03 Exercice-1 7 2010-02-24 7 : Application Web iEducNews-04 8 2010-03-03 Semaine de lecture Semaine de lecture Semaine de lecture 9 2010-03-10 8 : Application Web iEducNews-04 Exercice-2 10 2010-03-17 9 : Modèle iEducNews-05 11 2010-03-24 10 : Héritage iEducNews-06 12 2010-03-31 11 : Persistance iEducNews-07 Exercice-3 13 2010-04-07 12 : Persistance iEducNews-07 14 2010-04-14 13 : Formulaire iEducNews-08 15 2010-04-21 14: Exercice-4
- Séance 1 : Introduction Installation et vue d'ensemble des différents logiciels utilisés au cours de la session.
- Séance 2 : XHTMLSpirale 00 Introduction au projet Eclipse, à Subversion et au langage de balisage XHTML.
- Séance 3 : Première applicationSpirale 01 Introduction au langage objet Java avec un exemple simple de sortie de données.
- Séance 4 : CSSSpirale 02 Introduction à présentation de document XHTML avec CSS.
- Séance 5 et 6 : ObjetSpirale 03 Introduction au concept d'objet et aux tests. Création du premier objet de notre modèle, l'objet WebLink.
- Séance 7 et 8 : Application WebSpirale 04 Introduction à Wicket, au serveur Jetty et création de notre première application web.
- Semaine de lecture (entre la séance 7 et 8)
- Séance 9 : ModèleSpirale 05 Perfectionnement de notre modèle et tests Wicket.
- Séance 10 : HéritageSpirale 06 Concept d'héritage de page dans Wicket et introduction aux Panels.
- Séance 11 et 12 : PersistanceSpirale 07Sauvegarde objet
- Séance 13 : FormulaireSpirale 08Introduction au Wicket Form et à la validation.
- Séance 14Remise des travaux
- Fin de session