224 lines
22 KiB
PHP
224 lines
22 KiB
PHP
@extends('layouts.vitrine')
|
||
|
||
@section('titre', 'Adressage IPv4 et sous-réseaux')
|
||
|
||
@section('contenu')
|
||
<section class="border-b-4 border-black bg-[#7CF2C0]">
|
||
<div class="mx-auto max-w-7xl px-5 pb-14 pt-10 lg:px-10">
|
||
<nav aria-label="Fil d’Ariane" class="flex flex-wrap gap-2 font-semibold"><a href="{{ route('cours.index') }}" class="underline underline-offset-4">Cours</a><span>/</span><a href="{{ route('cours.index') }}#sio" class="underline underline-offset-4">BTS SIO SISR</a><span>/</span><span>Bloc 2</span></nav>
|
||
<h1 class="mt-6 max-w-4xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Adressage IPv4 et sous-réseaux</h1>
|
||
<div class="mt-8 flex flex-wrap gap-3 text-sm font-extrabold">
|
||
<span class="border-2 border-black bg-white px-3 py-1">BTS SIO SISR · Bloc 2</span>
|
||
<span class="border-2 border-black bg-white px-3 py-1">Aussi : BTS CIEL, BUT R&T S1</span>
|
||
<span class="border-2 border-black bg-black px-3 py-1 text-white">4 h</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 lg:grid-cols-12 lg:px-10">
|
||
<nav class="lg:col-span-3" aria-label="Parties du cours">
|
||
<ol class="sticky top-6 grid gap-3">
|
||
<li><a href="{{ route('cours.cm') }}" class="flex items-center gap-3 border-4 border-black bg-white px-4 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFFBEA]"><span class="font-mono">1</span> CM · Lire</a></li>
|
||
<li><a href="#qcm" class="flex items-center gap-3 border-4 border-black bg-[#FFD23F] px-4 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><span class="font-mono">2</span> QCM · Valider</a></li>
|
||
<li><a href="#td" class="flex items-center gap-3 border-4 border-dashed border-black bg-[#C4B5FD] px-4 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><span class="font-mono">3</span> TD · optionnel</a></li>
|
||
<li><a href="#tp" class="flex items-center gap-3 border-4 border-black bg-[#7CF2C0] px-4 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><span class="font-mono">4</span> TP · Pratiquer</a></li>
|
||
<li><a href="#exam" class="flex items-center gap-3 border-4 border-black bg-black px-4 py-3 font-extrabold text-white shadow-[4px_4px_0px_#ec3013] hover:bg-[#ec3013]"><span class="font-mono">5</span> Examen</a></li>
|
||
</ol>
|
||
</nav>
|
||
<div class="grid gap-20 lg:col-span-9">
|
||
<section id="cm" class="scroll-mt-6" aria-labelledby="t-cm">
|
||
<h2 id="t-cm" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">1 · CM ·</span> Lire le cours</h2>
|
||
<a href="{{ route('cours.cm') }}" class="mt-8 grid gap-6 border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] transition-transform hover:-translate-y-1 md:grid-cols-[1fr_auto]">
|
||
<div>
|
||
<p class="text-3xl font-black leading-tight">Adressage IPv4 et sous-réseaux · cours complet</p>
|
||
<p class="mt-3 text-lg font-semibold">8 parties illustrées : bits, masque, ET logique, diffusion, découpage, adresses privées. Chronométré, à lire en entier pour débloquer le QCM de lecture.</p>
|
||
</div>
|
||
<div class="grid content-start gap-2 text-center"><span class="border-4 border-black bg-[#FFD23F] px-4 py-2 font-mono text-2xl font-semibold">⏱ 20 min</span><span class="font-extrabold">Lire le CM →</span></div>
|
||
</a>
|
||
</section>
|
||
|
||
<section id="qcm" class="scroll-mt-6" aria-labelledby="t-qcm">
|
||
<div class="flex flex-wrap items-end justify-between gap-4">
|
||
<h2 id="t-qcm" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">2 · QCM ·</span> Valider les notions</h2>
|
||
<p class="font-semibold">5 questions · correction expliquée</p>
|
||
</div>
|
||
<form id="qcm-form" class="mt-8 grid gap-6">
|
||
|
||
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
|
||
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 1</legend>
|
||
<p class="text-xl font-extrabold">Combien d’adresses d’hôtes utilisables dans un réseau /27 ?</p>
|
||
<div class="mt-4 grid gap-2 sm:grid-cols-2">
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q0" value="0" class="h-5 w-5 accent-black"><span class="font-mono">32</span></label>
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q0" value="1" class="h-5 w-5 accent-black"><span class="font-mono">30</span></label>
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q0" value="2" class="h-5 w-5 accent-black"><span class="font-mono">27</span></label>
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q0" value="3" class="h-5 w-5 accent-black"><span class="font-mono">62</span></label>
|
||
</div>
|
||
<div data-correction hidden class="mt-4 border-2 border-black p-4">
|
||
<p data-verdict class="font-black"></p>
|
||
<p class="mt-1 font-medium">Un /27 laisse 32 − 27 = 5 bits pour les hôtes, soit 2⁵ = 32 adresses. On retire l’adresse du réseau et celle de diffusion : il reste 30 hôtes.</p>
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="2">
|
||
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 2</legend>
|
||
<p class="text-xl font-extrabold">Quelle est l’adresse réseau de 10.0.3.200/22 ?</p>
|
||
<div class="mt-4 grid gap-2 sm:grid-cols-2">
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q1" value="0" class="h-5 w-5 accent-black"><span class="font-mono">10.0.3.0</span></label>
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q1" value="1" class="h-5 w-5 accent-black"><span class="font-mono">10.0.2.0</span></label>
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q1" value="2" class="h-5 w-5 accent-black"><span class="font-mono">10.0.0.0</span></label>
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q1" value="3" class="h-5 w-5 accent-black"><span class="font-mono">10.0.4.0</span></label>
|
||
</div>
|
||
<div data-correction hidden class="mt-4 border-2 border-black p-4">
|
||
<p data-verdict class="font-black"></p>
|
||
<p class="mt-1 font-medium">Le masque /22 vaut 255.255.252.0. Sur le 3ᵉ octet, 3 ET 252 = 0. L’adresse réseau est donc 10.0.0.0, et le réseau va jusqu’à 10.0.3.255.</p>
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
|
||
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 3</legend>
|
||
<p class="text-xl font-extrabold">Quel masque correspond à /26 ?</p>
|
||
<div class="mt-4 grid gap-2 sm:grid-cols-2">
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q2" value="0" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.128</span></label>
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q2" value="1" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.192</span></label>
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q2" value="2" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.224</span></label>
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q2" value="3" class="h-5 w-5 accent-black"><span class="font-mono">255.255.255.240</span></label>
|
||
</div>
|
||
<div data-correction hidden class="mt-4 border-2 border-black p-4">
|
||
<p data-verdict class="font-black"></p>
|
||
<p class="mt-1 font-medium">26 bits = 24 bits (255.255.255) + 2 bits dans le dernier octet. 2 bits à 1 à gauche : 128 + 64 = 192.</p>
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
|
||
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 4</legend>
|
||
<p class="text-xl font-extrabold">192.168.1.130/25 et 192.168.1.100/25 sont-ils dans le même réseau ?</p>
|
||
<div class="mt-4 grid gap-2 sm:grid-cols-2">
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q3" value="0" class="h-5 w-5 accent-black"><span class="font-mono">Oui</span></label>
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q3" value="1" class="h-5 w-5 accent-black"><span class="font-mono">Non</span></label>
|
||
</div>
|
||
<div data-correction hidden class="mt-4 border-2 border-black p-4">
|
||
<p data-verdict class="font-black"></p>
|
||
<p class="mt-1 font-medium">Avec /25, le dernier octet se coupe en deux blocs : 0 à 127 et 128 à 255. 100 est dans le premier, 130 dans le second. Il faut un routeur pour qu’ils communiquent.</p>
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="border-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]" data-q data-ok="1">
|
||
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 5</legend>
|
||
<p class="text-xl font-extrabold">Quelle commande affiche les adresses IP sous Debian ?</p>
|
||
<div class="mt-4 grid gap-2 sm:grid-cols-2">
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q4" value="0" class="h-5 w-5 accent-black"><span class="font-mono">ipconfig</span></label>
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q4" value="1" class="h-5 w-5 accent-black"><span class="font-mono">ip addr</span></label>
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q4" value="2" class="h-5 w-5 accent-black"><span class="font-mono">ifconfig /all</span></label>
|
||
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q4" value="3" class="h-5 w-5 accent-black"><span class="font-mono">netstat -r</span></label>
|
||
</div>
|
||
<div data-correction hidden class="mt-4 border-2 border-black p-4">
|
||
<p data-verdict class="font-black"></p>
|
||
<p class="mt-1 font-medium">ip addr (ou ip a) fait partie d’iproute2, installé par défaut. ipconfig est une commande Windows, et ifconfig vient de net-tools, qui n’est plus installé par défaut.</p>
|
||
</div>
|
||
</fieldset>
|
||
<div class="flex flex-wrap items-center gap-5">
|
||
<button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Corriger mon QCM</button>
|
||
<button type="reset" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none">Recommencer</button>
|
||
<p id="qcm-score" class="border-4 border-black bg-[#FFD23F] px-4 py-2 text-2xl font-black" hidden></p>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<section id="td" class="scroll-mt-6" aria-labelledby="t-td">
|
||
<h2 id="t-td" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">3 · TD ·</span> S’exercer <span class="ml-2 inline-block rotate-2 border-2 border-black bg-[#C4B5FD] px-2 align-middle text-base">optionnel</span></h2>
|
||
<ol class="mt-8 grid gap-6">
|
||
<li class="border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000] ">
|
||
<p class="font-mono text-sm font-semibold">Exercice 1</p>
|
||
<p class="mt-2 text-xl font-extrabold">Pour 172.16.5.130/25, donnez l’adresse réseau, la diffusion et le nombre d’hôtes.</p>
|
||
<details class="mt-4 border-2 border-black bg-white">
|
||
<summary class="cursor-pointer px-4 py-2 font-extrabold">Voir la correction expliquée</summary>
|
||
<p class="border-t-2 border-black px-4 py-3 font-medium">Un /25 coupe le dernier octet en blocs de 128. 130 est dans le bloc 128–255. Réseau : 172.16.5.128. Diffusion : 172.16.5.255. Hôtes : 2⁷ − 2 = 126.</p>
|
||
</details>
|
||
</li>
|
||
<li class="border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000] md:ml-10">
|
||
<p class="font-mono text-sm font-semibold">Exercice 2</p>
|
||
<p class="mt-2 text-xl font-extrabold">Découpez 192.168.1.0/24 en 4 sous-réseaux de même taille.</p>
|
||
<details class="mt-4 border-2 border-black bg-white">
|
||
<summary class="cursor-pointer px-4 py-2 font-extrabold">Voir la correction expliquée</summary>
|
||
<p class="border-t-2 border-black px-4 py-3 font-medium">4 sous-réseaux = 2 bits empruntés, donc /26. Sous-réseaux : 192.168.1.0, .64, .128 et .192, avec 62 hôtes chacun.</p>
|
||
</details>
|
||
</li>
|
||
<li class="border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000] ">
|
||
<p class="font-mono text-sm font-semibold">Exercice 3</p>
|
||
<p class="mt-2 text-xl font-extrabold">Le service comptabilité a 50 postes. Quel est le plus petit sous-réseau qui convient ?</p>
|
||
<details class="mt-4 border-2 border-black bg-white">
|
||
<summary class="cursor-pointer px-4 py-2 font-extrabold">Voir la correction expliquée</summary>
|
||
<p class="border-t-2 border-black px-4 py-3 font-medium">Il faut 2ʰ − 2 ≥ 50. Avec h = 6 : 64 − 2 = 62. On garde 6 bits d’hôte, soit un /26 (255.255.255.192). Un /27 ne donnerait que 30 hôtes.</p>
|
||
</details>
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<section id="tp" class="scroll-mt-6" aria-labelledby="t-tp">
|
||
<h2 id="t-tp" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">4 · TP ·</span> Pratiquer sur VM</h2>
|
||
<div class="mt-8 grid gap-8 md:grid-cols-2">
|
||
<div class="border-4 border-black bg-[#7CF2C0] p-6 shadow-[6px_6px_0px_#000000]">
|
||
<h3 class="text-2xl font-black">Deux VM, un routeur</h3>
|
||
<ol class="mt-4 grid gap-2 font-semibold">
|
||
<li>1. Placez deux VM dans 192.168.10.0/26.</li>
|
||
<li>2. Vérifiez qu’elles se joignent avec ping.</li>
|
||
<li>3. Passez la seconde en 192.168.10.70/26.</li>
|
||
<li>4. Constatez l’échec, puis ajoutez une route.</li>
|
||
</ol>
|
||
<p class="mt-4 font-mono text-sm font-semibold">4 étapes vérifiées automatiquement · 45 min</p>
|
||
<a href="{{ route('labs.essai') }}" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none mt-6">Lancer le TP <span class="font-mono" aria-hidden="true">→</span></a>
|
||
</div>
|
||
<div class="border-4 border-black bg-[#13233A] p-5 font-mono text-sm text-white shadow-[6px_6px_0px_#FF6FB5] md:translate-y-6">
|
||
<p><span class="text-[#7CF2C0]">eleve@vm1</span>:~$ sudo ip addr add 192.168.10.10/26 dev ens3</p>
|
||
<p><span class="text-[#7CF2C0]">eleve@vm1</span>:~$ ip -br addr</p>
|
||
<p>ens3 UP 192.168.10.10/26</p>
|
||
<p><span class="text-[#7CF2C0]">eleve@vm1</span>:~$ ping -c 1 192.168.10.11</p>
|
||
<p>1 packets transmitted, 1 received</p>
|
||
<p class="mt-2 text-[#FFD23F]">✓ Étape 2 validée</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="exam" class="scroll-mt-6" aria-labelledby="t-exam">
|
||
<h2 id="t-exam" class="text-5xl font-black tracking-tighter"><span class="font-mono text-2xl align-middle">5 · EXAMEN ·</span> Quand le prof le décide</h2>
|
||
<div class="mt-8 grid gap-6 border-4 border-black bg-black p-7 text-white shadow-[8px_8px_0px_#ec3013] md:grid-cols-[1fr_auto]">
|
||
<p class="text-xl font-bold">Le prof compose son sujet dans la banque de questions, le programme pour la classe, et suit l’épreuve en direct : sorties d’onglet, copier-coller bloqué, remise automatique.</p>
|
||
<div class="grid content-start gap-3"><a href="{{ route('examen') }}" class="border-4 border-white bg-[#ec3013] px-5 py-3 font-extrabold">Voir le mode examen</a><a href="{{ route('banque') }}" class="border-4 border-white bg-white px-5 py-3 font-extrabold text-black hover:bg-[#FFD23F]">Banque de sujets (profs)</a></div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<script>
|
||
(function () {
|
||
var form = document.getElementById('qcm-form');
|
||
var score = document.getElementById('qcm-score');
|
||
form.addEventListener('submit', function (e) {
|
||
e.preventDefault();
|
||
var bons = 0, total = 0;
|
||
form.querySelectorAll('[data-q]').forEach(function (q) {
|
||
total++;
|
||
var choix = q.querySelector('input:checked');
|
||
var ok = choix && choix.value === q.dataset.ok;
|
||
if (ok) bons++;
|
||
var c = q.querySelector('[data-correction]');
|
||
c.hidden = false;
|
||
c.className = 'mt-4 border-2 border-black p-4 ' + (ok ? 'bg-[#7CF2C0]' : 'bg-[#FFD9E8]');
|
||
q.querySelector('[data-verdict]').textContent = ok ? 'Bonne réponse.' : (choix ? 'Pas tout à fait.' : 'Pas de réponse.');
|
||
q.querySelectorAll('label').forEach(function (l, i) {
|
||
l.classList.toggle('outline', String(i) === q.dataset.ok);
|
||
l.classList.toggle('outline-4', String(i) === q.dataset.ok);
|
||
l.classList.toggle('outline-black', String(i) === q.dataset.ok);
|
||
});
|
||
});
|
||
score.hidden = false;
|
||
score.textContent = bons + ' / ' + total;
|
||
});
|
||
form.addEventListener('reset', function () {
|
||
form.querySelectorAll('[data-correction]').forEach(function (c) { c.hidden = true; });
|
||
form.querySelectorAll('label').forEach(function (l) { l.classList.remove('outline', 'outline-4', 'outline-black'); });
|
||
score.hidden = true;
|
||
});
|
||
})();
|
||
</script>
|
||
@endsection
|