المساعد الشخصي الرقمي

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



walid_8281500
03-23-2009, 02:56 AM
بسم الله الرحمن الرحيم

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

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

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

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

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

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

خلينا في البداية نحط صوره مثال للي اتكلم عنه علشان الي مافهم http://traidnt.net/vb/images/smilies/cupidarrow.gif

http://www.traidnt.net/vb/attachment.php?attachmentid=176892&thumb=1&d=1190469707 (http://www.traidnt.net/vb/attachment.php?attachmentid=176892&d=1190469707)

طبعا فهمتوا المغذي من هذا الدرس http://traidnt.net/vb/images/smilies/cupidarrow.gif
#####################################
بسم الله نبدأ الشرح

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

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

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

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

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

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

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

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

والكود المستخدم هو الكود التالي :
http://www.traidnt.net/vb/attachment.php?attachmentid=176896&thumb=1&d=1190470253 (http://www.traidnt.net/vb/attachment.php?attachmentid=176896&d=1190470253)

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

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

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

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

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



<?php
/*
لعمل صفحتين مقسمتين بنسبة 80 إلي 20 بحيث تكون الصفحه الصغري هي
nav.php
ضع فيها الروابط
والصفحةالثانية وهي
home.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
وراح نستخدم هذه الأسماء لتمرير الروابط من الفريم الاول للفريم الثاني http://traidnt.net/vb/images/smilies/cupidarrow.gif

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



<?php
if ($_REQUEST['do'] == home)
{
//ضع المحتوي التي تريد ظهوره في الصفحة الرئيسيه علي اليسار هنا
}
?>

وبكده نكون انهينا والحمد لله الصفحه الثانيه (اسهل صفحة فيهم) ^_^
###############################
نيجي لصفحة nav.php وهي ارخم صفحة فيهم بس بإذن الله سهله http://traidnt.net/vb/images/smilies/cupidarrow.gif
الكود الخاص بهذه الصفحة (يمكنك تحريره علي الفرونت بيدج وتغير ماتريد)



<****** language="**********" type="****/**********">
function show_hide(tblid, show) {
if (tbl = ********.getElementById(tblid)) {
if (null == show) show = tbl.style.display == 'none';
tbl.style.display = (show ? '' : 'none');
}
}
</******>
<body onload="show_hide('exampletbl'),show_hide('exampletb2'),sh ow_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="**********: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="****-DECORATION: none" href="http://127.0.0.1/cp/home.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="****-DECORATION: none" href="http://127.0.0.1/cp/home.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="****-DECORATION: none" href="http://127.0.0.1/cp/home.php?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="**********: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="****-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="****-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="****-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="****-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="**********: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="****-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="****-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="****-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="****-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="**********: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="****-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="****-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="****-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="****-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="**********: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="****-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="****-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="****-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="****-decoration: none">
<font color="#000000">إلغاء تركيب البرنامج</font></a></font></td></tr>
</table>

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



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

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

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


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

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



target="leftFrame"

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

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

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

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

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