conception de site webs dynamiques cours 6 patrick reuter [email protected]

Conception de Site Webs dynamiques

Cours 6

Patrick Reuter

[email protected]

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)

Format d’un document HTML

• Tout document HTML commence par la balise <html> et finit par la balise </html>

• Tout document HTML contient

1. Un en-tête, délimité par les balises <head> et </head>

2. Un corps, délimité par les balises <body> et </body>

<html><head><title>ma premiere page</title></head><body><h1>Ma Page</h1><p>ma première page web</p> </body></html>

Priorités de CSS

body { background-color : #0099CC;color : #ffffff;

}

<html>

<head>

<title>ma premiere page</title>

</head>

<body>

<h1>Ma Page</h1>

<p>ma première page web</p>

</body>

</html>

index.phpstyle.css

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

PHP et MySQL

Méthode _GET

URL : http://.../index.php?nom=Lisa

<?php

$nom = $_GET['nom'];

echo "Bonjour ".$nom;

?>

Méthode _GETplusieurs paramètres

<?php

$a = $_GET['prenom']; echo $a;

?>

URL : http://.../enregistrer.php?prenom=lisa&nom=Roussel&datenaissance=20-10-99

PHP et MySQL

<h1>

<?php



?>

</h1>

PHP et MySQL

Demande de index.php?nom=Lisa

<h1>

<?php



?>

</h1>

PHP et MySQL


Retour de la page XHTML<h1>

<?php



?>

</h1>

PHP et MySQL


Retour de la page XHTML

<h1>

Bonjour Lisa

</h1>

<h1>

<?php



?>

</h1>

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é

Formulaires HTML

<form action="enregistrer.php" method="get">

<input type="text" name="prenom">

<input type="checkbox" name="box" value="1">

<select name="mois"><option value="1">Janvier</option><option value="2">Février</option><option value="3">Mars</option><option value="4">Avril</option>

</select>

<input type="submit" name="submitButtonName"value="-- Envoyer --">

</form>

Fichier form.php

Formulaires

• Les formulaires– Définissent un ensemble de champs de saisie– Permettent de soumettre l’ensemble des valeurs des champs,

en une fois, au serveur• Le serveur

– Traite ces informations au moyen d’un script php (par exemple)– Génère en retour un flot HTML qui peut encore être un

formulaire (ré-essai ou procédure suivante)

Exemple

<form action="monscript.php" method="post" id="calculette"> <p> Somme en francs: <input name="francs" type="text" /> </p> <p> Valeur en euros: <input name="euros" type="text" /> </p> <p> <input type="submit" name="valider" value="Calculer" /> </p></form>

Tables HTML

<table><tr>

<td>ligne 2, colonne 1</td><td>ligne 2, colonne 2</td><td>ligne 2, colonne 3</td>

</tr><tr>


</tr></table>

Tables HTML

<table><!– OPTIONNELLEMENT DES EN-TETES DE COLONNES AVEC TH --><tr>

<th>ligne 1, colonne 1 (en-tête)</th><th>ligne 1, colonne 2 (en-tête)</th> <th>ligne 1, colonne 3 (en-tête)</th>

</tr>

<tr> <td>ligne 2, colonne 1</td><td>ligne 2, colonne 2</td><td>ligne 2, colonne 3</td>

</tr><tr>


</tr></table>

conception de site webs dynamiques cours 6 patrick reuter [email protected]

Documents