PHP – Principes de base

LEÇON

 

Qu'est-ce que PHP ?

  • un langage de script, conçu pour faciliter la génération de pages HTML
  • on peut programmer avec PHP hors web, mais d'autres langages sont mieux adaptés pour ça
  • PHP est un acronyme récursif : PHP = PHP Hypertext Preprocessor
    • d'autres exemples :
      • GNU = GNU's Not Unix!
      • LINUX = LINUX Is Not UniX
  • Dans le contexte web :
    • le script PHP génère du HTML (une page web, ou un morceau d'une page web)
    • pour faire ceci, le script tourne dans le moteur PHP (installé sur la machine serveur)
    • le serveur web (par exemple Apache) doit être équipé d'interface avec le moteur PHP pour passer des scripts et récupérer le HTML généré (on parle de module PHP)
    • donc file:// ne marche plus pour nos expérimentations !! On est obligé d'avoir un serveur web

 

Génération de contenu

On exploite le PHP pour générer :

  • du contenu dynamique : contenu qui varie selon le contexte de la requête ou selon les données/facteurs externes. En gros, du contenu qui ne peut pas être connu à l'avance de la requête.
  • du contenu statique structuré de façon modulaire
  • ou les deux au même temps

 

La balise <?php ?>

Dans un script PHP on part du principe que tout ce qui n'est pas du code PHP est du HTML.

Le code PHP se démarque du code HTML via la balise <?php ?> qui est une balise vide.

Exemple :

HELLO WORLD

helloworld.php

<h1>Bonjour</h1>
<p><?php print 'Hello world !'; ?></p>

 

Contenu dynamique

Inclusion de contenu qui ne peut pas être connu à l'avance de la requête.

Exemple classique : la date et l'heure.

EXEMPLE 1

exemple1.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP</title>
    </head>
    <body>
        <h1>Bonjour</h1>
        <p>Hello world !</p>
        <p>Il est : <?php date_default_timezone_set("Europe/Paris");
                          echo date('d/m/Y H:i:s'); ?></p>
    </body>
</html>

 

Programmer ou ne pas programmer : telle est la question

Même si PHP est un langage de programmation, je ne considère pas que ceci soit de la programmation :

   <p>Hello world !</p>
   <p>Il est : <?php date_default_timezone_set("Europe/Paris");
                     echo date('d/m/Y H:i:s'); ?></p>

On peut parler plus de "l'invocation d'une fonction PHP".

Donc sans être "programmeur" (c'est à dire, sans savoir comment structurer le code source d'un script ou logiciel de façon logique, itérative et modulaire) on peut quand même exploiter les fonctionnalités offertes par PHP.

Ceci est plutôt de la programmation:

EXEMPLE 2

exemple2.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP</title>
    </head>
    <body style="font-family:monospace; font-size:16px;">
        <p>
        <?php
          function isp($num) {
            if($num < 2) return false;
            if($num == 2) return true;
            if($num % 2 == 0) return false;
            for($i = 3; $i <= ceil(sqrt($num)); $i = $i + 2) {
                if($num % $i == 0) return false;
            }
            return true;
          }
          $c = 0;
          $maxc = 1000;
          $n = 0;
          $br = true;
          $brthreshold = 10;
          echo '<h4>Les premiers ' . (string)$maxc . ' nombres premiers</h4>';
          while ($c < $maxc) {
            if(isp($n)) {
              $ns=(string)$n;
              $nsp = str_pad($ns, 10, ' ', STR_PAD_LEFT);
              $nspr = str_replace(" ","&nbsp;",$nsp);
              echo $nspr;
              $c+=1;
              $br = false;
            }
            $n+=1;
            if (!$br && $c%$brthreshold == 0) {
              echo '<br>';
              $br = true;
            }
          }
        ?>
        </p>
    </body>
</html>

 

L'utilité du "contenu statique modulaire" (ou contenu statico-dynamique !)

Pour comprendre l'utilité du contenu statico-dynamique, identifiez ce qui va bien et ce qui ne va pas du tout dans cet exemple :

EXEMPLE 3

style.css

body
{
  font-family:Arial, Helvetica, sans-serif;
  width:960px;
  margin:0 auto;
  padding:0;
  background-color:#f0f0f0;
}

#wrapper
{
  background-color:white;
  padding:0;
}

#header, #footer
{
  background-color:#456789;
  color:#f0f0f0;
  font-size:20px;
}

h1.main-title
{
  color:white;
  font-size:72px;
  text-align:right;
  margin:0;
  position:relative;
  top:5px;
  left:1px;
}

#header p
{
  margin-top:0;
  padding:5px;
  letter-spacing:3px;
}

#menu
{
  background-color:darkorange;
}

#main
{
  padding:20px;
}

#footer
{
  font-size:12px;
  color:#d0d0d0;
  padding:20px;
}

ul
{
  margin:0;
  padding:0;
  list-style:none;
}

ul li
{
  display:inline-block;
  position:relative;
  padding:15px;
  background-color:darkorange;
  cursor:pointer;
  margin-right:-4px;
}

ul li:hover
{
  background-color:#012345;
  color: white;
}

ul li:before
{
  color:brown;
  content: "\25A0\0020";
}

ul li:hover:before
{
  color:orange;
}

ul li a:link
{
  text-decoration:none;
  color:black;
}

ul li a:visited
{
  text-decoration:none;
  color:black;
}

ul li a:hover
{
  text-decoration:none;
  color:white;
}

ul li:hover a
{
  color: white;
}

 

exemple3_page1.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
      <div id="wrapper">
        <div id="header">
          <p>In lobortis pharetra malesuada. Sed sem velit, mollis at fermentum eget, semper vel metus. Cras ac nisi lobortis sem aliquam dignissim id a metus.</p>
          <h1 class="main-title">Lorem ipsum dolor</h1>
        </div>
        <div id="menu">
          <ul>
            <li><a href="exemple3_page1.html">Page1</a></li>
            <li><a href="exemple3_page2.html">Page2</a></li>
          </ul>
        </div>
        <div id="main">

          <h4>Duis semper volutpat ante id dictum</h4>
          <p>Proin iaculis nisl est, nec cursus erat mollis vehicula. Cras scelerisque nulla metus, et scelerisque nisi vulputate ut. Nulla vitae sodales erat, at posuere dui. Suspendisse potenti.</p>
          <h4>Morbi enim ipsum, condimentum vitae luctus vitae</h4>
          <p>Commodo ut sem. Morbi nulla orci, tristique in ultrices sagittis, auctor a leo. Maecenas nisl felis, vehicula non dictum porta, posuere a sapien. Sed eu posuere dolor.</p>

        </div>
        <div id="footer">
          <p>Donec efficitur erat purus, et vehicula urna laoreet a. Proin luctus nisi eget nulla dapibus, eget dictum leo euismod. Integer a finibus magna. Ut quis placerat lorem, vel feugiat massa. Vestibulum ac lorem non massa tempor dignissim ac non enim. </p>
        </div>
      </div>
    </body>
</html>

 

exemple3_page2.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
      <div id="wrapper">
        <div id="header">
          <p>In lobortis pharetra malesuada. Sed sem velit, mollis at fermentum eget, semper vel metus. Cras ac nisi lobortis sem aliquam dignissim id a metus.</p>
          <h1 class="main-title">Lorem ipsum dolor</h1>
        </div>
        <div id="menu">
          <ul>
            <li><a href="exemple3_page1.html">Page1</a></li>
            <li><a href="exemple3_page2.html">Page2</a></li>
          </ul>
        </div>
        <div id="main">

          <h4>Vestibulum vel sapien rhoncus</h4>
          <p>Maecenas volutpat a risus vitae condimentum. Nunc sed feugiat sem. Nam vestibulum ipsum orci. Maecenas congue interdum imperdiet.</p>
          <h4>Integer tincidunt dolor nunce</h4>
          <p>Suspendisse fringilla dui vel placerat scelerisque. Vivamus sagittis sapien lectus, sit amet varius nunc laoreet vitae. Ut non eros dapibus, rutrum erat vehicula, elementum dui. Proin gravida maximus magna, in euismod dui bibendum at.</p>

        </div>
        <div id="footer">
          <p>Donec efficitur erat purus, et vehicula urna laoreet a. Proin luctus nisi eget nulla dapibus, eget dictum leo euismod. Integer a finibus magna. Ut quis placerat lorem, vel feugiat massa. Vestibulum ac lorem non massa tempor dignissim ac non enim. </p>
        </div>
      </div>
    </body>
</html>

 

Version statico-dynamique modulaire

Comparer l'exemple ci-dessus avec le suivant. Le fichier CSS (style.css) est identique.

EXEMPLE 4

 

exemple4_page1.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
      <div id="wrapper">
        <?php include 'header.php';?>
        <?php include 'menu.php';?>

        <div id="main">

          <h4>Duis semper volutpat ante id dictum</h4>
          <p>Proin iaculis nisl est, nec cursus erat mollis vehicula. Cras scelerisque nulla metus, et scelerisque nisi vulputate ut. Nulla vitae sodales erat, at posuere dui. Suspendisse potenti.</p>
          <h4>Morbi enim ipsum, condimentum vitae luctus vitae</h4>
          <p>Commodo ut sem. Morbi nulla orci, tristique in ultrices sagittis, auctor a leo. Maecenas nisl felis, vehicula non dictum porta, posuere a sapien. Sed eu posuere dolor.</p>

        </div>

        <?php include 'footer.php';?>
      </div>
    </body>
</html>

 

exemple4_page2.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
      <div id="wrapper">
        <?php include 'header.php';?>
        <?php include 'menu.php';?>

        <div id="main">

          <h4>Vestibulum vel sapien rhoncus</h4>
          <p>Maecenas volutpat a risus vitae condimentum. Nunc sed feugiat sem. Nam vestibulum ipsum orci. Maecenas congue interdum imperdiet.</p>
          <h4>Integer tincidunt dolor nunce</h4>
          <p>Suspendisse fringilla dui vel placerat scelerisque. Vivamus sagittis sapien lectus, sit amet varius nunc laoreet vitae. Ut non eros dapibus, rutrum erat vehicula, elementum dui. Proin gravida maximus magna, in euismod dui bibendum at.</p>

        </div>

        <?php include 'footer.php';?>
      </div>
    </body>
</html>

 

header.php

<div id="header">
  <p>In lobortis pharetra malesuada. Sed sem velit, mollis at fermentum eget, semper vel metus. Cras ac nisi lobortis sem aliquam dignissim id a metus.</p>
  <h1 class="main-title">Lorem ipsum dolor</h1>
</div>

 

menu.php

<div id="menu">
  <ul>
    <li><a href="exemple4_page1.php">Page1</a></li>
    <li><a href="exemple4_page2.php">Page2</a></li>
  </ul>
</div>

 

footer.php

<div id="footer">
  <p>Donec efficitur erat purus, et vehicula urna laoreet a. Proin luctus nisi eget nulla dapibus, eget dictum leo euismod. Integer a finibus magna. Ut quis placerat lorem, vel feugiat massa. Vestibulum ac lorem non massa tempor dignissim ac non enim. </p>
</div>

 

Est-ce qu'on peut faire encore mieux ?

Oui bien sûr ! ...

[ le fichier CSS reste toujours identique - voir style.css ci-dessus ]

EXEMPLE 5

 

index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
      <div id="wrapper">

        <div id="header">
          <?php include 'header.php';?>
        </div>

        <div id="menu">
          <?php include 'menu.php';?>
        </div>

        <div id="main">
          <?php include ( 'content' . (isset($_GET['page']) ? $_GET['page'] : '1') . '.php' ); ?>
        </div>

        <div id="footer">
          <?php include 'footer.php';?>
        </div>

      </div>
    </body>
</html>

 

content1.php

<h4>Duis semper volutpat ante id dictum</h4>
<p>Proin iaculis nisl est, nec cursus erat mollis vehicula. Cras scelerisque nulla metus, et scelerisque nisi vulputate ut. Nulla vitae sodales erat, at posuere dui. Suspendisse potenti.</p>
<h4>Morbi enim ipsum, condimentum vitae luctus vitae</h4>
<p>Commodo ut sem. Morbi nulla orci, tristique in ultrices sagittis, auctor a leo. Maecenas nisl felis, vehicula non dictum porta, posuere a sapien. Sed eu posuere dolor.</p>

 

content2.php

<h4>Vestibulum vel sapien rhoncus</h4>
<p>Maecenas volutpat a risus vitae condimentum. Nunc sed feugiat sem. Nam vestibulum ipsum orci. Maecenas congue interdum imperdiet.</p>
<h4>Integer tincidunt dolor nunce</h4>
<p>Suspendisse fringilla dui vel placerat scelerisque. Vivamus sagittis sapien lectus, sit amet varius nunc laoreet vitae. Ut non eros dapibus, rutrum erat vehicula, elementum dui. Proin gravida maximus magna, in euismod dui bibendum at.</p>

 

header.php

<p>In lobortis pharetra malesuada. Sed sem velit, mollis at fermentum eget, semper vel metus. Cras ac nisi lobortis sem aliquam dignissim id a metus.</p>
<h1 class="main-title">Lorem ipsum dolor</h1>

 

menu.php

<ul>
  <li><a href="index.php?page=1">Page1</a></li>
  <li><a href="index.php?page=2">Page2</a></li>
</ul>

 

footer.php

<p>Donec efficitur erat purus, et vehicula urna laoreet a. Proin luctus nisi eget nulla dapibus, eget dictum leo euismod. Integer a finibus magna. Ut quis placerat lorem, vel feugiat massa. Vestibulum ac lorem non massa tempor dignissim ac non enim. </p>

 

EXERCICES

  1.  Reproduire l'exemple 5 ci-dessus sur votre serveur web. Pour vous faciliter la tâche voici un fichier ZIP avec tous les fichiers : Télécharger le fichier ZIP avec le code pour exemple 5. Ensuite, modifier le code pour ajouter une 3ème page. Cette nouvelle page doit être accessible via le menu qui est, bien sûr, présent sur chacune des 3 pages du site.