دروة برمجة لوحة تحكم مثل VB الـدرس الثالــث
2:15 م | 
مرسلة بواسطة
helly
اهلا بكم مرة اخري في درس جديد
اليوم هناخد اصعب درس بجد ملفين بس اصعب واطول ملفين
يعني عاوز تركيز جااااامد جداا
الملف الاول القائمة اليمني menu.php
وهي تحتوي على اختيارات لوحة التحكم مش هطول عليكم بس ارجو التركيز
نشوف الكود كدة
بعض الاكواد شرحة بعضها وبعضها لا
طيب انا هشرح لكم الكود بالكامل
طبعا السطر الاول جلب ملف الاستايل
السطر دة السطر دة جلب ملف جافا اسكربت طبعا مدون فية كود تكبير وتصغير القوائم الاختيارية
طبعا هو موجود في مجلد باسم js_box
ونسمي الملف menu.js
وهناخدة في الدرس ده انشاء الله
نروح للسطر اللى بعدة
بداية جسم الصفحة انا بصراحة محبتش اعمل خلفية للصفحة انا تركتها ليكو يعني لونو الصفحة على كيفكم
السطر الرابع طبعا الاطار الاساسي للصفحة
الابعاد واضحة طب الطول 101 في المية علشان نظهر شريط التمرين للتجميل
السطر الخامس
كود HTML واضح جدا صمم صورة لتكون اللوجو الخاص بك للوحة التحكم
بداية جدول الروابط
كل الكود واضح جداا بس هناك سطرين مختلفين
طيب هقول نظرية الاول ونركز فيها
انا لما اعمل صفحة وعامل فيها تصميم وصور
فية خاصية في الاستايل اسمها DISPLAY
الخاصية دي بتحمل خاصيتين
الاولي BLACK وهي في الحالة العادية اي كل محتوي االجدول ظاهر
التانية NONE وهي عكس الاولي عدم اظهار الجدول بما يحتوي
وصلت اظن كدة تمام
طيب الكود ده الشرح
بداية الجدول وبداية الصف في الخانه الاول اسم القائمة
الخانة الثانية وتحتوي على خاصيتين
ID الكود ده مهم لاني هستخدمة في كود الجافا وهنعرف مهمتة
STYLE وفية DISPLAY
وشرحت فوق الخصية دي وهي هنا في حالة اظهار
وهنعرف ليه في ملف الجافا
الخانه الظهرة فيها صورة الصورة دي اللى هدوس عليها هتخفي القائمة
وبها جلب دالة جافا اسمها PLAS في حالة الضغط بزر الماوس
يمكن مش واضحة بس لما تطبق الدرس هتعرف وده السهل الممتنع
الخانه الثالثة عكسها اخفاء
يبقي الصف فية خانتين بس مش ثلاثة لان الثالثه مخفية
وقفلت الصف والجدول
وبعدها الكود دة طبعا جدول وبه بعض الروابط
بس هنا في خاصية ID وقلت هنستخدمها في الجافا
وخاصية DISPLAY وهو ظاهر وهنستخدمها في كود الجافا بردو
خلاص كدة هنكرر قوائم على قد ما نقدر بس هنغير ID في خاصية ONCLICK في الاسم
يعني لو شوفنا القائمة الثانية هنعرف كويس ازاي نزود قوائم
نشوف الكود ونحاول نتعرف علية هو سهل جدا ركز وبجد ممكن نتعرف علية ونفهمه
الجماعة اللى ممكن تختصر الكود اوك مع نفسا وتختصر وتجرب وتقولنا النتيجة لنستفيد جميعا
وانا قلت مش هختصر ودي بسبها للمبرمج الشاطر اللى عندة افكارة الخاصية
اللى بيفرق مبرمج عن مبرمج
عدد سطور البرمجة
يعني
ممكن كلنا نعمل كود بهدف معين
بس مش عدد سطورنا زي بعض وصلت طبعا
شرح كود الجافا
اخي محمد كلامك صح اللي انت فهمتة هو دة
بسم الله ماشاء الله انت شغال تمام في الدورة وبجدارة
بس ياريت تبعت اللى عملتة علشان نشوفة او ابعت لنا صورة منه
الشرح
قلت ان الكود شكلة كدة
الشرح في قمة البساطة بص اولا الجافا منظومة مترتبة في الكود دة
اولا اول دالة اللى اسمها
هي لاظهار القائمتين سويا مش قولنا في رابط لاظهار الكل كل القوائم او تقليصهم دة بقي بيظهرهم
id=t1
هيدور على الايدي بنفس المواصفات دي يعني هيروح ليساوي t1
راح وقولت دوت الى هي النقطة يعني هيكمل ويدخل على style بتاعة
وفي خاصية display
هنساوي الخاصية دي بفراغ اي هتبقي ظاهرة اذا جدول اللى به القوائم ظاهر
اللى بعدة زية قولت
ان طلاما الخانة مخفية مش بحسبها ولا كانها موجودة
طيب هو هيظهرالاولى وهيخفي التانية صح كدة
واحد متابع قولى الاولي فيها ايه هقولة ارجع للدرس السابق وشوف
هتلاقي فيها صورة للتصغير علامة يعني لما ادوس عليها القائمة تختفي
كدة فهمنا الكود
وطبعا اللى بعدة فكشن او دالة الاخفاء للكل طبعا
وكل ما نزود قوائم نزود في الكود دة ودة
طيب اللى بعدة دالة رقم 3
هي بتتحكم في قائمة واحدة من القائمتين
وهي هتخفي القائمة والخانة التانية وتظهر الخانة الثالثة اللى انا هظهر القائمة من خلالها
واللى بعدها هتعمل مع القائمة دي عكس الكلام
اما قبل الاخيرة والاخيره مع القائمة التانية
ولو زودنا قايمة هنزود دالتين واحده لتصغيرها واخري للتكبير
وخلص الشرح
ياجماعه اللى مش فاهم نقطة يسال من غير احراج عادي لما نسال ومش عيب اننا
نبقي مش فاهمين بس العيب بجد والغلط اللى بيبقي مطب لينا في طريق البرمجة المفتوح اننا ننقل وخلاص يبقى نبطل برمجة احسن ما ننقل اوك مستني الاسئلة والتطبيق
للي فاهم اوهيحاول يفهم انو عمل كود للقائمة ثالثة
اليوم هناخد اصعب درس بجد ملفين بس اصعب واطول ملفين
يعني عاوز تركيز جااااامد جداا
الملف الاول القائمة اليمني menu.php
وهي تحتوي على اختيارات لوحة التحكم مش هطول عليكم بس ارجو التركيز
نشوف الكود كدة
كود PHP:
<?include("head.php");?><script language="javascript" src="js_box/menu.js"></script>
</head>
<body>
<!--بداية اطار الصفحة بالكامل -->
<div style="width:100%;height:101%">
<!--بداية جدول اللوجو -->
<table style="width:100%">
<tr><td align="center">
<img src="صورة لوجو للوحة التحكم">
</td></tr></table>
<!--نهاية جدول اللوجو -->
<!--بداية جدول الروابط العامة -->
<table dir="rtl"><tr><td align="center">
<a target="left" href='main.php'>الصفحة الرئيسية للوحة التحكم</a>
</td></tr>
<tr style="height:22px"><td align="center">
<a href="#top_all" onclick="allplas1()">عرض الكل </a>
|
<a href="#botoom_all" onclick="allplas2()">تقليص الكل</a>
</td></tr></table>
<!--نهاية جدول الروابط العامة -->
<br>
<!--1 اول القائمة الاختيارية-->
<div align="left">
<table>
<tr>
<td><b>عنوان القائمة الرئيسية</b></td>
<td id="TD1" align='left' style="display:black">
<a style="float:left" href="#top" style="display:black" onclick="plas()">
<img name="img" src="style/images/collapse_tcat.gif" alt="" border="0"></a>
</td>
<td id="TD2" align='left' style="display:none">
<a style="float:left" href="#top2" onclick="plas2()">
<img name="img2" src="style/images/collapse_tcat_collapsed.gif" alt="" border="0"></a>
</td></tr></table>
<table id="T1" style="display:black">
<td >
<div id="headerPan" dir="rtl" align="right"><ul>
<li >
<a target="left" href="">بند بالقائمة</a>
</li>
<li>
<a target="left" href="">بند بالقائمة</a>
</li>
<li>
<a target="left" href="">بند بالقائمة</a>
</li>
</ul></div>
</td>
</table>
</div>
<!--1 انتهاء القائمة -->
<br>
<!--2 اول القائمة الاختيارية-->
<div align="left" >
<table ><tr>
<td><b>العنوان الرئيسي للقائمة</b></td>
<td id="TD3" align='left' style="display:black">
<a style="float:left" href="#top" style="display:black" onclick="plas3()">
<img name="img" src="style/images/collapse_tcat.gif" alt="" border="0"></a>
</td>
<td id="TD4" align='left' style="display:none">
<a style="float:left" href="#top2" onclick="plas4()">
<img name="img2" src="style/images/collapse_tcat_collapsed.gif" alt="" border="0"></a>
</td></tr></table>
<table id="T2" style="display:black">
<td >
<div id="headerPan" dir="rtl" align="right"><ul>
<li >
<a target="left" href="">بند بالقائمة</a>
</li>
<li>
<a target="left" href="">بند بالقائمة</a>
</li>
<li>
<a target="left" href="">بند بالقائمة</a>
</li>
</ul></div>
</td>
</table>
</div>
<!--2 انتهاء القائمة -->
<br>
<!--جدول حقوق التصميم -->
<table style="width:100%">
<tr><td align="left">
<img src="style/images/logo_admin.png">
</td></tr></table>
<!--نهاية جدول حقوق التصميم-->
</div>
</body>
</html> طيب انا هشرح لكم الكود بالكامل
طبعا السطر الاول جلب ملف الاستايل
السطر دة
كود PHP:
<script language="javascript" src="js_box/menu.js"></script> طبعا هو موجود في مجلد باسم js_box
ونسمي الملف menu.js
وهناخدة في الدرس ده انشاء الله
نروح للسطر اللى بعدة
بداية جسم الصفحة انا بصراحة محبتش اعمل خلفية للصفحة انا تركتها ليكو يعني لونو الصفحة على كيفكم
السطر الرابع
كود PHP:
<div style="width:100%;height:101%"> الابعاد واضحة طب الطول 101 في المية علشان نظهر شريط التمرين للتجميل
السطر الخامس
كود HTML واضح جدا صمم صورة لتكون اللوجو الخاص بك للوحة التحكم
بداية جدول الروابط
كل الكود واضح جداا بس هناك سطرين مختلفين
طيب هقول نظرية الاول ونركز فيها
انا لما اعمل صفحة وعامل فيها تصميم وصور
فية خاصية في الاستايل اسمها DISPLAY
الخاصية دي بتحمل خاصيتين
الاولي BLACK وهي في الحالة العادية اي كل محتوي االجدول ظاهر
التانية NONE وهي عكس الاولي عدم اظهار الجدول بما يحتوي
وصلت اظن كدة تمام
طيب الكود ده
كود PHP:
<table>
<tr>
<td><b>عنوان القائمة الرئيسية</b></td>
<td id="TD1" align='left' style="display:black">
<a style="float:left" href="#top" style="display:black" onclick="plas()">
<img name="img" src="style/images/collapse_tcat.gif" alt="" border="0"></a>
</td>
<td id="TD2" align='left' style="display:none">
<a style="float:left" href="#top2" onclick="plas2()">
<img name="img2" src="style/images/collapse_tcat_collapsed.gif" alt="" border="0"></a>
</td></tr></table> بداية الجدول وبداية الصف في الخانه الاول اسم القائمة
الخانة الثانية وتحتوي على خاصيتين
ID الكود ده مهم لاني هستخدمة في كود الجافا وهنعرف مهمتة
STYLE وفية DISPLAY
وشرحت فوق الخصية دي وهي هنا في حالة اظهار
وهنعرف ليه في ملف الجافا
الخانه الظهرة فيها صورة الصورة دي اللى هدوس عليها هتخفي القائمة
وبها جلب دالة جافا اسمها PLAS في حالة الضغط بزر الماوس
يمكن مش واضحة بس لما تطبق الدرس هتعرف وده السهل الممتنع
الخانه الثالثة عكسها اخفاء
يبقي الصف فية خانتين بس مش ثلاثة لان الثالثه مخفية
وقفلت الصف والجدول
وبعدها الكود دة
كود PHP:
<table id="T2" style="display:black">
<td >
<div id="headerPan" dir="rtl" align="right"><ul>
<li >
<a target="left" href="">بند بالقائمة</a>
</li>
<li>
<a target="left" href="">بند بالقائمة</a>
</li>
<li>
<a target="left" href="">بند بالقائمة</a>
</li>
</ul></div>
</td>
</table>
</div> بس هنا في خاصية ID وقلت هنستخدمها في الجافا
وخاصية DISPLAY وهو ظاهر وهنستخدمها في كود الجافا بردو
خلاص كدة هنكرر قوائم على قد ما نقدر بس هنغير ID في خاصية ONCLICK في الاسم
يعني لو شوفنا القائمة الثانية هنعرف كويس ازاي نزود قوائم
نشوف الكود ونحاول نتعرف علية هو سهل جدا ركز وبجد ممكن نتعرف علية ونفهمه
كود PHP:
function allplas1(){
id=T1.style.display=''
id=TD1.style.display=''
id=TD2.style.display='none'
id=T2.style.display=''
id=TD3.style.display=''
id=TD4.style.display='none'
}
function allplas2(){
id=T1.style.display="none"
id=TD1.style.display='none'
id=TD2.style.display=''
id=T2.style.display="none"
id=TD3.style.display='none'
id=TD4.style.display=''}
function plas(){
id=T1.style.display ='none'
id=TD1.style.display='none'
id=TD2.style.display='' }
function plas2(){
id=TD2.style.display='none'
id=T1.style.display =''
id=TD1.style.display='' }
function plas3(){
id=T2.style.display ='none'
id=TD3.style.display='none'
id=TD4.style.display='' }
function plas4(){
id=TD4.style.display='none'
id=T2.style.display =''
id=TD3.style.display='' } وانا قلت مش هختصر ودي بسبها للمبرمج الشاطر اللى عندة افكارة الخاصية
اللى بيفرق مبرمج عن مبرمج
عدد سطور البرمجة
يعني
ممكن كلنا نعمل كود بهدف معين
بس مش عدد سطورنا زي بعض وصلت طبعا
شرح كود الجافا
اخي محمد كلامك صح اللي انت فهمتة هو دة
بسم الله ماشاء الله انت شغال تمام في الدورة وبجدارة
بس ياريت تبعت اللى عملتة علشان نشوفة او ابعت لنا صورة منه
الشرح
قلت ان الكود شكلة كدة
كود PHP:
function allplas1(){
id=T1.style.display=''
id=TD1.style.display=''
id=TD2.style.display='none'
id=T2.style.display=''
id=TD3.style.display=''
id=TD4.style.display='none'
}
function allplas2(){
id=T1.style.display="none"
id=TD1.style.display='none'
id=TD2.style.display=''
id=T2.style.display="none"
id=TD3.style.display='none'
id=TD4.style.display=''}
function plas(){
id=T1.style.display ='none'
id=TD1.style.display='none'
id=TD2.style.display='' }
function plas2(){
id=TD2.style.display='none'
id=T1.style.display =''
id=TD1.style.display='' }
function plas3(){
id=T2.style.display ='none'
id=TD3.style.display='none'
id=TD4.style.display='' }
function plas4(){
id=TD4.style.display='none'
id=T2.style.display =''
id=TD3.style.display='' } اولا اول دالة اللى اسمها
كود PHP:
function allplas1(){
id=T1.style.display=''
id=TD1.style.display=''
id=TD2.style.display='none'
id=T2.style.display=''
id=TD3.style.display=''
id=TD4.style.display='none'
} id=t1
هيدور على الايدي بنفس المواصفات دي يعني هيروح ليساوي t1
راح وقولت دوت الى هي النقطة يعني هيكمل ويدخل على style بتاعة
وفي خاصية display
هنساوي الخاصية دي بفراغ اي هتبقي ظاهرة اذا جدول اللى به القوائم ظاهر
اللى بعدة زية قولت
ان طلاما الخانة مخفية مش بحسبها ولا كانها موجودة
طيب هو هيظهرالاولى وهيخفي التانية صح كدة
واحد متابع قولى الاولي فيها ايه هقولة ارجع للدرس السابق وشوف
هتلاقي فيها صورة للتصغير علامة يعني لما ادوس عليها القائمة تختفي
كدة فهمنا الكود
وطبعا اللى بعدة فكشن او دالة الاخفاء للكل طبعا
وكل ما نزود قوائم نزود في الكود دة ودة
طيب اللى بعدة دالة رقم 3
هي بتتحكم في قائمة واحدة من القائمتين
وهي هتخفي القائمة والخانة التانية وتظهر الخانة الثالثة اللى انا هظهر القائمة من خلالها
واللى بعدها هتعمل مع القائمة دي عكس الكلام
اما قبل الاخيرة والاخيره مع القائمة التانية
ولو زودنا قايمة هنزود دالتين واحده لتصغيرها واخري للتكبير
وخلص الشرح
ياجماعه اللى مش فاهم نقطة يسال من غير احراج عادي لما نسال ومش عيب اننا
نبقي مش فاهمين بس العيب بجد والغلط اللى بيبقي مطب لينا في طريق البرمجة المفتوح اننا ننقل وخلاص يبقى نبطل برمجة احسن ما ننقل اوك مستني الاسئلة والتطبيق
للي فاهم اوهيحاول يفهم انو عمل كود للقائمة ثالثة
الاشتراك في:
تعليقات الرسالة (Atom)
0 التعليقات:
إرسال تعليق