Légende. Conception de Sites Web dynamiques Résumé. Programme. Fonctionnement, p.ex. Règles du jeu 11/03/2015. Cours 5+6

Dimension: px

Commencer à balayer dès la page:

Download "Légende. Conception de Sites Web dynamiques 2015. Résumé. Programme. Fonctionnement, p.ex. Règles du jeu 11/03/2015. Cours 5+6"

Emma Paul
il y a 8 ans
Total affichages :

1 Légende Conception de Sites Web dynamiques 2015 Cours 5+6 Patrick Reuter Titre de la page h1, h2, h3 color: red; $a = 3; SELECT * FROM commentaires; HTML CSS PHP MySQL Programme Résumé Vos sites préférées Php.net Openclassroom Conversion python ß > PHP alsacreation Introduction en PHP Les formulaires HTML5 Détails : Séparation Structure / mise en forme Liens absolu/relatifs 3 modes du validateur Images : PNG/GIF/JPEG JPG : Livedemo Tableau de conversion Vos choix UE Pourquoi la conception web est devenu si important? PHP Applications Web SaaS Intranet FrontOffice/BackOffice Efficacité de JavaScript Portabilité Règles du jeu Fonctionnement, p.ex. Utilisation ordinateurs/mobiles/tablettes Contrôle continu : Projet de sites web (2-3 personnes) à Contrôle continu 50% Feuilles TD +- 2points à Examen terminal 50% 1 page écrite à la main recto-verso autorisée Cheatsheets autorisés 2 nde session : Examen final 1h30 sur papier 1

2 Conception de Site Webs Interactifs Conception de Site Webs Interactifs Déroulement Pages web statiques (HTML/XHTML) Mise en forme avec feuilles de styles (CSS) Pages web dynamiques (PHP) avec connexion à une base de données (MySQL) Programmation côté client JavaScript Référencement Internet (moteur de recherche) MVC : Modèle Vue - Controller View Controller Model Format d un document HTML Tout document HTML commence par la balise <html> et finit par la balise Tout document HTML contient 1. Un en-tête, délimité par les balises et 2. Un corps, délimité par les balises et <!DOCTYPE html> <html lang="fr"> <meta charset="utf-8" /> <title>ma premiere page</title> Ma page ma première page. Conception de Site Webs Interactifs Déroulement Pages web statiques (HTML/XHTML) Mise en forme avec feuilles de styles (CSS) Pages web dynamiques (PHP) avec connexion à une base de données (MySQL) Programmation côté client JavaScript Référencement Internet (moteur de recherche) Automatisation HTML Exemple : Une punition genre Exemple HTML <<!DOCTYPE html> <html lang="fr"> <title>votre titre</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" type="text/css" media="screen" href="style.css" title="normal" /> <div id="tableau"> </div> 2

3 Exemple CSS HTML #tableau background-image: url(bart.jpg); background-repeat: no-repeat; p color: white; Conception de Site Webs Interactifs Déroulement Pages web statiques (HTML/XHTML) Mise en forme avec feuilles de styles (CSS) Pages web dynamiques (PHP) avec connexion à une base de données (MySQL) Programmation côté client JavaScript Référencement Internet (moteur de recherche) Exemple : Une punition genre Automatisation Exemple HTML <!DOCTYPE html> <html lang="fr"> <title>ma premiere page</title> <meta http-equiv="content-type" content="text/html" /> En PHP <!DOCTYPE html> <html lang="fr"> <title>ma premiere page</title> <meta http-equiv="content-type" content="text/html" /> = 1; = 1; while while ( ( <= <= 10) 10) echo echo "j'aime "j'aime les les lundi lundi matins"..""; matins "; = = + 1; + 1; Exercice : Grille couleur de fond alternant 3

4 Qu'est-ce que le PHP? PHP et MySQL 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 PHP Premier exemple Remarques echo "Hello World"; 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é 4

5 Un exemple pratique : Hello World <html> <title>ma premiere page</title> Hello World helloworld.htm <html> <title>ma premiere page</title> echo "Hello World"; Un exemple pratique : remarques Si on "éteint" le serveur web (EasyPHP) Si on met une extension.html au fichier php helloworld.php Balise Commentaires 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 "" d'une part et "" d'autre part. [...] echo "Hello World"; [...] Comme en C ou en Java // commentaire de fin de ligne /* commentaire sur plusieurs lignes */ Tout ce qui se trouve dans un commentaire est ignoré par le serveur php Ecrire dans le fichier HTML Concatenation 1 echo "hello world"; echo "Salut"." Martin"; 5

6 Variables php est interprété et faiblement typé. Il n est pas nécessaire de déclarer le type d'une variable. Les identificateurs de variable sont précédés du symbole «$» (dollar). $a= 5; Types : - entier (integer) - réel (double) - tableau (array) - objet (object) - booléen (boolean) - chaîne de caractères (string) $a = 0; $nom = "Lisa"; Variables $a = 0; $nom = "Lisa"; Concatenation 2 Quotes $nom = "Martin"; echo "Salut ".$nom; echo "<a href="index.php">accueil</a>"; echo '<a href="index.php">accueil</a>'; // equivalent à : echo "<a href=\"index.php\">accueil</a>"; Variables Priorités : Limitée au bloc dans lequel elle a été crée. Une variable créée dans un bloc n est pas connue dans les autres. Les variables de fonctions ne sont connues que dans la fonction. Opérateurs Par ordre de priorité ++, --,! +, -, *, /, % ==, <, >, <=, >=,!= &&,, and, or = Exemple if ($a==$b && $a+1 == $c) Priorité plus forte Priorité plus faible Condition Permet d exécuter ou non un bloc d instructions. if (condition1) /* bloc d instructions lorsque condition1 est vraie */ else if (condition2) /* autre bloc d instructions, lorsque condition2 est vraie */ else /* bloc d instructions lorsque les conditions antécédentes sont fausses */ Rmq : la condition est une expression booléenne (l évaluation de son résultat rend vrai ou faux) 6

7 Condition SI..SINON Boucle while $nombre = 512; if ($nombre<500) echo $nombre." est compris entre 0 et 499"; else if($nombre>=500 && $nombre<1000) echo $nombre." est compris entre 500 et 999"; else echo $nombre." est plus grand que 999"; Permet d exécuter plusieurs fois un bloc d instructions donné (nombre d itérations inconnu) while (condition_pour_continuer) /* bloc d instructions lorsque la condition est vérifiée */ Rmq : la condition est une expression booléenne (l évaluation de son résultat rend vrai ou faux) - si vrai : le bloc d instructions est exécuté - si faux : la boucle n est plus itérée, et l exécution continue à la suite de la boucle Boucle TANT QUE Boucle TANT QUE // <img src="images/1.jpg" /> = 1; while (<=5) echo "L'affichage de la Ligne No. "; echo ; echo "<img src=\"images/"..".jpg\" />"; //echo '<img src="images/'..'.jpg" />'; //echo "<img src=\"images/.jpg\" />"; ++; // = + 1; = 1; while (<=5) Ligne No. echo ; <img src="images/ echo ;.jpg" alt="image de neige" width="100" height="100"/> = + 1; Changement de contextes = 1; while (<=5) salut =+1; = 1; while (<=5) echo "salut "; =+1; Passer des paramètres dynamiques Par l URL : à méthode $_GET Par des formulaires HTML à méthode $_GET à aussi méthode $_POST 7

8 Méthode _GET Fonction isset() $a = $_GET['param']; URL : param=5&n=3 if isset($_get['param']) $param = $_GET['param']; else $param = 1; // valeur par défaut Fonction isset() $param = 1; // valeur par défaut if isset($_get['param']) $param = $_GET['param']; Méthode _GET Plusieurs paramètres URL : $a = $_GET['param1']; $b = $_GET['param2']; echo $b; URL : Méthode _GET Client : Exemple URL : Serveur: 8

9 Demande de index.php?nom=lisa Demande de index.php?nom=lisa Demande de index.php?nom=lisa Retour de la page XHTML Bonjour Lisa Retour de la page HTML Méthode _GET plusieurs paramètres Remarques $a = $_GET['prenom']; URL : prenom=lisa&nom=simpson&datenaissance= 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é 9

Documents pareils

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations