2. Создание приложения
2.1 Создание базы данных GiftShop в среде mssql
Для создания базы данных в Visual Studio 2010, нажимаем вкладку ServerExplorer в узле Data Connections, щёлкаем правой кнопкой Create New SQLServer Database см. рис. 2.1.
Рис.2.1. Схема создания базы данных
Источник: собственная разработка автора при помощи Microsoft Visual Studio
Далее добавляем необходимые таблицы, о которых велась речь ранее. Получаем в итоге готовую базу данных, которую будем использовать в дальнейшем.
2.2 Определение структуры web-приложения
После того как ы определили основные положения бизнес - логики приложения необходимо выбрать технологию, с помощью которой будем создавать интернет-магазин.
В данной работе использовалось ASP.NET MVC 3. Для работы с данной технологией необходимо наличие Microsoft Visual Studio 2010, с установленным пакетом обновлений ASP.NETMVC 3 Update Tools.
Для работы с базой данных будет использован MSSQL Server 2008 R2. Работа с моделью данных будет осуществятся с помощью Entity Framework.
Создаём пустой Solution добавляем в него два проекта: ShopModel (тип – C# ClassLibrary), в котором будет описываться модель данных, сгенерированная по ранее созданной базе данных GiftShop с помощью Entity Framework (ADO.NET Entity DataModel).
Второй проект – Интернет_магазин (тип - ASP.NET MVC 3 Web Application), в котором и будет создаваться само Web-приложение.
2.3 Создание модели данных
После того как мы создали базу данных и определили структуру Web-приложения перейдём к созданию модели данных. В проекте ShopModel создадим новый объект ADO.NET Entity DataModel по имени ShopEntity. Далее в мастере выберем Generate From Database, выберем базу данных GiftShop, потом выберем все таблицы из этой базы данных.
После этого мастер сгенерирует нам модель нашей базы данных. И каждой сущности из базы данных соответствует сгенерированный класс, с помощью EntityFramework. Далее в процессе разработки будем добавлять необходимые классы в данный проект.
2.4 Создание web-приложения
Перед началом создания приложения необходимо добавить ссылки на проект ShopModel и на библиотеку Entity Framework версии 4.0. Также необходимо добавить в файл Web.config строку подключения к базе данных.
<connectionStrings>
<add name="ApplicationServices"
connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;
AttachDBFilename=|DataDirectory|aspnetdb.mdf;User Instance=true"
providerName="System.Data.SqlClient" />
<add name="GiftShopEntities" connectionString="metadata=res:
//*/Entities.ShopEntity.csdl|res://*/Entities.ShopEntity.ssdl|
res://*/Entities.ShopEntity.msl;provider=System.Data.SqlClient;provider connection string="
Data Source=.\SQLEXPRESS;Initial Catalog=GiftShop;Integrated Security=True;
Pooling=False;MultipleActiveResultSets=True"" providerName="System.Data.EntityClient" />
</connectionStrings>
Так, как в нашем проекте используется MVC 3 , нам необходимо удалить ненужные объекты из шаблона начального проекта. После этого приступим к созданию контроллеров. Для этого щелкаем правой кнопкой на папке Controller, выбираем AddController , задаём ему имя ProductController. Этот контроллер будет отвечать за работу с товарами на сайте. Для этого создаем ViewList, в котором будут выводиться наши товары.
Теперь необходимо зарегистрировать маршрут в файле Global.asax.
Public static void Register Routes(RouteCollectionroutes) {
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Product", action = "List", id = UrlParameter.Optional }
);
}
Для того чтобы товары отображались на странице не все, а по несколько штук добавим в папку Models класс PagingInfo. А также необходимо создать HTML Helper Method. Для этого создадим папку HtmlHelpers и добавим в неё новый статический класс PagingHelpers. Создадим в нём расширяющий метод PageLinks, который будет выполнять на странице разбиение. Добавим ссылку на HTML Helper Method в Views/Web.config File.
Создаём в папке Models класс ProductsListViewMode, который объединяет PagingInfoи List. Добавляем в Global.asax новый маршрут. Создадим новую Partial View Product Summary, в котором будет выводиться имя товара, его описание и цена. И теперь добавим в List следующий код:
@modelSportsStore.WebUI.Models.ProductsListViewModel
@{
ViewBag.Title = "Products";
}
@foreach (var p in Model.Products) {
Html.RenderPartial("ProductSummary", p);
}
<div class="pager">
@Html.PageLinks(Model.PagingInfo, x =>Url.Action("List", new {page = x}))
</div>
Теперь несколько изменим дизайн нашего сайта. В папке Content выберем файл Site.css, удалим в нём содержимое и вставим:
BODY { font-family: Cambria, Georgia, "Times New Roman"; margin: 0; }
DIV#headerDIV.title, DIV.item H3, DIV.item H4, DIV.pager A {
font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;
}
DIV#header{ background-color: #444; border-bottom: 2px solid #111; color: White; }
DIV#headerDIV.title{ font-size: 2em; padding: .6em; }
DIV#content{ border-left: 2px solid gray; margin-left: 9em; padding: 1em; }
DIV#categories{ float: left; width: 8em; padding: .3em; }
DIV.item{ border-top: 1px dotted gray; padding-top: .7em; margin-bottom: .7em; }
DIV.item:first-child { border-top:none; padding-top: 0; }
DIV.item H3 { font-size: 1.3em; margin: 0 0 .25em 0; }
DIV.item H4 { font-size: 1.1em; margin:.4em 0 0 0; }
DIV.pager{ text-align:right; border-top: 2px solid silver;
padding: .5em 0 0 0; margin-top: 1em; }
DIV.pager A { font-size: 1.1em; color: #666; text-decoration: none;
padding: 0 .4em 0 .4em; }
DIV.pager A:hover { background-color: Silver; }
DIV.pagerA.selected{ background-color: #353535; color: White; }
При добавлении новых компонент на страницы это код будем обновлять, добавлять что-то новое. Теперь изменим наш DefaultRazorLayout. Поместим в body следующий код:
<body>
<div id="header">
<div class="title">МагазинПодарков</div>
</div>
<div id="categories">
@{Html.RenderAction("Menu", "Nav"); }
</div>
<div id="content">
@RenderBody()
</div>
</body>
</html>
Теперь необходимо создать новый контроллер NavController, который будет работать с категориями товаров. Фактически, он будет определять страницы нашего приложения. Зарегистрируем в файле Global.asax маршруты для этого контроллера. В классе NavController создадим Partial View Result Menu(), которая будет отображать категории на странице. Для этого в Partial View Result Menu используем Html.ActionLink и Html.RouteLink. Добавим в Site.css описание для категорий.
Далее перейдём к разработке корзины покупателя. Для этого зайдём в проект ShopModel и в папке Entities создадим класс DataCartManager, который будет работать с корзиной [3, с. 187].
Далее необходимо создать CartController, который будет управлять ею. Следующим шагом будет создание в папке Models класса CartIndexViewModel, который будет позволять возвращаться от корзины к List. В CartControllers создаётся метод ViewResultIndex. Потом создаётся ViewIndex, который будет отображать корзину, см. рис. 2.2.
Рис.2.2. Интерфейс корзины покупателя
Источник: собственная разработка автора при помощи Microsoft Visual Studio
Далее добавим возможность удаление товаров из корзины. Следующим шагом будет покупка товаром из корзины (Checkout), создаём модель подтверждения заказа и регистрируем заказ в базу данных.
И последней частью данного приложения будет AdministrationPart, здесь мы реализуем возможность CRUD операций. Для этого создадим AdminController, у него будет свой layout, свой CSSstyles. Работа контроллера демонстрируется в приложении.