[شرح] عمل لوحة تحكم مقسمه لجزئين كما في المنتديات والسكريبتات المشهورة

ولد السلطنة · 09-25-2007, 11:01 مساءً

بسم الله الرحمن الرحيم

لاحظت خلال الفتره السابقه سواء في معهد ترايدنت او غيره او من الإضافات علي الماسنجر

الإخوان يطلبون شرح تقسيم لوحة التحكم إلي جدول باليمين مكون من نوافذ تغلق وتفتح بالضغط عليها

مع صفحة باليسار تفتح فيها الروابط

مثل نظام المنتديات (الفي بي) وسكريبتات شبكة مصر (برمجة فريق شبكة مصر)

فتعبت وانا اشرح لكل شخص علي حدا

ففضلت ان اقوم بطرح فكرة عمل هالوحات ولكم حريه تطوير الفكره والتعديل عليها بما يناسبكم

خلينا في البداية نحط صوره مثال للي اتكلم عنه علشان الي مافهم

طبعا فهمتوا المغذي من هذا الدرس

#####################################
بسم الله نبدأ الشرح

بالبدايه اود ان اضع مبدأ لنعمل عليه وهو ان الفكره عباره عن :
3 صفحات باسماء مختلفه

الأول بإسم index.php وهي الصفحة الرئيسيه للوحة التحكم والتي لن نتركها ابدا ستلاحظ خلال عملك في لوحة التحكم دائما ان الصفحة التي تقف عليها بإسم index.php حتي لو إستعرضت صفحة اخري.

الثانيه بإسم home.php (ليس إجبارا وإنما هذا هو المثال المستخدم) وهي الصفحة التي سنضع عليها الرساله الترحيبيه في لوحة التحكم او مواصفات السكريبت وهو الجزأ الأيسر في الصوره اعلاه.

الثالثه بإسم nav.php (ليس إجبارا وإنما هذا هو المثال المستخدم) وهي الصفحة الموجوده علي اليمين والتي يوجد فيها جدول يحتوي علي روابط وعلي جافا سكريبت لفتح وإغلاق كل جدول علي حدا .

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

الأول صفحة الـindex.php

ستحتوي علي كود يقوم بتقسيم الصفحه إلي نصفين الأول 20% والثاني 80%

الأول (الصغير) سنضع فيه صفحة nav.php بروابطها والثاني (الكبير) سنضع فيه صفحة home.php كصفحة إفتتاحيه للوحة التحكم.

والكود المستخدم هو الكود التالي :

طبعا نلاحظ ان المحدد هو القيم التي يجب ان نتعامل معها في هذا الكود إذا لم تكن من هواة فهم محتوي الكود الكامل

فالـ80 و 20 هي نسب تقسيم الصفحه

والـhome.php?do=home هو صفحة الرئيسيه

والـnav.php هي الصفحة التي تحتوي علي الجداول التي علي اليمين

وإليكم الكود كتابيا لنسخه ولصقه كما هو :

كود PHP:

<?php


echo "

<frameset cols = '80%,20%'> 

<frame src='home.php?do=home' id='leftFrame' name='leftFrame' 

width='80%' height='100%' frameborder='0' scrolling='yes' /> 

<frame src='nav.php' id='RightFrame' name='RightFrame' 

width='20%' height='100%' frameborder='0' scrolling='yes' /> 

</frameset>

";

?>

وطبعا نلاحظ من الكود السابق ان هناك 2 framset
الأول بإسم :
leftFrame
والثاني بإسم :
RightFrame
وراح نستخدم هذه الأسماء لتمرير الروابط من الفريم الاول للفريم الثاني

هنا نكون إنتهينا من محتوي صفحة index.php
###############################
نيجي لصفحة home.php الأول ضع في الصفحه الكود التالي :

كود PHP:

<?php

if ($_REQUEST['do'] == home)

{

//ضع المحتوي التي تريد ظهوره في الصفحة الرئيسيه علي اليسار هنا

}

?>

وبكده نكون انهينا والحمد لله الصفحه الثانيه (اسهل صفحة فيهم) ^_^
###############################
نيجي لصفحة nav.php وهي ارخم صفحة فيهم بس بإذن الله سهله

الكود الخاص بهذه الصفحة (يمكنك تحريره علي الفرونت بيدج وتغير ماتريد)

كود:

<script language="Javascript" type="text/javascript">
 function show_hide(tblid, show) {
  if (tbl = document.getElementById(tblid)) {
   if (null == show) show = tbl.style.display == 'none';
   tbl.style.display = (show ? '' : 'none');
  }
 }
</script>
<body onload="show_hide('exampletbl'),show_hide('exampletb2'),show_hide('exampletb3'),show_hide('exampletb4'),show_hide('exampletb5')" topmargin="0" leftmargin="0" background="images/cp_navbody_bg.gif">
<p>
  <img border="0" src="images/nav_logo.gif" width="150" height="50">
<table border="2" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="150" bordercolorlight="#DFE0E5" bordercolordark="#808080" height="17">
  <tr>
    <td background="images/cp_tblhead_bg.gif">
    <p align="right"><b><font face="Tahoma" size="2">الخيارات الرئيسية
    </font></b></td>
    <td width="30" background="images/cp_tblhead_bg.gif" height="17">
    <p align="center">
<a href="javascript:void();" onclick="show_hide('exampletbl')"><img border="0" src="images/move_down.gif" width="11" height="11"></a></td>
  </tr>
</table>
<table id="exampletbl" border="1" bordercolor="#808080" style="border-collapse: collapse" cellpadding="0" cellspacing="0" width="150" bordercolorlight="#C0C0C0" bordercolordark="#808080">
<tr><td height="16" bgcolor="#DDDDE2">
  <p align="right"><font face="Tahoma">
  <a style="TEXT-DECORATION: none" href="http://127.0.0.1/cp/...me.php?do=home " target="leftFrame">
  <font color="#000000" size="2">الصفحة الرئيسية</font></a></font></td></tr>
<tr><td height="19" bgcolor="#DDDDE2">
  <p align="right">
  <font face="Tahoma">
  <a style="TEXT-DECORATION: none" href="http://127.0.0.1/cp/....php?do=status" target="leftFrame">
  <font color="#000000" size="2">تشغيل / إيقاف</font></a></font></td></tr>
<tr><td height="19" bgcolor="#DDDDE2">
  <p align="right">
  <font face="Tahoma">
  <a style="TEXT-DECORATION: none" href="http://127.0.0.1/cp/...hp?do=settings" target="leftFrame">
  <font color="#000000" size="2">معلومات عن الموقع</font></a></font></td></tr>
</table>
<table border="2" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="150" bordercolorlight="#DFE0E5" bordercolordark="#808080" height="17">
  <tr>
    <td background="images/cp_tblhead_bg.gif">
<p align="right">
<b><font size="2" face="Tahoma">الأقسام</font></b><font size="2"> </font> </td>
    <td width="30" background="images/cp_tblhead_bg.gif" height="17">
    <p align="center">
<a href="javascript:void();" onclick="show_hide('exampletb2')"><img border="0" src="images/move_down.gif" width="11" height="11"></a></td>
  </tr>
</table>
<table id="exampletb2" border="1" bordercolor="#808080" style="border-collapse: collapse" cellpadding="0" cellspacing="0" width="150" bordercolorlight="#C0C0C0" bordercolordark="#808080">
<tr><td height="16" bgcolor="#DDDDE2">
  <p align="right"><font face="Tahoma" size="2"><a href="cat.php?do=listed" target="leftFrame" style="text-decoration: none">
  <font color="#000000">قائمة بالأقسام</font></a></font></td></tr>
<tr><td height="19" bgcolor="#DDDDE2">
  <p align="right">
  <font face="Tahoma" size="2"><a href="cat.php?do=add" target="leftFrame" style="text-decoration: none">
  <font color="#000000">إضافة قسم جديد</font></a></font></td></tr>
<tr><td height="19" bgcolor="#DDDDE2">
  <p align="right"><a href="cat.php?do=edit" target="leftFrame" style="text-decoration: none">
  <font size="2" face="Tahoma" color="#000000">التعديل علي قسم</font></a></td></tr>
<tr><td height="19" bgcolor="#DDDDE2">
  <p align="right">
  <font face="Tahoma" size="2"><a href="cat.php?do=del" target="leftFrame" style="text-decoration: none">
  <font color="#000000">حذف قسم</font></a></font></td></tr>
</table>
<table border="2" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="150" bordercolorlight="#DFE0E5" bordercolordark="#808080" height="17">
  <tr>
    <td background="images/cp_tblhead_bg.gif">
<p align="right">
      <b><font size="2" face="Tahoma">الإستشارات</font></b></td>
    <td width="30" background="images/cp_tblhead_bg.gif" height="17">
    <p align="center">
<a href="javascript:void();" onclick="show_hide('exampletb3')"><img border="0" src="images/move_down.gif" width="11" height="11"></a></td>
  </tr>
</table>
<table id="exampletb3" border="1" bordercolor="#808080" style="border-collapse: collapse" cellpadding="0" cellspacing="0" width="150" bordercolorlight="#C0C0C0" bordercolordark="#808080">
<tr><td height="16" bgcolor="#DDDDE2">
  <p align="right"><font face="Tahoma" size="2"><a href="cat.php?do=listed" target="leftFrame" style="text-decoration: none">
  <font color="#000000">إستشارات جديدة</font></a></font></td></tr>
<tr><td height="19" bgcolor="#DDDDE2">
  <p align="right"><font face="Tahoma" size="2"><a href="cat.php?do=add" target="leftFrame" style="text-decoration: none">
  <font color="#000000">إستشارات تم الرد عليها</font></a></font></td></tr>
<tr><td height="19" bgcolor="#DDDDE2">
  <p align="right"><a href="cat.php?do=del" target="leftFrame" style="text-decoration: none">
  <font size="2" face="Tahoma" color="#000000">حذف إٍستشارة نهائيا</font></a></td></tr>
<tr><td height="19" bgcolor="#DDDDE2">
  <p align="right">
  <a href="cat.php?do=edit" target="leftFrame" style="text-decoration: none">
  <font size="2" face="Tahoma" color="#000000">قائمة بالمدفوعات</font></a></td></tr>
</table>
<table border="2" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="150" bordercolorlight="#DFE0E5" bordercolordark="#808080" height="17">
  <tr>
    <td background="images/cp_tblhead_bg.gif">
<p align="right">
      <b><font size="2" face="Tahoma">طاقم العمل</font></b></td>
    <td width="30" background="images/cp_tblhead_bg.gif" height="17">
    <p align="center">
<a href="javascript:void();" onclick="show_hide('exampletb4')"><img border="0" src="images/move_down.gif" width="11" height="11"></a></td>
  </tr>
</table>
<table id="exampletb4" border="1" bordercolor="#808080" style="border-collapse: collapse" cellpadding="0" cellspacing="0" width="150" bordercolorlight="#C0C0C0" bordercolordark="#808080">
<tr><td height="16" bgcolor="#DDDDE2">
  <p align="right"><a href="users.php?do=listed" target="leftFrame" style="text-decoration: none">
  <font size="2" face="Tahoma" color="#000000">قائمة بالأفراد</font></a></td></tr>
<tr>
  <td height="19" bgcolor="#DDDDE2">
  <p align="right"><a href="users.php?do=adduser" target="leftFrame" style="text-decoration: none">
  <font size="2" face="Tahoma" color="#000000">إضافة فرد</font></a></td>
</tr>
<tr><td height="19" bgcolor="#DDDDE2">
  <p align="right">
  <a href="users.php?do=edit" target="leftFrame" style="text-decoration: none">
  <font size="2" face="Tahoma" color="#000000">التعديل علي فرد</font></a></td></tr>
<tr><td height="19" bgcolor="#DDDDE2">
  <p align="right">
  <a target="leftFrame" style="text-decoration: none" href="users.php?do=del">
  <font size="2" face="Tahoma" color="#000000">حذف فرد</font></a></td></tr>
</table>
<table border="2" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="150" bordercolorlight="#DFE0E5" bordercolordark="#808080" height="17">
  <tr>
    <td background="images/cp_tblhead_bg.gif">
<p align="right">
      <b><font size="2" face="Tahoma">الصيانة</font></b></td>
    <td width="30" background="images/cp_tblhead_bg.gif" height="17" bordercolor="#808080">
    <p align="center">
<a href="javascript:void();" onclick="show_hide('exampletb5')"><img border="0" src="images/move_down.gif" width="11" height="11"></a></td>
  </tr>
</table>
<table id="exampletb5" border="1" bordercolor="#808080" style="border-collapse: collapse" cellpadding="0" cellspacing="0" width="150" bordercolorlight="#C0C0C0" bordercolordark="#808080">
<tr><td height="16" bgcolor="#DDDDE2">
  <p align="right"><a href="cat.php?do=list" target="leftFrame" style="text-decoration: none">
  <font size="2" face="Tahoma" color="#000000">النسخ الإحتياطي</font></a></td></tr>
<tr><td height="19" bgcolor="#DDDDE2">
  <p align="right">
  <a href="cat.php?do=add" target="leftFrame" style="text-decoration: none">
  <font size="2" face="Tahoma" color="#000000">صيانة قاعدة البيانات</font></a></td></tr>
<tr><td height="19" bgcolor="#DDDDE2">
  <p align="right"><a href="cat.php?do=del" target="leftFrame" style="text-decoration: none">
  <font size="2" face="Tahoma" color="#000000">حذف كل الإستشارات</font></a></td></tr>
<tr><td height="19" bgcolor="#DDDDE2">
  <p align="right">
  <font face="Tahoma" size="2"><a href="cat.php?do=edit" target="leftFrame" style="text-decoration: none">
  <font color="#000000">إلغاء تركيب البرنامج</font></a></font></td></tr>
</table>

الفكره العامه :

كود:

<body onload="show_hide('exampletbl'),show_hide('exampletb2'),show_hide('exampletb3'),show_hide('exampletb4'),show_hide('exampletb5')" topmargin="0" leftmargin="0" background="images/cp_navbody_bg.gif">

هالكود خاص بتعريف الجداول id وذلك لتفعيل كود الجافا لفتح وإغلاق الجداول في هذا السكريبت

ولما تحب تسوي رابط لفتح وإغلاق الجدول تستخدم هالكود كمثال :

كود:

href="javascript:void();" onclick="show_hide('exampletbl')

ولما تحب تخلي الرابط في القائمه علي اليمين يفتح في القائمه علي اليسار ضيف في تاج الروابط هالكود :

كود:

target="leftFrame"

وبكذا نكون إنتهينا من الشرح وانا عارف إنه صعب بس انا معاكم في الإستفسارات وياهلا فيكم

بس الله يخليكم مابي واحد ماهو مبرمج بالأصل يجي يقولي إِشرح لي الكود حرف حرف

اما لو إنت مبرمج ومافهمت بشرح لك بإذن الله

واسف علي غيابي كل هذه الفتره عن الركن ولكن برجع لكم كل ماشوف جزئيه تحبوا تتعلموها ومالها شروحات

في امان الله ياغاليين وكل عام وإنتم بخير وفريق شبكة مصر في حب وتأخي

منقول
كاتب الدرس طارق السمني (عاشق برمجة)

ADMIN · 09-25-2007, 11:10 مساءً

مشكور وبارك الله فيك اخوي

ولد السلطنة · 09-25-2007, 11:23 مساءً

عفوا والله يبارك في الجميع ومن وضع الدرس جزاه الله كل خير

كرم العربي · 09-27-2007, 03:35 صباحاً

مشكور وبارك الله فيك ولد السلطنه

ولد السلطنة · 10-01-2007, 11:44 مساءً

عفوا كرم تلميذك يا خوي

ويبارك فيك

09-25-2007, 11:10 مساءً	#2 (permalink)
ADMIN .::+: Gulf Son :+::. تاريخ التسجيل: May 2005 الدولة: بلاد الخليج المشاركات: 53,991 معدل تقييم المستوى: 53	رد: [شرح] عمل لوحة تحكم مقسمه لجزئين كما في المنتديات والسكريبتات المشهورة مشكور وبارك الله فيك اخوي من مواضيع ADMIN في المنتدى نهاية ممثلة مصرية Designing Letter Head تصاميم واجهات للموقع عل شكل بي اس دي 44 فتاة هندية في التاسعة تتزوج كلباً! محول فيديواحترافي لجميع امتدادات الفيديو __________________ يقول الامام مالك رحمه الله: إنما هؤلاء أقوام أرادوا القدح في النبي صلى الله عليه وسلم فلم يمكنهم ذلك، فقدحوا في أصحابه حتى يقال رجل سوء ولو كان رجلاً صالحاً لكان أصحابه صالحين. وقال أبو الوفا بن عقيل رحمه الله: انظر كيف اختار لمرضه بيت البنت، واختار لموضعه من الصلاة الأب، فما هذه الغفلة المستحوذة على قلوب الرافضة عن هذا الفضل والمنزلة التي لا تكاد تخفى عن البهيم فضلا عن الناطق. وحيد القرن، كسرنا قرنه، ودككنا حصنه، وهدمنا برجه، فخرج يتبختر بعتاده مزهواً بعدده ففللنا حدّه، وقتلنا جنده، وفرقنا صحبه، والفضل لله وحده ولئن أبيد أبناء دولة الإسلام عن بكرة أبيهم خيرٌ لهم من أن يحكمهم رافضيٌّ خبيث أو أن تستظلّ بغداد برايات الصفويين يوما واحداً.

09-25-2007, 11:23 مساءً	#3 (permalink)
ولد السلطنة اسرة ابن الخليج تاريخ التسجيل: Jan 2006 الدولة: S. of Oman المشاركات: 3,175 معدل تقييم المستوى: 22156	رد: [شرح] عمل لوحة تحكم مقسمه لجزئين كما في المنتديات والسكريبتات المشهورة عفوا والله يبارك في الجميع ومن وضع الدرس جزاه الله كل خير من مواضيع ولد السلطنة في المنتدى اشهر موقعك في قوقل (sitemap)(برنامج + شرح بالصور) أستايلW-enter:v الاخضر لمجلتك بواسطة ولد السلطنة صدور النسخة 3.6.6 رسميا كيف اعمل ظهور تثبيت المواضيع فقط في الصفحة الاولى كيف ازيد عدد الرسائل الخاصة للاعضاء __________________ حمل جميع نسخ الجيل الرابع مع التعريب مباشرتا:- http://vb4.wsport.org/ حمل جميع نسخ الجيل الثالث مع التعريب مباشرتا:- http://vb3.wsport.org/ اضف موقعك في دليل دبليو سبورت الرياضي http://dir.wsport.or...org/index.html

09-27-2007, 03:35 صباحاً	#4 (permalink)
كرم العربي Gulfson.com تاريخ التسجيل: Apr 2006 الدولة: Egypt المشاركات: 15,092 معدل تقييم المستوى: 53	رد: [شرح] عمل لوحة تحكم مقسمه لجزئين كما في المنتديات والسكريبتات المشهورة مشكور وبارك الله فيك ولد السلطنه من مواضيع كرم العربي في المنتدى [هاك] تلوين عناوين المواضيع في أقسام المنتديات [hack] إظهار إسم الملف في أعلى المتصفح, في مركز التحميل أقوى سكربت شريط أخبار عربي متحرك باستخدام Ajax [حل] مشكلة تسجيل الدخول حتى عند وجود علامة صح بجوار تذكرني Kaspersky Internet Security 6.0.1.411 كامل __________________ Im Back

10-01-2007, 11:44 مساءً	#5 (permalink)
ولد السلطنة اسرة ابن الخليج تاريخ التسجيل: Jan 2006 الدولة: S. of Oman المشاركات: 3,175 معدل تقييم المستوى: 22156	رد: [شرح] عمل لوحة تحكم مقسمه لجزئين كما في المنتديات والسكريبتات المشهورة عفوا كرم تلميذك يا خوي ويبارك فيك من مواضيع ولد السلطنة في المنتدى مشكله بعد تغير اسم الدومين [ product ] الحد الأقصى للمشاركات لكل قسم (تحديد المواضيع) لضيف المهاجر مع الصور هــــاك الأختام المطور \|: الإصدار 3.8.1 الأخير :\|[ هدية العيد من vbplus]\| هاك شكر الكاتب بتقنية الاجاكسي post_thanks_6_3_vb3_6_8AJAX redirector إعادة التوجية __________________ حمل جميع نسخ الجيل الرابع مع التعريب مباشرتا:- http://vb4.wsport.org/ حمل جميع نسخ الجيل الثالث مع التعريب مباشرتا:- http://vb3.wsport.org/ اضف موقعك في دليل دبليو سبورت الرياضي http://dir.wsport.or...org/index.html

أدوات الموضوع
عرض نسخة صالحة للطباعة أرسل هذا الموضوع إلى صديق
طرق مشاهدة الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
شرح لوحة تحكم المنتديات بأكثر من93سؤال و جواب لكي تعم الفائدة على الجميع	الفنان موادع	سكربتات وادوات تطوير المواقع	4	03-15-2008 05:20 مساءً
مطلوب شرح لوحة تحكم مجلة المنتديات	الغموض	مشاكل وحلول الـ مواقع	2	09-01-2007 03:14 صباحاً
( Admin_Cp ) شرح تغيير شكل لوحة التحكم + لوحة تحكم بشكل روعه	-==Zero==-	هاكات وشروحات vBulletin 3.[6-5].X	9	05-02-2007 10:23 صباحاً
لا استطيع دخول لوحة تحكم المنتديات بعد ترقته الى النسخة 3.6.5	الحجازي	مشاكل وحلول الـ مواقع	3	03-31-2007 06:42 صباحاً
لوحة تحكم المجلة	amrco	مشاكل وحلول الـ مواقع	2	01-19-2007 04:21 صباحاً

[شرح] عمل لوحة تحكم مقسمه لجزئين كما في المنتديات والسكريبتات المشهورة

منتديات شبكة ابن الخليج