دورة Web Programming متجددة [php - mysql - html - js - css]

هذا الموضوع مخصص لدورة الWeb Programming
وهي دورة شاملة للPHP - HTML - CSS - JavaScript - MYSQL
وبإذن الله أثناء الدورة تقدر تبرمج وتصمم موقع متكامل.

ويتم وضع كافة الأسئلة والمناقشات في نفس الموضوع،
مع وجود فهرس للدورة بلينكات الدروس لعدم التشتت.



فهرس الدورة:

Chapter 1 - Introduction
Chapter 2 - First Website

Chapter 1 - Introduction


.:. مقدمة .:.

الأول حابدأ بتعريف لغة الPHP وهي لغة برمجة صدرت منها أول
نسخــة في سنة 1995 وكانت اختصارا لPersonal Home Page
ثم تطورت اللغة من الإصــدار 1.0 إلى الإصـدار 6.0 حاليا وأصبحت
تســمية Personal Home Page لا تليــق عليها، فتســمى حـاليــا
Hypertext Preprocessor أو Perl Hypertext Preprocessor
لمزيد من المعلومات عن تاريخ الPHP من هنا

في هذه الدورة لن أقتصـر على شـغل الPHP فقط، لأنه مستحيـل
استخدامها وحدها في برمجة موقع بالكامل، ولكن سيتم استخدام
معها الHTML والCSS و الJavascript وسنلقي نظرة على الXML
كما سيتم التعامل مع قواعد البيانات MYSQL والتحكم فيها بالPHP

طيب إيه الفرق ما بين الPHP والHTML والCSS والJavascript ؟

الأول لازم نفهم مصطلحين، الأول اسمه Server Side والثاني Client Side
Server Side أي الســيرفر الذي يكون مستضيفا للموقع، وClient Side أي
جهازك الشـخصي أو جهاز الشـخص الذي يتصفح موقعـك. والسـيرفر عبارة
عن جهـاز كمبيـوتر عـادي جدا، وإن كـان قـويا في مواصـفاته، ومخـتلف في
شكله الخارجي .. ولكن في الأول و في الآخر، تصفحك لأي موقع ينتج عنه
شـغل على السـيرفر و شـغل على جهازك .. أي جهد على الServer Side
وجهد على الClient Side.

طيب إيه الشغل اللي بيتم على السيرفر، وإيه الشغل اللي بيتم على جهازك؟

السيرفر يقوم بالتأكــد مثلا من عضويتك في الموقع، يقوم بعمل البحث في
قاعدة البيانات عن المعلومات التي ترغب فيها وهكذا .. وبما أن تلك العمليات
تحدث على السيرفر، فتسمى عمليات Server Side.
أما جهازك الشـخصي كمتصـفـح للموقع يقوم بقـراءة بعض أكــواد الHTML
والCSS وتحويلها إلى نصوص مـلونة وصور لكي يظهر لك الموقع في صورته
النهائيــة، لأنك لو ضغطت "كليك يمين" على متصــفحك واخترت View Page
Source حتلاقي أكواد HTML غير مفهومة للقارئ العادي، ولكن تلك الأكــواد
هي التي يستقبلها جـهازك ويترجمها المتصـفح إلى صفحة متكاملة المظهـر.
ولذلك تلك العمليات التي تتم على متصفحك تسمى Client Side.

لـغـة الPHP التي سندرسـها تعمتل فقـط عـلـى الServer Side ولا يقــرأها
المتصفح، أي لغة الPHP لا تعمل على جهازك الخاص وأنت تتصفح أي موقع
لذلك تسمى Server Side Language. ولذلك فيكــون كـود الphp لأي موقع
مخفيا، ولا يمكن رؤيته إلا لمن يمتلك السيرفر فقط.
أما الHTML والCSS فهي التـي يقرأها المتصـفح ولذلـك تكـون Client Side،
وكذلك لغة الJavascript فهي تعمــل على المتصفح وسـنعـرف الهدف منها
فيما بعد.

ومما جدير بالذكر أن الPHP والJavascript لغات برمجة متكاملة،
أما الHTML والCSS فهي لا تعتـبر لغـات برمجة، ولكنها Markup
أي مجرد رموز لتنسيق مظهر الصفحة، ولكنها ليس بها أي Logic
يتـم برمجـته. أما الMYSQL فهـي لغـة تستخــدم مع الPHP في
التعامل مع قواعد البيانات، وبذلك تعمل أيضـا في الServer Side.

للمزيد من المعلومات عن الHTML من هنا [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
ولمزيد من المعلومات عن الJavascript من هنا [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
ولمزيد من المعلومات عن الCSS من هنا [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
ولمزيد من المعلومات عن الMYSQL من هنا [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


.:. بيئة العمل .:.

دلوقتي ستقف أمامنا مشكلة، وهي أثناء برمجة موقع بالPHP ..
كما قلنا الPHP تعمل على الServer Side أي يستحيل أن تعـمل
على المتصفح الخاص بك، طيب كيف سيتم تشغيلها على جهازك
أثناء برمجتك واختبارك للموقع الذي تبرمجه؟

زي ما قلنا السيرفر اللي عليه أي موقع هو جهاز كمبيوتر عادي، ولكنه مفتوح
فيه خاصية استضافة موقع، ويمكن تشغيل تلك الخاصية على أي جهاز عادي
أي استضافة موقـعك الخـاص على جهازك الخـاص بحيث يتصـفحه أصـدقاؤك
بطريقة عـادية، ولكن لن أتطـرق إلى كيـفيـة تشغيلها الآن. أما ما نحـتاجه هو
استضـافة موقعك الخاص على جهازك الخاص لتتصفحه أنت من نفس الجهاز،
لكي تتمكن من اختباره، ولن يكن متاحا أونلاين لتصفح الغير.

ده بيتم عن طريق برامـج كثيرة، وأنا أفضل برنامج WampServer
وهو يحتوي على مشغل للPHP ومشغل قواعد البيانات MYSQL
وسنتطرق إلى التعامل مع قواعد البيانات فيما بعد.

يتم تحميل برنامج الWampServer من هنا
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

بعد تسطيـب الWampServer نجد مجلد جديـد في الC يسـمى wamp
وبداخله مجلد آخر يسمى www وده هو المجلد الذي ستضع فيه ملفات
موقـعك فيـما بعد. (طبعا ده لو ماغيرتش المسار أثناء تسطـيب البرنامج)

نفتـح مجـلد الwww ده ونعـمل "كليـك يمين" وNew وText Document
ونكتب فيه أي جملة وليكن Hello World ونقوم بتسميته بindex.htm
أو index.php.
وطبعا نخلي بالنا لو جهازك بيخفي الExtensions للملفات يجب إظهارها
من الControl Panel في الFolder Options كـي لا يكن اسـم المـلـف
index.php.txt

الWampServer ده بيعملنا موقع على جهازنا اسمه localhost ويمـكننا
أن نقوم بفتحه عن طريق لينك [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] وبالطبـــع localhost
ده مش موقـع على الإنتـرنـت، ده الموقــع اللي على جهازك في مجــلد
الwww أي لا يمكن فتحه من جهاز آخر كما يظهر من تسميته.

نقـوم بـفتـح الليـنـك ده [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] نلاقــي كلمـة Hello World
طلعتلنا في صفحة بيضاء .. يبقى بكده موقعنا شـغال ..
كان ممكن برده نكتب اللينك ده حايفتحلنا نفس الصفحة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] أو [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
وده لأنه لما نكتب عنوان معين يشير إلى مجلد، دون تحديد اسم الملف،
يتم البحث تلقائيا عن الصفحة التي تسمى index وذات extension معروفة،
مع العلم أنه يمكن يتــم تغيير الصفحـة التي يتم البحـث عنها تلقـائيا من
الApache Configuration

نجرب نعمل فولدر جديد في نفس المجلد www وليكن اسمه inc
ونضع بداخله ملف اسمه hello.php
علشان نقدر نفتح الملف الجديد ده لازم نكتب المسار
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


.:. كتابة الكود .:.

هل ينفع نفضل نشتغل بالnotepad في أكواد الphp والhtml وغيرها؟

بالطبع ينفع لكن حانتعب أوي وأكـوادنا مش حاتكـون منظـمة ..
يبقى من الأفضل نحمل برنامج بيسهل كتابة الأكـواد وقراءتــها،
وفيه برامج كتيرة بتعمل الحكاية ديه واحنا حانشتغل في دورتنا
ببرنامج Adobe Dreamweaver


وبالطبع برنامج الDreamweaver يتيح لنا مميزات عديدة بخلاف تنسيق الكود،
فهو به اسطنبات أكواد جاهزة وهي الأكواد التي تستخدم بكثرة، فلا نضــطـــر
لإعادة كتابتها كل مرة، كما يحتوي على Designer وبه يمـكـن تصمـيـم واجهة
الموقـع دون كتابة سطر واحد من الكـود! ولكننا لــن انستخدم الDesigner ده
لأنه لو موقعك معقد شوية بتلاقي شغله مش دقيق أحيانا، فيجب التعود على
كتابة الكود بأيدينا.



.:. تم بحمد الله .:.

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

لدي سؤال هل راح نتطرق لقواعد البيانات أوراكل؟

شكرا لك
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

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

اخي الكريم جزالك الله خيرا ولكن لدي استفسار عن خطوات تحويل ملف اسم index الى اي اسم اخر من apache configure وشكرا لتحملك وصبرك

اخى الكريم يفضل ان تترك ملف index بنفس الاسم دون تغيير كى يتعرف عليه السيرفر بسهول وذلك لان معظم السيرفرات تشترط عدم تغييره

جزاك الله خيرا اخي
لدي استفسار
لقد انزلت ال wamp كما قلت وعملت الخطوات التاليه له وانشأت مستندا ولكن عندما اعرضه على المستعرض فهو لا يعمل
ويكون في الصفحة Object not found!

لقد حاولت كثيرا ورجعت لعدة دورات ودائما اتبع نفس الخطوات وانجح فيها لكن النتيجة واحدة
علما أنني جربت ال localhost على المستعرض وتظهر في الصفحة عبارة It works!
لا أعرف مالخطأ بصراحة وقد اتعبني هذا كثيرا
اتمنى فقط اجتياز هذه الخطوة بنجاح
مع العلم أنني مبتدئة وبدأت بلغة ال php وأحببتها ووجدتها سهلة التطبيق لولا وجود هذه المشكلة
شاكرة لكم وبالتوفيق