Download
1 / 34
340 likes | 489 Views
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.
E N D
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 Serveur +La perte de connexion est signalée +La perte d'informations est faible +La vitesse est adaptée Client Connexion Forte -Le client et le serveur sont connus -La connexion est coûteuse en ressource -Le client est lourd ( logiciels spécifiques ) Serveur Client 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> <HEAD>Yahoo<HEAD> <BODY> <IMG SRC= "logo.gif"> Yahoo </BODY> </HTML> 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 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
Ref € az5 4 er5 7 yv2 1 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> Intro
<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: Nom: Mr Mme OK Formulaire GET et POST 1/3 Serveur web 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 Répertoires Serveur Web Site(s) Requête Disque Ordinateur Répertoires Fichiers URI: file://d:/web/wwwroot/site1/rep1/srep12/page4.html
Script en Php <HTML><HEAD>Yahoo<HEAD> <BODY> <IMG SRC= "logo.gif"> Yahoo </BODY></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
<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> Web dynamique 1/3 Inscription.php Objets Php $_POST("Nom") $_POST("Civilité") $_POST("Valider")
Web dynamique 2/3 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>
WEB BD SGBD Objets PHP Base de données Site Web en PHP 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 <? $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
Voiture Immatriculation Type Nombre de Passager Kilométrage Trajet Date de départ Kilométrage Conducteur Numéro de Permis Nom du Conducteur Date du Permis 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
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";
Table Trajet Table Voiture Table Conducteur Exemples de requêtes SQL 1/2 SELECT Nom FROM Conducteur,Trajet WHERE Conducteur.N°Permis = Trajet.N°Permis N° Permis Immatriculation Date Trajet Km ST954A 523FG30 08/07/01 44 SU4532 212RT30 11/07/01 54 ST954A 212RT30 19/07/01 32 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";
