Aller au contenu

Prérequis client-serveur

I. Fichier HTML⚓︎

1. Votre micro site :⚓︎

Avec votre éditeur de texte, créer la page suivante :

HTML
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8" />
  <title>Mon premier onglet</title>
  </head>

  <body>
 Voici ma première page
  </body>
</html>
  • Sauvegarder ce fichier dans votre dossier personnel sous le nom monSite.html.
  • Double-cliquez sur ce fichier.

Vous devez obtenir quelque chose qui ressemble à ceci :

mon site

Où est interprété ce fichier ? Par quel programme ?
Solution

Le fichier est interprété localement sur votre ordinateur par votre navigateur.

2. Vous voulez faire héberger votre site sur un serveur.⚓︎

👉 Nous utiliserons le serveur UwAmp (Serveur Wamp Apache, mySQL, PHP, SQLite). Il existe bien d’autre possibilités : Wamp, Laragon, IIS, nginx...

😊 Aujourd’hui le serveur se trouve aussi sur votre machine. Le fonctionnement est identique à celui d’un serveur hébergé à distance.

icone UwAmp

👉 Activer UwAmp

Cliquer sur l’icône de UwAmp, puis sur Démarrer si nécessaire.

Vous devez obtenir ceci :

UwAmp

La fenêtre UwAmp ne disparaît pas 😊

Si vous réduisez la fenêtre UwAmp (avec l'icône _), elle semble disparaître.

Pour la retrouver :

  • Cliquer dans la barre de tâches en bas à droite sur "Afficher les icônes cachées"

icones cachées

  • Double cliquer sur l'icône de UwAmp

icône UwAmp

👉 Cliquer sur le bouton "Dossier www", puis ajouter un dossier à votre nom, par exemple le dossier Dupond

👉 Copier le fichier que vous venez de créer monSite.html dans ce dossier à votre nom.

👉 Double-cliquer sur ce fichier monSite.html.

Où est interprété ce fichier ? Par quel programme ?
Solution

Le fichier est interprété localement sur votre ordinateur par votre navigateur.

👉 Revenez sur UwAmp, et cliquer sur le bouton "Navigateur www"

Vous devez obtenir quelque chose qui ressemble à ceci :

UwAmp

👉 Cliquer sur votre dossier, vous devez obtenir quelque chose qui ressemble à ceci :

UwAmp

👉 Double-cliquer sur ce fichier monSite.html.

Où est interprété ce fichier ? Par quel programme ?
Solution

Ce fichier est interprété par le serveur UwAmp.

II. Fichier PHP⚓︎

1. Création d’un fichier PHP⚓︎

Ecrire le fichier PHP suivant avec un éditeur de texte (Visual Studio Code, ou Notepad++ ou autre) et l’enregistrer sous le nom affichages.php sur votre session.

PHP
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
    <title> Affichages  </title>
 </head>
<body>
  <p> Ceci est un affichage écrit en HTML </p>

<?php
echo "Ceci est un affichage écrit en PHP";
?>
</body>
</html>
Ouvrez votre fichier avec votre navigateur

Qu'obtenez-vous ?

Solution

On voit le code du fichier.

Le navigateur ne sait pas interpréter un ficihier .php

Ouvrez votre fichier dans le serveur

Procédez comme précédemment pour copier votre fichier sur le serveur, et le lire sur le serveur. Qu'obtenez-vous ?

Solution

affichages

III. Bilan⚓︎

En bref

client serveur

(Image Frédéric Junier)

Une architecture web est constituée de deux logiciels communiquant : le navigateur client qui effectue une requête pour disposer d'un document présent sur un serveur Web.

La communication entre le client et le serveur se fait par le protocole HTTP.

HTTP : HyperText Transfer Protocol

php

client serveur php

  • Etape 1 : Le navigateur envoie l'adresse que l'utilisateur a saisie (demande d’une page html ou php).

  • Etape 2 : Apache (le serveur web) cherche dans son arborescence (www) si le fichier existe, et si celui-ci porte une extension reconnue comme une application PHP. Si c'est le cas, Apache transmet ce fichier au parseur PHP.

  • Etape 3 : PHP interprète le fichier, c'est-à-dire qu'il va analyser et exécuter le code PHP qui se trouve entre les balises :
    <? PHP et ?>

  • Etape 4 : Le serveur web renvoie un fichier ne contenant plus de code PHP, donc le résultat sous forme de page HTML au navigateur qui l'interprète et l'affiche.

IV. Crédits⚓︎

Auteurs : K. Arbel, M.Coilhac, V-X. Jumel