مقدمة ASP.NET

موضوع: مقدمة ASP.NET الجمعة مارس 12, 2010 2:54 am

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

الدرس الاول :

اخوتي واخواتي الافاضل ..
اقدم لكم سلسلة الدروس التعليمية الخاصة بتعليم برمجة وتصميم مواقع الوب باستخدام ASP.NET مع VB.net ...
بعد التطور الذي شهده العالم التقني في مجال تطور الوب و المعلومات التي يقدمها والتي لايمكن حصرها في مجال معين دون اخر ، وانما مواقع الوب باتت تتنوع وتقدم مختلف العلوم و المعارف ..
وقد كانت مواقع الوب سابقا لاتتعدى لغة HTML .. لكن تطور مواقع الوب وظهور متطلبات اخرى غير مجرد عرض المعلومات ، فقد كانت البذرة الاساسية لظهور تقنيات اخرى تساعد مصمم مواقع الوب على انتاج مواقع وب ديناميكية ذات قوة و متانه ..
وربما اخر ما وصل اليه التطور من قوة و سهولة وشيوعا في انتاج مواقع الوب الديناميكية هو (PHP & ASP) ، لكن شركة مايكروسوفت انتجت انتاجها القوي و الذي تجاوزت فيه جميع منتجاتها السابقة وهذا المنتج هو ASP.NET .. واما الان وحتى كتابة هذا الدرس فقد صدرت تقنية الاجاكس الجديدة و التي زادت الامكانيات في مجال تصميم و برمجة مواقع الوب ..
سنعمد من خلال هذه السلسلة التعليمية على شرح كيفية برمجة وتصميم مواقع الوب باستخدام ASP.NET مع لغة البرمجة VB.NET ...
وتجدر الاشارة الى انني ساقوم باستخدام الاصدارة Visual Studio 2005 الاصدار الاحترافي .. خلال شرح الدروس التعليمية .
وساحاول ان اتوخى قدر الامكان السهولة في شرح الدروس ..
كما انه ستكون فواصل زمنية ثابتة بين درس واخر من اجل ان يتسنى للطالب تطبيق الدرس ، بل الزيادة عليه وتجربة امكانيات اخرى اكثر من الامكانيات المشروحة في الدرس نفسه ..

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

[center]
تم تصغير الصورة بنسبة 88% (كانت 1024 x 738) - انقر على الصورة لعرضها بحجمها الحقيقي

ولاجل ان نقوم بانشاء موقع وب جديد ، ننقر على الكتابة Web Sit… المقابلة لـ Create:
او يمكننا استخدام طريقة اخرى لانشاء موقع وب جديد من خلال ..
File  New  Web Sit…
كما موضح في الصورة التالية :

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

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

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

تم تصغير الصورة بنسبة 88% (كانت 1024 x 738) - انقر على الصورة لعرضها بحجمها الحقيقي

حيث تشير الارقام الى :
الرقم 1 : نافذة الكود .
الرقم 2 : نافذة التصميم .
الرقم 3 : صندوق الادوات .
الرقم 4 : نافذة التصميم .
الرقم 5 : نافذة الكود .
الرقم 6 : موقع الوب وملفاته .
الرقم 7: نافذة الخصائص ..

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

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

ستظهر لنا نافذة التصميم حيث يمكننا وضع الادوات والكتابات وغيرها من عناصر تصميم الصفحة ..
نقوم بوضع نسخة من الاداة Label و الاداة Button على الصفحة بالشكل التالي :

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

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

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

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

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

الكود:: <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" /></div>

حيث ان السطر الاول من الكود يوضح طريقة اضافة الاداة Label الى النافذة ، اما الكود الاخير فهو يضير الزر Button الى الصفحة ..
اما السطر الموجود في المنتصف (
) فهو من اجل اضافة سطر بين الاداتين ..
نلاحظ من خلال كود اضافة الاداة عنصر التسمية Label ، انه حدد لنا الاسم البرمجي ID وحدد لنا النص المكتوب داخل الاداة Text .. اما runat فهو يوضح ان هذه الاداة هي اداة خادم وب (server) ... وهذا هو الفرق بين ادوات ASP.net و ادوات HTML ..

ستتوضح الصورة اكثر عندما نتعلم استخدام ادوات HTML ..

الان لنكتب الجملة ( Hello ,this is my test ) بدل العبارة Label في الخاصية Text ..

الكود:

وننقر على 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 ..

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

الكود:: [/color]
[color=#000000]Partial Class _Default
Inherits System.Web.UI.Page[/color]
[color=#000000]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[/color]
[color=#000000]

الكود الذي كتبناه هو : Label1.Text = “This is a Test”
بذلك عندما ينقر المستخدم على الزر فاننا نسند الجملة (This is a Test ) الى الخاصية Test التابعة لعنصر التسمية Label .
نقوم الان بتجربة الكود كما تعلمنا سابقا او من خلال نقر مفتاحي Ctrl + F5 من لوحة المفاتيح ..
عند النقر على الزر فان الصفحة تستجيب لنا بعرض العبارة الجديدة ..

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

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

دعائي للجميع بالتوفيق
للحديث بقية ان شاء الله

موضوع: رد: مقدمة ASP.NET السبت مارس 13, 2010 6:57 pm

بارك الله فيكِ حورية البحر

أتمنى من الله التوفيق لكِ وللجميع

موضوع: رد: مقدمة ASP.NET السبت مارس 20, 2010 10:56 am

موضوع: رد: مقدمة ASP.NET الأحد مايو 27, 2012 1:57 am

» مقدمة لا بد منها .. !
» مقدمة عن لغة البرمجة
» مقدمة عن التسويق العقاري
» مقدمة في أحكام الصيام
» مقدمة في برنامج (Auto CAD)