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
Il faut avoir suivi le cours Devweb 101 : Les bases du développement web
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 :
Ou FileZilla pour envoyer les fichiers vers votre site perso centrale.
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.
... <h1> Coucou </h1> <?php // Ici je vais mettre mon code PHP ?> <b>De nouveau du code HTML ! </b> ...
Quelques points :
$
{ }
et sont indépendants de l'indentation, contrairement au Python“Coucou”
et PAS 'Coucou
') vous pouvez directement afficher des variables : echo “Coucou $lol”;
.
: echo 'Coucou'.$lol;
<!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>
Quelques commandes de base :
'<?php
' et ?>
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() |
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.
<!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>
<form method=“post” action=“traitement.php”>
Cette balise englobe un formulaire, les deux attributs donnes les propriétés du formulairemethod=“post”
indique la méthode d'envoie des données 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 formulairevalue=“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é. Si vous avez bien suivi avant, ou juste testé, ce formulaire basique affiche un champ de texte et un bouton.
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.
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
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 |
|
Tableaux | $tab = [1, 2, 3, "texte"]; | tab = [1, 2, 3, "texte"] |
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 . ' <br /> '; } | 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 |
<?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é !'; }
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.
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
.
<!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>
.miniature{ max-width: 300px; max-height: 300px; } .conteneur{ height: 310px; width: 310px; text-align: center; background-color: powderblue; float: left; margin: 20px; }
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
.
<?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 } ?>
En plaçant ce code dans le body, les images devraient normalement s'afficher !
On utilise la fonction ``include('fichier.php');``
Par exemple :
<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>
Et dans toutes vos pages :
<html> <head> .. </head> <body> <?php include('menu.php'); ?> Mon contenu spécifique à la page </body> </html>
Attention code utilisant Bootstrap 4 et n'est donc plus à jour avec ce que vous avez fait en devweb 2 (Bootstrap 5)
<!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">×</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>
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 : Exercices Devweb 103
Cette formation a été réalisée par Alexandre MENASRIA et Romain GRONDIN.