• 0
AhmedElbaz

مقدمة الي ASP.NET للمبتدئين

سؤال

السلام عليكم

مقدمة للمبتدئين في ASP.NET من دروس الاخ المهندس / عـــدي ياســين

رايت ان اضعها هنا للفائدة

الدرس الاول :

اخوتي واخواتي الافاضل ..

اقدم لكم سلسلة الدروس التعليمية الخاصة بتعليم برمجة وتصميم مواقع الوب باستخدام ASP.NET مع VB.net ...

بعد التطور الذي شهده العالم التقني في مجال تطور الوب و المعلومات التي يقدمها والتي لايمكن حصرها في مجال معين دون اخر ، وانما مواقع الوب باتت تتنوع وتقدم مختلف العلوم و المعارف ..

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

وربما اخر ما وصل اليه التطور من قوة و سهولة وشيوعا في انتاج مواقع الوب الديناميكية هو (PHP & ASP) ، لكن شركة مايكروسوفت انتجت انتاجها القوي و الذي تجاوزت فيه جميع منتجاتها السابقة وهذا المنتج هو ASP.NET .. واما الان وحتى كتابة هذا الدرس فقد صدرت تقنية الاجاكس الجديدة و التي زادت الامكانيات في مجال تصميم و برمجة مواقع الوب ..

سنعمد من خلال هذه السلسلة التعليمية على شرح كيفية برمجة وتصميم مواقع الوب باستخدام ASP.NET مع لغة البرمجة VB.NET ...

وتجدر الاشارة الى انني ساقوم باستخدام الاصدارة Visual Studio 2005 الاصدار الاحترافي .. خلال شرح الدروس التعليمية .

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

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

اخيرا

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

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

دعائي للجميع بالتوفيق

بداية الدرس ...

نقوم بتشغيل بيئة فيجوال ستوديو دوت نت لتظهر لنا النافذة الرئيسية :

post-39990-1226299331_thumb.jpg

ولاجل ان نقوم بانشاء موقع وب جديد ، ننقر على الكتابة Web Sit… المقابلة لـ Create:

او يمكننا استخدام طريقة اخرى لانشاء موقع وب جديد من خلال ..

File  New  Web Sit…

كما موضح في الصورة التالية :

post-39990-1226299346_thumb.jpg

ستظهر لنا النافذة التالية :

post-39990-1226299355_thumb.jpg

نتتبع الارقام الموضحة في الصورة اعلاه ، حيث نختار موقع ASP.NET من الرقم 1 ، ونحدد مكان خزن الموقع من الرقم 2 ، ونحدد لغة البرمجة المستخدمة من 3، واخيرا ننقر على OK من 4 ..

سيتم انشاء موقع جديد وتظهر لنا النافذة التالية ..

post-39990-1226299366_thumb.jpg

حيث تشير الارقام الى :

الرقم 1 : نافذة الكود .

الرقم 2 : نافذة التصميم .

الرقم 3 : صندوق الادوات .

الرقم 4 : نافذة التصميم .

الرقم 5 : نافذة الكود .

الرقم 6 : موقع الوب وملفاته .

الرقم 7: نافذة الخصائص ..

ملاحظة: نلاحظ من خلال شرح الارقام الموجودة في الصورة اعلاه انه توجد اكثر من نافذة تصميم واكثر من نافذة كود .. في الحقيقة ان نافذة التصميم هي نافذة واحدة كما سنتعلم خلال هذا الدرس و الدروس القادمة ، اما نافذة الكود فهي نافذتان .. حيث بامكاننا ان نعزل كود لغة VB.net في صفحة خاصة به نصل اليها من خلال نقر الزر المكتوب فوقه الرقم 5 ، اما النافذة التي نصل اليها من خلال النقر على 1 فهي نافذة الكود المصدري .

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

ستظهر لنا نافذة التصميم حيث يمكننا وضع الادوات والكتابات وغيرها من عناصر تصميم الصفحة ..

نقوم بوضع نسخة من الاداة Label و الاداة Button على الصفحة بالشكل التالي :

post-39990-1226299372_thumb.jpg

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

نلاحظ ان الاداتين كلاهما على سطر واحد .. نضع المؤشر عند نهاية الاداة Label وننقر مفتاح Enter من لوحة المفاتيح ليصبح الزر Button اسفل عنصر التسمية Label ..

post-39990-1226299386_thumb.jpg

حيث اننا كلما نقرنا مفتاح Enter سينزل الزر بمقدار سطر واحد ..

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

كبداية .. ننقر على source الموجودة اسفل الصفحة ( التي كان يظهر عليها الرقم 1 ) ..

post-39990-1226299392_thumb.jpg

ستفتح لنا نافذة الكود المصدري ..

ومن ضمن الكود المكتوب نلاحظ الكود التالي :

	  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:Button ID="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:Label ID="Label1" runat="server" Text="Hello ,this is my test"></asp:Label>

وننقر على Design الموجودة بالقرب من Source من اجل الانتقال من نافذة كود المصدر الى نافذة التصميم ..

نلاحظ ان الجملة ( Hello ,this is my test) قد كتبت في عنصر التسمية ..

كذلك يمكننا التحكم بصورة اكثر بساطة في خصائص الاداوت من خلال نافذة الادوات Properties ..

نتاكد من اننا حدد اداة عنصر التسمية Label ثم نغير قيمة الخاصية Text من نافذة الخصائص ونكتب فيها ..

مرحبا ، هذه صفحة تجريبية

post-39990-1226299398_thumb.jpg

نلاحظ ان الجملة كتبت في عنصر التسمية ..

كذلك يمكننا ان نفعل الشئ نفسه من اجل اداة الزر Button من خلال تحديدها وكتابة النص الذي نريده ان يظهر عليها من خلال اسناده الى الخاصية Text ..

تجربة الصفحة وتشغيل خادم الوب :

ان الصفحات التي نقوم بانشاؤها باستخدام ASP.Net تحتاج الى خادم وب من اجل تشغيلها بصورة صحيحة .

في الاصدارات السابقة كنا نقوم بعمل مجلد وهمي ليتم تشغيله من قبل IIS .. ولكن الان قامت شركة مايكروسوفت بتطوير خادم وب يعمل تلقائيا عند تجربة الصفحة ..وبذلك لانحتاج لعمل اي اعدادات مسبقة لاختبار الصفحات التي نقوم بانشاؤها ..

نلاحظ انه بامكاننا تشغيل واختبار الصفحة من خلال الذهاب الى قائمة Debug ومن ثم اختيار الامر Start Without Debugging .

post-39990-1226299405_thumb.jpg

عندها ستقوم بيئة التشغيل بتشغيل خادم الوب الافتراضي ومن ثم فتح مستعرض الانترنت و عرض الصفحة .

سنلاحظ بجانب ساعة الحاسوب ايقونه مصغرة لخادم الوب

خادم الوب

post-39990-1226299413_thumb.jpg

ونلاحظ ان الصفحات التي يتم انشاؤها باستخدام ASP.Net تاخذ اللاحقة .aspx

وهنا الصفحة هي Default.aspx

post-39990-1226299420_thumb.jpg

نشاهد عبارة الترحيب التي كتبناها في عنصر التسمية Label و النص على الزر Button ..

الان حاول النقر على الزر ... تلاحظ انه لن يحدث شئ ، السبب في ذلك اننا لم نقم بكتابة اي كود ليتم تنفيذه عند النقر على الزر ..

نغلق متصفح الوب .. ونرجع الى بيئة VS.net ..

الان سنكتب كود مبسط يقوم بعرض عبارة معينة على عنصر التسمية عند نقر الزر ..

ابسط طريقة لكتابة حدث النقر للزر هو بالنقر على الزر نقرا مزدوجا ..

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

نكتب الكود المطلوب لتبدو الكود الكلي كما يلي :

Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Label1.Text = "This is a Test"
End Sub
End Class

الكود الذي كتبناه هو : Label1.Text = “This is a Test”

بذلك عندما ينقر المستخدم على الزر فاننا نسند الجملة (This is a Test ) الى الخاصية Test التابعة لعنصر التسمية Label .

نقوم الان بتجربة الكود كما تعلمنا سابقا او من خلال نقر مفتاحي Ctrl + F5 من لوحة المفاتيح ..

عند النقر على الزر فان الصفحة تستجيب لنا بعرض العبارة الجديدة ..

post-39990-1226299425_thumb.jpg

الى هنا ناتي الى نهاية درسنا ، في الدروس القادمة سنتعلم كيفية تغيير الخصائص الاخرى للادوات وكيفية استخدام ادوات اخرى ..

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

دعائي للجميع بالتوفيق

للحديث بقية ان شاء الله

3

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

59 إجابة على هذا السؤال .

  • 0

الدرس الثاني

الاخوة و الاخوات الافاضل ..

مرحبا بكم في الدرس الثاني من دروس تعليم برمجة وتصميم مواقع الوب باستخدام ASP.NET & VB.NET ..

تعلمنا في الدرس السابق كيفية تشغيل بيئة VS.NET وكيف نقوم بانشاء موقع وب جديد وكذلك وضع الادوات على النموذج وكتابة كود بسيط جدا من اجل اظهار جملة معينة على عنصر التسمية ..

سنتعلم في هذا الدرس كيفية التحكم بخصائص الادوات وكيفية استخدام صندوق النص TextBox ...

نشغل بيئة Visual Studio.NET ونقوم بفتح موقع الوب الذي انشأناه في الدرس السابق ..

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

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

Label1.Text = "Hello, This is a test"

حيث اننا اشرنا الى اداة عنصر التسمية من خلال اسمها البرمجي المسند الى الخاصية ID وهو Label1

واما من اجل الوصول الى خصائص اداة معينة فيمكنا ذلك من خلال كتابة اسم الاداة ومن ثم (.) ومن ثم الخاصية المطلوبة .

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

ملاحظة: ان حفظ اسماء الخصائص سيتم من خلال كثرة الممارسة وكتابة الكود ، لذلك فكل ما عليك الان هو فهم امكانيات كل خاصية .

في البداية سنتحدث عن الخصائص الاربعة الموضحة في الصورة ادناه :

post-39990-1226307422_thumb.jpg

لون خلفية الاداة .

لون الاطار المحيط بالاداة .

نمط الاطار المحيط بالاداة .

عرض الاطار المحيط بالاداة .

نقوم بالنقر على المربع الابيض المقابل للخاصية BackColor .. نلاحظ انه سيظهر لنا على الجانب مربع داخله سهم صغير كما موضح ادناه في الصورة :

post-39990-1226307427_thumb.jpg

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

post-39990-1226307432_thumb.jpg

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

ونفس الشئ يمكننا عمله مع الخاصية Border Color من اجل تحديد لون الاطار المحيط بالاداة .. لكننا نلاحظ اننا عندما نقوم بتحديد لون معين للاطار فلن نشاهد اي اطار يحيط بالاداة .. كذلك لو اخترنا احدى الاختيارات التي توفرها لنا بيئة التطوير عند الخاصية BorderStyle من اجل تحديد نوع الاطار المحيط بالاداة فلن نشاهد اي اطار يحيط بالاداة ..

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

في الحقل المقابل للخاصية BorderWidth نقوم بادخال قيمة رقمية ولتكن مثلا 3 ..

نلاحظ انه ظهر لنا اطار يحيط بالاداة ونلاحظ تاثير الخصائص التي حددناها مسبقا والخاصة بالاطار ..

post-39990-1226307439_thumb.jpg

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

post-39990-1226307444_thumb.jpg

حيث يكون صندوق النص في الاعلى و من اسفله الزر Button ومن ثم عنصر التسمية .

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

وبسورة ابسط ، عندما ينقر المستخدم على الزر فان قيمة الخاصية Text التابعة لعنصر التسمية ستكون مساوية لقيمة الخاصية Text التابعة لصندوق النص ..

ننقر نقرا مزدوجا على الزر ونكتب الكود التالي :

Label1.Text = TextBox1.Text

الان نقوم بتجربة الصفحة من خلال النقر على مفتاحي Ctrl+F5 من لوحة المفاتيح ..

نقوم بادخال نص معين وثم ننقر على الزر ، نلاحظ ور النص في عنصر التسمية .

post-39990-1226307455_thumb.jpg

والان لو نقرنا على الصة بالزر الايمن للفارة .. واخترنا من القائمة المنبثقة الامر View Source ..

نلاحظ ان الادوات تم تصييرها على شكل ادوات HTML ..

كذلك نشاهد كيف تم اسناد الخصائص لكل اداة من الادوات ..

post-39990-1226307462_thumb.jpg

<input name="TextBox1" type="text" value="الموسوعة التعليمية الكبرى" id="TextBox1" /> 
<br />
<br />
<input type="submit" name="Button1" value="انقر هنا " id="Button1" />
<br />
<br />
<span id="Label1" style="display:inline-block;background-color:Yellow;border-color:Black;border-width:3px;border-style:Double;">الموسوعة التعليمية الكبرى</span></div>

الان نعدل الكود من اجل ان نتحكم ببعض خصائص صندوق النص بصورة برمجية ..

سيصبح الكود النهائي لحدث النقر على الزر كما يلي :

 Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Label1.Text = TextBox1.Text
With TextBox1
.BorderStyle = BorderStyle.Dotted
.BorderWidth = 3
End With
End Sub

نقوم الان بتشغيل الصفحة من خلال Ctrl+F5 وننقر على الزر بعد ان نكتب داخل صندوق النص فتبدو النتيجة كما يلي ..

post-39990-1226307468_thumb.jpg

من خلال الكود السابق ، تحكمنا بنمط الاطار المحيط بصندوق النص وكذلك عرض الاطار ..

نلاحظ من خلال الكود السابق اننا اسندنا القيمة 3 لخاصية عرض الاطار ، كذلك يمكننا ان نستخدم اسلوب اخر من اجل تحديد عرض الاطار .. نستبدل الكود السابق الخاص بعرض الاطار بالكود التالي ..

.BorderWidth = Unit.Pixel(3)

عند تجربة الكود من خلال عرض الصفحة في المتصفح ونقر الزر ، نلاحظ اننا نحصل على النتيجة نفسها .

الان نظيف سطري الكود التاليين الى الكود السابق ..

.Width = 250
.Height = 20

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

عند تجربة الصفحة نلاحظ النتيجة بعد النقر على الزر ..

post-39990-1226307477_thumb.jpg

كذلك يمكننا ان نحدد العرض او الارتفاع بنفس الاسلوب الذي استخدمناه مع عرض الاطار وكما يلي :

.Width = Unit.Pixel(250)

او يمكننا ان نحدد العرض و الارتفاع على شكل نسبة مئوية .. كما يلي :

.Width = Unit.Percentage(30)

اما الان نقوم باظافة اربعة ازرار الى الصفحة لتبدو كما يلي بعد الانتهاء من تصميمها :

post-39990-1226307488_thumb.jpg

حيث سنقوم من خلال الازرار الموضحة بتفعيل صندوق النص او ايقاف تفعيله ، وكذلك اخفاء او اظهار صندوق النص .

نبدا الان بكتابة الكود الخاص بالازرار الاربعة ..

أولا : الزر اخفاء صندوق النص :

Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
TextBox1.Visible = False
End Sub

ثانيا : الزر اظهار صندوق النص :

  Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
TextBox1.Visible = True
End Sub

ثالثا : الزر تفعيل صندوق النص :

Protected Sub Button5_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button5.Click
TextBox1.Enabled = True
End Sub

رابعا : الزر عدم تفعيل صندوق النص :

Protected Sub Button4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button4.Click
TextBox1.Enabled = False
End Sub

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

الى هنا انتهى درسنا ..

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

دعائي للجميع بالتوفيق

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

شكرا الك على الموضوع انا كثير ساعدني

وبتمنى منك تساعدني بمشروعي التخرج ازا وقتك بيسمح

وبكون ممنونة الك ادا ساعدتني

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

جزاااااااااااااااااك الله خير وفي ميزان حسناتك دروس جدا مفيدة ننتظر المزيد الله يعطيك العافية

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

والله انا لي زمن بفتش علي الشروحات دي مشكور جدا ي باش مهندس ونفعك الله بعلمك

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

مشكووووووووووووووووووووووووووووووووووووووووور

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

بارك الله فيك وجعله الله في ميزان حسناتك.............

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

مشكور اخي الكريم على هذه الجهد الطيب

جزاك الله خير

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .