Post on 09-May-2018
AgroParisTech Grignon 1A
SYSTEME D’INFORMATION
MMIP - UFR d'informatiqueufr.informatique@agroparistech.fr
Support rédigé par David DOUSSOT : doussot@agroparistech.fr
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 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.
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:webmaster@agroparistech.fr
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
Prise en main de l'outil de développement
AgroParisTech, ufr d’informatiquePrise en main de l'outil de développement page 57
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 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
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 !
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
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
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 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 »)
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 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...
Projet final : un intranet dynamique
AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 161
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