چگونه فرم ورود(Login)، ثبت نام(Register) در ویژوال استودیو طراحی کنیم؟

ایجاد پایگاه داده
مراحل قدم به قدم طراحی پنل لاگین با ویژوال استودیو

با سلام خدمت عزیزان و علاقه مندان به برنامه نویسی در پست های قبلی ویکی چجور به نصب ویژوال استودیو همچنین به آموزش برنامه نویسی موبایل با Visual Studio پرداخته شده است. همان طور که می دانید ویژوال استودیو یکی از بزرگترین نرم افزار توسعه یافته درمورد برنامه نویسی می باشد که توسط مایکروسافت ارائه شده است و ما در این مقاله قصد داریم طریقه فرم ورود، و ثبت نام را در Asp را آموزش دهیم. که همانطور که می داتید فرم لاگین در بسیار کاربرد دارد. ازجمله استفاده آن در ورود به سایت ها و… می باشد پس اگر شما هم می خواهید یک پنل لاگین بتوانید طراحی کنید با ما همراه باشید…..

برای دیدن تصاویر در اندازه اصلی روی آن ها کلیک کنید.

گام 1 - ایجاد پایگاه داده

در ابتدا یک دیتابیس ایجاد می کنیم تا مشخصات کاربرنان در آن ذخیره گردد. برای این کار Start را باز کرده سپس All Program را باز کنید و بعد مطابق تصویر به قسمت

Developer Command Prompt <–Visual Studio Tools <–Microsoft Visual Studio 2012 رفته و کلیک کنید تا بازشود.

حال در پنجره (Developer Command Prompt) سیاه باز شده Enter زده و عبارت aspnet_regsql را نوشته و دکمه Enter را بزنید.

در این پنجره یعنی پنجره Sql server Setup Wizard را Next بزنید.

در این پنجره هم قسمت اول یعنی configure sql server for application servicesرا انتخاب کرده سپس روی Next کلیک کنید.

در این پنجره هم سطح امنیت و همچنین نام پایگاه داده را می نویسیم. پس در قسمت اشاره شده نام دلخواه پایگاه داده ی خود را بنویسید. همچنین شما در قسمت سطح امنیت می توانید قسمت SQL server authentication را انتخاب و یک نام کاربر و رمز تعریف کنید. ولی در اینجا بنده روی Windows authentication گذاشتم. در آخر روی Next کلیک کنید.

در پنجره ظاهر شده هم مشخصات پایگاه داده تان را نشان می دهد. پس روی Next کلیک کنید.

در اینجا روی Finish کلیک کنید. پایگاه داده شما با موفقیت انجام گرفت.

گام 2 - مراحل قدم به قدم طراحی پنل لاگین با ویژوال استودیو

ابتدا برنامه ویژوال استودیو Visual Studio خود را باز کنید.

به قسمت File –> New –>Website بروید.

در این پیجره همان طور که در تصویر مشاهده می کنید قرار دهید.

1- زبان را بر روی #Visual C قرار دهید.

2- بر روی Net Framework 3.5 قرار بدهید.

3- Asp.Net Web Forms Site را انتخاب کنید.

4- نشان دهنده محل ذخیره پروژه را نشان می دهد. پس از قرار دادن همه ی آنها روی OK کلیک کنید.

از قسمت Solution Explorer (در سمت راست و اگر نبود از قسمت نوار بار View اضافه کنید) که پوشه های ایجاد شده ما را نشان می دهد روی Defelt راست کلیک کرده و کرده و Login بنویسید. صرقا تغییر نام انجام می دهیم.

سپس روی Project-asp-login (همان نام پروژه مان) راست کلیک کرده و به Add –>Add New Item می رویم.

در WEB FORM قرار داده و در قسمت Name نام آن را به Register تغییر داده و روی Add کلیک کرده تا اضافه گردد.

دوباره مثل مرحله قبل ذوی نام پروژه مان راست کلیک کرده و به قسمت Add–> New Folder بروید. و نام پوشه را User قرار دهید.

روی پوشه ایجاد کرده یعنی User راست کلیک و Add–>Add New Item کنید.

در پنجره باز شده روی Web Form قرار داده و از قسمت Name نام را به Home.aspx بنویسید و روی Add کلیک کنید.

برای بار دوم هم دوباره روی پوشه ایجاد کرده User راست کلیک کرده و به Add–>Add New Item بروید. بعد رویWeb Configuration File قرار داده و از قسمت Name (نام) Web.config نوشته و روی Add کلیک کنید.

از قسمت Solution Explorer روی صفحه ی Login را دوبار کلیک کرده و به قسمت Design صفحه که در قسمت پایین صفحه است بروید. حال روی خالی صفحه کلیک کرده سپس به قسمت Toolbox (قسمت اشاره شده شماره 1) و از قسمت ابزار های Login روی آیتم Login (قسمت اشاره شده شماره 2) دو بار چپ کلیک یا بکشید و روی خالی صفحه بگذارید اصطلاحا دراگ & دراپ کنید.

حال ابتدا فرم لاگین خود را Select(انتخاب)کرده و از قسمت Properties و مقابل فیلد Destination PageUrl همانند تصویر بر روی مربع 3 نقطه نشان داده شده کلیک کرده در پنجره باز شده روی پوشه User (شماره1) ابتدا چب کلیک سپس روی Home (شماره 2)کلیک می کنیم. و نهایتا روی OK کلیک کنید.

در ادامه باز از قسمت Properties و مقابل فیلد Create User Text کلیک کرده و مطابق تصویر نشان داده شده ثبت نام را تایب کنید. سپس یک فیلد پایین تر یعنی Create User Url همانند تصویر (شماره2) بر روی مربع 3 نقطه نشان داده شده کلیک کرده و در پنجره باز شده روی register (شماره3)کلیک کرده و در آخر هم روی OK (شماره4)کلیک کنید.

همانند مرحله ی قبلی از قسمت Solution Explorer وارد صفحه ی register (قسمت اشاره شده شماره 1) با دو بار چب کلیک روی آن می شویم. و به قسمت Design که در قسمت پایین صفحه قرار دارد می رویم و سپس در جای خالی صفحه کلیک کرده و به قسمت Toolbox (قسمت اشاره شده شماره 2) و از قسمت ابزار های Login روی آیتم Create UserWizard (قسمت اشاره شده شماره 3) دو بار چپ کلیک کرده یا بکشید و روی خالی صفحه بگذارید اصطلاحا دراگ & دراپ کنید.

در این قسمت هم فرم ثبت نام خود را Select(انتخاب)کرده و از قسمت Properties و مقابل فیلد Continue Destination PageUrl (همانند تصویر شماره 1) بر روی مربع 3 نقطه نشان داده شده کلیک کرده در پنجره باز شده روی پوشه Login (شماره2) کلیک کنید. و نهایتا روی OK کلیک کنید.

حال همه صفحه های باز شده را ببندید و از قسمت Solution Explorer وارد صفحه ی Web.config بار دوبار کلیک شوید و در قسمت Source code بعد از کد </ appSettings> کد های زیر را اضافه نمایید.

<connectionStrings>
<clear/>
a <add name=”localSqlServer” providerName=”System.Data.SqlClient” connectionString=”Data Source=. ; Initial Catalog=db;Integrated Security=True”/>j
</connectionStrings>

و در ادامه مرحله قبلی کمی پایین بیایید. و مابین قسمت اشاره شده کد زیر را تایپ نمایید.

<“authentication mode=”Forms>
<forms loginUrl=”login.aspx”></forms>
</authentication>

از قسمت Solution Explorer به صفحه ی Home رفته بعد به قسمت Design بروید که این صفحه، صفحه ی اصلی و ورودتان می باشد شما می توانید با گذاشتن کنترل LoginName نام کاربری که وارد می شود را نشان دهد. و با گذاشتن کنترل LoginStatus می توانید خروج و بازگشت به صفحه لاگین ایجاد کنید.