Conception de Site Webs Interactifs Cours 4

1
Conception de Site Webs InteractifsCours 4

• Patrick Reuter
• preuter_at_labri.fr

2
Ingrédients

• Modèle OSI modèle TCP/IP
• Architectures client-serveur
• HTML
• CSS
• PHP
• MySQL
• JavaScript

3
Quelques balises

• Balise Effet Résultat
• ltbgttextelt/bgt Texte en gras Résultat
• ltigttextelt/igt Texte en italique Résultat
• ltugttextelt/ugt Texte souligné Résultat
• ltimg src"lien.jpg"gt Insère une image
• lta href"lien.htm"gttextelt/agt Insère un lien
  hypertexte
• ltfontgttextelt/fontgt Font agit sur le texte (pas
  seul)
• ltfont color"cc0000"gttextelt/fontgt Couleur
  Résultat
• ltfont size"2"gttextelt/fontgt Taille du texte
  Résultat

4
HTML Hello World

• ltHTMLgt
• ltHEADgt
• ltTITLEgtMon premier document HTMLlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltPgtBonjour tout le monde!lt/Pgt lt/BODYgt
• lt/HTMLgt

5
Plus dinfos

• http//fr.wikibooks.org/wiki/Programmation_HTML
• http//www.w3.org/MarkUp/Guide/

6
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
• 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

7
CSS

• Les avantages des feuilles de style sont
  multiples 
• La structure du document et la présentation sont
  gérés dans des fichiers séparés.
• 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.
• Dans le cas d'un site Internet, la présentation
  est uniformisée  Les documents (pages  html )
  font référence à la (aux) même(s) feuille(s) de
  styles. Cette caractéristique permet de plus un
  relookage rapide.
• Un même document peut donner le choix entre
  plusieurs feuilles de style (impression ou
  lecture à l'écran par exemple). Certains
  navigateurs web permettent d'accéder facilement à
  un choix de feuilles de style.
• Le code HTML est considérablement réduit en
  taille et en complexité, puisqu'il ne contient
  plus de balises de présentation.
• http//www.w3.org/MarkUp/Guide/Style

8
CSS Exemple

• ltstyle type"text/css"gt
• p font-size 110 font-family Helvetica,
  sans-serif
• h1 color white background red
• lt/stylegt

9
Insertion de CSS

• Fichier style.css
• p font-size 110 font-family Helvetica,
  sans-serif
• h1 color white background red
• Fichier HTML/PHP
• ltlink rel"stylesheet" href"style.css"gt

10
Ingrédients

• Modèle OSI modèle TCP/IP
• Architectures client-serveur
• HTML
• CSS
• PHP
• MySQL
• JavaScript

11
PHP
12
PHP et MySQL
13
PHP
14
http//www.phpdebutant.org/article118.php http//
fr2.php.net/manual/fr/
15

• lt?php
• echo Hello World
• ?gt

16
Variables

• lt?php
• a 0
• nom 'Horst'
• echo a
• print(a)
• ?gt
• lt?php a 0 ?gt
• lt?php nom 'Horst' ?gt
• lt?php echo a ?gt
• lt?php print(a) ?gt

17
Variables

• lt?php
• a 0
• nom 'Horst'
• echo a
• print(a)
• ?gt

18

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

19

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

20

• echo 'Microoft' // résulte en Microoft
• echo "Microoft" // résulte en Micro Contenu
  der Variable oft
• echo "Micro\oft" // résulte en Microoft
• echo 'c\temp' // résulte en c\temp
• echo "c\temp" // résulte en c Tab emp
• echo "c\\temp" // résulte en c\temp
• echo 'c\\temp' // résulte en c\temp
• echo 'Pas de apostrophe \x27' // résulte en
  Pas de apostrophe \x27
• echo "Un apostrophe \x27" // résulte en Un
  apostrophe '
• echo 'Un apostrophe \'' // résulte en Un
  apostrophe '

21
Concatenation

• lt?  nom  "Martin"  echo   " Mon nom est
  now   " 
• ?gt 

22
Boucle TANT QUE

• lt?php
• i 1
• while (ilt6)
• echo Affichageltbrgt
• i
• ?gt

23
Boucle TANT QUE

• lt?php
• i 1
• while (ilt6)
• ?gt
• ltbrgt
• lt?
• ?gt

24
Boucle POUR

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

25
Condition SI..SINON

• lt?php
• chiffre  512
• if (chiffrelt500)           echo chiffre.'
  est compris entre 0 et 499' else
  if(chiffregt500  chiffrelt1000) 
     echo chiffre.' est compris entre 500 et
  999' else                                 
     echo chiffre.' est plus grand que 999'
  
• ?gt

26
Passer des paramètres dynamiques

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

27
Méthode _GET

• lt?php
• a _GETparam
• echo a
• ?gt
• URL http//.../index.php?param5

28
Méthode _GET

• lt?php
• a _GETparam1
• echo a
• b _GETparam2
• echo b
• ?gt
• URL http//.../index.php?param15param23

29
Fonction isset()

• lt?php
• if isset(_GETparam1)
• echo _GETparam1
• else
• echo Paramètre non donné
• ?gt

30
Formulaires HTML

• ltform action"resultat.php" method"post"gt
• ltinput type"checkbox" name"box" value"1"gt
• ltinput type"checkbox" name"box" value"2"
  checkedgt
• ltinput type"submit" name"submitButtonName"value
  "-- Envoyer --"gt
• lt/formgt

31
Méthode _POST

• lt?php
• a _POSTbox
• echo a
• ?gt

32
(No Transcript)