Cours développement Web

POP3 : Post Office Protocol

idupe — Fri, 22 May 2009 15:12:57 +0000

PROPRIETES

Protocole de récupération du courrier.

Version 3 de POP.

Le plus répandu.

Décrit de manière détaillée dans la RFC 1939.

Comme il a été dit SMTP ne s’intéresse qu’au transfert des messages et fonctionne bien à la condition que le destinataire soit connecté à Internet. En cas d’échec, les courriers ne sont pas transmis. C’est pourquoi, de manière générale, le transfert de courriers se fait en deux phases et met en jeu plusieurs protocoles. SMTP est exécuté sur des ordinateurs toujours connectés à Internet qui servent de relai à l’échange de courriers entre les ordinateurs destinataires. Un autre protocole sera exécuté pour l’acheminement du courrier vers l’ordinateur de l’utilisateur final. Deux protocoles prennent en charge cette dernière fonction : POP3 et IMAP4 qui sera vu dans un autre chapître.

MODE OPERATOIRE

Le client POP3 érablit une connexion TCT vers le serveur POP3 où sont stockées les boites à lettres.
L’utilisateur s’authentifie par un nom d’utilisateur (login) et mot de passe.
Une fois l’identification validée, le client POP3 commande le retrait des messages de la boite aux lettres.
Le serveur transfère les messages au client sous forme de fichiers texte au format standard.

SMTP : Protocole simple de transfert de messages

idupe — Fri, 22 May 2009 14:52:09 +0000

Propriétés

Simple Message Transfert Protocol

Protocole d’échange de messages entre ordinateurs. Fonctionne en mode connecté. Utilise par défaut le port 25.

S’intéresse au transfert des messages envoyés par un client à un serveur.

Décrit de manière détaillée dans la RFC 2821.

Les échanges entre le client et le serveur se font sous forme de texte.

De plus,SMTP permet au serveur d’informer le client d’un changement d’adresse de l’utilisateur et permet aussi de re-diriger le client vers la nouvelle adresse.

En revanche, SMTP ne gère pas les erreurs de diffusion du courrier, c’est au client de décider s’il interrompt l’échange ou bien s’il le poursuit en signalant les erreurs. En général, les erreurs sont signalées à l’émetteur par le courreir électronique.

MODE OPERATOIRE

Le client établit la connexion
Dès qu’il est prêt, le serveur répond : 220 READY FOR MAIL (prêt pour l’échange de mail)
Le client répond : EHLO.
Le serveur se présente.
La communication est établie.
Le client peut alors envoyer ou recevoir des messages ou bien fermer la connexion.

Chaque message reçu doit être acquitté.

LES COMMANDES SMTP D’UN ECHANGE DE COURRIER

MAIL FROM : identifie l’expéditeur du message et donne l’adresse où seront envoyées les erreurs.

Illustration : MAIL FROM DD@free.fr

250 OK : le destinataire répond à la commande MAIL que tout va bien.
RCPT TO : identifie le destinataire du courrier.

Illustration : RCPT TO marie@free.fr

La commande RCPT vient après une émission réussie de la commande MAIL réussie. L’expéditeur du message peut envoyer plusieurs RCPT par courrier.

Pour chaque commande RCPT envoyée, le destinataire doit accuser réception en répondant 250 OK (utilisateur connu) ou bien 550 No such user here (utilisateur inconnu).

Après réception de tous les accusés,

DATA : l’expéditeur indique au destinataire qu’il est prêt à transmettre le message. Le destinataire répond par un 354 Start mail input (début de la réception du message) et précise la séquence de caractères à utiliser pour signaler la fin des messages.
L’échange se termine avec la séquence suivante : CR (retour chariot), LF (saut de ligne), . (point), CR et LF
QUIT : ferme la communication.

Exemple d’utilisation du protocole HTTP

idupe — Sun, 03 May 2009 19:01:25 +0000

Installer un serveur HTTP, WAMP par exemple, à télécharger sur Internet
Créer un dossier appelé MONDOSSIER dans le sous-répertoire www du répertoire wamp
Recopier le code ci-après dans un fichier texte nommé monfichier.html

Voici un exemple d’utilisation du protocole HTTP

Ici un lien vers un article sur wikipedia

Découvrez Marseille

et pour

envoyer un mail

une image externe sur le site a DD,
dans le répertoire ‘uploads’ en http :

la

Appelons maintenant ce fichier depuis le navigateur de votre choix (Internet Explorer ou Mozilla Firefox) en recopiant l’URL suivante :

http://localhost/MONDOSSIER/monfichier.html

Allons voir dans le répertoire C:wamplogs le contenu du fichier access, on y trouve le message reçu par le serveur HTTP à notre requête précédente :

“GET /DOSSIERTEST/TEST.html HTTP/1.1″ 200 733

“GET /images/marseille.jpg HTTP/1.1″ 200 23829

Le code retour 200 indique que le document a bien été trouvé.

En-têtes HTTP 1.1

idupe — Wed, 29 Apr 2009 15:35:05 +0000

Accept
est utilisé pour spécifier les types de media acceptés dans la réponse.
Exemple :
Accept: text/html; q=1.0, text/*; q=0.8, image/gif; q=0.6, image/jpeg; q=0.6, image/*; q=0.5, */*; q=0.1
L’asterisque “*” est utilisée pour regrouper les types de media, “*/*” indique tous les types de media et “type/*” indique tous les sous-types de ce type.
Chaque type peut être associé à un facteur de préférence noté “q” , sur une échelle de 0 à 1. La valeur par défaut est 1.
Dans l’exemple, le navigateur prend en charge divers types de media texte et html en préférant le html au texte et les images de type jpeg et gif aux autres types.

Accept-Charset
est utilisé pour indiquer quels jeux de caractères sont acceptables par la réponse
Exemple : Accept-Charset: iso-8859-5, unicode-1-1;q=0.8

La valeur particulière “*”, si elle est présente dans le champ Accept-Charset inclut n’importe quel jeu de caractères (y compris ISO-8859-1). Si aucune “*” n’est présente dans le champ Accept-Charset, alors les caractères non mentionnés de manière explicite ont une préférence à 0, excepté ISO-8859-1, qui a une préférence à 1 par défaut.

En l’absence d’entête Accept-Charset, tout jeu de caracère est acceptable par défaut.
En présence d’une entête Accept-Charset, et si le serveur ne peut répondre conformément, alors il se peut que le serveur renvoie le code retour 406 (not acceptable) en réponse à la requête.

Accept-Encoding

permet d’indiquer que le navigateur accepte les données compressées.

Exemple :

Accept-Encoding: compress;q=0.5, gzip;q=1.0

Dans cet exemple, le navigateur prend en charge le format gzip de préférence, mais également le format compress.

Accept-Language
restreint le jeu de langages acceptés pour la réponse
Exemple :
Accept-Language: fr, en-gb;q=0.8, en;q=0.7

signifie je préfère le français mais j’accepte également l’anglais.A language-range matches a language-tag if it exactly equals the tag, or if it exactly equals a prefix of the tag such that the first tag character following the prefix is “-”. The special range “*”, if present in the Accept-Language field, matches every tag not matched by any other range present in the Accept-Language field.

Accept-Ranges

permet au serveur de spécifier le type de requête acceptable pour une ressource
Accept-Ranges: bytes

Accept-Ranges : none

Age

indique au cache la “fraîcheur ” du document, c’est une valeur exprimée en secondes.

Allow
indique les méthodes supportées par la ressource spécifiée à l’URI.
En cas de méthode non autorisée, le serveur enverra un code retour 405(Method Not Allowed).

Exemple :

Allow: GET, HEAD, PUT

Authorization
Un utilisateur qui veut s’identifier auprès d’un serveur, dans le cas d’un code retour 401 par exemple, le fait en incluant un en-tête Authorization à la requête.

Cache-Control

Le navigateur ou le serveur peuvent donner des directives à un cache.
L’en-tête Cache-Control a pour valeur une liste de directives, séparées par des virgules.

Note : L’en-tête Cache-Control n’est pas implémentée sous HTTP 1.0, la seule directive prise en charge est Pragma: no-cache.

Exemple :

Cache-Control: max-stale=3600
La ressource devra être rafraîchie au-delà de 3600 secondes soit 1 heure.
Cache-Control: max-stale=0
La ressource devra être constamment rafraîchie.

Les valeurs possibles sont :
public:La réponse HTTP peut être mise en cache par n'importe quel cache.
private:La réponse est destinée à un client unique et ne doit pas être mise en cache par un cache partagé.
no-cache:aucune mise en cache de la ressource n'est autorisée.
no-store:Empêche le stockage sur disque de la donnée.
no-transform:indique au cache qu'il ne doit pas transformer le corps du message qu'il reçoit.
max-age:âge maximum d'une ressource-exprimé en seconde.
max-stale: précise le temps de mise en cache de l'élément-exprimé en secondes.
must-revalidate:force une reconnexion au serveur avec un If-Modified-Since et doit provoquer une erreur 505 si la page a disparu.

Connection
Cet en-tête peut être envoyé par le client ou le serveur et contient une liste de noms spécifiant les options à utiliser avec la connexion actuelle.
Si une option possède des paramètres ceux-ci sont spécifiés par l'en-tête portant le même nom que l'option
Connection: keep-alive
indique que la connexion reste ouverte, on dit qu'elle est persistante.
Connection: close
indique que la connexion doit être fermée après traitement de la requête en cours.

Content-Encoding
Permet d'indiquer le type de codage du corps de la requête.
Content-Encoding: gzip

Content-Language
Permet d'indiquer la lutilisée dans le document
Exemple :
Content-Language: fr

Content-Length
Permet d'indiquer la taille du corps du document, exprimé en nombre d'octets.
Exemple :
       Content-Length: 3495

Content-Location
permet de définir un emplacement de contenu.
Exemple :
Content-Location : http://www.domain.com/Default.htm

Content-Type
permet de définir le type de contenu du message.
Exemple :
Content-Type: text/html; charset=ISO-8859-4
Parmi les types de contenu, citons : - text/plain (texte uniquement) - text/HTML (texte plus html) - multipart/mixed - multipart/alternative

Date 
Indique la date et l'heure à laquelle le message a été généré.
Exemple :
Date: Fri, 01 May 2009 20:00:31 GMT

Expires
indique la date et l'heure à partir de laquelle le message doit être considéré comme obsolète.
Exemple :
Expires: Fri, 01 May 2009 20:10:00 GMT
Les applications ne doivent pas enregistrer ces entités dans leur cache après la date spécifiée.
Pour autant, la présence d'un champ Expires ne signifie pas que la ressource originale n'a pas changé ou n'existe plus après cette date.

From
peut contenir l' adresse e-mail de l'utilisateur émetteur de la requête en respectant les spécifications définies dans la RFC 822 [9] modifiée par  RFC 1123 [8]:
Exemple :
      From: webmaster@w3.org

Host
spécifie le site et le numéro de port de la ressouce demandée.
Par défaut le port est 80 en HTTP.
Exemple :
GET /pub/WWW/ HTTP/1.1
       Host: www.w3.org
Cet en-tête est obligatoire pour toute requête HTTP.

If-Modified-Since
est utilisé avec une méthode pour la rendre conditionnelle.
Exemple :
If-Modified-Since: Sat, 29 Oct 2009 19:43:31 GMT

Si la ressource n'a pas été modifiée depuis le temps indiquée, elle ne sera pas renvoyée par le serveur. A la place, un code retour 304 (not modified)
sera retourné.
L'intérêt de cet en-tête est d'optimiser les informations en cache, en réduisant au maximum les transactions réseau.

Last-Modified

Indique la date et l'heure à laquelle le serveur pense que la ressource a été modifiée.
Exemple :
       Last-Modified: Fri, 01 May 2009 20:00:31 GMT

Location
est utilisé dans le cas de la re-direction d'une ressource.
Exemple :
Location: http://www.w3.org/pub/WWW/People.html
Le champ d'en-tête Location (réponse) renvoie la localisation exacte de la ressource identifiée par l'URI-visée de la requête.
Pour des réponses 3xx, ce champ indique l'URL "de préférence" donnée par le serveur pour la fonction de redirection automatique.
Une seule URI absolue peut être mentionnée à la fois.

Codes retour HTTP

idupe — Mon, 27 Apr 2009 14:32:23 +0000

Code	Message	Détail ou action
1XX	Codes d’information
100	Continue	Attendre la suite de la requête
101	Switching protocol	Le serveur a accepté le changement de protocole
2XX	Succès
200	OK	Requête traitée avec succès
201	Created	Requête traitée avec succès et création d’un document
202	Accepted	Requête traitée avec succès mais sans garantie de résultat
203	Non-authoritative information	Information retournée mais générée par une source non certifiée
204	No Content	Requête traitée avec succès mais pas d’information à renvoyer
205	Reset Content	Requête traitée avec succès, la page courante peut être effacée
206	Partial Content	Une partie seulement de la requête a été transmise
3XX	Redirection
300	Multiple Choices	L’URI demandée se rapporte à plusieurs ressources
301	Moved Permanently	Document déplacé de façon permanente
302	Moved Temporarily	Document déplacé de façon temporaire
303	See Other	La réponse à cette requête est ailleurs
304	Not Modified	Document non-modifié depuis la dernière requête
305	Use Proxy	La requête doit être ré-adressée au proxy
307	Temporary Redirect	La requête doit être redirigée temporairement vers l’URI spécifiée
4XX	Erreur du client
400	Bad Request	La syntaxe de la requête est erronée
401	Unauthorized	Accès à la ressource refusé
402	Payment Required	Paiement requis pour accéder à la ressource (non utilisé)
403	Forbidden	Refus de traitement de la requête
404	Not Found	Document non trouvé
405	Method Not Allowed	Méthode de requête non autorisée
406	Not Acceptable	Toutes les réponses possibles seront refusées.
407	Proxy Authentication Required	Accès à la ressource autorisé par identification avec le proxy
408	Request Time-out	Temps d’attente d’une réponse du serveur écoulé
409	Conflict	La requête ne peut être traitée à l’état actuel
410	Gone	La ressource est indisponible et aucune adresse de redirection n’est connue
411	Length Required	La longueur de la requête n’a pas été précisée
412	Precondition Failed	Préconditions envoyées par la requête non-vérifiées
413	Request Entity Too Large	Traitement abandonné dû à une requête trop importante
414	Request-URI Too Long	URI trop longue
415	Unsupported Media Type	Format de requête non-supportée pour une méthode et une ressource données
416	Requested range unsatisfiable	Champs d’en-tête de requête ‘range’ incorrect.
417	Expectation failed	Comportement attendu et défini dans l’en-tête de la requête insatisfaisable
5XX	Erreur du serveur
500	Internal Server Error	Erreur interne du serveur
501	Not Implemented	Fonctionnalité réclamée non supportée par le serveur
502	Bad Gateway ou Proxy Error	Mauvaise réponse envoyée à un serveur intermédiaire par un autre serveur.
503	Service Unavailable	Service indisponible
504	Gateway Time-out	Temps d’attente d’une réponse d’un serveur à un serveur intermédiaire écoulé
505	HTTP Version not supported	Version HTTP non gérée par le serveur
509	Bandwidth Limit Exceeded	Code non officiel utilisé par de nombreux serveurs pour indiquer un dépassement de quota

Protocole HTTP

idupe — Mon, 06 Apr 2009 11:18:01 +0000

Propriétés

HTTP : Hyper Text Transfert Protocol, protocole de transfert hypertexte.

Mis au point en même temps qu’ HTML par Tim Berners Lee en 1990.
S’appuie (comme les autres protocoles du Net) sur TCP/IP.
Permet l’échange de document HYPERTEXTE entre un serveur HTTP et un client HTTP sur le World Wide Web.

Par défaut le port utilisé sur ce type de requête sera 80.

Les versions actuellement utilisées sont la 1.0 et la 1.1

Voir la RFC 2616 du W3C pour la description complète du protocole, et notamment les paragraphes REQUEST et RESPONSE.

Le protocole le plus utilisé sur le NET.

Exemple :

Quand je tape l'adresse : http://fr.wikipedia.org/wiki/Accueil sur mon navigateur Mozilla ou bien Internet Explorer, je demande au serveur Wikipedia de transférer la page d'accueil de l'encyclopédie à mon navigateur, en utilisant le protocole HTTP.

En guise de réponse, le serveur enverra le document à ma machine et mon navigateur l'affichera sous forme de page au format HTML.

Les phases du dialogue HTTP

Le dialogue HTTP consiste en un échange de messages entre le client et le serveur, il s’effectue en plusieurs phases.

Coté client :

Ouverture de la connexion vers le serveur HTTP, et formulation de la requête HTTP
Envoi d’une entête précisant les caractéristiques du demandeur

Coté serveur :

Traitement de la requête,
Précision des caractéristiques du serveur et de l’information demandée
Envoi de la réponse HTTP, en général il s’agit du document

Construction d’une requête HTTP

Une requête HTTP est une séquence de lignes envoyées au serveur par le client. Elle peut comprendre jusqu’à trois éléments :

une ligne de requête elle-même composée de :
- la méthode à utiliser : elle indique le type de requête.
- l’adresse de la ressource demandée : l’URL
- la version du protocole utilisée par le client : HTTP 1.0 ou HTTP 1.1
une ou plusieurs lignes d’en-tête : facultatives, elles peuvent préciser les caractéristiques du navigateur, le type de contenu, l’adresse mel du client …
une ou plusieurs lignes constituant le corps de la requête : facultatives également, elles doivent être séparées des lignes précédentes par une ligne vide (un retour chariot+1ligne blanche). Elles vont contenir par exemple les données d’un formulaire, dans le cas de la méthode POST.

En résumé, une requête HTTP aura la forme suivante , sachant que les caractères rn insèrent un retour chariot et saut de ligne.

METHODE URL VERSION rn
EN-TETE 1 : Valeur rn
EN-TETE 2: Valeur rn

EN-TETE N: Valeur rn

CORPS DE LA REQUETE

Les METHODES

GET et PUT sont les plus utilisées.

Les méthodes prises en charge par HTTP 1.0 sont les suivantes :

GET : demande de ressource (document simple ou programme CGI ou Script Server qui renvoie des informations).

HEAD : demande d’information sur le document : peut servir pour le cache (test de la date), pour évaluer le type et la taille du document, etc.

POST : envoi de données , via un formulaire en général.

Les paramètres sont transmis dans le corps de la requête, en général au format URL-encoded (param1=val¶m2=val2)

PUT : stocke un document sur le serveur

DELETE : supprime un document du serveur (peu ou pas autorisé)

TRACE : demande de débogage (trace des serveurs proxy utilisés)

CONNECT : pour les connexions sécurisées HTTPS

Introduction

idupe — Tue, 31 Mar 2009 12:12:38 +0000

Un protocole est un mode opératoire STANDARD permettant à des machines identifiées par leur adresse de communiquer à travers des réseaux informatiques et de télécommunications.

Il se présente comme un ensemble de règles, destinées à structurer le dialogue, formater les messages, séquencer les opérations, coder l’information, régler la transmission, tout comme un langage permet à des personnes de communiquer à l’aide de mots et de règles de grammaires.

Un protocole est exécuté par un programme (logiciel de communication) installé sur les équipements qui communiquent.

Chaque protocole est décrit de manière détaillée dans une RFC (Requests For Comment) au W3C (source des standards du NET) .
Le protocole le plus utilisé sur le Net est HTTP, le protocole de communication pour le transfert hypertexte.

Il est décrit dans le RFC 2616. Vous l’utilisez chaque fois que vous tapez une adresse du type “HTTP://www….” sur la toile.
Autre protocole communément utilisé : SMTP, pour envoyer et recevoir des messages à travers le Net.

CSS3 - guide de référence

admin — Mon, 27 Oct 2008 15:21:09 +0000

La table qui suit résume la syntaxe des sélecteurs W3C :

Séquence	Signification
*	tout élément
E	tout élément de type E
E[foo]	tout élément E portant l’attribut “foo”
E[foo="bar"]	tout élément E portant l’attribut” foo” et dont la valeur de cet attribut est exactement “bar”
E[foo~="bar"]	tout élément E dont l’attribut “foo” contient une liste de valeurs séparées par des espaces, l’une de ces valeurs étant exactement égale à “bar”
E[foo^="bar"]	tout élément E dont la valeur de l’attribut “foo” commence exactement par la chaîne “bar”
E[foo$="bar"]	tout élément E dont la valeur de l’attribut “foo” finit exactement par la chaîne “bar”
E[foo*="bar"]	tout élément E dont la valeur de l’attribut “foo” contient la sous-chaîne “bar”
E[lang\|="en"]	tout élément E dont l’attribut ‘lang” est une liste de valeurs séparées par des tirets et commençant (à gauche) par “en”
E:root	un élément E, racine du document
E:nth-child(n)	un élément E qui est le n-ième enfant de son parent
E:nth-last-child(n)	un élément E qui est le n-ième enfant de son parent en comptant depuis le dernier enfant
E:nth-of-type(n)	un élément E qui est le n-ième enfant de son parent et de ce type
E:nth-last-of-type(n)	un élément E qui est le n-ième enfant de son parent et de ce type en comptant depuis le dernier enfant
E:first-child	un élément E, premier enfant de son parent
E:last-child	un élément E, dernier enfant de son parent
E:first-of-type	un élément E, premier enfant de son type
E:last-of-type	un élément E, dernier enfant de son type
E:only-child	un élément E, seul enfant de son parent
E:only-of-type	un élément E, seul enfant de son type
E:empty	un élément E qui n’a aucun enfant (y compris noeuds textuels purs)
E:link E:visited	un élément E qui est la source d’un hyperlien dont la cible n’a pas encore été visitée (:link) ou a déjà été visitée (:visited)
E:active E:hover E:focus	un élément E pendant certaines actions de l’usager
E:target	un élément E qui est la cible de l’URL d’origine contenant lui-même un fragment identifiant.
E:lang(c)	un élément E dont le langage (humain) est c (le langage du document spécifie comment le langage humain est déterminé)
E:enabled E:disabled	un élément d’interface utilisateur E qui est actif ou inactif.
E:checked E:indeterminate	un élément d’interface utilisateur E qui est coché ou dont l’état est indéterminé (par exemple un bouton-radio ou une case à cocher)
E:contains(”foo”)	un élément E dont le contenu textuel concaténé contient la sous-chaîne “foo”
E::first-line	la première ligne formatée d’un élément E
E::first-letter	le premier caractère formaté d’un élément E
E::selection	la partie d’un élément E qui est actuellement sélectionnée/mise en exergue par l’usager
E::before	le contenu généré avant un élément E
E::after	le contenu généré après un élément E
E.warning	Uniquement en HTML. Identique à E[class~="warning"].
E#myid	un élément E dont l’ID est égal à “myid”.
E:not(s)	un élément E qui n’est pas représenté par le sélecteur simple s
E F	un élément F qui est le descendant d’un élément E
E > F	un élément F qui est le fils d’un élément E
E + F	un élément F immédiatement précédé par un élément E
E ~ F	un élément F précédé par un élément E

Positionnement en CSS

admin — Fri, 24 Oct 2008 12:24:36 +0000

Il est possible avec CSS de placer un élément ou l’on souhaite, dans une page.
Et de réaliser ainsi une mise en page évoluée, bien au dela de la simple présentation de contenu.
Pour positionner un élément dans une page on utilisera les propriétés :

position
left
right
top
bottom

Les positions se mesurent généralement en pixels. L’origine du repère (coordonnées 0,0) est en haut à gauche.

Le Positionnement absolu

Les positions des éléments seront repérées dans la fenêtre du navigateur, par la distance par rapport aux bords de la fenêtre.
Ainsi pour mettre un élément à 30 pixel du bord en haut a gauche on écrira :

h1 {
position:absolute;
top: 30px;
left: 30px;
}

et pour le mettre en bas à droite (toujours à 30 pixels du coin) :

h1 {
position:absolute;
bottom: 30px;
right: 30px;
}

L’affichage de l’élement est ABSOLU et donc indépendant du contenu de la page, notamment des élément qui apparaissenet ‘avant’ ou ‘après’ dans le document MySQL.
Ceci sera plus clair sur un exemple, soit le code suivant, qui réutilise notre positionnement absolu à 30 pixels :

Avant titre Avant titre Avant titre
Avant titre Avant titre Avant titre

Titre 1

Apres titre Apres titre Apres titre
Apres titre Apres titre Apres titre

cela donne à l’écran :

Lorsque les éléments sont dans des boites, on positionnera…la boite.
Ceci est possible de manière relative ou de manière absolue.

Le positionnement relatif

La valeur de la propriété position est “relative”.
La différence avec précédemment est que la position est calculée.par rapport au contenu,
qui précède ou qui suit l’élément et non plus indépendaemment.
Reprenons l’exemple précédent en changeant simplement la propriété ‘position’.

Avant titre Avant titre Avant titre
Avant titre Avant titre Avant titre

Titre 1

Apres titre Apres titre Apres titre
Apres titre Apres titre Apres titre

Cela nous donne désormais à l’écran :

Recouvrement et z-index

Si l’on utilise les positions absolues, en décalant légèrement les uns par rapport aux autres il est facilement possible de faire des recouvrements.
Sur une image (un magnifique Daredevil original de Johnny Romita !) par exemple :

nous donnerait à l’écran :

les images s’empilent naturellement, DANS L’ORDRE les unes sur les autres.

La propriété supplémentaire ‘z-index’ va nous permettre de modifier l’ordre des couches !
ET le code suivant :

donnera :

Positionnement flottant

Il est possible grace à la propriété ‘float’ de positionner des éléments de la page, les uns à coté des autres, au lieu de les avoir les uns dessous les autres, par défaut.

Texte multi colonnes

On peut grace à cela envisager de mettre du texte sur plusieurs colonnes verticales, et faire une mise en page de type Journal. Les colonnes ‘flottant’ les unes à coté des autres.
Soit le code HTML suivant, sans Style particulier les 2 colonnes seront l’une à la suite de l’autre…

Colonne 1

et du texte a cote, encore du texte, toujours du texte, et du texte a cote,
encore du texte, toujours du texte, et du texte a cote, encore du texte,
toujours du texte, et du texte a cote, encore du texte, toujours du texte

Colonne 2

et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte, et du texte a cote

Mais en fixant la largeur à 150 pixels et mettant un attribut ‘float’ left, puis en rajoutant quelques fioritures sur le texte (police, justification et marges) comme ceci :

On obtiendra le résultat escompté :

Texte entourant une image

Voyons par exemple, le code suivant qui affichera une image, puis dessous (sur une nouvelle ligne) du texte.

et du texte a cote, encore du texte, toujours du texte, et du texte a cote, encore du texte, toujours du texte, et du texte a cote, encore du texte, toujours du texte, et du texte a cote, encore du texte, toujours du texte, et du texte a cote, encore du texte, toujours du texte, et du texte a cote, encore du texte…

Pour que l’image soit à gauche et que le texte l’entoure, il suffit de définir la largeur de la boîte contenant l’image, et d’utiliser la propriété float avec la valeur “left” :

Ainsi donc le code suivant

et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte,

donnera :

Un template classique avec bandeau, sommaire et contenu

Soit le code HTML suivant :

bandeau bandeau bandeau bandeau

Chapitre 1

Chapitre 2

Chapitre 3

Chapitre 4

et du texte a cote, encore du texte, toujours du texte, et du texte a cote,
encore du texte, toujours du texte, et du texte a cote, encore du texte,
toujours du texte, et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte, et du texte a cote,
encore du texte, toujours du texte, et du texte a cote, encore du texte,
toujours du texte, et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte, et du texte a cote…

Il apparait par défaut séquentiellement, encore une fois :

Avec le style suivant, cela prend forme …

et on aura à l’écran :

Corrigés Annuaire PHP

admin — Wed, 30 Jan 2008 14:46:58 +0000

Utilisation de chaînes de caractères

Voici un exemple de code affichant le résultat escompté :

// anuaire1.php

$nom =”Deléglise”;
$prenom = “Didier”;
$tel= “0102030405″;
$message = “Bonjour “. $prenom.” “.$nom. “!
”;
$message .= “Votre téléphone est le “. $tel;
print (”$message”);
?>

rem : on a utilisé l’opérateur ‘.=’ qui rajoute le contenu de la ligne à ce que contenait $message précédemment. On aurait pu n’utiliser q’ une seule occurence de la variable $message et tout concaténer sur une seule ligne, comme ceci :

$message = “Bonjour “. $prenom.” “.$nom. “!
Votre téléphone est le “. $tel;

Utilisation de tableaux

// anuaire2.php

// remplissage simple

$prenom = “Didier”;
$nom =”Deléglise”;
$tel= “0102030405″;

$ligne_annu[0]= $prenom;
$ligne_annu[1]= $nom;
$ligne_annu[2]= $tel;

print (”Prénom : “.$ligne_annu[0].”
”);
print (”Nom : “.$ligne_annu[1].”
”);
print (”No tel : “.$ligne_annu[2].”
”);

// déclaration explicite de tableau
// et remplissage avec indice…
// on peut donc le faire dans n’importe quel ordre

$ligne_annu = Array(1=>”Deléglise”, 0=>”Didier”,2=> “0102030405″);
print (”Prénom : “.$ligne_annu[0].”
”);
print (”Nom : “.$ligne_annu[1].”
”);
print (”No tel : “.$ligne_annu[2].”
”);

// et la sans indice, c’est + court
// mais …l’ordre est important

$ligne_annu = Array(”Didier”, “Deléglise”, “0102030405″);
print (”Prénom : “.$ligne_annu[0].”
”);
print (”Nom : “.$ligne_annu[1].”
”);
print (”No tel : “.$ligne_annu[2].”
”);

?>

Utilisation de fichiers

// annuaire3.php

// recup des donnéesdu formulaire dans les variables
// … …
$prenom=”Didier” ; $nom=”Deleglise”; $tel=”0102030405″;

// preparation de la ligne
$ligne = $prenom.”;”.$nom.”;”.$tel;

/* ouverture du fichier en écriture */
$fp = fopen(’annuaire.txt’,'a’);
fputs($fp, $ligne);
fclose($fp);
print (”Ecriture terminée…”);

?>

Exercice PHP : des Annuaires …

admin — Tue, 29 Jan 2008 12:48:28 +0000

Le but de cet exercice est de réviser l’essentiel de PHP : les chaînes, les tableaux, les boucles, les fichiers, les formulaires et pour finir l’accès aux bases de données…et cela de manère très progressive.

Vous pourrez vous aider du cours et de la documentation officielle sur http://www.php.net/manual/fr
Dans tous les exercices on utilisera plus ou moins les mêmes variables pour constituer l’annuaire :

un nom (chaine de 25 caractères maxi
un prénom (chaine de 20 caractères maxi)
un no de téléphone fice (nombre de 10 chiffres)
un no de téléphone fice (nombre de 10 chiffres)
une adresse e-mail (chaine de 50 caractères maxi)

remarque : les tailles maximums précisées ici, ne seront pas utilisées par le PHP, mais serviront de contraintes d’intégrité dans la base de données (Ainsi cette limite sera prise en compte quelque soit le programme (PHP ou non) qui insère des données…)

1) utilisation de chaînes de caractères

Déclarez 4 variables pour les nom, prénom et no de téléphone fixe, plus une variable message.
et donnez une valeur à chacune.
Affichez ensuite le message : “Bonjour valeur_prenom valeur_nom !
puis sur la ligne suivante : “Votre téléphone est le valeur_no_tel”

Utilisez des noms de variables clairs, sans espace, sans accents.
Utilisez l’opérateur ‘.’ ou ‘.=’ pour concaténer (ajouter) les chaînes de caractères les unes aux autres et constituer le message.

2) utilisation des tableaux

Avec les mêmes variables que précédemment, déclarez en plus un tableau ‘ligne_annu’ de 3 cases, et rangez chaque valeur dans une case du tableau. Ensuite affichez le message en lisant les cases du tableau no 0, 1 et 2.

Dans un deuxième temps créez un tableau ‘annuaire’ qui contiendra des ‘ligne_annu’ (un tableau de tableaux en somme !).
Remplissez 2 ou 3 lignes avec des valeurs, puis affichez les 3 lignes avec leur prénom, nom et no de tel, en utilisant une boucle ‘for’ simple, avec un compteur allant de de 0 à 2, puis ensuite le même affichage avec une boucle ‘foreach’.

3) récupération des données à partir d’un formulaire

Ecrivez un formulaire HTML simple ‘form_annu.htm’, avec 5 champs texte à saisir : nom, prénom , nos de téléphones fixe et mobile et e-mail.
Vous pourrez utiliser un éditeur HTML pour vous simplifier la vie, comme Dreawweaver par exemple.
Attention à utiliser des noms de champs simples et à les retenir.
Ce formulaire appelera un programme PHP ‘affiche_annu.php’, avec la méthode POST (rappel : c’est l’attribut ‘ACTION=’ de la balise

du formulaure qui donne le nom du programme PHP et l’attribut ‘METHOD=POST’ qui précisera la méthode d’appel)

Ecrivez ensuite le programme PHP qui récupère les données du formulaire, les range dans un tableau et affiche les valeurs

4) récupération des données et écriture dans un fichier sur le serveur

Dans votre programme créez un fichier ‘annuaire.txt’ sur le serveur et écrivez dedans la ligne contenant les infos récupérées du formulaire. On utilisera notamment les fonctions fopen() et fputs()

5) récupération des données et insertion dans une table ‘annuaire’ de MySQL

Si elle n’existe pas créez une base de données nommée ‘TEST” , avec PHPMyAdmin par exemple.

Avec un éditeur de texte écrivez un script de création de table (ordre SQL ‘CREATE TABLE’)
Sauvegardez ce script avec le nom ‘cr_table_annu.sql’ puis exécutez le script avec un client Mysql quelconque (mysql, PHPmyAdmin ou SQLdevelopper) pour créer la table dans la base TEST.
Insérez une ligne dans la table, avec vos coordonnées grace à PHPMyAdmin.

Modifiez ensuite le programme précédent pour remplacer l’écriture dans le fichier par uen insertion d’une 2eme ligne dans la table annuaire…

corrigé fonctions utilisateur

admin — Sun, 27 Jan 2008 23:24:11 +0000

reprenons le code utilisé dans l’exercice précédent, et définissons d’abord une fonction avec ce code.
Nous appellerons ensuite en lui passant un paramètre …

function majuscule ($ch) {
$res = strtoupper(substr($ch,0,1));
$res .= strtolower(substr($ch,1,strlen($ch)-1));
return $res;
}

$chaine =”bonjour LES aMis”;
print(majuscule($chaine));

?>

exercice PHP - fonctions utilisateur

admin — Fri, 25 Jan 2008 16:09:27 +0000

reprendre le code PHP qui transforme une chaine avec une initiale en Majuscule et en faire une vraie fonction, avec un parametre et une valeur de retour, qu’on appellera par exemple ‘majuscule’.

Opérateurs SQL de MySQL

admin — Wed, 23 Jan 2008 17:51:44 +0000

Le tableau suivant décrit sommairement les principaux opérateurs utilisables dans le SQL de MySQL.
Ces opérateurs peuvent être utilisés en lieu et place des colonnes dans un ordre SQL. Dans lal liste de colonne d’un SELECT, dans sa clause WHERE, etc.

:=	affectation de valeur
-, +, /, *, ^
DIV, %, MOD
\|\|, OR, XOR, \|, &, &&, AND, NOT, !
BETWEEN
CASE, WHEN, THEN, ELSE
=, <=>, >=, >, <=, <, <>, !=
IS, LIKE, REGEXP, IN
<<, >>
- (unary minus), ~ (unary bit inversion)
BINARY, COLLATE

corrigé fonctions chaine et numériques

admin — Tue, 22 Jan 2008 23:26:12 +0000

Voici la transformation de chaine:

// initialisation
$ch =”bonjour LES aMis”;
// 1er caractere en majuscule
$res = strtoupper(substr($ch,0,1));
// les n-1 caracteres restant en minuscule
// et on concatene
$res .= strtolower(substr($ch,1,strlen($ch)-1));

print(”resultat ; $res”);
?>

et pour le calcul de PI :

Avec une boucle connue à l’avance cela donne :

$limite = 1000;
for ( $i=1; $i < $limite ; $i++) {
$pi_sur_4 += -(pow(-1,$i)) * 1/(2*$i-1);
// on affiche toutes les valeurs intermédiaires…
// derriere le compteur de boucle
print (”$i : “. 4*$pi_sur_4.”
”);
}
?>

Si l’on veut faire une boucle WHILE tant qu’on n’a pas atteint une certaine précision, on peut faire le code suivant :

$i=0;
do {
$precedent = $pi;
$i++;
$pi_sur_4 += -(pow(-1,$i)) * 1/(2*$i-1);
$pi = 4*$pi_sur_4;
print (”$i : “. $pi.”
”);
$differentiel = floor($pi*1000) - floor($precedent*1000);
} while ($differentiel != 0)
?>

Note : ce code n’est pas optimisé, on a rajouté volontairement des variables intermédiaires pour le rendre + lisible. On n’est pas non plus obligé de calculer PI à chaque boucle, PI/4 suffirait largement avec une multiplication par 4 unique à la fin…

Corrigé PDO - ordre SQL paramétré

admin — Tue, 22 Jan 2008 15:33:56 +0000

Voici un exemple de solution :

// recup du parametre d’entree (URL ou formulaire)
$no_dep =$_GET['no_dep'];

// variable du programme
$chaine_sql =’SELECT ename, sal FROM emp WHERE deptno =:no_dep’;
$user=’DD’; $mdp=’DD’;

try {

$connexion = new PDO(’mysql:host=localhost;dbname=test’, $user, $mdp);

$ordre_sql = $connexion->prepare($chaine_sql);
// association param d’entree SQL et var PHP (bind)
$ordre_sql->bindParam(’:no_dep’, $no_dep, PDO::PARAM_INT);

// execution de l’ordre
$ordre_sql->execute();
print (”
”);
// boucle de fetch

while ($ligne = $ordre_sql->fetch(PDO::FETCH_NUM, PDO::FETCH_ORI_NEXT)) {

$data = $ligne[0] . “\t\t” . $ligne[1] . “\n”;

print $data;

}

print (”
”);

// fermenure de la connexion
$connexion = null;

} catch (PDOException $e) {
print “Erreur!: ” . $e->getMessage() . “
”;
die();
}

?>

Le résultat aura l’allure suivante :

Employes et salaires du departement 30

ALLEN		2342.56
WARD		2512.5
MARTIN		1512.5
BLAKE		3448.5
TURNER		1815
JAMES		1149.5

On aurait pu rajouter les nom de colonnes en utilisant la fonction getColumnMeta, mais celle ci est assez mal supportée pour le moment, d’après la doc…

Exercice PHP / PDO - ordre SQL paramétré

admin — Mon, 21 Jan 2008 14:20:41 +0000

Ecrire un programme PHP, utilisant l’extension PDO pour MySQL, qui lit les noms et salaires des employes d’un departement passé en paramètre.

Ce no de département sera à la fois un paramètre du programme PHP (passé dans l’URL par exemple) et un paramètre de l’ordre SELECT.
On utilisera un boucle de fetch simple, et on se limitera aux 2 colonnes demandées.

exercice PHP - fonctions chaine et numériques

admin — Sun, 20 Jan 2008 16:05:44 +0000

Transformation d’une chaine, avec une seule lettre capitale

Ecrivez le code PHP qui tranforme une chaine de caratère de plusieurs mots, en passant le 1er caractère en Majuscule et tout le reste en minuscules.
On utilisera pour ce faire les fonctions ’str…’ et l’opérateur de concaténation ‘.’

Calcul de PI avec des fonctions numériques et une boucle…

PI est un nombre formidable, et est la limite de suites de nombre assez simples.
Par exemple PI/4 est limite de la somme des inverses des nombre entiers impairs (avec un signe + et - alterné sinon ce serait trop facile).

En d’autres termes

PI/4 = 1-1/3+1/5-1/7+1/9-1/11+1/13 …

Calculez pi/4…et donc Pi avec une boucle for de 100, 1000 et 10000 chiffres
Faites ensuite une boucle WHILE qui s’arrete quand on a 2 decimales de pi constantes.

Select simple PDO/Mysql

admin — Tue, 15 Jan 2008 16:30:19 +0000

Voici le code :

// select simple avec PDO, vers MySQL
print (’’);

try {
$db=’test’; $user=’dd’; $mdp=’dd’;
$pdo = new PDO(”mysql:host=localhost;dbname=$db”, $user, $mdp);

$ordre = $pdo->query(’SELECT * FROM employes’);
$nbcol = $ordre->columnCount();

//lecture entetes - non supportee ??
// $nomcol= $ordre>getColumnMeta(”name”);
// print(”nom: $nomcol”);

print(”
”);
// lecture lignes
while ($row = $ordre->fetch(PDO::FETCH_NUM)){
print(””);
// lecture colonnes
for ($j=0;$j < $nbcol;$j++) {
print (””);
}
print(””);
}
print(”
$row[$j]
”);
} catch (PDOException $e) {
echo “Pb !! : ” . $e->getMessage() . “n”;
exit;
}

?>

note : apparemment ‘getColumnMeta’ n’est pas supporte par le driver MySQL livré avec Wampserver 5…

Exercices MySQL - fonctions et procédures stockées

admin — Tue, 15 Jan 2008 10:49:11 +0000

Fonction stockée MySQL

Ecrire une fonction stockée SQL qui transforme en majuscule le 1er caractère d’une phrase passée en paramètre et force tout le reste en minuscule.
“salut LES GARS” deviendra donc “Salut les gars”.
On utilisera avec profit les fonctions de traitement de chaînes de caractères de MySQL qui sont documentées ici :
http://dev.mysql.com/doc/refman/5.0/en/string-functions.html
ou ici
http://www.toutestfacile.com/sql/cours/functstring_0.php5

Question subsidiaire : quelle différence avec la fonction initcap() ?

Procédure stockée MySQL

Ecrire une procédure stockée MySQL qui augmente les salaires d’un employé de n%. Le no de l’employé et le taux n sont des paramètres d’entrée.
Si l’employé est commercial (SALESMAN) on integrera simplement sa commission dans son salaire, sans autre augmentation…