# Site boursier — Affichage des actions Application web permettant d'afficher les actions et leurs informations boursières dans une interface simple et dynamique. Le projet utilise **PHP, JavaScript, HTML, Tailwind CSS et MySQL**. Une partie importante de l'interface est constituée d'un **bandeau défilant d'actions**, affiché en bas de page dans le footer. --- ## Fonctionnalités * Affichage des actions depuis la base de données MySQL * Utilisation de PHP avec PDO pour l'accès à la base * Affichage dynamique des données en JavaScript * Bandeau horizontal défilant en continu * Affichage des informations boursières dans le bandeau * Mise à jour périodique des données * Interface responsive * Utilisation de Tailwind CSS * Séparation entre : * interface HTML/PHP * logique JavaScript * accès à la base de données * sécurité --- # Technologies ## Frontend * HTML5 * JavaScript * Tailwind CSS ## Backend * PHP * PDO ## Base de données * MySQL / MariaDB --- # Architecture L'organisation générale du projet est basée sur une séparation entre l'affichage, le JavaScript et le PHP. Exemple : ```text /html/ index.php securite.html /js/ app.js securite.js /php/ database.php securite/ users.php create.php password.php status.php ``` Les fichiers peuvent être adaptés à l'organisation définitive du site. --- # Connexion à MySQL La connexion à la base de données est centralisée dans : ```text php/database.php ``` L'utilisation de PDO permet d'éviter de multiplier les connexions dans les différents scripts PHP. Exemple de principe : ```php $pdo = new PDO( $dsn, $username, $password, [ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC ] ); ``` Les requêtes utilisent des requêtes préparées lorsque des paramètres utilisateur sont impliqués. --- # Affichage des actions Les informations affichées proviennent de la base MySQL. Une action peut notamment être identifiée par : * son indice * son nom * son ISIN * son symbole * son état actif * son état d'affichage Exemple de structure : ```text indice nom isin symbole actif afficher ``` Le champ `afficher` permet notamment de déterminer quelles actions doivent apparaître dans le bandeau. --- # Bandeau défilant Le site comporte un bandeau horizontal situé dans le footer. Le principe est : ```text ┌──────────────────────────────────────────────────────────────┐ │ CAC40 │ AIR LIQUIDE +0.42% │ LVMH -0.31% │ ORANGE ...│ └──────────────────────────────────────────────────────────────┘ ← défilement → ``` Le bandeau défile automatiquement de manière continue. L'utilisateur n'a pas besoin d'interagir avec celui-ci. --- # Principe du scroll Le défilement est réalisé côté navigateur avec JavaScript/CSS. Le JavaScript récupère les données puis construit dynamiquement les éléments du ticker. Le principe général est : ```text MySQL ↓ PHP / PDO ↓ Données des actions ↓ JavaScript ↓ Bandeau HTML ↓ Animation CSS ``` --- # Mise à jour des données Les données affichées peuvent être actualisées périodiquement sans recharger toute la page. Le principe retenu est une actualisation JavaScript régulière, par exemple toutes les **10 secondes**. ```javascript setInterval(() => { chargerActions(); }, 10000); ``` L'actualisation concerne uniquement les données nécessaires au bandeau. Cela évite de recharger complètement la page. --- # Performance Le site est conçu pour éviter les traitements inutiles. Le navigateur : 1. charge la page ; 2. récupère les données nécessaires ; 3. construit le bandeau ; 4. lance l'animation ; 5. actualise périodiquement les données. L'animation du scroll est réalisée côté client afin de ne pas solliciter inutilement PHP ou MySQL pendant le déplacement. --- # Tailwind CSS Tailwind CSS est utilisé pour la mise en forme de l'interface. Exemple : ```html
``` ou : ```html