TD1 – Introduction à PHP Hello World, objets et formulaires

IDE pour PHP

PHP est un langage de programmation donc utilisez un environnement de développement. Vous ne codez pas du Java avec BlocNotes, c’est pareil pour PHP. Nous coderons donc notre PHP sous PhpStorm.

Nouveau projet

Quand vous ouvrez PhpStorm, créer un nouveau projet vide dans le dossier public_html/TD1 de votre répertoire personnel. Pour ceci, sélectionnez New Project, PHP Empty Project, Location: /home/ann2/votre_login/public_html/TD1.

Obtention de la licence académique Ultimate pour PhpStorm

Documentations de PhpStorm

Autre IDE

Si vous le souhaitez fortement, vous pouvez aussi utiliser d’autres IDE. VSCode est une bonne alternative, mais il manque des fonctionnalités PHP. Notez cependant que nous n’assurons pas le support d’autres IDE.

Accédez à vos pages web

Nous avons vu lors du cours 1 le fonctionnement du WWW sur le modèle de client & serveur HTTP. Mettons en pratique tout cela !

Une page HTML de base

  1. Créez une page page1.html avec le contenu suivant et enregistrez la dans le répertoire public_html/TD1 de votre espace personnel.

    <!DOCTYPE html>
    <html>
        <head>
            <title> Insérer le titrer ici </title>
        </head>
       
        <body>
            Un problème avec les accents à é è ?
            <!-- ceci est un commentaire -->
        </body>
    </html>
    
  2. Ouvrez cette page dans le navigateur directement en double-cliquant dessus directement depuis votre gestionnaire de fichiers. Notez l’URL du fichier : file://chemin_de_mon_compte/public_html/TD1/page1.html.

    Que fait le gestionnaire de fichier quand on double-clique ?
    Que signifie le file au début de l’URL ?
    Est-ce que la page HTML s’affiche correctement ?
    Est-ce qu’il y a une communication entre un serveur et un client HTTP ?

    • Rappel : Un problème avec les accents ? Dans l’en-tête du fichier HTML vous devez rajouter la ligne qui spécifie l’encodage

      <meta charset="utf-8" />
      

      Il faut que vos fichiers soient enregistrés avec le même encodage. UTF-8 est souvent l’encodage par défaut, mais les éditeurs de texte offrent généralement le choix de l’encodage lors du premier enregistrement du fichier.

  3. Vous souvenez-vous comment fait-on pour qu’une page Web soit servie par le serveur HTTP de l’IUT (à l’URL http://webinfo.iutmontp.univ-montp2.fr/~mon_login_IUT/TD1/page1.html) ?

    Réponse : Les pages Web doivent être enregistrées dans le dossier public_html de votre répertoire personnel.

    Ouvrez donc page1.html depuis le navigateur en tapant l’URL dans la barre d’adresse.

    Est-ce que la page HTML s’affiche correctement ?
    Est-ce qu’il y a une communication entre un serveur et un client HTTP maintenant ?


    Aide : Votre page ne s’affiche pas ?
    Si votre page ne s’affiche pas, c’est peut-être un problème de droit. Pour pouvoir servir vos pages, le serveur HTTP (Apache) de l’IUT doit avoir le droit de lecture des pages Web (permission r--) et le droit de traverser les dossiers menant à la page Web (permission --x). À l’IUT, la gestion des droits se fait par les ACL.
    Pour donner les droits à l’utilisateur www-data (Apache), utilisez la commande setfacl dans un terminal sous Linux :

    # On modifie (-m) récursivement (-R) les droits r-x
    # de l'utilisateur (u:) www-data
    setfacl -R -m u:www-data:r-x ~/public_html
    # On fait de même avec des droits par défaut (d:)
    # (les nouveaux fichiers prendront ces droits)
    setfacl -R -m d:u:www-data:r-x ~/public_html
    

    Note : Les ACL permettent d’avoir des droits spécifiques à plusieurs utilisateurs et à plusieurs groupes quand les droits classiques sont limités à un utilisateur et un groupe. Pour lire les droits ACL d’un fichier ou dossier, on tape getfacl nom_du_fichier.

Notre première page PHP

  1. Créez une page public_html/TD1/echo.php avec le contenu suivant.

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title> Mon premier php </title>
        </head>
       
        <body>
            Voici le résultat du script PHP : 
            <?php
              // Ceci est un commentaire PHP sur une ligne
              /* Ceci est le 2ème type de commentaire PHP
              sur plusieurs lignes */
               
              // On met la chaine de caractères "hello" dans la variable 'texte'
              // Les noms de variable commencent par $ en PHP
              $texte = "hello world !";
    
              // On écrit le contenu de la variable 'texte' dans la page Web
              echo $texte;
            ?>
        </body>
    </html> 
    
  2. Ouvrez cette page dans le navigateur directement depuis votre gestionnaire de fichiers OU de façon équivalente avec une URL en file:// comme :
    file://chemin_de_mon_compte/public_html/TD1/echo.php.

    Que se passe-t-il quand on ouvre un fichier PHP directement dans le navigateur ?
    Pourquoi ?
    Ça vous rappelle le cours 1 j’espère ?

  3. Ouvrez cette page dans le navigateur dans un second onglet en passant par le serveur HTTP de l’IUT :
    http://webinfo.iutmontp.univ-montp2.fr/~mon_login/TD1/echo.php

    Que se passe-t-il quand on demande un fichier PHP à un serveur HTTP ?
    Regardez les sources de la page Web (Clic droit, code source ou Ctrl-U) pour voir ce qu’a vraiment généré PHP.
    N’hésitez pas à relire la partie du cours 1 concernée.

Notre premier dépôt Git

Ce cours de PHP est aussi l’occasion de manipuler le gestionnaire de version Git. Nous allons débuter en créant un dépôt Git, c’est-à-dire un dossier dans lequel la chronologie de toutes modifications pourront être enregistrées.

  1. Créons un dépôt Git sur GitLab (ou GitHub si vous y avez vos habitudes).

    1. Allez sur le GitLab de l’IUT, connectez-vous avec vos login / mot de passe de l’IUT (comme pour accéder aux machines).
    2. Créez un nouveau projet blanc TD-PHP. Pour le groupe ou namespace, choisissez votre nom d’utilisateur qui est tout en bas de la liste.
    3. Récupérez l’adresse de votre projet dans le bouton Clone.

    Note : Vous pouvez utiliser HTTPS ou SSH pour vous connecter. Nous vous recommandons SSH pour ne pas avoir à taper votre login/mot de passe à chaque git push/pull. Vous pouvez aller voir les notes complémentaires au TD1 pour recréer une clé SSH. Si vous utilisez HTTPS, vous aurez besoin d’exécuter d’abord la commande suivante pour que git clone marche.

      # Pour anticiper une erreur due aux certificats de l'IUT
      #              "server certificate verification failed"
      git config --global http.sslverify false
    
    1. Dans le terminal dans le dossier public_html, faites git clone suivi de l’adresse de votre projet.
      # En mode SSH
      ~/public_html$ git clone git@gitlabinfo.iutmontp.univ-montp2.fr:loginIUT/TD-PHP.git
      # Ou en mode HTTPS
      ~/public_html$ git clone https://gitlabinfo.iutmontp.univ-montp2.fr/loginIUT/TD-PHP.git
      
    2. Enfin déplacez le dossier TD1 dans le répertoire TD-PHP créé par le git clone.
  2. Nous allons configurer Git pour qu’il connaisse votre nom et votre adresse email (étudiante), ce qui sera utile quand vous travaillerez en groupe pour savoir qui a enregistré quelle modification :

    git config --global user.name "Votre Prénom et Nom"
    git config --global user.email "votreemail@etu.umontpellier.fr"
    

    Aussi pour nous simplifier la vie plus tard, veuillez exécuter la commande suivante. Cela change l’éditeur de texte qu’ouvre Git par défaut.

    git config --global core.editor "gedit --new-window -w"
    
  3. Pour en savoir plus sur l’état de Git, exécutez la commande git status.

    La partie qui nous intéresse tout de suite est la suivante

    Fichiers non suivis:
      (utilisez "git add <fichier>..." pour inclure dans ce qui sera validé)
       
      TD1/
    

    Elle nous dit que le suivi des modifications n’est pas activé pour le dossier TD1.

  4. Avant de versionner le dossier TD1, demandons à Git d’ignorer les fichiers générés par PhpStorm (dossier .idea). Pour ceci, créez un fichier TD1/.gitignore contenant le texte suivant

    /.idea/
    
  5. Exécutez la commande git add TD1 pour suivre les modifications de tous les fichiers dans le répertoire TD1.

    Ré-exécutez la commande git status pour voir le changement :

    Modifications qui seront validées :
      (utilisez "git rm --cached <fichier>..." pour désindexer)
       
    	nouveau fichier : TD1/echo.php
    
  6. Git a vu des modifications dans le fichier TD1/echo.php mais il reste encore à les enregistrer. Pour ceci, exécutez la commande git commit et écrivez un petit message de validation pour s’y retrouver plus tard (avant les lignes commentées avec #), puis fermez l’éditeur.

  7. Une dernière exécution de git status nous renseigne que nous avons bien tout validé.

Les bases de PHP

Différences avec Java

  1. Le code PHP doit être compris entre la balise ouvrante <?php et la balise fermante ?>
  2. Les variables sont précédées d’un $
  3. Il n’est pas obligatoire de déclarer le type d’une variable (cf. plus loin dans le TD)

Les chaînes de caractères

Différentes syntaxes existent en PHP ; selon les délimiteurs que l’on utilise, le comportement est différent.

Avec guillements simples

Les chaînes de caractères avec simple quote ' sont conservées telles quelles (pas de caractères spéciaux \n…). Les caractères protégés sont ' et \ qui doivent être échappés avec un anti-slash comme ceci \' et \\;

La concaténation de chaînes de caractères se fait avec l’opérateur point .

$texte = 'hello' . 'World !';

Avec guillements doubles

Pour simplifier le code suivant

$prenom="Helmut";
echo 'Bonjour ' . $prenom . ', ça farte ?';

PHP propose une syntaxe de chaîne de caractères entourées de double quotes " qui permet d’écrire

$prenom="Helmut";
echo "Bonjour $prenom, ça farte ?";

Les chaînes de caractères avec double quotes " peuvent contenir :

Astuce : En cas de problèmes avec le remplacement de variables, rajoutez des accolades autour de la variable à remplacer. Cela marche aussi bien pour les tableaux "{$tab[0]}", les attributs "{$objet->attribut}" et les fonctions "{$objet->fonction()}".

Documentation : Les chaînes de caractères sur PHP.net

Qu’écrivent chacun des echo suivants ?

$prenom = "Marc";

echo "Bonjour\n " . $prenom;
echo "Bonjour\n $prenom";
echo 'Bonjour\n $prenom';

echo $prenom;
echo "$prenom";

Testez votre réponse en rajoutant ce code dans echo.php.

Astuce:

  • Vous pouvez aussi tester ce code dans le terminal (sans passer par un serveur Web et un navigateur). Pour cela, écrivez votre script dans echo.php (n’oubliez pas la balise ouvrante <?php en début de fichier). Puis, dans le terminal, exécutez php echo.php.

    Ce fonctionnement est plus proche de ce que vous auriez fait en Python avec python script.py, ou en Java avec javac program.java puis java program .

Affichage pour le débogage

Les fonctions print_r et var_dump affichent les informations d’une variable et sont très utiles pour déboguer notamment les tableaux ou les objets.
La différence est que print_r est plus lisible car var_dump affiche plus de choses (les types).

Les tableaux associatifs

Les tableaux en PHP peuvent aussi s’indexer par des entiers ou des chaînes de caractères :

Source : Les tableaux sur php.net

Exercices d’application

  1. Dans votre fichier echo.php, créez trois variables $marque, $couleur et $immatriculation contenant des chaînes de caractères de votre choix, et une variable $nbSieges contenant un nombre ;

  2. Créez la commande PHP qui écrit dans votre fichier le code HTML suivant (en remplaçant bien sûr la marque par le contenu de la variable $marque …) :

    <p> Voiture 256AB34 de marque Renault (couleur bleu, 5 sieges) </p>
    
  3. Faisons maintenant la même chose mais avec un tableau associatif voiture:

    • Créez un tableau $voiture contenant quatre clés "marque", "couleur", "immatriculation" et "nbSieges" et les valeurs de votre choix ;

    • Utilisez l’un des affichages de débogage (e.g. var_dump) pour vérifier que vous avez bien rempli votre tableau ;

    • Affichez le contenu de la “voiture-tableau” au même format HTML

    <p> Voiture 256AB34 de marque Renault (couleur bleu, 5 sieges) </p>
    
  4. Maintenant nous souhaitons afficher une liste de voitures :

    • Créez une liste (un tableau indexé par des entiers) $voitures de quelques “voitures-tableaux” ;

    • Utilisez l’un des affichages de débogage (e.g. var_dump) pour vérifier que vous avez bien rempli $voitures ;

    • Modifier votre code d’affichage pour écrire proprement en HTML un titre “Liste des voitures :” puis une liste (<ul><li>...</li></ul>) contenant les informations des voitures.

    • Rajoutez un cas par défaut qui affiche “Il n’y a aucune voiture.” si la liste est vide.
      (On vous laisse chercher sur internet la fonction qui teste si un tableau est vide)

  5. Enregistrez votre travail dans Git :

    1. Faites git status pour connaître l’état du dépôt Git.
    2. Faites git add TD1/echo.php pour lui dire d’enregistrer les modifications dans echo.php.
    3. Faites git commit pour valider l’enregistrement des modifications et écrivez un petit message de validation (comme e.g. “TD1 Exo4 Affichage de variables”).
    4. Finissez par git status pour voir que tout s’est bien passé.

La programmation objet en PHP

PHP était initialement conçu comme un langage de script, mais est passé Objet à partir de la version 5. Plutôt que d’utiliser un tableau, créons une classe pour nos voitures.

Un exemple de classe PHP

  1. Créer un fichier Voiture.php avec le contenu suivant

    <?php
    class Voiture {
       
        private $immatriculation;
        private $marque;
        private $couleur;
        private $nbSieges; // Nombre de places assises
       
        // un getter      
        public function getMarque() {
            return $this->marque;
        }
       
        // un setter 
        public function setMarque($marque) {
            $this->marque = $marque;
        }
       
        // un constructeur
        public function __construct(
          $immatriculation,
          $marque, 
          $couleur, 
          $nbSieges
       ) {
            $this->immatriculation = $immatriculation;
            $this->marque = $marque;
            $this->couleur = $couleur;
            $this->nbSieges = $nbSieges;
        } 
                  
        // Pour pouvoir convertir un objet en chaîne de caractères
        public function __toString() {
          // À compléter dans le prochain exercice
        }
    }
    ?>
    

    Notez les différences avec Java :

    • Pour accéder à un attribut ou une fonction d’un objet, on utilise le -> au lieu du . de Java.
    • En PHP, $this est obligatoire pour accéder aux attributs et méthodes d’un objet.
    • On doit mettre le mot-clé function avant de déclarer une méthode
    • Le constructeur ne porte pas le nom de la classe, mais s’appelle __construct().
    • En PHP, on ne peut pas avoir deux fonctions avec le même nom, même si elles ont un nombre d’arguments différent. En particulier, il ne peut y avoir au maximum qu’un constructeur.
  2. Créez des getter et des setter pour $couleur, $immatriculation et $nbSieges ;
    (PhpStorm peut les générer automatiquement pour vous avec Clic droit > Generate)

  3. L’intérêt des setter est notamment de vérifier ce qui va être écrit dans l’attribut. Comme l’immatriculation est limitée à 8 caractères, codez un setter qui ne stocke que les 8 premiers caractères de l’immatriculation dans l’objet. Mettez aussi à jour le constructeur pour ne garder que les 8 premiers caractères.
    (Documentation PHP : fonction substr substring).

  4. Remplissez __toString() qui permet de convertir une voiture en chaine de caractères.

  5. Testez que votre classe est valide pour PHP : la page générée par le serveur Web webinfo à partir de Voiture.php ne doit pas afficher d’erreur.
    Demandez donc votre page à webinfo http://webinfo.iutmontp.univ-montp2.fr/~mon_login/TD-PHP/TD1/Voiture.php.

  6. Enregistrez votre travail à l’aide de git add et git commit. Aidez-vous toujours de git status pour savoir où vous en êtes.

Utilisation de la classe Voiture

Nous voulons utiliser la classe Voiture dans un autre script testVoiture.php. Il faut donc inclure le fichier Voiture.php, qui contient la déclaration de la classe de Voiture, dans testVoiture.php pour pouvoir l’utiliser.

Require

PHP a plusieurs façons d’inclure un fichier :

Notez qu’il existe include et include_once qui ont le même effet mais n’émettent qu’un warning si le fichier n’est pas trouvé (au lieu d’une erreur).

Exercice

  1. Créez un fichier testVoiture.php contenant le squelette HTML classique (<html>,<head>,<body> …)

  2. Dans la balise <body>, on va vouloir créer des objets Voiture et les afficher :

    • Incluez Voiture.php à l’aide de require_once comme vu précédemment ;

    • Initialisez une variable $voiture1 de la classe Voiture avec la même syntaxe qu’en Java ;

    • Affichez cette voiture avec un echo, ce qui appellera implicitement la méthode __toString().
  3. Testez votre page sur webinfo :
    http://webinfo.iutmontp.univ-montp2.fr/~mon_login/TD-PHP/TD1/testVoiture.php

Déclaration de type

Optionnellement, on peut déclarer les types de certaines variables PHP :

  • les arguments d’une fonction
  • la valeur de retour d’une fonction
  • les attributs de classe

Ces types sont vérifiés à l’exécution, contrairement à Java qui les vérifie à la compilation.
La déclaration de type est cruciale pour que l’IDE devine correctement le type des objets et pour que vous puissiez bénéficier pleinement de l’autocomplétion de l’IDE.

Exemple:

class Requete {
  // Déclaration de type d'un attribut
  string $url;
  string $methode; // GET ou POST
}
class Reponse {
  int $code; // 200 OK ou 404 Not Found
  string $corps; // <html>...
}

// Déclaration de type d'un paramètre de fonction (Requete)
// et d'un retour de fonction (Reponse)
function ServeurWeb(Requete $requete) : Reponse {
   // Corps de la fonction ...
}

Documentation PHP

  1. Mettez à jour Voiture.php pour déclarer marque, couleur et immatriculation comme string, et nbSieges comme int dans
    • les attributs de classes,
    • les arguments des setters,
    • les sorties des getters,
    • les arguments du constructeur,
    • le type de sortie de __toString().

    Note : Pour pouvoir utiliser les déclarations de type, il faut indiquer à PhpStorm que vous voulez utiliser la version 8.1 du langage PHP. Pour ceci, cliquez en bas à droite de l’IDE sur PHP: *.* pour basculer vers PHP: 8.1.

  2. Testez que PHP vérifie bien les types : dans testVoiture.php, appelez une fonction qui attend en argument un string en lui donnant à la place un tableau (le tableau vide [] par exemple). Vous devez recevoir un message comme suit

    PHP Fatal error:  Uncaught TypeError: Voiture::__construct(): Argument #1 ($marque) must be of type string, array given
    
  3. Enregistrez votre travail à l’aide de git add et git commit. Aidez-vous toujours de git status pour savoir où vous en êtes.

Interaction avec un formulaire

  1. Créez un fichier formulaireVoiture.html, réutilisez l’entête du fichier echo.php et dans le body, insérez le formulaire suivant:

    <form method="get" action="creerVoiture.php">
      <fieldset>
        <legend>Mon formulaire :</legend>
        <p>
          <label for="immatriculation_id">Immatriculation</label> :
          <input type="text" placeholder="256AB34" name="immatriculation" id="immatriculation_id" required/>
        </p>
        <p>
          <input type="submit" value="Envoyer" />
        </p>
      </fieldset> 
    </form>
    
  2. Souvenez-vous (ou relisez le cours 1) de la signification des attributs action de <form> et name de <input>

    Rappels supplémentaires :

    • L’attribut for de <label> doit contenir l’identifiant d’un champ <input> pour que un clic sur le texte du <label> vous amène directement dans ce champ.

    • l’attribut placeholder de <input> sert à écrire une valeur par défaut pour aider l’utilisateur.

  3. Créez des champs dans le formulaire pour pouvoir rentrer la marque, la couleur et le nombre de sièges (<input type="number">) de la voiture.

  4. Souvenez-vous (ou relisez le cours 1) de ce que fait un clic sur le bouton “Envoyer”.
    Vérifiez en cliquant sur ce bouton.

    Comment sont transmises les informations ?
    Comment s’appelle la partie de l’URL contenant les informations ?

  5. Prenez l’habitude d’enregistrer régulièrement votre travail sous Git. Vous pouvez utiliser la commande git log pour voir l’ensemble de vos enregistrements passés.

  1. Créez un fichier creerVoiture.php :

    1. Aidez-vous si nécessaire du cours 1 pour savoir comment récupérer l’information envoyée par le formulaire.
    2. Vérifiez que creerVoiture.php reçoit bien des informations dans le query string. Pour cela, vérifiez que le tableau $_GET n’est pas vide.
    3. En reprenant du code de testVoiture.php, faites que creerVoiture.php affiche les informations de la voiture envoyée par le formulaire.
    4. Bien sûr, testez votre page en la demandant à webinfo.
  2. Afin d’éviter que les données du formulaire n’apparaissent dans l’URL, modifiez le formulaire pour qu’il appelle la méthode POST :

    <form method="post" action="creerVoiture.php">
    

    et côté creerVoiture.php, mettez à jour la récupération des paramètres :

    1. Souvenez-vous (ou relisez le cours 1) de par où passe l’information envoyée par un formulaire de méthode POST ;
    2. Changez creerVoiture.php pour récupérer l’information envoyée par le formulaire ;
    3. Essayez de retrouver l’information envoyée par le formulaire avec les outils de développement (Onglet Réseau).
  3. Avez-vous pensé à enregistrer vos modifications sous Git ? Faites le notamment en fin de TD pour retrouver plus facilement où vous en êtes la prochaine fois.
    Note : Vous pouvez faire git diff à tout moment pour voir les modifications que vous avez faites depuis la dernière validation (commit).

Travailler depuis chez vous en local

Si vous voulez éviter de vous connecter sur webinfo (en FTP ou SSH) pour travailler depuis chez vous, vous pouvez installer un serveur Apache + PhP + MySql + PhpMyAdmin sur votre machine. Vous pourrez alors lancer votre script avec l’URL localhost.

Installation tout en un

Nous vous proposons d’utiliser XAMPP qui est disponible sur Windows, Mac & Linux :

Attention, pensez à modifier le php.ini pour mettre display_errors = On et error_reporting = E_ALL, pour avoir les messages d’erreurs. Car par défaut, le serveur est configuré en mode production (display_errors = Off).

Pour localiser le fichier php.ini, exécutez la commande suivante dans un script PHP via votre navigateur:

echo php_ini_loaded_file();

Votre php.ini se trouve dans /opt/lampp/etc/ pour une installation avec XAMP sous Linux.

Il faut redémarrer Apache pour que les modifications soient prises en compte. Dans le terminal, exécutez

sudo /opt/lampp/lampp stop
sudo /opt/lampp/lampp start

Installation depuis les paquets

Pour une installation depuis les paquets de Apache + MySql + Php + PhpMyAdmin sous Linux, votre php.ini se trouve dans /etc/php/8.1/apache2/ et le redémarrage du serveur se fait avec

sudo service apache2 restart