Sites web statique et
dynamique
Table des
matières
Objectifs 3
I - Sites web statique et dynamique 4
1. Notions de Sites statique et dynamique .......................................................................................................... 5
1.1. Site statique .................................................................................................................................................................................. 5
1.2. Site dynamique ............................................................................................................................................................................. 6
2. Différence entre un site statique et dynamique .............................................................................................. 6
3. front-office et back-office .............................................................................................................................. 7
3.1. back-office .................................................................................................................................................................................. 8
3.2. front-office ................................................................................................................................................................................. 8
II - Activité d'auto evaluation 10
Objectifs
À la fin de cette leçon, l'apprenant sera capable de :
Définir les notions de Sites web statique et dynamique
Différencier un sites web statique d'un site web dynamique ;
Les notions de front-office et back-office
3
Sites web statique et dynamique
Sites web statique et
dynamique I
4
1. Notions de Sites statique et dynamique
1.1. Site statique
On entend par site statique,non pas un site dont une page est sans mouvements ou sans animations, mais une
page visible telle qu'elle a été conç[Link] pages peuvent présenter toute forme de contenu, animations flash,
images, musique, vidéo etc... mais elles sont toujours présentées de la même façon quelque soit le visiteur. Elle
ne change pas et c'est en ce sens qu'elle est statique
Le site statique est souvent coder avec de l'HTML (HyperText Markup Language) est le langage de balisage
conçu pour représenter les pages web) et du CSS (Cascading style sheets ou feuille de style en cascade) est un
langage informatique qui décrit la présentation des documents HTML) seulement. Un site statique n'a pas de
base de données
Fonctionnement d'un site statique
1. Le client (Navigateur = Chrome ....) émet une requête (Demande d'une page statique) vers le serveur web
2. Le serveur web envoi au client (Navigateur) la page statique demandée par le visiteur
Syntaxe
SITE WEB STATIQUE = HTML + CSS
Exemple
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title> Bonjour depuis HTML </title>
6 </head>
7 <body>
8 <p> Bonjour j'apprends du HTML !</p>
9 </body>
10 </html>
11
Après exécution on à : Bonjour j'apprends du HTML !
5
Différence entre un site statique et dynamique
1.2. Site dynamique
Un site dynamique est un site dont le contenu change dynamiquement. Par exemple on veut afficher le nombre
d’étudiants inscris au cours de CMS. On aura recours à une une fonction qui s'occupe de compter le nombre de
personnes qui se sont inscrits au cours de CMS. Et on l'affiche le résultat de la requête sur notre page. Sans
changer le code source. Un site dynamique a une base de données.
Fonctionnement d'un site web dynamique
1. Le client (Navigateur = Chrome ....) émet une requête (Demande d'une page statique) vers le serveur web
2. Le serveur web en interprétant le code PHP communique ensuite avec la base de données pour récupérer
les informations recherchés
3. Le serveur web envoi au client (Navigateur) du contenu HTML avec les informations trouvées dans la
base de données ( Envoi de la page générée)
Syntaxe
SITE DYNAMIQUE = HTML + CSS + SERVEUR WEB + BASE DE DONNÉES
Exemple : avec un Blog :
Sur un site statique on devra créer un fichier HTML pour chaque article de notre Blog.
Sur un site dynamique on créera un fichier PHP nommé [Link] qui s'occupe de récupérer le bon article
dans notre base de données en fonction du nom ou de son identifiant. Puis il l'affichera.
2. Différence entre un site statique et dynamique
Site statique
- Pas de base de données
- HTML/CSS seulement (avec du JavaScript si l'on désir)
- Modifier le contenu via le code source
- Pas d'exécution de calcul avec le serveur
6
front-office et back-office
Site dynamique
- Base de données
- PHP en plus des autres langage de programmation (pas obligatoirement du PHP mais c'est le plus connu)
- Modifier le contenu via la base de données
- Exécution de calcul côté serveur
Complément : PHP
Le PHP est un langage programmation permettant la
création d’application web. Le terme PHP est un acronyme
récursif de "PHP: Hypertext Preprocessor".
Ce langage est principalement utilisé pour produire un site
web dynamique. Il est associé à une base de données, tel
que [Link]écuté du côté serveur (l'endroit où est
hébergé le site) il n'y a pas besoin aux visiteurs d'avoir des
logiciels ou plugins particulier.
Néanmoins, les webmasters qui souhaitent développer un
site en PHP doivent s'assurer que l'hébergeur prend en
compte ce langage.
Lorsqu'une page PHP est exécuté par le serveur, alors
celui-ci renvois généralement au client (aux visiteurs du
site) une page web qui peut contenir du HTML, XHTML,
CSS, JavaScript ...
Exemple : Exemple de code PHP
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title> Bonjour depuis PHP </title>
6 </head>
7 <body>
8 <?php echo'Bonjour j'apprends du PHP !';?>
9 </body>
10 </html>
Après exécution du script on à : Bonjour j'apprends du PHP !
3. front-office et back-office
Les CMS sont constitués du Back‐Office et du front-office. dans cette partie nous aborderons ces différentes
notions.
7
3.1. back-office
Définition
Appliqué aux sites web dynamiques, le terme back-office désigne simplement l'interface permettant de gérer
tout le cycle de vie d'une information (la création du contenu, son stockage et le maintient en version, sa
structuration et son classement) d'un site dynamique (bien souvent un CMS). Par opposition à « front-office »,
le back-office est la coulisse où travaillent les administrateurs de site web, les webmasters.
Accès au back-office et sécurité des données
On accède généralement au back-office d'un site web par une url dédiée. Sous Wordpress, par défaut, on
accède au back office d'un site en ajoutant /wp-admin (par exemple : [Link]/wp-admin).
Les bonnes pratiques en matière de sécurité recommandent d'ailleurs de changer cette url pour éviter que des
outils malveillants comme des robot ne tentent en permanence de rentrer dans le back-office, notamment à
grand coup d'attaques brut [Link]ès s'être identifié à l'aide de son identifiant / mot de passe (il est également
recommander de ne pas garder le nom d'utilisateur “admin” pour les même raisons que ci-dessus), on peut
accéder à l'interface de gestion du site. Cette interface ressemble à ça :
Back-office Wordpress
3.2. front-office
Le Front-Office Par opposition à « back-office », permet de publier le contenu et de contrôler l'accès à celui‐ci.
Il se présente sous la forme d'un site frontal ou d'un portail.
8
Front-office
9
Activité d'auto evaluation
Activité d'auto evaluation
II
Exercice
Remplissez les champs vides
SITE = HTML + CSS + + BASE DE DONNÉES
Exercice
Saisissez la bonne réponse
Une page web est une page web générée à la demande
Exercice
Remplissez les champs vides
Les CMS sont constitués du et du .
10
