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 Un en-tête, délimité par les balises <head> et </head> 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>
Exemple <html> <head> <title>ma premiere page</title> </head> <body bgcolor="#0099CC" text="#FFFFFF"> <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 <html> <head> style.css index.php <html> <head> <title>ma premiere page</title> </head> <body> <h1>Ma Page</h1> <p>ma première page web</p> </body> </html> body { background-color : #0099CC; color : #ffffff; }
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 _GET plusieurs 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 $nom = $_GET['nom']; echo "Bonjour ".$nom; ?> </h1>
PHP et MySQL Demande de index.php?nom=Lisa Retour de la page XHTML $nom = $_GET['nom']; echo "Bonjour ".$nom; ?> </h1> <h1> Bonjour Lisa </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"> Fichier form.php <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>
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> <input type="submit" name="valider" value="Calculer" /> </form>
Tables HTML <table> <tr> <td>ligne 2, colonne 1</td> <td>ligne 2, colonne 2</td> <td>ligne 2, colonne 3</td> </tr> <td>ligne 3, colonne 1</td> <td>ligne 3, colonne 2</td> <td>ligne 3, colonne 3</td> </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> <td>ligne 2, colonne 1</td> <td>ligne 2, colonne 2</td> <td>ligne 2, colonne 3</td> <td>ligne 3, colonne 1</td> <td>ligne 3, colonne 2</td> <td>ligne 3, colonne 3</td> </table>