DEV FRONT END

Cours de Julie Chaumard 25/11/2024

Nom de domaine
  • Rechercher un nom de domaine pour notre futur application sur OVH
  • Peut-être existe-t-il une extension banque ?

Création d’un site internet : les dépendances
MOTEUR DE TEMPLATE
PHP
🍍

La dernière version stable de PHP est la 8.4.1 du 21 novembre 2024

INSTALLATION
💡

Ce tuto donne la procédure d’installation sur un ordinateur Windwos

💡
Étapes pour installer phpMyAdmin via XAMPP
  1. Télécharger XAMPP :
    • Téléchargez la version appropriée pour votre système (Windows 32 bits ou 64 bits).
    • Pendant l'installation, assurez-vous de sélectionner ApacheMySQL et phpMyAdmin.
  1. Installer XAMPP
    • Exécutez le fichier d'installation téléchargé.
    • Lors de l'installation :
      • Choisissez les composants nécessaires (par défaut : Apache, MySQL, PHP, et phpMyAdmin suffisent pour un environnement basique).
      • Sélectionnez un dossier d'installation (par défaut, C:\xampp est recommandé).
    • Terminez l’installation en suivant les instructions.
  1. Lancer XAMPP :
    • Ouvrez le Panneau de configuration XAMPP (xampp-control.exe) situé dans le dossier d'installation
    • Démarrez les modules nécessaires en cliquant sur "Start" à côté de chaque module :
      • Apache (serveur web).
      • MySQL (base de données).
  1. Accéder à phpMyAdmin :
    • Une fois Apache et MySQL en cours d'exécution, ouvrez un navigateur et entrez l'URL suivante :
      http://localhost/
      http://localhost/phpmyadmin
    • phpMyAdmin devrait s'ouvrir et afficher une interface pour gérer vos bases de données MySQL.
Configuration de XAMPP
  • VOIR LA VERSION

    Dans le dossier c:\xampp ouvrir le fichier readme_en.txt. Première ligne : 8.2.12

  • MOT DE PASSE ROOT PHPMYADMIN

    L'utilisateur par défaut est root et le mot de passe est vide (modifiable dans le fichier de configuration)

    Si vous souhaitez définir un mot de passe pour l'utilisateur root (ou pour d'autres utilisateurs) :

    1. Dans phpMyAdmin (http://localhost/phpmyadmin), allez dans l'onglet Utilisateurs et modifiez le mot de passe de l'utilisateur root.
    1. Une fois cela fait, mettez à jour le fichier de configuration de phpMyAdmin pour que la connexion fonctionne correctement :
      • Ouvrez le fichier config.inc.php de phpMyAdmin (généralement situé dans le dossier C:\xampp\phpMyAdmin).
      • Recherchez la ligne avec $cfg['Servers'][$i]['password'] et ajoutez le mot de passe que vous avez défini.
  • PORTS
    • APACHE

      Dans le fichier : C:\xampp\apache\conf\httpd.conf vérifier et/ou modifier le port en cherchant Listen :

      Listen 80

      Si modification en 8080 par exemple il faudra accédez ensuite au serveur avec http://localhost:8080 en précisant le numéro du port

    • MySQL

      Configuration dans : C:\xampp\mysql\bin\my.ini. Vous pouvez changer le port de MySQL qui est à 3306 par défaut.

  • TAILLE DES FICHIERS TÉLÉCHARGÉ

    Dans le fichier : C:\xampp\php\php.ini, modifiez les paramètres comme la taille maximale des fichiers téléversés :

    upload_max_filesize = 50M
  • ACTIVER LA RÉÉCRITURE D’URL SUR APACHE

    Assurez-vous que le module mod_rewrite est activé sur Apache. Voici comment vérifier cela sous MAMP :

    1. Ouvrez le fichier httpd.conf :
      • Dans XAMPP, ce fichier se trouve généralement dans C:\xampp\apache\conf\httpd.conf.
      • ou bien depuis le panneau de configuration XAMPP dans le bouton “Config” en face du service Apache
    1. Recherchez et dé commentez mod_rewrite :
      • Recherchez la ligne suivante dans le fichier et upprimez le # au début de la ligne pour activer le module ::
        #LoadModule rewrite_module modules/mod_rewrite.so
    1. Activer les fichiers .htaccess :
      • Dans le même fichier, recherchez la directive AllowOverride et assurez-vous qu’elle est définie sur All pour votre répertoire racine. Par exemple :
        <Directory "c:\xampp\htdocs\youngbank">
            AllowOverride All
            Require all granted
        </Directory>
    1. Redémarrez Apache :
      • Retournez dans XAMPP et redémarrez les serveurs pour appliquer les modifications.

INSTALLER VOTRE PROJET
  • Placez vos fichiers dans le dossier C:\xampp\htdocs\monprojet
    • Si vous avez un projet nommé youngbank, placez-le dans C:\xampp\htdocs\youngbank
    • Accédez au projet via http://localhost/youngbank.
  • Voici l’arborescence du projet YoungBank
    /youngbank
        /assets
            /css
                |-- footer.css
                |-- main.css
            /images
                /icones
        /functions
            |-- send_message.php
        /page_templates 
            |-- accueil.php
            |-- mentions_legales.php
            |-- contact.php
        /template_parts
            |-- head.php
            |-- footer.php

    Si vous voulez une URL http://localhost/youngbank/accueil au lieu de http://localhost/youngbank/page_templates/accueil.php), ajoutez un fichier .htaccess dans le dossier youngbank avec le contenu suivant :

    • Règle de réécriture dynamique qui permet de créer une logique générique qui redirige automatiquement toutes les URLs propres vers leurs fichiers correspondants
      • Supposons que chaque page de votre site correspond à un fichier PHP dans le dossier /page_templates. Vous voulez que :
        • http://localhost/youngbank/accueil charge page_templates/accueil.php
        • http://localhost/youngbank/contact charge page_templates/contact.php
      • Voici le fichier htaccess avec la règle dynamique
        # Activer la réécriture d'URL
        RewriteEngine On
        
        # Exclure le fichier send_message.php de la réécriture
        RewriteCond %{REQUEST_URI} !^/functions/send_message\.php$
        
        # Ne pas réécrire les requêtes pour les fichiers dans /assets
        RewriteCond %{REQUEST_URI} !^/assets/
        
        # Exclure les fichiers statiques (CSS, JS, images)
        RewriteCond %{REQUEST_URI} !\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|otf)$ [NC]
        
        
        # Vérifie si le fichier ou le répertoire existe, sinon applique la règle de réécriture
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        
        # réécriture dynamique
        # Capture toute URL sous la forme http://localhost/youngbank/something et redirige vers page_templates/something.php
        RewriteRule ^(.+)$ page_templates/$1.php [L]
        
        # Gérer les sous-dossiers (comme /budget/saisie)
        RewriteRule ^budget/saisie/(.+)$ page_templates/budget/saisie/$1.php [L]
        
        # Rediriger vers une page d'erreur personnalisée si le fichier n'existe pas
        ErrorDocument 404 /page_templates/404.php
        • Il faut maintenant créez un fichier 404.php dans /page_templates pour afficher un message d’erreur.
PROJET DE SITE WEB
Récupérer le projet du site sur le Drive
  • le récupérer et mettre les fichiers dans htdocs de XAMPP
HTML / CSS
  1. Corriger le code HTML / CSS du projet récupéré sur le Drive.

    Ce code a été généré par ChatGPT

  1. Modifier le CSS dans Chrome pour reporter les modifications dans les fichiers du projet pour les sauvegarder.
  1. Mettre en ligne le projet modifié via le logiciel de FTP (je le fais avec vous).

    Je vous fournis un domaine et un hébergement pour le temps de la formation.

💚

Agence digitale Parisweb.art
Tout savoir sur Julie, notre directrice de projets digitaux :
https://www.linkedin.com/in/juliechaumard/