Step 3: Styling with CSS
Here’s a sample style.css file to make your interface visually appealing:
css
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
color: #212529;
margin: 0;
padding: 0;
}
header {
background-color: #007bff;
color: white;
padding: 1em;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
.matches {
margin: 20px auto;
width: 90%;
max-width: 1200px;
}
.match-data {
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 5px;
padding: 20px;
}
Étape 4 : Récupération de données en temps réel
Pour récupérer des données sportives en temps réel, nous utiliserons une API. Inscrivez-vous pour obtenir une clé API gratuite auprès d'API-FOOTBALL ou de tout fournisseur d'API sportive.
api_handler.php :
Ce script récupère les données des matchs en direct et les formate pour le front-end.
php
$api_url,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => [
"x-rapidapi-key: $api_key",
"x-rapidapi-host: v3.football.api-sports.io"
]
]);
$response = curl_exec($curl);
curl_close($curl);
echo $response;
?>
Étape 5 : Affichage des données en temps réel
Dans votre fichier script.js, récupérez et affichez les données de manière dynamique.
javascript
document.addEventListener("DOMContentLoaded", fonction () {
const matchDataDiv = document.getElementById("match-data");
fonction asynchrone fetchMatchData() {
essayer {
const réponse = wait fetch("api_handler.php");
const data = attendre réponse.json();
renderMatches(data.response);
} attraper (erreur) {
console.error("Erreur lors de la récupération des données :", erreur);
matchDataDiv.innerHTML = "Échec du chargement des données de correspondance. Veuillez réessayer plus tard.
";
}
}
fonction renderMatches (correspondances) {
matchDataDiv.innerHTML = ""; // Efface les données précédentes
matches.forEach(match => {
const matchHTML = `
Étape 6 : Connexion des données de cotes (facultatif)
Si vous souhaitez également afficher les cotes, recherchez un fournisseur d'API qui propose des données de cotes en temps réel, tel que The Odds API.
Modifiez le fichier api_handler.php pour inclure les données de cotes en ajoutant une nouvelle requête API ou en combinant plusieurs points de terminaison.
Étape 7 : Exécuter l'application
- Démarrez votre serveur local (par exemple, en utilisant XAMPP).
- Placez votre dossier de projet dans le répertoire htdocs.
- Ouvrez index.php dans votre navigateur : localhost/project-folder/index.php
Conclusion
Félicitations! Vous venez de créer une interface de paris sportifs en temps réel en utilisant PHP, CSS et JavaScript. Cette configuration récupère les données de match en direct et met à jour dynamiquement l'interface, vous donnant une base solide pour créer un site Web de style SBOBET88.
N'hésitez pas à étendre ce projet en ajoutant une fonctionnalité de connexion utilisateur, des fonctionnalités de paris ou des analyses avancées. Bon codage ! ?
