Les langages de programmation pour le Web

Petit éclairage sur les langages de programmation web, pour les curieux et les entrepreneurs “marketeurs” qui ne saisissent pas encore bien les notions de client, serveur, XHTML, CSS, PHP, MySQL, Javascript, AJAX et tout le blabla.

logoHTMLlogo elePHPantlogo MySQL

Commençons par le commencement :

Une page web est lue par votre navigateur (Internet Explorer, Firefox, Opera, …) grâce au code HTML (HyperText Markup Langage). Celui-ci est la base de toute programmation web, il sert à identifier les parties d’une page grâce aux <balises>.

Il existe une multitude de balises pour identifier toutes sortes d’éléments :

de structure (

  • <html> = début d’une page html,
  • <body> = début du corps de la page,
  • <div> = début d’une division de page,
  • <p> = début d’un paragraphe,
  • <a> = début d’un lien hypertexte,
  • <table> = début d’un tableau,
  • …)

ou de mise en forme (

  • <strong> = début d’un texte en gras,
  • <em> = début d’un texte en italique,
  • <u> = début d’un texte souligné,
  • <li> = début d’une liste,
  • <ol> = début d’un élément numéroté (order) de la liste,
  • …).

La plupart des balises, une fois ouvertes doivent être fermées à la fin de leur section de code (</html>, </body>, </div>, </p>, </a>, </table>, </strong>, </em>, </u>, </ul>, </li>, </ol>, …), d’autres sont « auto-fermantes » (

  • <br /> = saut de ligne,
  • <hr /> = trait horizontal,
  • <input /> = champs de formulaire,
  • …).

En d’autre terme, le langage HTML est indispensable, il peut tout structurer, et c’est pour cela qu’il a suffit pendant longtemps aux pages internet du web 1. Les pages en pur HTML sont statiques, ce sont des informations brutes, mises en pages par le webmaster et affichées telles quelles.

Pour la mise en page, après les frames qui se sont avérées desservir le référencement naturel, le CSS (Cascading Style Sheet : Feuille de Style en Cascade) est arrivé doucement et dévaste maintenant tout autre procédé de mise en page.

Il est arrivé doucement car au début, les programmeurs ne s’en servaient qu’en appui au HTML pour changer la mise en forme de petites parties de codes comme les liens (au survol, au clic, une fois visité, …) ou les titres (<h1>, <h2>, …, <h6>).

Aujourd’hui c’est bien l’ensemble de la structure des pages qui sont faites grâce au CSS. Le CSS qui n’est pas vraiment un langage de programmation n’en est cependant pas moins puissant. Les possibilités de mise en page sont infinies, toutes les balises HTML (dans le corps de la page, <body>) peuvent être mise en forme par le CSS (placement des divisions, actions au survol, style de police, …).

De plus, la possibilité de nommer (donner une classes : « class » ou un identifiant « id ») les éléments permet encore plus de liberté dans la mise en forme distincte de ces derniers.

Ainsi un lien <a class=”menu”> pourra avoir une allure différente d’un lien <a class=”liste”> avec pourtant la même balise HTML !

Le CSS s’intègre dans l’entête de la page HTML (<head> … </head>) sous forme de lien vers un document .css externe ou pur, entre les balises <style> et </style>.

Ces deux technologies permettent déjà de faire de très jolies choses, mais si l’on veut élaborer des interactions plus complexes, il faudra faire appel au Javascript ou, plus en vogue, à l’AJAX (Asynchronous JavaScript and XML) qui fait référence à plusieurs technologies combinées astucieusement.

Le Javascript est un langage de programmation objet dédié client. Autrement dit, c’est le navigateur qui interprètera le code. Longtemps, certains utilisateurs désactivaient la lecture du javascript de leur navigateur car il n’était utilisé que pour des animations « gadget » ou trop intrusive (comme les pop-up). Mais dernièrement, l’AJAX est apparu, poussant l’utilisation du javascript vers des fonctionnalités RIA (Rich Internet Application) donnant aux interfaces une richesse interactive indéniable.

L’AJAX combine le DOM (Document Object Model), le Javascript, le CSS et le XML (langage à balises : eXtensible Markup Langage) le tout s’intégrant dans le code HTML dans l’entête (<head> sous forme de lien à un document .js externe) ou dans le corps de la page HTML entre les balises <script> et </script>. L’AJAX et toutes ses technologies permettent de dialoguer avec le navigateur, et donc directement avec la souris de l’internaute. Certains effets sont saisissants, notamment avec la possibilité de modifier la structure de l’affichage d’une page web (à la manière de netvibes ou facebook où l’on peut changer l’emplacement de blocs sur sa page) car il peut scinder la page en parties ré-actualisables indépendamment du reste de la page.

Les technologies « client » s’attardent donc à rendre internet plus beau et/ou plus interactif. Les codes sont visibles dans la source des pages (Ctrl + U sur Firefox), c’est le langage appelé « client ».

Qu’en est-il de la programmation « serveur » ?

Le langage serveur est la partie cachée de la programmation web. A la demande de l’internaute, le serveur interprète le code avant son envoi au navigateur. Le PHP (PHP: Hypertext Preprocessor) est la solution open source extrêmement répandue dans la programmation client. Il permet de créer des pages web dynamiques, au sens où ces pages sont créées par le serveur à la demande de l’internaute et non plus telle quelle par le webmaster. Le PHP encapsule du code HTML, c’est-à-dire que le code PHP, une fois interprété sera invisible dans la source de la page, il aura déjà libéré sa commande auprès du serveur qui renvoi alors une page HTML au navigateur.

PHP est le langage utilisé pour traiter les formulaires HTML (contact, sélection, …). HTML envoi les valeurs saisies dans les champs de son formulaire et PHP les identifie pour ensuite les utiliser pour envoyer dans un email et/ou les entrer dans une base de données.
C’est également PHP qui génère les fameux Cookies indispensables au tracking des flux d’internautes avec cette simple commande en début de code :
setcookie().
PHP gère également les sessions d’utilisateur. Pour ouvrir ou maintenir une session ouverte, c’est le code : session_start() en amont du code HTML qui permettra de conservé des valeurs d’identification saisies auparavant.

le code PHP s’insère à n’importe quel endroit dans du code HTML, il faut simplement le mettre entre deux balises qui lui sont propre : <?php pour ouvrir et ?> pour fermer.

PHP est régulièrement associé à MySQL (SGBD : Système de Gestion de Base de Données) car il peut dialoguer avec en transmettant des requêtes SQL (Structured Query Langage) et en récupérer les résultats à afficher.

Le SQL est un langage relativement simple à apprendre, il parle en anglais et la structure des requêtes est souvent la même.

Ex :

mysql_query (‘select nom, image, description, prix from chaussures where marque = « adidas »’).

La requête mysql demande de sélectionner les champs nom, image, description et prix de la table chaussures où le champs maque est égal à adidas. Une fois sélectionné, ce sera à PHP de générer l’affichage des chaussures de la marque adidas avec les informations recueillies (nom, image, description et prix) que l’internaute a demandé de voir.

D’un coté, cela facilite le travail du webmaster qui n’a plus à créer l’ensemble des pages, mais le gain est surtout dans la rapidité et la souplesse de la mise à disposition des informations sur la page web.

En effet, les moteurs de recherches, les systèmes de commentaire, les catalogues des sites e-commerce et les recherches associées sont des champs de formulaires traités par PHP qui renvoient des informations complètement différentes en fonction de la requête du visiteur.

Couplé à l’AJAX, la puissance dynamique du PHP est sans limite et est devenue indispensable pour l’Internet d’aujourd’hui (web 2.0) et de demain.

Billet posté par Clément S. MBA Part Time MCI.

Tags: , , , ,

1 Comment

  1. Ilo

    grand merci pour ce billet