المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

في المشاريع الكبيرة والتي تحتوي على صفحات كثيرة ومتعددة فغالباً يكون تقسيم الصفحات بنفس الشكل والنظام مثلاً نتحدث عن مجلة أو برنامج إدارة محتوى مثل مجلة النيوك.

نلاحظ ان الصفحة تنقسم لخمسة أقسام

1. منطقة الهيدر (الترويسة العلوية)
2. منطقة الفوتر (الترويسة السفلية)
3. منطقة القوائم اليمين
4. منطقة القوائم اليسار
5. محتوى الصفحه في المنتصف بين الأقسام الأربعة أعلاه

كل الصفحات تتكون من خمس أقسام تتشابه فيها أربعة أقسام وهي:

1. منطقة الهيدر (الترويسة العلوية)
2. منطقة الفوتر (الترويسة السفليه)
3. منطقة القوائم اليمين
4. منطقة القوائم اليسار

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

الطريقة هي باستخدام صفحات الـ Web User Control. سيكون لدينا أربع صفحات نستدعيهم في كل صفحات الموقع، الأولى للهيدر والثانية للفوتر والثالثة للقائمة اليمنى، والرابعه للقائمة اليسرى.

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

نفرض أن لدينا صفحة في الموقع هي index.aspx تتكون من الخمسة أجزاء التي تم ذكرها أعلاه.

طريقة العمل

نقوم بإضافة أربع صفحات Web User Control ونسميها هكذا مثلاً:

• header.ascx الترويسة العلوية
• footer.ascx الترويسة السفلية
• rightmenu.ascx القوائم على اليمين
• leftmenu.ascx القوائم على اليسار

نستدعي هذه الأربع صفحات في صفحة الإندكس index.aspx، في السورس كود لصفحة الإندكس ومباشرة تحت أول سطر.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" StylesheetTheme="Andalus" Theme="Andalus" %>

نقوم باستدعاء الأربع صفحات Web User Control وكود الاستدعاء.

<%@ Register TagPrefix="NewsTemp" TagName="header" Src="controlpages/header.ascx" %>
<%@ Register TagPrefix="NewsTemp" TagName="footer" Src="controlpages/footer.ascx" %>
<%@ Register TagPrefix="NewsTemp" TagName="rightmenu" Src="controlpages/rightmenu.ascx" %>
<%@ Register TagPrefix="NewsTemp" TagName="leftmenu" Src="controlpages/leftmenu.ascx" %>

لاحظ أنني وضعت الأربع صفحات في داخل مجلد خاص بها وهو ControlPages، كما أن كل صفحة لها اسم خاص بها سنسخدمه في استدعاء الصفحة فيما بعد في المكان الذي نريد عرضها به واسمها هو TagName.

1. صفحة الهيدر اسمها header
2. وصفحة الفوتر اسمها footer
3. وصفحة القوائم اليمين اسمها rightmenu
4. وصفحة القوائم اليسار اسمها leftmenu

هذه الأسماء مسنده لل TagName في الكود ويمكن أن نعتبرها مثل الأسماء البرمجية التي نستدعي بها الأدوات.

الآن في داخل الفورم لصفحة الإندكس Form نقوم باستدعاء هذه الصفحة بالطريقة التي نرغب بها، مثلاً صفحة الهيدر تكون في رأس الصفحة ومباشرة تحته فتحة الـ Form نستدعيها بهذا الكود:

<NewsTemp:header runat="server" ID="HeaderTemp" />

وصفحة الفوتر تكون في آخر الصفحة نستدعيها قبل اغلاق ال Form بهذا الكود:

<NewsTemp:footer runat="server" ID="FooterTemp" />

الآن بين منطقة الهيدر والفوتر نريد عمل منطقة للقوائم اليمنى ومنطقة للقوائم اليسرى، وفي المنتصف محتوى الصفحة. ببساطة ننشئ جدولاً يتكون من صف واحد وثلاثة أعمدة، قم بتقسيمها، مثلاً العامود الأول من اليمين عرضه 25% من الصفحة والعامود الثاني وهو عامود المنتصف عرضه 50% من الصفحة، والعامود الثالث وهو عامود القوائم اليسرى عرضه 25% من الصفحة.

هذا هو الجدول:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr>
		<td align="center" style="width: 20%; height: 16px;" valign="top">
		هنا منطقة القوائم اليمين
		</td>
		<td align="center" style="width: 60%; height: 16px;" valign="top">
		هنا محتوى الصفحة
		</td>
		<td align="center" style="width: 20%; height: 16px;" valign="top">
		هنا منطقة القوائم اليسار
		</td>
	</tr>
</table>

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

<NewsTemp:rightmenu runat="server" ID="RightMenuTemp" />

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

<NewsTemp:leftmenu runat="server" ID="LeftMenuTemp" />

ومكان جملة محتوى الصفحة نعرض محتوى الصفحة فيه.

الآن، انتهينا من عمل الصفحة ونفس هذا التصميم يكون لكل صفحات الموقع وهكذا أنت تضمن أنك لو أردت فيما بعد أن تقوم بالتعديل على الهيدر مثلاً، فتقوم بتعديل صفحة header.ascx فقط.

نتطرق قليلاً لصفحات الـ Web User Control

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

فمثلاً يمكنك أن تصنع نظام بلوكات أو قوائم يتم إضافة القوائم من لوحة التحكم مثل مجلة النيوك وفي اليمين أو اليسار ومن خلال صفحة الكنترول للقوائم اليمين أو اليسار تستدعي هذه القوائم وتفرغها في الصفحة فيكون لديك نظااام قوائم كما هو في برامج إدارة المحتوى والمجلات العالمية مثل مجلة النيوك في الـ php أو أي مجلة أخرى حتى مجلات الـ asp.

أسأل الله تعالى أن أكون وفقت في الشرح، وأي استفسار أنا موجود.

في أمان الله وحفظه ولاتنسونا من دعائكم ابداً.