Najah.
Mon plan de révision⚡ Défi flash

Informatique · BTS & DUT (EST) — BTS

Développement web (Front-end et Back-end)

Le cours expliqué simplement, les questions que tous les élèves se posent et des exercices type examen national. Programme marocain, gratuit.

📘 Fiche de cours

L'essentiel du cours

Le développement web repose sur l'architecture client-serveur. Le Front-end utilise HTML5 (structure), CSS3 (style) et JavaScript (interactivité). Le Back-end gère la logique métier, la connexion à la base de données (SQL) et le traitement des requêtes via un langage serveur (ex: PHP ou Node.js). Le protocole HTTP/HTTPS assure l'échange de données.

Méthodes à maîtriser

  1. Créer une structure HTML sémantique.
  2. Appliquer des styles CSS (Flexbox/Grid).
  3. Manipuler le DOM avec JavaScript.
  4. Créer une connexion entre une page web et une base de données via un script serveur.

Exemples corrigés

  • HTML : <button id="btn">Cliquez</button>
  • JS : document.getElementById('btn').addEventListener('click', () => alert('Hello'));
  • SQL (Back-end) : SELECT * FROM utilisateurs WHERE id = 1;

Erreurs fréquentes

  • Mélanger le code côté client (JS) et côté serveur (PHP/SQL).
  • Oublier de fermer les balises HTML.
  • Ne pas sécuriser les entrées utilisateur (risque d'injection SQL).

🌉 Jisr : les mots du chapitre FR ⇄ AR

Tu as appris les sciences en arabe ? Touche un mot pour voir sa traduction et une explication en darija.

La question que tu n'oses pas poser en classe ? Pose-la à UstadZéro jugement, même en darija, même à minuit. Il t'explique pas à pas et corrige ta démarche. Gratuit.

Défi flash : 4 questions

Sans compte

🎯 Développement web (Front-end et Back-end)

1/4

Quelle balise HTML est utilisée pour inclure un fichier JavaScript externe ?

❓ Questions fréquentes

C'est quoi une API REST ?

C'est une interface qui permet à deux systèmes (ex: Front-end et Back-end) de communiquer via le protocole HTTP en utilisant des formats comme JSON.

💡 À retenir : JSON est le format standard d'échange de données web.

C'est quoi la différence entre Front-end et Back-end ?
  1. Le Front-end est tout ce que l'utilisateur voit et avec quoi il interagit dans son navigateur (HTML, CSS, JS).
  2. Le Back-end est la partie invisible située sur le serveur, qui traite les données, gère la sécurité et communique avec la base de données.

💡 À retenir : Le Front-end est la vitrine, le Back-end est la cuisine du restaurant.

Chno hiya l'fayda dial JavaScript f'l'page web ?
  1. JavaScript permet de rendre la page dynamique sans recharger tout le contenu.
  2. Il permet de valider les formulaires côté client avant l'envoi.
  3. Il gère les événements comme les clics ou les animations.

💡 À retenir : JS donne vie à l'interface statique HTML/CSS.

Kifach n-connecti l'site diali m3a la base de données ?
  1. Utiliser un langage serveur (PHP, Python, Node.js).
  2. Utiliser une extension de connexion (ex: PDO en PHP).
  3. Envoyer une requête SQL via le script serveur pour récupérer ou insérer des données.

💡 À retenir : Le navigateur ne communique jamais directement avec la base de données pour des raisons de sécurité.

Est-ce que le CSS est obligatoire pour faire un site web ?

Techniquement non, le navigateur affichera le HTML par défaut, mais le rendu sera illisible et non professionnel.

💡 À retenir : Le CSS est indispensable pour l'expérience utilisateur (UX).

C'est quoi une requête GET et POST ?
  1. GET : Utilisée pour récupérer des données (les paramètres apparaissent dans l'URL).
  2. POST : Utilisée pour envoyer des données sensibles ou volumineuses (les données sont dans le corps de la requête).

💡 À retenir : Utilisez POST pour les formulaires de connexion ou d'inscription.

Wach l'HTML 5 est un langage de programmation ?

Non, c'est un langage de balisage (Markup Language) utilisé pour structurer le contenu, pas pour faire des calculs ou de la logique.

💡 À retenir : La logique est réservée à JavaScript ou aux langages serveurs.

C'est quoi le DOM ?

Le DOM (Document Object Model) est une représentation en arbre de votre document HTML que le navigateur utilise pour manipuler les éléments via JavaScript.

💡 À retenir : Modifier le DOM permet de changer le contenu de la page en temps réel.

Comment sécuriser un formulaire web ?
  1. Valider les données côté client (JS).
  2. Toujours valider et filtrer les données côté serveur (PHP/Node).
  3. Utiliser des requêtes préparées pour éviter les injections SQL.

💡 À retenir : Ne jamais faire confiance aux données envoyées par l'utilisateur.

C'est quoi un Framework ?

C'est un ensemble d'outils et de bibliothèques pré-écrits qui facilitent le développement en imposant une structure de travail.

💡 À retenir : Les frameworks permettent de gagner du temps et d'écrire un code plus propre.

Chno hiya l'différence bin HTTP et HTTPS ?

HTTPS est la version sécurisée de HTTP. Il utilise le chiffrement SSL/TLS pour protéger les données échangées entre le client et le serveur.

💡 À retenir : Le HTTPS est devenu obligatoire pour tous les sites modernes.

Pourquoi on utilise le SQL dans le développement web ?

Le SQL est le langage standard pour interroger et gérer les bases de données relationnelles où sont stockées les informations des utilisateurs, produits, etc.

💡 À retenir : Sans SQL, un site web serait incapable de retenir des informations de manière persistante.

✍️ Exercices type examen national

Exercice 1

Soit un formulaire HTML simple avec deux champs : "Nom" et "Email". Écrivez le code HTML et le script JavaScript qui vérifie que les champs ne sont pas vides avant l'envoi.

Voir la correction détaillée : inscription gratuite

Exercice 2

Expliquez le cycle de vie d'une requête HTTP lors de la connexion à un site web.

Voir la correction détaillée : inscription gratuite

Exercice 3

Vous avez une table Produits(id, nom, prix). Écrivez une requête SQL pour récupérer tous les produits dont le prix est supérieur à 100 DH.

Voir la correction détaillée : inscription gratuite

Un prof de Informatique pour aller plus loin

Les cours du soir avec des profs vérifiés arrivent : inscris-toi pour être prévenu(e) en premier.

Être prévenu(e) gratuitement

Autres chapitres de Informatique