Concevez votre site web avec PHP et MySQL

Ce qui rend le Web si réussi aujourd’hui, c’est sa simplicité et sa facilité d’accès. Un utilisateur lambda n’a pas besoin de comprendre en détail son fonctionnement. Et heureusement pour lui !

Cependant, en tant que futur webmaster, il est essentiel que vous compreniez les bases du fonctionnement d’un site web.

Pas de panique !

Ce premier chapitre répondra à toutes vos questions et vous montrera que vous êtes tout à fait capable d’apprendre à créer des sites web dynamiques !

Faites la distinction entre un site statique et un site dynamique

On distingue deux types de sites web :

1. Les sites statiques.
2. Les sites dynamiques.

Découvrez le concept d’un site statique

Un site statique est créé uniquement avec les langages HTML et CSS. Il fonctionne très bien, mais son contenu ne peut pas être mis à jour automatiquement : le webmaster doit modifier le code source pour y ajouter des nouveautés. Cela devient vite contraignant lorsque le site nécessite des mises à jour fréquentes…

Un site statique est parfait pour une utilisation vitrine (par exemple, pour présenter une entreprise), mais il a ses limites.

Ce type de site est de plus en plus rare de nos jours, car dès que l’on ajoute une fonctionnalité interactive (comme un formulaire de contact), on ne parle plus de site statique mais de site dynamique.

Découvrez le principe d’un site dynamique

Plus complexe, un site dynamique utilise d’autres langages en plus d’HTML et CSS, tels que PHP et MySQL.

Logo PHP

Le contenu d’un site dynamique est dit “dynamique” car il peut changer sans l’intervention du webmaster !

Maintenant que vous comprenez la différence entre un site statique et un site dynamique, passons à la suite !

Comprenez le fonctionnement d’un site web

Lorsque vous souhaitez consulter un site web, vous saisissez son adresse dans votre navigateur. Mais vous êtes-vous déjà demandé comment la page web arrive jusqu’à vous ?

Il faut savoir qu’Internet est un réseau composé d’ordinateurs. Ces ordinateurs peuvent être classés en deux catégories :

1. Les clients : ce sont les ordinateurs des utilisateurs comme vous. Votre ordinateur fait donc partie de la catégorie des clients. Chaque client représente un visiteur d’un site web.
2. Les serveurs : ce sont des ordinateurs puissants qui stockent et diffusent des sites web aux utilisateurs, c’est-à-dire aux clients. La plupart des utilisateurs n’ont jamais vu un serveur de leur vie. Pourtant, les serveurs sont indispensables au bon fonctionnement du Web.

Si vous souhaitez en apprendre davantage sur le modèle client-serveur, je vous recommande de suivre le cours “Comprendre le Web”.

Pour résumer : votre ordinateur est appelé le client, tandis que l’ordinateur qui héberge le site web est appelé le serveur.

C’est précisément là que réside la différence entre un site statique et un site dynamique. Voyons ensemble ce qui change.

Consultez un site statique

Lorsque vous visitez un site statique, c’est très simple. Cela se passe en deux étapes :

1. Le client demande au serveur d’afficher une page web.
2. Le serveur répond en envoyant la page demandée au client.

La communication est donc assez basique :

• Client : “Bonjour, je suis le client, je voudrais voir cette page web.”
• Serveur : “Tiens, voilà la page que tu m’as demandée.”

Sur un site statique, il ne se passe rien d’autre. Le serveur stocke des pages web et les envoie aux clients qui les demandent, sans les modifier.

Consultez un site dynamique

Lorsque vous consultez un site dynamique, il y a une étape intermédiaire : la page est générée.

Eh bien, il y a une étape supplémentaire, qui se situe entre les deux étapes de base :

1. Le client demande au serveur d’afficher une page web.
2. Le serveur prépare spécialement la page pour le client (il la génère).
3. Le serveur envoie la page fraîchement générée au client.

La page web est générée à chaque fois qu’un client la demande. C’est ce qui rend les sites dynamiques “vivants” : le contenu d’une même page peut changer d’un instant à l’autre.

C’est ainsi que certains sites parviennent, par exemple, à afficher votre pseudonyme sur toutes les pages. Étant donné que le serveur génère une page à chaque demande, il peut la personnaliser en fonction des préférences du visiteur.

Exploitez les langages du Web

Lorsque vous créez un site web, vous devez manipuler non pas un, mais plusieurs langages. En tant que webmaster, il est essentiel de les connaître.

Utilisez HTML et CSS pour un site statique

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

HTML

C’est le langage fondamental des sites web. Facile à apprendre, il fonctionne à l’aide de balises. Voici un exemple de code HTML :

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

CSS

C’est le langage permettant de mettre en forme les sites web. Alors que HTML permet d’écrire le contenu des pages et de les structurer, CSS se charge de la mise en forme et de la mise en page. C’est avec CSS que vous pouvez choisir la couleur, la taille des menus, etc.

Voici un exemple de code CSS :

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 une page web au client, il envoie en réalité du code écrit en HTML et CSS.

Le problème, c’est que si vous connaissez uniquement HTML et CSS, vous ne pourrez produire que des sites statiques… et non des sites dynamiques ! Pour ces derniers, il est nécessaire de manipuler d’autres langages en plus d’HTML et CSS.

Ajoutez PHP et MySQL pour un site dynamique

Quel que soit le site web que vous souhaitez créer, HTML et CSS sont indispensables. Cependant, ils ne suffisent pas pour réaliser des sites dynamiques. Il faut les compléter avec d’autres langages.

C’est précisément l’objectif de ce cours : vous apprendrez à manipuler PHP et MySQL pour créer des sites web dynamiques.

PHP

C’est un langage compris uniquement par les serveurs et qui permet de rendre votre site dynamique. C’est PHP qui “génère” la page web, comme nous l’avons vu dans l’un des schémas précédents.

Ce sera le premier langage que nous étudierons dans ce cours.

Voici un exemple de code PHP :

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

PHP peut fonctionner seul, mais il prend tout son intérêt lorsqu’il est combiné avec un outil tel que MySQL.

MySQL

MySQL est un Système de Gestion de Bases de Données (SGBD).

Pour simplifier : son rôle est d’organiser l’enregistrement des données afin de les retrouver facilement ultérieurement.

C’est grâce à MySQL que vous pourrez enregistrer :

• la liste des membres de votre site web ;
• les messages postés sur le forum ;
• etc.

Rappelez-vous, dans ce cours, nous abordons toutes les notions de base et les mettons en pratique à travers un projet fil rouge : la création d’un site de recettes de cuisine !

Le langage qui permet de communiquer avec la base de données s’appelle le SQL.

Voici un exemple de code en langage SQL :

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

PHP et MySQL sont disponibles gratuitement et sous licence Open Source. Cela signifie une chose essentielle : vous n’aurez pas à dépenser un centime pour construire votre site web !

Pour le moment, oublions MySQL et concentrons-nous sur PHP.

Les clients sont incapables de comprendre le code PHP : ils ne connaissent que le HTML et le CSS. Seul le serveur est capable de lire du PHP. Le rôle de PHP est précisément de générer du code HTML, qui est ensuite envoyé au client de la même manière que pour un site statique, comme le montre l’illustration suivante :

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

Prenons un exemple pour bien comprendre tout cela.

On peut écrire en PHP :

“Si le visiteur est membre de mon site et 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 : en fonction de la condition, vous ne verrez pas les mêmes éléments et n’aurez peut-être pas accès au même contenu.

En résumé

• Il existe deux types de sites web :

  1. Les sites statiques : créés en HTML et CSS, leur contenu ne peut être mis à jour que par le webmaster.
  2. Les sites dynamiques : réalisés avec d’autres outils tels que PHP et MySQL en plus d’HTML et CSS, ils permettent aux visiteurs de participer à la vie du site, de poster des messages, etc.

• Les visiteurs d’un site web sont appelés les “clients”. Ils demandent au serveur hébergeant le site de leur transmettre les pages web.

• PHP est un langage exécuté par le serveur. Il permet de personnaliser la page en fonction du visiteur, de traiter ses messages, d’effectuer des calculs, etc. Il génère une page HTML.

• MySQL est un système de gestion de bases de données. Il se charge du stockage des informations (liste des messages, des membres, etc.).

Dans le prochain chapitre, nous verrons comment vous préparer à commencer à coder !