Cours 6 - introduction PHP

name: inverse
layout: true
class: center, middle, inverse
---

# Developpement Web - CM 6
## Inès de Courchelle

## 2022-2023

![image](../img/CY-tech.png)

---
layout: false

# PHP
## Définition
- **H**ypertext **P**reprocessor
- Interprété par un serveur PHP (Apache, IIS)
- Date de création : 1990 par Rasmus Lerdorf

## Objectifs
- Réaliser des traitements (fonctions, boucles, insertions...)
- Générer dynamiquement du contenu HTML, CSS, Javascript
- Factoriser le code HTML

---
# PHP
## Le fichier PHP
<img src="img/phpFile.png" width=88/>

## Où on se trouve ?
<img src="img/coteServeur.png" width=350/>

---
# Comment on en fait ?
## Pas comme avant en tout cas
#### Démonstration
<img src="https://c.tenor.com/47CdzeuFFLIAAAAM/settings-machines.gif" width="200"/>

## Mais comment ?
Il nous faut un environnement d'exécution

---
# Plusieurs solutions
## À l'école
#### solution 1 : utilisation php cli
1. Ouvrir un terminal
2. Se placer dans le répertoire où on a enregistré nos fichiers php
3. Exécuter la commande :
```shell
php -S localhost:8080
```
4. Ouvrir un navigateur web à l'adresse : http://localhost:8080/monFic.php

#### solution 2 : utilisation de webetu
1. Créer un répertoire appelé **public_html** dans son répertoire ~
2. Vérifier les droits (exécution et lecture)
3. Ajouter les fichier php à l'intérieur
4. Ouvrir un navigateur web à l'adresse : http://webetu.pau.eisti.fr/~tonIdentifiant/monFic.php

---
# Plusieurs solutions
## Chez moi
- solution 1 : Installation de PHP cli (aussi)
- solution 2 : Installation d'un serveur wamp, mamp ...

## Quelques tutos
- [Openclassroom](https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql/4237816-preparez-votre-environnement-de-travail) => Windows, Mac, Linux
- [doc Ubuntu](https://doc.ubuntu-fr.org/lamp) => UBUNTU

---
# Éléments de langage
## Les bases
- Orienté objet
- Interprété
- Sensible à la casse
- Inspiré de C++
- NON TYPÉ !!
- Insertion par balise <?php ... ?>
- Fin d'une instruction : ne pas oublier le ;

---
# Éléments de langage
## Mon premier programme
```html
<?php
   $nom = "Harry";
   $age = 35;
   echo "L'âge de $nom est: $age ans ";
   echo 'Quoi ?'.$age .' ans !! '.$nom.' est si vieux que ça ?!';
?>
```
## Remarques
- un fichier php possède l'extension .php
- Le programme php doit être encadré par les balises "<?php ?>"

---
# Éléments de langage
## Les variables
- Une variable en php commence toujours par un $
- Il n'y a pas besoin de type
- Il faut connaître le type
- Pour concatener une chaîne de caractères il faut utiliser le .

```php
<?php
   $nom = "Harry";
   $age = 35;
   echo "L'âge de $nom est: $age ans ";
   echo 'Quoi ?'.$age .' ans !! '.$nom.' est si vieux que ça ?!';
?>
```
---
# La démonstration
## Ça marche !
#### Démonstration
<img src="https://c.tenor.com/47CdzeuFFLIAAAAM/settings-machines.gif" width="200"/>

#### VAR
<center>
<video src="videos/exemple1.mp4" width="200" height="150" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# La démonstration
## Ça marche pô !
#### Démonstration
<img src="https://c.tenor.com/47CdzeuFFLIAAAAM/settings-machines.gif" width="200"/>

## Il faut lire les erreurs dans la console

<center>
<video src="videos/exemple2.mp4" width="200" height="150" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Éléments de langage
## Les opérateurs
| appelation                  | symbole     |
| --                          | ---         |
| Opérateurs Mathématiques    | +, ...      |
| Opérateurs de comparaisons  | !=, ==, ... |
| Opérateur booléens          | &&, ...     |
| Opérateurs de concaténation | .           |

## Les Tests
| appelation                         | symbole               |
| --                                 | ---                   |
| Tester si une variable est définie | defined($var)         |
| Tester si la variable est null     | isset($var)           |
| Tester si la variable est vide     | empty($var)           |
| Tester le type de la variable      | is_string ($var), ... |

---
# La doc
## C'est votre ami pour la vie !

---
# Éléments de langage
## Les conditions
```php
<?php
  $a=42;
  if ($a<4){
     echo "a est plus petit que 4";
  }
  else {
     echo "a est plus grand que 4";
  }
?>
```
<img src="https://c.tenor.com/Qz2VqMX0MisAAAAC/just-blame-on-the-algorithm.gif" width=250/>

---
# La démonstration
## VAR
<center>
<video src="videos/exemple3.mp4" width="500" height="400" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Éléments de langage
## isset
.pull-left[
##### Le code
```php
<?php
   if (isset($b)){
      echo "Egun on";
   }
   else {
      echo "Ikus arte";
   }
?>
```
]

.pull-right[
##### Le résultat
```shell
Ikus arte
```
<img src="https://c.tenor.com/XrILqRi3JGUAAAAM/zootopia-sloth.gif" width=78 />

]

<br>

.pull-left[
##### Le code
```php
<?php
   $b = 4;
   if (isset($b)){
      echo "Egun on";
   }
   else {
      echo "Ikus arte";
   }
?>
```
]

.pull-right[
##### Le résultat
```shell
Egun on
```
<img src="https://c.tenor.com/pvFJwncehzIAAAAC/hello-there-private-from-penguins-of-madagascar.gif" width=78 />
]

---
# La démonstration
## VAR
<center>
<video src="videos/exemple4.mp4" width="500" height="400" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Éléments de langage
## Les Tableaux
##### Le code
```php
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
?>
```
##### Le résultat
```script
I like Volvo, BMW and Toyota.
```

#### La concaténation de chaines de caractères
- En php => on utilise le point
- En Javascript => on utilise le plus

---
# Éléments de langage
## Les Tableaux
#### La Démonstration
<center>
<video src="videos/exemple5.mp4"width="500" height="400" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# ÉLéments de langage
## Les tableaux associatifs
- C'est un duo (clé +valeur)
- La clé est unique
- Stocker des valeurs uniques (clé)
- Associer 2 données qui se complètent

##### Exemple
```php
<?php
$pokemon = array(148=>"Draco", 131=>"Lokhlass", 077=>"Ponyta");
?>
```

---
# Éléments de langage
## Le debbugage
##### Le code
```php
<?php
$cars = array("Volvo", "BMW", "Toyota");
var_dump($cars);
?>
```
##### Le résultat
```script
array(3) { [0]=> string(5) "Volvo" [1]=> string(3) "BMW" [2]=> string(6) "Toyota" }
```
## La doc !
<a href="https://www.w3schools.com/php/php_arrays.asp">C'est ici</a>

---
# Éléments de langage
## Les Boucles
1. for …
2. while …
3. do … while
4. foreach

---
# Éléments de langage
## Le for
##### Le code
```php
<?php
for ($x = 0; $x <= 3; $x++) {
  echo "The number is: $x ";
}
?>
```
##### Le résultat
```shell
The number is: 0
The number is: 1
The number is: 2
The number is: 3
```

---
# Éléments de langage
## Le foreach
##### Le code
```php
<?php
$age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");

foreach($age as $x => $val) {
  echo "$x = $val";
}
?>
```
##### Le résultat
```shell
Peter = 35
Ben = 37
Joe = 43
```

---
# Éléments de langage
## La suite
<a src="https://www.w3schools.com/php/php_looping.asp" target="_blank"> C'est dans la doc !</a>

---
# Éléments de langage
## Les fonctions et les procédures
##### Le code
```php
<?php
function multiplication($a, $b) {
 return ($a*$b);
}

$res=multiplication(4,5);
echo "le résultat est : $res";
?>
```

##### Le résultat
```script
le résultat est 20
```

---
# Mélanger HTML/PHP
## Pourquoi ?
- Générer des éléments html de manières automatique
- Automatiser des traitements
- Un bon informaticien est un informaticien fainéant !

## Comment ?
- En ajoutant du html, dans des "echo" de php
- En ajoutant des balises php dans du code html

---
# Mélanger HTML/PHP
## Exemple 1 : Le piou piou
Nous considérons le fichier "pioupiou.php"
```php
<?php
    echo "le résultat est : $res";
?>
```

#### Démonstration
<center>
<video src="videos/exemple6.mp4" width="200" height="150" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Mélanger HTML/PHP
## Exemple 2 : Le avancé
Nous considérons le fichier "advance.php"
```php
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Le Titre</title>
    </head>
    <body>
    
    <?php
        $pokemon = array(148=>"Draco", 131=>"Lokhlass", 077=>"Ponyta");
        foreach($pokemon as $x => $val) {
            echo "<p> je sui le pokemon $val et mon id est $x </p>";
        }
    ?>
    </body>
</html>
```
#### ATTENTION
même si le fichier contient du html, il doit avoir l'extension php car il contient du PHP

---
# Mélanger HTML/PHP
## Exemple 2
<center>
<video src="videos/exemple7.mp4" width="500" height="400" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Mélanger HTML/PHP
## Exemple 3 : La master class
- Nous considérons le fichier "master.php"
- oui !!! Il faut bien mettre php en extension !

```php
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Le Titre</title>
    </head>
    <body>

<?php
        $pokemon = array(148=>"Draco", 131=>"Lokhlass", 077=>"Ponyta");
        foreach($pokemon as $x => $val) {
            echo "<p> je sui le pokemon $val et mon id est $x </p>";
    ?>

<input type="button" value="<?php echo $val;?>">
    
    <?php
        }
    ?>
    </body>
</html>
```
---
# Mélanger HTML/PHP
## Exemple 3

<center>
<video src="videos/exemple8.mp4" width="500" height="400" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Les formulaires
## Explication via un exemple
À travers l'exemple d'une page de connexion nous allons répondre à plusieurs questions :

1. Dans quel contexte, POST/GET sont-ils utilisés ?
2. A quoi sert le mot clé action ?
3. A quoi sert le mot clé method ?
4. A quoi sert les balises form ?
5. A quoi sert le mot clé submit ?
6. Comment vérifier le contenu d’un formulaire sans utiliser du JS ?
7. Comment vérifier le contenu d’un formulaire en utilisant du PHP ?

---
# Les formulaires
## Objectif
Coder le comportement suivant
<center>
<video src="videos/demo.mp4" width="400" height="300" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Les formulaires
## Ce dont j'ai besoin
- un fichier connexion.html : inviter l'utilisateur à rentrer son login/password
- un fichier verifierConnexion.php : vérifier le login et le couple login/password
- un fichier accueil.php : accueillir l'utilisateur

## Le scénario
<img src="img/scenario.png" width=500 />

---
# Les formulaires
## connexion.html
.pull-left[
<img src="img/connexionhtml.png " width=350 />
]
.pull-right[
```html
<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Le Titre</title>
 </head>
 <body>
   <form action="verifierConnexion.php" method="GET">
     <p> Login : </p>
     <p><input type="text" name="login"></p>
     <p> Password : </p>
     <p><input type="password" name="password"></p>
     <p><input type="submit" value="connexion"></p>
   </form>
 </body>
</html>
```
]

---
# Les formulaires
## Input Submit
```html
<input type="submit" value="connexion">
```
Les balises **form** ne peuvent accueillir qu'un seul input de type **submit**

## Action
```html
<form action="verifierConnexion.php" method="GET">
```
Indiquer vers quelle page on souhaite aller une fois que le form sera validé (submité)

---
# Les formulaires
## Method
- Variables d'environnement php (tableaux associatifs)
- GET : permet d'envoyer d'une page A vers une page B des informations par URL
- POST : permet d'envoyer d'une page A vers une page B des informations sans URL

## Vous l'avez déjà vu !!
#### Par exemple
- Avec google
- Dans l'url d'une recherche
#### Démonstration
<img src="https://c.tenor.com/47CdzeuFFLIAAAAM/settings-machines.gif" width="200"/>

---
# Les formulaires
## Dans notre cas
<img src="img/scenarioStep2.png" width=550 />

---
# Les formulaires
## À votre avis
Dans ce cas là, faut-il utiliser POST ou GET ?
<img src="img/scenarioStep2FAUX.png" width=550 />

---
# Les formulaires
## La bonne réponse !
- On va partir sur du POST !
- Le mot de passe apparaît en clair dans l'url

---
# Les formulaires
## On obtient
.pull-left[
<img src="img/connexionhtml.png " width=350 />
]
.pull-right[
```html
<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Le Titre</title>
 </head>
 <body>
   <form action="verifierConnexion.php" method="POST">
     <p> Login : </p>
     <p><input type="text" name="login"></p>
     <p> Password : </p>
     <p><input type="password" name="password"></p>
     <p><input type="submit" value="connexion"></p>
   </form>
 </body>
</html>
```
]

---
# Les formulaires
## Comment récupérer les valeurs login/password ?
Via le tableau associatif php de POST

## On reprend le scénario !
<img src="img/scenario.png" width=500 />

---
# Les formulaires
## verifierConnexion.php
```php
<?php
   echo "je suis la page vérifier connexion ";
   echo "login = ". $_POST["login"] . " et le password = " . $_POST["password"];
?>
```
## Ce qui donne !
<img src="img/scenarioVerifierConnexion.png" width=350 />

---
# Les formulaires
## À votre avis
Comment les valeurs sont-elles en adéquation ?

---
# Les formulaires
## Jean michel évidence
<img src="img/scenarioStep3Evidence.png" width=800 />

---
# Les formulaires
## Avec les nameS dans les input de
#### connexion.html
```html
<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Le Titre</title>
 </head>
 <body>
   <form action="verifierConnexion.php" method="POST">
     <p> Login : </p>
     <p><input type="text" name="login"></p>
     <p> Password : </p>
     <p><input type="password" name="password"></p>
     <p><input type="submit" value="connexion"></p>
   </form>
 </body>
</html>
```

---
# Les formulaires
## Le scénar !
<img src="img/scenario.png" width=500 />

---
# Les formulaires
## De l'algo
```c
PROGRAMME verifierConnexion
VARIABLES
    loginOfficial : chaine de caracteres
    passwordOfficial : chaine de caracteres
DEBUT
   loginOfficial<-"ines";
   passwordOfficial<-"poneyDu64";
   SI loginOfficial= $_POST["login"]  ET passwordOfficial=$_POST["password"] ALORS
       rediriger("accueil.php")
   SINON
       rediriger("connexion.html")
   FIN SI
FIN
```
---
# Les formulaires
## Traduction en PHP
#### verifierConnexion.php
```php
<?php
$loginOfficial="ines";
$passwordOfficial="poneyDu64";

if (($loginOfficial==$_POST["login"]) && ($passwordOfficial==$_POST["password"])){
   /* si c'est bon je pars sur la page accueil.php */
        header('Location: accueil.php');
        exit();
}
else{
        header('Location: connexion.html');
}

?>
```
---
# Les formulaires
## Comparaisons
.pull-left[
```c
PROGRAMME verifierConnexion
VARIABLES
    loginOfficial : chaine de caracteres
    passwordOfficial : chaine de caracteres
DEBUT
   loginOfficial<-"ines";
   passwordOfficial<-"poneyDu64";
   SI loginOfficial= $_POST["login"]  ET passwordOfficial=$_POST["password"] ALORS
       rediriger("accueil.php")
   SINON
       rediriger("connexion.html")
   FIN SI
FIN
```
]
.pull-right[
```php
<?php
$loginOfficial="ines";
$passwordOfficial="poneyDu64";

?>
```
]

---
# Les formulaires
## Afficher le login
<img src="img/aLaBase.png" width=500 />

---
# Les formulaires
## TEST
#### accueil.php
```php
<?php
    echo "Bonjour";
    echo $_POST['login'];
    echo "Voici ta page d'accueil !"
?>
```

## Ça marche Pô !!

---
# Les formulaires
## Validité de $_POST et $_GET
.under[Il ne sont valable que d'une page à une autre]

## Mais comment faire ?
On va le passer par l'url de la page verifierConnexion.php à accueil.php

---
# Les formulaires
## Une solution
#### verifierConnexion.php
```php
<?php
$loginOfficial="ines";
$passwordOfficial="poneyDu64";

if (($loginOfficial==$_POST["login"]) && ($passwordOfficial==$_POST["password"])){
   /* si c'est bon je pars sur la page accueil.php */
        header('Location: accueil.php?login='.$_POST["login"]);
}
else{
        header('Location: connexion.html');
}

?>
```
#### Accueil.php
```php
<?php
    echo "Bonjour";
    echo $_GET['login'];
    echo "Voici ta page d'accueil !"
?>
```
---
# Les formulaires
## La deconnexion !
#### Accueil.php
```php
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Le Titre</title>
    </head>
    <body>
    <?php
        echo "Bonjour";
        echo $_GET['login'];
        echo "Voici ta page d'accueil !"
    ?>
    <button type="button" onclick="location.href = 'connexion.html';">Deconnexion</button>
    </body>
</html>

```
---
# La conclusion
## Étape par étape
1. Réfléchir avant de coder
2. Écrire un scénario de fonctionnement
3. Construire un ALGO en faisant abstraction du langage
4. Répartir/organiser les algos dans les fichiers
5. Coder les algos en PHP
6. Tester petit à petit les différentes fonctionnalités
7. LIRE les messages d'erreurs !

## LA RIGUEUR !!