View
113
Download
1
Category
Preview:
Citation preview
Conception de Site Webs dynamiques
Cours 6
Patrick Reuter
preuter@labri.fr
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>
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)
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
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)
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
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
$nom = $_GET['nom'];
echo "Bonjour ".$nom;
?>
</h1>
PHP et MySQL
Demande de index.php?nom=Lisa
<h1>
<?php
$nom = $_GET['nom'];
echo "Bonjour ".$nom;
?>
</h1>
PHP et MySQL
Demande de index.php?nom=Lisa
Retour de la page XHTML<h1>
<?php
$nom = $_GET['nom'];
echo "Bonjour ".$nom;
?>
</h1>
PHP et MySQL
Demande de index.php?nom=Lisa
Retour de la page XHTML
<h1>
Bonjour Lisa
</h1>
<h1>
<?php
$nom = $_GET['nom'];
echo "Bonjour ".$nom;
?>
</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>
<td>ligne 3, colonne 1</td><td>ligne 3, colonne 2</td><td>ligne 3, colonne 3</td>
</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>
<td>ligne 3, colonne 1</td><td>ligne 3, colonne 2</td><td>ligne 3, colonne 3</td>
</tr></table>
Recommended