M2202 — CM #1

Algorithmique et développement web S2


Présentation du module

Nom
M2202 : DĂ©veloppement web S2
Sur AMeTICE
[18]-S2-M2202 : DĂ©veloppement web
Enseignants
  • Zeineb El-Khalfi
  • Aldo Gonzalez-Lorenzo
  • Ricardo Uribe-Lobello
Objectif
Créer des sites web dynamiques, donc :
  • apprendre Ă  programmer en JavaScript
  • apprendre Ă  programmer en PHP
  • ne pas avoir honte de les mettre sur votre CV
SĂ©ances
CM TD TP
Zeineb EK 1 2 2
Aldo GL 3 3
Ricardo UL 4
Évaluation
Exercices (30%), projet (40%), examen (30%)
Règles
  • Prendre de notes en cours
  • Ne pas parler en CM
  • Pas de smartphone ni rĂ©seaux sociaux
  • PonctualitĂ©
Règles (pour moi)
  • Joignable par mail, forum du cours, mon bureau
  • RĂ©pondre Ă  vos questions

Web dynamique

Une page web dynamique : oui.sncf

Internet

Internet : grand réseau d'ordinateurs qui communiquent entre eux. Plusieurs services : e-mail, FTP, WWW. Le WWW concerne uniquement les pages web.

Deux types d'ordinateurs dans ce réseau : serveurs (dans un data center) et clients (chez vous).

Front-end / back-end

Deux catégories dans le développement web.

Front-end Back-end
coté client (utilisateur) coté serveur (hébergeur)
Afficher le contenu Générer le contenu
HTML, CSS et JavaScript PHP, Java, Python, Ruby, C#, etc.

Web statique / dynamique

  • Site web statique : pages web gĂ©nĂ©rĂ©es « Ă  la main Â» ; pas d'interaction
  • Site web dynamique : le serveur gĂ©nère la page avec un programme (invisible pour le client) ; l'utilisateur interagit avec le site web

Brainstorming : comment peut-on interagir avec un site web dynamique ?

  1. Consulter les horaires sur oui.sncf
  2. Ajouter un commentaire sur une vidéo de youtube.com
  3. Modifier un article sur fr.wikipedia.org
  4. blablacar.fr nous envoie un e-mail de confirmation
  5. ...

JavaScript / PHP

Langages de programmation, mais

JavaScript PHP
front-end back-end
interaction sans recharger la page
bases de données, cookies

Normalement, vous saurez toujours quel langage utiliser

PHP

  • PHP = « PHP: Hypertext Preprocessor » (geeks...)
  • Dernière version : PHP 7.3.1 (10 janvier 2019)
  • Sorti en 1995 (PHP 1.0)
  • Très critiquĂ© car peu Ă©lĂ©gant, notation incohĂ©rente, plein d'exceptions.
    Mais très utilisé : WordPress, Wikipédia, Facebook (avant).
  • Alternatives : Java, Python, Ruby, C#, etc.

Comment ça marche

  1. On Ă©crit le code PHP dans un fichier avec l'extension php. Le fichier peut contenir aussi du code HTML.
  2. Le serveur HTTP interprète ce code pour générer uniquement du code HTML.
  3. Le navigateur web reçoit ce code HTML pour afficher la page web.

Plus de dĂ©tails en TP. Pour essayer en ligne : wtools.io !

DĂ©buter en PHP

Exemple minimal

<?php
echo 'Hello World'; // affiche le texte 'Hello World'
?>

Essayez sur wtools.io

Balises PHP

Le code PHP est Ă©crit entre les balises <?php et ?>

<?php
echo 'Hello World'; // affiche le texte 'Hello World'
?>

Ce qui est dehors s'affiche tel quel.

Si le fichier finit avec une balise PHP fermante, on peut la supprimer.

Commentaires

Commentaire : bout de texte qui est ignoré.

<?php
echo 'Today it is ' . date('l'); // affiche le jour de la semaine
?>

Pourquoi ?

  • ajouter des explications sur le code
  • enlever temporairement un partie du code sans la supprimer

Deux types de commentaires : //... et /* ... */

<?php
echo 'Hello World<br />'; // le reste de cette ligne est un commentaire

/* tout ce
texte est un
commentaire */

echo /* mĂŞme ici */ 'Rehello (sic)';
?>

Le point virgule

Chaque instruction (ligne de code) doit finir avec un point-virgule (;)

<?php
echo 'Hello World'; // affiche le texte 'Hello World'
?>

On peut supprimer le dernier point-virgule juste avant une balise PHP fermante.

echo

echo affiche une chaîne de caractères (un texte)

<?php
echo 'Hello World'; // affiche le texte 'Hello World'
?>

On peut aussi utiliser print

Variables et types

Variables

Variable : unité d'information (nombre, texte, etc) stockée temporairement en mémoire (pas un fichier)

Elle existe pendant la génération de la page PHP.

<?php
$prenom = 'Aldo'; // cette variable contient la chaîne de caractères 'Aldo'
$age = 39;        // cette variable contient le nombre entier 39

echo $prenom . ' a ' . $age . ' ans'; // affiche 'Aldo a 39 ans'
?>

Nom et valeur

Une variable a un nom et une valeur

<?php
// nom :   $poste
// valeur: 'Maître de conférence'
$poste = 'Maître de conférence';
echo $poste; // affiche la valeur de $poste
?>

Le nom d'une variable doit commencer par le symbole dollar ($), suivi des lettres (a...z, A...Z), chiffres (0...9) et tirets bas (_). Pas de chiffre juste après le $

Question surprise

Donnez un exemple de nom de variable invalide

On assigne une valeur Ă  une variable avec le symbole =

On initialise une variable en lui affectant une valeur. Souvent, une expression littérale (literal)

<?php
// le nom de la variable est $prenom
// 'Aldo' est une expression littérale
$prenom = 'Aldo'; // la variable $prenom prend la valeur 'Aldo'
?>

Types de variables

  • string chaĂ®ne de caractères, texte : 'Hello world'
  • integer nombre entier : 2019
  • float nombre dĂ©cimal : 1.618
  • boolean boolĂ©en, avec seulement deux valeurs possibles : true ou false

Aussi : null (pas de type), object et array (tableau)

Le type d'une variable est implicite : il dépend de sa valeur

<?php
$module = 'm2202';    // variable de type string
$note_moyenne = 13.79 // type float
$nb_inscrits = 50;    // type integer
$fini = false;        // type boolean
?>

On obtient le type d'une variable avec la fonction gettype()

Opérateurs arithmétiques

Les nombres (integer et float) ont les opĂ©rations classiques : + (addition), - (soustraction), * (multiplication) et / (division)

En plus : % (modulo), ** (exponentielle)

<?php
echo (2 + 3.6)*5 - 3/2; // affiche 26.5
echo '<br />';
echo 23%4;              // affiche 3, car 22 = 5*4 + 3
echo '<br />';
echo 2**6;              // affiche 32
?>

Plus d'opérateurs ici. Par exemple : ++, +=, *=, etc

Opérateurs de comparaison

Pour comparer deux nombres : == (égal), != (différent), < (plus petit que), <= (inférieur ou égal), > (plus grand que), >= (supérieur ou égal)

<?php
$bool1 = (2 == 3.5); // false
$bool2 = (2 != 3.5); // true
$bool3 = (3 < 3);    // false
$bool4 = (3 <= 3);   // true
?>

Erreur fréquente : utiliser = (affectation) au lieu de ==

Opérateurs logiques

Trois opérateurs logiques : && (et), || (ou), ! (non)

<?php
$bool1 = false && true; // false
$bool2 = false || true; // true
$bool3 = ! $bool2;      // false
?>

Question surprise

Quelle est la valeur de la variable $var3 ?

<?php
$var1 = (3 < 2);
$var2 = (2 != 2);
$var3 = ($var1 || ! $var2);
?>

Strings

Délimités par des apostrophes (')

<?php
echo '<p>Un paragraphe</p>';
?>

On peut aussi utiliser les guillemets (")

Pour utiliser le caractère apostrophe (') dans un string, il faut l'échapper avec l'antislash (\)

<?php
echo '<p>J\'adore</p>';
?>

Opérateur pour les strings : .(assemblage, concatenation)

<?php
$str1 = '<p>J\'adore ';
$str2 = 'dormir </p>';
$str3 = $str1 . $str2;
echo $str3; // affiche '<p>J\'adore dormir </p>
?>

Constantes

Constante : variable dont la valeur ne change jamais

<?php
define('PI', 3.1415); // la constante PI vaut 3.1415
?>
  1. Pas de $ dans le nom
  2. Nom tout en majuscules

On peut aussi Ă©crire const PI = 3.1415;

Structures de contrĂ´le

Normalement, un programme ne fait pas toujours la même chose. Son comportement dépend de son interaction avec l'utilisateur (cliquer sur un bouton, remplir une information) et de son environnement (date, données enregistrées).

Pour cela, un langage de programmation propose des structures de contrĂ´le : conditions et boucles.

If

Une condition, un bloc d'instructions (entre accolades)

<?php
if ($age < 18) {
  echo '<p>Vous n\'avez pas accès à ce contenu.</p>';
}
?>

S'il n'y a qu'une seule instruction dans le bloc, on peut supprimer les accolades ({, })

Else

Deux blocs d'instructions, un seul est exécuté

<?php
if ($age > 18) {
  echo '<p>Identifiez-vous pour voir plus de contenu.</p>';
} else {
  echo '<p>Vous n\'avez pas accès à ce contenu.</p>';
}
?>

Elseif

Plusieurs blocs d'instructions, plusieurs conditions

<?php
if ($age > 18) {
  echo '<p>Identifiez-vous pour voir plus de contenu.</p>';
} elseif ($age > 10) {
  echo '<p>Vous n\'avez pas accès à ce contenu.</p>';
} else {
  echo '<p>On vient d\'envoyer un SMS Ă  tes parents.</p>';
}
?>

Switch

Plusieurs blocs d'instructions, plusieurs tests d'égalité

<?php
switch ($i) { // switch
  case 0:     // case ... :
    echo 'i Ă©gal 0';
    break;    // break
  case 1:
    echo 'i Ă©gal 1';
    break;
  case 2:
    echo 'i Ă©gal 2';
    break;
  default:    // default
    echo 'i plus grand que 2';
}
?>

While

Boucle avec condition au début

<?php
$i = 1;
while ($i <= 10) { // while (...)
  echo '<p>i vaut ' . $i . '</p>';
  $i = $i + 1;
}
?>

Do-while

Boucle avec condition à la fin. Bloc exécuté au moins une fois

<?php
$i = 1;
do { // do
  echo '<p>i vaut ' . $i . '</p>';
  $i = $i + 1;
} while ($i <= 10); // while (...); Attention au point-virgule !
?>

For

Nombre prédéfini d'itérations (répétitions de la boucle)

<?php
// for (valeur initial; condition; modification)
for ($i = 1; $i <= 10; $i++) {
  echo '<p>i vaut ' . $i . '</p>';
}
?>

$i++ est Ă©gal Ă  $i = $i+1. Il existe aussi $i--

Conclusion

  • PHP est un langage de programmation pour crĂ©er des sites web dynamiques.
  • Il y a diffĂ©rents types de variables, chacun avec ces opĂ©rateurs.
  • On utilise les conditions pour faire des branchements et des boucles.

Ă€ faire

Révisez ce cours avant la prochaine séance de TD