Médiaforma

All posts tagged exercice

Testez si vous avez compris comment utiliser un plugin

Installez et utilisez le plugin Endless Div Scroll (ce plugin se trouve dans la catégorie DOM and Other Plugins). Ecrivez le code nécessaire pour obtenir le résultat suivant (les images sont celles fournies avec le plugin. Elles se trouvent dans le dossier imgs) :

 

 

 

Solution

Copiez le dossier imgs et le fichier endless_scroll_min.js dans le dossier c:\jquery.

Tapez le code suivant et sauvegardez-le sous le nom endless-scroll.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Scrolling sans fin</title>
    <style>
      .es {
        font-family:Verdana;
        font-size:20px;
        margin:0px auto 0px auto;
        background-color:#ffff99;
        border-radius: 15px;
        border:1px solid #cccc33;
        padding:4px;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <script src="endless_scroll_min.js"></script>

    <div id="divId""><img src="imgs/i0.jpg"><img src="imgs/i1.jpg"><img src="imgs/i2.jpg"><img src="imgs/i3.jpg"><img src="imgs/i4.jpg"><img src="imgs/i5.jpg"><img src="imgs/i6.jpg"><img src="imgs/i7.jpg"><img src="imgs/i8.jpg"><img src="imgs/i9.jpg"><img src="imgs/ia.jpg"><img src="imgs/ib.jpg"><img src="imgs/ic.jpg"><img src="imgs/id.jpg"></div><br>
    <div id="spanId">Ce texte scrolle sans fin de la droite vers la gauche grâce au plugin endless-scroll. </div>

    <script>
      $(function() {
        $("#divId").endlessScroll({ width: "100%", height: "100px", steps: -2, speed: 50, mousestop: true });
        $("#spanId").endlessScroll({ width: "500px", height: "30px", steps: -1, speed: 20, mousestop: true });
       });
    </script>
  </body>
</html>

En utilisant Notepad++, créez un fichier texte dans lequel vous écrirez quelques lignes de données :

Enregistrez ce fichier sous le nom data.txt. Ouvrez-le et affichez son contenu avec quelques lignes de PHP.

Solution

Faites une pause dans la vidéo et résolvez ce problème. Vous reprendrez la lecture de la vidéo pour prendre connaissance de la solution.

Voici le code à utiliser :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Lecture d'un fichier en PHP</title>
  </head>
  <body>
    <?php
      $handle=fopen("data.txt","r");
      while (!feof($handle))
        echo fgets($handle)."<br>";
      fclose($handle);
    ?>
  </body>
</html>

Le fichier data.txt est ouvert. Le résultat de la fonction fopen est mémorisé dans la variable $handle, ce qui permettra de manipuler le fichier.

Une boucle while est alors utilisée pour parcourir le fichier.

Cette boucle se poursuit tant que la fin du fichier n’est pas atteinte. Les données sont lues lignne par ligne et affichées avec l’instruction echo.

Lorsque la boucle while est terminée, le fichier est fermé avec la fonction fclose.


Définissez un formulaire dans lequel sont saisis le prénom et le nom de l’utilisateur. Mémorisez ces informations dans la page de traitement du formulaire. Ajoutez dans cette page un lien vers une troisième page et vérifiez que les cookies ont bien été mémorisés.

Solution

Faites une pause dans la vidéo et écrivez les trois pages demandées dans l’exercice. Reprenez la lecture de la vidéo pour avoir des informations détaillées sur ces trois pages.

Voici le code correspondant au formulaire de saisie :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Transission de données par un formulaire</title>
  </head>
  <body>
    <form name="MonFormulaire" method="post" action="traitement2.php">
      <table><tr><td><label>Prénom</label></td>
      <td><input type="text" name="prenom"></td></tr>
      <tr><td><label>Nom</label></td>
      <td><input type="text" name="nom"></td></tr>
      <tr><td><input type="submit" name="Nom" value="Envoyer"></td>
      <td></td></tr>
    </table>
    </form>
  </body>
</html>

Ce formulaire est traditionnel. Il permet de saisr un prénom et un nom. Lorsque le bouton Envoyer est cliqué, le script traitement2.php est exécuté.

 

Voici le code de traitement du formulaire :

<?php
  if (isset($_POST["prenom"]))
    setcookie("prenom", $_POST["prenom"], time()+24*3600, null, null, false, true);
  if (isset($_POST["nom"]))
    setcookie("nom", $_POST["nom"], time()+24*2600, null, null, false, true);
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Traitement des données envoyées par formulaire</title>
  </head>
  <body>
    Les cookies nom et prenom ont été mémorisés.<br><br>
  <a href="verif-cookies.php">Cliquez ici pour le vérifier</a>
  </body>
</html>

La première instruction vérifie si le paramètre prenom existe dans le tableau superglobal $_POST. Dans l’affirmative, le cookie prenom est créé. Sa durée de vie est de 24 heures.

La deuxième instruction vérifie si le paramètre nom existe dans le tableau superglobal $_POST. Dans l’affirmative, le cookie nom est créé. Sa durée de vie est également de 24 heures.

Un message indiquant que les cookies ont été créés est alors affiché dans le corps du document.

Puis un lien hypertexte est affiché afin de tester l’existance des cookies dans un autre document.

Voici la page permettant de tester l’existence des cookies :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Affichage des cookies</title>
  </head>
  <body>
    <?php
    echo "Le cookie prenom a pour valeur ".$_COOKIE["prenom"]."<br>";
    echo "Le cookie nom a pour valeur ".$_COOKIE["nom"]."<br>";
  ?>
  </body>
</html>

Dans le corps du document, deux instructions echo affichent la valeur des cookies prenom et nom, lues dans le tableau superglobal $_COOKIES.

Affichons le formulaire dans WAMPServer.

Nous entrons un prénom et un nom puis nous cliquons sur le bouton Envoyer.  Le script traitemen2.php s’exécute et nous informe que les données du formulaire ont été sauvegardées dans des cookies. Nous allons le vérifier en cliquant sur le lien hypertexte. Le script verif-cookie.php s’exécute. Nous pouvons vérifier que les deux valeurs saisies se trouvent bien dans les cookies.

Une erreur classique

L’erreur “Headers already sent by” sera envoyée par PHP si les cookies ne sont pas définis avant la balise <html>.


Définissez un formulaire dans lequel l’utilisateur pourra saisir son prénom et son nom. Créez des variables de session avec les valeurs entrées lorsque l’utilisateur clique sur le bouton Envoyer et vérifiez que ces variables de session sont bien accessibles dans une autre page.

Solution

Faites une pause dans la vidéo et écrivez les trois pages demandées. Vous pourrez reprendre la lecture de la vidéo pour avoir des explications détaillées sur ces trois pages.

Voici le code responsable de la saisie des données :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Transission de données par un formulaire</title>
  </head>
  <body>
    <form name="MonFormulaire" method="post" action="traitement.php">
    <table><tr><td><label>Prénom</label></td>
      <td><input type="text" name="prenom"></td></tr>
      <tr><td><label>Nom</label></td>
      <td><input type="text" name="nom"></td></tr>
      <tr><td><input type="submit" name="Nom" value="Envoyer"></td>
      <td></td></tr>
    </table>
    </form>
  </body>
</html>

Ce formulaire est très simple. Il permet de saisir le prénom et le nom de l’utilisateur à l’aide de champs input de type text nommés prenom et nom. Lorsque l’utilisateur clique sur le bouton Envoyer, ces données sont transmises au script traitement.php.

 

Voici le code exécuté lorsque l’utilisateur clique sur le bouton Envoyer :

<?php
  session_start();
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Traitement des données envoyées par formulaire</title>
  </head>
  <body>
    <?php
      $prenom = htmlspecialchars($_POST["prenom"]);
      $nom = htmlspecialchars($_POST["nom"]);
      $_SESSION["prenom"] = $prenom;
      $_SESSION["nom"] = $nom;
      echo "Les données du formulaire ont été mémorisées.<br>";
      echo "<a href=\"lecture-session.php\">Cliquez sur ce lien pour vérifier.</a>";
    ?>
  </body>
</html>

La fonction session_start est exécutée au début du script, avant la déclaration du doctype. Les données prenom et nom sont récupérées dans le tableau superglobal $_POST et stockées dans les variables prenom et nom.

Ces variables sont mémorisées dans les variables de session prenom et nom en utilisant le tableau superglobal $_SESSION.

Un message indique que les données de session ont été mémorisées, puis un lien hypertexte est affiché. Le but de ce lien est de montrer que les variables de session existent et sont toujours pertinentes sur une autre page.

 

Voici le code de la page annexe, affichée lorsque l’utilisateur clique sur le lien de la page traitement.php :

<?php
  session_start();
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Lecture des variables de session prenom et nom</title>
  </head>
  <body>
  <?php
    $prenom = $_SESSION["prenom"];
    $nom = $_SESSION["nom"];
    echo "Les données mémorisées dans les variables de session sont bien accessibles :<br><ul>";
    echo "<li>\$_SESSION[\"prenom\"] vaut ".$_SESSION["prenom"]."</li>";
    echo "<li>\$_SESSION[\"nom\"] vaut ".$_SESSION["nom"]."</li></ul>";
  ?>
  </body>
</html>

Ici également, la première instruction du script est session_start. Cette instruction apparaît avant le doctype du document.

Les variables $prenom et $nom sont initialisées en lisant le contenu du tableau superglobal $_SESSION. Elles sont alors affichées sur l’écran avec deux instructions echo.

Exécutons la première page dans Wamp server.

Un prénom et un nom sont saisis dans le formulaire puis le bouton Envoyer est cliqué.

La page traitement.php est exécutée. Un message indique que les données du foirmulaire ont été sauvegardées dans des variables de session.

Pour vérifier cela, nous cliquons sur le lien hypertexte pour afficher la page lecture-session.php. Effectivement, les deux variables de session contiennent les valeurs saisies dans le formulaire.

 


Affichez la date selon ce format :

C'est le 1er jour du mois

ou

C'est le xème jour du mois

Solution

Faites une pause dans la vidéo et rédigez le code de l’exercice. Vous pourrez poursuivre pour comparer votre code et celui de la solution.

<?php
  if (date("j") ==1)
    echo date("\C\'\\e\s\\t \l\\e j\\e\\r \j\o\u\\r \d\u \m\o\i\s.");
  else
    echo date("\C\'\\e\s\\t \l\\e j\è\m\\e \j\o\u\\r \d\u \m\o\i\s.");
?>

Ici, nous testons si le jour est égal à 1. Dans l’affirmative, on affiche la chaîne C’est le premier jour du mois. S’il ne s’agit pas du premier jour du mois, on affiche C’est le énième jour du mois.

Bien entendu, nous arions pu faire plus simple avec quelque chose comme ceci :

<?php
  if (date("j") ==1)
    echo "C'est le premier jour du mois";
  else
    echo "C'est le date('j')ème jour du mois";
?>

Mais dans ce cas, vous n’auriez pas fait autant de recherche pour savoir quels caractères doivent être échappés dans la fonction date.

 

 


Supposons maintenant que vous vouliez transformer en lien les adresses qui commencent par http://, https:// et ftp://.

Voici la chaîne à transformer :

$ch="Les URL https://www.mediaforma.com, mais aussi https://google.fr et
ftp://ftp.cdrom.com peuvent être transformés en des liens cliquables.";

Solution

Faites une pause dans la vidéo et rédigez le code de l’exercice. Vous pourrez poursuivre pour comparer votre code et celui de la solution.

Le code est identique à celui de l’exercice précédent. Seule l’expression régulière change.

Ici, la chaîne recherchée peut commencer par http, https ou ftp.

Le point d’interrogation après https indique que le caractère s est facultatif. https? Peut donc sélectionner la chaîne http ou https. La barre verticale est un OU logique. L’expression recherchée pourra donc être http, https ou ftp.

Cette chaîne doit être suivie du caractère :, de deux slash et d’une chaîne composée de caractères minuscules ou majuscules, de chiffres, de points, de caractères de soulignement et/ou de tirets.

<?php
  $ch="Les URL https://www.mediaforma.com, mais aussi https://google.fr et
  ftp://ftp.cdrom.com peuvent être transformés en des liens cliquables.";
  $ch2 = preg_replace("#((https?|ftp)://[a-zA-Z0-9._-]*)#", "<a href='$1'>$1</a>",$ch);
  echo "AVANT : ".$ch."<br>";
  echo "APRES : ".$ch2;
?>

Exécutons ce code dans WAMP Server. Voici le résultat. Comme vous pouvez le voir, les URL de type http et https et les adresses FTP ont bien été remplacées par des liens hypertextes.

 

 


Voyons si vous avez compris.

Définissez les instructions nécessaires pour extraire et afficher la date et l’heure de cette chaîne :

$dateEtHeure = "15 Juin 2014 20:12:15";

Solution

Faites une pause dans la vidéo et écrivez le code demandé. Vous pourrez poursuivre la vidéo pour voir la solution.

Les données à extraire sont séparées par des espaces et des “:”. La première donnée est un entier, la deuxième une chaîne, la troisième, la quatrième, la cinquième et la sixième sont des entiers. La chaîne d’extraction est donc la suivante :

"%d %s %d %d:%d:%d"

Les valeurs extraitres sont stockées dans les variables $jour, $mois, $annee, $heures, $minutes et $secondes. Elles sont ensuite affichées avec deux instructions echo.

<?php
  $dateEtHeure = "15 Juin 2014 20:12:15";
  sscanf($dateEtHeure, "%d %s %d %d:%d:%d", $jour, $mois, $annee, $heures, $minutes, $secondes);
  echo "Jour : ".$jour.", Mois : ".$mois.", Année : ".$annee."<br>";
  echo "Heures : ".$heures.", Minutes : ".$minutes.", Secondes : ".$secondes."<br>";
?>

Exécutons ce code dans Wmap server. Le résultat est bien conforme à ce qui était attendu.

 

<p><img src=”https://www.mediaforma.com/uneminuteparjour/phpmysql/images/php-mysql-exercice-sur-la-fonction-sscanf-1.jpg”></p>

<p>

</p>