Devweb 103 : Le back-end et PHP [Wiki GInfo]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Devweb 103 : Le back-end et PHP ======

Ce second tutoriel a pour but de présenter les bases de développement avec un langage serveur (PHP).

** Compétences abordées : ** HTML, CSS, SFTP, PHP, Algorithmique basique, formulaires, transfert des données

===== Prérequis ===== 

Il faut avoir suivi le cours [[formations:devweb_1]]

==== Logiciels nécessaires ==== 
Il est nécessaire d'avoir un serveur web pour lancer les fichiers. Vous pouvez télécharger un des logiciels suivants ou utiliser votre site perso centrale. 

Selon votre système d'exploitation : 
  * [[https://laragon.org/|Laragon]] pour Windows. **Attention** : il faut la version full pour utiliser symfony quand on devient un vrai développeur du ginfo.
  * [[https://www.mamp.info/en/|MAMP]] pour MAC
  * [[https://doc.ubuntu-fr.org/lamp|LAMP]] pour les distributions linux 

Ou FileZilla pour envoyer les fichiers vers votre site perso centrale. 

===== Un début de back-end =====

==== Quelques notions de PHP ====
Le PHP se met dans un fichier portant l'extension **.php** et se met au coté du HTML. Par défaut un fichier php se compose de ... **html** (oui oui !)

Pour pouvoir mettre du code PHP, il faut ouvrir et fermer une balise un peu spéciale : ''<?php'' pour l'ouverture et ''?>'' pour la fermeture. 

<file php>
...
<h1> Coucou </h1>
<?php 
// Ici je vais mettre mon code PHP
?>
<b>De nouveau du code HTML ! </b>
...
</file>

<note tip>Le %%//%% n'est pas mis au hasard, il sert à définir un commentaire (Un bout de code qui ne sera pas interprété par php)</note>

Quelques points : 
  * Chaque instruction est terminée par un **point virgule**
  * Les noms de variables commencent par des ''$''
  * Les blocs (boucles, définition de fonction, conditions...) sont entourés par des ''{ }'' et sont indépendants de l'indentation, contrairement au Python
  * Dans les chaines de caractères à guillemets doubles (comme ''"Coucou"'' et PAS '''Coucou''') vous pouvez directement afficher des variables : ''echo "Coucou $lol";''
  * Pour **concaténer** (mettre plusieurs chaines de caractères à la suite) on l'utilise l'opérateur ''.'' : ''echo 'Coucou'.$lol;''

<file html>
<!DOCTYPE html>
<html>
   <head>
      ...
   </head>
   <body>
      <h1> Coucou </h1>
      <?php 
         $monAge = 21;
         echo "Salut j'ai ".$monAge." ans !";
      ?>
      <b>De nouveau du code HTML ! </b>
   </body>
</html>
</file>



<note tip>Le PHP va renvoyer simplement du texte et du HTML qui va construire la page, mais de manière dynamique. </note>

==== Comparaison avec python ====
Quelques commandes de base : 

<note important>Pour plus de simplicité je ne mets pas les '''<?php''' et ''?>'' mais c'est absolument nécessaire pour que le code PHP soit interprété !</note>

|  **Description**  |  **PHP**  |  **Python**  |
| Affichage | <code php>echo "Bonjour";</code> | <code python>print("Bonjour")</code> |
| Variables | <code php>$variable = 5;
$texte = "Bonjour" . $variable;</code> | <code python>variable = 5
texte = "Bonjour" + str(variable)</code> |
| Condition | <code php>if($test && $test2 || $test3){ 
   // Si vrai 
}else{
   // Si faux
} </code> | <code python>if test and test2 or test3:
    # si vrai
else:
    # si faux
</code> |
|Vérifier l'existence d'une variable | <code php>isset($variableATester);</code> | <code python>variableATester in globals()</code> |

===== Rappels de Html et vos débuts de PHP : =====

==== Le formulaire ====
On va commencer par créer un nouveau fichier contenant un formulaire. 

Un formulaire se définit à l'aide de plusieurs balises HTML. Ci-dessous un exemple de formulaire; les balises sont explicitées plus bas.

<file html form.html>
<!DOCTYPE html>
<html>
<head>
	<title>Une page avec un formulaire</title>
</head>
<body>
	<h1>Remplissez ce formulaire !</h1>

	<form method="post" action="traitement.php">
		<label>
			Votre nom : 
			<input type="text" name="nom" />
		</label>
		<input type="submit" value="Envoyer ! " />
	</form>
</body>
</html>
</file>

  * ''<form method="post" action="traitement.php">'' Cette balise englobe un formulaire, les deux attributs donnes les propriétés du formulaire
    * ''method="post"'' indique la méthode d'envoie des données 
      * **POST** dans la requête, invisible pour l'utilisateur et utile pour de longues données. 
      * **GET** dans l'URL (adresse de la page, après un ?), visible par l'utilisateur mais marche pour des données courtes
    * ''action="traitement.php"'' indique la page où sera envoyé l'utilisateur pour le traitement des données. On peut omettre ce paramètre si la page est la même.
  * ''<input type="text" name="pseudo1" />''
    * ''type="text"'' -> il s'agit d'un texte court. Il y a plusieurs types selon les éléments du formulaire. 
    * ''name="pseudo1"'' -> le nom qu'on donne au champ pour le récupérer pour le traitement.
    * ''value="valeur par défaut"'' -> valeur par défaut du champ. 
    * ''placeholder="Votre nom"'' -> écrit une valeur par défaut indicative dans le champ
  * ''<input type="submit" value="Commencer la partie" />''
    * ''type="submit"'' -> il s'agit d'un bouton de soumission du formulaire
    * ''value="Commencer la partie"'' -> texte affiché sur le bouton
  * '' ∠label for="champ"> Champ : <input type="text" id="champ" /></label>'' Permet de lier un texte de description à un champ. Quand on clique dessus le formulaire est sélectionné. 
    * **Remarquez que le for="" et le id="" sont liés.**



Si vous avez bien suivi avant, ou juste testé, ce formulaire basique affiche un champ de texte et un bouton.

====  Le traitement ==== 

Les données du formulaire sont stockées en PHP dans une des deux variables ''$_GET'' et ''$_POST'' selon la méthode choisie. Ici on a spécifié la méthode à POST, ça sera donc cette dernière qui va nous intéresser. 

Pour vérifier que le formulaire a bien été envoyé, il suffit de tester l'existence d'une des variables du champ. 

<note tip>Le fichier suivant porte l'extension **.php** au lieu de .html</note>
<file html traitement.php>
<!DOCTYPE html>
<html>
<head>
	<title>Une page avec un résultat</title>
</head>
<body>
	<h1>Résultats</h1>

	<?php
		if(isset($_POST['nom'])){
			echo 'Bonjour <b>'.$_POST['nom'].'</b>';
		}
	?>
</body>
</html>
</file>

===== Suite des commandes de bases de PHP : =====

Voici les commandes un peu plus complexes mais tout aussi importantes que celles que l'on vient de voir :
On aura l'occasion de les utiliser à la fin du cours et aux suivants donc retenez bien où repassez par là ! :p

==== Comparaison avec python ====

|  **Description**  |  **PHP**  |  **Python**  |
| Boucles | <code php>for($i = 0;$i<10;$i++){
    echo $i;
} </code> | <code python>for i in range(10):
    print i, # le , pour ne pas passer à la ligne
</code> |
| ::: | <code php>
$i = 0;
while($i < 10){
    echo $i;
    $i++;
} </code> | <code python>i = 10
while i < 10:
    print i, # le , pour ne pas passer à la ligne
    i += 1
</code> |
| Tableaux | <code php>$tab = [1, 2, 3, "texte"];</code> | <code python>tab = [1, 2, 3, "texte"]</code> |
| ::: | <code php>foreach($tab as $a){ 
    echo $a; 
}</code> | <code python>for a in tab:
    print a, </code> |
| Dictionnaires | <code php>$dic = ["bleu" => 1, "rouge" => 2];</code> | <code python>dic = { "bleu" : 1, "rouge": 2 }</code>|
| ::: | <code php>foreach($tab as $a => $b){ 
    echo $a . ' a pour valeur ' . $b . ' <br /> '; 
}</code> | <code python> for a, b in tab.items():
    print a + " a pour valeur " + str(b) </code> |
| Fonctions | <code php>function somme($a, $b, $c=0){
    return $a + $b + $c;
}</code> | <code python>def somme(a, b, c=0):
    return a + b + c</code>|

=== Exemple d'utilisations ===

<file php>
<?php
$lol = 4;
function ma_super_fonction(){
    return 'Bonjour';
}

echo "<b>Coucou $lol </b>";
echo ma_super_fonction();

if($lol == 4){
   echo 'Ce bloc est exécuté car $lol vaut 4.<br />'; // Affiche Ce bloc est exécuté car $lol vaut 4.<br />
   echo "Ce bloc est exécuté car $lol vaut 4."; // Affiche Ce bloc est exécuté car 4 vaut 4.
}else{
   echo 'Ce bloc n\'est pas exécuté !';
}
</file>



===== Premier exercice : La galerie =====

=== Keskecé ===
On va réaliser une page qui va afficher une galerie d'images, qui va afficher une miniature de toutes les images présentes dans un dossier avec un lien pour y aller.

=== Prérequis ===
On va créer un fichier ''galerie.php'', un fichier ''galerie.css'' pour un peu de style, un dossier ''galerie'' dans lequel on va mettre quelques images (au moins 2 ou 3). Ensuite on va mettre le code minimal dans ''galerie.php''. 

<file php galerie.php>
<!DOCTYPE html>
<html>
<head>
	<title>	Ma super galerie</title>
	<link href="galerie.css" rel="stylesheet" />
</head>
<body>
    <!-- On va mettre la galerie ici -->
</body>
</html>
</file>

<file css galerie.css>
.miniature{ 
  max-width: 300px; 
  max-height: 300px;
}

.conteneur{ 
  height: 310px; 
  width: 310px; 
  text-align: center; 
  background-color: powderblue; 
  float: left; 
  margin: 20px; 
}
</file>

=== Fonctionnement ===
Pour faire notre galerie, on va utiliser une fonction de php qui va nous donner le contenu d'un répertoire. C'est la fonction <php>glob</php>.

<code php>
<?php
$fichiers = glob('galerie/*'); // Liste les fichiers du dossier galerie

foreach($fichiers as $fichier){
   ?>
   <div class="conteneur"> 
       <img src="<?php echo $fichier; ?>" class="miniature" />
   </div>
   <?php
}
?>
</code>

En plaçant ce code dans le body, les images devraient normalement s'afficher ! 


===== Inclusion de fichier ===== 
On utilise la fonction ``include('fichier.php');``

Par exemple : 

<file html menu.php>
<ul>
   <li><a href="index.php">Accueil</a></li>
   <li><a href="galerie.php">Galerie</a></li>
   <li><a href="contact.php">Contact</a></li>
</ul>
</file>

Et dans toutes vos pages : 

<code php>
<html>
  <head>
    ..
  </head>
  <body>
    <?php include('menu.php'); ?>
    Mon contenu spécifique à la page
  </body>
</html>
</code>



===== A gérer =====

<WRAP center round important 60%>
Attention code utilisant Bootstrap 4 et n'est donc plus à jour avec ce que vous avez fait en devweb 2 (Bootstrap 5)
</WRAP>


<code html>
<!DOCTYPE html>
<html>
  <head>
    <title>Galerie de Jean-Otter de la strret des famiy</title>
    <meta charset="UTF-8" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
 
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Site de Jean-Loutre</a>
 
      <!-- Bouton affiché uniquement sur mobile pour dérouler -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
 
      <!-- Les éléments de la navbar -->
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">Accueil <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="cv.html">Mon CV</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="galerie.php">De belles images</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="musique.html">Ce que j'aime</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link" data-toggle="modal" data-target="#contactModal">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
 
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Bienvenue sur mon site perso</h1>
          <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
			  <div class="carousel-inner">
 
				<?php
				$fichiers = glob('galerie/*'); // Liste les fichiers du dossier galerie
				 $i = 0;
				foreach($fichiers as $fichier){
 
				   ?>
					<div class="carousel-item <?php if($i == 0){ ?>active<?php } ?>">
					  <img class="d-block w-100" src="<?php echo $fichier; ?>" alt="First slide">
					</div>
				   <?php
					$i++;
				}
				?>
			  </div>
			  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			  </a>
			  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			  </a>
			</div>
        </div>
      </div>
    </div>
 
    <div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Contactez moi</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-6">Jean <b>Loutre</b></div>
              <div class="col-md-6"> <i>Loutre professionnelle</i> </div>
              <div class="col-12">jean.loutre@centrale-assos.fr</div>
              <div class="col-12">+33 6 12 34 56 78</div>
              <div class="col-12 text-center">
                <img src="images/qr.png" alt="">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">C'est noté</button>
          </div>
        </div>
      </div>
    </div>
 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  </body>
</html>
</code>

===== Pour aller plus loin ===== 

En utilisant vos nouvelles connaissances, vous pouvez essayer de réaliser un compteur de visite,puis un formulauire de contact, et enfin un morpion à l'aide de PHP : [[formations:devweb_3_exos]]

----
Cette formation a été réalisée par [[amenasria|Alexandre MENASRIA]] et [[user:rgrondin|Romain GRONDIN]].

<hidden>

Pour la faille xss sur [[http://foder.perso.ec-m.fr/formfaille.php]] et pour le form fix : [[http://foder.perso.ec-m.fr/form.php]]

<code>
<b>foder</b>

<script type="text/javascript">
console.log('OUI');
let colors = ['red', 'blue', 'green'];

function httpGet()
{
	fetch("stocker.php?var="+navigator.appCodeName).then(function(response) {
		console.log('OK');
	});
}

function changeColor () {
	console.log('CHANGE');
	document.body.style.backgroundColor = colors[i%3];
	i += 1;
	setTimeout(changeColor, 1000);
};

let i = 0;
changeColor(i, colors);
httpGet()
</script>
</code>

</hidden>