Détail du stage. Programmation PHP. Contenu du stage. Plan du cours. Introduction à la programmation des sites web dynamiques.

Transcription

1 Programmation PHP Détail du stage Public : Introduction à la programmation des sites web dynamiques Tout agent devant créer ou maintenir un site internet ou intranet dynamique Objectifs pédagogiques : Maîtriser la programmation en langage PHP pour le développement de sites Web dynamiques Pré-requis : Connaître les bases du langage HTML v (c) Pierrick Doré - Contenu du stage Plan du cours Approfondissement du langage HTML Découverte de l'architecture dynamique des sites Les bases du langage PHP L'initiation aux bases de données MySql Création d'un site Internet/Intranet dynamique Sécurisation de ces sites Introduction Présentation de l'architecture WAMP / LAMP Rappels HTML Introduction au langage PHP Utilisation de MySQL Exercices d'application

2 Introduction Introduction Jadis, les entreprises «dans le coup» s'affichaient sur l'internet à l'aide d'un site web simple qui était le plus souvent la retranscription en ligne de leur plaquette papier... Désormais, les Internautes souhaitent pouvoir consulter des catalogues de produits en ligne, effectuer des commandes, vérifier le solde de leurs comptes en banque ou encore payer leurs impôts directement... en limitant au maximum les intermédiaires. Le temps des sites web statiques développés avec des pages HTML est définitivement révolu... Programmation PHP Plan du cours L'architecture Client/serveur AMP (c) Pierrick Doré L'architecture Client/serveur AMP Le modèle client / serveur *AMP Fonctionnement d'un serveur WEB Les protocoles Les URLs, les types MIME Les serveurs DNS Eléments constitutifs de l'architecture *AMP Exercices pratiques : Installation de l'architecture WAMP sous Windows

3 Quelques définitions Internet : (INTERconnected NETworks) Réseau informatique mondial constitué d'un ensemble de réseaux plus petits (nationaux, régionaux) interconnectés entre eux par le protocole de communication TCP/IP Intranet : Réseau informatique privé ou interne à une entreprise (LAN & MAN) qui utilise les protocoles de communication et les technologies du réseau Internet. Extranet : Ouverture partielle d'un Intranet vers l'extérieur, via le protocole Internet, pour des personnes autorisées et sélectionnées (par ex. : clients ou fournisseurs) Quelques définitions Navigateur web : Programme informatique client capable d'interpréter du code HTML et d'en afficher une représentation à l'écran (ex. : Internet Explorer) SGBDR : Système de Gestion de Base de Données Relationnels Serveur de base de donnée (Mysql, Oracle,...) Langage Interprété : Langage qui convertit un programme en instructions directement exécutables par la machine au moment de son exécution (ex. : Php) Principes du Client / Serveur Intro. : Fonctionnement d'un serveur Web Client(s) 1. requête Protocole 2. réponse 3 : to :80 GET /index.php?c=1 HTTP/1.1 Host: User-Agent: Mozilla/ Accept: text/html... Accept-Language: fr,en Accept-Encoding: gzip,deflate Accept-Charset: ISO , utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: : who is HTTP 4 : to HTTP/ OK Date: Wed, 10 May :12:04 Server: Apache/ (Unix) X-Powered-By: PHP/ Pragma: no-cache Content-Type : text/html Content-Encoding: gzip Content-Length: 5357 <html> Serveur 2 : is DNS

4 Les protocoles Les protocoles Protocole réseau : Application Applications Utilisateur (ex. : navigateur) Description formelle des messages et des règles que deux ordinateurs doivent respecter pour échanger des messages. De bas niveau (entre les interfaces réseau) : Présentation Session DNS FTP HTTP SNMP autres... Sockets Application Interface (ex. : :1620 -> :80 TCP ) Haut niveau Ex : IP, TCP, UDP,... (voir le fichier protocol de windows) Transport Réseau UDP User Datagram Protocol IP Internet Protocol TCP Transport Control Protocol De haut niveau (entre les programmes) : Ex : HTTP, FTP, SMTP,... (voir le fichier services de windows) Liaison Physique PPP : Point to Point Protocol Ligne de Communication Série Arp : Address Resolution Protocol MAC : Medium Access Control Ethernet / IEEE OSI Bas niveau Les protocoles de bas niveau Les protocoles de bas niveau Définissent les règles de communication entre les interfaces réseau. Orientés connexion : La machine émettrice : Non orientés connexion Protocole adapté à la diffusion audio/video La machine émettrice envoie des données (blocs ou datagrammes) sans prévenir la machine réceptrice Établit une connexion avec la machine réceptrice Envoie un flot de données La machine réceptrice : La machine réceptrice reçoit les données sans envoyer d'avis de réception à la première. Reçoit et contrôle la validité des données Informe l'émetteur par un avis de réception Le cas échéant, elle demande de renvoyer le flot de données erronées UDP (User Datagram Protocol) est un protocole non orienté connexion TCP (Transmission Control Protocol) est un protocole orienté connexion

5 Les adresses IP Notion de port Ip : Internet Protocole Adresse IP : adresse de 32 bits notée sous forme de 4 nombres entiers (0-255) séparés par des points (ex. : ) permet au protocole IP d identifier de manière unique les n de réseau (Net-Id) et N de machine (Host-Id) de l expéditeur et du destinataire d un paquet IP Net-Id Host-Id 3 Adresse ip 0 masque Un ordinateur peut faire fonctionner simultanément plusieurs applications connectées. Chacune de ces applications se voit attribuer un numéro unique sur la machine, codée sur 16 bits : un port. De cette manière, lorsque l'ordinateur reçoit des informations destinées à un port, les données sont transmises à l'application correspondante. Un port est donc un numéro unique sur une machine, qui identifie l'application à laquelle des données sont destinées. Nb : Un socket = Adresse ip + port -> unique sur Internet Les ports des serveurs : 0->1023 Les ports des clients : > Port Service ou Application --- FTP Telnet SMTP Domain Name System Whois HTTP POP3 NNTP --- Les protocoles de haut niveau Le protocole HTTP Définissent les règles de communication entre des programmes dans un environnement client/serveur Protocoles les plus connus : HTTP (HyperText Transfer Protocol) pour les pages web FTP (File Transfer Protocol) pour l'échange de fichiers SMTP (Simple Mail Transfer Protocol) pour envoyer des s à un correspondant POP (Post Office Protocol) pour récupérer ses s (...) HTTP (HyperText Transfer Protocol) Protocole de communication permettant de transférer un fichier (HTML, image, feuille de style, etc...) localisé par son URI entre un serveur HTTP et un navigateur Web. Son n de port serveur est 80 Défini par les RFC 1945 (HTTP 1.0) et RFC 2610 (HTTP 1.1)

6 Le protocole HTTP Intro. : Exemple de requête HTTP Le protocole HTTP utilise la notion d'uri (Uniform Resource Identifier) pour indiquer l'objet auquel s'applique les requêtes du protocole (RFC 1738 et 1808) Les types MIME (Multipurpose Internet Mail Extensions) pour typer les données échangées (RFC 1521) GET / HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv: ) Gecko/ Firefox/ Accept: text/xml, application/xml, application/xhtml+xml, text/html;q=0.9, text/plain;q=0.8, image/png, */*;q=0.5 Accept-Language: fr, fr-fr;q=0.8, en;q=0.5, en-us;q=0.3 Accept-Encoding: gzip, deflate Accept-Charset: ISO , utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: q=cnfpt&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:fr:official Intro. : La réponse du serveur HTTP HTTP/ Found Date: Wed, 10 May :09:27 GMT Server: Apache/ (Unix) PHP/4.4.1 mod_ssl/ OpenSSL/0.9.7i X-Powered-By: PHP/4.4.1 Location: fr/accueil.php? Keep-Alive: timeout=2, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html Intro. : Nouvelle requête corrigée GET /fr/accueil.php? HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv: ) Gecko/ Firefox/ Accept: text/xml, application/xml, application/xhtml+xml, text/html;q=0.9, text/plain;q=0.8, image/png, */*;q=0.5 Accept-Language: fr, fr-fr;q=0.8, en;q=0.5, en-us;q=0.3 Accept-Encoding: gzip, deflate Accept-Charset: ISO , utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: q=cnfpt&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:fr:official

7 Intro. : La réponse du serveur HTTP Intro. : Du coté du navigateur... HTTP/ OK Date: Wed, 10 May :09:29 GMT Server: Apache/ (Unix) PHP/4.4.1 mod_ssl/ OpenSSL/0.9.7i X-Powered-By: PHP/4.4.1 X-Cache: jpcache vv2 - file ETag: "jpd " Content-Encoding: gzip Keep-Alive: timeout=2, max=99 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html a40 xúµyýr½>n BlgH;1½6$eaz0 5u 0mo<ò ì(ìj uâw=êô çß% 7ÓCÜ«èóJ»ëuâ@`ZÃ`ïJzŸ O (...) Les commandes de requête HTTP Commande Description GET Requête de la ressource située à l'url spécifiée HEAD Requête de l'en-tête de la ressource située à l'url spécifiée POST Envoi de données au programme situé à l'url spécifiée PUT Envoi de données à l'url spécifiée DELETE Suppression de la ressource située à l'url spécifiée Les entêtes de requête HTTP Nom de l'en-tête Accept Accept-Charset Accept-Encoding Accept-Language Authorization Content-Encoding Content-Language Content-Length Content-Type Date Forwarded From From Link Orig-URL Referer User-Agent Description Type de contenu accepté par le browser (par exemple text/html). Voir types MIME Jeu de caractères attendu par le browser Codage de données accepté par le browser Langage attendu par le browser (anglais par défaut) Identification du browser auprès du serveur Type de codage du corps de la requête Type de langage du corps de la requête Longueur du corps de la requête Type de contenu du corps de la requête (par exemple text/html). Voir types MIME Date de début de transfert des données Utilisé par les machines intermédiaires entre le browser et le serveur Permet de spécifier l'adresse du client Permet de spécifier que le document doit être envoyé s'il a été modifié depuis une certaine date Relation entre deux URL URL d'origine de la requête URL du lien à partir duquel la requête a été effectuée Chaîne donnant des informations sur le client, comme le nom et la version du navigateur, du système d'exploitation

8 Les entêtes de réponse HTTP Les URLs Nom de l'en-tête Content-Encoding Description Type de codage du corps de la réponse URI (Uniform Resource Identifier) Content-Language Content-Length Content-Type Date Type de langage du corps de la réponse Longueur du corps de la réponse Type de contenu du corps de la réponse (par exemple text/html). Voir types MIME Date de début de transfert des données URL (Uniform Resource Locator) Format de nommage universel pour désigner une ressource sur Internet. Expires Date limite de consommation des données Forwarded Location Server Utilisé par les machines intermédiaires entre le browser et le serveur Redirection vers une nouvelle URL associée au document Caractéristiques du serveur ayant envoyé la réponse Exemple : ftp://user:password@ftp.test.net:21/pub/linux/ls.tgz Les URLs Se décomposent en cinq parties : 1. Le nom du protocole : langage utilisé pour communiquer avec le destinataire ex. : 2. Identifiant et mot de passe : permet de spécifier les paramètres d'accès à un serveur sécurisé. déconseillé car le mot de passe est visible dans l'url (signets!) ex. : login:pass@ 3. Le nom du serveur : nom de domaine ou adresse ip de l'ordinateur hébergeant la ressource demandée. ex. : Les URLs 4. Le numéro de port : numéro du service demandé sur le serveur (par defaut : 80 = http) 5. Le chemin d'accès à la ressource : emplacement (répertoire) et le nom du fichier demandé ( /index.htm) Exemple complet : ftp://user:password@ftp.test.net:21/pub/linux/ls.tgz

9 Les types MIME MIME : (Multipurpose Internet Mail Extension) Standard proposé par les laboratoires Bell Communications en 1991 pour permettre d'insérer des objets multimédia (images, sons, texte,...) dans un courrier électronique. Egalement utilisé sur le Web, pour typer les documents transférés par le protocole HTTP afin d'indiquer au navigateur comment interpréter les données. Défini par la RFC 1341 et RFC 1343 Liste Exemple : 'Content-type: image/gif' -> images gif Les serveurs DNS DNS : (Domain Name System) Tout ordinateur directement connecté à l Internet est identifié par une adresse IP unique. Il est plus facile de retenir et de manipuler le nom d un serveur sous sa forme FQDN ( plutôt que son adresse ip ( ) À l origine, la correspondance FQDN adresse ip était enregistrée dans un fichier (host) qu il fallait télécharger régulièrement Ce fichier devenant beaucoup trop volumineux, il a cédé sa place à un système plus astucieux : le DNS Les serveurs DNS Intro. : Fonctionnement du DNS Le serveur DNS est un serveur de base de données distribué qui effectue la corrélation entre les adresses IP et le(s) nom(s) de domaine(s) associé(s) et vice versa. 8: cnfpt.fr is DNS 1 : who is cnfpt.fr? 2 : Req. cnfpt.fr? 3 : No. Req NS for.fr 4 : Req.fr cnfpt.fr? 5 : No. Req NS for.cnfpt.fr 6 : Req.cnfpt.fr cnfpt.fr?.com 7 : YES: fr.org.dsi.cnfpt.linux

10 LAMP : l'architecture Présentation Fonctionnement général Elements constitutifs LAMP : Fonctionnement Navigateur client Le client demande une page.php au serveur web (via son url) 2. La page source est interprétée par l interpréteur php 3. l interpréteur php exécute les requêtes sql contenues dans la page php 4. l interpréteur php retourne au serveur web la page html fusionnée 5. le serveur web transmet cette page au client 2. HTML + code PHP + SQL Page HTML 3. SGBDR Plate forme : Linux / Windows Serveur web : Apache 4. Interpréteur : PHP Mysql LAMP : Elements constitutifs Linux, Windows, (MacOS, *nix) : La plate forme d'exécution Elements constitutifs Linux / Windows : La plate forme d'execution Apache : Le serveur web (Apache) Mysql : le serveur de base de donnée (SGBDR) PHP : le langage de programmation Machine serveur support de l'architecture Fonctionne généralement sous Linux ou Windows d'autres machines peuvent recevoir ce type d'architecture (ex. : Mac Os ou Unix)

11 Apache, IIS (...) : Le serveur Web "frontal" Mysql, PostgreSQL, (Oracle,...) : Le serveur de base de données Serveur qui supporte le protocole HTTP Le plus populaire : Apache (GPL) C'est lui qui répond directement aux requêtes du client (navigateur web) Version propriétaire : Internet Information Server (Microsoft) Apache ex. : Mysql : le plus populaire (GPL) Il stocke toutes les données de l'application Ce serveur propose un langage de définition et d'interrogation des donnée : SQL Ex : Select * From User Where login='jacques'; retourne toutes les informations de la table user pour l'utilisateur 'Jacques' Apache SGBDR PHP : Le Langage PHP L'architecture Web dynamique C'est un langage interprété (script) coté serveur qui sert la logique applicative Il est généralement intégré au serveur Web sous la forme d'un module Le comportement de l'interpréteur php est configuré dans le fichier php.ini (/etc/php.ini sous Linux) Apache + Php SGBDR Tous les composants peuvent être situés : Sur un même serveur (ex. : Wamp5, EasyPHP) Sur 2 serveurs Apache + PHP sur une machine le SGBDR sur une autre Sur de nombreux serveurs (architecture n-tiers) pour assurer la haute disponibilité (répartition de charge et/ou failover)

12 Les plate formes intégrés EasyPHP : Présentation Une plate forme Php intégrée est un programme monobloc qui installe et configure automatiquement tous les serveurs et composants nécessaires à l'exécution des pages web dynamiques Php. Sous Windows : Wamp5 : Apache2, Mysql v5, Php5 + phpmyadmin EasyPhp : très populaire mais un peu en retard (php4) EasyPHP installe et configure automatiquement un environnement de travail complet sous Windows permettant de mettre en oeuvre toute la puissance et la souplesse qu'offrent le langage dynamique PHP et son support efficace des bases de données. XAMPP : le plus complet. Fonctionne aussi sur Linux EasyPHP : Composition EasyPHP : Installation EasyPHP regroupe : Le serveur web Apache Une base de données Mysql Le langage PHP L'outil PhpMyadmin Des outils de gestion des serveurs Dans un seul et même programme... -> le tout déjà configuré! Permet de disposer de sa propre architecture WAMP perso : Simplement et gratuitement!

13 Programmation PHP Le langage HTML Plan du cours Le langage html et xhtml Présentation, Application / limitation Structure d'une page (x)html, document bien formé Les balises Les formulaires Les feuilles de style Exercices pratiques Réalisation d'un site web statique composé de plusieurs pages avec menu HTML : Les pages "Web" Présentation Application / limitation de HTML Document (x)html minimum bien formé Les balises les plus courantes HTML : C'est quoi? HTML : (HyperText Markup Language ) Langage de mise en forme (description) des documents hypertexte (pages Web). standard initié par le W3C, issu de SGML compatible avec tous les systèmes (pc, mac, linux,...) se compose de texte codé en ASCII (7 bits) transporté par le protocole http affichable par un navigateur Web (browser) inclue des balises de formatage textuel <font>

14 Application / limitation de HTML Logiciels nécessaires Applications : Affichage de pages multimédia liées entre elles par des liens hypertextes et publiées sur Internet Limitations : Relativement statiques L'apparence n'est pas garantie (dépend du navigateur) Le(s) langage(s) de programmation intégré(s) (Javascript, VBscript) ne permettent pas de créer de véritables programmes fiables (ex. : programme de gestion, interrogation des bases de données,...) Un navigateur (browser) : pour afficher (interpréter) votre page de code HTML (Firefox, Internet Explorer, Opera,...) Un éditeur : 2 familles : WYSIWYG : What You See Is What You Get «tel affichage, tel résultat» (ex. : Dreamweaver, NVu,...) ASCII : simple éditeur de texte Notepad (présent dans Windows), notepad++ (coloration syntaxique) Structure d'un document Document bien formé Une page HTML est toujours composée au minimum : Le Doctype : Des balises d'ouverture et de fermeture : <html>...</html> D'un entête (<head>...</head>) qui contient des renseignements qui ne seront pas affichés dans le document par le navigateur web comme : le titre (en haut de la fenêtre) les balises metas (name et/ou http-equiv) Indique quelle norme est respectée par le code contenu dans la page HTML et donne un lien vers sa DTD. C'est un critère de qualité du code html Autorise l'analyse du code par un parser XML (xhtml) les liens vers d'autres fichiers (javascript, css,...) Du corps (<body></body>) qui comprend le texte, les images et autres informations du document

15 (X)HTML : Document bien formé (X)HTML : Document bien formé Depuis le 26 janvier 2000, le XHTML est la nouvelle norme du W3C en matière de langage balisé pour concevoir des documents Web. Exemple : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " Les balises HTML Les balises de style Les balises de style Les titres Les paragraphes Les listes Les tableaux Les liens hypertextes Les images Les formulaires Les méta tags

16 Les titres Les paragraphes Les listes Les tableaux

17 Les liens hypertextes Les images Les formulaires (1) Les formulaires (1)

18 Les formulaires (2) Les formulaires (2) Les méta tags Les méta tags Balises spéciales situées dans l'en-tête du document (<head></head) Non affichées par les navigateurs 2 types : Les Metas NAME : pour décrire le contenu d'une page html Les Metas HTTP-EQUIV : pour envoyer des informations au navigateur via le protocole HTTP Syntaxe : <meta name="nom" content="attribut"> <meta http-equiv="nom" content="attribut">

19 Programmation PHP Les feuilles de style CSS CSS : Définition CSS : Cascading Style Sheet Modèle qui associe des mises en formes aux balises html pour une ou plusieurs pages web.. Permet de gagner du temps dans la mise à jour Les feuilles de style déterminent la mise en forme des page HTML indépendamment du contenu. Peut être défini dans l'entête de la page et ou dans un fichier externe lié. Exemple d'utilisation : CSS : Définition Pourquoi "en cascade"? Il est possible de définir et de redéfinir les styles d'un document à l'aide de plusieurs feuilles de styles. Si plusieurs styles concernent le même élément, seul le dernier style sera conservé. Exemple (dans l'entête d'un même document html) : <LINK rel=stylesheet type="text/css" href="style1.css"> <LINK rel=stylesheet type="text/css" href="style2.css"> <LINK rel=stylesheet type="text/css" href="style3.css"> CSS : Avantages et Inconvénients Avantages : Permet de séparer le contenu de la mise en forme. Assure la cohérence de la présentation de toutes les pages d'un même site (feuilles de style externes). Facilite la maintenance (modification d'une balise dans un fichier plutôt que toutes les pages individuellement) Plus compréhensible, simple et logique pour le webmaster. Réduit le temps de chargement des pages. Permet le positionnement au pixel près du texte et/ou des images.

20 CSS : Avantages et Inconvénients CSS : la syntaxe Inconvénients : Problème de compatibilité : Les navigateurs gèrent souvent une même feuille de style de manière différente. Certains attributs bien pratiques et supportés par les navigateurs ne font pas partis de la norme CSS : Une feuille de style CSS contient des règles Une règle est composée : d'un sélecteur : balise sur laquelle porte les styles de mise en forme et d'un bloc de déclaration composé : d'une ou plusieurs déclaration de couple propriété : valeur(s) associée(s) CSS : Les sélecteurs CSS : Les sélecteurs Sélecteur multiple (ex. : a, u { /* style */ }) La règle applique un style au contenu des balises : <a></a> et <u></u> Sélecteur consécutif (ex. : p + i { /* style */ }) La règle ne s'applique que lorsque un élément i suit immédiatement un élément p Sélecteur universel (ex. : * { /* style */ }) La règle s'applique à toutes les balises HTML Sélecteur imbriqué (ex. : p i { /* style */ }) Sélecteur fils (ex. : p > i { /* style */ }) La règle ne s'applique que lorsque un élément i est fils direct d'un élément p Il est possible de sélectionner une balise en fonction des éléments qui l'entourent <p><i>le style s'applique ici</i> mais pas là!</p>

21 CSS : L'incorporation 3 façons de définir une feuille de style : définition "In line" : les styles sont déclarés en tant qu'attributs d'une balise <p style= "font-size: 16pt;">test</p> définition "Embedding" : les styles sont incorporés dans l'entête du document <head><style type= "text/css">p {font-size: 16pt;}...</style></head> définition "Linking" : les styles sont déclarés dans "une feuille de style" externe (.css) qui contient les différents styles utilisés dans la page CSS : Les balises <span> et <div> La balise <SPAN> sert à appliquer des styles à des morceaux de paragraphe. <SPAN class="nom_de_la_classe"> Texte </SPAN> La balise <DIV> s'applique à un bloc (un ou plusieurs paragraphes). <DIV class="important"> paragraphes </DIV> <head><link rel="stylesheet" href="screen.css"/></head> (w3c) : <head><style type="text/css">@import url(screen.css);</style></head> CSS : Les classes CSS : Les pseudo-classes Les classes (universelles) : Les pseudo-classes dynamiques : Permettent d'affecter des styles différents à des balises identiques. Exemple : Permettent de modifier le style d'une balise en fonction d'un événement: Déclaration : le survol d'une balise par le curseur de la souris :.important {font : Verdana 12px; color :#FF0000;}.vert {color: #00FF00;} A:hover {font-decoration: underline;} le "focus" sur un élément de formulaire Utilisation : TEXTAREA:focus {color: #FF0000;} <p class="important"> texte important</p> <p class="vert">texte en vert</p> la sélection d'un élément A:active {color: #FF0000;}

22 CSS : Les pseudo-classes CSS : Les pseudo-classes Les pseudo-classes de lien : La pseudo-classe descendante : Pseudo-classes spécifiques à la balise <A> a:link : définit le style des liens hypertextes qui n'ont pas encore été consultés par le client A:link { /* style */} a:visited : définit le style des liens hypertextes que le client a déjà visités Permet d'appliquer un style à la première balise concernée si elle suit immédiatement la balise père Exemple : La déclaration : P > A:first-child {color: #00FF00;} A:visited { /* style */} Applique le style color à la première balise A si c'est la première balise rencontrée après la P. CSS : Les pseudo-classes CSS : Les ID Les pseudo-classes de texte : Permettent d'appliquer un style à une partie du texte délimitée par les balises auxquelles ils s'appliquent. Il en existe 2 : P:first-line { text-transform: uppercase } Applique le style à la première ligne d'un paragraphe Permettent d'attribuer un style à un élément unique d'une page HTML Les ID servent également à localiser les éléments HTML grâce au Javascript. Déclaration : #nom_id { style } P:first-letter { font-size: 200%; font-weight: bold; } Applique le style à la première lettre d'un paragraphe Utilisation : <BALISE ID="nom_ID">...</BALISE>

23 CSS : Les unités Il est possible de définir les valeurs numériques de plusieurs façons : Absolue : indépendante du format de sortie cm : in : le centimètre le pouce (2,54cm) mm : le millimètre pt : pc : le point le pica (=12pt) Relative : par rapport à l'élément. em : ex : px : % : relative à la taille de police de l'élément sélectionné relative à la hauteur de la minuscule de l'élément pixel (dépend de la résolution du périph. d'affichage) relative à la taille de l'élément ou de son parent CSS : Les couleurs CSS propose différentes façons de définir des couleurs dans les feuilles de styles: Code RVB en hexadécimale : #RRVVBB h1 {color: #0000FF} Par un nom (16 couleurs html orange) aqua, green, orange, white, black, lime, purple, yellow, blue, maroon, red, fuschia, navy, silver, gray, olive, teal h1 {color: blue} CSS : Le positionnement CSS : Le positionnement Il est possible de positionner au pixel près du texte ou des images à l'aide des balises <SPAN> et <DIV>. Positionnement du texte : <SPAN style="position: absolute; top: 50 px; left: 80 px;">texte</span> Le positionnement relatif et absolu : Positionnement d'une image : Absolu {position: absolute} Par rapport au coin supérieur gauche de la fenêtre du navigateur De haut en bas (top) et de gauche à droite (left) Relatif {position: relative} <SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px"><IMG SRC="test.jpg" ></SPAN> Superposition des éléments : grâce au positionnement absolu, il est possible de superposer des éléments Par rapport à d'autres éléments le dernier élément positionné est toujours "dessus"

24 CSS : Liste des propriétés Propriétés de polices CSS : Liste des propriétés Texte et paragraphes Source : Source : CSS : Liste des propriétés CSS : Liste des propriétés Couleurs et arrière plan Les marges et les bordures Source : Source :

25 CSS : Liste des propriétés Espaces intérieurs et les tableaux CSS : Liste des propriétés Les listes Source : Source : CSS : Liste des propriétés Programmation PHP La mise en page Programmation en PHP Source :

26 PHP : Le langage Introduction Premiers pas avec PHP Les bases du langage Quelques exemples de code Introduction Les origines : Mis au point en 1994 par Rasmus Lerdorf A l'origine, ce langage lui permettait de conserver dans une base de données la trace des visiteurs qui consultaient son cv sur son site web. Il mit en ligne la première version qu'il baptisa Personal Sommaire Page Tools puis Personal Home Page v1.0 en 1995 pour devenir enfin : Hypertext Preprocessor PHP/FI v2 durant l'été 1995 PHP3 le 6 juin 1998, PHP4 fin 1999, puis PHP5 Introduction Pourquoi programmer en PHP? PHP est gratuit (GPL) Contrairement à d'autres technologies propriétaires (comme ASP ou ColdFusion) vous ne devez verser aucun droit pour développer vos propres applications web. PHP est simple à programmer C'est un langage interprété qui s'insère simplement dans le code html d'une page web Introduction Pourquoi programmer en PHP? PHP est très populaire Une grande communauté de développeurs partagent leurs codes et leurs expériences sur l'internet Il est supporté par la majorité des hébergeurs sur Internet PHP est portable Votre application web PHP fonctionnera indifféremment sur un serveur UNIX, Macintosh ou Windows

27 Introduction PHP : C'est quoi? Un script PHP est Source : un simple fichier texte stocké sur un serveur, contenant des instructions incluses dans un code HTML à l'aide de balises spéciales. Ce fichier doit avoir l'extension «.php» pour pouvoir être interprété par le serveur. Le code PHP stocké sur le serveur n'est donc jamais visible directement par le client puisque dès qu'il en demande l'accès, le serveur l'interprète! De cette façon aucune modification n'est à apporter sur les navigateurs. PHP : Pour quoi faire? PHP : Comment ça marche? Typiquement, le langage PHP est utilisé pour : Analyser les données soumises par un formulaire HTML Communiquer avec des SGBDR Lorsque le navigateur du client demande au serveur une page dynamique réalisée en PHP : le serveur reconnaît l'extension (.php) d'un fichier PHP et le transmet à l'interpréteur PHP Effectuer des calculs «à la volée» Dès que l'interpréteur rencontre une balise php Ce langage couplé à un SGBDR permet aux développeurs de réaliser des sites web dynamiques. (<?php), il exécute le contenu jusqu'à la fin (?>) L'interpréteur exécute l'instruction puis envoie les sorties éventuelles au serveur Connexion à des bases de données, envoi de mail, production d'image, génération de documents... A la fin du script, le serveur web (apache) transmet le résultat (html) au navigateur du client.

Montrer encore