95Amirreza
چهارشنبه 09 دی 1394, 15:18 عصر
امید است که بعد پایان این مقاله تمامی شما کاربران توانسته باشید یک فرم ثبت نام و ورود به سیستم را با استفاده از MVC (http://www.asp.net/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
حال برنامه را اجرا کنید.
موفق باشیید
در ابتدای کار به طراحی پایگاه داده می پردازیم. برای شروع کار ابتدا پایگاه داده با یک نام دلخواه ایجاد کرده و جداولی مطابق با جداولی که ما طراحی می کنیم در این پایگاه داده ایجاد نمایید.
اولین جدولی که ما نیاز داریم جدول نقش ها (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
حال برنامه را اجرا کنید.
موفق باشیید