Intégration Web – Principes de base d’un système web

LEÇON

 

Pages web statiques

Une page web basée sur un fichier purement HTML est statique : c'est à dire que son affichage est constant quelque soit le contexte. Autrement dit la page s'affiche toujours de manière identique (sauf, bien sûr, en cas de modification du fichier par le webmestre).

Exemples :

  • Une page qui présente une entreprise, ses produits et comment la contacter
  • Une page qui explique quelque chose, façon tutoriel
  • Une page qui présente des rapports d'études scientifiques
  • et cetera

Tout au début de l'histoire d'internet, les sites ne contenaient que des pages statiques. On a rapidement compris qu'il fallait rendre ces pages dynamiques pour que l'internet libère son vrai potentiel.

 

Pages web dynamiques

Une page web dynamique s'affiche de manière différente selon son contexte d'exécution. C'est à dire que les données à la disposition du serveur web vont avoir un effet sur le contenu et l'affichage de la page. Il peut s'agir de données de toutes sortes : génériques, spécifiques à l'utilisateur, spécifiques à son parcours sur le site, et cetera.

Exemples :

  • Une page qui affiche l'heure actuelle
  • Une page qui affiche la météo
  • Une page qui affiche le prix des actions en bourse
  • Une page qui affiche les petites annonces, triées selon les exigences de l'internaute
  • La page facebook qui affiche son mur
  • Une page qui liste les éléments dans son panier d'achat sur un site e-commerce
  • Une page qui affiche les dernières images téléversées sur un site de partage d'images par sa communauté
  • Une page qui affiche les actualités selon la région géographique de l'internaute
  • Une page qui affiche les numéros de téléphone des médecins dans une commune spécifiée par l'internaute
  • Une page d'un blog avec les commentaires de la communauté
  • et cetera

Il est clair que pour générer du contenu dynamique, il faut sortir du contexte "pure-HTML" et introduire un langage de programmation (ou plutôt de scripting) dans la boîte à outils à la disposition du serveur web.

Vers 1993 : introduction de CGI (Common Gateway Interface) - un moyen pour le serveur web (souvent Apache à l'époque) d'interfacer avec un langage de script (souvent Perl à l'époque). Puis on voit l'introduction de Python, PHP, ASP, Servlets Java, Ruby, et cetera. Côté navigateur on voit l'apparition des Applets Java.

L'ensemble se complexifie avec les possibilités offertes par les technologies DHTML, JavaScript/AJAX, ActiveX, Flash AS, JavaFX, Flex, Silverlight, et cetera. La liste est longue.

Chaque technologie a ses points forts. La bonne nouvelle : souvent, plusieurs technologies peuvent être déployées sur un même système. Par exemple, on voit souvent ensemble Apache, PHP, MySQL, Flash AS et JavaScript/AJAX. Ou Tomcat, Servlets Java, MySQL, Flash AS et JavaScript/AJAX.

 

Pages web statico-dynamiques !

Un site dont les pages ont l'air statique (c'est à dire qui ne changent pas selon le contexte) peut quand même être généré de façon dynamique. C'est à dire que les pages peuvent être générées à la volée au moment où elles sont demandées. La génération pourrait être faite par le serveur à partir de scripts, ou de scripts et une base de données par exemple.

Pourquoi procéder de cette façon? Il est parfois plus pratique d'assembler les informations requises pour une page web "statique" via des scripts et/ou depuis une base de données. Il est parfois également plus pratique de faire des mises à jour de telles pages via les fichiers non-HTML ou via une base de données.

Exemples :

  • un site dont le contenu vient des "fichiers plats"
  • un site dont la structure est faite de façon modulaire via des scripts
  • un site dont le contenu est présent dans une base de données
  • un site genre WordPress qui présente des informations de façon statique mais qui évolue quand même sur le moyen/long terme, et qui est géré par quelqu'un qui ne connaît pas le HTML

 

Le concept Client-Serveur

Même avant l'existence de l'internet, il existait des systèmes dits "client-serveur". Il s'agit de systèmes où il y a un dialogue entre une machine ou un processus qui fait des demandes et un(e) autre qui répond à ces demandes. Dans un tel environnement :

  • Client = la machine/processus qui lance des demandes
  • Serveur = une machine/processus qui répond aux demandes faites par ses clients

Dans le monde d'internet, le client est typiquement un navigateur et le serveur est typiquement un serveur web type Apache, IIS ou autre.

Remarque : le client et le serveur peuvent être deux processus distincts sur la même machine. Par exemple un navigateur Firefox qui fait des demandes à un serveur web Apache qui tourne sur le même PC.

 

Client-side scripting

Attention : une page avec des éléments qui "bougent" n'est pas forcément une page "dynamique" au sens informatique. Elle peut être visuellement dynamique sans pour autant être générée de façon dynamique côté serveur.

Exemples :

  • une page avec un diaporama automatique / transitions entre plusieurs images. Ceci peut être fait à partir d'une page statique qui provoque le téléchargement de toutes les image d'un coup, puis contient les instructions JavaScript pour que le navigateur puissent faire les transitions sans faire appel au serveur.
  • Une page avec des sections de texte qui se déplient en cliquant le widget triangulaire à côté du titre. Encore une fois, réalisable en approvisionnant tous les textes d'un coup et la fonctionnalité JavaScript pour répondre aux clics.

On remarque donc que le client peut être impliqué dans l'exécution des scripts pour rendre la page visuellement dynamique. Ceci s'appelle client-side scripting et il s'agit souvent de JavaScript (et des bibliothèques JavaScript comme jQuery et autres) ou de technologies comme les Applets.

 

Client-side scripting et les "sous-dialogues" avec le serveur

Attention, les choses peuvent être encore plus complexes : car les scripts qui tournent côté client peuvent aussi faire des demandes aux serveurs. Ainsi, une page peut être requise et cette page elle-même contient par exemple du JavaScript qui fait des "mini-demandes" d'informations à un serveur pour compléter ou mettre à jour les informations déjà sur la page, sans pour autant recharger toute la page. Dans ce cas, il s'agit de la technologie AJAX.

Les choses deviennent vite tordues quand on considère qu'il est tout à fait possible par exemple de générer à la volée des scripts AJAX via le PHP. Et que ces scripts peuvent générer de l'AJAX à partir des éléments divers (base de données, réponses depuis des services web, contexte utilisateur, et cetera).

 

Web services

Il y a des serveurs qui sont là pour servir des pages web. Ces pages web sont conçues pour être compréhensibles par les êtres humains.

Il y en a d'autres qui sont là pour servir des données en format compréhensible pour un logiciel (par exemple un serveur web). Ceci est le concept derrière les Web Services.

Un web service est un service disponible sur internet qui fournit des données, en format informatisé, sur un sujet précis. Par exemple, un web service pourrait fournir le prix des actions en bourse. Ainsi, le développeur d'un site web spécialisé dans la finance pourrait avoir les valeurs boursières sur son site sans devoir pour autant construire une interface avec la bourse. Dans le code de ces pages (programmé en PHP par exemple), qui tournent sur son serveur web, il pourrait faire des appels aux web services pour avoir les prix actuels et ensuite les afficher.

Dans cet exemple l'exécution procède ainsi:

  • l'internaute demande une page sous le nom de domaine du site
  • le serveur web du site invoque le script PHP pour générer la page
  • le script PHP fait appel au web service (sur un autre serveur, sous un autre nom de domaine) pour récupérer les prix
  • le script PHP intègre les prix dans la page
  • le serveur web renvoie la page générée