التعامل مع واجهة التطوير الاساسية

 فيما يلي اسباب التعامل مع واجهة التطوير التي تدعى Solution Explorer 

1 - تنظيم الملفات في Solution Explorer 

يعتبر Solution Explorer المكان الذي يجري فيه اضافة و تجميع الملفات الخاصة بتطبيق الوب 

يمكن استخدام خاصة Drag&Drop بين Solution Explorer و بين نزام ملفات Windows لنقل ملفات من هذا الاخير باتجاه Solution Explorer 

فعلى سبيل المثال يمكن بالنقر بالزر اليميني على Project Name ( يدعى تلقائيا Web Site 1 ) و اختيار Add New Item ان تظهر لنا مجموعة الملفات التي يمكن اضافتها 

و يمكن عندها اختيار XML File بحيث تظهر ضمن Solution Explorer حيث يمكن استخدامها في عملية التطوير البرمجي في حال كانت هناك حاجة لوجودها 

2 - استخدام نوافذ و واجهات الخصائص : 

يتعامل المطور الذي يستخدم البيئة مع نافذة معممة على مختلف العناصر و التي تدعى نافذة الخصائص ( Properties ) 

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

فعلى سبيل المثال : 

1 - اذهب الى صفحة Design View من الصفحة التي قمت بتوليدها 

2 - اختر من Tool box عنصر التحكم Button /ن فئة Standard و انقله الى الصفحة 

3 - اضغط بالزر اليميني للفارة على العنصر Button و اختر Properties ان نرتب الخصائص ترتيبا ابجديا 

5 - بالذهاب الى الخاصة ID يمكن تغيير قيمتها الى btnAccept مثلا و اختيار لون بالنسبة للزر و الخط و غيره 

بالذهاب الى زر Source المجاور ببزر Design View سيظهر الرماز الذي تم توليده بعد تغيير الخصائص 

بناء موقع ASP NET 

سنقوم فيما يلي بتوليد موقع بسيط يتعامل مع جدول ضمن قاعدة معطيات SQL Server 

1 - توليد الموقع : 

1 - اختر File --> New Web Site 

2 - عند ظهور مربع الاختيار اختر Empty Web Site 

3 - حدد مكان لتخزينه ( مثل D : / My Web Site ) 

4 - يمكن اختيار لغة التطوير C # او Visual Basic 

5 - بهذا يكون لدينا موقع فارغ تماما و يمكننا البناء اعتبارا منه 

6 - استخدام SQL Server Express Database

1 - اضغط بالزر اليميني على الموقع و اختر Add New Item 

2 - اختر SQL Database 

3 - ضع الاسم الذي تختاره لقاعدة المعطيات ( مثلا My Web Site ) 

4 - سيقوم بتوليد App Data و وضع القاعدة ضمنه 

5 - بالضغط ضغطتين على My Web Site . mdf سيظهر Database Explorer 

6 - بالضغط بالزر اليميني على Tables و اختيار Add Table ستظهر واجهة تسمح باضفاة حقول للجدول ومفاتيحه وفقا لخيارات المطور 

7 - بالذهاب الى File --> Save All سيطلب منك النظام تسمية الجدول لحفظه 

8 - اضغط بالزر اليميني على الجدول واختر Show data 

9 - بالذهاب الى النافذة اليسارية يمكنك ملئ الجدول 

10 - اضغط بالزر اليميني على الموقع و اختر Add New Item 

11 - اختر Web From ستظهر Default . aspx 

12 - بعملية Drag & Drop خذ الجدول الذي قمت ببناؤه و انقله الى مقطع div الموجود في الصفحة Default . aspx 

سيتم عرضه ضمنها 

13 - يمكنك الان عرضه عبر الضغط بالزر اليميني على الصفحة و اختيار Show in Browser 

التعاملمع المعطيات و ادارتها و معالجتها 

سنستعرض في هذه الفقرة طريقة توليد و بناء قاعدة معطيات مرتبطة بتطبيق وب و طريقة التعامل مع مكونات هذه القاعدة 

عموما نحتاج لتأمين العمليات الاساسية التالية عند التعامل مع قاعدة معطيات : 

1 - اضافة معطيات الى القاعدة 

2 - البحث عن معطيات موجودة ضمن القاعدة 

3 - تحديث معطيات ضمن القاعدة 

4 - حذف معطيات من القاعدة 

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

5 - يقدم المعطيات بشكل جذاب و انيق 

6 - يحسن من زمن جلب المعلومات و عرضها على الشاشة 

للتعرف على Smart Tags 

تمتلك عناصر تحكم ASP . NET المتقدمة مثل العنصر Grid View ادوات مساعدة على تصميمها ندعوها Designers 

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

تظهر معظم ادوات التصميم عند استدعاء الواجهة Smart Tag و هي لوحة من الاجرائيات المساعدة على تصميم عنصر التحكم 

للوصول الى هذه الواجهة يكفي ازاحة عنصر تحكم ( زر من الازرار ) اعتبارا من Tool box و من ثم الضغط بالزر اليميني عليه و تأشير Show Smart Tag 

تحسين عنصر التحكم Grid View 

يمثل عنصر التحكم Grid View واجهة للتعامل مع المعطيات الموجودة في القاعدة ( الترتيب ، الاختيار ، العرض ) و سعتبر من عناصر التحكم المهمة و الفاعلة التي سنستعرضها بالتفصيل لاحقا 

في هذه المرحلة سنضع العنصر Grid View على صفحة الوب و نقوم بتنفيذ بعض الاعدادات عليه : 

1 - اختر عنصر التحكم Grid View من مجموعة الادوات Data و اضغط بالزر اليميني على زر Smart Tag 

2 - اختر Auto Format تعرض هذه النافذة ال Schemas المتوفرة لنختر ( Professional ) مثلا 

3 - اختر مصدر المعطيات ( Data Source ) و ليكن متمثلا بقاعدة المعطيات التي سبق و وردناها 

4 - يمنكن الان اختيار Sorting Paging و التي ستسمح بترتيب الاسطر ضمن Grid View و توزيع المعطيات على صفحات و القيام بعملية اختيار لسطر من اسطر ال Grid 

5 - يمكن الان و بعد العرض بالمتصفح ان نختار سطرا بالضغط على Select 

6 - يمكن ايضا ان نرتب وفق الترتيب الابجدي في العمود First Name بالضغط عليه 

7 - اذهب الى Smart Tag و اضغط على Edit Columns و من ثم اختر Selected Fields 

8 - يمكنك الان تغيير اعدادات الاظهار مثلا الخاصة بحقل من حقول الجدول ( لون الخلفية و غيره ) 

عنصر التحكم Form View 

يساعد عنصر التحكم Form View في توليد المعطيات لتنفيذ ذلك 

1 - اختر عنصر التحكم Form View من مجموعة الادوات Data و اسحبه الى اسفل Grid View 

2 - اختر مصدر المعطيات ( Data Source ) و ليكن متمثلا بقاعدة المعطيات التي اخترنا التعامل معها في Grid View 

3 - تساعد Form View على اضافة عمليات Insert , Update و غيرها اعتبارا من الواجهات Template 

تثبيت عنوان الصفحة 

4 - بالذهاب الى Design View و الضغط بالزر اليميني للفارة على المساحة البيضاء و اختيار Properties يمكن الذهاب الى المربع اليميني الذي يحتوي على الخصائص عنوان الصفحة الى Persons مثلا 

سيظهر عنوان الصفحة في اعلى المتصفح عند استعراضها باستخدام View in Browser