====== 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 : '''' pour la fermeture. ...

Coucou

De nouveau du code HTML ! ... 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) 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;'' ...

Coucou

De nouveau du code HTML ! Le PHP va renvoyer simplement du texte et du HTML qui va construire la page, mais de manière dynamique. ==== Comparaison avec python ==== Quelques commandes de base : Pour plus de simplicité je ne mets pas les ''''' mais c'est absolument nécessaire pour que le code PHP soit interprété ! | **Description** | **PHP** | **Python** | | Affichage | echo "Bonjour"; | print("Bonjour") | | Variables |

$variable = 5;
$texte = "Bonjour" . $variable;

variable = 5
texte = "Bonjour" + str(variable)

| | Condition |

if($test && $test2 || $test3){ 
   // Si vrai 
}else{
   // Si faux
}

if test and test2 or test3:
    # si vrai
else:
    # si faux

| |Vérifier l'existence d'une variable | isset($variableATester); | variableATester in globals() | ===== 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. Une page avec un formulaire

Remplissez ce formulaire !

* ''

'' 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. * '''' * ''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 * '''' * ''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 : '' 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. Le fichier suivant porte l'extension **.php** au lieu de .html Une page avec un résultat

Résultats

'.$_POST['nom'].''; } ?> ===== 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 |

for($i = 0;$i<10;$i++){
    echo $i;
}

for i in range(10):
    print i, # le , pour ne pas passer à la ligne

| | ::: |


$i = 0;
while($i < 10){
    echo $i;
    $i++;
}

i = 10
while i < 10:
    print i, # le , pour ne pas passer à la ligne
    i += 1

foreach($tab as $a){ 
    echo $a; 
}

for a in tab:
    print a,

| | Dictionnaires | $dic = ["bleu" => 1, "rouge" => 2]; | dic = { "bleu" : 1, "rouge": 2 }| | ::: |

foreach($tab as $a => $b){ 
    echo $a . ' a pour valeur ' . $b . ' 
 '; 
}

 for a, b in tab.items():
    print a + " a pour valeur " + str(b)

| | Fonctions |

function somme($a, $b, $c=0){
    return $a + $b + $c;
}

def somme(a, b, c=0):
    return a + b + c

| === Exemple d'utilisations === Coucou $lol "; echo ma_super_fonction(); if($lol == 4){ echo 'Ce bloc est exécuté car $lol vaut 4.
'; // Affiche Ce bloc est exécuté car $lol vaut 4.
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é !'; } ===== 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''. Ma super galerie .miniature{ max-width: 300px; max-height: 300px; } .conteneur{ height: 310px; width: 310px; text-align: center; background-color: powderblue; float: left; margin: 20px; } === 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 glob.

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 :

Et dans toutes vos pages :



  
    ..
  
  
    
    Mon contenu spécifique à la page

===== A gérer ===== Attention code utilisant Bootstrap 4 et n'est donc plus à jour avec ce que vous avez fait en devweb 2 (Bootstrap 5)




  
    Galerie de Jean-Otter de la strret des famiy
    
    
    
  
  
 
    
      Site de Jean-Loutre
 
      
      
 
      
      
        
          
            Accueil (current)
          
          
            Mon CV
          
          
            De belles images
          
          
            Ce que j'aime
          
          
            Contact
          
        
      
    
 
    
      
        
          Bienvenue sur mon site perso
          
			  
 
				
					
					  
					
				   
			  
			  
				
				Previous
			  
			  
				
				Next
			  
			
        
      
    
 
    
      
        
          
            Contactez moi
            
          
          
            
              Jean Loutre
               Loutre professionnelle 
              jean.loutre@centrale-assos.fr
              +33 6 12 34 56 78

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


foder