Créer un site web dynamique avec php

Participez au vote ☆☆☆☆☆★★★★★

Créer un site web dynamique avec php

...

Les langages du Web

Lorsqu'on crée un site web, on est amené à manipuler non pas un mais plusieurs langages. En tant que webmaster, il faut impérativement les connaître.

Certains programmes, appelés WYSIWYG (What You See Is What You Get), permettent d'aider les plus novices à créer un site web statique sans connaître les langages informatiques qui se cachent derrière... Mais pour réaliser un site dynamique comme nous le souhaitons, nous devrons absolument mettre les mains dans le cambouis.

Pour un site statique : XHTML et CSS

De nombreux langages ont été créés pour produire des sites web. Deux d'entre eux constituent une base incontournable pour tous les webmasters :

XHTML : c'est le langage à la base des sites web. Il ressemble beaucoup au HTML mais impose quelques règles un peu plus strictes. Dans la mesure du possible je recommande d'utiliser XHTML plutôt que HTML car cela vous force à soigner le code source de vos sites.

XHTML est un langage simple à apprendre qui fonctionne à partir de balises. Voici un exemple de code XHTML :

Code : HTML

1 <p>Bonjour, je suis un <em>paragraphe</em> de texte !</p>

CSS : c'est le langage de mise en forme des sites web. Tandis que le XHTML permet d'écrire le contenu de vos pages web et de les structurer, le langage CSS s'occupe de la mise en forme et de la mise en page. C'est en CSS que l'on choisit notamment la couleur, la taille des menus et bien d'autres choses encore. Voici un code CSS :

Code : CSS

5 div.banner {

text-align: center;

font-weight: bold;

font-size: 120%;

}

Ces langages sont la base de tous les sites web. Lorsque le serveur envoie la page web au client, il envoie en fait du code en langage XHTML et CSS.

Le serveur envoie du XHTML et du CSS au client

Le problème, c'est que lorsqu'on connaît seulement XHTML et CSS, on ne peut produire que des sites statiques... et pas des sites dynamiques ! Pour ces derniers, il est nécessaire de manipuler d'autres langages en plus de XHTML et CSS.

La question qu'il faut vous poser est donc : connaissez-vous XHTML et CSS ?

Si oui, c'est parfait, vous pouvez continuer car nous en aurons besoin par la suite. Si la réponse est non, pas de panique. Ces langages ne sont pas bien difficiles, ils sont à la portée de tous. Vous pouvez les apprendre en lisant mon cours sur XHTML et CSS.

Sachez qu'apprendre ces langages n'est l'affaire que de quelques petites semaines, voire même moins si vous avez suffisamment de temps libre.

Pour un site dynamique : ajoutez PHP et MySQL

Quel que soit le site web que l'on souhaite créer, XHTML et CSS sont donc indispensables. Cependant, ils ne suffisent pas pour réaliser des sites dynamiques. Il faut les compléter avec d'autres langages.

C'est justement tout l'objet de ce cours : vous allez apprendre à manipuler PHP et MySQL pour réaliser un site web dynamique.

PHP : c'est un langage que seuls les serveurs comprennent et qui permet de rendre votre site dynamique. C'est PHP qui "génère" la page web comme on l'a vu sur un des schémas précédents.

Ce sera le premier langage que nous découvrirons dans ce cours. Il peut fonctionner seul, mais il ne prend vraiment de l'intérêt que s'il est combiné à un outil tel que MySQL. Voici un code PHP :

Code : PHP

1 <?php echo "Vous êtes le visiteur n°" . $nbre_visiteurs; ?>

MySQL : c'est ce qu'on appelle un SGBD (Système de Gestion de Base de Données). Pour faire simple, son rôle est d'enregistrer des données de manière organisée afin de vous aider à les retrouver facilement plus tard. C'est grâce à MySQL que vous pourrez enregistrer la liste des membres de votre site, les messages postés sur le forum, etc. Le langage qui permet de communiquer avec la base de données s'appelle le SQL. Voici un code en langage SQL :

Code : SQL

1 SELECT id, auteur, message, datemsg FROM livreor ORDER BY datemsg DESC LIMIT 0, 10

PHP et MySQL sont ce qu'on appelle des logiciels libres. Entre autres choses, cela vous donne des garanties de pérennité : tout le monde peut contribuer à leur développement, vous ne risquez donc pas de voir tous les webmasters se désintéresser du PHP et de MySQL du jour au lendemain, et ça c'est très important !

D'autre part, PHP et MySQL sont disponibles gratuitement. Cela signifie une chose essentielle : vous n'aurez pas à débourser un centime pour construire votre site web !

PHP peut fonctionner seul et suffit à créer un site dynamique, mais les choses deviennent réellement intéressantes lorsqu'on le combine à un SGBD tel que MySQL. Cependant pour simplifier, oublions pour le moment MySQL et concentrons-nous sur PHP.

PHP génère du XHTML

Les clients sont incapables de comprendre le code PHP, ils ne connaissent que le XHTML et le CSS. Seul le serveur est capable de lire du PHP.

Le rôle de PHP est justement de générer du code XHTML (on peut aussi générer du CSS, mais c'est plus rare), code qui est ensuite envoyé au client de la même manière qu'un site statique :

PHP décide ce qui va être affiché sur la page web envoyée au visiteur

PHP est un langage de programmation utilisé sur de nombreux serveurs pour prendre des décisions. C’est PHP qui décide du code XHTML qui sera généré et envoyé au client à chaque fois.

Pour bien comprendre l’intérêt de tout cela, prenons un exemple. On peut écrire en PHP : "Si le visiteur est membre de mon site et qu’il s’appelle Jonathan, affiche Bienvenue Jonathan sur la page web. En revanche, si ce n’est pas un membre de mon site, affiche Bienvenue à la place et propose au visiteur de s’inscrire."

C'est un exemple très basique de site dynamique : selon que vous êtes un membre enregistré ou pas, vous ne verrez pas les mêmes choses et n'aurez peut-être pas accès à toutes les sections.

Et la concurrence ?

XHTML et CSS n'ont pas de concurrents car ce sont des standards. Tout le monde est censé les connaître et les utiliser sur tous les sites web.

En revanche, pour ce qui est des sites dynamiques, PHP et MySQL sont loin d'être les seuls sur le coup. Je ne peux pas vous faire une liste complète de leurs concurrents, ce serait bien trop long (et ennuyeux !). Cependant, pour votre culture générale il faut au moins connaître quelques autres grands noms.

Tout d'abord, si on a souvent tendance à combiner PHP et MySQL pour réaliser de puissants sites dynamiques, il ne faut pas mélanger les deux. Le premier a des concurrents différents du second.

Les concurrents de PHP

Parmi les concurrents de PHP, on peut citer :

ASP .NET : conçu par Microsoft, il exploite le framework .NET bien connu des développeurs C# (un framework est un ensemble de bibliothèques qui fournissent des services pour les développeurs). Ce langage peut être intéressant si vous avez l'habitude de développer en C# .NET et que vous ne voulez pas être dépaysés.
Ruby on Rails : très actif, ce framework s'utilise avec le langage Ruby et permet de réaliser des sites dynamiques rapidement en suivant certaines conventions.
Django : il est similaire à Ruby on Rails, mais il s'utilise en langage Python.
Java et les JSP (Java Server Pages) : plus couramment appelé "JEE", il est particulièrement utilisé dans le monde professionnel. Il demande une certaine rigueur. La mise en place d'un projet JEE est traditionnellement un peu plus longue et plus lourde mais le système est apprécié des professionnels et des institutions (c'est ce qui est utilisé sur le sites des impôts français par exemple).

Je ne peux pas présenter ici tous les concurrents, mais ceci devrait déjà vous donner une bonne idée. Pour information, il est aussi possible d'utiliser par exemple le langage C ou le C++, bien que ce soit plus complexe et pas forcément toujours très adapté (en clair, je ne le recommande pas du tout ).

Lequel choisir dans le lot ? Lequel est le meilleur ?

Étant donné l'objet de ce cours, vous vous attendez à ce que je vous réponde instantanément "PHP !". Mais non. En fait, tout dépend de vos connaissances en programmation. Si vous avez déjà manipulé le Java, vous serez plus rapidement à l'aise avec les JSP. Si vous connaissez Python, Django semble tout indiqué.

Quant à PHP, il se démarque de ses concurrents par une importante communauté qui peut vous aider rapidement sur internet si vous avez des problèmes. C'est un langage facile à utiliser, idéal pour les débutants comme pour les professionnels : Wikipédia et Facebook sont des exemples de sites célèbres et très fréquentés qui fonctionnent grâce à PHP.

Bref, il n'y a pas de meilleur choix. Je vous recommande le langage pour lequel vous serez le plus certain d'avoir quelqu'un pour vous aider. Le PHP en ce sens est souvent un très bon choix.

Les concurrents de MySQL

En ce qui concerne les bases de données, le choix est là encore très vaste.

Cependant, alors que PHP et ses concurrents sont la plupart du temps libres et gratuits, ce n'est pas le cas de la plupart des SGBD.

Parmi les concurrents de MySQL, je vous conseille de connaître (au moins de nom) :

Oracle : c'est le SGBD le plus célèbre, le plus complet et le plus puissant. Il est malheureusement payant (et cher), ce qui le réserve plutôt aux entreprises qui l'utilisent déjà massivement. Il existe cependant des versions gratuites d'Oracle notamment pour ceux qui veulent apprendre à s'en servir.
Microsoft SQL Server : édité par Microsoft, on l'utilise souvent en combinaison avec ASP .NET, bien qu'on puisse l'utiliser avec n'importe quel autre langage. Il est payant, mais il existe des versions gratuites limitées.
PostgreSQL : il s'agit d'un SGBD libre et gratuit comme MySQL, qui propose des fonctionnalités plus avancées. Parfois comparé à Oracle, il lui reste cependant du chemin à parcourir. Il dispose d'une communauté un peu moins importante que MySQL et Oracle. Le Site du Zéro utilise PostgreSQL.
SQLite : le SGBD le plus simple et le plus petit. Il est libre et gratuit mais dispose de très peu de fonctionnalités (ce qui suffit parfois). Son gros avantage est d'être très léger.

Là encore, cette liste est loin d'être exhaustive mais vous présente au moins quelques grands noms.

Pour information, MySQL reste de loin le SGBD libre et gratuit le plus utilisé. Parmi les solutions professionnelles payantes, Oracle est le plus avancé et le plus répandu mais son utilisation est surtout réservée aux grosses entreprises.

En fin de compte, si vos moyens sont limités, vous n'avez pas beaucoup de choix pour le SGBD. MySQL est le plus indiqué car il est libre, gratuit, performant et utilisé par de nombreuses personnes qui sont susceptibles de vous aider.

Plusieurs combinaisons sont possibles

Comme vous avez pu le constater, vous avez le choix entre de nombreux outils pour réaliser un site dynamique. La plupart d'entre eux sont gratuits.

Sachez que vous pouvez a priori combiner ces outils comme bon vous semble. Par exemple, on peut très bien utiliser PHP avec une autre base de données que MySQL, telle que Oracle ou PostgreSQL. De même, MySQL peut être utilisé avec n'importe quel autre langage : Java, Python, Ruby, etc.

Cependant, la combinaison "PHP + MySQL" est probablement la plus courante. Ce n'est pas par hasard si ce cours traite de ces deux outils qui ont fait leurs preuves.

Vous devriez maintenant avoir une bonne idée de ce que permettent de faire PHP et MySQL. Si vous retenez que PHP génère du XHTML personnalisé pour chaque visiteur et que MySQL sert à stocker les données, vous savez déjà le principal.

Dans la première partie de ce cours nous allons découvrir PHP en douceur. Nous mettons donc de côté MySQL et ne ferons pas de stockage de données dans un premier temps. Lorsque vous aurez acquis un certain niveau en PHP, je vous reparlerai de MySQL et nous pourrons alors commencer à réaliser des fonctionnalités très intéressantes pour votre futur site.

Préparer son ordinateur

Nous savons désormais que le PHP s'exécute sur le serveur et que son rôle est de générer des pages web. Cependant, seul un serveur peut lire du PHP et votre ordinateur n'est pas un serveur. Comment diable allez-vous pouvoir créer un site dynamique si le PHP ne fonctionne pas chez vous ?

Qu'à cela ne tienne : nous allons temporairement transformer votre ordinateur en serveur pour que vous puissiez exécuter du PHP et travailler sur votre site dynamique. Vous serez fin prêt à programmer après avoir lu ce chapitre !

De quels programmes a-t-on besoin ?

Selon que l'on crée un site statique ou un site dynamique, on a besoin de logiciels différents. En fait, faire un site dynamique nécessite hélas pour nous un peu plus de logiciels !

Avec un site statique

Les webmasters qui créent des sites statiques avec XHTML et CSS ont de la chance, ils ont en général déjà tous les programmes dont ils ont besoin :

Mozilla Firefox

Un éditeur de texte : en théorie un programme tel que le Bloc-Notes livré avec Windows suffit, bien qu'il soit recommandé d'utiliser un outil un peu plus évolué comme Notepad++. Nous reparlerons du choix de l'éditeur à la fin de ce chapitre.
Un navigateur web : il permet de tester la page web. Vous pouvez utiliser par exemple Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, ou tout autre navigateur auquel vous êtes habitué pour aller sur le web. Il est conseillé de tester son site régulièrement sur différents navigateurs.

Cependant, pour ceux qui comme nous travaillent sur des sites dynamiques, ces outils ne suffisent pas. Il est nécessaire d'installer des programmes supplémentaires.

Avec un site dynamique

Pour que votre ordinateur puisse lire du PHP, il faut qu'il se comporte comme un serveur. Rassurez-vous, vous n'avez pas besoin d'acheter une machine spéciale pour cela : il suffit simplement d'installer les mêmes programmes que ceux que l'on trouve sur les serveurs qui délivrent les sites web aux internautes.

Ces programmes dont nous allons avoir besoin, quels sont-ils ?

Logo d'Apache

Apache : c'est ce qu'on appelle un serveur web. Il s'agit du plus important de tous les programmes, car c'est lui qui est chargé de délivrer les pages web aux visiteurs. Cependant, Apache ne gère que les sites web statiques (il ne peut traiter que des pages HTML). Il faut donc le compléter avec d'autres programmes.
PHP : c'est un plug-in pour Apache qui le rend capable de traiter des pages web dynamiques en PHP. En clair, en combinant Apache et PHP, notre ordinateur sera capable de lire des pages web en PHP.
MySQL : c'est le logiciel de gestion de base de données dont je vous ai parlé en introduction. Il permet d'enregistrer des données de manière organisée (comme la liste des membres de votre site). Nous n'en aurons pas besoin immédiatement, mais autant l'installer de suite.

Tous ces éléments qui vont nous aider à créer notre site dynamique sont libres et gratuits. Certes, il en existe d'autres (parfois payants), mais la combinaison Apache + PHP + MySQL est la plus courante sur les serveurs web, à tel point qu'on a créé des "packs" tous prêts qui contiennent tous ces éléments. Il est possible de les installer un à un mais cela prend plus de temps et vous n'allez rien y gagner (sauf si vous êtes administrateur de serveur, ce qui ne devrait pas être votre cas ).

Nous allons voir comment installer le "pack" qui convient en fonction de votre système d'exploitation dans la suite de ce chapitre.

...

Premiers pas avec PHP

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 !

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 :

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

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.

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

<head>

<title>Ceci est une page de test avec des balises PHP</title>

</head>

<body>

<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

…

<head>

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

…

<head>

</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.

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.

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

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".

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 :

…

<head>

<title>Notre première instruction : echo</title>

</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 !

Accéder au Téléchargement