info@semi-colen.com 002-010-90-2500-88
August 16, 2020 - بواسطة مشرف

تصميم وبرمجة موقع تواصل اجتماعي الجزء الثالث| تحميل واستدعاء مكتبة البوتستراب و مكتبة الفونت اوسم

أولا تحميل مكتبة البوتستراب  و مكتبة الفونت اوسم: -

لتحميل مكتبة البوتستراب  حمله من هنا

لتحميل مكتبة الفوت اوسم حمله من هنا


ثانيا استدعاء مكتبة البوتستراب  و مكتبة الفونت اوسم: -

1- نفتح محرر الأكواد وننشأ بداخل مجلد social ملف ونسميه index.php
2-ننشأ صفحة HTML فارغة 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title> social </title>
    </head>
    <body>
</body>
</html>


3- أولا استدعاء مكتبة الفونت اوسم
أ- بعد تحميل مكتبة fontawesome ننسخ الملفات الموجودة بداخل مجلد fontawesome v5.11.2 في مجلد themes.
ب- نعود إلى ملف index.php وفي أعلى وسم   </head> نضع الكودين التاليين
<script src="themes/js/fontawesome.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="themes/css/all.css" crossorigin="anonymous">

جـ - وللتأكد أن مكتبة fontawesome  تعمل نضع كود أي ايقونة أسفل وسم  <body> وليكن هذا الكود مثلا وهذا لمجرد التجربة

<i class="fas fa-abacus"></i>
الشكل النهائي: -


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title> social </title>
<script src="themes/js/fontawesome.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="themes/css/all.css" crossorigin="anonymous">
    </head>
    <body>
<i class="fas fa-abacus"></i>
</body>
</html>
4- ثانيا استدعاء مكتبة البوتستراب : -
أ- بعد تحميل مكتبة bootstrap ننسخ الملفات الموجودة بداخل مجلد fontawesome v5.11.2 في مجلد themes ونوافق على الاستبدال.
ب- نعود إلى ملف index.php وفي أعلى وسم   </head> نضع هذه الأكواد التالية: -

<link rel="stylesheet" href="themes/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="themes/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

ونضع هذا الكود أعلى الوسم </body> 

<script src="themes/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

جـ - وللتأكد أن مكتبة bootstrap تعمل نضع كود أي ايقونة أسفل وسم  <body> وليكن هذا الكود مثلا وهذا لمجرد التجربة: -


<div class="alert alert-success text-center" role="alert">
Success
</div>

الشكل النهائي: -

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title> social </title>
<script src="themes/js/fontawesome.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="themes/css/all.css" crossorigin="anonymous">

<link rel="stylesheet" href="themes/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="themes/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    </head>

    <body>
<div class="alert alert-success text-center" role="alert">
Success
</div>

<script src="themes/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

ثالثا خطوات تقسيم الموقع إلى هيدر وفوتر: - 

5- نشيء ملف جديد بداخل مجلد tmbl الموجود بداخل مجلد inc ونسميه header.php وننقل بداخله هذا الكود


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title> social </title>
<script src="themes/js/fontawesome.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="themes/css/all.css" crossorigin="anonymous">

<link rel="stylesheet" href="themes/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="themes/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


    </head>
    <body>


6- نشيء ملف جديد بداخل مجلد tmbl الموجود بداخل مجلد inc ونسميه footer.php وننقل بداخله هذا الكود


<script src="themes/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>