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

 آموزش قدم به قدم ایجاد فروشگاه آنلاین با 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>

توضیح : اولین دستور (متا تگ) مربوط به ریسپانسیو بودن وب سایت می باشد . دستور دوم نیز عنوان وب سایت را مشخص می کند . در خط سوم استایل بوت استرپ را اضافه کردیم و در خط چهارم استایلی که خودمان می خواهیم به وب سایت اضافه کنیم را اضافه کردیم . و در نهایت در خط آخر نیز کتابخانه جی کوئری را رفرنس دادیم .

افزودن منو (navbar) به صفحه:

اکنون می خواهیم یک منو به صفحه اضافه کنیم . دستورات زیر را در تگ 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(); 
}

نکته : پس از اجرای پروژه ، دیتاهای فرضی ، به جداول اضافه خواهند شد (تصویر زیر) :

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