Déploiement d’une interface de communication web




Module SIN414: Programmation WEB HTML, PHP, SQL




Durée : 4h


Objectifs à atteindre : Acquérir les compétences indispensables au développement de sites internet en PHP. 

Savoir manipuler les données d'une base de données relationnelle à partir de l'application. 


Niveau des connaissances envisageable : Première


Pré requis :         - Connaître la structure générale d'une page web, tableaux, liens, principe de fonctionnement.. 

       - Connaître les éléments de programmation procédurale (langage C de préférence), algorithmique de base.


Logiciels utilisés :         

       - Notepad ++ ou VSCode avec le plugin live serveur 'extensions)           merci à Théo pour l'information !

       - XAMP        

       - My SQL ou MAriaDb


Outils mobilisés, le cas échéant : tous les tutoriels disponibles sur internet


Webographie :

http://www.siteduzero.com/tutoriel-3-13484-votre-premiere-page-xhtml.html  (Par M@teo21, licence CC)

http://doc.ubuntu-fr.org/programmation  (licence CC BY-SA v3.0)

http://www.siteduzero.com/tutoriel-3-14668-concevez-votre-site-web-avec-php-et-mysql.html  (Par M@teo21, licence CC)

Le langage PHP

PHP est un langage de script interprété côté serveur (comme les scripts CGI, ASP, ...). 

Sa syntaxe est voisine de celle du C. 

Le serveur interprète le code PHP et génère du code HTML transmis au client. Il offre donc un haut niveau de sécurité car le code originel n’est jamais transmis au client, contrairement aux programmes exécutés côté client.

PHP est distribué sous licence GNU GPL, ce qui permet de l’utiliser librement et gratuitement. De nombreux développeurs ont profité de l'Open Source pour développer des modules prêts à l'usage et paramétrables à volonté.

Les modules serveurs de PHP sont implémentés, entre autre, sur les serveurs Apache. Ce type de serveur est généralement installé dans les distributions de linux. Sous Windows, il est possible d’installer un tel serveur à l’aide du logiciel Wampserver (http://www.wampserver.com/download.php). La solution serveur web de Microsoft (IIS) est aussi en mesure d’interpréter les scripts PHP.

PHP travaille généralement avec une base de données MySQL. Elle est installée par défaut avec Wampserver. Sous linux, il faut procéder à son installation.

Les fichiers correspondants à cette partie se trouvent dans le dossier PHP.

    1. Documentation

Il existe sur internet de très nombreux sites traitant du langage PHP. Le manuel de référence en français est consultable à l’URL suivante : http://www.php.net/manual/fr/ . 

    1. Installation des serveurs apache et mysql
      1. Xamp

Récupérer XAMP présent dans les ressources et copier IMPERATIVEMENT les fichiers dans le c:\ sinon il y aura des problèmes de fonctionnement.

Lancer le fichier



Créer un dossier activitesin dans C:\xampp\htdocs\  ATTENTION : si il existe déjà effacer le !


Vous devez avoir cette arborescence :

C:\xampp\htdocs\activitesin



Lancer le serveur apache à l'aide l'icône



Puis démarrer le Module Apache

      1. Mise en pratique

Afficher le contenu d’une variable

Toutes les variables doivent être précédées du signe $. Les variables en langage PHP peuvent être de trois types : scalaires, tableaux, tableaux associatifs.

Ouvrez le fichier variables.php et copiez le dans le dossier activitesin puis ouvrez-le avec un éditeur de texte :

Testez le résultat dans votre navigateur : http://localhost/activitesin/variables.php

Remarques :

  • En PHP, on peut utiliser " ou  ' pour définir une chaine de caractères mais l’affichage sera différent si on utilise des variables :

echo "a + b = $somme"; //Affiche : a + b = 15

echo 'a + b = $somme'; //Affiche : a + b = $somme
  • On peut introduire du code php dans une page HTML où l’on veut. Mais il est pratique courante de n’écrire en HTML uniquement le début et la fin de la page. Tout le corps de la page est codé en PHP.
    1. Les instructions de base
      1. Les conditions
  • if (condition) {action ;} else {actions ;}

$age = 15 ;

$majorite = 18 ;

if($age>=$majorite)

{

       echo'Vous êtes majeur' ;

}

else

{

       echo'Vous êtes mineur' ;

}

Pour enchainer les tests, on peur utiliser l’instruction elseif.

  • switch(condition) 
    {
      case valeur1 : 
         action ; 
      break ; 
       … 
      case valeurn : 
         action ; 
      break ;
      default : 
         action ; 
      break ;
    }

$nombre=4; //Modifier la valeur de $nombre 


switch($nombre)

{

   case 1:

      echo "\$nombre est égal à 1";

   break;

   case 2:

      echo "\$nombre est égal à 2";

   break;

   case 3:

      echo "\$nombre est égal à 3";

   break;

   default:

      echo "\$nombre est inférieur à 1 ou supérieur à 3";

   break;

 

}


Remarque : Le caractère \ est, comme en C/C++, le caractère d’échappement. Il indique à l’interpréteur  de commandes PHP de ne pas tenir compte du caractère qui suit. Le $ ne sera pas interprété mais afficher. 

De même, dans la commande :

echo 'Il est l'heure';

Provoque une erreur à cause de l’apostrophe qui ferme prématurément  la chaine de caractères.

La bonne écriture est :

echo 'Il est l\'heure'; ou echo "Il est l'heure";


Les boucles

  • for(compteur; condition; évolution)

{

action ;

}

 for($compt = 1; $compt <= 10 ; $compt++ )

 {

      echo "$compt / ";

 }
  • while(condition)

{

action ;

}

$compt = 1;  

while($compt < 10 )

{

             echo "$compt / ";

       $compt++ ;

}
  • do 

{

action ;

}

while(condition)

$compt = 10;  

do

{

             echo "$compt / ";

       $compt++ ;

}

while($compt < 10 ) ;
  • foreach(tableau as [clef =>] valeur) 

{

action ;

}

$a = array(

    "un" => 1,

    "deux" => 2,

    "trois" => 3,

    "dix-sept" => 17

);


foreach ($a as $k => $v) 

{

    echo "\$a[$k]=>$v.\n";  

}

//affiche $a[un]=>1. $a[deux]=>2. $a[trois]=>3. $a[dix-sept]=>17.


    1. Interaction avec l’utilisateur

Elle se fait principalement au moyen d’un formulaire HTML qui permet de transmettre les variables au script php.

      1. Exemple minimal

Fichier formulaire_post.php


Les données du formulaire sont soumises au serveur qui les traitera dans la page indiquée dans le paramètre action. Ici, on utilise la valeur de $_SERVER['PHP_SELF'] qui renvoi l’URL du script courant. 

La méthode POST utilisée ici indique la façon dont PHP effectue le transfert des données : elles sont « postées » dans un tableau associé nommé $_POST. Ce transfert est totalement transparent et l’utilisateur ne peut pas modifier les valeurs transmises. Le nom de l’élément de formulaire constitue la clé de ce tableau.

Elément du tableau

Variable associée

<input type="text" name="prenom" />

$_POST["prenom"]

<input type="submit" name="valider" value="Valider" />

$_POST["valider"]


 


Il existe une autre méthode pour transmettre les données de formulaire au serveur. C’est la méthode GET. Cette méthode construit une chaine de caractères constituée des noms des éléments du formulaire et des valeurs qu’ils contiennent séparés par des &, puis les associe à l’URL de la page indiquée dans le paramètre action du formulaire à l’aide du caractère « ? ».

Ici, nous obtiendrions avec la méthode GET l’URL suivante :

http://localhost/activitesin/formulaire_get.php?prenom=Michel&valider=Valider

Fichier formulaire_get.php

 
      1. Exercice 1

Réalisez un formulaire proposant un menu composé :

  • d'une liste d'entrées,
  • d'une liste de plats,
  • d'une liste de desserts.

Associez un prix à chaque entrée, plat ou dessert. 

$entree = array("Foie Gras Maison"=>14.00, 

                       "Saumon Fumé"=>12.00, 

                       "Terrine Maison et confiture d'oignons"=>9.00, 

                       "Escargots de Bourgogne"=>12.00); 

       

$plat = array("Entrecôte Poêlée"=>14.80,                        "Gigot d'Agneau"=>14.50,

                       "Confit de Canard"=>14.00,                        "Faux Filet Poêlé"=>13.00);

       

$dessert = array("Mousse au Chocolat"=>6.00,                        "Ile Flottante"=>6.00,                        "Fondant au Chocolat"=>6.50,                        "Crème Caramel"=>6.00,                        "Tarte Normande"=>6.50,

                       "Tarte à l'Abricot"=>6.50);

Un internaute doit pouvoir choisir une entrée, un plat et un dessert, et valider son choix. 

echo'<p><select name="entree">';

foreach($entree as $choix=>$prix)

{        echo'<option value="'.$choix.'">'.$choix.' : '.$prix.'</option>';

}

echo'</select></p>';


echo'<input type="submit" name="valider" value="Valider" /></p>';

Affichez alors le menu choisi, ainsi que l'addition.

$total=0;        

echo'<p>Bonjour !</p>';         

echo'<p>Rappel de votre choix :</p>'; 

foreach($entree as $choix=>$prix)

{        if($choix==$_POST["entree"]) 

       {

               echo $choix.' : '.$prix.'<br>';

               $total+=$prix;

       }

}


echo'<p>Total : '.$total.'</p>';

Présentez ensuite les choix de menu en les alignant à l'aide d'un tableau HTML.

echo'<table border="1" align="center" width="50%">';


#création d'une ligne

echo'<tr>';

#création d'une cellule


echo'<td>';

foreach($entree as $choix=>$prix)

{        if($choix==$_POST["entree"]) 

       {

               echo $choix.'</td><td align="right">'.$prix.'</td>';

               $total+=$prix;

       }

}

echo'</td>';

echo'</tr>';

#on ferme les balises proprement


echo'</table>';


 

 


Traitement des données

Lorsqu’un script PHP produit des informations, il faut les stocker quelque part sinon, elles seront irrémédiablement perdues lorsque le serveur renverra la page html produite par le script au client. 

Pour stocker des données, il existe deux solutions: 

  • les enregistrer dans un fichier texte sur le serveur (quelque part dans l'arborescence de votre hébergement), 
  • les enregistrer dans une base de données relationnelle. 

La sauvegarde dans un fichier présente l’avantage de pouvoir accéder rapidement aux données qu’il contient sans avoir à utiliser de logiciels tiers. Cependant, les recherches, modifications ou suppressions de données sur une partie de l'information stockée n’est pas facile. Il est encore plus difficile de croiser des informations provenant de plusieurs fichiers.

Les bases de données ont été conçues pour ça. Les informations y sont stockées sous forme de tables contenant des enregistrements. Les opérations sur les tables et les enregistrements sont réalisées à l’aide d’un langage d’interrogation de base de données comme SQL (Structured Query Language) interprété par un logiciel spécialisé qu’on appelle SGBD (Système de Gestion de Base de Données).  Il constitue le serveur de base de données.

Plusieurs SGBD sont disponibles sur le marché. Citons, entre autre, Oracle, Microsoft SQL Server, MySQL, SQLite…

Dans la suite de se document, nous ne traiterons que le serveur de base de données MySQL, qui est généralement, le plus souvent associé à PHP.

    1. Utilisation des fichiers
      1. Ouvrir un fichier

L’ouverture d’un fichier se fait grâce à la fonction fopen(). En voici sa syntaxe :

resource fopen(string $filename , string $mode)

Elle permet la création d’une ressource sur le fichier nommé et l’ouvre selon le mode indiqué en écriture ou en lecture :

Différents modes disponibles

r

ouverture en lecture seulement

w

ouverture en écriture seulement (la fonction crée le fichier s'il n'existe pas)

a

ouverture en écriture seulement avec ajout du contenu à la fin du fichier (la fonction crée le fichier s'il n'existe pas)

r+

ouverture en lecture et écriture

w+

ouverture en lecture et écriture (la fonction crée le fichier s'il n'existe pas)

a+

ouverture en lecture et écriture avec ajout du contenu à la fin du fichier (la fonction crée le fichier s'il n'existe pas)
      1. Lire un fichier

Fichier lire_fichier.php

<?php

$filename = "menu.txt"; // Fichier à lire

$handle = fopen($filename, "r");  // Ouverture en lecture

while (!feof($handle))  // Tant qu’on est pas à la fin du fichier

{

       $line = fgets($handle);  // Lire la ligne courante

       echo $line."<br>";  // Afficher la ligne puis retour à la ligne

}

fclose($handle); // Libération de la ressource

?>

Remarque : 

  • Pour lire le fichier tout entier, on peut utiliser la fonction fread()
  • Pour un caractère du fichier, on utilise la fonction fgetc().
      1. Ecrire dans un fichier

Fichier ecrire_fichier.php

<?php

$filename = 'test.txt';

$somecontent = "\r\nCeci doit être ajouté à la fin du fichier";


// Le fichier est-il accessible en écriture ?

if (is_writable($filename)) 

{


    // Ouverture du fichier en ajout (écriture à la fin)

    if (!$handle = fopen($filename, 'a')) 

    {

         echo "Impossible d'ouvrir le fichier ($filename)";

         exit;

    }


    // Ecriture à la fin du fichier

    if (fwrite($handle, $somecontent) === FALSE) 

    {

        echo "Impossible d'écrire dans le fichier ($filename)";

        exit;

    }


    echo "L'écriture de :<br>($somecontent)<br>dans le fichier ($filename) a réussi";

    fclose($handle);


} 

else 

{

    echo "Le fichier $filename n'est pas accessible en écriture.";

}

?>
      1. Exercice 2

Créez une page HTML (inscription.html) contenant un formulaire d’inscription à la formation STI2D SIN avec les champs suivants :

  • Nom
  • Prénom
  • Etablissement
  • Ville

Le formulaire sera soumis à un script PHP (ajout.php) permettant d’écrire les données recueillies dans un fichier texte appelé stagiaires.

Un second script php (stagiaires.php) doit permettre d’afficher le contenu du fichier stagiaire.txt. 
      1. Solution minimale
  • inscription.html : Formulaire d’inscription des stagiaires

<HTML>

<HEAD>

       <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>

           <TITLE>Formation STI2D SIN4</TITLE>

</HEAD>

<BODY>

<h1><center>Formation STI2D SIN4</center></h1>

<h2>Formulaire d'inscription</center></h2>

<br><br>


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

<p>Nom : <input type="text" name="nom" ></p>

<p>Prénom : <input type="text" name="prenom"></p>

<p>Etablissement : <input type="text" name="etablissement"></p>

<p>Ville : <input type="text" name="ville"></p>

<input type="submit" name="valider" value="Valider">

</form>

</BODY>

</HTML>
  • ajout.php : Ajout des données du formulaire dans le fichier stagiaires.txt

<HTML><HEAD>        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>              <TITLE>Formation STI2D SIN4</TITLE></HEAD><BODY>

<?php

$filename = 'stagiaires.txt';

/* Linux : Le fichier doit exister et avoir 777 comme permission pour que Apache puisse écrire dedans

sinon, vous pouvez positionner les permissions du dossier www à 777 ce qui est fortement déconseillé */

$stagiaire =        $_POST["nom"].";".

               $_POST["prenom"].";".

               $_POST["etablissement"].";".

               $_POST["ville"]."\r\n";

// \r\n introduit un saut de page dans un fichier texte (compatible Windows et linux)

$handle = fopen($filename, 'a+');

if(fwrite($handle, $stagiaire) === FALSE) 

{

    echo "Impossible d'écrire dans le fichier ($filename)";

    exit;

}

echo "Stagiaire enregistré";

fclose($handle);

echo "<br><br><a href='stagiaires.php'>Liste des stagiaires</a>";

echo "<br><a href='inscription.html'>Inscrire un nouveau stagiaire</a>";

?>

</BODY></HTML>
  • stagiaires.php : Affiche la liste des stagiaires contenus dans le fichier stagiaires.txt

<HTML>

<HEAD>

       <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>

           <TITLE>Formation STI2D SIN4</TITLE>

</HEAD>

<BODY>

<h1><center>Formation STI2D SIN4</h1>

<h2>Liste des stagiaires</center></center></h2>

<br><br>


<?php

$filename = 'stagiaires.txt';


$handle = fopen($filename, 'r');

while (! feof ($handle))  // Tant qu’on est pas à la fin du fichier

{

       $line = fgets($handle);  // Lire la ligne courante

       echo $line."<br>";  // Afficher la ligne puis retour à la ligne

}


fclose($handle);


?>

</BODY>

</HTML>

Le séparateur de champs est un « ; ». Il existe une fonction qui permet de découper un fichier en fonction d’un caractère particulier nommé délimiteur : fgetcsv().

Le script suivant, stagiaires_csv.php, affiche le contenu du fichier texte découpé par ligne et par champs séparés par des « ; » et affiche le résultat dans un tableau :

 

<HTML>

<HEAD>

       <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>

           <TITLE>Formation STI2D SIN4</TITLE>

</HEAD><BODY>

<h1><center>Formation STI2D SIN4</center></h1>

<h2><center>Liste des stagiaires</center></h2>

<br><br>

<?php

$filename = 'stagiaires.txt';


$handle = fopen($filename, 'r');

echo "<table align='center' border='1' cellspacing='0'>";

echo "<tr><td align='center' bgcolor='#CCCCCC'>NOM</td>";echo "<td align='center' bgcolor='#CCCCCC'>PRENOM</td>";echo "<td align='center' bgcolor='#CCCCCC'>ETABLISSEMENT</td>";echo "<td align='center' bgcolor='#CCCCCC'>VILLE</td>";echo "<tr>";

//fgetcsv retourne FALSE si le fichier est vide

while (($cols = fgetcsv($handle, 1000, ";")) != FALSE)

{

       echo "<tr>";

       foreach($cols as $key => $val) 

       {

               echo "<td>$val</td>";

            }

}

echo "</tr>";

echo "</table>";

fclose($handle);

?>

</BODY></HTML>

Si l’affichage des données contenues dans un fichier texte n’est pas particulièrement compliqué, il est plus difficile d’y rechercher des données précises.

Par exemple, l’utilisateur recherche tous les stagiaires d’un même établissement ou d’une même ville. 

Pour faciliter le traitement de ce type d’opération, il est préférable d’utiliser une base de données.

      1. Exercice 3

Mettez les données de la question 1.7.2 dans un fichier "Faites_votre_menu.txt".

Créé avec HelpNDoc Personal Edition: Générateur de documentation et EPub facile