Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédenteDernière révisionLes deux révisions suivantes | ||
formations:devweb_3 [21/10/2020 10:46] – [Pour aller plus loin] mmohamed | formations:devweb_3 [18/10/2022 18:34] – [A gérer] nbert | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== 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, | ||
+ | |||
+ | ===== Prérequis ===== | ||
+ | |||
+ | Il faut avoir suivi le cours [[formations: | ||
+ | |||
+ | ==== Logiciels nécessaires ==== | ||
+ | Il est nécessaire d' | ||
+ | |||
+ | Selon votre système d' | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | |||
+ | 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' | ||
+ | |||
+ | Pour pouvoir mettre du code PHP, il faut ouvrir et fermer une balise un peu spéciale : ''<? | ||
+ | |||
+ | <file php> | ||
+ | ... | ||
+ | <h1> Coucou </h1> | ||
+ | <? | ||
+ | // Ici je vais mettre mon code PHP | ||
+ | ?> | ||
+ | <b>De nouveau du code HTML ! </b> | ||
+ | ... | ||
+ | </ | ||
+ | |||
+ | <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)</ | ||
+ | |||
+ | 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 '' | ||
+ | * Dans les chaines de caractères à guillemets doubles (comme ''" | ||
+ | * Pour **concaténer** (mettre plusieurs chaines de caractères à la suite) on l' | ||
+ | |||
+ | <file html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | ... | ||
+ | </ | ||
+ | < | ||
+ | <h1> Coucou </h1> | ||
+ | <? | ||
+ | | ||
+ | echo "Salut j'ai " | ||
+ | ?> | ||
+ | <b>De nouveau du code HTML ! </b> | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | <note tip>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 : | ||
+ | |||
+ | <note important> | ||
+ | |||
+ | | **Description** | ||
+ | | Affichage | <code php>echo " | ||
+ | | Variables | <code php> | ||
+ | $texte = " | ||
+ | texte = " | ||
+ | | Condition | <code php> | ||
+ | // Si vrai | ||
+ | }else{ | ||
+ | // Si faux | ||
+ | } </ | ||
+ | # si vrai | ||
+ | else: | ||
+ | # si faux | ||
+ | </ | ||
+ | |Vérifier l' | ||
+ | |||
+ | ===== 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> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | |||
+ | <form method=" | ||
+ | < | ||
+ | Votre nom : | ||
+ | < | ||
+ | </ | ||
+ | <input type=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * ''< | ||
+ | * '' | ||
+ | * **POST** dans la requête, invisible pour l' | ||
+ | * **GET** dans l'URL (adresse de la page, après un ?), visible par l' | ||
+ | * '' | ||
+ | * ''< | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * ''< | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * **Remarquez que le for="" | ||
+ | |||
+ | |||
+ | |||
+ | 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 '' | ||
+ | |||
+ | Pour vérifier que le formulaire a bien été envoyé, il suffit de tester l' | ||
+ | |||
+ | <note tip>Le fichier suivant porte l' | ||
+ | <file html traitement.php> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | |||
+ | <?php | ||
+ | if(isset($_POST[' | ||
+ | echo ' | ||
+ | } | ||
+ | ?> | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== 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' | ||
+ | |||
+ | ==== Comparaison avec python ==== | ||
+ | |||
+ | | **Description** | ||
+ | | Boucles | <code php> | ||
+ | echo $i; | ||
+ | } </ | ||
+ | print i, # le , pour ne pas passer à la ligne | ||
+ | </ | ||
+ | | ::: | <code php> | ||
+ | $i = 0; | ||
+ | while($i < 10){ | ||
+ | echo $i; | ||
+ | $i++; | ||
+ | } </ | ||
+ | while i < 10: | ||
+ | print i, # le , pour ne pas passer à la ligne | ||
+ | i += 1 | ||
+ | </ | ||
+ | | Tableaux | <code php>$tab = [1, 2, 3, " | ||
+ | | ::: | <code php> | ||
+ | echo $a; | ||
+ | }</ | ||
+ | print a, </ | ||
+ | | Dictionnaires | <code php>$dic = [" | ||
+ | | ::: | <code php> | ||
+ | echo $a . ' a pour valeur ' . $b . ' <br /> '; | ||
+ | }</ | ||
+ | print a + " a pour valeur " + str(b) </ | ||
+ | | Fonctions | <code php> | ||
+ | return $a + $b + $c; | ||
+ | }</ | ||
+ | return a + b + c</ | ||
+ | |||
+ | === Exemple d' | ||
+ | |||
+ | <file php> | ||
+ | <?php | ||
+ | $lol = 4; | ||
+ | function ma_super_fonction(){ | ||
+ | return ' | ||
+ | } | ||
+ | |||
+ | echo "< | ||
+ | echo ma_super_fonction(); | ||
+ | |||
+ | if($lol == 4){ | ||
+ | echo '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é !'; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== Premier exercice : La galerie ===== | ||
+ | |||
+ | === Keskecé === | ||
+ | On va réaliser une page qui va afficher une galerie d' | ||
+ | |||
+ | === Prérequis === | ||
+ | On va créer un fichier '' | ||
+ | |||
+ | <file php galerie.php> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <link href=" | ||
+ | </ | ||
+ | < | ||
+ | <!-- On va mettre la galerie ici --> | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <file css galerie.css> | ||
+ | .miniature{ | ||
+ | max-width: 300px; | ||
+ | max-height: 300px; | ||
+ | } | ||
+ | |||
+ | .conteneur{ | ||
+ | height: 310px; | ||
+ | width: 310px; | ||
+ | text-align: center; | ||
+ | background-color: | ||
+ | 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 < | ||
+ | |||
+ | <code php> | ||
+ | <?php | ||
+ | $fichiers = glob(' | ||
+ | |||
+ | foreach($fichiers as $fichier){ | ||
+ | ?> | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | <? | ||
+ | } | ||
+ | ?> | ||
+ | </ | ||
+ | |||
+ | En plaçant ce code dans le body, les images devraient normalement s' | ||
+ | |||
+ | |||
+ | ===== Inclusion de fichier ===== | ||
+ | On utilise la fonction ``include(' | ||
+ | |||
+ | Par exemple : | ||
+ | |||
+ | <file html menu.php> | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | </ | ||
+ | |||
+ | Et dans toutes vos pages : | ||
+ | |||
+ | <code php> | ||
+ | < | ||
+ | < | ||
+ | .. | ||
+ | </ | ||
+ | < | ||
+ | <?php include(' | ||
+ | Mon contenu spécifique à la page | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== 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) | ||
+ | </ | ||
+ | |||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | </ | ||
+ | < | ||
+ | |||
+ | <nav class=" | ||
+ | <a class=" | ||
+ | |||
+ | <!-- Bouton affiché uniquement sur mobile pour dérouler --> | ||
+ | <button class=" | ||
+ | <span class=" | ||
+ | </ | ||
+ | |||
+ | <!-- Les éléments de la navbar --> | ||
+ | <div class=" | ||
+ | <ul class=" | ||
+ | <li class=" | ||
+ | <a class=" | ||
+ | </li> | ||
+ | <li class=" | ||
+ | <a class=" | ||
+ | </li> | ||
+ | <li class=" | ||
+ | <a class=" | ||
+ | </li> | ||
+ | <li class=" | ||
+ | <a class=" | ||
+ | </li> | ||
+ | <li class=" | ||
+ | <a href="#" | ||
+ | </li> | ||
+ | </ul> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | < | ||
+ | <div id=" | ||
+ | <div class=" | ||
+ | |||
+ | <? | ||
+ | $fichiers = glob(' | ||
+ | $i = 0; | ||
+ | foreach($fichiers as $fichier){ | ||
+ | |||
+ | ?> | ||
+ | < | ||
+ | <img class=" | ||
+ | </ | ||
+ | <? | ||
+ | $i++; | ||
+ | } | ||
+ | ?> | ||
+ | </ | ||
+ | <a class=" | ||
+ | < | ||
+ | < | ||
+ | </a> | ||
+ | <a class=" | ||
+ | < | ||
+ | < | ||
+ | </a> | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <h5 class=" | ||
+ | <button type=" | ||
+ | <span aria-hidden=" | ||
+ | </ | ||
+ | </ | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <img src=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | <div class=" | ||
+ | <button type=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <script type=" | ||
+ | <script type=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== Pour aller plus loin ===== | ||
+ | |||
+ | En utilisant vos nouvelles connaissances, | ||
+ | |||
+ | ---- | ||
+ | Cette formation a été réalisée par [[amenasria|Alexandre MENASRIA]] et [[user: | ||
+ | |||
+ | < | ||
+ | |||
+ | Pour la faille xss sur [[http:// | ||
+ | |||
+ | < | ||
+ | < | ||
+ | |||
+ | <script type=" | ||
+ | console.log(' | ||
+ | let colors = [' | ||
+ | |||
+ | function httpGet() | ||
+ | { | ||
+ | fetch(" | ||
+ | console.log(' | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function changeColor () { | ||
+ | console.log(' | ||
+ | document.body.style.backgroundColor = colors[i%3]; | ||
+ | i += 1; | ||
+ | setTimeout(changeColor, | ||
+ | }; | ||
+ | |||
+ | let i = 0; | ||
+ | changeColor(i, | ||
+ | httpGet() | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||