+:: الدرس الثالث في دورة : تصميم المواقع الاحترافية ::+

athco · 11-06-2003, 06:32 AM

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

اقسم بالله العظيم بان لاا استغل ما اتعلمه من هذه الدورة فيما يغضب الله ورسوله او يسيئ للاسلام والمسلمين ... والله على ما اقول شهيد

الدرس الاول
http://www.swalif.net/softs/showthre...threadid=47043

الدرس الثاني
http://www.swalif.net/softs/showthre...threadid=47686

هذا هو الدرس الثالث والاخير في هذه الدورة المباركه باذن الله

في هذا الدرس سوف نتعرف على التالي:

* تحويل التصميم الى تمبلت للموقع واعداد ملفاته PHP
* اعداد ملفات تصفح الموقع وجلب التمبلت لها PHP
* كيفيه فتح ملفات PHP من خلال برنامج الفرونت بيج

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

* السيرفر المحلى
* محرر سكربتات PHP او النوت باد الملحق بالويندوز
* الفرونت بيج

هذا شرح مفصل وبالصور لكيفية تنصيب السيرفر المحلى وملحقاته
للاستاذ عبد الرحمن ( الشنكبوتيه ) جزاه الله الجنه

http://www.swalif.net/softs/showthre...threadid=46009

الان بفرض اننا قمنا بتنصيب السيرفر المحلى على اجهزتنا

1: قم بتشغيل السيرفر على جهازك
2: افتح مجلد موقعك وانشء به مجلد جديد واعطه الاسم include
3: قم بنقل مجلد موقعك كاااااملا بما يحتوي من مجلدات وملفات ( المجلد الذي يحتوي على التصميم الناتج لدينا عن الدرسيين الاول والثاني )
ويفترض انه يحتوي على التالي:

* مجلد images
* مجلد include
* ملف Styl.css
* ملف التصميم وهو HTML او HTM

قم بنقل مجلد موقعك الى السيرفر الى المجلد التالي WWW او htdocs اياً متوفر لديك في السيرفر وهذا حسب نوعيه السيرفر الذي تستخدمه

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

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

5 : افتح ملف التصميم HTML من خلال الفرونت بيج

6 : ضع علامة XXXXXXXXفي المكان الذي ستدرج به المحتوى لموقعك

7: احفظ الملف بنفس مجلد موقعك باسم جديد كالتالي template.php يتم ذلك عند ما تضغط على امز سيف از من خلال الفرونت بيج سوف تظهر لك نافذه تحديد مكان الحفظ وبها خانه تسميه الملف حدد مكان الحفظ بالمجلد الرئيسي لموقعك على السيرفر اي بنفس المكان الذي به ملف التصميم الاصلي كتالي :

سوف تظهر لك نافذة تحديد مكان الحفظ واسم الملف وامتداده حدد الخيارات كالتالي :

ارجو عدم الرد حتى انتهي من تكمله الشرح

athco · 11-06-2003, 06:33 AM

8 : الان اذهب الى مجلد موقع في السيرفر وافتحه من خلال محرر PHP او من خلال النوت باد

9 : تحت الوسم بودي اكتب التالي

كود PHP:

  
<?

function template($output) {

?>

10 : ابحث عن علامة XXXXXXX التى وضعناها قبل قليل في مكان ادراج المحتوى واستبدلها بالتالي :

كود PHP:

  
 <?= $output;?>

11 : انزل الى اسف الملف قبل الوسم بودي وضع التالي :

كود PHP:

  
<? } ?>

12 : الان احفظ الملف عن طريق الامر حفظ او سيف وليس حفظ باسم او سيف از

athco · 11-06-2003, 06:37 AM

الان ننتقل الى المرحله الثانية وهي اعداد ملف global.php التابع للتمبلت

1: افتح ملف جديد من خلال برنامج النوت باد او محرر php

2: ضع الكود التالي بداخل الملف واحفظه بالاسم التالي global.php في نفس المجلد الذي يحتوي على ملف template.php اى المجلد الرئيسي لموقعك :

كود PHP:

  
 
<?

 
  include("template.php");

 
  ob_start();

 
  function send_output() {

       $output = ob_get_contents();

       ob_end_clean();

       template($output);

       ob_end_flush();

  }

 
 
?>

المرحله الثالثه هى تجهيز ملفات محتويات الموقع

1 : قم باعداد صفحات واقسام موقعك كما تشاء ولكن بدون اي تصميم اي فقط النصوص والصور التى تخص النصوص او الموضوعات التى بالصفحه فقط ولا تقم بتنسيق الخطوط او الروابط

2 : احفظ جميع محتويات موقعك الصفحات والاقسام في مجلد include سواء كانت صفحات عادية او مجلدات الاقسام

3 : احفظ جميع صور المحتوى داخل المجلد images سواء داخل المجلد مياشرة او من خلال انشاء مجلدات داخليه لها وهذا افضل لترتيب موقعك

ملاحظات مهمه للغايه :

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

2 :اجعل جميييييييع امتداد الصور في صفحات المحتويات لموقعك من مجلد images مباشره وليس من مجلد قبله اي ستلاحظ ان اي صورت تقوم باضافتها الى صفحات الموقع ستأخذ هذا المسار تلقائيا وهو :

../../images/Contact.gif

اجعلها كالتالي :
images/Contact.gif

ستصبح الصورة علامه اكس بدلا من الصورة كان المسار غير صحيح لااااا تهتم لذلك

athco · 11-06-2003, 06:39 AM

المرحله الرابعة وهي اعداد ملف جلب محتويات الموقع والتمبلت الى متصفح الزائر

1 : افتح ملف جديد من خلال برنامج النوت باد او محرر php وضع بi التالي واحفظه باسم index.php في المجلد الرئيسي للموقع اي مع ملt تمبلت واخوانه :P :

كود PHP:

  <?

//هذا هو الملف الرئيسي للموقع ويتم تصفح جميع اقسام وصفحات الموقع من خلاله

 
//امر جلب التمبلت لهذا الملف

include("global.php");

 
//---------------------------

//بداية اوامر جلب اقسام وصفحات الموقع

 
if($display){

switch ($display){

 
//جلب الصفحة الرئيسية

case "main";

include("include/main.php");

break;

//جلب قسم او ملف استبدل العلامه xxx بالاسم الذي تريد للقسم او الصفحة

case "xxxxx";

// مسار ملف القسم او الصفحة استبدل علام xxxxx بالمسار الصحيح 

include("xxxxxxxxxxx");

break;

 
//------------- 

// مثلا كالتالي

 
case "Profile";

include("include/Profile/index.html");

break;

 
 
case "Products";

include("include/Products/index.html");

break;

 
 
case "Contact";

include("include/Contact/index.html");

break;

}

 
//-----------------------------

//الامر التالي وضيفته جلب ملف

// main.php

//بحيث يكون هو واجهة الموقع

 
} else {

include("include/main.php");

}

 
//نهاية اوامر جلب الاقسام وصفحات الموقع لهذا الملف

//-------------------------

 
//نهاية امر جلب الستايل للملف

 send_output();

 
?>

كود PHP:

  //------------------------------

// كرر الشفرة التاليه بعدد الملفات التى تريد عرضها في موقعك

 
case "xxxxxxxxxx";

include("xxxxxxxxxxxxx");

break;

//------------------------------

 
//بعد اخر امر ادراج ضع العلامة التاليه وهي تعنى اغلاق الصناديق

 
}

 
//------------------------------

athco · 11-06-2003, 06:45 AM

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

1 : شغل برنامج الفرونت بيج

2 : افتح ملف template.php من خلال الفرونت بيج بالطريقة التالية :
اضغط كلك يمين على ملف تمبلت واختر من القائمة التالي

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

سوف يتم فتح الملف من خلال الفرونت بيج

3 : الان قم بعمل الروابط بين صفحات واقسام موقعك بحيث تكون كالتالي :

index.php?display=main >>> رابط الصفحة الرئيسية

index.php?display= xxxxxxxx >>> استبدل علامة xxxxx باسم الصفحة التى تريد كما سميته في ملف index.php

4 : احفظ التغييرات الان

5 : قم بتشغيل السيرفر على جهازك وافتح هذا العنوان
http://127.0.0.1/xxxxxxx >>> استبدل العلامة xxxx باسم المجلد الذي يحتوي على ملفات موقعك

وانظر المفاجأه

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

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

وهذا هو الموقع نتاج هذه الدورة

http://graphics.athco.net/Style6

نشكر الاستاذ المفكر لتوفيره لنا صورة الفرش

همسة :

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

ارفقت لكم تطبيق لهذا الدرس حملوا المرفق وتفحصوا يكف تم التطبيق

ملاحظه مهمة :

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

اسأل الله لى ولكم التوفيق والسداد لما يحبه ويرضاه

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

اثكو جرافيكس

EYNN · 11-06-2003, 07:15 AM

بارك الله فيك ووفقك لما يحبه ويرضاه

والله استفدت من دروسك كثير
وان شاء الله براجع درسك هذا

(( اسال الله العظيم رب العرش العظيم ان يشفيك ))

egycoins · 11-06-2003, 07:19 AM

شكرا لك وفقك الله ورعاك
مع تحياتي

Mr.Muslem · 11-06-2003, 07:25 AM

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

palnour · 11-06-2003, 08:00 AM

جزاك الله كل خير

بو مبارك · 11-06-2003, 08:12 AM

ماشاءالله تبارك الله ..

فعلاً جهد وشرح مييز ... بارك الله فيك أخوي أثكو .. وكثر الله من امثالك ..

بصراحه رأيت الكثير من الدروس والشروح ... لكن مثل الشرح التفصيلي اللي طرحته ماشفت

(( اسال الله العظيم رب العرش العظيم ان يشفيك ))

mohd · 11-06-2003, 08:34 AM

مشكووووووور و الله يشفيك من مرضك و اله يعطيك الصحة و العافية

و ارجو تثبيت الموضوع

بو مبارك · 11-06-2003, 08:43 AM

وهذي جميع الدروس في ملف واحد مع المرفق الاخير

أضغط هنا للتحميل

بالتوفيق

code4arab · 11-06-2003, 09:48 AM

جزاك الله الجنة على هذا الشرح الطيب والدورة الرائعة

اسأل الله العظيم رب العرش العظيم أن يرفع عنك ماتعاني وجميع المسلمين

قاصد · 11-06-2003, 09:57 AM

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

بارك الله فيك يا أخي ونفع بك الإسلام والمسلمين وآتاك من الخير فوق ماتظن ويظن بك
أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظي رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم ان يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك

اللهم بعلمك الغيب وقدرتك على كل شيء اشفي أخي athco واشفني وجميع مرضى المسلمين إنك فعال لما تريد

يبدو أن الدرس رائع ولكني لم أقرأه بعد
شكرا مقدما

أخوك قاصد

إلى كل مريض وغير مريض :
عليكم بالدعاء والتضرع والصدقة وحفر الآبار لخدمة المسلمين وبر الوالدين والصلاة الصلاة لعل الله يشفيكم و يعافيكم

nancy · 11-06-2003, 10:30 AM

مشكور أخوى athco على هذا الدرس الاحترافى

ونسأل الله العلى العظيم أن يشفيك

لكن يوجد سؤال تقنى شوية وهو كيف أعطى للزائر الصلاحية فى أختيار شكل style المناسب له لو يوجد اكثر من تصميم مختلف فى الموقع .

Net Hunter · 11-06-2003, 10:31 AM

يعطيك الف عافيه اخوي على هالمجهود القوي

athco · 11-06-2003, 11:08 AM

امين

جزاكم الله خير جميعا

اختى نانسي تقريبا نفس الطريقه مع اختلاف مسار التمبلت

سوف اشرح الطريقه قريبا باذن الله

abutawfig · 11-06-2003, 01:29 PM

أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظي رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم ان يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك

مجهود تشكر عليه بارك الله فيك

Dark · 11-06-2003, 03:07 PM

الله يوفقك ويشفيك

asri · 11-06-2003, 03:07 PM

الله يوفقك دنيا واخرة .. ويرحم والديك ياشيخ ..

تسلم على الجهد الكبير والواضح ..

KaRiM_NET · 11-06-2003, 03:18 PM

درس فوق العادة.. كما تعودنا منك

الله يوفقك ويشفيك

Al7zen · 11-06-2003, 03:33 PM

اقتباس:

رد مقتبس من lebanon
ماشاءالله تبارك الله ..

فعلاً جهد وشرح مييز ... بارك الله فيك أخوي أثكو .. وكثر الله من امثالك ..

بصراحه رأيت الكثير من الدروس والشروح ... لكن مثل الشرح التفصيلي اللي طرحته ماشفت

(( اسال الله العظيم رب العرش العظيم ان يشفيك ))

مجتهد · 11-06-2003, 04:15 PM

اقتباس:

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

بارك الله فيك يا أخي ونفع بك الإسلام والمسلمين وآتاك من الخير فوق ماتظن ويظن بك
أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظي رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم ان يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك

اللهم بعلمك الغيب وقدرتك على كل شيء اشفي أخي athco واشفني وجميع مرضى المسلمين إنك فعال لما تريد

solo · 11-06-2003, 04:23 PM

أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك
أسأل الله العظي رب العرش العظيم أن يشفيك
أسأل الله العظيم رب العرش العظيم ان يشفيك
أسأل الله العظيم رب العرش العظيم أن يشفيك

php master · 11-06-2003, 06:55 PM

السلام عليكم ورحمة الله وبركاته

أخى athco فعلا درس أحترافى ما شاء الله

أسأل الله العظيم رب العرش العظيم أن يشفيك

وتمنياتى لك بالشفاء ان شاء الله تعالى

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