[PDF] Programmation en technologies web formation avancé | Cours Informatique

(1)

A rch it e ct u re e t D é ve lo p p e m e n t W E B -P ie rr e .j e a n @ e m a .f r

Architecture et Développement Web

Les principes du Web Dynamique

(2)

Introduction

Présentation du formateur L'objectifs de la formation

Les bases du développement Web

Le principe pour faire du Web dynamique Utilisation d'une base de données SQL Initiation au Modèle-Vue-Contrôleur

Les questions sont bienvenues

(3)

Les grandes lignes de la formation

Acquérir les bases du Web dynamique Apprendre la programmation Web

Construire une application Web

Adapter une base de données SQL au Web S'habituer au Model-Vue-Contrôleur

Faire marcher tous les éléments ensembles

(4)

Invitations

La formation vous invite fortement à être des utilisateurs curieux et dynamiques des outils d'Internet

La conception de sites Web s'inspire très largement de l'existant qu'il faut donc consulter

L’examen final par réalisation d’une application web dans un temps donnée

(5)

Des outils simples souvent gratuit

Un éditeur de texte: Bloc-notes de Windows, Ultra-edit32, Notepad++, Dreamweaver, Eclipse Pdt,

Eclipse J2EE

Un navigateur Internet : Internet Explorer, Mozilla Firefox, Opera, Safari, Chrome, Chromium

Un serveur Web: Apache, Ms-IIS, Tomcat, nginx Un outil de base de données: Mysql, Oracle,

PostgreSql, Ms SQL Server

Un langage de développement orienté Web: Php, Asp.Net, Java J2EE, Perl, Python, Ruby on Rail

(6)

La sauvegarde des données:

Attention l'utilisation des ordinateurs en réseau obligent à une sauvegarde spécifiques des

données,

A votre charge:

Les bases de données

Les fichiers des pages dynamiques

(7)

Pour du développement Java

Vérifier systématiquement que vous utilisez Eclipse pour Java EE et Tomcat que nous allons installer ensemble

Eclipse IDE Java EE Developers Apache Tomcat 7.x

Vérifier que vous utilisez le JDK et non le JRE de la machine virtuelle java

(8)

Conseils

Faites des sauvegardes multiples sur le disque N'hésitez pas à demander un

rafraîchissement/actualisation des pages Web dans votre navigateur en appuyant sur le bouton

correspondant (ou la touche F5)

Afficher le code source de la page HTML par clic droit sur la page "Afficher le source"

Désactiver le cache du navigateur

(9)

Base de l'architecture et vocabulaire

Chapitre 1:

TCP/IP et DNS Outils Web

Une communication asynchrone

HTML: Hyper Text Markup Language Structure d'une page HTML

Tag HTML: exemples

HTML: attributs et imbrications De l'URL à l'Information

Les adresses des documents De l'URL à l'Information

(10)

TCP/IP et DNS

Transmissions d'informations par paquets Chaque paquet à l'adresse expéditeur et destinataire

Database Name Server (fichier host) Synchronisation des DNS mondiaux

(11)

Outils WEB

Publication de documents: Serveur Web,Navigateur Transmission de données par FTP, SFTP

Des outils historiques: Mail, News, ICQ

De nouveaux outils: P2P, VoIP, Certificat, Streaming, Dropbox-like

(12)

Une communication asynchrone

GET /index.html HTTP/1.1 Host: www.example.com Accept: text/plain

Accept-Charset: iso-8859-5

Accept-Encoding: compress, gzip Accept-Language: fr

Date: Tue, 14 Jan 2008 08:12:31 GMT

User-Agent: Mozilla/5.0 (Linux; X11; UTF-8)

HTTP/1.1 200 OK

Date: Mon, 14 January 2008 08:13:34 GMT Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux) Last-Modified: Wed, 09 Jan 2008 13:11:55 GMT Accept-Ranges: bytes

(13)

Le Web=échange d'informations

http://www.test.com/fr/index.html

Domaine: .com Sous domaine: test

Serveur: www Racine du site: /

Dossier: fr/

Fichier: index.html

Requête URL: Unified Ressource Locator

<html> <head> <title>Site test.com</title> </head> <body>Bonjour </body> </html> Cache du navigateur

(14)

HTML: Hyper Text Markup Language

Langage de présentation de l'information Normé par le W3C: xhtml 2.0 et html 5

Les Tags s'imbriquent comme des parenthèses dans un calcul

<body><h1>bonjour</h1></body>

Tag solitaire dans certain cas: <br />

Validation du code html sur les différents navigateurs du marché: <br> <br/> <br />

(15)

Structure d'une page HTML

Exemple :

<html>

Pour indiquer un commentaire que le navigateur ne va pas interpréter:

Tout ce qui n'est pas tag ou commentaire entre les tags <body> et </body> est donc affiché comme étant du texte.

Les retour à la ligne et les espaces multiples ne sont pas pris en compte par le navigateur. Il faut en

(16)

Tag HTML: exemples

Dans le <head>

<title>Le titre de la page </title> <meta tag name="keywords"

content="mot1,mot2,mot3">

Dans le <body> <h1>Titre1</h1> <h2>Titre2</h2> <p> un paragraphe </p> <div>Regroupement d’information</div> <ul><li>Matin</li><li>Soir</li></ul>

(17)

HTML: attributs et imbrications

Attributs de tag <p align="right">Paragraphe</p> <img src="image.gif" alt="Image"> <a href="in.html" >ici</a>

Imbrications des tags

<p>Pour voir l’image en grand cliquez dessus <a href="image-grand.jpg">

(18)

Les adresses des documents

Côté serveur un seul document (page Web, fichier image, document Word, etc) est identifiable par son URL

L'identification est absolue tout comme pour un fichier sur un disque dur

http://www.ema.fr/logo.gif

http://localhost/documents/cv/cv-fr.pdf http://www.ema.fr/

http://www.ema.fr/index.html

L'identification peut être relative à la page actuellement affichée dans le navigateur

(19)

De l'URL à l'Information

URL absolue http://www.test.fr/documents/cv/cv-fr.pdf

L'identification peut être relative à la page actuellement affichée dans le navigateur

Ordinateur D:\web\ wwwsite1\ rep1\srep12\ page4.html

URI file://d:/web/wwwsite1/rep1/srep12/page4.html

URL http://www.test.fr/rep1/srep12/page4.html

(20)

Web dynamique

Chapitre 2:

Du Web statique au Dynamique Exemple avec la date du jour

But d'une requête de formulaire Les différents types de requêtes La méthodes GET de requête La méthodes POST de requêtes Formulaire GET et POST

Récupération du formulaire côté serveur Scénario d’échange de données

La session utilisateur

(21)

Du Web statique au Dynamique

Le concept de page HTML virtuellement construite à la demande :

Je fabrique une page HTML où l'heure et la date sont insérées pour présenté une page HTML

différente toutes les secondes

La SNCF ne peux préparer à l'avance tous les trajets possibles entre 2 destinations via une troisième ou indiqué des retards sans Web dynamique

(22)

Etape 2: exécution par le module php

du code php

Etape 3: Génération de la page html en mémoire

Exemple avec la date du jour 1/3

Etape 1: Accès à la page index.php stockée sur le

serveur web Le navigateur de l’internaute demande l’URL suivante http://localhost/index.php Le navigateur de l’internaute affiche l’HTML

(23)

Exemple avec la date du jour 2/3

Page index.jsp Sur le serveur web

Page Web consulté depuis le navigateur de l’internaute via http://localhost/Jsp/index.jsp

(24)

Exemple avec la date du jour 3/3

Page index.php Sur le serveur web

Page Web consulté depuis le navigateur de l’internaute via http://localhost/index.php

(25)

But d'une requête de formulaire

L’interaction entre l’internaute et le serveur web ne peut se limiter à des demandes de pages via des URL

Une requête de formulaire permet de demander à l'utilisateur via son navigateur de remplir des

informations par des champs de saisies: champs texte, cases à cocher, liste déroutante, etc.

A la fin, l'utilisateur soumet son formulaire (envoie toutes les données saisies) au serveur web via une page/programme

Le serveur n’a connaissance des données la page qu’au moment de sa soumission

(26)

Les différents types de requêtes

2 familles de requêtes Web du client vers le

serveurs

La requête classique de demande de page

Web ou d'image

http://localhost/login.html

http://www.ema.fr/logo.gif

<a href="index.html">

<img src="logo.gif">

La requête de formulaire où le client envoie

des données pertinentes à un programme

du serveur web

(27)

La méthodes GET de requête

La méthode classique est le GET:

L'intégralité des données sont indiquées

dans l'URL de la nouvelle page/programme

qui va traiter les données

login.php?nom=jean&prenom=pierree

Toutes les informations sont visibles dans

l'URL: débogage, visibilité, bookmark

Méthode classique pour les liens et les

images

(28)

La méthodes POST de requêtes

La méthode POST:

Les données sont envoyés dans l'entête du

fichier POST

Adapté aux grosses quantités de données

par exemple l'expédition de fichier

Meilleur rendu visuel en production

Les 2 méthodes étant rapidement

interchangeable, le mieux est de faire du

GET puis de passer en POST pour la

(29)

Formulaire GET et POST 1/3

http://localhost/test.php?Nom=Jean&Civ=Mr &go=go

Votre Nom:<input type="text" name="Nom">

Mr:<input type="radio" name= "Civ" value="Mr">

Mme:<input type="radio" name= "Civ" value="Mme"> <input type="submit" name="go" value="go">

(30)

Formulaire GET et POST 2/3

<form name="login" method="get" action="login.php"> <input type="text" name="nom" value="Entrez

votre nom">

(31)

Formulaire GET et POST 3/3

<input type="checkbox" name="anglais" value="lu"><input type="checkbox"

name="anglais" value="parlé"> <select name="Langues" multiple>

<option value="US">Anglais</option> <option value="ES">Espagnol</option> <option value="All">Allemand</option> </select>

<textarea Name="Info"></textarea> <input type="submit" name="Action"

value="Envoyer"> </form>

(32)

Récupération du formulaire côté serveur

test.php

$_REQUEST["Nom"] $_REQUEST["Civ"] $_REQUEST["Valider"] http://localhost/test.php?Nom=Jean&Civ=Mr&Valider=ok

(33)

Récupération du formulaire côté serveur

test.jsp

request.getParameter("Civ") request.getParameter("Nom") request.getParameter("Valider")

(34)

A rch it e ct u re e t D é ve lo p p e m e n t W E B -P ie rr e .j e a n @ e m a .f r IN TE R N ET

Scénario d’échange de données

Http Get Post Traitement des variables et des données (x)HTML Durée de vie du programme Traitement des variables et des données Traitement des variables et des données

(35)

A rch it e ct u re e t D é ve lo p p e m e n t W E B -P ie rr e .j e a n @ e m a .f r La session utilisateur

Le but d’une session est d’identifier un internaute et de le différencier des autres internautes

La différenciation peut se faire par: Un cookie de session, crypté ou non

Un champ caché ou non de session dont l’information est crypté ou non

Une authentification par le navigateur

Attention à la durée de vie de la session, au time-out de la session

Tentative d’utilisation d’une session mal fermée, rejouer une session et processus de double

authentification

(36)

Les information de la session utilisateur

Variables globales ou d’application

Variables de sessions Variables de sessions Variables de sessions Variable de sessions en JSP: session.setAttribute(variable,valeur); session.getAttribute( variable); Variable d’applications en JSP: getServletContext().setAttribute(var, val); getServletContext().getAttribute(var); Variable de sessions en PHP: session_start();$_SESSION[var] = val; Variable d’applications en PHP: define( 'PI' , 3.14159265 );

(37)

Technologies Web

Chapitre 3:

Architecture de l’application web Architecture 3 tiers

Accès à la couche de persistance Css: Cascading Style Sheet

Framework Bootstrap Javascript

DOM: Document Object Model Web 2.0

Ajax

(38)

A rch it e ct u re e t D é ve lo p p e m e n t W E B -P ie rr e .j e a n @ e m a .f r IN TE R N ET

Architecture de l’application web

Http Get Post ODBC JDBC SQL Variables/Objets (x)HTML _{Durée de vie de la} requête SQL LO C AL o u IN TR AN ET

(39)

Architecture 3 tiers

Architecture de base d'une application Web

Couche présentation de l'information, les vues utilisateurs:

xHTML, Javascript, Flash, ActiveX, PDF, Applet Java, Xml, CSS, svg, etc.

Couche métier, applicative, système d’information: ASP.NET, PHP, Java, CGI, Perl, Ruby, C#,

Python, etc.

Couche de persistance, base de données

(40)

A rch it e ct u re e t D é ve lo p p e m e n t W E B -P ie rr e .j e a n @ e m a .f r <?php $connect= mysql_connect("localhost", "userDB","passwordDB"); mysql_select_db(“Systeme_information"); if (! $connect ) die("Erreur de connection");

$resultat=mysql_query(“select * from client"); mysql_close($connect);

?>

Accès à la couche de persistance

IN

TE

R

N

(41)

CSS: Cascading Style Sheet 1/3

Évolution du langage HTML pour simplifier et améliorer le design de site Web

Plutôt que de mettre tous les titres de la page en gras, italique, alignés à gauche

Définir un style commun:

h1.titre1{font-weight: bold; font-style:italic; text-align:left; }

Évolution du langage HTML pour simplifier et améliorer le design de site Web

Identifier un tag par son nom de tag, son id unique dans la page ou par une classe

Identifier un tag par des notions d’ordre, ensembliste ou de contrainte

(42)

CSS: Cascading Style Sheet 2/3

Fichier de style commun à un site Web et donc à plusieurs pages

@import url(/styles/habillage.css); </style>

Extraire la présentation du contenue pour permettre d’accélérer les temps de chargement et de

complexifier les présentation

Css Zen garden: 1 fichier HTML pour plusieurs fichiers css

(43)

CSS: Cascading Style Sheet 3/3

h1{font-size : 2em; margin : 0.67em 0;} .attention{ color:red; }

#intro{ font-style: italic; } h3.attention{ color: black; } </style>

<body>

<h1>Titre du site web</h1>

<p class="attention">Ce site est en construction</p> <p id="intro" class="attention"> L’introduction…</p> <h3 class="attention">le 6 janvier 2008</h3>

</body> </html>

(44)

Framework Bootstrap

Grille de présentation de 12 colonnes

<div class="offset-2 col-sm-10"> <div class="checkbox"> <label> <input name=“remenberMe" type="checkbox"> Remember me </label> </div>

(45)

Javascript 1/2

Un langage embarqué dans la page HTML

Permet la manipulation et le contrôle des données dans le navigateur

Bibliothèque AngularJS, Jquery, Prototype, etc.

http/Ajax Get Post MVC Javascript

(46)

Javascript 2/2

Version de Javascript selon les navigateurs Une langage de référence

débuggeur,

programmation par prototypage, bibliothèques multi navigateur De plus en plus universel

Fonction anonyme en paramètre $ = rechercher dans le DOM

(47)

DOM: Document Object Model

Décomposition d’un document xhtml en zone et en éléments

<div id="zoneTitre">Le titre</div> <div id="zoneCentre">

$('div#nom').html( '<p>nouveau titre</p>' );

Utilisation de div et de span en conjonction du CSS pour l’affichage

div#nom{

float:left;

(48)

le Web 2.0

Le Web 2.0 a pour but de simplifier les interfaces

utilisateurs avec des fonctions notamment javascript avancées et le DOM en évitant l’effet rechargement de la page

L’utilisation appropriée des URL (Url rewriting) Les nuages de tags, cheminement

(49)

Ajax 1/2

Asynchronous Javascript et Xml

Etape1: afficher la page html originelle

(50)

Ajax 2/2

$.ajax({url:"http://www.truc.com/getHorloge.php" ,success: function( result ){

$("#horloge").html( result.find("now").innerText ); }

});

XML ou JSON

(51)

AngularJS

Partie Vue ng-app ng-controller ng-repeat ng-model {{ }} Partie Contrôleur Partie Model

(52)

Développement Web

Chapitre 4:

Les technologies Java L’approche par Jsp

L’approche par Servlet

Rappel sur la base de données Automate à état

Le Design Pattern MVC La couche contrôleur La couche modèle La couche vue

La machine à états doit est lisible

(53)

Les technologies Java 1/2

Eclipse

Outil de développement ou IDE pour Java ou d’autres langages

Logiciel opensource complet pouvant comporter des extensions et des modules

Tomcat

Serveur Web prévu pour développer en Java

Permet d’exécuter des applications Web écrite en HTML, JSP, Servlet

(54)

Les technologies Java 2/2

Jsp

Document HTML comportant des parties de code java ou tags spécifiques

Une Jsp est transformé en Servlet par Tomcat Servlet

Servlet s’exécute sur le serveur Web Tomcat et restitue une page HTML/CSS/Javascript

Applet

Application qui s’exécute dans le navigateur de l’utilisateur

(55)

L’approche par Jsp

<html>

<head><title>ma première jsp</title></head> <body> <h1> Bonjour <%=request.getParameter("nom")%> </h1> </html>

(56)

L’approche par Servlet

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class HelloWorldExample extends HttpServlet { public void doGet(HttpServletRequest request,

HttpServletResponse response) throws IOException, ServletException{ response.setContentType("text/html");

PrintWriter out = response.getWriter(); out.println("<html><head>"); out.println("<title>première servlet</title></head>"); out.println("<body><h1>bonjour"); out.println( request.getParameter("nom")); out.println("</h1></body>"); out.println("</html>"); }

(57)

Rappel sur la base de données 1/2

Un Système de Gestion de Base de Données

(SGBD) permet le stockage de grosses quantités d'informations structurées

Extraction d'informations à partir de tables où sont structurées et stockées les données

Interrogation en SQL (Search and Querying Language) "proche" du langage naturel

Une table contient des données typées et

structurées en colonnes (les champs) et en lignes (les enregistrements)

Un ensemble de tables sont regroupées dans un "schéma" de base de données

(58)

Rappel sur la base de données 2/2

INSERT INTO Conducteur (Numero de Permis,Nom du Conducteur) VALUE('12RT1','Jean');

UPDATE Conducteur SET 'Nom Du

Conducteur'='Jean P.' WHERE "Nom Du Conducteur" = "Jean" AND "Numero de Permis"="12RT1";

SELECT 'Nom du Conducteur' FROM 'Conducteur' WHERE "Nom Du Conducteur" = "Jean" AND

"Numero de Permis"="12RT1";

DELETE 'Conducteur' WHERE "Nom Du Conducteur" = "Jean" AND "Numero de Permis"="12RT1";

(59)

Automates à état

vue=PageLogin.jsp action=DemandeLogin PageLogin.jsp vueAfficher=PageLogin.jsp 1/Servlet extrait les données 2/Invalidation par la couche métier 3/Appel de la JSP PageLogin.jsp

(60)

Le Design Pattern MVC

Un site dynamique doit respecter le paradigme Modèle-Vue-Controleur

Une forme d’extension de l'architecture 3 tiers (architecture physique)

Une architecture logique provenant d'une réflexion aboutie dans l'ingénierie logicielle

Pour faire simple, la division du programmes en morceaux chacun spécialisé dans un objectif

(61)

La couche contrôleur

Contrôle des échanges entre la couche Modèle et la couche Vue

Représentation sous formes de graphes d'états finis Validation des échanges et des transitions d’un état vers un nouvel état

Mis à mal par les évènements Ajax qui arrivent de manière asynchrone

(62)

La couche modèle

Appelé aussi partie Métier car en relation directe avec le métier des utilisateurs de l'application ( banque, assurance )

Notion par exemple d'objet Compte Banquaire, Sinitres, etc

Dans nos exemples inclus la base de données

Peut s'étendre à des applications spécifiques sur de très gros systèmes

Une représentation UML par diagramme de classe sert pour la conception de la partie modèle

Une application classique sans aucun interface mais avec des tests unitaires est souvent conçue pour

(63)

La couche vue

Partie graphique et intelligence graphique

Présentation de l'informations et interactions avec l'utilisateur de l'application

Contrôle de validité des informations rentrées Messages d'erreurs

Adaptable facilement en fonction des terminaux

La partie doit être pensée pour l’internationalisation des interfaces

(64)

La machine à états doit être lisible

String action = request.getParameter("action"); if ("ajouterTodo".equals(action)) {

String texte = request.getParameter("todo_texte"); Application.getInstance().addTodo(texte, false); vueAfficher = "liste_todos.jsp";

}

if ("effacerTodo".equals(action)) {

String idTodo = request.getParameter("todo_id"); Application.getInstance().deleteTodo( idTodo ); vueAfficher = "liste_todos.jsp";

(65)

Chaine de production d’application web

Phase d’analyse de la couche métier en UML

Génération du code avec annotation de la couche de persistance

Génération de la base de données à partir des annotation

Création des tests unitaires avant production du code spécifiques

Création du diagramme d’état pour l’enchainement des pages

Maquette de la charte graphique du site en Css Génération des interfaces graphiques simplifiés