HTML PHP

CHAKRAOUI Mohamed
Universit Ibno Zohr

Facult Poly disciplinaire Ouarzazate
HTML
CSS
PHP
(My)SQL
HTML
- Introduction
- Texte en HTML
- Listes en HTML
- Tableau en HTML
CSS
- Utilit
- Syntaxe
PHP
- Introduction
- Elments du langage
- PHP avec HTML
4 (My)SQL
- Introduction SQL
- MySQL avec PHP
Langage descriptif
- Pas de squences de contrle
- Description de la smantique du document
Balises
- Balise ouvrante : <TAG>
- Balise fermante : </TAG>
- Les deux en une : <TAG />
Standardis
- W3C : http ://www.w3c.org
Balise DOCTYPE, sur la premire ligne du fichier
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http ://www.w3.org/TR/html4/loose.dtd">
Encapsulation de type "pile

<A> <B> </A> </B> i n c o r r e c t
<A> <B> </B> </A> c o r r e c t
Structure arborescente
Arbre minimal
<HTML>
<HEAD>
<TITLE />
</HEAD>
<BODY />
</HTML>
Commentaires entre 

HTML + XML => XHTML
- Balises toujours ferme
- Transformation en d'autres formats
HTML donne un dcoupage selon la smantique
du document
Mise en forme visuelle
- en HTML : moins lisible, plus de code
- en CSS : plus lisible, regroupement et
gnralisation
Texte en HTML
Espaces
- Tous les espaces blancs (y compris \t et \n) sont ignors
- Cas particulier : l'espace seul => reproduit tel quel
Mise en forme au niveau paragraphe
- <BR> : aller la ligne
- : insrer un espace
- <P> : commencer un nouveau paragraphe
Mise en forme au niveau phrase
- <EM> </EM> : Mise en valeur (italique)

- <STRONG> </STRONG> : Mise en valeur forte (gras)
- <CITE> </CITE> : Citation courte (gras italique)
- <Q> </Q> : Citation courte (entre guillemets)
- <BLOCKQUOTE </BLOCKQUOTE> : Citation longue (gras)
Texte en HTML
Liens hypertexte
- Entre <A> et </A>
- Choisir le(s) bon(s) mot(s) pour servir de lien
- Liens internes (<A NAME=...>) ou externes (<A HREF=...>)

- Possibilit de lien sur une image
- Lier les pages de manire cohrente
Listes en HTML
Listes non-ordonnes
- <UL> marque le dbut de la liste et </UL> sa n
- <LI> permet de commencer un nouvel item dans la liste
Exemple:
<UL>
<LI>1<SUP>er</SUP> lment
<LI>2<SUP>eme</SUP> lment
<LI>3<SUP>eme</SUP> lment
</UL>
Listes en HTML
Listes de dfinitions
<DL> marque le dbut de la liste et </DL> sa fin
<DT> permet de dfinir un titre pour une dfinition
<DD> permet de dfinir le contenu d'une dfinition

Exemple:
<DL>
<DT><STRONG>Cout</STRONG>
<DD>Pr i x de r e v i e n t
<DT><STRONG>Be n e f i c e</STRONG>
<DD>Gain r e a l i s e par une pe r s onne ou une c o l l e c t i v i t e
</DL>
Tableau en HTML
Forme du tableau
Un tableau commence par <TABLE> et nit par </TABLE>
Une ligne dans un tableau commence par <TR> et nit par </TR>
Une cellule dans une ligne commence par <TD> et nit par </TD>
Une cellule d'en-tte dans une ligne commence par <TH> et nit
par </TH>
Forme du tableau
On peut donner un "titre" au tableau entre <CAPTION> et

</CAPTION>, en dehors des dfinitions de lignes ou de cellules
On peut ranger les lignes entre <THEAD> et </THEAD> pour
indiquer qu'elles font partie de l'en-tte
Tableau en HTML
Les balises <TD> et <TH> ont les attributs :

- rowspan pour indiquer sur combien de lignes s'tant la cellule
- colspan pour indiquer sur combien de colonnes s'tant la
cellule
- align pour indiquer l'alignement horizontal dans la cellule
(left, right ou center)
- valign pour indiquer l'alignement vertical dans la cellule (top,
middle, bottom)
<TABLE> a les attributs :

- border
- rules
Mise en forme
Sparation de la forme et du fond

- HTML dcrit le fond
- CSS dcrit la forme
Centralisation de l'aspect visuel

On insre du CSS entre :
<STYLE type=" text / css ">
<!-du CSS ici
-->
</STYLE>
Ou on lie un chier CSS avec :
<LINK rel= stylesheet type=" text/css " href=" ... ">
Mise en forme
Ou on ajoute du CSS une balise :

<BALISE style=" ... ">
Syntaxe:
Le CSS est form d'un ensemble de classes.
Une classe s'crit de cette faon :
nom {
attribut:valeur;
...
}
nom peut tre:

- Un nom de balise : les attributs s'appliquent toutes ces balises
- Un nom gnrique (commenant par un point) : les attributs
s'appliquent aux balises utilisant class ="nom" (sans le point)
- Un mlange des deux, spars par des virgules : les attributs
s'appliquent suivant les deux points prcdents
attribut dsigne quel lment visuel est modifi (couleur, bordure,
fond, marges )
valeur dsigne par quelle valeur est remplace l'attribut dsign
Exemple de CSS
Body {
font-family : Arial;
}
p {
background-color :#F0C0C0 ;
border: thin solid black ;
}
. titre{
color: yallow;
}
index.html
<HTML>
<HEAD>
<LINK rel=" stylesheet type=text/css" href=style.css">
<TITLE>Exemple CSS</TITLE>
</HEAD>
<BODY>
<H1 class=titre">Exemple</H1>
<P>Un paragraphe avec bordure et couleur defont

</BODY>
</HTML>
Prsentation
Pages dynamiques
Exemple statique
<HTML>
<HEAD><TITLE>Page statique</TITLE></HEAD>
<BODY>
Nous sommes le 28/03/2007
</BODY>
</HTML>
Problme : Afficher une page diffrente en fonction de l'utilisateur,
de l'environnement, . . .
La solution: Utiliser un langage de programmation volu, par
exemple PHP.
Prsentation
Langage rcent (cre en 1994)

Versions utilise :
- 4.3 (plus rpandue)
- 5.0 (avec une couche objet)

Langage de script
- Langage interprt
- Prsence d'un interprteur ct serveur
Intgr au code HTML
Syntaxe proche du C et du Java
Interface simple avec beaucoup de SGBD
Modle d'excution
-
Le client demande une page PHP
Le serveur web excute le code de la page

- Lancement de l'interprteur
- Excution du code
- Le serveur web renvoie le rsultat de l'excution
- Le client ache le rsultat
Il est impossible au client de voir le code PHP
Seul le rsultat de l'excution est rcupr par le client
Premier exemple
Code ct serveur
<HTML>
<HEAD><TITLE>Page dynamique </TITLE></HEAD>
<BODY>
<?php
echo ( "Nous sommes le " ) ;
echo ( date( " j/m/Y" ) ) ;
?>
</BODY>
</HTML>
Premier exemple
Rsultat ct client
<HTML>
<HEAD><TITLE>Page statique </TITLE></HEAD>
<BODY>
Nous sommes le 12 mars 2008
</BODY>
</HTML>
HTML/PHP
PHP s'intgre dans l'HTML entre <?php et ?>

Les instructions se finissent par ;
Les commentaires sont soit entre /*et */, soit aprs //
Les
variables
Les variables sont prfixes par $ Leur nom suit les rgles classiques
Exemple : $my_var_03
Les noms sont sensibles la casse : $var 6= $Var
Pas de dclaration, typage implicite

Exemple:
$my_var_03 = 4 ; // Maintenant , c ' e s t un e n t i e r
$my_var_03 = " vip" ; // Maintenant , c ' e s t une c h a i n e
Les types
Entiers : 454
Flottants : 65.2
Chanes : "54" ou '54'
Boolens : false ou true

Tableaux
Fonctions de test :
- isset ($var) : renvoie true si $var existe
- unset($var) : dtruit $var
- is_integer ($var), is_string ($var), . . . : renvoie true si $var est
un entier, une chane, . . .
Les constantes et l'affichage
Constantes
- Exemples : define ("PI", 3.14)
- On les utilise directement (sans $) : echo(PI)
Affichage
- On peut afficher avec la commande echo (avec ou sans parenthses)
- print est quivalente echo
- On peut faire un affichage comme en C avec printf
Oprateurs
Arithmtiques : + - / % ++ -Affectation : = .= += -= = /= %=
Comparaison : == < != > === <= !== >=
Logiques : and && or || xor !
Conditionnel : ... ? ... : ...
Conditionnelles et boucles
if ( cond ) {
...
}
elseif (cond ) {
...
}
else {
...
}
switch (expr) {
case VALEUR_1 :
...
break ;
case VALEUR_2 :
...
break ;
default:
...
break ;
}
for ( init ; cond ; modif ) {

...
}
while (cond) {
...
}
do {
...
} while ( cond ) ;
Les tableaux
Chaque lment du tableau a une cl et une valeur

Pas de dclaration du tableau
Les valeurs des lments ne sont pas forcment toutes du mme
type
Exemple de remplissage la vole :
$tab [0] = 54 ;
$tab [1] = " pif " ;
$tab ["paf"] = false ;
Exemple de remplissage direct :
$tab = array (54 , "pif" ) ;
$tab = array ( "paf " => false) ;
Parcours de tableaux
Parcours "classique" avec for

Parcours spcifique :
Foreach($tab as $value) {
...
}
Foreach($tab as $key => $value) {
...
}
Les chanes de caractres
Dlimites par ' : contenu non interprt

Dlimites par " : contenu interprt
Les unes peuvent contenir les autres
Concatnation avec .
Exemple :
$pif = toto" ; // Contient toto"
$paf = "comme $pif" ; //Contient "comme toto"
$pouf = ' pas comme $pif' ; // Contient "pas comme $pif "
$bim = $pif.$paf ; // Contient toto comme toto"
Les chanes de caractres
Accs un caractre : $bim[0]

strlen ( $str ) : longueur de $str
substr ( $str , start [, len ]) : sous-chane de $str commenant au
caractre start, et faisant ventuellement len caractres de long
Comparaison avec ==, === ou strcmp
Les
fonctions
f u n c t i o n ma_fonc ( $param1 , $param2 , . . . ) {
...
return...;
}
Les
Fonctions
Pas de type pour les paramtres ou la valeur de retour

Nombre x de paramtres
Le nom ne commence pas par $
Le nom est insensible la casse

Le rsultat est renvoy avec la commande return
- Une seule valeur de retour
Passage des paramtres par valeur (par dfaut)
- Passage par rfrence : &$param
Les variables utilises l'intrieur d'une fonctions sont dtruites la
fin, sauf :
- si on les dnit avec static
- si on les dnit avec global
Les Fonctions
function ma_fonc ( ) {
static $appels = 0 ;
$appels++;
echo ( Jai ete appellee $appels fois " ) ;

}
function ma_fonc2 ( ) {
global $var ;
$var = 54 ;
}
$var = 0 ;
ma_fonc2 ( ) ;
echo ($var) ;
Inclusion de chiers
On utilise require (" fichier "), include ("fichier"),

require_once("fichier "),
Include_once(" chier ")
Les variantes include provoquent des warnings au lieu d'erreurs en
cas de problme
Les variantes _once n'incluent le fichier que si celui n'a pas dj t
inclu
Utilisation des formulaires
On peut "dialoguer" avec le visiteur en utilisant les formulaires
En mthode GET : donnes encodes dans l'URL

index.php?var=value&var2=value2...
En mthode POST : donnes caches mais pas de navigation avec
Prcdent/Suivant
Exemple de formulaire
<FORM action=traitement.php" method=" post">
prenom : <INPUT type="text" name="prenom">
age : <INPUT type=" text" name="age">
<INPUT type="submit" value=" Envoyer ">
</FORM>
Elments de formulaire
Il existe diffrents type pour les balises INPUT :
text : une zone de texte sur une seule ligne
password : idem, mais avec affichage d'toiles
file : permet la slection d'un chier
checkbox : une case cocher
button : un bouton simple (pas d'action sans javascript)
hidden : un champ "texte" cach
radio : un bouton d'option
reset : un bouton de remise zro
submit : un bouton de soumission
Le script de traitement des formulaires reoit un tableau pr-rempli

- $_GET pour la mthode GET
- $_POST pour la mthode POST
- Il contient les donnes du formulaire

Exemple de traitement
<?php
$prenom = $_POST[ "prenom" ] ;
$age = $_POST[ " age " ] ;
echo ( "Bonjour $prenom , vous avez $age ans " ) ;
?>
Persistance des donnes
On veut parfois garder de l'information entre plusieurs pages :

- Login / Password
- Prfrences de navigation
- Slection de produits acheter (panier, ...)

On utilise donc les sessions PHP.
- Les sessions permettent de stocker des informations ct
serveur
- Elles sont identifies par un numro qui reste valide tant que
le visiteur reste connect
- Le numro est transmis au serveur soit dans l'URL, soit dans
un cookie
Les donnes se placent et se rcuprent dans $_SESSION, comme
pour les formulaires
Utilisation des sessions
Les sessions utilisent les cookies : il faut donc ouvrir la session avant
d'acher quoi que ce soit (voir fonction setcookie)
NB : Les valeurs des cookies sont dans le tableau pr-rempli
$_COOKIE
Le cookie utilis (ou la variable dans $_GET par dfaut) s'appelle
PHPSESSID
La session existe ds qu'elle est cre et jusqu' ce qu'elle soit
dtruite:
- Cration (et rouverture) : session_start ()

- Destruction : session_destroy ()
NB: Note : les session s'autodtruisent aprs un certain temps
(gnralement 30 min)
Introduction a sql
Dfinition
SQL est un langage puissant de requte
Il permet de faire une demande complexe une base de donnes

dans un langage proche de l'anglais
On l'utilise pour rcuprer, ajouter, supprimer et crer des

donnes dans une base de donnes
Les bases de donnes utilisent des tables :

- chaque ligne est un enregistrement de champs avec des valeurs
- les requtes se font sur ces champs
Exemple:
Table personne:
Nom
Prenom
Activite
Age
Qabbaj
Yassine
Etudiant
22
CALVIN
Jean
Rformateur
26
CHASTEL
Jean
Assassin
19
PARE
Ambroise Chirurgien
44
Requte interrogative: SELECT FROM personne;

Requte slective: SELECT Nom, Prenom FROM personne;
Requte restrictive SELECT FROM personne WHERE Prenom = 'Jean';
Table roi
Id
Nom
Henri II
SELECT p.Nom, p.Activite FROM personne p, roi r WHERE p.Roi = r.Id 2

AND r.Nom = 'Francois Ier ORDER BY p.Nom DESC;
Charles IX
Dcompte: SELECT count(*) FROM personne;
Francois
Henri IV
Somme: SELECT sum(Age) FROM personne;
Manipulation de donnes
Requte d'insertion: INSERT INTO personne(Nom, Prenom, Age,

Activite) VALUES('PARE', 'Ambroise', 44, 'Chirurgien');
Requte de mise jour: UPDATE personne SET Age = 43 WHERE Nom
= 'CARTIER';
Requte de suppression DELETE FROM personne WHERE Prenom =
'Jean';
Connexion
$c = mysql_connect("localhost", "login", "mdp");
$c est false en cas d'erreur de connexion
Choix
de la base
$s = mysql_select_db("nom", $c);
$s est false en cas d'erreur
Requtes
Excution
$res = mysql_query("une requete", $c);
$res est false en cas d'erreur
Rcupration de(s) rsultat(s)

$row = mysql_fetch_row($res);
$tab = mysql_fetch_array($res);
$obj = mysql_fetch_object($res);
$row[0]; $row[1]; ...

$tab["champ"]; ... ou $tab [0]; ...
Obj->champ; ...
mysql_num_rows($res) : retourne le nombre de rsultats d'un

SELECT
mysql_affected_rows($res) : retourne le nombre de ligne
affectes par un INSERT, un UPDATE ou un DELETE
- mysql_insert_id($c) : retourne le dernier incrment d'un champ

AUTO_INCREMENT
Attention aux injections SQL !

HTML PHP

Transféré par

Informations du document

Description :

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é ?

Description :

Droits d'auteur :

Formats disponibles

HTML PHP

Titre original :

Transféré par

Description :

Droits d'auteur :

Formats disponibles

CHAKRAOUI Mohamed

Universit Ibno Zohr

Encapsulation de type "pile

Commentaires entre

- <EM> </EM> : Mise en valeur (italique)

- Liens internes (<A NAME=...>) ou externes (<A HREF=...>)

<DD> permet de dfinir le contenu d'une dfinition

On peut donner un "titre" au tableau entre <CAPTION> et

Les balises <TD> et <TH> ont les attributs :

<TABLE> a les attributs :

Sparation de la forme et du fond

Centralisation de l'aspect visuel

Ou on ajoute du CSS une balise :

nom peut tre:

<P>Un paragraphe avec bordure et couleur defont

Langage rcent (cre en 1994)

- 5.0 (avec une couche objet)

Le client demande une page PHP

Le serveur web excute le code de la page

Seul le rsultat de l'excution est rcupr par le client

PHP s'intgre dans l'HTML entre <?php et ?>

Pas de dclaration, typage implicite

Boolens : false ou true

Les constantes et l'affichage

for ( init ; cond ; modif ) {

Chaque lment du tableau a une cl et une valeur

Parcours "classique" avec for

Les chanes de caractres

Dlimites par ' : contenu non interprt

Les chanes de caractres

Accs un caractre : $bim[0]

f u n c t i o n ma_fonc ( $param1 , $param2 , . . . ) {

Pas de type pour les paramtres ou la valeur de retour

Le nom est insensible la casse

echo ( Jai ete appellee $appels fois " ) ;

On utilise require (" fichier "), include ("fichier"),

Utilisation des formulaires

On peut "dialoguer" avec le visiteur en utilisant les formulaires

En mthode GET : donnes encodes dans l'URL

En mthode POST : donnes caches mais pas de navigation avec

Il existe diffrents type pour les balises INPUT :

text : une zone de texte sur une seule ligne

password : idem, mais avec affichage d'toiles

file : permet la slection d'un chier

checkbox : une case cocher

button : un bouton simple (pas d'action sans javascript)

hidden : un champ "texte" cach

radio : un bouton d'option

reset : un bouton de remise zro

submit : un bouton de soumission

Le script de traitement des formulaires reoit un tableau pr-rempli

- Il contient les donnes du formulaire

Persistance des donnes

On veut parfois garder de l'information entre plusieurs pages :

- Slection de produits acheter (panier, ...)

Utilisation des sessions

- Cration (et rouverture) : session_start ()

SQL est un langage puissant de requte

Il permet de faire une demande complexe une base de donnes