Site Giraud-Finance V1.10 + README

2026-08-21 16:41:15 +00:00
parent 8644e105b0
commit a6c56fd8d5
1 changed files with 426 additions and 0 deletions
@@ -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
+<div class="flex items-center">
+```
+
+ou :
+
+```html
+<footer class="fixed bottom-0 w-full">
+```
+
+Les classes Tailwind permettent notamment de gérer :
+
+* dimensions
+* espacements
+* couleurs
+* positionnement
+* responsive design
+* affichage du footer
+* éléments du ticker
+
+---
+
+# Sécurité
+
+Les accès à la base de données sont regroupés dans :
+
+```text
+php/database.php
+```
+
+Les fonctions de sécurité sont séparées dans :
+
+```text
+php/securite/
+```
+
+avec notamment :
+
+```text
+users.php
+create.php
+password.php
+status.php
+```
+
+Le système d'authentification utilise une table `login`.
+
+Structure actuelle :
+
+```text
+login
+├── id
+├── nom
+├── pass
+├── actif
+├── dernier_login
+├── updated_at
+└── created_at
+```
+
+Le mot de passe minimum utilisé par le système est de **4 caractères**.
+
+---
+
+# JavaScript
+
+Les scripts JavaScript sont placés dans :
+
+```text
+js/
+```
+
+Le principe est de conserver dans les fichiers JavaScript :
+
+* manipulation du DOM
+* récupération des données
+* animation du bandeau
+* gestion des événements
+* actualisation périodique
+
+Le HTML reste ainsi principalement consacré à la structure de la page.
+
+---
+
+# Principe du ticker
+
+Le ticker peut être représenté comme une longue ligne horizontale :
+
+```text
+| ACTION 1 | ACTION 2 | ACTION 3 | ACTION 4 | ACTION 5 | ...
+<------------------------------------------------------------>
+```
+
+Lorsque la fin de la ligne arrive, les éléments sont répétés afin de créer un défilement continu.
+
+Le principe permet d'éviter une coupure visible lorsque le premier élément revient à l'écran.
+
+---
+
+# Footer
+
+Le bandeau est placé dans le footer afin de rester visible indépendamment du contenu principal.
+
+Structure simplifiée :
+
+```html
+<body>
+
+    <main>
+        <!-- Contenu principal -->
+    </main>
+
+    <footer>
+        <!-- Bandeau boursier -->
+    </footer>
+
+</body>
+```
+
+Le footer peut être positionné en bas de la fenêtre selon la mise en page utilisée.
+
+---
+
+# Organisation recommandée
+
+Une organisation claire du projet permet de conserver une séparation entre les différentes fonctions :
+
+```text
+projet/
+│
+├── html/
+│   ├── index.php
+│   └── securite.html
+│
+├── js/
+│   ├── app.js
+│   └── securite.js
+│
+├── php/
+│   ├── database.php
+│   │
+│   └── securite/
+│       ├── users.php
+│       ├── create.php
+│       ├── password.php
+│       └── status.php
+│
+└── README.md
+```
+
+---
+
+# Flux général de l'application
+
+```text
+                  ┌──────────────┐
+                  │    MySQL     │
+                  └──────┬───────┘
+                         │
+                         ▼
+                  ┌──────────────┐
+                  │     PHP      │
+                  │     PDO      │
+                  └──────┬───────┘
+                         │
+                         ▼
+                  ┌──────────────┐
+                  │  JavaScript  │
+                  └──────┬───────┘
+                         │
+             ┌───────────┴───────────┐
+             ▼                       ▼
+       Affichage actions        Bandeau scroll
+```
+
+---
+
+# Évolution possible
+
+L'architecture permet d'ajouter progressivement de nouvelles fonctionnalités sans modifier profondément le système existant.
+
+Par exemple :
+
+* ajout de nouveaux indices
+* ajout de nouvelles actions
+* affichage des variations
+* affichage du dernier cours
+* volume
+* couleur selon la variation
+* filtrage par indice
+* affichage/masquage d'une action
+* mise à jour automatique des cotations
+* pages détaillées pour chaque action
+
+---
+
+# Objectif
+
+L'objectif du projet est de disposer d'une **interface boursière légère, rapide et dynamique**, capable d'afficher les marchés et leurs composants tout en conservant une architecture PHP/JavaScript/MySQL simple à maintenir.
+
+Le bandeau défilant constitue un élément permanent de l'interface et permet d'afficher rapidement les informations importantes sur les actions suivies.
+
+---
+
+## Auteur
+
+Projet personnel de suivi et d'affichage des marchés financiers.
+
+Technologies principales :
+
+**PHP · JavaScript · MySQL · PDO · HTML · Tailwind CSS**