Memento 2 HTML5.CSS3.PHP - Mysql

18/10/2018 MEMENTO DE
HTML5/CSS3,
PHP ET MYSQL
WEB PROGRAMMING
KAMDEM KAMDEM LANDRY GAETAN

MEMENTO DE HTML5/CSS3, PHP ET MYSQL
HTML
 Les balises et attributs (options) :<balise attribut=‘’valeur’’>
 Structure de base d'une page HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title> // Titre de l’onglet.
</head>
<body>
1 </body>
</html>
 Paramétrage >Préférences, onglet Nouveau document/Dossier. Sélectionnez UTF-8 sans BOM
(pour l’encodage appliqué sur tous les fichiers dans notepad)
 Insérer un commentaire :
 Le paragraphe :<p></p>
 Retour à la ligne ou saut de ligne: <br/>
 Les titres (Niveau de titres) :
<h1></h1>: signifie « titre très important »
<h2></h2>: signifie « titre important ».
<h3></h3>: titre un peu moins important
<h4></h4>: titre encore moins important.
<h5></h5>: titre pas important.
<h6></h6>: titre vraiment, mais alors là vraiment pas important du tout.
 La mise en valeur du texte :
- Mettre un peu en valeur : <em></em>
- Mettre bien en valeur :<strong></strong>
- Marquer le texte : <mark></mark>
 Les listes :
- Liste non ordonnée : <ul><li></li></ul>
<ul></ul>délimite toute la liste ;
<li></li>délimite un élément de la liste (une puce).
- Liste ordonnée :<ol><li></li></ol>
- Liste de définitions :
<dl></dl>délimite la liste de définition
<dt></dt>délimite un terme
<dd></dd>délimite la définition de ce terme
 Créer des liens :<a href=’’valeur’’></a> (la valeur de « href » indique l’adresse de la page cible.)
NB : Pour un lien contenant des « & » remplacer par « &amp »
- Lien vers un autre site : Ex : <a href="http://www.siteduzero.com">Site du Zéro</a>

- Un lien vers une autre page de son site :
Si les pages sont dans un même dossier<a href="page.html"></a>
Si la page cible est dans un sous dossier(s) :<a href="contenu/autredossier/page.html"></a>
Si la page cible est dans un dossier parent :<a href="../page2.html">
MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

- Un lien vers une ancre (Lien vers un élément d’une même page) :
<a href="#mon_ancre">Aller vers l'ancre</a>
(Pour créer une ancre on utilise la balise « id » dont la valeur sera le nom de l’ancre)
- Lien vers une ancre située dans une autre page : Ex : <a href="page.html#mon_ancre">
- Un lien qui affiche une info bulle au survol :
Ex:<ahref="http://www.siteduzero.com" title=" ">Sitedu Zéro</a>
(Une info bulle s’affiche grâce à l’attribut «title» dont La valeur est le message affiché par l’info bulle)
Cas pratiques d’utilisations des liens

- Lien qui ouvre une nouvelle fenêtre : on rajoute l’attribut et sa valeur ; target=’’blank’’
- Un lien pour envoyer un e-mail : Ex : <a href="mailto:votrenom@bidule.com"></a>
2 - Un lien pour télécharger un fichier :<a href="monfichier.zip">Télécharger le fichier</a>
 Insertion d’image : <img/>

Ex : <img src=’’valeur ‘’ alt= ‘’valeur’’> ;
Les valeurs des attributs « src » et « alt » indique ou le fichier se trouve et le texte alternatif à l’image
respectivement. E x : <img src="images/montagne.jpg" alt="Photo de montagne" />
Miniature cliquable
<a href="montagne.jpg"><img src="montagne_mini.jpg" alt="Photo de montagne" title="Cliquez pour agrandir"
/></a>
 Création d'une figure (tous ce qui illustre un texte ou apporte plus amples information) :
<figure></figure>
- Ex : <figure>
<img src="images/blocnotes.png" alt="Bloc-Notes" />(l’image blocnotes.png fait office de figure)
<figcaption>Le logiciel Bloc-Notes</figcaption>(<figcaption>permet d’insérer une légende)
</figure>
 Les balises universelles :<span></span>et<div></div>
 Mettre en exposant :<sup>< /sup>
 Insérer une légende :<figcaption></figcaption>
 Appeler un script: <script src="monscript.js"></script>
LES BALISES STRUCTURANTES

Les balises structurantes sont au sein de la balise <body></body>
 L'en-tête :<header></header>(contient bannières, logo et slogan du site)
 Le pied de page : <footer></footer>(contient les contacts par exemple)
 Principaux liens de navigation :<nav></nav>
 Une section de page :<section></section>(permet de regrouper le contenu en fonction de
leur thématiques)
 Informations complémentaires : <aside></aside> (information complémentaire sur
ledocument que l’on visualise)
 Un article indépendant : <article></article>
(Les différentes balises structurantes peuvent êtres imbriqués sagement les uns dans les
autres)
Pour la reconnaissance des balises structurantes
 (a placer dans la balise « head »)

CSS
 Inclure un fichier .css dans sa page html :<link rel="stylesheet" href="nom_du_fichier.css" />
 Appliquer un style à une balise sélectionnée:
- balise
{
Propriété: valeur;
}
 Appliquer un style à plusieurs balises sélectionnées (balise1 et balise2 sont sélectionnées) :

- balise1, balise2
3 {
Propriété : valeur ;
}
 Les commentaires : /* Ceci est un commentaire */

 Les attributs spéciaux (permettent de nommer des balises) : « class » et « id »(leurs valeurs
seront les noms des balises dans lesquelles elles font office d’attributs)
 Appliquer un style :
LES SELECTEURS SIMPLES
- P
{
(Sélectionne tous les paragraphes)
}
- h1, em
{
(Sélectionne tous les titres et les textes important)
}
Les deux sélecteurs ci-dessous sont des sélecteurs spécifiques
- .class
{
}
- #id
{
}
LES SELECTEURS AVANCES :
- * : sélecteur universel : Ex : *
{
(Sélectionne toutes les balises sans exceptions)
}
- A B : une balise contenue dans une autre : Ex : h3 em

{
(Sélectionne tous les balises <em> dans <h3>)
}
- A + B : une balise qui en suit une autre :
Ex :h3 + p
{
(Sélectionne la première balise <p>située après un titre <h3>)
}

- A[attribut] : une balise qui possède un attribut
E x : a[title]
{
(Sélectionne tous les liens <a>qui possèdent un attribut « title »)
}
- A[attribut="Valeur"] : une balise, un attribut et une valeur exacte

Ex : a[title="Cliquez ici"]
{
(Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici ».)
}
- A[attribut*="Valeur"] : une balise, un attribut et une valeur

4 Ex : a[title*="ici"]
{
(Idem, l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position))
}
- A:last-child : cible le dernier élément A
FORMATAGE DU TEXTE
 Les différentes propriétés en CSS et leurs valeurs
Description Propriétés Valeurs
- taille absolue : en pixels, en centimètres ou millimètres
- *taille relative : en « % », « em » ou « ex » ou aussi
- xx-small : minuscule ;
- x-small : très petit ;
La Taille font-size - small : petit ;
- medium : moyen ;
- large : grand ;
- x-large : très grand ;
- xx-large : euh… gigantesque
- Sans-serif;
- Arial Black ;
- “Comic Sans MS” ;
La police font-family - “Courier New” ;
- Georgia ;Ex1: font-family: police;
- Impact ;Ex2: font-family: police1, police2, police3;
- ‘’Times New Roman’’ ;
- @font-face (création de police perso. en un seul format)
{
font-family: 'MaSuperPolice';
src: url('MaSuperPolice.eot');
}
font-family : ‘MaSuperPolice’
- @font-face(création de police perso. en plusieurs formats)

{
Police perso. @font-face font-family: 'MaSuperPolice';
src :url(‘MaSuperPolice.eot’) ;
src: url('MaSuperPolice.eot?#iefix') format('eot'),
url('MaSuperPolice.woff') format('woff'),
url('MaSuperPolice.ttf') format('truetype'),
url('MaSuperPolice.svg#Masuperpolice') format('svg');
}
font-family : ‘MaSuperPolice’
- italic: le texte sera mis en italique.

Italique font-style - oblique: le texte sera passé en oblique
- normal: le texte sera normal (par défaut).
- bold : le texte sera en gras ;
Gras font-weight
- normal : le texte sera écrit normalement (par défaut).
- underline: souligné.
Soulignement - line-through : barré.
Et text-decoration - overline: ligne au-dessus.
décoration - blink : clignotant.
- none: normal (par défaut).
- left: le texte sera aligné à gauche (par défaut).
Alignement text-align - center: le texte sera centré.
5 - right: le texte sera aligné à droite.
- justify: le texte sera « justifié ».
Les flottantes float - left: l'élément flottera à gauche.
- right : l'élément flottera à droite
- left : le texte se poursuit en-dessous après un float: left;
Stopper une clear - right: le texte se poursuit en-dessous après un float:
flottante right;
- *both: le texte se poursuit en-dessous, que ce soit
après un float: left; ou après un float: right;
- uppercase
text-transform:
- lowercase
FAIRE FLOTTER UNE IMAGE

<p><img src="flash.gif" class="imageflottante" alt="Image flottante"/>texte qui habillera l'image
flottante.</p>
(CODE HTML)
.imageflottante (CODE CSS)
{
float: left;
}
STOPPER UN FLOTTANT
<p class="dessous">Ce texte est écrit sous l'image flottante.</p>
.dessous
{
clear: both;
}
COULEUR ET LE FOND
Descriptions Propriétés valeurs
- En anglais : Ex : red, brown, yellow…
Couleur de texte color - En hexadecimal : Ex : #FF5A28
- En RGB : Ex : rgb(rouge, vert, bleu)
Couleur de fond background-color - Même principe que pour la propriété color
- rgba(rouge, vert, bleu, opacité)
background-image url("mon_image.format")
(charge le fond d’écran) (le chemin de l’image est indiqué par apport au fichier
.css)
Image de fond background-attachment - fixed : l'image de fond reste fixe ;
(fixer le fond) - scroll: l'image de fond défile avec le texte (par
défaut).
- no-repeat : le fond ne sera pas répété. L'image

sera donc unique sur la page.
background-repeat - repeat-x : le fond sera répété uniquement sur
(répétition du fond) la première ligne, horizontalement.
- repeat-y : le fond sera répété uniquement sur
la première colonne, verticalement
- repeat : le fond sera répété en mosaïque (par
défaut).
- (x, y) en pixel. Utilisé par apport au coin
supérieur gauche de la page ou du bloc.
Image de fond - En combinant les mots en anglais
background-position  top: en haut ;
6 (positionnement du fond)  bottom: en bas ;
 left: à gauche ;
 center: centré ;
 right: à droite.
- Combine toutes les valeurs des autres propriétés liées au
fond
Exs : background : url(‘‘photo.jpg’’) fixed no-repeat top left;
Background background: url("soleil.png") fixed no-repeat top
right,url("neige.png") fixed;
(Permet d’insérer plusieurs images en fond d’écran en
combinant les propriétés)
Opacity - 0≤x≤1
LES BORDURES ET LES OMBRES

border-width - X en pixel ou X ∈ 𝑅
- En anglais : Ex : red, brown, yellow…
border-color - En hexadecimal : Ex : #FF5A28
- En RGB : Ex : rgb(rouge, vert, bleu)
- none: pas de bordure (par défaut) ;
- solid : un trait simple
- dotted : pointillés ;
- dashed : tirets ;
border-style - double: bordure double ;
- groove: en relief ;
- ridge : autre effet relief ;
- inset: effet 3D global enfoncé ;
- outset: effet 3D global surélevé.
Bordure border - On combine à la fois les valeurs de border-width, border-
(super propriétés) style et border-color dans cet ordre.
Ex : border : 3px dotted white ;
- On combine à la fois les valeurs de border-width, border-
border-left style et border-color
Appliqué à la bordure gauche uniquement
border-right style et border-color
Appliqué à la bordure droite uniquement
Border-top style et border-color
Appliqué à la bordure du haut uniquement
Border-bottom style et border-color
(Appliqué à la bordure du bas uniquement on peut
remplacer bottom par soit top,left ouright.)
border-radius  x en pixel ou x∈ 𝑅
Prend les quatre valeurs suivantes dans l’ordre
 le décalage horizontal de l'ombre ;
box-shadow  le décalage vertical de l'ombre ;
Ombre (ombre des boites)  l'adoucissement du dégradé ;
 la couleur de l'ombre
on peut aussi ajouter une 5éme valeur : inset
text-shadow  fonction exactement comme box-shadow
(ombre du texte)
Les pseudo-formats pour la création d’apparence dynamiques

 :hover (Au survol)
Ex : a :hover (apparence au survol du lien)
7 {
text-decoration : underline ; (quand on survol le lien il est souligné)
}
 :active (au moment du clic)

Ex : p :active (apparence au moment du clic)
{
}
 :focus(lorsque l'élément est sélectionné)

Ex : a :focus (apparence lorsque l’élément est sélectionné)
{
}
 visited: Lorsque le lien a déjà été consulté
Ex : a :visited(apparence lorsque l’élément a déjà été visité)
{
}
Les modèles de boites

NB : Les balises de types inline sont obligatoirement à l’intérieur des balises de types block.
 Dimensions des boites :

- width : en px ou %
- height : en px ou %
 Minimum et maximum : permet d’avoir des taille limites pour nos blocs
- min-width: largeur minimale ;
- min-height: hauteur minimale ;
- max-width: largeur maximale ;
- max-height: hauteur maximale ;
 Les marges :
- les marges intérieures : padding : px ;
- les marges extérieures. Margin : px ;
- si l’on veut appliquer des marges à un seul côté par exemple on utilisera :
o top: haut ;
o bottom: bas ;
o left : gauche ;
o right : droite Ex : margin-top : px ;
Ex : padding-bottom : px ;
 Centrer les blocs :

balise (centrage horizontal)
{
width :px ;
margin : auto ;
}
 Quand le texte dépasse :
Description Propriétés valeurs

visible: si le texte dépasse les limites de taille, il reste visible et sort
volontairement du bloc. (par défaut)
hidden: si le texte dépasse les limites, il sera tout simplement coupé. On ne
pourra pas voir tout le texte.
8 couper un bloc overflow scroll: là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette
(hauteur) fois, le navigateur mettra en place des
barres de défilement pour qu'on puisse lire l'ensemble du texte.
*auto : c'est le mode « pilote automatique ». le navigateur qui décide de
mettre ou non des barres de défilement (il n'en mettra que si c'est
nécessaire).
couper les textes
word-wrap break-word : forcera la césure lorsque le mot sortira du bloc (trop large)
trop larges
POSITIONNEMENT
 Les flottantes
 Transformez vos éléments avec display
Valeurs Exemple Descriptions
Inline <a>, <em>,<span> Eléments d'une ligne. Se placent les uns à côté des autres.
Eléments en forme de blocs. Se placent les uns en-dessous des
block <p>, <div>,<section>…
autres et peuvent êtreredimensionnés.
Eléments positionnés les uns à côté des autres (comme les inlines)
Inline-block <select>,<input>
mais qui peuvent êtreredimensionnés (comme les blocs).
None <head>, <body> Eléments non affichés ou caché
Pour la compatibilité des inline-block avec IE6 ou IE7

On introduit le commentaire conditionnel ci-dessous contenant une feuille de style qui sera
chargé si on utilise une version d’IE<=7 cette feuille de style transformera les éléments en inline et
changera leurs comportement avec le layout zoom :1. On ferra cette opération sur chaque élément
en inline-block.

Alignement vertical des éléments en inline-block :vertical-align
Description Propriété valeurs

baseline: aligne de la base de l'élément avec celle de l'élément parent (par
défaut)
top: aligne en haut ;
Alignement vertical-align middle: centre verticalement ;
vertical bottom: aligne en bas ;
(valeur en px ou %) : aligne à une certaine distance de la ligne de base
(baseline).

Exemple:
Code : CSS
nav
{
display: inline-block;
width: 150px;
border: 1px solid black; /* permet de visualiser les bordure du block*/
vertical-align: top; /* on a plus qu’aligner nos bloques */
}
section
{
9 border: 1px solid blue; /* permet de visualiser les bordure du block*/
}
Ou (De manière condensée)
nav, section
{
width: 150px;
border: 1px solid black; /* permet de visualiser les bordure du block*/
}
Le positionnement absolu, fixe et relatif

 Le positionnement absolu : il nous permet de placer un élément n'importe où sur la page (en
haut à gauche, en bas àdroite, tout au centre, etc.) partant du coin supérieur gauche (origine) de
la page et par apport aux quatre cotés.
NB :z-index est utilisé lorsque deux ou plusieurs éléments sont en absolu au même en droit et
devant se chevaucher. Celui qui possédera la valeur index la plus grande sera au-dessus de l’autre.
Exemple :
CODE :CSS
element
{
position: absolute;
right: 0px;
bottom: 0px;
}
 Le positionnement fixe : identique au positionnement absolu mais, cette fois, l'élément reste
toujours visible, même si ondescend plus bas dans la page. C'est un peu le même principe que
background-attachment: fixed;
Exemple :
CODE :CSS
element
{
position: fixed;
right: 0px;
bottom: 0px;
}
 Le positionnement relatif : permet de décaler l'élément par rapport à sa position initiale

(normale c’est-à-dire par apport a son coin supérieur gauche).

Exemple :
CODE :CSS
element
{
position: relative;
left: 55px;
top: 10px;
}
Descriptions Propriétés Valeurs

- absolute
Position - fixe
10 Le positionnement
- relative
Position s’accompagne de : top, bottom, right, left ; à qui on donne des valeurs en pixels.
NB :Un élément A positionné en absolu à l'intérieur d'un autre élément B (lui-même positionné en
absolu, fixe ou relatif) se positionnera par rapport à l'élément B, et non par rapport au coin en haut
à gauche de la page c'est-à-dire un bloc A en absolu dans un bloc B lui-même en absolu, fixe ou
relatif se positionnera par apport au coin supérieur gauche du bloc B.
AUTRES BALISES
Descriptions Propriétés valeurs
list-style-type - None : enlève les puces sur les listes
Pour les listes - url('images/ico_liensexterne.png') : permet
list-style-image: de définir une image à la place d’une puce
dans une liste
Les dégradés linear-gradient
Règles a respecter
 Tous vos textes doivent en général être dans des balises de paragraphes. Il est interdit de mettre
du texte directement entre les balises <body></body>sans l'avoir entouré des fameux
<p></p>. Ceci est aussi valable pour les retours à la ligne <br />, qui doivent être à l'intérieur
de paragraphes. C'est une erreur ultra-courante chez les débutants.
 Toutes vos images doivent comporter un attribut « alt »qui indique ce que contient l'image.
 Vos balises doivent être fermées dans l'ordre.
 Si vos liens comportent des &, vous devez les remplacer par le code & pour éviter toute
confusion au navigateur.
 Les éléments de types block doivent être placé en dehors des paragraphes <p></p>
PROPRIETES DE FORMATAGE DE TEXTE

POLICE, TAILLE ET DECORATIONS
Type Nom Valeurs Possible
Indiquer les noms de polices possibles par ordre de préférence :
Code : CSS
font-family: police1, police2, police3;
Utilisez des guillemets si le nom de la police comporte des
espaces. Essayez de toujours mettre comme dernière police
Nom de police font-family possible "serif" ou "sans-serif".
Code : CSS
font-family: "Arial Black", Arial, Verdana,
11 serif;
Permet de déclarer une nouvelle police, qui sera téléchargée sur
l'ordinateur de vos visiteurs.
Code : CSS
Police @font-face {
personnalisée @font-face font-family: 'MaSuperPolice';
src: url('MaSuperPolice.eot') format('eot'),
url('MaSuperPolice.woff')
format('woff'),
url('MaSuperPolice.ttf')
format('truetype'),
url('MaSuperPolice.svg') format('svg');
}
Indiquez la taille du texte.
Plusieurs unités sont possibles :
- px (pixels)
- % (pourcentage, 100% = normal)
- em (taille relative, 1.0 = normal)
- ex (taille relative à la hauteur de la lettre "x". 1.0 =
Taille du texte font-size normal)
- nom de taille :
 xx-small : très très petit
 x-small : très petit
 small : petit
 medium : moyen
 large : grand
 x-large : très grand
 xx-large : très très grand
bold : gras
Gras font-weight bolder : plus gras
lighter : plus fin
normal : pas gras (par défaut)
italic : italique
Italique font-style oblique : autre façon de mettre en italique
normal : normal (par défaut)
underline : souligné
overline : ligne au-dessus
Décoration text-decoration line-through : barré
blink : clignotant
none : normal (par défaut)
Petites capitales font-variant small-caps : petites capitales
normal : normal (par défaut)

uppercase : tout mettre en majuscules
Capitales text-transform lowercase : tout mettre en minuscules
capitalize : début des mots en majuscules
none : normal (par défaut)
Indiquez dans n'importe quel ordre des valeurs possibles pour
font-weight, font-style, font-size, font-variant, font-
Super-propriété font family.Attention exception : le nom de la police (font-family)
de police doit être placé en dernier dans la liste dans tous les cas.
Exemple :
font: bold 16px Arial;
12
Alignement
Indiquer les noms de polices possibles par ordre de préférence :
Code : CSS
font-family: police1, police2, police3;
Si le visiteur a la police 1, il l'utilisera. Sinon, il regarde s'il a la
police 2, puis la police 3 etc.
Nom de police font-family Utilisez des guillemets si le nom de la police comporte des
espaces. Essayez de toujours mettre comme dernière police
possible "serif" ou "sans-serif".
Code : CSS
font-family: "Arial Black", Arial, Verdana,
serif;
left : à gauche (par défaut)
Alignement text-align center : centré
horizontal right : à droite
justify : texte justifié (prend toute la largeur de la page)
A utiliser dans des cellules de tableau, ou dans des éléments
inline-block.
Alignement vertical-align top : en haut
vertical middle : au milieu
bottom : en bas
Hauteur de ligne line-height Indiquer une valeur en pixels (px) ou en pourcentage (%)
Indiquez une valeur en pixels (px) pour définir l'alinéa de vos
Alinéa text-indent paragraphes.Les paragraphes commenceront avec le retrait
indiqué.
normal : le passage à la ligne est automatique (par défaut)
nowrap : pas de passage à la ligne automatique, à moins qu'une
balise HTML comme <br
Césure white-space /> ne soit présente.
pre : le passage à la ligne se fait tel que le texte a été saisi dans
le code source (comme la
balise <pre>)
Césure forcée word-wrap Avec la valeur break-word, le texte sera coupé s'il dépasse du
cadre.
Décalage vertical, décalage horizontal, adoucissement, couleur
Ombre de texte text-shadow text-shadow: 2px 2px 4px black;
PROPRIETES DE COULEUR ET DE FOND

COULEUR
Indiquer une couleur avec l'une des méthodes suivantes :
- En tapant le nom de la couleur en anglais (black,
Couleur de texte color blue, green, white, red...).
- En indiquant la couleur en hexadécimal (#CC48A1)
- En indiquant la couleur en RGB : rgb (128, 255, 0)
Couleur de fond background-color Même fonctionnement que color. Cela définit cette fois
la couleur de fond du texte
13 IMAGE DE FOND
<cellule>Valeur entre 0 (transparence totale) et 1 (opacité totale). Exemple pour une transparence de 50%
:
Indiquer l'url de l'image (notation absolue ou relative)
Code : CSS
background-image:url("images/fond.png"); /* Notation
relative */
Image de fond background-image backgroundimage:
url("http://www.monsite.com/images/fond.png");
/* Notation absolue */
Il est possible de combiner plusieurs images de fond, en
séparant les déclarations par des virgules.
Fond fixé background- fixed : le fond reste fixe quand on descend plus bas sur la
attachment page
scroll : le fond défile avec le texte (par défaut)
repeat : le fond se répète (par défaut)
Répétition du background-repeat repeat-x : le fond ne se répète que sur une ligne,
fond horizontalement
repeat-y : le fond ne se répète que sur une colonne,
verticalement
no-repeat : le fond ne se répète pas, il n'est affiché qu'une fois
2 façons de faire :
En notant une distance en px ou %, par rapport au coin en
haut à gauche.
Code : CSS
background-position:50px 200px; /* 50 px à droite, 200px
en bas */
En utilisant des valeurs prédéfinies, une pour la verticale et
fond background-position une pour l'horizontale :
top : en haut, verticalement
center : au milieu, verticalement
bottom : en bas, verticalement
left : à gauche, horizontalement
center : au centre, horizontalement
right : à droite, horizontalement
Code : CSS
background-position : bottom right; /* en bas à droite */
Indiquer une ou plusieurs valeurs issues des propriétés
background-image, backgroundrepeat, background-
attachment, background-position.
L'ordre des valeurs n'a pas d'importance et on n’est pas

Superpropriété background obligés de mettre toutes les valeurs de ces propriétés (au
de fond moins une suffit)
Code : CSS
/* Le fond fond.png reste affiché en haut à droite de l'écran et
n'est pas répété. */
background :url("images/fond.png") no-repeat fixed top
right;
PROPRIETES DES BOITES

DIMENSIONS
14 Type Nom Valeurs Possible
Largeur width Valeur en px, %, ou encore "auto" (valeur par défaut, la
largeur dépendra du texte à l'intérieur).
Hauteur height Idem
Largeur minimale min-width Indiquer une valeur, en pixels par exemple.
Largeur maximale max-width Idem
Hauteur minimale Min-height Idem
Hauteur maximale Max-height Idem
MARGES EXTERIEURES
Marge en haut margin-top Indiquer une valeur comme 20px, 1.5em...
Marge à gauche margin-left Idem
Marge à droite margin-right Idem
Marge en bas margin-bottom Idem
Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de
valeurs que vous mettez, la signification change :
- 1 valeur : ce sera la marge pour le haut, le bas, la
gauche et la droite
Super-propriété margin - 2 valeurs : la première correspond à la marge pour le
de marge haut et le bas, la seconde pour la gauche et la droite
- 3 valeurs : la première correspond à la marge du haut,
la seconde aux marges à gauche et à droite, la
troisième à la marge du bas
- 4 valeurs : respectivement la marge du haut, de la
droite, du bas, de la gauche.
Code : CSS
margin:20px 5px; /* 20px de marge en haut et en
bas, 5px à gauche et à droite */
MARGES INTERIEURES
Marge intérieure padding-top Indiquer une valeur comme 20px, 1.5em...
en
haut
Marge intérieure à Padding-left Idem
gauche
Marge intérieure à Padding-right Idem
droite
Marge intérieure padding-bottom Idem
en
bas
15 Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de
valeurs que vous mettez, la signification change :
- 1 valeur : ce sera la marge pour le haut, le bas, la
gauche et la droite
Super-propriété de - 2 valeurs : la première correspond à la marge pour le
marge intérieure padding haut et le bas, la seconde pour la gauche et la droite
- 3 valeurs : la première correspond à la marge du haut,
la seconde aux marges à gauche et à droite, la
troisième à la marge du bas
- 4 valeurs : respectivement la marge du haut, de la
droite, du bas, de la gauche
BORDURES
epaisseur de la border-width Indiquer une valeur en px.
bordure
couleur de la bordure border-color Indiquer une valeur de couleur.
none : pas de bordure (par défaut)
hidden : bordure cachée
solid : ligne pleine
double : ligne double (nécessite une taille de bordure de 3px
type de bordure border-style minimum)
dashed : en tirets
dotted : en pointillés
inset : effet 3D "enfoncé"
outset : effet 3D "surélevé"
ridge : autre effet 3D
Indiquer la couleur, l'épaisseur et le type de bordure pour la
bordure à gauche border-left bordure gauche.
L'ordre n'a pas d'importance. Exemple :
Code : CSS
border-left: 2px inset blue; /* Bordure bleue de 2px avec
effet 3D "enfoncé" */
bordure en haut border-top Idem
bordure à droite border-right Idem
bordure en bas border-bottom Idem
super-propriété border Indiquera l'apparence des bordures en haut, à droite, en bas et
de bordure à gauche.
bordure arrondie border-radius Indiquer une valeur en px, ou 4 valeurs pour chacun des
coins, en partant de celui en haut à gauche.

Décalage vertical, décalage horizontal, adoucissement,
ombre box-shadow couleur
Code : CSS
box-shadow: 2px 2px 4px black;
PROPRIETES DE POSITIONNEMENT ET D'AFFICHAGE

AFFICHAGE
16 none : l'élément ne sera pas affiché
block : l'élément devient de type "block" (bloc, comme <p>)
Type d'élément display inline: l'élément devient de type "inline" inline-block :
l'élément est affiché comme un inline mais peut être
redimensionné comme un block.
list-item : l'élément devient de type "élément de liste à puce"
(comme <li>)
hidden : masqué
visible : visible (par défaut)
Affichage visibility
display:none; fait complètement disparaître l'élément, tandis
que visibility:hidden; masque l'élément, qui continue quand
même à prendre de la place sur l'écran.
Indiquer 4 valeurs comme ceci :
Code : CSS
Afficher clip: rect(valeur1, valeur2, valeur3, valeur4);
seulement une partie clip Cela permet de n'afficher qu'une partie d'un élément. rect()
permet d'indiquer les coordonnées du rectangle qui sera
affiché.
Les valeurs 1 à 4 correspondent respectivement aux coins
haut, droite, bas et gauche du rectangle.
visible : tout l'élément sera affiché (par défaut).
hidden : l'élément sera coupé s'il dépasse les limites définies
height et width. On ne pourra pas voir la partie du texte
Limiter les overflow coupée.
dimensions scroll : tout comme hidden, l'élément sera coupé s'il dépasse
les limites. Toutefois, cette fois le navigateur ajoutera des
barres de défilement pour qu'on puisse voir la suite du texte.
auto : c'est le navigateur qui décide d'ajouter des barres de
défilement ou pas en fonction des cas.

POSITIONNEMENT
left : flottant à gauche
Flottant float right : flottant à droite
none : pas de flottant (par défaut)
left : supprime l'effet d'un flottant à gauche précédent
Stopper un flottant clear right : supprime l'effet d'un flottant à droite précédent
both : supprime l'effet d'un flottant précédent, qu'il soit à
gauche ou à droite
none : pas de suppression de l'effet du flottant (par défaut)
absolute : position absolue par rapport au coin en haut à
17 gauche
Type de position fixed : position fixe (fonctionne comme la position absolue).
positionnement L'élément reste à sa position même quand on descend plus
bas dans la page.
relative : position relative, par rapport à la position "normale"
de l'élément
static : positionnement normal (par défaut)
Position par top Valeur en px, %, em... A utiliser pour un positionnement
rapport au haut absolu, fixe ou relatif.
Position par rapport Idem
au bas bottom
Position par gauche left Idem
rapport à
Position par rapport à right Idem
droite
En cas de positionnement absolu par exemple, si 2 éléments
Ordre se chevauchent, z-index permet d'indiquer quel élément doit
d'affichage z-index être affiché au-dessus de l'autre.
Indiquez un nombre. Plus ce nombre est élevé, plus l'élément
sera affiché en avant.

PROPRIETES DES LISTES

 Pour les listes non ordonnées (<ul>) :
- disc : un disque noir (par défaut).
- circle : un cercle.
- square : un carré.
- none : aucune puce ne sera utilisée.
 Pour les listes ordonnées (<ol>) :
- decimal : des nombres 1, 2, 3, 4, 5... (par défaut)
18 - decimal-leading-zero : des nombres commençant
Type de liste list-style-type par zéro (01, 02, 03, 04, 05...).
- upper-roman : numérotation romaine, en
majuscules (I, II, III, IV, V…)
- lower-roman : numérotation romaine, en
minuscules (i, ii, iii, iv, v...)
- upper-alpha : numérotation alphabétique, en
majuscules (A, B, C, D, E...)
- lower-alpha : numérotation alphabétique, en
minuscules (a, b, c, d, e...)
- lower-greek : numérotation grecque.
Position en retrait list-style- inside : sans retrait
position outside : avec retrait (par défaut)
Indiquer l'url de l'image qui servira de puce. Exemple :

Puce personnalisée list-style- Code : CSS
image list-style-image: url("images/puce.png");
On peut réunir les valeurs de list-style-type, list-style-position et

list-style-image. Sans êtres obligé de mettre toutes les valeurs, et
Super propriété de list-style l'ordre n'a pas d'importance.
liste Exemple :
Code : CSS
list-style: inside square;

PROPRIETES DES TABLEAUX

collapse : les bordures du tableau et des cellules sont
border-collapse mélangées.
Type de bordure separate : les bordures du tableau et des cellules sont séparées
(par défaut).
Cellules vides empty-cells show : les bordures des cellules vides sont affichées.
collapse : les cellules vides sont masquées (par défaut).
19 Indique la position du titre du tableau, défini via la balise
<caption>
Position du titre caption-side top : en haut du tableau

bottom : en bas du tableau
left : à gauche du tableau
right : à droite du tableau
AUTRES PROPRIETES
auto : curseur automatique (par défaut)
default : curseur standard
pointer : curseur en forme de maintext : curseur utilisé quand
on pointe sur du texte
wait : curseur utilisé pour indiquer une attente (sablier)
progress : curseur utilisé pour indiquer une tâche de fond
(curseur avec sablier)
help : curseur en forme de point d'interrogation, indiquant une
aide
move : curseur en forme de croix, indiquant un déplacement
possible
n-resize : flèche vers le nord

Curseur de souris cursor ne-resize : flèche vers le nord-est
e-resize : flèche vers l'est
se-resize : flèche vers le sud-est
s-resize : flèche vers le sud
sw-resize : flèche vers le sud-ouest
w-resize : flèche vers l'ouest
nw-resize : flèche vers le nord-ouest
url : curseur personnalisé, de type .cur ou .ani. Exemple :

cursor: url("images/curseur.cur"), auto;
Vous devez utiliser un logiciel dédié à la création de curseurs

pour créer des .cur et des .ani. Notez aussi la présence du mot
auto à la fin. Cela signifie que le navigateur tentera de charger
le curseurpersonnalisé. S'il n'a pu être chargé pour une
quelconque raison, le curseur correspondant à la valeur auto
sera utilisé.

LES TRANSITIONS
Pour les transitions nous allons utiliser les propriétées ci-dessous que l’on prefixera -moz-
transitionproperty, pour Google Chrome et Safari -webkit-transition-property et pour Opera –o-
transition- property.
- transition-property ;
- transition-duration.
p{
/* Seules la couleur du texte et les dimensions de nos paragraphes auront une transition. */
transition-property: color, width, height;
/* La transition durera trois secondes. */
20 transition-duration: 3s;
}
Les transitions auront lieu automatiquement dès que les propriétés concernées seront modifiées pour cela
on peut utiliser les pseudo-formats.
Exemple :
/* Style par défaut de nos paragraphes (= état initial). */

p{
transition-property: color, width, height;
transition-duration: 3s;
/* On stylise un peu plus nos paragraphes. */
width: 400px;
height: 200px;
color: #fff;
background-color: #a5a5a5;
border: 2px solid #000;
margin: auto;
text-align: center;
}
/* Style lors du passage de la souris (= état final). */
p:hover
{
width: 300px;
height: 300px;
color: #000;
}

DES TRANSITIONS (UN PEU) PLUS COMPLEXES
- transition-delay ;
- transition-timing-function.
La première, transition-delay, permet de définir un délai avant que la transition n'ait lieu. Comme pour
transition-duration, il est possible de la définir en secondes (s) ou en millisecondes (ms), et sa valeur par
défaut est 0s.
/* Style par défaut de nos paragraphes (= état initial). */

p{
21 transition-property: color, width, height;
transition-duration: 3s;
/* On attend 1,5 seconde avant que la transition ne se lance. */
transition-delay: 1500ms;
/* On stylise un peu plus nos paragraphes. */
width: 400px;
height: 200px;
color: #fff;
background-color: #a5a5a5;
border: 2px solid #000;
margin: auto;
text-align: center;
}
Un autre exemple :
p{
width: 300px;
height: 200px;
background-color: #fff;
-moz-transition-property: background-color;
}
p:hover
{
width: 400px;
height: 100px;
background-color:#000;
}
Bien plus intéressante, transition-timing-function permet de spécifier l'accélération de notre transition :

celle-ci doi elle être rapide au début puis lente à la fin ? Doit-elle s'exécuter à vitesse constante ?
Cette propriété peut prendre les valeurs suivantes :
- linear : la vitesse de transition est la même du début à la fin de la transition ;
- ease : la transition commence doucement, s'accélère, puis se termine doucement. Il s'agit de la
valeur par défaut ;
- ease-in : la transition s'accélère peu à peu ;
- ease-out : la transition ralentit peu à peu ;
- ease-in-out : la transition commence doucement, s'accélère, puis se termine doucement. Il s'agit
en fait de la même chose que la valeur ease, sauf que l'effet est plus prononcé ;

- cubic-bezier(x,x,x,x) : Cette valeur emploie la courbe de Bézier pour définir l'accélération de la
transition. Remplacez « simplement » les x par des valeurs comprises entre 0 et 1.
La méga propriété de transition

Fusionons toutes les propriétés que nous venons de voir en une seule, générique qui est transition !
Voici la manière dont elle se présente :
Code : CSS
p{
transition: property duration timing-function delay;
}
Dans le cas où nous souhaitons faire des transitions pour plusieurs propriétés, il suffit de les ajouter à la
22 suite, chacune séparée par une virgule. Pour notre exemple, voici ce que ça donne :
p{
/* Il est possible de spécifier des valeurs différentes pour chaque propriété. */
transition: color 3s ease 1500ms, width 1s ease-in 0s, height 2s ease-out 0.2s;
}
DES DEGRADES NATIFS

Pour les dégradés on utilise soit radial-gradient ou linear-gradient. Ils s’utilisent de la même manière
background-image: -moz-linear-gradient( couleur1,couleur2,...,couleurN);

background-image: -moz-linear-gradient(direction, couleur1,couleur2,...,couleurN);
linear-gradient(45deg, blue 10%, black 50%, green 90%);
Les valeurs possibles de direction sont:

- to left
- to right
- to top
- to bottom

FONCTIONNALITES EVOLUEES
LES TABLEAUX
 Les tableaux simples (petit tableaux):
HTML
- <table></table> : délimite le tableau.
- <th></th> : pour les colonnes d’en tête.
- <tr></tr> : délimite une ligne du tableau.
- <td></td> : délimite une cellule du tableau (situé entre les balises <tr></tr>)
- <caption></caption> : permet de donner un titre au tableau.
23
Code : HTML
<figcaption>Tableau avec les en-têtes sous une même ligne </figcaption>
<table>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>États-Unis</td>
</tr>
</table>
CODE : HTML
<figcaption>Tableau avec les en-têtes sur une même colonne</figcaption>
<table>
<tr>
<th>Nom</th>
<td>Carmen </td>
<td>Michelle</td>
</tr>
<tr>
<th>Age</th>
<td> 33 ans </td>
<td> 26 ans </td>
</tr>
<tr>
<th>Pays < /th>
<td>Espagne</td>
<td>Etats-unis</td>
</tr>
</table>

CSS
Description Propriétés Valeurs
- collapse : appliqué à la balise <table> permettant de
Bordures du border-collapse coller les bordures des cellules
tableau - separate : les bordures sont séparées (par défaut)
- top : le titre sera placé au-dessus du tableau (par
Position du titre caption-side défaut) ;
du tableau - bottom: le titre sera placé en dessous du tableau.
Fusionner les colonnes Colspan - X ∈ 𝑹+: indiquant le nombre de cellule horizontal à fusionner
(Fusion horizontal)
Fusionner les lignes Rowspan - X ∈ 𝑹+: indiquant le nombre de cellule vertical à
(fusion vertical) fusionner
24
Alignement vertical du vertical-align - Même valeurs que pour les éléments en inline-block
text
Pour effectuer une fusion, on rajoute l’un des attributs rowspan ou colspan à la balise <td>.
Code : HTML
<td colspan="2">qui signifie : « Cette cellule est la fusion de deux cellules ».
CODE :CSS
table
{
border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
}
td
{
border: 1px solid black;
}
 Les tableaux complexes (gros tableaux) : ils sont constitués de trois parties qui sont :
HTML
- l'en-tête (en haut) : il se définit avec les balises <thead></thead>;
- le corps (au centre) : il se définit avec les balises <tbody></tbody>;
- le pied du tableau (en bas) : il se définit avec les balises <tfoot></tfoot>.
- Pour le reste c’est exactement comme pour les petits tableaux.
LES FORMULAIRES
 Créer un formulaire :<form></form> ; délimite le formulaire (contient les balises <input/>)
La balise <form>prend deux attributs qui sont :
- method: cet attribut indique par quel moyen les données vont être envoyées. Pour envoyer des
données sur le Web on lui donnera la valeur post. Ex : methode =‘’post’’.
- action: c'est l'adresse de la page ou du programme qui va traiter les informations. Cet attribut a
pour valeur le nom par exemple de la page qui traitera les informations.
Ex : action= ‘’traitement.php’’.
les zones de saisie basiques
 les zones de texte monoligne (champs de saisie mono ligne) : <input />comme son nom
l'indique, on ne peut y écrire qu'une seule ligne. Elle sert à saisir des textes courts.
 Les libélles :<label></label> permet d’indiquer à celui qui remplit le formulaire ce que doit
contenir un champ quelconque.
<label for=‘’pseudo’’> Votre pseudo : </label><input type= ‘’text’’ name= ‘’pseudo’’ id= ‘’pseudo’’/>

Balise Attributs Valeurs Descriptions de l’attribut

method Post indique par quel moyen les données vont être envoyées sur le
<form> Get web* (POST par les formulaires et GET par les liens).
action e.g page.php c'est l'adresse de la page ou du programme qui va traiter les
informations*
type text
Indique la nature de ce que contiendra le champ *
password
Permet de reconnaitre d’où viennent les informations ex : pseudo
name e.g pseudo qui permet de savoir à quoi ou à quel information correspond le
champ. *
id Permet de lié le champ de saisie au label *
<input />
25 size Pour agrandir le champ
maxlength. limite le nombre de caractères que l'on peut saisir
value Pour pré-remplir le champ avec une valeur par défaut
placeholder Permet de donner une indication sur le contenu du champ. qui
disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.
enctype multipart/form- Pour envoyer un fichier (upload)
data
<label> for Permet de lier le label au champ dont La valeur correspond à la
* valeur de l’id da la balise <input/>
 Zone de texte multiligne :<textarea></textarea> ; fonctionne de la même façon que la balise

<input/>sauf qu’il ne prend pas l’attribut type.
On peut modifier la taille de la zone de saisie avec :

- Les propriétés width et height en CSS ou avec.
- Les attributs rows et cols à la balise <textarea> indiquant respectivement le nombre de ligne et
de colonne de texte à afficher simultanément.
- <input type="file" /> : Permet d’envoyer un fichier (upload)
 Les zones de saisie enrichies :

- E-mail : <input type="email" />
- Une URL : <input type="url" />
- Numéro de téléphone : <input type="tel" />
- Nombre : <input type="number" />
- Un curseur : <input type="range" />
- Couleur :<input type="color" />
- Date : <input type="date" />
- Recherche :<input type="search" />
- Texte :<input type="texte" />
- Mot de passe : <input type="password" />
 Les éléments d'options :

- Les cases à cocher : <input type="checkbox" name="choix" /> pour chaque élément à cocher
(donc on en rajoutera autant en fonction des choix possibles)
NB : plusieurs éléments pouvant être sélectionné.

CODE : HTML
<form method="post" action="traitement.php">
<p>
Cochez les aliments que vous aimez manger :<br />
<input type="checkbox" name="frites" id="frites" />
<label for="frites">Frites</label><br />
<input type="checkbox" name="epinards" id="epinards" />
<label for="epinards">Epinards</label><br />
<input type="checkbox" name="huitres" id="huitres" />
<labelfor="huitres">Huitres</label>
</p>
</form>
26 NB : L’attribut « checked » permet à ce qu’une case soit cochée par défaut.
- Les zones d'options :<input type="radio" name="sexe"value=" " />pour un élément à cocher.
(donc on en rajoutera autant en fonction des choix possibles)
NB : un seul élément doit être sélectionné.
CODE :HTML
<form method="post" action="traitement.php">
<p> Veuillez indiquer votre sexe :<br />
<input type="radio" name="sexe" value="male" id="male"/><label for="male"> Homme </label><br />
<input type="radio" name="sexe" value="female" id="female" /><label for="female">Femme</label><br >
</p>
</form>
- Liste déroulante : <select></select>dans laquelle on va placer la balise paire <option></option>

CODE :HTML
<label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<option value="france">france</option>
<option value="espagne">espagne</option>
<option value="italie">italie</option>
<option value="royaume-uni">royaume-uni</option>
<option value="canada">canada</option>
<option value="etats-unis">états-unis</option>
<option value="chine">chine</option>
<option value="japon">japon</option>
</select>
- Pour qu’un élément soit sélectionné par défaut on utilise l’attribut « selected».
- Vous pouvez aussi grouper vos options avec la balise <optgroup></optgroup>.
- <fieldset></fieldset> pour regrouper les champs.
 Eléments cachés : <input type="hidden" name="pseudo" value="Mateo21" /> (cette case est visile
dans le code source)
Finaliser et envoyer le formulaire

 Regrouper les champs
Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de les
regrouper au sein de plusieurs balises <fieldset>< /fieldset>. Chaque <fieldset>peut contenir
une légende avec la balise paire <legend></legend>.
 sélectionner automatiquement un champ : pour que le curseur se place automatiquement dans
un champ on utilise l’attribut « autofocus » et ne prend aucune valeur.

 Rendre un champ obligatoire : on peut rendre un champ obligatoire grâce à l’attribut
« required »
 On dispose de pseudo-formats en CSS pour changer le style des éléments requis (:required) et invalides
(:invalid). N'oubliez pas non plus que vous disposez du pseudo-format «:focus» pour changer l'apparence
d'unchamp lorsque le curseur se trouve à l'intérieur.
 Le bouton d’envoi : on le crée grâce à la balise<inputtype= ‘’valeur’’ value= ‘’ ’’/>les valeurs de l’attribut
type pouvant être :
- type="submit": le principal bouton d'envoi de formulaire. Le visiteursera conduit à la page indiquée dans
l'attribut action du formulaire.
- type="reset": remise à zéro du formulaire.
- type="image": équivalent du bouton submit, présenté cette fois sous forme d'image. Rajoutez
27 l'attributsrcpourindiquer l'URL de l'image.
- type="button": bouton générique, qui n'aura (par défaut) aucun effet. En général, ce bouton est géré en
JavaScriptpour exécuté des actions sur la page.
NB :La valeur de l’attribut « value » sera le texte affiché dans le bouton.
Ex : <input type="submit" value="Envoyer" />
LES VIDEOS ET L’AUDIOS

- Le Format vidéo le plus utilisé est H.264
 Insertion d'un élément audio : <audio src="fichieraudio.format"></audio> ; charge juste les metadatas.
On peut compléter la balise des attributs suivants :
- controls: pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
- width: pour modifier la largeur de l'outil de lecture audio.
- loop: la musique sera jouée en boucle.
- autoplay: la musique sera jouée dès le chargement de la page.
- preload: indique si la musique peut être pré chargée dès le chargement de la page ou non. Cet attribut
peut prendre lesvaleurs :
 auto(par défaut) : le navigateur décide s'il doit pré charger toute la musique, uniquement les
métadonnées ourien du tout.
 metadata: charge uniquement les métadonnées (durée, etc.).
 none: pas de pré-chargement.
On peut proposer plusieurs formats d’un son

CODE :HTML
<audio controls>
<source src="hype_home.mp3"></source>
<source src="hype_home.ogg"></source>
</audio>
NB : On peut proposer une solution de secours en flash comme Dewplay pour les navigateurs ne gérant pas
un format quelconque. Le code Dewplay est inséré entre les balises <audio></audio>
 Insertion d'une vidéo : <video src="sintel.webm"></video>

Rajoutons quelques attributs (la plupart sont les mêmes que pour la balise <audio>) :
- poster: image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. première image de la
vidéo.
- controls: pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
- width: pour modifier la largeur de la vidéo.
- height: pour modifier la hauteur de la vidéo.
- loop: la vidéo sera jouée en boucle.
- autoplay: la vidéo sera jouée dès le chargement de la page.
- preload: indique si la vidéo peut être pré chargée dès le chargement de la page ou non. Cet attribut peut
prendre lesvaleurs :

 auto (par défaut) : le navigateur décide s'il doit pré charger toute la vidéo, uniquement les
métadonnées ou riendu tout.
 metadata: charge uniquement les métadonnées (durée, dimensions, etc.).
 none: pas de pré chargement.
On peut proposer plusieurs formats d’une video comme suit :

<video controls poster="sintel.jpg" width="600">
<source src="sintel.mp4" />
<source src="sintel.webm" />
<source src="sintel.ogv" />
</video>
28 MISE EN PAGE ADAPTIVE (MEDIAQUERY)

 <link rel="stylesheet" href="style.css" />: Pour charger un media query depuis un fichier.css
 <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" />
(Pour ceux qui ont un écran et une largeur < 1280px on charge la feuille petie_resolution.css)
- On peut aussi bien charger le media query depuis nos fichier.css

 Les règles disponibles
Il existe de nombreuses règles permettant de construire des media queries. Je vous présente ici les
principales :
- color: gestion de la couleur (en bits/pixel).
- height : hauteur de la zone d’affichage (fenêtre).
- width : largeur de la zone d'affichage (fenêtre).
- device-height : hauteur du périphérique.
- device-width : largeur du périphérique.
- orientation : orientation du périphérique (portrait ou paysage).
- media : type d'écran de sortie. Quelques-unes des valeurs possibles :
 screen : écran « classique » ;
 handheld : périphérique mobile ;
 print : impression ;
 tv : télévision ;
 projection : projecteur ;
 all : tous les types d'écran.
On peut rajouter le préfixe min-ou max-devant la plupart de ces règles. Ainsi, min-width signifie « Largeur
minimale », max-height « Hauteur maximale », etc.
Les règles peuvent être combinées à l'aide des mots suivants :
- only : « uniquement » ;
- and : « et » ;
- not : « non ».
Exemples de requête
- /* Sur les écrans, quand la largeur de la fenêtre fait au maximum1280px */ @media screen and (max-width:
1280px)
- /* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px */
@media all and (min-width: 1024px) and (max-width: 1280px)
- /* Sur les téléviseurs */@media tv
- /* Sur tous types d'écrans orientés verticalement */@media all and (orientation: portrait)
Pour éviter les bugs sur les anciennes versions IE une astuce consiste à utiliser le mot-clé only que ces
vieilles versions ne connaissent pas :
Ex : « @media only screen » ne provoquera pas de bug sur les vieux navigateurs
 pour la résolution des écrans de mobile on utilisera : max-device-width plutôt que max-width

<meta name="viewport" content="width=320" />
On peut utiliser cette balise pour modifier la façon dont le contenu de votre page s'organise sur les mobiles.
Pour obtenir un rendu facile à lire, sans zoom, vous pouvez demander à ce que le viewport soit le même que
la largeur de l'écran :
Code : HTML
*<meta name="viewport" content="width=device-width" />
29
PHP
- <?php ?> balise à l’intérieur de laquelle on écrit le code PHP
- <?php/* Le code PHP se met ici */ ?> d’autres balises sont : <? ?>et <% %>.
 AFFICHER DU TEXTE
- <?php echo "Ceci est du texte"; ?> (on affiche du texte grâce à l’instruction echo, il se termine
obligatoirement par un point-virgule ( ;) )
- Il est aussi possible d’afficher les balises (introduire les balises html dans le code php)
Ex : <?php echo "Ceci est du <strong>texte</strong>"; ?>
- Pour afficher des guillemets on le précède d’un antislash(\)
30
 LES COMMENTAIRES
- Les commentaires monolignes ;// ce qui suit est un commentaire monoligne
- Les commentaires multilignes : /* ce texte est un commentaire multiligne*/
 INCLURE DES PORTIONS DE PAGE

Il est possible d’insérer des portions de page ou une page entière dans une autre, ceci
évite la répétition.
- Pour inclure une portion de page ou une page entière on utilise l’instruction include.
Ex : <?php include("menus.php"); ?> ou <?php include("page.php") ; ?>
Application
<!DOCTYPE html>
<html>
<head>
<title>Mon super site</title>
</head>
<body>
<?php include("entete.php"); ?> /* charge l’entête qui contient les principaux lien de
navigation*/
<?php include("menus.php"); ?>/* charge le menu*/

<div id="corps">
<h1>Mon super site</h1>
<p>
Bienvenue sur mon super site !
</p>
</div>

<?php include("pied_de_page.php"); ?>
</body>
</html>
LES VARIABLES
- Déclarer une variable :
<?php
$variable = 'Mon "nom" est Mateo21';
$variable = "Je m'appelle Mateo21";
?>
- Afficher le contenu d’une variable :<?php echo $variable; ?>
- Concaténer (assemblage) :

<?php
$age_du_visiteur = 17;
echo 'Le visiteur a ' . $age_du_visiteur . ' ans';
?>
LES CONDITIONS
 Les symboles à connaitre
Symbole Signification Symbole signification
== Est égal à >= Est supérieur ou égal à
> Est supérieur à <= Est inférieur ou égal à
31 < Est inférieur à != Est différent de
 La structure if
<?php
$age = 8;
if ($age <= 12)
{
echo "Salut gamin !";
}
?>
 La structure if…else
< ?php
$age = 8;
if ($age <= 12) // SI l'âge est inférieur ou égal à 12
{
echo "Salut gamin ! Bienvenue sur mon site !<br />";
$autorisation_entrer = "Oui";
}
else // SINON
{
echo "Ceci est un site pour enfants, vous êtes trop vieux pour pouvoir entrer. Au revoir
!<br />";
$autorisation_entrer = "Non";
}
echo "Avez-vous l'autorisation d'entrer ? La réponse est : $autorisation_entrer";
?>
 La structure if…elseif…else
<?php
if ($autorisation_entrer == "Oui") // SI on a l'autorisationd'entrer
{
// instructions à exécuter quand on est autorisé à entrer
}
elseif ($autorisation_entrer == "Non") // SINON SI on n'a pasl'autorisation d'entrer
{
// instructions à exécuter quand on n'est pas autorisé à entrer
}
else // SINON (la variable ne contient ni Oui ni Non, on ne peutpas agir)
{
echo "Euh, je ne connais pas ton âge, tu peux me le rappeler s'il te plaît ?";
}
?>
 Le cas des booleéns

<?php

if ($autorisation_entrer == true) // true et false ne sont pas obligatoire quand on travaille sur des
booléns
{
echo "Bienvenue petit Zéro. :o)";
}
elseif ($autorisation_entrer == false)
{
echo "T'as pas le droit d'entrer !";
}
?>
 Pour tester si la variable vaut false

<?php
32 if (! $autorisation_entrer)
{
}
?>
 CONDITION MULTIPLES
Mot-clé signification symbole
AND Et &&
OR Ou ||
 L’ASTUCE BONUS (utilisable quand on veut inclure du html sur plusieurs lignes dans le code
php)
<?php
if ($variable == 23)
{
?>
<strong>Bravo !</strong>Vous avez trouvé le nombre mystère !
<?php
}
?>
 Le switch (alternative au long if…elseif…else)

<?php
$note = 10;
switch ($note) // on indique sur quelle variable on travaille
{
case 0: // dans le cas où $note vaut 0
echo "Tu es vraiment un gros Zér0 !!!";
break;
echo "Tu es très mauvais";
break;
echo "Tu es mauvais";
break;
default:
echo "Désolé, je n'ai pas de message à afficher pour cettenote";
}
?>
 Les ternaires conditions condensées
< ?php
$age = 24;
$majeur = ($age >= 18) ? true : false;
?>
LES BOUCLES
 La boucle while :
<?php
while ($continuer_boucle == true)
{// instructions à exécuter dans la boucle }
?>
Exemple d’utilisation
<?php
$nombre_de_lignes = 1;
while ($nombre_de_lignes <= 100)
{
echo 'Je ne dois pas regarder les mouches voler quandj\'apprends le PHP.<br />';
$nombre_de_lignes++; // $nombre_de_lignes = $nombre_de_lignes +1
}
?>
33
 Une boucle plus complexe : for
Exemples d’utilisation
<?php
for ($nombre_de_lignes = 1; $nombre_de_lignes <= 100;$nombre_de_lignes++)
{
echo 'Ceci est la ligne n°' . $nombre_de_lignes . '<br />';
}
?>
NB : On utilise la boucle for quand on sait exactement le nombre de fois que l’on veut que la boucle
ce répète, au cas contraire la boucle while est recommandé.
LES FONCTIONS
Une fonction est une série d’instructions qui effectue des actions et renvoie une valeur. Les
fonctions sont différentes des boucles dû au fait qu’elle s’adapte en fonction des paramètres.
 Appeler une fonction(Quand on appel une fonction le plus souvent on lui donne le(s)
paramètre(s) avec le(s) quel(s) travailler)
<?php
ma_fonction(); // cette fonction ne prend aucun paramètre
?>
<?php
fonctionImaginaire(17, 'Vert', true, 41.7); // cette fonction prend 3 paramètres séparés par des
virgules.
?>
 Récupérer la valeur retournée par une fonction(On peut récupérer la valeur de retour d’une
34 fonction dans une variable)
<?php
$variable = ma_fonction(paramètre(s)); // la valeur retournée par ma_fonction sera stocké dans $variable.
?>
NB : Une fonction ne peut renvoyer qu’une seul valeur. On peut contourner ce problème en
enregistrant nos valeurs dans un tableau (array) et c’est ce dernier que l’on enverra.
 Fonction de manipulation des chaines de caractères

- strlen : longueur d'une chaîne
Exemple d’utilisation :
<?php
$phrase = 'Bonjour les Zéros ! Je suis une phrase !';
$longueur = strlen($phrase);
echo 'La phrase ci-dessous comporte ' . $longueur . ' caractères :<br />' . $phrase;
?>
- str_replace : rechercher et remplacer

<?php
$ma_variable = str_replace('b', 'p', 'bim bam boum'); // remplace b par «p dans « bim bam boum »
echo $ma_variable;
?>
- str_shuffle : mélanger les lettres

$chaine = 'Cette chaîne va être mélangée !';
$chaine = str_shuffle($chaine);
echo $chaine;
- strtolower ou strtoupper : écrire en minuscules ou en majuscule

<?php
$chaine = 'COMMENT CA JE CRIE TROP FORT ???';
$chaine = strtolower($chaine);
echo $chaine;
?>
- date : Récupérer la date

Paramètres à connaitre (respecter la casse)
H= Heure, i = Minute, d=Jour, m=Mois Y = Année
<?php
// Enregistrons les informations de date dans des variables
$jour = date('d');

$mois = date('m');
$annee = date('Y');
$heure = date('H');
$minute = date('i');
// Maintenant on peut afficher ce qu'on a recueilli
echo 'Bonjour ! Nous sommes le ' . $jour . '/' . $mois . '/' .$annee . 'et il est ' . $heure. ' h ' . $minute;
?>
- Concaténer des chaînes de caractère:

Exemple : $nom_prenom = $prenom." ".$nom;
- strcmp : comparer 2 chaines de caractères (pour déterminer si elles sont égales)

strcmp($nom1,$nom2); //renvoie la valeur 0 si les deux chaines sont identiques
35 strcmp("James","JAMES") renvoie <> 0
strcasecmp($nom1,$nom2); (identique, sauf que l'on ne tient pas compte de la casse)

strcasecmp("James","JAMES") renvoie 0
- Trouver les occurrences d'un motif dans une chaine
●strpos($chaine,$motif); renvoie la position de la 1ère occurrence
Exemple :
$nom_prenom="James Bond Boit";
strpos($nom_prenom,"Bo") → renvoie 6
strpos($nom_prenom,"tutu") → renvoie FALSE
●strrpos($chaine,$motif); renvoie la position de la dernière occurrence

Exemple
$nom_prenom="James Bond Boit";
strrpos($nom_prenom,"Bo") → renvoie 11
strrpos($nom_prenom,"tutu") → renvoie FALSE
- Substitution
●str_replace($motif,$remplace,$chaine);
Remplace dans $chaine la sous-chaine débutant à $motif par $remplace
Exemple:
str_replace("Bond","Herrmann","James Bond") → renvoie "JamesHerrmann"
●strtr($chaine,$rech,$rep)
Remplace dans $chaine toutes les occurrences de $rech par $rep
 Créer une fonction :

Exemple1 : (cette fonction ne retourne rien)
< ?php
function DireBonjour($nom) // création de la fonction qui dit bonjour, prenant comme paramètre $nom
echo 'Bonjour ' . $nom . ' !<br />';

}
DireBonjour('Marie'); // on appelle la fonction Dire Bonjour en lui donnant le paramètre « Marie »
?>
Exemple2 : (cette fonction retourne une valeur)

<?php
// Ci-dessous, la fonction qui calcule le volume du cône
function VolumeCone($rayon, $hauteur){
$volume = $rayon * $rayon * 3.14 * $hauteur * (1/3); // calcul du volume
return $volume; // indique la valeur à renvoyer, ici le volume
}
$volume = VolumeCone(3, 1);
echo 'Le volume d\'un cône de rayon 3 et de hauteur 1 est de ' .$volume;
?>
Généralité
< ?php
function NomDeFonction (paramètre1, paramètre2)
{
// Instructions
}
?>
LES TABLEAUX
Les tableaux (arrays) sont de grosse variable contenant d’autre variable. Il existe 2 types de
tableaux : Les tableaux numérotés et les tableaux associatifs.
36
 Tableaux numérotés : Permettent de stocker des variables de même type. Considérons la
variable $prenom(un array) ne contiendra que des prénoms.
Clé Valeur
0 Bernard
1 Landry
- Construire un tableau numéroté

<?php
// La fonction array permet de créer un array
$prenoms = array ('François', 'Michel', 'Nicole', 'Véronique', 'Benoît');*
?>
Ou on peut créer case par case
<?php
$prenoms[0] = 'François';
$prenoms[1] = 'Michel';
$prenoms[2] = 'Nicole';
?>
- Afficher un tableau numéroté

<?php echo $prenoms[0]; ?>
 Tableaux associatifs : Permet de découper une donnée en plusieurs sous éléments (au lieu de numéroté
les cases, elles seront étiquetés)
Clé Valeur
prenom François
nom Dupont
adresse 3 Rue du Paradis
- Construire un tableau associatif

<?php
// On crée notre array $coordonnees
$coordonnees = array (
'prenom' => 'François',
'nom' => 'Dupont',
'adresse' => '3 Rue du Paradis') ;
?>
=> : Signifie associé a …
Ou on peut créer case par case
<?php
$coordonnees['prenom'] = 'François';
$coordonnees['nom'] = 'Dupont';

$coordonnees['adresse'] = '3 Rue du Paradis';;
?>
Afficher un tableau associatif

<?php
echo $coordonnees['prenom']; // Pour afficher un élément du tableau (array).
?>
 Parcourir un tableau :
- La boucle for : pratique pour les tableaux numérotés.
Exemple :
<?php
37 // On crée notre array $prenoms
$prenoms = array ('François', 'Michel', 'Nicole', 'Véronique','Benoît');
// Puis on fait une boucle pour tout afficher :
for ($numero = 0; $numero < 5; $numero++){
echo $prenoms[$numero] . '<br />'; // affichera $prenoms[0],$prenoms[1] etc.
}
?>
- La boucle foreach : Pratique pour les tableaux associatifs et numérotés

Exemple1 :
<?php
$prenoms = array ('François', 'Michel', 'Nicole', 'Véronique', 'Benoît');
Foreach ($prenoms as $element)
{
echo $element . '<br />'; // affichera $prenoms[0], $prenoms[1] etc.
}
?>
Exemple2 :
<?php
'nom' => 'Dupont',
'adresse' => '3 Rue du Paradis');
foreach($coordonnees as $element){
echo $element . '<br />';
}
?>
- Si on veut récupérer la clé dans le cas d’un tableau associatif on utilisera :

<?php foreach($coordonnees as $cle => $element) ?>
Exemple:
<?php
'nom' => 'Dupont',
foreach($coordonnees as $cle => $element){
echo '[' . $cle . '] vaut ' . $element . '<br />';
}
?>
- Pour afficher un tableau juste pour voir ce qu’elle contient sans manière on utilise print_r (une
sorte d’echo spécialisé dans les arrays.) Comme elle ne revoie pas de code HTML comme <br>
on doit l’entourer de <pre></pre> pour un affichage correcte.
NB : utilisé pour le débogage
Exemple :
<?php
'nom' => 'Dupont',
echo '<pre>';
print_r($coordonnees);
echo '</pre>';
?>
38
 RECHERCHER DANS UN TABLEAU (très utile pour savoir si un array contient ou non certaines informations)
- array_key_exists: pour vérifier si une clé existe dans l'array ;
- in_array: pour vérifier si une valeur existe dans l'array ;
- array_search: pour récupérer la clé d'une valeur dans l'array
 Vérifier si une clé existe dans l'array : array_key_exists

<?php array_key_exists('cle', $array); ?>
Cette fonction prend 2 paramètres: la clé à rechercher et l’array dans le quel recherché la clé et
renvoie une booléen, c'est-à-dire true(vrai) si la clé est dans l'array, et false(faux) si la clé ne s'y
trouve pas
Exemple :
<?php
'nom' => 'Dupont',
if (array_key_exists('nom', $coordonnees)){
echo 'La clé "nom" se trouve dans les coordonnées !';
}
else{
echo “La clé ne se trouve pas dans l’array !”;
}
if (array_key_exists('pays', $coordonnees)){
echo 'La clé "pays" se trouve dans les coordonnées !';
}
?>
 Vérifier si une valeur existe dans l'array: in_array
<?php array_key_exists('valeur', $array); ?>
Le principe est le même que array_key_exists… mais cette fois on recherche dans les valeurs.
in_array renvoie true si la valeur se trouve dans l'array, false si elle ne s'y trouve pas.
Exemple :
<?php
$fruits = array ('Banane', 'Pomme', 'Poire', 'Cerise', 'Fraise', 'Framboise');
if (in_array('Myrtille', $fruits)){
echo 'La valeur "Myrtille" se trouve dans les fruits !';
}
If (in_array('Cerise', $fruits)){
echo 'La valeur "Cerise" se trouve dans les fruits !';
}
?>

 Récupérer la clé d'une valeur dans l'array : array_search
array_search fonctionne comme in_array : il travaille sur les valeurs d'un array. Voici ce que renvoie
la fonction :
 si elle a trouvé la valeur, array_search renvoie la clé correspondante (c'est-à-dire le
numéro si c'est un array numéroté, ou le nom de la clé si c'est un array associatif);
 si elle n'a pas trouvé la valeur, array_search renvoie false
Exemple :
<?php
$fruits = array ('Banane', 'Pomme', 'Poire', 'Cerise', 'Fraise', 'Framboise');
$position = array_search('Fraise', $fruits);
echo '"Fraise" se trouve en position ' . $position . '<br />';
39 $position = array_search('Banane', $fruits);
Echo '"Banane" se trouve en position ' . $position;
?>
TRANSMETTRE DES DONNEES DE PAGE EN PAGE

 Transmettre des données avec l'URL
Dans une URL (Uniform Resource Locator) tous ce qui vient après les point d’interrogation
sont les données que l’on faits transiter d’une page à une autre.
 Envoyer des paramètres dans l'URL

http://www.monsite.com/bonjour.php?nom=Dupont&prenom=Jean
Dans l’URL ci-dessus on appelle la page bonjour.php à qui on transmet les paramètres nom
et prenom de valeurs respective Dupont et Jean.
NB : Les paramètres sont séparés par « & ». On peut faire transiter autant de paramètres que l’on veut.
 Créer un lien avec des paramètres :
<a href="bonjour.php?nom=Dupont&prenom=Jean">Dis-moi bonjour!</a>
Ceci est un lien de la page index.php par exemple qui mène à bonjour.php et qui lui transmet des
informations (paramètres) nom et prenom de valeurs respective Dupont et Jean dans l'URL.
 Récupérer les paramètres transmit par URL en PHP :
Ici on s’intéresse à la page qui réceptionne les paramètres transmit par URL, celle-ci va
automatiquement créer un array associatif au nom spécial $_GET de la forme :
Nom Valeur
$_GET[‘nom’] Dupont
$_GET[‘prenom’] Jean
Afficher
<p>Bonjour <?php echo $_GET['prenom']; ?> !</p>
<p>Bonjour <?php echo $_GET['prenom'] . ' ' . $_GET['nom']; ?> !</p>
 Ne jamais faire confiance aux données reçus:

Il est important de jamais faire confiance aux données reçus car tout le monde peut trafiquer
l’URL, d’où l’importance de toujours tester la présence des paramètres, pour cela on utilise la
fonction isset(). Cette fonction teste si une variable existe.
Exemple :
<?php
if (isset($_GET['prenom']) AND isset($_GET['nom'])) // On a le nom et le prénom{
echo 'Bonjour ' . $_GET['prenom'] . ' ' . $_GET['nom'] . ' !';
}
else // Il manque des paramètres, on avertit le visiteur{
echo 'Il faut renseigner un nom et un prénom !';
}
?>
 Contrôler la valeur ou existence des paramètres :
<?php
if (isset($_GET['prenom']) AND isset($_GET['nom']) AND isset($_GET['repeter'])){
for ($i = 0 ; $i < $_GET['repeter'] ; $i++){
echo 'Bonjour ' . $_GET['prenom'] . ' ' . $_GET['nom'] . ' !<br/>';
}
}
else{
40 echo 'Il faut renseigner un nom, un prénom et un nombre de répétitions !
}
?>
Le code ci-dessus répète le nom et le prenom d’un visiteur un certain nombre de fois
 Contrôlons les valeurs reçu par notre page cible

Dans le code PHP ci-dessus pour être sûr que $_GET['repeter'] contient bien un nombre
on peut forcer la conversion (transtypage) en procédant comme suit :
<?php
$_GET['repeter'] = (int) $_GET['repeter']; //on lit l’instruction de la droite vers la gauche
?>
AU FINAL ON A
<?php
if (isset($_GET['prenom']) AND isset($_GET['nom']) AND isset($_GET['repeter']))
{
$_GET['repeter'] = (int) $_GET['repeter']; // 1 : On force la conversion en nombre entier
// 2 : Le nombre doit être compris dans une certaine plage de valeurs
if ($_GET['repeter'] >= 1 AND $_GET['repeter'] <= 100) entre 1 et 100
{
for ($i = 0 ; $i < $_GET['repeter'] ; $i++){
echo 'Bonjour ' . $_GET['prenom'] . ' ' . $_GET['nom'] . ' !<br/>';
}
}
else{
echo 'Il faut renseigner un nom, un prénom et un nombre de répétition !
}
}
?>
TRANSMETTRE DES DONNEES AVEC LES FORMULAIRES

Ne jamais faire confiance aux données reçu, il est possible que l’on envoie du code html ou
du script dans les champs du formulaire. Résoudre le problème est facile : il faut protéger le code
HTML en l'échappant, c'est-à-dire en affichant les balises (ou en les retirant) plutôt que de les faire
exécuter par le navigateur, pour cela on utilise la fonction « htmlspecialchars » qui va transformer
les chevrons des balises HTML <>en < et > respectivement ou la balise « strip_tags » si l’on ne
veut pas afficher les balises Html.
Exemple :
<?php
echo htmlspecialchars($_POST['prenom']);
?>
NB: Il est important d’échapper toutes les zones de saisie ou de retirer les balises.
 UPLOAD (envoyer un fichier)
41 - Formulaire d’envoi de fichier

<form action="cible_envoi.php" method="post" enctype="multipart/form-data">
<p>
Formulaire d'envoi de fichier :<br />
<input type="file" name="monfichier" /><br />
<input type="submit" value="Envoyer le fichier" />
</p>
</form>
- Le traitement de l'envoi d’un fichier en PHP

Lorsqu’on envoie un fichier dans la page cible une variable (array) $_FILES['nom_du_champ']
est créé.
<?php
// Testons si le fichier a bien été envoyé et s'il n'y a pas d'erreur
if (isset($_FILES['monfichier']) AND $_FILES['monfichier']['error']== 0)
{
// Testons si le fichier n'est pas trop gros
if ($_FILES['monfichier']['size'] <= 1000000)
{
// Testons si l'extension est autorisée
$infosfichier =pathinfo($_FILES['monfichier']['name']);
$extension_upload = $infosfichier['extension'];
$extensions_autorisees = array('jpg', 'jpeg', 'gif', 'png');
if (in_array($extension_upload,$extensions_autorisees))
{
// On peut valider le fichier et le stocker définitivement
move_uploaded_file($_FILES['monfichier']['tmp_name'], 'uploads/'
.basename($_FILES['monfichier']['name']));
echo "L'envoi a bien été effectué !";
}
}
}
?>
PAGE PROTEGEE PAR MOT DE PASSE
 EN USANT DE DEUX PAGES PHP:

La page de traitement des informations du formulaire est secret.php
<!DOCTYPE html>
<html>
<head>
<title>Page protégée par mot de passe</title>
</head>
<body>
<p>Veuillez entrer le mot de passe pour obtenir les codes d'accès au serveur central
de la NASA :</p>
<form action="secret.php" method="post">
<p>
<input type="password" name="mot_de_passe" />
<input type="submit" value="Valider" />
</p>
</form>
<p>Cette page est réservée au personnel de la NASA. Si vous ne travaillez pas à la
42 NASA unitile d'insister vous ne trouverez jamais le mot de passe ! ;-)
</p>
</body>
</html>
Maintenant, intéressons-nous à la page secret.php qui est appelée par le formulaire
<!DOCTYPE html>
<html>
<head>
<title>Codes d'accès au serveur central de la NASA</title>
</head>
<body>
<?php
// On teste si le mot de passe est bon
if (isset($_POST['mot_de_passe']) AND $_POST['mot_de_passe'] =="kangourou")

{
// On affiche les codes
?>
<h1>Voici les codes d'accès :</h1>
<p><strong>CRD5-GTFT-CK65-JOPM-V29N-24G1-HH28-LLFV</strong></p>
<p>
Cette page est réservée au personnel de la NASA. N'oubliez pas de la visiter
régulièrement car les codes d'accès sont changés toutes les semaines.<br />
La NASA vous remercie de votre visite.
</p>
<?php
}
else // Sinon, on affiche un message d'erreur
{
echo '<p>Mot de passe incorrect</p>';
}
?>
</body>
</html>
 EN USANT D’UNE SEULE PAGE PHP

Dans ce cas la page s’appelle elle même
<?php
// Le mot de passe n'a pas été envoyé ou n'est pas bon
if (!isset($_POST['mot_de_passe']) OR $_POST['mot_de_passe'] != "kangourou"){
// Afficher le formulaire de saisie du mot de passe
}
// Le mot de passe a été envoyé et il est bon
else{
// Afficher les codes secrets
}
?>
VARIABLES SUPER GLOBALES, SESSIONS ET COOKIES
Les variables super globale ($_GET[‘name’] et POST[‘name’]) sont des arrays généré par php.
Pour afficher le contenu d'une super globale et voir ce qu'elle contient, le plus simple est d'utiliser
la fonction print_r, puisqu'il s'agit d'un array.
43
Exemple :
<pre>
<?php print_r($_GET);?>
</pre>
Quelques superglobales
- $_SERVER: ce sont des valeurs renvoyées par le serveur. Elles sont nombreuses et quelques-
unes d'entre elles peuvent nous être d'une grande utilité. Je vous propose de retenir au moins
$_SERVER['REMOTE_ADDR']. Elle nous donne l'adresse IP du client qui a demandé à voir la page,
ce qui peut être utile pour l'identifier.
- $_SESSION: on y retrouve les variables de session. Ce sont des variables qui restent stockées sur
le serveur le temps de la présence d'un visiteur. Nous allons apprendre à nous en servir dans ce
chapitre.
- $_COOKIE: contient les valeurs des cookies enregistrés sur l'ordinateur du visiteur. Cela nous
permet de stocker des informations sur l'ordinateur du visiteur pendant plusieurs mois, pour se
souvenir de son nom par exemple.
- $_GET: Variable qui contient les données envoyées en paramètres dans l'URL.
- $_POST: Variable qui contient les informations qui viennent d'être envoyées par un formulaire.
- $_FILES: elle contient la liste des fichiers qui ont été envoyés via le formulaire.
LES SESSIONS :
Les sessions permettent de transmettre des données à toutes les pages de son site.
Car elles ne seront pas détruite après la génération de la page comme quand les données
sont transmis avec $_GET et $_POST qui sont fait pour transmettre les données une seule
fois.
Fonctionnement des sessions

- session_start(): Démarre le système de sessions. Si le visiteur vient d'arriver sur le site, alors un
numéro de session est généré pour lui. Vous devez appeler cette fonction au tout début de
chacune des pages où vous avez besoin des variables de session.
- session_destroy(): ferme la session du visiteur. Cette fonction est automatiquement appelée

lorsque le visiteur necharge plus de page de votre site pendant plusieurs minutes (c'est le
timeout), mais vous pouvez aussi créer une page « Déconnexion » si le visiteur souhaite se
déconnecter manuellement.
NB : session_start() doit être appelé sur chaque page où on veut utiliser des sessions et avant de
mettre le moindre code HTML.
44
Exemples d'utilisation des sessions
Exemple1 :
<?php
// On démarre la session AVANT d'écrire du code HTML
session_start();
// On s'amuse à créer quelques variables de session dans $_SESSION
$_SESSION['prenom'] = 'Jean';
$_SESSION['nom'] = 'Dupont';
$_SESSION['age'] = 24;
?>
<!DOCTYPE html>
<html>
<head>
<title>Titre de ma page</title>
</head>
<body>
<p>
Salut <?php echo $_SESSION['prenom']; ?>!<br />
Tu es à l'accueil de mon site (index.php). Tu veux aller sur
une autre page ?
</p>
<p>
<a href="mapage.php">Lien vers mapage.php</a><br />
<a href="monscript.php">Lien vers monscript.php</a><br />
<a href="informations.php">Lien vers informations.php</a>
</p>
</body>
</html>
Exemple2 :
<?php
session_start(); // On démarre la session AVANT toute chose
?>
<!DOCTYPE html>
<html>
<head>

<title>Titre de ma page</title>
</head>
<body>
<p>Re-bonjour !</p>
<p>
Je me souviens de toi ! Tu t'appelles <?php echo
$_SESSION['prenom'] . ' ' . $_SESSION['nom']; ?> !<br />
Et ton âge hummm... Tu as <?php echo $_SESSION['age']; ?> ans, c'est ça ? :-D
</p>
</body>
</html>
45
- Si on veut détruire manuellement la session du visiteur, on peut faire un lien « Déconnexion »
amenant vers une page qui fait appel à la fonction session_destroy().
LES COOKIES :
Un cookie, c'est un petit fichier que l'on enregistre sur l'ordinateur du visiteur. Ce fichier
contient du texte et permet de « retenir » des informations sur le visiteur. Par exemple, vous
inscrivez dans un cookie le pseudo du visiteur, comme ça la prochaine fois qu'il viendra sur le site,
on pourra lire son pseudo en allant regarder ce que son cookie contient.
Créer un cookie
<?php setcookie('pseudo', 'M@teo21', time() + 365*24*3600, null, null, false, true); ?>
Le dernier paramètre true permet d'activer le mode httpOnly sur le cookie, et donc de le rendre en
quelque sorte plus sécurisé contre les scriptes.
Exemple d’utlisation des cookies
<?php
setcookie('pseudo', 'M@teo21', time() + 365*24*3600, null, null,false, true); // On écrit un cookie
setcookie('pays', 'France', time() + 365*24*3600, null, null, false,true); // On écrit un autre cookie...
// Et SEULEMENT MAINTENANT, on peut commencer à écrire du code html
?>
<!DOCTYPE html>
<html>
<head>
<title>Ma super page PHP</title>
</head>
<body>
</body>
</html>
Afficher un cookie
<p>
Hé ! Je me souviens de toi !<br />
Tu t'appelles <?php echo $_COOKIE['pseudo']; ?> et tu viens de <?php echo $_COOKIE['pays']; ?>
</p>
Modifier un cookie existant

Pour modifier un cookie déjà existant il faut refaire appel à setcookie en gardant le même
nom de cookie, ce qui « écrasera » l'ancien.
Exemple :
setcookie('pays', 'Chine', time() + 365*24*3600, null, null, false, true);
LIRE ET ECRIRE DANS DES FICHIERS

Il faut donner le droit à PHP de créer et modifier les fichiers, sinon celui-ci ne pourra rien
faire. On parle de modifier le CHMOD. Il va falloir passer par notre logiciel FTP. Pour FileZilla aller
sur le fichier et faire un clic droit et aller dans permission de fichier ou CHMOD mettre la valeur
numérique 777.
 Ouvrir et fermer un fichier

// 1 : On ouvre le fichier
$monfichier = fopen('compteur.txt', 'r+');
// 2 : On fera ici nos opérations sur le fichier...
// 3 : Quand on a fini de l'utiliser, on ferme le fichier
fclose($monfichier);
46
MODE D’OUVERTURE
r : Ouvre le fichier en lecture seule. Cela signifie que vous pourrez seulement lire le fichier.
r+ : Ouvre le fichier en lecture et écriture. Vous pourrez non seulement lire le fichier, mais aussi y écrire (on
l'utilisera assez souvent en pratique).
a : Ouvre le fichier en écriture seule. Mais il y a un avantage : si le fichier n'existe pas, il est automatiquement
créé.
a+ : Ouvre le fichier en lecture et écriture. Si le fichier n'existe pas, il est créé automatiquement. Attention : le
répertoire doit avoir un CHMOD à 777 dans ce cas ! À noter que si le fichier existe déjà, le texte sera rajouté à
la fin.
 Lire et écrire dans un fichier :
- Lire : Pour lire, on a deux possibilités : lire caractère par caractère avec la fonction fgetc ou lire
ligne par ligne avec fgets. On se débrouillera a mettre une information par ligne dans nos fichier.
Exemple :
<?php
// 1 : on ouvre le fichier
$monfichier = fopen('compteur.txt', 'r+');
// 2 : on lit la première ligne du fichier
$ligne = fgets($monfichier);
// 3 : quand on a fini de l'utiliser, on ferme le fichier
fclose($monfichier);
?>
 Écrire :
<?php fputs($monfichier, 'Texte à écrire'); ?>
- La fonction fseek permet de repositionner le curseur
Exemple :
fseek($monfichier, 0); // reposition le curseur au début.
 La redirection :
<?php
header ("Content-type: page.php");
?>
LES EXPRESSION Régulière (regex)

Les regex sont écrites soit en langage POSIX ou PCRE.
Les expressions régulières constituent un système très puissant et très rapide pour faire des
recherches dans des chaînes de caractères (des phrases, par exemple) C'est une sorte de

fonctionnalité Rechercher / Remplacer très poussée. Mais aussi pour s’assure que les champs par
exemple contiennent les valeurs attendues.
Il existe deux types d'expressions régulières, qui sont :
- POSIX : c'est un langage d'expressions régulières mis en avant par PHP, un peu plus simple que
PCRE. Toutefois, son principal et gros défaut, c'est que ce « langage » est plus lent que PCRE ;
- PCRE : ces expressions régulières sont issues d'un autre langage (le Perl). Considérées comme
un peu plus complexes, elles sont surtout bien plus rapides et performantes.
 Les fonctions qui nous intéressent :

Nous avons donc choisi PCRE. Il existe plusieurs fonctions utilisant le « langage PCRE » et qui
commencent toutes par preg_ :
47 preg_grep ;
preg_split ;
preg_quote ;
preg_match ;
preg_match_all ;
preg_replace ;
preg_replace_callback
Certaines de ces fonctions permettent de faire juste une recherche et d’autres recherche /
remplace
- preg_match: cette fonction renvoie un booléen : VRAI ou FAUX. Elle renvoie true (vrai) si elle a
trouvé le mot que vous cherchiez dans la chaîne, false (faux) si elle ne l'a pas trouvé. Elle permet
de vérifier qu’un texte possède bien certaines particularités grâce au REGEX.
Exemple :
<?php
if (preg_match("** Votre REGEX **", "Ce dans quoi vous faites la recherche")){
echo 'Le mot que vous cherchez se trouve dans la chaîne';
}
else{
echo 'Le mot que vous cherchez ne se trouve pas dans la chaîne';
}
?>
 Des recherches simples

- Première chose importante à savoir : une regex (Expression régulière) en langage PCRE est
toujours entourée de caractères spéciaux appelés délimiteurs. e.g# Ma regex #
- Les regex peuvent être accompagnées d’options e.g #Ma_regex#Options. A la place de « Ma

regex » on peut mettre le mot qu’on cherche.
<?php
if (preg_match("#guitare#", "J'aime jouer de la guitare.")){
echo 'VRAI';
}
else{
echo 'FAUX';
}
?>

NB : Les regex font la différence entre majuscules et minuscules ; on dit qu'elles sont« sensibles à la
casse ». Pour qu’elles ne soient plus sensibles à la casse on rajoute l’option i c-a-d sans l’option i:
#Guitare# ≠ #guitare# avec l’option i #Guitare# = #guitare#
 Le symbole OU (|):Grâce à elle, on peut laisser plusieurs possibilités à nos regex e.g :
#guitare|piano#
Cela veut dire que vous cherchez soit le mot « guitare », soit le mot « piano ». Si un des deux
mots est trouvé, la regex répond VRAI. On peut en mettre autant qu’on le souhaite.
 Début et fin de chaîne
- ^(accent circonflexe) : indique le début d'une chaîne ;
- $ (dollar) : indique la fin d'une chaîne.
48 Ainsi, si on veut qu'une chaîne commence par « Bonjour », il faudra utiliser la regex :
#^Bonjour#. Si on place le symbole « ^ » devant le mot, alors ce mot devra obligatoirement se
trouver au début de la chaîne dans laquelle on effectue la recherche, sinon on vous répondra
FAUX.
De même, si on veut vérifier que la chaîne se termine par « zéro », on écrira cette regex :
#zéro$#. Si le mot « zero » n’est pas enfin de chaine la fonction renverra FAUX
LES CLASSES DE CARACTERES :

- Les clases simples : regardons cette regex :#gr[io]s#
Entre crochets, c'est ce qu'on appelle une classe de caractères. Cela signifie qu'une des lettres à
l'intérieur peut convenir. Dans le cas présent, notre regex reconnaît deux mots : « gris » et « gros
». C'est un peu comme le OU qu'on a vu plus haut sauf que ça s'applique ici à une lettre et non
pas à un mot.
Exemple :
#gr[ioa]s# : Cela signifie « i » OU « o » OU « a ». Donc notre regex reconnaît les mots « gris »,
« gros » et « gras »
- Les intervalles de classe :
Les intervalles de classes permettent de raccourcir les classes sous forme de plage.
Exemple :
[abcdefghijklmnopqrstuvwxyz] (Classe)≡[a-z] (Intervalle de classe) aussi il en est de même avec
les chiffre exemple : [0123456789] ≡ [0-9]
Il est possible d’écrire deux plages ou plus à la fois exemple : [a-zA-Z0-9]
#<h[1-6]># : On y vérifie justement si la chaîne comporte une balise HTML de titre (<h1>ou
<h2>, etc., jusqu'à <h6>).
- Pour dire que je n'en veux pas :
Si vous ne voulez PAS des caractères que vous énumérez dans votre classe, vous devrez placer
le symbole «^» au début de la classe.
Si on le place à l'intérieur d'une classe, il sert à dire que vous ne VOULEZ PAS de ce qui se trouve
à l'intérieur de cette classe.
Ainsi, la regex suivante :
#[^0-9]#… signifie que vous voulez que votre chaîne comporte au moins un caractère qui ne soit
pas un chiffre.
 Les quantificateurs
Les quantificateurs sont des symboles qui permettent de dire combien de fois peuvent se
répéter un caractère ou une suite de caractères.

- Les symboles les plus courants
 ? (point d'interrogation) : ce symbole indique que la lettre est facultative. Elle peut y être
0 ou 1 fois . Ainsi, #a?# reconnaît 0 ou 1 « a » ;
 + (signe plus) : la lettre est obligatoire. Elle peut apparaître 1 ou plusieurs fois.
Ainsi, #a+# reconnaît « a », « aa », « aaa », « aaaa », etc. ;
 *(étoile) : la lettre est facultative. Elle peut apparaître 0, 1 ou plusieurs fois.
Ainsi, #a*# reconnaît « a », « aa », « aaa », « aaaa », etc. Mais s'il n'y a pas de « a », ça
fonctionne aussi !
Exemple
#bor?is# : Ce code reconnaîtra « boris » et « bois » !
49 Si l’on veut autoriser la répétition de deux ou plusieurs lettres on les met entre parenthèse.
#Ay(ay)*# : Les lettres entre parenthèses seront répétés plusieurs fois et peuvent aussi
manquer .
Vous pouvez utiliser le symbole « | » dans les parenthèses. La regex #Ay(ay|oy)*# renverra
par exemple vrai pour « Ayayayoyayayayoyoyoyoyayoy » ! C'est le « ay » OU le « oy » répété
plusieurs fois, tout simplement !
- Être plus précis grâce aux accolades :
Cela permet d’indiquer le nombre de fois que la lettre(s) doit se répéter
Il y a trois façons d'utiliser les accolades.
 {3}: si on met juste un nombre, cela veut dire que la lettre (ou le groupe de lettres s'il est
entre parenthèses) doit être répétée 3 fois exactement.
#a{3}#fonctionne donc pour la chaîne « aaa ».
 {3,5}: ici, on a plusieurs possibilités. On peut avoir la lettre de 3 à 5 fois.
#a{3,5}#fonctionne pour « aaa », « aaaa », « aaaaa ».
 {3,}: si vous mettez une virgule, mais pas de 2e nombre, ça veut dire qu'il peut y en avoir
jusqu'à l'infini. Ici, cela signifie « 3 fois ou plus ».
#a{3,}fonctionne pour « aaa », « aaaa », « aaaaa », « aaaaaa »,
On remarque que :
?revient à écrire {0,1} ;
+revient à écrire {1,} ;
*revient à écrire {0,}.
 Méta caractères :
Dans le langage PCRE (des regex), les métas caractères qu'il faut connaître sont les suivants :
#!^$()[]{}?+*.\|
On peut échapper les caractères n’ayant rien avoir avec les métas caractères grâce à l’antislash (\)
Alors, comment faire pour faire comprendre qu'on recherche « Quoi ? » alors que le point
d'interrogation a déjà une signification ? On l’échapper c-a-d « Quoi \? »
Ici, l'antislash sert à dire que le point d'interrogation juste après n'est pas un symbole spécial, mais
bel et bien une lettre comme une autre !
Exemples :
Je suis impatient ! #impatient \!# VRAI
Je suis (très) fatigué #$très$ fatigué# VRAI
J'ai sommeil… #sommeil\.\.\.# VRAI
Le smiley :-\ #:-\\#
Pas besoin d’échapper les symbole dans une classe e.g #[a-z?+*{}]# Elle signifie qu'on a le droit de
mettre une lettre, un point d'interrogation, un signe +, etc
3 cas particuliers, cependant.

- « # » (dièse) : il sert toujours à indiquer la fin de la regex. Pour l'utiliser, vous DEVEZ mettre un
antislash devant, même dans une classe de caractères.
- « ]» (crochet fermant) : normalement, le crochet fermant indique la fin de la classe. Si vous

voulez vous en servir comme d'un caractère que vous recherchez, il faut là aussi mettre un
antislash devant.
- « -» (tiret) : encore un cas un peu particulier. Le tiret – vous le savez – sert à définir un intervalle
de classe (comme [a-z]). Et si vous voulez ajouter le tiret dans la liste des caractères possibles ?
50 Eh bien il suffit de le mettre soit au début de la classe, soit à la fin. Par exemple :
[a-z0-9-] permet de chercher une lettre, un chiffre ou un tiret.
 Les classes abrégées :

\d :Indique un chiffre. Ça revient exactement à taper [0-9]
\D :Indique ce qui n'est PAS un chiffre. Ça revient à taper [^0-9]
\w :Indique un caractère alphanumérique ou un tiret de soulignement. Cela correspond à [a-zA-
Z0-9_]
\W :Indique ce qui n'est PAS un mot. Si vous avez suivi, ça revient à taper [^a-zA-Z0-9_]
\t : Indique une tabulation
\n :Indique une nouvelle ligne
\r :Indique un retour chariot
\s :Indique un espace blanc
\S :Indique ce qui n'est PAS un espace blanc (\t \n \r)
. : Indique n'importe quel caractère. Il autorise donc tout !
CONSTRUIRE UNE REGEX COMPLETE
 Un numéro de téléphone (français) exemple : 0153789462

Problèmes
- Le premier chiffre est TOUJOURS un 0 ;
- Le second chiffre va de 1 à 6 mais il y a aussi le 8 (ce sont des numéros spéciaux).
- Ensuite viennent les 8 chiffres restants (ils peuvent aller de 0 à 9 sans problème).
RESOLUTION
1. Primo, on veut qu'il y ait UNIQUEMENT le numéro de téléphone. On va donc commencer par
mettre les symboles ^ et $ pour indiquer un début et une fin de chaîne : #^$#
2. Continuons. On sait que le premier caractère est forcément un 0. On tape donc : #^0$#
3. Le 0 est suivi d'un nombre allant de 1 à 6, sans oublier le 8 pour les numéros spéciaux. Il faut
donc utiliser la classe [1-68], qui signifie « Un nombre de 1 à 6 OU le 8 » : #^0[1-68]$#
4. Ensuite, viennent les 8 chiffres restants, pouvant aller de 0 à 9. Il nous suffit donc d'écrire
[0-9]{8} pour indiquer que l'on veut 8 chiffres. Au final, ça nous donne cette regex :
#^0[1-68][0-9]{8}$#
RESOLUTION PERMETTANT LES TIRET PAR EXEMPLE

On reprend donc la création de notre regex.
1. Primo, le 0 puis le chiffre de 1 à 6 sans oublier le 8. Ça, ça ne change pas : #^0[1-68]$#
2. Après ces deux premiers chiffres, il peut y avoir soit un espace, soit un tiret, soit un point, soit
rien du tout (si les chiffres sont attachés). On va donc utiliser la classe [-. ] (tiret, point, espace).
Mais comme le point (ou le tiret, ou l'espace) n'est pas obligatoire on met le point
d'interrogation, bien sûr ! Ça nous donne : #^0[1-68][-. ]?$#
3. Après le premier tiret (ou point, ou espace, ou rien), on a les deux chiffres suivants. On doit donc
rajouter [0-9]{2} à notre regex. : #^0[1-68][-. ]?[0-9]{2}$#
4. Et maintenant, réfléchissez. Il y a moyen de terminer rapidement : on a juste besoin de dire que «
[-. ]?[0-9]{2} »doit être répété quatre fois, et notre regex est terminée ! On va se servir des
parenthèses pour entourer le tout, et placer un {4} juste après pour indiquer que tout ça doit se
répéter quatre fois. Ce qui nous donne finalement :#^0[1-68]([-. ]?[0-9]{2}){4}$#
APPLICATION :
<p>
51 <?php
if (isset($_POST['telephone']))
{
$_POST['telephone'] = htmlspecialchars($_POST['telephone']); // On rend inoffensives les balises
HTML que le visiteur a pu entrer
if (preg_match("#^0[1-68]([-. ]?[0-9]{2}){4}$#",$_POST['telephone'])){
echo 'Le ' . $_POST['telephone'] . ' est un numéro<strong>valide</strong> !';
}
else{
echo 'Le ' . $_POST['telephone'] . ' n\'est pas valide, recommencez !';
}
}
?>
</p>
<form method="post">
<p>
<label for="telephone">Votre téléphone ?</label><inputid="telephone" name="telephone" /><br />
<input type="submit" value="Vérifier le numéro" />
</p>
</form>
 Une adresse e-mail

Problèmes
Construire une adresse e-mail.
1. On a tout d'abord le pseudonyme (au minimum une lettre, mais c'est plutôt rare). Il peut y avoir
des lettres minuscules (pas de majuscules), des chiffres, des points, des tirets et des Underscores
« _ ».
2. Il y a ensuite une arobase : @.
3. Ensuite il y a le nom de domaine. Pour ce nom, même règle que pour le pseudonyme : que des
minuscules, des chiffres, des tirets, des points et des underscores. La seule différence – vous ne
pouviez pas forcément deviner – c'est qu'il y a au moins deux caractères (par exemple, « a.com »
n'existe pas, mais « aa.com » oui).
4. Enfin, il y a l'extension (comme « .fr »). Cette extension comporte un point, suivi de deux à quatre
lettres (minuscules). En effet, il y a « .es », « .de », mais aussi « .com », « .net », « .org », « .info », etc.
L'adresse e-mail peut donc ressembler à j.dupont_2@orange.fr.
RESOLUTION
1. Primo, comme tout à l'heure, on ne veut QUE l'adresse e-mail ; on va donc demander à ce que
ça soit un début et une fin de chaîne :#^$#

2. Ensuite, on a des lettres, chiffres, tirets, points, underscores, au moins une fois. On utilise donc
la classe [a-z0-9._-] à la suite de laquelle on rajoute le signe + pour demander à ce qu'il y en ait
au moins un :#^[a-z0-9._-]+$#
3. Vient ensuite l'arobase (là ce n'est pas compliqué, on a juste à taper le caractère) :
#^[a-z0-9._-]+@$#
4. Puis encore une suite de lettres, chiffres, points, tirets, au moins deux fois. On tape donc {2,}
pour dire « deux fois ou plus » :#^[a-z0-9._-]+@[a-z0-9._-]{2,}$#
5. Ensuite vient le point (de « .fr » par exemple). Comme je vous l'ai dit plus haut, c'est un
caractère spécial qui sert à indiquer « n'importe quel caractère » (même des accents). Or, ici, on
veut enlever sa signification au point pour dire que l'on veut le symbole point dans notre regex.
52 On va donc mettre un antislash devant :#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.$#
6. Enfin, pour terminer, il nous faut deux à quatre lettres. Ce sont forcément des lettres minuscules,
et cette fois pas de chiffre ou de tiret, etc. On écrit donc :
#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#
Et voilà encore une nouvelle regex de bouclée !
#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#
APPLICATION :
<p>
<?php
if (isset($_POST['mail']))
{
$_POST['mail'] = htmlspecialchars($_POST['mail']); // On rend inoffensives les balises HTML
que le visiteur a pu rentrer
if (preg_match("#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#",$_POST['mail'])){
echo 'L\'adresse ' . $_POST['mail'] . ' est <strong> valide</strong> !';
}
else{
echo 'L\'adresse ' . $_POST['mail'] . ' n\'est pas valide, recommencez !';
}
}
?>
</p>
<p>
<label for="mail">Votre mail? </label><input id="mail" name="mail" /><br />
<input type="submit" value="Vérifier le mail" />
</p>
</form>
 Des regex… avec MySQL !

Mysql ne comprend que les regex en langage POSIX, et pas PCRE comme on a appris
Vous avez juste besoin de retenir ce qui suit pour faire une regex POSIX :
- il n'y a pas de délimiteur ni d'options. Votre regex n'est donc pas entourée de dièses ;
- il n'y a pas de classes abrégées utilisé.
Supposons qu’on a stocké l’IP des visiteurs dans une table et qu’on veut les noms des visiteurs
dont l'IP commence par « 84.254 » :
SELECT nom FROM visiteurs WHERE ip REGEXP '^84\.254(\.[0-9]{1,3}){2}$'
Cela signifie : Sélectionne tous les noms de la table visiteurs dont l'IP commence par « 84.254 » et
se termine par deux autres nombres de un à trois chiffre(s) (ex. : 84.254.6.177).
LES PARENTHESES CAPTURANTES :
Ici il est question de voir l’autre utilité des parenthèses.
- Capture et remplacement :
Les regex peuvent servir dans un forum pour rendre les liens et les adresse cliquable
automatiquement. Nous allons travailler avec la fonction preg_replace qui nous permet de
réaliser une « capture » de chaine.
Ce qu'il faut savoir, c'est qu'à chaque fois que vous utilisez des parenthèses, cela crée une «
variable » contenant ce qu'elles entourent.
En effet, retenez bien ceci : à chaque fois qu'il y a une parenthèse, cela crée une variable appelée
$1 (pour la première parenthèse), $2 pour la seconde, etc. On va ensuite se servir de ces
variables pour modifier la chaîne (faire un remplacement).
Exemple :
53 <?php
$texte = preg_replace('#\[b\](.+)\[/b\]#isU', '<strong>$1</strong>', $texte);
$texte = preg_replace('#\[i\](.+)\[/i\]#isU', '<em>$1</em>',$texte);
?>
Elle signifie « Chercher dans la chaîne un [b], suivi d'un ou plusieurs caractère(s) (le point permet de
dire « n'importe lesquels »), suivi(s) d'un [/b] ».
Voici comment s'utilise la fonction preg_replace.
1. On lui donne en premier paramètre la regex. Rien de particulier, comme vous pouvez le
constater, à part qu'il faut bien garder en tête que chaque parenthèse va créer une variable ($1, $2,
etc.). Ici, j'ai rajouté l'option « i » pour que le code fonctionne aussi avec des majuscules ([B][/B]).
2. Ensuite, et c'est là qu'est la nouveauté, on indique le texte de remplacement : «
<strong>$1</strong>» (je vous rappelle que <strong>permet de mettre en gras en HTML).
Entre les balises HTML, j'ai mis $1. Cela signifie que ce qui se trouve dans la parenthèse capturante
(entre [b] et [/b]) sera en fait entouré des balises <strong>!
3. Enfin, dernier paramètre, c'est le texte dans lequel on fait notre recherche / remplacement. La
fonction preg_replace renvoie le résultat après avoir fait les remplacements.
L’option s : pour que le « point » fonctionne aussi pour les retours à la ligne (pour que le texte
puisse être en gras sur plusieurs lignes) ;
Rendre une adresse cliquable dans son forum :

<?php
$texte = preg_replace('#http://[a-z0-9._/-\ ?=&]+#i', '<ahref="$0">$0</a>', $texte);
?>
On utilise la variable $0 car elle contient tout le texte contenu dans la regex.
AU FINAL NOTRE BB CODE VAUT (utilisable pour un forum text area)

< ?php
if (isset($_POST['texte']))
{

$texte = stripslashes($_POST['texte']); // On enlève les slashs qui se seraient ajoutés automatiquement
$texte = htmlspecialchars($texte); // On rend inoffensives les balises HTML que le visiteur a pu rentrer
$texte = nl2br($texte); // On crée des <br /> pour conserver les retours à la ligne.
// On fait passer notre texte à la moulinette des regex
$texte = preg_replace('#\[b\](.+)\[/b\]#isU', '<strong>$1</strong>', $texte);
$texte = preg_replace('#\[i\](.+)\[/i\]#isU', '<em>$1</em>', $texte);
$texte = preg_replace('#http://[a-z0-9._/-]+#i', '<a href="$0">$0</a>',$texte);
&texte=preg_replace(‘#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#i’, '<a href="$0">$0</a>',$texte);
// Et on affiche le résultat. Admirez !
echo $texte . '<br /><hr />';
}
?>
54 <p>
Bienvenue dans le parser du Site du Zéro !<br />Nous avons écrit ce parser ensemble, j'espère que
vous saurez apprécier devoir que tout ce que vous avez appris va vous être très utile !
</p>
<p>Amusez-vous à utiliser du bb Code. Tapez par exemple :</p>
<p>
Je suis un gros [b]Zéro[/b], et pourtant j'ai [i]tout appris[/i] surhttp://www.siteduzero.com<br />
Je vous recommande d'aller sur ce site, vouspourrez apprendre à faire ça vous aussi !
</p>
<p>
<label for="texte">Votre message ?</label><br />
<textarea id="texte" name="texte" cols="50" rows="8"></textarea><br />
<input type="submit" value="Montre-moi toute la puissance des regex" />
</p>
</form>
- Stripslashes () : fonction permettant d’enlever les slashs qui se seraient ajouté automatiquement.
RESUME SUR LES REGEX
Structure d'une regex
Une regex est entourée de symboles appelés délimiteurs. On peut choisir ce qu'on veut ;
nous, nous utilisons le dièse. Une regex a la forme suivante :
#Regex#Options.
Pour tester une chaîne à partir d'une regex, on utilise preg_match:
Code : PHP
<?php preg_match("regex","chaine"); ?>
Regex Explication
#guitare# : Cherche le mot « guitare » dans la chaîne.
#guitare|piano# : Cherche le mot « guitare » OU « piano ».
#^guitare# : La chaîne doit commencer par « guitare ».
#guitare$# : La chaîne doit se terminer par « guitare ».
#^guitare$# : La chaîne doit contenir uniquement « guitare ».
Classes de caractères
#gr[ioa]s# : Chaîne qui contient « gris », ou « gros », ou « gras ».
[a-z] : Caractères minuscules de a à z.
[0-9] : Chiffres de 0 à 9.
[a-e0-9] : Lettres de « a » à « e » ou chiffres de 0 à 9.
[0-57A-Za-z.- :] Chiffres de 0 à 5, ou 7, ou lettres majuscules, ou lettres minuscules, ou un point, ou
un tiret.
#[^0-9]# : Chaîne ne contenant PAS de chiffres.
#^[^0-9]# : Chaîne ne commençant PAS par un chiffre.
Quantificateurs
#a?# :« a » peut apparaître 0 ou 1 fois.
#a+# :« a » doit apparaître au moins 1 fois.
#a*# :« a » peut apparaître 0, 1 ou plusieurs fois.
#bor?is# :« bois » ou « boris ».
#Ay(ay|oy)*# : Fonctionne pour Ay, Ayay, Ayoy, Ayayayoyayayoyayoyoyoy, etc.
#a{3}# :« a » doit apparaître 3 fois exactement (« aaa »).
#a{3,5}# :« a » doit apparaître de 3 à 5 fois (« aaa », « aaaa », « aaaaa »).
#a{3,}# :« a » doit apparaître au moins 3 fois (« aaa », « aaaa », « aaaaa », « aaaaaa », etc.).
Métacaractères
Les métacaractères sont :# ! ^ $ ( ) [ ] { } | ? + * .
55 Pour utiliser un métacaractère dans une recherche, il faut l'échapper avec un antislash : \.
#Hein?# : Cherche « Hei » ou « Hein ».
#Hein\?# : Cherche « Hein? ».
Les métacaractères n'ont pas besoin d'être échappés dans une classe, sauf pour « #» (symbole de
fin de la regex), « ]»(symbole de la fin de la classe) et « \ » (si votre classe recherche un antislash)
que l'on doit faire précéder d'un antislash.
Si on veut rechercher un tiret dans une classe de caractères, il faut le placer au début ou à la fin de
la classe : [a-zA-Z0-9-].
Les classes abrégées sont supportées uniquement par les regex PCRE.
Capture et remplacement
En utilisant la fonction preg_replace on peut automatiquement faire des remplacements à l'aide de
regex.
Code : PHP
<?php
$texte = preg_replace('#\[b\](.+)\[/b\]#i', '<strong>$1</strong>',$texte);
?>
Les parenthèses servent à entourer un bout de la regex pour créer des variables $1, $2, $3, etc. qui
seront utiles pour faire le remplacement.
Il peut y avoir jusqu'à 99 parenthèses capturantes, donc jusqu'à $99.
(?:texte) est une parenthèse non capturante : elle ne crée pas de variable.
Une variable $0 est toujours créée et correspond à l'ensemble de la regex.
Ainsi, la regex suivante…
#(anti)co(?:nsti)(tu(tion)nelle)ment#
… crée les variables suivantes :
$0 : anticonstitutionnellement ;
$1 : anti ;
$2 : tutionnelle ;
$3 : tion.
Options
Il existe de nombreuses options que l'on peut utiliser avec les regex PCRE.
Parmi les trois que nous sommes le plus souvent amenés à utiliser, il y a :
i : la regex ne fera plus la différence entre majuscules / minuscules ;
s : le point (classe universelle) fonctionnera aussi pour les retours à la ligne (\n) ;
U : mode « Ungreedy » (pas gourmand). Utilisé pour que la regex s'arrête le
LA PROGRAMMATION ORIENTEE OBJET

Un objet est un mélange de plusieurs variables et fonctions.

En clair : programmer de manière orientée objet, c'est créer du code source (peut-être complexe),
mais que l'on masque en le plaçant à l'intérieur d'un cube (un objet) à travers lequel on ne voit rien.
Pour le programmeur qui va l'utiliser, travailler avec un objet est donc beaucoup plus simple
qu'avant il n’a pas besoin de connaitre le mécanisme de fonctionnement pour s’en servir).
Exemple 1:
<?php
$bdd = new PDO('mysql:host=localhost; dbname=test', 'root', '');
?>
$bdd est un objet et PDO est une classe

- La classe est un plan, une description de l'objet. Imaginez qu'il s'agit par exemple des plans de
56 construction d'une maison.
- L'objet est une instance de la classe, c'est-à-dire une application concrète du plan
(matérialisation du plan). Pour reprendre l'exemple précédent, l'objet est la maison. On peut
créer plusieurs maisons basées sur un plan de construction. On peut donc créer plusieurs objets
à partir d'une classe.
Donc :
$bdd est l'objet ;
PDO est le nom de la classe sur laquelle est basé l'objet.
Exemple2 :
<?php
$bdd->query();
?>
Cela signifie : exécuter la fonction query()de mon objet $bdd. Il faut donc comprendre que l'on
exécute la fonction query() de l'objet $bdd qui représente la connexion à la base de données.
 CREER UNE CLASSE :

Dans un fichier Membre.class.php, inscrivons le code suivant :
<?php
class Membre
{
}
?>
Étant donné que notre fichier ne contiendra que du code PHP, il est possible et même recommandé
par des développeurs expérimentés de retirer la balise de fermeture ?> sinon cela provoquera des
erreurs causé par des lignes blanches ce qui a tendance à produire des bogues du type « Headers
already sent by ».
À l'intérieur des accolades, nous allons définir des variables et des fonctions membres de la
classe (les variables et fonctions définissant un membre).
Certains développeurs utilisent d'autres mots pour désigner les variables et fonctions membres
des classes. Les voici :
- variables membres : aussi appelées attributs ou propriétés ;
- fonctions membres : aussi appelées méthodes.
a) Les variables membres

Les variables permettent de définir l'objet : c'est ce qui fait qu'il sera unique.
<?php
class Membre
{
private $pseudo;
private $email;
private $signature;
private $actif;
}
?>
b) Les fonctions membres

Maintenant que nous avons défini les variables, nous pouvons créer quelques fonctions. Leur
57 rôle sera :
- soit de lire ou mettre à jour les variables. On parle de fonctions getters et setters ;
- soit d'exécuter des actions plus complexes sur le membre (comme lui envoyer un e-mail).
Les getters et setters
Ce sont des fonctions qui commencent par get (si l'on veut récupérer le contenu d'une
variable) ou par set (si l'on veut modifier le contenu d'une variable).
Prenons par exemple le pseudonyme : on va créer une fonction getPseudo qui renvoie le pseudo et
setPseudo qui modifie ce dernier.
Exemple :
<?php
class Membre{
private $pseudo;
private $email;
private $signature;
private $actif;
public function getPseudo(){

return $this->pseudo;
}
public function setPseudo($nouveauPseudo){
$this->pseudo = $nouveauPseudo;
}
}
?>
La variable $pseudo est accessible dans les fonctions avec le préfixe $this->. Cela signifie : « Le
pseudo de cet objet ». En effet, souvenez-vous, on peut créer plusieurs objets à partir d'une classe. Il
peut y avoir plusieurs membres et chacun d'eux a un pseudo différent. Le préfixe $this-> permet
d'indiquer que c'est bien le pseudonyme du membre sur lequel on travaille que l'on veut récupérer.
Amélioration de la fonction setPseudo

<?php

// Vérifier si le nouveau pseudo n'est ni vide ni trop long
if (!empty($nouveauPseudo) AND strlen($nouveauPseudo) < 15){
// Ok, on change son pseudo
}
}
?>
Les autres fonctions

public function envoyerEMail($titre, $message){
mail($this->email, $titre, $message);
58 }
public function bannir(){

$this->actif = false;
$this->envoyerEMail('Vous avez été banni', 'Ne revenez plus!');
}
AU FINAL ON A
<?php
class Membre{
private $pseudo;
private $email;
private $signature;
private $actif;
public function envoyerEMail($titre, $message){
mail($this->email, $titre, $message);
}
public function bannir(){
$this->actif = false;
$this->envoyerEMail('Vous avez été banni', 'Ne revenez plus!');
}
public function getPseudo(){
return $this->pseudo;
}
if (!empty($nouveauPseudo) AND strlen($nouveauPseudo) < 15){
}
}
}
?>
- Créer un objet à partir de la classe :
Il est temps de créer un nouveau fichier dans lequel on va utiliser un objet de type membre.
<?php
include_once('Membre.class.php'); // permet de définir la classe Membre situé dans Membre.class.php
$membre = new Membre(); // on crée un nouvel objet de type Membre
$membre->setPseudo('M@teo21');
echo $membre->getPseudo() . ', je vais te bannir !';
$membre->bannir();
?>
Une classe, c'est donc un peu un package prêt à l'emploi
 Constructeur, destructeur et autres fonctions spéciales

On les reconnaît facilement car leur nom commence par deux underscores). Par exemple :
__construct, __destruct, __get, etc.
- Le constructeur : __construct
Le rôle d'une fonction constructeur est justement de construire l'objet (non, sans blague !),
c'est-à-dire de le préparer à une première utilisation. Dans notre cas, on aimerait par exemple
charger en base de données les informations concernant le membre et insérer les bonnes
valeurs dans les variables dès le départ.
Exemple :
<?php
class Membre{
59 public function __construct($idMembre){
// Récupérer en base de données les infos du membre
// SELECT pseudo, email, signature, actif FROM membres WHEREid = ...
// Définir les variables avec les résultats de la base
$this->pseudo = $donnees['pseudo'];
$this->email = $donnees['email'];
// etc.
}
}
?>
- Le destructeur :__destruct
Pour détruire un objet, ou toute autre variable, on peut le faire à la main avec la fonction unset()
<?php unset($membre); ?>
<?php
public function __destruct(){
echo 'Cet objet va être détruit !';
}
?>
 L'HERITAGE :
L'héritage est probablement le concept le plus important de la programmation
orientée objet. C'est ce qui lui donne toute sa puissance. Cela permet de réutiliser des
classes pour en construire de nouvelles. On se sert de certaines classes « de base » pour
construire des classes plus complètes.
Il y a héritage entre deux classes quand on peut dire : « A est un B » donc A hérite de B
Exemples d’héritage:
- une voiture est un véhicule (Voiture hérite de Véhicule) ;
- un chirurgien est un docteur (Chirurgien hérite de Docteur) ;
En revanche on ne peut pas dire qu’un oiseau est un moineau donc on ne peut pas faire pas
d’héritage.
- Réaliser un héritage en PHP :

Nous allons créer une nouvelle classe Admin qui sera basée sur la classe Membre. Elle aura
toutes les variables et fonctions de la classe Membre, mais elle aura en plus de nouvelles variables
et fonctions (Admin hérite de Membre car un Administrateur est un Membre).
<?php
include_once('Membre.class.php');
class Admin extends Membre{
}
?>
NB: Pour que PHP connaisse la classe Membre afin de permettre l'héritage, il est impératif d'inclure
le fichier Membre.class.php au préalable.
Un peu de vocabulaire : on dit que Membre est la classe mère, tandis que Admin est la classe fille.
60 C'est la fille qui hérite de la mère.
LES DROITS D'ACCES ET L'ENCAPSULATION

- LES DROITS D'ACCES :
Public et private utilisés dans les classes sont ce qu'on appelle des droits d'accès : cela
permet d'indiquer si l'utilisateur de la classe a le droit d'accéder directement à un élément de la
classe ou non.
Il y a trois droits d'accès à connaître :
- public: tout le monde peut accéder à l'élément ;
- private: personne (à part la classe elle-même) n'a le droit d'accéder à l'élément ;
- protected: identique à private, sauf qu'un élément ayant ce droit d'accès dans une classe mère
sera accessible aussi dans les classes filles.
La personne qui utilise la classe à travers des objets peut uniquement accéder à ce qui est public et
non à ce qui est privé. Donc public, private ou protected définit si l'utilisateur a le droit ou non
d'appeler la fonction ou la variable.
Exemple :
<?php
$membre = new Membre();
$membre->setPseudo('M@teo21'); // OK car setPseudo est public
$membre->pseudo = 'M@teo21'; // Interdit car $pseudo est private
?>
Protected est identique à private mais il y a une différence lorsqu'on hérite de la classe. Par
exemple, si on définit la variable $email comme protected dans la classe Membre, cela signifie que
les classes qui en héritent (comme Admin) auront le droit d'y accéder. Sinon, en private, elles
n'auraient pas pu les appeler directement.
- L'ENCAPSULATION :
Enoncé : Toutes les variables d'une classe doivent toujours être privées ou protégées.
Il est en général recommandé d'utiliser plutôt protected que private, surtout si vous pensez
hériter de la classe. En effet, leur fonctionnement est le même mais protected est plus souple si
vous avez un jour des classes filles. Le but de l'encapsulation est de masquer à la personne qui
utilise la classe son fonctionnement interne.
ORGANISER SON CODE SELON L'ARCHITECTURE MVC

- Modèle : cette partie gère les données de votre site. Son rôle est d'aller récupérer les
informations « brutes » dans la base de données, de les organiser et de les assembler pour
qu'elles puissent ensuite être traitées par le contrôleur. On y trouve donc les requêtes SQL.
Parfois, les données ne sont pas stockées dans une base de données. C'est plus rare, mais on
peut être amené à aller chercher des données dans des fichiers. Dans ce cas, le rôle du modèle
est de faire les opérations d'ouverture, de lecture et d'écriture de fichiers (fonctions fopen, fgets,
etc.).
- Vue : cette partie se concentre sur l'affichage. Elle ne fait presque aucun calcul et se contente de
récupérer des variables pour savoir ce qu'elle doit afficher. On y trouve essentiellement du code
HTML mais aussi quelques boucles et conditions PHP très simples, pour afficher par exemple la
61 liste des messages des forums.
- Contrôleur : cette partie gère la logique du code qui prend des décisions. C'est en quelque sorte
l'intermédiaire entre le modèle et la vue : le contrôleur va demander au modèle les données, les
analyser, prendre des décisions et renvoyer le texte à afficher à la vue. Le contrôleur contient
exclusivement du PHP. C'est notamment lui qui détermine si le visiteur a le droit de voir la page
ou non (gestion des droits d'accès).
Modèle
Contrôleur
Utilisateur Vue
Il faut tout d'abord retenir que le contrôleur est le chef d'orchestre : c'est lui qui reçoit la requête du
visiteur et qui contacte d'autres fichiers (le modèle et la vue) pour échanger des informations avec
eux.
AMELIORATION DU TP BLOG EN RESPECTANT L'ARCHITECTURE MVC

À la racine de votre site, je vous propose de créer trois répertoires :
- modele;
- vue;
- controleur.
Dans chacun d'eux, vous pouvez créer un sous-répertoire pour chaque « module » de votre site :
forums, blog, minichat, etc. Pour le moment, créez un répertoire blog dans chacun de ces dossiers.
On aura ainsi l'architecture suivante :
- modele/blog : contient les fichiers gérant l'accès à la base de données du blog ;
- vue/blog : contient les fichiers gérant l'affichage du blog ;
- controleur/blog : contient les fichiers contrôlant le fonctionnement global du blog.
a) LE MODELE :
Créez un fichier get_billets.phpdans modele/blog. Ce fichier contiendra une fonction dont le rôle
sera de retourner un certain nombre de billets depuis la base de données. C'est tout ce qu'elle
fera.
Code : PHP

<?php
function get_billets($offset, $limit){
global $bdd; // permet de faire appel à la connexion d’ouverture de la BDD
$offset = (int) $offset;
$limit = (int) $limit;
$req = $bdd->prepare('SELECT id, titre, contenu,DATE_FORMAT(date_creation,
\'%d/%m/%Y à %Hh%imin%ss\') AS date_creation_fr FROM billets ORDER BY
date_creation DESC LIMIT :offset, :limit');
$req->bindParam(':offset', $offset, PDO::PARAM_INT);
$req->bindParam(':limit', $limit, PDO::PARAM_INT);
$req->execute();
62 $billets = $req->fetchAll();
return $billets;
}
Il s'agit d'une fonction qui prend en paramètre un offset et une limite. Elle retourne le nombre de
billets demandés à partir du billet no offset. Ces paramètres sont transmis à MySQL via une requête
préparée.
Je n'ai pas utilisé la méthode traditionnelle à laquelle vous avez été habitués pour transmettre les
paramètres à la requête SQL. En effet, j'ai utilisé ici la fonction bindParam qui me permet de préciser que le
paramètre est un entier (PDO$\colon\colon$PARAM_INT). Cette méthode alternative est obligatoire dans le
cas où les paramètres sont situés dans la clause LIMIT car il faut préciser qu'il s'agit d'entiers.
b) LE CONTROLEUR :
Dans controleur/blog, créez un fichier index.php qui représentera la page d'accueil du blog
<?php
// On demande les 5 derniers billets (modèle)
include_once('modele/blog/get_billets.php');
$billets = get_billets(0, 5);
// On effectue du traitement sur les données (contrôleur)
// Ici, on doit surtout sécuriser l'affichage
foreach($billets as $cle => $billet){
$billets[$cle]['titre'] = htmlspecialchars($billet['titre']);
$billets[$cle]['contenu'] =nl2br(htmlspecialchars($billet['contenu']));
}
// On affiche la page (vue)
include_once('vue/blog/index.php');
c) LA VUE
Vous pouvez créer un fichier index.php dans vue/blog et y insérer le code suivant :
Code : PHP
<!DOCTYPE html>
<html>
<head>
<title>Mon blog</title>
<link href="vue/blog/style.css" rel="stylesheet" />
</head>
<body>
<h1>Mon super blog !</h1>
<p>Derniers billets du blog :</p>
<?php

foreach($billets as $billet)
{
?>
<div class="news">
<h3>
<?php echo $billet['titre']; ?>
<em>le <?php echo $billet['date_creation_fr']; ?></em>
</h3>
<p>
<?php echo $billet['contenu']; ?><br />
<em><a href="commentaires.php?billet=<?php
63 echo$billet['id']; ?>">Commentaires</a></em>
</p>
</div>
<?php
}
?>
</body>
</html>
 Le contrôleur global du blog

Vous pouvez donc créer ce fichier blog.php à la racine de votre site :
Code : PHP
<?php
include_once('modele/connexion_sql.php');
if (!isset($_GET['section']) OR $_GET['section'] == 'index')
{
include_once('controleur/blog/index.php');
}
CREER UN ESPACE MEMBRES

CONCEPTION DE L'ESPACE MEMBRES :
 Les fonctionnalités d'un espace membres
1- une page d'inscription ;
2- une page de connexion ;
3- une page de déconnexion
Une fois cette base prête, il sera ensuite possible de créer tout l'espace participatif de votre
site qui reposera sur les membres: les forums, les commentaires des actualités, etc. Nous
utiliserons le numéro du membre (son « id ») pour lier ses messages à son compte, à l'aide des
jointures SQL que vous connaissez bien maintenant.
Pour commencer, nous allons créer la table MySQL qui stockera les membres de notre site. C'est
64
la première étape qui nous permettra ensuite d'aller plus loin et d'étudier la création des
principales pages dont nous avons parlé : inscription, connexion et déconnexion.
- La table des membres
Qu'est-ce qui caractérise un membre ? Essayons de voir ce que nous avons besoin de stocker au
minimum pour créer la table :
1- un pseudonyme ;
2- un mot de passe ;
3- une adresse e-mail ;
4- une date d'inscription.
5- Numéro de téléphone.
Je vous propose donc de créer une table nommée membres avec les champs suivants :
- id (int, primary, auto_increment) ;
- pseudo (varchar 255) ;
- pass (varchar 255) ;
- email (varchar 255) ;
- date_inscription (date).
- numero_telaphone
Si vous souhaitez que vos membres appartiennent à des groupes différents, il pourrait être
intéressant de créer une table groupes listant tous les groupes (membre, administrateur,
modérateur…). Vous ajouteriez à la table des membres un champ nommé id_groupe qui
stockerait le numéro du groupe, ce qui vous permettrait de faire une jointure entre les deux
tables comme nous l'avons fait avec les jeux vidéo et leurs propriétaires plus tôt dans le cours
 La problématique du mot de passe
Il est important de hacher les mots de passes grâce à la fonction sha1. La particularité du
hachage est qu'il fonctionne dans un seul sens : il est impossible de retrouver le mot de passe
d'origine une fois qu'il a été haché. De plus, un hash (nom donné à la version hachée du mot de
passe) est unique : il correspond à un et un seul mot de passe.
REALISATION DES PAGES PRINCIPALES DE L'ESPACE MEMBRES :
 LA PAGE D'INSCRIPTION
La page d'inscription est en général constituée de quatre champs :
- pseudonyme souhaité ;
- mot de passe
- confirmation du mot de passe (pour éviter les erreurs de saisie) ;
- adresse e-mail.
Avant d'enregistrer l'utilisateur dans la base de données, il faudra penser à faire un certain nombre
de vérifications.

- Le pseudonyme demandé par le visiteur est-il libre ? S'il est déjà présent en base de données, il
faudra demander au visiteur d'en choisir un autre.
- Les deux mots de passe saisis sont-ils identiques ? S'il y a une erreur, il faut inviter le visiteur à
rentrer à nouveau le mot de passe.
- L'adresse e-mail a-t-elle une forme valide ? Vous pouvez utiliser une expression régulière pour
le vérifier.
Si toutes ces conditions sont remplies, on peut insérer l'utilisateur dans la base de données
Voici dans les grandes lignes à quoi pourrait ressembler le code qui insère un nouveau membre
dans la base :
Code : PHP
65 <?php
// Vérification de la validité des informations
// Hachage du mot de passe
$pass_hache = sha1($_POST['pass']);
// Insertion
$req = $bdd->prepare('INSERT INTO membres(pseudo, pass, email,
date_inscription) VALUES(:pseudo, :pass, :email, CURDATE())');
$req->execute(array(
'pseudo' => $pseudo,
'pass' => $pass_hache,
'email' => $email));
C'est à vous de le compléter. De plus, je vous invite à respecter l'architecture MVC : vous utiliserez
le contrôleur pour vérifier la validité des informations et pour hacher le mot de passe, tandis que le
modèle se chargera simplement d'exécuter la requête.
$pass_hache = sha1('gz' . $_POST['pass']);.// permet de complexifier le mot de passe en lui donnant
un préfix(gz)
 LA PAGE DE CONNEXION
La page qui reçoit les données du formulaire de connexion doit hacher de nouveau le mot de
passe et le comparer à celui stocké dans la base. S'il existe un membre qui a le même
pseudonyme et le même mot de passe haché, alors on autorise la connexion et on peut créer les
variables de session. Sinon, on renvoie une erreur indiquant que le pseudonyme ou le mot de
passe est invalide.
Code contenu par la page appelé est :
<?php
// Hachage du mot de passe
$pass_hache = sha1($_POST['pass']);
// Vérification des identifiants
$req = $bdd->prepare('SELECT id FROM membres WHERE pseudo = :pseudo AND pass = :pass');
'pseudo' => $pseudo,
'pass' => $pass_hache));
$resultat = $req->fetch();
if (!$resultat){
echo 'Mauvais identifiant ou mot de passe !';
}
else{
session_start();

$_SESSION['id'] = $resultat['id'];
$_SESSION['pseudo'] = $pseudo;
echo 'Vous êtes connecté !';
}
Après avoir de nouveau haché le mot de passe, on essaie de récupérer une entrée dans la
table membres qui corresponde à ce pseudonyme et ce mot de passe haché. Si $resultat vaut faux,
cela signifie qu'aucune entrée ne correspond et donc que l'identifiant ou le mot de passe est
mauvais. Sinon, on peut créer les variables de session et y stocker par exemple l'id et le
pseudonyme du membre. Désormais, sur toutes les pages du site, on pourra indiquer au membre
qu'il est connecté grâce à la présence des variables $_SESSION.
66 Code : PHP
<?php
if (isset($_SESSION['id']) AND isset($_SESSION['pseudo'])){
echo 'Bonjour ' . $_SESSION['pseudo'];
}
Si le membre souhaite être reconnecté automatiquement (ce qu'il est conseillé de faire uniquement
sur un ordinateur personnel, et non sur un ordinateur partagé avec d'autres personnes !), je vous
invite à créer deux cookies qui stockeront respectivement :
- Le pseudonyme ;
- Le mot de passe haché.
Ainsi, si un visiteur non connecté qui possède ces deux cookies se présente, vous n'aurez qu'à
vérifier si un membre correspond à ces informations en base de données et vous pourrez le
connecter automatiquement, sans qu'il ait eu à utiliser le formulaire de connexion. Là encore, on
prend une certaine mesure de sécurité en stockant le mot de passe haché dans un cookie et non le
vrai mot de passe.
 LA PAGE DE DECONNEXION
Au bout d'un certain temps d'inactivité, la session du membre est automatiquement détruite
et il se retrouve déconnecté. S'il charge à nouveau une page du site, il apparaîtra donc
déconnecté, à moins qu'il ait activé la connexion automatique qui aura pour effet de le
reconnecter immédiatement et de manière transparente grâce à ses cookies.
<?php
session_start();
// Suppression des variables de session et de la session
$_SESSION = array();
session_destroy();
// Suppression des cookies de connexion automatique
setcookie('login', '');
setcookie('pass_hache', '');
ALLER PLUS LOIN

Voici quelques pistes pour compléter votre espace membres.
- Proposez au membre d'envoyer un avatar. Vous avez appris à envoyer des fichiers via des
formulaires et à redimensionner des images avec la bibliothèque GD, vous en êtes donc tout à
fait capables ! Bien qu'il existe plusieurs méthodes, la plus simple consiste à créer un dossier
avatars et à y placer les avatars nommés en fonction des id des membres : 1.png, 2.png, 3.png,
etc.
- Mettez en place une page de profil de présentation des membres. Vous pouvez y afficher toutes
sortes d'informations, comme son e-mail (mais il vaut mieux lui demander son accord

auparavant), son adresse de messagerie instantanée, sa date de naissance, ses passions, son
travail, le nom de la ville où il habite, etc. Toutes ces informations pourront être stockées dans
de nouveaux champs de la table membres.
- Proposez au membre s'il le souhaite de changer ses identifiants : son pseudonyme et son mot de
passe. Il est courant qu'un membre désire changer de pseudonyme quelque temps après s'être
inscrit, mais surtout il est vital qu'il puisse changer son mot de passe à tout moment au cas où
celui-là serait compromis ! Même si le membre est déjà connecté, je vous conseille de lui
demander à nouveau son mot de passe actuel avant de l'autoriser à en changer, par mesure de
sécurité.
- Donnez au membre la possibilité de choisir parmi plusieurs options de navigation. Tout le
67 monde n'utilise pas votre site web de la même manière, peut-être que certains souhaiteraient
avoir un menu en haut des pages plutôt qu'un autre, peut être que d'autres préfèreraient
naviguer avec un design sombre, etc.
- Pourquoi ne pas commencer à mettre en place vos propres forums sur votre site web ? Chaque
message des forums sera associé à un id de membre : il suffira de créer un champ id_membre
dans la table des messages. Vous pourrez alors utiliser les jointures pour récupérer
automatiquement le pseudonyme du membre et sa signature à chaque message posté !
P{
border-radius: 10px 5px 10px 5px;
}
Les valeurs correspondent aux angles suivants dans cet ordre :
1. en haut à gauche ;
2. en haut à droite ;
3. en bas à droite ;
4. en bas à gauche
Récupérer une erreur

<?php
$reponse = $bdd->query('SELECT nom FROM jeux_video') or
die(print_r($bdd->errorInfo()));
?>
MYSQL
STOCKER DES INFORMATIONS DANS UNE BASE DE DONNEES
La base de données (BDD) est un système qui enregistre des informations. MYSQL est un
système de gestion des bases de données. Pour parler à un SGBD on utilise le langage SQL.
 STRUCTURE D'UNE BASE DE DONNEES :

Une BDD est semblable à une grosse armoire contenant des tiroirs appelé la base (en
langage SQL) dans lesquels les données sont rangées sous forme de tableau avec les
colonnes et les lignes appelé respectivement les champs et les entrées.
- PHPADMIN :
68 phpMyAdmin est un outil qui nous permet de visualiser rapidement l'état de notre
base de données ainsi que de la modifier, sans avoir à écrire de requêtes SQL .
Les opérations utiles ou les onglets dans les BDD sont :
 Afficher : affiche le contenu de la table.
 Structure: présente la structure de la table (liste des champs).
 Insérer : permet d'insérer de nouvelles entrées dans la table.
 SQl : lorsqu’on veut exécuter des requêtes SQL pour demander à MySQL de faire
quelque chose.
 Importer : Utilisé pour envoyer un fichier de requêtes (un fichier contenant des
requêtes SQL) et généralement du type .sql. Ce fichier peut par exemple contenir les
requêtes permettant de recréer notre BDD.
 Exporter : Utilisé pour créer un fichier de requêtes SQL indiquant à MYSQL comment
recréer ma BDD sur internet par exemple une fois importé. Elle permet aussi de
créer une copie de sauvegarde de sa BDD sous forme de fichier possédant l’extension
.sql au cas cette dernière venait à être supprimée.
NB : Sélectionner structure et données et transmettre on laisse les options par défaut.
Pour recréer sa BDD sur son site web il faut d’abord accéder à phpAdmin de son
hébergeur en suit chercher importer.
 Opérations : Elle permet de
 changer le nom de la table : indiquez le nouveau nom pour cette table ;
 déplacer la table vers : si vous voulez placer cette table dans une autre BDD;
 copier la table : faire une copie de la table, dans une autre base ou dans la
même (attention : dans ce cas, il faudra qu'elle ait un nom différent) ;
 optimiser la table : à force d'utiliser une table, surtout si elle est grosse, on
finit par avoir des « pertes » qui font que la table n'est plus bien organisée.
Un clic là-dessus et hop ! c'est de nouveau arrangé.
 Suprimer : Pour supprimer la totalité de la table (structure et données), cliquez sur
cet onglet. Irréversible (ATTENTION).
 LIRE DES DONNEES CONTENUES DANS UNE BDD
- SE CONNECTER A LA BASE DE DONNEES EN PHP :
Pour établir une connexion avec la BDD on utilise PDO à qui on doit donner quatre
renseignements qui sont :

 le nom de l'hôte : c'est l'adresse de l'ordinateur où MySQL est installé (comme une
adresse IP). Le plus souvent, MySQL est installé sur le même ordinateur que PHP :
dans ce cas, mettez la valeur localhost (cela signifie « sur le même ordinateur »).
 la base : c'est le nom de la base de données à laquelle vous voulez vous connecter.
 le login : il permet de vous identifier. Renseignez-vous auprès de votre hébergeur
pour le connaître. Le plus souvent
 le mot de passe :
<?php
$bdd = new PDO('mysql:host=localhost; dbname= ', 'login, 'password');
69 ?>
$bdd n’est pas vraiment une variable mais plutôt un objet représentant la connexion à la
BDD.
- Tester la présence des erreurs :

Pour gérer les erreurs en cas de non établissement de la connexion avec la base de donné on
utilise :
<?php
try{
$bdd = new PDO('mysql:host=localhost; dbname= ', 'root', '');
}
catch (Exception $e) // en cas d’erreur on entre dans le catch{
die('Erreur : ' . $e->getMessage());
}
?>
- Récupérer les données :

Le code utilisé pour faire une requête est :
$reponse = $bdd->query('Tapez votre requête SQL ici');
Exemple de requête:
SELECT * FROM nom_de_table (signifiant sélectionne toutes les entrées qu’il y a dans nom_de_table)
Ce qui donne au final :

<?php
$reponse = $bdd->query('SELECT * FROM jeux_video');
?>
- Afficher le résultat d'une requête :

Il est impossible d’afficher ce que contient $reponse car elle contient beaucoup trop
d’informations d’où la nécessité d’utiliser la fonction fetch()
Exemple :
<?php
$donnees = $reponse->fetch();
?>
$donnees est un array qui contient champ par champ les valeurs de la première
entrée. Pour afficher tous ce que contient $reponse on effectue une boucle.

AU FINAL ON A
<?php
try{
// On se connecte à MySQL
}
catch(Exception $e){
// En cas d'erreur, on affiche un message et on arrête tout
die('Erreur : '.$e->getMessage());
}
// Si tout va bien, on peut continuer
70 // On récupère tout le contenu de la table jeux_video
$reponse = $bdd->query('SELECT * FROM jeux_video);
// On affiche chaque entrée une à une
while ($donnees = $reponse->fetch()){
?>
<p>
<strong>Jeu</strong>: <?php echo $donnees['nom']; ?><br />
Le possesseur de ce jeu est : <?php echo $donnees['possesseur'];?>
, et il le vend à <?php echo $donnees['prix']; ?> euros !<br />
Ce jeu fonctionne sur <?php echo $donnees['console']; ?> et on
peut y jouer à <?php echo $donnees['nbre_joueurs_max']; ?> au maximum<br
/>
<?php echo $donnees['possesseur']; ?> a laissé ces commentaires
sur <?php echo $donnees['nom']; ?> : <em><?php echo
$donnees['commentaires']; ?></em>
</p>
<?php
}
$reponse->closeCursor();// Termine le traitement de la requête
?>
- Afficher seulement le contenu de quelques champs :

Requête : SELECT nom FROM jeux_video // cette requête sélectionne seulement les valeurs du
champ nom entrée par entrée.
Le code ci-dessous affiche uniquement les noms des jeux vidéos
<?php
try{
$bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '');
}
}
$reponse = $bdd->query('SELECT nom FROM jeux_video');

echo $donnees['nom'] . '<br />';
}
$reponse->closeCursor();
?>
- Les critères de sélection : Ils permettent en fait de filtrer nos sélections.
 WHERE :
SELECT * FROM jeux_video WHERE possesseur='Patrick'
Cette requête va sélectionner toutes les entrées dans la table jeux_video où le possesseur est Patrick
Exemple:
<?php
try{
}
71 catch(Exception $e){
}
$reponse = $bdd->query('SELECT nom, possesseur FROM jeux_video WHERE
possesseur=\'Patrick\'');
echo $donnees['nom'] . ' appartient à ' . $donnees['possesseur'] .'<br />';
}
?>
SELECT * FROM jeux_video WHERE possesseur='Patrick' AND prix < 20

« Sélectionner tous les champs de jeux_video lorsque le possesseur est Patrick ET lorsque le prix est inférieur à 20 ».
 ORDER BY : Permet d'ordonner nos résultats

SELECT * FROM jeux_video ORDER BY prix
Traduction : « Sélectionner tous les champs de jeux_video et ordonner les résultats par prix croissants
Exemple :
<?php
try{
}
}
$reponse = $bdd->query('SELECT nom, prix FROM jeux_video ORDER BY prix');

echo $donnees['nom'] . ' coûte ' . $donnees['prix'] . ' EUR<br />';
}
?>
SELECT * FROM jeux_video ORDER BY prix DESC
Traduction : « Sélectionner tous les champs de jeux_video, et ordonner les résultats par prix décroissants ».
 Limit : Nous permet de ne sélectionner qu’une partie des résultats

SELECT * FROM jeux_video LIMIT 0, 20

La première valeur de LIMIT indique a quel entrée doit ton commencer et la seconde valeur elle indique le
nombre d’entré à sélectionner.
Exemple :
$reponse = $bdd->query('SELECT nom FROM jeux_video LIMIT 0, 10');
echo '<p>Voici les 10 premières entrées de la table jeux_video:</p>';
echo $donnees['nom'] . '<br />';
}
- COMBINAISON DE REQUETES :
72 SELECT nom, possesseur, console, prix FROM jeux_video WHERE console='Xbox' OR console='PS2'
ORDER BY prix DESC LIMIT 0,10
Il est important de l’utiliser dans l’ordre WHERE puis ORDER BY puis LIMIT, sinon MySQL ne
comprendra pas votre requête.
- CONSTRUIRE DES REQUETES EN FONCTION DES VARIABLES :
LA SOLUTION : LES REQUETES PREPAREES :

- On le fait avec des marqueurs « ? » :
Dans un premier temps on prépare la requête sans sa partie variable, que l'on représentera avec
un marqueur sous forme de point d'interrogation.
<?php
$req = $bdd->prepare('SELECT nom FROM jeux_video WHERE possesseur =?');
?>
En suit on exécute la requête en appelant execute et en lui transmettant la liste des paramètres :
$req->execute(array($_GET['possesseur']));
S’il y a plusieurs marqueurs il faut indiquer les paramètres dans le bon ordre
<?php
$req = $bdd->prepare('SELECT nom FROM jeux_video WHERE possesseur =? AND prix <=?');
$req->execute(array($_GET['possesseur'], $_GET['prix_max']));
?>
AU FINAL ON A:
<?php
try{
}
}
$req = $bdd->prepare('SELECT nom, prix FROM jeux_video WHERE possesseur = ? AND prix <= ? ORDER BY prix');
$req->execute(array($_GET['possesseur'], $_GET['prix_max']));
echo '<ul>';
while ($donnees = $req->fetch()){
echo '<li>' . $donnees['nom'] . ' (' . $donnees['prix'] . 'EUR)</li>';
}
echo '</ul>';
$req ->closeCursor();
?>

NB: il est important de vérifier les paramètres reçus.
- AVEC DES MARQUEURS NOMINATIFS :

<?php
$req = $bdd->prepare('SELECT nom, prix FROM jeux_video WHERE possesseur = :possesseur AND
prix <= :prixmax');
$req->execute(array('possesseur' => $_GET['possesseur'], 'prixmax'=> $_GET['prix_max']));
?>
:possesseuret :prixmax sont des marqueurs nominatif.
- Traquer les erreurs dans une requête : Pour cela on ajoute un autre paramètre.
73 <?php
$bdd = new PDO('mysql:host=localhost;dbname=test', 'root',
'password',array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
?>
ECRIRE DES DONNEES DANS UNE BDD

Pour ajouter des données à la BDD en utilisant PHP on utilise INSERT
- AJOUTER UNE ENTREE :
La requête INSERT INTO permet d'ajouter une entrée.
Exemple :
INSERT INTO jeux_video(ID, nom, possesseur, console, prix, nbre_joueurs_max, commentaires) VALUES('',
'Battlefield 1942','Patrick', 'PC', 45, 50, '2nde guerre mondiale')
Utilisons cette requête SQL au sein d'un script PHP. Cette fois, au lieu de faire appel à query() (que
l'on utilisait dans le chapitre précédent pour récupérer des données), on va utiliser exec()qui est
prévue pour exécuter des modifications sur la base de données.
APPLICATION EN PHP
<?php
try{
}
}
// On ajoute une entrée dans la table jeux_video
$bdd->exec('INSERT INTO jeux_video(nom, possesseur, console, prix,nbre_joueurs_max,
commentaires) VALUES(\'Battlefield 1942\',\'Patrick\', \'PC\', 45, 50, \'2nde guerre
mondiale\')');
echo 'Le jeu a bien été ajouté !';
?>
Le code ci-dessus ajoute une entrée à la BDD
- INSERTION DE DONNEES VARIABLES GRACE A UNE REQUETE PREPAREE

<?php
$req = $bdd->prepare('INSERT INTO jeux_video(nom, possesseur, console, prix, nbre_joueurs_max,
commentaires) VALUES(:nom,:possesseur, :console, :prix, :nbre_joueurs_max, :commentaires)');
'nom' => $nom,
'possesseur' => $possesseur,
'console' => $console,
'prix' => $prix,

'nbre_joueurs_max' => $nbre_joueurs_max,
'commentaires' => $commentaires
)
);
echo 'Le jeu a bien été ajouté !';
?>
- UPDATE : modifier des données :

La requête UPDATE permet de modifier une entrée :
UPDATE jeux_video SET prix = 10, nbre_joueurs_max = 32 WHERE ID = 51
WHERE est indispensable car c’est lui qui indique quelle entrée modifier
74
Application en PHP :
<?php
$bdd->exec('UPDATE jeux_video SET prix = 10, nbre_joueurs_max = 32WHERE nom = \'Battlefield 1942\'');
?>
Avec une requête préparée

<?php
$req = $bdd->prepare('UPDATE jeux_video SET prix = :nvprix, nbre_joueurs_max = :nv_nb_joueurs WHERE
nom = :nom_jeu');
'nvprix' => $nvprix,
'nv_nb_joueurs' => $nv_nb_joueurs,
'nom_jeu' => $nom_jeu));
?>
- DELETE : supprimer des données

DELETE FROM jeux_video WHERE nom='Battlefield 1942'
Lorsqu'on utilise UPDATE ou DELETE, il faut penser à filtrer avec un WHERE sinon toute la table sera
affectée.
Efectuer une redirection

<?php
// Effectuer ici la requête qui insère le message
// Puis rediriger vers minichat.php comme ceci :
header('Location: page.php');// redirectionHTTP
?>

MINICHAT
minichat.php : formulaire et liste des derniers messages
<!DOCTYPE html>
<html>
<head>
<title>Mini-chat</title>
</head>
<body>
<form action="minichat_post.php" method="post">
75 <p>
<label for="pseudo">Pseudo</label>: <input type="text" name="pseudo"
value="$_SESSION[‘pseudo’]"id="pseudo" /><br />
<label for="message">Message</label>:
<input type="text" name="message" id="message" /><br />
<input type="submit" value="Envoyer" />
</p>
</form>
<?php
// Connexion à la base de données
try{
}
}
// Récupération des 10 derniers messages pour affichage

$reponse = $bdd->query('SELECT pseudo, message FROM minichat ORDERBY ID DESC LIMIT 0, 10');
// Affichage de chaque message (toutes les données sont protégées par htmlspecialchars)
echo '<p><strong>' . htmlspecialchars($donnees['pseudo']) .'</strong> : ' .
htmlspecialchars($donnees['message']) . '</p>';
}
?>
</body>
</html>
minichat_post.php : enregistrement et redirection

<?php
try{
}
}
// Insertion du message à l'aide d'une requête préparée
$req = $bdd->prepare('INSERT INTO minichat (pseudo, message) VALUES(?, ?)');
$req->execute(array($_POST['pseudo'], $_POST['message']));
// Redirection du visiteur vers la page du minichat
header('Location: minichat.php');
?>
Il est important de tester si les variables existent avec isset().
LES FONCTIONS SQL

 LES FONCTIONS SCALAIRES: elles agissent sur chaque entrée. Par exemple, vous pouvez
transformer en majuscules la valeur de chacune des entrées d'un champ ;
SELECT UPPER(nom) AS nom_maj FROM jeux_video

Application:
<?php
$reponse = $bdd->query('SELECT UPPER(nom) AS nom_maj FROM jeux_video');
76 while ($donnees = $reponse->fetch())
{
echo $donnees['nom_maj'] . '<br />';
}
?>
Il est en plus aussi possible de récupérer les autres champs

Exemple :
SELECT UPPER(nom) AS nom_maj, possesseur, console, prix FROM jeux_video
QUELQUES FONCTIONS SCALAIRES UTILES :

- UPPER : convertir en majuscules : Cette fonction convertit le texte d'un champ en majuscules.
Nous l'avons découverte pour introduire les fonctions SQL :
SELECT UPPER(nom) AS nom_maj FROM jeux_video
Ainsi, le jeu « Sonic » sera renvoyé sous la forme « SONIC » dans un champ nommé nom_maj.
- LOWER : convertir en minuscules : Cette fonction à l'effet inverse : le contenu sera entièrement
écrit en minuscules.
SELECT LOWER(nom) AS nom_min FROM jeux_video
Cette fois, le jeu « Sonic » sera renvoyé sous la forme « sonic » dans un champ nommé nom_min.
- LENGTH : compter le nombre de caractères : Vous pouvez obtenir la longueur d'un champ avec la
fonction LENGTH() :
SELECT LENGTH(nom) AS longueur_nom FROM jeux_v
 LES FONCTIONS D'AGREGAT: ces fonctions permettent d’effectuer des calculs sur l'ensemble de
la table pour retourner une valeur. Par exemple, calculer la moyenne des prix retourne une
valeur : le prix moyen.
SELECT AVG(prix) AS prix_moyen FROM jeux_video
AVG calcul la valeur moyenne d’un champ en occurrence le champ prix
Application :
<?php
$reponse = $bdd->query('SELECT AVG(prix) AS prix_moyen FROM jeux_video');
$donnees = $reponse->fetch();
echo $donnees['prix_moyen'];
?>
Il est interdit de mélanger une fonction d’agrégat avec d’autres champs.

QUELQUES FONCTIONS D’AGREGAT :
- AVG : calculer la moyenne : Cette fonction retourne la moyenne d'un champ contenant des
nombres :
SELECT AVG(prix) AS prix_moyen FROM jeux_video
- SUM : additionner les valeurs : La fonction SUM permet d'additionner toutes les valeurs d'un
champ. Ainsi, on pourrait connaître la valeur totale des jeux appartenant à Patrick :
SELECT SUM(prix) AS prix_total FROM jeux_video WHERE possesseur='Patrick'
- MAX : retourner la valeur maximale : Cette fonction analyse un champ et retourne la valeur
77 maximale trouvée. Pour obtenir le prix du jeu le plus cher :
SELECT MAX(prix) AS prix_max FROM jeux_video
- MIN : retourner la valeur minimale : De même, on peut obtenir le prix du jeu le moins cher :
SELECT MIN(prix) AS prix_min FROM jeux_video
- COUNT : compter le nombre d'entrées : La fonction COUNT permet de compter le nombre

d'entrées. Elle est très intéressante mais plus complexe. On peut en effet l'utiliser de plusieurs
façons différentes.
-
L'utilisation la plus courante consiste à lui donner * en paramètre :
SELECT COUNT(*) AS nbjeux FROM jeux_video
On obtient ainsi le nombre total de jeux dans la table.
On peut bien entendu filtrer avec une clause WHERE, pour obtenir le nombre de jeux appartenant à
Florent par exemple :
SELECT COUNT(*) AS nbjeux FROM jeux_video WHERE possesseur='Florent'
NB: Il est possible de conter le nombre de valeur distinctes dans un champs

SELECT COUNT(DISTINCT possesseur) AS nbpossesseurs FROM jeux_video
 GROUP BY et HAVING : le groupement de données :

- GROUP BY : grouper des données :
SELECT AVG(prix) AS prix_moyen, console FROM jeux_video GROUP BY console
Permet de regrouper les prix moyen des différents jeux.
- HAVING : filtrer les données regroupées :
HAVING est un peu l'équivalent de WHERE, mais il agit sur les données une fois qu'elles ont été
regroupées. C'est donc une façon de filtrer les données à la fin des opérations.
SELECT AVG(prix) AS prix_moyen, console FROM jeux_video GROUP BY console HAVING prix_moyen <= 10
Avec cette requête, on récupère uniquement la liste des consoles et leur prix moyen si ce
prix moyen ne dépasse pas 10 euros.
HAVING ne doit s'utiliser que sur le résultat d'une fonction d'agrégat. Voilà pourquoi on l'utilise ici
sur prix_moyen et non sur console. Oui, mais pas au même moment. WHERE agit en premier, avant
le groupement des données, tandis que HAVING agit en second, après le groupement des données.
On peut d'ailleurs très bien combiner les deux, regardez l'exemple suivant :
SELECT AVG(prix) AS prix_moyen, console FROM jeux_video WHERE possesseur='Patrick' GROUP

BY console HAVING prix_moyen <= 10

LES DATES
 LES DIFFERENTS TYPES DE DATES :
- DATE: stocke une date au format AAAA-MM-JJ (Année-Mois-Jour) ;
- TIME: stocke un moment au format HH:MM:SS (Heures:Minutes:Secondes) ;
- DATETIME: stocke la combinaison d'une date et d'un moment de la journée au format AAAA-
MM-JJ HH:MM:SS. Ce type de champ est donc plus précis ;
SELECT pseudo, message, date FROM minichat WHERE date = '2010-04-02 15:28:22'
SELECT pseudo, message, date FROM minichat WHERE date >= '2010-04-02 15:28:22'
Le 2eme cas sélectionne tous les messages posté a parti du'2010-04-02 15:28:22'
78
SELECT pseudo, message, date FROM minichat WHERE date BETWEEN '2010-04-02 00:00:00' AND
'2010-04-18 00:00:00'
Pour insérer une entrée contenant une date, il suffit de respecter le format de date de la base de
données :
INSERT INTO minichat(pseudo, message, date) VALUES('Mateo', 'Message!', '2010-04-02 16:32:22')
 LES FONCTIONS DE GESTION DES DATES :

- NOW() : obtenir la date et l'heure actuelles
INSERT INTO minichat(pseudo, message, date) VALUES('Mateo', 'Message!', NOW())
Insère dans la BDD un message avec l’heure à laquelle le message est posté.
NB : Les fonctions CURDATE() et CURTIME() qui retournent respectivement uniquement la date

(AAAAMM-JJ) et l'heure (HH:MM:SS).
- DAY(), MONTH(), YEAR() : extraire le jour, le mois ou l'année

Extraire des informations d'une date ? C'est facile ! Voici un exemple d'utilisation :
SELECT pseudo, message, DAY(date) AS jour FROM minichat
On récupèrera trois champs : le pseudo, le message et le numéro du jour où il a été posté.
- HOUR(), MINUTE(), SECOND() : extraire les heures, minutes, secondes

De la même façon, avec ces fonctions il est possible d'extraire les heures, minutes et secondes d'un
champ de type DATETIME ou TIME.
SELECT pseudo, message, HOUR(date) AS heure FROM minichat
- DATE_FORMAT : formater une date

Avec les fonctions que l'on vient de découvrir à l'instant, on pourrait extraire tous les éléments de la
date, comme ceci :
SELECT pseudo, message, DAY(date) AS jour, MONTH(date) AS mois, YEAR(date) AS annee,
HOUR(date) AS heure, MINUTE(date) AS minute, SECOND(date) AS seconde FROM minichat
On pourrait ensuite afficher la date en PHP dans l'ordre que l'on souhaite à l'aide du découpage en
champs que l'on vient de faire :
<?php
echo $donnees['jour'] . '/' . $donnees['mois'] . '/' . $donnees['annee'] . '...';
?>

C'est cependant un peu compliqué, et il y a plus simple. La fonction DATE_FORMAT vous
permet d'adapter directement la date au format que vous préférez. Il faut dire que le format par
défaut de MySQL (AAAA-MM-JJ HH:MM:SS) n'est pas très courant en France.
Voici comment on pourrait l'utiliser :
SELECT pseudo, message, DATE_FORMAT(date, '%d/%m/%Y %Hh%imin%ss') AS date FROM minichat
- DATE_ADD et DATE_SUB : ajouter ou soustraire des dates
SELECT pseudo, message, DATE_ADD(date, INTERVAL 15 DAY) AS date_expiration FROM minichat
SELECT pseudo, message, DATE_ADD(date, INTERVAL 2 MONTH) AS date_expiration FROM minichat
Ces requêtes ajoutent 15 jours et 2 mois respectivement à la date.
79
UN BLOG AVEC DES COMMENTAIRES
Voici la structure que je propose pour la table billets :
- id (int) : identifiant du billet, clé primaire et auto_increment ;
- titre (varchar 255) : titre du billet ;
- contenu (text) : contenu du billet ;
- date_creation (datetime) : date et heure de création du billet.
De même, voici la structure que l'on va utiliser pour la table commentaires :

- id (int) : identifiant du commentaire, clé primaire et auto_increment ;
- id_billet (int) : identifiant du billet auquel correspond ce commentaire ;
- auteur (varchar 255) : auteur du commentaire ;
- commentaire (text) : contenu du commentaire ;
- date_commentaire (datetime) : date et heure auxquelles le commentaire a été posté.
 index.php : la liste des derniers billets :

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<p>Derniers billets du blog :</p>
<?php
try
{
}
catch(Exception $e)
{
}
// On récupère les 5 derniers billets
$req = $bdd->query('SELECT id, titre, contenu, DATE_FORMAT(date_creation, \'%d/%m/%Y à
%Hh%imin%ss\') AS date_creation_fr FROM billets ORDER BY date_creation DESC LIMIT 0,5');
while ($donnees = $req->fetch())
{
?>

<div class="news">
<h3>
<?php echo htmlspecialchars($donnees['titre']); ?>
<em>le <?php echo $donnees['date_creation_fr']; ?></em>
</h3>
<p>
<?php
// On affiche le contenu du billet
echo nl2br(htmlspecialchars($donnees['contenu']));
?>
<br />
<em><a href="commentaires.php?billet=<?php echo
80 $donnees['id'];?>">Commentaires</a></em>
</p>
</div>
<?php
} // Fin de la boucle des billets
$req->closeCursor();
?>
</body>
</html>
- nl2br() : Permet de convertir les retours à la ligne en balises HTML <br />.
commentaires.php : affichage d'un billet et de ses commentaires

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<p><a href="index.php">Retour à la liste des billets</a></p>
<?php
try
{
}
catch(Exception $e)
{
}
// Récupération du billet
$req = $bdd->prepare('SELECT id, titre, contenu,DATE_FORMAT(date_creation, \'%d/%m/%Y
à%Hh%imin%ss\') ASdate_creation_fr FROM billets WHERE id = ?');
$req->execute(array($_GET['billet']));
$donnees = $req->fetch();
?>
<div class="news">
<h3>
<?php echo htmlspecialchars($donnees['titre']); ?>
<em>le <?php echo $donnees['date_creation_fr']; ?></em>
</h3>
<p>
<?php
echo nl2br(htmlspecialchars($donnees['contenu']));
?>
</p>
</div>
<h2>Commentaires</h2>
<?php
$req->closeCursor(); // Important : on libère le curseur pour la prochaine requête
// Récupération des commentaires
$req = $bdd->prepare('SELECT auteur, commentaire, DATE_FORMAT(date_commentaire, \'%d/%m/%Y à
%Hh%imin%ss\') AS 0date_commentaire_fr FROM commentaires WHERE id_billet = ? ORDER BY
date_commentaire');
81
$req->execute(array($_GET['billet']));
while ($donnees = $req->fetch())
{
?>
<p><strong><?php echo htmlspecialchars($donnees['auteur']); ?>
</strong>le <?php echo $donnees['date_commentaire_fr']; ?></p>
<p><?php echo nl2br(htmlspecialchars($donnees['commentaire'])); ?></p>
<?php
} // Fin de la boucle des commentaires
$req->closeCursor();
?>
</body>
</html>
NB :Il est important de regarder si la requête qui récupère le contenu du billet renvoie des
données. Le plus simple est donc de vérifier après le fetch()si la variable $donnees est vide ou non,
grâce à la fonction empty().
- Paginer les billets et commentaires

SELECT COUNT(*) AS nb_billets FROM billets
Permet de conter le nombre de billet. Une fois ce nombre de billets récupéré, vous pouvez
trouver le nombre de pages et créer des liens vers chacune d'elles : Page : 1 2 3 4
Chacun de ces nombres amènera vers la même page et ajoutera dans l'URL le numéro de la
page :
Code : PHP
<a href="index.php?page=2">2</a>
- Réaliser une interface d'administration du blog

Il faudra créer des pages qui permettent de modifier, supprimer et ajouter de
nouveaux billets. Ces pages devront être protégés.
Plusieurs techniques existent pour protéger l'accès à l'administration. adminqui
contiendra tous les fichiers d'administration du blog (ajouter.php, modifier.php,
supprimer.php…). Ce dossier adminsera lui entièrement protégé à l'aide des fichiers
.htaccesset .htpasswd, ce qui fait que personne ne pourra charger les pages qu'il contient
à moins de connaître le login et le mot de passe.

PROTEGER UN DOSSIER D’ADMINISTRATION AVEC UN .htaccess
Il va falloir créer deux fichiers :
- .htaccess: ce fichier contiendra l'adresse du .htpasswd et quelques autres options que vous
pourrez définir ;
- .htpasswd: ce fichier contiendra une liste de logins/mots de passe, pour chaque personne
autorisée à accéder aux pages !
 Créer le .htaccess :
La première étape est de créer sur votre disque dur un fichier appelé .htaccess. Oui, c'est un
fichier qui n'a pas de nom et qui a seulement une extension, à savoir .htaccess. Ne soyez donc pas
étonnés s'il commence par un point.
82 On ouvre notre éditeur de texte et on y tape le code ci-dessous n’ayant rien avoir avec PHP ou
HTML. Ces codes sont des instructions indiquant au serveur que seules certaines personnes sont
autorisées à accéder au dossier :
AuthName "Page d'administration protégée"

AuthType Basic
AuthUserFile "/home/site/www/admin/.htpasswd"
Require valid-user
Parmi ces quatre lignes, il y en a deux qu’on va devoir changer :

AuthName : c'est le texte qui invitera l'utilisateur à inscrire son login et son mot de passe. Vous
pouvez personnaliser ce texte comme bon vous semble ;
AuthUserFile : là c'est plus délicat ; c'est le chemin absolu vers le fichier .htpasswd (que vous
mettrez dans le même répertoire que le .htaccess).
- Comment obtenir le chemin absolu :

La fonction PHP qui va nous aider a trouvé le chemin est: realpath. Cette fonction donne le
chemin absolu vers le fichier que vous indiquez. Vous allez donc faire comme suit pour trouver
le chemin absolu.
1. Créez un fichier appelé chemin.php.
2. Inscrivez juste cette ligne de code à l'intérieur :
Code : PHP
<?php echo realpath('chemin.php'); ?>
3. Envoyez ce fichier sur votre serveur avec votre logiciel FTP, et placez-le dans le dossier que
vous voulez protéger.
4. Ouvrez votre navigateur et allez voir ce fichier PHP. Il vous donne le chemin absolu, par
exemple dans mon cas :/home/site/www/admin/chemin.php
5. Copiez ce chemin dans votre .htaccess, et remplacez le chemin.php par .htpasswd, ce qui nous
donne au final par exemple :/home/site/www/admin/.htpasswd
6. Supprimez le fichier chemin.php de votre serveur, il ne nous sert plus à rien maintenant qu'il
nous a donné le chemin absolu.
 Créer le .htpasswd :
Le .htpasswd va contenir la liste des personnes autorisées à accéder aux pages du dossier. On y
inscrit une personne par ligne, sous la forme :
login: mot_de_passe_crypté
NB : Les mots de passes doivent être cryptés
- COMMENT PEUT-ON CRYPTER LES MOTS DE PASSE ?

La fonction crypt () nous permet de crypter nos mots de passes
Exemple :
<?php echo crypt('kangourou'); ?> // le mot de passe kangourou sera crypté.
AU FINAL : Le code (code permettant de crypter le mot de passe) associé à .htpasswd est de la
forme :
<?php
83 if (isset($_POST['login']) AND isset($_POST['pass']))
{
$login = $_POST['login'];
$pass_crypte = crypt($_POST['pass']); // On crypte le mot de passe
echo '<p>Ligne à copier dans le .htpasswd :<br />' . $login .':' . $pass_crypte . '</p>';
}
else // On n'a pas encore rempli le formulaire
{
?>
<p>Entrez votre login et votre mot de passe pour le crypter.</p>
<p>
Login : <input type="text" name="login"><br />
Mot de passe : <input type="text" name="pass"><br /><br />
<input type="submit" value="Crypter !">
</p>
</form>
<?php
}
?>

LES JOINTURES ENTRE TABLES
La jointure permet de lier les tables d’une base de donnés comme ça on n’évite des répétitions
au sein d’un même base de donnée. Il permet aussi de récupérer des champs issus de différentes
tables simultanément. Il existe deux types de jointures.
 Modélisation d’une relation : il est important de créer une relation ou une correspondance entre
les tables à lier et cela se fait par exemple comme suit :
Si je voulais stocker les noms, prénoms et numéro de téléphone de chaque propriétaire de jeux
vidéo dans notre table jeux_video, il n'y aurait pas d'autre solution que de dupliquer ces
informations sur chaque entrée… Cependant ce serait bien trop répétitif car le nom, le prénom
et le numéro de téléphone d’un joueur apparaitra autant de fois qu'il possède de jeux vidéo.
84
Pour régler le problème on peut créer une autre table, que l'on nommera par exemple
proprietaires, qui centralisera les informations des propriétaires des jeux. Cette table liste tous
les propriétaires de jeux connus et attribue à chacun un ID. Les propriétaires n'apparaissant
qu'une seule fois, il n'y a pas de doublon. Maintenant, il faut modifier la structure de la table
jeux_video pour faire référence aux propriétaires. Pour cela, le mieux est de créer un champ
ID_proprietaire qui indique le numéro du propriétaire dans la table jeux_video. Le nouveau
champ ID_proprietaire est de type INT. Il permet de faire référence à une entrée précise de la
table proprietaires.
On peut maintenant considérer que c’est tables sont reliées à travers ces ID de propriétaires,
mais il est important de savoir que à ce niveau MYSQL ne fait pas encore de relation entre les
tables. Il va falloir lui expliquer cette relation dans une requête SQL d’où l’intervention des
jointures.
Il existe deux types de jointures :

- Les jointures internes : elles ne sélectionnent que les données qui ont une correspondance entre
les deux tables ;
- Les jointures externes : elles sélectionnent toutes les données, même si certaines n'ont pas de
correspondance dans l'autre table.
La jointure externe est donc plus complète car elle est capable de récupérer plus
d'informations, tandis que la jointure interne est plus stricte car elle ne récupère que les
données qui ont une équivalence dans l'autre table.
 LES JOINTURES INTERNES:
- Jointure interne avec WHERE (ancienne syntaxe) :
Avant toute chose il est important de créer une correspondance entre les deux tableaux.
Pour réaliser ce type de jointure, on va sélectionner des champs des deux tables (jeux_video et
propriétaires) et indiquer le nom de ces deux tables dans la clause FROM :
Code : PHP
SELECT nom, prenom FROM proprietaires, jeux_video
Dans le cas des champs ambigus (même champs dans différentes tables) on utilise plutôt :
SELECT jeux_video.nom, proprietaires.prenom FROM proprietaires, jeux_video
Ainsi, on demande clairement de récupérer le nom du jeu et le prénom du propriétaire avec cette requête.
NB : le champ nom est ambigu car il apparait dans les deux tables.

Il reste encore à lier les deux tables entre elles. En effet, les jeux et leurs propriétaires ont une
correspondance via le champ ID_proprietaire (de la table jeux_video) et le champ ID (de la table
proprietaires). On va indiquer cette liaison dans un WHERE, comme ceci :
Code :PHP
SELECT jeux_video.nom, proprietaires.prenom
FROM proprietaires, jeux_video
WHERE jeux_video.ID_proprietaire = proprietaires.ID
- Utiliser les alias : il est fortement recommander d’utiliser les alias quand on fait des jointures.
SELECT jeux_video.nom AS nom_jeu, proprietaires.prenom AS prenom_proprietaire
85 FROM proprietaires, jeux_video
WHERE jeux_video.ID_proprietaire = proprietaires.ID
En utilisant des alias plus courts encore :
SELECT j.nom AS nom_jeu, p.prenom AS prenom_proprietaire

FROM proprietaires AS p, jeux_video AS j
WHERE j.ID_proprietaire = p.ID
NB: le mot clef AS est facultatif. D’où
SELECT j.nom nom_jeu, p.prenom prenom_proprietaire

FROM proprietaires p, jeux_video j
WHERE j.ID_proprietaire = p.ID
- Jointure interne avec JOIN (nouvelle syntaxe) :

L’utilisation de JOIN et semblable à l’utilisation de WHERE comme le montre l’exemple ci-
dessous :

FROM proprietaires p
INNER JOIN jeux_video j
ON j.ID_proprietaire = p.ID
Cette fois, on récupère les données depuis une table principale (ici, proprietaires) et on fait une
jointure interne (INNER JOIN) avec une autre table (jeux_video). La liaison entre les champs est
faite dans la clause ON un peu plus loin.
Donc si on veut ajouter des filtres c’est après la ligne du ON
Exemple :
INNER JOIN jeux_video j
WHERE j.console = 'PC'
ORDER BY prix DESC
LIMIT 0, 10

 les jointures externes: elles sélectionnent toutes les données, même si certaines n'ont pas de
correspondance dans l'autre table.
- LEFT JOIN : récupérer toute la table de gauche :

Reprenons la jointure à base de INNER JOIN et remplaçons tout simplement INNER par LEFT :
Code : PHP
LEFT JOIN jeux_video j
86
proprietaires est appelée la « table de gauche » et jeux_video la « table de droite ». Le LEFT JOIN
demande à récupérer tout le contenu de la table de gauche, donc tous les propriétaires, même si
ces derniers n'ont pas d'équivalence dans la table jeux_video.
- RIGHT JOIN : récupérer toute la table de droite :

Le RIGHT JOIN demande à récupérer toutes les données de la table dite « de droite », même si
celle-ci n'a pas d'équivalent dans l'autre table. Prenons la requête suivante :
Code : PHP
RIGHT JOIN jeux_video j
La table de droite est « jeux_video ». On récupèrerait donc tous les jeux, même ceux qui n'ont
pas de propriétaire associé.

Memento 2 HTML5.CSS3.PHP - Mysql

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Memento 2 HTML5.CSS3.PHP - Mysql

Transféré par

Droits d'auteur :

Formats disponibles

18/10/2018 MEMENTO DE

KAMDEM KAMDEM LANDRY GAETAN

NB : Pour un lien contenant des « & » remplacer par « &amp »

- Lien vers un autre site : Ex : <a href="http://www.siteduzero.com">Site du Zéro</a>

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

Cas pratiques d’utilisations des liens

 Insertion d’image : <img/>

LES BALISES STRUCTURANTES

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

 Appliquer un style à plusieurs balises sélectionnées (balise1 et balise2 sont sélectionnées) :

 Les commentaires : /* Ceci est un commentaire */

- A B : une balise contenue dans une autre : Ex : h3 em

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

- A[attribut="Valeur"] : une balise, un attribut et une valeur exacte

- A[attribut*="Valeur"] : une balise, un attribut et une valeur

- @font-face(création de police perso. en plusieurs formats)

- italic: le texte sera mis en italique.

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

FAIRE FLOTTER UNE IMAGE

- no-repeat : le fond ne sera pas répété. L'image

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

LES BORDURES ET LES OMBRES

Les pseudo-formats pour la création d’apparence dynamiques

 :active (au moment du clic)

 :focus(lorsque l'élément est sélectionné)

Les modèles de boites

 Dimensions des boites :

 Centrer les blocs :

 Quand le texte dépasse :

Description Propriétés valeurs

Pour la compatibilité des inline-block avec IE6 ou IE7

Alignement vertical des éléments en inline-block :vertical-align

Description Propriété valeurs

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

Le positionnement absolu, fixe et relatif

 Le positionnement relatif : permet de décaler l'élément par rapport à sa position initiale

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

Descriptions Propriétés Valeurs

PROPRIETES DE FORMATAGE DE TEXTE

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

PROPRIETES DE COULEUR ET DE FOND

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

PROPRIETES DES BOITES

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

PROPRIETES DE POSITIONNEMENT ET D'AFFICHAGE

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

Type Nom Valeurs Possible

Indiquer l'url de l'image qui servira de puce. Exemple :

On peut réunir les valeurs de list-style-type, list-style-position et

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

PROPRIETES DES TABLEAUX

Position du titre caption-side top : en haut du tableau

n-resize : flèche vers le nord

url : curseur personnalisé, de type .cur ou .ani. Exemple :

Vous devez utiliser un logiciel dédié à la création de curseurs

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

/* Style par défaut de nos paragraphes (= état initial). */

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

/* Style par défaut de nos paragraphes (= état initial). */

Bien plus intéressante, transition-timing-function permet de spécifier l'accélération de notre transition :

MEMENTO DE HTML5/CSS3, PHP ET MYSQL KAMDEM KAMDEM LANDRY GAETAN

La méga propriété de transition