آموزش تصویری ساخت فرم لاگین در سی شارپ

فرم لاگین یکی از مهمترین قسمت یک وب سایت محسوب می شود که به هر دلیلی باید از آن استفاده کرد و بتوان کاربران را در سایت مدیریت کرد. امروز قصد داریم تا ساخت فرم لاگین در سی شارپ را آموزش دهیم

ایجاد جدول در پایگاه داده

برای ساخت فرم لاگین در سی شارپ و یا هر زبان دیگری نیازمند ایجاد یک جدول در پایگاه داده می باشید تا توانایی مدیریت کاربران را داشته باشید.

ساخت یک جدول در پایگاه داده با فیلدهای:

1. UserID
2. UserName
3. Password
4. Name
5. Family

فیلدهای یک فرم لاگین، بیشتر از این می باشد اما ما فعلاً قصد ساخت صفحه ورود ساده هستیم.

جدول را با نام tbl_user یا هر نام دلخواهی ذخیره کنید

مراحل برنامه نویسی ساخت فرم لاگین

نرم افزار Visual Studio را باز کرده و یک پروژه از نوع WebApllication ایجاد کنید
یک پوشه با نام Models طبق تصویر زیر پروژه اضافه کنید

سپس در همین بخش(خارج از پوشه Models) روی Add و سپس New Item کلیک کنید و در پنجره ظاهر شده یک وب فرم به پروژه با نام login اضافه کنید

قسمت های مهم برای ما در این آموزش در شکل زیر مشخص شده اند که در ادامه به توضیح هرکدام از آنها می پردازیم

جعبه ابزار

این بخش انواع ابزار ها نظیر text box,button و … در اختیار ما قرار می دهد. کدهای مربوط به آن در قسمت source به صورت خودکار ایجاد می شود اما اگر از این ابزار استفاده نکنید، باید کدهای آن را دستی وارد کنید که البته برنامه نویسان حرفه ای از این روش استفاده می کنند.

بخش Source

به این بخش که در اصطلاح برنامه نویسی به آن سمت کلاینت می گویند، کدهای Asp.net در آن قرار می گیرد که شبیه کدهای html می باشد. برای کار با قسمت source، نیاز به دانش کافی در مورد html دارید. مثلاً برای ایجاد یک button در Asp.net کد آن بصورت زیر خواهد بود:

<asp:Button ID="Button1" runat="server" Text="Button" />

اگر با html آشنایی داشته باشید تفاوت کدهای آن را در این بخش خواهید دید.

از طریق جعبه ابزار دوتا TextBox و یک Button اضافه کنید  نام textbox1 را txtusername و نام بعدی آن را txtpassword گذاشته و وارد مرحله بعدی شوید

این بخش در بخش نمایی می باشد. در اینجا می توانید از طریق جعبه ابزار در سمت چپ کنترل های مورد نظر را با درگ کردن به پروژه اضافه کنید.

---

از طریق جعبه ابزار دوتا TextBox و یک Button به فرم لاگین اضافه کنید نام textbox1 را txtusername و نام بعدی آن را txtpassword انتخاب کنید.

ارتباط با پایگاه داده

برای اینکه بتوانیم با جدولی که در دیتابیس ایجاد کردیم ارتباط برقرار کنیم باید آن با دیتابیس ارتباط برقرار کنیم.

دوباره به solution Explorer مراجعه کرده و بر روی پوشه Models راست کلیک کنید اگر این پوشه را ندارید ایجاد کنید.

در پنجره ای که مشاهده خواهید وارد بخش dada سپس ado.net شوید و پس از آن روی add کلیک کنید.

در صفحه ای که ظاهر خواهد شد گزینه مورد نظر را بروش زیر انتخاب کنید سپس روی Next کلیک کنید

در مرحله بعدی روی New Connection کلیک کرده و 

در مرحله بعدی که پنجره زیر ظاهر خواهد شد در بخش servername لطفاً یا یک علامت نقطه (.) درج کنید یا localhost بنویسید و در بخش select or enter a database name پایگاه داده مد نظر را انتخاب کرده و ok را بزنید

در مرحله بعدی next را بزنید

در مرحله بعدی انتخاب ورژن، فریمورک دات نت هست که باید یکی از آنها را بسته به نیاز، انتخاب کنید. این قسمت ممکن است برای شما قابل مشاهده نباشد انتخاب ورژن های بالاتر امکانات بیشتری را در اختیارتان خواهد گذاشت ما همان 6 را انتخاب می کنیم

در مرحله بعدی انتخاب جداول مورد نظر از پایگاه داده ای است که به آن ارتباط دادیم دقت داشته باشید تیک گزینه Pluraliz or singularize generate object names را برداشته، سپس finsih را بزنید و منتظر بمانید تا ارتباط با پایگاه داده برقرار شود.

در صورتی که مراحل را بصورت صحیح طی کرده باشید نتیجه بصورت زیر خواهد بود

حال به فرم login برگشته و با راست کلیک کردن در بخش source و انتخاب گزینه View Code وارد بخش کدهای سمت سروی شوید.
در این قسمت شما باید کد زیر را در آن بصورت زیر وارد کنید

public partial class Login : System.Web.UI.Page
{
//کدی که باید وارد کنید
Models.User_testingEntities db = new Models.User_testingEntities();
protected void Page_Load(object sender, EventArgs e)
{
}

حال به بخش design برگشته و روی باتون دابل کلیک کنید تا وارد رویداد کلیک آن شوید در این بخش کد های زیر را وارد کنید

var userTestLogin = (from u in db.tbl_user where u.UserName == txtusername.Text && u.Password == txtpassword.Text select u).Any();
if (userTestLogin == true)
{
Session["username"] = txtusername.Text;
Response.Redirect("Default.aspx");
}
else
{
Response.Write("نام کاربری یا کلمه عبور اشتباه است");
}

حال یک وب فرم جدید به نام Default بسازید و دوباره در بخش source این وب فرم راست کلیک کرده و View Code را بزنید در رویداد PageLoad این پنجره کد زیر را وارد کنید

protected void Page_Load(object sender, EventArgs e) //PageLoad رویداد
{
if (Session["username"] == null)//کدی که باید وارد کنید
{
Response.Redirect("Login.aspx");
}
}

اگر نمی دانید session چیست لطفاً مقاله مربوط به آن را مطالعه کنید

برای تست برنامه وارد پایگاه داده شده و یک نام کاربری و کلمه عبور بصورت دستی وارد کنید و آن را تست کنید

ساخت فرم لاگین در سی شارپ ممکن است در این مطلب کمی مراحل طولانی تری داشته باشد اما برای تعامل بیشتر سعی می کنیم تا ویدوی آموزشی آن را نیز بزودی منتشر کنیم