ط¹ظ…ظ„ ظ„ظˆط*ط© طھط*ظƒظ… ظ…ظ‚ط§ط±ط¨ط© ظ„ظ„ظˆط*ط© طھط*ظƒظ… ط§ظ„ظپظ‰ ط¨ظ‰ (فيبويلتن في بي vBulletin)


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

أهلا بكم إخوانى فى تراديدنت العزيز
...
اليوم سأقوم بتوضيح فكرة عمل لوحة تحكم موقع مشابهة للوحة تحكم نسخة المنتديات الاشهر فيبويلتن في بي vBulletin
**
والتى تعتمد بدورها على فكرة الـ frames
**
نقطتين يجب أن تعرفها قبل الخوض فى صلب الموضوع:


  • هذا الموضوع بعيد تماما عن برمجة لوحة التحكم .. وانما هو فقط شرح طريقة لكيفية عمل مثل هذه اللوحة.
  • الشرح طريقة الذى سأقوم به قد تم شرح طريقةه من ذى قبل لكن كانت للوحة تحكم كاملة .. لكن هنا مجرد توضيح لفكرة عملها فقط .

خطوات الشرح طريقة:


  • صور توضيحية للنتيجة النهائية.
  • شرح طريقة تقسيم الصفحة عن طريق الـ .frames
  • اضافة لمسة جمالية للقوائم الجانبية عن طريق كود code Jquery بسيط .
  • بعض النقاط التوضيحية الأخرى.

نبدأ باسم الله


صورة توضيحية للنتيجة النهائية:



شرح طريقة تقسيم الصفحة عن طريق الـ .frames

بفرض أن صفحة لوحة التحكم الرئيسية عندنا لها الاسم admin.php

تقوم الفكرة على تقسيم صفحة admin.php الى ثلاث أقسام
كل قسم منهم سيكون صفحة أخرى يتم تضمينها فى frame منفصل
الصورة التالية توضح ما أقصده

أتمنى أن يكون الامر أصبح واضحا الان

ولتنفيذ ذلك الشكل سنقوم باضافة الكود code التالى بين وسمى الهيد فى صفحة admin.php هكذا

رمز PHP:
<code style="white-space:nowrap"> <code> <head>
<frameset cols="*,250" FRAMEBORDER='0' FRAMESPACING='4'>
<FRAMESET rows="40,*" FRAMEBORDER='0' FRAMESPACING='0'>
<frame name="top" scrolling="NO" src="header.php" NORESIZE>
<frame name="left" scrolling="auto" src="main.php" NORESIZE>
</frameset>
<frame name="right" scrolling="auto" src="menu.php" NORESIZE>
</frameset><noframes></noframes>
</head>
</code> </code>

توضيح بسيط للكود code
السطر الاول : يقوم بتقسيم كامل الصفحة رأسيا الى جزئين الجزء الايمن 250 بكسل والجزء الثانى هو بقية الصفحة
السطر الثانى : يقوم بتقسيم الجزؤ الرأسى الايسر أفقيا الى قسمين أيضا القسم الاعلى 40بكسل والجزء الاسفل هو باقى الصفحة.

بعد ذلك نقوم بتعيين الصفحات التى أنشأناها سابقا كلا فى مكانها كالتالى


  • صفحة header.php فى الجزء العلوى
  • صفحة menu.php فى الجزء الايمن
  • صفحة main.php فى الجزء الايسر



الان الشكل العام لصفحة لوحة التحكم أصبح جاهزا للتعامل معه

اضافة لمسة جمالية للقوائم الجانبية عن طريق كود code Jquery بسيط .
رغم أنها ليست من صلب موضوعنا لكن فضلت أن أقولها لأنها تضيف لمسة جمالية للوحة التحكم

سأشرح طريقة باعتبار أنك فى menu.php
تقوم بعمل قوائمك بالكود code التالى

رمز PHP:
<code style="white-space:nowrap"> <code> <div class="phead">التحكم بالقوائم الجانبية</div>
<div class="pbody">
<ul>
<li><a href="">اضافة قائمة جديدة</a></li>
<li><a href="">تعديل القوائم</a></li>
<li><a href="">اضافة عناصر للقائمة</a></li>
</ul>
</div>
</code> </code>

شرح طريقة التأثير
عند الضغط على رأس القائمة تقوم باخفاء محتواها وعند الضغط مرة أخرى تقوم باظهار المحتوى بتأثير جميل




الان لدينا الكلاس الذى استخدمه لعنوان القائمة هو phead
فقط هذا كل ما أريده الان ^^

تابع الكود code التالى
رمز PHP:
<code style="white-space:nowrap"> <code> <script type="text/javascript">
$('.phead').next().hide();
$('.phead:first').next().show();
$('.phead').click(
function(){
$(this).next().animate({'height':'toggle'}, 'slow' , 'swing');
}
);
</script>
</code> </code>

لكن سامحونى لن أشرح طريقة هذا الكود code الان .. ربما فى درس مفصل منفصل ^^
طبعا يجب أن تضم مكتبة الجافا فى الهيد باضافة التالى
رمز PHP:
<code style="white-space:nowrap"> <code> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</code> </code>

بعض النقاط التوضيحية الأخرى:

النقطة الاولى

والاهم هى كيفية وضع رابط فى صفحة menu.php وعند الضغط عليها تظهر فى صفحة main.php
الأمر بمنتهى السهولة
لنرجع مرة أخرى الى كود code الـ frame
 رمز PHP:
<code style="white-space:nowrap"> <code> <frame name="left" scrolling="auto" src="main.php" NORESIZE>
</code> </code>

ستلاحظ خاصية name = left
وهذا ما يهمنا لاحظ كيف سأقوم بعملها

افتح الان ملف menu.php

اكتب فيه الامر التالى
رمز PHP:
<code style="white-space:nowrap"> <code> <a target="left" href="">اضافة خبر جديد</a>
</code> </code>

هل لاحظت هذا؟
رمز PHP:
<code style="white-space:nowrap"> <code> target="left"
</code> </code>

اذاً فهمت ما المطلوب ^_*

النقطة الثانية

وهى مهمة أيضاً

انه فى حالة استخدام الـ frames فى لوحة التحكم وجب عليك تضمين ملف الكونفيج لكل ملفات الادمن ولا يقتصر على صفحة الاندكس كما هو موجود فى بعض الطرق الاخرى.

وأخيراً أرجو أن أكون قد وفقت فى الشرح طريقة
والسلام عليكم











©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©