книги хакеры / журнал хакер / 177_Optimized
.pdf
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
C |
|
E |
|
|||
|
|
X |
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
||
|
F |
|
|
|
|
|
|
t |
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
r |
|
P |
|
|
|
|
|
NOW! |
o |
||
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|||
|
|
|
|
to |
110 m |
||||
w Click |
|
||||||||
|
|
||||||||
w |
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
. |
|
|
|
|
|
.c |
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
df |
|
|
n |
e |
||
|
|
|
|
-xcha |
|
|
|
Кодинг
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
ХАКЕР 10 /177/ 2013 |
|
|
|
|
|
|
||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-x cha |
|
|
|
|
Теперь давай определимся с функционалом будущего проекта. Будущий багтрекер должен:
•отображать список тикетов с возможностью быстрой фильтрации по их состоянию (открыто/закрыто);
•обладать простым интерфейсом, упрощающим процесс добавления задач в базу;
•производить приятное впечатление на пользователя.
Спервыми двумя пунктами все ясно — немного кода на C#, и все готово, но как быть с интерфейсом? Мы воспользуемся фреймворком Twitter Bootstrap (см. статью про него в 168-м номере нашего журнала), который позволит нам состряпать симпатичный интерфейс для приложения за несколько минут. Я не стану приводить портянку из пары десятков килобайт шаблонного HTML-кода (тем более что там нет ничего необычного), а просто дам ссылку на заготовку: goo.gl/Xvhsmh. Качай и повторяй действия вместе со мной.
ДЕЛАЕМ ПРОЕКТ
У меня нет профессиональной версии студии, поэтому я воспользовался экспресс-версией редакции «Для web». Запускай студию и создавай новый проект «Веб-приложение ASP.NET 4» с гордым названием BugTrackerForX.
В окне мастера создания нового проекта тебе будет предложено выбрать шаблон для приложения. Шаблоны позволяют сразу же снаб-
дить будущее творение определенным функционалом. Например, выбрав шаблон «Интернет-приложение», ты получишь заготовку с регистрационной формой и механизмом аутентификации.
Для своего проекта мы выберем вариант «Простой». Такой проект не будет включать в себя ничего лишнего, и это будет в самый раз для первого знакомства с миром ASP.NET MVC. В окне выбора шаблона для приложения также обрати внимание на пункт View Engine. Здесь выбирается шаблонизатор для представлений. Тебе доступно два варианта: Razor и ASPX.
Во второй версии фреймворка MVC в качестве шаблонизатора использовался ASPX, пришедший из классического ASP.NET. После PHP’ного многообразия движков для рендеринга представлений начинаешь испытывать приступы тошноты от его неуклюжести. Лучше сразу выбирать Razor, максимально приближенный к аналогичным PHP-решениям (Smarty, Twig и так далее).
Больше никаких галок ставить не нужно, жми OK, и студия сгенерирует болванку приложения.
СТРУКТУРА MVC-ПРИЛОЖЕНИЯ
Открой окно Solution Explorer пошире и мотай на ус теорию.
•App_Data. После создания приложения эта директория пуста, но впоследствии в ней будут храниться различные ресурсы приложения, такие как базы данных.
•App_Start. В директории принято хранить статичные классы, отвечающие за общую конфигурацию приложения. В предыдущих версиях фреймворка классы, влияющие на конфигурацию приложения, описывались в едином файле Global.asax. Начиная с четвертой версии, принято их разделять на отдельные файлы и помещать в App_Start с кодом инициализации в Global.asax.
•Content. Статичные ресурсы приложения. Сюда можно помещать изображения, файлы стилей и много чего другого.
•Controllers. Из названия сразу понятно, что здесь должны храниться все контроллеры.
•Models. Содержит описание моделей приложения.
ЧТО ПОЧИТАТЬ
goo.gl/pVxty — прекрасный цикл статей Андрея Черникова. В статьях рассматривается процесс создания полноценного сайта. Мануал больше ориентирован на читателей, имеющих опыт разработки на ASP.NET MVC. goo.gl/9Di7X — книга «ASP.NET MVC3 Framework с примерами на C# для профессионалов». Книга немного устарела (беда русских изданий), но все же до сих пор актуальна и новичкам будет в самый раз.
goo.gl/i5t4r — книга «ASP.NET MVC4. Разработка реальных веб-приложений с помощью ASP.NET MVC». В отличие от предыдущей рассматривается свежая версия MVC-фреймворка, но материал больше подойдет для тех, кто уже немного в теме.
techdays.ru — на сайте представлено огромное количество докладов по технологиям и продуктам компании Microsoft. Рекомендую обратить внимание на тренинги по ASP.NET MVC от Гайдара Магданурова.
•Scripts. Здесь должны находиться различные вспомогательные библиотеки. Как правило, это JavaScript-тулзы вроде Angular.JS или jQuery. При создании приложения по шаблону «Простой» в эту папку автоматически добавляется ряд библиотек: jQuery, jQuery UI, knockout, modernizr и другие.
•Views. Название директории опять подсказывает тип содержимого. Все представления группируются по принадлежности к контроллерам. Например, все представления, относящиеся к контроллеру Home, будут размещаться по пути Views/Home/.
•Global.asax — о предназначении этого файла я упоминал, когда рассказывал про директорию App_Start. Напоминаю еще раз: в файле определяется код инициализации проекта.
•Web.config — основной файл конфигурации приложения. Например, здесь описываются настройки соединения с СУБД; настройки вспомогательных компонентов (таких как Entity Framework).
ВЫЖИГАЕМ МОДЕЛИ
Начинать разработку приложения будем с проектирования моделей. Для создания багтрекера нам потребуется описать несколько моделей:
•тикет (Ticket) — сущность, характеризующая отдельную заявку (пост в багтрекер). Ряд полей этой модели будет ссылаться на другие модели;
•статус (Status) — статус выполнения заявки;
•категория (Category) — категория заявки;
•пользователь (User) — пользователь, оставивший тикет.
Каждая модель в ASP.NET MVC фреймворке описывается в виде отдельного класса в папке Model (можно в любом месте). Добавление новых моделей выполняется в контекстном меню с помощью пункта Add →Class. Создай все модели (см. соответствующие листинги) и возвращайся к тексту статьи.
Листинг 1. Описание модели Category
public class Category
{
public int CategoryId { get; set; }
|
|
|
Пример готовой верстки |
Окно Solution Explorer |