Sie sind auf Seite 1von 172

AgroParisTech Grignon 1A

SYSTEME DINFORMATION

MMIP - UFR d'informatique ufr.informatique@agroparistech.fr Support rdig par David DOUSSOT : doussot@agroparistech.fr

SOMMAIRE
Systme d'Information : Prsentation gnrale......................................5 Architecture, technologies, organisation.........................................8 Conception et ralisation...............................................................15 Profils des mtiers.........................................................................17 Etude sommaire d'une technologie...............................................19 Client HTML...........................................................................................25 Le navigateur HTML......................................................................27 URL : Uniform Ressource Locator................................................29 HTML, Hyper Text Markup Language...........................................30 HTML : premier exemple...............................................................31 Normes et outils.............................................................................32 La syntaxe HTML : balises............................................................33 L'interprtation des pages HTML...................................................34 Le document HTML minimal..........................................................35 Balises de mise en page...............................................................37 Mise en forme, attributs standards................................................38 Les listes........................................................................................39 Les styles.......................................................................................40 Les feuilles de style.......................................................................41 Feuille de style : exemple..............................................................43 Feuille de style : fichier HTML.......................................................44 Feuille de style : fichier CSS..........................................................45 Les images.....................................................................................46 Ancres et liens hypertextes............................................................47 Les tableaux...................................................................................49 Scinder une page en blocs............................................................52 Les formulaires HTML...................................................................53 Les balises <form></form>............................................................54 Les contrles graphiques HTML....................................................55

AgroParisTech, ufr dinformatique

Sommaire

page 1

Prise en main de l'outil de dveloppement...........................................57 TD HTML................................................................................................63 TD HTML 1....................................................................................65 TD HTML 2....................................................................................66 TD HTML 3....................................................................................67 TD HTML 4....................................................................................68 TD HTML 5....................................................................................71 TD HTML 6....................................................................................72 Programmation : principes de base.......................................................73 Ordinateur : architecture et codage...............................................75 Langages de programmation.........................................................79 Types et variables..........................................................................82 Instructions.....................................................................................85 Branchements conditionnels.........................................................87 Schmas itratifs...........................................................................89 Procdures et fonctions.................................................................93 PHP........................................................................................................97 PHP : histoire et tat des lieux......................................................99 PHP : principe de fonctionnement...............................................100 Premier exemple de code............................................................101 Notions de base...........................................................................103 Structures de contrle..................................................................104 Interactions avec l'utilisateur.......................................................105 Formulaire valid par lui-mme...................................................107 Tableaux......................................................................................109 Fonctions.....................................................................................110 Suivi de la navigation : notion de session...................................111 Ressources..................................................................................113

AgroParisTech, ufr dinformatique

Sommaire

page 2

TD PHP................................................................................................115 TD PHP 1.....................................................................................117 TD PHP 2.....................................................................................118 TD PHP 3.....................................................................................119 TD PHP 4.....................................................................................120 TD PHP 5.....................................................................................121 Organiser les donnes du Systme d'Information..............................123 TD Base de donnes...........................................................................137 Bases de donnes : concepts.....................................................139 Bases de donnes relationnelles.................................................140 Introduction MySQL..................................................................141 TD Base de donnes 1................................................................142 TD Base de donnes 2................................................................144 Le langage SQL : SELECT..........................................................146 Gestion de projet..................................................................................149 Un projet, c'est quoi ?..................................................................152 Les grands rles dans un projet..................................................154 Les phases...................................................................................156 Mthodologie et documents........................................................157 Chiffrage.......................................................................................166

AgroParisTech, ufr dinformatique

Sommaire

page 3

AgroParisTech, ufr dinformatique

Sommaire

page 4

Systme d'Information : prsentation gnrale

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 5

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 6

Systme d'Information : prsentation gnrale


AgroParisTech, ufr dinformatique

Droulement

cours 1 (amphi) TD 1 3 cours 2 (amphi) TD 4 TD 5 8 cours 3 (amphi) TD 9 13 cours 4 (amphi) TD 14 19

Lentreprise et son systme dinformation : architecture et technologies Fonctionnement du client HTML Programmation QCM programmation Langage PHP Base de donnes : concepts, relations, modlisation. requtes SQL de consultation et mise jour, API php Conception d'une base de donnes, dbut du projet Gestion de projet : les bases Projet : intranet et covoiturage, valuation

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 7

Sommaire des thmes abords

Architecture, technologies, organisation Conception et ralisation Profils des mtiers tude sommaire dune technologie

Le systme dinformation (SI) de lentreprise


Gestion de lentreprise (back office) Services aux clients (front office) Relations prospects (action commerciale, CRM)
points daccs Base de donnes

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 8

Prparer un week end Lisbonne


de chez soi, via internet, par tlphone, ou bien dune agence service central de rservation

ct CLIENT
point de rservation

ct SERVEUR

Places disponibles

ct Client

Les tapes de la rservation


1 AR pour 2 personnes, Paris-Lisbonne, dpart le 6/2/2004, retour le 9/2/2004 AF225 + AF567 = 500 x 2 TAP071 + TAP072 = 456 x 2 XA charter = 280 x 2

ct Serveur

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 9

ct Client

Les tapes de la rservation

ct Serveur

1 1 AR pour 2 personnes, Paris-Lisbonne, dpart le 6/2/2004, retour le 9/2/2004


? conditions dannulation pour le charter pas de remboursement, sauf assurance complmentaire

AF225 + AF567 = 500 x 2 / TAP071 + TAP072 = 456 x 2 / XA charter = 280 x 2

ct Client

Les tapes de la rservation

ct Serveur

1 1 AR pour 2 personnes, Paris-Lisbonne, dpart le 6/2/2004, retour le 9/2/2004 2 ? conditions dannulation pour le charter
? cot de lassurance 5% prix du voyage
pas de remboursement, sauf assurance complmentaire

AF225 + AF567 = 500 x 2 / TAP071 + TAP072 = 456 x 2 / XA charter = 280 x 2

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 10

ct Client

Les tapes de la rservation

ct Serveur

1 1 AR pour 2 personnes, Paris-Lisbonne, dpart le 6/2/2004, retour le 9/2/2004 2 ? conditions dannulation pour le charter 3 ? cot de lassurance
5% prix du voyage pas de remboursement, sauf assurance complmentaire

AF225 + AF567 = 500 x 2 / TAP071 + TAP072 = 456 x 2 / XA charter = 280 x 2

rservation ferme TAP ! ? mode de paiement (CB / chque)

ct Client

Les tapes de la rservation

ct Serveur

1 1 AR pour 2 personnes, Paris-Lisbonne, dpart le 6/2/2004, retour le 9/2/2004 2 ? conditions dannulation pour le charter 3 ? cot de lassurance
5% prix du voyage pas de remboursement, sauf assurance complmentaire

AF225 + AF567 = 500 x 2 / TAP071 + TAP072 = 456 x 2 / XA charter = 280 x 2

4 rservation ferme !

? mode de paiement (carte bancaire / chque)

indication n de carte + date de validit validation paiement carte + ordre mission billets

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 11

ct Client

Les tapes de la rservation

ct Serveur

1 1 AR pour 2 personnes, Paris-Lisbonne, dpart le 6/2/2004, retour le 9/2/2004 2 ? conditions dannulation pour le charter 3 ? cot de lassurance
5% prix du voyage pas de remboursement, sauf assurance complmentaire

AF225 + AF567 = 500 x 2 / TAP071 + TAP072 = 456 x 2 / XA charter = 280 x 2

4 rservation ferme !

quelle infrastructure pour ces oprations ?

? mode de paiement (carte bancaire / chque)

5 indication n de carte + date de validit

validation paiement carte + ordre mission billets

Le systme dinformation : une architecture client / serveur


q

Base de donnes : Serveur : Clients :


s s

Oracle, DB/2, SQL server, mySQL


q

BD

machine(s) et logiciels
q

terminal passif (3270 / 5250) micro-ordinateur : client lourd ou lger ? navigateur Web : le client universel

Serveur

Clients

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 12

Le systme dinformation de lentreprise, aujourdhui


HTML

Serveur Web Serveur dapplications

BD


HTML

HTML

Applications

HTML

Postes clients

Lgende : information statique ou dynamique code excutable (programme)

O linformation est-elle traite ?


HTML

Serveur Web Serveur dapplications lger :

BD


HTML

client

HTML

HTML

peu ou pas de traitement sur le client (programmation en JavaScript) ct serveur, trois types de solutions applicatives (Microsoft, Java, PHP)
Lgende : information statique ou dynamique code excutable (programme)

Postes clients

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 13

Et la structuration ?
HTML

Serveur Web Serveur dapplications Applications

BD


HTML

HTML

HTML

Back Office Front Office

Les composants et les pratiques


Dveloppement particulier Progiciel de gestion intgr (PGI, ERP) autonomie ou sous-traitance ? rgie ou forfait ? Back Office externalisation (infogrance)? Front Office

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 14

Sommaire des thmes abords

Architecture, technologies, organisation

Conception et ralisation
Profils des mtiers tude sommaire dune technologie

SI : concevoir, dvelopper, grer

Besoins

conseil, cahier des charges

Ralisation

service, matrise douvrage / duvre, forfait / assistance technique

Dploiement Exploitation
infogrance ?

logistique, formation

P R O J E T

Maintenance
TMA ?

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 15

Cycle en V
Cahier des charges Spcifications gnrales Spcifications dtailles Tests utilisateurs pr-production Tests de qualification et dintgration Tests unitaires

Codage

Cycle en V : parodie

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 16

Sommaire des thmes abords

Architecture, technologies, organisation Conception et ralisation

Profils des mtiers


tude sommaire dune technologie

Un projet dvolution du SI ?
expression des besoins spcifications fonctionnelles spcifications techniques architecture ralisation tests livraison et dploiement communication
X X X X X X X X

technique
X X X

mtier
X X X X X

organisation
X X X X X X X

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 17

Le profil des informaticiens du projet


q q

Communication : Fonctionnel : Technique :

couter, expliquer, accompagner connatre le mtier de lentreprise, comprendre les enjeux et savoir formuler les besoins contrler et assembler les outils qui lencapsulent

Organisation :

grer, piloter, coordonner

management & organisation

consultant

matrise duvre
directeur de projet, chef de projet

matrise douvrage
analyste
technique

dveloppeur

fonctionnel

consultant architecte
expertise
UV europenne

consultant architecte

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 18

Sommaire des thmes abords

Architecture, technologies, organisation Conception et ralisation Profils des mtiers tude sommaire dune technologie

Le web

Invention rcente :

1992 au CERN Tim Bernes Lee

Au dpart :

sites documentaires liens hypertextes

Technologie : HTTP et HTML

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 19

HTML : un premier exemple


Chargeons une page Distinguons entre la prsentation et le fichier-source :


HTML est un langage de description dinformation Le navigateur Internet interprte ce langage pour prsenter linformation du texte des images des liens entre pages

HTML permet de dcrire :


une image

du texte

un lien vers une autre page

un formulaire de saisie

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 20

Historique du Web

Le web l'origine :

permet d'accder des pages d'informations relies par des liens hypertextes ncessite uniquement la prsence d'un navigateur Web sur le poste client permet de gnrer des pages dynamiquement pour des applications spcifiques et limites (ex : moteur de recherche)

Evolution du Web

Dveloppement des pages dynamiques : gnres partir d'une base de donnes : pas besoin d'crire des centaines de pages HTML (ex : site de presse) apportent un contenu personnalis l'utilisateur (ex : Mon Yahoo !) ne ncessitent pas d'installation sur le poste de l'utilisateur (ex : annuaire de l'cole)

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 21

Technologies du Web dynamique

Microsoft ASP (.Net) Active Server Page Fonctionne uniquement sous Windows Java : Servlets/JSP programmation objet richesse des interfaces PHP : communaut libre trs populaire pour les sites Internet simple apprendre

Web dynamique : principes (1 / 3)

Formulaire : - champs de saisie - bouton de validation

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 22

Web dynamique : principes (2 / 3)

Transmission des donnes du formulaire

Rponse la demande

Web dynamique : principes (3 / 3)


1 : le navigateur rassemble les informations du formulaire, il se connecte au serveur et lui transmet ces informations dans une requte HTTP 2 : le serveur accepte la connexion reoit la requte, retrouve les informations transmises et recherche les donnes correspondantes

4 : le navigateur affiche la page et rompt la connexion

3 : le serveur gnre dynamiquement une page avec le rsultat, lenvoie en rponse HTTP au navigateur

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 23

Web dynamique : session

Le dialogue entre le navigateur et le serveur est dconnect : 1. Le navigateur se connecte au serveur 2. La navigateur envoie une requte 3. Le serveur renvoie une rponse 4. La connexion est rompue ! Comment assurer le suivi de l'utilisateur (ex : webmail, panier dans un site de commerce) ?

Web dynamique : cookies


1 : le navigateur rassemble les informations du formulaire, il se connecte au serveur et lui transmet ces informations dans une requte HTTP 2 : le serveur accepte la connexion reoit la requte, retrouve les informations transmises et recherche les donnes correspondantes. Il gnre galement un cookie et garde en mmoire les informations associes

3 : le serveur gnre dynamiquement une page avec le rsultat, lenvoie en rponse HTTP au navigateur, accompagne du cookie. 4 : Le navigateur garde le cookie et affiche la page

5 : lors de la requte suivante, le navigateur retransmet le cookie au serveur, qui saura ainsi identifier lutilisateur...

5 : etc.

3 : le serveur gnre une page en fonction de lutilisateur identifi par son cookie

clavel doussot

AgroParisTech, ufr dinformatique Systme d'Information : prsentation gnrale

page 24

Client HTML

AgroParisTech, ufr d'informatique

Client HTML

page 25

AgroParisTech, ufr d'informatique

Client HTML

page 26

Le navigateur HTML (1 / 2)
Le navigateur ou browser est avant tout un client HTTP. Cest grce ce logiciel que lutilisateur visualise les informations quil tlcharge depuis le Web.

Les fonctions de base du navigateur Web


Il met les requtes (Queries) HTTP destination des serveurs Web. Il interprte les documents HTML qui lui sont envoys en retour. Il fournit des outils destins faciliter la navigation (gestionnaire de Bookmarks, Historique des visites,...).

Un contenu multimdia

Tous les navigateurs peuvent afficher du texte format en HTML et des images au format GIF ou JPG ; La plupart des navigateurs ne se limitent plus linterprtation des pages HTML. Par lintermdiaire dextensions (Plug-ins), le navigateur Web peut dsormais traiter tout type de documents multimdias : son, images animes... Bien que non officiellement standardises, ces extensions acquirent parfois un statut de standard de fait (plug-in RealAudio pour la diffusion de fichiers sonores).

AgroParisTech, ufr d'informatique

Client HTML

page 27

Le navigateur HTML (2 / 2)
Le navigateur Web est aujourdhui peru comme linterface universelle et standardise daccs aux ressources du rseau.

Intgration des protocoles Internet


Le navigateur Web nest plus un simple client HTTP. La plupart des navigateurs du march sont aussi des clients dautres applications Internet : SMTP (Messagerie lectronique), FTP (transfert de fichiers), NNTP (news), ...

Un client lger (thin-client)


Le navigateur Web est le client standard des architectures Client / Serveur Internet.

Un OS au dessus de lOS
Le navigateur Web possde des capacits dexcution dapplications distribues :

moteurs dexcution de scripts inclus dans les pages HTML (JavaScript et VBScript) ; machine virtuelle Java pour lexcution dapplets ; conteneur de composants binaires distribus (ActiveX).

Navigateurs disponibles

Microsoft Internet Explorer Mozilla, Firefox Opera

AgroParisTech, ufr d'informatique

Client HTML

page 28

URL : Uniform Resource Locator


Utilit
URL signifie : Uniform Resource Locator Une URL identifie de manire unique une ressource dans un rseau internet ou intranet.

Diffrents types d'URL


Consultation : Tlchargement : Mail :

http://www.agroparistech.fr/spip.php?rubrique46 ftp://ftp.mozilla.org mailto:webmaster@agroparistech.fr

Forme gnrale
protocole:numro_de_port//nom_ou_adresse_serveur/emplacement

le protocole indique la syntaxe d'change entre le client et le serveur ; le numro de port indique un chemin d'coute particulier sur le serveur (par dfaut : 80 pour http, 21 pour ftp, etc.) ; le nom/l'adresse du serveur indique comment le retrouver sur le rseau l'emplacement indique l'emplacement exact de la ressource demande sur le serveur.

AgroParisTech, ufr d'informatique

Client HTML

page 29

HTML, Hyper Text Markup Language

HTML est le langage de formatage de documents diffuss sur le World Wide Web. Il a t dfini par Tim Berners-Lee, un ingnieur du CERN (Centre Europen de Recherche Nuclaire) aussi inventeur du protocole HTTP et aujourdhui prsident du W3 Consortium. HTML nest pas un langage de programmation. HTML est un langage de description de page. Il spcifie la faon dont les donnes quil contient devront tre formates laffichage ou limpression par le client HTTP. HTML est standardis par les instances de gestion de lInternet. Cette standardisation le rend portable sur diffrentes plates-formes matrielles et logicielles sans adaptations pralables. HTML est un sous-ensemble de SGML un langage standardis de formatage de documents multi-supports beaucoup plus complexe et fonctionnellement plus riche (utilis notamment par les diteurs douvrages de rfrence : notices techniques, ...). Des feuilles de styles crites au format CSS (Cascading Style Sheet) sont souvent associes aux pages HTML.

Le prsent support ne se veut pas exhaustif. Il permet d'acqurir les bases ncessaires la cration de pages web. Des informations supplmentaires peuvent tre trouves facilement sur le web !

AgroParisTech, ufr d'informatique

Client HTML

page 30

HTML : premier exemple

Code source
<?xml version="1.0" encoding="ISO-8859-15"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" /> <title> AgroParisTech </title> </head> <body style="text-align:center"> <div id="contenu"> <img src="img/logo.png" alt="Logo AgroParisTech" /> <h1>Bonjour !</h1> </div> </body> </html>
AgroParisTech, ufr d'informatique Client HTML page 31

Normes et outils
Normes

La norme HTML a volu pour atteindre la version 4.0 HTML est maintenant remplac par XHTML (compatible XML) qui en est la version 1.1. Dsormais, lorsque nous parlerons de HTML dans le prsent document, il faudra entendre XHTML. La norme utilise est dclare en dbut de page et rfrence une URL de validation sur le site du W3C Les spcifications des normes peuvent tre consultes sur le site http://www.w3.org/TR Il est important de se conformer aux normes, notamment pour permettre laccs des sites aux personnes qui disposent de navigateurs vocaux ou en braille (cf. http://www.acces-pour-tous.net) Pour vrifier la conformit d'une page web : http://validator.w3.org Un site de rfrence francophone : http://openweb.eu.org

Outils

De nombreux outils permettent de gnrer automatiquement du code HTML, mais il est cependant important de connatre celui-ci afin de comprendre et manipuler le code gnr, et de pouvoir y ajouter du code dynamique (par exemple du PHP) Outils de bureautique : Microsoft Office, OpenOffice Outils ddis : Microsoft Frontpage, Macromedia Dreamweaver MX

AgroParisTech, ufr d'informatique

Client HTML

page 32

La syntaxe HTML : balises


Les instructions HTML sont nommes balises (en Anglais tag ). Elles se composent : - soit de deux identificateurs crits en minuscule (une balise ouvrante entre < et >, et une balise fermante entre </ et >) qui encadrent une chane de caractres :
<balise>une chane de caractres</balise>

- soit dun seul identificateur crit en minuscules (entre < et />) :


<balise />

Les balises peuvent tre imbriques :


<balise1> <balise2> ... </balise2> </balise1>

Certaines balises possdent des paramtres, dits attributs, qui spcifient plus prcisment leur effet sur le texte formater. Ces attributs sont eux aussi crits en minuscules, l'intrieur de la balise unique ou de la balise ouvrante, et leur valeur est crite entre " " :
<balise att1="X" att2="Y"> chane de caractres </balise> <balise att1="X" att2="Y"/>

Rfrence en ligne : http://www.w3schools.com/xhtml/xhtml_reference.asp

AgroParisTech, ufr d'informatique

Client HTML

page 33

Linterprtation des pages HTML


Les fichiers HTML portent gnralement l'extension html. Un fichier correspond une page d'affichage dans le navigateur. La chane DOCTYPE suivante place en dbut de fichier indique la norme utilise ainsi que sa version au navigateur :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Une erreur de syntaxe dans lcriture dune page HTML nentrane pas derreur linterprtation par le navigateur. Toute balise mal orthographie est simplement ignore par le navigateur, ou corrige naturellement par celui-ci. Les suites de caractres despacement, les tabulations de mme que les retours-chariot nont aucun effet sur linterprtation du code HTML par le navigateur. Linterprtation du code HTML :
ceci est un essai daffichage de code HTML

gnrera laffichage suivant :

ceci est un essai daffichage de code HTML

AgroParisTech, ufr d'informatique

Client HTML

page 34

Le document HTML minimal (1 / 2)


Structure de base dun document HTML
Tout document HTML inclut au moins le texte suivant :
<?xml version="1.0" encoding="ISO-8859-15"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" /> <meta name="keywords" content="agronomie,INA-PG"> <meta name="revisit-after" content="30 days" /> <title>Ma premire page HTML</title> </head> <body> <div> </div> </body> </html>

Linterprtation de ce code HTML nentrane aucun affichage dans fentre du navigateur.

Balises <html></html>

La balise <html> spcifie la nature du document au navigateur. L'attribut xml:lang indique la langue du texte

Balises <body></body>
Les balises <body> dlimitent le corps du document (l o se trouvent le texte et les images affiches dans la fentre du navigateur).

AgroParisTech, ufr d'informatique

Client HTML

page 35

Le document HTML minimal (2 / 2)


Balises <head></head>
Les balises <head> dlimitent un ensemble dinformations, relatives la page et non affiches par le navigateur (sauf title).

Balise <meta>
La balise <meta> spcifie des informations qui ne sont pas affiches par le navigateur, mais qui peuvent tre lues par les serveurs HTTP et par certains moteurs de recherche.

Balises <title></title>
Seul le texte Ma premire page HTML inscrit entre les balises <title></ title> est visible dans la barre de titre du navigateur. Le titre du document sert aussi au rfrencement de la page dans les favoris du navigateur.

AgroParisTech, ufr d'informatique

Client HTML

page 36

Balises de mise en page


Le rle de ces balises est de sparer diffrentes parties du document pour en organiser la lecture.

<div></div>
Cette balise permet de regrouper des lments (pour leur affecter un style particulier par exemple) avec saut de ligne avant et aprs.

<hr /> Horizontal Rule


Cette balise trace un trait de sparation dans le document.

<p></p> marque de paragraphe


Cette balise est une marque de paragraphe et fonctionne comme le signe des logiciels de traitement de texte.
<p >texte dun paragraphe centr</p>

<br /> fin de ligne


Cette balise marque une fin de ligne sans saut de paragraphe.

<span></span> regroupement
Cette balise permet de regrouper des lments (pour leur affecter un style particulier par exemple) sans saut de ligne avant ni aprs.

Il est obligatoire d'utiliser des balises <div></div> ou <p></p> dans la section <body></body> afin de dcouper le contenu de la page : on ne peut pas par exemple mettre du texte directement l'intrieur de <body></body>.

AgroParisTech, ufr d'informatique

Client HTML

page 37

Mise en forme, attributs standards


Ces commandes permettent de mettre en forme des parties de texte.

Mise en forme spcialise


HTML intgre un certain nombre de balises de mise en forme standard, dont notamment : Balise
acronym address blockquote cite code em strong

Utilisation acronyme adresse citation longue (sur plusieurs lignes) citation courte code informatique texte mis en valeur texte renforc

Les balises de titre (Headers)


Les balises de type <hn></hn> dlimitent le texte des titres, un peu comme dans un modle Word. On dnombre 6 niveaux de titres.
<h2 >titre de niveau 2 </h2>

Attributs standard
La plupart des balises acceptent les attributs suivants : Attributs Utilisation class classe (cf. page suivante) id nom unique pour identifier l'lment style style (cf. page suivante) title bulle d'aide lang langue acceskey raccourci clavier tabindex ordre de parcours par tabulation TD H1
AgroParisTech, ufr d'informatique Client HTML page 38

Les listes
Les listes de dfinitions
Ce type de liste permet laffichage dune suite de dfinitions la manire dun dictionnaire. Le terme dfini se trouve alors en retrait par rapport sa dfinition ou est affect dun style diffrent (italique par exemple). source HTML
<dl> <dt>INSIVE</dt> <dd>AgroParisTech</dd> <dt>ECP</dt> <dd>Ecole Centrale de Paris</dd> </dl>

Affichage Navigateur
INSIVE AgroParisTech ECP Ecole Centrale de Paris

Les listes puces


source HTML
<ul> <li>premier item</li> <li>second item</li> </ul>

Affichage Navigateur
premier item

second item

Avec un style appropri, ces listes permettent galement de dfinir des menus.

Les listes numros


source HTML
<ol> <li>premier item</li> <li>second item</li> </ol>

Affichage Navigateur
1. premier item

2. second item

AgroParisTech, ufr d'informatique

Client HTML

page 39

Les styles
Styles par dfaut et styles personnaliss

Le navigateur applique un formatage par dfaut aux diffrents lments d'une page HTML La plupart des balises (dont les balises de mise en forme et de mise en page des 2 pages prcdentes) admettent cependant un attribut style qui contient un ensemble de dclarations spars par des points virgule, permettant au concepteur de la page de dfinir son apparence exacte.

Dfinir un style

Au niveau dune balise :


<span style="color: red">Texte en rouge</span>

En en-tte de fichier :
<head> <style type="text/css"> h1 {color:red; font-weight: bold} </style> </head>

Dans une feuille de style (CSS) :


<head> <link rel="stylesheet" href="styles.css" type="text/css" /> </head>

On peut redfinir le style d'une balise existante, ou utiliser un nouveau nom qui sera alors rfrenc par l'attribut class de la balise:
.fond {color: blue} <body class="fond"> </body>

AgroParisTech, ufr d'informatique

Client HTML

page 40

Les feuilles de style (1 / 2)


Exemple de contenu d'une feuille de style
Les feuilles de style sont dfinies dans des fichiers portant l'extension .css :
h1 {color:red; font-weight: bold} .fond {color:blue}

Proprits de texte
Exemple
font-family : Arial; font-style : italic; font-weight : bold;

Valeurs possibles
Noms de police normal, italic, oblique normal, bold, bolder, lighter, 100, 200, 300,... 900 xx-small, x-small, small, medium, large, x-large, xxlarge, larger, smaller none, underline, overline line-through, blink capitalize, uppercase, lowercase, none

font-size : x-small; font-size : 18pt; font-size : 150%; text-decoration : underline; text-transform : uppercase;

Proprits de couleur
Exemple
color : red; color : #fd4a88; color : rgb(125,32,98); background-color : blue; background-image : url("im.jpg")

Valeurs possibles
Noms de couleurs, ou codes RGB Idem url(""), none

AgroParisTech, ufr d'informatique

Client HTML

page 41

Les feuilles de style (2 / 2)


Proprits de placement
Exemple
text-align : center; margin-top : 1em

Valeurs possibles
left, 1em : 1ex : 1cm : 1pt : right, center, justify

hauteur d'un hauteur du x 1 ce n tim re 1 point

margin-bottom : 2ex margin-left : 12px margin-right : 2cm float : left

Idem Idem Idem


left, right, center

Utilis pour rendre un bloc flottant, c'est--dire le superposer un autre

Proprits de bordure
Exemple
border-style : solid

Valeurs possibles
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

border-top, border-bottom, border-left, border-right border-width : thin border-width : 3px

idem margin
thin, medium, thick

Ressources
http://www.w3schools.com/css/default.asp

AgroParisTech, ufr d'informatique

Client HTML

page 42

Feuille de style: exemple

Astuces
Les navigateurs permettent d'afficher la source d'une page consulte : on peut ainsi dterminer comment celle-ci a t ralise. On peut aussi reprer en en-tte l'emplacement de la ou des feuilles de style pour les tlcharger. Un gnrateur de CSS en ligne : http://www.weboutils.com/services/generateurcss.html Quelques exemple du potentiel des feuilles de style http://www.csszengarden.com/tr/francais/

AgroParisTech, ufr d'informatique

Client HTML

page 43

Feuille de style : fichier HTML


<?xml version="1.0" encoding="ISO-8859-15"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" /> <title> AgroParisTech </title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body style="text-align:center"> <div id="titre"> <h1>AgroParisTech</h1> </div> <div id="contenu"> <h1 class="titre1">Les dpartements</h1> <ul> <li>SIAFEE</li> <li>SVS</li> <li>SPAB</li> <li>OMIP</li> <li>SESG</li> <li>MMIP</li> </ul> </div> </body> </html>

AgroParisTech, ufr d'informatique

Client HTML

page 44

Feuille de style : fichier CSS


*{ background-color: lightgray; } #titre { text-align: center; } #titre h1 { color: white; background-color: #00918A; margin-left: 1px; margin-right: 1px; margin-top: 1px; margin-bottom: 1px; border-top: 1px solid #E9E9E9; border-left: 1px solid #E9E9E9; border-right: 1px solid #E9E9E9; border-bottom: 1px solid #E9E9E9; } #contenu { text-align: left; color: #BD2647; } #contenu ul li { list-style-type: square ; } h1.titre1 { color: #00918A; border-bottom: 2px solid #00918A; }

# indique quelle section (div) on applique un style particulier. On peut galement indiquer le contexte hirarchique d'un style. TD H2
AgroParisTech, ufr d'informatique Client HTML page 45

Les images
Avec HTML, on a la possibilit de rfrencer des lments multimdias tels que les images. Les principaux navigateurs Web interprtent les images GIF, JPG et PNG. L'utilisation des mages GIF est dconseille pour cause de brevet.

Rfrencer une image


Pour insrer une image dans une page Web il faut indiquer au navigateur la localisation de cette image sur Internet au moyen dune URL relative ou absolue.
<img src="http://www.inapg.fr/imindex/logorom2.jpg" /> <img src="./logorom2.jpg" />

Les attributs spcifiques de la balise <img />


La balise <img /> admet de nombreux attributs : alt permet de spcifier un texte alternatif qui sera affich sur les navigateurs naffichant pas les images width et height spcifient la longueur et la largeur de limage (elles contribuent diminuer le temps de calcul pour laffichage des images)

TD H3
AgroParisTech, ufr d'informatique Client HTML page 46

Ancres et liens hypertextes (1 / 2)


Ces balises sont utilises pour ltablissement de liens entres pages ou entre diffrentes parties dun mme texte.

Les ancres <a id=""> </a>


Les ancres permettent de marquer un endroit prcis (signet) dun texte pour que cet endroit puisse tre rfrenc par un lien hypertexte.
<a id="identificateur_signet"> texte qui fait partie de lancre </a>

Les liens <a href=""> </a>

La balise <a href=""> </a> dlimite une chane de caractres ou une image qui reprsente alors un lien vers une autre page HTML, un signet lintrieur de la mme page ou vers toute ressource Web rfrence par une URL. Le texte plac entre les balises apparat par dfaut soulign pour indiquer quil sagit dun lien (une image lie apparat encadre). Quand on clique sur ce lien, la navigation passe la ressource dsigne par la lien.
<a href="dsignation_du_lien"> texte explicatif du lien qui apparat soulign </a>

Exemples pour la dsignation du lien :


"#finPageA","cours_page_B.html","cours_page_11.html#debutPageA"

Les liens hypertextes peuvent aussi rfrencer dautre ressources Web.


<a href="ftp://ftp.download.fr/patch.zip">chargement</a>

La balise ci-dessus lie le mot chargement un serveur FTP et lance (lorsquil est activ) le chargement du fichier patch.zip L'attribut style peut prendre des valeurs spcifiques la mise en forme d'un lien

AgroParisTech, ufr d'informatique

Client HTML

page 47

Ancres et liens hypertextes (2 / 2)


Ancre : dbut de la page A
<a name="debutPageA"> Dbut de la page A (Ancres et Liens)

Lien : vers la fin de la page A


<a href="#finPageA"> cliquez ici pour aller en fin de page </a>

Lien : vers la page B


<a href="cours_page_B.html"> cliquez ici (parc de la Dfense) </a>

Lien-image : vers la page B


<a href="cours_page_B.html"> <img src="defense_clic.jpg" align="left"> </a>

Ancre : fin de la page A


<a name="finPageA"> Fin de la page A (Ancres et Liens) </a>

Lien : retour vers la page A


<a href="cours_page_A.html#debutPageA"> cliquez ici pour revenir la page A

</a>

AgroParisTech, ufr d'informatique

Client HTML

page 48

Les tableaux (1 / 3)
Les balises <table>, <tr>et <td>
La structure de base dun tableau HTML sarticule autour de trois balises fondamentales :

<table> </table>, qui indique le dbut et la fin du tableau. <tr> </tr>, qui dfinit une ligne du tableau. <td> </td>, qui dfinit une cellule du tableau ( lintrieur dune ligne

donne).

Titres de tableau et de colonnes

<thead></thead>, <tbody></tbody>, <tfood></tfoot>

permettent de structurer un tableau colonne

<th></th> est utilis la place de <td></td> pour les titres de <caption></caption> permet de spcifier un titre pour le tableau <summary></summary> permet d'associer un texte au tableau

Attributs

align : l'alignement horizontal valign : alignement vertical cellpadding : espace entre les bords des cellule et le texte cellspacing : espace entre les cellules border : bordure width : taille en px ou en %

AgroParisTech, ufr d'informatique

Client HTML

page 49

Les tableaux (2 / 3)
Exemple de source HTML
<table summary="Un exemple de tableau" border="2" cellpadding="2" cellspacing="2" > <caption> Exemple de tableau </caption> <thead> <tr> <th> Thme </th> Seq. </th> <th> Heures </th> </tr> </thead> <tbody> <tr> <td> HTML </td> <td> 1 </td> <td align="center" valign="middle"> 12 </td> </tr> <tr> <td> PHP </td> <td> 2 </td> <td align="center" valign="middle"> 24 </td> </tr> </tbody> </table> <th>

Affichage

AgroParisTech, ufr d'informatique

Client HTML

page 50

Les tableaux (3 / 3)
Les attributs colSpan et rowSpan permettent de grer respectivement la fusion des cellules en colonne et en ligne. Exemple de source HTML
<table width="50%" border="1" cellpadding="5"> <tr> <td> 2001 </td> <td> 2002 </td> <td> 2003 </td> </tr> <tr> <td rowspan="2"> 2004 </td> <td colspan="2"> Janvier </td> </tr> <tr> <td> 01/01 </td> <td> 15/01 </td> </tr> </table>

Affichage

AgroParisTech, ufr d'informatique

Client HTML

page 51

Scinder une page en blocs


Forme habituelle d'un site
Bandeau suprieur

Menu gauche

Technique utilise
Beaucoup de sites font appels des imbrications de tableaux pour l'organisation de leur page. Cette pratique est proscrire : les tableaux ne doivent servir qu' organiser des donnes en tableau ! Par contre, on peut organiser une page en utilisant les balises <div></div> couples des styles, pour dfinir des sections superposes ou juxtaposes :
HTML : <div id="menugauche"></div> <div id="contenu"></div> #menugauche { float: left; } #contenu { margin-left: 250px; }

CSS :

width: 250px;

TD H4
AgroParisTech, ufr d'informatique Client HTML

TD H5
page 52

Les formulaires HTML


Les formulaires HTML constituent linterface homme machine (ou GUI : Graphical User Interface) des applications HTML/Web. Le programmeur HTML dispose dun ensemble de contrles graphiques (champs de saisie, listes droulantes,...) qui permettent d'ajouter de l'interactivit.

Contrles graphiques

Utilit
Les formulaires permettent d'interagir avec l'utilisateur. Ils sont notamment utiliss dans :

Les moteurs de recherche Les sites de commerce lectronique Les questionnaires en ligne Presque toute application web interactive !

AgroParisTech, ufr d'informatique

Client HTML

page 53

Les balises <form></form>


<form action="http://ouranos/validationformulaire.php" method="get"> <p><label for="nom">Nom :</label> <input type="text" size="30" name="nom" /></p> <p><label for="prenom">Prnom :</label> <input type="text" size="20" name="prenom" /></p> <p><input type="submit" name="btAction" value="OK" /> <input type="reset" name="btAnnuler" value="Annuler" /></p> </form>

La balise <form> comprend deux attributs principaux : action : prcise lURL du programme serveur appel method : get (par dfaut), post essentiellement

La mthode get
Le contenu du formulaire est encod sous la forme dune QueryString constitue dune concatnation de lURL du paramtre ACTION et du contenu (encod) du formulaire :
http://ouranos:8080/Tests/servlet/fr.inapg.tests.DoFormu laire?btAction=OK&prenom=Henri&nom=Dupont

La mthode post
Dans le cas de la mthode POST le contenu (encod) du formulaire est envoy dans le corps de la requte. Ceci permet de soumettre au serveur des requtes plus longues (voire mme des fichiers).

AgroParisTech, ufr d'informatique

Client HTML

page 54

Les contrles graphiques HTML


La plupart des balises de composant HTML admettent les options suivantes : name = nom du composant value= valeur saisie Contrle Code source
<input type="text" size="20" name="champSaisie" value="defaut" /> <input type="password" size="20" name="champPassword" value="defaut" /> <textarea name="zoneT" rows="2" cols="20"> valeur multiligne </textarea> <input type="checkbox" name="caseACocher" value="valeur1" checked="checked" />choix A <input type="radio" name="grpOption" value="valeurA" checked="checked" />option A <input type="radio" name="grpOption" value="valeurB" />option B <select name="listeDeroulante"> <option value="valeurA">optionA</option> <option value="valeurB">optionB</option> <option value="valeurC" selected="selected">optionC</option> </select> <select name="liste" multiple="multiple"> <option value="valeurA">optionA</option> <option value="valeurB" selected="selected">optionB</option> <option value="valeurC" >optionC</option> </select> <input type="submit" name="boutonValider" value="executerScript" /> <input type="reset" name="boutonReinitialiser" value="effacerFormulaire" /> <input type="hidden" name="variableCachee" value="valeurCachee" />

TD H6
AgroParisTech, ufr d'informatique Client HTML page 55

AgroParisTech, ufr d'informatique

Client HTML

page 56

Prise en main de l'outil de dveloppement

AgroParisTech, ufr dinformatiquePrise en main de l'outil de dveloppement

page 57

AgroParisTech, ufr dinformatiquePrise en main de l'outil de dveloppement

page 58

Prise en main de l'outil de dveloppement (1 / 4) Easy PHP


Easy PHP est un logiciel qui permet d'installer et de prendre en charge facilement sur une machine dte du systme d'exploitation Windows : le serveur Web Apache ; PHP ; la base de donnes MySQL ; l'interface de configuration de MySQL phpmyadmin. http://www.easyphp.org

Eclipse
Eclipse est un outil de dveloppement cr par IBM. IBM a ensuite "offert" cet outil au "monde du logiciel libre". Le dveloppement d'Eclipse est maintenant gr par une fondation qui regroupe un grand nombre d'acteurs du logiciel (IBM, Borland, BEA) : http://www.eclipse.org Eclipse est au dpart destin au dveloppement d'applications Java. Il ncessite d'ailleurs que Java soit install sur la machine pour fonctionner. Mais les possibilits de cet outils sont extensibles l'infini grce un mcanisme de plugin qu'il suffit de tlcharger et d'enregistrer dans le sousrpertoire plugins du rpertoire d'installation d'Eclipse.

PHP Eclipse
PHP Eclipse est un plugin Eclipse qui permet de grer des projets contenant des fichiers HTML et PHP. Il est dvelopp en Allemagne : http://www.phpeclipse.de
AgroParisTech, ufr dinformatiquePrise en main de l'outil de dveloppement page 59

Prise en main de l'outil de dveloppement (2 / 4) Dmarrage d'Easy PHP


Menu : Dmarrer > Programmes > Programmation > EasyPHP 1.8 > EasyPHP Apparat alors la fentre suivante :

Vrifier que Apache et MySQL apparaissent bien tous les deux avec le statut Dmarr. Si MySQL ne dmarre pas, supprimer le rpertoire MySQL contenu dans le rpertoire N:\data et copier dans N:\data le rpertoire C:\Program Files\EasyPHP1-8\mysql\data\mysql (pour obtenir de nouveau un rpertoire N :\ data\mysql) EasyPHP doit tre dmarr et fonctionner correctement pour tester des fichiers HTML et PHP au sein d'Eclipse !

AgroParisTech, ufr dinformatiquePrise en main de l'outil de dveloppement

page 60

Prise en main de l'outil de dveloppement (3 / 4) Dmarrage d'Eclipse


Menu : Dmarrer > Programmes > Programmation > Eclipse La dure de lancement est assez consquente, cause de l'antivirus. En effet le lancement d'eclipse repose sur la lecture de nombreux fichiers, tous analyss par Sophos Antivirus. Dans la bote de dialogue Worspace Launcher, choisir N:\www. Cocher Use this as dafault and do not ask again. Cliquer sur OK. En cas d'erreur on peut plus tard revenir a cette affichage avec le menu File > Switch Workspace....

Si l'affichage Welcome apparat, le fermer.

AgroParisTech, ufr dinformatiquePrise en main de l'outil de dveloppement

page 61

Prise en main de l'outil de dveloppement (4 / 4) Utilisation d'Eclipse


Pour chaque srie de TD (HTML, puis PHP) on crera un nouveau projet avec le menu : File > New > Projet..., en choisissant PHP > PHP Projet Ensuite, on peut crer des fichiers HTML ou PHP dans le projet. Lors de l'ouverture d'un fichier le PHP Browser doit apparatre automatiquement ; sinon, utiliser le menu : Window > Show View > PHPEclipse Web Development > PHP Browser

AgroParisTech, ufr dinformatiquePrise en main de l'outil de dveloppement

page 62

TD HTML

AgroParisTech, ufr dinformatique

TD HTML

page 63

AgroParisTech, ufr dinformatique

TD HTML

page 64

TD HTML 1
Introduction aux exercices
Les diffrents exercices de ce document consistent d'abord raliser un minisite personnel. Chaque lve suivra le cheminement propos pour raliser son propre site avec un certain degr de libert quant aux choix des attributs des styles, du moment que le travail ralis reste conforme l'esprit de l'exercice. Le support de cours ne contient pas forcment tous les lments ncessaires la ralisation, mais indique des sites internet de rfrence qui permettront l'tudiant de trouver par lui-mme les informations dont il aura besoin.

Ralisation
Il s'agit tout d'abord de raliser une page avec : une zone de titre; un titre de niveau 1 positionn dans la zone de titre ; une zone de contenu ; un titre de niveau 1 positionn dans la zone de contenu ; un texte positionn dans la zone de contenu ; une ligne de sparation horizontale.

AgroParisTech, ufr dinformatique

TD HTML

page 65

TD HTML 2
Ajouter une feuille de style la page pour prendre en compte les lments suivants : la zone de titre est encadre, avec un fond et une bordure de couleur ; les titres de niveau 1 ont un aspect diffrent dans chaque section. Complter ensuite la page et sa feuille de style avec les lments suivants : deux titres de niveau 2 ; deux listes puces ; deux lignes de sparation horizontale.

AgroParisTech, ufr dinformatique

TD HTML

page 66

TD HTML 3
Complter la page prcdente, avec le contenu suivant : une image de fond qui vient remplacer la couleur de fond de la zone de titre; une image insre dans le contenu de la page. Indication : l'attribut float appliqu au style d'une image permet de positionner celle-ci par rapport au texte.

AgroParisTech, ufr dinformatique

TD HTML

page 67

TD HTML 4 (1 / 3)
Complter la page prcdente, avec le contenu suivant : une nouvelle zone de menu gauche de la zone contenu ; une liste insre dans la zone de menu, avec un ensemble de liens vers les diffrentes pages du site, sachant que le lien vers la page courante n'est pas activ et est d'une couleur diffrente. Indication : l'attribut float appliqu au style d'une zone permet de positionner celle-ci par rapport aux autres zones.

AgroParisTech, ufr dinformatique

TD HTML

page 68

TD HTML 4 (2 / 3)
Crer une nouvelle page base sur la mme feuille de style et accessible via le menu. Cette page contient un CV, organis avec des titres de niveau 2, et avec un parcours scolaire affich sous forme de tableau. Le style des lments de la premire colonne est diffrent de celui des lments des autres colonnes, et le tableau possde une bordure. Complter ensuite les autres parties du CV.

AgroParisTech, ufr dinformatique

TD HTML

page 69

TD HTML 4 (3 / 3)
Crer une nouvelle page base sur la mme feuille de style et accessible via le menu. Cette page contient un ensemble de lien vers des sites, organiss dans une liste. Un clic sur un lien ouvre la page correspondante dans une nouvelle fentre du navigateur.

AgroParisTech, ufr dinformatique

TD HTML

page 70

TD HTML 5
Copier les 3 pages prcdemment ralises ainsi que les feuilles de styles et les images ncessaires dans un nouveau rpertoire. Modifier ensuite la feuille de style pour obtenir une apparence compltement diffrente du mme contenu, en faisant notamment en sorte que le menu soit dsormais positionn horizontalement au dessus du contenu. Indication : display: inline; appliqu au style d'une liste permet d'afficher celleci horizontalement.

AgroParisTech, ufr dinformatique

TD HTML

page 71

TD HTML 6
Il s'agit de crer un formulaire web. Reproduire aussi fidlement que possible celui qui est affich dans la copie d'cran ci-dessous. Indication : les balises fieldset permettent de regrouper plusieurs champs, et les balises legend permettent de donner un titre un tel regroupement.

AgroParisTech, ufr dinformatique

TD HTML

page 72

Programmation : principes de base

AgroParisTech, ufr dinformatique

Programmation

page 73

AgroParisTech, ufr dinformatique

Programmation

page 74

Programmation : principes de base


AgroParisTech, uer dinformatique

Sommaire

Ordinateur : architecture et codage Langages de programmation Types et variables Instructions Branchements conditionnels Schmas itratifs Procdures et fonctions

AgroParisTech, ufr dinformatique

Programmation

page 75

Ordinateur : architecture globale

Un ordinateur est constitu de :


Un (ou plusieurs) processeur (CPU) De la mmoire : RAM De stockage des donnes : disque dur Des priphriques :

D'entre : clavier, souris De sortie : cran, imprimante D'entre-sortie : cl USB

Un ordinateur est dot d'un systme d'exploitation qui fait l'interface avec les programmes : Windows, Linux, MacOS

Ordinateur : fonctionnement

Processeur :

Cadenc par un cristal de quartz Frquence : nombre d'impulsions par seconde Accomplit des instructions :

Opration Oprandes

AgroParisTech, ufr dinformatique

Programmation

page 76

Ordinateur : fonctionnement

Familles d'instructions :

Accs la mmoire Oprations arithmtiques : +, -, *, / Oprations logiques : and, or Contrle : if, while

Ordinateur : codage des donnes

Les donnes sont reprsentes en binaire : puissances de 2, reprsentes par 0 ou 1 Par exemple : 123 = 64 + 32 + 16 + 8 + 2 + 1 123 = 2^6 + 2^5 + 2^4 + 2^3 + 2^1 + 2^0 123 ==> 1111011

AgroParisTech, ufr dinformatique

Programmation

page 77

Ordinateur : codage des donnes

Les donnes sont traites par paquets : un ordinateur 32 bits traitent 32 units binaires la fois L'unit de base est l'octet : 8 bits Avec un octet, on peut reprsenter :

Un nombre compris entre 0 et 255 Une lettre en ASCII (65 ==> A, 66==> B...) etc.

Ordinateur : codage hexadcimal


L'criture binaire est trs verbeuse On regroupe les bits par paquets de 4 pour compter en puissances de 16 : 1 ==> 1, 2 == 2, ... 10 ==> A, ... 15 ==> F Par exemple : 123 ==> 0111 1011 123 ==> 7B

AgroParisTech, ufr dinformatique

Programmation

page 78

Codage : retenir

On n'a gnralement pas besoin de faire les conversions pour programmer Par contre, on doit connatre les limites (par exemple 255 est le nombre maximal qu'on peut coder avec un octect) L'hexadcimal est parfois utile : en HTML les composantes RGB d'une couleur sont codes sur 3 octets en hexadcimal

Sommaire

Ordinateur : architecture et codage Langages de programmation Types et variables Instructions Branchements conditionnels Schmas itratifs Procdures et fonctions

AgroParisTech, ufr dinformatique

Programmation

page 79

Programmation : principes

Plusieurs types de langages de programmation :


Langage machine Langage de plus haut niveau

Un programme crit dans un langage de haut niveau doit tre traduit :

Interprt : traduction au fur et mesure Compil : traduction complte avant excution

Exemples de langages

Langages interprts :

Matlab PHP

Langages compils :

Pascal C Java (semi-compil)

AgroParisTech, ufr dinformatique

Programmation

page 80

Langages : autre typologie

Selon la manire de poser et rsoudre le problme :


Langage procduraux : Matlab, C, PHP Langages objet : C++, Java Langages formels : CAML Etc.

En premire anne, nous nous intressons uniquement aux langages procduraux !

Langages procduraux

Des suites d'instructions lmentaires sont regroupes en procdures ou fonctions L'enchanement global est ralis dans une procdure d'entre Les instructions sont excutes les unes la suite des autres, sauf si :

Condition d'excution : if Rptition d'excution : for, while

AgroParisTech, ufr dinformatique

Programmation

page 81

Sommaire

Ordinateur : architecture et codage Langages de programmation Types et variables Instructions Branchements conditionnels Schmas itratifs Procdures et fonctions

Les donnes du programme

Un programme effectue des oprations sur des donnes :


Oprations arithmtiques Autres oprations de transformation (ex : sur les chanes de caractres) Oprations logiques : comparaison Des constantes : invariables Des variables

Ces donnes sont :


AgroParisTech, ufr dinformatique

Programmation

page 82

Typage

Le programme doit connatre le type de donnes manipules Ce typage peut tre :


Explicite : Pascal, C Implicite : Matlab, PHP

Un typage implicite signifie que le langage dtermine le type automatiquement en fonction des donnes affectes dans la variable sinon il faut dclarer la variable

Les variables

Une variable est un moyen de reprsenter et manipuler une donne d'un programme Une variable correspond un espace de la mmoire de l'ordinateur Il peut y avoir des conventions de nommage : par exemple le nom d'une variable commence par $ en PHP

AgroParisTech, ufr dinformatique

Programmation

page 83

Affectation des variables

Une variable n'a de sens que si elle contient une donne Le fait de mettre une valeur dans une variable s'appelle l'affectation On peut affecter dans une variable :

Une valeur (ex : 2, "toto") Une autre variable Le rsultat d'une opration

Affectation des variables

En gnral, c'est le signe = qui est utilis (:= en Pascal) L'affectation se fait toujours de la droite vers la gauche !!
... ? ? b 123 ? ... $a = 123 $b = $a $a = 52 54 = $a a 123 52 ?

AgroParisTech, ufr dinformatique

Programmation

page 84

Nombres et chanes de caractres

La conversion d'un nombre en chane de caractre est gnralement implicite Par contre, la conversion d'une chaine de caractres en nombre demande gnralement l'utilisation d'une fonction du langage Ainsi : 2 + 1 ==> 3 "2" + "1" ==> "21" Cependant, en PHP l'oprateur de concatnation (.) est distinct de l'addition (+)

Sommaire

Ordinateur : architecture et codage Langages de programmation Types et variables Instructions Branchements conditionnels Schmas itratifs Procdures et fonctions

AgroParisTech, ufr dinformatique

Programmation

page 85

Enchanement des instructions

Par convention, on met une instruction par ligne Un sparateur peut tre ncessaire : souvent le ; Les instructions peuvent tre regroupes dans des blocs : une variable dclare dans un bloc n'existe pas l'extrieur de celui-ci (notion de porte d'une variable)

Quelques instructions en PHP


$a = 12; // Les noms de variables // commencent par $ en PHP { // Dbut de bloc $b = $a * $a; echo "Carr de $a = $b"; } // Fin de bloc echo "Carr de $a = $b"; // Impossible !

AgroParisTech, ufr dinformatique

Programmation

page 86

Sommaire

Ordinateur : architecture et codage Langages de programmation Types et variables Instructions Branchements conditionnels Schmas itratifs Procdures et fonctions

Branchements conditionnels

Les branchements conditionnels permettent de modifier l'excution du programme selon les valeurs des variables Typiquement : si condition alors bloc vrai sinon bloc faux

AgroParisTech, ufr dinformatique

Programmation

page 87

Branchements conditionnels

La condition peut tre une variable ou toute opration qui renvoie vrai ou faux (comparaison arithmtique par exemple) Le bloc vrai est excut quand la condition est vrai, sinon c'est le bloc faux Le bloc faux est facultatif

Conditions : savoir

L'galit doit se distinguer de l'affectation : gnralement == au lieu de = Ngation : ~ en Matlab, ! en PHP On peut combiner plusieurs conditions :

oprateurs and, or, xor emploi des parenthses possible ne pas oublier que (notation PHP) :

! ( A and B) = !A or !B ! (A or B) = !A and !B

AgroParisTech, ufr dinformatique

Programmation

page 88

Exemple : calcul de racine


// On suppose une suite d'instruction // ayant conduit ce que la variable // $a contienne un nombre rel if ($a >= 0) { $r = sqr($a); echo "Racine de $a : $r"; } else { echo $a . " n'est pas un nombre positif, pas de calcul de racine !"; }

Sommaire

Ordinateur : architecture et codage Langages de programmation Types et variables Instructions Branchements conditionnels Schmas itratifs Procdures et fonctions

AgroParisTech, ufr dinformatique

Programmation

page 89

Schmas itratifs

Les schmas itratifs permettent de rpter l'excution d'un bloc d'instructions 2 grands types de schmas :

schma for : lorsque le nombre de rptitions est connu l'avance, gre intrinsquement un compteur schma while : lorsque la fin des rptitions dpend d'une condition logique, ne gre pas de compteur

Schmas itratifs

Si on souhaite avoir un compteur dans un schma while, il faut le grer soi-mme et penser le modifier chaque itration Un schma for peut toujours tre transform en schma while, mais la rciproque n'est pas vraie

AgroParisTech, ufr dinformatique

Programmation

page 90

Exemple : calcul de factorielle


// On suppose une suite d'instruction // ayant conduit ce que la variable // $a contienne un nombre entier positif $f = 1; for ($i=1; $i<=$a; $i++) { $f = $f*$i; } $f = 1; $c = 1; while ($c <= $a) { $f = $f * $c; $c = $c + 1; }

Les collections
Il arrive souvent qu'on ait grer un grand nombre de donnes similaires et leur appliquer des traitements similaires On peut alors grer ces donnes dans des collections qui permettront de facilement les manipuler dans des itrations 2 grands types de collection :

les tableaux : indics partir de 0 ou 1 les tableaux indexs : on peut alors choisir de faire correspondre une valeur un index choisi

AgroParisTech, ufr dinformatique

Programmation

page 91

Exemple de tableau

Remplir puis afficher un tableau des 10 premiers multiples strictements positifs de 3 :


for ($i=1; $i<=10; $i++) { $multiples[$i] = $i * 3; } foreach ($multiples as $index => $valeur) { echo "$index multiple : $valeur\n"; }

Exemple de tableau index

On associe les capitales aux pays :


$capitales["France"] = "Paris"; $capitales["Royaume Uni"] = "Londres"; $capitales["Allemagne"] = "Berlin"; foreach ($capitales as $index => $valeur) { echo "$index a pour capitale $ville\n"; }

AgroParisTech, ufr dinformatique

Programmation

page 92

Sommaire

Ordinateur : architecture et codage Langages de programmation Types et variables Instructions Branchements conditionnels Schmas itratifs Procdures et fonctions

Procdure et fonctions

Les procdures et fonctions permettent l'organisation et la rutilisation du code Contrairement une procdure, une fonction renvoie un rsultat (plusieurs possibles avec Matlab) Les procdures et fonctions peuvent prendre des paramtres d'entre Bien sr les variables dclares dans une procdure ou fonction n'existent pas en dehors de celle-ci

AgroParisTech, ufr dinformatique

Programmation

page 93

Gestion des variables

Soit une fonction pour calculer la factorielle d'un nombre entier positif :
function factorielle($nombre) { $resultat = 1; for ($i = 2; $i <= $nombre ; $i++) { $resultat = $resultat * $i; } return $resultat; }

Gestion des variables

Paramtre d'entre : $nombre $nombre contiendra ce qu'on passe au moment de l'appel de la fonction : directement un nombre ou une autre variable Variables locales la fonction : $resultat $i Paramtre de retour : la valeur contenue dans $resultat

AgroParisTech, ufr dinformatique

Programmation

page 94

Exemples d'appels
$resultat = factorielle(4); // $nombre prendra la valeur 4 $b = 5; $r = factorielle($b); // $nombre prendra la valeur de $b : 5

On n'a pas besoin de connatre le nom des variables utilises dans la fonction ! Seuls comptent leur nombre et l'ordre !

AgroParisTech, ufr dinformatique

Programmation

page 95

AgroParisTech, ufr dinformatique

Programmation

page 96

PHP

AgroParisTech, ufr dinformatique

PHP

page 97

AgroParisTech, ufr dinformatique

PHP

page 98

PHP : histoire et tat des lieux


Un peu d'histoire
1994 : cration de PHP/FI (Personal Home Page Tools/Form Interpreter) par Rasmus Lerdof (Canada) pour valuer la consultation de son CV en ligne. 1995 : mise disposition du code pour tout le monde. 1997 : redveloppement du coeur par 2 tudiants (Andi Gutmans et Zeev Zuraski, Isram) pour donner PHP (PHP: Hypertext Processor) 3.0. 2002 : 8 millions de sites bass sur PHP. 2004 : 15 millions de sites bass sur PHP.

Evolution du langage
Au dpart bas sur le langage Perl, PHP a t rcrit ensuite en langage C. Le moteur a t rcrit plusieurs fois. D'abords procdural, le langage a volu a partir de la version 4.0 pour intgrer les technologies objet.

Principales caractristiques
Le moteur PHP s'intgre au serveur web Apache : il prend alors en charge toutes les pages avec une extension .php. PHP est un langage interprt : il n'y a pas de phase de compilation et les erreurs sont dcouvertes au moment de l'excution. La syntaxe est trs inspire du langage C, tout en apportant beaucoup de simplification, notamment dans la gestion des variables. Remarque : dans le prsent support, on n'aborde pas les caractristiques objet de PHP ; le code dcrit est compatible PHP 3.0 et versions ultrieures.

AgroParisTech, ufr dinformatique

PHP

page 99

PHP : principe de fonctionnement Principe des applications web

Poste client

Serveur

1 : Requete (GET ou POST)


Navigateur Web Serveur HTTP Apache + Module PHP

2 : Rponse

Les applications web fonctionnent grce des changes rseau entre un logiciel client (le navigateur web) et un logiciel serveur (le serveur web). Ces changes sont bass sur le protocole HTTP : le navigateur envoie une requte au serveur web et reoit du contenu afficher. La navigation sur un site est constitue d'un ensemble de requtes/rponses qui s'enchanent. Il y a 2 types de requtes : les requte de type GET (barre d'URL et clic sur un lien) et les requtes de type POST (validation de formulaire).

Apport de PHP
Les pages HTML sont des pages de contenu statique stockes dans le systme de fichier du serveur. Les pages PHP contiennent du code HTML, mais aussi du code PHP qui est excut sur le serveur au moment de la requte et produit du code HTML ; la page est dite dynamique, car le contenu final HTML renvoy au navigateur peut changer selon le contexte. PHP ncessite l'ajout et la configuration d'un module spcifique dans le serveur web Apache.

AgroParisTech, ufr dinformatique

PHP

page 100

Premier exemple de code (1 / 2)


Exemple simple
<?php echo "<?xml vers i on= \ " 1 . 0 \ " encoding= \ " I SO - 8859- 15\ " ? >" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" /> <meta name="keywords" content="agronomie,INA-PG"> <meta name="revisit-after" content="30 days" /> <title>Ma premire page PHP</title> </head> <body> <div> Bonjour nous sommes le : <?php $date = date("d-m-Y"); echo "$date"; // Affichage de la date ?> </div> </body> </html>

Affichage

AgroParisTech, ufr dinformatique

PHP

page 101

Premier exemple de code (2 / 2) Code HTML gnr


Si on demande l'affichage du code source dans le navigateur :
<?xml version="1.0" encoding="ISO-8859-15"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" /> <meta name="keywords" content="agronomie,INA-PG"> <meta name="revisit-after" content="30 days" /> <title>Ma premire page PHP</title> </head> <body> <div> Bonjour nous sommes le : O4-01-2006 </div> </body> </html>

Le navigateur reoit et interprte toujours du code HTML car le code PHP est valu au niveau du serveur. Contrairement une page HTML, on ne peut donc pas tester une page PHP directement en l'ouvrant depuis le systme de fichier sans passer par une connexion HTTP sur un serveur de type Apache.

AgroParisTech, ufr dinformatique

PHP

page 102

Notions de base
Code PHP au sein d'une page HTML
Le code PHP est insr directement au sein d'une page contenant du HTML. Le code PHP doit cependant tre contenu dans des balises spciales : <?php ... ?> ou <? ... ?>. Du code HTML est produit grce l'instruction echo. On peut mettre plusieurs instructions au sein d'une mme balise <? ?>. Une instruction est toujours termine par un ;. <? echo $variable; ?> peut tre condens en <?= $variable ?>. Pour tre reconnu par l'interprteur PHP, le fichier doit porter l'extension .php.

Syntaxe de base
L'instruction echo permet de gnrer de l'affichage HTML au sein d'une page. Les chanes de caractres sont crites entre "" : on doit faire prcder un " d'un \ pour l'inclure au sein d'une chane. Les noms de variables commencent toujours par le caractre $. Les variables n'ont pas besoin d'tre dclares, ni d'tre types ; elles sont cres implicitement lors de la premire utilisation. Le langage fournit un certain nombre de fonction prdfinies ; lors d'un appel de fonction, les paramtres sont passs entre ( ) et spars par des ,. Les commentaires sont crits en commenant par // sur une ligne ou entre /* et */ sur plusieurs lignes. Les accolades {} permettent de dlimiter des blocs d'instructions. Remarque : lorsqu'on respecte la norme XHTML, les caractres <? de la premire ligne sont interprts comme une balise PHP. Il faut donc obligatoirement gnrer cette premire ligne avec une instruction PHP echo. TD P1
AgroParisTech, ufr dinformatique PHP page 103

Structures de contrle
PHP propose toutes les structures de contrle classiques.

Tests conditionnels
<? if (is_numeric($texte)) { echo "La variable contient un nombre"; } else { echo "La variable contient du texte"; } ?>

On peut enchaner des tests avec l'instruction elseif. On peut utiliser l'instruction switch lorsqu'on a beaucoup de conditions.

Schmas itratifs
<? for ( $i = 1; $i <= 10 ; $i++) { echo $i . ' '; } $i = 1; while ($i<=10) { echo $i . ' '; $i++; } foreach(range(1, 10) as $i) { ?> <?= $i ?> <? } ?>

TD P2
PHP page 104

AgroParisTech, ufr dinformatique

Interactions avec l'utilisateur (1 / 2)


Principe gnral
Dans une application web, l'interaction avec l'utilisateur est essentiellement fonde sur la validation de formulaire HTML, qui provoque l'envoie de donnes vers le serveur et l'affichage de nouvelles informations en provenance de celui-ci. Des technologies telles que Javascript permettent la gestion d'vnements, mais celle-ci reste locale au navigateur et donc limite.

Formulaire : ct client
Soit un fichier formulaire.php :
... <body> <div>
<form action="validation_formulaire.php" method="post"> <p><label for="nom">Nom :</label> <input type="text" size="30" name="nom" /></p> <p><label for="prenom">Prnom :</label> <input type="text" size="20" name="prenom" /></p> <p><input type="submit" name="btAction" value="OK" /> <input type="reset" name="btAnnuler" value="Annuler" /></p>

</form> </div> </body> ...

Il faut prciser dans la balise form le nom du fichier PHP qui traitera les donnes, ainsi que la mthode de transfert de ces donnes (POST conseill). Il est important de donner un nom chaque lment du formulaire : ce nom permet ensuite de retrouver les valeurs associes saisies par l'utilisateur.
AgroParisTech, ufr dinformatique PHP page 105

Interactions avec l'utilisateur (2 / 2)


Formulaire : ct serveur
Le formulaire prcdent est trait par validation_formulaire.php :
.. . <body> <div> <? if (empty($_POST["nom"]) or empty($_POST["prenom"])) { echo "Vous devez saisir un nom et un prnom !"; } else { $nom = $_POST["nom"]; $prenom = $_POST["prenom"]; echo "Bonjour $prenom $nom"; } ?> </div> </body>

Enchanement
formulaire.php

Interprtation de validation_formulaire.ph p 1. Le navigateur rassemble les informations saisies dans le formulaire (nom et prnom) et les envoie par une mthode POST au serveur. 2. Le serveur interprle validation_formulaire.php avec les donnes reues et gnre un flux HTML rsultat renvoy au navigateur.

validation_formulaire.php (rsultat HTML)

AgroParisTech, ufr dinformatique

PHP

page 106

Formulaire valid par lui-mme (1 / 2)


Principe
Dans l'exemple prcdent, lorsque l'utilisateur s'est tromp ou s'il veut faire une nouvelle saisie, il soit revenir en arrire en utilisant la touche back du navigateur. Il est souvent plus judicieux d'afficher le formulaire et le rsultat sur une mme page : lors du premier accs, la mthode GET est employe ; lors de la validation, la mthode POST est employe.

Exemple

AgroParisTech, ufr dinformatique

PHP

page 107

Formulaire valid par lui-mme (2 / 2)


... <body> <div> <? if ($_SERVER["REQUEST_METHOD"] == "POST") { // on est appel par la mthode POST, donc // en validation du formulaire if (empty($_POST["nom"]) or empty($_POST["prenom"])) { echo "Vous devez saisir un nom et un prnom !"; } else { $nom = $_POST["nom"]; $prenom = $_POST["prenom"]; echo "Bonjour $prenom $nom"; } } ?> <form action="toutenun.php" method="post"> <p><label for="nom">Nom :</label> <input type="text" size="30" name="nom" /> </p> <p><label for="prenom">Prnom :</label> <input type="text" size="20" name="prenom" /> </p> <p><input type="submit" name="btAction" value="OK" /> <input type="reset" name="btAnnuler" value="Annuler" /> </p> </form> </div> </body> ...

TD P3
AgroParisTech, ufr dinformatique PHP page 108

Tableaux
Exemples prcdents
Dans les prcdents exemples de code, on a : $_SERVER["REQUEST_METHOD"] $_POST["nom"] $_POST["prenom"] $_SERVER et $_POST sont en fait des tableaux associatifs pr-remplis.

Tableaux associatifs
Un tableau associatif permet de faire correspondre des valeurs des cls :
<?php // Cration d'un tableau de 3 lments $tableau = array(1=>"rouge", 2=>"bleu", 3=>"jaune"); // Ajout d'un lment la fin du tableau $tableau[] = "vert"; // Modification du 2me lment $tableau[2] = "vert"; // Affichage du 3me lement echo $tableau[3]; // Ajout d'un lment associ "rien" $tableau["rien"] = "transparent"; // affichage de tout tableau : // Array ( [1] => rouge [2] => vert ... ) print_r($tableau); // Parcours du tableau foreach ($tableau as $index => $couleur) { echo "<br /> $index => $couleur"; } // Effacement du 2me lment unset($tableau[2]); // Effacement de tout le tableau unset($tableau);

?>

TD P4
page 109

AgroParisTech, ufr dinformatique

PHP

Fonctions
Quelques fonctions prdfinies
Chanes de caractres strlen($chaine) : longueur d'une chane strpos($chaine, $car) : position d'un caractre strtolower($chaine) : conversion minuscules strtoupper($chaine) : conversion majuscules getdate() : date et heure gettimeofday() : heure actuelle date($format, $date) : formatage count($tableau) : nombre d'lments sort($tableau) : tri

Dates

Tableaux

Fonctions dfinies par l'utilisateur


PHP permet de crer des fonctions :
<?php function factorielle($nombre) { $resultat = 1; for ( $i = 2; $i <= $nombre ; $i++) { $resultat = $resultat * $i; } return $resultat; } ?>

On peut dfinir des fonctions dans des fichiers .php et les utiliser dans d'autres fichiers grce l'instruction include :
<?php include "fonctions.php"; echo factorielle(5); ?>

TD P5
AgroParisTech, ufr dinformatique PHP page 110

Suivi de la navigation : notion de session


Par nature, le dialogue entre un navigateur web et un serveur web est dconnect, c'est--dire que la connexion n'est pas maintenue entre les deux lors de la navigation. Pour chaque chargement de page, les tapes se droulent de la manire suivante : 1. Le navigateur initialise une connexion rseau avec le serveur web ; 2. Le navigateur transmet l'URL de la page demande ; 3. Le serveur retrouve la page et transmet son contenu au navigateur ; 4. La connexion est rompue. Cependant, dans la plupart des sites dynamiques on a besoin de "suivre" un utilisateur pendant sa navigation (par exemple : webmail, remplissage d'un chariot virtuel sur un site de commerce lectronique). Le mcanisme des sessions permet de suivre un utilisateur par l'intermdiaire de cookies selon le schma suivant :

AgroParisTech, ufr dinformatique

PHP

page 111

Projet PHP : gestion de session


PHP permet d'initialiser la gestion d'une session, et d'y associer des informations diffrentes pour chaque utilisateur : Pour utiliser la session dans une page :
session_start()

Conserver une information dans la session :


$_SESSION["nom_information"] = $valeur

Retrouver une information de la session :


$valeur = $_SESSION["nom_information"]

Arrter la gestion des sessions :


session_unset() session_destroy()

Les sessions permettent de conserver des informations entre plusieurs pages PHP pour la navigation d'un mme utilisateur sur le site. En effet, une variable d'un fichier PHP n'existe par contre que le temps d'excution de ce fichier, c'est--dire que le temps de gnration de la page web correspondante. Typiquement, aprs identification d'un utilisateur : on place l'identifiant de l'utilisateur connect dans la session ; au dbut de chaque fichier PHP, on vrifie que l'identifiant de l'utilisateur stock dans la session n'est pas vide ; si l'identifiant est vide, alors on met dans la session un message d'erreur, et on redirige l'utilisateur vers la page de connexion dans laquelle on affiche le message d'erreur ; on dtruit la session lorsque l'utilisateur dcide de se dconnecter. Les sessions sont associes un timeout, c'est--dire qu'elles expirent automatiquement au bout d'un certain temps d'inactivit de l'utilisateur.

AgroParisTech, ufr dinformatique

PHP

page 112

Ressources
Installation
http://www.easyphp.org http://www.eclipse.org http://www.phpeclipse.de

Dveloppement
http://www.php.net/manual/fr/ http://www.phpfrance.org http://www.phpindex.com http://www.commentcamarche.net/php/phpintro.php3 http://php.developpez.com

AgroParisTech, ufr dinformatique

PHP

page 113

AgroParisTech, ufr dinformatique

PHP

page 114

TD PHP

AgroParisTech, ufr dinformatique

TD PHP

page 115

AgroParisTech, ufr dinformatique

TD PHP

page 116

TD PHP 1
Crer un nouveau projet pour distinguer les TD PHP des TD HTML. En s'inspirant de l'exemple du cours, crer un fichier td1.php. Lorsqu'on appelle l'URL correspondant au fichier dans un navigateur Web, on doit voir s'afficher : la date actuelle formate en titre de niveau 1 ; l'heure actuelle formate en titre de niveau 2. Remarque : on peut trouver de l'ide sur la fonction date sur le site http://www.php.net/manual/fr

AgroParisTech, ufr dinformatique

TD PHP

page 117

TD PHP 2
Les schmas itratifs permettent notamment de gnrer du code HTML consquent par programmation. Il s'agit, dans un fichier td2.php, d'crire 2 boucles imbriques afin de gnrer un tableau contenant la table de multiplication des entiers de 1 10.

AgroParisTech, ufr dinformatique

TD PHP

page 118

TD PHP 3
Il s'agit, dans un fichier td3.php, de proposer l'utilisateur un formulaire permettant de saisir un nombre et de calculer en retour la factorielle de ce nombre (grce une itration). On vrifie galement que la saisie de l'utilisateur est correcte (nombre entier).

AgroParisTech, ufr dinformatique

TD PHP

page 119

TD PHP 4
Il s'agit, dans un fichier td4.php, de proposer l'utilisateur un formulaire permettant de convertir une somme en vers une ancienne monnaie nationale.

On utilise pour cela 2 tableaux associatifs :


$nom_devise = array( "FRF" => "franc franais", "DEM" => "mark allemand", "ESP" => "peseta espagnole", "BEF" => "franc belge", "GRD" => "drachme grecque", "IEP" => "livre irlandaise", "ITL" => "lire italienne", "NLG" => "florin nerlandais", ); $un_euro "FRF" => "DEM" => "ESP" => "BEF" => "GRD" => "IEP" => "ITL" => "NLG" => ); = array( 6.55957, 1.95583, 166.386, 40.3399, 340.75, 0.787564, 1936.27, 2.20371,

Permet de gnrer la liste droulante Permet de raliser la conversion lors grce une itration. L'attribut de la validation du formulaire. value de chaque option est gal au nom court de la devise en 3 lettres.
AgroParisTech, ufr dinformatique TD PHP page 120

TD PHP 5
Il s'agit, dans un fichier td5.php, de : crire 2 fonctions aire_triangle(...) et aire_rectangle(...) qui renvoient respectivement l'aire d'un triangle et d'un rectangle en fonction de la base et de la hauteur ; crire un formulaire permettant l'utilisateur de saisir une base, une hauteur et de slectionner une forme pour obtenir l'aire correspondante. On vrifiera galement les donnes saisies par l'utilisateur.

AgroParisTech, ufr dinformatique

TD PHP

page 121

AgroParisTech, ufr dinformatique

TD PHP

page 122

Organiser les donnes du Systme d'Information

AgroParisTech, ufr dinformatique Organiser les donnes du Systme d'Information

page 123

AgroParisTech, ufr dinformatique Organiser les donnes du Systme d'Information

page 124

Organiser les donnes du systme dinformation

Dfinir larchitecture du systme dinformation, ce nest pas seulement concevoir les composants et organiser leurs interactions. Cest aussi spcifier les informations qui seront exploites, dfinir leurs liens et leur organisation, leur accessibilit et leur protection :
A partir dun cahier des charges, faire linventaire des donnes et des relations Concevoir le modle de donnes Choisir et mettre en uvre un SGBD Administrer la base de donnes

tudions la problmatique de lorganisation des donnes travers un exemple

AgroParisTech, ufr dinformatique Organiser les donnes du Systme d'Information

page 125

GIE agricole : cahier des charges (simplifi)


Des agriculteurs possdent des parcelles Une parcelle a un et un seul propritaire un agriculteur possde une ou plusieurs parcelles Pour exploiter ces parcelles, les agriculteurs font appel un GIE. Celui-ci fournit de la main duvre dappoint, la journe. Cette main duvre est assure par des employs du GIE. Chaque employ du GIE a un tarif, qui constitue son salaire journalier brut.

GIE agricole : cahier des charges (simplifi)


Le GIE paie ses employs mensuellement, en fonction de leurs interventions. Chaque intervention concerne une parcelle, un employ et un nombre de jours. Le systme dinformation dsir doit pouvoir fournir :

la liste des agriculteurs, la liste des employs la liste des interventions par employ la liste des interventions par agriculteur

AgroParisTech, ufr dinformatique Organiser les donnes du Systme d'Information

page 126

Inventaire des donnes (simplifi)


nom et prnom (agriculteur) nom et prnom (employ GIE) parcelle : nom, superficie, lieu et propritaire employ : numro insee et salaire journalier agriculteur : lieu de rsidence

interventions : employ, parcelle, date de dbut, nombre de jours

Quelle structure pour reprsenter ces donnes ?

Reprsenter les agriculteurs

nom et prnom (agriculteur)


nom et prnom (employ GIE) parcelle : nom, superficie, lieu et propritaire employ : numro insee et salaire journalier

Disposition en table Une ligne = un agriculteur = un enregistrement de la table Question : comment distinguer les deux Christian Martoz ? Plus gnralement, est-il acceptable dutiliser la rsidence pour distinguer des homonymes ?

agriculteur : lieu de rsidence

AgroParisTech, ufr dinformatique Organiser les donnes du Systme d'Information

page 127

Une cl primaire pour la table

Une colonne particulire permet didentifier de manire unique chaque agriculteur On lappelle la cl primaire de la table Ici, cette cl est une valeur numrique que lon augmente (incrmente) chaque ajout dun nouvel agriculteur

La table agriculteur a quatre champs

Chaque champ reprsente une proprit de linformation "Agriculteur" et il est associ une colonne Chaque champ a un type qui caractrise les valeurs quil peut prendre Le champ AGR_IDF est "auto-incrment" et cest la cl primaire de la table.

AgroParisTech, ufr dinformatique Organiser les donnes du Systme d'Information

page 128

Rcapitulons - table

La table est lunit de stockage dans une base de donnes Une table est associe une entit du modle de donnes. Elle rpertorie toutes les apparitions (occurrences) de cette entit. Chaque ligne (enregistrement) de la table reprsente une occurrence de lentit Chaque proprit de lentit est reprsente par une colonne (champ)

Rcapitulons cl primaire

Dans chaque table, on distingue une information particulire, la cl primaire, qui identifie de primaire manire unique chaque occurrence : il ne peut y avoir deux valeurs identiques de cl primaire dans la table. table Attention, la cl primaire nest pas forcment limite une seule colonne Par exemple, quelle est la cl primaire de la table distance_villes ?

AgroParisTech, ufr dinformatique Organiser les donnes du Systme d'Information

page 129

Et maintenant, les parcelles

Une parcelle a un nom, elle est situe en un lieu prcis et elle a une superficie

Une parcelle a aussi un propritaire : comment lindiquer dans la table des parcelles ?

Dsigner le propritaire

Une parcelle a un nom, elle est situe en un lieu prcis et elle a une superficie Le champ PAR_AGR_IDF dsigne le propritaire Il dfinit une relation entre les deux tables

AgroParisTech, ufr dinformatique Organiser les donnes du Systme d'Information

page 130

Une relation un plusieurs

Un agriculteur peut possder plusieurs parcelles Une parcelle a un et un seul propritaire La relation entre les tables est une relation un plusieurs. Elle est plusieurs matrialise, du ct plusieurs, par une cl trangre

La table employe

Un employ a : un numro de scurit sociale, un nom, un prnom et un tarif journalier Faut-il une cl primaire autoincrmente pour cette table ?

AgroParisTech, ufr dinformatique Organiser les donnes du Systme d'Information

page 131

Quelle relation entre les tables parcelle et employe ?

Un employ peut tre amen travailler sur plusieurs parcelles Sur une mme parcelle, peuvent travailler plusieurs employs (simultanment ou lun aprs lautre) Cest une relation plusieurs plusieurs : on la reprsente par une nouvelle table

Une relation plusieurs plusieurs reprsente par la table intervention


1 n n 1

Lemploy Grandet a travaill la parcelle du pr au vent, 5 jours partir du 5 juillet 2004

AgroParisTech, ufr dinformatique Organiser les donnes du Systme d'Information

page 132

Exercice: concevoir un modle de donnes


Base de donnes cinmatographique:

Un film a un titre, un budget de production, des recettes ; il est jou par des acteurs ; il est ralis par un metteur en scne Chaque acteur jouant dans un film touche un cachet ; il a une anne de naissance et ventuellement de dcs ; il parle une langue maternelle Chaque ralisateur est originaire dun pays et a une anne de naissance et ventuellement de dcs Concevez le modle de donnes !

Consulter et mettre jour une base de donnes

SQL (Structured Query Language) est le langage qui permet de manipuler une base de donnes relationnelles Une instruction (ou requte) SQL permet de:

consulter (SELECT) modifier (UPDATE) ajouter (INSERT) supprimer (DELETE)

En PHP, la fonction mysql_query permet de soumettre une requte SQL au SGBD mySQL

AgroParisTech, ufr dinformatique Organiser les donnes du Systme d'Information

page 133

Consultation (1)

select * from agriculteur le rsultat est une table temporaire select agr_nom, agr_prn from agriculteur where agr_res = 'ARITH' Comment rpondre la question : quelles sont les rsidences des agriculteurs ?

Consultation (2)

rsidences des agriculteurs ? select agr_res from agriculteur comment


obtenir un rsultat ordonn ? supprimer les doublons ?

select agr_res from agriculteur order by agr_res

select distinct agr_res from agriculteur order by agr_res

AgroParisTech, ufr dinformatique Organiser les donnes du Systme d'Information

page 134

Consultation (3)

Quels sont les propritaires de parcelles ?


select agr_nom, par_nom from agriculteur, parcelle where agr_idf = par_agr_idf

Nombre de parcelles pour chaque propritaire ?

select agr_nom, count(par_nom) from agriculteur, parcelle where agr_idf = par_agr_idf group by agr_nom

Pour approfondir et pratiquer

http://www.commentcamarche.net/sql/sqlintro.php3 Loutil PhpMyAdmin accessible via easyPHP (clic droit sur licne easyPHP, puis choix de Administration)

AgroParisTech, ufr dinformatique Organiser les donnes du Systme d'Information

page 135

AgroParisTech, ufr dinformatique Organiser les donnes du Systme d'Information

page 136

TD Base de Donnes

AgroParisTech, ufr dinformatique

TD Base de Donnes

page 137

AgroParisTech, ufr dinformatique

TD Base de Donnes

page 138

Bases de donnes : concepts


Limites rencontres
Lorsqu'on manipule des variables en informatiques, les donnes associes sont stockes dans la mmoire vive (RAM) de l'ordinateur. Ce mode de fonctionnement prsente cependant des limites : les donnes n'existent que pendant le temps de fonctionnement de l'application : en cas de redmarrage de l'application, tout est perdu ; la mmoire vive est trs limite en taille par rapport l'espace disque ; on ne peut pas partager les donnes entre diffrentes applications ; etc. Stocker des donnes dans des fichiers permet de pallier certains de ces inconvnients, cependant : il faut dfinir chaque fois comment on stocke les donnes, et l'expliquer ventuellement aux concepteurs d'autres applications ; il est difficile de reprsenter des donnes complexes (de type 1 plusieurs par exemple) ; pour retrouver une donne particulire, on est oblig de parcourir une bonne partie du fichier ; les modifications concurrentes posent problme.

Invention des bases de donnes


C'est pour cela qu'ont t inventes les bases de donnes, qui sont des systmes offrant des fonctionnalits avances pour la gestion d'information sur des supports de stockage persistants. Il y a diffrentes familles de bases de donnes, distinctes selon la manire dont les donnes sont stockes et dont elles communiquent avec des programmes. Les bases de donnes les plus rpandues sont les bases de donnes relationnelles, apparues au dbut des annes 1980.
AgroParisTech, ufr dinformatique TD Base de Donnes page 139

Bases de donnes relationnelles


Les bases de donnes relationnelles offrent un haut niveau d'abstraction pour le stockage de donnes sur disque. Elles offrent notamment : un formatage et un typage des donnes sous forme de colonnes au sein d'une table ; un regroupement de plusieurs tables au sein d'une base ; une indexation des donnes pour les retrouver rapidement ; la possibilit de dfinir des relations entre des donnes issues de plusieurs tables (par exemple : plusieurs adresses pour une mme personne) ; des possibilits de connexions depuis diffrents langages de programmation : API (Application Programming Interface) un langage d'interrogation et de modification normalis : SQL (Structured Query Language).

Base
Requete ou mise jour SQL

Table
Relation
Enregistrements

API
Rponse

Index

AgroParisTech, ufr dinformatique

TD Base de Donnes

page 140

Introduction MySQL
Logiciels de base de donnes
Il existe diffrentes implmentations de bases de donnes : bases de donnes commerciales : Oracle IBM DB2 Microsoft SQLServer Microsoft Access bases de donnes Open Source : MySQL PostgreSQL

MySQL
Base dveloppe par la socit MySQL AB : http://www.mysql.com

MySQL est trs utilise en conjonction avec PHP pour produire des sites web dynamiques. MySQL a la rputation d'tre une base de donnes simple utiliser, performante et trs robuste. PhpMyAdmin est une application PHP dveloppe pour administrer une base MySQL distance via un simple navigateur web : http://www.phpmyadmin.net. Cette application est intgre EasyPHP. PhpMyAdmin permet galement de visualiser les ordres SQL qui permettent d'obtenir telle ou telle information ou d'executer telle ou telle action.

AgroParisTech, ufr dinformatique

TD Base de Donnes

page 141

TD Base de donnes 1
Objectifs de l'exercice
Il s'agit de mettre en pratique les principes des bases de donnes sur un exemple. Tout d'abord il faudra crer un schma de donnes (les diffrentes tables et leur relations) avec des exemples de donnes, puis il faudra trouver les requtes appropries pour raliser des interrogations sur ce schma. Nous utiliserons pour ce faire MySQL et PHPMyAdmin ; ces 2 outils sont inclus dans la distribution EaxyPHP installe sur les postes et tlchargeable gratuitement sur : http://www.easyphp.org

Outil PhpMyAdmin
On peut utiliser PhpMyAdmin en faisant un clic droit sur l'icne EasyPHP en bas droite de l'cran et en choisissant "Administration" puis "Gestion BDD", ou plus directement, lorsque EasyPHP est dmarr, en tapant dans un navigateur l'adresse http://localhost/mysql/.

AgroParisTech, ufr dinformatique

TD Base de Donnes

page 142

TD Base de donnes 1
Sujet de l'exercice
Sur de nombreux canaux franais, la navigation commerciale a laiss la place la navigation de plaisance. Ainsi la socit Starboat s'est fait une rputation dans la location de pnichettes aux touristes. Pour amliorer la productivit, elle a dcid d'quiper chacune de ses bases d'un logiciel de gestion adapt leurs activit. Dans un premier temps, il faut concevoir le modle de donnes de ce logiciel. Ce modle sera conu au fur et mesure de manire interactive en utilisant PhpMyAdmin, sachant que lorsqu'on se trompe, cet outil permet facilement d'effectuer des rectifications. On commence par crer une base Starboat.

Les bateaux
On cre une premire table Bateau dans notre base sachant que chaque bateau : est bien entendu identifi par une cl primaire unique ; est baptis ; correspond un type de modle (classique, terrasse, ou flying bridge) ; a t termine une date donne ; a navigu un certain nombre d'heures. Une fois cette premire table cre, on y insre un certain nombre de donnes d'exemple pour valider les champs et leur type. On considre par exemple une base avec 10 bateaux.

AgroParisTech, ufr dinformatique

TD Base de Donnes

page 143

TD Base de donnes 1
Les modles de bateau : complexification
Finalement, on ne veut pas se contenter d'avoir le nom du type de modle, mais on souhaite associer chaque modle des informations complmentaires : puissance du moteur en CV ; prsence ou non d'une prise lectrique ; nombre de couchages. On cre donc une nouvelle table Modele pour prendre en compte ces caractristiques en plus du nom du modle. On saisit des donnes d'exemple pour les 3 types de modle. Au lieu de rfrencer directement le nom du modle, la table Bateau est alors modifie pour que la rfrence au modle se fasse sous la forme d'une association vers la table Modele.

Les rvisions
Chaque bateau est rvis rgulirement par un technicien (la base exemple compte actuellement 2 techniciens). A chaque rvision, le technicien devra remplir l'application en indiquant : qui a ralis la rvision ; la date ; le nombre d'heures de navigation du bateau au moment de la rvision ; les interventions ralises, sous forme de texte libre.

AgroParisTech, ufr dinformatique

TD Base de Donnes

page 144

TD Base de donnes 2
Les locations
Toutes les locations sont enregistres dans la base. En plus des informations videntes saisir pour une location, on souhaite avoir la possibilit de saisir au retour du bateau : le nombre d'heures de navigation effectues ; le montant vers au titre des dommages infligs au bateau ; un commentaire libre.

AgroParisTech, ufr dinformatique

TD Base de Donnes

page 145

Le langage SQL : SELECT


Introduction
SQL signifie Structured Query Langage. La dernire norme du langage date de 1992 : on parle de SQL/92 ou SQL 2. SQL est insensible la casse (diffrence minuscule/majuscule).

Syntaxe du SELECT
L'ordre select permet de retrouver des donnes dans une base en spcifiant les champs que l'on souhaite, ainsi que des critres de recherche. Syntaxe gnrale :
SELECT COL1,COL2,COL3 FROM TABLE1,TABLE2 WHERE COL1=COL2 AND COL3 LIKE 'A%' ORDER BY COL1

Seule la premire ligne est obligatoire ! Elle permet d'indiquer les colonnes des valeurs qui nous intressent dans diffrentes tables. La deuxime ligne permet de restreindre l'ensemble ramen sur certaines conditions qui peuvent concernes les valeurs de certains champs. La troisime ligne permet de contrler l'ordre dans lequel les enregistrements sont ramens.

Valeurs et types
SQL permet de manipuler de champs de type numrique, chane de caractres et dates. Les chanes de caractres sont mettre entre ' et '. % permet de remplacer une partie de chane de caractres.

AgroParisTech, ufr dinformatique

TD Base de Donnes

page 146

TD Base de donnes 2
Une fois le schma termin et complt avec un certain nombre de donnes d'exemple, on crira un certain nombre de requtes SQL de type SELECT pour raliser les affichages suivants : la liste des bateaux ; la liste des bateaux classs par ordre alphabtique ; la liste des bateaux accompagns des informations correspondant leur modle et classs par modle ; le nombre total de bateaux ; la liste de toutes les bateaux de type Flying Bridge ; le nombre de bateaux de type classique ; le dernier bateau rvise ; la liste de tous les bateaux en cours de location ; la liste des bateaux qui ont subi un dommage en cours de location.

AgroParisTech, ufr dinformatique

TD Base de Donnes

page 147

AgroParisTech, ufr dinformatique

TD Base de Donnes

page 148

Gestion de projet

AgroParisTech, ufr dinformatique

Gestion de projet

page 149

AgroParisTech, ufr dinformatique

Gestion de projet

page 150

Sommaire

Un projet, c'est quoi ? Les grands rles dans un projet Les phases Mthodologie et documents Chiffrage

AgroParisTech, ufr dinformatique

Gestion de projet

page 151

Sommaire

Un projet, c'est quoi ? Les grands rles dans un projet Les phases Mthodologie et documents Chiffrage

Un projet, c'est ...


Dfinition simple : intention, plan raliser Limit dans le temps : un dbut et une fin Implique diffrentes comptences : notion d'quipe projet

AgroParisTech, ufr dinformatique

Gestion de projet

page 152

Un projet, a implique...

De la ralisation, mais aussi.. De la prparation Du suivi Un bilan

Notion de ROI

Un projet doit tre rentable :


Rapporter des clients, de l'argent ; Economiser du temps, des efforts

ROI : Return Of Investment

AgroParisTech, ufr dinformatique

Gestion de projet

page 153

Un projet a cote

Budget li au ROI :

Plan budgtaire Risques

Contractualisation

Sommaire

Un projet, c'est quoi ? Les grands rles dans un projet Les phases Mthodologie et documents Chiffrage

AgroParisTech, ufr dinformatique

Gestion de projet

page 154

La MOA

Matrise d'Ouvrage : terme franco-franais Il s'agit de celui qui paye :


Demandeur Donneur d'ordre Contractant

La MOE

Matrise d'oeuvre Il sagit de celui qui ralise :


Organise Ralise Livre Facture Contractant

AgroParisTech, ufr dinformatique

Gestion de projet

page 155

Pleins d'autres acteurs


Les juristes Les sous-traitants Les testeurs Les exploitants

Sommaire

Un projet, c'est quoi ? Les grands rles dans un projet Les phases Mthodologie et documents Chiffrage

AgroParisTech, ufr dinformatique

Gestion de projet

page 156

Le cycle en V

Cliquez pour ajouter un plan


Cahier des charges Tests utilisateurs pr-production Tests de qualification et dintgration Analyse

Conception

Tests unitaires

Codage

Sommaire

Un projet, c'est quoi ? Les grands rles dans un projet Les phases Mthodologie et documents Chiffrage

AgroParisTech, ufr dinformatique

Gestion de projet

page 157

Notion de Jalons

Il est important de savoir o on va Il faut dcomposer les grandes phases du projets en tapes Il faut rpartir le travail

Plan documentaire

Modles de document :

Cahier des charges Analyse Conception Architecture Tests Livraison Intallation Exploitation

AgroParisTech, ufr dinformatique

Gestion de projet

page 158

AgroParisTech, ufr dinformatique

Gestion de projet

page 159

AgroParisTech, ufr dinformatique

Gestion de projet

page 160

AgroParisTech, ufr dinformatique

Gestion de projet

page 161

AgroParisTech, ufr dinformatique

Gestion de projet

page 162

AgroParisTech, ufr dinformatique

Gestion de projet

page 163

AgroParisTech, ufr dinformatique

Gestion de projet

page 164

AgroParisTech, ufr dinformatique

Gestion de projet

page 165

Sommaire

Un projet, c'est quoi ? Les grands rles dans un projet Les phases Mthodologie et documents Chiffrage

Plusieurs mthodes

Chiffrage macroscopique Chiffrage par comptage des instructions Chiffrage par points de fonctions Chiffrage par ration Chiffrage commercial Chiffrage expert

AgroParisTech, ufr dinformatique

Gestion de projet

page 166

Gestion de l'humain

Loi de Parkinson : work expands to fill the time available for its completion ; Syndrme de l'tudiant...

AgroParisTech, ufr dinformatique

Gestion de projet

page 167

AgroParisTech, ufr dinformatique

Gestion de projet

page 168