🚀 Découvrir la différence entre un serveur et un ordinateur

0 comments

La video liée au cous Ordinateur et Serveur

https://www.youtube.com/watch?v=EQxQ-AFBnYY

Un cours pour comprendre comment "parler" entre machines !

1️⃣ Objectif pédagogique

À la fin de ce module, tu sauras :

✅ Distinguer un ordinateur classique d’un serveur (à quoi ça sert ? comment ça marche ?).

✅ Comprendre le rôle d’un serveur web avec un exemple concret (WAMP).

✅ Expérimenter en créant un mini-serveur local pour afficher une page web.

✅ Décrypter les termes techniques comme client, port, HTTP, IP… sans jargon !

💡 Pour qui ?

Débutants en informatique (dès 10 ans avec un adulte).
Curieux qui veulent héberger un site, un jeu, ou comprendre comment fonctionnent Internet et les réseaux.

2️⃣ Présentation du module

🎯 Pourquoi ce cours ?

Imagine que ton ordinateur est comme une maison :

Tu peux y vivre seul (bureautique, jeux…).
Mais si tu veux recevoir des invités (partager des fichiers, un site web, un jeu en ligne), il te faut un serveur : une maison toujours ouverte, avec un portier (le serveur web) pour accueillir les visiteurs.

Aujourd’hui, on va :*

Comparer un PC classique et un serveur.
Décortiquer un serveur web avec WAMP (un outil simple pour débuter).
Créer notre premier serveur local et afficher une page web !

3️⃣ Matériel nécessaire

Un PC pas trops ancien.
WAMP (ou MAMP pour Mac / XAMPP pour Linux) → Logiciel qui transforme ton PC en serveur web local. 🔗 Téléchargement gratuit ici
Un navigateur web (Chrome, Firefox, Edge, etc.) → Pour afficher et tester ta page web. (Déjà installé sur ton ordinateur !)
Un éditeur de texte (VS Code, Notepad++, Sublime Text, etc.) → Pour écrire et modifier ton code HTML/PHP.🔗 VS Code (gratuit et recommandé)
💡 Optionnel : Un deuxième appareil (smartphone, tablette, autre PC) → Pour tester l’accès à ton serveur depuis un autre appareil. (Utilise ton réseau Wi-Fi local.)

⚠️ Attention : On travaille en local (sur ton réseau) pour ce cours. Pas besoin d’Internet !

4️⃣ Explication du fonctionnement

🔍 Ordinateur vs Serveur : la bataille des rôles !

Ordinateur Classique Serveur Utilisation : Pour toi seul (travail, jeux, vidéos).

Temps de fonctionnement : Éteint la nuit (pas besoin de fonctionner 24h/24).

Composants : Standard (1 alimentation, 1 disque dur).

Exemples : PC gamer, PC de bureau, portable.

Serveur utilisation : Pour les autres (répond aux demandes de plusieurs utilisateurs, ex : afficher un site web).

Temps de fonctionnement : Toujours allumé (comme un restaurant ouvert 24h/24 pour servir les clients).

Composants : Redondants (2 alimentations, 2 disques pour éviter les pannes).

Exemples : Serveur web (Apache), serveur de jeux (Minecraft), NAS (stockage).

📌 Analogies :*

Ordinateur = Une voiture personnelle (tu l’utilises quand tu veux).
Serveur = Un bus (il transporte plusieurs personnes en même temps, selon un horaire fixe).

🌐 Comment ça communique ? Le dialogue client-serveur

Quand tu tapes google.com dans ton navigateur :

Ton PC (client) envoie une demande : "Hey, serveur de Google, montre-moi ta page !".
Le serveur répond : "Tiens, voici le code HTML de ma page !" → Ton navigateur l’affiche.

🔌 Les ports :

Comme les numéros de porte d’un immeuble.
Port 80 : HTTP (sites web non sécurisés).
Port 443 : HTTPS (sites sécurisés, avec un cadenas 🔒).
Port 22 : SSH (connexion sécurisée à un serveur).

🎮 Exemple avec un jeu :

Serveur Minecraft : Il gère le monde du jeu et les actions des joueurs.
Ton PC (client) : Il affiche le jeu et envoie tes actions (ex : "je casse un bloc").

🖥️ Focus : Le serveur web (notre cas pratique avec WAMP)

WAMP = Windows + Apache + MySQL + PHP (un pack tout-en-un pour créer un serveur web local).

Apache : Le "portier" qui écoute les demandes sur le port 80.
MySQL : La "base de données" (pour stocker des infos, comme les articles d’un blog).
PHP : Un langage pour créer des pages dynamiques (ex : un formulaire).

📂 Où sont les fichiers ?

Dans WAMP, tes pages web seront dans :


C:\\\\wamp64\\\\www\\\\mon_projet\\\\

(On verra ça en pratique !)

5️⃣ Premier code minimaliste

🛠️ Installer WAMP et créer une page web

Télécharge et installe WAMP ou MAMP :

Lien officiel (choisis la version adaptée à ton PC).
Pendant l’installation, laisse les options par défaut.

Lance WAMP :

Clique sur l’icône WAMP dans la barre des tâches (un rond avec une feuille).
Attends que l’icône devienne verte (le serveur est prêt !).

Crée un dossier pour ton projet :

Va dans C:\\\\wamp64\\\\www\\\\.
Crée un dossier nommé mon_premier_serveur.

Écris ta première page HTML :

Ouvre Notepad++ ou VS Code.
Copie ce code (c’est du HTML, le langage des pages web) :



<!DOCTYPE html>

<html>

<head>

<title>Mon premier serveur !</title>

<style>

body { background-color: lightblue; font-family: Arial; }

h1 { color: darkred; }

</style>

</head>

<body>

<h1>🎉 Bienvenue sur MON serveur local !</h1>

<p>Si tu vois cette page, c'est que ton serveur WAMP fonctionne !</p>

<p>Essaie d'accéder à cette page depuis ton smartphone (sur le même Wi-Fi) :

<strong>http://[IP_DE_TON_PC]/mon_premier_serveur/</strong>

</p>

</body>

</html>

Enregistre le fichier sous C:\\\\wamp64\\\\www\\\\mon_premier_serveur\\\\index.html.

Accède à ta page :

Ouvre ton navigateur et tape :


<http://localhost/mon_premier_serveur/>

Magie ! Ta page s’affiche !

6️⃣ Décryptage du code


<!DOCTYPE html> <!-- Dit au navigateur : "C'est une page HTML5" -->

<html> <!-- Balise racine : tout le contenu est dedans -->

<head> <!-- En-tête (titre, styles, scripts) -->

<title>Mon premier serveur !</title> <!-- Titre de l'onglet -->

<style> <!-- CSS : pour le design -->

body { background-color: lightblue; } /* Fond bleu clair */

h1 { color: darkred; } /* Titre en rouge foncé */

</style>

</head>

<body> <!-- Corps de la page (ce que tu vois) -->

<h1>🎉 Bienvenue...</h1> <!-- Titre niveau 1 -->

<p>...</p> <!-- Paragraphe -->

</body>

</html>

💡 Pourquoi index.html ?

C’est le fichier par défaut que le serveur cherche quand tu accèdes à un dossier.
Sans lui, tu verrais une liste de fichiers (comme dans l’Explorateur Windows).

7️⃣ Expérimentation guidée

🔍 Activité 1 : Accéder au serveur depuis un autre appareil
1. Trouve l’IP de ton PC :
- Sous Windows : Win + R → tape cmd → dans la console, tape ipconfig.
- Cherche Adresse IPv4 (ex : 192.168.1.10).
1. Depuis un smartphone/tablette (sur le même Wi-Fi) :
- Ouvre le navigateur et tape :
```
[http://[ip de ton serveur]/mon_premier_serveur/](<http://192.168.1.10/mon_premier_serveur/>)
```
- Résultat : Ta page s’affiche ! Tu viens d’accéder à ton serveur depuis un autre appareil.
❓ Problème ?
- Vérifie que le pare-feu autorise Apache (port 80).
- Assure-toi que les deux appareils sont sur le même réseau.
🛠️ Activité 2 : Modifier la page en temps réel
1. Ouvre index.html dans VS Code.
2. Change le texte (ex : ajoute <p>J’adore les serveurs !</p>).
3. Enregistre (Ctrl + S).
4. Actualise la page dans ton navigateur (F5).
→ Les changements apparaissent instantanément !

💡 Pourquoi ?
- Ton serveur Apache surveille les fichiers et les envoie à chaque demande.
🔧 Activité 3 : Ajouter une image
1. Télécharge une image (ex : un logo) et place-la dans C:\\\\wamp64\\\\www\\\\mon_premier_serveur\\\\ (nomme-la logo.png).
2. Modifie index.html pour ajouter :
```
<img src="logo.png" alt="Mon logo" width="200">
```
1. Actualise → L’image s’affiche !
🌍 Activité 4 : Simuler un site avec plusieurs pages
1. Crée un nouveau fichier a_propos.html dans le même dossier :
```
<!DOCTYPE html>

<html>

<head>

<title>À propos</title>

</head>

<body>

<h1>Qui suis-je ?</h1>

<p>Je suis un·e futur·e expert·e en serveurs !</p>

<a href="index.html">Retour à l'accueil</a>

</body>

</html>
```
1. Ajoute un lien dans index.html :
```
<a href="a_propos.html">En savoir plus</a>
```
1. Teste les liens en cliquant dessus !

8️⃣ Projet libre ou bonus

🚀 Bonus 1 : Créer un mini-blog statique

Ajoute 3 pages : accueil.html, articles.html, contact.html.
Utilise des liens pour naviguer entre elles.
Exemple :


<!-- Dans accueil.html -->

<h1>Mon Blog</h1>

<ul>

<li><a href="articles.html">Lire mes articles</a></li>

<li><a href="contact.html">Me contacter</a></li>

</ul>

Bonus 2 : Découvrir les logs d’Apache
- Dans WAMP, clique sur "Logs" → "Apache" → access.log.
- Tu verras qui a accédé à ton serveur (ton IP, la page demandée, l’heure…).
- Exemple de ligne :
```
192.168.1.5 - - [10/Oct/2023:14:20:45 +0200] "GET /mon_premier_serveur/ HTTP/1.1" 200 456
```
→ 192.168.1.5 a demandé la page /mon_premier_serveur/ à 14h20.

9️⃣ Résumé

En résumé, ce cours t’a appris que ton ordinateur peut devenir un "serveur" – une machine dédiée à partager des ressources (comme un site web ou un jeu) avec d’autres appareils, contrairement à un PC classique utilisé pour des tâches personnelles. Grâce à WAMP, tu as transformé ton ordinateur en serveur web local, créé une page HTML accessible via localhost ou ton adresse IP, et compris comment les clients (navigateurs, smartphones) communiquent avec le serveur via des ports comme le 80 (HTTP). Tu as aussi découvert que les serveurs existent sous différentes formes (web, jeux, bases de données) et peuvent être hébergés localement (chez toi) ou dans le cloud. Maintenant, tu peux expérimenter en modifiant ton code, en testant depuis plusieurs appareils, ou même en hébergeant un petit projet comme un blog ou un jeu multijoueur. Le plus important ? Un serveur, c’est avant tout un outil pour partager et échanger – et tu viens d’en maîtriser les bases !

💡 À retenir :*
- Un serveur écoute les demandes et répond.
- Avec WAMP, tu peux tester un serveur sans risque sur ton PC.
- Les pages web sont juste des fichiers (HTML, CSS, JS) stockés sur un serveur.
🔟 Ressources complémentaires

📚 Pour aller plus loin
- Tutoriel vidéo : [Installer WAMP et créer un site local](https://www.youtube.com/watch?v=...) (à remplacer par un lien pertinent).
- Livre : "Le HTML/CSS pour les nuls" (pour créer des pages web).
- Outils :
- XAMPP ou MAMP(recommandé) (alternative à WAMP pour Mac/Linux).
- Netcat (pour tester les ports en ligne de commande).
🛠️ Projets à essayer
1. Héberger un site WordPress en local avec WAMP.
2. Créer un serveur Minecraft .
3. Faire un chat en temps réel avec PHP/MySQL.
🤔 FAQ (Questions fréquentes)
- Q : Est-ce que mon serveur local est accessible depuis Internet ?
R : Non, seulement sur ton réseau local. Pour le rendre public, il faudrait configurer ton routeur (et c’est risqué sans sécurité).
- Q : Pourquoi mon IP change-t-elle ?
R : Ton routeur (box Internet) attribue des IP dynamiques aux appareils. Pour une IP fixe, configure une réservation DHCP dans ta box.
- Q : Puis-je utiliser un Raspberry Pi comme serveur ?
R : Oui ! Avec Apache ou Nginx, tu peux en faire un mini-serveur web ou un NAS.

🎉 Félicitations ! Tu as maintenant un serveur web fonctionnel et une meilleure compréhension des échanges entre machines. À toi de jouer : modifie, expérimente, et amuse-toi ! 🚀

💬 Un doute ? Une question ?

N’hésite pas à demander dans les commentaires ou à chercher des tutoriels avec les mots-clés :

"serveur web débutant", "WAMP premier site", "différence client serveur simple".

🔧 Prochaine étape ?
- Apprendre à sécuriser ton serveur (mots de passe, HTTPS).
- Découvrir PHP/MySQL pour des sites dynamiques.

Téléchargez les codes sources

0 comments

Sign upor login to leave a comment