Débutants, comprenez l’utilité de l’HTML, CSS, Javascript, PHP…

« …HTML, CSS, JS, PHP, MySql […] Vous les utilisez déjà tous les jours… »

HTML, CSS, Javascript, PHP, Base de données, MySQL… On en a tous déjà entendu parler au moins une fois dans notre vie ! Quoi ?! Pas vous ? Vous ne me croyez pas ? Voyons, vous les utilisez pratiquement tous les jours ! Vous êtes sceptiques ? Qui n’a jamais fait un clic droit avec sa souris sur une page web ? Si ce n’est pas le cas… Vous pouvez vous « amuser » à le faire maintenant. Si vous êtes sur PC, et en fonction de votre navigateur, un menu plus ou moins semblable à celui ci-dessous devrait apparaître.

Notez deux choses: « Code source de la page »  (ou encore « Afficher le code source ») et « Examiner l’élément ». Cliquez sur « Examiner l’élément ». N’ayez pas peur ! Un code comme celui-ci-dessous devrait s’afficher…

C’est du chinois pour vous ? Vous n’y comprenez pas grand chose ? Rassurez vous ! C’est la cas pour la majorité des Français ! Pourtant… Ces symboles et écritures bizarre sont de plus en plus utilisés. Il s’agit d’HTML, CSS ou encore de JavaScript. Bon… Ne pas savoir coder, ce n’est pas un drame ! Cependant, ne pas être capable de reconnaître un langage et se savoir à quoi il sert… C’est quand même bien dommage. C’est pareil pour une langue. Par exemple, ne pas savoir parler le japonais, ce n’est pas un drame, mais ne pas savoir reconnaître du japonais quand on en vois, c’est quand même bien dommage !

Pourtant, reconnaître et comprendre l’utilité d’un langage de programmation n’est vraiment pas difficile. Pas besoin d’être un programmeur ! (Oui… Pas besoin de parler le japonais pour le reconnaître quand on le vois et pour savoir que c’est au Japon que l’on parle japonais…).

Comment reconnaître et comprendre la programmation ?

Comprendre et reconnaître la programmation d’un site. Oui c’est ce que je vous propose dans cet article. Nous avons tous besoin de connaitre un minimum de choses sur la programmation. Pour des raisons professionnel, personnel ou culturel…  Attention. Je ne vais pas vous apprendre à coder ! Mais seulement à comprendre l’utilité des langages HTML, CSS, JAVASCRIPT, PHP et SQL (Mysql/BDD).

Pour avoir des centaines de fois tenté d’expliquer toutes ces choses. Je me suis très vite rendu compte que la meilleure technique reste l’utilisation d’images et d’associer la programmation à quelque-chose de bien connu… Le corps humain ! Non ! Ce n’est pas une blague. Et vous allez très vite comprendre pourquoi.

Aussi surprenant que cela puisse paraitre, un site internet ressemble étrangement à un être humain… Pour que puissiez bien comprendre pourquoi, recommençons depuis le début. Que faut-il dans un premier temps, pour créer un humain ?

Un squelette / HTML

Quand un site doit-être crée, il faut commencer par le fragmenter, l’organiser…Bref ! il faut créer une structure qui va nous permettre de « fixer » les autres éléments. Cette structure est séparé en plusieurs parties : Le header (tête), le body (corps) et… et… et… le footer (le pied). Bref, exactement un un corps humain. Cette structure est clairement comparable au squelette pour l’homme. D’ailleurs, le petit pour les intégrateurs web est « le squelette du site ». Comme par hasard !  Voir ci-dessous un exemple de squelette de site.

Un ADN / CSS

Bien ! Nous avons un beau squelette mais sans couleur et sans vie. On va arranger ça !
Question pour vous ! (faites genre de ne pas avoir vu le titre juste au-dessus)

Quel élément chez l’être humain va nous donner nos couleurs ? (par exemple la couleur de notre peau, de nos cheveux, de nos yeux) mais aussi notre taille et nos trais de caractère physique ? BIM ! Bonne réponse ! L’ADN !

Et bien pour un site internet, c’est exactement pareil. Nous pouvons gérer la taille du squelette, la couleur  du header, du footer, du texte, des liens via un genre d’ADN spécial pour les sites internet : Le CSS. L’HTML (le squelette) et le CSS (l’ADN) sont donc extrêmement liés. Ils fonctionnent l’un avec l’autre.

Bon ! A ce stade, nous avec un humain qui se tien debout avec un aspect physique… Mais il ne bouge pas, il reste statique et n’a aucune interaction avec nous. Bref, il s’agit d’avantage d’un mannequin (qui va servir à présenter des vêtements dans une vitrine), qu’à un être humain ! D’ailleurs… Un site fait uniquement en HTML et CSS a de fortes chance d’être un site vitrine… Comme par hasard !

Des muscles / JavaScript

Si nous voulons que ce site soit interactif, il faut créer des actions sur ce site. Mais pour réaliser une action, il faut … Des muscles et des nerfs ! Par exemple, si nous chatouillons un être humain, celui-ci va automatiquement rire et se recroqueviller. Et bien pour un site internet. C’est pareil ! (Non, ne tentez pas de chatouiller votre écran…) Il existe des éléments Javascript qui vont réagir à un clic ou une zone que vous allez traverser avec votre sourie… Par exemple, Ci-dessous cette « boite »a plusieurs onglets. Si vous cliquez sur un des onglets, il va vous afficher son contenu automatiquement (ACTION > RÉACTION).

> Exemple ICI <

Bien ! Nous avons maintenant un être humain qui a une forme automatique d’interaction ! Mais tel un zombie, qui ne pense qu’à nous manger quand il vous vois. Ses actions sont automatiques et il manque cruellement d’intelligence. Nous devons le rendre plus intelligent !

Un cerveau / PHP

Il est temps de passer au cerveau. En ajoutant un cerveau à cet être humain, on lui permet de poser des conditions et de faire un choix entre plusieurs possibilités. Cette action de « réflexion » est propre aux humains tout comme au intelligences artificielles il s’agit du  SI, DONC, ALORS.

SI tu me tend ta main, DONC tu veux me saluer, ALORS je vais serrer ta main.

Il est possible par la suite de complexifier cette réflexion : SI tu me tend ta main, ET SI je te connais DONC tu veux me saluer OU me dire au revoir ALORS je vais serrer ta main.

Ce moyen de réflexion peut-être effectuer sur internet via un langage: le PHP.

C’est exactement pareil pour un site internet ! Vous arrivez sur Facebook, vous souhaitez vous connecter avec votre pseudonyme et mot de passe. Vous rentrez vos identifiants dans le formulaire de connexion et vous cliquez sur connexion. Voici ci-dessous ce que va faire « le creveau » de Facebook :

SI tu me donne des identifiants correctes DONC tu es bien cette personne ALORS je t’affiche tes informations.

On a bien avancé ! Mais il manque un truc… Notre humain se tien debout, il ressemble à un humain, il interagi avec nous et il a une réflexion. Ce n’est pas mal, mais ce n’est pas suffisent ! Et oui, à quoi sert une réflexion sans mémoire ? Reprenons l’exemple précédent:

SI tu me donne des identifiants correctes DONC tu es bien cette personne ALORS je t’affiche tes informations.

Il y a deux éléments issus d’une mémoire. Les identifiants (comment savoir qu’ils sont correcte si je ne les aient pas stocké dans ma mémoire ?) et les informations à afficher (Prènom : Maxime, Nom : Lecompte, Age 27 ans, Nombre d’amis : 237… ) Mais comment peut-on ajouter une mémoire ?

Une mémoire / Base de données / Mysql

Encore une fois, nous nous rapprochons de l’humain et de son cerveau pour comprendre. Imaginez une personne qui a une mémoire défaillante. Elle pourra discuter avec vous du beau temps actuel, car il s’agit d’un constat présent ne faisant pas appelle à la mémoire : « Quel temps fait-il ? »   réponse : « Il fait très beau ! ».

Cependant si notre question fait appelle à des informations passé, le personne que vous interrogez risque de ne pas savoir quoi répondre. Il en est de même pour le PHP. Sans mémoire, le PHP ne peut interagir qu’avec des éléments présent ou déclaré manuellement par l’utilisateur.

Exemple: SI 2 > 1 DONC 1 < 2 ALORS 2 n’est pas égale à 1.

Ici, il n’y a pas de mémoire, seulement des informations présente. Pour stocker une mémoire, nous utilisons les Bases de Données. Les bases de données vont stocker dans des tableaux/catégories les informations. Par exemple, dans le Tableau « Prénom » on va stocker « Maxime ». et dans le tableau Mot_de_passe, on va stocker « amixemyoutube ». Le php va donc former la réflexion suivante :

SI amixemyoutube (le tableau Mot_de_passe va être consulté pour savoir si le mot de passe est correcte) DONC tu es (de même pour le prénom) Maxime ALORS j’affiche les informations de maxime.

Si le PHP n’est que la réflexion et que la Base de Donnée, elle ne fait que stocker les informations. Il manque donc une dernière étape, il faut pouvoir trier l’information pour la stocker en Base de données, et l’extraire de celle-ci quand le PHP en a besoin (c’est le rôle des neurones pour l’être humain). Dans un site internet, c’est le SQL qui s’occupe « d’aller stocker » et « d’aller chercher » dans la mémoire les informations. Je ne vais pas rentrer dans les détails plus que ça au risque de vous perdre.

Résumons rapidement :

Un squelette = HTML

Un ADN = CSS

Des Muscles = Javascript

Une mémoire = Base de données

Neurones = SQL