Concevez votre site web avec PHP et MySQL
Last updated on Sunday, October 19, 2014
  • 8 semaines
  • Facile

Free online content available in this course.

Videos available in this course

Paperback available in this course

eBook available in this course.

Certificate of achievement available at the end this course

Got it!

Premiers pas avec PHP

Dans le premier chapitre, nous avons découvert le principe de fonctionnement du PHP. Ici, nous allons passer au concret et réaliser notre toute première page web en PHP.

Ne vous attendez pas à un résultat extraordinaire, mais cela va nous permettre de prendre nos marques. Vous allez en particulier comprendre comment on sépare le code HTML classique du code PHP.

Vous êtes prêts ? Allons-y !

Les balises PHP

Vous savez donc que le code source d'une page HTML est constitué de balises (aussi appelées tags). Par exemple, <ul> est une balise.

Le code PHP vient s'insérer au milieu du code HTML. On va progressivement placer dans nos pages web des morceaux de code PHP à l'intérieur du HTML. Ces bouts de code PHP seront les parties dynamiques de la page, c'est-à-dire les parties qui peuvent changer toutes seules (c'est pour cela qu'on dit qu'elles sont dynamiques).

La figure suivante illustre cela.

Insertion de code PHP
Insertion de code PHP

Comme vous pouvez le voir, on retrouve le code HTML que l'on connaît bien… et on insère en plus des données dynamiques au milieu. Ici, par exemple, c'est le pseudonyme : il change en fonction du visiteur. La partie surlignée peut donc changer selon les visiteurs.

La forme d'une balise PHP

Si je vous parle de cela, ce n'est pas par hasard. Pour utiliser du PHP, on va devoir introduire une nouvelle balise… et celle-ci est un peu spéciale. Elle commence par <?php et se termine par ?> ; c'est à l'intérieur que l'on mettra du code PHP, ce que je vais vous apprendre tout au long de ce cours.

Voici une balise PHP vide :

<?php ?>

À l'intérieur, on écrira donc du code source PHP :

<?php /* Le code PHP se met ici */ ?>

On peut sans problème écrire la balise PHP sur plusieurs lignes. En fait, c'est même indispensable car la plupart du temps le code PHP fera plusieurs lignes. Cela donnera quelque chose comme :

<?php
/* Le code PHP se met ici
Et ici
Et encore ici */
?>

Insérer une balise PHP au milieu du code HTML

La balise PHP que nous venons de découvrir s'insère au milieu du code HTML comme je vous l'ai dit plus tôt. Pour reprendre l'exemple que l'on a vu au chapitre précédent :

<!DOCTYPE html>
<html>
    <head>
        <title>Ceci est une page de test avec des balises PHP</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h2>Page de test</h2>
        
        <p>
            Cette page contient du code HTML avec des balises PHP.<br />
            <?php /* Insérer du code PHP ici */ ?>
            Voici quelques petits tests :
        </p>
        
        <ul>
        <li style="color: blue;">Texte en bleu</li>
        <li style="color: red;">Texte en rouge</li>
        <li style="color: green;">Texte en vert</li>
        </ul>
        
        <?php
        /* Encore du PHP
        Toujours du PHP */
        ?>
    </body>
</html>

Regardez bien les lignes 12, 22, 23, 24 et 25 de ce code, elles contiennent du PHP. Bien entendu, cette page ne fonctionne pas vu que nous n'avons pas encore écrit de vrai code PHP (ce sont juste des balises d'exemple). Tout ce qu'il vous faut retenir ici, c'est que dès que vous voulez mettre du code PHP, hop, vous ouvrez une balise PHP : <?php ?>.

Peut-on placer une balise PHP n'importe où dans le code ?

Oui ! Vraiment n'importe où. Pas seulement dans le corps de la page d'ailleurs : vous pouvez placer une balise PHP dans l'en-tête de la page (regardez la ligne 4 de l'exemple ci-dessous).

<!DOCTYPE html>
<html>
    <head>
        <title>Ceci est une page de test <?php /* Code PHP */ ?></title>
        <meta charset="utf-8" />
    </head>

Plus fort encore, vous pouvez même insérer une balise PHP au milieu d'une balise HTML, comme le montre la ligne 5 de l'exemple ci-dessous (bon, ce n'est pas très joli, je vous l'accorde) :

<!DOCTYPE html>
<html>
    <head>
        <title>Ceci est une page de test</title>
        <meta <?php /* Code PHP */ ?> charset="utf-8" />
    </head>

Comment ça fonctionne ? À quoi ça peut servir ?

Il faut se rappeler que PHP génère du code HTML. Nous allons mieux comprendre le fonctionnement en apprenant à afficher du texte en PHP.

Afficher du texte

Bon, tout ça c'est bien beau, mais il serait temps de commencer à écrire du code PHP, non ?
Grande nouvelle : c'est maintenant que vous allez apprendre votre première instruction en PHP.

Ne vous attendez pas à quelque chose d'extraordinaire, votre PC ne va pas se mettre à danser la samba tout seul. ;-)

Vous allez cependant un peu mieux comprendre comment le PHP fonctionne, c'est-à-dire comment il génère du code HTML. Il est indispensable de bien comprendre cela, soyez donc attentifs !

L'instruction echo

Le PHP est un langage de programmation, ce qui n'était pas le cas du HTML (on parle plutôt de langage de description, car il permet de décrire une page web). Si vous avez déjà programmé dans d'autres langages comme le C ou le Java, cela ne devrait pas vous surprendre. Néanmoins, dans ce cours, nous partons de Zéro donc je vais supposer que vous n'avez jamais fait de programmation auparavant.

Tout langage de programmation contient ce qu'on appelle des instructions. On en écrit une par ligne en général, et elles se terminent toutes par un point-virgule. Une instruction commande à l'ordinateur d'effectuer une action précise.

Ici, la première instruction que nous allons découvrir permet d'insérer du texte dans la page web. Il s'agit de l'instruction echo, la plus simple et la plus basique de toutes les instructions que vous devez connaître.

Voici un exemple d'utilisation de cette instruction :

<?php echo "Ceci est du texte"; ?>

Comme vous le voyez, à l'intérieur de la balise PHP on écrit l'instruction echo suivie du texte à afficher entre guillemets. Les guillemets permettent de délimiter le début et la fin du texte, ce qui aide l'ordinateur à se repérer. Enfin, l'instruction se termine par un point-virgule comme je vous l'avais annoncé, ce qui signifie Fin de l'instruction.

Il faut savoir qu'on a aussi le droit de demander d'afficher des balises. Par exemple, le code suivant fonctionne :

<?php echo "Ceci est du <strong>texte</strong>"; ?>

Le mot « texte » sera affiché en gras grâce à la présence des balises <strong> et </strong>.

Comment faire pour afficher un guillemet ?

Bonne question. Si vous mettez un guillemet, ça veut dire pour l'ordinateur que le texte à afficher s'arrête là. Vous risquez au mieux de faire planter votre beau code et d'avoir une terrible « Parse error ».

La solution consiste à faire précéder le guillemet d'un antislash \ :

<?php echo "Cette ligne a été écrite \"uniquement\" en PHP."; ?>

Vous savez que le code PHP s'insère au milieu du code HTML. Alors allons-y, prenons une page basique en HTML et plaçons-y du code PHP (ligne 12) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Notre première instruction : echo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
        <h2>Affichage de texte avec PHP</h2>
        
        <p>
            Cette ligne a été écrite entièrement en HTML.<br />
            <?php echo "Celle-ci a été écrite entièrement en PHP."; ?>
        </p>
    </body>
</html>

Je vous propose de copier-coller ce code source dans votre éditeur de texte et d'enregistrer la page. Nous allons l'essayer et voir ce qu'elle produit comme résultat.

Mais au fait, vous rappelez-vous comment vous devez enregistrer votre page PHP ?

Enregistrer une page PHP

Je vous ai expliqué comment faire dans le chapitre précédent mais un petit rappel ne peut pas faire de mal.

Enregistrez la page avec l'extension .php, par exemple affichertexte.php, dans le dossier tests que je vous ai fait créer. Il doit se trouver dans C:\wamp\www\tests sous Windows.

Si vous utilisez Notepad++, sélectionnez PHP Hypertext Preprocessor file (*.php) dans la fenêtre pour enregistrer, comme le montre la figure suivante.

Sauvegarde d'une page PHP
Sauvegarde d'une page PHP

Une fois la page enregistrée, il faut maintenant la tester.

Tester la page PHP

Pour tester votre page PHP, cela dépend de votre système d'exploitation mais la manoeuvre est dans les grandes lignes la même.

Sous Windows, démarrez WAMP si ce n'est pas déjà fait. Allez dans le menu Localhost, la page d'accueil s'ouvre. Là, si vous avez bien créé le dossier tests dans le répertoire www comme indiqué au chapitre précédent, vous devriez voir un lien vers le dossier tests. Cliquez dessus (nous avons déjà fait cela dans le chapitre précédent).

Une page web s'ouvre indiquant tous les fichiers qui se trouvent dans le dossier tests. Vous devriez avoir le fichier affichertexte.php. Cliquez dessus : votre ordinateur génère alors le code PHP puis ouvre la page. Vous avez le résultat devant vos yeux.

Le même résultat peut être obtenu dans votre navigateur en allant directement à l'adresse http://localhost/tests/affichertexte.php. La méthode devrait être quasiment la même que vous soyez sous Windows, Mac OS X ou Linux.

Je vous propose également d'essayer le résultat directement sur le Site du Zéro si vous souhaitez le comparer au vôtre (je vous conseille fortement de savoir afficher la page chez vous directement).

Essayer !

Alors, que voyez-vous ?
Je pense que vous êtes étonnés et surpris de ce que je vous ai fait faire : ça a l'air d'être inutile, et ce n'est pas tout à fait faux. Le code PHP a « écrit » une ligne à l'écran, tout simplement.

Mais euh, c'est pas plus simple de l'écrire en HTML ?

Si !
Mais vous verrez bientôt l'intérêt de cette fonction. Pour le moment, on constate juste que ça écrit du texte.

Comment PHP génère du code HTML

L'instruction echo demande à PHP d'insérer à cet endroit le texte que vous demandez. Si on traduit l'instruction en français, ça donne : Insérer le texte : « Celle-ci a été écrite entièrement en PHP. ».

Je vous ai expliqué dans le tout premier chapitre que le PHP générait du code HTML et renvoyait au visiteur uniquement du code HTML (accompagné éventuellement de sa feuille de style CSS), comme le montre la figure suivante.

Génération de HTML par PHP
Génération de HTML par PHP

Sur la figure suivante, vous découvrez concrètement ce qu'il se passe avec notre code source.

Le code PHP est exécuté en premier et l'ordinateur fait ce qu'on lui demande. Ici on lui a dit « Affiche ce texte ici ».

Une fois toutes les instructions PHP exécutées (ici c'était simple, il n'y en avait qu'une !), la page qui sort est une page qui ne contient que du HTML ! C'est cette page de « résultat » qui est envoyée au visiteur, car celui-ci ne sait lire que le HTML.

Génération de HTML avec echo
Génération de HTML avec echo

Les commentaires

Bon, mine de rien je viens de vous apprendre pas mal de choses d'un coup, ça doit vous faire un choc. D'accord ce n'était pas extraordinaire, mais vous n'allez pas tarder à comprendre toute la subtilité de la chose.

Avant de terminer ce chapitre, je tiens à vous parler de quelque chose qui à mes yeux a une très grande importance en PHP, comme dans tout langage de programmation : les commentaires.

Un commentaire est un texte que vous mettez pour vous dans le code PHP. Ce texte est ignoré, c'est-à-dire qu'il disparaît complètement lors de la génération de la page. Il n'y a que vous qui voyez ce texte.

Mais alors, à quoi sert un commentaire ?

C'est pour vous. Cela permet de vous y retrouver dans votre code PHP, parce que si vous n'y touchez pas pendant des semaines et que vous y revenez, vous risquez d'être un peu perdus.
Vous pouvez écrire tout et n'importe quoi, le tout est de s'en servir à bon escient.

Il existe deux types de commentaires :

  • les commentaires monolignes ;

  • les commentaires multilignes.

Tout dépend de la longueur de votre commentaire. Je vais vous présenter les deux.

Les commentaires monolignes

Pour indiquer que vous écrivez un commentaire sur une seule ligne, vous devez taper deux slashs : « // ». Tapez ensuite votre commentaire.
Un exemple ?

<?php
echo "J'habite en Chine."; // Cette ligne indique où j'habite

// La ligne suivante indique mon âge
echo "J'ai 92 ans.";
?>

Je vous ai mis deux commentaires à des endroits différents :

  • le premier est à la fin d'une ligne ;

  • le second est sur toute une ligne.

À vous de voir où vous placez vos commentaires : si vous commentez une ligne précise, mieux vaut mettre le commentaire à la fin de cette ligne.

Les commentaires multilignes

Ce sont les plus pratiques si vous pensez écrire un commentaire sur plusieurs lignes, mais on peut aussi s'en servir pour écrire des commentaires d'une seule ligne. Il faut commencer par écrire /* puis refermer par */ :

<?php
/* La ligne suivante indique mon âge
Si vous ne me croyez pas...
... vous avez raison ;o) */
echo "J'ai 92 ans.";
?>

Ici, les commentaires n'ont pas grande utilité, mais vous verrez de quelle façon je les utilise dans les prochains chapitres pour vous décrire le code PHP.

En résumé

  • Les pages web contenant du PHP ont l'extension .php.

  • Une page PHP est en fait une simple page HTML qui contient des instructions en langage PHP.

  • Les instructions PHP sont placées dans une balise <?php ?>.

  • Pour afficher du texte en PHP, on utilise l'instruction echo.

  • Il est possible d'ajouter des commentaires en PHP pour décrire le fonctionnement du code. On utilise pour cela les symboles // ou /* */.

Example of certificate of achievement
Example of certificate of achievement

Only Premium members can download videos from our courses. However, you can watch them online for free.