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;
}
Schritt 4: Echtzeitdaten abrufen
Um Echtzeit-Sportdaten abzurufen, verwenden wir eine API. Melden Sie sich für einen kostenlosen API-Schlüssel von API-FOOTBALL oder einem anderen Sport-API-Anbieter an.
api_handler.php:
Dieses Skript ruft Live-Spieldaten ab und formatiert sie für das Frontend.
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;
?>
Schritt 5: Echtzeitdaten anzeigen
In Ihrer Datei „script.js“ können Sie die Daten dynamisch abrufen und anzeigen.
Javascript
document.addEventListener("DOMContentLoaded", function () {
const matchDataDiv = document.getElementById("match-data");
asynchrone Funktion fetchMatchData() {
versuchen {
const Antwort = Warten auf fetch("api_handler.php");
const data = Warten auf Antwort.json();
renderMatches(data.response);
} Catch (Fehler) {
console.error("Fehler beim Abrufen der Daten:", Fehler);
matchDataDiv.innerHTML = "Match-Daten konnten nicht geladen werden. Bitte versuchen Sie es später noch einmal.
";
}
}
Funktion renderMatches(matches) {
matchDataDiv.innerHTML = ""; // Vorherige Daten löschen
match.forEach(match => {
const matchHTML = `
Schritt 6: Quotendaten verbinden (optional)
Wenn Sie auch Quoten anzeigen möchten, suchen Sie sich einen API-Anbieter, der Echtzeit-Quotendaten anbietet, wie zum Beispiel The Odds API.
Ändern Sie die Datei api_handler.php, um Quotendaten einzuschließen, indem Sie eine neue API-Anfrage hinzufügen oder mehrere Endpunkte kombinieren.
Schritt 7: Ausführen der Anwendung
- Starten Sie Ihren lokalen Server (z. B. mit XAMPP).
- Platzieren Sie Ihren Projektordner im htdocs-Verzeichnis.
- Öffnen Sie index.php in Ihrem Browser: localhost/project-folder/index.php
Abschluss
Glückwunsch! Sie haben gerade eine Echtzeit-Schnittstelle für Sportwetten mit PHP, CSS und JavaScript erstellt. Dieses Setup ruft Live-Spieldaten ab und aktualisiert die Benutzeroberfläche dynamisch, sodass Sie eine solide Grundlage für die Erstellung einer Website im SBOBET88-Stil erhalten.
Sie können dieses Projekt gerne erweitern, indem Sie Benutzeranmeldefunktionen, Wettfunktionen oder erweiterte Analysen hinzufügen. Viel Spaß beim Codieren! ?
