• Partie 1 : Découvrir les concepts de base de l’informatique:

  • Chapitre 1 : Identifier les fondamentaux du digitalPartie 3 : Rechercher l’information pour répondre à un besoin donné

• Partie 3 : Rechercher l’information pour répondre à un besoin donné

  • Chapitre 1 : Définir le vocabulaire de la naviguation sur le web

    
    

    
    

  
  

• Live Preview (Microsoft)

• Live Server

• HTML CSS Support

1- Créer une page web similaire à celle en pièce jointe.

2- Ajouter une section qui permet d'afficher le menu complet du café sous format PDF, avant la partie de réservation.

3- Ajouter une section qui permet de présenter une vidéo de présentation du café.

4- Ajouter une section qui permet de présenter un audio qui contient le mot du fondateur du café.

Ajout de sélecteurs relationnels

-pseudo-classes

-pseudo-elements

-selecteurs niveau 4

-pseudo-elements des formulaires

https://mobbin.com/

Lire jusqu'à la diapositive 28

Application de gestion des étudiants

Contexte

Un établissement de formation souhaite mettre en place une application pour gérer la scolarité de ses étudiants.
L’application doit permettre de suivre les étudiants, les classes, les modules enseignés et les résultats obtenus.

Objets manipulés et leur définition

Étudiant

Un étudiant est défini par :

• son CNE,

• son nom,

• son prénom,

• sa date de naissance,

• son adresse e-mail,

• son numéro de téléphone.

Chaque étudiant est identifié de manière unique par son CNE.

Classe

Une classe est définie par :

• un code de classe,

• un intitulé de classe,

• un niveau (première année, deuxième année, etc.).

Une classe regroupe des étudiants au cours d’une année scolaire.

Module

Un module est défini par :

• un code de module,

• un intitulé de module,

• un coefficient.

Un module peut être enseigné dans plusieurs classes.

Inscription

Une inscription représente le fait qu’un étudiant s’inscrit dans une classe pour une année scolaire donnée.

Une inscription est définie par :

• l’année scolaire,

• la date d’inscription.

Une inscription associe un étudiant et une classe.
Pour une même année scolaire, un étudiant ne peut être inscrit que dans une seule classe.

Programmation des modules

La programmation des modules représente les modules enseignés dans une classe.

Elle associe :

• une classe,

• un module.

Une classe peut programmer plusieurs modules, et un module peut être programmé dans plusieurs classes.

Note

Une note représente l’évaluation d’un étudiant dans un module.

Une note est définie par :

• une valeur comprise entre 0 et 20,

• une session (normale ou rattrapage),

• une date de saisie.

Une note associe un étudiant et un module.
Pour un même étudiant et un même module, il ne peut y avoir qu’une seule note par session.

Règles de gestion

1. Un étudiant est identifié de manière unique par son CNE.

2. Une classe peut contenir plusieurs étudiants.

3. Un étudiant est inscrit dans une seule classe par année scolaire.

4. Une classe peut enseigner plusieurs modules.

5. Un module peut être enseigné dans plusieurs classes.

6. Les notes sont comprises entre 0 et 20.

7. Un étudiant peut avoir au maximum deux notes par module (session normale et rattrapage).

---------------------------------------------

1. Règle des Entités (DF élémentaires simples)

Toute Dépendance Fonctionnelle de type X -> Y où X est une clé (source unique) donne naissance à une Entité.

• L'identifiant : La source de la dépendance (X) devient l'identifiant de l'entité.

• Les propriétés : Le but de la dépendance (Y) devient un champ de cette entité, si il n'est pas une clé.

• Exemple : Matricule -> Nom, Prénom devient une entité Employé avec Matricule comme identifiant.

2. Règle des Associations (DF élémentaires composées)

Une Dépendance Fonctionnelle dont la source est composée de plusieurs champs (X, Y -> Z (Z peut ne pas être présent)) donne généralement naissance à une Association (ou relation).

• Les entités liées : Les champs sources (X et Y) doivent déjà être des identifiants d'entités existantes.

• La propriété de l'association : Le champ cible (Z), si il existe, devient une propriété portée par l'association elle-même.

• Cardinalités : L'entité (X) aura une cardinalité maximale de n vers l'association (car à une occurrence de X correspond plusieurs occurrences de Y). L'entité (Y) aura aussi une cardinalité maximale de n vers l'association (car à une occurrence de Y correspond plusieurs occurrences de X).

• Exemple : ID_Produit, ID_Commande -> Quantité devient une association Ligne_Commande entre les entités Produit et Commande, portant le champ Quantité.

3. Règle des Relations Binaires (DF entre identifiants)

Lorsqu'il existe une Dépendance Fonctionnelle entre deux identifiants d'entités différentes (Id_A -> Id_B) :

• Cela se traduit par une association binaire.

• Cardinalités : L'entité source (A) aura une cardinalité maximale de 1 vers l'association (car un A ne détermine qu'un seul B). L'entité cible (B) aura souvent une cardinalité maximale de n.

• Exemple : Num_Employé -> Code_Département crée une relation entre Employé et Département avec une cardinalité (1,1) côté Employé.

Voici les 3 règles d'or à retenir :

1. Transformation des Entités

Chaque Entité du MCD devient automatiquement une Table dans le MLD.

• L'Identifiant de l'entité devient la Clé Primaire (PK) de la table.

• Les Propriétés deviennent les Colonnes (attributs) de la table.

2. Relation de type (1,n) — La "Migration"

Dans une relation binaire où les cardinalités maximales sont 1 d'un côté et n de l'autre :

• La règle : La clé primaire de la table côté "n" migre comme Clé Étrangère (FK) dans la table côté "1".

• Exemple : Si un Étudiant appartient à une Classe, la clé id_classe est ajoutée dans la table ETUDIANT.

3. Relation de type (n,n) — La "Création"

Dans une relation binaire où les cardinalités maximales sont n des deux côtés (ou relation porteuse de propriétés) :

• La règle : L'association disparait et devient une nouvelle Table de jointure (ou table de relation).

• La Clé Primaire : C'est une clé composée des identifiants des entités liées.

• Les Attributs : Si l'association avait des propriétés (ex: quantité), elles deviennent des colonnes de cette nouvelle table.

Cas particulier : Relation (1,1)

• Si (1,1) des deux côtés : On fusionne généralement les deux entités en une seule table (ou on choisit un sens de migration si elles doivent rester séparées).

• Si (0,1) - (1,1) : De préférence, la clé migre de l'entité ayant la cardinalité (0,1) vers celle ayant la cardinalité (1,1).

Cet exercice porte sur l’automatisation de l’édition des certificats-souvenir des plats de Canard au
Sang.
La spécialité d’un célèbre restaurant parisien est une préparation particulière du canard appelée le
Canard au Sang. Les canards destinés à ce plat sont numérotés.
Quand une table commande un Canard au Sang, un certificat-souvenir est donné à chaque client de
la table. Sur cette attestation figure l’intitulé du restaurant, le nom du client, la date, le nom du
maître d’hôtel en charge de cette table, et des informations sur le canard qui a été servi : son
numéro, son âge et le nom de l’éleveur. Un canard est servi pour quatre personnes au maximum. Il
est possible qu’une table reçoive plusieurs canards mais un canard ne peut être servi qu’à une seule
table.

Travail à faire:

Elaborer le DD, le GDF, le MCD, ainsi que le MLD correspondant

https://drive.google.com/file/d/19r_fAjyFoMSG5AX94DBBUgzmduiRCvJd/view?usp=sharing

Soit la page HTML suivante:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Exercice Flexbox – Débutant</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f3f4f6;
      padding: 40px;
    }

    .container {
      background: #1f2937;
      height: 200px;
      padding: 16px;
    }

    .item {
      background: #e5e7eb;
      padding: 12px;
      width: 80px;
      text-align: center;
      border-radius: 6px;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <h2>Exercice Flexbox</h2>

  <div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
  </div>

</body>
</html>

CONSIGNES

1 — Activer Flexbox pour aligner les trois blocs sur une seule ligne.

2 — Centrer les blocs horizontalement dans le container.

3 — Centrer verticalement les blocs dans le container.

4 — Espacer les éléments de façon à mettre le premier bloc à gauche, le dernier à droite. L’espace est réparti entre les éléments.

5 — Faire en sorte que l’élément B prenne tout l’espace libre.

Cet exercice porte la gestion de location de véhicule.
La société loue des véhicules aux entreprises comme aux particuliers grâce à un réseau d’agences. Il y a une centaine d’agence réparties sur tout le territoire. Chaque agence est considérée comme un
centre de profit autonome et gère son personnel administratif et technique.
Les petites agences possèdent un bureau de location unique. Les grandes agences, par exemple dans les aéroports et les centres-villes, sont organisées en plusieurs offices auprès desquels les clients peuvent se rendre pour louer un véhicule. Les ffices sont sous la responsabilité d’une seule agence, et disposent de tous les véhicules de l’agence. Les véhicules sont garés dans les emplacements de parking réservés par l’agence dans des parkings publics.
Lorsqu’un client loue un véhicule, un contrat est établi à l’office où il est adressé. Le Contrat possède un numéro qui rappelle l’agence qui l’a émis. Hormis la date et l’heure, le contrat indique aussi l’immatriculation du véhicule loué, le modèle, le constructeur et le kilométrage de départ. On trouve aussi, sur le contrat, la possibilité de noter des remarques sur l’état du véhicule.
Le client signe le contrat. Un exemplaire du contrat est conservé à l’agence et l’original est remis au client avec les clefs. Le client prend possession du véhicule et part.
À la fin de la location, le client a la ossibilité de rendre le véhicule à l’agence de son choix. Il le dépose directement au parking où le technicien de service note, sur le contrat, le kilométrage de retour, la consommation de carburant et éventuellement les chocs ou rayures sur la carrosserie.
Chaque agence propose à la location les véhicules qui lui sont attribués et des véhicules qui viennent d’autres agences. Quand un véhicule est déposé par un client, il est possible qu’il l’ait loué dans une autre agence. En cas de besoin, les échanges de véhicules entre agences sont possibles. Le système à mettre en place doit permettre de connaître, à chaque instant, l’état d’un véhicule (loué ou disponible) et, s’il est disponible, dans le parking de quelle agence il se trouve.
Certains véhicules sont destinés uniquement à la location avec chauffeur.
Pour une bonne gestion du parc de véhicule, il est important d’en connaître l’année de mise en circulation.
Il est possible de louer des véhicules avec chauffeur. Les chauffeurs sont des sous-traitants de l’agence. Pour être pressenti, un chauffeur doit fournir son état civil et son permis de conduire en cours de validité. Ils peuvent conduire tous les véhicules avec chauffeur disponibles à l’agence. Un contrat avec chauffeur suppose que le véhicule soit ramené obligatoirement à l’agence d’où le
véhicule est parti. Si le client désire être déposé ailleurs, le trajet de retour à l’agence est pris en compte dans le coût de la location.

etape 1: demarrer le serveur mysql

etape 2: aller dans workench et créer la base de

données appelée ma_bd

->clique avec kle bouton droit de la souris

->create schema

etape 3: aller dans la BD et créer les tables

(dans l'onglet ma_bd, et sur l'oglet tables

=> clique par le bouton droit

=> create table)

PK: clé primaire

(double clique sur une colonne pour ecrire)

type_cle_etrangère = type_cle_primaire_referencée

double clique dans 'referenced table'

supprimer 'visible', car non supporté par maria db

- Création de tables avec contraintes

- Opérations CRUD de base

Annexe:

#########Voir les tables de la BD

show tables;

#########Voir la structure de la table suites

describe suites;

---

Travail à Faire:

Projet : "Navarco-Stock" (Gestion de Location de Matériel BTP)

Contexte : Dans le secteur du bâtiment, une entreprise ne possède pas toujours tout son matériel. Elle doit souvent louer des engins (grues, pelleteuses) à d'autres sociétés. Tu dois créer la base de données qui gère ces locations.

1. Le MLD

Voici la structure logique imposée :

• CATEGORIE (codeCat, libelle)

• ENGIN (idEngin, nom, #codeCat, etat)

• LOCATION (idLoc, dateDebut, dateFin, #idEngin, nomClient)

2. Les Consignes du Projet (Le "Cahier des Charges")

Vous devez rédiger le script SQL en respectant les règles métier suivantes :

1. Table CATEGORIE :

   • codeCat est une chaîne de 5 caractères (ex: 'GRUE', 'PELLE'); Indication: Utiliser l'opérateur 'LIKE'.

   • libelle est obligatoire.

2. Table ENGIN :

   • idEngin est un entier auto-incrémenté.

   • etat doit être obligatoirement soit 'Disponible', soit 'En Maintenance', soit 'Loué' (utiliser une contrainte CHECK).

   • Un engin appartient à une catégorie. Si on modifie le codeCat, cela doit se répercuter sur les engins (ON UPDATE CASCADE).

3. Table LOCATION :

   • idLoc est auto-incrémenté.

   • dateFin doit être supérieure ou égale à dateDebut (utiliser une contrainte CHECK).

   • Si on essaie de supprimer un Engin qui a déjà été loué, le système doit l'interdire (ON DELETE RESTRICT).

3. Travail à réaliser (Questions)

• Q1 : Écrire le script de création de la base de données navarco_stock.

• Q2 : Insérer 2 catégories ('LEV', 'TER') et 3 engins (dont une 'Grue mobile' et un 'Bulldozer').

• Q3 (Le Test) : Écrire une requête INSERT pour une location qui commence aujourd'hui et se termine hier. On doit vérifier que MySQL bloque l'insertion grâce au CHECK.

• Q4 (La Requête de Gestion) : Écrire une requête qui affiche les locations en cours.

  
  

Projet : "Librax-Evolution" (Gestion de Bibliothèque)

Scénario : L'université a commencé à gérer ses livres sur un simple fichier Excel. Vous devez créer la base de données. Au début, la structure est "bancale" (sans contraintes), puis vous devrez la transformer en une base de données professionnelle en utilisant uniquement des commandes ALTER TABLE.

1. Phase de départ : Création "Brute"

Vous devez d'abord créer les tables sans aucune clé primaire ni contrainte.

• LIVRE (codeL, titre, auteur)

• ETUDIANT (idE, nom, email)

• EMPRUNT (codeL, idE, dateSortie)

2. Phase de "professionnalisation" de la base:

Vous devez suivre cette série de modifications pour "professionnaliser" la base :

DÉFI A : Identité et Unicité

1. Ajouter une clé primaire sur codeL pour la table livres.

2. Ajouter une clé primaire sur idE pour la table etudiants, puis la rendre AUTO_INCREMENT.

3. L'université exige que chaque étudiant ait un email unique. Ajoutez la contrainte.

DÉFI B : Évolution des colonnes

1. Ajouter une colonne nbPages (INT) dans la table livres. Elle doit être placée APRÈS le titre.

2. Ajouter une colonne dateRetour dans la table emprunts.

3. Modifier la colonne titre pour qu'elle puisse accepter jusqu'à 255 caractères et qu'elle soit NOT NULL.

DÉFI C : Règles de gestion (CHECK & DEFAULT)

1. Ajouter une contrainte CHECK pour vérifier que nbPages est toujours supérieur à 0.

2. Par défaut, si la dateSortie n'est pas saisie dans la table emprunts, elle doit prendre la date du jour (CURRENT_DATE).

3. Ajouter une colonne statut dans la table livres ('Disponible', 'Emprunté', 'Perdu') avec 'Disponible' par défaut.

DÉFI D : Relations (Foreign Keys)

1. Lier emprunts à livres. Si un livre change de code, le changement doit être automatique dans les emprunts (CASCADE).

2. Lier emprunts à etudiants. On interdit la suppression d'un étudiant s'il a encore un emprunt en cours (RESTRICT).

DÉFI E : Nettoyage (DROP)

1. Finalement, l'université décide de ne plus collecter les auteurs pour les livres. Supprimez la colonne auteur.

2. Supprimez la contrainte CHECK sur les pages.

Exercice SQL : Gestion de la "Grande Bibliothèque"

Énoncé

Vous venez d'être recruté pour gérer la base de données d'une bibliothèque. Vous devez créer la table et répondre aux besoins de la directrice en utilisant les concepts SELECT, WHERE, GROUP BY, HAVING et ORDER BY.

1. Préparation des données

a. Créez une table nommée livres avec les colonnes suivantes : idL (clé primaire), titre, auteur, genre, prix_achat, et nombre_exemplaires.

b. Insérez un jeu d'au moins 3 enregistrements par table

2. Requêtes d'extraction de données à écrire

A. SÉLECTION ET FILTRAGE SIMPLE

1. Afficher tous les titres et leurs auteurs renommés en 'Écrivain'.

2. Lister les livres dont le prix d'achat est strictement supérieur à 15 DH.

3. Afficher les livres dont le genre est soit 'Roman' soit 'Science-Fiction'.

4. Trouver tous les livres dont le titre contient le mot 'Le'.

B. AGRÉGATIONS ET CALCULS

5. Quel est le prix moyen d'un livre dans cette bibliothèque ?

6. Quelle est la valeur totale financière de tous les exemplaires possédés (Prix * Nombre d'exemplaires) ?

7. Afficher le prix du livre le moins cher de la catégorie 'BD'.

C. GROUPEMENT ET FILTRAGE AVANCÉ

8. Afficher le nombre de titres par genre.

9. Afficher la somme des exemplaires par genre, mais uniquement pour les genres qui ont plus de 10 exemplaires au total.

10. Afficher le genre et le prix moyen des livres, uniquement pour les livres qui ne sont pas en rupture de stock (nombre_exemplaires > 0), et trier par prix moyen décroissant.

Énoncé

Vous gérez la base de données d'un garage. Vous devez suivre les véhicules, les mécaniciens et les interventions réalisées.

1. Préparation des données

Créez les trois tables suivantes :

1. vehicules : idV (PK), matricule, modele, annee.

2. mecaniciens : idM (PK), nom, specialite.

3. interventions : idI (PK), date_inter, id_vehicule, id_mecanicien, cout.

Insérez ce jeu de test :

• Véhicules : Une 'Dacia Sandero', une 'Golf 8', et une 'Tesla Model 3' (qui n'a aucune intervention).

• Mécaniciens : 'Ahmed' (Expert Moteur), 'Said' (Électricien), et 'Karim' (Carrossier - qui n'a aucune intervention assignée).

• Interventions : Ahmed a réparé la Dacia (500 DH). Said a réparé la Golf (1200 DH).

2. Requêtes à réaliser

A. INNER JOIN (Les liens actifs)

1. Fiche d'atelier : Afficher le matricule du véhicule, le nom du mécanicien et la date de l'intervention pour tous les travaux en cours.

2. Détail financier : Afficher le modèle du véhicule et le coût de son intervention.

3. Expertise : Afficher le nom du mécanicien et la spécialité utilisée pour chaque intervention enregistrée.

B. LEFT JOIN

4. Suivi de parc : Lister tous les véhicules avec la date de leur dernière intervention; NULL si aucune date.

5. Véhicules neufs : Trouver les matricules des véhicules qui n'ont encore subi aucune intervention.

C. RIGHT JOIN

6. Activité du staff : Lister tous les mécaniciens et le montant des interventions qu'ils ont réalisées. (Le mécanicien 'Karim' doit apparaître même s'il n'a rien fait).

7. Productivité : Trouver les mécaniciens (nom et spécialité) qui n'ont pas d'interventions.

D. JOINTURES MULTIPLES ET AGRÉGATIONS

8. Rapport Global : Afficher le nom du mécanicien, le modèle du véhicule et le coût pour chaque ligne.

9. Chiffre d'affaires par mécano : Afficher le nom de chaque mécanicien et la somme totale d'argent qu'il a rapportée au garage.

10. Statistiques par année : Afficher l'année du véhicule et le coût moyen des réparations, uniquement pour les véhicules sortis après 2020.

1. Le Setup (Création et Données)

CREATE DATABASE IF NOT EXISTS labo_recherche;

USE labo_recherche;

-- 1) Création des tables

CREATE OR REPLACE TABLE enseignants (

    id_ens INT PRIMARY KEY AUTO_INCREMENT, 

    nom VARCHAR(50),

    grade INT, -- 3: PES, 2: PH, 1: PA

    departement VARCHAR(20),

    date_embauche DATE

);

CREATE OR REPLACE TABLE chercheurs (

    id_cher INT PRIMARY KEY AUTO_INCREMENT, 

    nom_complet VARCHAR(50),

    grade INT, -- 3: PES, 2: PH, 1: PA

    specialite VARCHAR(20),

    date_embauche DATE

);

-- 2) Insertion des données (Valeurs entières pour les grades)

INSERT INTO enseignants (nom, grade, departement, date_embauche) VALUES 

('Alami Ahmed', 3, 'Informatique', '2010-03-15'), 

('Bennani Salma', 2, 'Maths', '2015-06-20'),       

('Rami Omar', 1, 'Physique', '2020-01-10'),        

('Chakiri Hanae', 2, 'Informatique', '2018-11-05');

INSERT INTO chercheurs (nom_complet, grade, specialite, date_embauche) VALUES 

('Alami Ahmed', 3, 'IA', '2010-03-15'),            

('Drissi Khalid', 1, 'Bio-tech', '2021-09-12'),    

('Chakiri Hanae', 2, 'Réseaux', '2018-11-05');

--------------------------------------------------------------

2. Énoncé

Question 1 : Affichez la liste unique de tous les noms de personnes travaillant dans le laboratoire (qu'ils soient enseignants ou chercheurs).

Question 2 : Trouvez les noms des personnes qui ont la double casquette : ils sont à la fois enseignants et chercheurs.

Question 3 : Affichez les enseignants qui ne font pas de recherche .

Question 4 : Trouvez les enseignants dont le grade est "supérieur" aux grades de quelques  chercheurs.

Question 5 : Trouvez les enseignants qui ont été embauchés après tous les chercheurs.

Question 6 : Affichez tous les chercheurs uniquement s'il existe au moins un enseignant dans le département 'Maths'.

Pour DEV102 (03/03/2026)

===============================

Gestion d'un Parc Automobile (Location de voitures).

===============================

Soit le MLD suivant :

• Vehicule (id, immatriculation, modele, date_achat)

• Location (id, #id_vehicule, date_debut, date_fin_prevue, date_retour_reelle, montant_journalier)

Écrire les requêtes SQL pour répondre aux besoins suivants :

1. Afficher la date et l'heure actuelle au format français : Lundi 02 Mars 2026 - 14:30.

2. Calculer combien de jours se sont écoulés depuis le 1er janvier de cette année.

3. Afficher l'immatriculation de chaque véhicule et son âge en années.

4. Lister les années d'achat des véhicules, sans doublons, triées de la plus récente à la plus ancienne.

5. Pour chaque location terminée (où date_retour_reelle n'est pas nulle), calculer le nombre de jours réels de location (datediff).

6. Afficher par véhicule (id_vehicule) la somme totale des revenus perçus, mais uniquement pour les véhicules dont la première location a eu lieu après 2023.

7. Afficher les véhicules dont toutes les locations ont été effectuées durant un week-end (Samedi ou Dimanche).

#autre exemple de distinct

select distinct nom, prenom from stagiaire;

LISTE DES CONCEPTS À RECHERCHER

Groupe 1 : Architecture Web

1. Architecture Client / Serveur

2. Client dans une application web

3. Serveur informatique

4. Middleware

5. Communication requête / réponse

Groupe 2 : Réseaux et Internet

6. Adresse IP

7. DNS

8. Ports réseau

9. Nom de domaine

Groupe 3 : Architectures logicielles

11. Architecture 1-tiers

12. Architecture 2-tiers

13. Architecture 3-tiers

14. Architecture n-tiers

15. Application distribuée

Groupe 4 : Architecture des applications

16. Couche Présentation (IHM)

17. Couche Traitement (Logique métier)

18. Couche Données

19. SGBD

Groupe 5 : Web et HTTP

21. Serveur Web

22. Serveur Web statique

23. Serveur Web dynamique

24. HTTP

25. URL

Groupe 6 : Technologies Web

26. Navigateur Web

27. Codes HTTP (200, 404, 500)

28. Page web statique

29. Page web dynamique

30. Serveur d’application

Groupe 7 : Introduction à PHP

31. Langage interprété

32. Langage de script

33. Histoire du PHP

34. Avantages de PHP

-> Ajout de nouvels éléments aux tableaux

-> Affichage des tableaux avec print_r()

==========================================

Contenu de base

-variables

-affichages

-concaténation

-constantes

-tableaux

1-Afficher les éléments pairs d'un tableau d'entiers.
2-Claculer et afficher le maximum des éléments d'un tableau de rééls.
3-Effectuer le tri croissant d'un tableau d'entiers.

N.B: Corrigé pour DEV102

Exercice 2:

1-Créer un tableau qui contient les notes des élèves; Chaque élève possède 3 notes.
2-Afficher la note maximale du dernier élève.
3-Afficher les moyennes générales de tous les élèves.

4-Créer un tableau qui associe à chaque étudiant défini par son CNE un tableau qui contient son nom, prénom, date de naissance, et moyenne de BAC, définis respectivement par les clés "nom", "prenom", "date_naissance", et "moyenne_bac".
5-Afficher la moyenne de l'étudiant ayant le CNE 25000.
6-Trier les étudiants par ordre de mérite (moyenne de BAC).

N.B: Corrigé pour DEV102

Exercice 3:

1-Afficher les étudiants dont le nom dépasse 3 lettres
2-Afficher les étudiants sous format CNE-X-Y avec X qui représnete les 3 premières lettres du nom, et Y qui représente les 3 premières lettres du prénomno
3-Afficher les noms et prénoms des étudiants avec le Nom en majuscules et la première lettre des prénoms en majuscule et le reste en miniscule. 

N.B: Corrigé pour DEV102

Complément:

1-Afficher les étudiants nés durant le premier semèstre de l'année.
2-Afficher les cne, noms, prénoms et ages des étudiants.

DEV102 => 31/03/2026 Corrigé le 31/03/2026

===============================

Exercice:

1 -Créer la classe Stagiaire avec les données: CNE, nom, prenom, et date_naissance, ainsi que les méthodes nom_complet() qui affiche le nom et prénom du stagiaire, renvoyer_age() qui renvoie l'age du stagiaire

2 -Créer un tableau de 10 stagiaires.

3 -Affciher les nom complets de tous les stagiaires.

4 -Afficher les données des stagiaires les plus agés.

DEV102 => FAD

===============================

Tuto =>

https://docs.google.com/document/d/1tyvIakmpu_LF2mihCXnx771rw9zzTJr1rquX35FDMOk/edit?usp=sharing

Exercice:

On considère la classe Stagiaire du padlet 'SWD: Bases POO - 1 + Exercice';

On veut sauvegarder les données des stagiaires dans un fichier texte, pour cela on implémente ce qui suit:

1. Ajouter dans la classe Stagiaire:

   • une méthode toLigneFichier() qui renvoie les données du stagiaire sous la forme :
     cne;nom;prenom;date_naissance

2. Créer une classe BDStagiaire qui contient la propriété $chemin qui représente le chemin d’un fichier texte.

3. Ajouter dans BDStagiaire les méthodes suivantes :

   • sauvegarder($stagiaires) : enregistre un tableau de stagiaires dans le fichier

   • charger() : lit le fichier et reconstitue les objets Stagiaire

   • positionActuelle($f) : renvoie la position actuelle dans le fichier

   • allerPosition($f, $position) : place le curseur à une position exacte

   • lireStagiaireA($position) : lit un stagiaire à partir d’une position donnée dans le fichier

4. Créer un tableau de 5 stagiaires.

5. Sauvegarder tous les stagiaires dans un fichier texte nommé stagiaires.txt.

6. Recharger les stagiaires depuis le fichier et afficher leurs noms complets.

7. Lire un stagiaire à partir d’une position donnée dans le fichier, puis afficher ses informations.

DEV102 => FAD

===============================

Modification du 31/03/2026

=> Ajout des opérations:

• foreach

• in_array()

• array_filter()

• array_values()

• array_map()

==========================================

Exercice — API de gestion des commandes

On développe une API PHP qui traite des commandes clients.

On dispose des données suivantes :

$commandes = [
  ["client"=>"Ali", "montant"=>1200, "statut"=>"valide"],
  ["client"=>"Sara", "montant"=>800, "statut"=>"en_attente"],
  ["client"=>"Yassine", "montant"=>1500, "statut"=>"valide"],
  ["client"=>"Lina", "montant"=>400, "statut"=>"annule"]
];

1. Ajouter une nouvelle commande pour "Omar" avec un montant de 950 et statut "valide".

2. Créer un tableau contenant uniquement les commandes validées.

3. À partir des commandes validées, créer un tableau contenant uniquement les noms des clients.

4. On reçoit une nouvelle liste :

$nouvelles = [
  ["client"=>"Imane", "montant"=>2000, "statut"=>"valide"]
];

Fusionner les deux listes.

5. Vérifier si un client nommé "Sara" existe dans la liste des clients (toutes commandes confondues).

6. À partir du tableau des commandes validées, réindexer correctement le tableau.

7. Créer un tableau contenant uniquement les montants des commandes validées.

DEV102 => YY

===============================

Exercice:

Reprendre la classe du padlet 'SWD: Bases POO - 1 + Exercice' et procéder aux amendements suivants:

• Rendre toutes les propriétés privées

• Ajouter des accesseurs et des mutateurs

• Ajouter une constante privée, nommée ISTA, positionnée à la valeur 'ISTA Errachidia'

• Ajouter la méthode afficher() qui affiche toutes les informations du stagiaire

• Créer un tableau de 10 stagiaires

• Afficher les informations des stagiaires agés de plus de 19 ans; Utiliser la fonction array_filter() pour filtrer

• Afficher les ages de tous les stagiaires; Utiliser la fonction array_map()

DEV102 => YY

===============================

Exercice:

Modifer le script réalisé dans le cadre de l'exercice du padlet "SWD: Accesseurs/Mutateurs et Constantes" pour:

• Rendre possible l'initialisation des données des stagiaires au moment de l'instanciation des objets

• Procéder à l'initialisation des données des stagiaires au moment de l'instanciation des objets

• Rendre le cne, le nom, et le prénom en lecture seule

DEV102 => FAD

===============================

DEV102 => YY

===============================

🏗️ Exercice : Sécurité et Visibilité sur le Chantier "Errachidia BTP"

Le Script de Base

class Vehicule {

    public $modele;          

    protected $matricule;      

    private $codeMoteur;       

    public function __construct($modele, $matricule, $codeMoteur) {

        $this->modele = $modele;

        $this->matricule = $matricule;

        $this->codeMoteur = $codeMoteur;

    }

   protected function get_codeMoteur() {

       return $this->codeMoteur;

    }

    public function afficherInfos() {

        echo "Modèle : $this->modele | Matricule : $this->matricule\n";

    }

}

📝 Travail à faire

• Créez une classe Utilitaire qui hérite de Vehicule

• Ajoutez une méthode externaliser_codeMoteur() qui renvoie le code du moteur à l'extérieur

• Ajoutez une méthode afficher_Utilitaire () qui affiche toutes les informations d'un Utilitaire

• Test: ajoutez une méthode tenterAccesMoteur() qui tente d'afficher $this->codeMoteur; Que se passe-t-il à l'exécution ? Expliquez ?

  
  

• Créez une classe Camion qui hérite de Vehicule

• Ajoutez une propriété publique $chargeUtile

• Ajoutez une méthode afficher_camion() publique qui affiche toues les informations du camion

• Réécrivez le constructeur pour accepter 4 paramètres : $modele, $matricule, $codeMoteur et $chargeUtile

• Indice : Utilisez parent::__construct() pour initialiser les 3 premières valeurs

• Créer un utilitaire

• Afficher son code moteur

• Afficher toutes ses informations

• Créez un camion

• Afficher toutes ses informations

• Test: Tentez de modifier les trois propriétés directement depuis l'extérieur:

$monCamion->modele = "Volvo FMX";     // Cas A

$monCamion->matricule = "1234-A-40";  // Cas B

$monCamion->codeMoteur = "V8-TURBO";  // Cas C

=> Lesquels de ces changements vont provoquer une erreur fatale ? Pourquoi ?

DEV102 => YY

===============================

Exercice : Gestion des Employés du Chantier

1. La Classe Mère : Salarie

Créez une classe Salarie avec les caractéristiques suivantes :

• Propriétés privées : $nom et $salaire.

• Constructeur : Initialise le nom et le salaire.

• Accesseurs (Getters) : Pour récupérer le nom et le salaire.

• Mutateur (Setter) : Pour modifier le salaire.

• Méthode afficher() : Affiche "Employé : [nom] | Salaire : [salaire] DH".

  
  

2. La Classe Fille : ChefChantier

Créez une classe ChefChantier qui hérite de Salarie :

• Propriété privée supplémentaire : $prime (ex: 1000 DH).

• Réécrivez (Override) le Getter du salaire : Il doit retourner le salaire de base + la prime.

• Réécrivez (Override) la méthode afficher() : Elle doit afficher "CHEF : [nom] | Total avec prime : [salaire_total] DH".

  
  

3. Travail à faire (Test)

1. Instanciez un Salarie ("Samir", 4000).

2. Instanciez un ChefChantier ("Yassine", 7000).

3. Affichez les informations des deux.

4. Modifiez le salaire du chef via le setter et vérifiez que le nouveau total (avec prime) est correct.

DEV102 => Y

===============================

DEV102 => YY

===============================

Exercice : Système de Livraison Sécurisé

Le Scénario

Vous développez un logiciel pour une entreprise de transport. Toutes les livraisons doivent être scellées de la même manière pour éviter le vol, mais chaque type de véhicule (Camion ou Drone) a sa propre façon de se déplacer.

1. La Classe Mère : Livraison

Créez une classe abstraite (ou normale) Livraison :

• Méthode Normale : seDeplacer(). Elle affiche "Le colis est en route...".

• Méthode FINALE : scellerColis(). Elle affiche "Application du sceau de sécurité DEV-2026. Interdiction de modifier ce processus !".

2. La Première Fille : LivraisonCamion

• Elle hérite de Livraison.

• Elle réécrit (override) la méthode seDeplacer() pour afficher : "Le camion roule sur l'autoroute."

• Tentative interdite : Essayez de réécrire scellerColis() pour afficher "On ferme juste la porte". (Commentez ce code pour éviter l'erreur fatale après avoir testé).

3. La Deuxième Fille : LivraisonDrone

• Elle hérite de Livraison.

• Elle réécrit (override) la méthode seDeplacer() pour afficher : "Le drone survole la ville."

• Elle utilise la méthode scellerColis() telle qu'elle est définie chez la mère.

4. Travail à faire (Test)

1. Instanciez un objet LivraisonCamion.

2. Instanciez un objet LivraisonDrone.

3. Pour chaque objet, appelez scellerColis() puis seDeplacer().

4. Vérifiez que le message de scellage est identique pour les deux, car personne n'a pu le modifier !

DEV102 => YY

===============================

Exercice : Système de Gestion des Appareils (Trackers)

Le Scénario

Dans l'application Gest-BTP , on gère différents types d'appareils de tracking. Bien que chaque modèle soit différent, tous doivent obligatoirement être capables de s'allumer et de rapporter leur niveau de batterie.

1. La Classe Abstraite : AppareilGps

Créez une classe abstraite AppareilGps :

• Propriété publique : $identifiant (IMEI ou nom).

• Constructeur : Initialise l'identifiant.

• Méthode Abstraite Protégée : activerSignal(). Elle doit retourner un string.

• Méthode Abstraite Publique : consommerEnergie($heures). Elle doit retourner un float.

2. La Classe Fille : TrackerTeltonika

• Elle hérite de AppareilGps.

• Propriété spécifique : $capaciteBatterie (ex: 500 mAh).

• Implémentation de activerSignal() : Doit retourner "Signal Teltonika activé via protocole UDP".

• Implémentation de consommerEnergie($heures) : Retourne le résultat: $heures * 0.5.

• Ajout d'argument optionnel : Modifie consommerEnergie pour ajouter un paramètre optionnel $modeEco = false. Si $modeEco est vrai, la consommation est divisée par 2.

3. La Classe Fille : TrackerSolaire

• Elle hérite de AppareilGps.

• Implémentation de activerSignal() : Doit retourner "Signal Solaire activé via protocole LoRa".

• Implémentation de consommerEnergie($heures) : Retourne toujours 0 (car il se recharge au soleil).

4. Test

1. Instanciez un TrackerTeltonika ("TELT-001", 500).

2. Instanciez un TrackerSolaire ("SOLAR-99").

3. Affichez le signal et la consommation (pour 10 heures) de chaque appareil.

4. Testez la consommation du Teltonika avec le mode Eco activé.

DEV102 => YY

===============================

Lien du guide pédagogique:

https://docs.google.com/document/d/1d20270qqd1j5yhwcc_W3nNkBLCGb2qtcrVI3N1NRiX0/edit?usp=sharing

===============================

Exercice : Gestion d’appareils connectés

Objectif

Mettre en pratique :

• les interfaces

• l’implémentation

• l’héritage de classes

• l’utilisation des objets

Énoncé

On veut modéliser un petit système d’appareils connectés.

1) Créer deux interfaces

Interface 1 : IAllumable

Elle doit contenir les méthodes suivantes :

• allumer()

• eteindre()

Interface 2 : IConnectable

Elle doit contenir les méthodes suivantes :

• connecterWifi()

• deconnecterWifi()

2) Créer une classe Lampe

Cette classe doit :

• implémenter l’interface IAllumable

• contenir un attribut marque

• avoir un constructeur pour initialiser la marque

• définir toutes les méthodes imposées par IAllumable

Les méthodes doivent simplement afficher des messages comme :

• "Lampe allumée"

• "Lampe éteinte"

Ajouter aussi une méthode :

• afficherMarque()

3) Créer une classe SmartLampe

Cette classe doit :

• hériter de la classe Lampe

• implémenter l’interface IConnectable

  
  

Les méthodes doivent afficher des messages comme :

• "SmartLampe connectée au WiFi"

• "SmartLampe déconnectée du WiFi"

Ajouter aussi une méthode :

• changerCouleur()

qui affiche par exemple :

• "Couleur changée"

4) Utilisation des classes

Dans le programme principal :

a) Créer un objet Lampe

Par exemple :

• marque : Philips

Puis :

• afficher sa marque

• l’allumer

• l’éteindre

b) Créer un objet SmartLampe

Par exemple :

• marque : Xiaomi

Puis :

• afficher sa marque

• l’allumer

• connecter au WiFi

• changer la couleur

• déconnecter le WiFi

• éteindre

DEV102 => YY

===============================

Lien du guide pédagogique:

https://docs.google.com/document/d/1ykh4bn1VWJGyXef4kzdGPw-gaSrMu4dwWh1K1JaJUfI/edit?usp=sharing

===============================

Exercice : Gestion d’un appareil intelligent

On veut modéliser un système simple d’appareils intelligents en utilisant les traits.

Partie 1 : premier trait

Créez un trait TraitAlimentation qui contient :

• Une propriété publique etat

• Une méthode allumer() qui affiche : "Appareil allumé"

• Une méthode eteindre() qui affiche : "Appareil éteint"

  
  

Partie 2 : deuxième trait

Créez un trait TraitConnexion qui contient :

• Une propriété publique wifi

• Une méthode connecter() qui affiche :
  "Connexion WiFi établie"

• Une méthode abstraite, publique et void afficherTypeConnexion()

  
  

Partie 3 : classe principale

Créez une classe Appareil qui utilise :

• TraitAlimentation

• TraitConnexion

Puis :

• Implémentez la méthode afficherTypeConnexion() qui

  affiche : "Type de connexion : WiFi"

  
  

Partie 4 : classe fille

Créez une classe SmartTV qui hérite de Appareil.

Dans cette classe :

• Redéfinir afficherTypeConnexion() pour afficher : "Type de connexion : WiFi + Ethernet"

• Ajouter une méthode changerChaine() qui affiche :
  "Chaîne changée"

  
  

Partie 5 : utilisation

Dans le programme principal :

1. Créez un Appareil, puis :

• Allumez-le

• Connectez-le

• Affichez son type de connexion

2. Créez un Smart TV

Puis :

• Allumez-le

• Connectez-le

• Affichez son type de connexion

• Changez la chaine

• Eteignez-le

DEV102 => YY

===============================

🎯 Exercice : Gestion des inscriptions à un événement tech

🧩 Contexte

Tu développes une petite application web pour gérer les inscriptions à un bootcamp de développement web.

Chaque participant doit remplir un formulaire d’inscription en ligne.

📝 Partie 1 — Formulaire HTML

Créer un formulaire de type GET permettant de collecter les informations d’un participant.

🔧 Champs à prévoir

Tu dois créer un formulaire contenant :

🔹 Informations personnelles

• Identifiant (text)

• Nom complet (text)

• Date d’inscription (date)

🔹 Choix du niveau

• Débutant

• Intermédiaire

• Avancé
  👉 (radio buttons)

🔹 Technologies à apprendre

• HTML/CSS

• JavaScript

• PHP
  👉 (checkboxes)

🔹 Ville

👉 (select avec au moins 4 villes)

🔹 Motivation

👉 (textarea)

🔹 Bouton d’envoi

👉 submit

🧠 Partie 2 — Traitement PHP

Créer une page traitement.php qui permet de récupérer les données, puis les transférer dans le fichier participants_bootcamp.txt

Exemple attendu d'une ligne du fihier participants_bootcamp.txt:

ID : 101, Nom : KARIMI FARID, Date : 2026-04-20, Niveau : Intermédiaire, Technologies : HTML/CSS & JavaScript, Ville : Meknès, Motivation : Je veux devenir développeur full stack

DEV102 => YY

===============================

🎯 Exercice : Gestion des inscriptions à un événement tech

🧩 Contexte

Tu développes une petite application web pour gérer les inscriptions à un bootcamp de développement web.

Chaque participant doit remplir un formulaire d’inscription en ligne.

L’application devra utiliser la méthode POST et manipuler un fichier texte pour enregistrer et rechercher les participants.

📝 Partie 1 — Page de menu

Créer une page menu.php qui servira de page d’accueil de l’application.

Cette page doit afficher un titre, par exemple :

Gestion des inscriptions au bootcamp

et proposer au moins deux liens ou boutons :

• Ajouter un participant

• Rechercher un participant

👉 Le lien Ajouter un participant doit mener vers la page contenant le formulaire d’inscription.
👉 Le lien Rechercher un participant doit mener vers une page permettant de rechercher un participant à partir de son identifiant.

📝 Partie 2 — Formulaire HTML

Créer une page ajoutParticipant.php contenant un formulaire de type POST permettant de collecter les informations d’un participant.

🔧 Champs à prévoir

Tu dois créer un formulaire contenant :

🔹 Informations personnelles

• Identifiant (text)

• Nom complet (text)

• Date d’inscription (date)

🔹 Choix du niveau

• Débutant

• Intermédiaire

• Avancé

👉 (radio buttons)

🔹 Technologies à apprendre

• HTML/CSS

• JavaScript

• PHP

👉 (checkboxes)

🔹 Ville

👉 (select avec au moins 4 villes)

🔹 Motivation

👉 (textarea)

🔹 Bouton d’envoi

👉 (submit)

🧠 Partie 3 — Traitement PHP

Créer une page traitement.php qui permet de récupérer les données envoyées par le formulaire avec $_POST, puis de les transférer dans le fichier participants_bootcamp.txt.

Exemple attendu d'une ligne du fichier participants_bootcamp.txt

ID : 101, Nom : KARIMI FARID, Date : 2026-04-20, Niveau : Intermédiaire, Technologies : HTML/CSS & JavaScript, Ville : Meknès, Motivation : Je veux devenir développeur full stack

📂 Partie 4 — Manipulations sur les fichiers

Compléter l’application avec les manipulations suivantes :

1) Création du fichier

Si le fichier participants_bootcamp.txt n’existe pas, il faut le créer.

2) Ajout sans écrasement

À chaque nouvelle inscription, les données doivent être ajoutées à la fin du fichier sans supprimer les anciennes.

3) Séparation des enregistrements

Ajouter une ligne de séparation entre les participants pour rendre le fichier plus lisible.

Exemple :

==================================================

4) Date et heure d’enregistrement

Ajouter automatiquement la date et l’heure de sauvegarde de l’inscription dans le fichier.

5) Lecture du fichier

Créer une page listeParticipants.php qui permet d’afficher le contenu du fichier participants_bootcamp.txt.

6) Nombre total des participants

Dans listeParticipants.php, afficher le nombre total des participants enregistrés.

7) Validation simple

Avant l’enregistrement, vérifier que les champs principaux ne sont pas vides :

• Identifiant

• Nom complet

• Date d’inscription

• Niveau

• Ville

Si un champ obligatoire est vide, afficher un message d’erreur et ne pas enregistrer.

🔎 Partie 5 — Recherche d’un participant

Créer une page rechercheParticipant.php contenant un formulaire qui permet de saisir un identifiant.

Après validation, cette page doit :

• lire le fichier participants_bootcamp.txt

• rechercher le participant correspondant à l’identifiant saisi

• afficher ses informations s’il existe

• sinon afficher le message :

Participant introuvable

🧭 Partie 6 — Navigation entre les pages

L’application doit permettre à l’utilisateur de circuler facilement entre les différentes pages.

La page menu.php doit permettre d’accéder à :

• ajoutParticipant.php

• rechercheParticipant.php

Aajouter aussi des liens de retour vers le menu dans :

• ajoutParticipant.php

• rechercheParticipant.php

• listeParticipants.php

DEV102 => YY

===============================

Exercice : Dépôt de devoir et consultation de la note

Contexte

On veut développer une petite application PHP permettant :

1. à l’étudiant de déposer son devoir ;

2. au professeur de renseigner la note dans un fichier séparé ;

3. à l’étudiant de consulter sa note plus tard.

Le devoir original ne doit pas être modifié.
La note sera enregistrée dans un fichier texte séparé associé au devoir.

Principe de fonctionnement

Exemple

L’étudiant envoie un fichier :

devoirs/devoir_cne-10000.txt

Le professeur crée ensuite un fichier séparé :

corrections/devoir_cne-10000_note.txt

Contenu possible :

note: 19.25/20
commentaire: Bon travail, devoir clair et bien structuré.

Ensuite, l’application doit pouvoir lire ce fichier de correction et afficher la note à l’étudiant.

Travail demandé

Partie 1 : Dépôt du devoir

Créer un formulaire permettant à l’étudiant de :

• saisir son nom ;

• choisir son fichier ;

• envoyer son devoir.

Contraintes :

• fichiers autorisés : pdf, docx, txt

• taille maximale : 5 Mo

• enregistrement dans le dossier devoirs/

Partie 2 : Consultation de la note

Créer un deuxième formulaire permettant à l’étudiant de :

• saisir son cne ;

• cliquer sur un bouton Consulter ma note

Le script doit alors :

1. construire le nom du fichier de correction correspondant ;

2. vérifier si ce fichier existe dans corrections/, sinon afficher le message: "correction non pas encore faite" ;

3. afficher la note et le commentaire

Partie 3 : Menu

Ajouter une page d'accueil au site avec un menu adéquat

DEV102 => Y(Y)

===============================

Ref: Exercice : Dépôt de devoir et consultation de la note

Travail à faire:

Modifier l'application de façon à:

-Permettre au professeurs de télécharger les travaux des étudiants

-Permettre aux étudiants de télécharger les fichiers de correction

DEV102 : https://docs.google.com/spreadsheets/d/1Cn88QrJ8NdVGhgjs34m8T4rAq_sLacHoz-GgUrfdiZs/edit?usp=sharing

DEV101 :

https://docs.google.com/spreadsheets/d/1r-cLrgDNQglWNkI8jBiIPcwFZzyRw4EpKYQO-7XH4qk/edit?usp=sharing

DEV102 => YN

=========================================

Exercice : Navigation intelligente avec redirections

Partie A — Menu principal

Créer une page index.php contenant :

• Espace étudiant:

  - Déposer mon devoir

  - Consulter ma note

  - Télécharger ma correction

• Espace professeur

  - Télécharger Devoirs

  - Charger Corrections

• Liens utiles

  - Ouvrir les plateforme OFPPT et w3schools dans de nouvels onglets (JavaScript)

  
  

Partie B : Espace étudiants

Après avoir saisi son cne, l'étudiant est redirigé vers une page qui présente un menu lui permettant de

1. Déposer son devoir

2. Consulter sa note

3. Télécharger sa correction

Partie B : Espace professeurs

Le professeur est directement redirigé vers une page qui présente un menu lui permettant de

1. Télécharger les devoirs des étudiants

2. Charger les corrections des étudiants

Partie C: Liens utiles

L'utilisateur est directement redirigé vers une page qui présente un menu lui montarant

1. Le bouton 'Visiter OFPPT' qui ouvre le lien https://www.ofppt.ma/ dans un nouvel onglet

2. Le bouton 'Visiter W3schools' qui ouvre le lien https://www.w3schools.com/ dans un nouvel onglet

DEV102 => NN

===============================

Ref: Exercice : Navigation intelligente avec redirections

==============================

Partie D — Personnalisation avec Cookies

Ajouter au menu principal une nouvelle rubrique :

Personnalisation

Cette partie permettra à l’utilisateur de :

• choisir une couleur d’arrière-plan

• mémoriser son nom

• afficher la date/heure de la dernière visite

Modification de la Partie A — Menu principal

Ajouter dans la page d'accueil :

Nouvelle rubrique

Personnalisation
- Personnaliser mon espace

Redirection vers :

personnalisation.php

Partie D.1 — Page personnalisation.php

Créer un formulaire permettant de :

• Activer (set/get) la fonctionnalité de la date/heure de la dernière visite

• Saisir le nom d'utilisateur

• Selectionner la couleur préférée :

bleu
vert
rouge
jaune

Bouton :

Enregistrer mes préférences

Traitement demandé

Quand l’utilisateur valide :

Créer / modifier les cookies :

nom
couleur

Durée :

1 heure

Puis rediriger vers :

personnalisation.php?msg=saved

Partie D.2 — Exploitation de la couleur

Dans toutes les pages du site :

• blue → bleu clair

• green → vert clair

• red → rouge clair

• yellow → jaune clair

• sinon → gris clair par défaut

Partie D.3 — Affichage du nom

Si cookie nom existe, afficher en haut des pages :

Bienvenue NOM

Partie D.4 — Dernière visite

Créer un cookie :

derniere_visite

À chaque chargement de page :

Si le cookie existe :

Afficher :

Dernière visite : 29/04/2026 à 18:45:10

Ensuite mettre à jour le cookie avec la date/heure actuelle

Partie D.5 — Réinitialisation

Ajouter le bouton :

Supprimer mes préférences

pour supprimer :

nom
couleur
derniere_visite

Puis rediriger vers la page d'accueil avec msg=reset

DEV102 => YN

===============================

Démo de l'app (sans utilisation de 'design arena ai'): https://drive.google.com/file/d/19TVBSz66UpW8K7yQMFhWfe6d89JCBQrQ/view?usp=sharing

===============================

Travail à faire:

Etape 1:

• Analyser l'application afin de:

  • Assimiler comment implémenter un CRUD MySQL (Ajout, Suppression, Extraction) MySQL à partir des formulaires.

  • Assimiler comment interagir avec les sessions:

    • Ouverture/Fermeture

    • Manipulation des variables de session en lecture/écriture

  • Assimiler comment manipuler les cookies:

    • Création/Remplissage/Modification

    • Suppression

    • Lecture

  • Découvrir les constantes magiques

  • Découvrir différentes méthodes d'importation

Etape 2:

[N.B: Utiliser la plateforme 'design arena ai' pour redéfinir de design de l'application d'une manière plus professionnelle]

Travail à faire:

• Implémenter une Inscription/authentification professionnelle, à travers:

  • L'ajout d'une page d'inscription qui permet d'inscrire des utilisateurs en fournissant leurs nom d'utilisateur, email, et mot de passe;

    Pour des mesures de sécurité:

    • On impose de resaisir le mot de passe et on s'assure que les deux saisies sont identiques;

    • On stocke le haché du mot de passe, au lieu de le stocker en clair

  • Lors de la pase d'authentification, la vérification de l'existence de l'utilsateur et la corespondance du mot de passe; On veillera à ce que des feedbacks adéquats soient renvoyés à l'utilisateur

• Modifier la page index.php de manière à exporter les différentes fonctionnalités dans des pages séparées;

  Pour ce faire, on développera les pages suivantes:

  • index_cli.php : affiche la liste des clients, avec pour chaque client le bouton 'Supprimer' qui permer de supprimer le client après confirmation, et le bouton 'Editer' qui mène vers la page modifier_cli.php qui affiche un formulaire pré-rempli des données du client avec le bouton 'Modifier' et le bouton 'Retour';

    De même, au dessus de la liste, à gauche on a le bouton 'Ajouter' qui mène vers la page ajouter_cli.php qui affiche un formulaire avec le bouton 'Ajouter' et le bouton 'Retour';

  • modifier_theme.php : mène vers le formulaire qui permet de changer le thème de l'application; le thème doit être appliqué à toute les pages

  On ajouter un menu qui permet d'accéder aux deux fonctionnalités : 'Gérer Clients' et 'Personnaliser Thème'

• Ajouter une page d'accueil accueil.php

• Toutes les pages possèdent le même 'header' et 'footer'

N.B : Utiliser la plateforme 'design arena ai' pour redéfinir le design de l'application

====================

Takeaway => https://trello.com/c/F25Emohs

===============================

Groupes DEV 102 =>

https://docs.google.com/spreadsheets/d/1eKRCkewt4LjL0SglRKa-DvKhXMrgLM9KMdUwFAL5fgE/edit?usp=sharing