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

گام ۱ – ایجاد پایگاه داده

در ابتدا یک دیتابیس ایجاد می کنیم تا مشخصات کاربرنان در آن ذخیره گردد. برای این کار 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 کلیک کنید. پایگاه داده شما با موفقیت انجام گرفت.

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

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

 

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

 

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

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

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

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

۴- نشان دهنده محل ذخیره پروژه را نشان می دهد. پس از قرار دادن همه ی آنها روی 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 (قسمت اشاره شده شماره ۱) و از قسمت ابزار های Login روی آیتم Login  (قسمت اشاره شده شماره ۲) دو بار چپ کلیک یا بکشید و روی خالی صفحه بگذارید اصطلاحا دراگ & دراپ کنید.

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

 

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

 

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

در این قسمت هم فرم ثبت نام  خود را Select(انتخاب)کرده و از قسمت Properties و مقابل فیلد  Continue Destination PageUrl (همانند تصویر شماره ۱) بر روی مربع ۳ نقطه نشان داده شده کلیک کرده در پنجره باز شده روی پوشه Login (شماره۲) کلیک کنید. و نهایتا روی 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 می توانید خروج  و بازگشت به صفحه لاگین ایجاد کنید.

 

حال روی Play که مثلث سبز رنگ است یا از صفحه کلید، دکمه F12 کلیک کنید تا اجرا شود.

بعد از اجرا شدن روی ثبت نام کلیک کنید. و کادر ثبت نام را کامل کنید سپس روی Create User را کلیک کنید.

نکته : توجه شود که در قسمت پسورد از ۸ کاراکتر و یک کاراکتر خاص استفاده شود.

 

اگر اطلاعات ثبت نام را درست وارد کرده باشید پیغام موفقیت آمیز را مشاهده خواهید کرد. که دکمه Continue را بزنید.

حال در این صفحه اطلاعات خود نام کاربری و رمز را وارد کرده و دکمه ی log In کلیک فرمایید.

 

حال شما توانستید یک فرم لاگین و ثبت نام درست کنید.

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