ايجاد يك وب سايت توسط ويژوال استوديو 2005 (بخش اول)

[Travis]

ويژوال استوديو دات نت نسخه 2005 ، يك محيط پيشرفته به منظور طراحی وب سايت های پويا و يا برنامه های وب را در اختيار پياده كنندگان قرار می دهد . به همراه ويژوال استوديو دات نت 2005 ، ابزار پياده سازی برنامه های وب كه از آن با نام VWD ( برگرفته از Visual Web Developer ) نيز نام برده می شود ارائه شده است . VWD ، مجموعه ای از ابزارها و برنامه های كمكی به منظور ايجاد وب سايت های مبتنی بر ASP.NET 2.0 را در اختيار پياده كنندگان قرار می دهد .
در اين مقاله قصد داريم با نحوه ايجاد يك وب سايت با استفاده از امكانات ويژوال استوديو دات نت 2005 آشنا شويم . بدين منظور مراحل زير را دنبال نموده و پس از انجام هر مرحله نتايج را بررسی خواهيم كرد.

• <LI dir=rtl>مرحله اول : ايجاد يك وب سايت و صفحه جديد <LI dir=rtl>مرحله دوم : افزودن كنترل های سرويس دهنده به صفحه
• مرحله سوم : نوشتن روتين های پاسخگو در زمان بروز يك رويداد ( Event handlers )

مرحله اول : ايجاد يك وب سايت و صفحه جديد
برای ايجاد يك وب سايت در محيط ويژوال استوديو از گزينه های زير می توان با توجه به شرايط موجود استفاده نمود :

• <LI dir=rtl>ايجاد يك وب سايت مبتنی بر سيستم فايل : اين نوع سايت ها ، صفحات و ساير فايل ها را در يك فولدر موجود بر روی سيستم محلی ذخيره می نمايند . در چنين مواردی ضرورتی به نصب IIS بر روی كامپيوتر محلی وجود نداشته و می توان از ASP.NET Development Server همراه با ويژوال استوديو دات نت استفاده نمود .
  <LI dir=rtl>ايجاد يك وب سايت محلی با استفاده از امكانات ارائه شده توسط سرويس دهنده وب مايكروسافت ( IIS ) : در اين نوع سايت ها كه با فرض نصب IIS بر روی سيستم ايجاد خواهند شد ، تمامی فايل ها و صفحات در يك فولدر زير مجموعه و در مسير ريشه محل نصب IIS ( معمولا" \Inetpub\wwwroot \ ) ذخيره خواهند شد . پس از ايجاد وب سايت ، برای اجرای برنامه از آدرس [برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید] استفاده می گردد .
• ايجاد يك وب سايت بر روی يك سرويس دهنده راه دور : اين نوع سايت ها بر روی يك سرويس دهنده از راه دور ايجاد خواهند شد و می توان از طريق اينترنت و با استفاده از پروتكل FTP اقدام به ارسال فايل ( و يا دريافت فايل ) به وب سايت مورد نظر نمود .

ايجاد يك وب سايت جديد
در اين مقاله ايجاد يك وب سايت را با لحاظ كردن گزينه اول و انجام مراحل زير دنبال می نمائيم :

• <LI dir=rtl> اجرای ويژوال استوديو دات نت
  <LI dir=rtl>انتخاب گزينه Web site از طريق File |New . در ادامه جعبه محاوره ای New Web Site نمايش داده می شود .
  <LI dir=rtl>در پنجره Visual Studio installed templates ، گزينه ASP.NET Web Site را انتخاب می نمائيم ( در زمان ايجاد يك وب سايت ، از يك تمپليت استفاده می گردد . هر تمپليت برنامه وبی را ايجاد می نمايد كه شامل فايل ها و فولدرهای مختلفی است ) .
  <LI dir=rtl>از طريق فيلد Location ، ( از طريق اين فيلد می بايست نوع وب سايت و مكان ذخيره فايل ها و صفحات وب سايت را مشخص نمود ) گزينه File System را انتخاب كرده و در ادامه نام فولدر محل ذخيره فايل ها و صفحات وب را تايپ می نمائيم ( مثلا" C:\Mywebsite ) .
  <LI dir=rtl>از ليست Language ، يكی از گزينه های # Visual Basic ، Visual C و يا # Visual J را انتخاب می نمائيم ( زبان برنامه نويسی انتخاب شده در اين مرحله به عنوان گزينه پيش فرض برای وب سايت در نظر گرفته خواهد شد . در يك برنامه وب می توان از چندين زبان برنامه نويسی استفاده نمود و متناسب با شرايط موجود در زمان ايجاد هر صفحه زبان برنامه نويسی آن را انتخاب نمود ) .
• انتخاب گزينه OK

شكل زير ، مراحل اشاره شده را نشان می دهد :

پس از انجام مراحل فوق ، فولدر محل استقرار فايل ها و يك صفحه جديد با نام Default.aspx ايجاد می گردد .پس از ايجاد صفحه فوق ، به صورت پيش فرض Source view نمايش داده می شود ( در Source view ، می توان عناصر html مربوط به صفحه را مشاهده نمود ) .

پس از ايجاد ساختار اصلی وب سايت ،$ در ادامه می توان يك فرم وب جديد را متناسب با خواسته موجود ايجاد نمود .

[Travis]

پس از ايجاد يك وب سايت جديد ، ويژوال استوديو يك صفحه ASP.NET ( صفحات فرم های وب ) را با نام Default.aspx ايجاد می نمايد. در صورت تمايل می توان صفحه فوق را به عنوان صفحه اصلی سايت در نظر گرفت . در ادامه با نحوه ايجاد يك صفحه وب جديد آشنا می شويم . بدين منظور مراحل زير را دنبال می نمائيم :

• <LI dir=rtl>صفحه Default.aspx را غير فعال نمائيد ( close )
• از طريق Solution Explorer ، بر روی وب سايت مورد نظر كليك سمت راست نموده و گزينه Add New Item را انتخاب نمائيد .

• <LI dir=rtl>در پنجره Visual Studio installed templates ، گزينه Web Form را انتخاب نمائيد .
  <LI dir=rtl>در فيلد Name ، يك نام دلخواه برای صفحه وب را تايپ نمائيد ( نظير FirstWebpage )
  <LI dir=rtl>در ليست Language ، زبان برنامه نويسی مورد نظر خود را انتخاب نمائيد ( #Visual Basic , C و يا #J ) . توجه داشته باشيد با اين كه در زمان ايجاد وب سايت ، زبان پيش فرض برای وب سايت مشخص شده است ولی هر مرتبه كه يك صفحه و يا عنصر جديد ايجاد می گردد، می توان زبان پيش فرض انتخاب شده را تغيير داد . همانگونه كه قبلا" نيز اشاره گرديد ، در يك وب سايت می توان از زبان های برنامه نويسی متفاوتی استفاده نمود .
• CheckBox مربوط به Place Code in Separate file را غير فعال نمائيد .( در اين مثال ، از يك فايل برای ذخيره كد ها و تگ های html استفاده شده است . در صورت تمايل می توان كد صفحات ASP.NET را در يك صفحه و يا كلاس فايل جداگانه ذخيره نمود) .

شكل زير ، مراحل اشاره شده را نشان می دهد :

افزودن تگ های Html به صفحه
برای افزودن تگ های Html به يك صفحه مراحل زير را دنبال می نمائيم :

• <LI dir=rtl>در بخش پائين صفحه بر روی گزينه Design tab كليك نموده تا به Design view سوئيچ نمائيد . در Design view ، صفحه ای كه با آن كار می كنيد به صورت WYSIWYG نمايش داده می شود . با توجه به اين كه تاكنون متن و يا محتويات خاصی در صفحه تايپ نشده است ، اين بخش خالی است .
• بر روی صفحه متن مورد نظر خود را تايپ نمائيد ( ايجاد اولين صفحه با استفاده از ويژوال استوديو 2005 )

• به Source View سوئيچ نمائيد . در اين مرحله شما تگ های Html را مشاهده می نمائيد كه در Design View ايجاد شده اند.

اجرای صفحه
قبل از افزودن كنترل به صفحه ، می توان صفحه را اجراء نمود . برای اجرای يك صفحه به يك سرويس دهنده وب نياز است. در يك وب سايت عملياتی و نهائی ، از IIS به عنوان سرويس دهنده وب استفاده می گردد . برای تست يك صفحه ، شما می توانيد از ASP.NET Development Server كه به صورت محلی اجراء شده است (به IIS نياز نمی باشد) ،$ استفاده نمائيد . برای وب سايت های مبتنی بر فايل ، سرويس دهنده وب پيش فرض ASP.NET Development Server می باشد .
برای اجرای صفحه موارد زير را دنبال می نمائيم :

• <LI dir=rtl> فعال كردن كليدهای CTRL+F5 برای اجراء صفحه
  <LI dir=rtl>برنامه VWD ، سرويس دهنده ASP.NET Development Server را آغاز می نمايد. يك Icon درقسمت پائين toolbar نمايش داده شده و نشاندهنده اين موضوع است كه سرويس دهنده وب VWD فعاليت خود را آغاز نموده است ( ) .
• در ادمه ، صفحه در مرورگر نمايش داده می شود . با اين كه صفحه ای كه ايجاد نموده ايد دارای يك انشعاب aspx . است ولی اجرای آن همانند يك صفحه HTML است .
  (در صورتی كه با پيام خطای 502 برخورد نمائيد و پيامی مبنی بر عدم امكان نمايش صفحه نمايش داده شود ، می بايست تنظيمات مرورگر را بگونه ای انجام داد كه از سرويس دهنده پراكسی استفاده ننمايد ) .

در بخش دوم ، به بررسی مراحل دوم ( افزودن كنترل به صفحه ) و سوم ( نوشتن روتين های پاسخگو در زمان بروز يك رويداد ) ، خواهيم پرداخت .
[برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید] [برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید]

[Travis]

ايجاد يك وب سايت توسط ويژوال استوديو 2005 ( بخش دوم )
در [برای مشاهده لینک ها شما باید عضو سایت باشید برای عضویت در سایت بر روی اینجا کلیک بکنید] با اولين مرحله ايجاد يك وب سايت توسط ويژوال استوديو 2005 آشنا شديم . در اين بخش به بررسی مراحل دوم ( افزودن كنترل به صفحه ) و سوم ( نوشتن روتين های پاسخگو در زمان بروز يك رويداد ) ، خواهيم پرداخت .
مرحله دوم : افزودن كنترل های سرويس دهنده به صفحه
صفحات وب پويا ، در مقابل خواسته كاربران پاسخگو بوده و متناسب با درخواست آنان اطلاعات را توليد و عرضه می نمايند . اين موضوع جايگاه مهم فرم های وب را به خوبی مشخص می نمايد . با استفاده از فرم های وب ، كاربران درخواست خود را ارسال و پاسخ آن را از سرويس دهنده دريافت می نمايند . در فرم های وب از چندين نوع كنترل سرويس دهنده به منظور انجام پردازش های سمت سرويس دهنده استفاده می گردد :

• <LI dir=rtl>كنترل های Input و Validation در ارتباط با كاربر بوده و داده مورد نياز پردازش ها را تامين می نمايند.
  <LI dir=rtl>كنترل های Script Activation ،$ مسئوليت فراخوانی برنامه های فرعی و توابع را به منظور انجام پردازش های مورد نياز برعهده دارند.
  <LI dir=rtl>كنترل های خروجی و نمايش اطلاعات ، نواحی مقصد بر روی صفحات را مشخص نموده تا ماحصل اجرای اسكريپت ها در آن نواحی نمايش داده شود .
  <LI dir=rtl> كنترل های منبع داده در ارتباط با منابع داده خارجی بوده و اطلاعات مورد نياز برای پردازش و يا نمايش را ارائه می نمايند .
• كنترل های navigation ، تسهيلات لازم به منظور حركت در يك سايت را در اختيار كاربر قرار می دهند .

در ASP.NET فرم ها و کنترل های موجود بر روی آنان به منزله اشياء سرويس دهنده بوده ( نه عناصر HTML ) و امكان دستيابی به آنان توسط اسكريپت های سمت سرويس دهنده وجود دارد .
پس از مقدمه فوق كه هدف از بيان آن آشنائی با جايگاه فرم ها و نقش كنترل های سرويس دهنده است ، در ادامه با نحوه اضافه كردن كنترل های سرويس دهنده بر روی يك صفحه آشنا می شويم .
در اين مرحله سه كنترل سرويس دهنده ( button ,Label,TextBox ) را به صفحه اضافه می نمائيم و تنظميات لازم را برای هر يك از آنان انجام خواهيم داد .

• <LI dir=rtl>كنترل TextBox : كنترل فوق از جمله كنترل های سرويس دهنده ورودی است كه با استفاده از آنان می توان بخش رابط كاربر يك فرم وب را پياده سازی و اطلاعاتی را از كاربر دريافت نمود . RadioButton , RadioButtonList , CheckBox ,CheckBoxList , DropDownList و ListBox از ديگر كنترل های سرويس دهنده ورودی می باشند .
  <LI dir=rtl>كنترل label : كنترل فوق از جمله كنترل های سرويس دهنده خروجی است كه با استفاده از آن يك ناحيه بر روی صفحات وب ايجاد و می توان خروجی مورد نظر را در آن ناحيه درج نمود . Panel , Table و Image از ديگر كنترل های سرويس دهنده خروجی می باشند .
• كنترل Button : كنترل فوق از جمله كنترل های سرويس دهنده ای است كه با استفاده از آن می توان يك اسكريپت را فعال نمود . LinkButton ,ImageButton و ImageMap نمونه هائی ديگر در اين زمينه می باشند .

افزودن كنترل به صفحه

• <LI dir=rtl>سوئيچ به Design View
  <LI dir=rtl>فشردن كليد SHIFT+ENTER برای ايجاد فضای خالی ( در صورت لزوم چندين مرتبه )
• از طريق Toolbox و گروه استاندارد ، سه كنترل اشاره شده را انتخاب و آنان را بر روی صفحه قرار می دهيم.
  ( button ,Labels,TextBox )

• در قسمت بالای كنترل TextBox قرار گرفته و يك متن دلخواه را تايپ نمائيد ( مثلا" "لطفا" نام خود را وارد نمائيد: " ) . متن فوق به عنوان caption كنترل TextBox در نظر گرفته می شود .

تنظيم خصلت های كنترل
VWD ، روش های متفاوتی$ را برای تنظيم خصلت كنترل های موجود بر روی يك صفحه وب در اختيار پياده كنندگان صفحات وب قرار می دهد . در ادامه با نحوه تنظيم خصلت كنترل ها در حالت Design View و Source View آشنا می شويم .

• كنترل Button را انتخاب كرده و در ادامه و از طريق پنجره Properties ، خصلت Text آن را "نمايش نام " در نظر می گيريم .

• <LI dir=rtl>به Source View سوئيچ نمائيد . در اين mode ، تگ های Html صفحه به همراه عناصری كه VWD برای كنترل های سرويس دهنده ايجاد كرده است ، نمايش داده می شوند . كنترل ها از گرامری شبيه Html استفاده می نمايند با اين تفاوت كه آنان دارای يك پيشوند asp: و خصلت " runat="server ، می باشند. تمامی كنترل ها درون يك تگ <form> قرار داده می شوند كه شامل خصلت " runat="server است . خصلت فوق و پيشوند asp: هر يك از كنترل ها اين امكان را فراهم می نمايد كه بتوان از طريق اسكريپت های سمت سرويس دهنده به آنان دستيابی و پردازش های مورد نياز را انجام داد .
• مكان نما را در محلی درون تگ <asp:label> قرار داده و كليد spacebar را فعال نمائيد . يك ليست Drop-down نمايش داده شده و مجموعه ای از خصلت هائی را كه می توان برای$ كنترل Label تنظيم نمود ، نشان داده می شود. به ويژگی فوق IntelliSense گفته شده و باعث می شود بتوان زمانی كه در Source View می باشيم با گرامر كنترل های سرويس دهنده ، تگ های Html و ساير آيتم های موجود بر روی صفحه به سرعت دستيابی داشت . خصلت ForeColor را انتخاب نموده و يك علامت "=" را تايپ نموده بلافاصله IntelliSense ليستی از رنگ ها را نشان می دهد . در هر لحظه می توان با فشاردادن كليدهای CTRL+J ليست Intellisense Drop-down را مشاهده نمود.

[Travis]

مرحله سوم : نوشتن روتين های پاسخگو در زمان بروز يك رويداد ( رويداد onclick كنترل button )
در اين مرحله كد لازم برای خواندن نام تايپ شده توسط كاربر در كنترل Textbox و نمايش آن در كنترل label نوشته می گردد. برای افزودن يك روتين پاسخگوی پيش فرض ، مراحل زير را دنبال می نمائيم :

• <LI dir=rtl>سوئيچ به Design View
• بر روی كنترل Button كليك می نمائيم ( Double Click ) . در ادامه ، VWD به Source View سوئيچ نموده و يك Skeleton event handler برای رويداد پيش فرض ( click ) كنترل Button را ايجاد می نمايد . ( Double Click بر روی يك كنترل در Design view صرفا" يكی از روش های موجود برای ايجاد event handlers است ) .

• درون handler ، عبارت Label1 را تايپ نمائيد . در ادامه VWD ، ليستی از اعضاء قابل استفاده در رابطه با كنترل label را نشان می دهد :

• پس از اتمام Click event handler كد زير را خواهيم داشت :

<script runat="server">

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Label1.Text = TextBox1.Text & ", اولين صفحه ايجاد شده توسط ويژوال استوديو دات نت"

End Sub
</script>

زمانی كه در Sourec View هستيم ، كنترل asp:Button دارای يك خصلت "onClick="Button1_Click است . خصلت فوق ، روتين Button1_Click را به رويداد Click كنترل button نسبت می دهد .
مرحله نهائی : اجرای برنامه
برای اجرای برنامه و مشاهده آن در مرورگر می توان از كليدهای CTRL+F5 استفاده نمود . در ادامه صفحه مجددا" با استفاده از ASP.NET Development Server اجراء می گردد . پس از درج يك نام دلخواه در Textbox و كليك برروی دكمه Button ، نام تايپ شده در Label نمايش داده می شود .پس از كليك بر روی دكمه button ، صفحه برای سرويس دهنده وب ارسال خواهد شد و ASP.NET مجددا" صفحه را ايجاد ، كد موجود در صفحه را اجراء و صفحه جديد را برای مرورگر ارسال می نمايد ( يك round trip برای سرويس دهنده) .
در صورت مشاهده source صفحه ارسالی در مرورگر (با استفاده از گزينه View | Source ) ، صرفا" تگ های Html نشان داده شده و كنترل های سرويس دهنده كه با asp: شروع می شوند را مشاهده نخواهيم كرد.