Jour 06 : Choix des outils et technologies de développement

Le projet Créa-Code ne se limite pas à construire un site web. Il ambitionne également de servir de tutoriel vivant, étape par étape, pour tous ceux qui souhaitent apprendre à coder sérieusement: #100JoursPourCoder.

C’est dans cette optique que chaque décision technique est pesée, expliquée et documentée. Aujourd’hui, nous sélectionnons les technologies et les outils que nous allons utiliser. Et ce choix est loin d’être anodin : il conditionnera à la fois le développement du site, l’apprentissage et la cohérence pédagogique de l’ensemble.

Le contexte pédagogique

Le développement web moderne propose de nombreuses solutions pour gagner du temps : CMS, générateurs de sites statiques, frameworks puissants. Pourtant, dans le cadre de ce projet, nous avons volontairement choisi de ne pas les utiliser. Ce n’est pas un rejet idéologique, mais une décision pédagogique claire.

Un CMS comme WordPress aurait permis d’aller beaucoup plus vite. Un framework PHP comme CodeIgniter, Laravel ou Symphony aurait structuré le projet d’une manière élégante. Mais ces outils cachent une grande partie de la logique interne. Pour un développeur expérimenté, c’est un gain de productivité. Pour un apprenant, c’est une barrière supplémentaire.

En codant tout manuellement, nous exposons chaque rouage du développement. Nous obligeons à comprendre ce qu’est une requête HTTP, une session, une base de données relationnelle, une injection SQL, une structure de fichiers logique… C’est peut-être plus long, mais c’est aussi plus formateur. Et c’est ce que nous recherchons ici.

Des choix stratégiques

Chaque langage, chaque outil que nous allons adopter a été sélectionné en fonction de trois critères : sa simplicité d’apprentissage, sa puissance à long terme et sa pertinence dans un parcours pédagogique progressif.

Nous devons pouvoir tout expliquer sans perdre ceux qui débutent. Nous devons pouvoir construire un site fonctionnel, moderne, compatible avec les standards du web. Et nous devons pouvoir faire évoluer le projet dans le temps, sans devoir tout réécrire à chaque étape. Ce défi dure 100 jours, mais les fondations posées maintenant devront durer bien au-delà.

C’est pourquoi le choix de la stack technique n’est pas un simple détail. Il conditionne la manière dont le site sera conçu, compris, reproduit et maintenu.

Le front-end : HTML, CSS et JavaScript

Pour construire les pages visibles par les utilisateurs, nous nous appuierons sur les trois langages fondamentaux du web : HTML5, CSS3 et JavaScript. Ces trois langages seront utilisés de manière « brute », c’est-à-dire sans framework ou bibliothèque ajoutée au départ.

Cela signifie qu’aucun Bootstrap, Tailwind ou jQuery ne viendra simplifier la tâche. Pas de React, pas de Vue, pas d’Angular non plus : Il s’agit de frameworks ou de bibliothèques externes.

Ce n’est pas un rejet de ces outils, mais un choix logique pour favoriser l’apprentissage des bases. Le but est que vous compreniez comment fonctionne une balise HTML, comment styliser un élément en CSS, comment interagir avec le DOM en JavaScript.

Cette approche vous permettra d’acquérir de vrais réflexes, sans dépendre d’un outil externe. Et une fois les bases bien maîtrisées, l’introduction d’un framework deviendra une étape naturelle, et non une béquille.

Le HTML5 servira à structurer les pages. Le CSS3 apportera les couleurs, les tailles, les positions, les animations. Le JavaScript permettra de gérer les événements, de modifier dynamiquement le contenu, de créer des interactions simples mais efficaces. C’est tout ce qu’il faut pour construire une interface moderne, fluide, réactive.

Le back-end : PHP en procédural mais également en POO

Pour le traitement des données, la gestion des utilisateurs, des sessions, des formulaires, du stockage et des règles métiers, nous utiliserons le langage PHP.

Nous commencerons avec une approche procédurale. C’est la manière la plus simple d’aborder le langage. On écrit une suite d’instructions, on exécute le script, on observe les résultats. Cela permet de voir très rapidement les effets du code, ce qui est essentiel dans un apprentissage.

Par exemple, lorsqu’un utilisateur soumet un formulaire d’inscription, un script PHP récupérera les données, les traitera, vérifiera leur validité et les enregistrera dans la base de données. Tout cela peut être fait sans classes, sans objets, sans architecture complexe.

Mais très vite, une fois les premières bases acquises, nous introduirons la programmation orientée objet. Cela ne se fera pas brutalement, mais de manière progressive. Vous verrez comment créer une classe, lui attribuer des propriétés, définir des méthodes, instancier un objet.

Comme référence, vous pourrez consulter notre tutoriel complet pour Débuter et comprendre la POO en PHP.

Cette transition douce vers la POO est essentielle. Elle permet d’améliorer la lisibilité du code, de favoriser sa réutilisation, de mieux organiser les fonctions et les données. À long terme, elle prépare à des architectures plus solides, comme le MVC que nous mettrons en place.

PHP a parfois mauvaise réputation, mais c’est un langage puissant, mature, largement utilisé dans l’industrie, et idéal pour apprendre les fondamentaux du développement web côté serveur. Il reste très populaire, notamment grâce à sa compatibilité avec les hébergements web classiques. Il est donc tout à fait adapté à un projet comme celui-ci.

La base de données : MySQL avec PDO

Pour stocker les informations essentielles du site, nous allons utiliser une base de données relationnelle. Le choix se porte naturellement sur MySQL, un système largement répandu, bien documenté, stable et compatible avec tous les hébergeurs web.

La base de données permettra d’enregistrer les comptes utilisateurs, les exercices proposés, les résultats, les scores, les badges gagnés, et bien plus encore. Elle sera le cœur invisible du site, là où transitent toutes les données utiles à la progression et à la personnalisation de l’expérience.

L’interaction avec MySQL se fera via l’extension PDO (PHP Data Objects). Ce choix n’est pas anodin : PDO permet de se connecter à une base de données de manière sécurisée, notamment grâce aux requêtes préparées, qui protègent contre les injections SQL. Il permet aussi une meilleure portabilité, si nous décidons un jour de passer à un autre système comme PostgreSQL.

L’apprentissage de PDO fera partie intégrante du tutoriel. Vous apprendrez à ouvrir une connexion, exécuter une requête, récupérer des résultats, insérer ou mettre à jour des enregistrements. Ces manipulations sont incontournables dans le métier de développeur web.

L’authentification par Session PHP sans bibliothèque externe

L’une des fonctionnalités fondamentales du site sera la gestion de comptes utilisateurs. Cela signifie que les visiteurs pourront créer un compte, se connecter, accéder à des pages réservées, progresser dans leurs exercices, et retrouver leurs résultats à chaque visite.

Pour cela, nous allons mettre en place un système d’authentification maison, sans utiliser de solution préfabriquée. Le fonctionnement des sessions PHP sera donc abordé en détail.

Vous apprendrez à démarrer une session, à stocker des informations, à gérer les redirections selon le statut de l’utilisateur, et à créer des mécanismes de sécurisation des sessions PHP simples mais efficaces, comme la déconnexion automatique ou la protection contre les accès non autorisés.

Ce travail est essentiel pour bien comprendre comment fonctionnent les sites à compte utilisateur. Trop souvent, les développeurs débutants utilisent des solutions toutes faites sans en comprendre les bases. Ici, tout sera transparent, logique et expliqué pas à pas.

Une architecture MVC

À partir du moment où notre code commence à grandir, il devient important de structurer les fichiers, les rôles et les responsabilités. Pour cela, nous allons mettre en place dès le début une architecture de type MVC : Modèle – Vue – Contrôleur.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Le modèle s’occupe des données. Il contient les fonctions qui accèdent à la base de données, les règles métiers, les traitements. La vue contient le code HTML : c’est ce qui est affiché à l’écran. Le contrôleur, quant à lui, fait le lien entre les deux. Il décide quoi afficher, quand et comment.

En adoptant ce modèle, même dans une version simplifiée, nous nous habituons dès le départ à une logique professionnelle. Le code devient plus lisible, plus modulaire, plus facile à maintenir. Il est également plus facile à tester et à déboguer.

L’intérêt du MVC sera détaillé au fil du développement, et chaque composant sera introduit au bon moment. L’objectif est que cette architecture ne soit pas vécue comme une contrainte, mais comme une aide précieuse dans l’organisation du projet.

Anticiper l’évolutivité du site

Même si le projet débute modestement, il est important de penser à son évolutivité dès la conception. Le code écrit aujourd’hui ne doit pas bloquer les ajouts de demain.

C’est pourquoi l’ensemble de la structure sera conçu pour être étendu progressivement : nouveaux types d’exercices, système de quizz, ajouts de missions codées, messagerie interne, notifications, avatars personnalisés, voire forum de discussion ou modules de coaching. Rien de tout cela ne doit nécessiter une réécriture du site, seulement des ajouts cohérents.

Cette capacité à évoluer repose sur plusieurs piliers : une architecture claire, une base de données bien pensée, un code modulaire et une séparation nette des responsabilités. Ce sont autant de pratiques que vous découvrirez et appliquerez au fil des jours.

L’objectif est que vous puissiez, à terme, créer vos propres modules, vos propres extensions, sans devoir tout casser. Et que le site continue de fonctionner proprement, même avec 1 000 utilisateurs connectés au lieu de 10.

Un éditeur de code intégré dans le navigateur

Pour permettre aux utilisateurs de s’exercer directement en ligne, le site intégrera un Playground, c’est-à-dire un éditeur de code interactif dans le navigateur. Cette fois-ci, nous utiliserons des bibliothèques qui permettent d’écrire du HTML, du CSS ou du JavaScript et d’en voir le résultat immédiatement.

Ce type d’outil est très motivant pour l’apprentissage. Il évite d’avoir à jongler entre éditeur local, serveur et navigateur. Il permet de tester des idées rapidement, de corriger des erreurs en direct, de faire des essais sans conséquences.

L’intégration de cet éditeur nécessitera une attention particulière en termes de sécurité, de performance et d’ergonomie. Ce sera l’un des points forts du site, et l’une de ses spécificités par rapport à d’autres plateformes d’apprentissage.

Hébergement et compatibilité universelle

Une fois le site suffisamment avancé, il devra être mis en ligne. Pour cela, nous avons fait le choix de rester compatibles avec des hébergements mutualisés classiques, comme ceux proposés par OVH, Ionos, o2switch ou Infomaniak.

Ce choix est important car il permet à tout visiteur, même sans connaissance avancée, de répliquer le projet chez lui, de le modifier, de l’adapter à ses besoins, ou simplement de le consulter sans contrainte.

Le code ne dépendra d’aucun outil serveur complexe. Pas besoin de Node.js, de Docker, ou de base de données NoSQL. Un simple hébergement avec PHP et MySQL suffira. C’est un choix volontaire de simplicité, pour rester accessible au plus grand nombre.

Cela n’empêche pas, plus tard, de migrer vers un VPS, un serveur dédié, ou un hébergement cloud plus ambitieux. Mais dans un premier temps, la portabilité et la compatibilité primeront.

Les outils recommandés pour suivre et développer le projet

Enfin, pour accompagner les développeurs tout au long du défi, nous allons nous appuyer sur une sélection d’outils simples, gratuits et performants. Ils ne sont pas obligatoires, mais ils sont fortement recommandés pour suivre le tutoriel dans de bonnes conditions.

L’éditeur de code principal sera Visual Studio Code. Léger, puissant, extensible, il offre tout ce dont un développeur a besoin. Son écosystème d’extensions est un atout majeur. Il existe des alternatives, comme Sublime Text, Phoenix code ou Atom, mais nous concentrerons nos démonstrations sur VS Code.

Pour simuler un serveur local, nous utiliserons MAMP. Il permet d’installer facilement Apache, MySQL et PHP sur votre machine, quel que soit votre système d’exploitation. C’est un outil fiable, stable et facile à configurer. Il permet de créer un environnement local de développement très proche de ce que l’on retrouvera en ligne.

Pour les maquettes graphiques, les choix se portent sur Figma. Cet outil en ligne permet de concevoir les interfaces du site avant même de les coder. Il est idéal pour réfléchir à l’ergonomie, au parcours utilisateur, au design global. Il existe d’autres outils comme Canva ou Adobe XD, mais Figma s’impose aujourd’hui comme la référence pour les projets web collaboratifs.

Enfin, pour la gestion de version, nous utiliserons Git, avec une plateforme comme GitHub pour stocker le code, suivre les modifications, et collaborer. Même si le projet est personnel, il est toujours bon d’adopter les bonnes pratiques dès le départ.

Nous apprendrons à nous servir de tous ces outils au fil des jours suivants.

La sécurité, une exigence primordiale

Même si notre projet n’est pas un site bancaire ou médical, la sécurité ne doit jamais être une option. Dès les premières lignes de code, nous ferons attention à certains principes fondamentaux pour limiter les risques et habituer les lecteurs à de bonnes pratiques.

Mieux vaux prévenir que guérir

Il ne s’agira pas ici d’un guide exhaustif sur la cybersécurité, mais de poser les bases :

• Utilisation systématique de requêtes préparées avec PDO pour prévenir les injections SQL.
• Validation et nettoyage des données côté serveur, même si le JavaScript les vérifie côté client.
• Stockage des mots de passe avec des algorithmes de hachage modernes (comme password_hash en PHP).
• Limitation des accès selon le rôle de l’utilisateur.
• Protection contre l’exécution de scripts non autorisés via des restrictions de chemin.
• Utilisation d’un token CSRF sur les formulaires sensibles, notamment pour les actions comme la suppression ou la modification de contenu.
• Header HTTP …

Ces points seront abordés au moment opportun, dans des chapitres spécifiques, pour ne pas surcharger le lecteur débutant. Mais ils feront partie intégrante du chemin pédagogique proposé.

Pour ce sixième jour, vous comprenez à quel point le choix des technologies ne se limite pas à des préférences personnelles ou à ce qui est « à la mode ». Il s’agit d’un acte stratégique, qui engage la pédagogie, la maintenabilité du code, l’accessibilité du projet et l’évolutivité future.

Nous avons volontairement fait le choix d’un développement manuel, pour apprendre en profondeur comment un site fonctionne. Ce ne sera pas toujours le chemin le plus court, mais c’est celui qui vous donnera les meilleures bases si vous souhaitez un jour créer vos propres projets ou devenir développeur professionnel.

Nous avons également pris soin d’aborder des sujets qui dépassent le simple développement : la conception graphique avec Figma, la configuration d’un serveur local, le versionnage avec Git, la sécurité, la structuration du projet en MVC… autant de compétences que vous retrouverez dans les métiers du web.

Ce projet n’est pas qu’un site. C’est aussi un véritable parcours de formation, vivant, évolutif, accessible, que vous pourrez enrichir, modifier, partager.

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr