...
اليوم سأقوم بتوضيح فكرة عمل لوحة تحكم موقع مشابهة للوحة تحكم نسخة المنتديات الاشهر فيبويلتن في بي vBulletin
نقطتين يجب أن تعرفها قبل الخوض فى صلب الموضوع:
- هذا الموضوع بعيد تماما عن برمجة لوحة التحكم .. وانما هو فقط شرح طريقة لكيفية عمل مثل هذه اللوحة.
- الشرح طريقة الذى سأقوم به قد تم شرح طريقةه من ذى قبل لكن كانت للوحة تحكم كاملة .. لكن هنا مجرد توضيح لفكرة عملها فقط .
خطوات الشرح طريقة:
- صور توضيحية للنتيجة النهائية.
- شرح طريقة تقسيم الصفحة عن طريق الـ .frames
- اضافة لمسة جمالية للقوائم الجانبية عن طريق كود code Jquery بسيط .
- بعض النقاط التوضيحية الأخرى.
نبدأ باسم الله
صورة توضيحية للنتيجة النهائية:
شرح طريقة تقسيم الصفحة عن طريق الـ .frames
بفرض أن صفحة لوحة التحكم الرئيسية عندنا لها الاسم admin.php
تقوم الفكرة على تقسيم صفحة admin.php الى ثلاث أقسام
كل قسم منهم سيكون صفحة أخرى يتم تضمينها فى frame منفصل
الصورة التالية توضح ما أقصده
أتمنى أن يكون الامر أصبح واضحا الان
ولتنفيذ ذلك الشكل سنقوم باضافة الكود code التالى بين وسمى الهيد فى صفحة admin.php هكذا
رمز PHP:
<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
السطر الاول : يقوم بتقسيم كامل الصفحة رأسيا الى جزئين الجزء الايمن 250 بكسل والجزء الثانى هو بقية الصفحة
السطر الثانى : يقوم بتقسيم الجزؤ الرأسى الايسر أفقيا الى قسمين أيضا القسم الاعلى 40بكسل والجزء الاسفل هو باقى الصفحة.
بعد ذلك نقوم بتعيين الصفحات التى أنشأناها سابقا كلا فى مكانها كالتالى
- صفحة header.php فى الجزء العلوى
- صفحة menu.php فى الجزء الايمن
- صفحة main.php فى الجزء الايسر
الان الشكل العام لصفحة لوحة التحكم أصبح جاهزا للتعامل معه
اضافة لمسة جمالية للقوائم الجانبية عن طريق كود code Jquery بسيط .
رغم أنها ليست من صلب موضوعنا لكن فضلت أن أقولها لأنها تضيف لمسة جمالية للوحة التحكم
سأشرح طريقة باعتبار أنك فى menu.php
تقوم بعمل قوائمك بالكود code التالى
رمز PHP:
<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>
شرح طريقة التأثير
عند الضغط على رأس القائمة تقوم باخفاء محتواها وعند الضغط مرة أخرى تقوم باظهار المحتوى بتأثير جميل
الان لدينا الكلاس الذى استخدمه لعنوان القائمة هو phead
فقط هذا كل ما أريده الان ^^
تابع الكود code التالى
رمز PHP:
<script type="text/javascript">
$('.phead').next().hide();
$('.phead:first').next().show();
$('.phead').click(
function(){
$(this).next().animate({'height':'toggle'}, 'slow' , 'swing');
}
);
لكن سامحونى لن أشرح طريقة هذا الكود code الان .. ربما فى درس مفصل منفصل ^^
طبعا يجب أن تضم مكتبة الجافا فى الهيد باضافة التالى
رمز PHP:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
بعض النقاط التوضيحية الأخرى:
النقطة الاولى
والاهم هى كيفية وضع رابط فى صفحة menu.php وعند الضغط عليها تظهر فى صفحة main.php
الأمر بمنتهى السهولة
لنرجع مرة أخرى الى كود code الـ frame
رمز PHP:
<frame name="left" scrolling="auto" src="main.php" NORESIZE>
ستلاحظ خاصية name = left
وهذا ما يهمنا لاحظ كيف سأقوم بعملها
افتح الان ملف menu.php
اكتب فيه الامر التالى
رمز PHP:
<a target="left" href="">اضافة خبر جديدa>
هل لاحظت هذا؟
رمز PHP:
target="left"
اذاً فهمت ما المطلوب ^_*
النقطة الثانية
وهى مهمة أيضاً
انه فى حالة استخدام الـ frames فى لوحة التحكم وجب عليك تضمين ملف الكونفيج لكل ملفات الادمن ولا يقتصر على صفحة الاندكس كما هو موجود فى بعض الطرق الاخرى.
وأخيراً أرجو أن أكون قد وفقت فى الشرح طريقة
والسلام عليكم
