diff --git a/README.md b/README.md new file mode 100644 index 0000000..4bd4f45 --- /dev/null +++ b/README.md @@ -0,0 +1,426 @@ +# 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 +