Aller au menu - Aller au contenu

Icône Premiers pas avec PHP

Par Avatar Mathieu Nebra (M@teo21)
Mise à jour : 03/04/2010
Difficulté : Facile Facile Creative Commons BY-NC-SA
164 536 visites depuis 7 jours , dont 6 073 sur ce chapitre , classé 3/777
Dans le premier chapitre, nous avons découvert le principe du fonctionnement de 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 (en fait la page que nous allons créer ne va rien faire de spécial) mais ça va vous permettre de prendre nos marques. Vous allez en particulier comprendre comment on sépare le code XHTML classique du code PHP.

Vous êtes prêts ? Allons-y ! :)
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Les balises PHP

Vous savez donc que le code source d'une page XHTML 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 XHTML. On va progressivement placer dans nos pages web des morceaux de code PHP à l'intérieur du XHTML. 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).

Voici un schéma qui illustre cela :

Insertion de code PHP


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

Le Site du Zéro fait la même chose pour ses membres inscrits. Votre pseudonyme est affiché en haut des pages lorsque vous êtes connecté au Site du Zéro.


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 dedans que l'on mettra du code PHP, ce que je vais vous apprendre tout au long de ce cours.

Voici une balise PHP vide :

Code : PHP
1
<?php ?>


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

Code : PHP
1
<?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 :

Code : PHP
1
2
3
4
5
<?php
/* Le code PHP se met ici
Et ici
Et encore ici */
?>


Il existe d'autres balises pour utiliser du PHP, par exemple <? ?>, <% %>, etc... Ne soyez donc pas étonnés si vous en voyez. Néanmoins, <?php ?> est la forme la plus correcte, vous apprendrez donc à vous servir de cette balise et non pas des autres. :p


Insérer une balise PHP au milieu du code XHTML



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

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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>Ceci est une page de test avec des balises PHP</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
        <h2>Page de test</h2>
        
        <p>
            Cette page contient du code (x)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>


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 ?>

On peut 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.

Code : PHP
1
2
3
4
5
6
<!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>Ceci est une page de test <?php /* Code PHP */ ?></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>


Plus fort encore, vous pouvez même insérer une balise PHP au milieu d'une balise XHTML (bon ce n'est pas très joli je vous l'accorde) :

Code : PHP
1
2
3
4
5
6
<!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>Ceci est une page de test</title>
        <meta http-equiv="Content-Type" <?php /* Code PHP */ ?> content="text/html; charset=iso-8859-1" />
    </head>


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


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

Afficher du texte

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

Bon ne vous attendez pas à quelque chose d'extraordinaire, votre PC ne va pas se mettre à danser la samba tout seul. :p

Vous allez cependant comprendre un peu mieux comment le PHP fonctionne, c'est-à-dire comment il génère du code XHTML. 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 XHTML (on parlait 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 :

Code : PHP
1
<?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, cela 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.

Notez qu'il existe une instruction identique à echo appelée print, qui fait la même chose. Cependant, echo est plus couramment utilisée.


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

Code : PHP
1
<?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". :o

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

Code : PHP
1
<?php echo "Celle-ci a été écrite \"uniquement\" en PHP."; ?>


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

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!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 (x)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 souvenez-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.

L'essentiel, quel que soit votre système d'exploitation, est que le fichier soit enregistré dans le dossier www (ou un de ses sous-dossiers) sinon le fichier PHP ne pourra pas s'exécuter !


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

Sauvegarde 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 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 en allant directement à l'adresse http://localhost/tests/affichertexte.php dans votre navigateur. La méthode devrait être quasiment la même que vous soyez sous Windows, Mac OS X ou Linux.

Je vous propose d'essayer aussi le résultat directement sur le Site du Zéro si vous le souhaitez pour comparer (mais je vous conseille fortement de savoir afficher la page chez vous directement). Cliquez sur le lien "Essayer !" ci-dessous :

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 ! :p
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 XHTML



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

Il ne faut jamais oublier le point-virgule à la fin d'une instruction. Si jamais ça arrive, vous aurez le message d'erreur : "Parse Error"
Notez que ça plante uniquement si votre code PHP fait plus d'une ligne (ça sera tout le temps le cas). Donc prenez l'habitude de toujours mettre un ";" à la fin des instructions.


Je vous ai expliqué dans le tout premier chapitre que le PHP générait du code XHTML et renvoyait au visiteur uniquement du code XHTML (accompagné de sa feuille de style CSS éventuellement) :

Image utilisateur


Ici, concrètement, voici ce qu'il se passe avec notre code source :

Génération avec echo


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 XHTML ! C'est cette page de "résultat" qui est envoyée au visiteur, car celui-ci ne sait lire que le XHTML.

Rappelez-vous, seul le serveur peut exécuter du PHP. Le PHP n'est jamais envoyé au visiteur. Pour que nous puissions exécuter du PHP sur notre ordinateur (afin de faire nos tests), nous avons dû le transformer en mini-serveur en installant un programme tel que WAMP.
Retour en haut

Les commentaires

Bon, mine de rien je viens de vous apprendre pas mal de choses d'un coup, ça doit vous faire un choc. :p
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 perdu.
Vous pouvez écrire tout et n'importe quoi, le tout est de s'en servir à bon escient.

Il existe 2 types de commentaires :

  • Les commentaires monolignes
  • Les commentaires multilignes


Tout dépend si votre commentaire est court ou long. Je vais vous présenter les deux.

Les commentaires monolignes



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

Code : PHP
1
2
3
4
5
6
7
<?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

A 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 */ :

Code : PHP
1
2
3
4
5
6
<?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 comment je les utilise dans les prochains chapitres pour vous décrire le code PHP. Vous aussi vous allez vite apprendre à bien vous en servir :)
Retour en haut

Q.C.M.

Quelle est la balise dans laquelle on tape du code PHP ?
Quelle instruction permet d'afficher du texte ?
Quel symbole termine chaque instruction en PHP ?
Laquelle de ces instructions est correcte ?
Quels symboles utiliser pour indiquer la présence d'un commentaire sur une ligne ?

Statistiques de réponses au QCM

Retour en haut
Vous devez être en train de vous demander vraiment à quoi peut bien servir PHP... Ici c'est vrai, ça n'a pas l'air d'être très utile, ça complique plutôt les choses.
Pourtant, vous allez voir très bientôt quel est l'intérêt de l'instruction echo, et vous allez même vous rendre compte à quel point cela permet de simplifier votre travail !
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
111 commentaires pour "Premiers pas avec PHP"
Note moyenne : 3.61 / 4 (2417 votes)
Pseudo Commentaire
Hors ligne quenquen407 # Posté le 16/04/2011 à 17:24:41

Bonjour, je code avec Dreamweaver CS5 sous Windows.

Comment faire pour faire pour afficher un aperçu directement depuis Dreamweaver sans devoir enregistrer, passer par WAMP et afficher ma page ?

Merci
Hors ligne gouvald # Posté le 12/06/2011 à 12:50:03
Avatar

Ville : Strasbourg
Pays : France métropolitaine

 J'ai du louper un episode, je suis sur windows, je met mon code : Secret (cliquez pour afficher)
<!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>

<?php echo "Celle-ci a été écrite entièrement en PHP."; ?>
</p>
</body>
</html>

Et il n'affiche que le texte en xhtml et non le php. S'il vous plait aidez moi
Hors ligne m_mehdi # Posté le 28/07/2011 à 16:42:38
Avatar

 Citation : gouvald
J'ai du louper un episode, je suis sur windows, je met mon code : Secret (cliquez pour afficher)
<!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>

<?php echo "Celle-ci a été écrite entièrement en PHP."; ?>
</p>
</body>
</html>

Et il n'affiche que le texte en xhtml et non le php. S'il vous plait aidez moi



tu peux réessayer comme de cette façon et voir ;)


Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!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>
            
            <?php
                    
                    echo "Celle-ci a été écrite entièrement en PHP" ; 

            ?>
        </p>
    </body>
</html>
Mx Manager
Visiter notre jeu en ligne de moto cross
 
Hors ligne mmanoxiah # Posté le 13/08/2011 à 12:25:16

bjr,

" ou mettre les fichiers html css et php?

je demarre sur le cour php mais j ai un probleme avec les extensions des fichiers, je croyais que mes fichiers css et html restaient dans mon dossier site et que le php etait ds wampserveur, au final il a fallu que je deplace xhtml et css et quee je leur donne l extenssion php pour que ca fonctionne "bizarre", est ce que qlqu un peut me dire exactement comment il faut procedé, car j ai tendance a me perdre, merci d avance.
Hors ligne jjk # Posté le 12/09/2011 à 12:53:51
µnTa0s
Avatar

 bonjour es ce que c'est d'actuellité???
Loisir:Ma Life famille et papa d'une tite puce de 4 mois" ; la peche ; velo en foret; L"informatique : creation-auteur de theme wind7 d'une base de aero >>> creation de wall papers <<< ;g@mer commencer sur une consol Nes, megaDrive , playStation,xBox, Pc >>simulation, plate forme,...µnTa0s
Je suis cool si vous etes cool, je suis c... si vous etes c..., je suis un ange si vous en etes un, je suis un demon si vous etes un demon, conclusion un yin & yang , un taos





</position>
 

Voir tous les commentaires