185
AgroParisTech Grignon 1A SYSTEME D’INFORMATION MMIP - UFR d'informatique [email protected] Support rédigé par David DOUSSOT : [email protected]

AgroParisTech Grignon 1A - Laboratoire de Recherche en …antoine/Courses/AGRO/TC/SI-HTML-… ·  · 2010-01-04Mise en forme, attributs standards ... Front Office Back Office Front

Embed Size (px)

Citation preview

AgroParisTech Grignon 1A

SYSTEME D’INFORMATION

MMIP - UFR d'[email protected]

Support rédigé par David DOUSSOT : [email protected]

SOMMAIRESystème d'Information : Présentation générale...................................... 5

Architecture, technologies, organisation......................................... 8Conception et réalisation...............................................................15Profils des métiers.........................................................................17Etude sommaire d'une technologie............................................... 19

Client HTML.......................................................................................... 25Le navigateur HTML...................................................................... 27URL : Uniform Ressource Locator................................................ 29HTML, Hyper Text Markup Language........................................... 30HTML : premier exemple............................................................... 31Normes et outils............................................................................ 32La syntaxe HTML : balises............................................................ 33L'interprétation des pages HTML.................................................. 34Le document HTML minimal......................................................... 35Balises de mise en page............................................................... 37Mise en forme, attributs standards................................................ 38Les listes....................................................................................... 39Les styles...................................................................................... 40Les feuilles de style....................................................................... 41Feuille de style : exemple.............................................................. 43Feuille de style : fichier HTML....................................................... 44Feuille de style : fichier CSS......................................................... 45Les images.................................................................................... 46Ancres et liens hypertextes........................................................... 47Les tableaux.................................................................................. 49Scinder une page en blocs............................................................52Les formulaires HTML................................................................... 53Les balises <form></form>........................................................... 54Les contrôles graphiques HTML................................................... 55

AgroParisTech, ufr d’informatique Sommaire page 1

Prise en main de l'outil de développement........................................... 57

TD HTML........................................................................................... ... 63TD HTML 1................................................................................... 64TD HTML 2................................................................................... 66TD HTML 3................................................................................... 67TD HTML 4................................................................................... 68TD HTML 5................................................................................... 71TD HTML 6................................................................................... 72

Programmation : principes de base.................................................. ... 73Ordinateur : architecture et codage...............................................75Langages de programmation........................................................ 79Types et variables......................................................................... 82Instructions.................................................................................... 85Branchements conditionnels......................................................... 87Schémas itératifs...........................................................................89Procédures et fonctions................................................................ 93

PHP................................................................................................... ... 97PHP : histoire et état des lieux...................................................... 99PHP : principe de fonctionnement...............................................100Premier exemple de code........................................................... 101Notions de base.......................................................................... 103Structures de contrôle................................................................. 104Interactions avec l'utilisateur....................................................... 105Formulaire validé par lui-même...................................................107Tableaux..................................................................................... 109Fonctions.....................................................................................110Ressources................................................................................. 111

AgroParisTech, ufr d’informatique Sommaire page 2

TD PHP............................................................................................... 113TD PHP 1.................................................................................... 115TD PHP 2.................................................................................... 116TD PHP 3.................................................................................... 117TD PHP 4.................................................................................... 118TD PHP 5.................................................................................... 119

Organiser les données du Système d'Information.............................. 121

TD Base de données.......................................................................... 135Bases de données : concepts..................................................... 137Bases de données relationnelles................................................ 138Introduction à MySQL..................................................................139TD Base de données 1............................................................... 140TD Base de données 2............................................................... 143Le langage SQL : SELECT......................................................... 144

Gestion de projet................................................................................. 147Un projet, c'est quoi ?..................................................................150Les grands rôles dans un projet.................................................. 152Les phases.................................................................................. 154Méthodologie et documents........................................................ 156Chiffrage...................................................................................... 158

AgroParisTech, ufr d’informatique Sommaire page 3

Projet final : un intranet dynamique.....................................................161Démarrage du projet................................................................... 163Projet PHP : en-tête, pages dynamiques.................................... 164Projet PHP : premier formulaire.................................................. 165Projet PHP : base de données.................................................... 166Projet PHP : connexion à la base............................................... 169Projet PHP : extraction de données............................................ 170Projet PHP : point architecture.................................................... 171Projet PHP : affichage de la liste.................................................172Projet PHP : sécurisation du site.................................................173Projet PHP : notion de session................................................... 174Projet PHP : gestion de session..................................................175Le langage SQL : INSERT, UPDATE, DELETE..........................176Projet PHP : mise à jour de la base............................................ 177Projet PHP : gestion des adresses............................................. 178Projet PHP : formulaire complexe............................................... 179Projet PHP : covoiturage............................................................. 180Projet PHP : écrans du covoiturage............................................ 181Ressources................................................................................. 182

AgroParisTech, ufr d’informatique Sommaire page 4

Système d'Information :présentation générale

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 5

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 6

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 7

Système d'Information : présentation générale

AgroParisTech, ufr d’informatique

Déroulement● cours 1 (amphi)cours 1 (amphi) L’entreprise et son système d’information :

architecture et technologies● TD 1 à 3TD 1 à 3 Fonctionnement du client HTML● cours 2 (amphi)cours 2 (amphi) Programmation● TD 4TD 4 QCM programmation● TD 5 à 8TD 5 à 8 Langage PHP● cours 3 (amphi)cours 3 (amphi) Base de données : concepts, relations, modélisation.

requêtes SQL de consultation et mise à jour, API php● TD 9 à 13TD 9 à 13 Conception d'une base de données, début du projet● cours 4 (amphi)cours 4 (amphi) Gestion de projet : les bases● TD 14 à 19TD 14 à 19 Projet : intranet et covoiturage, évaluation

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 8

Le système d’information (SI)de l’entreprise

Base de données

points d’accès

Gestion de l’entreprise(back office)Services aux clients(front office)Relations prospects(action commerciale, CRM)

Sommaire des thèmes abordés● Architecture, technologies, organisationArchitecture, technologies, organisation● Conception et réalisation● Profils des métiers● Étude sommaire d’une technologie

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 9

Préparer un week end à Lisbonne

point de réservation

Places disponibles

de chez soi, via internet, par téléphone, ou bien d’une agence

service central de réservation

côté CLIENT côté SERVEUR

Les étapes de la réservationLes étapes de la réservationcôté Client côté Serveur

1 AR pour 2 personnes, Paris-Lisbonne, départ le 6/2/2004, retour le 9/2/2004

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

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 10

Les étapes de la réservationLes étapes de la réservationcôté Client côté Serveur

? conditions d’annulation pour le charter

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

pas de remboursement,sauf assurance complémentaire

Les étapes de la réservationLes étapes de la réservationcôté Client côté Serveur

? coût de l’assurance

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

5% prix du voyage

22 ? conditions d’annulation pour le charterpas de remboursement, sauf assurance complémentaire

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 11

Les étapes de la réservationLes étapes de la réservationcôté Client côté Serveur

réservation ferme TAP !

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

? mode de paiement (CB / chèque)

22 ? conditions d’annulation pour le charterpas de remboursement, sauf assurance complémentaire

33 ? coût de l’assurance5% prix du voyage

Les étapes de la réservationLes étapes de la réservationcôté Client côté Serveur

indication n° de carte + date de validité

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

validation paiement carte + ordre émission billets

22 ? conditions d’annulation pour le charter pas de remboursement, sauf assurance complémentaire

33 ? coût de l’assurance 5% prix du voyage

44 réservation ferme ! ? mode de paiement (carte bancaire / chèque)

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 12

Les étapes de la réservationLes étapes de la réservationcôté Client côté Serveur

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

22 ? conditions d’annulation pour le charter pas de remboursement, sauf assurance complémentaire

33 ? coût de l’assurance 5% prix du voyage

44 réservation ferme ! ? mode de paiement (carte bancaire / chèque)

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

quelle infrastructure quelle infrastructure pour ces opérations ?pour ces opérations ?

Le système d’information : une architecture client / serveur● Base de données :

Oracle, DB/2, SQL server, mySQL

● Serveur :machine(s) et logiciels

● Clients :■ terminal passif

(3270 / 5250)■ micro-ordinateur :

client lourd ou léger ?■ navigateur Web :

le client universel Clients

BD

Serveur

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 13

Le système d’information de l’entreprise, aujourd’hui

Postes clients

BDServeur Web•

• Serveur d’applications

ApplicationsHTML

HTML

HTML

HTML

Légende : information statique ou dynamique code exécutable (programme)

Serveur Web

Serveur d’applications

Où l’information est-elle traitée ?

Postes clients

BD

HTML

HTML

HTML

HTML

Légende : information statique ou dynamique code exécutable (programme)

client léger : peu ou pas de traitement sur le client

(programmation en JavaScript) côté serveur,

trois types de solutions applicatives(Microsoft, Java, PHP)

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 14

Applications

Serveur d’applications

Serveur Web

Back OfficeBack Office

Et la structuration ?

BD

HTML

HTML

HTML

HTML

Front OfficeFront Office

Back OfficeBack Office

Front OfficeFront Office

Les composants et les pratiques

Développement particulierProgiciel de gestion intégré (PGI, ERP)

autonomie ou sous-traitance ? régie ou forfait ?externalisation (infogérance)?

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 15

Sommaire des thèmes abordés● Architecture, technologies, organisation

● Conception et réalisationConception et réalisation● Profils des métiers● Étude sommaire d’une technologie

SI : concevoir, développer, gérer● Besoins

conseil, cahier des charges● Réalisation

service, maîtrise d’ouvrage / d’œuvre, forfait / assistance technique

● Déploiementlogistique, formation

● Exploitationinfogérance ?

● MaintenanceTMA ?

P P R R O O J J E E TT

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 16

Cycle en V

Cahier des charges

Spécifications générales

Spécifications détaillées

Codage

Tests unitaires

Tests de qualification et d ’intégration

Tests utilisateurs - pré-production

Cycle en V : parodie

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 17

Sommaire des thèmes abordés● Architecture, technologies, organisation● Conception et réalisation

● Profils des métiersProfils des métiers● Étude sommaire d’une technologie

Un projet d’évolution du SI ?

XXXlivraison et déploiement

XX Xtests

XXXXréalisationXXXXarchitecture

X XXspécifications techniques

XX Xspécifications fonctionnelles

XX Xexpression des besoins

organisationmétiertechniquecommunication 

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 18

Le profil des informaticiens du projet● Communication :

écouter, expliquer, accompagner● Fonctionnel :

connaître le métier de l’entreprise, comprendre les enjeux et savoir formuler les besoins

● Technique : contrôler et assembler les outils qui l’encapsulent

● Organisation :gérer, piloter, coordonner

technique fonctionnel

management & organisation

expertiseUV européenne

architecte architecte

consultant consultant

développeur

analyste

directeur de projet, chef de projet

maîtrise d’ouvrage

maîtrise d’œuvre

consultant

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 19

Sommaire des thèmes abordés● Architecture, technologies, organisation● Conception et réalisation● Profils des métiers● Étude sommaire d’une technologieÉtude sommaire d’une technologie

Le web● Invention récente :

● 1992● au CERN● Tim Bernes Lee

● Au départ :● sites documentaires● liens hypertextes

● Technologie : HTTP et HTML

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 20

HTML : un premier exemple● Chargeons une page● Distinguons entre la présentation et le

fichier-source :● HTML est un langage de description

d’information● Le navigateur Internet interprète ce langage

pour présenter l’information● HTML permet de décrire :

● du texte● des images● des liens entre pages

du textedu texteune imageune image

un lien vers une autre pageun lien vers une autre page un formulaire un formulaire de saisiede saisie

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 21

Historique du Web● Le web à l'origine :

● permet d'accéder à des pages d'informations reliées par des liens hypertextes

● nécessite uniquement la présence d'un navigateur Web sur le poste client

● permet de générer des pages dynamiquement pour des applications spécifiques et limitées (ex : moteur de recherche)

Evolution du Web● Développement des pages dynamiques :

● générées à partir d'une base de données : pas besoin d'écrire des centaines de pages HTML (ex : site de presse)

● apportent un contenu personnalisé à l'utilisateur (ex : Mon Yahoo !)

● ne nécessitent pas d'installation sur le poste de l'utilisateur (ex : annuaire de l'école)

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 22

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● très populaire pour les sites Internet● simple à apprendre

Web dynamique : principes (1 / 3)

Formulaire :- champs de saisie- bouton de validation

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 23

Web dynamique : principes (2 / 3)

Transmission des données du formulaire

Réponse à 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 requête HTTP

2 : le serveur accepte la connexion reçoit la requête, retrouve les informations transmises et recherche les données correspondantes

3 : le serveur génère dynamiquement une page avec le résultat, l ’envoie en réponse HTTP au navigateur

4 : le navigateur affiche la page et rompt la connexion

AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 24

Web dynamique : session● Le dialogue entre le navigateur et le

serveur est déconnecté :1. Le navigateur se connecte au serveur2. La navigateur envoie une requête3. Le serveur renvoie une réponse4. La connexion est rompue !

● Comment assurer le suivi de l'utilisateur (ex : webmail, panier dans un site de commerce) ?

Web dynamique : cookies1 : le navigateur rassemble les informations du formulaire, il se connecte au serveur et lui transmet ces informations dans une requête HTTP

2 : le serveur accepte la connexion reçoit la requête, retrouve les informations transmises et recherche les données correspondantes.Il génère également un cookie et garde en mémoire les informations associées

3 : le serveur génère une page en fonction de l ’utilisateur identifié par son cookie clavel

doussot

3 : le serveur génère dynamiquement une page avec le résultat, l ’envoie en réponse HTTP au navigateur, accompagnée du cookie.

5 : lors de la requête suivante, le navigateur retransmet le cookie au serveur, qui saura ainsi identifier l ’utilisateur...

4 : Le navigateur garde le cookie et affiche la page

5 : etc.

Client HTML

AgroParisTech, ufr d'information Client HTML page 25

AgroParisTech, ufr d'information Client HTML page 26

Le navigateur HTML (1 / 2)

Le navigateur ou browser est avant tout un client HTTP. C’est grâce à ce logiciel que l’utilisateur visualise les informations qu’il télécharge depuis le Web.

Les fonctions de base du navigateur Web Il émet les requêtes (Queries) HTTP à destination des serveurs Web. Il interprète les documents HTML qui lui sont envoyés en retour. Il fournit des outils destinés à faciliter la navigation (gestionnaire de

Bookmarks, Historique des visites,...).

Un contenu multimédia 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 à l’interprétation des pages

HTML.Par l’intermédiaire d’extensions (Plug-ins), le navigateur Web peut désormais traiter tout type de documents multimédias : son, images animées...

Bien que non officiellement standardisées, ces extensions acquièrent parfois un statut de standard de fait (plug-in RealAudio pour la diffusion de fichiers sonores).

AgroParisTech, ufr d'information Client HTML page 27

Le navigateur HTML (2 / 2)

Le navigateur Web est aujourd’hui perçu comme l’interface universelle et standardisée d’accès aux ressources du réseau.

Intégration des protocoles Internet Le navigateur Web n’est plus un simple client HTTP.

La plupart des navigateurs du marché sont aussi des clients d’autres applications Internet : SMTP (Messagerie électronique), FTP (transfert de fichiers), NNTP (news), ...

Un client léger (thin-client)Le navigateur Web est le client standard des architectures Client / Serveur Internet.

Un OS au dessus de l’OSLe navigateur Web possède des capacités d’exécution d’applications distribuées :

moteurs d’exécution de scripts inclus dans les pages HTML (JavaScript et VBScript) ;

machine virtuelle Java pour l’exécution d’applets ;

conteneur de composants binaires distribués (ActiveX).

Navigateurs disponibles Microsoft Internet Explorer

Mozilla, Firefox

Opera

AgroParisTech, ufr d'information Client HTML page 28

URL : Uniform Resource Locator

UtilitéURL signifie : Uniform Resource LocatorUne URL identifie de manière unique une ressource dans un réseau internet ou intranet.

Différents types d'URL Consultation : http://www.agroparistech.fr/spip.php?rubrique46 Téléchargement : ftp://ftp.mozilla.org Mail : mailto:[email protected]

Forme généraleprotocole:numéro_de_port//nom_ou_adresse_serveur/emplacement le protocole indique la syntaxe d'échange entre le client et le serveur ; le numéro de port indique un chemin d'écoute particulier sur le serveur

(par défaut : 80 pour http, 21 pour ftp, etc.) ; le nom/l'adresse du serveur indique comment le retrouver sur le réseau l'emplacement indique l'emplacement exact de la ressource demandée sur

le serveur.

AgroParisTech, ufr d'information Client HTML page 29

HTML, Hyper Text Markup Language

HTML est le langage de formatage de documents diffusés sur le World Wide Web. Il a été défini par Tim Berners-Lee, un ingénieur du CERN (Centre Européen de Recherche Nucléaire) aussi inventeur du protocole HTTP et aujourd’hui président du W3 Consortium.

HTML n’est pas un langage de programmation. HTML est un langage de description de page. Il spécifie la façon dont les

données qu’il contient devront être formatées à l’affichage ou à l’impression par le client HTTP.

HTML est standardisé par les instances de gestion de l’Internet. Cette standardisation le rend portable sur différentes plates-formes matérielles et logicielles sans adaptations préalables.

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 d’ouvrages de référence : notices techniques, ...).

Des feuilles de styles écrites au format CSS (Cascading Style Sheet) sont souvent associées aux pages HTML.

Le présent support ne se veut pas exhaustif. Il permet d'acquérir les bases nécessaires à la création de pages web. Des informations supplémentaires peuvent être trouvées facilement sur le web !

AgroParisTech, ufr d'information 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'information 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. Désormais, lorsque nous parlerons de HTML dans le présent document, il faudra entendre XHTML.

La norme utilisée est déclarée en début de page et référence une URL de validation sur le site du W3C

Les spécifications des normes peuvent être consultées sur le site http://www.w3.org/TR

Il est important de se conformer aux normes, notamment pour permettre l’accès des sites aux personnes qui disposent de navigateurs vocaux ou en braille (cf. http://www.acces-pour-tous.net)

Pour vérifier la conformité d'une page web : http://validator.w3.org Un site de référence francophone : http://openweb.eu.org

Outils De nombreux outils permettent de générer automatiquement du code

HTML, mais il est cependant important de connaître celui-ci afin de comprendre et manipuler le code généré, et de pouvoir y ajouter du code dynamique (par exemple du PHP)

Outils de bureautique : Microsoft Office, OpenOffice Outils dédiés : Microsoft Frontpage, Macromedia Dreamweaver MX

AgroParisTech, ufr d'information Client HTML page 32

La syntaxe HTML : balises

Les instructions HTML sont nommées 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 chaîne de caractères : <balise>une chaîne de caractères</balise>

- soit d’un seul identificateur écrit en minuscules (entre < et />) : <balise />

Les balises peuvent être imbriquées :<balise1> <balise2> ... </balise2> </balise1>

Certaines balises possèdent des paramètres, dits attributs, qui spécifient plus précisément leur effet sur le texte à formater. Ces attributs sont eux aussi écrits en minuscules, à l'intérieur de la balise unique ou de la balise ouvrante, et leur valeur est écrite entre " " :

<balise att1="X" att2="Y"> chaîne de caractères</balise><balise att1="X" att2="Y"/>

Référence en ligne :http://www.w3schools.com/xhtml/xhtml_reference.asp

AgroParisTech, ufr d'information Client HTML page 33

L’interprétation des pages HTML

Les fichiers HTML portent généralement l'extension html. Un fichier correspond à une page d'affichage dans le navigateur.

La chaîne DOCTYPE suivante placée en début de fichier indique la norme utilisée 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 l’écriture d’une page HTML n’entraîne pas

d’erreur à l’interprétation par le navigateur. Toute balise mal orthographiée est simplement ignorée par le navigateur, ou corrigée naturellement par celui-ci.

Les suites de caractères d’espacement, les tabulations de même que les retours-chariot n’ont aucun effet sur l’interprétation du code HTML par le navigateur.L’interprétation du code HTML :ceci est un essaid’affichage de code HTMLgénérera l’affichage suivant :ceci est un essai d’affichage de code HTML

AgroParisTech, ufr d'information Client HTML page 34

Le document HTML minimal (1 / 2)

Structure de base d’un document HTMLTout 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 première page HTML</title> </head> <body> <div> </div> </body></html>

L’interprétation de ce code HTML n’entraîne aucun affichage dans fenêtre du navigateur.

Balises <html></html> La balise <html> spécifie la nature du document au navigateur. L'attribut xml:lang indique la langue du texte

Balises <body></body>Les balises <body> délimitent le corps du document (là où se trouvent le texte et les images affichées dans la fenêtre du navigateur).

AgroParisTech, ufr d'information Client HTML page 35

Le document HTML minimal (2 / 2)

Balises <head></head>Les balises <head> délimitent un ensemble d’informations, relatives à la page et non affichées par le navigateur (sauf title).

Balise <meta>La balise <meta> spécifie des informations qui ne sont pas affichées 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 première page HTML » inscrit entre les balises <title></title> est visible dans la barre de titre du navigateur.

Le titre du document sert aussi au référencement de la page dans les favoris du navigateur.

AgroParisTech, ufr d'information Client HTML page 36

Balises de mise en pageLe rôle de ces balises est de séparer différentes parties du document pour en organiser la lecture.

<div></div>Cette balise permet de regrouper des éléments (pour leur affecter un style particulier par exemple) avec saut de ligne avant et après.

<hr /> Horizontal RuleCette balise trace un trait de séparation dans le document.

<p></p> marque de paragrapheCette balise est une marque de paragraphe et fonctionne comme le signe « ¶ » des logiciels de traitement de texte.

<p >texte d’un paragraphe centré</p>

<br /> fin de ligneCette balise marque une fin de ligne sans saut de paragraphe.

<span></span> regroupementCette balise permet de regrouper des éléments (pour leur affecter un style particulier par exemple) sans saut de ligne avant ni après.

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

AgroParisTech, ufr d'information Client HTML page 37

Mise en forme, attributs standardsCes commandes permettent de mettre en forme des parties de texte.

Mise en forme spécialiséeHTML intègre un certain nombre de balises de mise en forme standard, dont notamment :

Balise Utilisationacronym acronymeaddress adresseblockquote citation longue (sur plusieurs lignes)cite citation courtecode code informatiqueem texte mis en valeurstrong texte renforcé

Les balises de titre (Headers)Les balises de type <hn></hn> délimitent le texte des titres, un peu comme dans un modèle Word. On dénombre 6 niveaux de titres.

<h2 >titre de niveau 2 </h2>

Attributs standardLa plupart des balises acceptent les attributs suivants :

Attributs Utilisationclass classe (cf. page suivante)id nom unique pour identifier l'élémentstyle style (cf. page suivante)title bulle d'aidelang langueacceskey raccourci claviertabindex ordre de parcours par tabulation

AgroParisTech, ufr d'information Client HTML page 38

TD H1

Les listes

Les listes de définitionsCe type de liste permet l’affichage d’une suite de définitions à la manière d’un dictionnaire. Le terme défini se trouve alors en retrait par rapport à sa définition ou est affecté d’un style différent (italique par exemple).

source HTML Affichage Navigateur<dl> <dt>INSIVE</dt> <dd>AgroParisTech</dd> <dt>ECP</dt> <dd>Ecole Centrale de Paris</dd></dl>

INSIVE AgroParisTech

ECP

Ecole Centrale de Paris

Les listes à pucessource HTML Affichage Navigateur<ul> <li>premier item</li> <li>second item</li></ul>

• premier item

• second item

Avec un style approprié, ces listes permettent également de définir des menus.

Les listes à numérossource HTML Affichage Navigateur<ol> <li>premier item</li> <li>second item</li></ol>

1. premier item

2. second item

AgroParisTech, ufr d'information Client HTML page 39

Les styles

Styles par défaut et styles personnalisés Le navigateur applique un formatage par défaut aux différents éléments

d'une page HTML La plupart des balises (dont les balises de mise en forme et de mise en

page des 2 pages précédentes) admettent cependant un attribut style qui contient un ensemble de déclarations séparés par des points virgule, permettant au concepteur de la page de définir son apparence exacte.

Définir un style Au niveau d’une balise :

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

En en-tête 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 redéfinir le style d'une balise existante, ou utiliser un nouveau nom qui sera alors référencé par l'attribut class de la balise:

.fond {color: blue}

<body class="fond"></body>

AgroParisTech, ufr d'information Client HTML page 40

Les feuilles de style (1 / 2)

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

Propriétés de texteExemple Valeurs possiblesfont-family : Arial; Noms de policefont-style : italic; normal, italic, obliquefont-weight : bold; normal, bold, bolder,

lighter, 100, 200, 300,... 900

font-size : x-small;font-size : 18pt;font-size : 150%;

xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller

text-decoration : underline; none, underline, overline line-through, blink

text-transform : uppercase; capitalize, uppercase, lowercase, none

Propriétés de couleurExemple Valeurs possiblescolor : red;color : #fd4a88;color : rgb(125,32,98);

Noms de couleurs, ou codes RGB

background-color : blue; Idembackground-image : url("im.jpg") url("…"), none

AgroParisTech, ufr d'information Client HTML page 41

Les feuilles de style (2 / 2)

Propriétés de placementExemple Valeurs possiblestext-align : center; left, right, center, justifymargin-top : 1em 1em : hauteur d'un caract reè

1ex : hauteur du x1cm : 1 centim reè1pt : 1 point

margin-bottom : 2ex Idem

margin-left : 12px Idem

margin-right : 2cm Idem

float : left left, right, centerUtilisé pour rendre un bloc flottant, c'est-à-dire le superposer à un autre

Propriétés de bordureExemple Valeurs possiblesborder-style : solid none, hidden, dotted, dashed,

solid, double, groove, ridge, inset, outset

border-top, border-bottom, border-left, border-right

idem margin

border-width : thinborder-width : 3px

thin, medium, thick

Ressourceshttp://www.w3schools.com/css/default.asp

AgroParisTech, ufr d'information Client HTML page 42

Feuille de style: exemple

AstucesLes navigateurs permettent d'afficher la source d'une page consultée : on peut ainsi déterminer comment celle-ci a été réalisée. On peut aussi repérer en en-tête l'emplacement de la ou des feuilles de style pour les télécharger.

Un générateur de CSS en ligne :http://www.weboutils.com/services/generateurcss.html

Quelques exemple du potentiel des feuilles de stylehttp://www.csszengarden.com/tr/francais/

AgroParisTech, ufr d'information 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 départements</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'information 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 hiérarchique d'un style.

AgroParisTech, ufr d'information Client HTML page 45

TD H2

Les imagesAvec HTML, on a la possibilité de référencer des éléments multimédias tels que les images.Les principaux navigateurs Web interprètent les images GIF, JPG et PNG. L'utilisation des mages GIF est déconseillée pour cause de brevet.

Référencer une imagePour insérer une image dans une page Web il faut indiquer au navigateur la localisation de cette image sur Internet au moyen d’une URL relative ou absolue.

<img src="http://www.inapg.fr/imindex/logorom2.jpg" /><img src="./logorom2.jpg" />

Les attributs spécifiques de la balise <img />La balise <img /> admet de nombreux attributs :

alt permet de spécifier un texte alternatif qui sera affiché sur les navigateurs n’affichant pas les images

width et height spécifient la longueur et la largeur de l’image (elles contribuent à diminuer le temps de calcul pour l’affichage des images)

AgroParisTech, ufr d'information Client HTML page 46

TD H3

Ancres et liens hypertextes (1 / 2)Ces balises sont utilisées pour l’établissement de liens entres pages ou entre différentes parties d’un même texte.

Les ancres <a id="…"> </a>Les ancres permettent de marquer un endroit précis (signet) d’un texte pour que cet endroit puisse être référencé par un lien hypertexte.<a id="identificateur_signet"> texte qui fait partie de l’ancre</a>

Les liens <a href="…"> </a> La balise <a href="…"> </a> délimite une chaîne de caractères ou une image

qui représente alors un lien vers une autre page HTML, un signet à l’intérieur de la même page ou vers toute ressource Web référencée par une URL.

Le texte placé entre les balises apparaît par défaut souligné pour indiquer qu’il s’agit d’un lien (une image liée apparaît encadrée). Quand on clique sur ce lien, la navigation passe à la ressource désignée par la lien.

<a href="désignation_du_lien"> texte explicatif du lien qui apparaît souligné</a>

Exemples pour la désignation du lien :"#finPageA","cours_page_B.html","cours_page_11.html#debutPageA"

Les liens hypertextes peuvent aussi référencer d’autre 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 (lorsqu’il est activé) le chargement du fichier « patch.zip »

L'attribut style peut prendre des valeurs spécifiques à la mise en forme d'un lien

AgroParisTech, ufr d'information Client HTML page 47

Ancres et liens hypertextes (2 / 2)

AgroParisTech, ufr d'information Client HTML page 48

Ancre : début de la page A<a name="debutPageA">Début de la page A (Ancres et Liens)</a>

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 Défense)</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>

Les tableaux (1 / 3)

Les balises <table>, <tr>et <td>La structure de base d’un tableau HTML s’articule autour de trois balises fondamentales :

<table> </table>, qui indique le début et la fin du tableau. <tr> </tr>, qui définit une ligne du tableau. <td> </td>, qui définit une cellule du tableau (à l’intérieur d’une ligne

donnée).

Titres de tableau et de colonnes <thead></thead>, <tbody></tbody>, <tfood></tfoot>

permettent de structurer un tableau <th></th> est utilisé à la place de <td></td> pour les titres de

colonne <caption></caption> permet de spécifier 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'information Client HTML page 49

Les tableaux (2 / 3)

Exemple de source HTML Affichage <table summary="Un exemple de tableau" border="2" cellpadding="2" cellspacing="2" > <caption>

Exemple de tableau</caption><thead>

<tr><th>

Thème</th><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>

AgroParisTech, ufr d'information Client HTML page 50

Les tableaux (3 / 3)Les attributs colSpan et rowSpan permettent de gérer respectivement la fusion des cellules en colonne et en ligne.

Exemple de source HTML Affichage <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>

AgroParisTech, ufr d'information Client HTML page 51

Scinder une page en blocs

Forme habituelle d'un site

Bandeausupérieur

Menu àgauche

Technique utiliséeBeaucoup 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 données en tableau !Par contre, on peut organiser une page en utilisant les balises <div></div> couplées à des styles, pour définir des sections superposées ou juxtaposées :

HTML : <div id="menugauche">…</div><div id="contenu">…</div>

CSS : #menugauche {float: left; width: 250px;

}#contenu {margin-left: 250px;

}

AgroParisTech, ufr d'information Client HTML page 52

TD H5TD H4

Les formulaires HTML

Les formulaires HTML constituent l’interface homme machine (ou GUI : Graphical User Interface) des applications HTML/Web. Le « programmeur » HTML dispose d’un ensemble de contrôles graphiques (champs de saisie, listes déroulantes,...) qui permettent d'ajouter de l'interactivité.

Contrôles graphiques

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

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

AgroParisTech, ufr d'information 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">Prénom :</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 : précise l’URL du programme serveur appelé method : get (par défaut), post essentiellement

La méthode getLe contenu du formulaire est encodé sous la forme d’une QueryString constituée d’une concaténation de l’URL du paramètre ACTION et du contenu (encodé) du formulaire :http://ouranos:8080/Tests/servlet/fr.inapg.tests.DoFormulaire?btAction=OK&prenom=Henri&nom=Dupont

La méthode postDans le cas de la méthode POST le contenu (encodé) du formulaire est envoyé dans le corps de la requête. Ceci permet de soumettre au serveur des requêtes plus longues (voire même des fichiers).

AgroParisTech, ufr d'information Client HTML page 54

Les contrôles graphiques HTMLLa plupart des balises de composant HTML admettent les options suivantes :

name = nom du composant

value= valeur saisie

Contrôle 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" />

AgroParisTech, ufr d'information Client HTML page 55

TD H6

AgroParisTech, ufr d'information Client HTML page 56

Prise en main de l'outil de développement

AgroParisTech, ufr d’informatiquePrise en main de l'outil de développement page 57

AgroParisTech, ufr d’informatiquePrise en main de l'outil de développement page 58

Prise en main de l'outil de développement (1 / 4)

Easy PHPEasy PHP est un logiciel qui permet d'installer et de prendre en charge facilement sur une machine dôtée du système d'exploitation Windows :• le serveur Web Apache ;• PHP ;• la base de données MySQL ;• l'interface de configuration de MySQL phpmyadmin.

http://www.easyphp.org

EclipseEclipse est un outil de développement créé par IBM.IBM a ensuite "offert" cet outil au "monde du logiciel libre".Le développement d'Eclipse est maintenant géré par une fondation qui regroupe un grand nombre d'acteurs du logiciel (IBM, Borland, BEA) :http://www.eclipse.org

Eclipse est au départ destiné au développement d'applications Java. Il nécessite d'ailleurs que Java soit installé sur la machine pour fonctionner.Mais les possibilités de cet outils sont extensibles à l'infini grâce à un mécanisme de plugin qu'il suffit de télécharger et d'enregistrer dans le sous-répertoire plugins du répertoire d'installation d'Eclipse.

PHP EclipsePHP Eclipse est un plugin Eclipse qui permet de gérer des projets contenant des fichiers HTML et PHP. Il est développé en Allemagne :http://www.phpeclipse.de

AgroParisTech, ufr d’informatiquePrise en main de l'outil de développement page 59

Prise en main de l'outil de développement (2 / 4)

Démarrage d'Easy PHPMenu : Démarrer > Programmes > Programmation > EasyPHP 1.8

> EasyPHP

Apparaît alors la fenêtre suivante :

Vérifier que Apache et MySQL apparaissent bien tous les deux avec le statut Démarré.Si MySQL ne démarre pas, supprimer le répertoire MySQL contenu dans le répertoire N:\data et copier dans N:\data le répertoire C:\Program Files\EasyPHP1-8\mysql\data\mysql (pour obtenir de nouveau un répertoire N :\ data\mysql)

EasyPHP doit être démarré et fonctionner correctement pour tester des fichiers HTML et PHP au sein d'Eclipse !

AgroParisTech, ufr d’informatiquePrise en main de l'outil de développement page 60

Prise en main de l'outil de développement (3 / 4)

Démarrage d'EclipseMenu : Démarrer > Programmes > Programmation > EclipseLa durée de lancement est assez conséquente, à cause de l'antivirus. En effet le lancement d'eclipse repose sur la lecture de nombreux fichiers, tous analysés par Sophos Antivirus.

Dans la boîte 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 menuFile > Switch Workspace....

Si l'affichage Welcome apparaît, le fermer.

AgroParisTech, ufr d’informatiquePrise en main de l'outil de développement page 61

Prise en main de l'outil de développement (4 / 4)

Utilisation d'EclipsePour chaque série de TD (HTML, puis PHP) on créera un nouveau projet avec le menu : File > New > Projet..., en choisissant PHP > PHP Projet

Ensuite, on peut créer des fichiers HTML ou PHP dans le projet.Lors de l'ouverture d'un fichier le PHP Browser doit apparaître automatiquement ; sinon, utiliser le menu : Window > Show View > PHPEclipse Web Development > PHP Browser

AgroParisTech, ufr d’informatiquePrise en main de l'outil de développement page 62

TD HTML

AgroParisTech, ufr d’informatique TD HTML page 63

AgroParisTech, ufr d’informatique TD HTML page 64

TD HTML 1

Introduction aux exercicesLes différents exercices de ce document consistent d'abord à réaliser un mini-site personnel. Chaque élève suivra le cheminement proposé pour réaliser son propre site avec un certain degré de liberté quant aux choix des attributs des styles, du moment que le travail réalisé reste conforme à l'esprit de l'exercice.Le support de cours ne contient pas forcément tous les éléments nécessaires à la réalisation, mais indique des sites internet de référence qui permettront à l'étudiant de trouver par lui-même les informations dont il aura besoin.

RéalisationIl s'agit tout d'abord de réaliser 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 séparation horizontale.

AgroParisTech, ufr d’informatique TD HTML page 65

TD HTML 2Ajouter une feuille de style à la page pour prendre en compte les éléments suivants :• la zone de titre est encadrée, avec un fond et une bordure de couleur ;• les titres de niveau 1 ont un aspect différent dans chaque section.

Compléter ensuite la page et sa feuille de style avec les éléments suivants :• deux titres de niveau 2 ;• deux listes à puces ;• deux lignes de séparation horizontale.

AgroParisTech, ufr d’informatique TD HTML page 66

TD HTML 3Compléter la page précédente, avec le contenu suivant :• une image de fond qui vient remplacer la couleur de fond de la zone de titre;• une image insérée 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 d’informatique TD HTML page 67

TD HTML 4 (1 / 3)Compléter la page précédente, avec le contenu suivant :• une nouvelle zone de menu à gauche de la zone contenu ;• une liste insérée dans la zone de menu, avec un ensemble de liens vers les

différentes pages du site, sachant que le lien vers la page courante n'est pas activé et est d'une couleur différente.

Indication : l'attribut float appliqué au style d'une zone permet de positionner celle-ci par rapport aux autres zones.

AgroParisTech, ufr d’informatique TD HTML page 68

TD HTML 4 (2 / 3)Créer une nouvelle page basée sur la même 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 éléments de la première colonne est différent de celui des éléments des autres colonnes, et le tableau possède une bordure. Compléter ensuite les autres parties du CV.

AgroParisTech, ufr d’informatique TD HTML page 69

TD HTML 4 (3 / 3)Créer une nouvelle page basée sur la même feuille de style et accessible via le menu. Cette page contient un ensemble de lien vers des sites, organisés dans une liste. Un clic sur un lien ouvre la page correspondante dans une nouvelle fenêtre du navigateur.

AgroParisTech, ufr d’informatique TD HTML page 70

TD HTML 5Copier les 3 pages précédemment réalisées ainsi que les feuilles de styles et les images nécessaires dans un nouveau répertoire.Modifier ensuite la feuille de style pour obtenir une apparence complètement différente du même contenu, en faisant notamment en sorte que le menu soit désormais positionné horizontalement au dessus du contenu.

Indication : display: inline; appliqué au style d'une liste permet d'afficher celle-ci horizontalement.

AgroParisTech, ufr d’informatique TD HTML page 71

TD HTML 6Il s'agit de créer un formulaire web.Reproduire aussi fidèlement 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 d’informatique TD HTML page 72

Programmation : principes de base

AgroParisTech, ufr d’informatique Programmation page 73

AgroParisTech, ufr d’informatique Programmation page 74

AgroParisTech, ufr d’informatique Programmation page 75

Programmation :principes de base

AgroParisTech, uer d’informatique

Sommaire● Ordinateur : architecture et codageOrdinateur : architecture et codage● Langages de programmation● Types et variables● Instructions● Branchements conditionnels● Schémas itératifs● Procédures et fonctions

AgroParisTech, ufr d’informatique Programmation page 76

Ordinateur : architecture globale● Un ordinateur est constitué de :

● Un (ou plusieurs) processeur (CPU)● De la mémoire : RAM● De stockage des données : disque dur● Des périphériques :

● D'entrée : clavier, souris● De sortie : écran, imprimante● D'entrée-sortie : clé USB

● Un ordinateur est doté d'un système d'exploitation qui fait l'interface avec les programmes : Windows, Linux, MacOS

Ordinateur : fonctionnement● Processeur :

● Cadencé par un cristal de quartz● Fréquence : nombre d'impulsions par

seconde● Accomplit des instructions :

● Opération● Opérandes

AgroParisTech, ufr d’informatique Programmation page 77

Ordinateur : fonctionnement● Familles d'instructions :

● Accès à la mémoire● Opérations arithmétiques : +, -, *, /● Opérations logiques : and, or● Contrôle : if, while

Ordinateur : codage des données● Les données sont représentées en binaire :

puissances de 2, représentées 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 d’informatique Programmation page 78

Ordinateur : codage des données● Les données sont traitées par « paquets » :

un ordinateur 32 bits traitent 32 unités binaires à la fois

● L'unité de base est l'octet : 8 bits● Avec un octet, on peut représenter :

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

Ordinateur : codage hexadécimal● L'écriture binaire est très 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 1011123 ==> 7B

AgroParisTech, ufr d’informatique Programmation page 79

Codage : à retenir● On n'a généralement pas besoin de faire

les conversions pour programmer● Par contre, on doit connaître les limites

(par exemple 255 est le nombre maximal qu'on peut coder avec un octect)

● L'hexadécimal est parfois utile : en HTML les composantes RGB d'une couleur sont codées sur 3 octets en hexadécimal

Sommaire● Ordinateur : architecture et codage● Langages de programmationLangages de programmation● Types et variables● Instructions● Branchements conditionnels● Schémas itératifs● Procédures et fonctions

AgroParisTech, ufr d’informatique Programmation page 80

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 » :● Interprété : traduction au fur et à mesure● Compilé : traduction complète avant exécution

Exemples de langages● Langages interprétés :

● Matlab● PHP

● Langages compilés :● Pascal● C● Java (semi-compilé)

AgroParisTech, ufr d’informatique Programmation page 81

Langages : autre typologie● Selon la manière de poser et résoudre le

problème :● Langage procéduraux : Matlab, C, PHP● Langages objet : C++, Java● Langages formels : CAML● Etc.

● En première année, nous nous intéressons uniquement aux langages procéduraux !

Langages procéduraux● Des suites d'instructions élémentaires sont

regroupées en procédures ou fonctions● L'enchaînement global est réalisé dans

une procédure d'entrée● Les instructions sont exécutées les unes à

la suite des autres, sauf si :● Condition d'exécution : if● Répétition d'exécution : for, while

AgroParisTech, ufr d’informatique Programmation page 82

Sommaire● Ordinateur : architecture et codage● Langages de programmation● Types et variablesTypes et variables● Instructions● Branchements conditionnels● Schémas itératifs● Procédures et fonctions

Les données du programme● Un programme effectue des opérations sur

des données :● Opérations arithmétiques● Autres opérations de transformation

(ex : sur les chaînes de caractères)● Opérations logiques : comparaison

● Ces données sont :● Des constantes : invariables● Des variables

AgroParisTech, ufr d’informatique Programmation page 83

Typage● Le programme doit connaître le type de

données manipulées● Ce typage peut être :

● Explicite : Pascal, C● Implicite : Matlab, PHP

● Un typage implicite signifie que le langage détermine le type automatiquement en fonction des données affectées dans la variable sinon il faut « déclarer » la variable

Les variables● Une variable est un moyen de représenter

et manipuler une donnée d'un programme● Une variable correspond à un espace de

la mémoire de l'ordinateur● Il peut y avoir des « conventions de

nommage » : par exemple le nom d'une variable commence par $ en PHP

AgroParisTech, ufr d’informatique Programmation page 84

Affectation des variables● Une variable n'a de sens que si elle

contient une donnée● 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 résultat d'une opération

Affectation des variables● En général, c'est le signe = qui est utilisé

(:= en Pascal)● L'affectation se fait toujours de la droite

vers la gauche !!

54 = $a

?

?

?

?

...

...

$a = 123a 123

$a = 52

52$b = $a

b 123

AgroParisTech, ufr d’informatique Programmation page 85

Nombres et chaînes de caractères● La conversion d'un nombre en chaîne de

caractère est généralement implicite● Par contre, la conversion d'une chaine de

caractères en nombre demande généralement l'utilisation d'une fonction du langage

● Ainsi :2 + 1 ==> 3"2" + "1" ==> "21"

● Cependant, en PHP l'opérateur de concaténation (.) est distinct de l'addition (+)

Sommaire● Ordinateur : architecture et codage● Langages de programmation● Types et variables● InstructionsInstructions● Branchements conditionnels● Schémas itératifs● Procédures et fonctions

AgroParisTech, ufr d’informatique Programmation page 86

Enchaînement des instructions● Par convention, on met une instruction par

ligne● Un séparateur peut être nécessaire :

souvent le ;● Les instructions peuvent être regroupées

dans des blocs : une variable déclarée dans un bloc n'existe pas à l'extérieur de celui-ci (notion de « portée » d'une variable) 

Quelques instructions en PHP$a = 12; // Les noms de variables // commencent par $ en PHP{ // Début de bloc

$b = $a * $a;echo "Carré de $a = $b";} // Fin de blocecho "Carré de $a = $b"; // Impossible !

AgroParisTech, ufr d’informatique Programmation page 87

Sommaire● Ordinateur : architecture et codage● Langages de programmation● Types et variables● Instructions● Branchements conditionnelsBranchements conditionnels● Schémas itératifs● Procédures et fonctions

Branchements conditionnels● Les branchements conditionnels

permettent de modifier l'exécution du programme selon les valeurs des variables

● Typiquement : si condition alors bloc vrai sinon bloc faux

AgroParisTech, ufr d’informatique Programmation page 88

Branchements conditionnels● La condition peut être une variable ou

toute opération qui renvoie vrai ou faux (comparaison arithmétique par exemple)

● Le bloc vrai est exécuté 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 :

généralement == au lieu de =● Négation : ~ en Matlab, ! en PHP● On peut combiner plusieurs conditions :

● opérateurs and, or, xor● emploi des parenthéses possible● ne pas oublier que (notation PHP) :

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

AgroParisTech, ufr d’informatique Programmation page 89

Exemple : calcul de racine// On suppose une suite d'instruction // ayant conduit à ce que la variable // $a contienne un nombre réelif ($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● Schémas itératifsSchémas itératifs● Procédures et fonctions

AgroParisTech, ufr d’informatique Programmation page 90

Schémas itératifs● Les schémas itératifs permettent de

répéter l'exécution d'un bloc d'instructions● 2 grands types de schémas :

● schéma for :lorsque le nombre de répétitions est connu à l'avance, gère intrinséquement un compteur

● schéma while :lorsque la fin des répétitions dépend d'une condition logique, ne gère pas de compteur

Schémas itératifs● Si on souhaite avoir un compteur dans un

schéma while, il faut le gérer soi-même et penser à le modifier à chaque itération

● Un schéma for peut toujours être transformé en schéma while, mais la réciproque n'est pas vraie

AgroParisTech, ufr d’informatique Programmation page 91

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 à gérer un grand nombre de données similaires et à leur appliquer des traitements similaires

● On peut alors gérer ces données dans des collections qui permettront de facilement les manipuler dans des itérations

● 2 grands types de collection :● les tableaux : indicés à partir de 0 ou 1● les tableaux indexés : on peut alors choisir de

faire correspondre une valeur à un index choisi

AgroParisTech, ufr d’informatique Programmation page 92

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 d’informatique Programmation page 93

Sommaire● Ordinateur : architecture et codage● Langages de programmation● Types et variables● Instructions● Branchements conditionnels● Schémas itératifs● Procédures et fonctionsProcédures et fonctions

Procédure et fonctions● Les procédures et fonctions permettent

l'organisation et la réutilisation du code● Contrairement à une procédure, une

fonction renvoie un résultat (plusieurs possibles avec Matlab)

● Les procédures et fonctions peuvent prendre des paramètres d'entrée

● Bien sûr les variables déclarées dans une procédure ou fonction n'existent pas en dehors de celle-ci

AgroParisTech, ufr d’informatique Programmation page 94

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● Paramètre d'entrée : $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

● Paramètre de retour : la valeur contenue dans $resultat

AgroParisTech, ufr d’informatique Programmation page 95

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 connaître le nom des variables utilisées dans la fonction !

Seuls comptent leur nombre et l'ordre !

AgroParisTech, ufr d’informatique Programmation page 96

PHP

AgroParisTech, ufr d’informatique PHP page 97

AgroParisTech, ufr d’informatique PHP page 98

PHP : histoire et état des lieux

Un peu d'histoire 1994 : création 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 : redéveloppement du coeur par 2 étudiants (Andi Gutmans et Zeev

Zuraski, Israëm) pour donner PHP (PHP: Hypertext Processor) 3.0. 2002 : 8 millions de sites basés sur PHP. 2004 : 15 millions de sites basés sur PHP.

Evolution du langage Au départ basé sur le langage Perl, PHP a été réécrit ensuite en

langage C. Le moteur a été réécrit plusieurs fois. D'abords procédural, le langage a évolué a partir de la version 4.0 pour

intégrer les technologies objet.

Principales caractéristiques Le moteur PHP s'intègre au serveur web Apache : il prend alors en

charge toutes les pages avec une extension .php. PHP est un langage interprété : il n'y a pas de phase de compilation et les

erreurs sont découvertes au moment de l'exécution. La syntaxe est très inspirée du langage C, tout en apportant beaucoup de

simplification, notamment dans la gestion des variables.

Remarque : dans le présent support, on n'aborde pas les caractéristiques objet de PHP ; le code décrit est compatible PHP 3.0 et versions ultérieures.

AgroParisTech, ufr d’informatique PHP page 99

PHP : principe de fonctionnement

Principe des applications web

Les applications web fonctionnent grâce à des échanges réseau entre un logiciel client (le navigateur web) et un logiciel serveur (le serveur web).

Ces échanges sont basés sur le protocole HTTP : le navigateur envoie une requête au serveur web et reçoit du contenu à afficher.

La navigation sur un site est constituée d'un ensemble de requêtes/réponses qui s'enchaînent.

Il y a 2 types de requêtes : les requête de type GET (barre d'URL et clic sur un lien) et les requêtes de type POST (validation de formulaire).

Apport de PHP Les pages HTML sont des pages de contenu statique stockées dans le

système de fichier du serveur. Les pages PHP contiennent du code HTML, mais aussi du code PHP qui

est exécuté sur le serveur au moment de la requête et produit du code HTML ; la page est dite dynamique, car le contenu final HTML renvoyé au navigateur peut changer selon le contexte.

PHP nécessite l'ajout et la configuration d'un module spécifique dans le serveur web Apache.

AgroParisTech, ufr d’informatique PHP page 100

NavigateurWeb

Serveur HTTPApache

+Module

PHP

Poste clientServeur

1 : Requete (GET ou POST)

2 : Réponse

Premier exemple de code (1 / 2)

Exemple simple<?php echo "<?xml vers ion=\ "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 première 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 d’informatique PHP page 101

Premier exemple de code (2 / 2)

Code HTML généré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 première page PHP</title> </head> <body> <div> Bonjour nous sommes le : O4-01-2006 </div> </body></html>

Le navigateur reçoit et interprète 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 système de fichier sans passer par une connexion HTTP sur un serveur de type Apache.

AgroParisTech, ufr d’informatique PHP page 102

Notions de base

Code PHP au sein d'une page HTML Le code PHP est inséré directement au sein d'une page contenant du

HTML. Le code PHP doit cependant être contenu dans des balises spéciales :

<?php ... ?> ou <? ... ?>. Du code HTML est produit grâce à l'instruction echo. On peut mettre plusieurs instructions au sein d'une même balise <? ?>. Une instruction est toujours terminée par un ;. <? echo $variable; ?> peut être condensé en <?= $variable ?>. Pour être reconnu par l'interpréteur PHP, le fichier doit porter l'extension

.php.

Syntaxe de base L'instruction echo permet de générer de l'affichage HTML au sein d'une

page. Les chaînes de caractères sont écrites entre "" : on doit faire précéder un

" d'un \ pour l'inclure au sein d'une chaîne. Les noms de variables commencent toujours par le caractère $. Les variables n'ont pas besoin d'être déclarées, ni d'être typées ; elles

sont créées implicitement lors de la première utilisation. Le langage fournit un certain nombre de fonction prédéfinies ; lors d'un

appel de fonction, les paramètres sont passés entre ( ) et séparés par des ,. Les commentaires sont écrits en commençant par // sur une ligne ou entre

/* et */ sur plusieurs lignes. Les accolades {} permettent de délimiter des blocs d'instructions.

Remarque : lorsqu'on respecte la norme XHTML, les caractères <? de la première ligne sont interprétés comme une balise PHP. Il faut donc obligatoirement générer cette première ligne avec une instruction PHP echo.

AgroParisTech, ufr d’informatique PHP page 103

TD P1

Structures de contrôlePHP propose toutes les structures de contrôle classiques.

Tests conditionnels<?

if (is_numeric($texte)) {echo "La variable contient un nombre";

}else {

echo "La variable contient du texte";}

?>

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

Schémas itératifs<? for ( $i = 1; $i <= 10 ; $i++) { echo $i . ' '; }

$i = 1;while ($i<=10) {

echo $i . ' '; $i++; }

foreach(range(1, 10) as $i){

?><?= $i ?>

<?}

?>

AgroParisTech, ufr d’informatique PHP page 104

TD P2

Interactions avec l'utilisateur (1 / 2)

Principe généralDans une application web, l'interaction avec l'utilisateur est essentiellement fondée sur la validation de formulaire HTML, qui provoque l'envoie de données vers le serveur et l'affichage de nouvelles informations en provenance de celui-ci.Des technologies telles que Javascript permettent la gestion d'événements, mais celle-ci reste locale au navigateur et donc limitée.

Formulaire : côté clientSoit 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">Prénom :</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 préciser dans la balise form le nom du fichier PHP qui traitera les données, ainsi que la méthode de transfert de ces données (POST conseillé).

Il est important de donner un nom à chaque élément du formulaire : ce nom permet ensuite de retrouver les valeurs associées saisies par l'utilisateur.

AgroParisTech, ufr d’informatique PHP page 105

Interactions avec l'utilisateur (2 / 2)

Formulaire : côté serveurLe formulaire précédent est traité par validation_formulaire.php :...

<body><div>

<? if (empty($_POST["nom"])

or empty($_POST["prenom"])) {echo "Vous devez saisir

un nom et un prénom !";} else {

$nom = $_POST["nom"];$prenom = $_POST["prenom"];echo "Bonjour $prenom $nom";

}?>

</div></body>

Enchaînement

1. Le navigateur rassemble les informations saisies dans le formulaire (nom et prénom) et les envoie par une méthode POST au serveur.

2. Le serveur interprèle validation_formulaire.php avec les données reçues et génère un flux HTML résultat renvoyé au navigateur.

AgroParisTech, ufr d’informatique PHP page 106

formulaire.php

validation_formulaire.php (résultat HTML)

Interprétation devalidation_formulaire.php

Formulaire validé par lui-même (1 / 2)

PrincipeDans l'exemple précédent, lorsque l'utilisateur s'est trompé ou s'il veut faire une nouvelle saisie, il soit revenir en arrière en utilisant la touche back du navigateur.Il est souvent plus judicieux d'afficher le formulaire et le résultat sur une même page :

lors du premier accès, la méthode GET est employée ; lors de la validation, la méthode POST est employée.

Exemple

AgroParisTech, ufr d’informatique PHP page 107

Formulaire validé par lui-même (2 / 2)...<body>

<div><?

if ($_SERVER["REQUEST_METHOD"] == "POST") {// on est appelé par la méthode POST, donc // en validation du formulaireif (empty($_POST["nom"])

or empty($_POST["prenom"])) {echo "Vous devez saisir un nom

et un prénom !";} 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">Prénom :</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>...

AgroParisTech, ufr d’informatique PHP page 108

TD P3

Tableaux

Exemples précédentsDans les précédents exemples de code, on a :

$_SERVER["REQUEST_METHOD"] $_POST["nom"] $_POST["prenom"]

$_SERVER et $_POST sont en fait des tableaux associatifs pré-remplis.

Tableaux associatifsUn tableau associatif permet de faire correspondre des valeurs à des clés :<?php

// Création d'un tableau de 3 éléments$tableau = array(1=>"rouge", 2=>"bleu", 3=>"jaune");// Ajout d'un élément à la fin du tableau$tableau[] = "vert";// Modification du 2ème élément$tableau[2] = "vert";// Affichage du 3ème élementecho $tableau[3];// Ajout d'un élément associé à "rien"$tableau["rien"] = "transparent";// affichage de tout tableau : // Array ( [1] => rouge [2] => vert ... ) print_r($tableau);// Parcours du tableauforeach ($tableau as $index => $couleur) {

echo "<br /> $index => $couleur";}// Effacement du 2ème élémentunset($tableau[2]);// Effacement de tout le tableauunset($tableau);

?>

AgroParisTech, ufr d’informatique PHP page 109

TD P4

Fonctions

Quelques fonctions prédéfiniesChaînes de caractères strlen($chaine) : longueur d'une chaîne

strpos($chaine, $car) : position d'un caractèrestrtolower($chaine) : conversion minusculesstrtoupper($chaine) : conversion majuscules

Dates getdate() : date et heuregettimeofday() : heure actuelledate($format, $date) : formatage

Tableaux count($tableau) : nombre d'élémentssort($tableau) : tri

Fonctions définies par l'utilisateurPHP permet de créer des fonctions :<?php

function factorielle($nombre) {$resultat = 1;for ( $i = 2; $i <= $nombre ; $i++) {

$resultat = $resultat * $i;}return $resultat;

}?>

On peut définir des fonctions dans des fichiers .php et les utiliser dans d'autres fichiers grâce à l'instruction include :<?php

include "fonctions.php";echo factorielle(5);

?>

AgroParisTech, ufr d’informatique PHP page 110

TD P5

Ressources

Installationhttp://www.easyphp.orghttp://www.eclipse.orghttp://www.phpeclipse.de

Développementhttp://www.php.net/manual/fr/http://www.phpfrance.orghttp://www.phpindex.comhttp://www.commentcamarche.net/php/phpintro.php3http://php.developpez.com

AgroParisTech, ufr d’informatique PHP page 111

AgroParisTech, ufr d’informatique PHP page 112

TD PHP

AgroParisTech, ufr d’informatique TD PHP page 113

AgroParisTech, ufr d’informatique TD PHP page 114

TD PHP 1Créer un nouveau projet pour distinguer les TD PHP des TD HTML.

En s'inspirant de l'exemple du cours, créer un fichier td1.php.

Lorsqu'on appelle l'URL correspondant au fichier dans un navigateur Web, on doit voir s'afficher :

• la date actuelle formatée en titre de niveau 1 ;• l'heure actuelle formatée 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 d’informatique TD PHP page 115

TD PHP 2Les schémas itératifs permettent notamment de générer du code HTML conséquent par programmation.

Il s'agit, dans un fichier td2.php, d'écrire 2 boucles imbriquées afin de générer un tableau contenant la table de multiplication des entiers de 1 à 10.

AgroParisTech, ufr d’informatique TD PHP page 116

TD PHP 3Il 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 (grâce à une itération). On vérifie également que la saisie de l'utilisateur est correcte (nombre entier).

AgroParisTech, ufr d’informatique TD PHP page 117

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

On utilise pour cela 2 tableaux associatifs :$nom_devise = array(

"FRF" => "franc français",

"DEM" => "mark allemand",

"ESP" => "peseta espagnole",

"BEF" => "franc belge",

"GRD" => "drachme grecque",

"IEP" => "livre irlandaise",

"ITL" => "lire italienne",

"NLG" => "florin

néerlandais",

);

$un_euro = array(

"FRF" => 6.55957,

"DEM" => 1.95583,

"ESP" => 166.386,

"BEF" => 40.3399,

"GRD" => 340.75,

"IEP" => 0.787564,

"ITL" => 1936.27,

"NLG" => 2.20371,

);

Permet de générer la liste déroulante grâce à une itération. L'attribut value de chaque option est égal au nom court de la devise en 3 lettres.

Permet de réaliser la conversion lors de la validation du formulaire.

AgroParisTech, ufr d’informatique TD PHP page 118

TD PHP 5Il 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 sélectionner une forme pour obtenir l'aire correspondante.

On vérifiera également les données saisies par l'utilisateur.

AgroParisTech, ufr d’informatique TD PHP page 119

AgroParisTech, ufr d’informatique TD PHP page 120

Organiser les données du Système d'Information

AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 121

AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 122

AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 123

Organiser les donnéesdu système d’information

Définir l’architecture du système d’information, ce n’est pas seulement concevoir les composants et organiser leurs interactions.C’est aussi spécifier les informations qui seront exploitées, définir leurs liens et leur organisation,leur accessibilité et leur protection : A partir d’un cahier des charges, faire l’inventaire des

données et des relations Concevoir le modèle de données Choisir et mettre en œuvre un SGBD Administrer la base de données

Étudions la problématique de l’organisation des données à travers un exemple

AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 124

GIE agricole : cahier des charges (simplifié)● Des agriculteurs possèdent des parcelles● Une parcelle a un et un seul propriétaire

un agriculteur possède une ou plusieurs parcelles● Pour exploiter ces parcelles, les agriculteurs font

appel à un GIE. Celui-ci fournit de la main d’œuvre d’appoint, à la journée.

● Cette main d’œuvre est assurée par des employés 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 employés mensuellement, en

fonction de leurs interventions.● Chaque intervention concerne une parcelle, un

employé et un nombre de jours.● Le système d’information désiré doit pouvoir

fournir :● la liste des agriculteurs,● la liste des employés● la liste des interventions par employé● la liste des interventions par agriculteur

AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 125

Inventaire des données (simplifié)● nom et prénom

(agriculteur)● nom et prénom

(employé GIE)● parcelle : nom,

superficie, lieu et propriétaire

● employé : numéro insee et salaire journalier

● agriculteur : lieu de résidence

● interventions : employé, parcelle, date de début, nombre de jours

Quelle structureQuelle structurepour représenter pour représenter ces données ?ces données ?

Représenter les agriculteurs● nom et prénom nom et prénom

(agriculteur)(agriculteur)● nom et prénom

(employé GIE)● parcelle : nom,

superficie, lieu et propriétaire

● employé : numéro insee et salaire journalier

● agriculteur : agriculteur : lieu de résidencelieu de résidence

• Disposition en table• Une ligne = un agriculteur

= un enregistrement de la table• Question  : comment distinguer les deux

Christian Martoz ?• Plus généralement, est-il acceptable

d’utiliser la résidence pour distinguer des homonymes ?

AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 126

Une clé primaire pour la table● Une colonne particulière

permet d’identifier de manière unique chaque agriculteur

● On l’appelle la clé la clé primaireprimaire de la table

● Ici, cette clé est une valeur numérique que l’on augmente (incrémente) à chaque ajout d’un nouvel agriculteur

La table agriculteur a quatre champs● Chaque champ représente

une propriété de l’informa-tion "Agriculteur" et il est associé à une colonne

● Chaque champ a un type qui caractérise les valeurs qu’il peut prendre

● Le champ AGR_IDF est "auto-incrémenté" et c’est la clé primaire de la table.

AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 127

Récapitulons - table● La table est l’unité de stockage dans une base

de données● Une table est associée à une entité du modèle

de données. Elle répertorie toutes les apparitions (occurrences) de cette entité.

● Chaque ligne (enregistrement) de la table représente une occurrence de l’entité

● Chaque propriété de l’entité est représentée par une colonne (champ)

Récapitulons – clé primaire● Dans chaque table, on distingue une information

particulière, la clé primairela clé primaire, qui identifie de manière unique chaque occurrence :il ne peut y avoir deux valeurs identiques de clé il ne peut y avoir deux valeurs identiques de clé primaire dans la tableprimaire dans la table.

● Attention, la clé primairen’est pas forcément limitée à une seule colonne

● Par exemple, quelle est la clé primaire de la table distance_villes ?

AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 128

Et maintenant, les parcelles● Une parcelle a

un nom, elle estsituée en un lieuprécis et elle aune superficie

Une parcelle a aussi un propriétaire  :Une parcelle a aussi un propriétaire  :comment l’indiquer dans la table des comment l’indiquer dans la table des parcelles ?parcelles ?

Désigner le propriétaire● Une parcelle a

un nom, elle estsituée en un lieuprécis et elle aune superficie

● Le champ PAR_AGR_IDF désigne le propriétaire

● Il définit une relation entre les deux tables

AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 129

Une relation un à plusieurs● UnUn agriculteur peut

posséder plusieursplusieurs parcellesUne parcelle a un et un seul propriétaire

● La relation entre les tables est une relationrelation un à plusieursun à plusieurs. Elle est matérialisée, du côté « plusieurs », par une clé étrangèreclé étrangère

1

n

La table employe● Un employé a  :

un numéro de sécurité sociale, un nom, un prénom et un tarif journalier

● Faut-il une clé primaire auto-incrémentée pour cette table ?

AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 130

Quelle relation entre les tables parcelle et employe ?● Un employé peut être amené à travailler

sur plusieurs parcelles● Sur une même parcelle, peuvent travailler

plusieurs employés (simultanément ou l’un après l’autre)

● C’est une relation plusieurs à plusieursplusieurs à plusieurs :on la représente par une nouvelle table

Une relation plusieurs à plusieurs représentée par la table intervention

1

n1

n

L’employé Grandet a travaillé à la parcelle du pré au vent, 5 jours à partir du 5 juillet 2004

AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 131

Exercice : concevoir un modèle de donnéesBase de données cinématographique :Base de données cinématographique :● Un film a un titre, un budget de production, des

recettes ; il est joué par des acteurs ; il est réalisé par un metteur en scène

● Chaque acteur jouant dans un film touche un cachet ; il a une année de naissance et éventuellement de décès ; il parle une langue maternelle

● Chaque réalisateur est originaire d’un pays et a une année de naissance et éventuellement de décès

● Concevez le modèle de données !

Consulter et mettre à jour une base de données● SQL (Structured Query Language) est le

langage qui permet de manipuler une base de données relationnelles

● Une instruction (ou requête) SQL permet de :● consulter (SELECT)● modifier (UPDATE)● ajouter (INSERT)● supprimer (DELETE)

● En PHP, la fonction mysql_query permet de soumettre une requête SQL au SGBD mySQL

AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 132

Consultation (1)● select * from agriculteurselect * from agriculteur

le résultat est une table temporaire

● select agr_nom, agr_prn select agr_nom, agr_prn from agriculteur from agriculteur where agr_res = 'where agr_res = 'ARITHARITH''

Comment répondre à la question : quelles sont les résidences des agriculteurs ?

Consultation (2)● résidences des

agriculteurs ?select agr_res select agr_res from agriculteur from agriculteur

● comment …● obtenir un résultat

ordonné ? ● supprimer les doublons ?

select agr_res from agriculteurselect agr_res from agriculteurorder by agr_res order by agr_res

select select distinctdistinct agr_res from agr_res from agriculteuragriculteur order by agr_resorder by agr_res

AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 133

Consultation (3)● Quels sont les propriétaires de

parcelles ?select agr_nom, par_nomselect agr_nom, par_nomfrom agriculteur, parcelle from agriculteur, parcelle where agr_idf = par_agr_idfwhere agr_idf = par_agr_idf

● Nombre de parcelles pour chaque propriétaire ?select agr_nom, count(par_nom)count(par_nom) from agriculteur, parcelle where agr_idf = par_agr_idf group by agr_nom group by agr_nom

Pour approfondir et pratiquer● http://www.commentcamarche.net/sql/sqlintro.php3

● L’outil PhpMyAdmin accessible via easyPHP

(clic droit sur l’icôneeasyPHP, puis choix de « Administration »)

AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 134

TD Base de Données

AgroParisTech, ufr d’informatique TD Base de Données page 135

AgroParisTech, ufr d’informatique TD Base de Données page 136

Bases de données : concepts

Limites rencontréesLorsqu'on manipule des variables en informatiques, les données associées sont stockées dans la mémoire vive (RAM) de l'ordinateur. Ce mode de fonctionnement présente cependant des limites : les données n'existent que pendant le temps de fonctionnement de

l'application : en cas de redémarrage de l'application, tout est perdu ; la mémoire vive est très limitée en taille par rapport à l'espace disque ; on ne peut pas partager les données entre différentes applications ; etc.

Stocker des données dans des fichiers permet de pallier certains de ces inconvénients, cependant : il faut définir à chaque fois comment on stocke les données, et

l'expliquer éventuellement aux concepteurs d'autres applications ; il est difficile de représenter des données complexes (de type 1 à

plusieurs par exemple) ; pour retrouver une donnée particulière, on est obligé de parcourir une

bonne partie du fichier ; les modifications concurrentes posent problème.

Invention des bases de donnéesC'est pour cela qu'ont été inventées les bases de données, qui sont des systèmes offrant des fonctionnalités avancées pour la gestion d'information sur des supports de stockage persistants.Il y a différentes familles de bases de données, distinctes selon la manière dont les données sont stockées et dont elles communiquent avec des programmes.Les bases de données les plus répandues sont les bases de données relationnelles, apparues au début des années 1980.

AgroParisTech, ufr d’informatique TD Base de Données page 137

Bases de données relationnellesLes bases de données relationnelles offrent un haut niveau d'abstraction pour le stockage de données sur disque.Elles offrent notamment : un formatage et un typage des données sous forme de colonnes au sein d'une

table ; un regroupement de plusieurs tables au sein d'une base ; une indexation des données pour les retrouver rapidement ; la possibilité de définir des relations entre des données issues de plusieurs

tables (par exemple : plusieurs adresses pour une même personne) ; des possibilités de connexions depuis différents langages de programmation

: API (Application Programming Interface) un langage d'interrogation et de modification normalisé : SQL (Structured

Query Language).

BaseTable

Index

Enregistrements

RelationAPI

Requete ou mise à jour SQL

Réponse

AgroParisTech, ufr d’informatique TD Base de Données page 138

Introduction à MySQL

Logiciels de base de donnéesIl existe différentes implémentations de bases de données :• bases de données commerciales :

OracleIBM DB2Microsoft SQLServerMicrosoft Access

• bases de données Open Source :MySQLPostgreSQL

MySQLBase développée par la société MySQL AB : http://www.mysql.com

MySQL est très utilisée en conjonction avec PHP pour produire des sites web dynamiques.MySQL a la réputation d'être une base de données simple à utiliser, performante et très robuste.PhpMyAdmin est une application PHP développée pour administrer une base MySQL à distance via un simple navigateur web : http://www.phpmyadmin.net. Cette application est intégrée à 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 d’informatique TD Base de Données page 139

TD Base de données 1

Objectifs de l'exerciceIl s'agit de mettre en pratique les principes des bases de données sur un exemple. Tout d'abord il faudra créer un schéma de données (les différentes tables et leur relations) avec des exemples de données, puis il faudra trouver les requêtes appropriées pour réaliser des interrogations sur ce schéma.Nous utiliserons pour ce faire MySQL et PHPMyAdmin ; ces 2 outils sont inclus dans la distribution EaxyPHP installée sur les postes et téléchargeable gratuitement sur : http://www.easyphp.org

Outil PhpMyAdminOn peut utiliser PhpMyAdmin en faisant un clic droit sur l'icône EasyPHP en bas à droite de l'écran et en choisissant "Administration" puis "Gestion BDD", ou plus directement, lorsque EasyPHP est démarré, en tapant dans un navigateur l'adresse http://localhost/mysql/.

AgroParisTech, ufr d’informatique TD Base de Données page 140

TD Base de données 1

Sujet de l'exerciceSur de nombreux canaux français, la navigation commerciale a laissé la place à la navigation de plaisance. Ainsi la société Starboat s'est fait une réputation dans la location de pénichettes aux touristes. Pour améliorer la productivité, elle a décidé d'équiper chacune de ses bases d'un logiciel de gestion adapté à leurs activité. Dans un premier temps, il faut concevoir le modèle de données de ce logiciel. Ce modèle sera conçu au fur et à mesure de manière interactive en utilisant PhpMyAdmin, sachant que lorsqu'on se trompe, cet outil permet facilement d'effectuer des rectifications.On commence par créer une base Starboat.

Les bateauxOn crée une première table Bateau dans notre base sachant que chaque bateau :

est bien entendu identifié par une clé primaire unique ; est baptisé ; correspond à un type de modèle (classique, terrasse, ou flying bridge) ; a été terminée à une date donnée ; a navigué un certain nombre d'heures.

Une fois cette première table créée, on y insère un certain nombre de données d'exemple pour valider les champs et leur type. On considère par exemple une base avec 10 bateaux.

AgroParisTech, ufr d’informatique TD Base de Données page 141

TD Base de données 1

Les modèles de bateau : complexificationFinalement, on ne veut pas se contenter d'avoir le nom du type de modèle, mais on souhaite associer à chaque modèle des informations complémentaires :

puissance du moteur en CV ; présence ou non d'une prise électrique ; nombre de couchages.

On crée donc une nouvelle table Modele pour prendre en compte ces caractéristiques en plus du nom du modèle. On saisit des données d'exemple pour les 3 types de modèle.

Au lieu de référencer directement le nom du modèle, la table Bateau est alors modifiée pour que la référence au modèle se fasse sous la forme d'une association vers la table Modele.

Les révisionsChaque bateau est révisé régulièrement par un technicien (la base exemple compte actuellement 2 techniciens). A chaque révision, le technicien devra remplir l'application en indiquant :

qui a réalisé la révision ; la date ; le nombre d'heures de navigation du bateau au moment de la révision ; les interventions réalisées, sous forme de texte libre.

AgroParisTech, ufr d’informatique TD Base de Données page 142

TD Base de données 2

Les locationsToutes les locations sont enregistrées 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 effectuées ; le montant versé au titre des dommages infligés au bateau ; un commentaire libre.

AgroParisTech, ufr d’informatique TD Base de Données page 143

Le langage SQL : SELECT

IntroductionSQL signifie Structured Query Langage.La dernière norme du langage date de 1992 : on parle de SQL/92 ou SQL 2.SQL est insensible à la casse (différence minuscule/majuscule).

Syntaxe du SELECTL'ordre select permet de retrouver des données dans une base en spécifiant les champs que l'on souhaite, ainsi que des critères de recherche.

Syntaxe générale :SELECT COL1,COL2,COL3 FROM TABLE1,TABLE2

WHERE COL1=COL2 AND COL3 LIKE 'A%'

ORDER BY COL1

Seule la première ligne est obligatoire ! Elle permet d'indiquer les colonnes des valeurs qui nous intéressent dans différentes tables.

La deuxième ligne permet de restreindre l'ensemble ramené sur certaines conditions qui peuvent concernées les valeurs de certains champs.

La troisième ligne permet de contrôler l'ordre dans lequel les enregistrements sont ramenés.

Valeurs et typesSQL permet de manipuler de champs de type numérique, chaîne de caractères et dates.Les chaînes de caractères sont à mettre entre ' et '.% permet de remplacer une partie de chaîne de caractères.

AgroParisTech, ufr d’informatique TD Base de Données page 144

TD Base de données 2Une fois le schéma terminé et complété avec un certain nombre de données d'exemple, on écrira un certain nombre de requêtes SQL de type SELECT pour réaliser les affichages suivants :

la liste des bateaux ; la liste des bateaux classés par ordre alphabétique ; la liste des bateaux accompagnés des informations correspondant à leur

modèle et classés par modèle ; 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 révisée ; 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 d’informatique TD Base de Données page 145

AgroParisTech, ufr d’informatique TD Base de Données page 146

Gestion de projet

AgroParisTech, ufr d’informatique Gestion de projet page 147

AgroParisTech, ufr d’informatique Gestion de projet page 148

AgroParisTech, ufr d’informatique Gestion de projet page 149

Gestion de projet

AgroParisTech, uer d’informatique

Sommaire● Un projet, c'est quoi ?● Les grands rôles dans un projet● Les phases● Méthodologie et documents● Chiffrage

AgroParisTech, ufr d’informatique Gestion de projet page 150

Sommaire● Un projet, c'est quoi ?Un projet, c'est quoi ?● Les grands rôles dans un projet● Les phases● Méthodologie et documents● Chiffrage

Un projet, c'est ...● Définition simple : intention, plan à réaliser● Limité dans le temps : un début et une fin● Implique différentes compétences :

notion d'équipe projet

AgroParisTech, ufr d’informatique Gestion de projet page 151

Un projet, ça implique...● De la réalisation, mais aussi..● De la préparation● 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 d’informatique Gestion de projet page 152

Un projet ça coûte● Budget lié au ROI :

● Plan budgétaire● Risques

● Contractualisation

Sommaire● Un projet, c'est quoi ?● Les grands rôles dans un projetLes grands rôles dans un projet● Les phases● Méthodologie et documents● Chiffrage

AgroParisTech, ufr d’informatique Gestion de projet page 153

La MOA● Maîtrise d'Ouvrage : terme franco-français● Il s'agit de celui qui paye :

● Demandeur● Donneur d'ordre● Contractant

La MOE● Maîtrise d'oeuvre● Il sagit de celui qui réalise :

● Organise● Réalise● Livre● Facture● Contractant

AgroParisTech, ufr d’informatique Gestion de projet page 154

Pleins d'autres acteurs● Les juristes● Les sous-traitants● Les testeurs● Les exploitants

Sommaire● Un projet, c'est quoi ?● Les grands rôles dans un projet● Les phasesLes phases● Méthodologie et documents● Chiffrage

AgroParisTech, ufr d’informatique Gestion de projet page 155

Le cycle en V● Cliquez pour ajouter un plan

Cahier des charges

Analyse

Conception

Codage

Tests unitaires

Tests de qualification et d ’intégration

Tests utilisateurs - pré-production

AgroParisTech, ufr d’informatique Gestion de projet page 156

Sommaire● Un projet, c'est quoi ?● Les grands rôles dans un projet● Les phases● Méthodologie et documentsMéthodologie et documents● Chiffrage

AgroParisTech, ufr d’informatique Gestion de projet page 157

Notion de Jalons● Il est important de savoir où on va● Il faut décomposer les grandes phases du

projets en étapes● Il faut répartir le travail

Plan documentaire● Modèles de document :

● Cahier des charges● Analyse● Conception● Architecture● Tests● Livraison● Intallation● Exploitation

AgroParisTech, ufr d’informatique Gestion de projet page 158

Sommaire● Un projet, c'est quoi ?● Les grands rôles dans un projet● Les phases● Méthodologie et documents● ChiffrageChiffrage

Plusieurs méthodes● Chiffrage macroscopique● Chiffrage par comptage des instructions● Chiffrage par points de fonctions● Chiffrage par ration● Chiffrage commercial● Chiffrage expert

AgroParisTech, ufr d’informatique Gestion de projet page 159

Gestion de l'humain● Loi de Parkinson : « work expands to fill

the time available for its completion » ;● Syndrôme de l'étudiant...

AgroParisTech, ufr d’informatique Gestion de projet page 160

Projet final : un intranet dynamique

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 161

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 162

Démarrage du projet

But du projetLes différentes étapes décrites dans ce document consistent à réaliser un intranet dynamique en PHP. Chaque élève suivra le cheminement proposé pour réaliser son propre intranet des élèves, avec un certain degré de liberté quant aux choix des attributs des styles, du moment que le travail réalisé reste conforme à l'esprit de l'exercice.L'intranet disposera des fonctionnalités suivantes :

− protection d'accès par identification ;− gestion d'annuaire :

modification de ses informations personnelles ;recherche selon certains critères.

− gestion simple de covoiturage.

Démarrage du projetCréer un sous-répertoire intranet dans votre répertoire N:\www.Lancer l'outil de développement et créer un nouveau projet nommé intranet dans votre répertoire N:\www :

N:\www\intranet\

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 163

Projet PHP : en-tête, pages dynamiques

Il s'agit tout d'abord de réaliser une en-tête commune à toutes les pages de l'intranet, sous forme d'une feuille de style et d'un fichier PHP. Cette en-tête comprend :• un logo (pas forcément vintage comme dans les copies d'écran) ;• un titre ;• une barre de menu, comprenant les items suivants :

Annuaire Covoiturage Mes informations Déconnexion

Dans un premier temps, deux fichiers sont donc ajoutés au projet :• N:\www\intranet\intranet.css• N:\www\intranet\entete.inc.

Ensuite, créer dans l'environnement de développement les fichiers correspondants aux différentes options du menu, avec l'en-tête et un contenu vide dans un premier temps :• N:\www\intranet\annuaire.php• N:\www\intranet\covoiturage.php• N:\www\intranet\mesinformations.php• N:\www\intranet\deconnexion.php

Remarque : l'instruction PHP include permet d'inclure un fichier PHP

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 164

Projet PHP : premier formulaire

Nous commençons par créer la page de recherche dans l'annuaire : N:\www\intranet\annuaire.php

Il s'agit de créer un formulaire contenant au moins 2 champs de saisie : le nom : identifié nom dans le formulaire, le prénom : identifié par prenom dans le formulaire.

La validation du formulaire renvoie vers la même page annuaire.php, celle-ci recherche donc si des valeurs ont été transmises par le formulaire. Si ce n'est pas le cas, un message d'erreur est affiché à l'utilisateur, l'invitant à saisir des valeurs pour les champs :

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 165

Projet PHP : base de données (1 / 3)

Nous allons maintenant créer une base de données pour notre Intranet, qui contiendra dans un premier temps une table des élèves.

Etape 1 : création de la baseLancer un navigateur, et se connecter à l'adresse suivante : http://localhost/home/Cliquer ensuite sur le lien "Gestion BDD"On arrive alors sur l'application d'administration de MySQL, ce qui nous permet de créer une nouvelle base intranet :

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 166

Projet PHP : base de données (2 / 3)

Etape 2 : création de la table des élèvesCréer une nouvelle table ELV contenant 8 champs :

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 167

Projet PHP : base de données (3 / 3)

Etape 3 : définition des champsOn crée les champs suivants :

Nom Type Null possible Clé primaire Index Commentaire

ELVIDF INT X Clé primaire, autoincrémentée

ELVNOM VARCHAR(50) X Nom

ELVPRN VARCHAR(50) X Prénom

ELVLOG VARCHAR(20) X Login

ELVMDP VARCHAR(20) Mot de passe

ELVNSS DATE X Date de naissance

ELVPTB VARCHAR(20) X Numéro de portable

ELVMEL VARCHAR(50) X Adresse e-mail

Une fois la table créée, cliquer sur le menu Ins reré pour insérer des données d'exemple.

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 168

Projet PHP : connexion à la base

Il s'agit maintenant de retrouver les enregistrements de la base de données correspondant aux valeurs saisies dans le formulaire.Pour cela, nous commencerons par créer un nouveau fichier qui contiendra toutes les opérations effectuées sur la base de données, regroupées au sein de fonctions. Cette manière de faire permet de séparer l'affichage des opérations en base de données, ce qui permet d'avoir un site mieux organisé et plus facile à maintenir.

Créer le fichier fonctions.inc.php (qui contiendra toutes les fonctions utilisées dans les différentes page du site) dans le projet, avec le contenu suivant :

// Les informations de configurationdefine("bd_serveur","localhost");define("bd_utilisateur","root");define("bd_motdepasse","");define("bd_base","intranet");

// Ouverture de la connexionfunction ouvre_connexion() { mysql_connect(bd_serveur, bd_utilisateur, bd_motdepasse) or die(mysql_error()); mysql_select_db(bd_base) or die(mysql_error());}

//Fermeture de la connexionfunction ferme_connexion() { mysql_close();}

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 169

Projet PHP : extraction de données

Suite du fichier fonctions.inc.php, avec la fonction qui permet de retrouver une liste d'élèves avec une partie de leur nom et/ou de leur prénom :

// Retrouve tous les élèves correspondant à// un ensemble nom, prenomfunction get_eleves($nom, $prenom) { $nom = "%${nom}%"; $prenom = "%${prenom}%";

// On construit et on lance une requête $resultat = mysql_query("select elvidf, elvnom, elvprn from elv where elvnom like '${nom}' and elvprn like '${prenom}'") or die(mysql_error());

// On construit un tableau de tableaux // avec les élèves qui correspondent

$eleves = array();$compteur = 0;

// On parcourt les enregistrements while ($ligne = mysql_fetch_row($resultat)) { $eleve = array(); $eleve["id"] = $ligne[0]; $eleve["nom"] = $ligne[1]; $eleve["prenom"] = $ligne[2]; // On ajoute les élèves dans un tableau $eleves[$compteur] = $eleve;

$compteur++; } return $eleves;}

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 170

Projet PHP : point architecture

Notre application fonctionnera selon le schéma suivant :

Enchaînement des opérations :1. Envoi d'une requête au serveur lors de la validation du formulaire ;

2. Récupération des valeurs des paramètres ;

3. Ouverture d'une connexion sur la base de données ;

4. Récupération de la liste d'élèves correspondant aux paramètres ;

5. Fermeture de la connexion sur la base de données ;

6. Génération de la nouvelle page dynamique avec le formulaire et la liste ;

7. Envoi de la page au navigateur pour affichage.

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 171

Projet PHP : affichage de la liste

On utilise maintenant la fonction get_eleves pour afficher dans un tableau la liste des élèves qui correspondent aux données saisies dans le formulaire :

Ensuite, lorsqu'on clique sur un nom du tableau, ses informations détaillées s'affichent, grace à une fonction get_eleve qui prend en paramètre un identifiant d'élève :

Remarque : On peut passer un paramètre directement dans une URL de la manière suivante : annuaire.php?idEleve=2 (2 étant le numéro de l'élève)

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 172

Projet PHP : sécurisation du site

On souhaite désormais protéger notre site contre les intrusions, en obligeant l'utilisateur à s'identifier avant de pouvoir accéder à une page.On crée donc une page index.php avec un formulaire permettant de saisir un login et un mot de passe :

Le formulaire envoie ses paramètres à la même page index.php. Celle-ci vérifie que le login de l'utilisateur existe et que le bon mot de passe a été saisi, grâce à une nouvelle fonction à développer dans fonctions.inc.php : function authentification($login, $motdepasse)

Cette fonction renvoie 0 si l'authentification n'est pas bonne, sinon elle renvoie le numéro d'identifiant de l'utilisateur.

Si l'authentification est correcte, on redirige l'utilisateur vers la page annuaire.php avec la commande suivante :header("Location: annuaire.php");

Lorsque l'utilisateur arrive sur la page d'accueil, il n'est redirigé vers la page d'annuaire que s'il s'est logué correctement. Par contre, pour l'instant, rien n'empêche un utilisateur d'arriver directement à la page annuaire.php en tapant directement son URL dans la barre d'adresse du navigateur.

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 173

Projet PHP : notion de session

Par nature, le dialogue entre un navigateur web et un serveur web est déconnecté, 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 déroulent de la manière suivante :1. Le navigateur initialise une connexion réseau avec le serveur web ;2. Le navigateur transmet l'URL de la page demandée ;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 mécanisme des sessions permet de suivre un utilisateur par l'intermédiaire de cookies selon le schéma suivant :

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 174

Projet PHP : gestion de session

PHP permet d'initialiser la gestion d'une session, et d'y associer des informations différentes 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"] Arrêter la gestion des sessions :

session_unset()session_destroy()

Les sessions permettent de conserver des informations entre plusieurs pages PHP pour la navigation d'un même utilisateur sur le site.

En effet, une variable d'un fichier PHP n'existe par contre que le temps d'exécution de ce fichier, c'est-à-dire que le temps de génération de la page web correspondante.

Typiquement, après identification d'un utilisateur : on place l'identifiant de l'utilisateur connecté dans la session ; au début de chaque fichier PHP, on vérifie 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 détruit la session lorsque l'utilisateur décide de se déconnecter.

Les sessions sont associées à un timeout, c'est-à-dire qu'elles expirent automatiquement au bout d'un certain temps d'inactivité de l'utilisateur.

Nous pouvons maintenant finaliser la sécurité de notre intranet sur la base de ces informations.

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 175

Le langage SQL : INSERT, UPDATE, DELETE

Syntaxe INSERTL'ordre SQL insert permet d'insérer des enregistrements dans une table.

Syntaxe générale :INSERT INTO TABLE(COL1,COL2,COL3) VALUES(VAL1,VAL2,VAL3)

L'exécution de cet ordre renvoie le nombre d'enregistrements affectés, c'est-à-dire 1 normalement.

Syntaxe UPDATEL'ordre SQL update permet de modifier des enregistrements déjà présents dans une table.

Syntaxe générale :UPDATE TABLE SET COL1=VAL1, COL2=VAL2 WHERE COL3=VAL3

L'exécution de cet ordre renvoie le nombre d'enregistrements affectés par la modification.

Syntaxe DELETEL'ordre SQL delete permet de supprimer des enregistrements présents dans une table.

Syntaxe générale :DELETE FROM TABLE WHERE COL1=VAL1

L'exécution de cet ordre renvoie le nombre d'enregistrements affectés par la suppression.

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 176

Projet PHP : mise à jour de la base

On souhaite maintenant compléter la page mesinformations.php afin de permettre à l'utilisateur connecté de modifier les informations qui le concernent :

On écrit donc une nouvelle fonction modifie_eleve dans fonctions.inc.php, qui prend en paramètre un tableau contenant toutes les informations sur un élève et qui contient notamment une instruction analogue à celle-ci (mais sur une seule ligne !) :

mysql_query("update elv set elvidf=${id}, elvnom='${nom}', elvprn='${prenom}', elvnss='${naissance}', elvptb='${portable}', elvmel='${mail}' where elvidf=${id}");

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 177

Projet PHP : gestion des adresses

On souhaite maintenant associer des adresses (étudiante et chez les parents) à chaque élève pour compléter ses informations.

On a donc une relation de type "un à plusieurs" entre la table ELV et la table ADR. Cette relation est matérialisée par le champ ADRELVIDF qui joue le rôle de "clé étrangère" : il indique à quel élève est rattachée une adresse.

Les champs soulignés constituent la clé primaire d'une table.Ainsi, un élève est identifié de manière unique par la valeur du champs ELVIDF et une adresse par la combinaison des valeur des champs ADRELVIDF et ADRNUM (numéro de l'adresse : 1 pour l'adresse personnelle, 2 pour l'adresse chez les parents).

Nous pouvons maibtenant créer la nouvelle table ADR dans la base MySQL.

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 178

Projet PHP : formulaire complexe

On complète le formulaire mesinformations.php pour ajouter la prise en compte des deux adresses de chaque élève :

On considère que les 2 enregistrements de la table ADR ne sont pas créés au départ pour chaque élève. Ceux-ci ne sont créés que lorsque l'élève a validé pour la première fois le formulaire précédent.On crée donc une fonction modifie_adresse dans fonctions.inc.php, qui est appelée après modifie_eleve, lors de la validation du formulaire dans mesinformations.php, et qui va d'abord tester si une adresse existe ou pas déjà en base pour décider d'exécuter un ordre SQL UPDATE ou un ordre SQL INSERT.

Ensuite, on complète aussi la page annuaire.php pour faire afficher également les adresses de l'élève sélectionné.

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 179

Projet PHP : covoiturage

On complète désormais la page covoiturage.php pour ajouter une fonctionnalité de gestion de covoiturage à notre intranet :

Par défaut, la page de covoiturage propose 2 formulaires : un formulaire pour rechercher un covoiturage ; un formulaire pour proposer un covoiturage.

Il faut donc : créer les nouvelles tables nécessaires dans la base ; créer les nouvelles fonctions nécessaires dans fonctions.inc.php ; implémenter la gestion des formulaires.

Indication : la relation entre un élève et un covoiturage proposé est de type "un à plusieurs" ; par contre lorsqu'un élève est inscrit dans un covoiturage proposé par un autre élève, on a une relation "plusieurs à plusieurs" qui se concrétise par une table intermédiaire spécifique.

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 180

Projet PHP : écrans du covoiturage

Formulaire d'inscription à un covoiturage

Liste des covoiturages en cours

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 181

Ressources

PHPhttp://www.phpfrance.comhttp://www.easyphp.org/http://www.php.net/http://www.commentcamarche.net

MYSQLhttp://www.mysql.com

Covoituragehttp://www.123envoiture.comhttp://www.easycovoiturage.com/http://www.covoiturage-france.fr/

AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 182