امید است که بعد پایان این مقاله تمامی شما کاربران توانسته باشید یک فرم ثبت نام و ورود به سیستم را با استفاده از MVC طراحی نمایید
در ابتدای کار به طراحی پایگاه داده می پردازیم. برای شروع کار ابتدا پایگاه داده با یک نام دلخواه ایجاد کرده و جداولی مطابق با جداولی که ما طراحی می کنیم در این پایگاه داده ایجاد نمایید.
اولین جدولی که ما نیاز داریم جدول نقش ها (Roles) نام دارد. فیلدهای این جدول را در شکل زیر خواهید دید. نکته ای که در این جدول قابل ذکر است این است که برای RoleID در این جدول خاصیت Identity را برای جلوگیری از بودجود آمدن خطا در زمان ثبت کاربر True قرار نمی دهیم. زیرا در زمان ثبت نام تمام کاربران به عنوان کاربران عادی ثبت می شوند. و در نهایت توسط مدیر نقش دهی می شوند.
جدول نقش ها در این برنامه باید حاوی فیلدهای زیر باشد.
ضمیمه 137895
در جدول نقش ها باید در ابتدا اطلاعاتی ثبت نماییم. زیرا در صورت خالی بودن این جدول اجرای برنامه با مشکل مواجه می شود.
ضمیمه 137896
جدول کاربران نیز باید حاوی فیلدهای زیر باشد.
ضمیمه 137897
حال به بخش طراحی و پیاده سازی برنامه می رویم. در اینجا ما از VisualStudio2013 استفاده می کنیم.
طبق تصویر زیر یک پروژه جدید ایجاد و یک نام مناسب برای آن بر می گزینیم. . با انتخاب Next به صفحه بعدی می رویم.
ضمیمه 137898
در صفحه موجود ابتدا گزینه Empty و بعد از گزینه MVC را انتخاب کرده و OK را انتخاب می کنیم.
ضمیمه 137899
حال به صفحه اصلی برنامه ای که میخواهیم ایجاد کنیم وارد شده ایم. در اینجا باید مدلی از پایگاه داده ایجاد کنیم. برای این کار برروی Model در بخش Solution Explorer کلیک راست کرده و گزینه Add New Item را انتخاب می کنیم.
ضمیمه 137900.
در پنجره موجود در بخش Data گزینه ADO.NET Entity Data Model را انتخاب کنید و یک نام مناسب برای مدل خود در نظر بگیرید.
ضمیمه 137901
در صفحه بعدی باید گزینه ای که در تصویر مشاهده می کنید را انتخاب کرده و با Next به صفحه بعدی بروید
ضمیمه 137902
حال باید یک اتصال به پایگاه داده ایجاد کنیم. مراحل را طبق تصویر پیش ببرید تا با پایگاه داده اتصال برقرار کنیم.
ضمیمه 137903
در صفحه انتخاب اتصال به بانک باید گزینه دوم را انتخاب کنید و با Next به صفحه بعدی بروید.
ضمیمه 137904
در این صفحه نیز نسخه Entity Framework موردنظر خود را انتخاب کنید و به مرحله بعدی هدایت شوید.
ضمیمه 137905
حال جداولی که به آنها نیاز داریم را انتخاب می کنیم و تیک گزینه Include را انتخاب کرده و کار در اینجا به پایان میرسد.
ضمیمه 137906
می بینیم که مدلهای ما به همراه ارتباطاتشان به پروژه اضافه شده اند. حال به ادامه کار میپردازیم.
ضمیمه 137907
حال اگر به پوشه Model(پوشه های USer و roles) نگاهی بیاندازید، میبینید که کلاسهای موردنیاز ما از روی مدلهایی که به پروژه اضافه کرده ایم ساخته شده اند. یعنی در واقع با این روش دیگر نیاز به ساختن کلاس نداریم. کار بسیار آسان شده است.
حال نکته ای که در اینجا برای ما قابل توجه است این است که ما نمیتوانیم برای کلاس ها در entity صفت مشخص کنیم. پس برای اضافه نمودن صفت به کلاس ها باید از کلاس های MetaData استفاده کنیم. برای این کار باید تنظیماتی در مدل ایجاد کنیم. در ادامه خواهید دید که چگونه کلاسهای MetaData را ایجاد میکنیم.
برای شروع کار باید صفحه MyModel.tt را باز کنید و در بخشی که در تصویر می بینید کد موردنظر را اضافه نمایید.
ضمیمه 137910
ضمیمه 137911
به خاطر داشته باشید که بعد از هر تغیری در برنامه باید آن را Rebuild کنید.
بعد از اینکه پروژه را Rebuild کردید با خطاهای زیادی مواجه خواهید شد. حال برای رفع این خطاها چه کنیم؟
راه حل بسیار آسان است. کلاس نقش ها را بینید.
ضمیمه 137914
در این تصویر میبینید که RolesMetaData به رنگ قرمز درآمده است. زیرا باید کلاس MetaData برای آن ساخته شود. برای این کار کلمه RolesMetaData را هایلایت کرده و دکمه های ترکیبی Ctrl+.+Enter را همزمان باهم میگیریم. میبینیم که کلاس MetaData موردنظر ساخته می شود. بعد از ایجاد کلاس باید فیلدهای کلاس موجود در مدل را در کلاس MetaData اضافه کنیم و حال در اینجا می توانیم صفت های مورد نظر خود را به کلاس هایمان بدهیم. برای تمامی کلاس های دیگر نیز این مراحل را طی میکنیم. و ادامه کار را پی میگیریم.
توجه داشته باشید که بعد از افزودن صفت ها به کلاس باید فضای نام زیر به برنامه اضافه شود.
ضمیمه 137915
ضمیمه 137916
حال یک کنترلر و یک View به برنامه اضافه می کنیم.
ضمیمه 137917
ضمیمه 137918
ضمیمه 137922
در کنترلر ایجاد شده برروی View راست کلیک کنید و AddView را انتخاب کنید.
ضمیمه 137923
در ادامه باید نوع View موردنظر را انتخاب کنید. در اینجا ما یک Empty view میسازیم. در مقالات بعدی با انواع View آشنا می شویم.
ضمیمه 137924
برای انجام عملیات های مربوط به کاربران مانند Login و Register یک کنترلر جدید ایجاد میکنیم و آن را Account می نامیم.
در ادامه برای انجام عملیات ثبت نام به یک کلاس نیاز داریم. ولی این یک کلاس نمایشی است و تعداد فیلدهای آن با فیلدهای کلاس کاربران ما متفاوت است. پس برای این کار یک کلاس ViewModel میسازیم. کلاس های ViewModel در واقع مانند سایر کلاس های ما هستند با این تفاوت که در انتهای نام آن ها کلمه ViewModel درج میشود. پس بر روی پوشه Model کلیک راست کرده و یک کلاس اضافه میکنیم و آن را RegisterViewModel می نامیم.
ضمیمه 137925
ضمیمه 137926
فیلدهای این کلاس را مانند تصویر زیر تنظیم کنید.
ضمیمه 137927
حال به سراغ کنترلر Account که ساختیم می رویم. اولین متد در این کنترلر را به نام Register تغییر می دهیم
ضمیمه 137928
برروی View کلیک راست کنید و گزینه AddView را بزنید. و یک View با جزئیات زیر ایجاد کنید.
ضمیمه 137929
حال برنامه را اجرا کنید و خروجی را ببینید.
ضمیمه 137930
حال به سراغ متد بازگشتی ثبت نام میرویم.
در کنترلر Account متد بازگشتی را درج می کنیم. در ادامه ببینید.
ضمیمه 137931
ضمیمه 137932
حال به جدول کاربران در پایگاه داده بروید. میبینید که اطلاعات به درستی در این جدول درج شده است.
ضمیمه 137933
پیشنهادی که برای شما داریم این است که در پوشه Models، دو پوشه دیگر به نامهای MetaDataClasses و ViewModelClasses ایجاد کنید. این برای تمیزی بیشتر کار است.تا کلاس ها در پوشه های مربوط به خود باشند.
حال برای ایجاد فرم Login یک کلاس ViewModel دیگر با نام LoginViewModel ایجاد میکنیم.
ضمیمه 137934
حال به سراغ متد Login در کنترلر Account می رویم. و دستورات موردنظر را درج میکنیم.
ضمیمه 137935
حال برروی View کلیک راست کرده و گزینه AddView را انتخاب میکنیم. حال یک View با جزئیات زیر ایجاد می کنیم.
ضمیمه 137936
حال متد بازگشتی Login را به برنامه اضافه میکنیم. توجه داشته باشید که برای دستور Login کاربر باید فضای نام Using.System.Web.Security; باید برای امنیت وب به مجموع فضاهای نام افزوده شود.
ضمیمه 137937
ضمیمه 137937
حال به صفحه Web.config رفته و در تگ System.Web کدهای زیر را درج میکنیم.
ضمیمه 137938
در ادامه برای اینکه کاربر بعد از اینکه به سایت Login کرد وارد صفحه موردنظر ما شود باید عملیاتی را انجام دهیم. در ادامه ببینید.
به صفحه Layout رفته و تغییرات زیر را اعمال کنید.
ضمیمه 137939
حال بلافاصله به کنترلر Account رفته و متد LogOff را مینویسیم.
ضمیمه 137940
حال باید حساب کاربری که در سایت ما ثبت نام کرده است فعال شود. برای این کار باید یک لینک فعال سازی برای کاربر ارسال شود.
برای این یک کنترلر جدید با نام SendEmail میسازیم. و یک View با جزئیات زیر با آن اضافه می کنیم.
ضمیمه 137941
بعد از ایجاد View تمام کدهای موجود در صفحه را پاک کنید و دستورات زیر را در آن درج کنید.
ضمیمه 137942
یک کلاس با عنوان SendEmailGmail ایجاد میکنیم. به شکل زیر توجه کنید.
ضمیمه 137943
حال کلاس دیگری با نام PartialToString ایجاد میکنیم. این کلاس یک PartialView را به صورت رشته برای ما برمیگرداند.
ضمیمه 137944
به کنترلر Account رفته و در بخشی که ثبت کامل انجام می شود کد زیر را درج کنید.
ضمیمه 137945
حال باید متد بازگشتی لینک فعال سازی را ایجاد کنیم.
ضمیمه 137946
برای این متد یک View میسازیم. و آن را به صورت زیر تنظیم میکنیم.
ضمیمه 137947
حال به سراغ مدیریت نقش ها میرویم.
برای این کار یک کلاس با عنوان MyRoleProvider میسازیم. این کلاس از کلاس RoleProvider ارث بری می کند. به شکل توجه کنید. این کلاس یک Interface است. Implement abstract را انتخاب کنید تا تمام متدهای آن را بسازد.
ضمیمه 137948
ابتدا از روی مدل یک نمونه ایجاد میکنیم. و به متد موردنظر رفته و تغییرات لازمه را اعمال میکنیم.
ضمیمه 137949
حال باید RoleProvider را به سیستم معرفی کنیم.
به صفحه web.config برویم.
ضمیمه 137950
حال بر روی نام پروژه کلیک راست کنید و ۲ Area بسازید. یکی با عنوان Admin و دیگری با عنوان User. برای هر کدام هم یک کنترلر Test به همراه View اضافه نمایید.
حال به صفحه web.config رفته و سطح دسترسی کاربر و مدیر را مشخص نمایید.
ضمیمه 137951.
حال نیاز داریم تا تغییراتی را در متد بازگشتی Login ایجاد کنیم. به کدها توجه نمایید.
ضمیمه 137952
حال برنامه را اجرا کنید.
موفق باشیید
