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

كيف يمكن جعل بيانات كل موظف في بطاقة في HTML

الريم امل

السؤال

Recommended Posts

  • 0

هل يمكنك إضافة تفاصيل أكثر عما تحاولين القيام به؟

ان كنت تحاولين انشاء استعلام قواعد بيانات لقراءة موظفي قسم معين، فهدا سيعتمد بالدرجة الأولى على هيكلتك لقواعد بياناتك، وعموما سيكون هنالك عمود يربط جدول الموظفين بجدول الأقسام يمكن عن طريقه قراءة الموظفين المنتمين لهذا القسم كالتالي: 

SELECT *
FROM employees
WHERE section_id=PUT_SECTION_ID_HERE;

يمكنك أيضا استبدال * بأسماء الأعمدة التي تريدينها مفصول بينها بفاصلة أجنبية. 

أما ان كان المقصود هيكلة قائمة موظفين في شكل بطاقات في HTML فيمكنك الاستعانة ببوتسراب لتنسيقها وإنشاءها كالتالي مثلا: 

<div class="container">
  <div class="row">
    <div class="container">
      <div class="row">
        <!-- بطاقة الموظف -->
        <div class="card col-sm">
          <div class="card-body">
            <h5 class="card-title">اسم الموظف هنا</h5>
            <h6 class="card-subtitle mb-2 text-muted">الاسم الوظيفي</h6>
            <p class="card-text">نبذة شخصية عن هذا الموظف</p>
            <a href="#" class="card-link">رابط أعمال الموظف</a>
            <a href="#" class="card-link">رابط لينكد ان</a>
          </div>
        </div>
        <!-- بطاقة الموظف -->
        <div class="card col-sm">
          <div class="card-body">
            <h5 class="card-title">اسم الموظف هنا</h5>
            <h6 class="card-subtitle mb-2 text-muted">الاسم الوظيفي</h6>
            <p class="card-text">نبذة شخصية عن هذا الموظف</p>
            <a href="#" class="card-link">رابط أعمال الموظف</a>
            <a href="#" class="card-link">رابط لينكد ان</a>
          </div>
        </div>
        <!-- بطاقة الموظف -->
        <div class="card col-sm">
          <div class="card-body">
            <h5 class="card-title">اسم الموظف هنا</h5>
            <h6 class="card-subtitle mb-2 text-muted">الاسم الوظيفي</h6>
            <p class="card-text">نبذة شخصية عن هذا الموظف</p>
            <a href="#" class="card-link">رابط أعمال الموظف</a>
            <a href="#" class="card-link">رابط لينكد ان</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

مع تخصيصها وفق ما يليق بمشروعك. 
قد تحتاج الاطلاع أكثر على Bootstrap و البطاقات في إطار العمل Bootstrap.

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

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

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

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...