Chapitre I
Chapitre I
Chapitre I
Organisation :
Programmation Web Dynamique
4 Heures de Cours/TD par flière :
Transparents
Publication des supports sur la plateforme Mooodle de la
FPO, Groupe Whatsapp
Pr. Rachid DAKIR
Année Universitaire : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
1
2/12/2023
Programmation Web dynamique coté client : Les Techniques de Scripting côté Serveur :
HTML, utilisation de contrôles ActiveX et d'applets La Gestion des sessions utilisateurs et techniques
Java). d’authentification ;
Application : construction d’un site Web dynamique
2
2/12/2023
3
2/12/2023
Web ?
Hypertexte ?
Ensemble de documents contenant des unités d'information liées entre eux par des
NAVIGATEUR WEB hyperliens. Ce système permet à l'utilisateur d'aller directement à l'unité qui l'intéresse,
SCRIPT à son gré, d'une façon non linéaire
LANGAGE COMPILE
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
4
2/12/2023
Web ?
Hyperlien ?
Système d’information réparti en pages (documents )Web basé la notion d’hypertexte et
Référence dans un système hypertexte permettant de passer automatiquement d'un
d’hyperlien fonctionnant sur Internet permettant de consulter des pages web avec un document consulté à un autre document.
navigateur. Navigateur Web ?
Protocole de communications HTTP,HTTPS Logiciel client HTTP conçu pour accéder aux ressources du web. Sa fonction de base
Adresse pour identifier des pages (ou site ) Web : URL est de permettre la consultation des documents HTML disponibles sur les serveurs
HTTP.
Les langages pour créer les pages web : HTML, CSS et Java script
Page Web ?
Les navigateurs permettent de visualiser les pages Web : Chrome, firefox,
Document destiné à être consulté avec un navigateur web. Une page web est toujours
Internet Explorer, Opéra
constituée d’une ressource centrale (généralement un document HTML) et
Hypertexte ? d’éventuelles ressourcesliées automatiquement accessibles(par exemple, des images).
Ensemble de documents contenant des unités d'information liées entre eux par des
hyperliens. Ce système permet à l'utilisateur d'aller directement à l'unité qui l'intéresse,
à son gré, d'une façon non linéaire
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
5
2/12/2023
Script ? Script ?
En informatique, un script désigne un programme (ou un bout de programme) Deux catégories de scripts informatiques utilisés dans le web
chargé d'exécuter une action pré-définie quand un utilisateur réalise une action ou
Il est courant de distinguer entre deux types de langages de script ou langages de
qu'une page web est en cours d'affichage sur un écran. Il s'agit d'une suite de
programmation dynamique :
commandes simples ou des instructions et souvent peu structurées qui permettent
Scripts interprétés côté serveur (c'est le cas des langages utilisés pour la
l'automatisation de certaines tâches successives dans un ordre donné.
Un script peut donc par exemple ouvrir un répertoire et crypter des fichiers qui s'y
création de sites web dynamiques comme PHP, Python, ASP, etc.). Le
trouvent, ou modifier à la volée la taille d'une image à l'ouverture d'une page. code n'est alors pas visible sur le code source de la page web car il est lu et
Les langages de script ne sont généralement pas compilés, à quelques exceptions interprété par la machine qui héberge le site (le serveur), puis envoyé vers
près, c'est-à-dire qu'ils s'affranchissent des contraintes de bas niveau pour être l'appareil de l'utilisateur en format HTML.
interprétésdirectement par la machine qui les héberge. Scripts interprétés côté client, envoyés sous leur forme brute à la
machine cliente (celle de l'utilisateur). C'est le cas de JavaScript compris
par le navigateur web et exécuté directement par celui-ci.
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
6
2/12/2023
7
2/12/2023
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
8
2/12/2023
Se présente sous forme d’une adresse URL. vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et
Une URL complète est également composé au minimum de quatre parties ainsi de suite. Par exemple, avec la ligne de contenu suivante :
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
9
2/12/2023
CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie « feuille de JavaScript : JavaScript est un langage de programmation de scripts principalement
style en cascade » est langage informatique permettant de mettre en forme des employé dans les pages web interactives et à ce titre est une partie essentielle des
pages web ( HTML ouXML). applications web. Ce langage permet de créer du contenu mis à jour de façon
Ce langage est donc composé des fameuses « feuilles de style en cascade » dynamique, de contrôler le contenu multimédia, des animations 2D/3D, …..etc
également appelées fichiers CSS (.css) et contient des éléments de codage. Faire bouger, apparaitre ou disparaitre des éléments de la page (un titre, un
menu, un paragraphe, une image…).
Langage de règles de style utilisé pour appliquer un style au contenu HTML Mettre à jour des éléments de la page sans recharger la page (changer le
texte, recalculer un nombre, etc).
comme la modification de la couleur d e l’arrière-plan ou les polices, ou en
Demander au serveur un nouveau bout de page et l’insérer dans la page en
disposant le contenu en plusieurs colonnes. cours, sans la recharger.
Attendre que l’utilisateur face quelque chose (cliquer, taper au clavier,
bouger la souris…) et réagir (faire une des opérations ci-dessus suite à cette
action).
Il ya certains applications Web ne pourrait tout simplement pas fonctionner sans
Javascript. C’est le cas de Facebook, Youtube ou Twitter qui utilisent le langage
pour presque tout leur affichage
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
10
2/12/2023
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
11
2/12/2023
Assurer la cohérence, le
LAMA : Linux Apache MySQL/MariaDBASP, stockage et l’interrogation des
données dans une base de
WAMP : Windows Apache MySQL/MariaDB PHP, données.
o SGBD propriétaire : Oracle Database, Microsoft SQL Server, DB2, MaxDB, 4D,
MAMP : Macintosh Apache MySQL/MariaDB PHP,
dBase, Informix, Sybase
SAMP : Solaris ApacheMySQL/MariaDB PHP, o SGBD libre : MySQL, PostgreSQL, MariaDB, Firebird, Ingres, HSQLDB,
Derby, Apache Derby
LAPP : Linux Apache PostgreSQL PHP,
o SGBD Orienté objet : ZODB, db4o
WASP : Windows Apache SQLServer PHP, o SGBD Embarqué : SQLite, Berkeley DB
o SGBD NoSQL : Cassandra, Redis, MongoDB, SimpleDB, BigTable, CouchDB,
HAMP: Hurd Apache MySQL/MariaDB PHP.
Couchbase, HBase, LevelDB,
LEMP : Linux Nginx MySQL/MariaDB PHP. o Autres SGBD : Access, OpenOffice.org Base, FileMaker, HyperFileSQL,
Paradox, Neo4j, Riak, Voldemort
Les SGBD les plus connus: Oracle, MySQL, PostGreSQL et SQL Server
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
12
2/12/2023
D. Les différents scénarios de communication Web D. Les différents scénarios de communication Web
Statique : Statique :
Demande d’une page web ne contenant que du HTML Demande d’une page web contenant du code PHP
**** Serveur Web installé sans autre service **** **** Serveur Web installé sans autre service ****
Statique Dynamique
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
13
2/12/2023
D. Les différents scénarios de communication Web D. Les différents scénarios de communication Web
Dynamique : Dynamique :
Demande d’une page web ne contenant que du code PHP
Demande d’une page web ne contenant que du code PHP
avec une requête SQL
**** Serveur Web installé avec un interpréteur PHP****
**** Serveur Web installé avec un interpréteur PHP et SGBD ****
Dynamique
Dynamique
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
14
2/12/2023
Sublime Text
Notepad++
Brackets
Ultra Edit
jEdit
Komodo
TextWrangler
Deramweaver
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
15
2/12/2023
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
16
2/12/2023
F . Les différentes méthodes du déploiement d’un serveur Web F . Les différentes méthodes du déploiement d’un serveur Web
Lien du téléchargement : Wampserver est un serveur web local pour windows et se comporte exactement
de la même manière sauf qu'il se trouve directement sur votre machine. Il y a
donc aucune information transmise sur l'extérieur et vous pouvez donc tester
votre site sans même avoir un hébergement ni même accès à internet. Il comprend
Apache, MySQL et PHP.
Les rôles de ces trois composants sont les suivants :
Apache est le serveur web « frontal » : il est « devant » tous les autres et
répond directement aux requêtes du client web (navigateur)
Le langage de script PHP sert la logique et permet des traitements (calculs,
vérification, test, etc.)
MySQL stocke toutes les données de l'application
Ce logiciel est donc parfait pour tous les développeurs de sites
web qui aimeraient tester leurs créations avant leur mise en ligne
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
17
2/12/2023
F . Les différentes méthodes du déploiement d’un serveur Web F . Les différentes méthodes du déploiement d’un serveur Web
Les paquets relatifs à HTTP sont tous fournis par les dépôts officiels
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
18
2/12/2023
F . Les différentes méthodes du déploiement d’un serveur Web F . Les différentes méthodes du déploiement d’un serveur Web
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
19
2/12/2023
F . Les différentes méthodes du déploiement d’un serveur Web F . Les différentes méthodes du déploiement d’un serveur Web
entrantes au serveur Web Apache et autoriser les numéros des ports : ou l'adresse IP du serveur.
Nous devrions voir la page de serveur HTTP Apache par défaut.
80/tcp pour le protocol http
20
2/12/2023
F . Les différentes méthodes du déploiement d’un serveur Web F . Les différentes méthodes du déploiement d’un serveur Web
Exemple : Cas pratique ( Page web statique) o Machine virtuelle LINUX (CentOS):
Installation de l’interpréteur php:
ON utilise la source de paquets additionnelle EPEL (Extra Package for
Entreprise Linux), que l'on ajoute de cette façon :
Le dépôt Remi doit être ajouté également, puis on utilise yum-utils car
nous avons besoin de yum-config-manager pour activer le paquet
correspondant à PHP et pouvoir l'installer. On ajout le dépôt remi :
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
21
2/12/2023
F . Les différentes méthodes du déploiement d’un serveur Web F . Les différentes méthodes du déploiement d’un serveur Web
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
22
2/12/2023
F . Les différentes méthodes du déploiement d’un serveur Web F . Les différentes méthodes du déploiement d’un serveur Web
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
23
2/12/2023
F . Les différentes méthodes du déploiement d’un serveur Web F . Les différentes méthodes du déploiement d’un serveur Web
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
24
2/12/2023
F . Les différentes méthodes du déploiement d’un serveur Web F . Les différentes méthodes du déploiement d’un serveur Web
Installation et configuration du phpMyAdmin : Les répertoires de base
Exemple : Cas pratique ( Page web dynamique) Chaque site Web dispose d'un répertoire de base qui représente l'emplacement
central des publications.
Ce répertoire peut disposer d'une page d'accueil, qui peut être définit comme
étant une page par défaut.
Exemple : URL www.mondomaine.fr affichera la page accueil.html située dans le
répertoire de base :
Windows : C:\InetPub\wwwroot
Linux : /var/www/html
On peut indiquer :
Un répertoire physique de la machine (Serveur Web)
Le partage d'un répertoire distant
Une redirection vers une autre URL
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
25
2/12/2023
F . Les différentes méthodes du déploiement d’un serveur Web F . Les différentes méthodes du déploiement d’un serveur Web
Les répertoires virtuels Administration du serveur à distance
Si on souhaite publier des pages depuis tout répertoire n'appartenant pas
Aujourd'hui, on a la possibilité de publier sur un serveur Web plusieurs sites
au répertoire de base, il nous faudra créer des répertoires virtuels.
Web simultanément sur la même machine
Un répertoire virtuel possède un alias qui utilise les navigateurs pour
Pour pouvoir publier plusieurs sites sur une même machine, plusieurs solutions
accéder aux pages publiées dans le répertoire virtuel :
s'offrent :
Un alias étant plus cours que le chemin d'accès à un répertoire.
Spécifier plusieurs adresses IP sur votre carte réseau et associer chacune
Un alias évite de communiquer aux utilisateurs l'endroit où se
de ces adresses au nom de domaine d'un site.
trouvent physiquement les documents et apporte donc un plus au
Mapper plusieurs noms de domaine sur la même adresse IP en ayant
niveau de la sécurité de votre site.
recours à la technique des noms d'entête d'hôte.
Un alias évite de modifier les URL de nos liens lorsqu’on déplace
Associer un autre port IP que le port 80 à votre adresse IP pour publier
physiquement l'ensemble des documents d'un répertoire virtuel.
un site sur un port nommé
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023 Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
26
2/12/2023
Apache ou IIS offrent la possibilité d'administrer les sites à distance par le biais
d’un gestionnaire de services HTML accessible depuis un simple Browser.
Serveur IIS Propriétaire Microsoft
Gestionnaire des services Internet
Services Terminal Server
Outil Administration à distance (HTML)
……..etc
Serveur Apache
Filezila
Professeur : Rachid DAKIR Filières : SMI -S6 & IGE - S4 A.U : 2022-2023
27