ايجاد يک برنامه وب نمونه در دات نت ( بخش اول )

در ابتدا لازم است يک مسئله را  تعريف  و در ادامه مراحل لازم برای حل آن را دنبال نمائيم :

• مسئله : ايجاد يک برنامه وب در دات نت (  سيستم مقالات )

• توضيحات : در اين برنامه کاربران در ابتدا از طريق يک فرم Login تائيد و پس از تائيد آنان توسط برنامه ، امکان استفاده از پتانسيل های برنامه (مشاهده ليست مقالات و انجام ويرايش های لازم در رابطه با يک مقاله ) در اختيار آنان قرار خواهد گرفت

• مراحل حل مسئله : جدول زير فازهای متفاوت حل مسئله به همراه مراحلی که می بايست در هر فاز دنبال شود را نشان می دهد :

 فاز اول : آشنائی با برنامه های وب دات نت
در اين فاز با نحوه ايجاد يک برنامه وب و اضافه نمودن يک فرم وب ( صفحه Login )  ، آشنا خواهيم شد.
 مرحله اول : ايجاد و ذخيره سازی يک برنامه وب ASP.NET  : در اين مرحله ، يک برنامه وب خالی ( ساختار پيش فرض ) ، ايجاد می گردد . برای ايجاد يک پروژه جديد وب با نام SrcoTest1 ، مراحل زير را دنبال می نمائيم :

• اجرای برنامه ويژوال استوديو
• انتخاب  File|New|Project و يا فشردن کليدهای CTRL+SHIFT+N
• انتخاب نوع پروژه  Visual Basic Projects از طريق  جعبه محاوره ای New Project
• انتخاب ASP.NET Web Application ،از طريق تمپليت های ارائه شده 
• درج  آدرس http://localhost/SrcoTest1  در فيلد Location ( نام در نظر گرفته شده برای پروژه ، اختياری است ) .
• تائيد عمليات با فشردن دکمه OK

توضيحات : در اين مرحله ، ويژوال استوديو دات نت ، يک ريشه مجازی با نام SrcoTest1 ، فايل Global.asax ، فايل Global.asax.vb ، فايل Web.Config ، فايل WebForm1.aspx.vb ، فايل Style.css و يک فرم وب پيش فرض با نام WebForm1.aspx را ايجاد می نمايد . ويژوال استوديو ، همچنين فايل های SrcoTest1.disco ، فايل SrcoTest1.vbproj و فايل SrcoTest1.vbproj.webinfo را نيز ايجاد می نمايد . 

ويژوال استوديو دات نت ، يک فولدر با نام SrcoTest1 در مسير   InetPub\wwwroot \  را ايجاد می نمايد . محتوی اين فولدر به صورت زير است :

مرحله دوم : ايجاد يک فرم وب  : در اين مرحله ، فرم وب پيش فرض ايجاد شده در مرحله قبل را تغيير نام داده و با نام جديد ذخيره می نمائيم .

• انتخاب View|Solution Explorer و يا فشردن دکمه های CTRL+ALT+L

• کليک سمت راست بر روی فايل WebForm1.aspx و انتخاب  دستور Rename ( از طريق پنجره Solution Explorer )

• تغيير نام فايل WebForm1.aspx  به Login.aspx

• مشاهده محتويات صفحه با کليک بر روی  HTML Tab ( در قسمت پائين صفحه )

• دايرکتيو Page @  در ابتدای صفحه پارامترهای متفاوتی را برای صفحه مشخص می نمايد ( مثلا" زبان استفاده شده برای نوشتن کد مرتبط با صفحه )

• برای ذخيره فايل Login.aspx ، دستور File|Save Login.aspx  و يا File|Save Login.aspx As را انتخاب و يا کليد CTRL+S را فعال می نمائيم . با توجه به اين که قصد ايجاد فرم وب را با محتويات فارسی ( رابط کاربر فارسی ) داريم ، گزينه File|Save Login.aspx As را انتخاب و در ادامه با انتخاب گزينه Save with Encoding ، نوع Code Page را مشخص می نمائيم .

نتايج فاز اول :

• ايجاد يک پروژه جديد با نام SrcoTest1
• تغيير نام و ذخيره فرم وب پيش فرض ( WebForm1.aspx ) به Login.aspx

 فاز دوم : استفاده از کنترل ها
در اين فاز، از کنترل های سرويس دهنده و  Validation ( به منظور بررسی صحت داده ورودی توسط کاربر)  ، استفاده کرده و کدهای مورد نياز را هم در سمت سرويس گيرنده ( اسکريپت های همراه فرم وب ) و هم در سمت سرويس دهنده ( کدهای نوشته شده در صفحه Code behind مربوط به صفحه Login )  خواهيم نوشت و در نهايت تگ های HTML  توليد شده  را بررسی می نمائيم .

 مرحله اول : افزودن کنترل های سرويس دهنده به فرم وب  : در اين مرحله ، با نحوه استفاده از کنترل های سرويس دهنده ASP.NET آشنا خواهيم شد( چهار کنترل Lable ، دو کنترل TextBox ، دو کنترل Button )
 

• سوئيچ  به حالت Design ( کليک بر روی Design Tab )
• فعال نمودن پنجره  Toolbox ( انتخاب گزينه Toolbox از طريق منوی View و يا فشردن کليدهای CTRL+ALT+X )
• انتخاب کنترل Label  ازطريق Web Forms tab موجود در  Toolbox و استفرار آن بر روی فرم وب Login.aspx  ( در وضعيت Desgin view ) .

• تنيظيم خصلت های زير برای کنترل Label استفاده شده بر روی فرم وب . ( برای مشاهده پنجره Properties مربوط به يک کنترل ، پس از انتخاب کنترل دستور View|Properties را فعال و يا از کليد F4 ، استفاده می نمائيم ) .

  تنظيم خصلت های کنترل Label   اول
  خصلت	مقدار
  ID	lblHeading
  Text	ورود به بخش مقالات سايت فرآیند گستر نیوشا

  فرم وب Login.aspx پس از استقرار اولين کنترل سرويس دهنده Label بر روی آن :

  
   

•  افزودن يک کنترل سرويس دهنده Label ديگر بر روی فرم وب Login و تنيظيم خصلت های آن
   

  تنظيم خصلت های کنترل Label  دوم
  خصلت	مقدار
  ID	lblUserID
  Text	نام

•  افزودن يک کنترل سرويس دهنده Label ديگر بر روی فرم وب Login و تنيظيم خصلت های آن
   

  تنظيم خصلت های کنترل Label  سوم
  خصلت	مقدار
  ID	lblPassword
  Text	رمز عبور

 انتخاب کنترل TextBox از طريق Web Forms tab موجود در  Toolbox و استقرار آن بر روی فرم وب Login.aspx ( در مجاورت کنترل  label  مربوط به "نام"  )

•   انتخاب يک کنترل TextBox  ديگر و  استقرار آن بر روی فرم وب Login.aspx ( در مجاورت کنترل   label  مربوط به  "رمزعبور"  )   

• انتخاب کنترل Button  از طريق Web Forms tab موجود در  Toolbox  و استقرار آن بر روی فرم وب Login.aspx و تنظيم خصلت های آن

• انتخاب کنترل Button  ديگر و استقرار آن بر روی فرم وب Login.aspx و تنظيم خصلت های آن

• افزودن يک کنترل سرويس دهنده Label ديگر بر روی فرم وب Login و تنيظيم خصلت های آن ( از کنترل فوق برای نمايش پيام مورد نظر در زمان بررسی صحت داده ورودی توسط کاربر، استفاده می گردد ) .

• فرم وب Login.aspx پس از استقرار کنترل های سرويس دهنده مورد نياز بر روی آن :

  

مرحله دوم : آناليز کدهای HTML ، توليد شده  : در اين مرحله با نحوه تبديل کنترل های سرويس دهنده به عناصر HTML مختص قابل نمايش در مرورگر توسط ASP.NET runtime ، آشنا خواهيم شد.

• برای مشاهده محتوی صفحه ، بر روی HTML Tab کليک می نمائيم . کد زير به صورت اتوماتيک برای کنترل های سرويس دهنده استفاده شده در فرم وب Login.aspx ايجاد می گردند. خصلت runat ="server" ، نشاندهنده سمت سرويس دهنده بودن کنترل است .

HTML Code For  Server Controls

<asp:Label  id="lblUserID"         runat="server" ...  >نام</asp:Label> <asp:Label  id ="lblPassword"    runat="server" ...>رمز عبور</asp:Label> <asp:TextBox id="txtUserID"      runat="server" ...></asp:TextBox> <asp:TextBox id="txtPassword"  runat="server" ...></asp:TextBox> <asp:Button  id="btnSignin"       runat="server" ...></asp:Button> <asp:Button  id="btnRestore"     runat="server"...></asp:Button> <asp:Label id="lblResult"             runat="server" ...></asp:Label>

•   برای مشاهده خروجی در مرورگر ، گزينه Debug | Start  را انتخاب و يا کليد F5 را فعال می نمائيم .

 برای مشاهده خروجی HTML کنترل های سرويس دهنده ، گزينه Source را از طريق منوی View در مرورگر IE انتخاب می نمائيم :

HTML Output for  Server Controls  in browser

<span id="lblHeading" ... > ورود به بخش مقالات سايت فرآیند گستر نیوشا</span> <input name="txtUserID" type="text" id="txtUserID" ...   /> <input type="submit" name="btnSignin" value="ورود به سايت" ... />

• همانگونه که مشاهده می شود ، ASP.NET runtime ، کنترل های سرويس دهنده را به عناصر HTML مختص مرورگر ،تبديل نموده است . Runtime ممکن است در صورت ضرورت از DHTML به منظور تعيين موقعيت و محل استقرار عناصر متفاوت HTML استفاده نمايد . 

نتايج مراحل يک و دو فاز دوم  :

• افزودن کنترل ها ی سرويس دهنده مورد نياز بر روی فرم Login.aspx ( چهار کنترل Lable ، دو کنترل TextBox ، دو کنترل Button )
• بررسی کد توليد شده در ويژوال استوديو دات نت برای کنترل ها ی سرويس دهنده که به صورت اتوماتيک ، ايجاد می گردند .
• بررسی کد توليد شده توسط ASP.NET Runtime برای کنترل های سرويس دهنده به منظور نمايش توسط مرورگر

در بخش دوم اين مقاله به بررسی ساير مراحل تعريف شده در فاز دوم ( بررسی صحت داده ،افزودن اسکريپت ،  ... ) ، خواهيم پرداخت .