( بِسْمِ اللَّـهِ الرَّحْمَـٰنِ الرَّحِيمِ )
Initialisation

Journée 1

installation de VS Code sur macOS

Télécharger Visual Studio Code

  • Accédez au site officiel de VS Code : https://code.visualstudio.com/
  • Ouvrez le fichier téléchargé
  • Faites glisser l’icône Visual Studio Code dans le dossier Applications.
  • Allez dans Préférences Système > Sécurité et confidentialité > Général

    MAMP Serveur local Mac

    Rendez-vous sur le site officiel de MAMP : https://www.mamp.info/

    • Démarrer les serveurs Apache et MySQL « Dans l’interface MAMP, cliquez sur le bouton Start Servers (Démarrer les serveurs) »
    • Accéder à votre serveur local http://localhost:8888
    • Utiliser la base de données MySQL (phpMyAdmin) cliquez sur le bouton Open WebStart Page dans l’interface de MAMP – Une nouvelle fenêtre du navigateur s’ouvrira avec une page d’accueil de MAMP. Cliquez sur phpMyAdmin pour accéder à l’interface de gestion de la base de données. « Par défaut, le nom d’utilisateur pour MySQL est root et le mot de passe est également root (sauf si vous avez changé ces paramètres).

    Configurer le dossier de votre site (optionnel)

    Si vous voulez ajouter votre propre site web :

    MAMP crée un dossier appelé htdocs  /Applications/MAMP/htdocs – Créer un nouveau dossier à l’intérieur de htdocs pour votre projet web et y ajouter vos fichiers.
    Pour  accéder à un site spécifique, utilisez l’URL : http://localhost:8888/nom_du_dossier
    Configurer MAMP (optionnel)
    Si vous souhaitez modifier certains paramètres de MAMP (comme le port par défaut ou le mot de passe de la base de données), vous pouvez le faire en suivant ces étapes

    Démarrer avec un projet PHP

    • Allez dans le dossier htdocs de MAMP.
    • Créez un dossier pour votre projet (par exemple mon_site).
    • Ajoutez vos fichiers PHP et HTML dans ce dossier.
    • Ouvrez votre navigateur et accédez à l’adresse suivante pour voir votre projet en action : http://localhost:8888/mon_site

    Tester VS Code Live Server extension "HTML"

    Utilisesation

    L’extension Live Server est l’une des méthodes les plus courantes pour visualiser en temps réel vos fichiers HTML dans un navigateur tout en développant. Elle permet de lancer un serveur local et de recharger automatiquement la page chaque fois que vous effectuez des modifications dans votre code.

    Étapes pour installer et utiliser Live Server :

    1. Installer l’extension Live Server
      • Ouvrez VS Code.
      • Allez dans le menu Extensions (ou appuyez sur ⇧ + ⌘ + X sous macOS ou Ctrl + Shift + X sous Windows/Linux).
      • Recherchez Live Server et installez l’extension développée par Ritwick Dey.
    2. Ouvrir votre fichier HTML
      • Ouvrez le fichier index.html que vous souhaitez prévisualiser.
    3. Lancer le serveur local
      • Faites un clic droit sur votre fichier index.html.
      • Sélectionnez « Open with Live Server ».

    PHP Intelephense

    Intelephense est une extension très populaire pour Visual Studio Code (VS Code), spécialement conçue pour améliorer l’expérience de développement PHP. Elle fournit une suite d’outils puissants pour travailler avec le langage PHP de manière plus efficace. L’extension Intelephense offre de nombreuses fonctionnalités, telles que l’auto-complétion, la navigation dans le code, la vérification des erreurs, le formatage du code, et bien plus encore.

    Fonctionnalités principales d’Intelephense pour PHP

    1. Auto-complétion (IntelliSense) : Intelephense fournit des suggestions d’auto-complétion pour les fonctions, les variables, les classes, les méthodes, les namespaces, et bien plus. Cela vous aide à coder plus rapidement en réduisant les erreurs et en vous offrant des suggestions intelligentes.Exemple :
      • Tapez le nom d’une fonction, et Intelephense vous proposera automatiquement les arguments possibles.
    2. Navigation dans le code : Intelephense permet de naviguer facilement dans le code :
      • Go to Definition : Vous pouvez facilement vous rendre à la définition d’une fonction, d’une méthode, d’une classe, ou d’une variable en cliquant dessus tout en maintenant la touche Ctrl (ou Cmd sur Mac).
      • Find References : Trouvez toutes les occurrences d’une fonction ou variable dans votre projet.
    3. Vérification des erreurs (Linting) : Intelephense analyse votre code PHP en temps réel et affiche des erreurs, des avertissements et des suggestions pour améliorer la qualité du code. Cela vous aide à détecter des erreurs de syntaxe ou des problèmes de type.
    4. Formatage du code : Intelephense prend en charge le formatage automatique du code. Vous pouvez l’utiliser pour maintenir un style de codage cohérent dans votre projet, en respectant des normes comme PSR-2 ou PSR-12.
    5. Support pour les extensions PHP : Intelephense comprend bien de nombreuses bibliothèques PHP et frameworks populaires comme Laravel, Symfony, et WordPress, en offrant des suggestions d’auto-complétion et des informations de type pour ces bibliothèques.
    6. Support des classes et méthodes PHP : L’extension peut afficher des informations détaillées sur les méthodes et les classes dans votre code PHP, ce qui est particulièrement utile lorsque vous travaillez avec des bibliothèques externes ou des API.

    Installation de l’extension Intelephense dans VS Code

    Voici les étapes pour installer Intelephense dans Visual Studio Code :

    1. Ouvrir Visual Studio Code.
    2. Aller dans le panneau Extensions en cliquant sur l’icône des extensions sur la barre latérale gauche ou en utilisant le raccourci Ctrl+Shift+X (Windows/Linux) ou Cmd+Shift+X (Mac).
    3. Dans la barre de recherche des extensions, tapez « Intelephense ».
    4. Cliquez sur « Intelephense » dans la liste des résultats de recherche et cliquez sur le bouton Installer.

    Création mini site VS code & MAMP

    Eléments :

    • Une connexion sécurisée à un espace d’administration (avec authentification et gestion de session),
    • Une base de données MySQL ,
    • Une modélisation de la base de données (utilisateur avec un mot de passe sécurisé).
    • PHP pour le backend, MySQL pour la base de données, et MAMP comme serveur local.

    Préparation de l’environnement

    1. Lancer MAMP et démarrer les serveurs Apache et MySQL.
    2. Ouvrir Visual Studio Code (VS Code) et ouvrir un nouveau dossier pour votre projet (ex. monSite).
    3. Placer votre projet dans le dossier htdocs de MAMP pour qu’il soit accessible via l’URL localhost.

    Création de base de données MySQL et la table des utilisateurs

    Accéder à phpMyAdmin via MAMP :  Dans MAMP, cliquez sur Open WebStart Page, puis cliquez sur phpMyAdmin.
    Créer une nouvelle base de données : Dans phpMyAdmin, cliquez sur Nouvelle dans la barre latérale gauche pour créer une base de données, par exemple, admin_db.
    Créer une table users : Une fois la base de données créée, allez dans l’onglet SQL et exécutez la commande suivante pour créer la table users :
    CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(100) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    isAdmin BOOLEAN DEFAULT 0
    );
    Cette table aura trois colonnes :

    username : Le nom d’utilisateur.
    password : Le mot de passe de l’utilisateur (hached).
    isAdmin : Un champ booléen pour savoir si l’utilisateur est un administrateur.

    Ajouter un utilisateur (admin) :

    Pour ajouter un utilisateur, allez dans l’onglet SQL et exécutez cette commande pour insérer un utilisateur avec un mot de passe haché (vous pouvez utiliser password_hash() en PHP pour cela).
    INSERT INTO users (username, password, isAdmin)
    VALUES (‘admin’, ‘admin_password_hashed’, 1);

    Création du mini-site PHP

    1. Création de la structure du projet :

    Organisez les fichiers dans le dossier htdocs de MAMP comme suit :

    /monSite
    ├── /assets
    ├── /includes
    ├── /admin
    ├── index.php
    └── login.php

    2. Configuration de la base de données dans db.php :

    Créez un fichier includes/db.php pour gérer la connexion à la base de données MySQL.

    setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    } catch (PDOException $e) {
    die(« Connection failed:  » . $e->getMessage());
    }
    ?>

    3. Création de la page de connexion (login.php) :

    Créez un fichier login.php pour permettre aux utilisateurs de se connecter.

    prepare(« SELECT * FROM users WHERE username = ? »);
    $stmt->execute([$username]);
    $user = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($user && password_verify($password, $user[‘password’])) {
    $_SESSION[‘user_id’] = $user[‘id’];
    $_SESSION[‘username’] = $user[‘username’];
    $_SESSION[‘isAdmin’] = $user[‘isAdmin’];

    header(« Location: admin/index.php »);
    exit();
    } else {
    $error = « Nom d’utilisateur ou mot de passe incorrect. »;
    }
    }
    ?>

     4. Création de l’espace d’administration (admin/index.php) :

    Créez un fichier admin/index.php qui sera accessible uniquement pour les utilisateurs connectés et ayant un rôle d’administrateur.

     Bienvenue dans l’espace d’administration,  Vous êtes connecté en tant qu’administrateur.

    5. Création de la page de déconnexion (logout.php) :

    Créez un fichier logout.php pour permettre aux utilisateurs de se déconnecter.

    session_start();
    session_destroy();
    header(« Location: ../login.php »);
    exit();

    4. Sécuriser les mots de passe avec password_hash() et password_verify()
    Lors de la création des utilisateurs dans la base de données, vous devez hacher leurs mots de passe avec password_hash() pour plus de sécurité. Par exemple, lors de l’ajout de l’utilisateur admin dans phpMyAdmin, vous pouvez utiliser la fonction PHP password_hash() pour générer un mot de passe sécurisé.

    Exemple de génération d’un mot de passe sécurisé :


    Utilisez cette valeur hachée dans votre base de données pour l’utilisateur admin.

    5. Tester le site localement

    Placer votre projet dans le dossier htdocs de MAMP (ex. htdocs/monSite).
    Accéder au site via votre navigateur :
    Pour la page de connexion : http://localhost:8888/monSite/login.php
    Après la connexion avec l’utilisateur administrateur, vous serez redirigé vers l’espace d’administration.
    Si tout fonctionne, vous avez un mini-site avec un espace d’administration sécurisé.