:شرح برمجة وتصميم موقع ب php+css

PROFESSIONAL COURSE FOR NEWBIE TO LEARN PHP&CSS

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

فهرس الدروس:

1-الجزء الاول:شرح برمجة وتصميم موقع ب php+css

ويشمل تجهيز الملفات+تكويد الملفات ب html+css

2-الجزء الثانى:التطوير الثانى لدرس برمجة وتصميم موقع بphp+css

ويشمل تحسين المظهر الجمالى لملفات الموقع بالتصميم المطورweb2.0

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

ويشمل كيفية التخطيط لبرمجة لوحة تحكم الموقع

4-الجزء الرابع:التطوير الرابع لدرس برمجة وتصميم موقع ب php+css

ويشمل برمجة ملفات لوحة تحكم الموقع للتحكم بالمقال

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





اولا خلونا نشوف النتائج النهائيه لموقعنا:

1-قبل تنسيق وتنظيم الصفحة بcss+php





2-بعد تنسيق الصفحة ب css+php





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

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

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





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

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 id="wrapper">

<div id="header"></div>

<div id="nav"></div>

<div id="content"></div>

<div id="sidebar"></div>

<div id="footer"></div>


</div>

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

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

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

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

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

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

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

رمز Code:

<div id="wrapper">

<div id="header">

<h2>عالم مطورى الويب لتعليم البرمجة والتصميم</h2>

</div> 

<div id="nav">

<a href="#">الرئيسية</a>

<a href="#">المنتــدى</a>
<a href="#">الــصــور</a>
<a href="#">الاستضافة</a>
<a href="#">الريسلرات</a>

<a href="#">السيرفرات</a>
<a href="#">البرمجة</a>
<a href="#">اتـصـل بـنا</a>

</div> 


<div id="content">

<a href="#"><h3>||المقـالات المضافة حديثا||</h1></a>
<h3>مقابله شخصيه</h3>

<p>

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

<p>

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

</p>
<p>-------------------------------------------------------------------------------------------------------------------------</p>
<h3>مقابله شخصيه ثانيه</h3>

<p>

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

</p>
<p>-------------------------------------------------------------------------------------------------------------------------</p>

<p>

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

</p>

</div> 

<div id="sidebar">

<h3>القائــمــه الرئــيسيــه</h3>
<li><a href="#">الرئيسية</a></li>

<li><a href="#">المنتـدى</a></li>
<li><a href="#">الاستفـسارات</a></li>
<li><a href="#">المكتبـة</a></li>

<li><a href="#">الصـور</a></li>

<h3>الخدمـــات الخارجيه</h3>
<li><a href="#">أضف لنك</a></li>

<li><a href="#">أضف لنك</a></li>
<li><a href="#">أضف لنك</a></li>
<li><a href="#">أضف لنك</a></li>

<li><a href="#">أضف لنك</a></li>

<h3>الدعم الفــنى</h3>
<li><a href="#">أضف لنك</a></li>

<li><a href="#">أضف لنك</a></li>
<li><a href="#">أضف لنك</a></li>
<li><a href="#">أضف لنك</a></li>

<li><a href="#">أضف لنك</a></li>

</div> 

<div id="footer">
<p> <a href="http://advphp.com">تصميم وبرمجة vista-design &copy;</a></p>

</div> 
</div>

تمام بهيك يكون انتهى ملف 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:

<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />

تمام : نبدأ نشرح ملف 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:

<div id="header">

<h2>عالم مطورى الويب لتعليم البرمجة والتصميم</h2>

</div>

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


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


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

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

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

فائدته:

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

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


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

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

رمز Code:

<?php

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

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

?>

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

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

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

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

رمز Code:

<?php include('variables/variables.php'); ?>

<div id="header">

<h2><?php echo $heading ?></h2>

</div>

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



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

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

رمز Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1256" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />

<title>عالم مطورى الويب لتعليم البرمجة والتصميم</title>

</head>

<body>

<div id="wrapper">

<?php include('includes/header.php'); ?>

<?php include('includes/nav.php'); ?>

<div id="content">

<a href="#"><h3>||المقـالات المضافة حديثا||</h1></a>
<h3>مقابله شخصيه</h3>

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

<p>

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

</p>
<p>-------------------------------------------------------------------------------------------------------------------------</p>

<h3>مقابله شخصيه ثانيه</h3>

<p>

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

</p>
<p>-------------------------------------------------------------------------------------------------------------------------</p>

<p>

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

</p>

</div>


<?php include('includes/sidebar.php'); ?>

<?php include('includes/footer.php'); ?>

</div>

</body>

</html>

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


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



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





vista-design



www.advphp.com

انتهى الجزء الاول من الدرس

الجزء الثانى

عوده من جديد أعضاء وزوار موقعنا الكرام,لقد تأخرت قليلا فى تنزيل الدروس نظرا لانى كنت أجهز لهذا الدرس لانه من الدروس المهمه, ونظرا لكثرة الطلبات منكم بأن تروا مثل هذا النوع من الشروحات , فقد قررت أن أجعل هذا الدرس كسلسله سوف نقوم بتطويرها خطوه خطوه من برمجة وتصميم حتى نصل لتصميم وبرمجة موقع متكامل يصلح لكافة الأغراض, وفى هذا الدرس سوف انتقل معكم للتطوير الثانى
من الدرس السابق شرح برمجة وتصميم موقعك خطوه بخطوه بفكرة نظام القوالب ب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:

<ul id="nav">
 <li><a href="index.php">الرئيسية</a></li>

 <li><a href="pages/portfolio.html">المنتــدى</a></li>
 <li><a href="pages/about.html">الــصــور</a></li>
 <li><a href="pages/contact.html">الاستضافة</a></li>

 <li><a href="pages/terms.html">الريسلرات</a></li>
 <li><a href="pages/about.html">السيرفرات</a></li>
 <li><a href="pages/about.html">البرمجة</a></li>

 <li><a href="#">اتـصـل بـنا</a></li>
</ul>

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:

<div class="outer" id="sidebar">
<div id="menu">
<ul>
<li><a style="color:#02aaf8" href="#">القائــمــه الرئــيسيــه</a></li>

 <li><a href="#">الرئيسية</a></li>
 <li><a href="#">المنتـدى</a></li>
 <li><a href="#">الاستفـسارات</a></li>

 <li><a href="#">المكتبـة</a></li>
 <li><a href="#">الصـور</a></li>

<li><a style="color:#02aaf8" href="#">الخدمـــات الخارجيه</a></li>
 <li><a href="#">أضف لنك</a></li>

 <li><a href="#">أضف لنك</a></li>
 <li><a href="#">أضف لنك</a></li>
 <li><a href="#">أضف لنك</a></li>

 <li><a href="#">أضف لنك</a></li>

<li><a style="color:#02aaf8" href="#">الدعم الفــنى</a></li>

 <li><a href="#">أضف لنك</a></li>
 <li><a href="#">أضف لنك</a></li>
 <li><a href="#">أضف لنك</a></li>

 <li><a href="#">أضف لنك</a></li>
 <li><a href="#">أضف لنك</a></li>
 </ul>

</div>
</div>

وسوف نقوم بأضافة تأثير 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


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





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

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

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

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

يمكنك تحميلها من الرابط الاتى اضغط هــــــــنـــــــا

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

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




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


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

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

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



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

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

رمز Code:

<ul id="nav">

<li><a href="#">الرئيسية</a> </li>

</ul>

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

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

رمز Code:

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="js.js"></script>

-دعونا نشرح ملف 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('<span id="load">LOADING...</span>');

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

رمز Code:

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

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

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




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



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

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


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



بالتوفيق




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



أخوكم vista-design

 

الجزء الثالث

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

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');

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


نكمل.......



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


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

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

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

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

رمز Code:

<table>
<tr>
<form>
<td>

<table>


<tr>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>


<tr>

<td></td>
<td></td>
<td></td>
</tr>


</table>
</td>

</form>
</tr>
</table>

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

رمز Code:

<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">

<tr>
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">

<tr>
<td align="right" colspan="3"><strong>دخول الأعضاء </strong></td>
</tr>
<tr>

<td width="294"><input name="myusername" type="text" id="myusername"></td>
<td width="6">:</td>

<td dir="rtl" width="78">اليوزر</td>
</tr>
<tr>


<td><input name="mypassword" type="password" id="mypassword"></td>

<td>:</td>
<td dir="rtl">الباسورد</td>
</tr>
<tr>
<td>&nbsp;</td>

<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="دخول"></td>
</tr>

</table>
</td>
</form>
</tr>
</table>
<body>
</body>
</html>

<table>
<tr>
<form>
<td>
<table>

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

رمز Code:

<form name="form1" method="post" action="checklogin.php">

2-انه يوجد ثلاث انواع للinput

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

رمز Code:

<input name="myusername" type="text" id="myusername">

ثانى input وهو للباسورد ونوعه password

رمز Code:

<input name="mypassword" type="password" id="mypassword">

ثالث input وهو لزر التنفيذ ونوعه submit

رمز Code:

<input type="submit" name="Submit" value="دخول">

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

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>تسجيل الدخول</title>






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


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

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

رمز Code:

<?php
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 "<br>";
echo "<a href=login.php>";
echo "عوده للخلف";
echo "</a>";
}

ob_end_flush();
?>

شرح الملف:

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

رمز Code:

ob_start();

2-ثم نحدد متغيرات الاتصال بقاعدة البيانات واوامر الاتصال

رمز Code:

$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';");

ولاحظ الفانكشن السابقه:

رمز Code:

mysql_query("set names 'utf8';");

ووظيفتها ارسال البيانات لقاعدة البيانات بالترميز utf-8 وهى خطوة مفضلة فى تخزين البيانات

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

رمز Code:

$myusername=$_POST['myusername'];
$mypassword=$_POST['mypassword'];

وكنقطه أمنيه سنقوم باضافة دالة stripslashes وmysql_real_escape_string لتأمين المدخلات التى سيتم ارسالها من فورم اليوزر والباسورد لقاعدة البيانات لتجنب حقن قاعدة البيانات واختراقها

رمز Code:

$myusername = stripslashes($myusername);
$mypassword = stripslashes($mypassword);
$myusername = mysql_real_escape_string($myusername);
$mypassword = mysql_real_escape_string($mypassword);

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

رمز Code:

$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 "<br>";
echo "<a href=login.php>";
echo "عوده للخلف";
echo "</a>";
}

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

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


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

رمز Code:

ob_end_flush();

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



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

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


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

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

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

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


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


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

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





اولا: ملف frame.html

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

رمز Code:

<frameset cols="50%,10%">
<frame src="page1.html" name="left">
<frame src="admin.html" name="right">

</frameset>

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




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


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



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

بالتوفيق.............

 

الجزء الرابع

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

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

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




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

id
title: لتخزين عنوان المقال
content:لتخزين محتوى المقال
author: لتخزين كاتب المقال
date :لتخزين تاريخ كتابة المقال

رمز Code:

 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 ;

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

وهذا هو كوده :

رمز Code:

<?


$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);

}

?>

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

رمز Code:

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

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

رمز Code:

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';");
}

ولاحظ اخر جملة لارسال الاستعلام بترميز utf-8 ليتم تخزين البيانات بهذا الترميز




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

رمز Code:

<?
session_start();
if(!session_is_registered(myusername)){
header("location:../login.php");
}
?>

<?php

include("frame.html");


?>

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



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


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


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

رمز Code:

<div id="wrapper">

<h3>لوحة التحكم</h3>

<div id="sidebar">
<li><a target="_top" href="index.php">الرئيسية</a></li>

<br>
<br>
<h3>ادارة المقالات</h3>
<li><a href="admin/list.php" target="left">تعديل وحذف </a></li>

<li><a href="admin/add.php" target="left">اضافة مقال</a></li>
<li><a href="#">link</a></li>

<li><a href="#">link</a></li>
</div>


</div>

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

رمز Code:

<style type="text/css">

#body{
background-color:#999999;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;

}


#sidebar{
width:200px;
height:500px;
list-style:none;
text-decoration:none;
padding-left:10px;
}


</style>

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






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

رمز Code:

  <h1 style="text-align:center;">أهلابك فى لوحة التحكم</h1>

  
  <h5 style="border-bottom:1px solid #eeeeee;"><a style="text-decoration:none;" target="_top" href="index.php"> عوده لرئيسية لوحة التحكم</a> </h5>

  <h4 style="text-align:left;"><a style="text-decoration:none;" target="_top" href="logout.php">تسجيل الخروج</a></h4>

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

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

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



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




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

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

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


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

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

رمز Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>اضافة مقال جديد</title>

</head>

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

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

?>

<div style=" direction:rtl;margin-right:10px;">

اضافة مقال جديد<br />
<form action="<? echo $PHP_SELF; ?>" method="POST">

<input type="hidden" name="id"  value="id">
العنوان<br />
<input size="50" maxlength="60" type="text" name="title"><br />

المقال<br />
<textarea name="content" cols="38" rows="10"> </textarea> <br />

اسم الكاتب<br />
<input size="50" maxlength="250" type="text" name="author"> <br />

    <input type="Submit" name="submit" value="اضف المقال">
</form>
</div>
<?

} 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 "تم اضافة المقال <a href='list.php'>العوده لقائمة المقالات</a>.";
    } else {
        // errors found
        // print as list
        echo "<font size=-1>حدث خطأ غير متوقع <br>";
        echo "<ul>";
        for ($x=0; $x<sizeof($errorList); $x++) {
            echo "<li>$errorList[$x]";
        }
        echo "</ul></font>";
    }
}
?>

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

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

رمز Code:

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

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

?>

<div style=" direction:rtl;margin-right:10px;">

اضافة مقال جديد<br />
<form action="<? echo $PHP_SELF; ?>" method="POST">
<input type="hidden" name="id"  value="id">

العنوان<br />
<input size="50" maxlength="60" type="text" name="title"><br />

المقال<br />
<textarea name="content" cols="38" rows="10"> </textarea> <br />
اسم الكاتب<br />

<input size="50" maxlength="250" type="text" name="author"> <br />
    <input type="Submit" name="submit" value="اضف المقال">

</form>
</div>
<?

} else

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

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

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

نشوف الكود

رمز Code:

{


    $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) {

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

رمز Code:

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 "تم اضافة المقال <a href='list.php'>العوده لقائمة المقالات</a>.";
    } else {
        // errors found
        // print as list
        echo "<font size=-1>حدث خطأ غير متوقع <br>";
        echo "<ul>";
        for ($x=0; $x<sizeof($errorList); $x++) {
            echo "<li>$errorList[$x]";
        }
        echo "</ul></font>";
    }
}
?>

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

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

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

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

رمز Code:

<div style="direction:rtl;">
<?

//جلب ملف الاتصال بقاعدة البيانات
     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 - <a href='edit.php?id=$send->id'>تعديل المقال</a> - <a href='delete.php?id=$send->id'>حذف المقال</a><br /><br />";
}

}

?> 


</div>

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



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

رمز Code:

<?
//جلب ملف الاتصال بقاعدة البيانات
     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);

        //الخطوه القادمه لعمل الفورم بداخله البيانات اللى سيتم جلبها من جدول الاخبار
?>
<!-- السابق لجلب البيانات من الجدول لاحظ بنفسك اوامر البى اتش بى وكيف سندخل للمتغير-->
<div style="direction:rtl;">

<h3>تعديل المقال</h3>
<form action="<? echo $PHP_SELF; ?>" method="POST">
<input type="hidden" name="id"  value="<? echo $send->id; ?>">

عنوان المقال:<br />
<input size="50" maxlength="250" type="text" name="title" value="<? echo $send->title; ?>"><br />

نص المقال:<br />
<textarea name="content" cols="40" rows="10"><? echo $send->content; ?></textarea><br />
كاتب المقال:<br />

<input size="50" maxlength="250" type="text" name="author" value="<? echo $send->author; ?>"><br />

    <input type="Submit" name="submit" value="تحديث">
</form>

</div>

<?
    }
    // اذا لم يتم جلب اية بيانات 
    
    else {
        echo "<font size=-1>هذا المقال غير موجود</font>";
    }
}

// سيتم تحديث البيانات فى الاوامر القادمه 
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 "<font size=-1>تم تحديث بيانات المقال<a target='_top' href=../index.php>عوده للرئيسية </a>.</font>";
        
    } else {
        // errors occurred
        // print as list
        echo "<font size=-1>لقد حدث خطأ غير متوقع <br>";
        echo "<ul>";
        for ($x=0; $x<sizeof($errorList); $x++)
        {
            echo "<li>$errorList[$x]";
        }
        echo "</ul></font>";
    }
}

?>

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



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

رمز Code:

<?
//جلب ملف الاتصال بقاعدة البيانات
     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 "<font size=-1>تم الحذف بنجاح <a href=list.php>عودة لقائمة المقالات</a>.</font>";

    
?>

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





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

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


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

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

وهذا هو كوده :

رمز Code:

<?
     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)) {
?> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>
</head>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<?php 
echo"$send->content";


 ?>

</td>
</tr>
<tr>
<?Php
echo "$send->author";
}}
?>

</tr>
<br>

</table>

شرح الملف:

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

رمز Code:

     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());

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

رمز Code:

if (mysql_num_rows($result) > 0) {

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

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

رمز Code:

?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<table cellpadding="0" cellspacing="0">

<tr>
<td>
<?php 
echo"$send->content";


 ?>
</td>
</tr>
<tr>
<?Php
echo "$send->author";
}}
?>

</tr>
<br>

</table>

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



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

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

رمز Code:

<div id="content">

<a href="#"><h3>||المقـالات المضافة حديثا||</h1></a>

<?php

include("article.php");

?>

</div>

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

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





لتحميل ملفات الموقع كاملة : اضـــغــــط هــــنـــــا


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

بالتوفيق


عوده للاعلى↑