برمجة المواقع باستخدام ASP.NET

برمجة المواقع باستخدام ASP.NET

المحاضرة الأولى
مقدمة:
بعد التطور الذي شهده العالم التقني في مجال الوب Web و المعلومات التي يقدمها والتي لا يمكن حصرها في مجال معين دون آخر، وإنما مواقع الوب باتت تقدم مختلف العلوم و المعارف…
كانت برمجة مواقع الوب سابقا تقتصر على لغة Hyper Text Markup Language) HTML) لكن إن تطور مواقع الوب وظهور متطلبات أخرى غير عرض المعلومات، كان البذرة الأساسية لظهور تقنيات أخرى تساعد مصمم مواقع الوب على إنتاج مواقع وب ديناميكية, وآخر ما وصل إليه التطور من في بناء مواقع الوب الديناميكية هو:

ASP: Active Server Pages
PHP: Hypertext Preprocessor

لكن منتج شركة مايكروسوفت تجاوزت فيه جميع منتجاتها السابقة ASP.NET والذي يعتبر أكثر سهولة ويؤمن مرونة وأمان أكبر مقارنة بـ الـ PHP.

بالإضافة إلى تقنية الاجاكس Asynchronous JavaScript And XML AJAX‏ الجديدة والتي قدمت العديد من الإمكانيات في مجال تصميم و برمجة مواقع الوب.

سنعمد من خلال محاضرتينا إلى شرح كيفية برمجة وتصميم مواقع الوب باستخدام ASP.NET مع لغة البرمجة C# باستخدام بيئة التطويرVisual Studio 2008.

أولاً: إنشاء مشروع موقع جديد:

من قائمة File -> New -> Website ومن ثم نحدد مكان إنشاء الموقع ولغة البرمجة لكتابة أوامره.

يتم إنشاء ملفات المشروع الأولية تلقائياً وهي:

صفحة البداية

صفحة البداية Default.aspx الموضحة بالشكل التالي:………………………………….
مجلد ال App_Data الذي يفضل جمع كل مصادر البيانات المرتبطة بموقعنا فيه من قواعد بيانات وملفات XML …إلخ.
ملف الإعدادات web.config الذي له أهمية خاصة تنبع من:……………………………
عند نشر صفحات موقعنا المبنية في بيئة ال ASP.NET فإنه يتم ترجمتها Compiling بحيث يصبح من غير الممكن تعديل أوامرها لذلك ظهرت الحاجة لوجود طريقة لتخزين الأوامر الضرورية التي يمكن أن يتم تعديلها بعد نشر الموقع وتجلى ذلك في ملف ال web.config الذي يخزن العديد من الأوامر والبيانات الضرورية للموقع مثل نصوص الاتصال Connection String التي يتم تعديلها بمجرد رفع قاعدة بياناتنا على الخادم, وهو مبني بصيغة ملفات XML.

* إنشاء المجلدات وإضافة المكونات لموقعنا:

- يمكن إنشاء مجلدات إضافية في موقعنا من خلال الضغط بزر اليمين على أيقونة المشروع في متصفح المشروع Solution Explorer واختيار New Folder

- يمكن إضافة مكونات أخرى إلى موقعنا مثل الصور وملفات الوسائط المتعددة بالضغط بزر اليمين على أيقونة المشروع في متصفح المشروع Solution Explorer واختيار Add Existing Item أو على مجلد من المجلدات.

* نشر موقعنا على الشبكة العنكبوتية:

بعد الإنتهاء من بناء موقعنا في بيئة ال ASP.NET نقوم بعملية النشر له على أحد المخدمات Servers التي يجب أن تكون عاملة بنظام تشغيل المخدمات Windows Server, من قائمة Build -> Publish Web Site حيث يتم ترجمة الصفحات ورفعها على الخادم وتصبح الأوامر المكتوبة فيها غير قابلة للتعديل في الخادم على عكس لغات بناء المواقع الأخرى مثل ال PHP التي يمكن تعديل صفحاتها على الخادم مباشرة, كما نقوم بتحميل ملف قاعدة البيانات وربطه مع مخدم قواعد البيانات Database Server وتعديل نص الاتصال بقاعدة البيانات من ملف web.config.

ثانياً: مبادئ التصميم في ال ASP.NET:التصميم في عالم الوب Web يعتمد بشكل أساسي على تقسيم الصفحة إلى أجزاء من خلال استخدام الجداول Tables أو الأقسام Divisions.

- تتم إضافة الأقسام برمجياً وذلك بالكود التالي:

<div> محتويات القسم</div>

- أم بالنسبة للجداول يمكن إضافتها برمجيا أو من خلال قائمة Table -> Insert Table أما برمجيا فالمثال التالي يوضح كود إنشاء جدول مؤلف من سطرين وعمودين حيث المحاذاة align للوسط أما التباعد بين الخلايا cellspacing والحاشية cellpadding بمقدار 3بيكسل :

<table cellspacing="3" cellpadding="3" align="center">
<tbody>
<tr>
<td>
  الخلية الأولى من السطر الأول</td>
<td>
  الخلية الثانية من السطر الأول</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>

حيث <tr></tr> وسم إنشاء سطر, <td></td> وسم إنشاء خلية في سطر.

ملاحظة: إن محرر التصميم في ال Visual Studio لا يوفر مرونة كافية من ناحية تصميم صفحات ال ASP.NET لأنه يعد بيئة لبرمجة المواقع أكثر منها بيئة تصميم لذلك يلجأ معظم مطوري المواقع إلى الاستعانة ببرامج داعمة للتصميم من إنتاج Microsoft مثل Blend Expressions الذي يعد بيئة تصميم متكاملة لصفحات ال ASP أو FrontPage Professional وهو نسخة من متخصصة من FrontPage لتصميم وكتابة أوامر صفحات ال ASP.

ثالثاً: الأدوات في ال ASP.NET:تختلف الأدوات في ال ASP عن الأدوات في ال C# بشكل أساسي بخاصية الاسم Name حيث تقابلها خاصية (ID) في ال ASP, وهذه لمحة عن بعض الأدوات:

الأداة	وصفها	لمحة عنها
Label	نص تعريفي	أهم خصائصه Text
Text Box	صندوق نص	أهم خصائصه: Text النص المدخل في الصندوق. TextMode وتأخذ القيم: SingleLine سطر واحد, MultiLine اسطر متعددة, Password صندوق كلمة مرور.
Button	زر أمر
Link Button	زر أمر بشكل رابط
Image Button	زر أمر بشكل صورة
Hyper Link	نص تشعبي	أهم خصائصه NavigateURL العنوان الذي سيتم الانتقال له.
Drop down List	قائمة منسدلة	أهم خصائصه Items لإضافة وحذف وتعديل عناصرها.
List Box	صندوق قائمة	أهم خصائصه Items لإضافة وحذف وتعديل عناصره.
Check Box	صندوق اختيار متعدد
Check Box List	قائمة اختيار متعدد	أهم خصائصها Items لإضافة وحذف وتعديل عناصرها.
Radio Button	زر اختيار	أهم خصائصه GroupName لجمع أكثر من زر.
Radio Button List	قائمة أزرار اختيار	أهم خصائصها Items لإضافة وحذف وتعديل عناصرها.
Panel	لوح	أهم خصائصه DefaultButton الزر الذي سيتم ضغطه بمجرد الضغط على مفتاح Enter وتوجد هذه الخاصية لكل صفحة ASP.
Image	صورة	أهم خصائصها ImageURL مسارالصورة.

رابعاً: الأحداث Events:

نستطيع الوصول إلى نافذة الأحداث لكل كائن من الكائنات التي انشأناها من نافذة Properties تبويب Events بعد تحديد الكائن الذي نريد إضافة الأوامر له عند حدوث حدث معين.

وتكتب أوامر الأحداث باللغة التي قمنا باختيارها عند إنشاء مشروع الموقع وهي في حالتنا ال C#.
asp.net

خامساًً: التنقل بين الصفحات:

مثال1: ننشئ صفحة تسجيل دخول متضمنة الأدوات التالية:

صندوق نص لإدخال اسم المستخدم TxtUsername وآخر لكلمة المرور TxtPass ونغير خاصية ال Text Mode فيه إلى Password ونص توضيحي لإظهار الرسائل LblMsg نغير لون الخط فيه إلى أحمر وزر أمر BtnLogin بالإضافة إلى ثلاث نصوص توضيحية أخرى لا تهم تسميتها.

كما ننشأ صفحة ثانية وليكن اسمها p1.aspx فارغة ونكتب فيها نصاً ترحيبياً بالمستخدم فقط.

ننقر نقرا مزدوجا على زر الأمر BtnLogin ونضيف الأوامر التالية في الحدث Click له:

protected void BtnLogin_Click(object sender, EventArgs e)
 
{
 
if (TxtUser.Text.Equals("user") &amp;&amp; TxtPass.Text.Equals("pass"))
 
Response.Redirect("p1.aspx");
 
else
 
LblMsg.Text = "Error! Wrong UserName or Password";
 
}

* يمثل السطر

Response.Redirect("p1.aspx");

أمر إعادة التوجيه إلى الصفحة p1.aspx ويتم تنفيذه في جهاز العميل من قبل المستعرض.

* يمكن استخدام أمر الانتقال

Server.Transfer("pa.aspx");

وهذا الأمر يتم تنفيذه في المخدم وتعاد النتيجة إلى جهاز العميل.

الفرق بين إعادة التوجيه والانتقال بين الصفحات:

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

سادساً: تأمين الصفحات باستخدام ال Sessions أو ال Cookies:

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

1. الجلسات Sessions:

تبدأ كل جلسة بعملية تشغيل المتصفح وتنتهي بإغلاقه ويتم التخلص من جميع بيانات هذه الجلسة.

- يتم إضافة المتغيرات للجلسة وإعطائها قيم باستخدام الأمر التالي:

Session["login"] = “ok”;
حيث أنشأنا متغير للجلسة واسمه login وأعطيناه القيمة ok وسنرى لاحقا كيفية الاستفادة من هذا المتغير

- يتم حذف متغيرات الجلسات كلها دفعة واحدة باستخدام الأمر:

Session.Clear();

2. الكعكات Cookies:

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

- يتم إنشاء ملفات الكعكات باستخدام الأمر التالي:

HttpCookie hc = new HttpCookie("login", "ok");
 
Response.Cookies.Add(hc);

أو يمكن اختصار الأمرين السابقين كالتالي:

Response.Cookies.Add(new HttpCookie("login", "ok"));

- تحديد صلاحية ملفات الكعكات عند إنشائهم بعد 14 يوم بالأمر التالي:

Response.Cookies["login"].Expires = DateTime.Now.AddDays(14);

* إذا لم يتم تحديد صلاحية الكعكات يتم حذفهم عند إغلاق المتصفح أي يصبحون مثل الجلسات.

كما يمكن إنهاء صلاحيتهم فوراً باستخدام الأمر:

Response.Cookies["login"].Expires = DateTime.Now;

- ميزات وعيوب استخدام الجلسات وملفات الكعكات:

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

مثال2: بالعودة إلى المثال الأول لإضافة أسلوبي التأمين نضيف مجلدين Session و Cookies, ونقوم بنسخ الصفحتين Default.aspx و p1.aspx إلى كلا المجلدين ونقوم بتعديل أوامر زر تسجيل الدخول لتصبح كالآتي:

* باستخدام الجلسة:

protected void BtnLogin_Click(object sender, EventArgs e)
 
{
 
if (TxtUser.Text.Equals("user") &amp;&amp; TxtPass.Text.Equals("pass"))
 
{
 
Session["login"] = "ok";
 
Session["username"] = TxtUser.Text;
 
Response.Redirect("p1.aspx");
 
}
 
else
 
LblMsg.Text = "Error! Wrong UserName or Password";

ونضيف الأمر التالي إلى حدث تحميل الصفحة في الصفحة p1.aspx:

protected void Page_Load(object sender, EventArgs e)
 
{
 
if (Session["login"] == null)
 
Response.Redirect("Default.aspx");
 
else
 
this.Title = Session["username"].ToString();
 
}

نضيف زر أمر للصفحة p1 ونسميه BtnLogout ونكتب الأمر التالي في حدث ال Click:

protected void BtnLogout_Click(object sender, EventArgs e)
 
{
 
Session.Clear();
 
Response.Redirect("Default.aspx");
 
}

* باستخدام الكعكات:

protected void BtnLogin_Click(object sender, EventArgs e)
 
{
 
if (TxtUser.Text.Equals("user") &amp;&amp; TxtPass.Text.Equals("pass"))
 
{
 
Response.Cookies.Add(new HttpCookie("login", "ok"));
 
Response.Cookies.Add(new HttpCookie("username", TxtUser.Text));
 
Response.Cookies["login"].Expires = DateTime.Now.AddDays(10);
 
Response.Redirect("p1.aspx");
 
}
 
else
 
LblMsg.Text = "Error! Wrong UserName or Password";
 
}

ونضيف الأمر التالي إلى حدث تحميل الصفحة في الصفحة p1.aspx:

protected void Page_Load(object sender, EventArgs e)
 
{
 
if (Request.Cookies["login"] == null)
 
Response.Redirect("Default.aspx");
 
else
 
this.Title = "Welcome " + Request.Cookies["username"].Value;
 
}

نضيف زر أمر للصفحة p1 ونسميه BtnLogout ونكتب الأمر التالي في حدث ال Click:

protected void Button1_Click(object sender, EventArgs e)
 
{
 
Response.Cookies["login"].Expires = DateTime.Now;
 
Response.Redirect("Default.aspx");
 
}

سابعاً: أدوات المستخدم User Controls:

- أدوات المستخدم هي عبارة عن أجزاء من الصفحات تحتوي على مجموعة من الأدوات تؤدي عمل محدد نحتاج إليه في أكثر من صفحة في موقعنا مثال:

شريط التنقل أو ال Header أو ال Footer حيث نقوم ببناء شريط التنقل لكل صفحة من الصفحات على حدة وبالتالي تشكل عملية تعديل عنصر من عناصر شريط التنقل مشكلة كبيرة حيث يتوجب على مطور الموقع أن يقوم بتعديل أشرطة التنقل في كل الصفحات أما باستخدام أدوات المستخدمين يمكن بناء شريط تنقل واحد واستخدامه في جميع الصفحات وبالتالي تصبح عملية تعديله مقتصرة على الشريط الأساسي وتعدل باقي الأشرطة تلقائيا في كل الصفحات.

- يمكن استخدام أدوات المستخدم في أي صفحة نريد وذلك بسحب الأداة وإفلاتها في المكان الذي نريد وضعها فيه.

- لإضافة User Control جديد من قائمة Project -> Add Component أو Project -> Add New Item

نختار Web User Control.

ثامناً: الصفحة الأساسية Master Page:

- تستخدم الصفحة الرئيسية لأهداف تصميمية بالدرجة الأولى وخصوصا في المواقع التي تحتوي على أقسام ثابتة كبيرة في بنية صفحاتها, من خلالها يتم وضع قالب عام للأقسام الثابتة لصفحات الموقع ويتم إنشاء الصفحات انطلاقا منه, يمكن إنشاء أكثر من صفحة رئيسية في نفس الموقع.

- يتم في الصفحة الرئيسية إنشاء الأجزاء الثابتة في جميع صفحات الموقع, وتترك مساحة مخصصة لإضافة أدوات أو مكونات أخرى في صفحات الموقع وذلك من خلال أداة Content Place Holder التي توفر مساحة خاصة للتعديل في الصفحات المشتقة من الصفحة الرئيسية, وفي الصفحات المشتقة لا يمكن إضافة أي مكون خارج هذا الإطار.

- لإضافة Master Page جديدة من قائمة Project -> Add Component أو Project -> Add New Item

نختار Master Page.

- لإنشاء صفحة جديدة انطلاقا من صفحة أساسية موجودة من قائمة Project -> Add Component أو Project -> Add New Item نختار Web Content Form وبعد ذلك نختار ال Master Page التي سوف ينطلق منها.

مثال: إنشاء صفحة رئيسية وتقطيعها وتجهيزها وإنشاء صفحة مشتقة منها

منقول للفائدة(خوارزميات)

برمجة المواقع باستخدام ASP.NET

آخر المشاركات

تعليقات: 1