Notions de base sur le développement

Web
Module : Développement Web dynamique

Filière : Informatique et gestion d’entreprise

Présenté par : PR. Chaimae MEFTAH

TABLE OF CONTENTS
Introduction

Généralités sur Internet

Rappel sur le langage HTML et CSS

Installation et configuration d’Apache

Définition d’un site dynamique

Différentes approaches de dynamismes

Langage de création dynamique du contenu PHP : côté serveur

Langage de création dynamique du contenu JAVASCRIPT : Côté client

2
INTERNET
Internet est un réseau mondial (la « toile » d’araignée) de serveurs qui communiquent entre eux.
Les serveurs sont des ordinateurs spéciaux qui possèdent plusieurs disques durs, ils stockent et
communiquent des documents.
Les ordinateurs utilisent un langage pour communiquer et échanger, ce langage se nomme un
protocole.
Internet permet de communiquer (avec la messagerie électronique :email), de s’informer,
d’apprendre, de découvrir.

3
INTERNET
Internet est le réseau informatique mondial qui rend accessibles au public des services variés
comme le courrier électronique, la messagerie instantanée et le World Wide Web, en utilisant le
protocole de communication IP (Internet protocol). Son architecture technique qui repose sur une
hiérarchie de réseaux, ce qui implique de facto une non-centralisation, lui vaut le surnom de réseau
des réseaux.

4
PROTOCOLE
Un protocole est un ensemble de règles qui définissent un langage afin de faire communiquer
plusieurs ordinateurs. TCP/IP (« Transmission Control Protocol / Internet Protocol ») est une suite
de protocoles basés sur le repérage de chaque ordinateur par une adresse appelée « adresse IP ». A
ces adresses sont associés des « noms de domaine » pour permettre de s'en souvenir plus
facilement.
Le protocole TCP/IP permet donc à tout type d’ordinateur de communiquer sur Internet en
envoyant et en recevant des données.

✤ Contrairement à une transmission en flux continu, TCP/IP découpe l’information en petits

paquets (« trames ») avant de les envoyer sur le réseau. Tous ces paquets ne prendront pas
forcément le même chemin pour arriver chez le destinataire mais ce protocole assure leur bonne
récupération et la vérification du nombre de paquets afin d’obtenir l’information originale.

✤ Le protocole IP gère le transport des paquets d'un ordinateur participant à un autre,

✤ Le protocole TCP gère le flux (établissement de la connexion) et garantit que les données sont
correctes (contrôle de la transmission).
5
PROTOCOLE
Chaque service offert par Internet correspond à un protocole basé sur TCP/IP et est associé à un « port »
de communication spécifique (exemple : 80 pour le protocole HTTP ou 21 pour le protocole FTP).

✤HTTP (HyperText Transfer Protocol) : Consulter des pages web (textes, images, vidéos, ...) offertes
par un site Internet.
✤ FTP (File Transfert Protocol) : Transférer des fichiers.
✤ SMTP (Simple Mail Transfert Protocol) : Envoyer des courriels.
✤ POP3 (Post Office Protocol version 3) et IMAP (Internet Message Access Protocol) : Recevoir des
courriels.
✤ IRC (Internet Relay Chat) : Discussion instantanée.
✤ HTTPS : Version « Sécurisée » du protocole HTTP.
✤ TLS (Transport Layer Security) ou SSL (Secure Sockets Layer) : Echanges sécurisés d’informations
par Internet (ex : paiements bancaires). Exemple : Connexion SSH (Secure Shell) à un serveur distant.
✤ DNS (Domain Name System) : Etablir une correspondance entre une adresse IP et un nom de
domaine.
✤ NNTP (Network News Transfer Protocol) : Transfert de messages sur des forums de type « Usenet ».

6
INFRASTRUCTURE MATÉRIELLE
Internet est un réseau informatique mondial qui
repose sur une infrastructure matérielle
décentralisée très importante :

✤ Des canaux de communication : téléphonie

fixe (ligne analogique bas débit, xDSL), fibre
optique, téléphonie mobile (GSM, 3G, etc.),
satellites, Wi-Fi. L’accès peut être obtenu grâce
à des fournisseurs d’accès à Internet (FAI).

✤ Des équipements de routage qui dirigent les

données.

✤ Des équipements terminaux : Serveurs

professionnels, ordinateurs personnels,
téléphones mobiles, console de jeux vidéos,
automobile, frigo, etc.
7
INFRASTRUCTURE MATÉRIELLE
La carte réseau est l’interface entre l’ordinateur
et le « câble « du réseau, sa fonction est de
préparer, d’envoyer et de contrôler les données
sur le réseau.

Routeurs Le rôle d’un routeur est de faire

transiter des paquets d’information d’une
interface réseau vers une autre selon un
ensemble de règles définies dans une table de
routage.

8
RAPPEL SUR LE LANGAGE HTML ET CSS : CÔTÉ CLIENT

9
INSTALLATION ET CONFIGURATION D’APACHE
- WampServer est une plateforme de développement Web de type WAMP, permettant de faire
fonctionner localement (sans avoir à se connecter à un serveur externe) des scripts PHP.

- WampServer n'est pas en soi un logiciel, mais un environnement comprenant trois serveurs
(Apache, MySQL et MariaDB), un interpréteur de script (PHP), ainsi que phpMyAdmin pour
l'administration Web des bases MySQL.

- Il dispose d'une interface d'administration permettant de gérer et d'administrer ses serveurs au

travers d'un tray icon (icône près de l'horloge de Windows).

Pour savoir les étapes d’installation de l’environnement, veuillez consulter le lien ci-dessous:
v https://alcatiz.developpez.com/tutoriel/installer-wamp-windows10/

10
SITE WEB: STATIQUE VS DYNAMIQUE
Un site Web statique est un site ou chacune
des pages est créée en HTML. Un ordinateur
qui se connecte au serveur, demande une
page. Celle ci lui est directement servie (elle
est stockée toute prête sur le serveur) :
Un site Web dynamique est un site Web dont les
pages sont générées dynamiquement à la demande.
Le contenu est obtenu (par exemple) en combinant
l'utilisation d'un langage de scripts ou de
programmation et une base de données. Il s'agit
souvent de PHP pour le langage et MySQL pour la
base de données.
11
ARCHITECTURE CLIENT/SERVEUR
L'architecture client/serveur désigne des
machines clientes qui contactent un serveur qui
leur fournit des services.

- Un client est par exemple un ordinateur

personnel.
- Un serveur est généralement une machine
très puissante en terme de capacités d'entrée-
sortie (accepte de nombreuses connexions).

12
ARCHITECTURE CLIENT/SERVEUR

- Le client émet une requête vers un serveur.

Le service demandé est désigné par l’adresse
IP du serveur et un port.
- Le serveur traite la requête et retourne la
réponse en utilisant l’adresse IP et le port du
client.
- Une même machine peut être à la fois client
et serveur

13
ARCHITECTURE CLIENT/SERVEUR: AVANTAGES
⁻ Des ressources centralisées au niveau du serveur :
- Données identiques pour tous les utilisateurs,
- Evite les problèmes de redondance (ex : base de données).
- Une sécurité accrue :
- Point d’entrée unique aux données (protection contre les attaques pirates, mises à jour logiciels
facilitées),
- Les clients ne se voient pas entre eux.
- Une meilleure fiabilité :
- La panne d’un client n’affecte ni le serveur ni les autres clients.
- La panne d’un serveur n’affecte pas les clients, le service n’est tout simplement plus
disponible.
- Toute la complexité et la puissance sont côté serveur, les clients ont peu d’importance dans ce
modèle.
- Un réseau évolutif : Il est facile d’ajouter ou de supprimer des clients et des serveurs sans perturber le
fonctionnement du réseau.

14
ARCHITECTURE CLIENT/SERVEUR: INCONVÉNIENTS
⁻ Un coût élevé :
⁻ Dû aux canaux de communication : bande passante, câbles, etc.
⁻ Dû à la technicité des serveurs : nécessite des ordinateurs puissant voir « surpuissants » pour
supporter de fortes charges (beaucoup d’utilisateurs demandant au même moment l’accès au
service).
⁻ Le serveur est le seul maillon faible, tout est architecturé autour de lui :
⁻ Il nécessite une grande tolérance aux pannes (RAID, redondance, ...), ce qui est coûteux.
⁻ En cas d’indisponibilité, plus aucun client n’a accès aux services qu’il offrait.
⁻ Les clients ne peuvent pas communiquer entre eux.

15
 ARCHITECTURE CLIENT/SERVEUR:
ARCHITECTURE A 2 NIVEAUX
L’architecture client/serveur la
plus simple est à deux niveaux.
Le client demande un service à
un serveur et ce dernier répond
en utilisant ses propres
ressources uniquement.
 ARCHITECTURE CLIENT/SERVEUR:
ARCHITECTURE A 3 NIVEAUX
Dans une architecture à trois
niveaux, le serveur peut faire
appel à une autre application
afin de composer sa réponse.
Le serveur est ainsi scindé en
plusieurs entités, on parle
alors d’architecture distribuée
où chaque serveur effectue
une tâche spécialisée.

- Flexibilité/souplesse
- Sécurité à chaque niveau
Client
- Performance
 ARCHITECTURE CLIENT/SERVEUR:
ARCHITECTURE A N NIVEAUX
Pour composer son propre
service, un serveur peut faire
appel aux services fournis par
un ou plusieurs autres
serveurs. L’architecture à trois
niveaux devient alors une
architecture distribuée à N
niveaux.
SITE INTERNET
⁻ Un site internet est un ensemble de pages web reliées entre elles par des liens hypertextes.
⁻ Une page web est une ressource qui peut être consultée à l’aide d’un navigateur web (browser) à une
adresse web unique nommé URL. Elle est composée :
⁻ d’un fichier HTML (Hypertext Markup Language),
⁻ de textes, formulaires,
⁻ d’images et autres ressources multimédias (audio, vidéo),
⁻ d’hyperliens vers d’autres pages.

19
LANGAGE DE CRÉATION DYNAMIQUE DU CONTENU PHP : CÔTÉ SERVEUR

20
INTÉGRATION À HTML
Une page php porte l'extension « .php ». Une page PHP peut être entièrement programmée
en PHP ou mélangée avec du code html. PHP est un langage « Embedded HTML », c'est à
dire qu'il apparaît à n'importe quel endroit de la page HTML. Pour ça on le place dans des
balises particulières : <?PHP et ?>. On peut aussi utiliser les balises et <script
langage=“PHP“> et </script>. La première forme est préférable pour plus de simplicité et
une compatibilité XHTML. On écrit donc une page HTML dans laquelle on intègre du code
PHP.
<html> Le code HTML généré sera le suivant
<head> <html>
<title>Titre</title> <head>
</head> <title>Titre</title>
<body> </head>
<?php <body>
echo "Hello World !"; Hello World !
?> </body>
</body> </html>
</html>
21
COMMENTAIRES

Les commentaires s'utilisent comme en C et en C++ avec /* .. */ et //. Notez qu'une balise
fermante ferme le commentaire en cours.

<?php
/* echo "salut !" */
// Commentaire sur cette ligne
?>

22
VARIABLES
• Une variable peut commencer par une lettre
• Une variable peut commencer par un souligné (underscore) « _ »
• Une variable ne doit pas commencer par un chiffre.

// Déclaration et règles
$var=1; // $var est à 1
$Var=2; // $ Var est à 2
$var=FALSE; // FALSE, False, false, ...
$var2=True; // TRUE, True, true, ...
$_toto='Salut'; // Ok
$3petitscochons=5; // Invalide : commence par un chiffre

23
TABLEAUX
Un tableau PHP est une association ordonnée. Une association fait correspondre des valeurs
à des clés. Les tableaux sont très souples, ils peuvent avoir de multiples dimensions, être
indexés par une clé numérique ou texte, être utilisés comme table de hachage, une pile, une
queue, ... Une valeur de tableau peut être elle-même un tableau, pour créer des arbres par
exemple.

$var=array(10,15,17,23,9);
echo $var[0]; // 10
echo $var[3]; // 17

$tab=array("a"=>12,"nom"=>"toto","pipo",17,4=>5);
echo $tab[0]; // pipo
echo $tab[1]; // 17
echo $tab['a']; // 12
echo $tab['nom']; // toto

24
LES STRUCTURES
DE CONTRÔLES

25
 <?php

LES STRUCTURES $nombre = 11;

if ($nombre >= 0 && $nombre < 10) {
// on teste si la valeur de notre variable est comprise entre 0 et 9
DE CONTRÔLES }
echo $nombre.' est compris entre 0 et 9';

elseif ($nombre >= 10 && $nombre < 20) {

// on teste si la valeur de notre variable est comprise entre 10 et 19
echo $nombre.' est compris entre 10 et 19';
}
else {
// si les deux tests précédents n'ont pas aboutis, alors on tombe dans
ce cas
echo $nombre.' est plus grand que 19';
}
?>

26
 <?php
$nom = "LA GLOBULE";
LES STRUCTURES switch ($nom) {
case 'Jean' :
DE CONTRÔLES echo 'Votre nom est Jean.';
break;
case 'Benoît' :
echo 'Votre nom est Benoît.';
break;
case 'LA GLOBULE' :
echo 'Votre nom est LA GLOBULE.';
break;
default :
echo 'Je ne sais pas qui vous êtes !!!';
}
?>
27
LES STRUCTURES <?php
$chiffre = 5;

DE CONTRÔLES // Début de la boucle

for ($i=0; $i < $chiffre; $i++) {
echo 'Notre chiffre est différent de '.$i.'<br />';
}
// Fin de la boucle

echo 'Notre chiffre est égal à '.$i;

?>

28
 <?php

LES STRUCTURES $chiffre = 5;

$i = 0;

DE CONTRÔLES // Début de la boucle

while ($i < $chiffre) {
echo 'Notre chiffre est différent de '.$i.'<br />';
$i = $i + 1;
}
// Fin de la boucle

echo 'Notre chiffre est égal à '.$i;

?>

29
GESTION DES FORMULAIRE EN PHP

30
GET ET POST

- Le but est de récupérer le contenu des champs d'un formulaire HTML dans notre code PHP
pour pouvoir le traiter. Lorsqu'un formulaire est envoyé à un script PHP, toutes les variables
seront disponibles automatiquement dans le script.

<form action="foo.php" method="post">

Name: <input type="text" name="username"><br>
Email: <input type="text" name="email"><br>
<input type="submit" name="submit" value="Submit me!">
</form>

31
RÉCUPÉRATION PAR TABLEAU
- Chaque champ de formulaire en PHP est défini par un nom et une valeur. Dans un script,
PHP va récupérer ces noms et ces valeurs dans des tableaux spéciaux dit superglobaux
(accessibles depuis partout).
- Pour la méthode GET, le tableau est $_GET, pour la méthode POST le tableau est $_POST.
- Vous pouvez utiliser le tableau $_REQUEST. En index on aura le nom du champ de formulaire
(ou de la variable passée en URL) et en valeur la valeur du champ.

<form action="foo.php" method="post"> Dans la page PHP foo.php on aura :

Name: <input type="text" name="username"><br> <?php
Email: <input type="text" name="email"><br> echo $_POST['username'];
<input type="submit" name="submit" value="Submit me!"> echo $_REQUEST['email'];
</form> ?>

32
UTILISER LES TABLEAUX
- Les formulaires permettent d'utiliser des listes à choix multiples et PHP doit donc récupérer
l'ensemble des choix de l'utilisateur. Pour ça il faut utiliser les tableaux

<form action="<?php echo $HTTP_SERVER_VARS['PHP_SELF'];

?>" method="post">
Name: <input type="text" name="personal[name]"><br>
Email: <input type="text" name="personal[email]"><br>
Beer: <br> Dans l'exemple précédent si par
<select multiple name= ’’ Filière[]"> exemple on sélectionne plusieurs
<option value= "IGE">IGE</option> filières (ex : IGE et MCT) on aura
<option value= "MCT">MCT</option> dans $Filière[0] IGE et $Filière[1]
<option value= "DAI">DAI</option> MCT.
</select><br>
<input type="hidden" name="action" value="submitted">
<input type="submit" name="submit" value="submit me!">
</form>

33
RÉCUPÉRER LES DONNÉES DES FORMULAIRES
<html>
<html>
<head>
<head>
<title>Ma page de traitement</title>
<title>Ma page de test</title>
</head>
</head>
<body>
<body>
<?
<form action = "traitement.php" method="post">
// on teste la déclaration de nos variables
Votre nom : <input type = "text" name = "nom"><br />
if (isset($_POST['nom']) && isset($_POST['fonction'])) {
Votre fonction : <input type = "text" name =
// on affiche nos résultats
"fonction"><br />
echo 'Votre nom est '.$_POST['nom'].' et votre
<input type = "submit" value = "Envoyer">
fonction est '.$_POST['fonction'];
</form>
}
</body>
?>
</html>
</body>
</html>

Votre nom est Nom et votre fonction est Fonction

34
LANGAGE DE CRÉATION DYNAMIQUE DU CONTENU JAVASCRIPT : CÔTÉ CLIENT

35
INTÉGRATION À HTML
Il y a deux manières d'ajouter du code JavaScript dans une page :
en liant depuis la page HTML un fichier externe, dans lequel sont placées les instructions JavaScript :

<script type="text/javascript" src="monscript.js"></script>

en ajoutant le code JavaScript à l'intérieur de l'élément script :

<script type="text/javascript">

// Mon code Javascript ...

</script>

Traditionnellement il était d'usage de placer la balise <script> entre les tags <head> et </head>,
cependant il est actuellement recommandé de la placer en fin de document juste avant </body> pour
ne pas bloquer le chargement de la page, et exécuter les scripts uniquement lorsque le DOM est prêt.
36
VARIABLES
• Une variable peut commencer par une lettre
• Une variable peut commencer par un souligné (underscore) « _ »
• Une variable ne doit pas commencer par un chiffre.

// Déclaration et règles
let var=1; // $var est à 1
let Var=2; // $ Var est à 2
let var=FALSE; // FALSE, False, false, ...
let var2=True; // TRUE, True, true, ...
let _toto='Salut'; // Ok
let 3petitscochons=5; // Invalide : commence par un chiffre

37
LES STRUCTURES
DE CONTRÔLES

38
BOITES DE DIALOGUE
• Afficher du texte
• alert(message), affiche un message (une chaîne de caractères) à l'utilisateur.
• Demander une chaîne de caractères
• La boîte de dialogue prompt(message, valeur) demande à l'utilisateur d'entrer
du texte.
• Demander "oui" ou "non »
• confirm(message), affiche le message, ainsi que deux boutons : Ok et Annuler.

39
FONCTIONS
Les fonctions font partie des briques fondamentales de JavaScript. Une fonction est une
procédure JavaScript, un ensemble d'instructions effectuant une tâche ou calculant une
valeur. Afin d'utiliser une fonction, il est nécessaire de l'avoir auparavant définie au sein
de la portée dans laquelle on souhaite l'appeler.

function carré(nombre)
{
return nombre * nombre;
}

40
TABLEAUX
L'objet global Array est utilisé pour créer des tableaux. Les tableaux sont des objets de haut-niveau (en
termes de complexité homme-machine) semblables à des listes.

Créer un tableau
let fruits = ['Apple', 'Banana’];
console.log(fruits.length);

Accéder (via son index) à un élément du tableau

let first = fruits[0]; // Apple
let last = fruits[fruits.length - 1]; // Banana

Boucler sur un tableau

fruits.forEach(function(item, index, array)
{
console.log(item, index);
}); // Apple 0
// Banana 1
41
TABLEAUX
Ajouter à la fin du tableau
let newLength = fruits.push('Orange'); // ["Apple", "Banana", "Orange"]

Supprimer le dernier élément du tableau

let last = fruits.pop(); // supprime Orange (à la fin) // ["Apple", "Banana"];

Supprimer le premier élément du tableau

let first = fruits.shift(); // supprime Apple (au début)
// ["Banana"];

Ajouter au début du tableau

let newLength = fruits.unshift('Strawberry') // ajoute au début
// ["Strawberry", "Banana"];

Trouver l'index d'un élément dans le tableau

fruits.push('Mango'); // ["Strawberry", "Banana", "Mango"]
let pos = fruits.indexOf('Banana'); // 1

Supprimer un élément par son index

let removedItem = fruits.splice(pos, 1); // supprime 1 élément à la position pos
42
// ["Strawberry", "Mango"]
RÉFÉRENCES
⁻ World Wide Web Consortium (W3C)
⁻ http://www.w3.org/

⁻ Commentçamarche.net
⁻ http://www.commentcamarche.net/contents/networking/

⁻ https://upload.wikimedia.org/wikipedia/commons/0/0e/Cours_php.pdf

⁻ https://developer.mozilla.org/fr/docs/Web/JavaScript

⁻ Plein d’information sur Wikipedia Attention :

⁻ « Wikipédia ne garantit pas la validité, l'exactitude, l'exhaustivité ou la pertinence des
informations contenues sur son site » http://fr.wikipedia.org

43