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;
}
الخطوة 4: جلب البيانات في الوقت الحقيقي
لجلب البيانات الرياضية في الوقت الفعلي، سنستخدم واجهة برمجة التطبيقات. قم بالتسجيل للحصول على مفتاح API مجاني من API-FOOTBALL أو أي مزود API رياضي.
api_handler.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;
?>
الخطوة 5: عرض البيانات في الوقت الحقيقي
في ملف script.js، قم بإحضار البيانات وعرضها ديناميكيًا.
جافا سكريبت
document.addEventListener("DOMContentLoaded"، function () {
const matchDataDiv = document.getElementById("match-data");
وظيفة غير متزامنة fetchMatchData() {
يحاول {
استجابة ثابتة = انتظار الجلب("api_handler.php");
بيانات ثابتة = انتظار الاستجابة.json();
renderMatches(data.response);
} التقاط (خطأ) {
console.error("حدث خطأ أثناء جلب البيانات:"، خطأ)؛
matchDataDiv.innerHTML = "فشل تحميل بيانات المطابقة. يرجى المحاولة مرة أخرى لاحقًا.
";
}
}
وظيفة renderMatches(matches) {
matchDataDiv.innerHTML = ""; // مسح البيانات السابقة
match.forEach(match => {
مباراة ثابتةHTML = `
الخطوة 6: توصيل بيانات الاحتمالات (اختياري)
إذا كنت تريد أيضًا عرض الاحتمالات، فابحث عن موفر واجهة برمجة التطبيقات (API) الذي يقدم بيانات الاحتمالات في الوقت الفعلي، مثل The Odds API.
قم بتعديل api_handler.php ليشمل بيانات الاحتمالات عن طريق إضافة طلب API جديد أو دمج نقاط نهاية متعددة.
الخطوة 7: تشغيل التطبيق
- قم بتشغيل خادمك المحلي (على سبيل المثال، باستخدام XAMPP).
- ضع مجلد مشروعك في دليل htdocs.
- افتح ملف Index.php في متصفحك: localhost/project-folder/index.php
خاتمة
تهانينا! لقد قمت للتو بإنشاء واجهة للمراهنات الرياضية في الوقت الفعلي باستخدام PHP وCSS وJavaScript. يقوم هذا الإعداد بجلب بيانات المباراة المباشرة وتحديث الواجهة ديناميكيًا، مما يمنحك أساسًا متينًا لإنشاء موقع ويب على طراز SBOBET88.
لا تتردد في توسيع هذا المشروع عن طريق إضافة وظيفة تسجيل دخول المستخدم، أو ميزات الرهان، أو التحليلات المتقدمة. ترميز سعيد! ?
