Architecture et Développement Web Développement php-mysql et java 30 heures de cours-tp environs 5 Chapitres
INTRODUCTION Présentation des formateurs Objectifs du cours Structure du cours Les questions François.Pfister@ema.fr Pierre.Jean@ema.fr
Structure du cours Les bases du développement web L'approche par script avec Php Le modèle Model-Vue-Controleur La réponse de Java
Les outils Editeur de texte ou Dreamweaver Le serveur apache 1.3.x d'EasyPhp Le module php d'EasyPhp Le SGBD Mysql d'EasyPhp Jbuilder et le JDK 1.4.2
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 Mysql Les données Html et Php Les fichiers de configurations spécifiques
Les informations de configuration 1/2 Httpd.conf DocumentRoot "D:/Apache/htdocs" <Directory /> Options FollowSymLinks AllowOverride None </Directory> Php.ini ( <? Phpinfo(); ?>
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/
Base de l'architecture Le protocole TCP/IP La publication HTML Le serveur Apache Le Web dynamique CGI et scripts Les serveurs d'applications
Le protocole TCP/IP Transmissions d'informations par paquets Chaque paquet à l'adresse expéditeur et destinataire Publication publique de documents: le Web Transmission de données par FTP Support de commandes Telnet Le mail, les News et l'ICQ P2P (Napster, Morpheus, Edonkey,etc) L'hébergement et le FAI
Historique d'Internet 1969 Arpanet sous l'impulsion du DoD 1972 Meta réseau, armée, industries, universités 1982 Europe 1984 Départ du DoD Intro
Client/Serveur et Web Connexion Forte Echange de données Serveur +La perte de connexion est signalée +La perte d'informations est faible +La vitesse est adaptée -Le client et le serveur sont connus -La connexion est coûteuse en ressource -Le client est lourd ( logiciels spécifiques ) Client Serveur Echange de données +Le transfert sur de longues distances +La connexion est peu coûteuse +Le client est léger +Le client est international -L'identification est peu fiable -la déconnexion est permanente -La perte de données est possible -Le client n'est pas identifiable Intro ?
Le Web : échange d'informations Requête URL: Unified Ressource Locator Http://www.test.com/index.html Navigateur Serveur Web nom: www sous domaine: test domaine: com fichier: index.html <HTML><HEAD>...<HEAD><BODY> ... </BODY></HTML> Intro
HTML Hyper Text Markup Language HTML interprété par le navigateur Normé par le W3C Language de présentation de l'information Les Tags Ouverture/Fermeture du Tag Navigateur pas toujours compatible avec la norme <HTML> <HEAD>Yahoo<HEAD> <BODY> <IMG SRC= "logo.gif"> Yahoo </BODY> </HTML> Intro
Structure d'une page HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML> <!-- le commentaire --> Intro
Tag HTML:exemples 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> Intro
Tag HTML 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 Intro
Tag HTML: tableaux <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 4 er5 7 yv2 1 Intro
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> Bonjour: Serveur web Nom: Mr Mme OK Http://…./test.php?Nom=Jean&Civ=Mr
Formulaire GET et POST 2/3 <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>
Formulaire GET et POST 3/3 <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>
De l'URL à l'Information Virtualisation du serveur Web représentant une arborescence URL: http://www.test.fr/rep1/srp12/page4.html Pages HTML Serveur Web Répertoires Site(s) Requête Ordinateur Disque Répertoires Fichiers URI: file://d:/web/wwwroot/site1/rep1/srep12/page4.html
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>
Web dynamique 1/3 $_POST("Nom") $_POST("Civilité") $_POST("Valider") <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> Inscription.php Objets Php $_POST("Nom") $_POST("Civilité") $_POST("Valider")
Web dynamique 2/3 Processeur PHP Page virtuelle Navigateur Http://./Inscription.php Nom=Dupond Civilite=Mr Objets PHP Inscription.php Processeur PHP Page virtuelle <HTML>...<BODY> Bonjour <?echo($_POST["Civilite"])?> <?echo($_POST["Nom"])%> </BODY></HTML> <HTML>...<BODY> Bonjour Mr Dupond </BODY></HTML>
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>
Javascript Language embarqué dans la page HTML Il faut éviter les échanges inutiles entre le Serveur et le Navigateur ! <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 If End 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>
Architecture 3 tiers 1/3 Architecture de base d'une application Web Division 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
Architecture 3 tiers 2/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>
Architecture 3 tiers 3/3 -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 WEB Site Web en PHP Objets PHP BD Base de données SGBD <? $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); ?>
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
Base de données 2/3 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 Permis Nom du Conducteur Date du Permis Voiture Immatriculation Type Nombre de Passager Kilométrage Trajet Date de départ Kilométrage
Base de données 3/3 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";
Exemples de requêtes SQL 1/2 Table Trajet N° Permis Immatriculation Date Trajet Km ST954A 523FG30 08/07/01 44 SU4532 212RT30 11/07/01 54 ST954A 212RT30 19/07/01 32 SELECT Nom FROM Conducteur,Trajet WHERE Conducteur.N°Permis = Trajet.N°Permis Table Voiture Table Conducteur Immatriculation Modèle N° Permis Nom 523FG30 Clio ST954A Dupont 212RT30 Twingo SU4532 Tintin 878AR30 206 WR123T Haddock
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";