1 Développement WEB - François.Pfister @ ema.fr et Pierre.jean @ ema.fr Intro Archi Php Java ? MVC...

1

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Architecture et Développement Web

Développement php-mysql et java30 heures de cours-tp environs5 Chapitres

2

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

INTRODUCTION

Présentation des formateursObjectifs du coursStructure du coursLes questionsFranç[email protected]@ema.fr

3

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Structure du cours

Les bases du développement webL'approche par script avec PhpLe modèle Model-Vue-Controleur La réponse de Java

4

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Les outils

Editeur de texte ou DreamweaverLe serveur apache 1.3.x d'EasyPhpLe module php d'EasyPhpLe SGBD Mysql d'EasyPhpJbuilder et le JDK 1.4.2

5

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

La sauvegarde des données:

Attention l'utilisation des ordinateurs en réseau obligent une sauvegarde spécifiques des données:Les bases de données MysqlLes données Html et PhpLes fichiers de configurations

spécifiques

6

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Les informations de configuration 1/2

Httpd.confDocumentRoot "D:/Apache/htdocs"<Directory /> Options FollowSymLinks AllowOverride None</Directory>

Php.ini ( <? Phpinfo(); ?>

7

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Les informations de configuration 2/2

Httpd.conf<Directory "D:/Apache/htdocs"> Options Indexes FollowSymLinks MultiViews AllowOverride None Order allow,deny Allow from all</Directory>

My.ini[mysqld]basedir=D:/mysql/datadir=Z:/mysql-data/

8

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Base de l'architecture

Le protocole TCP/IPLa publication HTMLLe serveur ApacheLe Web dynamique CGI et scriptsLes serveurs d'applications

9

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Le protocole TCP/IP

Transmissions d'informations par paquetsChaque paquet à l'adresse expéditeur et

destinatairePublication publique de documents: le WebTransmission de données par FTPSupport de commandes TelnetLe mail, les News et l'ICQP2P (Napster, Morpheus, Edonkey,etc)L'hébergement et le FAI

10

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Historique d'Internet

Intro

1969 Arpanet sous l'impulsion du DoD

1972 Meta réseau, armée, industries, universités

1982 Europe1984 Départ du DoD

11

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Client/Serveur et Web

?Intro

Connexion Forte

Client Serveur

ClientEchange de données

Serveur

+La perte de connexion est signalée+La perte d'informations est faible+La vitesse est adaptée

+Le transfert sur de longues distances

+La connexion est peu coûteuse+Le client est léger+Le client est international

-Le client et le serveur sont connus-La connexion est coûteuse en

ressource-Le client est lourd ( logiciels

spécifiques )

-L'identification est peu fiable-la déconnexion est permanente-La perte de données est possible-Le client n'est pas identifiable

12

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Le Web : échange d'informations

Intro

Http://www.test.com/index.htmlNavigateur Serveur Web

nom: wwwsous domaine: testdomaine: comfichier: index.html

<HTML><HEAD>...<HEAD><BODY>...</BODY></HTML>

Requête URL: Unified Ressource Locator

13

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

HTML

Intro

Hyper Text Markup Language

HTML interprété par le navigateur

Normé par le W3CLanguage de présentation

de l'informationLes TagsOuverture/Fermeture du

TagNavigateur pas toujours

compatible avec la norme

<HTML><HEAD>Yahoo<HEAD><BODY><IMG SRC= "logo.gif">Yahoo</BODY></HTML>

14

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Structure d'une page HTML

Intro

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD> ... </HEAD><BODY> ... </BODY>

</HTML>

15

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Tag HTML:exemples

Intro

Dans le <head><TITLE>Le titre de la page </TITLE><meta tag name="keywords"

content="mots">Dans le <body>

<H1>Titre1</H1> <H2>Titre2</H2><CENTER> A centrer </CENTER><P> un paragraphe </P>

16

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Tag HTML

Intro

Imbrications des tags<center><b>Centrer&gras</b></center>

Tag solitaire<BR> ou <HR>

Attributs de tag<p align="right">Paragraphe</p><IMG SRC="monimg.gif" ALT="Image"><A HREF="in.html" TARGET="_">Target ="_blank"|"_parent"|_"self"|"_top"|

frame

17

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Tag HTML: tableaux

Intro

<TABLE border="1"><CAPTION>le titre</CAPTION><TR><TH>Ref</TH><TH>€</TH></TR><TR><TD>az5</TD><TD>4</TH></TR><TR><TD>er5</TD><TD>7</TH></TR><TR><TD>yv2</TD><TD>1</TH></

TR></TABLE> Ref €

az5 4er5 7yv2 1

18

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Formulaire GET et POST 1/3

<FORM NAME='T' ACTION='test.php' METHOD='POST' ><INPUT TYPE='text' NAME='Nom'><INPUT TYPE='radio' NAME= 'Civ' VALUE='Mr'><INPUT TYPE='radio' NAME= 'Civ' VALUE='Mme'></FORM>Http://…./test.php?Nom=Jean&Civ=Mr

Serveur webNom:

Bonjour:

Mr

OK

Mme

19

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC


<FORM Name="Login" Method="GET" Action="login.php"><INPUT Type="text" Name="Nom" Value="Entrez

votre nom"><INPUT Type="hidden" Name="idsession"

Value="367821"><INPUT Type="radio" Name="Civ" Value="M">

<INPUT Type="radio" Name="Civ" Value="Mme"><INPUT Type="Submit" Name="Action"

Value="login"></FORM>

20

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC


<FORM Name="Login" Method="GET" Action="test.php"><INPUT Type="checkbox" Name="Diplome"

Value="Bac"><INPUT Type="checkbox" Name="Diplome" Value="Bac+4"><INPUT Type="checkbox" Name="Diplome" Value="Bac+5">

<SELECT Name="Langues" Multiple><OPTION Value="US">Anglais</OPTION><OPTION Value="ES">Espagnol</OPTION><OPTION Value="ES">Allemand</OPTION>

</SELECT><TEXTAREA Name="Info"></TEXTAREA><INPUT Type="Submit" Name="Action" Value="Envoyer">

</FORM>

21

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

De l'URL à l'Information

Virtualisation du serveur Web représentant une arborescence

Ordinateur

Site(s)

Serveur Web Requête

Disque

Répertoires Pages HTML

Fichiers

Répertoires

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

URI: file://d:/web/wwwroot/site1/rep1/srep12/page4.html

22

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Côté serveur

Soit simple recopie du fichier HTML vers le navigateur ayant demandé cette page

Soit scripts et autres programmes côté serveur Serveur Web avec

option Php Requête

Script en Php

<HTML><HEAD>Yahoo<HEAD><BODY><IMG SRC= "logo.gif">Yahoo</BODY></HTML>

23

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Web dynamique 1/3

Inscription.php$_POST("Nom") $_POST("Civilité") $_POST("Valider")

Objets Php

<HTML>...<BODY><FORM NAME="Inscription" METHOD="GET/POST" ACTION= "inscription.php"><INPUT TYPE="Text" NAME="Nom" VALUE=""><INPUT TYPE="Radio" NAME= "Civilité" VALUE="Mr"><INPUT TYPE="Radio" NAME= "Civilité" VALUE="Mdme">…<INPUT TYPE="Submit" NAME="Valider"></FORM></BODY></HTML>

24

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Web dynamique 2/3

NavigateurHttp://./Inscription.phpNom=DupondCivilite=Mr

Inscription.php

Objets PHP

<HTML>...<BODY>BonjourMr Dupond</BODY></HTML>

Processeur PHP <HTML>...<BODY>

Bonjour <?echo($_POST["Civilite"])?><?echo($_POST["Nom"])%></BODY></HTML>

Page virtuelle

25

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Web dynamique 3/3

<? $Article= array {"CD unplug","CD live","CD impor US"}$PrixHT=array{12.50,149,160}?><HTML>...<TABLE><TR><TD>N°</TD><TD>Article</TD><TD>Prix</TD></TR><? for ($i=1;$i<sizeof($Article);$i++) { echo(" <TR><TD>"); echo($i); echo(" </TD><TD>"); echo($Article[$i]); echo(" </TD><TD>"); echo($PrixHT[$i]*1.155%); echo(" </TR>");} ?></TABLE></HTML>

26

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Javascript

Language embarqué dans la page HTML <html><head><title>j'achete.com</title>

</head><body><script>Sub CheckDate( strDate ){ If ( not isDate( strDate ) ) then alert('Date incorrecte'); Else document.form.date.submit(); End IfEnd Sub</script><FORM NAME="Date" ACTION="Date.asp" METHOD="POST">Entrez votre date de naissance<BR><INPUT TYPE="text" NAME="LaDate"><INPUT TYPE="Button" VALUE="OK" onclick="CheckDate(document.Date.LaDate.value);"></FORM></body></html>

Il faut éviter les échanges inutilesentre le Serveur et le Navigateur !

27

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Architecture 3 tiers 1/3

Architecture de base d'une application WebDivision de l'application en 3 grandes

parties :Partie Présentation de l'information HTML,

Javascript, Flash, ActiveX, PDF, Applet Java, etc

Partie Application programme ASP, PHP, Java, ColdFusion, CGI, Perl, Java, etc

Partie Base de Données avec Mysql, Oracle, MSSQL, PostGress, SapDB, etc

28

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC


<? $Article= array {"CD unplug","CD live","CD impor US"}$PrixHT=array{12.50,149,160}?><HTML>...<TABLE><TR><TD>N°</TD><TD>Article</TD><TD>Prix</TD></TR><? for ($i=1;$i<sizeof($Article);$i++) { echo(" <TR><TD>"); echo($i); echo(" </TD><TD>"); echo($Article[$i]); echo(" </TD><TD>"); echo($PrixHT[$i]*1.155%); echo(" </TR>");} ?></TABLE></HTML>

29

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC


WEB

Site Web en PHP

Objets PHP BD

Base de données

SGBD

-Host: nom de l'ordinateur-DB: nom de la base de données-User: nom de l'utilisateur de la BD-Password: mot de passe de cet utilisateur

<?

$connect = mysql_connect("localhost","userDB","passwordDB","","-D mabasedonnées");

if (! $connect ) die("Erreur de connection à la base de données");

$resultat = mysql_query("SELECT * FROM CARNET");

// mysql_select_db("NouvelleBasedeDonnées");

mysql_close($connect); ?>

30

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Base de données 1/3

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

Travail d'analyse important : DBAdministrateur

Interrogation en SQL (Structured Query Language) "proche" du langage naturel

31

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC


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

Liaison virtuelle entre les tables Conducteur

Numéro de PermisNom du ConducteurDate du Permis

VoitureImmatriculationTypeNombre de PassagerKilométrage

TrajetDate de départKilométrage

32

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC


INSERT INTO "Conducteur"(Numéro de Permis,Nom du Conducteur) VALUE("12RT1","Jean");

UPDATE "Conducteur" SET "Nom Du Conducteur"="Jean P." (*);

SELECT "Nom du Conducteur" FROM "Conducteur" (*);

DELETE "Conducteur" (*); (*) WHERE "Nom Du Conducteur" = "Jean"

AND "Numéro de Permis"="12RT1";

33

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Exemples de requêtes SQL 1/2

Table Trajet

Table Conducteur Table Voiture

ST954A 212RT30 19/07/01 32SU4532 212RT30 11/07/01 54ST954A 523FG30 08/07/01 44

ST954ASU4532

N° Permis Immatriculation

Date Trajet Km

N° Permis NomDupontTintin

878AR30212RT30523FG30

Immatriculation

ModèleClio

Twingo206WR123T Haddock

SELECT Nom FROM Conducteur,Trajet WHERE Conducteur.N°Permis = Trajet.N°Permis

34

Dévelo

ppem

en

t W

EB

- F

ranço

is.P

fist

er

@ e

ma.f

r e

t Pie

rre.jean @

em

a.f

r

Intro ArchiPhp

Java ?MVC

Exemples de requêtes SQL 2/2

SELECT C.Nom,V.Modèle FROM Conducteur as C ,Trajet as T,Voiture as V WHERE C.N°Permis = T.N°Permis AND T.Immatriculation = V. Immatriculation AND C.Nom = "Tintin"

SELECT SUM(T.Km) FROM Trajet as T, Voiture as V WHERE T.Immatriculation = V. Immatriculation AND V.Modèle = "Clio";

1 Développement WEB - François.Pfister @ ema.fr et Pierre.jean @ ema.fr Intro Archi Php Java ? MVC...

Documents

Transcript of 1 Développement WEB - François.Pfister @ ema.fr et Pierre.jean @ ema.fr Intro Archi Php Java ? MVC...