Google





 
الرئيسيةالبوابةاليوميةس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول
أفضل ألعاب الفلاش أضفها إلى موقعك مجاناًالثلاثاء يوليو 05, 2016 12:50 am من طرف  سيمونيتصميم إستايل كامل لمنتدى تقنية الحاسوبالجمعة فبراير 26, 2016 6:06 am من طرف  brave-heart90كود Template تسجيل الدخول - احلى منتدىالسبت يناير 16, 2016 2:54 am من طرف  MoHaMeD-طريقة إنشاء ظل بطريقة احترافية باستخدام برنامج الفوتوشوب ( مع شرح دقيق مرفق بالصور )الثلاثاء يناير 12, 2016 2:44 am من طرف  Mc nabulsyستايل منتدى الابداع العربيالثلاثاء ديسمبر 22, 2015 3:15 pm من طرف  علم حسناهم مميزات السيرفرات السحابيةالثلاثاء ديسمبر 22, 2015 2:26 pm من طرف  علم حسنتم تصميم بوابة عاصفة التطويرالثلاثاء ديسمبر 22, 2015 2:25 pm من طرف  علم حسنطلب تكويد الاستايل يا جماعاالإثنين ديسمبر 14, 2015 4:04 am من طرف  elsndbad2010طلب تكويد استايلالأحد ديسمبر 13, 2015 9:11 pm من طرف  الرسامطلب تصميم استايل تومبيلاتالجمعة ديسمبر 04, 2015 11:34 pm من طرف  yakoub dz

Untitled 4

شاطر | 

رقم المشاركة : ( 1 )
avatar
مدير عام
 
عدد المساهمات : 947
تاريخ التسجيل : 06/11/2013
مُساهمةاول درسم في دورة البرمجة والتكويد

كُتب : [ السبت يونيو 13, 2015 9:11 pm ]




اول اساسيات البرمجة والتعرف على اول خطوات

اولا: التخطيط لكيفية بناء الموقع:

كما عودناكم دائما انك لابد ان تضع برأسك ماذا ستفعل, لان التخطيط هو أهم شىء فى ان يخرج موقعك بصورة جيده.

لذلك أنا أحضرت ورقه وقلم ووضعت براسى شو بدى أسوى , وهذا هو المخطط اللى راح نبنى على أساسه موقعنا.......





تمام , من الصورة يتضح أنا بحاجه للاتى بالترتيب على حسب ما راح نبدأ به خطوه خطوه.......


1-انشاء ملف index.html >> وبه كود تصميم الصفحة ككل مقسمة كبلوكات (هيدر-ناف بار-فوتر-قائمة جانبيه -قائمة المقالات)

2-انشاء ملف style.css >> وبه كود css اللى بواسطته راح نقسم صفحتنا الى هذه البلوكات السابقه.

3-انشاء مجلد images >> وبداخله صور التصميم للموقع

4-انشاء مجلد includes >>وبداخله الملفات الأتيه :

-ملف header.php >> وبه راح نقتطع كود الهيدر من ملف index ,ونضعه به , حتى يسهل التعديل عليه فيما بعد

-ملف nav.php >>وبه راح نقتطع كود الناف بار من ملف index,ونضعه به,حتى يسهل التعديل عليه فيما بعد

-ملف sidebar.php >> وبه راح نقتطع كود القائمة الجانبية من ملف index,ونضعه به , حتى يسهل التعديل عليه فيما بعد

-ملف footer.php >> وبه راح نقتطع كود الفوتر من ملف index ونضعه به , حتى يسهل التعديل عليه فيما بعد

5-انشاء مجلد variables >> وبداخله ملف أكواد php, التى راح نضعها حتى نجعل الموقع أكثر ديناميكيه وحركه أكثر

والملف هو

-ملف variables.php



بهيك أعتقد سوينا تخطيط جيد فيما راح نفعله, لذلك دعنا ننطلق بناءا على هذا المخطط العمل فى الطريق لانهاء برمجة وتصميم موقعنا بكل سهوله ان شاء الله ...


1-انشاء ملف index.html

اولا: فى ملف index, راح نسوى 5 div , اى 5 بلوكات , بحيث كل بلوك يشمل جزء معين من الصفحة ..


-div للصفحة وكل واسمه wrapper

-بداخل div ال wrapper, راح نسوى div للاتى:

-div للهيدر واسمه header

-div للناف بار واسمه nav

-div للمقالات واسمه content

-div للقائمة الجانبية واسمه sidebar

-div للفوتر واسمه footer

وهذا هو الكود فى مبدئيا قبل ان نكمل عليه

رمز Code:















نستكمل الان لنقوم بملأ كل div بما يناسبه, الى ان يحين تعديله وتقسيمه بcss .....

1-div الheader >>راح نضع به عنوان الموقع

2-div الnav >>راح نضع لنكات الموقع الرئيسية

3-div الcontent >>راح نضع به المقالات

4-div الsidebar >>راح نضع به لنكات القائمة الجانبيه

5-div الفوتر >>راح نضع به حقوق الموقع

بحيث يكون الكود أصبح كالأتى...


رمز Code:









||المقـالات المضافة حديثا||


مقابله شخصيه





مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...





مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...


-------------------------------------------------------------------------------------------------------------------------


مقابله شخصيه ثانيه





مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...


-------------------------------------------------------------------------------------------------------------------------





مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...










تمام بهيك يكون انتهى ملف index بكل سهوله وبدون اى تعقيد,

طبعا لاتنسى تضيف الكود داخل وسم html والbody والhead, حتى تكتمل الصفحة بحيث يكون الشكل النهائى مكتمل.....




انتهى ملف index.html




---------------------------------------


2-انشاء ملف style.css





نستكمل معكم مع الجزء الاهم , وهو انشاء ملف التنسيق للصفحة وهو ملف style.css

حتى تفهم هذا الجزء بشكل على أعلى درجه من الفهم, فراح نأخذ الناتج النهائى للناتج وشوف كيف الابعاد والأوامر.





يمكنك مشاهدة الصورة بحجم أكبر من هــــنـــــا 



وهذه هو كود css ككل قبل أن أشرحه.

رمز Code:
body {
background-color:#fefbea;
font-family: "Tahoma", Times, serif;
font-size:14px;
color:black;
margin:0;
padding:0;
}

#wrapper {
width:960px;
background-image:url(images/bg.jpg);
margin:0 auto;
border-left:1px solid #ac8e33;
border-right:1px solid #ac8e33;
}

#header {
background-image:url(images/bg.jpg);
width:960px;
height:100px;
margin:0 auto 0 1PX;
margin-bottom:1px;
border-bottom:1px solid #ac8e33;
border-top:1px solid #ccc;
}

#header h2 {
direction:rtl;
padding:10px;

}

#nav {


width:960px;
height:40px;
border-bottom:1px solid #ac8e33;
}

#nav a {

font-weight:bold;
display: block;
float:right;
padding:10px;
text-decoration:none;
background-color: #fbf1d5;
}

#nav a:hover {
background-color:#fce18e;
height:20px;
}

#content {
direction:rtl;
width:675px;
float:left;
padding:10px;
}

#content a{
text-decoration:none;
}

#sidebar {
width:200px;
float:right;
margin-bottom:25px;
}

#sidebar a {
text-decoration:none;
}

#sidebar li {
list-style:none;
text-align:center;
}

#sidebar h3{
text-align:center;
}

#footer {

clear:both;
width:960px;
height:135px;
border-top:1px solid #ac8e33;
}

#footer p {

direction:rtl;
padding:10px;
}

#footer p a {
text-decoration:none;
}


وقبل شرحه , لاتنسى ان تشير لمسار هذا الملف, روح لملفINDEX وبين وسم HEAD اشر لملف CSS كالاتى:

رمز Code:


تمام : نبدأ نشرح ملف css خطوه خطوه

1-body : وراح نحدد فيه :

-لون خلفية الصفحة background-color

-نوع الخطوط بالصفحة font-family

-حجم الخطوط font-size

-مسح الحواف العلويه للصفحة , حتى لايوجد اى مسافات margin

ملاحظه تذكرها وضعها بذهنك: فى اى كود يخص الحواف margin,او المحاذاه الpadding دايما ترتيب الابعاد يكون كالأتى:

علوى-->يمين -->سفلى>>يسار

شو القصد؟

أقولك لو خذنا كود للحواف كالاتى:

رمز Code:
margin: 2px 3px 4px 10px;




2-->هى بُعد الحافة العلويه

3-->هو بُعد الحافة اليمنى

4-->هو بُعد الحافة السفليه

10-->هو بُعد الحافه اليسرى


طب مثلا كان الكود كالاتى:


رمز Code:
margin: 2px auto;




2-->يقصد بها الحافه العلويه

auto-->يقصد بها الحافه اليمنى, انها قابله للتمدد على حسب عرض الصفحة اللى راح تأخذه


حبيت أنبهكم لهالملاحظه لانها مهمه جدا وراح تواجهها كثير فى شغلك.......


2-wrapper: وراح نحدد فيه

-العرضwidth

-صورة الخلفية background-image

-الحواف margin

-الحد الأيسر والأيمن border-left,border-right


3-header:وراح نحدد فيه

-الطول والعرض width-height

-الحد السفليه border-bottom

-الحد العلوييه border-top

-الحافه العلويه والسفليه margin


ثم بداخل الهيدر راح نحدد ان النص اتجاهه من اليمين لليسار ولا يوجد حد بأسفل عنوان الموقع

رمز Code:
#header h2 {
direction:rtl;
padding:10px;

}



4-nav:وبداخله راح نحدد

-الطول والعرض

-الحافه السفليه

وبداخل الناف , بالنسبه للنكات الموقع الرئيسية nav a#

راح نحدد فيها

-مهم جدا -->ان تكون على هيئة بلوكات +ان تطفو باتجاه من اليمين لليسار float right & display block

-ونحدد خلفية الأزرار background-color

-والمحاذاه العلويه والتى راح تحدد ارتفاع الزر padding


رمز Code:
#nav a {

font-weight:bold;
display: block;
float:right;
padding:10px;
text-decoration:none;
background-color: #fbf1d5;
}


وأيضا, راح نحدد التأثير اللى راح يحدث عند مرور الماوس على الزر nav a:hover#

-اللون اللى راح يأخذه الزر عند مرور الماوس background-color

-وارتفاع التأثير للون على الزر height

رمز Code:
#nav a:hover {
background-color:#fce18e;
height:20px;
}

وكمل وشوف بقية الكود وراح تجده بسيط وسهل مثل السابق................


انتهى ملف css


----------------------------------------


3-انشاء مجلد images >> وبه ضع صورة الهيدر وخلفية الصفحة


--------------------------------------


4-انشاء مجلد includes >>>

فى هذا المجلد راح نسوى الملفات الاتيه :


-header.php

-nav.php

-sidebar.php

-footer.php

راح أخذ مثال لملف منهم ونطبق عليه ... وليكن header.php


كما قلنا سابقا , ان هذه الملفات راح نقتطع من ملف INDEX ,كل بلوك ونضعه على حدا

لذلك خذ كود header من ملف index, وضعه به


رمز Code:

وبالمثل فى ملف خذ كل جزء وضعه به ............

توقيع : الرسام


_________________



رقم المشاركة : ( 2 )
avatar
مدير عام
 
عدد المساهمات : 947
تاريخ التسجيل : 06/11/2013
مُساهمةرد: اول درسم في دورة البرمجة والتكويد

كُتب : [ السبت يونيو 13, 2015 9:14 pm ]




يتبع


-----------------------------


5- انشاء مجلد variables

وبداخله راح نضع ملف الخاص بأكواد الphp

وملفنا راح يكون اسمه variables.php

فائدته:

1-فلنفرض انك أردت ان تسوى جمله php لنحدد به اسم عنوان الموقع فى الهيدر , بحيث يمكنك التغيير عليها عن طريق هالملف

2-فلنفرض انك أردت ان تسوى جمله php لنحدد به حقوق الموقع والفوتر,بحيث يمكنك التغيير عليها عن طريق هالملف.


نشوف كيف......

1-افتح ملف variables.php وضعه به هالكود:


رمز Code:

$heading='عالم مطورى الويب لتعليم البرمجة والتصميم';

$footer='تصميم وبرمجة vista-design';

?>



2-ارجع لملف header.php الموجود بداخل ملف includes

ثم راح نستبدل جمله الهيدر h2 بأمر php بحيث نقدر نستدعى هالجمله من ملف variables.php

بعد فتح ملف header.php,نستدعى ملف variables.php ثم نعطى أمر الطباعه للامر

بحيث راح يصبح كود ملف header.php



رمز Code:



بالمثل راح تطبق نفس النظام على بقية الصفحات ...............



أخيرا: افتح ملف index.html حتى نشير لمسار ملفاتنا داخل مجلد includes

بحيث يكون الكود النهائى لصفحة index كالاتى


رمز Code:
















عالم مطورى الويب لتعليم البرمجة والتصميم













||المقـالات المضافة حديثا||


مقابله شخصيه




مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...





مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...


-------------------------------------------------------------------------------------------------------------------------



مقابله شخصيه ثانيه





مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...


-------------------------------------------------------------------------------------------------------------------------





مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...















ثم فى النهاية , قم بتغيير اسم ملف index.html الى index.php


ومبروك عليك موقع خفيف ولذيذ, بنظام القوالب الرائع



لتحميل ملــــــــــــــــــــــــــفـــــــــــــــــات الدرس اضغـــــــــــط هــــــــــــــــــــــنــــــــــــــــــــــــــ ـا





vista-design




www.advphp.com







انتهى الجزء الاول من الدرس
 
[size=48]الجزء الثانى[/size]
 


عوده من جديد أعضاء وزوار موقعنا الكرام,لقد تأخرت قليلا فى تنزيل الدروس نظرا لانى كنت أجهز لهذا الدرس لانه من الدروس المهمه, ونظرا لكثرة الطلبات منكم بأن تروا مثل هذا النوع من الشروحات , فقد قررت أن أجعل هذا الدرس كسلسله سوف نقوم بتطويرها خطوه خطوه من برمجة وتصميم حتى نصل لتصميم وبرمجة موقع متكامل يصلح لكافة الأغراض, وفى هذا الدرس سوف انتقل معكم للتطوير الثانى 
من الدرس السابق شرح برمجة وتصميم موقعك خطوه بخطوه بفكرة نظام القوالب بcss+php

وفى هذا التطوير الثانى سوف نقوم بالتحسينات الأتيه للموقع :








وبعد ان ننهى هذا الدرس سوف تلاحظ الفرق فى التطوير واضحا:

واليكم الناتج النهائى:


الموقع قبل التطوير الثانى:





الموقع بعد التطوير الثانى:








دعونا ننطلق سويا لنرى ما سنقوم بعمله ان شاء الله 


أولا فهرس الدرس:




1-شرح عمل background للصفحة 
2-شرح عمل background للمقالات داخل wrapper
3-شرح اعادة توزيع الهيدر وعمل تصميم له
4-شرح عمل ناف بار بcss بشكل جذاب
5-شرح عمل قائمة رئيسية جانبية ب css بشكل جذاب
6-شرح طريقة عرض المقالات وجلبها من صفحاتها بدون تحميل الصفحة مرة أخرى ب jquery
7-انهاء الشكل النهائى لكود php استعداد للتطوير الثالث لعمل لوحة تحكم بالمقالات 



اولا: شرح عمل background للصفحة :

-افتح ملف style.css وفى كود body سوف نقوم بعمل background
وهذا هو كودها:



رمز Code:

background-image:url(images/back.jpg) ;


والصوره المستخدمه كخلفيه سوف تكون:




ثانيا:شرح عمل خلفية للمقالات داخل wrapper

-فى wrapper# سوف نقوم باضافة خلفية كالاتى:



رمز Code:

background-image:url(images/bg.jpg);


وسوف نستخدم الصورة الأتيه:





ثالثا:شرح اعادة توزيع الهيدر وعمل تصميم له:

فى header# سوف نقوم بعمل خلفية وهذا هو كودها:



رمز Code:

background-image:url(images/header.jpg);


والصورة المستخدمه هى:




شوفتوا الموضوع لحد الأن بسيط

نبدأ ندخل فى الأصعب قليلا..............


رابعا: شرح عمل ناف بار بcss بشكل جذاب:

1-سوف نقوم بتعديل كود الناف بار فى الدرس السابق بحيث يكون طريقة العرض للناف بار
كلست li
وهذا هو الكود فى صفحة nav.php



رمز Code:




2-نريد ان نضيف التأثير عند مرور الماوس:

نظرا لطول الدرس سوف اضع لكم كود css جاهز 



رمز Code:


ul#nav{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:40px;
text-transform:uppercase;
font-size:13px;
background:transparent url("images/black.jpg") repeat-x top left;
font-family:tahoma,Arial,Verdana,sans-serif;
}
ul#nav li{
display:block;
float:right;
margin:0;
pading:0;
border-right:1px solid #ffffff;
}
ul#nav li a{
display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
height:40px;
}
ul#nav li a:hover{
background:transparent url("images/blue.jpg") repeat-x top left;
}



وبالنسبة لخلفية أزرار الناف بار سوف نستخدم صورتين:

صورة black.jpg الخاصة بخلفية الزر, وصورة blue.jpg الخاصة بتغير لون الزر بمرور الماوس عليه
وهما موجودين فى مجلد الصور images


الان شكل الموقع لحين هذه المرحلة سوف يصبح شكله كالأتى:





خامسا-شرح عمل قائمة رئيسية جانبية ب css بشكل جذاب:

افتح ملف sidebar.php وسوف نقوم بتعديل كوده مره أخرى ليصبح كالاتى:



رمز Code:




وسوف نقوم بأضافة تأثير css عليه باستخدام الكود الاتى:



رمز Code:

.outer{
list-style:none;
margin:0px;
padding:0px;
}


#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-width: 1px;

}
#menu ul{
list-style:none;
margin:0px;
padding:0px;
}

#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
font-weight:normal;
}

#menu li a:link, #menu li a:visited {
color: #FFFFFF;
display: block;
background: url(images/v6.gif);
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}

#menu li a:hover {
color: #666666;
background: url(images/v6.gif) 0 -32px;
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}

#menu li a:active {
color: #666666;
background: url(images/v6.gif) 0 -64px;
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}



وسوف نستخدم خلفية الأزرار الصورة v6.gif


بحيث بعد هذا التعديل سوف يصبح شكل القائمة كالأتى:

  



يتبع الشرح

توقيع : الرسام


_________________



رقم المشاركة : ( 3 )
avatar
مدير عام
 
عدد المساهمات : 947
تاريخ التسجيل : 06/11/2013
مُساهمةرد: اول درسم في دورة البرمجة والتكويد

كُتب : [ السبت يونيو 13, 2015 9:16 pm ]




يتبع




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

طبعا هذا تقريبا هو أهم ما فى الموضوع من تحسين , وأحببت أن أشرحه باستفاضه لان أحب فن الjquery لانها رائعه بصراحه وتستحق التعب 

أولا: ملاحظه هامه جدا قبل البدء:

نظرا لان jquery لها بعض المشاكل مع اللغة العربية, خصوصا فى طريقة التحميل للصفحات بواسطتها وعرضها للغة العربية, لذلك سوف أقدم لكم حلا قاطعا تقدر تستخدمه فى اى تعامل لك مع الjuqery
او اى ملف اخر مسويلك مشكلة فى الترميز

-اولا سوف نقوم بأستخدام notepad++

يمكنك تحميلها من الرابط الاتى [url=https://sourceforge.net/projects/notepad-plus/files/notepad%2B%2B releases binary/npp 5.6.8 bin/]اضغط هــــــــنـــــــا[/url]

اى صفحة تتعامل بها , اذا واجهتك مشكلة بالترميز وظهور الحروف بأشكال غريبه عليك بعمل الخطوات الاتية :

سوف نستخدم تغيير الencoding لكل الصفحة ب utf-8 ثم نقوم بحفظ الصفحة :




فقط , وبهيك تتخلص من مشاكل الترميز .............


نرجو لموضوعنا بخصوص شرح تحميل وعرض المقالات بدون تحميل الصفحة

اولأ: ارجع للمثال اللى طورناه وشوف طريقة عرض المقالات, عن طريق الضغط على زر
من أزرار الناف بار حتى تفهم القصد........

ثانيا: لابد ان نفهم الفكرة لهذه الطريقة الرائعه, لذلك أنظر لهذه الصورة لنفهم الفكرة سويا.



هل فهمت فكرة الصورة؟, مو مشكلة نكمل الشرح وراح تفهم فى الاخر ان شاء الله 

1-اولا ارجع لملف nav.php وشوف اننا اعطيناه شكل اللست li
كالاتى كمثال:



رمز Code:




2-ثانيا نستخدم ملف js.js لنضفى تأثير الjquery فى عرض المقالات :

-فى ملف index.php راح نستدعى ملف المكتبة jquery +ملف js.js



رمز Code:






-دعونا نشرح ملف js.js

فكرته بسيطه وهى اننا سنقوم بعمل التاثير عن طريق احداث تغييرات على الزر
بعد ان قمنا بظبط كود css والخطوات كالأتى:

اولا: تحميل المقال فقط من الصفحة والذى هو مدرج داخل id اسمه content#
(راجع كود index.php ) , بحيث يقوم الكود بجلب مسار الصفحة 



رمز Code:

var toLoad = $(this).attr('href')+' #content';


ثانيا: سنقوم بأخفاء المقال الظاهر لك بعد ان يتم ضغط الزر ليتم جلب المقال من الصفحة الذى ضغطت بها زرها



رمز Code:

$('#content').hide('fast',loadContent);


ثالثا: سوف نستخدم تأثير جميل وهو عرض صورة تحميل الصفحة لحين تظهر
اولا: فى كود css سوف نستخدم الكود الأتى:



رمز Code:

#load {
display: none;
position: absolute;
left: 30px;

/*distance from top edge of image till top edge of wrapper div */
top: 10px;
/*right:30px; distance from rt edge of image till rt border of wrapper div */
background: url(images/ajax-loader.gif);
width: 54px;
height: 55px;
text-indent: -9999em;
}


طبعا انا كاتب الكلام بالانجلش حتى لا أنسى , وهذا كتابتى وليس نقلا من أحد 

والصورة المستخدمة 







الحين نرجع لملف js.js مره اخرى ونكمل كتابة الكود: 
بعد عرض الصورة الخاصة بتحميل الصفحة , ووقت يتم تحميلها سوف نقوم بأخفاءها



رمز Code:

$('#load').remove();


وسوف نقوم بأرفاق هذه الصورة باستخدام الكود الاتى:



رمز Code:

$('#wrapper').append('LOADING...');




رابعا: سنقوم بعمل اخفاء تدريجى لحين تحمل الصفحة الاخرى كالاتى:


رمز Code:

$('#load').fadeIn('normal');


[size=16][size=18]
باقى الكود بصراحة تقدر تضعه مباشرة, لانى أخذت الفكرة من أحد الأسكربتات وطبقتها على هذا الدرس 
وحبيت أشرحها بعد فهمها وتطبيقها على درسنا ولله الحمد

وتقدر تشوف التأثير اللى أقصده من خلال هذه الصورة:




بهيك انتهت هذه الجزئيه .......



سابعا: انهاء الشكل النهائى لكود php استعداد للتطوير الثالث لعمل لوحة تحكم بالمقالات 

أريد ان أبشركم بأننا بعد أن وصلنا لهذه المرحلة , فبهيك أصبحت ملفات الموقع مهيئة لان نستخدم الاوامر البرمجية ب php, وهذا ما سوف يتم فعله فى التطوير الثالث ان شاء الله 


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



بالتوفيق




لتحميل التطوير الثانى اضغــــط هــــنا 



أخوكم vista-design

 
[/size][/size]

[size=48]الجزء الثالث[/size]



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

1-سأستكمل معكم دروس تطوير وبرمجة موقع ب php+css الى ان نصل لبرمجة اسكربت بلوحة تحكم متكامل ان شاء الله 

2-سأبدأ فى شرح الفريم ورك الخاص ب php وهو الcodeigniter


وخلونا فى هذا الدرس ان أبد نستكمل معكم فى هذا الدرس

التطوير الثالث لدرس برمجة وتصميم موقع ب php+css


ودعونا نتعرف على فهرس هذا الدرس وما سيتم انجازه بالنظر 
لهذه الصوره.......




وخلونا نشوف صوره للناتج النهائى لملفات الموقع بعد برمجتها كلها..



تمام , نبدأ على بركة الله .....

الجزء الاول:شرح نظام تسجيل الدخول للوحة التحكم

انظر للصوره لنعرف متطلبات تنفيذ هذه الخطوه...




1-انشاء قاعدة البيانات وجدول العضويات 

-اذهب لل phpmyadmin , ثم قم بعمل قاعدة بيانات بأسم final3




-ثم قم بالذهاب من فوق لامر sql لتنفيذ أمر عمل الجدول اللى راح يكون اسمه members وراح نضيف عضوية الادمن وراح نسميها كيوزر وهو vista-design وباسورد 1234


رمز Code:
CREATE TABLE `members` (
`id` int(4) NOT NULL auto_increment,
`username` varchar(65) NOT NULL default '',
`password` varchar(65) NOT NULL default '',
PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=2 ;

--
-- Dumping data for table `members`
--

INSERT INTO `members` VALUES (1, 'vista-design', '1234');
[size]



ملاحظه: أرجو ان يتم تجاهل اى شىء يتعلق بسيكيورتى الاوامر التى سننفذها سويا, فالدرس الهدف منه هو تعليمك ووضعك على اول الطريق , لذلك قد يأتى أحد مثلا ويعلق على نقطة الحماية وعلى سبيل المثال ذكر ان الباسورد فى قاعدة البيانات غير مشفر, فأنا حبيت أضع هذه التنبيه 
لابين لكم الغرض من هذا الدرس ....


نكمل.......



2-انشاء وبرمجة ملفات نظام تسجيل الدخول للوحة التحكم 


كما رأينا فى الملفات المطلوبه لنظام تسجيل الدخول سوف نقوم ببرمجة كل ملف خطوه خطوه ....

1-برمجة ملف login.php الخاص بمربع تسجيل الدخول 

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

وكهيكل برمجى لكود html, سوف يكون الكود البدائى هكذا 


رمز Code:
[/size]

































[size]

تطلع للاكواد السابقه جيدا, ثم بعدها سوف نملا كل خليه بالبيانات الخاصه بها بحيث يصبح الكود كاملا هكذا.......


رمز Code:
[/size]



































دخول الأعضاء
:اليوزر
:الباسورد
  








[size]

لاحظ فى الكود السابق الاتى:
1-اننا حددنا فى الفورم صفحة التنفيذ checklogin.php , وهى الصفحة 
اللى راح تقوم بفحص اليوزر والباسورد والتأكد من وجودهم فى قاعدة البيانات 


رمز Code:
[/size]
[size]
2-انه يوجد ثلاث انواع للinput

اول input وهو لليوزر ونوعه text

رمز Code:
[/size]
[size]
ثانى input وهو للباسورد ونوعه password

رمز Code:
[/size]
[size]
ثالث input وهو لزر التنفيذ ونوعه submit


رمز Code:
[/size]
[size]

وطبعا راح نضيف تعريف وترميز الصفحة فى الاول قبل هذا الكود 

[CODE]



تسجيل الدخول






بهيك انتهينا من هذا الملف......


2-برمجة ملف checklogin.php الخاص بالتحقق من اليوزر والباسورد

خلونا الاول نشوف كود هذا الملف ثم سنقوم بشرحه


رمز Code:
[/size]
ob_start();
$host="localhost"; // Host name
$username="root"; // Mysql username
$password="root"; // Mysql password
$db_name="final3"; // Database name
$tbl_name="members"; // Table name

// Connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
mysql_query("set names 'utf8';");

// Define $myusername and $mypassword
$myusername=$_POST['myusername'];
$mypassword=$_POST['mypassword'];

// To protect MySQL injection (more detail about MySQL injection)
$myusername = stripslashes($myusername);
$mypassword = stripslashes($mypassword);
$myusername = mysql_real_escape_string($myusername);
$mypassword = mysql_real_escape_string($mypassword);

$sql="SELECT * FROM $tbl_name WHERE username='$myusername' and password='$mypassword'";
$result=mysql_query($sql);

// Mysql_num_row is counting table row
$count=mysql_num_rows($result);
// If result matched $myusername and $mypassword, table row must be 1 row

if($count==1){
// Register $myusername, $mypassword and redirect to file "admin.php"

session_register("myusername");
session_register("mypassword");
header("location:admincp/index.php");
}
else {
echo "اليوزر او الباسورد خطأ";
echo "
";
echo "";
echo "عوده للخلف";
echo "
";
}

ob_end_flush();
?>
[size]

شرح الملف:

1-بدأنا باستخدام دالة التخزين المؤقت output buffering 
والتى استخدمناها لتقوم بتخزين البيانات المرسله قبل ارسالها


رمز Code:
[/size]
ob_start();
[size]
2-ثم نحدد متغيرات الاتصال بقاعدة البيانات واوامر الاتصال 


رمز Code:
[/size]
$host="localhost";
$username="root";
$password="root";
$db_name="final3";
$tbl_name="members";


mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
mysql_query("set names 'utf8';");
[size]
ولاحظ الفانكشن السابقه:


رمز Code:
[/size]
mysql_query("set names 'utf8';");
[size]
ووظيفتها ارسال البيانات لقاعدة البيانات بالترميز utf-8 وهى خطوة مفضلة فى تخزين البيانات 

3-ثم سنقوم بعمل متغيرين لنخزن فيهم البيانات المرسله والتى تم كتابتها فى 
فورم اليوزر والباسورد


رمز Code:
[/size]
$myusername=$_POST['myusername'];
$mypassword=$_POST['mypassword'];
[size]
وكنقطه أمنيه سنقوم باضافة دالة stripslashes وmysql_real_escape_string لتأمين المدخلات التى سيتم ارسالها من فورم اليوزر والباسورد لقاعدة البيانات لتجنب حقن قاعدة البيانات واختراقها



رمز Code:
[/size]
$myusername = stripslashes($myusername);
$mypassword = stripslashes($mypassword);
$myusername = mysql_real_escape_string($myusername);
$mypassword = mysql_real_escape_string($mypassword);
[size]
ثم بعدها سنقوم باختيار القاعدة واليوزر لنرى مطابقة اليوزر والباسورد ومطابقتها بالعضويات المخزنه فى القاعده ام لا..
واذا نعم , سنقوم بعمل جلسة لتخزين هذه البيانات الصحيحه ليتم 
العوده لها لاحقا دون الحاجه لاعادة التحقق مره اخرى 


رمز Code:
[/size]
$sql="SELECT * FROM $tbl_name WHERE username='$myusername' and password='$mypassword'";
$result=mysql_query($sql);
$count=mysql_num_rows($result);
if($count==1){
session_register("myusername");
session_register("mypassword");
header("location:admincp/index.php");
}
else {
echo "اليوزر او الباسورد خطأ";
echo "
";
echo "";
echo "عوده للخلف";
echo "
";
}
[size]

ولاحظ انه فى حالة انه البيانات صحيحه والعضويه موجوده بالفعل
سوف يتم تسجيل الدخول وتحويل المستخدم لصفحة admincp/index.php

ام اذا لم يتم ايجاد عضوية سيتم ارجاعه لصفحة الدخول مره اخرى login.php



يتبع الشرح[/size]
توقيع : الرسام


_________________



رقم المشاركة : ( 4 )
avatar
مدير عام
 
عدد المساهمات : 947
تاريخ التسجيل : 06/11/2013
مُساهمةالدرس الثاني في دروة برمجة وتصميم المواقع

كُتب : [ السبت يونيو 13, 2015 9:28 pm ]




ملاحظة الدرس تابع للدرس الاول من الدورة

واخيرا, نغلق فانكشن التخزين المؤقت لنرسل البيانات بالفعل لتنفيذها


رمز Code:
ob_end_flush();
[size]


بهيك ينتهى شرح هذا الملف............



وبهيك ينتهى الجزء الاول من الموضوع 

-----------------


الجزء الثانى:شرح نظام الفريمات وتقسيم لوحة التحكم

بالنسبه لهذا الجزء , فهو مهم شرحه , لان هيكل لوحة التحكم الشكلى 
يعتمد على نظام الفريمات , وسوف أقوم بشرح لكم بكل سهوله حتى تفهموا 
الغرض من هذا الجزء

-فلنفرض اننا نريد عرض أكثر من صفحة فى نفس الصفحة , يعنى مثلا
عندنا صفحة اسمها محمد وصفحة اسمه أحمد وصفحة اسمها مصطفى 
وانا اريد تقسيم صفحة محمد بحيث يكون بها صفحة أحمد وصفحة مصطفى 
بحيث مثلا ان تأخذ صفحة محمد مساحة 30% من مساحة الصفحة الكلية 
وصفحة أحمد 30% من مساحة الصفحة الكلية وصفحة مصطفى 40% من مساحة 
الصفحة بحيث تصبح المساحة الكلية للثلاث صفحات معا 100%

هذا الفكره البسيطه راح نحولها سويالشىء واقعى يستخدم بكثره 
فى لوحة تحكم تراها


اولا: خلونا نسوى مجلد اسمه admincp داخل مجلد final3


بداخل هذا الملف سوف نقوم ببرمجة ثلاث ملفات 

1-frame.html
admin.html-2
page1.html-3





اولا: ملف frame.html

والكود الخاص به هو :


رمز Code:
[/size]




[size]




طبعا هذا هو الكود اللى راح يقسم صفحة لوحة التحكم لجزئين 
جزء لعرض صفحة page1.html وراح يأخذ 50% من عرض الصفحة وراح يكون على يسار الصفحة , والجزء الاخر لعرض صفحة admin.html , وراح يأخذ
10% من عرض الصفحة وراح يكون على اليمين 




ملاحظه هامه جدا: عند وضع كود frameset السابق لابد ان تنتبه انك لابد 
ان تحذف كود body الخاص بالصفحة , يعنى اياك وان تضع كود frameset
بداخل كود body, لان وضع وسم frameset يحل محل وسم body فى الصفحة


بهيك يكون انتهى شرح الجزء الثانى من الدرس...............



سأستكمل شرح بقية الجزئين المتبقين فى الدرس القادم لانها تحتاج لدرس منفصل ..........

بالتوفيق.............
[/size]


 
 
[size=48]الجزء الرابع



نستكمل معكم زوار موقعنا الكرام التطوير الثالث, وكنا قد انهينا فى الدرس السابق الجزء الثانى الخاص
بنظام الفريمات ........

نكمل على بركة الله .........

الجزء الثالث: شرح برمجة ملفات لوحة التحكم والتحكم بالمقالات 

دعونا أولا كما عودناكم دائما ان نضع مخطط لما سوف سيتم انجازه سويا




اولا: انشاء قاعدة البيانات الخاصه بتخزين المقالات 

1-اذهب لنفس القاعده التى قمنا بأنشاءها والتى سميناها فى الدرس السابق final3
ومن أمر sql من فوق, راح نضيف أمر عمل جدول واسمه news وبه الاعمده 

[/size]
id
title: لتخزين عنوان المقال
content:لتخزين محتوى المقال
author: لتخزين كاتب المقال
date :لتخزين تاريخ كتابة المقال
[size]
رمز Code:
[/size]
CREATE TABLE `news` (
`id` int(11) NOT NULL auto_increment,
`title` text NOT NULL ,
`content` text NOT NULL,
`author` text NOT NULL,
`date` datetime NOT NULL default '00-00-0000 00:00:00',
PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=10 ;
[size]



ثانيا: عمل ملف الاتصال بقاعدة البيانات وراح نسميه site.inc.php

وقم بوضعه داخل مجلد final3

وهذا هو كوده :


رمز Code:
[/size]


$confg['db_uname'] = "root";
$confg['db_paswd'] = "root";
$confg['db_host'] = "localhost";
$confg['db_dbase'] = "final3";



function db_login() {

global $confg;

$link = @mysql_connect($confg['db_host'], $confg['db_uname'], $confg['db_paswd']) or die("Error connecting: " . mysql_error());

@mysql_select_db($confg['db_dbase'], $link);
mysql_query("set names 'utf8';");
}



function db_logout() {

@mysql_close($link);

}

?>
[size]

طبعا فى الاول حددنا متغيرات اسم الهوست واليوزر وباسورد القاعده واسم قاعدة البيانات


رمز Code:
[/size]
$confg['db_uname'] = "root";
$confg['db_paswd'] = "root";
$confg['db_host'] = "localhost";
$confg['db_dbase'] = "final3";
[size]

ثم قمنا بعمل فانكشن لتنفيذ أمر الاتصال بقاعدة البيانات


رمز Code:
[/size]
function db_login() {

global $confg;

$link = @mysql_connect($confg['db_host'], $confg['db_uname'], $confg['db_paswd']) or die("Error connecting: " . mysql_error());

@mysql_select_db($confg['db_dbase'], $link);
mysql_query("set names 'utf8';");
}
[size]
ولاحظ اخر جملة لارسال الاستعلام بترميز utf-8 ليتم تخزين البيانات بهذا الترميز




ثالثا: برمجة ملف الاندكس index.php الخاص بلوحة التحكم

نشوف كوده الاول ثم نشرحه:


رمز Code:
[/size]
session_start();
if(!session_is_registered(myusername)){
header("location:../login.php");
}
?>


include("frame.html");


?>
[size]

فى هذا الملف اللى راح نضعه داخل مجلد admincp, راح يكون كوده بسيط
وهو عباره انكلود لجلب ملف frame.html اللى سويناه فى الدرس السابق
الخاص بتقسيم لوحة التحكم



ويسبق هذا الكود جلسة لتقوم بتسجيل جلسة تسجيل الدخول لهذه المنطقه المحميه , بحيث يتم 
الدخول للوحة التحكم عن طريق نموذج تسجيل الدخول فقط login.php


طبعا كنا فى الدرس السابق قد قمنا بعمل الثلاث ملفات وهم frame.html,admin.html,page1.html
ولكن لم نقوم بعمل الكود الخاص بالملفين admin.html وpage1.html


اولا: نشوف كود ملف admin.html



رمز Code:
[/size]


لوحة التحكم






[size]
ونضيف لهذا الكود بعض التجميل ب css فى نفس الصفحة


رمز Code:
[/size]
[size]

بحيث ستظهر القائمه اليمنى للوحة التحكم بالشكل الاتى :






ثانيا: نشوف كود ملف page1.html



رمز Code:
[/size][size]

طبعا الكود بسيط, وانا بعتذر عن تجميل الكود داخل الاوسمه لانى لا احب هذه الطريقه, لكن وجدت الملف حجمه صغير فى كوده , قلنا ما راح تأثر كثير

بس فيه ملاحظه مهمه أريدكم تتعلموها, وهى ملاحظة عبارة target وانى سويتها top_ وهى مهمه جدا

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



بعد ما سوينا كود صفحة page1.html راح يظهر يسار لوحة التحكم كالاتى:




----------------------------------------

رابعا:برمجة ملفات التحكم بالمقالات

كنا سوينا مجلد فى الدرس السابق اسمه admincp, الحين بداخل هذا المجلد
قم بعمل مجلد اسمه admin , وراح نقوم بداخله بوضع ملفات التحكم بالمقالات من لوحة التحكم 

add.php
list.php
edit.php
delete.php


اولا: برمجة ملف add.php

وهذا هو كود هذه الصفحة :


رمز Code:
[/size]





اضافة مقال جديد



require_once("../../site.inc.php"); //Calls in the previous file we created

// form not yet submitted
// display initial form
if (!$submit)
{

?>



اضافة مقال جديد




العنوان




المقال




اسم الكاتب








} else {

//set up error array
$err = array();
$count = 0;

//validate the user text input fields
if (!$title) { $err[$count] = "Invalid entry: title"; $count++; }

if (!$content) { $err[$count] = "Invalid entry: content"; $count++; }

if (!$author) { $err[$count] = "Invalid entry: author"; $count++; }

// if no error found...
if (sizeof($err) == 0) {


db_login(); //we defined this function in site.inc.php

// generate and execute query to insert the post
$query = "INSERT INTO news(id, title, content, author, date) VALUES(0, '$title', '$content', '$author', NOW())";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// print result
echo "تم اضافة المقال العوده لقائمة المقالات.";
} else {
// errors found
// print as list
echo "حدث خطأ غير متوقع
";
echo "
    ";
    for ($x=0; $x echo "
  • $errorList[$x]";
    }
    echo "
";
}
}
?>
[size]


شرح الكود بأختصار:

اولا: الاتصال بالقاعدة +عمل فورم ادخال البيانات وكتابتها



رمز Code:
[/size]
require_once("../../site.inc.php"); //Calls in the previous file we created

// form not yet submitted
// display initial form
if (!$submit)
{

?>



اضافة مقال جديد




العنوان




المقال



اسم الكاتب









} else
[size]



والحين راح نضيف كود للتحقق من المدخلات فى الفورم

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

ولو كانت الفورمز كلها مدرج بها اى عبارة, راح نسوى حالة if بحيث لو حجم مصفوفة الخطأ =0 اى انه لا يوجد اى خطأ, راح نتصل بالقاعدة وندخل البيانات فى الفورمز فى قاعدة البيانات

نشوف الكود




رمز Code:
[/size]
{


$err = array();
$count = 0;


if (!$title) { $err[$count] = "Invalid entry: title"; $count++; }

if (!$content) { $err[$count] = "Invalid entry: content"; $count++; }

if (!$author) { $err[$count] = "Invalid entry: author"; $count++; }


if (sizeof($err) == 0) {
[size]


واخيرا الاتصال وتخزين البيانات فى القاعدة



رمز Code:
[/size]
db_login(); //we defined this function in site.inc.php

// generate and execute query to insert the post
$query = "INSERT INTO news(id, title, content, author, date) VALUES(0, '$title', '$content', '$author', NOW())";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// print result
echo "تم اضافة المقال العوده لقائمة المقالات.";
} else {
// errors found
// print as list
echo "حدث خطأ غير متوقع
";
echo "
    ";
    for ($x=0; $x echo "
  • $errorList[$x]";
    }
    echo "
";
}
}
?>
[size]

الحين محتاجين لعمل صفحة لامكانية تعديل الموضوع او حذفه,

راح نسوى صفحة بها لست لادراج كافة المواضيع المضافة مع اضافة خيار التعديل او الحذف

وراح نسميها list.php

وانا شارح الكود بداخله


رمز Code:
[/size]



//جلب ملف الاتصال بقاعدة البيانات
include("../../site.inc.php");
//تنفيذ أمر الاتصال بقاعدةالبيانات
db_login();

//اختيار عنوان المقالات وجلبها من القاعده
$query = "SELECT id, title FROM news ORDER BY id DESC";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

//جلب عناوين المقالات
if (mysql_num_rows($result) > 0) {

while($send = mysql_fetch_object($result)) {

echo" $send->title - تعديل المقال - حذف المقال

";
}

}

?>


[size]



الحين نقوم بعمل ملف edit.php الخاص بتعديل المقالات المخزنه بالفعل داخل قاعدة البيانات



شوف الملف وشرحه بداخله 


رمز Code:
[/size]

//جلب ملف الاتصال بقاعدة البيانات
include("../../site.inc.php");

//فى حالة عدم الضغط على زرالتحديث سوف يتم الاتصال بقاعدة البيانات
if (!$submit)
{
db_login();

//اختيار كافة البيانات من جدول الاخبار
$query = "SELECT * FROM news WHERE id = '$id'";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

//اذا تم ايجاد مقالات مخزنه
if (mysql_num_rows($result) > 0)
{
// حول هذه البيانات المخزنه فى هذا المتغير
$send = mysql_fetch_object($result);

//الخطوه القادمه لعمل الفورم بداخله البيانات اللى سيتم جلبها من جدول الاخبار
?>



تعديل المقال





عنوان المقال:




نص المقال:



كاتب المقال:










}
// اذا لم يتم جلب اية بيانات

else {
echo "هذا المقال غير موجود";
}
}

// سيتم تحديث البيانات فى الاوامر القادمه
else
{



$errorList = array();
$count = 0;


if (!$title) { $errorList[$count] = "Invalid entry: title"; $count++; }

if (!$content) { $errorList[$count] = "Invalid entry: content"; $count++; }

if (!$author) { $errorList[$count] = "Invalid entry: author"; $count++; }

if (sizeof($errorList) == 0) {
db_login();

// تنفيذ خطوة تحديث بيانات المقال المخزنه بالقاعده بعد التحقق بالاوامر السابقة من خلو المقال من اية اخطاء
$query = "UPDATE news SET title = '$title', content = '$content', author = '$author' WHERE id = '$id'";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// رسالة تأكيد التحديث للبيانات
echo "تم تحديث بيانات المقالعوده للرئيسية .";

} else {
// errors occurred
// print as list
echo "لقد حدث خطأ غير متوقع
";
echo "
    ";
    for ($x=0; $x {
    echo "
  • $errorList[$x]";
    }
    echo "
";
}
}

?>
[size]

بحيث راح نشوف شكل الصفحة كالاتى بعد زر تعديل المقال



نأتى الان لصفحة حذف المقالات واسمها delete.php


رمز Code:
[/size]


//جلب ملف الاتصال بقاعدة البيانات
include("../../site.inc.php");
// تنفيذ فانكشن الاتصال الموحوده بالملف السابق الذى تم جلبه
db_login();

// تنفيذ أمر حذف المقال من جدول الاخبار
$query = "DELETE FROM news WHERE id = '$id'";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// رسالة تأكيد الحذف
echo "تم الحذف بنجاح عودة لقائمة المقالات.";


?>
[size]

بهيك تقريبا نكون انتهينا من الصفحات التحكم المقال من لوحة التحكم 





الجزء الرابع : شرح طريقة عرض المقالات عن طريق لوحة التحكم بالرئيسية 


طبعا كثير من يريد التعرف على هذه الخطوة , وأنا سوف أشرحها لكم بشكل مبسط ومفهوم بأذن الله


اولا: حتى نقوم بعرض المقالات المخزنه فى قاعدة البيانات وعرضها بالرئيسية , علينا ان نقوم ببرمجة
ملف خاص بجلب البيانات من القاعدة 

لذلك قم بعمل ملف اسمه article.php داخل مجلد الموقع final3

وهذا هو كوده :


رمز Code:
[/size]
include("site.inc.php");

db_login();

//Generate the query so we can retrieve all titles in the DB in descending ID order

$query = "SELECT id,title,content,author,date FROM news ORDER BY id DESC";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// if records are present
if (mysql_num_rows($result) > 0) {

while($send = mysql_fetch_object($result)) {
?>






test






echo "$send->author";
}}
?>






echo"$send->content";


?>

[size]

شرح الملف:

1-الاتصال بقاعدة البيانات وجلب كافة أعمدة جدول الاخبار



رمز Code:
[/size]
include("site.inc.php");

db_login();

$query = "SELECT id,title,content,author,date FROM news ORDER BY id DESC";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());
[size]

2-لو تم ايجاد مقال سوف يتم عمل لوب لجلب كافة المقالات ,وسنخزن هذه المقالات التى تم جلبها فى 
المتغير send$


رمز Code:
[/size]
if (mysql_num_rows($result) > 0) {

while($send = mysql_fetch_object($result)) {
[size]
3-بداخل هذا اللوب, سوف نقوم بعمل جدول table والذى بداخله سوف نقوم بالدخول للمتغير send اللى خزنا به المقالات, لنقوم بجلب محتوى وكاتب المقال


رمز Code:
[/size]
?>





test







echo "$send->author";
}}
?>






echo"$send->content";


?>
[size]



الحين نكون انتهينا من برمجة هذا الملف, 



بعد هيك , نروح لملف الاندكس الرئيسى للموقع نفسه index.php ونقوم بفتحه 

وسوف نقوم بعمل انكلود لجلب الملف السابق article.php ليقوم بعرض المقالات المخزنه 
بقاعدة البيانات 


رمز Code:
[/size][size]

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

فى النهاية , مبروك عليك , سوف تظهر لك المقالات المخزنه بقاعدة البيانات 


  اتمنى الفائدة للجميع



ملاحظة الشرح منقول من موقع مشروع الويب لتطوير وبرمجة وتصميم المواقع[/size]

توقيع : الرسام


_________________



رقم المشاركة : ( 5 )
avatar
 
عدد المساهمات : 13
تاريخ التسجيل : 30/06/2015
مُساهمةرد: اول درسم في دورة البرمجة والتكويد

كُتب : [ الخميس يوليو 02, 2015 12:07 am ]




شكرا لك

توقيع : Gta_amine

رقم المشاركة : ( 6 )
avatar
 
عدد المساهمات : 7
تاريخ التسجيل : 31/05/2015
مُساهمةرد: اول درسم في دورة البرمجة والتكويد

كُتب : [ الخميس يوليو 09, 2015 11:52 pm ]




درس جيد ولكن التنسيق خربان اعتقد

توقيع : M0dy

رقم المشاركة : ( 7 )
avatar
 
عدد المساهمات : 21
تاريخ التسجيل : 29/08/2015
مُساهمةرد: اول درسم في دورة البرمجة والتكويد

كُتب : [ السبت أغسطس 29, 2015 10:40 pm ]




درس رائع

توقيع : الشاعر 96



الانتقال السريع

كلمة الادارة
منتدى التكويد العربي
او ل منتدى يختص بالتصميم والتكويد
أسس منتدى التكويد العربي يوم 15الأربعاء 6 نوفمبر 2013 - 14:49 )على أساس فكرة بسيطة
وهي تقديم محتوى يروق الباحث العربي خلال تصفحه للنت وذلك في مجال آخر تطورات
البرمجة وتصميم المواقع بافضل الطرق الحديثة وكذا كل الأخبار المتعلقة بالتقنية بصفة عامة
كما أننا حاولنا مزج التقنية بعالم التصميم. نقدم مواضيع خاصة بنا غير منقولة
من أي موقع او مدونة أو منتدى عربي آخر بل نلخص ما تعرضه المواقع الرسمية
لمنتوج أو اكواد او تصميم معين وونبرمجه للغة خاصة. إهتماماتنا في هذا المنتدى هو
على الشكل التالي:
1- طرح آخر أخبار البرمجة والتصميم.
2- توفير معلومات حول آخر الاكواد والتصميم المطروحة في جميع المجالات منها المجانية أو المدفوعة.
3- تلبية الباحث العربي في جميع مطالبه عبر طرح مواضيع تهتم به وبمواقعه.
4- آخر الاعمال والاكواد والتصاميم الموجدة بطرق احترافية.
5- كل ما يتعلق بالمواقع والمنتديات.
6- تقديم نصائح وأدوات لمصممي مواقع الأنترنت.
7- توفير أدوات التصميم لكل المصممين.
كما نعرض مواضيع متنوعة من فيديوهات تعليمية للمبتدئين وألبوم صور لآخر المنتوجات التي توصلت إليها التكنولوجيا الحديثة.

جميع حقوق الطبع والنشر محفوظة لمنتدى التكويد العربي


w w w . t a c w e d . com
شاطر | اذا تحب تساعدنا ما ياخذ من وقتك ثواني، إذا دخلت أي موضوع في المحبين فقط إضغط زر المشاركة من اليسار و شارك الموضوع بمواقع التواصل الإجتماعي