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

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



romaissa
11-01-2013, بتوقيت غرينيتش 03:50 PM
http://www.dzbatna.com/images/icons/idea.gif ط¯ط±ط³ ط¹ظ…ظ„ ظ„ظˆط*ط© طھط*ظƒظ… ظ…ظ‚ط³ظ…ظ‡ ظ„ط¬ط²ط¦ظٹظ† ظƒظ…ط§ ظپظٹ ط§ظ„ظ…ظ†طھط¯ظٹط§طھ ظˆط§ظ„ط³ظƒط±ظٹط¨طھط§طھ ط§ظ„ظ…ط´ظ‡ظˆط±ط© (http://www.dzbatna.com/t1680964/)



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

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

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

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

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




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

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

خلينا في البداية نحط صوره مثال للي اتكلم عنه علشان الي مافهم http://www.gulfson.com/vb/images/smilies/D3.gif (http://www.gulfson.com/vb/)

http://www.gulfson.com/vb/imgulfson/c669c79bca58de9bce1bde7458c5a204.gulfson (http://www.gulfson.com/vb/)

طبعا فهمتوا المغذي من هذا الدرس مفصل http://www.gulfson.com/vb/images/smilies/D3.gif (http://www.gulfson.com/vb/)
#####################################
بسم الله نبدأ الشرح طريقة

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

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

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

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

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

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

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

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

والكود code المستخدم هو الكود code التالي :
http://www.gulfson.com/vb/imgulfson/145606ada02e17712ebdb441d2dec8bd.gulfson (http://www.gulfson.com/vb/)

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

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

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

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

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

رمز PHP:

<code style="white-space:nowrap"> <code> <?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>
";
?> </code> </code>



وطبعا نلاحظ من الكود code السابق ان هناك 2 framset
الأول بإسم :
leftFrame
والثاني بإسم :
RightFrame
وراح نستخدم هذه الأسماء لتمرير الروابط من الفريم الاول للفريم الثاني http://www.gulfson.com/vb/images/smilies/D3.gif (http://www.gulfson.com/vb/)

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

رمز PHP:

<code style="white-space:nowrap"> <code> <?php
if ($_REQUEST&#91;'do'&#93; == home)
{
//ضع المحتوي التي تريد ظهوره في الصفحة الرئيسيه علي اليسار هنا
}
?> </code> </code>



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




< رمز PHP:

<code style="white-space:nowrap"> <code> 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'),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="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">إلغاء تركيب install البرنامج</font></a></font></td></tr>
</table>
</code> </code>



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

<code style="white-space:nowrap"> <code> <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">
</code> </code>



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

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



رمز PHP:

<code style="white-space:nowrap"> <code> href="javascript:void();" onclick="show_hide('exampletbl')
</code> </code>

ولما تحب تخلي الرابط في القائمه علي اليمين يفتح في القائمه علي اليسار ضيف في تاج الروابط هالكود code :
رمز Code:
target=&quot;leftFrame&quot;
وبكذا نكون إنتهينا من الشرح طريقة وانا عارف إنه صعب بس انا معاكم في الإستفسارات وياهلا فيكم

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

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

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

في امان الله ياغاليين وكل عام وإنتم بخير وفريق شبكة الجنة الذهبية في حب وتأخي
http://www.dzbatna.com/images/smilies/icon30.gifhttp://www.dzbatna.com/images/smilies/icon30.gifhttp://www.dzbatna.com/images/smilies/icon30.gifhttp://www.dzbatna.com/images/smilies/icon30.gif











ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى