GF/README.md

# 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**