era2006
07-05-2007, 06:46 PM
http://eramax.net/images/besmmp0.gif
اهلا بكم احبتى الكرام اليوم اقدم لكم فكرة مشروع عشتها وواجهة مشاكلها ولكن الحمد لله تم حلها
ففى هذه المشاركة ان شاء الله سيتتعرفون عن طرق جديدة وجميلة فى ادارة الموقع وامتيازات فريدة تقدمها لغة ASP.NET وايضا لغة البرمجة الشهيرة القوية C#
الموضوع كان بالضبط
>>>>تصميم صفحة ويب للتحكم فى انسان الى من خلال امره بالتحرك فى الاتجاهات<<<<
فكرة المشروع
::تصميم صفحة ويب تاخذ اوامر من المستخدم واضافة ويب سيرفس لهذا الموقع ياخذ الاوامر وايضا تصميم برنامج لتلقى الاوامر من صفحة الويب سيرفس ثم ارسالها الى ريبوت(انسان ألى)
فبهذه الطريقة نتمكن من التحكم فى الانسان الالى عبر الانترنت .
الان نبدأ معنا لنعيش مع لغات البرمجة ونحاول ان نضع التصميم معا
على فكرة لن اضع ملف ال"Source Code " الا بعد انتهاء الدروس حتى تعتمدون على انفسكم فى التنفيذ
اولا تصميم صفحة الويب
الهدف من هذه الصفحة هى ان تاخذ الاوامر من المستخدم وترسلها الى الويب سيرفس
1- نقوم بفتح برنامج الفيجول استديو 2005 كما بالصورة ثم نختار انشاء website جديد
http://eramax.net/images/a0.JPG
2- ثم نختار النوع كما بالصورة التالية
http://eramax.net/images/a1.JPG
3--بعد انشاء المشروع الجديد تظهر لك الصفحة التالية ادخل الى ال Design حتى نصمم شكل الصفحة كما بالصورة
http://eramax.net/images/a2.JPG
4-تظهر لك الصفحة التالية وهى التى تضيف فيها الاشكال والازرار
http://eramax.net/images/a3.JPG
5-اضغط على Toolsbox الموجود على اليسار كما بالصورة واختار الجدول واسحبه الى داخل الصفحة
http://eramax.net/images/a4.JPG
6-اجعل الجدول كما بالشكل التالى حتى يساعدنا التصميم
http:/eramax.net/images/a5.JPG
7-اعمل دمج للثلاث لخلايا الصف الاول كما بالشكل
http://eramax.net/images/a6.JPG
8-اعمل دمج لخلايا الصف الثانى والثالث بتحديد الخلايا كما بالشكل
http://eramax.net/images/a7.JPG
9-ادخل الى الSoultion Explorer التى فى اقصى اليمين واضغط باليمين على اسم المشروع واختار Newfolder حتى نضع فيه الصور وسميه مثلا img
http://eramax.net/images/a8.JPG
10-اضغط على المجلد الذى تم انشائه باليمين واختار كما بالصورة
http://eramax.net/images/a9.JPG
11-اختار الصور التى تريد اضافتها الى المجلد
http://eramax.net/images/a10.JPG
12-اضغط خارج الجدول اى على الصفحة ثم اختار properties ثم كما بالصورة
http://eramax.net/images/a11.JPG
13-اختار Background حتى تغير الخلفية
http://eramax.net/images/a12.JPG
14-اضغط كما بالصورة لاختيار الصورة
http://eramax.net/images/a13.JPG
15-اختار المجلد (img ) ثم اختار الصورة التى تود جعلها خلفية
http://eramax.net/images/a14.JPG
لاحظ الخلفية الان
16-اكتب داخل الصف الاول كما بالشكل (optional)
http://eramax.net/images/a15.JPG
http://eramax.net/images/a16.JPG
17-صمم هذا التصميم باضافة الازرار والlabels (مش عارف اسمها بالعربى)
حاول ان يكون تصميمك مثل ذلك
http://eramax.net/images/a17.JPG
18-اضف الى صفحة صفحة ويب سيرفس كما بالشكل التالى
وظيفتها هى تعمل ك interface (اداة اتصال بين ال web application و pc appliaction)
http://eramax.net/images/a34.JPG
19-لاحظ الان عندما تفتح الصفحة التى اضفتها (الويب سيرفس )
http://eramax.net/images/a35.JPG
20-قم باضافة الاكواد التالية الى صفحتك كما بالشكل التالى
اولا نحن عرفنا اربع متغيرات من نوع static من نوع int وفائدتهم هى حمل القيم من الصفحة الاساسية ال Default واعطائها الى ال pc application كما سنرى
ثم فى ال function الاساسية للويب سيرفس جعلناها تاخذ اربع قيم من ال pc application وهذه المتغيرات من نوع int وهى ref اى يمكن للويب سيرفس التعديل
فيها وارجاع القيم الجديدة الى ال pc application وهذه احدى طرق الخدع التى تمكنا من
ارجاع اكثر من قيمة من خلال function واحدة لانه كما تعلمون ان ال function
لا تقبل الا جملة return واحد وهذا لن يساعدنا فى مشروعنا
http://eramax.net/images/a36.JPG
21-نذهب الان الصفحة الاساسية ال default من خلال الضغط اعلى فى الشريط على كلمة defaul.aspx
http://eramax.net/images/a20.JPG
22-نضغط مرتين متتاليتين على الزر forward على فكرة الزر سيظهر مكتوب عليه كلمة button لديكم لا تقلقوا سنعدل هذه الكلمة بعد قليل
ستظهر لنا الصفحة التالية
http://eramax.net/images/a18.JPG
23-ستظهر لنا صفحة الكود نذهب الى اعلاها ونعرف المتغيرات كما بالصورة نجعلهم طبعا static ومن نوع int
http://eramax.net/images/a19.JPG
24-نذهب مرة اخرى الى الصفحة الرثيسية ال default كما بالصورة
http://eramax.net/images/a20.JPG
25-نضغط ايضا مرة اخرى على زر forward كما بالصورة ضغطتين
http://eramax.net/images/a21.JPG
26-نكتب الكود التالى كما بالصورة التالية
اولا قمنا بجعل قيم كل المتغيرات التى لدينا بصفر حتى تمسح الى قيم كانت داخل اى متغير
ثانيا اعطينا المتغير التابع لزر forward وهو up قيمة واحد
وفى هذه الحالة سيتحرك الانسان الالى فى اتجاه forward اى الى الامام
ثالثا قمنا بارسال كل القيم التى لدينا الى الويب سيرفس التى تستقبلهما على متغيراتها كما شاهدنا
من خلال الاكواد التى فى الصورة
رابعا قمنا بتحويل قيم المتغيرات التى لدينا من int الى string حتى يتثنى لنا عرضها داخل
ال labels التى اضفناها الى صفحتنا (على فكرة لابد تسمسة الlabels كما سميتها انا فى الامثلة وسيتم ذلك قبل نهاية الدرس )
خامسا قمنا بتصفير قيمة المتغيرup الذى اعطيناه القيمة وهذا لتاكيد ثبات البرنامج وحفظا من الخطأ وهى (optional )
http://eramax.net/images/a22.JPG
27-كذلك بالنسبة لباقى الازرار (لا تنسى ان ترجع للصفحة الرئيسية وتضغط على الزر وتكتب الكود التابع له )
http://eramax.net/images/a24.JPG
http://eramax.net/images/a25.JPG
http://eramax.net/images/a26.JPG
http://eramax.net/images/a27.JPG
http://eramax.net/images/a28.JPG
http://eramax.net/images/a29.JPG
28-اما زر reset فوظيفته تصفير كل المتغيرات وهذا يعمل على ايقاف تحرك الانسان الالى
http://eramax.net/images/a30.JPG
29-الكتابة على ال labels كما قلت لك ينصح بعملها قبل كتابة الاكواد
انا اخذت لك مثال على الlabel الاول وسميتة درجة اعلى وانت اكمل الباقى
http://eramax.net/images/a31.JPG
30-ايضا الكتابة على الازرار وهذا مثال على زر forward وانت تكمل الباقى
http://eramax.net/images/a32.JPG
31-ملحوظة انا اسف نسيتها وهى اجعل ال ID الخاصة بكل Label من اللى كتبنا عليهم كما بالتالى
1.. ال label اللى مكتوب عليه "درجة اعلى " اجعل له "ID" == "labelup"
2.. ال label اللى مكتوب عليه "درجة اسفل " اجعل له "ID" == "labeldown"
3.. ال label اللى مكتوب عليه "درجة يمين " اجعل له "ID" == "labelright"
4.. ال label اللى مكتوب عليه "درجة يسار " اجعل له "ID" == "labelleft"
32-اخيرا قم بعمل debuge للمشروع بالضغط على زر" F6"
33-قم بتشغيل العمل كما بالصورة التالية
http://eramax.net/images/a37.JPG
34-لاحظ ما مكتوب فى الاسفل دليل على نجاح مشروعك وخلوه من الاخطاء
http://eramax.net/images/a38.JPG
35-شاهد الان مشروعك وهو شغال فى المتصفح
http://eramax.net/images/a39.JPG
36-جرب الضغط على اى زر ومثال اضغط على زر forward ولاحظ قيمة ال labelup فى الاسفل
http://eramax.net/images/a40.JPG
وبهذا اكون قد انتهيت من تصميم ال Web Application
اى استفسار او مشكلة الرجاء اضافتها الى المشروع او مراسلتى من خلال الموقع
سيتم باذن الله تكملة المشروع ووضع فكرة وطريقة تصميم ال Pc -Application حتى نتمكن من الحصول على القيم التى تعطيها لنا الويب سيرفس
وان شاء الله يسعنا الوقت ونضيف فكرة تصميم ال Embedded system الخاصة الريبوت(الانسان الالى )
ارجو منكم الدعاء لى بظهر الغيب تقبل الله منا ومنكم صالح الاعمال
اخوكم فى الله // احمد عصام
========================
اهلا بكم احبتى الكرام اليوم اقدم لكم فكرة مشروع عشتها وواجهة مشاكلها ولكن الحمد لله تم حلها
ففى هذه المشاركة ان شاء الله سيتتعرفون عن طرق جديدة وجميلة فى ادارة الموقع وامتيازات فريدة تقدمها لغة ASP.NET وايضا لغة البرمجة الشهيرة القوية C#
الموضوع كان بالضبط
>>>>تصميم صفحة ويب للتحكم فى انسان الى من خلال امره بالتحرك فى الاتجاهات<<<<
فكرة المشروع
::تصميم صفحة ويب تاخذ اوامر من المستخدم واضافة ويب سيرفس لهذا الموقع ياخذ الاوامر وايضا تصميم برنامج لتلقى الاوامر من صفحة الويب سيرفس ثم ارسالها الى ريبوت(انسان ألى)
فبهذه الطريقة نتمكن من التحكم فى الانسان الالى عبر الانترنت .
الان نبدأ معنا لنعيش مع لغات البرمجة ونحاول ان نضع التصميم معا
على فكرة لن اضع ملف ال"Source Code " الا بعد انتهاء الدروس حتى تعتمدون على انفسكم فى التنفيذ
اولا تصميم صفحة الويب
الهدف من هذه الصفحة هى ان تاخذ الاوامر من المستخدم وترسلها الى الويب سيرفس
1- نقوم بفتح برنامج الفيجول استديو 2005 كما بالصورة ثم نختار انشاء website جديد
http://eramax.net/images/a0.JPG
2- ثم نختار النوع كما بالصورة التالية
http://eramax.net/images/a1.JPG
3--بعد انشاء المشروع الجديد تظهر لك الصفحة التالية ادخل الى ال Design حتى نصمم شكل الصفحة كما بالصورة
http://eramax.net/images/a2.JPG
4-تظهر لك الصفحة التالية وهى التى تضيف فيها الاشكال والازرار
http://eramax.net/images/a3.JPG
5-اضغط على Toolsbox الموجود على اليسار كما بالصورة واختار الجدول واسحبه الى داخل الصفحة
http://eramax.net/images/a4.JPG
6-اجعل الجدول كما بالشكل التالى حتى يساعدنا التصميم
http:/eramax.net/images/a5.JPG
7-اعمل دمج للثلاث لخلايا الصف الاول كما بالشكل
http://eramax.net/images/a6.JPG
8-اعمل دمج لخلايا الصف الثانى والثالث بتحديد الخلايا كما بالشكل
http://eramax.net/images/a7.JPG
9-ادخل الى الSoultion Explorer التى فى اقصى اليمين واضغط باليمين على اسم المشروع واختار Newfolder حتى نضع فيه الصور وسميه مثلا img
http://eramax.net/images/a8.JPG
10-اضغط على المجلد الذى تم انشائه باليمين واختار كما بالصورة
http://eramax.net/images/a9.JPG
11-اختار الصور التى تريد اضافتها الى المجلد
http://eramax.net/images/a10.JPG
12-اضغط خارج الجدول اى على الصفحة ثم اختار properties ثم كما بالصورة
http://eramax.net/images/a11.JPG
13-اختار Background حتى تغير الخلفية
http://eramax.net/images/a12.JPG
14-اضغط كما بالصورة لاختيار الصورة
http://eramax.net/images/a13.JPG
15-اختار المجلد (img ) ثم اختار الصورة التى تود جعلها خلفية
http://eramax.net/images/a14.JPG
لاحظ الخلفية الان
16-اكتب داخل الصف الاول كما بالشكل (optional)
http://eramax.net/images/a15.JPG
http://eramax.net/images/a16.JPG
17-صمم هذا التصميم باضافة الازرار والlabels (مش عارف اسمها بالعربى)
حاول ان يكون تصميمك مثل ذلك
http://eramax.net/images/a17.JPG
18-اضف الى صفحة صفحة ويب سيرفس كما بالشكل التالى
وظيفتها هى تعمل ك interface (اداة اتصال بين ال web application و pc appliaction)
http://eramax.net/images/a34.JPG
19-لاحظ الان عندما تفتح الصفحة التى اضفتها (الويب سيرفس )
http://eramax.net/images/a35.JPG
20-قم باضافة الاكواد التالية الى صفحتك كما بالشكل التالى
اولا نحن عرفنا اربع متغيرات من نوع static من نوع int وفائدتهم هى حمل القيم من الصفحة الاساسية ال Default واعطائها الى ال pc application كما سنرى
ثم فى ال function الاساسية للويب سيرفس جعلناها تاخذ اربع قيم من ال pc application وهذه المتغيرات من نوع int وهى ref اى يمكن للويب سيرفس التعديل
فيها وارجاع القيم الجديدة الى ال pc application وهذه احدى طرق الخدع التى تمكنا من
ارجاع اكثر من قيمة من خلال function واحدة لانه كما تعلمون ان ال function
لا تقبل الا جملة return واحد وهذا لن يساعدنا فى مشروعنا
http://eramax.net/images/a36.JPG
21-نذهب الان الصفحة الاساسية ال default من خلال الضغط اعلى فى الشريط على كلمة defaul.aspx
http://eramax.net/images/a20.JPG
22-نضغط مرتين متتاليتين على الزر forward على فكرة الزر سيظهر مكتوب عليه كلمة button لديكم لا تقلقوا سنعدل هذه الكلمة بعد قليل
ستظهر لنا الصفحة التالية
http://eramax.net/images/a18.JPG
23-ستظهر لنا صفحة الكود نذهب الى اعلاها ونعرف المتغيرات كما بالصورة نجعلهم طبعا static ومن نوع int
http://eramax.net/images/a19.JPG
24-نذهب مرة اخرى الى الصفحة الرثيسية ال default كما بالصورة
http://eramax.net/images/a20.JPG
25-نضغط ايضا مرة اخرى على زر forward كما بالصورة ضغطتين
http://eramax.net/images/a21.JPG
26-نكتب الكود التالى كما بالصورة التالية
اولا قمنا بجعل قيم كل المتغيرات التى لدينا بصفر حتى تمسح الى قيم كانت داخل اى متغير
ثانيا اعطينا المتغير التابع لزر forward وهو up قيمة واحد
وفى هذه الحالة سيتحرك الانسان الالى فى اتجاه forward اى الى الامام
ثالثا قمنا بارسال كل القيم التى لدينا الى الويب سيرفس التى تستقبلهما على متغيراتها كما شاهدنا
من خلال الاكواد التى فى الصورة
رابعا قمنا بتحويل قيم المتغيرات التى لدينا من int الى string حتى يتثنى لنا عرضها داخل
ال labels التى اضفناها الى صفحتنا (على فكرة لابد تسمسة الlabels كما سميتها انا فى الامثلة وسيتم ذلك قبل نهاية الدرس )
خامسا قمنا بتصفير قيمة المتغيرup الذى اعطيناه القيمة وهذا لتاكيد ثبات البرنامج وحفظا من الخطأ وهى (optional )
http://eramax.net/images/a22.JPG
27-كذلك بالنسبة لباقى الازرار (لا تنسى ان ترجع للصفحة الرئيسية وتضغط على الزر وتكتب الكود التابع له )
http://eramax.net/images/a24.JPG
http://eramax.net/images/a25.JPG
http://eramax.net/images/a26.JPG
http://eramax.net/images/a27.JPG
http://eramax.net/images/a28.JPG
http://eramax.net/images/a29.JPG
28-اما زر reset فوظيفته تصفير كل المتغيرات وهذا يعمل على ايقاف تحرك الانسان الالى
http://eramax.net/images/a30.JPG
29-الكتابة على ال labels كما قلت لك ينصح بعملها قبل كتابة الاكواد
انا اخذت لك مثال على الlabel الاول وسميتة درجة اعلى وانت اكمل الباقى
http://eramax.net/images/a31.JPG
30-ايضا الكتابة على الازرار وهذا مثال على زر forward وانت تكمل الباقى
http://eramax.net/images/a32.JPG
31-ملحوظة انا اسف نسيتها وهى اجعل ال ID الخاصة بكل Label من اللى كتبنا عليهم كما بالتالى
1.. ال label اللى مكتوب عليه "درجة اعلى " اجعل له "ID" == "labelup"
2.. ال label اللى مكتوب عليه "درجة اسفل " اجعل له "ID" == "labeldown"
3.. ال label اللى مكتوب عليه "درجة يمين " اجعل له "ID" == "labelright"
4.. ال label اللى مكتوب عليه "درجة يسار " اجعل له "ID" == "labelleft"
32-اخيرا قم بعمل debuge للمشروع بالضغط على زر" F6"
33-قم بتشغيل العمل كما بالصورة التالية
http://eramax.net/images/a37.JPG
34-لاحظ ما مكتوب فى الاسفل دليل على نجاح مشروعك وخلوه من الاخطاء
http://eramax.net/images/a38.JPG
35-شاهد الان مشروعك وهو شغال فى المتصفح
http://eramax.net/images/a39.JPG
36-جرب الضغط على اى زر ومثال اضغط على زر forward ولاحظ قيمة ال labelup فى الاسفل
http://eramax.net/images/a40.JPG
وبهذا اكون قد انتهيت من تصميم ال Web Application
اى استفسار او مشكلة الرجاء اضافتها الى المشروع او مراسلتى من خلال الموقع
سيتم باذن الله تكملة المشروع ووضع فكرة وطريقة تصميم ال Pc -Application حتى نتمكن من الحصول على القيم التى تعطيها لنا الويب سيرفس
وان شاء الله يسعنا الوقت ونضيف فكرة تصميم ال Embedded system الخاصة الريبوت(الانسان الالى )
ارجو منكم الدعاء لى بظهر الغيب تقبل الله منا ومنكم صالح الاعمال
اخوكم فى الله // احمد عصام
========================