اذهب إلى المحتوى

أساسيات بناء الجداول في HTML


ابراهيم الخضور

يقدِّم هذا المقال الأساسيات اللازمة لبناء جداول HTML، إذ يغطي مفاهيم مثل الصفوف والأعمدة والخلايا والترويسات وكيفية ضبط الخلايا لتمتد على عدة أعمدة وصفوف، كما يعلمك طريقة تجميع الخلايا في العمود نفسه لتنسيقها معًا.

ما هو الجدول؟

الجدول هو بنية لهيكلة البيانات على صورة صفوف rows وأعمدة column -أي بيانات مجدولة- لتسهيل عملية البحث عن القيم التي تبدي ترابطًا فيما بينها مثل ربط الأشخاص بأعمارهم أو بالأيام التي يعملون فيها أسبوعيًا أو بأيام التدريب في النادي.

مثال عن شكل جدول

مثال عن شكل جدول منسق

استُخدِمت الجداول بكثرة ومنذ زمن بعيد، وتقدِّم الصورة التالية دليلنا على ذلك، فهي مستند لعملية إحصاء في الولايات المتحدة يعود إلى عام 1800:

مستند لعملية إحصاء في الولايات المتحدة في 1800

وبالتالي ليس غريبًا أن يهتم مخترعو HTML بإيجاد وسائل لهيكلة بيانات الويب على هيئة جداول.

كيف يعمل الجدول؟

الغاية من الجدول واضحة، إذ يسهِّل استخدام الجداول تفسير المعلومات بالربط البصري بين ترويسة عمود وترويسة صف، ولنلق نظرةً على الجدول التالي باحثِين عن كوكب غازي ضخم شبيه بالمشتري Jovian له 62 قمرًا، إذ يمكنك إيجاد الكوكب المطلوب بالربط بين العمود الصحيح و الصف الصحيح.

عندما تُنجز الجداول في HTML بالصورة الصحيحة، سيسهل على تقنيات الوصول السهل مثل قارئات الشاشة التعامل مع المحتوى الذي تقدِّمه، أي ينبغي أن يُحسِّن استخدام الجداول تجربة الأشخاص ذوي الإعاقة البصرية وسليمي البصر على حد سواء.

تنسيق الجداول

ألق نظرةً على الجدول السابق نفسه لكن من خلال مثال مباشر على جيت-هاب، ولاحظ أنّ هذا الأخير أسهل قراءةً من الجدول الذي عرضناه في المقال، وذلك لأننا طبقنا أدنى درجات التنسيق عند بنائه موازنةً بنسخة جيت-هاب.

لا نخفيك سرًا أنّ الجداول التي تتمتع بمستوى تنسيق CSS رفيع أنها أكثر تأثيرًا في الويب، لهذا لا بد من الاهتمام جيدًا بهيكلة البيانات في جداول HTML بالإضافة إلى التنسيق الجيد، لكننا سنركز في سلسلة المقالات هذه على الجزء المتعلق بلغة HTML فقط، إذ سنزود الجداول في هذه السلسلة بالحد الأدنى من تنسيقات CSS التي تُسهِّل قراءة محتوياتها موازنةً بالجداول غير المنسقة، كما يمكنك تنزيل ملف CSS و قالب HTML الذي يُستخدم لتطبيق التنسيقات من المستودع المخصص على جيت-هاب، إذ سيمنحك هذان الملفان نقطة انطلاق جيدة عند العمل على جداول HTML.

ما الحالات التي لا ينبغي فيها استخدام جداول HTML؟

تُستخدَم الجداول لعرض البيانات القابلة للجدولة فهمي مصممة لهذا الغرض، كما يستخدِمها البعض أيضًا في تخطيط صفحات الويب مثل أن يضم أحد الصفوف الترويسة وآخر يضم أعمدة المحتوى الرئيسي وآخر للتذيل، وهذا أمر خاطئ كليًا، وقد استُخدمت هذه الطريقة في تخطيط الصفحات فيما مضى عندما كان دعم تنسيق CSS في المتصفحات المختلفة متفاوتًا وسيئًا، لكنها أقل انتشارًا في أيامنا هذه، إلا أنك قد تراها بين الفينة والأخرى.

إذًا نختصر فنقول: يُعَدّ استخدام تخطيط الجداول بدلًا من تقنيات تخطيط CSS فكرةً سيئةً، وإليك الأسباب الرئيسية:

  1. يؤثر تخطيط الجدول على سهولة وصول ذوي المشاكل البصرية: تفسِّر قارئات الشاشة التي يستخدمها فاقدِي البصر وسوم العناصر الموجودة في صفحة HTML وتقرأ محتوياتها، وطالما أنّ الجدول ليس الأداة الصحيحة لتخطيط الصفحة وأنّ توصيفه أكثر تعقيدًا من تقنيات تخطيط CSS، فسيربك مستخدِميها ما تنطقه تلك القارئات.
  2. ينتج عن الجداول وسومًا مختلطةً: تضم الجداول هيكليةً أعقد من تلك المستخدَمة عادةً في تخطيط الصفحة، وقد يزيد ذلك من صعوبة كتابة الشيفرة وصيانتها وتنقيحها.
  3. الجداول غير متجاوبة تلقائيًا: إذا استخدمت العناصر المناسبة مثل <header> أو <article> أو <div> أو <section>، فسيكون عرضها 100% من عرض العنصر الأب تلقائيًا، ويقاس في المقابل عرض الجداول افتراضيًا وفقًا لحجم محتواها، لذلك يحتاج الأمر إلى قياسات أخرى ليعمل تخطيط الصفحة جيدًا على الأجهزة المختلفة.

تطبيق: إنشاء جدول

تحدثنا طويلًا عن المفهوم النظري وحان الوقت لنبني جدولًا بسيطًا:

  1. انسخ الملفين blank-template.html و minimal-table.css إلى حاسوبك وضعهما في مجلد جديد.
  2. يُوضع محتوى كل جدول بين وسمَي البداية والنهاية للعنصر <table>، لذلك ضع عنصرَي الجدول داخل جسم ملف HTML.
  3. تُعَدّ الخلية أصغر حاوية ضمن الجدول وننشئها باستخدام العنصر <td> اختصارًا لبيانات جدول table data، ولنضف الشيفرة التالية داخل العنصر <table>:
<td>Hi, I'm your first cell.</td>
  1. انسخ الشيفرة السابقة ثلاث مرات إضافية إذا أردت تكوين صف من أربعة خلايا:
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>

يمثِّل كل عنصر <td> خليةً واحدةً، وتمثِّل هذه العناصر بمجموعها الصف الأول الذي يكبر بإضافة عناصر جديدة، ولإنهاء الصف الأول والانتقال إلى الصف الثاني نستخدِم العنصر <tr> اختصارًا لصف جدول table row:

  1. ضع الخلايا الأربعة التي أنشأتها سابقًا ضمن وسمَي البداية والنهاية للعنصر <tr>:
<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>
  1. نكون بهذا الشكل قد أنشأنا الصف الأول، ولا بدّ من تغليف خلايا جديدة <td>ضمن عنصر <tr> جديد:

نتيجة العمل

لا بدّ أن يظهر الجدول كما يلي:

ملاحظة: يمكنك إيجاد المثال السابق بصيغته النهائية ضمن المستودع المخصص له على جيت-هاب.

عناصر ترويسة جدول

لنركِّز الآن على ترويسات الجدول، وهي خلايا خاصة تلاحظها في بداية الصف أو العمود وتحدد طبيعة البيانات التي يضمها كما في الخليتين Person و Age في مثالنا الأول، ولتوضيح فائدة الترويسات سنلقي نظرةً على هذا المثال:

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

يصيّر المتصفح الشيفرة السابقة إلى الجدول التالي:

إنّ المشكلة في هذا الجدول هي صعوبة الوصول إلى البيانات المطلوبة كما ينبغي، على الرغم من وضوح الغاية منه، لكن إذا برزت ترويسات الأعمدة والصفوف بصورة ما، فسيتحسن الوضع.

تطبيق: ترويسات الجداول

سنحاول في هذا التطبيق تحسين الجدول السابق:

  1. احفظ نسخةً عن الملفين dogs-table.html و minimal-table.css في مجلد جديد على حاسوبك، إذ يحتوي ملف HTML على المعلومات ذاتها التي يعرضها الجدول السابق.
  2. استخدم العنصر <th> -اختصارًا لترويسة جدول table header- لتمييز الخلية الأولى على أنها ترويسة دلاليًا وبصريًا، إذ يعمل هذا العنصر بالطريقة نفسها التي يعمل بها العنصر <td> إلا أنه يعرِّف ترويسةً وليس خليةً عاديةً. انتقل إذًا إلى ملف HTML واستبدل العناصر <th> بكل العناصر <td> التي تحيط بخلايا الترويسة.
  3. احفظ التغييرات التي أجريتها على ملف HTML ثم حمّله في المتصفح وستلاحظ كيف ستبدو الخلايا الأولى على أساس ترويسات.

ملاحظة: يمكنك الاطلاع على الملف بشكله النهائي على جيت-هاب، كما يمكنك الاطلاع على شيفرته المصدرية.

ما هي فوائد الترويسات؟

جاوبنا بالفعل على جزء من هذا السؤال، إذ يسهِّل استخدامها استخلاص المعلومات ويحسِّن مظهر الجدول عمومًا.

ملاحظة: تمتلك ترويسات الجداول تنسيقًا افتراضيًا محددًا، إذ تُكتَب بخط ثخين وتتوضَّع في مركز الخلية حتى ولو لم تطبق بنفسك أية تنسيقات، وذلك لتمييزها.

تمتلك الترويسات فوائدًا إضافيةً، إذ يسمح لك استخدام السمة scope -التي سنتعرف إليها لاحقًا- بدعم الوصول السهل، وذلك بربط كل ترويسة بكل البيانات التي يضمها الصف نفسه أو العمود، إذ ستتمكن عندها قارئات الشاشة من قراءة كامل الصف أو العمود، وهذا بالطبع أكثر فائدةً.

تمكين الخلايا من الامتداد على عدة صفوف أو خلايا

قد نرغب أحيانًا في تمديد الخلايا لتشمل عدة صفوف أو أعمدة، ولنأخذ مثلًا الجدول التالي الذي يعرض بعض أسماء الحيوانات، فقد نرغب في بعض الحالات بعرض أسماء الإناث والذكور إلى جانب النوع وقد لا نرغب بذلك، وفي كلتا الحالتين نريد أن يمتد اسم الحيوان على كامل الجدول، وإليك الشيفرة الأولية:

<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

لكن لا يعطي الخرج النتيجة التي نريدها تمامًا:

نريد مثلًا أن يمتد "Hippopotamus" أو "Crocodile" مقدار عمودين، وأن يمتد Horse" و "Chicken" مقدار صفين، إذ تمتلك ترويسة الجدول لهذه الغاية السمتَين colspan و rowspan اللتين تقبلان قيمًا بلا واحدة تدل على عدد الصفوف أو الأعمدة التي نريد أن تمتد الترويسة عليهما، لذا ستسمح القيمة "2"=colspan مثلًا لترويسة عمود أن تمتد بمقدار عمودين، إذًا لنستخدِم هاتين السمتين لتحسين مظهر الجدول السابق:

  1. احفظ نسخةً عن الملفين animals-table.html و minimal-table.css في مجلد جديد على حاسوبك، إذ يحتوي ملف HTML على المعلومات ذاتها التي يعرضها الجدول السابق.
  2. استخدم السمة colspan لتجعل الخلايا "Animals" و "Hippopotamus" و "Crocodile" تمتد بمقدار عمودَين.
  3. استخدم السمة rowspan لتجعل الخلايا "Horse" و "Chicken" تمتد بمقدار صفَّين.
  4. احفظ التغيرات التي أجريتها على الملف ثم حمّله في المتصفح لترى النتيجة.

ملاحظة: يمكنك إيجاد المثال السابق بصيغته النهائية ضمن المستودع المخصص له على جيت-هاب.

تزويد الأعمدة ببعض التنسيقات

تقدِّم HTML طريقةً لتنسيق محتوى عمود بأكمله (عناصر <col> وعناصر <colgroup>)، وقد وُجِدت هذه الطريقة لأنّ عملية تنسيق كل عنصر <td> أو <th> على حدة في عمود ستكون مزعجةً وغير فعّالة وسيكون الأمر كذلك عند استخدام محدِّد تنسيق معقَّد مثل nth -child:.

ملاحظة: تنسيق العمود بهذه الطريقة مخصص لبعض السمات فقط، وهي:border و background و width و visibility، فإذا احتجت لاستخدام خصائص أخرى، فلا بدّ من تنسيق كل عنصر <td> أو <th> على حدة، أو استخدام محدد تنسيق معقّد مثل nth -child:.

لنلق نظرةً على هذا المثال:

<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>

ستكون النتيجة كما يلي:

إنّ الطريقة المتبعة في الشيفرة السابقة ليست ملائمةً، إذ علينا كتابة التنسيق في كل خلية من خلال العمود، فمن السهل في هذه الحالة -إن كنا نعمل على مشروع واقعي- استخدام السمة class وتحديد التنسيق المطلوب مرةً واحدةً ضمن ملف تنسيق منفصل، وبدلًا من ذلك يمكننا تحديد معلومات التنسيق هذه مرةً واحدةً فقط ضمن عنصر <col> يقع داخل العنصر <colgroup> الذي يُدرج مباشرةً أسفل وسم بداية الجدول <table>، وإليك الطريقة:

<table>
  <colgroup>
    <col>
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

عرّفنا عمودين اثنين، الأول فارغ ولا يحتوي على أي تنسيق لكنه ضروري لكي لا يتغير تنسيق العمود الثاني المطبق، وإذا أردت تنسيق كلا العمودَين، فاكتف بعنصر <col> واحد يحمل التنسيق المطلوب شرط استخدام السمة span:

<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>

تأخذ هذه السمة قيمًا على صورة أرقام بلا واحدة مثل سمة colspan وسمة rowspan التي تدل على عدد الأعمدة التي سيطبَّق عليها التنسيق.

تطبيق: تنسيق أعمدة

ترى في الجدول التالي برنامجًا زمنيًا لمواعيد مدرِّسة لغات، ولدى هذه المدرّسة صفًا جديدًا لتعليم الهولندية Dutch يوم الجمعة بأكمله، وتدرِّس الألمانية German على فترات يومَي الثلاثاء والخميس، وتريد المدرّسة تلوين أعمدة الأيام التي تُدرِّس فيها:

أعد إنشاء الجدول السابق متبعًا الخطوات التالية:

  1. احفظ نسخةً عن الملف timetable.html في مجلد جديد على حاسوبك، إذ يحتوي ملف HTML على المعلومات ذاتها التي يعرضها الجدول السابق ما عدا معلومات تنسيق الأعمدة.
  2. أضف العنصر <colgroup> إلى العنصر <table> وتحت وَسم البداية مباشرةَ، ثم أضف إلى هذا العنصر عناصر <col> لإضافة تنسيقات إلى الأعمدة.
  3. لا تغيِّر تنسيق أول عمودين.
  4. أضف لونًا إلى خلفية العمود الثالث بضبط قيمة السمة style على ;background-color:#97DB9A.
  5. استخدم عرضًا مختلفًا للعمود الرابع بضبط قيمة السمة style على ;width: 42px.
  6. أضف لونًا إلى خلفية العمود الخامس بضبط قيمة style على ;background-color:#97DB9A.
  7. أضف لونًا مختلفًا وإطارًا إلى العمود السادس لتشير إلى أنه يوم مميز، إذ ستبدأ بتدريس لغة جديدة، ولذلك اضبط قيمة style على ;background-color:#DCC48E; border:4px solid #C1437A

إذا وجدت نفسك عالقًا أمام مشكلة ما أو أردت التحقق من عملك، فيمكنك مراجعة النسخة النهائية للمثال على جيت-هاب.

خلاصة

عرضنا في هذا المقال أساسيات إنشاء جداول في HTML، إذ سنلقي نظرةً في المقال التالي على ميزات أكثر تقدمًا، مع الأخذ بالحسبان سهولة وصول ذوِي الإعاقة البصرية.

للمزيد من التفاصيل، ارجع إلى توثيق الجداول في موسوعة حسوب.

ترجمة -وبتصرَّف- للمقال HTML table basics.

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات



بتاريخ 17 ساعة قال كمال صالح محمد:

كيف استدعي البيانات من sql server

أنت لم تذكر ما هي اللغة التي تريد تنفيذ الأمر بها، على أي حال سأستخدم PHP للتواصل مع SQL Server.

أولاً تأكد من تثبيت الامتداد php_sqlsrv أو php_pdo_sqlsrv  للتعامل مع اتصالات SQL Server من PHP.

ثم عليك الاتصال بقاعدة البيانات، وبالطبع استبدل بيانات قاعدة البيانات في الكود التالي للإتصال:

<?php
$server = 'اسم_الخادم';
$database = 'اسم_قاعدة_البيانات';
$username = 'اسم_المستخدم';
$password = 'كلمة_المرور';

$connection = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
if (!$connection) {
    die(print_r(sqlsrv_errors(), true));
}
?>

ثم كتابة الاستعلام SQL وتنفيذه

<?php
$sql_query = 'SELECT * FROM اسم_الجدول';
$statement = $connection->query($sql_query);
?>

بعد ذلك جلب البيانات:

<?php
while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
    print_r($row);
}
?>

ثم إغلاق الاتصال

<?php
$connection = null; // أو يمكنك استخدام $connection->close();
?>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ 4 ساعة قال Mustafa Suleiman:
<?php
while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
    print_r($row);
}
?>

مازال توجد مشكلة لم افهم ايش السبب اليك الكود التالي

<!DOCTYPE html>
<html lang="ar">
<head>
    <link rel="icon" href="https://c0.klipartz.com/pngpicture/573/614/gratis-png-ng%C5%A9-hanh-s%C6%A1n-distrito-casa-apartamento-inmobiliaria-volta-redonda-venta-de-logotipos-de-bienes-raices.png" />
    <title>موقع العقارات</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300&display=swap" rel="stylesheet">
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="home.css">
</head>
<body>
    <header>
        <div>
            <img src="a.png" alt="نظام العقارات من كمال تجريبي">
        </div>
        <center>
            <div>
                <button>نقاط البيع</button>
                <button>أدارة المخزون</button>
                <button>الإراضي</button>
                <button>الشيكات</button>
                <button>الأستاذ العام</button>
                <button>إدارة النظام</button>
            </div>
        </center>
    </header>

    <?php
    $server = 'DESKTOP-PJDLJNR';
    $database = 'Legacy';
    $username = '';
    $password = '';

    $connection = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
    if (!$connection) {
    die(print_r(sqlsrv_errors(), true));
    }
    $sql_query = 'SELECT * FROM Problemss';
    $statement = $connection->query($sql_query);
    ?>

    <table border="1" width="100%">
        <tr>
            <th>تم</th>
            <th>الحلول</th>
            <th>المشكلة</th>
            <th>م</th>
            <th>الرقم</th>
        </tr>

        

        <?php
        while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
        print_r($row);
        <tr>
            <td><?php echo $row['تم']?></td>
            <td><?php echo $row['الحلول']?></td>
            <td><?php echo $row['المشكلة']?></td>
            <td><?php echo $row['م']?></td>
            <td><?php echo $row['الرقم']?></td>
        </tr>
        }
        $connection->close();
        ?>
    </table>
</body>
</html>

 

تم التعديل في بواسطة كمال صالح محمد
رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ On 29‏/12‏/2023 at 16:57 قال Mustafa Suleiman:

أنت لم تذكر ما هي اللغة التي تريد تنفيذ الأمر بها، على أي حال سأستخدم PHP للتواصل مع SQL Server.

أولاً تأكد من تثبيت الامتداد php_sqlsrv أو php_pdo_sqlsrv  للتعامل مع اتصالات SQL Server من PHP.

ثم عليك الاتصال بقاعدة البيانات، وبالطبع استبدل بيانات قاعدة البيانات في الكود التالي للإتصال:

<?php
$server = 'اسم_الخادم';
$database = 'اسم_قاعدة_البيانات';
$username = 'اسم_المستخدم';
$password = 'كلمة_المرور';

$connection = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
if (!$connection) {
    die(print_r(sqlsrv_errors(), true));
}
?>

ثم كتابة الاستعلام SQL وتنفيذه

<?php
$sql_query = 'SELECT * FROM اسم_الجدول';
$statement = $connection->query($sql_query);
?>

بعد ذلك جلب البيانات:

<?php
while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
    print_r($row);
}
?>

ثم إغلاق الاتصال

<?php
$connection = null; // أو يمكنك استخدام $connection->close();
?>

 

يتبقاء خطاء صغير لم افهم سببة

رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ On 29‏/12‏/2023 at 16:57 قال Mustafa Suleiman:

أنت لم تذكر ما هي اللغة التي تريد تنفيذ الأمر بها، على أي حال سأستخدم PHP للتواصل مع SQL Server.

أولاً تأكد من تثبيت الامتداد php_sqlsrv أو php_pdo_sqlsrv  للتعامل مع اتصالات SQL Server من PHP.

ثم عليك الاتصال بقاعدة البيانات، وبالطبع استبدل بيانات قاعدة البيانات في الكود التالي للإتصال:

<?php
$server = 'اسم_الخادم';
$database = 'اسم_قاعدة_البيانات';
$username = 'اسم_المستخدم';
$password = 'كلمة_المرور';

$connection = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
if (!$connection) {
    die(print_r(sqlsrv_errors(), true));
}
?>

ثم كتابة الاستعلام SQL وتنفيذه

<?php
$sql_query = 'SELECT * FROM اسم_الجدول';
$statement = $connection->query($sql_query);
?>

بعد ذلك جلب البيانات:

<?php
while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
    print_r($row);
}
?>

ثم إغلاق الاتصال

<?php
$connection = null; // أو يمكنك استخدام $connection->close();
?>

 

ماهو سبب ضهور الخطاء في الكود التالي:

<!DOCTYPE html>
<html lang="ar">
<head>
    <link rel="icon" href="https://c0.klipartz.com/pngpicture/573/614/gratis-png-ng%C5%A9-hanh-s%C6%A1n-distrito-casa-apartamento-inmobiliaria-volta-redonda-venta-de-logotipos-de-bienes-raices.png" />
    <title>موقع العقارات</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300&display=swap" rel="stylesheet">
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="home.css">
</head>
<body>
    <header>
        <div>
            <img src="a.png" alt="نظام العقارات من كمال تجريبي">
        </div>
        <center>
            <div>
                <button>نقاط البيع</button>
                <button>أدارة المخزون</button>
                <button>الإراضي</button>
                <button>الشيكات</button>
                <button>الأستاذ العام</button>
                <button>إدارة النظام</button>
            </div>
        </center>
    </header>

    <?php
    $server = 'DESKTOP-PJDLJNR';
    $database = 'Legacy';
    $username = '';
    $password = '';

    $connection = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
    if (!$connection) {
    die(print_r(sqlsrv_errors(), true));
    }
    $sql_query = 'SELECT * FROM Problemss';
    $statement = $connection->query($sql_query);
    ?>

    <table border="1" width="100%">
        <tr>
            <th>تم</th>
            <th>الحلول</th>
            <th>المشكلة</th>
            <th>م</th>
            <th>الرقم</th>
        </tr>

        

        <?php
        while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
        print_r($row);
        <tr>
            <td><?php echo $row['تم']?></td>
            <td><?php echo $row['الحلول']?></td>
            <td><?php echo $row['المشكلة']?></td>
            <td><?php echo $row['م']?></td>
            <td><?php echo $row['الرقم']?></td>
        </tr>
        }
        $connection->close();
        ?>
    </table>
</body>
</html>

الرجاء اجابة الحل   للضروووورة 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ 6 ساعة قال كمال صالح محمد:

ماهو سبب ضهور الخطاء في الكود التالي:

<!DOCTYPE html>
<html lang="ar">
<head>
    <link rel="icon" href="https://c0.klipartz.com/pngpicture/573/614/gratis-png-ng%C5%A9-hanh-s%C6%A1n-distrito-casa-apartamento-inmobiliaria-volta-redonda-venta-de-logotipos-de-bienes-raices.png" />
    <title>موقع العقارات</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300&display=swap" rel="stylesheet">
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="home.css">
</head>
<body>
    <header>
        <div>
            <img src="a.png" alt="نظام العقارات من كمال تجريبي">
        </div>
        <center>
            <div>
                <button>نقاط البيع</button>
                <button>أدارة المخزون</button>
                <button>الإراضي</button>
                <button>الشيكات</button>
                <button>الأستاذ العام</button>
                <button>إدارة النظام</button>
            </div>
        </center>
    </header>

    <?php
    $server = 'DESKTOP-PJDLJNR';
    $database = 'Legacy';
    $username = '';
    $password = '';

    $connection = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
    if (!$connection) {
    die(print_r(sqlsrv_errors(), true));
    }
    $sql_query = 'SELECT * FROM Problemss';
    $statement = $connection->query($sql_query);
    ?>

    <table border="1" width="100%">
        <tr>
            <th>تم</th>
            <th>الحلول</th>
            <th>المشكلة</th>
            <th>م</th>
            <th>الرقم</th>
        </tr>

        

        <?php
        while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
        print_r($row);
        <tr>
            <td><?php echo $row['تم']?></td>
            <td><?php echo $row['الحلول']?></td>
            <td><?php echo $row['المشكلة']?></td>
            <td><?php echo $row['م']?></td>
            <td><?php echo $row['الرقم']?></td>
        </tr>
        }
        $connection->close();
        ?>
    </table>
</body>
</html>

الرجاء اجابة الحل   للضروووورة 

ما هي رسالة الخطأ التي تظهر لك أرجو توضيحها؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ On 31‏/12‏/2023 at 16:16 قال كمال صالح محمد:

هاذه هي في الشكل التالي:

مرحبا كمال،

يبدو أن هناك خطأ في تركيبة كود PHP الخاص بك، بحيث أن العبارة print_r($row); يجب أن تكون خارج الحلقة وقبل جدول HTML، و أيضا يجب عليك إغلاق علامة PHP بشكل صحيح قبل بدء كود HTML.

هذا كود ال php بعد التصحيح:

<?php
    $server = 'DESKTOP-PJDLJNR';
    $database = 'Legacy';
    $username = '';
    $password = '';

    $connection = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
    if (!$connection) {
        die(print_r(sqlsrv_errors(), true));
    }

    $sql_query = 'SELECT * FROM Problemss';
    $statement = $connection->query($sql_query);
?>

<table border="1" width="100%">
    <tr>
        <th>تم</th>
        <th>الحلول</th>
        <th>المشكلة</th>
        <th>م</th>
        <th>الرقم</th>
    </tr>

    <?php
    while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
    ?>
        <tr>
            <td><?php echo $row['تم']?></td>
            <td><?php echo $row['الحلول']?></td>
            <td><?php echo $row['المشكلة']?></td>
            <td><?php echo $row['م']?></td>
            <td><?php echo $row['الرقم']?></td>
        </tr>
    <?php
    }
    $connection = null; // close the connection
    ?>
</table>

تأكد من استبدال القيم المؤقتة لـ $username و $password بالقيم الفعلية لاعتمادك على قاعدة البيانات. 

بالتوفيق إن شاء الله @كمال صالح محمد

رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ 3 ساعة قال Chihab Hedidi:

مرحبا كمال،

يبدو أن هناك خطأ في تركيبة كود PHP الخاص بك، بحيث أن العبارة print_r($row); يجب أن تكون خارج الحلقة وقبل جدول HTML، و أيضا يجب عليك إغلاق علامة PHP بشكل صحيح قبل بدء كود HTML.

هذا كود ال php بعد التصحيح:

<?php
    $server = 'DESKTOP-PJDLJNR';
    $database = 'Legacy';
    $username = '';
    $password = '';

    $connection = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
    if (!$connection) {
        die(print_r(sqlsrv_errors(), true));
    }

    $sql_query = 'SELECT * FROM Problemss';
    $statement = $connection->query($sql_query);
?>

<table border="1" width="100%">
    <tr>
        <th>تم</th>
        <th>الحلول</th>
        <th>المشكلة</th>
        <th>م</th>
        <th>الرقم</th>
    </tr>

    <?php
    while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
    ?>
        <tr>
            <td><?php echo $row['تم']?></td>
            <td><?php echo $row['الحلول']?></td>
            <td><?php echo $row['المشكلة']?></td>
            <td><?php echo $row['م']?></td>
            <td><?php echo $row['الرقم']?></td>
        </tr>
    <?php
    }
    $connection = null; // close the connection
    ?>
</table>

تأكد من استبدال القيم المؤقتة لـ $username و $password بالقيم الفعلية لاعتمادك على قاعدة البيانات. 

بالتوفيق إن شاء الله @كمال صالح محمد

لازال يتبقى خطاء استاذي القدير :

 

لازالت المشكلة ظاهرة.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ 13 دقائق مضت قال كمال صالح محمد:

لازال يتبقى خطاء استاذي القدير :

 

لازالت المشكلة ظاهرة.png

<!DOCTYPE html>
<html lang="ar">
<head>
    <link rel="icon" href="https://c0.klipartz.com/pngpicture/573/614/gratis-png-ng%C5%A9-hanh-s%C6%A1n-distrito-casa-apartamento-inmobiliaria-volta-redonda-venta-de-logotipos-de-bienes-raices.png" />
    <title>موقع العقارات</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300&display=swap" rel="stylesheet">
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="home.css">
</head>
<body>
    <header>
        <div>
            <img src="a.png" alt="نظام العقارات من كمال تجريبي">
        </div>
        <center>
            <div>
                <button>نقاط البيع</button>
                <button>أدارة المخزون</button>
                <button>الإراضي</button>
                <button>الشيكات</button>
                <button>الأستاذ العام</button>
                <button>إدارة النظام</button>
            </div>
        </center>
    </header>

    <?php
    $server = 'DESKTOP-PJDLJNR';
    $database = 'Legacy';
    $username = '';
    $password = '';

    $connection = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
    if (!$connection) {
    die(print_r(sqlsrv_errors(), true));
    }

    $sql_query = 'SELECT * FROM Problemss';
    $statement = $connection->query($sql_query);
    ?>

    <table border="1" width="100%">
        <tr>
            <th>تم</th>
            <th>الحلول</th>
            <th>المشكلة</th>
            <th>م</th>
            <th>الرقم</th>
        </tr>

        <?php
        while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
        ?>
        <tr>
            <td><?php echo $row['تم']?></td>
            <td><?php echo $row['الحلول']?></td>
            <td><?php echo $row['المشكلة']?></td>
            <td><?php echo $row['م']?></td>
            <td><?php echo $row['الرقم']?></td>
        </tr>
        <?php
        }
        $connection = null; // close the connection
        ?>
    </table>
</body>
</html>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ 12 دقائق مضت قال كمال صالح محمد:

لازال يتبقى خطاء استاذي القدير :

مرحبا كمال،
حاول استخدام هذا الكود وتأكد من أن جميع علامات PHP تأتي بالترتيب الصحيح:

<?php
    $server = 'DESKTOP-PJDLJNR';
    $database = 'Legacy';
    $username = '';
    $password = '';

    $connection = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
    if (!$connection) {
        die(print_r(sqlsrv_errors(), true));
    }

    $sql_query = 'SELECT * FROM Problemss';
    $statement = $connection->query($sql_query);
?>

<table border="1" width="100%">
    <tr>
        <th>تم</th>
        <th>الحلول</th>
        <th>المشكلة</th>
        <th>م</th>
        <th>الرقم</th>
    </tr>

    <?php while ($row = $statement->fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?php echo $row['تم']?></td>
            <td><?php echo $row['الحلول']?></td>
            <td><?php echo $row['المشكلة']?></td>
            <td><?php echo $row['م']?></td>
            <td><?php echo $row['الرقم']?></td>
        </tr>
    <?php } ?>

</table>

<?php $connection = null; // إغلاق الاتصال بقاعدة البيانات ?>

بالتوفيق إن شاء الله.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ 4 دقائق مضت قال Chihab Hedidi:

مرحبا كمال،
حاول استخدام هذا الكود وتأكد من أن جميع علامات PHP تأتي بالترتيب الصحيح:

<?php
    $server = 'DESKTOP-PJDLJNR';
    $database = 'Legacy';
    $username = '';
    $password = '';

    $connection = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
    if (!$connection) {
        die(print_r(sqlsrv_errors(), true));
    }

    $sql_query = 'SELECT * FROM Problemss';
    $statement = $connection->query($sql_query);
?>

<table border="1" width="100%">
    <tr>
        <th>تم</th>
        <th>الحلول</th>
        <th>المشكلة</th>
        <th>م</th>
        <th>الرقم</th>
    </tr>

    <?php while ($row = $statement->fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?php echo $row['تم']?></td>
            <td><?php echo $row['الحلول']?></td>
            <td><?php echo $row['المشكلة']?></td>
            <td><?php echo $row['م']?></td>
            <td><?php echo $row['الرقم']?></td>
        </tr>
    <?php } ?>

</table>

<?php $connection = null; // إغلاق الاتصال بقاعدة البيانات ?>

بالتوفيق إن شاء الله.

للاسف لازال الخطاء مستمر 

لازالت المشكلة ظاهرة.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ 1 دقيقة مضت قال كمال صالح محمد:

للاسف لازال الخطاء مستمر 

 

مرحبا كمال،
اذا كانت قاعدة البيانات تتصل بدون أي مشاكل، أرفق ملف المشروع للإطلاع عليه أكثر.
بالتوفيق.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ 1 ساعة قال Chihab Hedidi:

مرحبا كمال،
حاول استخدام هذا الكود وتأكد من أن جميع علامات PHP تأتي بالترتيب الصحيح:

<?php
    $server = 'DESKTOP-PJDLJNR';
    $database = 'Legacy';
    $username = '';
    $password = '';

    $connection = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
    if (!$connection) {
        die(print_r(sqlsrv_errors(), true));
    }

    $sql_query = 'SELECT * FROM Problemss';
    $statement = $connection->query($sql_query);
?>

<table border="1" width="100%">
    <tr>
        <th>تم</th>
        <th>الحلول</th>
        <th>المشكلة</th>
        <th>م</th>
        <th>الرقم</th>
    </tr>

    <?php while ($row = $statement->fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?php echo $row['تم']?></td>
            <td><?php echo $row['الحلول']?></td>
            <td><?php echo $row['المشكلة']?></td>
            <td><?php echo $row['م']?></td>
            <td><?php echo $row['الرقم']?></td>
        </tr>
    <?php } ?>

</table>

<?php $connection = null; // إغلاق الاتصال بقاعدة البيانات ?>

بالتوفيق إن شاء الله.

يتبقاء هاذا الخطاء فقط استاذي:

 

يتبقاء هاذا الخطاء فقط.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ 13 ساعة قال كمال صالح محمد:

يتبقاء هاذا الخطاء فقط استاذي:

 

 

مرحباً

يوجد وسم <?php خاطئ حيث يجب حذفه وهو أعلى while مباشرة لذلك في الكود التالي نحذف السطر الأول كمايلي 

<?php #نحذف هذا الوسم
<?php while ($row = mysql_fetch_assoc($result)) { ?>
<tr>
  <td><?php echo $row['تم']?></td>
  <td><?php echo $row['الحلول']?></td>
  <td><?php echo $row['المشكلة']?></td>
  <td><?php echo $row['م']?></td>
  <td><?php echo $row['الرقم']?></td>
</tr>
<?php
                                                 }
$connection = null; // close the connection
?>
رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ 7 ساعة قال عبدالباسط ابراهيم:

مرحباً

يوجد وسم <?php خاطئ حيث يجب حذفه وهو أعلى while مباشرة لذلك في الكود التالي نحذف السطر الأول كمايلي 

<?php #نحذف هذا الوسم
<?php while ($row = mysql_fetch_assoc($result)) { ?>
<tr>
  <td><?php echo $row['تم']?></td>
  <td><?php echo $row['الحلول']?></td>
  <td><?php echo $row['المشكلة']?></td>
  <td><?php echo $row['م']?></td>
  <td><?php echo $row['الرقم']?></td>
</tr>
<?php
                                                 }
$connection = null; // close the connection
?>

مازال نفس الخطاء استاذ

رابط هذا التعليق
شارك على الشبكات الإجتماعية

بتاريخ 20 ساعة قال كمال صالح محمد:

مازال نفس الخطاء استاذ

عليك القيام بالتالي:

  1. إزالة علامات <?php المتداخلة أي الزائدة في الكود حيث نضعها في بداية كود php فقط ثم نغلق ذلك الجزء من خلال ?>
  2. استخدام PDO::fetchAll() لجلب جميع النتائج دفعة واحدة لتحسين الكفاءة.
  3. استبدال mysql_fetch_assoc() بـ foreach للتنقل عبر الصفوف المسترجعة.
  4. إغلاق الاتصال بنقل سطر connection = null خارج الحلقة لضمان الإغلاق الصحيح.
  5. التعامل مع الأخطاء بإضافة كتلة try...catch وتمكين التعامل مع الأخطاء باستخدام PDO::ATTR_ERRMODE.

الكود بعد التعديل:

<!DOCTYPE html>
<html lang="ar">
<head>
    <link rel="icon" href="https://c0.klipartz.com/pngpicture/573/614/gratis-png-ng%C5%A9-hanh-s%C6%A1n-distrito-casa-apartamento-inmobiliaria-volta-redonda-venta-de-logotipos-de-bienes-raices.png" />
    <title>موقع العقارات</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300&display=swap" rel="stylesheet">
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="home.css">
</head>
<body>
    <?php
    $server = 'DESKTOP-PJDLJNR';
    $database = 'Legacy';
    $username = '';
    $password = '';

    try {
        $connection = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
        $connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // Enable error handling

        $sql_query = 'SELECT * FROM Problemss';
        $statement = $connection->query($sql_query);
        $result = $statement->fetchAll(PDO::FETCH_ASSOC); // Fetch all results
    } catch (PDOException $e) {
        die("Connection failed: " . $e->getMessage());
    }
    ?>

    <table border="1" width="100%">
        <tr>
            <th>تم</th>
            <th>الحلول</th>
            <th>المشكلة</th>
            <th>م</th>
            <th>الرقم</th>
        </tr>

        <?php foreach ($result as $row) { ?>
        <tr>
            <td><?php echo $row['تم'] ?></td>
            <td><?php echo $row['الحلول'] ?></td>
            <td><?php echo $row['المشكلة'] ?></td>
            <td><?php echo $row['م'] ?></td>
            <td><?php echo $row['الرقم'] ?></td>
        </tr>
        <?php } ?>
    </table>
</body>

</html>
رابط هذا التعليق
شارك على الشبكات الإجتماعية




انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...