آموزش ساخت فروشگاه اینترنتی با ASP.NET MVC – بخش۱

- دسته بندی: آموزش فروشگاه آنلاین با MVC
- تاریخ انتشار: ۱۳۹۴/۱۰/۲۶
- تعداد کامنت: 11 ارسال دیدگاه
- به اشتراک گذاری:
آموزش قدم به قدم ایجاد فروشگاه آنلاین با MVC – بخش اول
Online Shop by MVC – Step by Step Tutorial – Part1
با سلام خدمت دوستان و همراهان همیشگی وب سایت Mohtavaban.com . در این سری آموزشی ، قصد داریم با هم یک فروشگاه اینترنتی نسبتا ساده ولی کامل را توسط ASP.NET MVC راه اندازی کنیم .
مزایای فروشگاه آنلاین برای کاربران و صاحبین مشاغل:
فوابد خرید اینترنتی برای کاربران و مشتریان:
در سال های اخیر، انجام خرید اینترنتی تا حد زیادی بین کاربران محبوب شده است و از مزایای خرید آنلاین برای خریداران و کاربران می توان به موارد زیر اشاره کرد:
- عدم محدودیت زمان و مکان
- مقایسه قیمت محصولات
- مشاهده نظرات سایر مشتریان
- و…
فواید راه اندازی فروشگاه اینترنتی برای کسب و کارها:
داشتن فروشگاه آنلاین برای کسب و کارها می تواند فواید زیر را داشته باشد:
- فروش 24 ساعته
- عدم محدودیت جغرافیایی برای مشتریان
- عدم نیاز به اجاره ملک یا فروشگاه فیزیکی
- آنالیز دقیق خریداران
- و…
مواردی که باید قبل از شروع خواندن این مقاله فرا گرفته باشید عبارتند از :
- ASP.NET MVC 5 (برای شروع یادگیری به این لینک مراجعه نمایید)
- Entity Framework 6 – Code First (برای فراگیری این تکنولوژی به وب سایت asp.net مراجعه کنید)
- فریم ورک BootStrap (آموزش کامل در وب سایت مرجع بوت استرپ به نشانی getBootstrap.com)
در بخش اول آموزش “راه اندازی فروشگاه آنلاین توسط ASP.NET-MVC5” سرفصل های زیر را خواهیم داشت:
- نصب نرم افزارهای موردنیاز » نرمافزارهای اس کیو ال سرور و ویژوال استودیو » نصب Web Essentials
- ساخت پروژه جدید در Visual Studio » ایجاد Controller » ایجاد Action » » تعریف اکشن Index » تعریف اکشن Browse » تعریف اکشن Details » ایجاد View » نصب Bootstrap و Jquery » طراحی Layout » افزودن منو (navbar) به صفحه » ایجاد فایل ViewStart » تعریف Model » تعریف Connection String
- نصب Entity Framework » ایجاد کلاس Category » ایجاد کلاس Product » تعریف کلاس DatabaseContext
- ورود دیتا به جداول دیتابیس » روشهای مقداردهی به جداول product و category
نصب نرم افزارهای موردنیاز :
برای شروع این پروژه نیاز به دو نرم افزار VisualStudio و Microsoft SqlServer دارید.
نرمافزارهای اس کیو ال سرور و ویژوال استودیو:
نسخه های پیشنهادی ما برای این آموزش VisualStudio 2013 و Sqlserver 2014 یا ورژن های بالاتر می باشد ولی اگر Sqlserver 2012 را روی سیستم خود نصب دارید مشکلی ندارد و می توانید با همین نسخه ، این آموزش را پی بگیرید .
نصب Web Essentials
پس از نصب و راه اندازی ویژوال استودیو ، می بایست یک Extension به آن اضافه کنیم . بنابراین به منوی زیر رفته و Web Essentials 2013 را جستجو و نصب می کنیم : Tools > Extensions & Updates
ساخت پروژه جدید در Visual Studio:
به منوی File > New > Project بروید و در منوی سمت چپ web را انتخاب کرده و در منوی راست ، Asp.net Web Application و آخرین نسخه دات نت فریم ورک را انتخاب کرده (مانند تصویر زیر) و نام پروژه را AspNetStore قرار می دهیم و تیک گزینه Add to Source control را نیز می زنیم و OK میکنیم :
در مرحله بعد ، پنجره ای برای انتخاب تمپلیت پروژه نمایش داده می شود . گزینه Empty را از بالا و گزینه MVC را از پایین انتخاب کرده و Ok می کنیم :
در پایان ، از ما درباره نوع Source Control پرسیده می شود که گزینه Git را انتخاب میکنیم .
» مطالعه مقاله آموزشی گیت و گیت هاب توصیه می شود.
در بخش بعد، شروع به ایجاد Controller , Action , View مورد نیاز خواهیم کرد . همراه ما باشید …
ایجاد Controller :
به این منظور روی فولدر Controller راست کلیک کرده و Add > Controller را زده و نام آنرا HomeController قرار می دهیم . اگر Resharper را نصب کرده باشیم دستورات داخل کنترولر Home بصورت زیر می باشد :
کنترولر بعدی که ایجاد می کنیم StoreController می باشد که مانند HomeController ساخته می شود .
ایجاد Action :
تعریف اکشن Index:
اکشن Index از کنترولر Store را بصورت زیر تغییر می دهیم :
public ActionResult Index()
کار اکشن ایندکس نمایش محصولات بصورت رندوم می باشد .
تعریف اکشن Browse:
در همین کنترولر (Store) اکشن دیگری بنام Browse داریم که فعلا بصورت زیر تعریف می کنیم :
public ActionResult Browse(string id) { return View(); }
کار این اکشن نمایش محصولات یک دسته خاص است .
تعریف اکشن Details:
اکشن بعدی که مشخصات محصول را نمایش می دهد Details می باشد که بصورت زیر تعریف می شود :
public ActionResult Details(int id) { return View(); }
به اکشن های فوق ، در بخش های بعدی مقاله ، دستورات دیگری اضافه خواهیم کرد .
ایجاد View :
اکنون می خواهیم به هر یک از اکشن های فوق یک View نسبت دهیم . ابتدا باید فایل Layout را تعریف کنیم (که عملکردش مانند MasterPage در ASP.NET webform می باشد) بنابراین روی فولدر Views راست کلیک کرده و یک زیرفولدر بنام Shared می سازیم و روی این فولدر راست کلیک کرده و Add > View را انتخاب می کنیم و مانند تصویر زیر تنظیماتش را انجام می دهیم :
با توجه به اینکه ما میخواهیم از فریم ورک بوت استرپ برای طراحی قالب این فروشگاه استفاده کنیم ، نیاز داریم که نوگت jQuery و نیز Bootstrap را نصب کنیم .
نصب Bootstrap و Jquery :
روی فولدر References پروژه خود راست کلیک کرده و Manage NuGet Package را انتخاب می کنیم .
نکته : دقت کنید که ابتدا باید جی کوئری را نصب کنیم و سپس بوت استرپ .
پس در پنجره باز شده عبارت jquery را سرچ کرده و اولین گزینه یافت شده را Install می کنیم .
سپس عبارت bootstrap را جستجو کرده و اولین گزینه را install می کنیم .
در بخش بعد، با ایجاد Layout برای پروژه آشنا می شویم . با ما باشید …
طراحی Layout :
در این مرحله ، باید کدهای بوت استرپی موردنظر را در فایل Layout بنویسیم . ابتدا در تگ head کدهای زیر را می نویسیم :
<head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title - AspNet Store</title> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/Custom.css" rel="stylesheet" /> <script src="~/Scripts/jquery-2.2.0.min.js"></script> </head>
توضیح : اولین دستور (متا تگ) مربوط به ریسپانسیو بودن وب سایت می باشد . دستور دوم نیز عنوان وب سایت را مشخص می کند . در خط سوم استایل بوت استرپ را اضافه کردیم و در خط چهارم استایلی که خودمان می خواهیم به وب سایت اضافه کنیم را اضافه کردیم . و در نهایت در خط آخر نیز کتابخانه جی کوئری را رفرنس دادیم .
اکنون می خواهیم یک منو به صفحه اضافه کنیم . دستورات زیر را در تگ body تایپ کنید :
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <code><button class="navbar-toggle collapsed" type="button"><span class="sr-only">Toggle navigation</span></button> @Html.ActionLink("AspNet Store", "Index", "Home", null, new { @class = "navbar-brand" }) </code> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"> <code>@Html.ActionLink("Home", "Index", "Home")</code> </li> </ul> </div> </div> </nav>
توضیح : توسط این دستورات ، منویی تعریف شده است که ویژگیهای زیر را دارد :
- در هنگام اسکرول ، به بالای صفحه می چسبد (fixed-top)
- در دستگاه های کوچک مانند موبایل بجای منو ، یک button نمایش داده می شود که با فشردن آن ، منو بصورت آبشاری به کاربر نمایش داده می شود .
- دارای Navbar-Brand است یعنی لوگو و یا نام سایت را در کنار منو نشان می دهد که در اینجا توسط ActionLink به اکشن ایندکس از کنترولر Home لینک داده ایم .
- لینکهای منو فعلا یکی است که به همین صفحه اصلی سایت اشاره دارد .
نکته : برای کسب اطلاعات بیشتر در زمینه منوی بوت استرپ ، به وب سایت getBootStrap مراجعه کنید .
ایجاد فایل ViewStart :
روش هوشمندانه تعریف Layout برای View های پروژه ، تعریف Layout در فایلیست بنام ViewStart . بنابراین روی فولدر Views راست کلیک کرده و Add > View را می زنیم . سپس بصورت شکل زیر مشخصات آنرا تعریف کرده و Add می کنیم :
و سپس دستور زیر را در فایل ViewStart تعریف می کنیم :
@{ Layout = @"~/Views/Shared/_Layout.cshtml"; }
از این پس ، فقط کافیست در هنگام افزودن view به یک اکشن ، تیک گزینه use a layout page را بزنیم ولی در باکس مربوطه چیزی ننویسیم . خودش بطور اتوماتیک از طریق فایل ViewStart ، فایل Layout را می بیند .
در مرحله بعد ، باید برای اکشن Index از کنترولر Home و اکشن های Index , Browse , Details ، یک View بسازیم. برای اینکار ، روی نام اکشن موردنظر راست کلیک کرده و Add > View را میزنیم و فقط تیک use layout را زده و Add میکنیم .
خب دوستان عزیز ، در بخش بعد، مدل های Category و Product و DatabaseContext و رشته اتصال به دیتابیس (Connection String) را خواهیم ساخت . همراه ما باشید …
تعریف Model :
برای شروع کار با مدل و دیتابیس ، ابتدا باید رشته اتصال به دیتابیس را در فایل web.config تعریف کنیم .
تعریف Connection String :
برای راهنمایی در این زمینه می توانید به وب سایت ConnectionStrings مراجعه کنید . در این وب سایت ، به قسمت Trusted Connection بروید و رشته اتصال آنرا کپی و در فایل web.config آنرا پیست کنید . این رشته اتصال ، راحتترین روش اتصال به دیتابیس می باشد چون نیازی به username , password ندارد :
Server=myServerAddress;Database=myDataBase;Trusted_Connection=True;
تنها چیزی که باید به رشته فوق اضافه کنیم ProviderName است. در نهایت باید رشته اتصال را در فایل web.config بعد از تگ appSetting و قبل از system.Web تعریف کنیم.
در این مثال ، نام سرور را نقطه (.) در نظر گرفتیم (معمولا نقطه می باشد) و نام دیتابیس را AspNetStore تعریف کردیم .
نصب Entity Framework :
مرحله بعدی ، نصب Entity Framework بر روی پروژه است . بنابراین مجددا از نوگت استفاده می کنیم . روی فولدر References راست کلیک کرده و Mange NuGet Packages را انتخاب میکنیم و در پنجره ظاهر شده ، EntityFramework را نصب می کنیم .
ایجاد کلاس Category :
روی فولدر Models راست کلیک کرده و Add > Class را بزنید و نام آنرا Category.cs قرار دهید و property های زیر را برای آن تعریف کنید :
public int CategoryId { get; set; } public string Name { get; set; }
ایجاد کلاس Product :
روی فولدر Models راست کلیک کرده و Add > Class را بزنید و نام آنرا Product.cs قرار دهید و فعلا property های زیر را برای آن تعریف کنید :
public int ProductId { get; set; } public string Name { get; set; } public Category Category { get; set; }
در مقاله های بعدی ، فیلدهای دیگری به جدول محصولات اضافه خواهیم کرد (مانند قیمت و توضیحات) . آخرین Property در کلاس فوق Category محصول است که از نوع کلاس Category می باشد که در بالا تعریف کردیم .
تعریف کلاس DatabaseContext :
برای ایجاد کلاسی به منظور ارتباط با دیتابیس ، یک فولدر بنام Data در روت پروژه خود بسازید و در آن کلاسی بنام StoreContext تعریف کنید . این کلاس باید از DbContext ارث ببرد . و همچنین در این کلاس ، باید دو کلاسی که در بالا تعریف کرده ایم را با نوع DbSet تعریف کنیم . بصورت زیر :
public class StoreContext : DbContext { public StoreContext() : base("DefaultConnection") { } public DbSet Categories { get; set; } public DbSet Products { get; set; } }
دقت کنید که در سازنده کلاس ، رشته اتصال را تعریف کرده ایم و در دستورات بعدی جداول محصولات و دسته ها را ساختیم .
تا اینجای مقاله، نوگت EntityFramework را نصب کردیم و کلاسهای Category , Product , DatabaseContext را تعریف کردیم . در بخش بعد میخواهیم به جداول محصولات و فهرست ، دیتای نمونه وارد کنیم .
ورود دیتا به جداول دیتابیس :
برای اینکه مدل های ما به جدول در دیتابیس تبدیل شوند ، باید یکبار پروژه را اجرا کنیم . بنابراین نوبت به اجرای اپلیکیشن رسیده است !
پس از اجرای اپلیکیشن ، می بینیم که در دیتابیس ، دو جدول ما ایجاد شده اند (تصویر زیر) :
روشهای مقداردهی به جداول product و category:
چند روش برای مقدار دهی به رکوردهای این جداول وجود دارد . یکی اینکه همینجا در دیتابیس روی جدول راست کلیک کنیم و Edit Top 200 Rows را بزنیم و مقادیر مورد نظر را وارد کنیم .
روش دیگر آنست که در پروژه روی Controllers راست کلیک کنیم و Add Controller کنیم و در پنجره ای که نمایش داده می شود ، گزینه MVC5 controller with views , using Entity Framework را انتخاب کنیم و در نهایت مدل خود را انتخاب کرده و OK کنیم . حال ، تمام قابلیتهای Insert , Update , Select , Delete بطور خودکار و با تمام View هایشان ، ایجاد می شوند . از طریق اجرای فایل Create.cshtml می توان به جدول موردنظر دیتا وارد کرد .
روش دیگر آنست که یک کلاس بنام DbPopulate.cs در فولدر Data تعریف کنیم . دستوراتی که در این کلاس می نویسیم بصورت زیر است :
public class DbPopulate { public async static Task AddDataAsync() { using (var db = new StoreContext()) { var Computers = new Category() { Name = "Computers" }; var Printers = new Category() { Name = "Printers" }; var Books = new Category() { Name = "Books" }; db.Categories.AddRange(new Category[] { Computers, Printers, Books }); db.Products.Add(new Models.Product { Name = "Really Fast Computer", Category = Computers }); db.Products.Add(new Models.Product { Name = "Midium Computer", Category = Computers }); db.Products.Add(new Models.Product { Name = "Color Laser 1", Category = Printers }); db.Products.Add(new Models.Product { Name = "Laser Jet 2", Category = Printers }); db.Products.Add(new Models.Product { Name = "Gone with the wind", Category = Books }); db.Products.Add(new Models.Product { Name = "Shahzadeh !", Category = Books }); db.SaveChanges(); } } }
مشاهده می کنید که برای جدول فهرست محصولات ، سه دسته تعریف کردیم و برای هر دسته 2 محصول .
میخواهیم این کلاس و دستوراتش را در اکشن Index از کنترولر Home اجرا کنیم . پس باید اکشن ایندکس نیز Async شود :
public async Task Index() { await DbPopulate.AddDataAsync(); return View(); }
نکته : پس از اجرای پروژه ، دیتاهای فرضی ، به جداول اضافه خواهند شد (تصویر زیر) :