R213 – CM #1

Présentation du module

Nom

R213 : Développement web S2

Sur AMeTICE

[21-22]-S2 - R213 Développement web

Enseignants

• Aldo Gonzalez-Lorenzo
• Ricardo Uribe Lobello

Objectif

Créer des sites web dynamiques, donc :

• comprendre le fonctionnement d'un site web interactif
• apprendre à programmer en PHP
• affronter l'informatique à main nue

Séances

	CM	TD	TP
Aldo GL	3	1	5
Ricardo UL			2

Évaluation

Examen (70%), TP noté (30%), exercices (3 points de bonus dans l'examen)

Règles

• Prendre des notes en cours
• Ne pas parler en CM
• Pas de smartphone ni réseaux sociaux
• Ponctualité
• Covid-19 : masque du nez au menton

Règles (pour moi)

• Joignable par mail, Zoom, 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.

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. ...

PHP

• PHP = « PHP: Hypertext Preprocessor » (geeks...)
• Dernière version : PHP 8.1.1 (16 décembre 2021)
• 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 dans un fichier)

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

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

echo $prenom . ' a ' . $age . ' ans'; // affiche 'Camille a 22 ans'
?>

Nom et valeur

Une variable a un nom et une valeur

<?php
// nom :    $site
// valeur : 'Arles'
$site = 'Arles';
echo $site; // affiche la valeur de $site
?>

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 $

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 : 2021
• 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**5;              // affiche 32
?>

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

Question surprise

Ce code est-il valide ?

<?php
$prix = 12;
$prix = $prix + 10;
echo $prix;
?>

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)

Ils renvoient une valeur booléenne : true ou false.

<?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;

Question surprise

Ce code est-il valide ?

<?php
$nom = Dupont;
$note = 13,5;
$réussit = $true;
?>

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>';
}
?>

Indentez (décalez à droite) toujours le code qui se trouve dans le bloc d'instructions.

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>';
}
?>

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--

Ces trois boucles font la même chose : répéter une partie du code plusieurs fois.

À chaque fois, utilisez le type de boucle qui vous est le plus facile.

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.

Ressources

• php.net [documentation]
• OpenClassrooms : Concevez votre site web avec PHP et MySQL [Cours]
• Grafikart.fr : Apprendre PHP [YouTube]
• PrimFX : Tutos PHP [YouTube]