Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

CHAKRAOUI Mohamed Université Ibno Zohr Faculté Poly disciplinaire Ouarzazate 1

CHAKRAOUI Mohamed Université Ibno Zohr Faculté Poly disciplinaire Ouarzazate 1 HTML CSS PHP (My)SQL HTML - Introduction - Texte en HTML - Listes en HTML - Tableau en HTML CSS - Utilité - Syntaxe PHP - Introduction - Eléments du langage - PHP avec HTML 4 (My)SQL - Introduction à SQL - MySQL avec PHP Langage descriptif - Pas de séquences de contrôle - Description de la sémantique du document Balises - Balise ouvrante : <TAG> - Balise fermante : </TAG> - Les deux en une : <TAG /> Standardisé - W3C : http ://www.w3c.org Balise DOCTYPE, sur la première 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 fermée - Transformation en d'autres formats HTML donne un découpage selon la sémantique du document Mise en forme visuelle - en HTML : moins lisible, plus de code - en CSS : plus lisible, regroupement et généralisation  Texte en HTML Espaces - Tous les espaces blancs (y compris \t et \n) sont ignorés - Cas particulier : l'espace seul => reproduit tel quel Mise en forme au niveau paragraphe - <BR> : aller à la ligne - : insérer 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 manière cohérente  Listes en HTML Listes non-ordonnées - <UL> marque le début de la liste et </UL> sa n - <LI> permet de commencer un nouvel item dans la liste Exemple: <UL> <LI>1<SUP>er</SUP> élément <LI>2<SUP>eme</SUP> élément <LI>3<SUP>eme</SUP> élément </UL>  Listes en HTML Listes de définitions <DL> marque le début de la liste et </DL> sa fin <DT> permet de définir un titre pour une définition <DD> permet de définir le contenu d'une définition 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-tête 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 définitions de lignes ou de cellules On peut ranger les lignes entre <THEAD> et </THEAD> pour indiquer qu'elles font partie de l'en-tête  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 Séparation de la forme et du fond - HTML décrit le fond - CSS décrit la forme Centralisation de l'aspect visuel On insère du CSS entre : <STYLE type=" text / css ">  </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 façon : nom { a t t r i b u t : v a l e u r ; . . . } nom peut être: - Un nom de balise : les attributs s'appliquent à toutes ces balises - Un nom générique (commençant par un point) : les attributs s'appliquent aux balises utilisant class ="nom" (sans le point) - Un mélange des deux, séparés par des virgules : les attributs s'appliquent suivant les deux points précédents attribut désigne quel élément visuel est modifié (couleur, bordure, fond, marges …) valeur désigne par quelle valeur est remplacée l'attribut désigné  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>  Présentation Pages dynamiques Exemple statique <HTML> <HEAD><TITLE>Page statique</TITLE></HEAD> <BODY> Nous sommes le 28/03/2007 </BODY> </HTML> Problème : Afficher une page différente en fonction de l'utilisateur, de l'environnement, . . . La solution: Utiliser un langage de programmation évolué, par exemple PHP .  Présentation Langage récent (crée en 1994) Versions utilisée : - 4.3 (plus répandue) - 5.0 (avec une couche objet) Langage de script - Langage interprété - Présence d'un interpréteur côté serveur Intégré au code HTML Syntaxe proche du C et du Java Interface simple avec beaucoup de SGBD  Modèle d'exécution - Le client demande une page PHP - Le serveur web exécute le code de la page - Lancement de l'interpréteur - Exécution du code - Le serveur web renvoie le résultat de l'exécution - Le client ache le résultat Il est impossible au client de voir le code PHP Seul le résultat de l'exécution est récupéré par le client  Premier exemple Code côté serveur <HTML> <HEAD><TITLE>Page dynamique </TITLE></HEAD> <BODY> <?php echo ( "Nous sommes le " ) ; echo ( date( " j/m/Y" ) ) ; ?> </BODY> </HTML>  Premier exemple Résultat côté client <HTML> <HEAD><TITLE>Page statique </TITLE></HEAD> <BODY> Nous sommes le 12 mars 2008 </BODY> </HTML>  HTML/PHP PHP s'intègre dans l'HTML entre <?php et ?> Les instructions se finissent par ; Les commentaires sont soit entre /*et */, soit après // Les variables Les variables sont préfixées par $ Leur nom suit les règles classiques Exemple : $my_var_03 Les noms sont sensibles à la casse : $var 6= $Var Pas de déclaration, 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 Chaînes : "54" ou '54' Booléens : false ou true Tableaux Fonctions de test : - isset ($var) : renvoie true si $var existe - unset($var) : détruit $var - is_integer ($var), is_string ($var), . . . : renvoie true si $var est un entier, une chaîne, . . .  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 parenthèses) - print est équivalente à echo - On peut faire un affichage comme en C avec printf  Opérateurs Arithmétiques : + - / % ++ -- Affectation : = .= += -= = /= %= Comparaison : == < != > === <= !== >= Logiques : and && or || xor ! Conditionnel : ... ? ... : ... Conditionnelles et boucles if ( cond ) { . . . } elseif (cond ) { . . . } else { . . . }  Conditionnelles et boucles switch (expr) { case VALEUR_1 : . . . break ; case VALEUR_2 : . . . break ; d e f a u l t : . . . break ; }  Conditionnelles et boucles for ( init ; cond ; modif ) { . . . } while (cond) { . . . } do { . . . } while ( cond ) ;  Les tableaux Chaque élément du tableau a une clé et une valeur Pas de déclaration du tableau Les valeurs des éléments ne sont pas forcément toutes du même type Exemple de remplissage à la volée : $tab [0] = 54 ; $tab [1] = " pif " ; $tab ["paf"] = false ; Exemple de remplissage direct : $tab = array (54 , "pif" ) ; $tab = array ( uploads/s1/ html-php.pdf