Algorithmes et structures de donnes avances Partie Conception de Sites Web dynamiques

1
Algorithmes et structures de données avancées
Partie Conception de Sites Web dynamiques

• Cours 8
• Patrick Reuter

2

• Attributs simple guillemets et double
  guillemets
• Image width
• Cliquer ICI

3
Conception de Site Webs Interactifs

• Déroulement
• Pages web statiques (HTML/XHTML)
• Mise en forme avec feuilles de styles (CSS)
• Programmation côté serveur
• Pages web dynamiques (PHP)
• avec connexion à une base de données (MySQL)
• Programmation côté client
• JavaScript
• Référencement Internet (moteur de recherche)

4
CSS

• Le langage CSS (Cascading Style Sheets  feuilles
  de style en cascade) est utilisé pour décrire la
  présentation d'un document structuré écrit en
  HTML
• Pour séparer la mise en forme et le contenu
• Permet de gagner en temps, en simplicité de
  création, et en maintenance.
• ltlink rel"stylesheet" type"text/css"
  media"screen" href"style.css" title"Normal" /gt

5
Exemple
lthtmlgt ltheadgt lttitlegtma premiere
pagelt/titlegt lt/headgt ltbody bgcolor"0099CC"
text"FFFFFF"gt lth1gtMa Pagelt/h1gt ltpgtma
premiegravere page weblt/pgt lt/bodygt lt/htmlgt
6
Exemple style.css

• body
• background-color 0099cc
• text ffffff

7
CSS

• Avantages
• La structure du document et la présentation sont
  gérés dans des fichiers séparés.
• Le code XHTML est considérablement réduit en
  taille et en complexité, puisqu'il ne contient
  plus de balises de présentation.
• La conception d'un document se fait dans un
  premier temps sans se soucier de la présentation,
  ce qui permet d'être plus efficace.
• Plusieurs feuilles de style (p.ex. lecture ou
  impression)
• p.ex. pour lécran
• ltlink rel"stylesheet" type"text/css"
  media"screen" href"style.css" title"Normal" /gt
• p.ex. pour impression
• ltlink rel"stylesheet" type"text/css"
  media"print" href"print.css" /gt

8
Exemple

• p
• color 0000ff
• text-align center

9
Priorités de CSS
index.php
feuille.css

• p
• color FF0000/ rouge /
• text-align center
• p.vert
• color 008000 / vert /
• text-align left
• pmix2
• color 0000FF / bleu /
• pmix3
• color 0000FF / bleu /

ltheadgt ltlink href"style.css" rel"stylesheet"
type"text/css"gt lt/headgt lt!-- ..
--gt ltbodygt ltpgtParagraphe 1lt/pgt ltp
class"vert"gtnumero 2lt/pgt ltp class"vert"gtnumero
3lt/pgt ltp id"mix2"gtParagraphe 4lt/pgt ltp
id"mix3" class"vert"gtParagraphe 5lt/pgt lt/bodygt
10
Priorités de CSS
index.php
style.css
ltheadgt ltlink href"style.css" rel"stylesheet"
type"text/css"gt lt/headgt lt!-- .. --gt ltbodygt
ltpgtEnigme 1lt/pgt ltp class"vert"gtEnigme 2lt/pgt
ltp class"vert" id"mix"gtEnigme 3lt/pgt ltp
id"mix"gtEnigme 4lt/pgt lt/bodygt

• p
• color FF0000 / rouge /
• text-align center
• p.vert
• color 00FF00 / vert /
• text-align left
• pmix
• color 0000FF / bleu /

11
Conception de Site Webs Interactifs

• Déroulement
• Pages web statiques (HTML/XHTML)
• Mise en forme avec feuilles de styles (CSS)
• Programmation côté serveur
• Pages web dynamiques (PHP)
• avec connexion à une base de données (MySQL)
• Programmation côté client
• JavaScript
• Référencement Internet (moteur de recherche)

12
Qu'est-ce que le PHP ?

• PHP Personal Home Pages / People Hate Perl /
  Hypertext PreProcessor
• PHP est un langage de programmation interprété
  côté serveur
• Inventé par Rasmus LEDOORF (v1 1994, v2 1996,
  v5 2004)
• Il est dédié au Web traitement des formulaires,
  communication avec des bases de données (souvent
  couplé à MySql)

• Avantages
• Il est simple (pas typé, interprété, )
• Il est gratuit (?)
• Il est fait pour le Web
• Il est TRES répandu

• Inconvénient
• Code difficilement maintenable

13
PHP
14
PHP et MySQL
15
PHP
16
http//fr2.php.net/manual/fr/
17

• lt?php
• echo "Hello World"
• ?gt

18
Remarques

• Extension du fichier doit être .php
• Le navigateur ne comprend que l'HTML
• Le code "php" inclus dans la page HTML est
  transformé par le serveur php
• Le code "php" est invisible dans la page HTML
  affichée car il est interpreté

19
Un exemple pratique Hello World
lthtmlgt ltheadgt lttitlegtMa premiere
pagelt/titlegt lt/headgt ltbodygt lth1gtHello
Worldlt/h1gt lt/bodygt lt/htmlgt
helloworld.htm
lthtmlgt ltheadgt lttitlegtMa premiere
pagelt/titlegt lt/headgt ltbodygt lt?php echo
"lth1gtHello Worldlt/h1gt" ?gt lt/bodygt lt/htmlgt
helloworld.php
20
Ecrire dans le fichier HTML

• echo "hello world"

21
Un exemple pratique remarques

• Si on "éteint" le serveur web (EasyPHP)
• Si on met une extension .html au fichier php

22
Balise

• Les scripts php étant destinés à être utilisés à
  l'intérieur de pages HTML, il faut une balise
  spéciale permettant au "parser / interpréteur"
  php de savoir à quel endroit se trouve le code.

Un code php est toujours compris entre les balise
"lt?" d'une part et "?gt" d'autre part.
... ltbodygt lt?php echo "lth1gtHello
Worldlt/h1gt" ?gt lt/bodygt ...
23
Commentaires

• Comme en C ou en Java
• Tout ce qui se trouve dans un commentaire est
  ignoré par le serveur php

lt?php // commentaire de fin de ligne /
commentaire sur plusieurs lignes / ?gt
24

• echo 'j\'utilise php' // FAUX
• echo "j'utilise php" // CORRECT
• echo "j\'utilise php" // CORRECT

25
Concatenation 1

• lt?    echo   "Salut"." Martin" 
• ?gt 

26
Variables

• php est interprété et faiblement typé.
• Il nest pas nécessaire de déclarer le type d'une
  variable.
• Les identificateurs de variable sont précédés du
  symbole    (dollar).
• Types
• - entier (integer) - réel (double)
• - tableau (array) - objet (object)
• - booléen (boolean) - chaîne de caractères
  (string)

ltbodygt lt?php toto 5 echo
toto ?gt lt/bodygt
27
Variables

• lt?php
• a 0
• nom 'Horst'
• echo a
• ?gt
• lt?php a 0 ?gt
• lt?php nom 'Horst' ?gt
• lt?php echo a ?gt

28

• echo 'ltinput name"foo" value"hello"gt'

29
Concatenation 2

• lt? 
• nom  "Martin"  echo   "Salut ".nom 
• ?gt 

30
Variables

• Portée
• Limitée au bloc dans lequel elle a été crée.
• Une variable créée dans un bloc nest pas connue
  dans les autres.
• Les variables de fonctions ne sont connues que
  dans la fonction.
• Opérateurs
• Par ordre de priorité
• , --, !
• , -, , /,
• , lt, gt, lt, gt, !
• , , and, or

Priorité plus forte
Priorité plus faible
31
Condition

• Permet dexécuter ou non un bloc dinstructions.
• Rmq la condition est une expression booléenne
  (lévaluation de son résultat rend vrai ou faux)

if (condition1) / bloc dinstructions lorsque
condition1 est vraie / else if (condition2)
/ autre bloc dinstructions,
lorsque condition2 est vraie / else /
bloc dinstructions lorsque les conditions
antécédentes sont fausses /
32
Condition SI..SINON

• lt?php
• nombre  512
• if (nombrelt500)           echo nombre."
  est compris entre 0 et 499" else
  if(nombregt500  nombrelt1000) 
     echo nombre." est compris entre 500 et 999"
  else                                 
     echo nombre." est plus grand que 999"
• ?gt

33
Boucle for

• Permet dexécuter plusieurs fois un bloc
  dinstructions donné (nombre ditérations connu)

for (initialisation condition_pour_continuer
modification) / bloc dinstructions lorsque la
condition darrêt nest pas vérifiée /
/ typiquement /for (i0 ilt10 i) /
traitement /
34
Boucle POUR

• lt?phpnombre  5 for(i0 i lt nombre  i
  )     echo "i est égal à ".i. "ltbrgt"
  echo "i est égal à ".i ?gt

35
Boucle while

• Permet dexécuter plusieurs fois un bloc
  dinstructions donné (nombre ditérations
  inconnu)
• Rmq la condition est une expression booléenne
  (lévaluation de son résultat rend vrai ou faux)
• - si vrai le bloc dinstructions est exécuté
• - si faux la boucle nest plus itérée, et
  lexécution continue à la suite de la boucle

while (condition_pour_continuer) / bloc
dinstructions lorsque la condition est
vérifiée /
36
Boucle TANT QUE

• lt?php
• i 1
• while (ilt5)
• echo "Ligne No. "
• echo i
• echo "ltbr /gt"
• i // i i 1
• ?gt

37
Boucle TANT QUE
lt?php i 1 while (ilt5) echo
"Salutltbr/gt" i ?gt

• lt?php
• i 1
• while (ilt5)
• ?gt
• Salutltbrgt
• lt?
• i
• ?gt

38
Passer des paramètres dynamiques

• Par lURL
• méthode _GET
• Par des formulaires HTML
• ? aussi méthode _POST

39
Méthode _GET

• lt?php
• a _GET'param'
• echo a
• ?gt
• URL http//.../index.php?param5

40
Méthode _GET

• URL http//.../index.php?param15param23
• lt?php
• a _GET'param1'
• echo a
• b _GET'param2'
• echo b
• ?gt
• URL http//.../index.php?param15param23

41
Fonction isset()

• lt?php
• if isset(_GET'param1')
• param1 _GET'param1'
• else
• echo "Paramètre non donné"
• param1 1
• // valeur par défaut
• ?gt

42
Boucle TANT QUE

• lt?php
• ...
• i 1
• while (iltparam1)
• echo "Ligne No. "
• echo i
• echo "ltbr /gt"
• i // i i 1
• ?gt

43
Qu'est-ce que le PHP ?

• PHP Personal Home Pages / People Hate Perl /
  Hypertext PreProcessor
• PHP est un langage de programmation interprété
  côté serveur
• Inventé par Rasmus LEDOORF (v1 1994, v2 1996,
  v5 2004)
• Il est dédié au Web traitement des formulaires,
  communication avec des bases de données (souvent
  couplé à MySql)

• Avantages
• Il est simple (pas typé, interprété, )
• Il est gratuit (?)
• Il est fait pour le Web
• Il est TRES répandu

• Inconvénient
• Code difficilement maintenable

44
PHP et MySQL
45
PHP
46
Méthode _GET

• URL http//.../index.php?nomLisa
• lt?php
• nom _GET'nom'
• echo "Bonjour ".nom
• ?gt

47
Méthode _GETplusieurs paramètres

• lt?php
• a _GET'prenom'
• echo a
• ?gt
• URL http//.../enregistrer.php?prenomlisanomR
  ousseldatenaissance20-10-99

48
PHP et MySQL
lth1gt lt?php nom _GET'nom' echo "Bonjour
".nom ?gt lt/h1gt
49
PHP et MySQL
Demande de index.php?nomLisa
lth1gt lt?php nom _GET'nom' echo "Bonjour
".nom ?gt lt/h1gt
50
PHP et MySQL
Demande de index.php?nomLisa
Retour de la page XHTML
lth1gt lt?php nom _GET'nom' echo "Bonjour
".nom ?gt lt/h1gt
51
PHP et MySQL
Demande de index.php?nomLisa
Retour de la page XHTML
lth1gt lt?php nom _GET'nom' echo "Bonjour
".nom ?gt lt/h1gt
lth1gt Bonjour Lisa lt/h1gt
52
Remarques

• Extension du fichier doit être .php
• Le navigateur ne comprend que l'HTML
• Le code "php" inclus dans la page HTML est
  transformé par le serveur php
• Le code "php" est invisible dans la page HTML
  affichée car il est interpreté