Электронный бизнес. Ч. 1 : учебное...

М. А. МЕДВЕДЕВАМ. А. МЕДВЕДЕВ

ЭЛЕКТРОННЫЙ БИЗНЕСЧасть 1Учебное пособие

МЕДВЕДЕВА МАРИНА АЛЕКСАНДРОВНАкандидат физико-математических наук, доцент кафедры анализа систем и принятия решений института «Высшая школа экономики и менеджмента» Уральского федерального университета, руководитель обра-зовательных программ бакалавриата и магистратуры по направлению «Бизнес-информатика». Научные интересы: математическое моделирование экологических и экономических систем, информационные тех-нологии, прикладная информатика. Автор более 70 научных статей и учебно-методических материалов.Адрес эл. почты: [email protected]

МЕДВЕДЕВ МАКСИМ АЛЕКСАНДРОВИЧкандидат экономических наук, доцент кафедры анализа систем и принятия решений института «Высшая шко-ла экономики и менеджмента» Уральского федерального университета. Научные интересы: информатика, вэб-программирование, управление базами данных и интернет-контентом. Автор более 20 научных ста-тей и учебно-методических материалов.Адрес эл. почты: [email protected]

9 7 8 5 7 9 9 6 1 7 9 3 6

I SBN 579961793 - 2

Министерство образования и науки Российской ФедерацииУральский федеральный университет имени первого Президента России Б. Н. Ельцина

М. А. Медведева, М. А. Медведев

электронный бизнесЧасть 1

Учебное пособие

Рекомендовано методическим советом УрФУ для студентов,обучающихся по направлениям подготовки«Бизнес-информатика», «Прикладная информатика»

ЕкатеринбургИздательство Уральского университета2016

УДК 004.738.5:339(075.8)ББК 65.42я73+32.973.43я73 М42

Рецензенты:д-р физ.-мат. наук, проф., заведующий кафедрой Информационных тех-нологий и математического моделирования УрГАУ А. Н. Красовский;заведующий сектором ИММ УрО РАН, канд. физ.-мат. наук Д. Г. Ермаков

Научный редактор — д-р физ.-мат. наук Д. Б. Берг

Медведева,М.А.М42 Электронный бизнес. Ч. 1 : учеб. пособие / М. А. Медведева, М. А. Мед-

ведев. — Екатеринбург : Изд-во Урал. ун-та, 2015. — 108 с.

ISBN 978-5-7996-1793-6 (Часть 1)ISBN 978-5-7996-1792-9

Учебное пособие посвящено вопросам развития электронного бизнеса в Рос-сии. В основных тематических разделах рассмотрены классификация интернет-магазинов, поиск сегмента для ведения электронного бизнеса, создание сайта для организации торговли и рекомендации по его продвижению, а также при-ведены материалы по созданию личной страницы в сети Интернет с использо-ванием технологии ASP.Net и систем управления контентом. Даны примеры ис-пользования технологий HTML, CSS, ADO.Net для создания веб-приложений.

Учебное пособие предназначено для студентов экономических специально-стей высших учебных заведений.

Библиогр.: 10 назв. Табл. 5. Рис. 57.УДК 004.738.5:339(075.8)ББК 65.42я73+32.973.43я73

ISBN 978-5-7996-1793-6 (Часть 1) © Уральский федеральныйISBN 978-5-7996-1792-9 университет, 2016

3

содержание

1. Общие сведения об интернет-торговле ...............................................................5Введение .................................................................................................................51.1. Виды коммерческих сайтов ...........................................................................7 1.1.1. Сайт-витрина ........................................................................................7 1.1.2. Промо-сайты ..........................................................................................8 1.1.3. Интернет-магазины .............................................................................81.2. Классификация интернет-магазинов ..........................................................8 Виды интернет-магазинов.............................................................................91.3. Выбор сектора рынка и его анализ ............................................................101.4. Бизнес-план ..................................................................................................111.5. Поиск поставщика и доставка товара ........................................................15 1.5.1. Поисковые системы ............................................................................15 1.5.2. Иные источники информации o поставщиках ...............................16 1.5.3. Местные производители ....................................................................16 1.5.4. Выставки .............................................................................................17 1.5.5. Рынки ...................................................................................................17 1.5.6. Поставщики конкурентов ..................................................................18 1.5.7. Зарубежные производители и поставщики ....................................181.6. Создание сайта .............................................................................................19 1.6.1. Выбор хостинга ...................................................................................20 Виртуальный хостинг ........................................................................20 Виртуальный выделенный сервер (VPS) ........................................20 Индивидуальный сервер ...................................................................21 1.6.2. Облачные решения (SaaS-системы) без установки на хостинг ....21 InSales ..................................................................................................23 Shopium ...............................................................................................23 Gollos ....................................................................................................23 1.6.3. CMS для интернет-магазина ............................................................24 WebAsyst Shop-script ..........................................................................24 1 С-Битрикс .........................................................................................25 Vamshop ...............................................................................................25 OpenCart ..............................................................................................25 1.6.4. Выбор домена ......................................................................................26 Как можно «разбавлять» домен ........................................................28 Как не стоит «разбавлять домен» .....................................................28 1.6.5. Дизайн .................................................................................................28 1.6.6. Сопровождение сайта.........................................................................301.7. Логистика ......................................................................................................31 1.7.1. Аутсорсинг для интернет-магазинов ...............................................31

4

Содержание

1.7.2. Работа с Почтой России, EMS и транспортные компании ............321.8. Реклама и продвижение сайта ...................................................................32 1.8.1. Реклама сайта .....................................................................................32 1.8.2. Поисковое продвижение интернет-магазина..................................36

2. Разработка веб-приложений для организации электронного бизнеса .........42Введение ...............................................................................................................422.1. Структура HTML-документа. Форматирование текста ...........................422.2. Работа с изображениями .............................................................................462.3. Работа с таблицами в HTML-документе....................................................492.4. Гиперссылки. Якоря. Маркированные и нумерованные списки в HTML-документе. .....................................................................................552.5. Технология ASP. Net. Состояние представления (ViewState) и скрытые поля (Hidden fields)....................................................................602.6. Работа с элементами управления. Валидация ввода данных ................662.7. Оформление страниц. Шаблоны, темы, скины ........................................702.8. Работа с клиентскими скриптами в ASP.Net. Ajax-расширения ............752.9. Работа с данными в ASP. Net. Источник данных SqlSource. Представление данных посредством GridView и Details View ...............822.10. Работа с данными в ASP. Net. Использование технологии ADO. Net. Простая аутентификация пользователя ...............................882.11. Выбор CMS-системы и создание интернет-магазина ............................94 2.11.1. Настройка бэк-офиса ......................................................................97 2.11.2. Настройка дизайна интернет-магазина ....................................100 2.11.3. Настройка меню и страниц .........................................................102 2.11.4. Добавление товара на сайт .........................................................102 2.11.5. Первый заказ ................................................................................104

Список использованных источников ...................................................................107

5

1. общие сведения об интернет-торговле

Введение

Рынок электронной коммерции в России активно развивает-ся и открыт для появления новых участников. Благоприят-ные условия для открытия интернет-магазинов сложились,

в первую очередь, в связи с тем, что в стране уже сформировалось необходимое количество интернет-пользователей, которые готовы со-вершать онлайн-покупки. Мировая статистика показывает, что, ког-да количество интернет-пользователей превышает 20 % от населения страны, рынок электронной коммерции начинает бурно развивать-ся. В России в настоящее время насчитывается более 42 миллионов интернет-пользователей.

Открывать интернет-магазин в России выгодно, так как рынок электронной коммерции находится в стадии роста. По данным анали-тиков компании InSales.ru [1], общий объем рынка интернет-торгов-ли в 2014 году составил 612 млрд руб., рост по отношению к прошло-му году — 31 %. Аналитики ждут, что продажи через сеть Интернет продолжат расти на 25–35 % в год. В 2016 году объем рынка достиг-нет 1 трлн руб., а в 2017 году превысит 1,25 трлн руб. (рис. 1).

По данным InSales.ru, чаще всего жители России покупают че-рез интернет электронику и бытовую технику (147 млрд руб.), одеж-ду и обувь (93 млрд руб.), компьютеры, ноутбуки, комплектующие (68 млрд руб.), автозапчасти (38 млрд руб.) и мобильные телефоны (32 млрд руб.) (рис. 2).

6

1. Общие сведения об интернет-торговле

Рис. 1. Объем рынка и прогноз на 2015–2017 гг., млрд руб.

Рис. 2. Объем рынка по товарным категориям в 2014 г., млрд руб.

В InSales.ru отмечают, что в 2014 году выросло число больших ма-газинов, увеличились и их обороты. При этом около трети микро-ма-газинов практически не получали заказов. Тенденцией 2014 года стал уход с интернет-рынка слабых мелких игроков (рис. 3).

7

1.1. Виды коммерческих сайтов

Рис. 3. Число интернет-магазинов в Рунете в 2007–2014 гг.

Сейчас крупные игроки интернет-рынка становятся мультикате-горийными, средние интернет-магазины вынуждены ожесточеннее конкурировать, а мелкие интернет-магазины борются за выживание и рост. Одновременно с этим из оффлайн-ритейла в пространство ин-тернет-продаж приходят новые игроки.

1.1. Виды коммерческих сайтов

Коммерческие ресурсы — одна из наиболее распространенных ка-тегорий сайтов в интернете. Их основное предназначение — прода-жа товаров и услуг интернет-пользователям. Коммерческие сайты де-лятся на несколько категорий, наиболее распространенные из них:

· сайт-витрина;· промо-сайты;· интернет-магазины;· сайт-визитка.

1.1.1. Сайт-витрина

Сайт-витрина — вид сайта, основным предназначением которого является реклама готовой продукции. Наибольшее распространение такие сайты получили среди компаний и предприятий, которые про-

8


изводят товары. С его помощью невозможно совершить сделку купли-продажи, так как на сайте-витрине только предоставляется подробная информация о товаре. Иногда на таких сайтах указывается инфор-мация о том, где можно купить заинтересовавший покупателя товар.

1.1.2. Промо-сайты

Промо-сайты — интернет-ресурсы, на которых рекламируются определенные услуги или товары; особое внимание уделяется преи-муществам товара. Они характеризуются достаточно простой струк-турой, небольшим объемом (до 10 страниц) и короткой продолжи-тельностью жизни.

На страницах сайта содержатся различные графические матери-алы, контактные данные компании и т. д. Если необходимо провести масштабную компанию определенного товара — промо-сайт станет прекрасным инструментом для решения этой задачи.

1.1.3. Интернет-магазины

Интернет-магазины предназначены для продажи товаров в интер-нет-сети в режиме онлайн. Посетив такой сайт, пользователь может выбрать интересующий его товар, узнать о нем подробную информа-цию и, в случае необходимости, осуществить заказ, не выходя из дома.

Очень часто компании предлагают пользователям всю линейку то-варов на одном сайте. Интернет-магазины создаются организациями, которые осуществляют торговую деятельность и стремятся расширить круг потенциальных покупателей и возможности своего сервиса [2].

1.2. Классификация интернет-магазинов

Существует несколько классификаций интернет-магазинов.1. По методу розничной продажи товаров в сети: сайты-витрины;

торговые системы; торговые ряды; контентные проекты (потребитель-ские энциклопедии, системы интернет-заказов товаров и т. д.).

2. По бизнес-модели: онлайновый магазин или совмещение оф-флайнового бизнеса с онлайновым (интернет-магазин создается на ос-нове уже действующей реальной торговой структуры).

9

1.2. Классификация интернет-магазинов

3. По взаимоотношениям с поставщиками: магазины, обладающие собственным складом (наличие реальных товарных запасов); мага-зины, работающие по договорам с поставщиками (отсутствие значи-тельных товарных запасов) [3].

Существуют различные виды интернет-магазинов. Познакомим-ся с основными из них:

1. Сайт-магазин, который включает не только сайт с электронной витриной, но и логистическую систему, персонал, склад, офис и про-чие составляющие.

2. Сайт-посредник, который осуществляет взаимодействие между поставщиками и покупателями, выполняет прием и распределение заказов. Это скорее площадка для продаж, но такая модель позволя-ет зарабатывать в интернете.

Схема работы такого интернет-магазина заключается в следующем:1) пользователь выбирает товар и заказывает его на сайте интер-

нет-магазина;2) интернет-магазин оперативно покупает заказанный пользова-

телем товар у поставщика;3) интернет-магазин отправляет заказ на обработку в партнерский

полноценный интернет-магазин.Многие интернет-магазины начинают работу на рынке электрон-

ной коммерции именно по такой схеме: она не требует большого штата сотрудников, наличия складов, логистических мощностей и, соответ-ственно, больших инвестиций. Но такая схема работает только до тех пор, пока интернет-магазин принимает около 10 заказов в день, при количестве заказов более 100 в день все плюсы работы в таком фор-мате теряются.

Если необходимо создать долгосрочный проект, но ресурсы огра-ничены, то лучше использовать сайт-магазин. До тех пор, пока ин-тернет-магазин будет небольшим, есть возможность отладить все биз-нес-процессы.

3. Сайт-витрина — интернет-магазин как дополнение к тради-ционной торговле. Такие сайты служат, в первую очередь, для того, чтобы привлечь покупателей в оффлайн-магазины. Они носят ин-формационный характер и предназначены для того, чтобы покупа-тель мог сам посмотреть все, что ему необходимо, не посещая ста-ционарный магазин. Возможен и другой способ покупки, особенно, если речь идет о дорогостоящем товаре: покупатели едут в магазин,

10


присматриваются, прицениваются и возвращаются домой, чтобы подумать и принять решение, после чего совершают покупку через интернет-магазин. Сайты-витрины нужны для того, чтобы поку-пателю не нужно было лишний раз ехать в магазин, и он мог дома выбрать товар и принять решение дома, а магазин посетить всего один раз для покупки.

Многие продуктовые магазины работают как раз по такому прин-ципу: они принимают заказы на сайте, а забирает товары покупа-тель в магазине. По сути, такие магазины представляют собой элек-тронный каталог оффлайнового магазина, в котором представлен весь ассортимент компании. Эта схема значительно экономит время на покупки продуктов, кроме того, такие интернет-магазины обеспе-чивают достаточно высокий уровень сервиса, а традиционным мага-зинам сайт-витрина привлекает больше клиентов и, соответственно, повышает количество продаж [4].

К недостаткам такого варианта интернет-магазина можно отнести ограниченный круг обслуживания, поскольку его клиентами, скорее всего, будут жители только определенного региона.

1.3. Выбор сектора рынка и его анализ

Представим, какой товар или услугу мы хотели бы получить? Про-дается ли это? Есть ли на это спрос?

Хорошим источником вдохновения является ebay.com или Ali - baba.com и подобные зарубежные площадки. За рубежом масса то-варов, которые пользуются популярностью, а на нашем рынке еще не появились.

Проведем анализ рынка, узнаем, нужно ли людям то, что мы со-бираемся продавать, кто наши конкуренты и насколько они сильны. Оценим возможность предложить новые товары или услуги в этом сегменте рынка.

Определимим нашего покупателя. Выбор товара и целевая груп-па покупателей неразрывно связаны. Мы должны знать, кто наш по-купатель, сколько ему лет, чем он занимается, какой у него уровень дохода. Чем лучше мы знаем нашего покупателя, тем с большей точ-

11

1.4. Бизнес-план

ностью мы сможем определить его желания, а значит, удовлетворить спрос. Зная, что человеку действительно нужно, мы также сможем избежать больших расходов на рекламу [5].


Бизнес-план представляет собой документ, содержащий все ос-новные аспекты планирования производственной и коммерческой деятельности предприятия, анализирующий проблемы, с которыми оно может столкнуться, а также способы решения финансово-хозяй-ственных задач.

Бизнес-план необходим для того, чтобы показать информацию о жизненном цикле бизнеса, его составляющих, стоимости проекта, времени выхода в точку безубыточности и уровне доходности.

Правильно составленный бизнес-план является основополагаю-щим документом при начале любой предпринимательской деятельно-сти, так как он позволяет уже на первом этапе задать нужное направ-ление деятельности, выявить слабые места, а также спрогнозировать необходимые вложения и показатели рентабельности.

Каждый бизнес-план составляется индивидуально под отдельно взятый проект, но существуют стандартные пункты, необходимые для заполнения.

1. Титульный листНа титульном листе необходимо поместить краткую справку о про-

екте и его ключевых показателях: название, авторы, контактные дан-ные, место и год создания.

2. РезюмеВ данном пункте необходимо кратко описать идею бизнеса, а так-

же факторы, которые обеспечат ожидаемый уровень дохода, сроки реализации и окупаемости проекта, конкурентоспособность и жиз-ненный цикл бизнеса.

3. Аналитика рынкаОтражается информация o выбранном сегменте рынка или отрас-

ли производства: динамика, емкость, тенденции развития и перспек-тивы. Для анализа приводится информация об основных конкурен-тах данной отрасли (их характерные черты и приоритеты в работе),

12


а затем указываются наши основные отличия на рынке и конку-рентоспособность. Затем разрабатывается портрет нашего потре-бителя: возраст, пол, мотивы, где можно найти нашего клиента и как сделать так, чтобы он воспользовался нашими услугами. Да-лее необходимо указать наиболее продуктивные рынки сбыта и ка-налы продаж, а также вероятные риски в отрасли и перечень аль-тернативных решений.

4. Реализация проектаНеобходимо подробно описать этапы реализации нашего проекта.5. Маркетинговый и стратегический планыПоэтапно описывается схема вывода продукта на рынок, страте-

гия его продвижения, цена, рекламная кампания, а также каналы продаж и система сбыта.

6. Финансовый план и расчет рентабельности проектаФинансовый план — это самая ответственная часть бизнес-плана.

Он содержит всю информацию о доходах и расходах проекта. Фин-план создается в виде таблицы с учетом выбранных маркетинговых стратегий и затрат.

Также необходимо произвести расчет рентабельности проекта, в ко-тором должны быть приведены финансово-экономические расчеты, начиная от определения суммы основного капитала и заканчивая выходом на безубыточность и окупаемость проекта.

7. РискиВ данном пункте необходимо указать все риски, которые возмож-

ны для отрасли, а также привести способы преодоления этих рисков, форс-мажоров, кризиса и т. д.

8. Нормативная базаЭто последний пункт бизнес-плана, в котором приводится весь пе-

речень документов (акты, разрешения, допуски, сертификаты, ли-цензии и т. д.), в обязательном порядке сопровождающих бизнес-де-ятельность, а также стоимость и условия их получения.

Приведем краткий пример бизнес-плана по открытию интернет-магазина аксессуаров для мобильных устройств в г. Екатеринбурге.

1. Титульный листНазвание: Интернет-магазин iCable96.ruCайт: www.iCable96.ruИнформация o видах услуг: интернет-магазин iCable96.ru предо-

ставляет услуги по продаже аксессуаров для мобильных устройств,

13


портативных mp3-плееров и планшетных компьютеров компании Apple.

Ассортимент: зарядные устройства, USB-кабели, блоки питания, чехлы, накладки, бампера, наушники, автомобильные зарядные устройства.

Автор проекта: Сорокин Е. Д. тел: xxxx-xxx-xxxx, mail: xxxxxxxxx.Учредитель: Балабаев К. Р. тел: xxxx-xxx-xxxx, mail: xxxxxxxxx.Город Екатеринбург, 2016 г.2. РезюмеИдея бизнеса заключается в том, чтобы создать интернет-мага-

зин по продаже аксессуаров для мобильных устройств, портативных mp3-плееров и планшетных компьютеров компании Apple. Основным товаром конкурентов являются чехлы и наклейки, но авторы проек-та делают упор на USB-кабели и блоки питания, т. к. по статистике срок службы оригинальных зарядных устройств компании Apple со-ставляет в среднем от 6 месяцев до 1 года. Это даст нам преимущество перед нашими конкурентами, а стоимость USB-кабелей и блоков пи-тания обеспечит высокую прибыль и быструю окупаемость проекта.

3. Аналитика рынкаОсновными игроками данного рынка в городе Екатеринбурге яв-

ляются интернет-магазины:· Apple-ekb.ru;· iPavlik.ru;· i-ekb.ru;· SotMarket.ru.Они характеризуются большим выбором товара и крупными сайта-

ми с хорошей SEO-оптимизацией и лидирующими позициями на по-исковых страницах.

Минусами упомянутых интернет-магазинов являются завышен-ные цены на товары и длительный срок доставки.

Наш интернет-магазин iCable96.ru будет предоставлять товары по цене на 10–20 % ниже, чем у конкурентов, и осуществлять достав-ку покупателю в течение одного дня.

Наш покупатель — это человек в возрасте от 17 до 40 лет (пол зна-чения не имеет), принадлежащий к среднему классу, пользователь техники Аpple. Найти нашего покупателя можно в социальных се-тях, а также на тематических форумах. Нас он сможет найти в поис-ковых сетях Яндекс и Google.

14


4. Реализация проектаРазмещение сайта планируется на платформе inSales.ru.Данная CMS-система была выбрана из-за удобства в использова-

нии, бесплатного хостинга и невысокой цены за свои услуги.Регистрация домена на сайте reg.ru.Ассортимент для интернет-магазина будет закупаться в Москве

по оптовым ценам.5. Маркетинговый и стратегический планДля продвижения товара будут использованы:1) поисковые сети Яндекс и Google, для этого автор проекта зай-

мется SEO-оптимизацией и закупкой ссылок со сторонних ре-сурсов;

2) социальная сеть Вконтакте (vk.com). Для этого будет размещен пост со ссылкой на сайт, а в дальнейшем создана группа, в ко-торой будет представлен весь ассортимент товара с возможно-стью заказа через данную группу;

3) Яндекс.Директ. Данный вид продвижения может обеспечить сайту хорошую проходимость и получить большое количество заказов.

6. Финансовый план и расчет рентабельности проектаПриводится поквартальный расчет доходов и расходов на откры-

тие бизнеса и оценка точки безубыточности.7. Риски проекта1) Увеличение активности конкурентов. Выход: ведение более агрессивной рекламной политики и поиск

альтернативных способов привлечения клиентов.2) Неблагонадежность поставщиков. Выход: поиск альтернативных поставщиков.3) Экономический кризис Выход: сосредоточение на ходовом товаре, приостановка расши-

рения ассортимента.8. Нормативная база1) Подписание договора с компанией InSales — бесплатно.2) Регистрация статуса «Индивидуальный предприниматель» —

900 рублей.3) Заключение договоров с поставщиками — бесплатно.

15

1.5. Поиск поставщика и доставка товара


Поставщики для интернет-магазинов делятся на два типа:1. Крупные поставщики — производители и крупные дистрибьюто-

ры компаний производителей. Готовы поставлять продукцию только крупными партиями и не специализируются на индивидуальном под-ходе к партнерам, у них есть четкие правила и диапазон цен. К до-стоинствам крупных поставщиков можно отнести широкий выбор то-варов и низкие цены.

2. Мелкие поставщики (перекупщики). Не производят товар, а по-купают у производителей или дистрибьюторов и перепродают. Эта категория поставщиков подходит для интернет-магазинов, которые только начинают свою работу. К достоинствам мелких поставщиков можно отнести то, что с ними можно договориться о более выгодных условиях поставки и оплаты (рассрочка платежа, удобный график по-ставок, небольшие партии и т. д.), чем с крупными производителями.

После того, как мы определимся с тем, какой тип поставщиков нам подходит, можно приступать непосредственно к их поиску. И тут воз-никает вопрос — а с чего начать, где искать поставщиков для интер-нет-магазина?

1.5.1. Поисковые системыПоставщики имеют в интернете официальные сайты с каталогом

продукции, условиями сотрудничества и прочей полезной для ин-тернет-магазина информацией. Владельцу интернет-магазина до-статочно ввести в поисковой системе Яндекс или Google следующие поисковые запросы: «название товара + купить оптом», или «каталог поставщиков», или «справочник предприятий», после чего поисковая система выдаст множество ссылок на различные сайты.

Нам необходимо зафиксировать данные обо всех поставщиках, ко-торые подходят для нашего интернет-магазина (в результате полу-чится не менее 10–20 компаний). Делать это лучше всего в таблице Excel. Эту работу можно поручить фрилансеру, но можно сделать и са-мостоятельно, все зависит от финансовых и временных возможностей.

Таблица в Excel будет содержать следующие данные:1) первая колонка — сайт поставщика (или несколько сайтов);2) вторая колонка — прямая ссылка на каталог продукции постав-

щика;

16


3) третья колонка — контактное лицо поставщика. Здесь фикси-руется номер телефона, адрес электронной почты и время, ког-да можно связаться.

После того, как мы составим список потенциальных поставщиков, производим обзвон. Лучше не писать на электронный адрес, так как по этому адресу, как правило, находятся менеджеры, которые не зани-маются продажами; а прямой звонок в офис компании повысит шансы связаться именно c тем сотрудником, который занимается поставками.

Если мы смогли найти официальный сайт поставщика, то не сто-ит оценивать поставщика по внешнему виду странички в интерне-те. Часто бывает, что у вполне добросовестных поставщиков сайты непримечательные, с шаблонным дизайном. Такие поставщики, как правило, уже имеют достаточное количество клиентов и налажен-ные каналы связи, поэтому сильно не озадачиваются поиском но-вых, а продвижение и разработка современного сайта требует допол-нительных расходов.

1.5.2. Иные источники информации о поставщиках

К таким источникам относятся газеты, журналы, каталоги, близ-кие к вашей тематике. Необходимо купить несколько печатных изда-ний и посмотреть объявления по теме «товар под реализацию», «товар оптом» и т. д. Необходимо взять актуальные для нас издания: напри-мер, мы продаем детские товары, следовательно, нам нужны газеты и журналы, посвященные детским товарам и услугам. В таких изда-ния часто можно увидеть рекламу компаний-поставщиков, особенно тех, которые хотят начать реализовывать продукцию в каком-то кон-кретном регионе, но сами это делать по каким-то причинам не могут, поэтому ищут надежных партнеров, которым будут поставлять товар.

1.5.3. Местные производителиВ каждом городе или регионе обязательно есть какое-то производ-

ство, а для интернет-магазина это, пожалуй, будет товар по самой низкой цене. Найти производителя можно по данным на упаковке товара, где есть его контактные данные. Выбирая в качестве постав-щика производителя, нужно обязательно проверить наличие у него сертификатов на продукцию, иначе, при отсутствии документов, сер-тификация товара будет нашей обязанностью.

17


1.5.4. Выставки

Выставки — это, несомненно, важный способ поиска поставщи-ков. На презентациях, тематических выставках, семинарах, конфе-ренциях размещают свои стенды заводы-производители. Подобные мероприятия хороши тем, что на них собираются компании, кото-рые заинтересованы в поиске клиентов. Поставщики сами предста-вят свой товар и расскажут о достоинствах сотрудничества именно с ними. Здесь же можно оценить товар и обговорить условия по-ставок. Кроме того, в ходе выставки можно узнать массу полезной тематической информации. Как правило, на таких мероприятиях проходят и конференции, где выступают ведущие специалисты от-раслей. Также на выставке можно обзавестись полезными для биз-неса контактами.

Важно и то, что на выставках присутствуют не просто производите-ли товара, а их торговые представители. Это имеет значение для ра-боты интернет-магазина, так как на выставочных стендах работают менеджеры потенциальных поставщиков, и владелец сайта сможет договориться о сотрудничестве не с «офисом», а с конкретным чело-веком. Преимущество работы без посредников позволяет лично об-судить все условия работы, предоставляет возможность получить бо-лее выгодную скидку, обсудить условия поставок и возврата товара, узнать о складах, ассортименте и многом другом. Если нет времени или возможности обсудить все эти вопросы на выставке, то можно до-говориться с представителем поставщика о личной встрече, ведь ме-неджер как никто другой заинтересован в новом оптовом покупате-ле, поэтому он с удовольствием согласится на встречу.

На выставках можно попросить у представителей продающих ком-паний информацию о товаре в печатной форме (каталоги, листовки, этикетки, календари и т. д.) и оформить всем этим офис интернет-ма-газина, что придаст вашей компании большей убедительности в гла-зах покупателей, которые воспользовались услугой самовывоза.

1.5.5. Рынки

На городских товарных рынках тоже можно найти поставщиков для интернет-магазина, но этот вариант, как правило, актуален толь-ко для крупных городов, с населением более одного миллиона жите-

18


лей. Для ориентации «цена — предложение» желательно посетить рынок, посмотреть товар, попросить контакты.

1.5.6. Поставщики конкурентов

Интернет-магазины стараются всевозможными способами скрыть данные o своих поставщиках, ведь никому не хочется получать до-полнительных конкурентов, но, фактически, в действительности по-лучить контактную информацию поставщиков просто: достаточно по-просить у конкурентного интернет-магазина сертификаты на товар, где есть печать поставщика с названием компании.

Этот способ поиска поставщика может показаться самым заман-чивым для начинающего интернет-магазина, ведь если поставщик уже работает с другими сайтами, значит, он проверенный, надежный и предлагает хорошие условия сотрудничества. Но при этом стоит заду-маться и о том, какое конкурентное преимущество мы будем иметь, вы-ходя на рынок с тем же поставщиком, что и другие интернет-магазины.

Даже выбрав тех же поставщиков, что и у наших конкурентов, мы не будем уверены, что они предложат нам одинаковые условия со-трудничества. В основном это касается стоимости товара, мы не смо-жем добиться тех же цен, что и у наших конкурентов. Скорее всего, поставщики предложат нам более высокую цену и более жесткие ус-ловия сотрудничества, чем у наших конкурентов.

В случае, если мы сможем получить одинаковые условия сотруд-ничества и обеспечить такие же цены на товар, что и у наших кон-курентов, то нам необходимо будет предпринимать больше усилий по созданию более качественного сервиса для повышения конкурен-тоспобности.

1.5.7. Зарубежные производители и поставщики

Можно найти производителя и за пределами России, но в этом слу-чае нам понадобится хорошее знание языка. Кроме того, возникнут сложности с прохождением таможни и необходимость уплаты тамо-женной пошлины, а некоторые категории товара облагаются высо-ким налогом.

Зарубежных поставщиков трудно уговорить на сотрудничество с российской компанией. Иностранные фирмы наслышаны о недо-

19

1.6. Создание сайта

бросовестных способах ведения бизнеса российскими предпринима-телями, поэтому стараются обходить стороной партнеров из России. Не стоит обольщаться и думать, что, оставив сообщения на нескольких зарубежных форумах, мы сразу получим массу предложений от ино-странных производителей. Существует высокая вероятность, что мы получим ответ от продавцов некачественного товара.

Если мы все-таки склоняемся к выбору зарубежного поставщика, тогда нам придется посетить его лично, что, к сожалению, может по-зволить себе не каждый начинающий владелец интернет-магазина.

Проблемы с зарубежными поставщиками:1) владение языком. Большая доля поставщиков — из Китая,

а найти хорошего переводчика довольно сложно, не говоря уже о том, что его нужно будет взять с собой на личную встречу с ки-тайскими поставщиками;

2) небольшой объем закупок. Некоторые поставщики устанавли-вают высокий минимальный объем закупок, что защищает их от недобросовестных покупателей;

3) проблемы с доставкой. Как правило, с вывозом товара из страны поставщика не возникает никаких проблем, а вот ввоз на тер-риторию России бывает достаточно проблематичным. Владель-цу интернет-магазина, выбравшему зарубежного поставщика, придется столкнуться с такими процедурами как уплата тамо-женной пошлины, растаможивание товара, отгрузка, доставка до склада.

Но, несмотря на все трудности, рано или поздно зарубежные по-ставщики становятся одними из лучших для интернет-магазинов. Главное достоинство таких закупок — это низкие цены, которые ос-вобождены от наценок компаний-перекупщиков [6].


Теперь необходимо создать инструмент нашего бизнеса, благода-ря которому мы и будем продавать товары.

Сегодня для создания своего интернет-магазина не обязательно обладать знанием языков программирования. Пятнадцать лет на-зад, в эпоху зарождения первых интернет-магазинов, для их разра-

20


ботки приходилось писать программный код для каждого фрагмента сайта. Это занимало огромное количество времени, а создать такой сайт мог только высококвалифицированный программист. Сейчас же на рынке большое количество готовых решений по созданию сайта без навыков кодинга. Любой начинающий предприниматель может воспользоваться уже готовой платформой для создания интернет-ма-газина. Все, что ему нужно будет сделать, — это выбрать дизайн сай-та и добавить товар.

Такие готовые платформы существенно сокращают время созда-ния сайта, так как движок платформы сам прописывает код, создает бэк-офис и делает большую часть работы за пользователя.

Однако использование подобного сервиса не даст нам полностью готовый к работе интернет-магазин. Нам нужно будет выбрать хо-стинг и домен для нашего сайта, изменить уже готовый дизайн под стилистику нашего магазина и постоянно заниматься улучшением и доработкой сайта.

1.6.1. Выбор хостинга

Хостингом называются услуги по предоставлению места для хра-нения нашего сайта в сети Интернет и обеспечению доступа к нему. Существует несколько видов хостинга.

Виртуальный хостингЭто выделяемый специально для нас, в большинстве случаев, огра-

ниченный объем ресурсов, которые мы можем использовать по за-данным владельцем хостинга правилам. Владелец хостинга жестко регламентирует возможности применения предлагаемых им услуг: он может ограничивать максимальный объем хранимых нами фай-лов, количество почтовых ящиков, создаваемых нами, а также ко-личество сайтов, которые мы можем разместить на нем. Кроме того, владелец хостинга выделяет нам место на общем диске, где «по со-седству» с нами, в рамках одного виртуального хостинга, могут нахо-диться десятки и даже сотни других сайтов.

Виртуальный выделенный сервер (VPS)В данном случае хостер предоставляет нам возможность создать

для себя раздел на жестком диске с собственными правилами управ-

21


ления и без каких-либо искусственных ограничений, но, в то же вре-мя, на жестком диске могут по-прежнему располагаться другие сай-ты, но уже в меньшем количестве (обычно до 5–10 сайтов).

индивидуальный серверЭто полностью автономная система, ограниченная только возмож-

ностями аппаратуры и рассчитанная на сильные нагрузки. В данном варианте арендуемый сервер будет использоваться только нами. Этот вид хостинга подходит для сайтов с большим ассортиментом продук-ции и большим количеством посещений.

Какой из предложенных вариантов выбрать? Для начала, как наи-более дешевый, понятный и удобный в пользовании, нам подойдет первый вариант — обычный виртуальный хостинг. Основное преи-мущество — его не надо настраивать, и он полностью готов к работе и размещению на нем сайта нашего магазина. Из обязательных ус-ловий набора сервисов: поддержка PHP, баз данных MySQL, возмож-ность делать бекапы (копии нашего сайта на случай повреждения или сбоев в работе), доступная и отзывчивая техническая поддержка.

Вот пример того, как выглядит готовый к работе виртуальный хо-стинг: это административная панель, которая ведет на соответству-ющие разделы управления функциями хостинга (рис. 4).

Внутри хостинг напоминает проводник Windows — наглядно от-ражены папки, в которых хранятся файлы сайта. Все управление файлами возможно как через сайт нашего хостинга, так и через спе-циальные программы, которые называются FTP-клиентами. Самый распространенный и наиболее удобный клиент — FileZilla (рис. 5).

1.6.2. Облачные решения (SaaS-системы) без установки на хостинг

SaaS (англ. software as a service — программное обеспечение как услуга) — бизнес-модель продажи и использования программного обеспечения, при которой поставщик разрабатывает веб-приложение и самостоятельно управляет им, предоставляя заказчику доступ к про-граммному обеспечению через интернет.

Такие системы очень удобны тем, что не надо тратить много вре-мени и денег на разработку программного обеспечения.

22


Рис. 4. Административная панель виртуального хостинга

Рис. 5. Главное окно FTP клиента FileZilla

23


Если нам нужно создать свой сайт, необязательно нанимать коман-ду программистов, можно воспользоваться услугами облачных реше-ний; для этого необходимо будет добавить нужный контент и расста-вить все так, как мы считаем правильным. Интерфейс Saas-систем интуитивно понятен и рассчитан на пользователей, не обладающих знанием программирования. С пользователя взымается плата толь-ко за ежемесячное использование данного программного обеспече-ния, а также за дополнительно подключаемые функции.

Рассмотрим примеры наиболее популярных облачных решений.

InSalesУникальное для российского рынка «облачное решение» (когда

скрипт и сам движок интернет-магазина расположены на хостинге обслуживающей компании-продавца). Удобство и простота исполь-зования в том, что нам достаточно зарегистрироваться и начать до-бавлять свои товары в систему. Система очень сильно расширилась за последний год работы и добавила в список функций множество возможностей.

ShopiumАналогичное украинское решение, но с гораздо более скромными

возможностями. Оптимально подходит для работы небольших ин-тернет-магазинов.

GollosЕще одно легкое и удобное в использовании решение.Из общих плюсов подобных систем можно выделить простоту управ-

ления и полноценную техническую поддержку от разработчика, по-этому все скрипты, коды нашего магазина будут находиться на хо-стинге разработчика этих решений, и покупать отдельный хостинг в данном случае не нужно.

Минусом использования «облачных решений» для CMS являет-ся то, что в будущем при расширении бизнеса в 90 % случаев при-ходится отказываться от услуг таких компаний и переключаться на использование полноценных систем управления интернет-ма-газинами.

Из всех представленных в списке облачных систем можно рекомен-довать систему InSales: здесь разработчики предоставляют бесплат-

24


ный пробный период на 14 дней без каких-либо обязательств. За это время можно полноценно оценить качество и функционал системы.

1.6.3. CMS для интернет-магазина

Что такое CMS? Это программа, которая будет помогать нам в управлении товарным ассортиментом, ценами, описаниями и фо-тографиями. В CMS все представлено в виде удобного и понятного интерфейса, что делает их самыми распространенными системами для управления магазинами.

На этой системе работают большинство интернет-магазинов в мире. Что представляет из себя обычная система для управления магази-ном? Набор программных файлов, разложенных по папкам и связан-ных между собой выполнением различных скриптов и функций. Обя-зательное условие работы каждой CMS — наличие созданной для нее базы данных, в которой будет храниться информация о товарах, их описаниях, ценах и фотографиях.

Каждую CMS для интернет-магазина необходимо сначала зака-чать на хостинг и только после этого, перейдя по указанной индиви-дуально для каждой CMS ссылке, установить полноценно работаю-щую систему.

Итак, перейдем к рассмотрению программ, которые предлагает рынок на данный момент.

WebAsyst Shop-scriptЭто несомненный лидер среди систем по управлению сайтами ин-

тернет-магазинов. Очень широкие стандартные возможности, в том числе интеграция с 1 С: Бухгалтерия, различные способы приема ва-лют, в том числе от зарубежных покупателей, и графически настра-иваемые шаблоны и интерфейс. Широкий выбор дополнительных модулей на любые запросы бизнеса, которые написаны сторонними разработчиками.

Преимущества: относительная простота управления, широкий выбор стандартных функций, возможность расширения системы под нужды бизнеса.

Недостатки: при обновлении версии системы перезаписывается программный код, вследствие чего могут быть утеряны разработки, сделанные пользователем (особенность СМS).

25


1 с-битриксВторая по величине и масштабам продаж система, предлагающая

услуги по работе с интернет-магазином. Помимо известного бренда мы покупаем довольно объемную и требовательную к ресурсам хо-стинга систему.

Преимущества: наличие официально продаваемых и готовых про-граммных решений по доработке функционала системы, почти без-граничные возможности для расширения в будущем.

Недостатки: сложность для первоначального изучения; требо-вательность к ресурсам хостинга; ввиду особенностей программного кода существуют сложности при поиске разработчиков и программи-стов для этой системы, а значит, предвидится и высокая стоимость технического обслуживания системы.

VamshopИзвестная в узких кругах разработчиков CMS, в которой есть весь

необходимый набор для запуска среднестатистического интернет-ма-газина. В наличии имеются все необходимые инструменты для ра-боты с товаром, описаниями и фотографиями. Имеется встроенный и довольно редкий автоматизированный инструмент, благодаря ко-торому мы можем выплачивать вознаграждения сторонним рекла-модателям по факту продажи наших товаров.

Преимущества: очень простая и легкая для понимания CMS.Недостатки: небольшой набор готовых для расширения модулей.

OpenCartОчень простая в использовании и вполне расширяемая бесплат-

ная система для управления интернет-магазином. Имеется доволь-но внушительный выбор готовых шаблонов, модулей и дополнений к этой CMS.

Преимущества: бесплатное использование, удобство пользования, широкий выбор дополнительных инструментов.

Недостатки: относительная ограниченность в возможности рас-ширений функционала (зависит от специфики требований).

Помимо этого списка можно найти еще порядка двадцати готовых решений, которые нам также могут подойти.

26


1.6.4. Выбор домена

Домен — это адрес нашего сайта в сети Интернет, то, что все вво-дят в строку браузера, например, www.shop.com. В данном случае, shop.com и будет доменом, т. к. www — это приставка для всех сай-тов. Довольно кропотливая, но в то же время интересная задача, суть которой сводится к выбору имени для сайта будущего интернет-ма-газина. Итак, первое, чем нам надо запастись — открытым окном в программе «Блокнот» и страницей проверки доступности домена для регистрации. Окно в блокноте поможет нам не забыть понравив-шиеся для регистрации домены, а довольно функциональная форма подбора доменов от Рег.ру позволит нам не только проверить желае-мые домены на доступность, но и покажет их занятость в других до-менных зонах (.com, .net и т. д.).

Наиболее подходящие доменные зоны, в которых можно приобре-сти доменные имена — .ru, .com, .net. Существует мнение, что поиско-вые сети отдают им большее предпочтение, нежели доменам в весьма редких зонах типа .biz, .pro и прочие. Хотелось бы внести важное уточ-нение по модной сегодня доменной зоне .рф и регистрируемых в ней доменах, которые можно писать русскими буквами. Данные домены не должны использоваться в качестве главных и основных доменов для интернет-магазина. Это связано с особенностями распознавания компьютерами русских букв, и почтовый адрес в формате «кон-сультант@подарки.рф» будет выглядеть как «xn —80atdhccwjcf4h@xn —80ahnhrfk.xn — p1ai», а почтовые программы будут хорошо по-нимать адреса почты только в этом формате. Именно поэтому реко-мендуется использовать домены в зоне .рф только в качестве допол-нений к доменам в зонах .ru, .com или .net.

Несколько простых правил, которыми можно руководствоваться при подборе домена:

1. Простота слов. Подбираем слова, в которых отсутствует двоя-кое толкование букв. Например, домен www.cvetochki.ru имеет кра-сивое звучание в русском произношении, но может вызвать лишние вопросы у будущих пользователей o написании этого слова англий-скими буквами. В данном случае наиболее оптимальным вариантом будет написание домена на английском языке flowers.ru. Наиболее распространенный способ проверки простоты домена — диктовка его по телефону нашему собеседнику. Идеальный вариант — если наш

27


собеседник не задаст ни одного уточняющего вопроса и с первого раза поймет адрес сайта.

2. Ассоциативные слова. Подбираем слова по ассоциативным при-знакам. Это значит, что название домена должно быстро и нагляд-но вызывать его сравнение с каким-либо предметом или отраслью, с которой связан вид бизнеса. Удачные примеры, которые успешно передают смысл продаж: audiomania.ru (интернет-магазин звуко-вого оборудования), shantea.ru (интернет-магазин чая), in-flora.com (цветочный интернет-магазин). Менее удачные примеры, которые не вызывают ассоциации и не оставляют в сознании название сай-та: amulet-td.ru (оказывается, магазин торгует постельным бельем), neonst.ru (магазин бытовой техники), nuzay.ru (магазин по продаже детских товаров).

3. Домен-бренд. Делая в самом начале бизнеса ставку на домен-бренд, мы должны располагать отличными ресурсами (в первую оче-редь, финансовыми) для того, чтобы сделать его узнаваемым. В таком случае ассоциативность нам совершенно ни к чему. Все ассоциации, которые создаются для лучшего запоминания и понимания, будут пе-рекрыты повсеместной рекламой с упоминанием бренда. В таком до-мене должно быть все: креативность, краткость и ясность, звучность, простота написания и запоминания на слух и визуально. Среди са-мых ярких примеров: ozon.ru, enter.ru, otto.ru, quelle.ru, sapato.ru, darom.ru и другие. Посмотрев на список крупных интернет-магази-нов 2016 года, мы увидим, какие домены могут стать узнаваемыми брендами.

Очень часто бывает так, что понравившийся домен уже занят или выкуплен сквоттерами (скупщиками доменов для их последующей пе-репродажи). В данном случае есть два варианта решения проблемы.

Первый — мы готовы купить понравившийся нам домен у его те-кущего владельца. Такая операция таит в себе опасность — прода-вец может нас обмануть и не выполнить договорные обязательства. Единственной подстраховкой в данном случае может выступить га-рант нашей сделки (третья и независимая сторона), которому доверя-ем и мы, и продавец домена. В данном случае мы переводим гаранту сумму покупки и ждем, пока продавец полностью переоформит пра-ва на владение доменом на нас. После подтверждения всех необхо-димых процедур гарант переведет ему сумму сделки.

28


Второй — в случае занятости понравившегося нам домена можно попробовать «разбавить» его приставками, которые не исказят смысл домена, но сделают его доступным для регистрации.

как можно «разбавлять» доменПриставками в конце, например: shop24.ru, shop-24.ru. Цифра 24

указывает на постоянную доступность продавца к продаже того или иного товара.

Приставками в конце слова, например: shopos.ru, shopoz.ru. До-вольно мягкая и нейтральная приставка, не имеющая никакой смыс-ловой нагрузки, но освобождающая почти 90 % всех занятых доменов.

Приставками в начале слова, например: woshop.ru. Неплохой при-мер из личной практики — домен wotea.ru. По-аналогии можно по-пробовать использовать приставки so, a.

Приставкой the в начале домена. Довольно распространенный при-мер разбавления доменов на Западе и в Европе.

Приставкой 100 или 1000 в начале домена. Очень часто магазины любят называться в стиле «100buketov.ru» или «1000instrumentov.ru». Такой вариант является менее удачным по сравнению с предыдущи-ми формами, т. к. увеличивает длину домена.

Приставками, обозначающими регион продаж интернет-магази-на. Например, shop77.ru или shop52.ru, означающими привязку ма-газина к местоположению (Москва, Нижний Новгород).

как не стоит «разбавлять домен»Не стоит делать домен вида 8345340.ru. Использование цифр толь-

ко усложняет восприятие названия. Исключением являются названия по типу 123.ru, 007.ru, 777.ru и прочие «красивые» сочетания цифр.

Не стоит употреблять в домене более двух связанных между собой слов. Конструкции типа samiyeluchshiecveti.ru практически невоз-можно запомнить, и уж тем более правильно воспроизвести.

Нельзя использовать в названии домена более одного дефиса, раз-деляющего его на части.

1.6.5. Дизайн

Один из самых важных моментов — логотип, который является лицом нашей компании и интернет-магазина. Принимайте работу только тогда, когда сами поймете, что логотип как нельзя лучше под-

29


ходит под ваш бизнес. Не пытайтесь сделать логотип как у конкурен-тов — включайте фантазию и ищите то, что вам может понравиться, например, на биржах картинок. Пользоваться сервисом очень про-сто: необходимо осуществить перевод слов по выбранной теме на ан-глийский язык и осуществить поиск по запросу. Результаты поиска подскажут дизайнеру (при условии, что его запас идей уже исчерпан) верное направление.

Стандартный набор макетов дизайна для интернет-магазина со-стоит из 5 и более отрисованных в программе Adobe Photoshop стра-ниц. Минимальный набор страниц, которые мы должны получить в результате, составляют следующие:

· главная страница;· страница категории товаров;· страница товара;· информационная страница (универсальный шаблон);· единая страница оформления заказа.Каждый изменяющийся элемент текущей страницы должен иметь

добавленное дизайнером пояснение с указанием эффектов и измене-ний конкретного элемента.

Считается крайне негативным применение в дизайне интернет-магазина более 3 основных цветов, которые будут использоваться в оформлении заголовков, ссылок, текстов, фонов и прочих элементов. Обилие цветовой гаммы ухудшает восприятие информации на сай-те, что влечет за собой отсутствие покупательского интереса и спро-са пользователя сайта.

Наиболее удачным считается дизайн, в котором отсутствует избы-точность мелких элементов, ненужных иконок и картинок. Грамотный дизайнер должен суметь расположить ключевые блоки таким обра-зом, чтобы любой посетитель без лишних подсказок понимал прин-цип пользования информацией в любом элементе и блоке.

Наиболее детальной проработки требует страница c информаци-ей o товаре, где каждый клиент должен максимально получить дан-ные o фирме, товаре и способах его покупки и доставки.

Дизайн должен быть максимально ясным и понятным. В качестве тестов можете попросить оценить макеты оформления сайта ваших коллег по будущему цеху или представителей вашей потенциальной покупательской аудитории.

30


1.6.6. Сопровождение сайта

C начала работы нашего интернет-магазина и c появлением пер-вых покупателей, как правило, возникает желание изменить сайт. И это правильно — заменять устаревшие фрагменты сайта на бо-лее совершенные, добавлять страницы с вопросами и комментария-ми пользователей, удалять товары, которые не пользуются спросом и т. п. Именно поэтому сразу же после верстки отрисованных маке-тов (процесс, когда отрисованные в Photoshop картинки переносят на CMS) рекомендуем изменить некоторые функции, которые идут в стандартном наборе выбранной нами системы. Все эти изменения имеют ключевые цели: упростить работу с сайтом и повысить коли-чество продаж через него. Итак, предлагаем список работ, которые имеет смысл выполнить при согласовании дизайна сайта перед окон-чательным запуском.

1. Упростите оформление заказа через корзину. В своем большин-стве все CMS (как платные, так и бесплатные) предлагают покупа-телю оформление заказа, растянутое на три и более страниц со мно-жеством полей и форм для ввода и выбора информации. Лаконичная и простая форма оформления облегчит посетителям процесс заказа и поможет им быстрее стать нашими клиентами.

2. Доработайте функцию, которая позволит предлагать допол-нительные товары со страниц сайта или из корзины. Эта функция стимулирует покупателей заказывать дополнительные товары при условии их уникального предложения и отлично повышает сумму среднего чека.

3. Закажите интеграцию в интернет-магазин функции онлайн-кон-сультанта, который позволит клиентам связаться с нами через интер-нет и задать все интересующие вопросы. Наиболее удобный, функци-ональный и бесплатный инструмент — консультант от Mibew.

4. Проверьте возможности системы и попросите разработчиков ин-тегрировать именно те функции, которые необходимы. Возможно, в стандартной сборке CMS будут отсутствовать какие-либо способы приема денег от посетителей.

5. Также решите аналогичный вопрос, касающийся способов до-ставки, которые предлагаются покупателю при оформлении заказа.

На первых порах наиболее удачным инструментом привлечения клиентов в интернет-магазин могут стать скидки, которые клиен-

31

1.7. Логистика

ты могут получить благодаря вводу кода подарочных купонов. Сами коды купонов можно раздавать на рекламных площадках или дру-гим способом, в зависимости от выбранной рекламной кампании [7].

1.7. Логистика

На начальном этапе деятельности рекомендуем организовывать и осуществлять доставку без постороннего участия, поскольку боль-шой объем заказов, как правило, отсутствует, и отвозить заказ само-стоятельно не составит особого труда.

Выполняя доставку самостоятельно, мы получаем опыт по обеспе-чению эффективности интернет-продаж.

В случае, когда у нас с каждого заказа получается прибыль в одну тысячу рублей и более, можно задуматься o курьерской доставке.

При осуществлении доставки не следует затягивать сроки, в про-тивном случае у нас не получится составить конкуренцию большим и неповоротливым магазинам, в которых сроки доставки доходят до недели. Многие люди готовы оплачивать срочную доставку, если такая возможность существует. Наиболее правильным будет выпол-нить доставку в день заказа или на следующий день после заказа.

Достаточно сложно доставлять заказ в тот же день, но можно пере-дать процесс доставки на аутсорсинг и попытаться найти компанию, которая сможет работать в необходимых для нас условиях.

1.7.1. Аутсорсинг для интернет-магазинов

Аутсорсинговые компании предлагают сегодня большой перечень услуг, основные из которых — это хранение и доставка нашего товара клиенту. Таким образом, мы передаем им товар на хранение, и к ука-занному сроку они доставляют товар клиенту.

Эта схема имеет свои недостатки. Для передачи товара аутсорсинго-вой компании его необходимо вначале приобрести, что требует опреде-ленных вложений. За хранение аутсорсинговая компания берет опла-ту, но во многих случаях она будет меньше, чем оплата услуг курьера.

Кассовые чеки и накладные делает аутсорсинговая компания. От нас требуется только пересылать заказ в компанию.

32


Существуют компании, предоставляющие своего менеджера, кото-рый будет принимать звонки от наших клиентов. Нашими задача-ми останутся своевременное пополнение склада товаром и реклама нашего товара. Использование работы менеджера дает нам свободу от выполнения некоторых операций и практически пассивный доход.

1.7.2. Работа с Почтой России, EMS и транспортные компании

Можно доставлять товар покупателю наложенным платежом при помощи Почты России. Для этого определенным образом заполняют-ся необходимые документы, далее производится оплата самой достав-ки и страховки товара, а также указывается его полная стоимость, которую должен будет оплатить заказчик.

Заработанные от продажи деньги можно получить примерно че-рез один или полтора месяца, то есть после осуществления доставки.

Оплата заказа происходит сразу же после получения клиентом то-вара на почте. Сама почта за свои услуги взымает комиссию 3–10 % от полной стоимости товара.

В случае отправки дорогостоящего товара или готовности клиен-та заплатить за срочную доставку можно воспользоваться услугами транспортной компании [8].

1.8. Реклама и продвижение сайта

1.8.1. Реклама сайта

Существуют несколько видов рекламы в поисковых системах:

контекстная рекламаЭто текстовое рекламное объявление в поисковых системах (та-

ких, как Яндекс, Google, Mail, Rambler), а также на сайтах их пар-тнеров (рис. 6).

33


Рис. 6. Пример контекстной рекламы продажи телефонов в поисковой системе Яндекс

Преимущества данной рекламы:а) мгновенный эффект — организуем рекламную кампанию, опла-

чиваем, и буквально через 1–2 дня наша реклама появляется в поисковой системе для всех заинтересованных пользователей;

б) фильтрация — настраиваем для показа объявлений только те регионы, в которых работаем мы или наше представитель-ство (конкретный город), кроме того, можем ограничить пока-зы по времени и по ключевым фразам (то есть показывать объ-явление только тем пользователям, которые в поисковой строке ввели определенное ключевое слово, например, «тонометры от-ечественного производства»);

в) как рекламодатели мы оплачиваем только клик — то есть день-ги с нашего счета списываются только в том случае, если поль-зователь перешел на наш сайт с рекламного объявления. Таким образом, наше объявление совершенно бесплатно появляется в нужное время в нужных регионах и только для тех, кто ищет наш товар, а оплата за такую услугу взимается только если поль-зователи заинтересовались нашим предложением и, кликнув, перешли на наш сайт.

34


Недостаток: высокая цена клика при наличии сильной конкурен-ции. В этом случае плата за клик может оказаться слишком большой и невыгодной для нас.

Мкб — медийно-контекстный баннерНа рис. 7 приведен медийно-контекстный баннер, сочетающий

в себе преимущества контекстной и медийной рекламы. Данный вид продвижения может оказаться полезным в случаях, когда мы хо-тим повысить популярность бренда, добиться устойчивой ассоциации определенной тематики с нашим брендом или провести рекламную акцию для целевой аудитории. Этот баннер, как и рекламные объ-явления, появляется в ответ на поисковые запросы пользователей, и при клике на него пользователи переходят на наш сайт.

Рис. 7. Пример медийно-контекстного баннера

Преимущества:а) баннер, в отличие от обычных объявлений, которые имеют еди-

ный формат, может быть ярким, креативным, динамичным;б) медийно-контекстный баннер является единственным реклам-

ным баннером на странице с результатами поиска, что выгод-но выделяет его на фоне других объявлений;

35


в) можно настроить показ рекламного баннера по определенному региону;

г) можно ограничить количество показов МКБ одному пользователю;д) в МКБ вы можете указать контактные данные вашей компа-

нии, например, номер телефона, что запрещено в контекстной рекламе.

Недостатки:а) оплата при этом способе продвижения интернет-магазина взи-

мается за показы, гарантировать переход на ваш сайт данный вид рекламы не может;

б) спрогнозировать бюджет оказывается сложно (можно приобрести 10 000 показов, но они могут быть израсходованы как за 2 неде-ли, так и за месяц).

реклама в тематических и региональных ресурсахДля некоторых товаров этот способ может быть достаточно эффек-

тивным, особенно в случаях, когда спрос на товар еще не сформи-рован. Например, мы продаем новую детскую развивающую игру, о которой никто не знает. Было бы эффективно разместить свою ре-кламу на форумах молодых мам — это целевая аудитория, которая наверняка проводит большую часть времени в интернете на подоб-ных ресурсах. Если наш товар широкого потребления, распространя-ется по выгодной цене, и мы работаем только в своем городе, то мож-но разместить рекламу на местном региональном портале, который многие жители города регулярно посещают, чтобы почитать или об-судить местные новости и проблемы.

Площадками для такого вида продвижения могут выступать раз-личные блоги, специализированные форумы, городские и региональ-ные порталы, электронные СМИ.

специализированная e-mail рассылкаСразу оговоримся, что это не стандартная спам-рассылка. Необхо-

димо подумать, у какого ресурса может быть база e-mail адресов на-ших потенциальных клиентов. Например, мы продаем запчасти для определенной марки автомобиля, и в интернете есть соответствую-щий специализированный форум этого автомобиля, в котором есть отдельный раздел, посвященный ремонту. Мы можем предложить владельцам этого форума разослать наше предложение только тем,

36


кто когда-либо обращался к этому разделу. Это не будет раздража-ющей рекламой для них. Более того, это может быть как рекоменда-ция от их любимого форума с темой «Только для участников нашего форума скидка на запчасти 5 % в интернет-магазине N».

нестандартная рекламаМожно пойти по пути яркого пиара и постараться запомниться лю-

дям необычной, креативной рекламой, но насколько это сможет по-влиять на рост наших продаж?

1.8.2. Поисковое продвижение интернет-магазина

Это продвижение сайта интернет-магазина в поисковых системах. Рекомендуется использовать такую рекламу в том случае, когда наш клиент знает о нашем товаре и ищет его в поисковых системах, или не знает о нас, как o фирме, но знает о товарах-аналогах.

SEO — продвижение сайта в поисковых системахЭто поисковое продвижение интернет-магазина. Продвижение

в этом случае заключается в том, что наш сайт по определенным клю-чевым запросам выходит на лидирующие позиции в результатах по-иска (например, попадает в первую десятку) (рис. 8).

Преимущества:а) при правильном продвижении сайта этот способ обойдется де-

шевле, чем контекстная реклама, при условии долгосрочного продвижения (когда речь идет не о разовой рекламной акции);

б) при данном виде рекламы мы не платим за клики (в резуль-татах поиска на нас могут кликнуть бесконечно много раз), мы тратим только определенные средства на оптимизацию.

Примечание: многие SEO-компании сейчас переходят на систему оплаты не за вывод сайта по определенным ключевым фразам в Топ, а именно за количество переходов.

Недостатки:а) длительный срок достижения результатов. Для вывода на ли-

дирующие позиции требуется 3–4 месяца (так заявляют многие SEO-компании), а если сайт новый, то времени потребуется еще больше;

37


б) риск неудачи — гарантировать нам Топ-10 не может ни один подрядчик;

в) оптимизация сайтов наших конкурентов (если хотя бы 11 сайтов занимаются поисковой оптимизацией в одном городе по опреде-ленной ключевой фразе, то очевидно, что один из них не войдет в Топ-10 и не отобразится на первой странице);

г) алгоритм поисковой системы может поменяться без предупреж-дения;

д) смена ключевых фраз или их дополнение (например, мы ста-ли продавать новые товары), как правило, занимает столько же времени, сколько и вывод сайта в Топ-10.

Рис. 8. Пример SEO-оптимизации сайта в поисковой системе Яндекс

38


Продвижение через системы поиска и подбора товаровТоварные площадки — это площадки, которые служат для выбора

и сравнения товаров (рис. 9). Наиболее распространенные площадки: http://market.yandex.ru, http://torg.mail.ru, http://price.ru, http://tyndex.ru, http://gorbushka.ru, http://yourmart.ru, http://moymarket.ru и т. д. Вот пример того, как Яндекс показывает необходимый товар на Мар-кете (рис. 9).

Рис. 9. Пример продвижения товара через Яндекс.Маркет

Как правило, мы платим за переход посетителя на наш сайт, хотя есть возможность разместить товар с фиксированной оплатой. Од-ним из плюсов такой раскрутки интернет-магазина является то, что к сайтам, размещающимся на подобных площадках, пользователи относятся достаточно лояльно и проявляют к ним больше доверия.

39


Продвижение в социальных сетяхСегодня огромная часть интернет-аудитории проводит свое время

в социальных сетях. Многие пользователи используют их не только как ресурс для развлечения и общения, но и как источник для полу-чения информации. Они подписываются на новости различных ме-диа- и тематических групп. Социальная сеть — это как специализи-рованный срез интернета со своим особым миром. В нем также есть новости, блоги, форумы, сообщества. Предлагаем несколько способов продвижения товара:

1. Использование группы. Можно создать свою группу, наполнить ее товарами, подробно рассказать о преимуществах товара, о нашей системе работы и пригласить в нее целевую аудиторию.

2. Рекламное объявление. Реклама в социальных сетях самая гибко настраиваемая, потому что социальные сети знают о своих пользовате-лях гораздо больше, чем поисковые системы. Они знают практически все, что позволяет четко выделить целевую аудиторию из общей массы.

Рис. 10. Рекламные объявления в социальной сети

40


На рис. 10 приведен пример рекламного объявления в социаль-ной сети.

На сегодняшний день показатель отклика на рекламные объявле-ния в социальных сетях в разы меньше, чем в поисковых системах. Это объясняется тем, что чаще пользователь просто не замечает ее, так как сосредоточен на изучении основного содержания социаль-ной сети (страницы других пользователей, фотографии, аудио- и ви-деофайлы).

раскрутка интернет-магазина через сайты «групоны»«Групоны» — это сайты с системой коллективных скидок, которые

предоставляются, если ими заинтересовалось еще некоторое коли-чество людей, которые также хотят получить эти скидки. Для полу-чения скидок нужно купить на сайте купон, распечатать и предъя-вить продавцу.

Рис. 11. Продвижение через сайт-«групон»

Если у нас есть товар, на который мы можем сделать хорошую скид-ку, стоит рассмотреть этот способ продвижения интернет-магазина.

Как правило, «групоны» берут от 20 до 50 % от оборота. Что мы по-лучаем? Во-первых, они помогают быстро заявить о нашем интернет-

41


магазине широкой аудитории. Во-вторых, они позволяют в краткие сроки собрать базу потенциальных клиентов, которым впоследствии мы можем рассылать другие выгодные предложения напрямую. Мы можем регулярно пользоваться услугами таких сайтов. Их большое количество, вот некоторые из них: http://biglion.ru, http://kupikupon.ru, http://groupon.ru, http://vigoda.ru и т. д.

На рис. 11 показан пример того, как работает сайт-«групон».

Продвижение через партнерские программыПартнерство может быть взаимным, когда и мы, и наш партнер ре-

комендуют друг друга своим клиентам. В этом случае такое сотруд-ничество нам может обойтись совершенно бесплатно. Но для этого и нам, и нашим партнерам надо иметь хорошую клиентскую базу.

Путей продвижения и рекламы интернет-магазина много, нуж-но использовать различные, комбинировать их, отслеживать эф-фективность. Чтобы определить, какой из методов наиболее эф-фективен, можно воспользоваться системами по сбору статистики и веб-аналитики: Яндекс.Метрика, Google Analytics или любой дру-гой сервис веб-аналитики [9].

42

2. разработка веб-приложений для организации электронного

бизнеса

Введение

В этой части учебного пособия будут изучены основы техно-логии по созданию веб-сайтов ASP.Net, процесс написания разметки страницы на языке HTML, использование техно-

логии CSS для стилизации веб-страниц, работа с элементами управ-ления, валидация ввода данных, работа с клиентскими скриптами и использование ajax-расширений, использование баз данных при создании веб-приложений. Детально будет рассмотрен процесс соз-дания интернет-магазина на основе системы управления контентом.

2.1. Структура HTML-документа. Форматирование текста

1. Открываем среду разработки Visual Studio и создаем новый про-ект (Файл — Создать — Проект).

2. В левой части окна выбираем шаблон «Веб». В средней колонке выбираем пункт «Пустое веб-приложение ASP.Net».

3. В нижней части окна задаем имя проекта и нажимаем кнопку «ОК» (рис. 12).

4. Создаем первую страницу проекта. Для этого нажимаем правой кнопкой мыши на название проекта (WebApplication1). Выби-раем пункты «Добавить — Создать элемент».

43


Рис. 12. Окно «Создать проект»

5. В появившейся форме выбираем пункт «HTML-страница» и на-жимаем кнопку «Добавить».

6. В созданном документе уже присутствует некоторый HTML-код. Он представляет собой структуру любой HTML-страницы. HTML-страница имеет следующую структуру:

<!DOCTYPEhtmlPUBLIC“-//W3C//DTD XHTML1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title></title> </head> <body>

</body> </html>

Тег DOCTYPE используется для указания типа HTML-документа (document type definition). Типы документов раз-личаются в зависимости от версии HTML, которая исполь-

44

2. Разработка веб-приложений для организации электронного бизнеса

зуется в документе. Указание пути к файлу типа документа можно опустить, оно не является обязательным.

Тег <html> определяет начало документа. В нем находятся два раздела: <head> (заголовок документа) и <body> (тело до-кумента).

Раздел <head> содержит тег <title>, который определяет за-головок веб-страницы. Также в данном разделе размещаются ссылки на файлы оформления страницы (CSS-файлы), ссыл-ки на скрипты, а также тег <meta>, в котором размещают-ся ключевые слова, описание, кодировка страницы и т. д.

7. Добавляем заголовок страницы: <title>Главная страницы сайта</title>8. Добавляем внутри тела страницы (тег <body>) один абзац текста: <p>Какой-тобольшойтекст</p>9. Копируем первый абзац и 2–3 раза вставляем его ниже под

первым абзацем.10. Запускаем проект на выполнение (Ctrl + F5), либо переключа-

емся в режим конструктора страницы (в нижней части текуще-го окна находится вкладка «Конструктор»).

Посмотрите, как на данном этапе выглядит страница в бра-узере. Заголовок, указанный в теге <title>, будет отображать-ся в названии вкладки. Обратите внимание на отображение абзацев.

11. Добавляем перед первым абзацем заголовок первого уровня <h1></h1> (в HTML используется шесть уровней заголовков):

<h1>Заголовокпервогоуровня</h1>12. Добавляем самостоятельно заголовки с 1-го по 5-й уровень.13. Просмотриваем изменения в режиме конструктора страницы.

Далее рассмотрим основные теги для форматирования текста. В та-блице 1 перечислены наиболее часто используемые теги.

Таблица 1Код html Описание

<b>Текст</b> Жирное начертание текста<i>Текст</i> Курсивное начертание текста<u>Текст</u> Подчеркнутый текст<sup>Текст</sup> Надстрочный индекс

45


Код html Описание<sub>Текст</sub> Подстрочный индекс<strike>Текст</strike> Зачеркнутый текст

<pre>Текст</pre>Определяет блок предварительно отформатированно-го шрифта. Используют, например, для расположения на станице какого-либо компьютерного кода

<em>Текст</em> Курсивный текст<strong>Текст</strong> Жирный текст

<font></font> Для текста в этом теге можно настроить такие атрибу-ты, как цвет, размер, название шрифта и т. д.

<br></br> Перенос на следующую строку

14. Добавляем в разметку страницы следующий код: <h3>Формартированиетекста</h3> <b>Жирноеначертаниетекста</b><br/> <i>Курсивноеначертаниетекста</i><br/> <u>Подчеркнутыйтекст</u><br/> H<sub>2</sub>SO<sub>4</sub><br/> Метр<sup>2</sup><br/> <strike>Зачеркнутыйтекст</strike><br/> <pre>Всепробелыостаютсябезизменения</pre><br/> <em>Курсивноеначертаниетекста</em><br/> <strong>Жирноеначертаниетекста</strong><br/> <fontcolor=”red”size=”4”face=”Arial”>Красныйтекст,размер4, ШрифтArial</font><br/>15. Переключаемся в режим конструктора. Анализируем набран-

ный код.16. Добавляем ниже три абзаца с различным выравниванием тек-

ста: по правому краю, по левому краю и по центру. <palign=»left»>Текствыравниваетсяпо левомукраю</p> <palign=»right»>Текствыравниваетсяпо правомукраю</p> <palign=»center»>Текствыравниваетсяпо центрукраю</p>17. Переключаемся в режим конструктора. Анализируем набран-

ный код.

Окончание табл. 1

46


Выполнитезадание.Оформите самостоятельно текст, расположенный ниже:HTML (от англ. HyperText Markup Language — «язык гипертексто-

вой разметки») — стандартныйязыкразметкид о к ум е н т о в во Всемирнойпаутине. Большинство веб-страниц содержат опи-сание разметки на языке HTML (или XHTML). Язык HTML интер-претируется браузерами и отображается в видедокументавудобнойдлячеловекаформе.

2.2. Работа с изображениями

1. Открываем среду разработки Visual Studio и создаем новый проект (Файл — Создать — Проект).

2. В левой части окна выбираем шаблон «Веб». В средней колон-ке выбираем пункт «Пустое веб-приложение ASP.Net».

3. В нижней части окна задаем имя проекта и нажмаем кнопку «ОК» (рис. 13).

Рис. 13. Окно «Создать проект»

47

2.2. Работа с изображениями

4. Создаем первую страницу проекта. Для этого нажимаем пра-вой кнопкой мыши на названии проекта (WebApplication1). Вы-бираем пункты «Добавить — Создать элемент».


6. Добавляем к проекту любое изображение. Для этого нажимаем правой кнопкой мыши на название проекта (WebApplication1). Выбираем пункты «Добавить — Существующий элемент». Нахо-дим любое изображение на жестком диске, выбираем его и на-жимаем кнопку «Добавить». Файл изображения будет добав-лен в папку сайта.

7. Помещаем изображение на HTML-страницу. Для этого наби-раем следующую строку:

<imgsrc=”Img1.jpg”alt=”Picture”/> Тег <img> используется для добавления изображений на HTML-

страницу. Атрибут «src» для этого тега является обязатель-ным. Он указывает на расположение файла с изображением.

Также в строке кода имеется атрибут «alt». Если изобра-жение по каким-либо причинам не загрузится (или в браузе-ре отключена загрузка изображений), то на том месте, где должно быть изображение, будет отображаться альтерна-тивный текст, который был указан в значении этого атри-бута.

Адрес изображения может быть как абсолютным, так и от-носительным. Примеры таких адресов показаны ниже:

<imgsrc=»http://www.mysite/images/img1.jpg»alt=»Picture»/> — аб-солютный адрес размещения изображения.

<imgsrc=»/images/img1.jpg»alt=»Picture»/> — адрес размещения относительно корня сайта.

<imgsrc=»img1.jpg»alt=»Picture»/> — адрес размещения относи-тельно текущего расположения документа.

8. Запускаем проект на выполнение.9. Изменяем размер изображения. Добавляем следующие атри-

буты в код тега «img»: <imgsrc=”Img1.jpg”alt=”Picture”width=”300”height=”300”/> К атрибутам тега «img» были добавлены «width» (ширина изо-

бражения) и «height» (высота изображения). Значения этих атрибутов указываются в пикселях.

48


10. Добавляем рамку вокруг изображения. Для этого используем атрибут «border». Вносим изменения в код тега «img» как по-казано ниже:

<imgsrc=”Img1.jpg”alt=”Picture”width=”300”height=”300”border=”1”/> В качестве значения атрибута «border» указывается толщина

рамки в пикселях.11. Запускаем проект на выполнение.12. Добавляем к проекту еще одно изображение.13. Помещаем изображение на HTML-страницу.14. Изменяем размеры изображения на 200×200 пикселей.15. Добавляем для изображения рамку толщиной в 3 пикселя.

Для расположения изображений относительно текста использует-ся атрибут «align». В таблице 2 показаны возможные значения этого атрибута и их описание.

Таблица 2Значение Описаниеbottom Выравнивание по базовой линии текста (по умолчанию) left Выравнивание по левому краю родительского элементаmiddle Середина изображения выравнивается посередине текущей строки right Выравнивание по правому краю родительского элемента top Выравнивание по самому высокому элементу текущей строки

16. Добавляем на страницу следующий фрагмент HTML-кода: <p><img src=”Img1.jpg” alt=”Picture” width=”100” height=”100”

border=”5”align=”left”/> TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText </p>

17. Запускаем проект на выполнение.18. Меняем значение атрибута «align» на bottom, right, middle, top.19. Запускаем проект на выполнение. Анализируем изменения.20. Меняем расстояние между текстом и изображением. Для этого

используем атрибуты «hspace» и «vspace». Самостоятельно до-

49

2.3. Работа с таблицами в HTML-документе

бавляем данные атрибуты для тега «img». Устанавливаем для них значение 10 пикселей.

ВыполнитезаданиеДобавляем к нашему проекту четыре картинки. Расположим их

на HTML-странице согласно рис. 14 ниже.

а

б

в

Рис. 14. Расположение рисунка относительно текста:а — рисунок находится слева, и текст выровнен по левой границе;

б — рисунок находится слева, и текст выровнен по центру; в — рисунок находится справа, и текст выровнен по правой границе


Как известно, таблицы состоят из строк и столбцов. В каждой ячей-ке таблицы можно разместить какой-либо контент (текст и/или ри-сунки). Как правило, таблицы используются для того, чтобы упорядо-

50


чить некоторые данные. Таблицы часто используются в веб-документе для верстки макета страницы.

Для того чтобы добавить в веб-документ таблицу, используют тег-контейнер <table>. Для добавления в таблицу строк используется тег <tr>, а для добавления столбцов — тег <td>.

В таблице 3 приведены основные атрибуты таблиц и ячеек.

Таблица 3Атрибутытаблиц

Атрибут Значение (пример) ОписаниеAlign Left, Right, Center Выравнивание таблицыBackground URL Фоновый рисунокBgСolor #0d0d0d Цвет фонаBorder 2 Толщина рамки, пикселиBorderColor Black или #000000 Цвет рамки

CellPadding 10 Расстояние между границей ячейки и ее содержимым, пиксели

Атрибут Значение (пример) ОписаниеCellSpacing 15 Расстояние между ячейками, пикселиWidth 500 или 75 % Ширина таблицы, пикселиHeight 200 или 80 % Высота таблицы, пиксели

АтрибутыячеекAlign Left, Right, Center Выравнивание в ячейкеBgСolor #0d0d0d Цвет фонаBorderColor Black или #000000 Цвет рамки

Colspan 2 Объединение заданного количества ячеек по вертикали

RowSpan 3 Объединение заданного количества ячеек по горизонтали

Valign Top, Bottom, Baseline, Middle Выравнивание в ячейке по вертикали

Width 20 или 15 % Ширина ячейкиHeight 15 или 20 % Высота ячейки



3. В нижней части окна задаем имя проекта и нажимаем кнопку «ОК».

51


4. Создаем первую страницу проекта. Для этого нажимаем пра-вой кнопкой мыши на названии проекта (WebApplication1). Вы-бираем пункты «Добавить — Создать элемент».


6. Добавляем в HTML-документ (внутри тега <body>) таблицу, состоящую из 3 строк и 3 столбцов. Ширина таблицы — 75 % окна браузера. Выравниваем по центру окна. Для таблицы за-даем рамку (смотрите разметку ниже).

7. Объединяем все ячейки первой строки. Для этого изменяем разметку для первой сроки следующим образом:

<tr> <tdcolspan=”3”> </td> </tr>8. Устанавливаем выравнивание содержимого первой строки

по центру (добавляем для тега <tr> атрибут «align» со значе-нием «center»).

9. Добавляем текст в каждую ячейку таблицы (Ячейка 1, Ячей-ка 2 и т. д.).

10. Объединяем ячейку 3 с ячейкой 4, а также ячейку 6 с ячейкой 7.

52


11. Объединяем ячейки 2 и 5. Устанавливаем для объединенной ячейки размер 30 % от ширины таблицы (добавляем атрибут «width» со значением 30 % для тега <td>).

На данном этапе разметка для таблицы выглядит следующим образом:

<tableborder=»1»width=»75%»align=»center»cellspacing=»10»> <tralign=»center»> <tdcolspan=»3»>Ячейка1 </td> </tr> <tr> <tdrowspan=»2»width=»30%»>Ячейка2+Ячейка5 </td> <tdcolspan=»2»>Ячейка3+Ячейка4 </td> </tr> <tr> <tdcolspan=»2»>Ячейка6+Ячейка7 </td> </tr> </table>12. Меняем нумерацию ячеек (заменяем текст внутри ячеек

на «Ячейка 1», Ячейка 2», «Ячейка 3» и «Ячейка 4»).13. Устанавливаем расстояние между ячейками в 10 пикселей (до-

бавляем для тега <table> атрибут «cellspacing» со значением 10 пикселей).

14. Устанавливаем для таблицы цвет фона «Серый» (Grey): добав-ляем для тега <table> атрибут «bgcolor» со значением «Gray».

15. Задаем для всех ячеек таблицы цвет «Белый» (White). На данном этапе разметка для таблицы выглядит следующим

образом: <table border=»1» width=»75%» align=»center» cellspacing=»10»

bgcolor=»gray»> <tralign=»center»> <tdcolspan=»3»bgcolor=»White»>Ячейка1 </td> </tr> <tr>

53


<tdrowspan=»2»width=»30%»bgcolor=»White»>Ячейка2 </td> <tdcolspan=»2»width=»60%»bgcolor=»White»>Ячейка3 </td> </tr> <tr> <tdcolspan=»2»width=»60%»bgcolor=»White»>Ячейка4 </td> </tr> </table>

16. Добавляем к проекту любое изображение размером 100×100 пикселей.

17. Вставляем изображение в ячейку 2. Устанавливаем выравни-вание по центру ячейки.

18. Добавляем в ячейки 3 и 4 текстовые поля. Перетаскиваем из «Панели инструментов» (вкладка «HTML») элементы «Input (Text)» между тегами <td> и </td> для ячеек 3 и 4.

19. Добавляем еще одну строку к таблице (в строке один столбец).20. Перетаскиваем в созданную строку элемент «Input (Button)».21. Устанавливаем выравнивание в последней строке таблицы

по центру.22. Задаем размеры кнопки 200×40 пикселей.23. Задаем расстояние между границами ячеек и их содержимым

10 пикселей (добавляем атрибут «cellpadding» к атрибутам тега «table»).

На данном этапе разметка для таблицы выглядит следующим образом:

<tableborder=»1»width=»75%»align=»center»cellspacing=»10» cellpadding=»10»bgcolor=»gray»> <tralign=»center»> <tdcolspan=»3»bgcolor=»White»>Ячейка1 </td> </tr> <tr> <tdrowspan=»2»width=»30%»bgcolor=»White»align=»center»> Ячейка2<br/> <imgsrc=»Jellyfish.jpg»alt=»picture»/>

54


</td> <tdcolspan=»2»bgcolor=»White»>Ячейка3 <inputid=»Text1»type=»text»/> </td> </tr> <tr> <tdcolspan=»2»bgcolor=»White»>Ячейка4 <inputid=»Text2»type=»text»/> </td> </tr> <tr> <tdcolspan=»3»bgcolor=»White»align=»center»> <inputid=»Button1»type=»button»value=»button»/> </td> </tr> </table>

24. Запускаем проект на выполнение. Анализируем результаты.

ВыполнитезаданиеОформите разметку для формы, представленной ниже, с исполь-

зованием таблицы.

55

2.4. Гиперссылки. Якоря. Маркированные и нумерованные списки в HTML-документе


Гиперссылки. Якоря

Ссылки — это основа любого гипертекстового документа, они по-зволяют перемещаться с одной страницы на другую и организовы-вать навигацию внутри страницы. Для того чтобы добавить ссылку на HTML-страницу, используют тег <a>. Обязательным атрибутом для данного тега является атрибут «href» — URL адрес ресурса, стра-ницы или файла. Различают абсолютные и относительные адреса. Аб-солютная ссылка обычно ведет на какой-либо внешний ресурс либо указывает на адрес файла, который расположен на внешнем ресур-се. Пример абсолютной ссылки:

<ahref=»http://www.e-vuz.com»>This isLinktowww.e-vuz.com</a>Относительные ссылки (их можно также назвать локальными)

строятся относительно текущего документа. Примеры относитель-ных ссылок указаны ниже:

images/img1.jpg — текущий документ находится в корне сайта, а файл, на который ссылаются, в папке images;

…/help.html — текущий документ находится в одной папке, а файл, на который ссылаются, в корне сайта;

HTMLPage2.html — файл, на который ссылаются, находится в той же папке, что и текущий документ.

Для правильного оформления ссылок в HTML-документе необхо-димо выполнить ряд действий.

1. Открываем среду разработки Visual Studio и создаем новый проект (Файл — Создать — Проект).

2. В левой части окна выбираем шаблон «Веб». В средней колон-ке выбираем пункт «Пустое веб-приложение ASP.Net».

3. В нижней части окна задаем имя проекта и нажимаем кнопку «ОК».

4. Создаем первую страницу проекта. Для этого нажимаем пра-вой кнопкой мыши на название проекта (WebApplication1). Вы-бираем пункты «Добавить — Создать элемент».

56



6. Добавляем на страницу ссылку на сайт. Для этого набираем следующий HTML-код:

<ahref=”http://www.e-vuz.com”target=”_blank”>This islinktoe-vuz.com</a>

7. Добавляем к проекту вторую HTML-страницу.8. На второй странице набираем следующий код: <h1>This isSecondPage</h1>9. Переходим на первую страницу и добавляем ссылку на вторую

страницу: <br/> <ahref=”HTMLPage2.htm”target=”_parent”>SecondPage</a>10. Запускаем проект на выполнение. Проверяем работу ссылок. В случае, когда документ имеет большой размер, разумно сде-

лать оглавление или навигацию для простоты перемещения по данному документу. Для этого используют ссылки вну-три страницы (якорь). Якорь состоит из двух элементов: за-кладки с уникальным именем в каком-либо месте страницы и ссылки для перехода к ней. Для задания уникального имени закладки используется атрибут «name» для тега — «а».

11. Добавляем на страницу якорь. Для этого набираем следующий HTML-код:

<aname=”Top”></a> <ahref=”#Top”>Tothebeginning</a> В первой строке создается закладка с именем «Top», для кото-

рой далее в документе будет сделана ссылка. Во второй стро-ке создается ссылка с текстом «In The Begining» и в атрибуте «href» указывается имя ссылки, на которую будет совершен переход. Значение атрибута «href» начинается с символа #.

12. Добавляем к проекту три любых изображения (большого раз-мера).

13. Вставляем все три изображения друг за другом между первой и второй ссылками.

14. Запускаем проект на выполнение (Ctrl + F5).15. Проверяем работу ссылки «To the beginning» внизу страницы

(при нажатии происходит переход к началу документа).

57


Маркированные и нумерованные списки

Для упорядочивания данных и их отображения на веб-странице в удобном для восприятия виде часто используют нумерованные и маркированные списки. Для создания списков в HTML-документе используются теги <ol> (для нумерованного списка) и <ul> (для мар-кированного списка). Элементы списка задаются с помощью тега <li>. Также имеется возможность изменять вид маркеров и нумера-ции элементов списка.

1. Cоздаем новый проект (Файл — Создать — Проект).2. В левой части окна выбираем шаблон «Веб». В средней колон-

ке выбираем пункт «Пустое веб-приложение ASP.Net».3. В нижней части окна задаем имя проекта и нажимаем кнопку

«ОК».4. Создаем первую страницу проекта. Для этого нажимаем пра-

вой кнопкой мыши на название проекта (WebApplication1). Вы-бираем пункты «Добавить — Создать элемент».


6. Добавляем на страницу нумерованный список, состоящий из трех элементов.

<ol> <li>Firstelement</li> <li>Secondelement</li> <li>Thirdelement</li> </ol> Для изменения вида нумерации элементов списка использу-

ют атрибут «type» для тега <ol>. Ниже, в таблице 4, приве-дены возможные значения для атрибута «type».

Таблица 4Значение атрибута Описание

type=”1” Арабские цифрыtype=”A” Прописные буквы латинского алфавитаtype=”a” Строчные буквы латинского алфавитаtype=”I” Римские цифры (верхний регистр)type=”i” Римские цифры (нижний регистр)

58


7. Задаем вид нумерации прописными буквами латинского ал-фавита.

<oltype=”A”> <li>Firstelement</li> <li>Secondelement</li> <li>Thirdelement</li> </ol>8. Переключаемся в режим конструктора страницы. Смотрим

на результат проделанных действий.9. Добавляем к проекту еще одну HTML-страницу.10. Добавляем в разметку второй страницы заголовок первого уров-

ня с текстом «This is the Second Page».11. Сохраняем и закрываем вторую страницу.12. Задаем элементы списка на первой странице в виде гиперссы-

лок ведущих на вторую страницу. <oltype=”A”> <li><ahref=”HTMLPage2.htm”target=”_parent”>Firstelement</a></li> <li><ahref=”HTMLPage2.htm”target=”_parent”>Secondelement</a></li> <li><ahref=”HTMLPage2.htm”target=”_parent”>Thirdelement</a></li> </ol>13. Добавляем на страницу маркированный список, состоящий

из трех элементов. <ul> <li>Firstelement</li> <li>Secondelement</li> <li>Thirdelement</li> </ul> Для изменения вида маркеров элементов списка используют

атрибут «type» для тега <ul> (аналогично нумерованному спи-ску). В таблице 5 приведены возможные значения для атри-бута «type».

Таблица 5Значение атрибута Описание

type=”disc” Кругtype=”circle” Окружностьtype=”square” Квадрат

59


14. Устанавливаем вид маркера в виде квадрата. <ultype=»square»> <li>Firstelement</li> <li>Secondelement</li> <li>Thirdelement</li> </ul>15. Создаем двухуровневый список. Добавляем нумерованный спи-

сок внутри первого элемента маркированного списка. Для это-го используем уже созданный выше нумерованный список.

<ultype=»square»> <li>Firstelement</li> <oltype=»A»> <li>Firstelement</li> <li>Secondelement</li> <li>Thirdelement</li> </ol> <li>Secondelement</li> <li>Thirdelement</li> </ul> При необходимости можно создать список любой сложности

с любым количеством уровней.

ВыполнитезаданиеСоздайте разметку страницы

по предлагаемому образцу. Размет-ка должна содержать следующие элементы: маркированный и нуме-рованный списки, таблицу, изобра-жения, ссылки на другую страницу, ссылку-якорь (возврат к началу стра-ницы).

60


2.5. Технология ASP.Net. Состояние представления (ViewState) и скрытые поля (Hidden fields)



3. В нижней части окна задаем имя проекта и нажимаем кнопку «ОК» (рис. 15).

Рис. 15

Созданный проект показан на рис. 16.

61


Рис. 16

4. Создаем первую страницу проекта. Для этого нажимаем правой кнопкой мыши на название проекта (WebApplication1). Выби-раем пункты «Добавить — Создать элемент».

5. В появившейся форме выбираем пункт «Форма Web Form» и на-жимаем кнопку «Добавить» (рис. 17).

Рис. 17

62


6. В созданной форме уже присутствует HTML-код (рис. 18).

Рис. 18

Первая строка сообщает нам o том, что страница является ча-стью приложения ASP.Net. Директива «Page» содержит в себе указания на язык программирования, используемый в файле логики страницы, название файла логики и некоторые данные о наследовании. Далее располагаются стандартные элементы HTML-страницы, но есть и отличия: у некоторых тегов прописа-но свойство runat= ”server”. Это свойство говорит о том, что для каждого такого элемента создается серверный компонент, кото-рый будет осуществлять некую логику работы с этим элементом. Основной тег, который есть на странице — это тег <form>. Дан-ная форма является серверной (так как задано свойство runat= ”server”). Серверная форма на странице может только одна.

7. Добавляем на страницу элементы управления. Все элементы формы необходимо размещать внутри тега <form>. Из списка элементов, который находится слева от формы (если его нет, необходимо выбрать в главном меню Вид — Панель элемен-тов) мышкой перетаскиваем на страницу между тегами <div> и </div> кнопку (button) и выпадающий список (dropDownList).

8. Переключаемся в визуальный режим представления страницы. Для этого нажимаем на вкладку «Конструктор» в нижней части окна.

63


9. Выделяем одним щелчком мыши «Кнопку» на форме и нажи-маем F4. Откроется окно свойств данного элемента управле-ния. Задаем самостоятельно цвет фона для кнопки (BackColor) и текст на кнопке (Text).

10. Добавляем в элемент «Выпадающий список» два новых элемен-та списка. Для этого выделяем элемент на странице. У выделен-ного элемента справа появится иконка треугольника. Нажима-ем на нее. Далее откроется форма редактирования элементов выпадающего списка. Добавляем два элемента и закрываем форму.

11. Запускаем проект на выполнение (Ctrl + F5). Нажимаем на «Кнопку» и анализируем, как меняется наша страница (на данном этапе вы увидите только перегрузку страницы, так как никакого функционала мы еще не прописали).

12. Открываем код страницы (правая кнопка мыши — Посмотреть код страницы). Элементы управления «Кнопка» и «Выпадаю-щий список» с тегами <asp> отработали на странице как стан-дартные элементы HTML (input и select). Но при этом на стра-нице появились два новых элемента input со свойством type = “hidden”. Это так называемые Скрытые поля, которые хра-нят в себе состояние элементов управления на странице. Про-токол HTTP не передает данные о состоянии элементов, на-ходящихся на странице. В технологии ASP.Net с помощью скрытых полей на сервер передается состояние элементов управления (ViewState) и информация о событиях на форме (EventValidation). Сервер после обработки запроса генерирует для клиента (браузера) HTML-код страницы.

При этом состояние элементов управления не сбрасывается на начальное, а остается в том виде, в котором было передано в скрытых полях при запросе на сервер (рис. 19).

13. Добавляем на форму еще один элемент управления «Метка» (Label) под выпадающим списком.

14. Создаем обработчик события для кнопки на форме. Для это-го в режиме «Конструктора» сделаем двойной щелчок мы-шью по кнопке. Среда разработки автоматически сгенерирует C#-код обработчика события Click.

15. Далее пропишем следующий код в обработчике (рис. 20).

64


Рис. 19

Рис. 20

16. Запускаем проект на выполнение (Ctrl + F5) и нажимаем на «Кнопку». На странице отработает обработчик события на-жатия на кнопке, и под выпадающим списком появится текст, который мы передали в качестве значения свойству Text эле-мента управления Label1.

17. Устанавливаем для элемента управления dropDownList1 свой-ство AutoPostBack в true (после установки данного свойства

65


в true, любые действия с данным элементом управления бу-дут вызывать обращение на сервер).

18. Создаем обработчик события DropDownList1_SelectedIndex-Changed (событие обработки изменения значения в списке). Для этого дважды щелкаем мышью по элементу управления. Среда разработки переключится в файл логики страницы и сге-нерирует код для обработчика события.

19. Добавляем в обработчик события следующий код: protectedvoidDropDownList1_SelectedIndexChanged(objectsender,

EventArgse) { Label1.Text=DropDownList1.SelectedValue; }20. Запускаем проект на выполнение (Ctrl + F5).21. Открываем код страницы. Можно заметить, что в HTML-коде

появился javasсript, который для DropDownList1 вызывает об-ращение на сервер при смене пункта в списке.

22. Самостоятельно добавляем на форму элемент управления CheckBox. Задаем значение true для свойства AutoPostBack данного элемента. Создаем обработчик события CheckBox1_CheckedChanged.

23. Далее в обработчике события прописываем условие: если CheckBox выбран, то свойству Label1.Text присвоить значе-ние CheckBox.

24. Запускаем проект на выполнение. Проверяем работу всех эле-ментов на странице.

Вопросыдлясамоконтроля1. Приведите примеры элементов управления ASP.Net. Какие со-

бытия могут быть обработаны для элементов управления Button (кнопка) и DropDownList (выпадающий список)?

2. Что такое ViewState (состояние элементов управления) и для чего оно используется?

3. Объясните назначение свойства AutoPostBack. Что происходит при выставленном значении данного свойства в true?

66


2.6. Работа с элементами управления. Валидация ввода данных

1. Создаем пустой проект WebForms.2. Добавляем к проекту страницу WebForm.aspx.3. В HTML-коде страницы создаем разметку для будущей формы

ввода данных. Форма будет представлять собой таблицу из двух столбцов и трех строк. Последний (третий) столбец будет иметь ширину в два столбца. Для создания разметки набираем меж-ду тегами <div> и </div> следующий код (рис. 21):

Рис. 21

4. Добавляем необходимые элементы управления на форму: два элемента Label, два элемента TextBox и один элемент Button. Из панели элементов (находится слева от страницы кода) пере-таскиваем соответствующие элементы управления на страницу. После добавления всех элементов, код должен выглядеть сле-дующим образом (рис. 22):

67


Рис. 22

5. Добавляем на страницу еще одни элемент управления Label. Располагаем его под кнопкой.

6. Создаем обработчик события нажатия на кнопку.7. Внутри обработчика события набираем код, который будет об-

рабатывать данные, введенные пользователем в поля формы, и выводить их в текстовую метку, расположенную под кнопкой.

Label4.Text=TextBox1.Text+““+TextBox2.Text+““+TextBox3.Text;8. Запускаем проект на выполнение и нажимаем на кнопку для

проверки отработки события. Далее необходимо проверить данные, введенные пользователем

(введены ли данные в поля, формат ввода телефона и e-mail адреса). Для этого расположим на форме для каждого из по-лей специальные элементы управления — валидаторы ввода.

68


9. Переходим в режим конструктора. Выделяем мышкой TextBox1 и нажимаем один раз стрелку вправо на клавиату-ре. Курсор будет расположен справой стороны от текстового поля.

10. В «Панели элементов» (расположена слева от окна разметки страницы) открываем вкладку «Проверка». Дважды нажимаем мышью на элемент управления «RequiredFieldValidator» (кур-сор должен быть справа от текстового поля).

11. Выделяем мышью добавленный валидатор и нажимаем F4 для перехода в окно свойств.

12. Для свойства ControlToValidate выбираем текстовое поле TextBox1 (Свойство ControlToValidate задает элемент управ-ления, который необходимо проверять на корректность ввода данных).

13. Для свойства ErrorMessage (сообщение, которое будет выво-диться на страницу при вводе некорректных данных) вводим, например, символ «*».

14. Далее проделываем операции 9–13 для TextBox2 и TextBox3.15. Для поля e-mail, аналогично предыдущим пунктам, добавляем

еще один валидатор — «RegularExprssionValidator». Распола-гаем его рядом с валидатором «RequiredFieldValidator», добав-ленным ранее. Данный элемент управления позволит прове-рить формат введенного пользователем адреса электронной почты.

16. Открываем окно свойств данного валидатора.17. Для свойства ControlToValidate выбираем текстовое поле

TextBox3.18. Для свойства ErrorMessage вводим следующий текст: e-mail

введен не корректно.19. Далее выбираем свойство ValidationExpression (данное свой-

ство позволяет установить формат данных, которые хотелось бы получить от пользователя при вводе данных) и нажимаем на иконку с изображением «…».

20. В открывшемся окне выбираем стандартное выражение «Адрес электронной почты в Интернет» и нажимаем ОК.

21. Переходим в режим разметки страницы и смотрим, как изме-нился HTML-код, какие строки были добавлены в разметку страницы.

69


После того, как мы добавили валидаторы на страницу, форма уже будет проверять вводимые пользователем данные. Но нам необходимо изменить код логики страницы таким образом, чтобы данные проверялись до отправки запроса на сервер.

Для этого произведем следующие действия:22. Переходим в файл логики страницы «WebForm.aspx.cs».23. Изменяем код обработчика события нажатия на кнопку следу-

ющим образом: if(!Page.IsValid)return; Label4.Text=TextBox1.Text+““+TextBox2.Text+““+TextBox3.Text;24. Запускаем проект на выполнение.25. Нажимаем на кнопку «Отправить» без ввода данных формы.

Отработают валидаторы, размещенные на странице и справа от текстовых полей появятся символы «*».

26. Проверяем работоспособность валидатора формата e-mail адре-са. Для этого вводим в TextBox3 неверный e-mail адрес (напри-мер, без указания зоны .ru или .com, или без знака «@»).

Во время отработки валидаторов на странице (если данные введены не верно) не происходит запроса на сервер. Инфра-структура ASP.Net формирует javascript-код для обработ-ки вводимых данных. В случае, если все валидаторы сообщи-ли странице об успешном завершении своей работы (проверка свойства страницы Page.IsValid), происходит отправка дан-ных формы на сервер и их обработка в соответствии с логикой (в нашем случае вывод данных в текстовую метку под кнопкой).

Если пользователь заполняет много полей на форме, то он может допустить множество ошибок. Для того чтобы со-общить пользователю обо всех ошибках в удобном формате, существует элемент управления «ValidationSummary».

27. Переходим в режим разметки страницы.28. После тега <div> добавляем из вкладки «Проверка» на «Пане-

ли элементов» элемент управления «ValidationSummary».29. Запускаем проект на выполнение без заполнения полей фор-

мы. Над полями формы будет виден результат работы элемен-та управления «ValidationSummary» (три строки с символами «*»). Для того чтобы пользователь смог понять, какие ошибки произошли при воде данных, необходимо изменить свойства валидаторов текстовых полей.

70


30. Переходим на вкладку «Конструктор». Выделяем мышкой ва-лидатор «RequiredFieldValidator» рядом с первым текстовым полем.

31. Для свойства «ErrorMessage» устанавливаем значение «Ука-жите имя».

32. Для свойства «Тext» устанавливаем значение «*».33. Проделываем аналогичные операции с валидаторами осталь-

ных текстовых полей («RequiredFieldValidator»).34. Для всех валидаторов меняем значение свойства «Display»

на «dynamic» (свойство «Display» задает способ отображения проверки корректности ввода данных). Значение свойства «dynamic» говорит о том, что элемент управления, в который выводится сообщение об ошибке, будет генерироваться в раз-метке HTML только в случае возникновения ошибок ввода. Если оставить значение свойства равным «Static», то разметка для данного элемента будет сгенерирована при запуске проек-та, а CSS свойство элемента display будет установлено в none.

35. Запускаем проект на выполнение. Нажимаем на кнопку без ввода данных в форму.

Вопросыдлясамоконтроля1. Для чего используются Валидаторы на странице?2. Какие типы Валидаторов вы знаете?3. С помощью какого Валидатора можно проверить корректность

ввода e-mail адреса?

2.7. Оформление страниц. Шаблоны, темы, скины

Технология шаблонов (MasterPages) применяется для задания некоторого шаблона разметки страниц веб-приложения. Согласно данной технологии, на всех страницах располагаются некоторые ста-тические блоки элементов управления и предусмотрено место для вы-вода динамического контента (ContentPlaceHolder).

Темы в ASP.Net используются для задания определенного набора стилей и каких-либо изображений для страниц приложения.

71


Скины позволяют задавать визуальные свойства некоторой груп-пы элементов управления в приложении. Например, после подключе-ния скина для элементов управления button ко всем кнопкам на стра-нице будут применены установленные в скине визуальные свойства.

1. Создаем новый пустой проект ASP.Net.2. Добавляем к проекту новый элемент «Главная страница» (оставь-

те имя страницы по умолчанию «Site1.Master»). Главная стра-ница несколько отличается от обычной веб-формы. На главной странице в первой строке вместо директивы «Page» прописана директива «Master». Также на главной странице можно увидеть такой элемент управления, как «ContentPlaceHolder». Это место на странице, в которое будет выводиться динамический контент из веб-форм приложения.

3. Добавляем на страницу над и под элементом «ContentPlaceHolder» какую-либо разметку (пример показан на рис. 23).

Рис. 23

4. Запускаем проект на выполнение (посмотрите страницу в бра-узере).

5. Закрываем и сохраняем разметку страницы «Site1.Master».6. Добавляем к проекту элемент «Веб-форма, использующая глав-

ную страницу» (Web Content Form). Называем ее «WebForm.aspx» и нажимаем «ОК».

72


7. В появившемся окне в правой части выбираем главную страни-цу (Site.Master), которую будет использовать наша веб-форма для вывода своего контента, и нажимаем «ОК».

Будет создана новая страница. Она отличается от обыч-ной веб-формы тем, что в первой строке, после директи-вы Page появился новый атрибут «MasterPageFile=”~/Site1.Master.”». Разметка страницы состоит только из элементов «ContentPlaceHolder», содержимое которых будет выводиться на главную страницу (рис. 24).

Рис. 24

8. Размещаем в элементе «ContentPlaceHolder1» простую форму (например, как показано на рис. 25).

9. Запускаем проект на выполнение. Смотрим, как изменилась страница в браузере (в каком месте на странице был выведен контент WebForm1).

10. Нажимаем правой кнопкой мыши на название проекта.11. В контекстном меню выбираем «Добавить папку ASP.Net».

73


Рис. 25

12. Выбираем папку «Тема». В дереве проекта появится новая пап-ка с названием «App_Themes», внутри которой уже располага-ется один файл «Тема1».

13. Аналогично создаем еще одну тему с названием «Тема2».14. Добавляем к Теме 1 таблицу стилей оформления страницы

(CSS файл). Нажимаем правой кнопкой по названию «Тема1». В контекстном меню выбираем Добавить — Создать элемент.

15. В открывшемся диалоговом окне выбираем тип элемента «Табли-ца стилей» (оставьте название по умолчанию «StyleSheet1.css»).

16. Пропишем в файле стилей свойства CSS как показано ниже на рис. 26.

17. Аналогично создаем CSS-файл для Темы 2. Меняем значе-ние свойства «background-color» на «Red», а значение свойства «color» — на «Blue».

18. Подключаем Тему 1 к странице. Для этого в разметке страни-цы WebForm1 в первой строке после директивы «Page» добав-ляем атрибут «Theme» со значением «Тема1» (Theme=”Тема1”).

74


Рис. 26

19. Запускаем проект на выполнение.20. Меняем значение атрибута «Theme» на «Тема2» и запускаем

проект на выполнение.21. Добавляем в папку App_Themes скин-файл («Файл обложки»).

Оставляем название файла по умолчанию. Нажимаем кнопку «ОК».

22. В скин-файл добавляем кода описания всех кнопок на страни-це (рис. 27).

Рис. 2723. Запускаем проект на выполнение. В окне браузера будет вид-

но, что формат всех кнопок стал соответствовать тому описа-нию, которое было прописано в скин-файле. Инфраструктура ASP.Net подгрузила для страницы Тему 1, указанную в пер-вой сроке разметки страницы. В папке с темой также находит-ся скин-файл Skin1. Он автоматически подгружается вместе с подключенной темой.

75

2.8. Работа с клиентскими скриптами в ASP.Net. Ajax-расширения

24. Создаем скин-файл для Темы 2. Определяем в нем свойства для кнопок на странице, отличные от скин-файла для Темы 1.

25. Подключаем Тему 2 к странице.26. Запускаем проект на выполнение. Смотрим, как отработала

Тема 2 и скин-файл для этой темы.

Вопросыдлясамопроверки1. Что такое шаблоны и для чего они нужны?2. Какой элемент управления на Главной странице предназначен

для вывода контента, размещенного на веб-формах?3. Как создать новую Тему и подключить ее на страницу?4. Каким образом можно определить одинаковый формат для ка-

ких-либо элементов управления на странице?


1. Создаем новое пустое ASP.Net-приложение.2. Добавляем к проекту новую страницу (веб-форму).3. Добавляем на страницу «Кнопку». Далее попробуем создать некоторый javaScript-код и привя-

зать его к событию «Click» созданной кнопки. Существует два способа сделать подобное действие:1) создать файл javaSript, написать в нем необходимую функ-

цию, подключить данный файл к странице с помощью тега «link» и прописать в HTML-коде для кнопки атрибут «onClick»;

2) создать javaScript в коде обработки страницы внутри об-работчика события «PageLoad» и добавить этот скрипт к атрибутам кнопки.

Используем второй способ.4. В HTML-код страницы внутри тега <form> добавляем элемент

управления «ScriptManager» (находится в «Панели инструмен-тов» на вкладке «Ajax-расширения»).

5. Переходим в файл кода страницы «WebForm1.aspx.cs».

76


6. В обработчике события «PageLoad» создаем простой javaScript, который при нажатии на кнопку будет запрашивать у пользо-вателя подтверждение некоторого действия.

stringscript=“returnconfirm(‘Выуверены?’);”;7. Следующей строкой кода добавим созданный скрипт к атрибу-

там кнопки: Button1.Attributes.Add(“onclick”,script);8. Запускаем проект на выполнение. Проверяем работу кнопки. В данном случае при нажатии на кнопку запускается соз-

данный ранее javaScript. При этом, если пользователь на-жмет кнопку «Отмена», то перегрузки страницы и обраще-ния на сервер не происходит.

9. Добавляем справа от кнопки элемент управления TextBox.10. В следующей строке добавляем еще один элемент управления

TextBox.11. В обработчике события «Button1_Click» добавляем следующий код: TextBox1.Text=DateTime.Now.ToLongTimeString(); TextBox2.Text=DateTime.Now.ToLongTimeString();12. Запускаем проект на выполнение. Нажимаем на кнопку. В текстовых полях появится текущее время сервера. Далее попробуем добавить на страницу Ajax-функциональность

(обновление только определенных мест на странице). Допу-стим, мы хотим, чтобы при нажатии на кнопку обновлялось только первое текстовое поле.

13. Добавляем на страницу новый элемент управления «UpdatePanel1» (находится в «Панели инструментов» во вклад-ке «Ajax-расширения») и элемент «ContentTemplate» внутри «UpdatePanel1». Разметка страницы после внесения измене-ний представлена на рис. 28. Элементы управления «Button1» и «TextBox1» теперь находятся внутри элемента «UpdatePanel1».

14. Запускаем проект на выполнение. Нажимаем кнопку для об-новления текстовых полей.

Если нажать кнопку второй раз, то можно увидеть, как из-мениться время в первом текстовом поле. При этом время во втором текстовом поле останется прежним.

Это обусловлено тем, что при нажатии на кнопку про-исходит обновление тех элементов, которые находятся в «UpdatePanel1», без полной перегрузки страницы.

77


Рис. 28

15. Добавляем в проект новую базу данных. Оставляем название базы данных по умолчанию «Database1.mdf».

16. Создаем в базе данных две таблицы. Задаем следующие назва-ния таблицам: «СarBrands» и «Models». Структура таблиц по-казана на рис. 29 и 30.

Рис. 29. Структура таблицы «СarBrands»

Рис. 30. Структура таблицы «Models»

17. Заполняем таблицы данными (таблица «СarBrands» — три строки, таблица «Models» — десять строк).

78


18. Переходим в режим «Конструктор страницы».19. Добавляем на страницу под вторым текстовым полем два ис-

точника данных «SqlDataSource1» и «SqlDataSource2».20. Добавляем на страницу под источниками данных два эле-

мента управления «Label», а также два элемента управления «DropDownList» (вид страницы в конструкторе показан на рис. 31).

Рис. 31

21. Настраиваем «SqlDataSource1» на получение значений марок автомобилей из столбца «carBrand» таблицы «CarBrands».

22. Настраиваем «SqlDataSource2» на получение значений моде-лей автомобилей из столбца «model» таблицы «Models». Задаем для «SqlDataSource2» условие «Where» как показано на рис. 32.

Рис. 32

79


23. Устанавливаем для «DropDownList1» значение свойства «AutoPostBack» в «true».

24. Устанавливаем для первого выпадающего списка источник дан-ных «SqlDataSource1».

25. Устанавливаем для второго выпадающего списка источник данных «SqlDataSource2».

26. Помещаем «Label1» , «Label2» , «DropDownList1» и «DropDownList2» в элемент управления «UpdatePanel2». Добавляем внутри «UpdatePanel2» элемент управления «ContentTemplate» (см. пункт 13 и рис. 28).

Разметка для «UpdatePanel2» после внесения изменений будет иметь следующий вид:

<asp : UpdatePanel ID=”UpdatePanel2” runat=”server”UpdateMode=”Conditional”

ChildrenAsTriggers=”true”> <ContentTemplate> <asp:Label ID=”Label1”runat=”server”Text=”CarBrand”></asp:Label> <br/> <asp: DropDownList ID=”DropDownList1” runat=”server”

AutoPostBack=”True” DataSourceID=”SqlDataSource1” DataTextField=”carBrand”

DataValueField=”carBrand” </asp:DropDownList> <br/> <asp:Label ID=”Label2”runat=”server”Text=”Model”></asp:Label> <br/> <asp: DropDownList ID=”DropDownList2” runat=”server”

DataSourceID=”SqlDataSource2” DataTextField=”model”DataValueField=”model”> </asp:DropDownList> </ContentTemplate> <Triggers> <asp:AsyncPostBackTriggerControlID=”DropDownList1”/> </Triggers> </asp:UpdatePanel>

27. Запускаем проект на выполнение. Проверяем работоспособ-ность выпадающих списков.

80


При выборе в «DropDownList1» марки автомобиля «DropDownList2» автоматически обновляется и получает зна-чения моделей автомобилей для указанной в «DropDownList1» марки. При этом обновления страницы полностью не проис-ходит.

Однако можно заметить, что при выборе марки из «DropDownList1» также происходит обновление «TextBox1». Чтобы этого не происходило, необходимо указать, какие эле-менты управления будут вызывать обновление «UpdatePanel1» и «UpdatePanel2».

28. Переходим в режим «Разметка страницы».29. Меняем разметку для «UpdatePanel1». Добавляем атри-

бут «UpdateMode» со значением «Conditional» и атрибут «ChildrenAsTriggers» со значением «true». Также указываем «Button1» в качестве триггера обновления «UpdatePanel1». Раз-метка для «UpdatePanel1» после внесения изменений показа-на ниже.

<asp:UpdatePanel ID=”UpdatePanel1”runat=”server” UpdateMode=”Conditional”ChildrenAsTriggers=”true”> <ContentTemplate> <asp:Button ID=”Button1”runat=”server”Text=”Button”/> <asp:TextBox ID=”TextBox1”runat=”server”></asp:TextBox> </ContentTemplate> <Triggers> <asp:AsyncPostBackTriggerControlID=”Button1”/> </Triggers> </asp:UpdatePanel>30. Проделаем те же операции для «UpdatePanel2». В качестве триг-

гера обновления «UpdatePanel2» указываем «DropDownList1».31. Запускаем проект на выполнение. Проверяем работу выпада-

ющих списков и кнопки.32. Переходим в режим конструктора страницы.33. Над элементом «TextBox2» добавляем элемент управления

«Timer1» (находится в «Панели инструментов» во вкладке «Ajax-расширения»).

34. Создаем обработчик события Timer_Tick для «Timer1». Для этого сделаем двойной щелчок мыши на элементе управления «Timer1».

81


35. В обработчике события пропишем следующий код: TextBox2.Text=DateTime.Now.ToLongTimeString();36. Переходим в режим разметки страницы.37. Помещаем «Timer1» и «TextBox2» в элемент управления

«UpdatePanel3».38. Добавляем для «UpdatePanel3» атрибут «UpdateMode» со зна-

чением «Conditional» и атрибут «ChildrenAsTriggers» со значе-нием «true». Также указываем «Timer1» в качестве триггера об-новления «UpdatePanel3». Разметка для «UpdatePanel3» после внесения изменений будет выглядеть следующим образом:

<asp : UpdatePanel ID=”UpdatePanel3” runat=”server”UpdateMode=”Conditional”

ChildrenAsTriggers=”true”> <ContentTemplate> <asp: Timer ID=”Timer1” runat=”server” OnTick=”Timer1_Tick”

Interval=”1000”> </asp:Timer> <asp:TextBox ID=”TextBox2”runat=”server”> </asp:TextBox> </ContentTemplate> <Triggers> <asp:AsyncPostBackTriggerControlID=”Timer1”/> </Triggers> </asp:UpdatePanel>39. Устанавливаем свойство «Interval» для «Timer1» равным 1000.40. Запускаем проект на выполнение. В «TextBox1» будет отобра-

жаться текущее время сервера. Обновление данного поля про-исходит с интервалом 1000 миллисекунд.

Вопросыдлясамоконтроля1. Каким образом можно привязать клиентский скрипт к событию

Click для кнопки?2. Для чего используется элемент управления «UpdatePanel»?3. Для какой цели используется тег <Triggers> в разметке элемен-

та управления «UpdatePanel»?4. Объясните назначение «свойства AutoPostBack». Что происхо-

дит при выставленном значении данного свойства в true?

82


2.9. Работа с данными в ASP.Net. Источник данных SqlSource. Представление данных посредством GridView и Details View

1. Создаем новое пустое ASP.Net-приложение. Добавляем к проекту новую базу данных. Для этого выполня-

ем следующие действия:2. Выделяем название проекта в «Обозревателе решений».3. Нажимаем правой кнопкой мыши на названии проекта. В кон-

текстном меню выбираем пункт «Добавить — Существующий элемент».

4. В открывшемся окне выбираем слева вкладку «Данные».5. В средней части окна выбираем пункт «База данных SQL

Server» (рис. 33).

Рис. 33

6. Название файла оставляем по умолчанию и нажимаем кноп-ку «Добавить».

83

2.9. Работа с данными в ASP.Net. Источник данных SqlSource.

7. Программа предложит создать папку App_Data для хранения файлов базы данных. Нажимаем «ОК».

8. В «Обозревателе решений» дважды щелкаем на название базы данных «Database1.mdf». Слева появится окно «Обозревателя серверов», в котором будет видна созданная база данных и ее структура.

9. В окне «Обозревателя серверов» щелкаем правой кнопкой мыши по пункту «Таблицы» и в контекстном меню выбираем «Доба-вить новую таблицу». Откроется конструктор таблиц.

10. Определяем столбцы таблиц как показано на рис. 34.

Рис. 34

11. Закрываем вкладку с определением таблицы, нажав на « ». Программа предложит сохранить таблицу.

12. Сохраняем таблицу как «Persons».13. Нажимаем правой кнопкой мыши на таблице «Persons» и в кон-

текстном меню выбираем пункт «Показать таблицу данных».

84


14. Заполняем таблицу данными (3–4 строки). Первый столбец вы-полняет роль счетчика и будет заполняться автоматически.

15. Закрываем таблицу. Далее используем созданную базу данных в нашем приложе-

нии. Выведем данные из базы на веб-страницу и добавим воз-можность для изменения, правки и удаления данных.

16. Добавляем к проекту новую веб-форму. Оставьте название по умолчанию.

17. Переходим в «Конструктор» формы.18. Добавляем на форму новый элемент управления SqlDataSource

из «Панели инструментов» (перетаскиваем мышкой элемент управления на форму). Если окно закрыто, выбираем в глав-ном меню пункт «Вид» и далее нажимаем на «Панель инстру-ментов».

19. Выделяем мышкой «SqlDataSource1» на форме и нажимаем на кнопку «>» (справа от элемента управления).

20. Выбираем пункт «Настроить источник данных».21. В появившемся окне выбираем из списка базу данных

«Database1.mdf» (или «ConnectionString») и нажимаем кнопку «Далее».

22. В следующем также нажимаем кнопку «Далее».23. В окне «Параметров извлечения данных» оставляем все без из-

менений (рис. 35) и нажимаем кнопку «Далее».24. В следующем окне нажимаем кнопку «Готово».25. Выделяем на форме источник данных «SqlDataSource1», нажи-

маем стрелку вправо и кнопку «Enter». Курсор окажется под элементом управления «SqlDataSource».

26. Добавляем на форму элемент управления «GridView» (щелка-ем два раза по данному элементу на «Панели инструментов» либо перетаскиваем мышью элемент управления на форму).

27. Привязываем источник данных «SqlDataSource1» к «GridView». Для этого выделяем «GridView» мышью и нажимаем на кноп-ку «>».

28. Выбираем источник данных «SqlDataSource1» из выпадающе-го списка.

29. Ставим галочки напротив опций «Включить сортировку» и «Включить выбор».

30. Запускаем проект на выполнение.

85


Рис. 35

31. Добавляем под элемент «GridView» еще один источник данных «SqlDataSource2».

32. Настраиваем второй источник данных аналогично первому ис-точнику. В процессе настройки источника данных в окне «Па-раметров извлечения данных» нажимаем на кнопку «WHERE».

33. В появившемся окне сделаем настройки согласно рис. 36.34. Нажимаем кнопку «Добавить».35. Нажимаем кнопку «ОК».36. Нажимаем кнопку «Дополнительно».37. Поставим галочку напротив опции «Создать операторы Insert,

Update и Delete».38. Нажимаем кнопку «ОК».39. Нажимаем кнопку «Далее».40. Нажимаем кнопку «Готово».

86


Рис. 36

41. Добавляем на форму под источником данных «SqlDataSource2» элемент управления «DetailsView».

42. Выделяем элемент управления «DetailsView» и нажимаем на кнопку «>».

43. В появившемся меню выбираем источник данных «SqlDataSource2».

44. Ставим галочки напротив опций «Включить вставку», «Вклю-чить правку» и «Включить удаление».

45. Запускаем проект на выполнение. Попробуйте выделить какую-либо строку, нажав на кнопку

«Выбор». Ниже появится описание выбранной строки. Изме-ним данные в любой ячейке (нажимаем кнопу «Правка») и со-храняем изменения, нажав на кнопку «Обновить». Данные в DetailsView обновляются, а в GridView — нет. Это проис-ходит потому, что в проекте не прописаны обработчики со-бытий для операций Insert, Update и Delete. Давайте пропи-шем их.

87


46. Переходим в «Конструктор» формы.47. Выделяем элемент управления «DetailsView». Нажимаем

на нем правой кнопкой мыши и в контекстном меню выбира-ем пункт «Свойства». Справа от основного окна отроется окно «Свойств».

48. В окне «Свойств» переходим на вкладку события (нажимаем на иконку с рисунком молнии (рис. 37)).

Рис. 37

49. Нажимаем два раза мышью на событии ItemUpdated. Среда разработки автоматически создаст обработчик для события из-менения данных в Базе данных.

50. В коде обработчика события пропишем следующий код: GridView1.DataBind();51. Повторяем действия пунктов 49–50 для событий ItemDeleted

и ItemInserted.52. Запускаем проект на выполнение. Производим операции Прав-

ки, Добавления и Удаления данных в базе.

Вопросыдлясамоконтроля1. Для чего нужен элемент управления «SqlDataSource»?2. Какую информацию отображает элемент управления «GridView»?3. Объясните назначение элемента управления «DetailsView». Ка-

кие операции можно произвести с данными с помощью этого эле-мента управления?

88


2.10. Работа с данными в ASP.Net. Использование технологии ADO.Net. Простая аутентификация пользователя

1. Создаем новое пустое ASP.Net-приложение. Добавляем к проекту новую базу данных. Для этого выпол-

ним следующее:2. Выделяем название проекта в «Обозревателе решений».3. Нажимаем правой кнопкой мыши на название проекта. В кон-

текстном меню выбираем пункт «Добавить — Существующий элемент».

4. В открывшемся окне выбираем слева вкладку «Данные».5. В средней части окна выбираем пункт «База данных SQL

Server» (рис. 38).

Рис. 38

6. Название файла оставляем по умолчанию и нажимаем кноп-ку «Добавить».

7. Программа предложит создать папку App_Data для хранения файлов базы данных. Нажимаем «ОК».

89

2.10. Работа с данными в ASP.Net. Использование технологии ADO.Net.

8. В «Обозревателе решений» щелкаем дважды на названии Базы данных «Database1.mdf». Слева появится окно «Обозревателя серверов», в котором будет видна созданная база данных и ее структура.

9. В окне «Обозревателя серверов» щелкаем правой кнопкой мыши по пункту «Таблицы» и в контекстном меню выбираем «Доба-вить новую таблицу». Откроется конструктор таблиц.

10. Определяем столбцы таблиц как показано на рис. 39.

Рис. 39

11. Закрываем вкладку с определением таблицы. Программа пред-ложит сохранить таблицу.

12. Сохраняем таблицу как «Items».13. Нажимаем правой кнопкой мыши на таблице «Items» и в кон-

текстном меню выбираем пункт «Показать таблицу данных».14. Заполняем таблицу данными (3–4 строки). Первый столбец вы-

полняет роль идентификатора и будет заполняться автомати-чески.

90


15. Закрываем таблицу. Далее используем созданную базу данных в нашем приложе-

нии для аутентификации пользователя при входе на сайт.16. Добавляем к проекту три новых веб-формы. Первой форме даем

название «Default.aspx». Второй — «Admin.aspx». Название тре-тьей формы оставляем по умолчанию.

17. В файле «Default.aspx» между тегами <div> и </div> размеща-ем следующую html-разметку:

<tablestyle=»margin:auto;width:210px;height:100px;»> <tr> <td> <asp:LabelID=»Label1»runat=»server»Text=»Логин»Font-Bold=»True» Font-Size=»12pt»></asp:Label> </td> <td> <asp:TextBoxID=»TextBox1»runat=»server»></asp:TextBox> /td> </tr> <tr> <td> <asp:LabelID=»Label2»runat=»server»Text=»Пароль»Font-Bold=»True» Font-Size=»12pt»></asp:Label> </td> <td> <asp:TextBoxID=»TextBox2»runat=»server»></asp:TextBox> </tr> <tr> <tdcolspan=»2»align=»center»> <asp:ButtonID=»Button1»runat=»server»Text=»Войти»Width=»100px»Font-Bold=»True»Font-Size=»12pt»/> <asp:Button ID=»Button2» runat=»server» Text=»Отправить»

Width=»100px» Font-Bold=»True»Font-Size=»12pt»/> </td> </tr> </table> <divstyle=»text-align:center;»><asp:LabelID=»Label3»runat=»server»Text=»Label»></asp:Label>

91


Представленную выше разметку можно создать двумя спо-собами:1) ввести код с клавиатуры;2) перетащить необходимые элементы управления на форму

из «Панели инструментов» и задать им указанные свой-ства.

18. В файле «WebForm1.aspx» между тегами <div> и </div> разме-щаем следующую HTML-разметку:

<h1>Вывошлина сайт</h1>19. В файле «Admin.aspx» между тегами <div> и </div> размеща-

ем следующую HTML-разметку: <h1>СтраницаАдминистратора</h1> Далее в файле логики «Default.aspx.cs» (в обработчике собы-

тия для кнопки «Войти») разместим C#-код обработки дан-ных формы, введенных пользователем. Для связи с базой дан-ных используем технологию ADO.Net.

20. Добавляем к проекту новый элемент управления «Набор дан-ных» («DataSet1.xsd»).

21. Перетаскиваем мышкой в окно «Набора данных» таблицу «Items» (рис. 40).

Рис. 40

92


22. Закрываем и сохраняем «DataSet1».23. Переходим в конструктор формы «Default.aspx».24. Дважды нажимаем мышью на кнопке «Войти». Произойдет ав-

томатический переход в файл логики страницы «Default.aspx.cs» и среда разработки создаст обработчик события нажатия на кнопку.

25. Добавляем директиву «using System.Data.SqlClient;» в верхней части кода.

26. Перед обработчиком события Button1_Click добавляем следу-ющий код:

SqlConnectioncon=newSqlConnection(@”Строкаподключения”); SqlCommandcom=newSqlCommand(); DataSet1 data=newDataSet1();27. Вместо слов «Строка подключения» необходимо добавить путь

к ранее созданной базе данных. Для этого открываем файл «Web.config» (файл находится в «Обозревателе решений»). На-ходим раздел «ConnectionString», копируем содержимое свой-ства «СonnectionString» (без кавычек) и вставляем вместо слов «Строка подключения» в коде логики страницы.

28. В обработчик события «Page_Load» добавляем следующий код: TextBox1.ToolTip=“Enterlogin”; TextBox2.ToolTip=“Enterpassword”; Label3.Text=“”;29. В обработчик события нажатия на кнопку «Button1_Click» до-

бавляем следующий код: try { if(TextBox1.Text==“Admin”&&TextBox2.Text==“Admin”) { Response.Redirect(“Admin.aspx”); } //КнопкаВойти com.CommandText=“Select*From Itemswherelogin=’“+TextBox1.

Text+“‘andpassword=’“+TextBox2.Text+“‘“; com.Connection=con; con.Open(); SqlDataAdapteradp=newSqlDataAdapter(com.CommandText,con); adp.Fill(data,“Items”);

93


varrowCount=data.Tables[“Items”].Rows.Count; if(rowCount>0) { TextBox1.Text=“”; TextBox2.Text=“”; Response.Redirect(“WebForm1.aspx”); } else { TextBox1.Text=“”; TextBox2.Text=“”; Label3.Text=“Sorry,wrongloginorpassword…”; } } finally { con.Close(); }30. Запускаем проект на выполнение.31. Проверяем работоспособность формы. Попробуйте ввести вер-

ные (или ошибочные) данные и нажать на кнопку «Войти».32. Переходим в режим конструктора для формы «Default.aspx».33. Дважды нажимаем мышью на кнопке «Отправить». Произой-

дет автоматический переход в файл логики страницы «Default.aspx.cs» и среда разработки создаст обработчик события нажа-тия на кнопку.

34. В обработчик события нажатия на кнопку «Button2_Click» до-бавляем следующий код:

//КнопкаОтправить com.CommandText=«»; SqlDataAdapteradp=newSqlDataAdapter(com.CommandText,con); Randomrnd=newRandom(); data.EnforceConstraints=false; try {

94


com.CommandText=“Insert Into Items(id,login,password)values(‘“+rnd.Next(0,1000000)+“‘,’“+TextBox1.Text+“‘,‘“+TextBox2.Text+“‘)”;

com.Connection=con; con.Open(); com.ExecuteNonQuery(); Label3.Text=“Registrationcomplited…”; TextBox1.Text=“”; TextBox2.Text=“”; } finally { con.Close(); }35. Запускаем проект на выполнение.36. Вводим данные в поля «Логин» и «Пароль» и нажимаем на кноп-

ку «Отправить».37. Пробуем зайти на сайт под логином и паролем, которые вы

только что создали.

Вопросыдлясамоконтроля1. Какой вид верстки был использован при создании формы вво-

да данных для аутентификации?2. Каким образом в представленном коде происходит проверка на пра-

вильность вводимых данных при нажатии на кнопку «Войти»?3. Какая Sql-команда используется в логике работы кнопки «От-

править»?4. Какой метод используется для перенаправления пользователя

на страницу WebForm1.aspx при правильно введенных данных?

2.11. Создание интернет-магазина в системе CMS InSales

В системах CMS все представлено в виде удобного и понятного ин-терфейса, что делает их самыми распространенными для управле-ния магазинами.

95


Остановим наш выбор на CMS InSales.InSales — уникальное для российского рынка «облачное решение», ког-

да скрипт и сам движок интернет-магазина расположены на хостинге об-служивающей компании-продавца (адрес сайта http://www.insales.ru). Удобство и простота использования в том, что достаточно просто за-регистрироваться и начать добавлять свои товары в систему. Систе-ма очень сильно расширилась за последний год работы и добавила в список функций большое количество возможностей.

1. Переходим на сайт (рис. 41).

Рис. 41

2. На главной странице описаны все плюсы данной CMS, а так-же приведены примеры сайтов, сделанных с помощью данной платформы.

3. Создаем аккаунт на сайте. Для этого вводим свой e-mail, пароль и домен. Если у вас нет своего домена, CMS InSales создаст его автоматически.

4. После регистрации предоставляется большой выбор готовых ша-блонов (рис. 42).

5. Выбираем тот шаблон, который больше подходит создаваемому ин-тернет-магазину (шаблон сайта можно поменять в любой момент).

6. После того как выбрали подходящий шаблон, нажимаем кноп-ку «Выбрать». В течение 15 секунд CMS InSales создаст основу для интернет-магазина с выбранным шаблоном (рис. 43).

96


Рис. 42

Рис. 43

7. Заполняем необходимые поля и соглашаемся с условиями ра-боты CMS InSales (рис. 44).

97


Рис. 44

2.11.1. Настройка бэк-офиса

1. После регистрации в CMS InSales попадаем в бэк-офис интер-нет-магазина (рис. 45).

Рис. 45

98


2. В бэк-офисе можно редактировать страницы сайта, а также из-менять отдельные элементы кода, настраивать дизайн, добав-лять товары, составлять клиентскую базу и т. д.

3. Чтобы начать пользоваться бэк-офисом, переходим в раздел «На-стройки» и заполняем все необходимые поля в подразделе «Кар-точка магазина», остальные поля заполняем по желанию (рис. 46).

Рис. 46

4. Переходим в раздел «Доставка».5. В нем указываем способы доставки товара. Добавляем все спо-

собы, которые будут использоваться для доставки товара.6. Добавляем все возможные способы оплаты, прикрепляя их к спо-

собам доставки.7. Переходим в раздел «Оформление заказа». В этом разделе на-

страиваем страницу, на которую переходит покупатель после того, как выбрал нужный товар (рис. 47).

8. Настраиваем все обязательные поля, а также убираем все поля, которые не нужны.

9. В разделе «Шаблон писем» можно настроить шаблоны стандарт-ных писем, а именно:1) письмо клиенту;2) уведомление о поступившем заказе;3) печатную форму заказа;4) уведомление клиента о регистрации.

99


Рис. 47

10. Изменим письма так, как считаем нужным (рис. 48).

Рис. 48

Это были основные шаги, которые нужно сделать после того, как начали работать в бэк-офисе.

100


2.11.2. Настройка дизайна интернет-магазина

1. В системе CMS InSales есть большой выбор стилей для оформ-ления интернет-магазина.

2. В бэк-офисе в правом верхнем углу нажимаем «Сайт», попада-ем на главную страницу интернет-магазина.

3. Для того чтобы изменять дизайн сайта, необходимо перейти в раздел «Дизайн» в бэк-офисе (рис. 49).

Рис. 49

4. В данном разделе можно редактировать основ-ной дизайн сайта, а также его мобильную версию, либо можно установить свой дизайн.5. Для редактирования выбранного дизайна пере-ходим в раздел «Настройка стилей» (рис. 50).6. В разделе «Слайдер» можно редактировать слай-дер главной страницы, добавлять и убирать кар-тинки, выбирать эффекты и время показа изобра-жения.7. Добавляем картинки и настраиваем слайдер так, как считаем нужным.

Рис. 50

101


8. В разделе «Сайт» можно изменять цветовую гамму сайта, на-страивать фоновое изображение, добавлять контактный теле-фон, а также ставить favicon, и изменять шрифт и размер тек-ста на сайте.

9. Добавляем фоновое изображение интернет-магазина и favicon, а также указываем контактный телефон, настраиваем цвето-вую гамму и необходимый шрифт.

10. Раздел «Шапка» предназначен для редактирования верхней части сайта.

11. Изменяем цветовую гамму шапки интернет-магазина, а так-же добавляем логотип.

12. Остальные блоки предназначены для изменения цветовой гам-мы, редактирования шрифтов на отдельных страницах. Их на-стройка производится по желанию.

13. Если необходимо более детально изменить дизайн сайта, надо перейти в раздел «Редактор HTML/CSS/JS» (рис. 51).

Рис. 5114. В разделе «Редактор HTML/CSS/JS» можно изменить опреде-

ленный фрагмент кода.

102


2.11.3. Настройка меню и страниц

1. После настройки дизайна интернет-магазина необходимо убрать ненужные страницы с сайта, а также добавить новые.

2. Для редактирования страниц сайта переходим в раздел «Меню и страницы» (рис. 52).

Рис. 52

3. Для создания новой страницы необходимо нажать кнопку «До-бавить», а затем написать название страницы в строке «Заго-ловок страницы».

4. После этого можно редактировать созданную страницу (рис. 53).5. После создания страницы ее можно добавить в шапку сайта

либо закрепить в нижнем меню. Для того чтобы редактиро-вать порядок страниц в меню, нужно нажатием на необходи-мую страницу переместить ее.

2.11.4. Добавление товара на сайт

1. Самое главное для интернет-магазина — это товар. Для его до-бавления и редактирования нужно перейти в раздел «Товары» на главной странице бэк-офиса (рис. 54).

103


Рис. 53

Рис. 54

104


2. В каталоге будут указаны примеры товаров, их нужно удалить, а затем добавить собственные товары.

3. Для добавления своего товара в разделе «Товары» нажимаем «+ товар», а затем «Новый». После этого попадем на страницу добавления нового товара (рис. 55).

Рис. 55

4. Указываем название товара.5. Добавляем описание товара.6. Загружаем изображение товара.7. Нажимаем «+ Добавить параметр» и вносим параметры товара.8. Добавляем артикул, цену и количество товара.9. Выбираем страницу, на которой будет располагаться товар, для

этого нажимаем «Изменить размещение» и выбираем нужную страницу и категорию.

10. Нажимаем кнопку «Создать и закрыть».11. После этого повторяем все действия c теми товарами, которые

необходимо разместить на сайте.

2.11.5. Первый заказ

1. После того, как настроили дизайн, а также загрузили все това-ры, осталось проверить работоспособность интернет-магазина.

105


2. Заходим на сайт интернет-магазина и выбираем один или два товара, а затем добавляем его в корзину.

3. После этого переходим в корзину и оформляем заказ (рис. 56).

Рис. 56

4. После оформления заказа нажимаем «Подтвердить заказ».5. Проверяем, появился ли заказ в разделе «Заказы», пришло ли

уведомление на электронную почту (рис. 57).

Рис. 57

106


Также можно обратиться к инструкции FAQ CMS InSales (http://support.insales.ru/hc/ru), в которой описаны более сложные процессы, связанные с системой CMS и способы их применения.

Вопросыдлясамоконтроля1. Описать алгоритм настройки бэк-офиса.2. Описать алгоритм настройки дизайна интернет-магазина.3. Описать алгоритм настройки меню и страниц.4. Описать алгоритм добавления товара на сайт и формирования

заказа.

107

список использованных источников

1. Блог InSales об интернет-продажах [Электронный ресурс]. URL: http://www.insales.ru/blog/2015/05/20/analytical-bulletin-insales-2015/(дата обращения 25.03.16).

2. Коммерческие сайты. Режим доступа: http://webmastermix.ru/raznoe/273-vidy-i-tipy-sajtov.html (дата обращения 05.04.16).

3. Шалева О. И. Электронная коммерция [Электронный ре-сурс]. URL: http://uchebnikionline.com/informatika/elektronna_komertsiya_-_shaleva_oi/organizatsiya_tehnologiya_roboti_internet-magazinu.htm (дата обращения 05.04.16).

4. Предприниматель.ру: сайт. URL: http://predprinimatel.ru/practice/n/kak_otkrit_internet-magazin (дата обращения 20.04.16).

5. Selfgrowth.ru: сайт. URL: http://selfgrowth.ru/ownbusi-ness/2014/03/bazovaya-shema-sozdaniya-internet-magazina (дата обращения 20.04.16).

6. Предприниматель.ру: сайт. UR: http://predprinimatel.ru/practice/n/postavschiki_dlya_internet-magazinov (дата обра-щения 20.04.16).

7. Академия E-pepper.ru: сайт. URL: http://edu.e-pepper.ru/kak-sozdat-sajt-dlya-internet-magazina/#4 (дата обращения 20.04.16).

8. Ideamaniya.ru: сайт. URL: http://ideamaniya.ru/575–10-svoy-internet-magazin-kak-pravilno-organizovat-dostavku-i-logistiku.html (дата обращения 10.05.16).

9. Avenuesoft.ru: сайт. URL: http://avenuesoft.ru/shop/prodvizhenie_internet_magazina.html (дата обращения 10.05.16).

Учебное издание

Медведева Марина Александровна, Медведев Максим Александрович

электронныйбизнес

Часть 1

Редактор И. Ю. ПлотниковаКорректор Е. Е. Афанасьева

Верстка О. П. Игнатьевой

Подписано в печать 09.08.2016. Формат 70×100/16.Бумага писчая. Печать цифровая. Гарнитура Century Schoolbook.

Уч.-изд. л. 6,0. Усл. печ. л. 8,7. Тираж 100 экз. Заказ 272

Издательство Уральского университета Редакционно-издательский отдел ИПЦ УрФУ620049, Екатеринбург, ул. С. Ковалевской, 5

Тел.: 8(343)375-48-25, 375-46-85, 374-19-41E-mail: [email protected]

Отпечатано в Издательско-полиграфическом центре УрФУ620075, Екатеринбург, ул. Тургенева, 4

Тел.: 8(343) 350-56-64, 350-90-13 Факс: 8(343) 358-93-06

E-mail: [email protected]

М. А. МЕДВЕДЕВАМ. А. МЕДВЕДЕВ

ЭЛЕКТРОННЫЙ БИЗНЕСЧасть 1Учебное пособие

МЕДВЕДЕВА МАРИНА АЛЕКСАНДРОВНАкандидат физико-математических наук, доцент кафедры анализа систем и принятия решений института «Высшая школа экономики и менеджмента» Уральского федерального университета, руководитель обра-зовательных программ бакалавриата и магистратуры по направлению «Бизнес-информатика». Научные интересы: математическое моделирование экологических и экономических систем, информационные тех-нологии, прикладная информатика. Автор более 70 научных статей и учебно-методических материалов.Адрес эл. почты: [email protected]

МЕДВЕДЕВ МАКСИМ АЛЕКСАНДРОВИЧкандидат экономических наук, доцент кафедры анализа систем и принятия решений института «Высшая шко-ла экономики и менеджмента» Уральского федерального университета. Научные интересы: информатика, вэб-программирование, управление базами данных и интернет-контентом. Автор более 20 научных ста-тей и учебно-методических материалов.Адрес эл. почты: [email protected]

9 7 8 5 7 9 9 6 1 7 9 3 6

I SBN 579961793 - 2

Электронный бизнес. Ч. 1 : учебное...

Documents

Transcript of Электронный бизнес. Ч. 1 : учебное...