Et si le Web nous était conté, peut être compterions nous mieux !

Et si le (dev) Web nous était conté, peut être compterions nous mieux !

 

 

J'ai remarqué que bien souvent (sur les forums et compagnie) 'les gens' avaient du mal à comprendre le fonctionnement Client ou Serveur selon que l'on soit en Javascript ou en PHP.

 

 

J'ai donc écris ce petit conte pour expliquer succinctement et limpidement comment les langages du web fonctionnent. J'ai choisis chaque mot de manière à ce qu'ils puissent être compris en fonction du niveau de chacun.

Notre petite histoire est centrée sur le Javascript, le PHP et bien entendu les Bases de donnée mais bon nombre de langages sont utilisables pour le développement web de nos jours (si ce n'est la totalité), le HTML et le CSS en font aussi partie intégrante.

 

Quelques pré-requis sont tout de même nécessaire (ces précisions sont vraiment pour les personnes n'y connaissant rien du tout, elle doivent représenter 1% des personnes qui vont visiter ce blog mais bon...):

- Un fichier est une sorte de livre dans lequel on va écrire le code, ce code sera ensuite analysé par des fonctions.

- Un navigateur internet (ou explorer) est le logiciel qui vous permet d'accéder aux différentes pages, les plus connus sont Internet Explorer, Mozilla Firefox, Netscape et Safari.

- Un serveur est un ordinateur très puissant, qui exécute les différentes fonctions nécessaires au bon fonctionnement du site.

 

 

La personnification est pour moi une méthode simple d'apprentissage, elle permet de rallier tous les niveaux de compétence, du novice complet au débutant.

Si vous êtes novice efforcez-vous de ne lire que la partie en gras pour un premier passage et une fois cette partie lue de relire le texte avec la partie en italique.

 

Si vous voulez juste cerner le comportement PHP/Javascript allez directement au dernier paragraphe.

 

 

 

Pour commencer, un site est composé de code HTML (pour exemple une image qui se veut avec une taille de 20*20, sera en fait représentée par une balise avec des attributs, qui lui donne ces caractéristiques, dans notre cas la largeur et la longueur), que nous appellerons 'Monsieur HTML', (c'est un language dit 'de balise') qui est très simple de fonctionnement, c'est la base de toute page internet, il permet d'afficher des informations et de faire de la mise en page d'informations (un peu comme Word le fait mais vous ne vous en rendez pas compte enfin c'est similaire seulement par le fait d'organiser du contenu tout ce qui est derrière est différent, peut être que vous connaissez les macros ou le visual basic). Vous serez quand à vous LE CREATEUR !!

 

 

Début de l'histoire :

 

Il était une fois Monsieur HTML. Cet homme est moche et bourru, étant donné que personne ne l'aime, Le Créateur a décidé de lui donner une copine. C'est alors, que Mademoiselle CSS entre en jeu. Il faut savoir que Mlle CSS aime bien se pomponner, elle ne jure que par l'apparence et rare sont ceux qui arrive à la voir. A ce moment de l'histoire Mr et Mlle sont ensemble.

 

Le CSS est un langage qui est très lisible, dans les fichiers '.css' vous allez mettre pour chaque élément du code HTML (chaque balise) une correspondance, et vous aller spécifier que telle balise (n'oubliez pas que le HTML est un langage balise) aura telle couleur, avec telle police de caractère, taille, bordure, etc... Pour lier un code HTML à une feuille de style (autre nom que l'on donne au fichier CSS) il suffit de mettre un lien (comprenait une balise) indiquant où le navigateur doit aller chercher le fichier.

 

Revenons donc à nos deux amoureux maintenant ils ne se quittent plus (jusqu'à ce que Monsieur HTML trompe Mlle CSS avec une autre Mlle CSS qui sera plus à son goût...). Pour rendre limpide le précédent paragraphe disons que quand un visiteur viens sur une page c'est comme si Mr et Mme (et oui il se sont mariés faut suivre un peu  :) ), donc c'est comme si Mr et Mme sortaient en ville, enfin plus précisément comme si Monsieur HTML partait voir un match de foot, Mme CSS va donc habiller son homme elle va lui mettre une écharpe au >, cette écharpe sera de couleur rouge, avec des franges, elle va également lui mettre sur le un gilet noir, et son pantalon de type jean pour les .

 

 

Et là vous vous dites, mais c'est quoi ces crochets ??? Et bien c'est ce qu'on appelle des balises, HTML a un nombre limité de et on ne peut pas créer celles qui nous font plaisir; mais vous saisissez peut être un peu mieux le concept (exemple ou ).

Pour le moment pour construire un site vous devez mettre autant de Monsieur (page) HTML, qu'il vous faut de page (une page étant une sorte d'étage dans un réfrigérateur, une fois l'étage plein on doit en faire un autre; cela dit une page n'est jamais pleine elle à plus un fonctionnement par type (ex : étage numéro un du frigo les fromages, le deuxième les desserts...). Sur votre site, vous pouvez aussi donner à chaque page une Madame CSS différente, ce qui formera plusieurs couples mono ou polygame ^^ (c'est madame CSS qui va être contente).

Vous voilà donc prêt pour le grand saut dans les langages de programmation à proprement parlé.

 

 

Monsieur et Madame qui forment un beau couple non dynamique (vous comprendrez plus loin pourquoi j'utilise ce terme) puisque sans famille, ni amis... Ils décident alors de se trouver des amis qui bougent et qui peuvent leurs apporter du contenu, des sorties et qui puissent gérer des évènements, et bien plus encore...

C'est alors qu'ils rencontrent deux bon amis qui se connaissent depuis toujours ou presque, PHP et BD (BD pour base de données). Ils se sont vus et pensent tous qu'ils pourraient faire de grande choses si ils étaient réunis lors de leurs sorties. BD ne discute pas beaucoup parce que c'est un robot qui ne fait que stocker les informations que Monsieur PHP lui donne (enfin vous verrez plus loin pourquoi Mr PHP a un robot), le couple HTML et CSS ne parlent pas non plus puisqu'ils sont muets (vous comprendrez pourquoi...).

 

 

 

PHP est un langage, parenté du C/C++. Grâce à ce langage vous pouvez développer des sites très complet. PHP vous permet de gérer des variables (moules dans lesquels on stock des informations temporairement sur le serveur), des fonctions essentielles au bon fonctionnement du site dit dynamique (qui n'a pas un contenu figé). Ce contenu dynamique n'est possible qu'avec une BD (Base de données), cette BD est un endroit sur votre serveur, où sont stocké toutes les données qui doivent vivres perpétuellement sur le serveur (ce mot est utilisé abusivement puisque vous restez maître de leur existence), contrairement aux variables qui ont pour la plupart une durée de vie très courte (le temps d'une visite chez un internaute ou juste du chargement d'une page). Les variables système sont encore différentes en cela qu'elles ne sont pas stockées dans la BD mais qu'elles survivent d'un utilisateur à l'autre, elles sont décrites dans des fichiers spéciaux directement sur le serveur.

 

 

Pour l'histoire Monsieur PHP et Robot BD (Base de données) vivent ensemble. Monsieur Php fainéant comme tout se fait servir par sa maison (autrement dit le serveur), sa maison donc qui est super hi-tech et qui lui donne toutes les informations dont il a besoin comme par exemple l'heure (dingue !), il peut tout savoir d' une personne venant dans sa maison : d'où il vient, ce qu'il a fait juste avant de venir, et dès qu'il est rentré il PEUT enregistrer tous ses faits et gestes, dans quelle pièce il va, ce qu'il demande à son robot, etc.. Et oui les robots existe déjà ^^ (non enfin c'est juste pour éviter la situation de couple qui dans certaines explications pourrait être ambigüe, nous n'aurons pas deux couples c'est dommage...).

Monsieur PHP en plus d'être fainéant et d'avoir une maison super hi-tech, il a un superbe robot. Mais ayant dépensé tout son argent dans sa maison, le malheureux robot à pour seule fonction de stocker de l'information et de la rendre, il peut aussi organiser les informations dans sa tête, mais pour cela LE CREATEUR, doit lui avoir dit de faire telle tâche en fonction d'un événement précis. Monsieur PHP est gérant de sa maison il reçoit donc des gens toute la journée dans celle-ci mais avant qu'il rencontre Monsieur et madame CSS il n'y avait rien à y voir; mis à part des murs blanc. Il décide alors d'inviter le jeune couple à habiter dans sa maison (cool un nouveau serveur). Dès lors, lorsqu'un visiteur rentre dans la Maison Monsieur HTML et Madame CSS sont là pour l'accueillir et lui faire visiter la nouvelle maison pleine de jolie chose. Robot BD est là si jamais ils veulent savoir quoi que ce soit. Monsieur HTML est même constamment obligé de demander conseil à Robot BD pour donné les informations aux visiteurs. Mr PHP quand à lui fait le lien entre le robot et Mr HTML, parce que malheureusement Monsieur HTML est muet tout comme Madame CSS (rappelez vous). Nous avons donc notre quatuor qui fait son train de vie tranquillement.

 

La question à ce moment et depuis deux paragraphes déjà est, pourquoi HTML et CSS sont-ils muet ?

Tous simplement car un langage balise ne communique qu'avec le navigateur de l'utilisateur, le navigateur fait le lien entre les deux, il affiche le HTML et le 'réorganise' en fonction de ce que la feuille de style CSS lui aura dit de faire. Le fait que les deux parties, aient besoin du navigateur engendre, comme les développeur le savent bien, de grosses différences d'affichage (notamment à cause de l'analyse du css), les bugs sous Internet Explorer (navigateur de chez Microsoft) ont donnés naissance à des HACK CSS ces hack(s) sont en fait des manipulations à faire soit dans le HTML, soit dans le CSS pour que les pages soit compatibles et ressembles à l'affichage des autres navigateurs.

 

 

Le couple, le fainéant PHP et le robot vivent ensembles depuis maintenant un bon moment et commencent à s'ennuyer. En fait il pensent qu'il serait bien d'avoir une personnes de plus à la maison, madame CSS désire qu'on l'aide à changer un peu son look en fonction des personnes qui viennent dans la maison (elle à décidé de ne plus se maquiller si c'est un homme qui rentre pour éviter de rendre jaloux son mari), HTML lui aussi veut pouvoir changer de look mais à l'inverse de Madame CSS bien sûr. PHP s'en serait bien chargé mais comme vous le savez il est fainéant et a bien assez à faire avec la gestion du robot et de la maison; qui plus est, lui aussi aimerait bien déléguer certaines contraintes. Il voudrait par exemple ne plus être le seul à savoir parler à Robot BD.

Ils décidèrent tous ensemble d'embaucher quelqu'un. C'est maintenant qu'intervient Javascript le criquet (non, non aucune référence à 'Pinocchio'), il arrive à la maison et ce présente, aux habitants interloqués de voir un criquet qui bouge et surtout qui parle si distinctement :

« Bonjour, je m'appelle mademoiselle Javascript (et oui c'est en fait une 'criquette' ^^) j'ai beaucoup d'enfants nées de mes précédentes collaborations avec des maisons comme la votre. Je suis disponible mais je suis allergique au renfermé, et donc à tous ce qui est intérieur de maison, je préfère grandement l'herbe fraiche. Pour ce qui est du rapport avec le client, ma petite taille me permet de me glisser dans sa poche, je vous dirigerez depuis ce poste si vous le voulez bien. Etant donné mon rang, je dois toujours me faire annoncer par l'hôte Monsieur PHP avant d'intervenir, sachez également, et c'est très important, que dès que PHP m'a introduite dans une pièce et que j'y suis rentrée alors PHP ne pourra intervenir qu'une fois que nous changerons de pièce ! Si vous acceptez ces conditions alors je resterais parmi vous. Vous pouvez m'appeler Js si vous le désirez ! »

La chose dites, la troupe s'en alla recevoir le premier invité, et la ce fut magique, le client arriva dans la maison, monsieur PHP l'accueille bras ouverts, il présenta d'abord HTML et CSS, puis ce fut au tour de Js (alias javascript) le client en eu plein les yeux, si vit des portes s'ouvrir et des étoiles jaillir sous les ordre de Js, si il avait quelque chose à demander alors criquet était la pour lui répondre, d'une porte à l'autre PHP s'occupait de mettre en ordre la pièce suivante et d'organiser les informations et le contenu. L'osmose était parfaite et l'histoire magique de nos compagnons continua jusqu'à ce que l'ennui les guettes ou que les visiteurs ne soient plus aussi nombreux, pour qu'un autre lurons fasse son apparition et remette de l'ambiance dans la maison, votre maison !

 

Pour ceux qui n'aurait pas saisit, les pièces de la maison sont en faites des pages que php et ses acolytes génèrent en fonction des choix du visiteur.

 

 

 

Partie pour la 3ème lecture et ou pour les débutants (et non novices) :

Pour ce qui est de ma fameuse explication du Javascript, il faut savoir que ce langage est exécuté côté client. Le client étant le visiteur. Pour faire simple, et comme c'est conté dans le dernier paragraphe de l'histoire, Javascript une fois mis en place sur une page ne peut pas communiquer avec PHP, la communication ne peut être établie qu'une fois la nouvelle page chargée et/ou la première page quitté.

En faite une fois que PHP à finit la génération d'une page il passe la main à Javascript, quand la page est déchargée alors la main repasse à PHP, qui peut récupérer certaines variable initialisées par Js. Pour exemple les cookies permettent un tel partage.

 

1 ) Votre page A est générée, à l'intérieur nous avons un script Js qui fait un calcul 1+1, le résultat 2 est stocké grâce à

document.setcookie = ''nomCookie=''+valeur;

2 ) Un bouton dans la page A vous permet de valider cette opération et de passer à la page suivante.

3 ) Une fois le bouton pressé la main passe à PHP, Une fonction PHP est exécutée qui prend le cookie grâce à $_COOKIE[' nomCookie '] et l'affiche sur la page B.

4 ) La page B s'ouvre alors, on revient alors à un cas du type de la page A où c'est Js qui à la main et effectue sont traitement.

 

Pour être encore plus clair et limpide comme de l'eau du robinet de mon évier :

dessin_PHP.png

 

Un schéma très moche !! Enfin bon bref si je trouve une formulation, un phrasé plus clair je modifierais le texte  ;)

 

 

 

Voilà ce petit conte touche à sa fin comme vous l'aurez compris. Je vous souhaite de bien commencer votre site et espère que mon Monsieur PHP vous reverra bientôt parmi nous.

 

N'hésitez pas à laisser un commentaire !  :)

4 commentaires sur 'Et si le Web nous était conté, peut être compterions nous mieux !'

  1. c bien ptit mika !
    C le web pour les nuls ? T'aurais pu faire une bd...
  2. Merci ^^, t'as trouvé ça comment? Je me suis relus qu'une fois donc ça doit pas être génial...

    Oui c'est ça, pour les nuls (enfin novice je préfère ^^)!

    J'ai pensé à faire une petite BD, je verrais si j'ai le temps ce week-end  :)
  3. bolors ! les gens... ils pourraient mettre un petit commentaire !
    je crois qu'ils préfèreraient ta bd...
  4. lol  ;)
    en même temps je commence à être habitué à n'avoir que très peu de commentaires, et que la totalité soient de collègues !
    Mais bon ce n'est que le début  :) , on verra dans un avenir proche

Ajouter un commentaire

Vous avez un compte sur Wilogo ?
Entrez le mot indiqué ci-contre :captcha