|
| عنوان | تجربه ساخت سايت IranIT بر اساس روش مدولار | ||||
| نويسنده | حسن ابوالحسنى | تاريخ ارسال | 14/07/1381 | نام قسمت | فناورى |
| نويسنده همکار | هادي صبوحي | ||||
|
در اين مقاله ابتدا مراحلي که با پيروي از آنها مي‌توان سايتي به روش مدولار ايجاد کرد را توضيح داده و آنگاه نکات برجسته در ساخت سايت IranIT را ارائه مي کنيم. مراحل ساخت سايت به روش مدولار مرحله 1 : طراحي ساختار كلي در اين مرحله براي صفحات مختلف سايت، بصورت كلي يك طراحي انجام مي‌شود، تا شكل كلي اين صفحه تعيين‌گردد. به عنوان مثال صفحه زير را براي صفحه اصلي (Home Page) يك سايت نمونه و ساده درنظربگيريد :  شكل 1 : طرح كلي صفحه همان‌طور كه ديده‌مي‌شود در اين صفحه فقط بخش‌ها از يكديگر متمايز شده و شكل كلي اين صفحه را نمايش مي‌دهد. در اين صفحه هيچ‌گونه جزيياتي راجع به محتوي نشان‌داده‌نمي‌شود. هر چند كه اين شكل شامل هيچ‌گونه محتوي خاصي نيست ولي براي طراحان سايت مي‌تواند كمكي باشد كه بتوانند طرح كلي سايت را ايجاد نمايند. به يك نمونه ساده براي ساخت اين صفحه توجه كنيد :
<table>
<tr>
<td>
آرم سايت
</td>
<td>
منو اصلي
</td>
</tr>
<tr>
<td>
Sign in بخش
</td>
<td rowspan=”2”>
قسمت اصلي يا بدنه صفحه
</td>
</tr>
<tr>
<td>
آگهي‌ها
</td>
</tr>
<tr>
<td colspan=”2”>
يك متن توضيحي ساده (Copyright)
</td>
</tr>
</table>
مرحله 2 : شناخت مدول‌ها همان طور كه در شكل 1 مشاهده‌مي‌شود صفحه را مي‌توان به بخشهاي مجزايي تقسيم‌نمود. هر يك از اين بخش‌ها يك مدول را تشكيل مي‌دهند. مدولهاي مشاهده شده در شكل 1 شامل موارد زير مي‌باشد : مرحله 3 : طراحي شكل ظاهري هر مدول در اين مرحله جزييات ظاهري هر مدول مشخص‌شده تا شكل اين قسمت خاص از صفحه تعيين گردد. براي اين منظور براي تك تك مدول‌ها بصورت جداگانه طراحي صورت مي‌گيرد و در نهايت از كنار هم قرار دادن اين مدول‌ها طبق شكل كلي مرحله 1 جزييات تمام صفحه مشخص‌مي‌شود :  شكل 2 : تعيين جزييات صفحه نكته قابل توجه در اين مرحله آن است كه فقط بايد شكل ظاهري مدول‌ها تعيين شوند و مسايلي مانند رنگ و اندازه فونت‌ها و اين‌گونه جزييات در اين مرحله مشخص نمي‌شود. مرحله 4 : ساخت مدول‌ها در اين مرحله هر يك از مدول‌ها بصورت يك فايل XML ساخته مي‌شوند. در ساخت فايلهاي XML با توجه به اينكه جزييات ظاهري اجزا هنوز معين‌نشده‌اند، بنابراين فقط خود اجزا در اين فايل‌ها نوشته مي‌شوند :نكته قابل توجه در اين مرحله آن است كه فقط بايد شكل ظاهري مدول‌ها تعيين شوند و مسايلي مانند رنگ و اندازه فونت‌ها و اين‌گونه جزييات در اين مرحله مشخص نمي‌شود. مثال 1 : مدول آرم سايت Logo.xml <module_logo> <image source="logo.gif" /> </module_logo> همان‌طور كه مشاهده مي‌شود، فقط اجزا هر مدول در XML تعيين‌مي‌شود و هيچ‌گونه جزييات ظاهري از آن در فايل XML قرارداده‌نمي‌شود. مثال 2 : مدول بخش Sign in Signin.xml
<module_signin>
<form target="signin.php">
<text_field text="شناسه كاربر :" name="userid" type="text"/>
<text_field text="رمز عبور :" name="password" type="password"/>
<submit text=”ورود”/>
</form>
</module_signin>
يادآوري مي‌شود كه اين فايل‌ها بايد مطابق قوانين XML باشند. به همين ترتيب كد XML ساير مدول‌ها نيز ساخته شده و بصورت فايل‌ها جداگانه نگهداري مي‌شوند. در مورد مدول‌هايي كه محتوي آنها ثابت نبوده و بصورت پويا ايجاد مي‌شوند، نيز در نهايت بايد كد XML ساخته‌شود ولي مي‌توان اين كار را توسط برنامه‌نويسي انجام‌داد. به اين ترتيب كه يك تكه برنامه نوشته‌مي‌شود كه خروجي آن يك كد XML باشد. فعلا در اين مثال ساده از اين قسمت صرفنظر مي‌شود تا در مثالي ديگر اين قسمت بصورت كامل‌تر بيان گردد. مرحله 5 : اتصال فايلهاي XML مدول‌ها به يكديگر در اين مرحله بايد فايلهاي XML مورد نياز براي ساختن كل صفحه به يكديگر متصل شده و تشكيل يك فايل را بدهند. براي سادگي فرض كنيد كه اين كدها كنار يكديگر قرار گرفته و فايل Sample.xml ساخته‌شده‌است. (در مثال‌هاي كامل‌تر نحوه انجام اين مرحله به تفصيل شرح‌داده‌مي‌شود) Sample.xml
<page>
<module_logo>
<image source="logo.gif" />
</module_logo>
<module_menu>
<link>
<url>target1.php</url>
<text> ارجاع به صفحه 1</text>
</link>
<link>
<url>target2.php</url>
<text> ارجاع به صفحه 2</text>
</link>
<link>
<url>target3.php</url>
<text> ارجاع به صفحه 3</text>
</link>
</module_menu>
<module_signin>
<form target="signin.php">
<text_field text="شناسه كاربر :" name="userid" type="text"/>
<text_field text="رمز عبور :" name="password" type="password"/>
<submit text=”ورود”/>
</form>
</module_signin>
<module_main>
<text> در اين قسمت محتوي اصلي سايت قرار مي‌گيرد كه ... </text>
<book>
<title>عنوان شماره 1</title>
<author>فرد 1</author>
<price>5555</price>
</book>
<book>
<title>عنوان شماره 2</title>
<author>فرد 2</author>
<price>6666</price>
</book>
<book>
<title>عنوان شماره 3</title>
<author>فرد 3</author>
<price>7777</price>
</book>
</module_main>
<module_ads>
<item>
<link>
<image source=”ad1.gif” />
</link>
</item>
<item>
<link>
<image source=”ad2.gif” />
</link>
</item>
</module_ads>
<module_copyright>
<text>حقوق تمام مطالب محفوظ مي‌باشد!</text>
</module_copyright>
</page>
همان‌طور كه مشاهده مي‌شود، اين فايل شامل مجموع تمام مدول‌ها بوده و محتويات آنها در اين فايل مشخص‌شده‌است. كل مدول‌ها در يك Tag به نام <page>قرارداده‌شده است. دليل اين امر قرارگرفتن كل كدهاي XML مدول‌ها تحت يك نام براي فراخواني آسان‌تر است. مرحله 6 : ساخت فايل XSL در اين مرحله فايل XSL ساخته‌مي‌شود. در فايل XSL نحوه تبديل فايل XML مرحله 5 به كد HTML تعيين مي‌شود. بنابراين در اين قسمت كليه جزييات ظاهري اجزا شامل رنگ و غيره تعيين مي‌گردد. به دليل پيچيدگي و اهميت اين بخش نحوه ساخت فايل XSL قدم به قدم شرح داده‌مي‌شود : فايل اوليه XSL : <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html dir="rtl"> <body> </body> </html> </xsl:template> </xsl:stylesheet> اين فايل XSL شامل يك Template مي‌باشد كه چون با ويژگي match=”/” مشخص شده، بنابراين نمايانگر فراخواني Tag ريشه‌اي فايل sample.xml كه همان page است، مي‌باشد. براي آنكه طرح كلي صفحه نمايش داده شود، مي‌توان از كد HTMLي كه در مرحله 1 ساخته شد، استفاده كرد. اين كد را در بين دو Tag آغازي و پاياني body قرار مي‌دهيم. حال نوبت آن است كه كد HTML هر مدول ساخته شود. براي اين منظور به عنوان مثال يك فراخواني براي Template مربوط به Logo در قسمت مربوط قرارمي‌دهيم :  بجاي عبارت "آرم سايت" متن قرمز رنگ قرار مي‌گيرد. با اين كار اعلام مي‌شود كه در اين قسمت بايد محتوي Template مربوط به module_logo قرارگيرد. ساخت Template مربوط به Logo :
<xsl:template match="page/module_logo/">
<img border="0">
<xsl:attribute name="src">
<xsl:value-of select="image/@source"/>
</xsl:attribute>
</img>
</xsl:template>
به اين ترتيب يك Image tag جايگزين مي‌گردد. توضيح : با استفاده از كد <xsl:attribute name="src">ويژگي src مربوط به img تعيين مي‌گردد كه مقدار آن از طريق <xsl:value-of select="image/@source"/>كه بيانگر مقدار ويژگي source از image Tag بوده و برابر logo.gif است، خواهدشد. به همين ترتيب مطابق قوانين ساخت فايلهاي XSL اين فايل كامل‌تر مي‌گردد و در نهايت كد XSL براي كليه مدول‌ها ساخته‌مي‌شود. مرحله 7 : فراخواني sample.xsl براي ساخت فايل خروجي HTML با استفاده از sample.xml در نهايت بايد خروجي HTML اين صفحه با استفاده از دو فايل sample.xml و sample.xsl ساخته شود. به عنوان مثال، براي انجام اين كار در زبان PHP، كد بصورت زير است : $xh = xslt_create(); $result = xslt_process($xh, 'sample.xml', 'sample.xsl'); print $result; xslt_free($xh); در ابتدا ممكن است، گفته شود كه چه نيازي به اين همه پيچيدگي است. زيرا به راحتي مي‌توان كد HTML مربوط به آن را در چند دقيقه ايجاد نمود و از آن به راحتي استفاده كرد. ولي در نظر بگيريد كه مهمترين مزيت اين روش آن است كه دو بخش برنامه‌نويسي و طراحي صفحه از يكديگر مجزا بوده و به صورت جداگانه قابل تغيير خواهند بود. در واقع اين ايده با مفهوم جديدي در نرم افزار که اصطلاحا "جداسازي مرکز توجه" (Separation of Concern) يا SoC بطور اختصار، مطابقت دارد. مزيت ديگر فاکتورگيري از کدهاي html و قرار دادن آنها در يک فايل xsl است. به اين ترتيب نه تنها براي توليد کدهاي html مربوط به تعداد قابل توجهي از صفحات لازم نيست تا بخش عمده اي از کدها را در هر صفحه تکرار کنيد (نظير منوها، قسمتهاي بالايي و پاييني صفحات و غيره)، بلکه به اين وسيله نگهداري سايت نيز ساده تر مي شود. نحوه پياده سازي اين ايده ها در سايت IranIT بخاطر مزاياي گفته شده در بالا و همچنين به دلايل زير:
 شكل 3 : معماري سايت IranIT.info تمامي درخواستها به يک کنترلر مرکزي (Front Controller) ارسال مي‌شود (که چون سايت در محيط php ايجاد شده برنامه index.php اين وظيفه را بر عهده دارد). اين کنترلر فايل sitemap.xml که تعريف کننده قالب تمام صفحات سايت است را در صورت نياز پردازش کرده و برنامه اي بنام sitemap.php را توليد مي نمايد. در صورتيکه در اين فايل تغييري اعمال شود کنترلر آنرا براي درخواست بعدي پردازش و برنامه sitemap.php جديدي ايجاد مي کند. به هر حال براي پاسخگويي به يک درخواست کنترلر مرکزي برنامه sitemap.php را اجرا مي نمايد. اين برنامه با داشتن مشخصه صفحه مورد درخواست (که با object_id در url مشخص مي شود)، محتواي مدولهاي ايستاي مربوط به آنرا از فايلهاي xml مربوطه خوانده، برنامه هاي مربوط به مدولهاي ديناميک را اجرا کرده و حاصل آنها را بصورت يک مستند کامل xml براي آن صفحه ترکيب مي نمايد. مستند حاصل شده به کنترلر برگشت داده شده که سپس براي تشکيل کد نهايي بفرم html يک پروسسور xsl را بر روي اين مستند با اعمال قواعد ساخته شده در فايل iranit.xsl اجرا مي نمايد. اين معماري بر اساس دو الگوي طراحي که بنامهاي Front Controller و Model-View-Controller (يا MVC بطور اختصار) شناخته مي شوند بنا شده است. در الگوي Front Controller هر درخواست ابتدا به يک کنترلر مرکزي که به همين نام شناخته مي شود وارد مي شود. به اين ترتيب اين امکان فراهم مي شود تا بر روي درخواستها، پروسه ها و اعمال يکساني را اعمال نمود. در معماري ما کنترلر وظيفه دارد تا به هنگام بودن برنامه sitemap.php را با تطابق دادن تاريخ آخرين update آن با فايل sitemap.xml بررسي کرده و در صورت نياز آنرا دوباره بازسازي کند. سپس همانطوريکه در بالا ذکر شد آن برنامه را اجرا کرده و نتايج را به xsl پرسسور رد مي‌نمايد. البته کنترلر اعمال ديگري مانند لاگ کردن درخواست وغيره نيز انجام مي دهد که در اينجا از وارد شدن به جزئيات آنها پرهيز مي کنيم. به هرصورت مزيت اصلي استفاده از اين الگو تغيير پروسه پاسخگويي به درخواستها بدون نياز به تغيير در همه برنامه هاست. و اما الگوي MVC به منظور جداسازي مدل (براي تشکيل نتيجه)، ويو (براي تعيين نحوه نمايش نتيجه) و کنترلر (براي هماهنگ ساختن مدل و ويو) بکار رفته است. به اين ترتيب اين امکان وجود دارد تا هر يک از اين اجزاء را بدون وابستگي به ديگران تغيير يا جايگزين کرد. به عنوان مثالي ساده براي قابليت رؤيت سايت بر روي دستگاههاي موبايل که قابليت html browsing دارند، تنها نياز است ويو را تغيير داد. اين دو الگو امروزه بطور وسيعي در ساخت وب سايتهاي بزرگ بکار مي روند. در بسياري از محيطهاي توليد وب امکاناتي براي اعمال آنها براحتي فراهم شده است. بطور مشخص در محيط J2EE که محيط استاندارد توليد وب سايتها براساس زبان جاوا است اين دو به همراه برخي الگوهاي معروف ديگر بطور گسترده اي پشتيباني مي‌شوند. متاسفانه بخاطر محدوديتهاي محيط php پشتيباني از آن در اين محيط وجود نداشته و آنچه که در اين سايت ايجاد شده تماما بوسيله توليد کنندگان گسترش داده شده است. براي داشتن ايده اي از نحوه مديريت اين سايت بر اساس معماري ذکر شده در اينجا قسمتي از فايل sitemap.xml را با هم مرور مي کنيم: <page id="top"> <module name="title" type="xml" source="title_top.xml"/> <module name="counter" type="program" source="GetAddCounter"/> <module name="search" type="xml" source="search.xml"/> <module name="logo" type="xml" source="logo.xml"/> <module name="generalnavigation" type="xml" source="generalnavigation.xml"/> <module name="activepart" type="program" source="active_part"/> <module name="sectionmenu" type="program" source="section_menu"/> <module name="feedback" type="xml" source="visitorfeedback.xml"/> <module name="article_list" type="program" source="article_list"/> <module name="news_list" type="program" source="news_list"/> <module name="userpart" type="program" source="myiranit_or_login"/> <module name="advise" type="program" source="advise_module"/> <module name="copyright" type="xml" source="copyright.xml"/> </page> هر صفحه سايت با يک عنصر page در اين فايل تعريف مي‌شود. تکه بالا تعريف کننده صفحه اصلي سايت که با top مشخص مي شود، است. در زير آن مدولهاي تشکيل دهنده آن صفحه ليست شده اند. دو نوع مدول در اينجا مشخص شده اند. نوعي‌که با xml مشخص شده در واقع مدولهاي ايستا هستند. نوع program از طرف ديگر مدولهاي پويا را معين مي کند. به اين ترتيب در صورت نياز مي توان براحتي مدولهاي تشکيل دهنده صفحات سايت را بدون نياز به تغييرات اساسي در سايت تغيير داد. همانطوريکه در بالا ذکر شد کنترلر به گونه اي ساخته شده که با هر تغيير در اين فايل برنامه sitemap.php را از نو بازسازي کرده و به اين ترتيب تغييرات را در سايت اعمال کند. سازندگان اين سايت در صورت علاقه ديگران به داشتن اطلاعات جزئي‌تر يا دريافت برنامه ها حاضرند بصورت مجاني در اختيار علاقه مندان قرار دهند. به هرحال پيش از انجام اينکار نياز داريم تا مستندات برنامه ها را تقويت کرده تا بطور مفيدتري بتوانند مورد استفاده قرار گيرند. در صورتيکه استقبال براي داشتن اين برنامه ها به حد کافي زياد باشد ما به انجام اينکار مبادرت خواهيم ورزيد. براي مشخص کردن علاقه خودتان لطفا به آدرس founders@iranit.info نامه ارسال کرده و در subject آن عنواني نظير I am interested in IranIT programs را تايپ کنيد. | |||||