alfares
10-20-2009, 09:20 PM
ASP.Net
الدرس الاول
بداية الدرس
...
نقوم بتشغيل بيئة فيجوال ستوديو دوت نت لتظهر لنا النافذة الرئيسية
:
ولاجل ان نقوم بانشاء موقع وب جديد ، ننقر على الكتابة
Web Sit… المقابلة لـ Create:
او يمكننا استخدام طريقة اخرى لانشاء موقع وب جديد من خلال
..
File à New à Web Sit…
كما موضح في الصورة التالية
:
ستظهر لنا النافذة التالية
:
نتتبع الارقام الموضحة في الصورة اعلاه ، حيث نختار موقع
ASP.NET من الرقم 1 ، ونحدد مكان خزن الموقع من الرقم 2 ، ونحدد لغة البرمجة المستخدمة من 3، واخيرا ننقر على OK من 4 ..
سيتم انشاء موقع جديد وتظهر لنا النافذة التالية
..
حيث تشير الارقام الى
:
الرقم
1 : نافذة الكود .
الرقم
2 : نافذة التصميم .
الرقم
3 : صندوق الادوات .
الرقم
4 : نافذة التصميم .
الرقم
5 : نافذة الكود .
الرقم
6 : موقع الوب وملفاته .
الرقم
7: نافذة الخصائص ..
ملاحظة
:
نلاحظ من خلال شرح الارقام الموجودة في الصورة اعلاه انه توجد اكثر من نافذة تصميم واكثر من نافذة كود .. في الحقيقة ان نافذة التصميم هي نافذة واحدة كما سنتعلم خلال هذا الدرس و الدروس القادمة ، اما نافذة الكود فهي نافذتان .. حيث بامكاننا ان نعزل كود لغة VB.net في صفحة خاصة به نصل اليها من خلال نقر الزر المكتوب فوقه الرقم 5 ، اما النافذة التي نصل اليها من خلال النقر على 1 فهي نافذة الكود المصدري .
الان نذهب الى نافذة التصميم من خلال النقر على الكتابة الموجودة اسفل الرقم
2 او النقر على الزر الموجود اسفل الرقم 4 .
ستظهر لنا نافذة التصميم حيث يمكننا وضع الادوات والكتابات وغيرها من عناصر تصميم الصفحة
..
نقوم بوضع نسخة من الاداة
Label و الاداة Button على الصفحة بالشكل التالي :
يتم وضع الادوات على نافذة العمل من خلال سحب الادوات من صندوق الادوات وافلاتها على نافذة العمل او التصميم
..
نلاحظ ان الاداتين كلاهما على سطر واحد
.. نضع المؤشر عند نهاية الاداة Label وننقر مفتاح Enter من لوحة المفاتيح ليصبح الزر Button اسفل عنصر التسمية Label ..
حيث اننا كلما نقرنا مفتاح
Enter سينزل الزر بمقدار سطر واحد ..
ملاحظة
: سنتعلم في الدروس القادمة كيفية استخدام الجداول من اجل ترتيب مواقع الادوات ضمن الصفحة .
كبداية
.. ننقر على source الموجودة اسفل الصفحة ( التي كان يظهر عليها الرقم 1 ) ..
ستفتح لنا نافذة الكود المصدري
..
ومن ضمن الكود المكتوب نلاحظ الكود التالي
:
<asp:LabelID="Label1"runat="server"Text="Label"></asp:Label>
<br/>
<asp:ButtonID="Button1"runat="server"Text="Button"/></div>
حيث ان السطر الاول من الكود يوضح طريقة اضافة الاداة Label الى النافذة ، اما الكود الاخير فهو يضير الزر Button الى الصفحة ..
اما السطر الموجود في المنتصف
(<br /> ) فهو من اجل اضافة سطر بين الاداتين ..
نلاحظ من خلال كود اضافة الاداة عنصر التسمية
Label ، انه حدد لنا الاسم البرمجي ID وحدد لنا النص المكتوب داخل الاداة Text .. اما runat فهو يوضح ان هذه الاداة هي اداة خادم وب (server) ... وهذا هو الفرق بين ادوات ASP.net و ادوات HTML ..
ستتوضح الصورة اكثر عندما نتعلم استخدام ادوات
HTML ..
الان لنكتب الجملة
( Hello ,this is my test ) بدل العبارة Label في الخاصية Text ..
<asp:LabelID="Label1"runat="server"Text="Hello ,this is my test"></asp:Label>
وننقر على
Design الموجودة بالقرب من Source من اجل الانتقال من نافذة كود المصدر الى نافذة التصميم ..
نلاحظ ان الجملة
( Hello ,this is my test) قد كتبت في عنصر التسمية ..
كذلك يمكننا التحكم بصورة اكثر بساطة في خصائص الاداوت من خلال نافذة الادوات
Properties ..
نتاكد من اننا حدد اداة عنصر التسمية
Label ثم نغير قيمة الخاصية Text من نافذة الخصائص ونكتب فيها ..
مرحبا ، هذه صفحة تجريبية
نلاحظ ان الجملة كتبت في عنصر التسمية
..
كذلك يمكننا ان نفعل الشئ نفسه من اجل اداة الزر
Button من خلال تحديدها وكتابة النص الذي نريده ان يظهر عليها من خلال اسناده الى الخاصية Text ..
تجربة الصفحة وتشغيل خادم الوب
:
ان الصفحات التي نقوم بانشاؤها باستخدام
ASP.Net تحتاج الى خادم وب من اجل تشغيلها بصورة صحيحة .
في الاصدارات السابقة كنا نقوم بعمل مجلد وهمي ليتم تشغيله من قبل
IIS .. ولكن الان قامت شركة مايكروسوفت بتطوير خادم وب يعمل تلقائيا عند تجربة الصفحة ..وبذلك لانحتاج لعمل اي اعدادات مسبقة لاختبار الصفحات التي نقوم بانشاؤها ..
نلاحظ انه بامكاننا تشغيل واختبار الصفحة من خلال الذهاب الى قائمة
Debug ومن ثم اختيار الامر Start Without Debugging .
عندها ستقوم بيئة التشغيل بتشغيل خادم الوب الافتراضي ومن ثم فتح مستعرض الانترنت و عرض الصفحة
.
سنلاحظ بجانب ساعة الحاسوب ايقونه مصغرة لخادم الوب
خادم الوب
ونلاحظ ان الصفحات التي يتم انشاؤها باستخدام
ASP.Net تاخذ اللاحقة .aspx
وهنا الصفحة هي
Default.aspx
نشاهد عبارة الترحيب التي كتبناها في عنصر التسمية
Label و النص على الزر Button ..
الان حاول النقر على الزر
... تلاحظ انه لن يحدث شئ ، السبب في ذلك اننا لم نقم بكتابة اي كود ليتم تنفيذه عند النقر على الزر ..
نغلق متصفح الوب
.. ونرجع الى بيئة VS.net ..
الان سنكتب كود مبسط يقوم بعرض عبارة معينة على عنصر التسمية عند نقر الزر
..
ابسط طريقة لكتابة حدث النقر للزر هو بالنقر على الزر نقرا مزدوجا
..
ستفتح لنا نافذة الكود ، لكنها هذه المرة تختلف عن نافذة كود المصدر ، انها واجهة مخصصة لكتابة الكود بلغة فيجوال بيسك دوت نت
..
نكتب الكود المطلوب لتبدو الكود الكلي كما يلي
:
PartialClass _Default
Inherits System.Web.UI.Page
ProtectedSub Button1_Click(ByVal sender AsObject, ByVal e As System.EventArgs) Handles Button1.Click
Label1.Text = "This is a Test"
EndSub
EndClass
الكود الذي كتبناه هو
: Label1.Text = "This is a Test"
بذلك عندما ينقر المستخدم على الزر فاننا نسند الجملة
(This is a Test ) الى الخاصية Test التابعة لعنصر التسمية Label .
نقوم الان بتجربة الكود كما تعلمنا سابقا او من خلال نقر مفتاحي
Ctrl + F5 من لوحة المفاتيح ..
عند النقر على الزر فان الصفحة تستجيب لنا بعرض العبارة الجديدة
..
الى هنا ناتي الى نهاية درسنا ، في الدروس القادمة سنتعلم كيفية تغيير الخصائص الاخرى للادوات وكيفية استخدام ادوات اخرى
..
ارجو ان تكونوا قد استفدتم من الدرس
..
دعائي للجميع بالتوفيق
ملاحظه: الدروس بواسطة م0محمد حمزات من موقع دانه
الدرس الاول
بداية الدرس
...
نقوم بتشغيل بيئة فيجوال ستوديو دوت نت لتظهر لنا النافذة الرئيسية
:
ولاجل ان نقوم بانشاء موقع وب جديد ، ننقر على الكتابة
Web Sit… المقابلة لـ Create:
او يمكننا استخدام طريقة اخرى لانشاء موقع وب جديد من خلال
..
File à New à Web Sit…
كما موضح في الصورة التالية
:
ستظهر لنا النافذة التالية
:
نتتبع الارقام الموضحة في الصورة اعلاه ، حيث نختار موقع
ASP.NET من الرقم 1 ، ونحدد مكان خزن الموقع من الرقم 2 ، ونحدد لغة البرمجة المستخدمة من 3، واخيرا ننقر على OK من 4 ..
سيتم انشاء موقع جديد وتظهر لنا النافذة التالية
..
حيث تشير الارقام الى
:
الرقم
1 : نافذة الكود .
الرقم
2 : نافذة التصميم .
الرقم
3 : صندوق الادوات .
الرقم
4 : نافذة التصميم .
الرقم
5 : نافذة الكود .
الرقم
6 : موقع الوب وملفاته .
الرقم
7: نافذة الخصائص ..
ملاحظة
:
نلاحظ من خلال شرح الارقام الموجودة في الصورة اعلاه انه توجد اكثر من نافذة تصميم واكثر من نافذة كود .. في الحقيقة ان نافذة التصميم هي نافذة واحدة كما سنتعلم خلال هذا الدرس و الدروس القادمة ، اما نافذة الكود فهي نافذتان .. حيث بامكاننا ان نعزل كود لغة VB.net في صفحة خاصة به نصل اليها من خلال نقر الزر المكتوب فوقه الرقم 5 ، اما النافذة التي نصل اليها من خلال النقر على 1 فهي نافذة الكود المصدري .
الان نذهب الى نافذة التصميم من خلال النقر على الكتابة الموجودة اسفل الرقم
2 او النقر على الزر الموجود اسفل الرقم 4 .
ستظهر لنا نافذة التصميم حيث يمكننا وضع الادوات والكتابات وغيرها من عناصر تصميم الصفحة
..
نقوم بوضع نسخة من الاداة
Label و الاداة Button على الصفحة بالشكل التالي :
يتم وضع الادوات على نافذة العمل من خلال سحب الادوات من صندوق الادوات وافلاتها على نافذة العمل او التصميم
..
نلاحظ ان الاداتين كلاهما على سطر واحد
.. نضع المؤشر عند نهاية الاداة Label وننقر مفتاح Enter من لوحة المفاتيح ليصبح الزر Button اسفل عنصر التسمية Label ..
حيث اننا كلما نقرنا مفتاح
Enter سينزل الزر بمقدار سطر واحد ..
ملاحظة
: سنتعلم في الدروس القادمة كيفية استخدام الجداول من اجل ترتيب مواقع الادوات ضمن الصفحة .
كبداية
.. ننقر على source الموجودة اسفل الصفحة ( التي كان يظهر عليها الرقم 1 ) ..
ستفتح لنا نافذة الكود المصدري
..
ومن ضمن الكود المكتوب نلاحظ الكود التالي
:
<asp:LabelID="Label1"runat="server"Text="Label"></asp:Label>
<br/>
<asp:ButtonID="Button1"runat="server"Text="Button"/></div>
حيث ان السطر الاول من الكود يوضح طريقة اضافة الاداة Label الى النافذة ، اما الكود الاخير فهو يضير الزر Button الى الصفحة ..
اما السطر الموجود في المنتصف
(<br /> ) فهو من اجل اضافة سطر بين الاداتين ..
نلاحظ من خلال كود اضافة الاداة عنصر التسمية
Label ، انه حدد لنا الاسم البرمجي ID وحدد لنا النص المكتوب داخل الاداة Text .. اما runat فهو يوضح ان هذه الاداة هي اداة خادم وب (server) ... وهذا هو الفرق بين ادوات ASP.net و ادوات HTML ..
ستتوضح الصورة اكثر عندما نتعلم استخدام ادوات
HTML ..
الان لنكتب الجملة
( Hello ,this is my test ) بدل العبارة Label في الخاصية Text ..
<asp:LabelID="Label1"runat="server"Text="Hello ,this is my test"></asp:Label>
وننقر على
Design الموجودة بالقرب من Source من اجل الانتقال من نافذة كود المصدر الى نافذة التصميم ..
نلاحظ ان الجملة
( Hello ,this is my test) قد كتبت في عنصر التسمية ..
كذلك يمكننا التحكم بصورة اكثر بساطة في خصائص الاداوت من خلال نافذة الادوات
Properties ..
نتاكد من اننا حدد اداة عنصر التسمية
Label ثم نغير قيمة الخاصية Text من نافذة الخصائص ونكتب فيها ..
مرحبا ، هذه صفحة تجريبية
نلاحظ ان الجملة كتبت في عنصر التسمية
..
كذلك يمكننا ان نفعل الشئ نفسه من اجل اداة الزر
Button من خلال تحديدها وكتابة النص الذي نريده ان يظهر عليها من خلال اسناده الى الخاصية Text ..
تجربة الصفحة وتشغيل خادم الوب
:
ان الصفحات التي نقوم بانشاؤها باستخدام
ASP.Net تحتاج الى خادم وب من اجل تشغيلها بصورة صحيحة .
في الاصدارات السابقة كنا نقوم بعمل مجلد وهمي ليتم تشغيله من قبل
IIS .. ولكن الان قامت شركة مايكروسوفت بتطوير خادم وب يعمل تلقائيا عند تجربة الصفحة ..وبذلك لانحتاج لعمل اي اعدادات مسبقة لاختبار الصفحات التي نقوم بانشاؤها ..
نلاحظ انه بامكاننا تشغيل واختبار الصفحة من خلال الذهاب الى قائمة
Debug ومن ثم اختيار الامر Start Without Debugging .
عندها ستقوم بيئة التشغيل بتشغيل خادم الوب الافتراضي ومن ثم فتح مستعرض الانترنت و عرض الصفحة
.
سنلاحظ بجانب ساعة الحاسوب ايقونه مصغرة لخادم الوب
خادم الوب
ونلاحظ ان الصفحات التي يتم انشاؤها باستخدام
ASP.Net تاخذ اللاحقة .aspx
وهنا الصفحة هي
Default.aspx
نشاهد عبارة الترحيب التي كتبناها في عنصر التسمية
Label و النص على الزر Button ..
الان حاول النقر على الزر
... تلاحظ انه لن يحدث شئ ، السبب في ذلك اننا لم نقم بكتابة اي كود ليتم تنفيذه عند النقر على الزر ..
نغلق متصفح الوب
.. ونرجع الى بيئة VS.net ..
الان سنكتب كود مبسط يقوم بعرض عبارة معينة على عنصر التسمية عند نقر الزر
..
ابسط طريقة لكتابة حدث النقر للزر هو بالنقر على الزر نقرا مزدوجا
..
ستفتح لنا نافذة الكود ، لكنها هذه المرة تختلف عن نافذة كود المصدر ، انها واجهة مخصصة لكتابة الكود بلغة فيجوال بيسك دوت نت
..
نكتب الكود المطلوب لتبدو الكود الكلي كما يلي
:
PartialClass _Default
Inherits System.Web.UI.Page
ProtectedSub Button1_Click(ByVal sender AsObject, ByVal e As System.EventArgs) Handles Button1.Click
Label1.Text = "This is a Test"
EndSub
EndClass
الكود الذي كتبناه هو
: Label1.Text = "This is a Test"
بذلك عندما ينقر المستخدم على الزر فاننا نسند الجملة
(This is a Test ) الى الخاصية Test التابعة لعنصر التسمية Label .
نقوم الان بتجربة الكود كما تعلمنا سابقا او من خلال نقر مفتاحي
Ctrl + F5 من لوحة المفاتيح ..
عند النقر على الزر فان الصفحة تستجيب لنا بعرض العبارة الجديدة
..
الى هنا ناتي الى نهاية درسنا ، في الدروس القادمة سنتعلم كيفية تغيير الخصائص الاخرى للادوات وكيفية استخدام ادوات اخرى
..
ارجو ان تكونوا قد استفدتم من الدرس
..
دعائي للجميع بالتوفيق
ملاحظه: الدروس بواسطة م0محمد حمزات من موقع دانه