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

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 :

/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 :

php/database.php

L'utilisation de PDO permet d'éviter de multiplier les connexions dans les différents scripts PHP.

Exemple de principe :

$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 :

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 :

┌──────────────────────────────────────────────────────────────┐
│  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 :

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.

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 :

charge la page ;
récupère les données nécessaires ;
construit le bandeau ;
lance l'animation ;
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 :

<div class="flex items-center">

ou :

<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 :

php/database.php

Les fonctions de sécurité sont séparées dans :

php/securite/

avec notamment :

users.php
create.php
password.php
status.php

Le système d'authentification utilise une table login.

Structure actuelle :

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 :

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 :

| 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 :

<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 :

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

                  ┌──────────────┐
                  │    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