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

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

مشخصات مقاله

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

 آموزش قدم به قدم ایجاد فروشگاه آنلاین با MVC – بخش اول 

Online Shop by MVC – Step by Step Tutorial – Part1

آموزش قدم به قدم ایجاد فروشگاه آنلاین با MVC

 

با سلام خدمت دوستان و همراهان همیشگی وب سایت 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 دارید.

Microsoft SqlServer
Visual Studio 2013

نرم‌افزارهای اس کیو ال سرور و ویژوال استودیو:

نسخه های پیشنهادی ما برای این آموزش 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 میکنیم :

New-MVC-Project

در مرحله بعد ، پنجره ای برای انتخاب تمپلیت پروژه نمایش داده می شود . گزینه Empty را از بالا و گزینه MVC را از پایین انتخاب کرده و Ok می کنیم :

MVC-Template

در پایان ، از ما درباره نوع Source Control پرسیده می شود که گزینه Git را انتخاب میکنیم .

» مطالعه مقاله آموزشی گیت و گیت هاب توصیه می شود.

در بخش بعد، شروع به ایجاد Controller , Action , View مورد نیاز خواهیم کرد . همراه ما باشید …

 

ایجاد Controller :

به این منظور روی فولدر Controller راست کلیک کرده و Add > Controller را زده و نام آنرا HomeController قرار می دهیم . اگر Resharper را نصب کرده باشیم دستورات داخل کنترولر Home بصورت زیر می باشد :

کنترولر 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 را انتخاب می کنیم و مانند تصویر زیر تنظیماتش را انجام می دهیم :

layout-file

با توجه به اینکه ما میخواهیم از فریم ورک بوت استرپ برای طراحی قالب این فروشگاه استفاده کنیم ، نیاز داریم که نوگت 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

و سپس دستور زیر را در فایل 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 را تعریف کردیم . در بخش بعد میخواهیم به جداول محصولات و فهرست ، دیتای نمونه وارد کنیم .

 

ورود دیتا به جداول دیتابیس :

برای اینکه مدل های ما به جدول در دیتابیس تبدیل شوند ، باید یکبار پروژه را اجرا کنیم . بنابراین نوبت به اجرای اپلیکیشن رسیده است !

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

جداول Category و Product

روش‌های مقداردهی به جداول 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

5/5 (1 نظر)

اطلاعات مقاله

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

فرم ارسال دیدگاه درباره

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

دیدگاه کاربران درباره

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

avatar آرزو (2016-08-10 09:56:02)
سلام خسته نباشیین خیلی وقت دنبال همچین سایتی میگشتم ک MVC و کامل یاد بده واقعا ممنونم ازتون امیدوارم تو همه مراحل زندگی تون موفق باشین و پیشرفت کنین
avatar سعید (2018-05-18 22:50:08)
با تشکر از زحمت های زیادی که کشیدین   سورس این پروژه رو از کجا گیر بیاریم؟؟؟
avatar Mohtava-Admin (2018-06-07 08:50:38)

با سلام . ممنون از نظر لطفتون

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

 

avatar محمدرضا (2018-09-20 06:59:02)

بسیار عالی. ممنون از سایت خوبتون

avatar Ehsan Safari (2018-09-22 12:11:52)
سلام دوست عزیز. خواهش می کنم:)
avatar engineer (2018-12-18 03:02:40)
salam, khaste nabashid, in amozesh baraye 'MVC5 web form 'hast?
avatar Mohtava-Admin (2018-12-18 21:20:49)
سلام. این سری از مقالات، آموزش کامل ساخت فروشگاه آنلاین توسط ASP.NET MVC5 می باشد و Webform نیست.
avatar مرضیه (2020-04-01 10:14:45)
سلام من قسمت تعریف دارین از بیس رسیدم وقتی پوشهdata درست کردم گزینه add زدم کلاس انتخاب کردم اما گزینه کلاس نیست توش گزینه هاsql .textfile xmlfile اینا میاد من باید چکار کنم
avatar احسان صفری (2020-04-01 10:29:30)
سلام وقتتون بخیر. در مرحله تعریف کلاس DatabaseContext پس از ایجاد پوشه data و راست کلیک روی این فولدر، گزینه Class مطمئنا وجود دارد. احتمالا یه جای کار رو اشتباه انجام دادین. میتونید اسکرین شات بگیرید و به ایمیل [email protected] ارسال کنید تا بررسی کنم. با تشکر