TD PHP
publicité
AgroParisTech Grignon 1A SYSTEME D’INFORMATION MMIP - UFR d'informatique [email protected] Support rédigé par David DOUSSOT : [email protected] SOMMAIRE Système d'Information : Présentation générale...................................... 5 Architecture, technologies, organisation......................................... 8 Conception et réalisation............................................................... 15 Profils des métiers......................................................................... 17 Etude sommaire d'une technologie............................................... 19 Client HTML.......................................................................................... 25 Le navigateur HTML...................................................................... 27 URL : Uniform Ressource Locator................................................ 29 HTML, Hyper Text Markup Language........................................... 30 HTML : premier exemple............................................................... 31 Normes et outils............................................................................ 32 La syntaxe HTML : balises............................................................ 33 L'interprétation des pages HTML.................................................. 34 Le document HTML minimal......................................................... 35 Balises de mise en page............................................................... 37 Mise en forme, attributs standards................................................ 38 Les listes....................................................................................... 39 Les styles...................................................................................... 40 Les feuilles de style....................................................................... 41 Feuille de style : exemple.............................................................. 43 Feuille de style : fichier HTML....................................................... 44 Feuille de style : fichier CSS......................................................... 45 Les images.................................................................................... 46 Ancres et liens hypertextes........................................................... 47 Les tableaux.................................................................................. 49 Scinder une page en blocs............................................................ 52 Les formulaires HTML................................................................... 53 Les balises <form></form>........................................................... 54 Les contrôles graphiques HTML................................................... 55 AgroParisTech, ufr d’informatique Sommaire page 1 Prise en main de l'outil de développement........................................... 57 TD HTML........................................................................................... ... 63 TD HTML 1................................................................................... 64 TD HTML 2................................................................................... 66 TD HTML 3................................................................................... 67 TD HTML 4................................................................................... 68 TD HTML 5................................................................................... 71 TD HTML 6................................................................................... 72 Programmation : principes de base.................................................. ... 73 Ordinateur : architecture et codage............................................... 75 Langages de programmation........................................................ 79 Types et variables......................................................................... 82 Instructions.................................................................................... 85 Branchements conditionnels......................................................... 87 Schémas itératifs........................................................................... 89 Procédures et fonctions................................................................ 93 PHP................................................................................................... ... 97 PHP : histoire et état des lieux...................................................... 99 PHP : principe de fonctionnement...............................................100 Premier exemple de code........................................................... 101 Notions de base.......................................................................... 103 Structures de contrôle................................................................. 104 Interactions avec l'utilisateur....................................................... 105 Formulaire validé par lui-même................................................... 107 Tableaux..................................................................................... 109 Fonctions..................................................................................... 110 Ressources................................................................................. 111 AgroParisTech, ufr d’informatique Sommaire page 2 TD PHP............................................................................................... 113 TD PHP 1.................................................................................... 115 TD PHP 2.................................................................................... 116 TD PHP 3.................................................................................... 117 TD PHP 4.................................................................................... 118 TD PHP 5.................................................................................... 119 Organiser les données du Système d'Information.............................. 121 TD Base de données.......................................................................... 135 Bases de données : concepts..................................................... 137 Bases de données relationnelles................................................ 138 Introduction à MySQL..................................................................139 TD Base de données 1............................................................... 140 TD Base de données 2............................................................... 143 Le langage SQL : SELECT......................................................... 144 Gestion de projet................................................................................. 147 Un projet, c'est quoi ?..................................................................150 Les grands rôles dans un projet.................................................. 152 Les phases.................................................................................. 154 Méthodologie et documents........................................................ 156 Chiffrage...................................................................................... 158 AgroParisTech, ufr d’informatique Sommaire page 3 Projet final : un intranet dynamique..................................................... 161 Démarrage du projet................................................................... 163 Projet PHP : en-tête, pages dynamiques.................................... 164 Projet PHP : premier formulaire.................................................. 165 Projet PHP : base de données.................................................... 166 Projet PHP : connexion à la base............................................... 169 Projet PHP : extraction de données............................................ 170 Projet PHP : point architecture.................................................... 171 Projet PHP : affichage de la liste.................................................172 Projet PHP : sécurisation du site.................................................173 Projet PHP : notion de session................................................... 174 Projet PHP : gestion de session..................................................175 Le langage SQL : INSERT, UPDATE, DELETE..........................176 Projet PHP : mise à jour de la base............................................ 177 Projet PHP : gestion des adresses............................................. 178 Projet PHP : formulaire complexe............................................... 179 Projet PHP : covoiturage............................................................. 180 Projet PHP : écrans du covoiturage............................................ 181 Ressources................................................................................. 182 AgroParisTech, ufr d’informatique Sommaire page 4 Système d'Information : présentation générale AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 5 AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 6 Système d'Information : présentation générale AgroParisTech, ufr d’informatique Déroulement ● cours 1 (amphi) L’entreprise et son système d’information : architecture et technologies ● TD 1 à 3 Fonctionnement du client HTML ● cours 2 (amphi) Programmation ● TD 4 QCM programmation ● TD 5 à 8 Langage PHP ● cours 3 (amphi) Base de données : concepts, relations, modélisation. requêtes SQL de consultation et mise à jour, API php ● TD 9 à 13 Conception d'une base de données, début du projet ● cours 4 (amphi) Gestion de projet : les bases ● TD 14 à 19 Projet : intranet et covoiturage, évaluation AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 7 Sommaire des thèmes abordés ● Architecture, technologies, organisation ● Conception et réalisation ● Profils des métiers ● Étude sommaire d’une technologie Le système d’information (SI) de l’entreprise Gestion de l’entreprise (back office) Services aux clients (front office) Base de données Relations prospects (action commerciale, CRM) points d’accès AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 8 Préparer un week end à Lisbonne de chez soi, via internet, par téléphone, ou bien d’une agence côté CLIENT service central de réservation côté SERVEUR point de réservation Places disponibles côté Client Les étapes de la réservation 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 9 côté Client Les étapes de la réservation côté Serveur 1 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 ? conditions d’annulation pour le charter pas de remboursement, sauf assurance complémentaire côté Client Les étapes de la réservation côté Serveur 1 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 2 ? conditions d’annulation pour le charter pas de remboursement, sauf assurance complémentaire ? coût de l’assurance 5% prix du voyage AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 10 côté Client Les étapes de la réservation côté Serveur 1 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 2 ? conditions d’annulation pour le charter pas de remboursement, sauf assurance complémentaire 3 ? coût de l’assurance 5% prix du voyage réservation ferme TAP ! ? mode de paiement (CB / chèque) côté Client Les étapes de la réservation côté Serveur 1 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 2 ? conditions d’annulation pour le charter pas de remboursement, sauf assurance complémentaire 3 ? coût de l’assurance 5% prix du voyage 4 réservation ferme ! ? mode de paiement (carte bancaire / chèque) indication n° de carte + date de validité validation paiement carte + ordre émission billets AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 11 côté Client Les étapes de la réservation côté Serveur 1 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 2 ? conditions d’annulation pour le charter pas de remboursement, sauf assurance complémentaire 3 ? coût de l’assurance 5% prix du voyage 4 réservation ferme ! quelle infrastructure pour ces opérations ? ? mode de paiement (carte bancaire / chèque) 5 indication n° de carte + date de validité validation paiement carte + ordre émission billets Le système d’information : une architecture client / serveur ● Base de données : Oracle, DB/2, SQL server, mySQL ● BD Serveur : machine(s) et logiciels ● Clients : ■ ■ ■ terminal passif (3270 / 5250) micro-ordinateur : client lourd ou léger ? navigateur Web : le client universel Serveur Clients AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 12 Le système d’information de l’entreprise, aujourd’hui HTML Serveur Web • • BD Serveur d’applications HTML HTML Applications HTML Légende : information statique ou dynamique code exécutable (programme) Postes clients Où l’information est-elle traitée ? HTML Serveur Web • • HTML client HTML HTML Postes clients BD Serveur d’applications léger : peu ou pas de traitement sur le client (programmation en JavaScript) côté serveur, trois types de solutions applicatives (Microsoft, Java, PHP) Légende : information statique ou dynamique code exécutable (programme) AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 13 Et la structuration ? HTML • • HTML Serveur Web BD Serveur d’applications Applications HTML Back Office HTML Front Office Les composants et les pratiques Développement particulier Progiciel de gestion intégré (PGI, ERP) autonomie ou sous-traitance ? régie ou forfait ? Back Office externalisation (infogérance)? Front Office AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 14 Sommaire des thèmes abordés ● Architecture, technologies, organisation ● Conception 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éploiement logistique, formation ● P R O J E T Exploitation infogérance ? ● Maintenance TMA ? AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 15 Cycle en V Cahier des charges Tests utilisateurs pré-production Spécifications générales Tests de qualification et d ’intégration Spécifications détaillées Tests unitaires Codage Cycle en V : parodie AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 16 Sommaire des thèmes abordés ● Architecture, technologies, organisation ● Conception et réalisation ● Profils des métiers ● Étude sommaire d’une technologie Un projet d’évolution du SI ? communication technique métier organisation expression des besoins X X X spécifications fonctionnelles X X X spécifications techniques X X X architecture X X X X réalisation X X X X tests X X X livraison et déploiement X X AgroParisTech, ufr d’informatique Système d'Information : présentation générale X page 17 Le profil des informaticiens du projet ● Communication : ● Fonctionnel : ● Technique : ● Organisation : écouter, expliquer, accompagner connaître le métier de l’entreprise, comprendre les enjeux et savoir formuler les besoins contrôler et assembler les outils qui l’encapsulent gérer, piloter, coordonner management & organisation consultant maîtrise d’œuvre directeur de projet, chef de projet maîtrise d’ouvrage analyste technique fonctionnel développeur consultant consultant architecte architecte expertise UV européenne AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 18 Sommaire des thèmes abordés ● Architecture, technologies, organisation ● Conception et réalisation ● Profils des métiers ● Étude sommaire d’une technologie Le web ● Invention récente : ● ● ● ● Au départ : ● ● ● 1992 au CERN Tim Bernes Lee sites documentaires liens hypertextes Technologie : HTTP et HTML AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 19 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 une image du texte un lien vers une autre page un formulaire de saisie AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 20 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 21 Technologies du Web dynamique ● ● ● Microsoft ASP (.Net) ● Active Server Page ● Fonctionne uniquement sous Windows Java : Servlets/JSP ● programmation objet ● richesse des interfaces PHP : ● communauté libre ● 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 22 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 4 : le navigateur affiche la page et rompt la connexion 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 AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 23 Web dynamique : session ● ● Le dialogue entre le navigateur et le serveur est déconnecté : 1. Le navigateur se connecte au serveur 2. La navigateur envoie une requête 3. Le serveur renvoie une réponse 4. La connexion est rompue ! Comment assurer le suivi de l'utilisateur (ex : webmail, panier dans un site de commerce) ? Web dynamique : cookies 1 : le navigateur rassemble les informations du formulaire, il se connecte au serveur et lui transmet ces informations dans une 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 dynamiquement une page avec le résultat, l ’envoie en réponse HTTP au navigateur, accompagnée du cookie. 4 : Le navigateur garde le cookie et affiche la page 5 : etc. 5 : lors de la requête suivante, le navigateur retransmet le cookie au serveur, qui saura ainsi identifier l ’utilisateur... 3 : le serveur génère une page en fonction de l ’utilisateur identifié par son cookie clavel doussot AgroParisTech, ufr d’informatique Système d'Information : présentation générale page 24 Client HTML AgroParisTech, ufr d'information Client HTML page 25 AgroParisTech, ufr d'information Client HTML page 26 Le navigateur HTML (1 / 2) Le navigateur ou browser est avant tout un client HTTP. C’est grâce à ce logiciel que l’utilisateur visualise les informations qu’il télécharge depuis le Web. Les fonctions de base du navigateur Web Il émet les requêtes (Queries) HTTP à destination des serveurs Web. Il interprète les documents HTML qui lui sont envoyés en retour. Il fournit des outils destinés à faciliter la navigation (gestionnaire de Bookmarks, Historique des visites,...). Un contenu multimédia Tous les navigateurs peuvent afficher du texte formaté en HTML et des images au format GIF ou JPG ; La plupart des navigateurs ne se limitent plus à l’interprétation des pages HTML. Par l’intermédiaire d’extensions (Plug-ins), le navigateur Web peut désormais traiter tout type de documents multimédias : son, images animées... Bien que non officiellement standardisées, ces extensions acquièrent parfois un statut de standard de fait (plug-in RealAudio pour la diffusion de fichiers sonores). AgroParisTech, ufr d'information Client HTML page 27 Le navigateur HTML (2 / 2) Le navigateur Web est aujourd’hui perçu comme l’interface universelle et standardisée d’accès aux ressources du réseau. Intégration des protocoles Internet Le navigateur Web n’est plus un simple client HTTP. La plupart des navigateurs du marché sont aussi des clients d’autres applications Internet : SMTP (Messagerie électronique), FTP (transfert de fichiers), NNTP (news), ... Un client léger (thin-client) Le navigateur Web est le client standard des architectures Client / Serveur Internet. Un OS au dessus de l’OS Le 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 Locator Une URL identifie de manière unique une ressource dans un réseau internet ou intranet. Différents types d'URL Consultation : http://www.agroparistech.fr/spip.php?rubrique46 Téléchargement : ftp://ftp.mozilla.org Mail : mailto:[email protected] Forme générale protocole: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 essai d’affichage de code HTML gé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 HTML Tout document HTML inclut au moins le texte suivant : <?xml version="1.0" encoding="ISO-8859-15"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" /> <meta name="keywords" content="agronomie,INA-PG"> <meta name="revisit-after" content="30 days" /> <title>Ma 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 page Le 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 Rule Cette balise trace un trait de séparation dans le document. <p></p> marque de paragraphe Cette balise est une marque de paragraphe et fonctionne comme le signe « ¶ » des logiciels de traitement de texte. <p >texte d’un paragraphe centré</p> <br /> fin de ligne Cette balise marque une fin de ligne sans saut de paragraphe. <span></span> regroupement Cette balise permet de regrouper des é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 standards Ces commandes permettent de mettre en forme des parties de texte. Mise en forme spécialisée HTML intègre un certain nombre de balises de mise en forme standard, dont notamment : Balise acronym address blockquote cite code em strong Utilisation acronyme adresse citation longue (sur plusieurs lignes) citation courte code informatique texte mis en valeur texte renforcé Les balises de titre (Headers) Les balises de type <hn></hn> 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 standard La plupart des balises acceptent les attributs suivants : Attributs Utilisation class classe (cf. page suivante) id nom unique pour identifier l'élément style style (cf. page suivante) title bulle d'aide lang langue acceskey raccourci clavier tabindex ordre de parcours par tabulation TD H1 AgroParisTech, ufr d'information Client HTML page 38 Les listes Les listes de définitions Ce 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 à puces source 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éros source HTML Affichage Navigateur <ol> 1. premier item <li>premier item</li> <li>second item</li> </ol> AgroParisTech, ufr d'information Client HTML 2. second item 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 style Les 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 texte Exemple Valeurs possibles font-family : Arial; font-style : italic; font-weight : bold; Noms de police normal, italic, oblique normal, bold, bolder, lighter, 100, 200, 300,... 900 xx-small, x-small, small, medium, large, x-large, xxlarge, larger, smaller none, underline, overline line-through, blink capitalize, uppercase, lowercase, none font-size : x-small; font-size : 18pt; font-size : 150%; text-decoration : underline; text-transform : uppercase; Propriétés de couleur Exemple Valeurs possibles color : red; color : #fd4a88; color : rgb(125,32,98); background-color : blue; background-image : url("im.jpg") Noms de couleurs, ou codes RGB AgroParisTech, ufr d'information Idem url("…"), none Client HTML page 41 Les feuilles de style (2 / 2) Propriétés de placement Exemple Valeurs possibles text-align : center; margin-top : 1em left, right, center, justify 1em :hauteurd'un caractère 1ex :hauteurdu x 1cm :1 centimère 1pt :1 point margin-bottom : 2ex margin-left : 12px margin-right : 2cm float : left Idem Idem Idem left, right, center Utilisé pour rendre un bloc flottant, c'est-à-dire le superposer à un autre Propriétés de bordure Exemple Valeurs possibles border-style : solid none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-top, border-bottom, border-left, border-right border-width : thin border-width : 3px idem margin thin, medium, thick Ressources http://www.w3schools.com/css/default.asp AgroParisTech, ufr d'information Client HTML page 42 Feuille de style: exemple Astuces Les 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 style http://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. TD H2 AgroParisTech, ufr d'information Client HTML page 45 Les images Avec 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 image Pour 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) TD H3 AgroParisTech, ufr d'information Client HTML page 46 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) 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> AgroParisTech, ufr d'information Client HTML page 48 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> <th></th> est utilisé à la place de <td></td> pour les titres de <caption></caption> permet de spécifier un titre pour le tableau <summary></summary> permet d'associer un texte au tableau permettent de structurer un tableau colonne 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 Bandeau supérieur Menu à gauche Technique utilisée Beaucoup de sites font appels à des imbrications de tableaux pour l'organisation de leur page. Cette pratique est à proscrire : les tableaux ne doivent servir qu'à organiser des 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 : CSS : <div id="menugauche">…</div> <div id="contenu">…</div> #menugauche { float: left; width: 250px; } #contenu { margin-left: 250px; } TD H4 AgroParisTech, ufr d'information Client HTML TD H5 page 52 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 get Le 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.DoFormu laire?btAction=OK&prenom=Henri&nom=Dupont La méthode post Dans 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 HTML La 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" /> TD H6 AgroParisTech, ufr d'information Client HTML page 55 AgroParisTech, ufr d'information Client HTML page 56 Prise en main de l'outil de développement AgroParisTech, ufr d’informatiquePrise en main de l'outil de développement page 57 AgroParisTech, ufr d’informatiquePrise en main de l'outil de développement page 58 Prise en main de l'outil de développement (1 / 4) Easy PHP Easy 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 Eclipse Eclipse 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 sousrépertoire plugins du répertoire d'installation d'Eclipse. PHP Eclipse PHP 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 PHP Menu : 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'Eclipse Menu : Démarrer > Programmes > Programmation > Eclipse La 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 menu File > 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'Eclipse Pour chaque série de TD (HTML, puis PHP) on créera un nouveau projet avec le menu : File > New > Projet..., en choisissant PHP > PHP Projet Ensuite, on peut créer des fichiers HTML ou PHP dans le projet. Lors de l'ouverture d'un fichier le PHP Browser doit apparaître automatiquement ; sinon, utiliser le menu : Window > Show View > PHPEclipse Web Development > PHP Browser AgroParisTech, ufr d’informatiquePrise en main de l'outil de développement page 62 TD HTML AgroParisTech, ufr d’informatique TD HTML page 63 AgroParisTech, ufr d’informatique TD HTML page 64 TD HTML 1 Introduction aux exercices Les différents exercices de ce document consistent d'abord à réaliser un minisite 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éalisation Il 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 2 Ajouter 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 3 Complé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 5 Copier 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 celleci horizontalement. AgroParisTech, ufr d’informatique TD HTML page 71 TD HTML 6 Il s'agit de créer un formulaire web. Reproduire aussi fidèlement que possible celui qui est affiché dans la copie d'écran ci-dessous. Indication : les balises fieldset permettent de regrouper plusieurs champs, et les balises legend permettent de donner un titre à un tel regroupement. AgroParisTech, ufr d’informatique TD HTML page 72 Programmation : principes de base AgroParisTech, ufr d’informatique Programmation page 73 AgroParisTech, ufr d’informatique Programmation page 74 Programmation : principes de base AgroParisTech, uer d’informatique Sommaire ● ● ● ● ● ● ● Ordinateur : 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 75 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 76 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 77 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 1011 123 ==> 7B AgroParisTech, ufr d’informatique Programmation page 78 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 programmation Types et variables Instructions Branchements conditionnels Schémas itératifs Procédures et fonctions AgroParisTech, ufr d’informatique Programmation page 79 Programmation : principes ● Plusieurs types de langages de programmation : Langage machine ● Langage de plus haut niveau ● ● Un programme écrit dans un langage de haut niveau doit être « traduit » : 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 80 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 81 Sommaire ● ● ● ● ● ● ● Ordinateur : architecture et codage Langages de programmation Types 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 82 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 83 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 !! ... $a = 123 a 123 52 ? $b = $a ? $a = 52 ? 54 = $a AgroParisTech, ufr d’informatique b Programmation 123 ? ... page 84 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 Instructions Branchements conditionnels Schémas itératifs Procédures et fonctions AgroParisTech, ufr d’informatique Programmation page 85 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 bloc echo "Carré de $a = $b"; // Impossible ! AgroParisTech, ufr d’informatique Programmation page 86 Sommaire ● ● ● ● ● ● ● Ordinateur : architecture et codage Langages de programmation Types et variables Instructions Branchements 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 87 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 88 Exemple : calcul de racine // On suppose une suite d'instruction // ayant conduit à ce que la variable // $a contienne un nombre réel if ($a >= 0) { $r = sqr($a); echo "Racine de $a : $r"; } else { echo $a . " n'est pas un nombre positif, pas de calcul de racine !"; } Sommaire ● ● ● ● ● ● ● Ordinateur : architecture et codage Langages de programmation Types et variables Instructions Branchements conditionnels Schémas itératifs Procédures et fonctions AgroParisTech, ufr d’informatique Programmation page 89 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 90 Exemple : calcul de factorielle // On suppose une suite d'instruction // ayant conduit à ce que la variable // $a contienne un nombre entier positif $f = 1; for ($i=1; $i<=$a; $i++) { $f = $f*$i; } $f = 1; $c = 1; while ($c <= $a) { $f = $f * $c; $c = $c + 1; } Les collections Il arrive souvent qu'on ait à 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 91 Exemple de tableau ● Remplir puis afficher un tableau des 10 premiers multiples strictements positifs de 3 : for ($i=1; $i<=10; $i++) { $multiples[$i] = $i * 3; } foreach ($multiples as $index => $valeur) { echo "$index multiple : $valeur\n"; } Exemple de tableau indexé ● On associe les capitales aux pays : $capitales["France"] = "Paris"; $capitales["Royaume Uni"] = "Londres"; $capitales["Allemagne"] = "Berlin"; foreach ($capitales as $index => $valeur) { echo "$index a pour capitale $ville\n"; } AgroParisTech, ufr d’informatique Programmation page 92 Sommaire ● ● ● ● ● ● ● Ordinateur : architecture et codage Langages de programmation Types et variables Instructions Branchements conditionnels Schémas itératifs Procé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 93 Gestion des variables ● Soit une fonction pour calculer la factorielle d'un nombre entier positif : function factorielle($nombre) { $resultat = 1; for ($i = 2; $i <= $nombre ; $i++) { $resultat = $resultat * $i; } return $resultat; } Gestion des variables ● ● ● 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 94 Exemples d'appels $resultat = factorielle(4); // $nombre prendra la valeur 4 $b = 5; $r = factorielle($b); // $nombre prendra la valeur de $b : 5 On n'a pas besoin de connaître le nom des variables utilisées dans la fonction ! Seuls comptent leur nombre et l'ordre ! AgroParisTech, ufr d’informatique Programmation page 95 AgroParisTech, ufr d’informatique Programmation page 96 PHP AgroParisTech, ufr d’informatique PHP page 97 AgroParisTech, ufr d’informatique PHP page 98 PHP : histoire et état des lieux Un peu d'histoire 1994 : création de PHP/FI (Personal Home Page Tools/Form Interpreter) par Rasmus Lerdof (Canada) pour évaluer la consultation de son CV en ligne. 1995 : mise à disposition du code pour tout le monde. 1997 : redéveloppement du coeur par 2 étudiants (Andi Gutmans et Zeev Zuraski, Israëm) pour donner PHP (PHP: Hypertext Processor) 3.0. 2002 : 8 millions de sites basés sur PHP. 2004 : 15 millions de sites basés sur PHP. Evolution du langage Au départ basé sur le langage Perl, PHP a été réécrit ensuite en langage C. Le moteur a été réécrit plusieurs fois. D'abords procédural, le langage a évolué a partir de la version 4.0 pour intégrer les technologies objet. Principales caractéristiques Le moteur PHP s'intègre au serveur web Apache : il prend alors en charge toutes les pages avec une extension .php. PHP est un langage interprété : il n'y a pas de phase de compilation et les erreurs sont découvertes au moment de l'exécution. La syntaxe est très inspirée du langage C, tout en apportant beaucoup de simplification, notamment dans la gestion des variables. Remarque : dans le présent support, on n'aborde pas les caractéristiques objet de PHP ; le code décrit est compatible PHP 3.0 et versions ultérieures. AgroParisTech, ufr d’informatique PHP page 99 PHP : principe de fonctionnement Principe des applications web Poste client Serveur 1 : Requete (GET ou POST) Navigateur Web 2 : Réponse Serveur HTTP Apache + Module PHP 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 Premier exemple de code (1 / 2) Exemple simple <?php echo "<?xml vers i on= \ " 1 . 0 \ " encoding= \ " I SO - 885915\ " ?> " ?> <!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. TD P1 AgroParisTech, ufr d’informatique PHP page 103 Structures de contrôle PHP 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 TD P2 PHP page 104 Interactions avec l'utilisateur (1 / 2) Principe général Dans 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é client Soit un fichier formulaire.php : ... <body> <div> <form action="validation_formulaire.php" method="post"> <p><label for="nom">Nom :</label> <input type="text" size="30" name="nom" /></p> <p><label for="prenom">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é serveur Le 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 formulaire.php validation_formulaire.php (résultat HTML) Interprétation de validation_formulaire.php 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 validé par lui-même (1 / 2) Principe Dans 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 formulaire 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"; } } ?> <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> ... TD P3 AgroParisTech, ufr d’informatique PHP page 108 Tableaux Exemples précédents Dans 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 associatifs Un 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 élement echo $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 tableau foreach ($tableau as $index => $couleur) { echo "<br /> $index => $couleur"; } // Effacement du 2ème élément unset($tableau[2]); ?> // Effacement de tout le tableau unset($tableau); AgroParisTech, ufr d’informatique PHP TD P4 page 109 Fonctions Quelques fonctions prédéfinies Chaînes de caractères strlen($chaine) : longueur d'une chaîne strpos($chaine, $car) : position d'un caractère strtolower($chaine) : conversion minuscules strtoupper($chaine) : conversion majuscules Dates getdate() : date et heure gettimeofday() : heure actuelle date($format, $date) : formatage Tableaux count($tableau) : nombre d'éléments sort($tableau) : tri Fonctions définies par l'utilisateur PHP 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); ?> TD P5 AgroParisTech, ufr d’informatique PHP page 110 Ressources Installation http://www.easyphp.org http://www.eclipse.org http://www.phpeclipse.de Développement http://www.php.net/manual/fr/ http://www.phpfrance.org http://www.phpindex.com http://www.commentcamarche.net/php/phpintro.php3 http://php.developpez.com AgroParisTech, ufr d’informatique PHP page 111 AgroParisTech, ufr d’informatique PHP page 112 TD PHP AgroParisTech, ufr d’informatique TD PHP page 113 AgroParisTech, ufr d’informatique TD PHP page 114 TD PHP 1 Cré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 2 Les 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 3 Il s'agit, dans un fichier td3.php, de proposer à l'utilisateur un formulaire permettant de saisir un nombre et de calculer en retour la factorielle de ce nombre (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 4 Il s'agit, dans un fichier td4.php, de proposer à l'utilisateur un formulaire permettant de convertir une somme en € vers une ancienne monnaie nationale. On utilise pour cela 2 tableaux associatifs : $nom_devise = array( "FRF" => "franc 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 "FRF" => "DEM" => "ESP" => "BEF" => "GRD" => "IEP" => "ITL" => "NLG" => ); = array( 6.55957, 1.95583, 166.386, 40.3399, 340.75, 0.787564, 1936.27, 2.20371, Permet de générer la liste déroulante Permet de réaliser la conversion lors grâce à une itération. L'attribut value de la validation du formulaire. de chaque option est égal au nom court de la devise en 3 lettres. AgroParisTech, ufr d’informatique TD PHP page 118 TD PHP 5 Il s'agit, dans un fichier td5.php, de : • écrire 2 fonctions aire_triangle(...) et aire_rectangle(...) qui renvoient respectivement l'aire d'un triangle et d'un rectangle en fonction de la base et de la hauteur ; • écrire un formulaire permettant à l'utilisateur de saisir une base, une hauteur et de sélectionner une forme pour obtenir l'aire correspondante. On vérifiera également les données saisies par l'utilisateur. AgroParisTech, ufr d’informatique TD PHP page 119 AgroParisTech, ufr d’informatique TD PHP page 120 Organiser les données du Système d'Information AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 121 AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 122 Organiser les données du 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 123 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 124 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 structure pour représenter ces données ? Représenter les agriculteurs ● ● ● ● ● 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 • 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 125 Une clé primaire pour la table ● ● ● Une colonne particulière permet d’identifier de manière unique chaque agriculteur On l’appelle la clé primaire 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’information "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 126 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é primaire, primaire qui identifie de manière unique chaque occurrence : il ne peut y avoir deux valeurs identiques de clé primaire dans la table. table Attention, la clé primaire n’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 127 Et maintenant, les parcelles ● Une parcelle a un nom, elle est située en un lieu précis et elle a une superficie Une parcelle a aussi un propriétaire : comment l’indiquer dans la table des parcelles ? Désigner le propriétaire ● ● ● Une parcelle a un nom, elle est située en un lieu précis et elle a une 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 128 Une relation un à plusieurs ● ● Un agriculteur peut posséder plusieurs parcelles Une parcelle a un et un seul propriétaire La relation entre les tables est une relation un à plusieurs. plusieurs Elle est matérialisée, du côté « plusieurs », par une clé é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 autoincrémentée pour cette table ? AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 129 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 à plusieurs : on la représente par une nouvelle table Une relation plusieurs à plusieurs représentée par la table intervention 1 1 n 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 130 Exercice : concevoir un modèle de données 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 131 Consultation (1) ● ● select * from agriculteur le résultat est une table temporaire select agr_nom, agr_prn from agriculteur where agr_res = 'ARITH' Comment répondre à la question : quelles sont les résidences des agriculteurs ? Consultation (2) ● ● résidences des agriculteurs ? select agr_res from agriculteur comment … ● ● obtenir un résultat ordonné ? supprimer les doublons ? select agr_res from agriculteur order by agr_res select distinct agr_res from agriculteur order by agr_res AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 132 Consultation (3) ● Quels sont les propriétaires de parcelles ? select agr_nom, par_nom from agriculteur, parcelle where agr_idf = par_agr_idf ● Nombre de parcelles pour chaque propriétaire ? select agr_nom, count(par_nom) from agriculteur, parcelle where agr_idf = par_agr_idf group by agr_nom Pour approfondir et pratiquer ● ● http://www.commentcamarche.net/sql/sqlintro.php3 L’outil PhpMyAdmin accessible via easyPHP (clic droit sur l’icône easyPHP, puis choix de « Administration ») AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 133 AgroParisTech, ufr d’informatique Organiser les données du Système d'Information page 134 TD Base de Données AgroParisTech, ufr d’informatique TD Base de Données page 135 AgroParisTech, ufr d’informatique TD Base de Données page 136 Bases de données : concepts Limites rencontrées Lorsqu'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ées C'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 relationnelles Les 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). Base Requete ou mise à jour SQL Table Relation API Enregistrements Réponse Index AgroParisTech, ufr d’informatique TD Base de Données page 138 Introduction à MySQL Logiciels de base de données Il existe différentes implémentations de bases de données : • bases de données commerciales : Oracle IBM DB2 Microsoft SQLServer Microsoft Access • bases de données Open Source : MySQL PostgreSQL MySQL Base 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'exercice Il 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 PhpMyAdmin On 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'exercice Sur 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 bateaux On 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 : complexification Finalement, 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évisions Chaque 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 locations Toutes 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 Introduction SQL 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 SELECT L'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 types SQL 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 2 Une fois le schéma terminé et complété avec un certain nombre de données d'exemple, on écrira un certain nombre de requêtes SQL de type SELECT pour réaliser les affichages suivants : la liste des bateaux ; la liste des bateaux classés par ordre alphabétique ; la liste des bateaux accompagnés des informations correspondant à leur modèle et classés par modèle ; le nombre total de bateaux ; la liste de toutes les bateaux de type Flying Bridge ; le nombre de bateaux de type classique ; le dernier bateau révisée ; la liste de tous les bateaux en cours de location ; la liste des bateaux qui ont subi un dommage en cours de location. AgroParisTech, ufr d’informatique TD Base de Données page 145 AgroParisTech, ufr d’informatique TD Base de Données page 146 Gestion de projet AgroParisTech, ufr d’informatique Gestion de projet page 147 AgroParisTech, ufr d’informatique Gestion de projet page 148 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 149 Sommaire ● ● ● ● ● 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 150 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 151 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 projet Les phases Méthodologie et documents Chiffrage AgroParisTech, ufr d’informatique Gestion de projet page 152 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 153 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 phases Méthodologie et documents Chiffrage AgroParisTech, ufr d’informatique Gestion de projet page 154 Le cycle en V ● Cliquez pour ajouter un plan Cahier des charges Tests utilisateurs pré-production Analyse Tests de qualification et d ’intégration Conception Tests unitaires Codage AgroParisTech, ufr d’informatique Gestion de projet page 155 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 156 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 157 Sommaire ● ● ● ● ● Un projet, c'est quoi ? Les grands rôles dans un projet Les phases Méthodologie et documents Chiffrage 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 158 Gestion de l'humain ● ● Loi de Parkinson : « work expands to fill the time available for its completion » ; Syndrôme de l'étudiant... AgroParisTech, ufr d’informatique Gestion de projet page 159 AgroParisTech, ufr d’informatique Gestion de projet page 160 Projet final : un intranet dynamique AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 161 AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 162 Démarrage du projet But du projet Les 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 projet Cré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 base Lancer 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èves Cré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 champs On crée les champs suivants : Nom Type Null possible Clé primaire Index X Commentaire ELVIDF INT Clé primaire, autoincrémentée ELVNOM VARCHAR(50) X Nom ELVPRN VARCHAR(50) X Prénom ELVLOG VARCHAR(20) X Login ELVMDP VARCHAR(20) ELVNSS DATE X Date de naissance ELVPTB VARCHAR(20) X Numéro de portable ELVMEL VARCHAR(50) X Adresse e-mail Mot de passe Une fois la table créée, cliquer sur le menu Insérerpour 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 configuration define("bd_serveur","localhost"); define("bd_utilisateur","root"); define("bd_motdepasse",""); define("bd_base","intranet"); // Ouverture de la connexion function 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 connexion function 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, prenom function 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 INSERT L'ordre SQL insertpermet 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 UPDATE L'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 DELETE L'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 PHP http://www.phpfrance.com http://www.easyphp.org/ http://www.php.net/ http://www.commentcamarche.net MYSQL http://www.mysql.com Covoiturage http://www.123envoiture.com http://www.easycovoiturage.com/ http://www.covoiturage-france.fr/ AgroParisTech, ufr d’informatique Projet final : un intranet dynamique page 182
