Vous ne savez pas comment vous y prendre pour créer votre première application web ?
Vous avez peut-être déjà commencé à apprendre un langage, une technologie ou suivi plusieurs tutoriels ? Au-delà des premiers pas, vous êtes perdus ? Vous tentez de modifier votre code et vos résultats sont aléatoires, il y a des bugs dans vos applications, vous avez des problèmes insolubles ?
Voyons ensemble comment fonctionne une application web et, donc, tout ce que vous devez connaître pour en créer une. Après cette introduction sur 2 articles, je vous expliquerais comment en créer une.

Note importante : je vous parle ici de créer une application web, pas un site web vitrine ou un CMS. Si vous souhaitez mettre en place un site plus classique, ne le développez surtout pas vous-même, il existe des solutions beaucoup plus simples : WordPRess / Joomla / Drupal / Typo3… (vous pouvez débuter par ce comparatif proposé par OVH).

L’architecture d’un site web

Pour débuter, et faire ultra simple, un site web est composé de 3 parties :

Le client, c’est le navigateur de l’utilisateur de votre site. Vous verrez que pour que votre site web fonctionne, il faut utiliser plusieurs langages du côté du client : HTML, CSS et JavaScript.

Le serveur web, c’est une machine disponible quelque part sur internet, qui est spécialement conçue pour répondre aux demandes du navigateur avec du contenu que celui-ci peut afficher. Les navigateurs et les serveurs web sont faits pour travailler ensemble. La bonne nouvelle : sur le serveur web, vous n’avez besoin que d’un seul langage. La mauvaise nouvelle : contrairement au navigateur, il n’y a pas de standard, vous aurez à choisir entre JavaScript, C#, Java, PHP, Python, Scala, Ruby, et bien d’autres possibilités…

Le serveur de bases de données, c’est l’endroit où sont stockées toutes les données modifiables de votre site web. L’industrie du développement logiciel a vite compris, même avant internet, qu’il était plus intéressant de stocker les données modifiables d’une application dans un endroit unique pour les gérer au mieux et ainsi garantir leur cohérence. Bonne nouvelle, il n’y a qu’un seul langage à connaître, et c’est un standard : le SQL.

Vous avez ici les principaux ingrédients à connaître pour développer un site web. Oui, cette liste déjà importante, et, oui, c’est faisable d’apprendre tout cela.

A ce propos, petite digression sur le développement personnel : savez-vous comment manger un éléphant ?
Ne faites pas que me lire !
Posez-vous réellement la question : quelle est la meilleure technique pour manger un éléphant ?
Vous avez votre réponse ?

Il s’agit tout simplement d’une bouchée à la foi.
Je trouve que cette métaphore issue du développement personnel met en lumière un aspect important. Tout est faisable pour une personne motivée et se donnant le temps, à condition d’aller à un rythme raisonnable pour pouvoir correctement digérer les informations. Procédez par étape, ne mettez pas la charrue avant les bœufs !

Dites-vous bien que c’est faisable, de nombreux développeurs ont débuté un jour et sont passés par toutes ces étapes, et de nombreux autres commencent à apprendre aujourd’hui, comme vous.
S’ils y arrivent, pourquoi pas vous ?Il faut juste suivre un rythme progressif, je vous proposerais en fin d’article plusieurs solutions pour apprendre le développement de sites web, à vous de choisir la forme et le rythme qui vous plaît.
Détaillons un peu plus chacun des aspects cités ci-dessus.

Le client : le navigateur

Le navigateur web est devenu un outil d’usage courant et vous l’utilisez probablement chaque jour. Il n’en a pas été toujours ainsi, un petit peu d’histoire vous aidera à comprendre ce que fait un navigateur et pourquoi les choses sont un petit peu compliquées.
Au début de l’informatique, les applications fonctionnaient uniquement sur l’ordinateur sur lesquelles elles étaient installées. Si vous n’aviez pas un écran et un clavier directement reliés à l’ordinateur en question, vous n’aviez pas accès à l’application ! Oubliez le télétravail dans ce contexte X)
Avec le temps, des solutions ont été imaginées, notamment le réseau, permettant à deux ordinateurs de discuter entre eux. Au niveau logiciel, le mode client-serveur a été inventé pour profiter de cette innovation et permettre à un utilisateur avec un ordinateur distant, le “client”, de se connecter à l’application installée sur l’ordinateur principal, le “serveur”. C’était un bon en avant extraordinaire qui a permis de se connecter à une application à plusieurs kilomètres de distance ! Cependant le modèle comportait des contraintes. Les ordinateurs ainsi reliés devaient être des modèles compatibles, et les applications prenaient en charge de nombreux aspects, dont l’affichage. Si vous vouliez faire évoluer le logiciel et/ou le matériel, vous étiez obligé de planifier un plan de migration de tous les ordinateurs clients en même temps que l’ordinateur serveur. Assez lourd à gérer !!! Je précise tout de même qu’il existe encore des applications développées selon le mode client/serveur. En effet, vu que le client est installé sur l’ordinateur, l’intégration avec celui-ci est totale ce qui donne une facilité d’utilisation plus grande qu’avec un site web, même si ces différences tendent à disparaître.
Enfin, au début des années 90, est arrivé le web. Oui, ARPANet, l’ancêtre d’internet, a été créé en 69 par la DARPA, mais le premier site web n’a été créé qu’en 89, c’est celui du projet World Wide Web justement (logique).
Qu’est-ce qu’internet et le web ? C’est la mise en place d’un standard de communication intermédiaire entre tous les types d’ordinateurs. Je pense en particulier aux protocoles HTTP et TCP/IP et au langage HTML. Sans rentrer dans les détails, n’importe quel type d’ordinateur est capable, avec le web, de discuter avec n’importe quel autre type d’ordinateur. Cela nous semble évident maintenant, cela ne l’était pas du tout avant ! Sans internet et le web, envoyer un simple fichier texte sur un autre ordinateur, d’un autre type, était très compliqué, voire tout simplement impossible !
Comment HTTP permet-il de faire fonctionner deux ordinateurs différents ? C’est très simple, HTTP a défini un standard de communication en mode texte, ce qui force tous les ordinateurs à transformer leurs messages et informations dans ce format standard. Par exemple, quand un ordinateur sous Windows envoie une demande HTTP à un ordinateur Unix, cela se passe ainsi :

 

Vous vous rendez mieux compte du travail qu’un navigateur Web a à accomplir : il transforme vos demandes de pages du format de votre ordinateur local vers le format HTTP standard et, au retour, il transforme le contenu de la page à afficher du format HTTP standard vers le format de votre ordinateur. C’est probablement sa tâche la plus simple, car il doit aussi afficher la page, récupérer les images, gérer les actions utilisateurs, etc.De plus, comme le protocole HTTP est un protocole textuel, les premiers navigateurs web ne supportaient que l’échange de texte. Le langage HTML permettait d’afficher ce texte avec un minimum de présentation et de couleur, mais aucune image ! Je ne sais pas si vous avez connu cette magnifique époque aux pages web très colorées. C’était spécial, mais c’était déjà un grand pas en avant.Ensuite, le HTML a été amélioré pour supporter des images.Après, le JavaScript est apparu en 1995, inventé par Netscape, pour proposer quelques petites actions dans le navigateur. Par exemple pour être capable de vérifier que l’email saisi ressemble bien à un email, afin d’éviter les erreurs de saisies. Autre exemple, vérifier que tous les champs obligatoires ont bien été renseignés. C’est aussi l’apparition des animations avec ces images qui défilaient sur la page (horizontalement, verticalement, ou même selon des trajectoires très aléatoires). N’hésitez pas à mettre en commentaire l’URL d’une ancienne page si vous en connaissez une.Enfin, le CSS a été créé afin de réunir la mise en forme d’un site dans un seul document auquel toutes les pages HTML se réfèrent. La bonne pratique actuellement recommande de mettre uniquement le contenu dans les pages HTML et de garder les instructions de mises en forme dans le ou les documents CSS. Je vous recommande vivement de suivre ce principe, c’est vraiment beaucoup plus simple à gérer ainsi, même si, bien sûr, cela amène son lot de petits problèmes à gérer.
J’espère ne pas trop vous avoir perdu, il me semble important de remettre les choses dans leurs contextes pour mieux les comprendre. Vous savez maintenant pourquoi il y a 3 langages à utiliser dans un navigateur web.

Le serveur web

C’est l’autre côté du lien HTTP, vous savez maintenant que son travail consiste à transformer les demandes reçues du standard HTTP vers le format de l’ordinateur local et vice versa pour envoyer les différents fichiers qui correspondent au site web.Ce que je viens d’écrire correspond à un site web statique (même s’il a du JavaScript côté client !). Nous l’appelons “statique”, car les pages web, c’est-à-dire les fichiers HTML, sont stockés sur le disque dur du serveur web. Ils sont statiques ! Tant que vous ne les modifiez pas, à la main, ils contiennent la même information. C’est comme si vous aviez mis un fichier Word à disposition dans un dossier partagé.
Vous souhaitez afficher la date et l’heure du serveur ? Ce n’est pas possible !Attention, je parle bien de la date et l’heure du serveur, car pour celles du client, il suffit d’utiliser le JavaScript que je vous aie présenté juste avant. En quoi les dates/heures du serveur et du client peuvent être différentes ? Rappelez-vous, nous sommes sur internet, votre client peut être à Tokyo et votre serveur en France. Les dates/heures ne seront pas les mêmes !C’est pour permettre de genre de modification en temps réel (et beaucoup d’autres) que les sites web dynamiques ont été inventés. Afin de faire un site web dynamique (côté serveur), une astuce a été trouvée : au lieu de prendre le contenu d’un fichier HTML stocké statiquement sur le disque dur, il suffit d’exécuter un programme qui va créer dynamiquement ce contenu HTML. Le rôle du serveur web est alors de lancer le programme et de récupérer le contenu HTML ainsi produit pour l’envoyer au client qui en a fait la demande. Pour créer un site web dynamique, il vous faut utiliser un langage capable de s’exécuter sur le serveur web, et de dialoguer avec celui-ci. Ce dialogue est très important, il permet d’obtenir des informations envoyées par le navigateur par exemple les valeurs des champs d’un formulaire, des informations sur les capacités du navigateur, la langue, les cookies, etc.Pour créer le programme appelé par le serveur web, vous pouvez utiliser :

• un langage intégré dans le serveur web (c’est ce que je vous recommande)
• ou utiliser les interfaces CGI, qui permettent d’appeler n’importe quel programme exécutable sur votre machine. Cela peut poser des problèmes de sécurité, mais vous offre la possibilité de coder dans n’importe quel langage, même s’il n’a pas été prévu pour le développement web.

Je vous propose de rester sur les langages qui ont été prévus pour la programmation de sites web dynamiques, ils offrent de nombreux avantages, dont des composants préfabriqués que vous pouvez facilement réutiliser.Voici quelques langages couramment utilisés dans le développement de sites web dynamiques :

• Java
• C#
• JavaScript
• PHP
• Python / Ruby / Scala / et beaucoup d’autres…

Vous avez peut-être noté que JavaScript est également possible sur le serveur. En effet !Une astuce pour rendre l’apprentissage du développement web plus simple est tout simplement d’apprendre seulement le JavaScript pour l’utiliser côté client et côté serveur ! Oui, c’est une assez bonne idée.Attention toutefois que les grandes entreprises n’ont pas massivement migré sur JavaScript côté serveur. Si votre objectif est de, à terme, trouver un emploi, il sera plus facile de le faire avec Java ou C# comme langage côté serveur.Vous me direz, je peux débuter avec le JavaScript pour maîtriser le développement web dans cette version, et ensuite passer à un autre langage serveur plus tard. Ce n’est pas totalement vrai :

• le développement côté serveur ne se résume pas à apprendre un langage, il faut aussi découvrir les technologies liées, spécifiques aux aspects serveur
• vu que vous utilisez le même langage côté serveur et côté client, vous risquez quelques confusions et le fait de commencer dès le début avec 2 langages distincts peut au contraire vous aider à clarifier votre compréhension !

Personnellement, je vous recommande donc d’utiliser C# ou Java en langage serveur, je suis convaincu que c’est d’une part plus utile et d’autre part plus simple d’apprendre ainsi.Ce site n’est pas spécifique à un langage, tous les aspects pratiques seront donc, autant que possible, dans plusieurs langages, à minima en Java et en JavaScript.

Cliquez ici pour lire la suite de l’article…