Introduction Internet

Développement Web – BAC1

Références:

V. MARTIN
 Objectifs du cours
Objectifs Méthodologie Evaluation

Au terme du cours, l'étudiant doit valider les acquis d’apprentissage suivants :

AA1 - Connaitre les notions de base et les principes de fonctionnement d’Internet
AA2 - Elaborer une architecture de site internet (structure des pages, navigation)
AA3 - Réaliser un site interactif en utilisant de manière adéquate les langages HTML5, CSS et PHP
AA4 - Développer des fonctionnalités type CRUD sur des informations stockées
dans un serveur de base de données
AA5 - Utiliser les mécanismes de session et de cookies pour répondre
notamment à des besoins d’authentification
AA6 - Concevoir un site web en étant conscient des différences d'interprétation
des standards HTML et CSS par les principaux navigateurs
 Pourquoi PHP ?
Objectifs Méthodologie Evaluation
 Méthodologie générale
Objectifs Méthodologie Evaluation
• Matière organisée en chapitres
• Par chapitre :
• 1 tutoriel
• des exercices
• 1 QCM formatif
• 1 date d'échéance minimale imposée !
• Résultat de 70% minimum au QCM pour débloquer le chapitre suivant !
• Organisation recommandée :
Et la triche ?
• Tutoriel,
- sur QCM ?
• Exercices - sur exercices ?
• Projet
• Présence vivement conseillée en labo : feedback personnalisé sur exercices !
 Méthodologie (Q1)
Objectifs Méthodologie Evaluation
• Organisation : 26h dont 10 séances de laboratoire de 2h
• HTML
• CSS
• Introduction à PHP

• Travaux à remettre :
• Projet de développement
• 29 octobre EVAL_V1 (formatif)
• 24 décembre EVAL_V2 (formatif)
• Evaluation :
• Janvier : Examen QCM dispensatoire et Examen pratique dispensatoire
 Méthodologie (Q2)
Objectifs Méthodologie Evaluation
• Organisation : 32h de 15 séances de laboratoire de 2h
• PHP en détails
• MySQL
• Formulaires
• Sessions et cookies
• Travaux à remettre:
• Projet de développement :
• début avril EVAL_V3 (formatif)
• début mai EVAL_V4 (évaluation finale)
• Evaluation :
• Juin : Examen QCM complet ou partiel et Examen pratique complet ou partiel
 Evaluation globale du cours (Juin)
Objectifs Méthodologie Evaluation

• Projet web : 60% de la note finale

• Évaluation finale du projet web : EVAL_V4
• Retard, fraude ou mauvais répertoire : cote nulle !!

• Examen écrit : 40% de la note finale

• Janvier : QCM et pratique sur ordinateur (dispensatoire de la partie 1 du cours)
• Mai/Juin : QCM et pratique sur ordinateur
• partie 1 pour les étudiants n'ayant pas réussi en janvier (meilleure note retenue)
• partie 2 pour tous les étudiants
• Fraude : cote nulle !!

Si projet non validé => Cote UE de maximum 7/20 !

 Evaluation globale du cours (Août)
Objectifs Méthodologie Evaluation
• Projet web : 60% de la note finale
• Des fonctionnalités additionnelles seront imposées
• Des améliorations/corrections seront exigées par rapport à la version soumise en juin
• Dispense projet si cote de EVAL_V4 min 10/20
• Retard, fraude ou mauvais répertoire => cote nulle !!

• Examen écrit : 40% de la note finale

• QCM et pratique sur ordinateur (sur toute la matière)
• Dispense QCM si QCM Q1+Q2 min 10/20
• Dispense Pratique si Pratique Q1+Q2 min 10/20
• Fraude : cote nulle !!

Si projet non validé => Cote UE de maximum 7/20 !

 Vue globale de l’année
Objectifs Méthodologie Evaluation

29/10 24/12 Début-Avril Début-Mai 7/08

EVAL_V1 EVAL_V2 EVAL_V3 EVAL_V4 EVAL_V5
QCM QCM
QCM Q2, Q2 + Q1
Q1 Q1

AI

PHP: les bases

HTML: Initiation PHP: chaines et fonctions
XHTML, HTML5 et web sémantique PHP: tableaux et dates
HTML: formulaires PHP: formulaires
CSS: Initiation PHP: classes
CSS: Positionnement PHP: formulaires avancés
CSS: Module FlexBox PHP: MySQL et PDO

PHP: Introduction PHP: Sessions et cookies

 Développement web dans votre cursus
Objectifs Méthodologie Evaluation

B1 – Q1&2 – UE6:
B1 Développement Web

HTML, CSS
HTML, CSS, PHP

B2 – Q1&2 – UE23: B2 – Q2 – UE19: B2 – Q2 – UE20:

B2 SALTo Développement web Langages de scripts
avancé dynamiques
ASP.NET JS

e , React, …. B3 – Q1 – UE26:
B3 B3 – Q2 :
A ngula r, Vu
Frameworks Web
Stage
 Développement Web
Réseaux OSI Histoire TCP/IP WWW Usages Internet

• Développement Web…

• Surfer sur le web…

• Aller sur internet…

Pour vous : web et internet c'est la même chose ?

 Internet
Réseaux OSI Histoire TCP/IP WWW Usages Internet

Interconnected networks…
 Réseau simple
Réseaux OSI Histoire TCP/IP WWW Usages Internet
 Intérêts des réseaux ?
Réseaux OSI Histoire TCP/IP WWW Usages Internet

• Partage de ressources (données)

• Fiabilité (duplication)
• Adaptabilité (scalabilité)
• Collaboration
 Difficultés d'une mise en réseau
Réseaux OSI Histoire TCP/IP WWW Usages Internet

? ?

Type de support

Langue => Différents protocoles…

Localisation
 Modèle OSI
Réseaux OSI Histoire TCP/IP WWW Usages Internet
Modèle théorique pour structurer les différents protocoles

1-Physique:
Transmission de bits
2- Liaison:
Envoi de trames
3- Réseau:
Envoi de paquets de proche en proche
4- Transport:
Envoi de datagramme de bout en bout entre processus
5-Session:
Synchronisation des échanges et ouverture/fermeture des sessions
6-Présentation:
Encodage et décodage des données applicatives
7-Application
 Préhistoire d'Internet
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• 1955: Prémices d'un réseau commercial par IBM : SABRE
(Semi Automated Business Environment)

• 1958: Réseau militaire SAGE par l'ARPA (Advanced Research Project Agency)
• 1958: Création du 1er modem par les Laboratoires Bell
• 1961: Première théorie de communication par commutation de paquets en remplacement
des circuits dédiés
• 1969: 1er réseau par commutation de paquets, ARPANET, relie 4 ordinateurs
situés dans 4 universités américaines à l'initiative d'ARPA grâce aux
commutateurs (switch) IMP (Interface Message Processor).
• 1972: Première application de courrier électronique (@) par Ray Tomlinson
 Naissance d'Internet
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• 1973: définition du modèle et des protocoles TCP/IP
• 1974: Lancement de Telenet, premier réseau commercial à commutation par paquets
• 1983: ARPANET adopte TCP/IP pour la première interconnexion par passerelle entre deux réseaux
(ARPANET et CSNET),
1ière mention d'Internet (Interconnected networks)

• 1984: Fondation de Cisco Systems qui fabrique les premiers routeurs,

1ier serveur DNS
 Modèle TCP/IP
Réseaux OSI Histoire TCP/IP WWW Usages Internet

(Ports)

(IP)

(MAC)
 Couche Accès réseau
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• Support matériel de communication :
Application
– Type de câble ou d’onde
– Connecteurs Transport

– Distances maximales Internet

– Longueurs d’ondes Accès

réseau
– Niveaux des signaux…
• Transmission de bits
• Différents protocoles de liaison dont :
• Ethernet :

• PPP (Point-to-Point Protocol)

 Couche Internet
Réseaux OSI Histoire TCP/IP WWW Usages Internet

• IP est le protocole qui gère le transport de paquets de données (datagrammes) Application

• Chaque machine possède une « adresse IP » qui permet de la localiser sur le réseau.
Transport

• Les datagrammes sont acheminés à destination (adresse IP) grâce à des routeurs qui Internet

décident du chemin à emprunter jusqu’au routeur suivant… et ainsi de suite jusqu’à Accès
la destination. réseau

BLR

BE D PL RU
UA
 Commutateur vs Routeur
Réseaux OSI Histoire TCP/IP WWW Usages Internet

Application

Transport

Internet

Accès
réseau

Routeur
Commutateur (router)
(switch) IP
MAC
 Adresses IP
Réseaux OSI Histoire TCP/IP WWW Usages Internet
Chaque périphérique possède une adresse qui l'identifie sur le réseau.
Application

Transport
• IPv4 : les adresses IP sont codées sur 32 bits Internet
– Notation décimale : 4 chiffres entre 0 et 255, séparés par des points.
Accès
– Ex : 193.190.64.116 réseau

• IPv6 : les adresses IP sont codées sur 128 bits

– Inventé pour pallier le manque (imminent) d’adresses IPv4
– Notation hexadécimale : 8 groupes de 2 octets séparés par 2 points.
– Ex : 2001:0ba9:002f:96a3:0000:acf1:25cf:ef59
 Humour de geeks…
Réseaux OSI Histoire TCP/IP WWW Usages Internet

Application

Transport

Internet

Accès
réseau
 Masque de sous-réseau
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• Masque de sous-réseau
Application
– Permet d’identifier pour une adresse IP :
• L’adresse de routage Transport

• L’identifiant de l’interface Internet

Accès
Notation décimale Notation binaire réseau

Adresse IPv4 91.198.174.2 01011011.11000110.10101110.00000010

Masque de sous-réseau 255.255.224.0 11111111.11111111.11100000.00000000
Adresse de sous-réseau 91.198.160.0 01011011.11000110.10100000.00000000
Adresse de l'hôte 0.0.14.2 00000000.00000000.00001110.00000010

– Permet une optimisation de bande passante en limitant les broadcasts

 Limites du protocole IP
Réseaux OSI Histoire TCP/IP WWW Usages Internet

Application

? Transport

Internet

Accès
réseau

• IP n’offre pas beaucoup de garanties :

– Les données contenues dans le datagramme peuvent être corrompues durant le trajet
– Les datagrammes peuvent arriver dans un ordre différent de celui de l’envoi
– Les datagrammes peuvent être perdus
– Les datagrammes peuvent être dupliqués
• MAIS les entêtes des datagrammes transmis ne sont pas corrompus
• Cela permet de simplifier le travail des routeurs au profit de la rapidité…
• … mais il faut un mécanisme palliant ces carences.
 Couche transport
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• Deux protocoles définis :
Application
– TCP Transmission Control Protocol:
– Ajout d'un numéro de séquence sur chaque segment TCP (ordre) Transport

– Ajout d'une somme de contrôle (checksum) par l'émetteur et vérifiée par le destinataire (validité) Internet
– Mécanisme d'acquittement : retransmission si acquittement (ACK) non reçu après un certain délai.
Accès
– Mécanisme de contrôle de flux réseau

– UDP User Datagram Protocol:

– Pas de connexion préalable à l'envoi de données
– Pas de garantie de livraison des datagrammes ni de leur ordre d'arrivée
– Utile pour la transmission rapide de petites quantités de données depuis un serveur vers de nombreux clients
(jeux en ligne, VoIP, …)
 Couche application
Réseaux OSI Histoire TCP/IP WWW Usages Internet

De nombreux protocoles et concepts :
Application

Nom de domaines, DNS, URL
Transport

HTTP Internet


FTP Accès
réseau

TLS

SMTP, POP, IMAP

Telnet, SSH

LDAP

SOAP

WebDAV

VoIP, Streaming
 Protocoles applicatifs
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• Courriels:
• SMTP (Simple Mail Transfert Protocol); Port 25; transfert de courriel vers serveurs de messagerie (courrier
sortant)
• POP (Post Office Protocol); Port 110; récupération de courriels situés sur un serveur de messagerie
(courrier entrant)
• IMAP (Internet Message Access Protocol); Port 143; idem POP avec la gestion de dossiers, la
synchronisation, …
Exemple : https://helpdesk.helmo.be/kb/faq.php?id=3
• Transfert de fichier:
• FTP (File Transfert Protocol); Ports 21 (commandes) et 20 (données); transfert de fichiers entre un client et
un serveur de fichiers.
Exemple: FileZilla
• WebDAV (Web-based Distributed Authoring and Versioning); gestion de fichiers complète avec
synchronisation et publication sur un serveur de fichiers
 Protocoles applicatifs
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• Authentification:
• LDAP (Lightweight Directory Access); Port 389; Gestion de services d'annuaire
• WebServices:
• SOAP (Simple Object Access Protocol);échange d'informations structurées en XML via HTTP ou SMTP
• Ligne de commande:
• Telnet (Terminal Network); Port 23; exemple de client telnet : Putty
• Téléphonie:
• VoIP (Voice Over IP); transport de la voix sur réseau TCP/IP
• Audio/Vidéo:
• Streaming; lecture du flux audio/vidéo à mesure qu'il est diffusé. Intérêts ?
 Protocoles sécurisés
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• TLS (Transport Layer Security) en remplacement de SSL (Secure Socket Layer); Port 443
- Authentification (via des certificats)
- Chiffrage des données
- Intégrité des données

HTTP + TLS = HTTPS

FTP + TLS = FTPS
LDAP + TLS = LDAPS
Telnet + TLS = SSH

• VPN (Virtual Private Network)

* BAC 1 - 2 - 3 - Informatique de gestion - Ressources informatiques
 Nom de domaine
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• Un domaine permet de regrouper un ensemble de machines appartenant généralement à
une même organisation.
• ex : helmo.be

• Le nom de domaine est composé de 2 parties :

• Top-level domain (TLD) : code du pays (.be, .fr,…) ou un code générique identifiant l’activité (.com, .net,
…)
• Sub-level domain (SLD) : un ou plusieurs labels séparés par un point (helmo, www.helmo ,
elearning.helmo,…)

• Chaque nom de domaine va être associé à l’adresse IP permettant de localiser la machine

sur Internet.
 DNS
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• DNS : Domain Name System

• Service permettant d’établir une correspondance entre l’adresse IP d’une machine et le nom
de domaine (plus facile à retenir).

• Lors de chaque requête utilisant un nom de domaine, un ou plusieurs serveurs DNS vont
être interrogés afin de trouver l’adresse IP équivalente (on parle de « résolution
d’adresse »).

Problème courant :
• Exemple : - web accessible sauf helmo.be
• International : https://who.is/ => serveur DNS != 192.168.128.2
• Belgique : https://www.dnsbelgium.be/whois
 URL
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• URL : Uniform Resource Locator
• Localise une ressource sur Internet et indique comment y accéder (protocole).
• http://www.helmo.be/index.html
• ftp://john:secret@file.truc.com
• telnet://193.15.162.12:23
• …
• URI : Uniform Resource Identifier (URL ou URN Uniform Resource Name)
 Structure d'une URL
Réseaux OSI Histoire TCP/IP WWW Usages Internet

protocole : indique par chemin : utilisé pour localiser la ressource sur le

quel moyen on peut serveur. Sensible à la casse. Peut être suivi d’un
accéder à la ressource « query string » (…?para1=value1&para2=value2)
(http, ftp,…). et/ou d’une ancre « anchor » (…#part1) permettant
d’identifier un fragment de la ressource.

[protocole]://[user:pass]@[domain][:port]/[chemin]

port : permet d’indiquer sur

quel port la ressource est
domain : donne la recherchée. Si pas spécifié,
localisation sur le le port par défaut du
user:pass : nom d’utilisateur protocole sera utilisé (ex :
réseau (nom de
et mot de passe; permet http : 80 , ftp : 21, …)
domaine ou adresse
d’authentifier l’utilisateur et
IP).
autoriser l’accès (facultatif).
 URL absolue ou relative ?
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• URL absolue : c’est l ’adresse complète d’une ressource sur le web; elle est indépendante du
contexte
– ftp://ftp.files.be/docs/cv.docx
– https://pegase.helmo.be/default.aspx
– http://www1.student.school.be/index.php
– http://192.168.3.1:8080/create/form.htm

• URL relative : c’est une adresse qui est dépendante du contexte (c-à-d de l’URL courante). Le
protocole et le domaine ne sont pas spécifiés car déduits de l’URL courante.
L’URL relative permettra de déplacer plus facilement son site vers une autre racine. On peut
remonter dans la structure hiérarchique :
– / remonte à la racine
– ../ remonte d’un niveau dans la hiérarchie
 Exemples urls
Réseaux OSI Histoire TCP/IP WWW Usages Internet
Soit la position courante http://www.helmo.be/cg/info/grille.html

L’adresse relative… …est équivalente à :

/cg/auto/cours.html http://www.helmo.be/cg/auto/cours.html

cours.html http://www.helmo.be/cg/info/cours.html

../biomed/grille.html http://www.helmo.be/cg/biomed/grille.html

../../gramme/ing/grille.html http://www.helmo.be/gramme/ing/grille.html

../info/../info/grille.html http://www.helmo.be/cg/info/grille.html
 FAI : Fournisseur Accès Internet
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• Un Fournisseur d’Accès Internet (FAI1) est une entreprise qui est en mesure d’offrir une
connexion Internet à ses abonnés.

• Le FAI gère généralement son propre réseau (AS2), directement connecté au reste d’Internet
via un point d’échange Internet (IXP3)

• Le FAI gère un certain nombre d’adresses IP qu’il peut assigner à ses abonnés pendant la
durée de leur connexion.
• Le FAI va aussi s’occuper de vérifier l’identité de l’utilisateur lors de la connexion et facturer
le service suivant le type d’abonnement
• En Belgique, nous disposons de deux IXP : le Belgian National Internet eXchange (BniX) et le
Free Belgian Internet Exchange (FreeBIX).
1
En anglais : ISP – Internet Service Provider
2
En anglais : AS – Autonomous System
3
En anglais : IXP – Internet eXchange Point
 Connexion à Internet
Réseaux OSI Histoire TCP/IP WWW Usages Internet
http://www.google.com smtp://smtp.helmo.be
Utilisateur privé xmpp://user@im.apper.org

193.190.64.116
66.102.13.106 68.178.232.99

Réseau
téléphonique
(ou câble)
FAI
Internet

IXP

AS
 Internet… en résumé
Réseaux OSI Histoire TCP/IP WWW Usages Internet

Réseau de réseaux exploitant le protocole TCP/IP

… et le web alors ?
 World Wide Web
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• WWW ≠ Internet
• Le World Wide Web désigne un système de serveurs permettant d’accéder à des ressources
(pages HTML, graphiques, sons, vidéos) reliés entre eux par des liens hypertexte.
• WWW = HTTP + URL + HTML
• Un navigateur (browser) est un logiciel permettant de naviguer sur le web.
• On considère que l’inventeur du World Wide Web est Tim Berners-Lee.
 Histoire Internet, suite… et pas fin !
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• 1990 : Naissance du World Wide Web
• Premiers FAI (1994 en France, 1995 Skynet en Belgique)

• 1995 : Accords commerciaux entre opérateurs de réseau et la NSF => NAP (Network Access
Points)
- plusieurs épines dorsales
- des centaines de réseaux régionaux
- des dizaines milliers de LAN
- des millions d'ordinateurs connectés

• 1995: Amazon publie son premier site de vente en ligne

• 1998 : Fondation de Google
• 2004: Fondation de Facebook
• 2005 : Fondation de YouTube (la première vidéo: https://www.youtube.com/watch?v=jNQXAC9IVRw)
• 2006: Fondation de Twitter
• …
 Protocole HTTP
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• HTTP : Hyper Text Transfer Protocol
• Port par défaut : 80
• Utilisé sur Internet pour récupérer des ressources web (pages HTML, images, documents…)
à partir de leur URL.
• Protocole de communication client-serveur.
• Basé sur un mécanisme REQUEST / RESPONSE
– Le client (navigateur) lance une requête vers une URL
– Le serveur associé au nom de domaine spécifié dans l’URL répond en renvoyant la ressource (ou une
erreur)

Request HTTP
Clients Serveurs Web
Response HTTP
 Communication HTTP simplifiée
Réseaux OSI Histoire TCP/IP WWW Usages Internet
Serveur DNS

2) Requête DNS
www.helmo.be = ??

192.168.2.1
1) Saisie de l’URL dans le navigateur
3) Réponse DNS
(www.helmo.be/index.html) www.helmo.be = 68.178.232.99

www.helmo.be
4) Requête HTTP
GET/HTTP/1.1
Host: www.helmo.be
6) Affichage de la page …..
web dans le
navigateur 68.178.232.99
5) Réponse HTTP
Status: HTTP/1.1 200 OK
…..
Page web en HTML
 Dangers d'Internet
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• Hoax
– Information fausse ou périmée envoyée par email et relayée spontanément par les internautes.
– Pas de danger pour l’ordinateur mais risque de désinformation, d’atteinte à l’image, d’encombrement du
réseau ou des organismes mentionnés (ex: accueil d’hôpital)

• Virus
– Logiciel malveillant cherchant à se propager à d’autres ordinateurs via un programme hôte.
– Peut affecter plus ou moins gravement le fonctionnement de l’ordinateur infecté

• Worm (ver)
– Logiciel malveillant qui se propage sur plusieurs ordinateurs en utilisant le réseau internet sans nécessiter
un programme hôte.
– Un ver n'a pas besoin d'un programme hôte pour se reproduire. Il exploite les différentes ressources de
l'ordinateur qui l'héberge pour assurer sa reproduction.
– Peut servir de relai pour une attaque de type « Denial of Service » ou provoquer d’autres types de dégâts
sur l’ordinateur infecté.

45
 Dangers d'Internet
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• Spam (pourriel)
– Envoi massif de courriers électroniques non-sollicités.
– Contenu : publicité pour produit pharmaceutiques, liés au sexe, crédit financier, jeux de hasard, produits
de contrefaçon, transfert de fonds…
– Plus de 90% des emails transitant sur Internet sont des spams.
– Désagrément pour l’utilisateur, coût de nettoyage des boîtes email, engorgement du réseau…
– Ne communiquez pas votre adresse email n’importe où ou à n’importe qui…

• Phishing (hameçonnage)
– Technique visant à obtenir des renseignements personnels (mot de passe, numéro de carte de crédit,…)
en vue de perpétrer une usurpation d’identité.
– Se fait via l’envoi d’email ou d’un site internet donnant l’impression que l’on s’adresse à un tiers de
confiance.

46
 Internet et données personnelles
Réseaux OSI Histoire TCP/IP WWW Usages Internet
• Vous n’avez pas (ou peu) de contrôle sur les informations publiées à votre sujet sur Internet.
• L’anonymat n’existe pas sur Internet (votre FAI garde trace de tout ce que vous faites).
• Vos données (adresse IP, O.S., browser, fournisseur d’accès, etc…) ainsi que vos habitudes de
surf sont capturées et analysées par certains sites...afin de cibler au mieux la publicité.

47
 Internet et la fiabilité des contenus
Réseaux OSI Histoire TCP/IP WWW Usages Internet
– Internet propose des contenus dont la qualité et la valeur scientifique n’est pas toujours vérifiée.
– Internet rend accessibles des contenus répréhensibles ou non-adaptés à tous les publics.
• Incitation à la haine raciale
• Pédopornographie
• Non-respect du droit d’auteur
• …

48