Дипломные работы по программированию | StudHouse
  • Дипломная работа «Web-портал организации ООО «Интерьер Мастер»

    Создания веб-портала. Разработка веб-портала.

    Введение

    1.      Требования к веб-порталам коммерческих организаций

    1.1.   Роль сайтов в деятельности коммерческих организаций

    1.2.   Современные технологии создания сайтов

    1.3.   Требования к современным коммерческим сайтам

    Вывод по главе 1

    2.      Техническое задание

    2.1.   Цель и назначение

    2.2.   Технические требования

    2.3.   Требования к содержимому портала

    Вывод по главе 2

    3.      Анализ существующего сайта ООО «Интерьер Мастер»

    3.1. Структура существующего веб-портала ООО «Интерьер Мастер»

    3.2. Управление содержимым на сайте

    3.3. Навигация по сайту

    Вывод по главе 3

    4. Реализация веб-портала для ООО «Интерьер Мастер»

    4.1.   Выбор технологии создания веб-портала

    4.2.   СУБД для реализации проекта

    4.3.   Определение структуры данных

    4.4.   Сущности структуры данных

    4.5.   Разработка веб-портала

    Вывод по главе 4

    5.      Расчет параметров системы

    5.1.   Анализ времени отклика

    5.2. Расчет надежности по формуле Миллса

    5.3. Расчет объема памяти

    5.4. Расчет оперативной памяти

    Заключение

    Список использованной литературы

    Приложения

    Глоссарий

    CMS (Content Management System) — система управления содержимым. Информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления содержимым.

    CSS – Cascading Style Sheets – каскадные таблицы стилей.

    ER ДИАГРАММЫ – графическая нотация визуализации данных ER модели.

    HTML – HyperText Markup Language – «язык гипертекстовой разметки».

    HTTP – HyperText Transfer Protocol – «протокол передачи гипертекста».

    IDE – Integrated Development Environment – интегрированная среда разработки.

    JAVASCRIPT – встроенный в интернет браузер процедурный язык программирования.

    MVC (Model-View-Controller) — шаблон, широко применяемый в web-программировании, предназначенный для разделения бизнес-логики и пользовательского интерфейса, чтобы разработчик мог менять отдельные части приложения, не затрагивая другие.

    MySQL –  Свободная реляционная система управления базами данных.

    PHP – PHP (Personal Home Page): Hypertext Preprocessor.

    SQL (Structured Query Language) — язык структурированных запросов. Непроцедурный язык программирования, применяемый для создания, модификации и управления данными в произвольной реляционной базе данных.

    АЛГОРИТМ — последовательность действий, которая приводит к решению поставленной задачи. Алгоритмы для ЭВМ удобнее составлять в виде блок-схемы.

    ВЕБ-ДИЗАЙН – проектирование и разработка внешнего вида интернет сайтов и пользовательского интерфейса веб-приложений.

    ВЕБ-ПРОГРАММИРОВАНИЕ – направление в программировании, ориентированное на разработку приложений для сети интернет (веб-приложений).

    ВЕБ-САЙТ, ИНТЕРНЕТ-САЙТ (Web site) – основной вид ресурсов всемирной паутины, представляющей собой совокупность веб-страниц, созданных на основе языка разметки HTML и объединенных общим доменным именем.

    ВЕБ-СЕРВИС, ВЕБ-СЛУЖБА (Web service) – вид программного обеспечения, предоставляющего свою функциональность клиентам на уровне программных интерфейсов, построенных на базе HTTP протокола.

    ДАННЫЕ — информация, представленная в такой форме, которую можно распознать автоматическому устройству или человеку.

    ИНТЕРПРЕТАТОР — специальная программа, которая последовательно преобразует по смыслу каждый отдельный оператор программы и исполняет его.

    КОММЕНТАРИЙ — фрагмент программы, предназначенный для восприятия ее человеком. При вводе в ЭВМ игнорируется.

    РЕЛЯЦИОННАЯ БАЗА ДАННЫХ — база данных, основанная на реляционной модели данных.

    СИСТЕМА УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ (СУБД) – программное обеспечение (информационная система), осуществляющее весь спектр операций по управлению базами данных, к которым относятся сама организация хранения данных, обработка инструкций SQL, организация резервного копирования, восстановление резервных копий и т.п.

    СЦЕНАРИЙ — программа, работающая с готовыми программными компонентами.

    ЯЗЫК ПРОГРАММИРОВАНИЯ — искусственный язык для представления программ в виде, «понятном» ЭВМ.

    Введение

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

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

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

    Цель работы: создание веб-портала для ООО «Интерьер Мастер».

    Задачи работы:

    • изучить требования к веб-порталам коммерческих организаций;
    • разработать техническое задание на разработку сайта;
    • проанализировать существующий сайт ООО «Интерьер Мастер»;
    • реализовать веб-портал для ООО «Интерьер Мастер»;
    • рассчитать параметры созданного сайта.

    1.      Требования к веб-порталам коммерческих организаций

    1.1.   Роль сайтов в деятельности коммерческих организаций

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

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

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

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

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

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

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

    Постоянный контакт с потенциальными клиентами и партнёрами позволяет мгновенно реагировать на движения рынка и корректировать маркетинговую стратегию и тактику компании. Благодаря системам сбора статистики владелец сайта получает подробные отчёты о посещениях (и посетителях) сайта (рис. 1.1).

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

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

    Отчеты посещений сайта (Yandex.Metrica)
    Рисунок 1.1 – Отчеты посещений сайта (Yandex.Metrica)

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

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

    1.2.   Современные технологии создания сайтов

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

    Система управления контентом (Content management system, CMS)[1] – это программный продукт, а точнее автоматизированная система обработки и управления информацией, позволяющая разрабатывать как статические, так и динамические web-сайты/web-порталы и управлять ими за счет разделения процессов создания содержимого web-сайтов/web-порталов и механизмов публикации и форматизации содержимого в Интернете.

    Основными задачами, которые решают современные CMS, являются следующие[2]:


    [1] Матросов А. В. HTML 4.0/ А.В. Матросов, А.О. Сергеев, М.П. Чаунин. – СПб.: Питер, 1999. – 224 с. Обзор свободных скриптов для интернет-магазинов [Электронный ресурс] / Компьютерные вести. – 2013. — № 018. – Режим доступа: http://www.kv.by/content/324834-obzor-svobodnykh-skriptov-dlya-internet-magazinov (дата обращения 14.05.2017)

    [2] Обзор свободных скриптов для интернет-магазинов [Электронный ресурс] / Компьютерные вести. – 2013. — № 018. – Режим доступа: http://www.kv.by/content/324834-obzor-svobodnykh-skriptov-dlya-internet-magazinov (дата обращения 14.05.2017)

    1. Автоматизация всего цикла разработки и публикации web-приложений в Интернете;
    2. Автоматическое изменение представлений содержимого страниц web-портала в сети, обеспечивая возможность реализации различных дизайнов преставления страниц за счет использования разных шаблонов отображения информации, плюс возможность широкого использования шаблонов, созданных другими разработчиками;
    3. Разграничение пользовательских полномочий, что позволяет осуществлять независимую настройку web-портала под представления разных категорий пользователей, включая возможность ведения персональных странниц;
    4. Возможность создания web-портала внутри web-портала, что позволяет создавать сложные web-порталы;
    5. Простота редактирования и создание информации для web-портала;
    6. Возможность автоматически модернизировать web-портал к новым стандартам Интернета;
    7. Возможность разрешения или запрета публикации информации без удаления ее из системы;
    8. Возможность интеграции и использования средств управления проектами по разработке web-приложений;
    9. Масштабируемость, что позволяет развивать системы путем подключения программных расширений от разных разработчиков;
    10. Многоязычность, возможность автоматического перевода и поддержки web-портала для разной национальной целевой аудитории;
    11. Поддержка разных версий сайта;
    12. Обеспечение возможности продвижения web-портала в Интернете путем подстройки к механизмам поисковых систем типа Yandex, Rambler, Google, и др.

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

    CMS снижает зависимость стоимости разработки сайта от объема информации, размещенной на нем[1].


    [1] Там же

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

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

    В таблице 1 приведена статистика использования CMS в мировом Интернете согласно исследованию компании Q-Success (Software Quality Management Consulting) на сайте World Wide Web Technology Surveys[1].


    [1] Usage of content management systems for websites [Электронный ресуср] / Режим доступа: https://w3techs.com/technologies/overview/content_management/all (дата обращения 03.05.2017)

    Таблица 1

    НаименованиеИспользование
    WordPress27,9%
    Joomla3,3%
    Drupal2,2%
    Blogger1,1%
    Shopify0,7%
    Распространенные CMS в 2017 году

    Как видно из таблицы 1, самой распространённой CMS в мировой практике Интернета является WordPress. Joomla и Drupal находятся на 2 и 3 местах, со значительным отрывом от WordPress.

    Если провести анализ отечественного Интернета, то получим подобные результаты. Результаты рейтинга CMS по версии компании iTrack[1] представлены в таблице 2.


    [1] Официальный сайт фирмы iTrack [Электронный ресурс]. Режим доступа: http://itrack.ru/research/cmsrate/ (дата обращения 03.05.2017)

    Таблица 2

    НаименованиеИспользование
    WordPress37,16%
    Joomla20,04%
    1С-Битрикс9,48%
    MODx5,4%
    Drupal4,43%
    OpenCart3,37%
    DataLife Engine3,36%
    Wix1,95%
    Прочие26,46%
    Рейтинг CMS в доменной зоне ru в 2017 году

    Как видно из таблицы, популярность WordPress и Joomla в отечественном Интернете в отличие от мирового почти одинаковая.

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

    Таблица 3

    НаименованиеИспользование
    PHP81,9%
    ASP.NET16,9%
    Java3%
    ColdFusion0,7%
    Ruby0,6%
    Самые распространенные языки программирования на web-серверах

    Из таблицы 3 видно, что самым популярным языком программирование является PHP, который оставляет далеко позади прочие языки программирования web-приложений.

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

    Таблица 4

    НаименованиеИспользование
    Apache57,1%
    Nginx24,6%
    Microsoft-IIS13,2%
    LiteSpeed2,2%
    Google Servers1,3%
    Распространенные web-сервера

    1.3.   Требования к современным коммерческим сайтам

    К современным корпоративным сайтам предъявляются следующие требования:

    • единое внешнее оформление для всех генерируемых страниц (цветовая гамма, символика организации, пространственное расположение элементов страниц);
    • единая и гибкая структура сайта;
    • единообразие навигации по сайту, наличие карты сайта;
    • удобочитаемость и интуитивная ясность генерируемых ссылок;
    • минимальные затраты на поддержку, администрирование и развитие сайта;
    • наличие внешней (пользовательской) и внутренней (корпоративной) частей сайта;
    • возможность заполнения страниц с использованием Web-браузера, минимальные требования к аппаратно-программной оснащенности рабочего места;
    • возможность посещения сайта с помощью всего множества существующих браузеров;
    • наличие гибко настраиваемой системы безопасности (аутентификация пользователей, авторизация доступа к структурным и информационным элементам, возможность работы в защищенных сеансах (SSL, PKI));
    • возможность оценки и контроля степени актуальности предоставляемой информации (отображение даты последнего изменения и ответственного за раздел);
    • распределенность источников информации;
    • тесная интеграция с существующими средствами автоматизации делопроизводства и учета;
    • открытость встроенных программных средств, возможность обращения к открытым программным средствам сторонних производителей (технологии Java VM, COM, CORBA);
    • возможность функционирования сайта в кластерном режиме (масштабируемость, отказоустойчивость и распределение нагрузки);
    • возможность полнотекстового поиска по выбранным разделам или по сайту в целом;
    • высокая производительность обслуживания пользователей.

    Вывод по главе 1

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

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

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

    2.      Техническое задание

    Техническое задание на разработку web-портала ООО «Интерьер Мастер».

    2.1.   Цель и назначение

    Цель:

    Целью данной выпускной квалификационной работы является разработка проекта web-портала ООО «Интерьер-Мастер».

    Назначение сайта:

    1. Обеспечение стабильной работы портала при высокой нагрузке на сервер;
    2. Организация возможности навигации по страницам сайта разного уровня посредством не более чем 3 переходов;
    3. Возможность возврата на предыдущий уровень с помощью одного клика;
    4. Возможность перехода на главную страницу посредством 1 клика;
    5. Организация способов защиты размещенной на портале информации от не контролированной модификации и удаления;
    6. Обеспечение возможности резервного копирования базы данных и содержимого портала с частотой – 1 раз в 10 дней,1 раз в 3 месяца и 1 раз в год. Сохранение резервных копий за 10 дней на протяжении 1 года, за 3 месяца – на протяжении 2 лет. Готовые резервные копии сохраняются на протяжении 3 лет;
    7. Возможность удобного просмотра содержимого web-портала в разных браузерах и на разных устройствах.

    2.2.   Технические требования

    При создании проекта необходимо реализовать:

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

    Технические требования к сайту:

    • серверная платформа: CentOS 7, Apache, PHP, MySQL;
    • приятный и запоминающийся дизайн;
    • легкое восприятие дизайна;
    • привлекательность элементов оформления;
    • простота и понятность навигации;
    • совместимость под различные типы браузеров;
    • расширения функционала за счет дополнительных модулей;
    • возможность простого дальнейшего наращивания в структуре сайта;
    • модуль учета статистики посещений.

    Web-портал должен стабильно и бесперебойно работать на сервере (VPS) со следующими аппаратными и программными характеристиками:

    Аппаратная часть: ОЗУ — 2048 МБ;

    CPU: 2 ядра * 2 ГГц;

    Объём дискового пространства — 20 Гб (с возможностью расширения);

    Сетевой адаптер с поддержкой Gygabit Ethernet 1000BASE-T;

    Обеспечить стабильной работы портала при нагрузке на сервер, в 400 запросов в сутки.

    Программная часть: ОС: CentOS 7.

    PHP — не ниже 5.5 версии.

    Сервер SQL — MySQL не ниже 5.5.

    2.3.   Требования к содержимому портала

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

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

    Вывод по главе 2

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

    3.      Анализ существующего сайта ООО «Интерьер Мастер»

    3.1. Структура существующего веб-портала ООО «Интерьер Мастер»

    Структура сайта ООО «Интерьер Мастер» иерархическая. С главной страницы сайта можно перейти в страницы подразделов, а со страниц подразделов на страницы записей (рис. 3.1).

    Структура сайта ООО «Интерьер Мастер»
    Рисунок 3.1 – Структура сайта ООО «Интерьер Мастер»

    3.2. Управление содержимым на сайте

    Так как сайт является статическим, административной панели в нем нет. Для управления содержимым сайта ООО «Интерьер Мастер» используется текстовый редактор Notepad++ и визуальный редактор кода — Adobe Dreamweaver.

    Notepad++ — текстовый редактор, предназначенный для программистов (рис. 3.2).

    Основные особенности программы:

    • подсветка текста и возможность сворачивания блоков, согласно синтаксису языка программирования;
    • поддержка большого количества языков (C, C++, Java, XML, HTML, PHP, Java Script, ASCII, VB/VBS, SQL, CSS, Pascal, Perl, Python, Lua, TCL, Assembler);
    • WYSIWYG (печатаешь и получаешь то, что видишь на экране)
    • настраиваемый пользователем режим подсветки синтаксиса;
    • авто-завершение набираемого слова;
    • одновременная работа с множеством документов;
    • одновременный просмотр нескольких документов;
    • поддержка регулярных выражений поиска/замены;
    • полная поддержка перетягивания фрагментов текста;
    • динамическое изменение окон просмотра;
    • автоматическое определение состояния файла;
    Окно программы Notepad++
    Рисунок 3.2 — Окно программы Notepad++
    • увеличение и уменьшение;
    • WYSIWYG (печатаешь и получаешь то, что видишь на экране)
    • настраиваемый пользователем режим подсветки синтаксиса;
    • авто-завершение набираемого слова;
    • одновременная работа с множеством документов;
    • одновременный просмотр нескольких документов;
    • поддержка регулярных выражений поиска/замены;
    • полная поддержка перетягивания фрагментов текста;
    • динамическое изменение окон просмотра;
    • автоматическое определение состояния файла;
    • увеличение и уменьшение;
    • заметки;
    • выделение скобок при редактировании текста;

    запись макроса и его выполнение[1].


    [1]Редактор для создания сайтов —  Adobe Dreamweaver 1 [Электронный ресурс] / Режим доступа: http://archicad-autocad.com/dreamweaver/dreamweaver.html (дата обращения 7.06.2017).

    Визуальный редактор для создания сайтов — Adobe Dreamweaver (рис. 3.3).

    Окно программы Dreamweaver
    Рисунок 3.3 — Окно программы Dreamweaver

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

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

    Система Adobe Dreamweaver может работать с различными технологиями, полностью поддерживается JavaScript, ASP, XML, Adobe ColdFusion и PHP. Существует официальное добавление, позволяющее создавать Ajax-приложения. Теперь не нужно искать специализированные продукты, чтобы получить информацию из RSS, работать с базами данных или создавать различные визуальные эффекты, на программном уровне.

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

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

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

    Существенно экономит время новая функция для быстрого извлечения изображений, оптимизированных для Интернета, из документов Adobe Photoshop в формате PSD. Впервые разработана и внедрена панель DOM для легкой навигации и редактирования элементов страниц HTML. Использован предпросмотр цветов и изображений в реальном времени в представлении «Код» и многое другое. Все эти нововведения вместе с русскоязычным интерфейсом программы делает создание сайтов быстрым и удобным.

    3.3. Навигация по сайту

    Навигация по сайту определяет, на какую страницу попадет пользователь при нажатии ссылки. На рис. 3.4 показана навигация по сайту ООО «Интерьер Мастер».

    Навигация по сайту
    Рисунок 3.4 – Навигация по сайту

    Вывод по главе 3

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

    4. Разработка концепции веб-портала для ООО «Интерьер Мастер»

    4.1.   Выбор технологии создания веб-портала

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

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

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

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

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

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

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

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

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

    Для создания полнофункциональных PHP-сценариев требуется обеспечить сохранение данных на веб-сервере. Это можно реализовать сохранением информации в файле, и для простых сценариев такой метод вполне приемлем. Но для сложных, профессиональных сценариев применяются более развитые средства — базы данных, обеспечивающие хранение и извлечение данных любого типа по специальным запросам. Эти запросы формируются на специальном языке, называемом SQL (Structured Query Language — язык структурированных запросов). SQL — это международный стандартный язык для работы с базами данных.

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

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

    Корни языка PHP лежат в языках Perl, Java и C. Однако в отличие от этих языков PHP изначально был разработан как язык программирования, специально предназначенный для написания веб-приложений (сценариев), исполняющихся на веб-сервере. В этом состоит его преимущество, поскольку его средства позволяют быстро и эффективно создавать полнофункциональные веб-приложения.

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

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

    В программе поддерживаются передовые технологии веб-разработки, включая PHP, HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMA Script Harmony, шаблоны Jade, ZenCoding, Emmet, JavaScript.

    4.2.   СУБД для реализации проекта

    Реляционная база данных – база данных, основывающаяся на реляционной модели. Слово «реляционный» происходит от английского слова «relation» (отношение). Для работы с реляционными базами данных применяют реляционные системы управления базами данных. Использование реляционных баз данных было предложено в 1970 году доктором Коддом, работающим в компании IBM[1].

    Реляционная модель организует данные в виде двумерных таблиц. Каждая реляционная таблица, представляющая собой двумерный массив, должна обладать следующими свойствами[2]:


    [1] Маклафлин Б. PHP и MySQL. Исчерпывающее руководство [Текст] / Б. Маклафлин. – СПб.: Питер, 2014. – 544 с.

    [2] Жуков Р. А. СУБД с открытым исходным кодом: возможность применения алгоритмов распараллеливания / Р. А. Жуков // Технические науки. – 2015. – № 1–2 (35–36). – С. 20 – 21.

    1) каждый элемент таблицы представляет собой только один элемент данных;

    2) все ячейки в столбце таблицы являются однородными – все элементы столбца должны иметь одинаковый тип (INT, FLOAT, VARCHAR и т. д.);

    3) каждый столбец имеет уникальное имя, идентифицирующее данный столбец;

    4) в таблице не может быть одинаковых строк;

    5) порядок следования строк и столбцов произволен.

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

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

    Кроме этого, реляционную модель данных реализуют так называемые настольные базы данных, такие как dBASE, FoxPro, Clarion, Paradox, Access. Практически все ведущие настольные базы данных в настоящее время поддерживают возможность работы в качестве клиентов серверов баз данных при помощи технологий ODBC, BDE, ADO и др.

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

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

    Ключи таблицы могут состоять из одного поля – такие ключи называют атомарными или простыми ключами. Ключи могут состоять из нескольких полей — составные ключи. Таблица базы данных может иметь один ключ или несколько ключей. Один из ключей назначают в качестве первичного ключа, а остальные называют потенциальными (в теории реляционных баз данных) или альтернативными (в конкретных реализациях некоторых баз данных)[1].

    Часто используют суррогатные первичные ключи – это ключи, состоящие из поля (или полей), которые не несут информации из предметной области, а служат заменой (суррогатом) для естественного (натурального) первичного ключа. В качестве суррогатных ключей чаще всего используются счетчики (генераторы, последовательности) autoincrement или глобально–уникальные идентификаторы (GUID). Правильно разработанная структура базы данных должна удовлетворять специальным правилам, которые базируются на теории отношений и называются нормальными формами[2].

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

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

    Таким образом, нормализация не ставит цель уменьшения или увеличения производительности работы или же уменьшения, или увеличения объёма базы данных. Конечная цель нормализации – уменьшение потенциальной противоречивости, хранимой в БД информации. Нормализация применима к таблице, которая представляет собой правильное отношение.


    [1] Маклафлин Б. PHP и MySQL. Исчерпывающее руководство [Текст] / Б. Маклафлин. – СПб.: Питер, 2014. – 544 с.

    [2] Коцюба И. Ю. Основы проектирования информационных систем. Учебное пособие / И. Ю. Коцюба, А. В. Чунаев, А. Н. Шиков. – СПб: Университет ИТМО, 2015. – 206 с.

    Выбор СУБД для реализации информационной системы – это довольно сложный процесс, который требует навыков, знаний и внимания профессионала в этой области. Неправильный выбор СУБД может заблокировать процесс реализации данной технологии, а замена СУБД может стоить слишком дорого.

    СУБД относится к очень сложной части программного обеспечения, которую трудно понять во всей полноте и является жизненно важной для определения критериев, которые могут быть использованы администратором базы данных в процессе их отбора. Многие практики–разработчики баз данных в своих работах отмечают, что выбор критериев использования СУБД заключается в первичном анализе организационных потребностей и необходимых функций СУБД. Практики-разработчики выделяют ряд факторов выбора СУБД для реализации задачи, в частности[1]:

    • требования к применению (это ограничение, которые вводятся в базу данных в приложении);
    • функции и инструменты СУБД (встроенный набор инструментов, который помогает облегчить задачу разработки приложений);
    • модели СУБД (иерархические, сетевые, реляционные, объектно–ориентированные);
    • переносимость СУБД (системы и языки программирования, платформы)
    • требования СУБД к оборудованию (минимальная скорость процессора, объем оперативной памяти, дискового пространства и т.д.);
    • стоимость СУБД (затраты на приобретение и обслуживание, эксплуатационные расходы, стоимость лицензий, затраты на установку, стоимость обучения и преобразования расходов);
    • сохранение целостности данных (защита данных в базе данных от несанкционированного доступа, изменения или уничтожения данных).

    В качестве СУБД для реализации web-портала ООО «Интерьер Мастер» выбрана MySQL. СУБД MySQL (Structured Query Language) является одной из самых популярных СУБД на сегодняшний день. СУБД MySQL рационально подходит к решению сложных задач. С помощью СУБД MySQL можно реализовать высоко функциональные системы.


    [1] Дронов, В. А. PHP, MySQL, HTML5 и CSS3. Разработка современных динамических Web–сайтов / В. А. Дронов. – СПб.: BHV, 2016. – 688 c.

    К преимуществам СУБД MySQL относится:

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

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

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

    Для системы управления реляционными базами данных скорость – время, затрачиваемое на выполнение запроса и возврат результатов тому, кто его совершает, – это решающий показатель. По любым меркам MySQL является производительной системой, которая зачастую оказывается на порядок быстрее решений конкурентов. Тесты производительности, доступные на сайте MySQL, свидетельствуют о том, что MySQL опережает почти все прочие системы управления базами данных, доступные в настоящее время, включая коммерческие аналоги вроде Microsoft SQL Server 2000 и IBM DB2.

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

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

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


    [1] Мустафаева Э. И. Использование СУБД MySQL для разработки информационно–справочной системы «Рекреационные ресурсы города Евпатории» [Электронный ресурс] / Э. И. Мустафаева, Ф. В. Шкарбан – Электрон. текстовые дан. – Режим доступа: http://eztuir.ztu.edu.ua/123456789/1037.

    [2] Мустафаева Э. И. Использование СУБД MySQL для разработки информационно–справочной системы «Рекреационные ресурсы города Евпатории» [Электронный ресурс] / Э. И. Мустафаева, Ф. В. Шкарбан – Электрон. текстовые дан. – Режим доступа: http://eztuir.ztu.edu.ua/123456789/1037.

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

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

    MySQL поддерживает большинство важных требований стандарта ANSI SQL (ANSI — American National Standards Institute (Американский национальный институт стандартов)) и часто позволяет дополнять его пользовательскими расширениями, функциями и типами данных, которые призваны улучшить переносимость и обеспечить расширенную функциональность для потребителей.

    MySQL является полноценной многопользовательской системой, а это означает, что множество клиентов могут одновременно получать доступ и использовать одну (или более) базу данных MySQL. Это особенно важно при разработке веб–приложений, которые должны поддерживать одновременное подключение множества удаленных клиентов. MySQL включает также мощную и гибкую систему привилегий, позволяющую администраторам защищать доступ к критическим данным, используя комбинацию из схем проверки подлинности пользователей и хостов[1].


    [1]Зудилова, Т. В. Web-программирование HTML / Т. В. Зудилова, М. Л. Буркова — СПб: НИУ ИТМО, 2012.– 70 с.

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

    MySQL предусматривает наличие интерфейсов программирования приложений API (Application Programming Interfaces) на множестве языков, что дает возможность создавать управляемые базами данных приложения на множестве языков программирования. В настоящее время MySQL позволяет работать с такими языками, как C, C++, Eiffel, Java, Perl, PHP, Python, Ruby и Tcl, имеются также коннекторы для JDBC–, ODBC– и .NET–приложений.

    4.3.   Определение структуры данных

    Рисунок 4.1 — Логическая модель базы данных

    4.4.   Сущности структуры данных

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

    В таблицах 6, 7, 8, 9 показана структура таблиц базы данных.

    Таблица 6

    Название поляФормат данныхАвтоинкрементКлючОписание
    idIntegerДаПервичныйИдентификатор
    firstnameVarchar (100)НетИмя
    lastnameVarchar (100)НетФамилия
    emailVarchar (100)НетЭл. почта
    questionVarchar (255)НетВопрос
    dateDateНетДата
    Структура полей таблицы «Contactform»

    Таблица 7

    Название поляФормат данныхАвтоинкрементКлючОписание
    idIntegerДаПервичныйИдентификатор
    Subject_idIntegerНетВнешнийИдентификатор категории
    Menu_nameVarchar (200)НетНазвание
    positionIntegerНетПозиция
    vivsibleTinyint (1)НетВидимость
    contentTextНетДата
    Структура полей таблицы «Pages»

    Таблица 8

    Название поляФормат данныхАвтоинкрементКлючОписание
    idIntegerДаПервичныйИдентификатор
    usernameVarchar (50)НетЛогин
    hashed_passwordVarchar (60)НетПароль
    Структура полей таблицы «Admins»

    Таблица 9

    Название поляФормат данныхАвтоинкрементКлючОписание
    idIntegerДаПервичныйИдентификатор
    Menu_nameVarchar (30)НетНазвание
    positionIntegerНетПозиция
    vivsibleTinyint (1)НетВидимость
    Структура полей таблицы «Subjects»

    На рис. 4.2 показана физическая модель базы данных.

    Физическая модель базы данных
    Рисунок 4.2 — Физическая модель базы данных

    SQL-запрос создания базы данных для веб-портала:

    CREATE SCHEMA IF NOT EXISTS `imaster` DEFAULT CHARACTER SET utf8 ;

    USE `imaster` ;

    — ——————————————————

    — Table `imaster`.`admins`

    — ——————————————————

    CREATE TABLE IF NOT EXISTS `imaster`.`admins` (

      `id` INT(11) NOT NULL AUTO_INCREMENT,

      `username` VARCHAR(50) NOT NULL,

      `hashed_password` VARCHAR(60) NOT NULL,

      PRIMARY KEY (`id`))

    ENGINE = InnoDB

    AUTO_INCREMENT = 5

    DEFAULT CHARACTER SET = utf8;

    — ——————————————————

    — Table `imaster`.`subjects`

    — ——————————————————

    CREATE TABLE IF NOT EXISTS `imaster`.`subjects` (

      `id` INT(11) NOT NULL AUTO_INCREMENT,

      `menu_name` VARCHAR(30) CHARACTER SET ‘utf8’ NOT NULL,

      `position` INT(3) NOT NULL,

      `visible` TINYINT(1) NOT NULL,

      PRIMARY KEY (`id`))

    ENGINE = InnoDB

    AUTO_INCREMENT = 13

    DEFAULT CHARACTER SET = utf32;

    — ——————————————————

    — Table `imaster`.`pages`

    — ——————————————————

    CREATE TABLE IF NOT EXISTS `imaster`.`pages` (

      `id` INT(11) NOT NULL AUTO_INCREMENT,

      `subject_id` INT(11) NOT NULL,

      `menu_name` VARCHAR(200) NOT NULL,

      `position` INT(3) NOT NULL,

      `visible` TINYINT(1) NOT NULL,

      `content` TEXT NULL DEFAULT NULL,

      PRIMARY KEY (`id`),

      INDEX `subject_id` (`subject_id` ASC),

      CONSTRAINT `fk_pages_subjects`

        FOREIGN KEY (`subject_id`)

        REFERENCES `imaster`.`subjects` (`id`)

        ON DELETE NO ACTION

        ON UPDATE NO ACTION)

    ENGINE = InnoDB

    AUTO_INCREMENT = 13

    DEFAULT CHARACTER SET = utf8;

    — ——————————————————

    — Table `imaster`.`contactform`

    — ——————————————————

    CREATE TABLE IF NOT EXISTS `imaster`.`contactform` (

      `id` INT(11) NOT NULL AUTO_INCREMENT,

      `firstname` VARCHAR(100) NOT NULL,

      `lastname` VARCHAR(100) NOT NULL,

      `email` VARCHAR(100) NOT NULL,

      `question` VARCHAR(255) NOT NULL,

      `date` DATE NOT NULL,

      PRIMARY KEY (`id`),

      UNIQUE INDEX `iduser_UNIQUE` (`id` ASC))

    ENGINE = InnoDB

    DEFAULT CHARACTER SET = utf8;

    Вывод по главе 4

    В процессе работы над созданием веб-портала для ООО «Интерьер Мастер» была спроектирована база данных, разработана структура приложения, создан код приложения. В качестве языка программирования был использован PHP, в качестве СУБД – MySQL. Средой разработки послужила программа – PHPStorm. В качестве локального сервера – Open Server.

    5.      Разработка веб-портала ООО «Интерьер Мастер»

    На сайте ООО «Интерьер Мастер» для организации контента используется язык гипертекстовой разметки HTML. Язык гипертекстовой разметки HTML служит для наглядного и хорошо структурированного представления информации в сети Интернет.

    Данные в формате HTML похожи на текстовой файл, за исключением того, что некоторые из символов интерпретируются как разметка. Разметка придает документу некую структуру.

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

    <имя_тега [возможные параметры]>

    Чтобы указать браузеру место окончания действия того или иного тега, используется закрывающий тег. Это тег, имеющий то же самое имя с прямым слешем ‘/’ перед ним/

    <html>

    HTML-документ

    </html>

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

    <img src=»image.gif»> — тег для вывода изображения image.gif в окно браузера;

    <input type=»text» value=»»> — тег для ввода значений в окне браузера.

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

    Как и в любом языке программирования, язык HTML имеет теги для создания комментариев внутри документа, т.е. текст, который имеется в документе, но не выводится браузером на экран. Для создания комментариев используется следующая пара тегов:

    <!— Это комментарий —>

    Имеется ряд тегов, для которых завершающие теги опускаются большинством авторов документов. Например, тег <p> (начало абзаца), как правило, не имеет в документе завершающего тега </p>. Его завершение определяется браузером по «ходу» документа, например, если встретится очередной открывающий тег <p>.

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

    При создании HTML-документов рекомендуется соблюдать следующую структуру:

    html>

    <head>

    <!— Раздел заголовка —>

    </head>

    <body>

    <!— Тело документа —>

    </body>

    </html>

    Здесь <html> — это тег, обозначающий начало HTML-документа. Браузер, встретивший данный тег, будет «знать», что представленную ниже информацию следует интерпретировать как HTML-страницу.

    HTML-документ рекомендуется всегда завершать закрывающим тегом </html> и тем самым сигнализировать браузеру о завершении документа. Это полезная информация может быть использована, например, при обрыве связи во время загрузки страницы. Тогда отсутствие тега </html> может означать неполную загрузку страницы. На практике встречается и много других случаев, когда важно иметь корректную разметку страницы для исключения неверного отображения содержания документа в исключительных ситуациях.

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

    Для создания заголовков в HTML используются теги:

    <h1></h1> — заголовок 1 уровня;

    <h2></h2> — заголовок 2 уровня;

    <h3></h3> — заголовок 3 уровня;

    <h4></h4> — заголовок 1 уровня;

    <h5></h5> — заголовок 1 уровня;

    <h6></h6> — заголовок 1 уровня.

    HTML есть возможность создавать нумерованные и маркированные списки.

    Тег <ol>…</ol> — создает нумерованный список элементов/

    Атрибуты:

    start=»N» — начать нумерацию с числа N;

    type=»…» -определяет формат нумерации:

    1 — арабские цифры (по умолчанию);

    A — прописные буквы (A, B, C);

    а — строчные буквы (a, b, c);

    I — прописные римские цифры (I, II, III);

    i — строчные римские цифры (i, ii, iii).

    Тег <ul>…</ul> — создает маркированный список элементов.

    Атрибут:

    type=»…» — определяет формат маркера:

    disk — диск (по умолчанию);

    circle – окружность;

    square – квадрат.

    <li>…</li> — задает элемент списка в нумерованном или маркированном списке

    Атрибуты:

    type=»…» — формат номера или маркера (см. описание <ol> и <ul>);

    value=»N» — задает номер элемента списка.

    Для создания ссылок используется тег <a>…</a>.

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

    Абсолютный адрес содержит в себе имя хоста и полный путь к ресурсу, например: http://www.example.com/docs/about.html. С помощью абсолютного адреса можно ссылаться на любой открытый ресурс в Интернете. Если нужно поставить ссылку на главную страницу сайта, указывают его адрес и слеш.

    В браузере ссылка обычно представляется как подчеркнутый текст. При клике по ссылке браузер загружает страницу, указанную в атрибуте href.

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

    Для открытия ссылки в новом окне используется атрибут target со значением _blank.

    Для придания сайту внешнего вида использована технология каскадных таблиц стилей – CSS.

    Ключевое понятие в CSS — селектор — представляет собой правило для использования стиля. Браузер для каждого элемента пытается применить стиль в соответствии с заданным правилом. Стиль содержит набор свойств.

    Различают простые селекторы, которые будут использованы для указанного элемента, в приведенном ниже примере — к любому заголовку h1, h2, h3:

    • h1 {font-family:sans-serif}
    • h2 {font-family:sans-serif}
    • h3 {font-family:sans-serif}

    Селекторы групп:

    h1, h2, h3 {font-family: sans-serif}

    Этот фрагмент эквивалентен предыдущему фрагменту, состоящему из трех простых фрагментов.

    Селекторы класса:

    *.firstclass{ color: green } — все элементы, имеющие class=firstclass

    или

    .firstclass{ color: green } — все элементы, имеющие class=firstclass

    а также

    Hl.firstclass{ color: green } — только элементы H1, имеющие class=firstclass

    Селекторы идентификатора ID:

    • h1#chapter1 { font-family: sans-serif } — для <h1 id=»chapter1″>…</h1>
    • #chapter1 { font-family: sans-serif } — для любого элемента с id=»chapter1″

    Селекторы атрибутов:

    • h1[class] { font-family: sans-serif } — элемент имеет class

    — h1[class=»fancy»] { font-family: sans-serif } — элемент имеет class=»fancy»

    — *[title] { font-family: sans-serif } — любой элемент, имеющий заголовок

    Селектор потомков (устанавливает иерархию применения):

    tr h1 { font-family: sans-serif } — <tr><td><h1>…</h1></td></tr>

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

    • a:link — ссылки, которые не были посещены
    • a:visited — посещенные ссылки
    • a:hover — выделенная в данный момент ссылка
    • a:active — активные ссылки.

    При оформлении страницы доступны следующие семейства (family) шрифтов:

    —        Serif — шрифт с засечками. Обычно используется при бумажной печати. Наиболее используемый шрифт — Times;

    —        Sans-serif — шрифт без засечек. Подходит для заголовков. Наиболее часто применяемые шрифты этого семейства — Arial, Helvetica, Verdana;

    —        Monospace — шрифт, который обеспечивает равную ширину символов. Служит для вывода примеров кода, поскольку внешний вид этого текста будет соответствовать текстовой консоли. Наиболее распространен шрифт Courier;

    —        Fantasy, Cursive — декоративные и курсивные шрифты. Не рекомендуются к применению, поскольку шрифты этой группы необязательно присутствуют в компьютере, на котором будут просматривать html-страницу.

    Выбор шрифта осуществляется свойством font-family

    Свойство font-family может содержать перечисление шрифтов:

    p{font-family:”Times New Roman”, Times, serif;}

    В этом случае браузер последовательно будет пытаться найти соответствующий шрифт в системе. Если конкретный шрифт не будет найден (в примере «Times New Roman”, Times), то будет применен шрифт, назначенный для serif-семейства по умолчанию[1].


    [1]Матросов А. В. HTML 4.0/ А.В. Матросов, А.О. Сергеев, М.П. Чаунин. – СПб.: Питер, 1999. – 224 с. Обзор свободных скриптов для интернет-магазинов [Электронный ресурс] / Компьютерные вести. – 2013. — № 018. – Режим доступа: http://www.kv.by/content/324834-obzor-svobodnykh-skriptov-dlya-internet-magazinov (дата обращения 14.05.2017)

    Можно указать начертание шрифта с использованием свойства font-style.

    Размер шрифта задается с помощью свойства font-size. Свойство color задает цвет шрифта (рис. 6, 7). Можно указать цвет по его названию на английском языке (red, green, lime) или задать точное значение цвета в системах RGB, HSL, а также в RGBA, HSLA, для которых добавлен канал прозрачности.

    Выбор цветовой схемы является очень важным этапом создания дизайна сайта. Фон элементов может быть задан однородным цветом, одиночным или мозаично расположенным.

    Используются следующие свойства фона:

    • background-color — однородный цвет константой или кодом в одной из допустимых систем цветности.
    • background-image — фоновое изображение.
    • background-repeat — флаг мозаичного размножения изображения.

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

    В соответствии с блочной моделью для любого элемента имеются область самого элемента (content), внутренние поля (padding), рамка или граница (border), внешние границы (margin). Для каждой области может быть задан размер. Наличие внутреннего поля позволяет сформировать рамку на заданном расстоянии от содержимого элемента; наличие внешнего поля — установить отступ между рядом расположенными элементами.

    В CSS любой элемент имеет свойства width и height, которые устанавливают размер «содержимого» элемента в процентах, пикселах. Кроме того, значения этих свойств могут быть вычислены.

    Размер отступа задается свойствами ‘padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’ или единственным свойством padding, которому указывается один общий размер отступа или последовательно отступ сверху, справа, снизу, слева.

    Граница представляет собой видимое обрамление элемента с указанным начертанием, цветом и толщиной. Граница может быть задана единственным свойством border или отдельно для каждой стороны блока: ‘border-top’, ‘border-right’, ‘border-bottom’, ‘border-left’. Указываются толщина, тип начертания границы и цвет.

    При расчете размеров блока необходимо помнить про толщину границы. Внешнее прозрачное поле может быть задано либо единственным свойством ‘margin’ с указанием одинакового размера границы для всех сторон, либо перечислением размеров по каждой из сторон, либо с использованием свойств ‘margin-top’, ‘margin-right’, ‘margin-bottom’, ‘margin-left’ для каждой из сторон в отдельности. Пример:

    • body { margin: 2em }
    • body { margin: 1em 2em }
    • body { margin:1em 2em 3em }
    • body {margin-top: 1em; margin-right: 2em;}

    CSS поддерживает 4 вида позиционирования:

    • статическое (static);
    • абсолютное (absolute);
    • относительное (relative);
    • фиксированное (fixed).

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

    Статическое позиционирование устанавливается для всех элементов по умолчанию и означает нормальное следование элементов. В явном виде спецификатор static применяется для перекрытия унаследованных стилей.

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

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

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

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

    img {float: right; padding: 15px;}

    Плавающее размещение иногда применяют к блокам, содержащим меню и прочие средства навигации.

    Перед началом создания проекта, необходимо создать проект в программе PHPStorm (рис. 5.1). Проект должен быть размещен в папке на локальном сервере, который предоставляет возможность запускать на выполнение PHP-скрипты. В процессе разработки веб-портала для ООО «Интерьер Мастер» был использован локальный сервер «Open Server».

    Создание проекта в среде разработки
    Рисунок 5.1 — Создание проекта в среде разработки
    Создание файлов для проекта
    Рисунок 5.2 — Создание файлов для проекта

    После создания файлов проекта, файловая структура приложения приобретает вид, указанный на рис. 5.3.

    Далее укажем за что отвечают файлы проекта:

    • admin.php – административная панель;
    • db_connect.php – соединение с базой данных;
    • delete_admin.php – удаление администраторов;
    • edit_admin.php – редактирование администраторов;
    • footer.php – нижняя часть сайта;
    • functions.php – файл с функциями;
    • header.php – верхняя часть сайта;
    • index.php – главная страница;
    • login.php – вход в систему;
    • logout.php – выход из системы;
    Структура проекта
    Рисунок 5.3 – Структура проекта
    • manage_admins.php – управление админами;
    • new_admin.php – добавление нового администратора;
    • session.php – файл сессии;
    • validation_functions.php – функции валидации заполнения форм.

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

    Для проекта необходима база данных. После выполнения запроса, показанного в подразделе 4.4, создается база данных (рис. 5.4).

    База данных проекта
    Рисунок 5.4 — База данных проекта

    Ниже приведен код соединения с базой данных (рис. 5.5), который находится в файле db.connect.php.

    <?php

    define («DB_SERVER», «localhost»);

    define («DB_USER», «root»);

    define («DB_PASS», «»);

    define («DB_NAME», «imaster»);

    $connection = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_NAME);

      // Проверка соединения

      if(mysqli_connect_errno()) {

        die(«Database connection failed: » .

             mysqli_connect_error() .

             » (» . mysqli_connect_errno() . «)»

        );

      }

    Подключение к безе данных проекта
    Рисунок 5.5 — Подключение к безе данных проекта

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

    Создание кода формы добавления категории
    Рисунок 5.6 – Создание кода формы добавления категории
    Обработчик добавления категории на сайт
    Рисунок 5.7 – Обработчик добавления категории на сайт

    На рис. 5.8 показан внешний вид формы добавления категории. Стилизация формы осуществлена при помощи bootstrap 3. Предусмотрена возможность выбора позиции добавляемой категории, а также видимости для пользователей сайта.

    Форма добавления категории
    Рисунок 5.8 – Форма добавления категории

    После нажатия кнопки «Создать категорию», при успешной записи в базу данных, будет выведено сообщение «Успешно добавлено» (рис. 5.9).

    Уведомление об успешном добавлении категории
    Рисунок 5.9 – Уведомление об успешном добавлении категории

    Запись с новой категорией в базе данных показана на рис. 5.10.

    Запись в базе данных
    Рисунок 5.10 – Запись в базе данных

    Дальнейшим этапом разработки системы управления контентом веб-портала для ООО «Интерьер Мастер» является создание формы для добавления записей и ее обработчика, который размещен в том же файле, перед формой (рис. 5.11).

    Создание формы добавления статьи на сайт
    Рисунок 5.11 – Создание формы добавления статьи на сайт

    Внешний вид формы добавления записи на сайт показан на рис. 5.12.

    Форма добавления статьи на сайт
    Рисунок 5.12 — Форма добавления статьи на сайт

    Внешний вид добавленного материала в публичной части сайта показан на рис. 5.13.

    Отображение добавленной статьи на странице сайта
    Рисунок 5.13 – Отображение добавленной статьи на странице сайта

    Поля ввода, прежде чем отправить информацию в базу данных, необходимо проверить, для этого реализуем валидацию форм, которая будет очищать и проверять форму. Создадим функцию проверки в полях ввода формы. Для проверки данных, введенных в форму создадим функцию — validation.function.php (рис. 5.14, 5.15):

    Отображение ошибки при заполнении формы
    Рисунок 5.14 – Отображение ошибки при заполнении формы
    Функция validation.function.php для проверки полей ввода в форме
    Рисунок 5.15 – Функция validation.function.php для проверки полей ввода в форме

    Для создания административной части сайта необходимо реализовать вход и выход на сайт. Файл login.php будет отвечать за вход (рис. 5.16) на сайт, logout.php – за выход из сайта, страница администратора – admin.php (рис. 5.17).

    Страница входа в систему
    Рисунок 5.16 – Страница входа в систему
    Страница администратора
    Рисунок 5.17 – Страница администратора
    Страница управления администраторами
    Рисунок 5.18 – Страница управления администраторами

    На рис. 5.19 показан код формы авторизации на сайте и ее обработчика (рис. 5.20), которые находятся в одном файле.

    Код формы авторизации на сайте
    Рисунок 5.19 – Код формы авторизации на сайте
    Обработчик формы авторизации на сайте
    Рисунок 5.20 – Обработчик формы авторизации на сайте

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

    Подключение файлов таблиц стилей осуществляется в файле header.php.

    Подключение таблицы стилей к файлу
    Рисунок 5.21 – Подключение таблицы стилей к файлу

    После настройки стилей, внешний вид сайта приобретает приятный минималистичный дизайн в светлых тонах (рис. 5.22).

    Внешний вид сайта
    Рисунок 5.22 – Внешний вид сайта

    Вывод по главе 5

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

    6.      Расчет параметров системы

    6.1.   Анализ времени отклика

    Для определения скорости загрузки страниц сайта использованы возможности сайта — loadimpact.com. На рис. 5.1 показаны результаты проверки сайта.

    Время загрузки страниц веб-портала (https://loadimpact.com)
    Рисунок 6.1 – Время загрузки страниц веб-портала (https://loadimpact.com)

    Как видно по результатам проверки сервисом https://loadimpact.com скорость загрузки страниц созданного сайта находится в пределах 938 мс — 1,68 с.

    Проверка сайта с помощью https://webmaster.yandex.ru показала результат, представленный на рис. 5.2.

    Проверка отклика сервисом https://webmaster.yandex.ru
    Рисунок 5.2 – Проверка отклика сервисом https://webmaster.yandex.ru

    6.2. Расчет надежности по формуле Миллса

    Соотношение искусственных и естественных ошибок в работе программы называется формулой Миллса:

    Где:

    S – количество искусственно внесенных ошибок;

    N – количество найденных собственных ошибок;

    V – количество обнаруженных к моменту оценки искусственных ошибок.

    Таблица 10

    ОшибкиКоличество
    S – количество искусственно внесенных ошибок9
    N – количество найденных собственных ошибок4
    V – количество обнаруженных к моменту оценки искусственных ошибок.  8
    Количество ошибок при тестировании программы

    N = 9 * 4 / 8 = 4,5.

    6.3. Расчет объема памяти

    Расчет объема внешней памяти осуществляют по формуле:

    Где:

    VВП – общий объем внешней памяти;

    VОС – объем внешней памяти. Хранит файлы ОС.

    VСУБД – объем внешней памяти, который требуется для хранения базы данных;

    Vданных — объем внешней памяти для хранения записей базы данных;

    Vпрограммы – объем внешней памяти, который необходим для хранения приложения.

    Веб-сайт ООО «Интерьер Мастер» установлен на сервере под управлением CentOS 7. Используемая СУБД MySQL 5.5, сервер – apache 2.4, версия PHP – 5.5.

    Объем внешней памяти ОС – 2 Гб, объем СУБД – 56 Мб.

    Таблица 11

    Таблица БДРазмер записи, КиБMax количество записейРазмер индекса, байтИтого, байт
    admins161000240018400
    contactform325000024000001840000
    pages32500024000184000
    subjects161200288010080
    Итого:2052480
    Расчет объема памяти

    Таким образом, VВП = 2048 + 56 + 1,96 + 1,86 = 2108 Мб или 2,06 Гб.

    6.4. Расчет оперативной памяти

    Таблица 12

    Таблица БДРазмер записи, КиБMax количество записейРазмер индекса, байтИтого, байт
    admins161002401840
    contactform325000240000184000
    pages32500240018400
    subjects161202882208
    Итого:206448
    Расчет объема оперативной памяти

    Таким образом, VОЗУ = 32 + 128 + 0,1 + 1,86 = 162 Мб.

    Заключение

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

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

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

    В процессе работы над созданием веб-портала для ООО «Интерьер Мастер» была спроектирована база данных, разработана структура приложения, создан код приложения. В качестве языка программирования был использован PHP, в качестве СУБД – MySQL. Средой разработки послужила программа – PHPStorm. В качестве локального сервера – Open Server. Созданный динамический сайт позволяет добавлять категории и записи в категории через административную панель. В административной панели пользователю предоставлена возможность управлять записями, а также возможность удалять и назначать новых администраторов системы.

    Список использованной литературы

    1. Вайсфельд М. Объектно-ориентированное мышление / М. Вайсфельд. — СПб.: Питер, 2014. — 304 с.
    2. Вальчевский А. С. Технология системы управления контентом [Электронный ресурс] / А. С. Вальчевский, Е. Б. Никитин // http://belisa.org.by/pdf/PTS2005/219-220.pdf (дата обращения 29.04.2017)
    3. Вересников, Ю. К. О надежности систем обработки информации / Ю. К. Вересников //Актуальные проблемы современной науки. — 2011. — № 2 (58). — С. 193-195.
    4. Дронов, В. А. PHP, MySQL, HTML5 и CSS3. Разработка современных динамических Web–сайтов / В. А. Дронов. – СПб.: BHV, 2016. – 688 c.
    5. Елиферов В. Г. Бизнес-процессы: регламентация и управление: / Елиферов В. Г., Репин В. В.: ИНФРА-М, 2011 г. — 319 с.
    6. Жуков Р. А. СУБД с открытым исходным кодом: возможность применения алгоритмов распараллеливания / Р. А. Жуков // Технические науки. – 2015. – № 1–2 (35–36). – С. 20 – 21.
    7. Завдстра М. РНР: объекты, шаблоны и методики программирования, 4-е изд. Пер. с англ. / М. Завдстра — М.: ООО «И.Д. Вильяме», 2015. — 576 с.
    8. Зудилова, Т. В. Web-программирование HTML / Т. В. Зудилова, М. Л. Буркова — СПб: НИУ ИТМО, 2012.– 70 с.
    9. Коцюба И. Ю. Основы проектирования информационных систем. Учебное пособие / И. Ю. Коцюба, А. В. Чунаев, А. Н. Шиков. – СПб: Университет ИТМО, 2015. – 206 с.
    10. Кузнецов, М. В. PHP на примерах / М. В. Кузнецов, И. В. Симдянов. – СПб.: BHV, 2012. – 400 c.
    11. Курзыбова Я. В. Средства создания динамических web-сайтов: учеб. пособие / Я. В. Курзыбова. – Иркутск: Изд-во ИГУ, 2011. – 121 с.
    12. Маклафлин Б. PHP и MySQL. Исчерпывающее руководство [Текст] / Б. Маклафлин. – СПб.: Питер, 2014. – 544 с.
    13. Мартовой А. В. Сущность и основные характеристики электронного бизнеса, электронной коммерции, электронного и интернет-маркетинга / А. В Мартовой // Проблемы материальной культуры. — С. 146 – 153.
    14. Маторин С. И. Информационные системы: Учебно-практическое пособие / С. И. Маторин, О. А. Зимовец–Белгород: Изд-во НИУ БелГУ, 2012. – 231 с.
    15. Матросов А. В. HTML 4.0/ А.В. Матросов, А.О. Сергеев, М.П. Чаунин. – СПб.: Питер, 1999. – 224 с. Обзор свободных скриптов для интернет-магазинов [Электронный ресурс] / Компьютерные вести. – 2013. — № 018. – Режим доступа: http://www.kv.by/content/324834-obzor-svobodnykh-skriptov-dlya-internet-magazinov (дата обращения 14.05.2017)
    16. Мустафаева Э. И. Использование СУБД MySQL для разработки информационно–справочной системы «Рекреационные ресурсы города Евпатории» [Электронный ресурс] / Э. И. Мустафаева, Ф. В. Шкарбан – Электрон. текстовые дан. – Режим доступа: http://eztuir.ztu.edu.ua/123456789/1037.
    17. Обзор свободных скриптов для интернет-магазинов [Электронный ресурс] / Компьютерные вести. – 2013. — № 018. – Режим доступа: http://www.kv.by/content/324834-obzor-svobodnykh-skriptov-dlya-internet-magazinov (дата обращения 14.05.2017)
    18. Официальный сайт фирмы iTrack [Электронный ресурс]. Режим доступа: http://itrack.ru/research/cmsrate/ (дата обращения 03.05.2017)
    19. Приступа В. В. Подход к выбору технологии создания динамического сайта [Электронный ресурс] / В. В. Приступа. — Режим доступа: http://www.repository.hneu.edu.ua/jspui/bitstream/123456789/6097/29/sect3_Prystupa.pdf (дата обращения 8.06.2017
    20. Сотник И. Н. Информационно-коммуникационные технологии как направление социально-экономических трансформаций при переходе к информационному обществу / И. Н. Сотник, О. Н. Волк // Современные тенденции управления политическим и социально-экономическим развитием территорий: [монография]; под ред. Минаковой И.В., Мельника Л.Г. — Орел: АПЛИТ. — 2013. — С. 222-234.
    21. Титков А. В. Создание веб-приложений: учебное пособие / А. В. Титков, С. А. Черепанов. — Томск: Эль Контент, 2014. — 72 с.
    22. Филлипов С. А. Основы современного веб-программирования: Учебное пособие / С. А. Филлипов. – М.: НИЯУ МИФИ, 2011. – 160 с.
    23. Шинкевич А. В. Современные технологии создания web-сайтов / А. В. Шинкевич // Проблемы и перспективы современной науки: сб. ст. участников V Респ. науч.-практ. семинара молодых ученых, Минск, 28 нояб. 2014 г. / редколл: В. В. Гедранович [и др.]; Минский ун-т управления. – Минск: Минский университет управления, 2015. – С. 110–114.
    24. Янк К. РНР и MySQL. От новичка к профессионалу / К. Янк. — М.: Эксмо, 2013. — 384 с.
    25. PhpStorm – интегрированная среда разработки на PHP [Электронный ресурс] / Режим доступа: http://jetbrains.ru/products/phpstorm/ (05.06.2017).
    26. Usage of content management systems for websites [Электронный ресуср] / Режим доступа: https://w3techs.com/technologies/overview/content_management/all (дата обращения 03.05.2017).
    27. WordPress official website, [Электронный ресурс]. Режим доступа: http://wordpress.org/ (дата обращения 29.04.2017).

    Купить данную работу или заказать подобную

  • Выпускная квалификационная работа «Сайт основной общеобразовательной школы п. Журавли»

    Проектирование и разработка сайта. Веб-сайт. Технологии создания сайта. База данных. Оптимизация.

    Оглавление

    Введение

    1. СОВРЕМЕННЫЕ ТЕХНОЛОГИИ СОЗДАНИЯ САЙТОВ

    1.2 Анализ современных инструментов и средств для создания сайтов

    1.2 Статические и динамические сайты, особенности и отличия

    1.3 Системы управления контентом в автоматизации управления сайтом

    2. ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА САЙТА ШКОЛЫ

    2.2 Выбор СУБД для разработки сайта

    2.3 Проектирование и средства проектирования базы данных     

    2.4 Среда разработки сайта, ее особенности и возможности        

    2.5 Проектирование информационной структуры сайта     

    2.6 Создание сайта школы    

    2.6.1 Язык программирования сайта       

    2.6.2 Организация внешнего вида сайта  

    2.6.3 Размещение сайта на хостинге        

    3. ОПТИМИЗАЦИЯ И СОВЕРШЕНСТВОВАНИЕ СОЗДАННОГО САЙТА 

    3.1 Инструменты для анализа сайта        

    3.2 Оптимизация страниц сайта     

    3.3 Разработка и внедрение формы обратной связи на сайт

    3.3.1 Создание формы для обратной связи       

    3.3.2 Организация подключения и записи данных из формы в базу данных  

    3.3.3 Вывод данных из формы обратной связи на экран     

    3.4 Проверка функционирования формы обратной связи   

    Заключение        

    Список использованной литературы      

    Приложение А   

    Приложение Б    

    Приложение В    

    Введение

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

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

    Глобальное развитие информационных технологий привело в последнее десятилетие к их стремительному проникновению в сферу образования. В школе изменилось понятие обучения: усвоение знаний уступает место умению пользоваться информацией, получать ее из различных источников. Учительству следует осознавать, что сейчас, в условиях развития постиндустриального общества, происходит интеграция образовательной среды в глобальное информационное пространство, и, если будут упущены определенные шаги в данном направлении, то такой важный институт, как школа может остаться вне рамок развития современного общества [11].

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

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

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

    Целью работы является создание сайта образовательного учреждения.

    Исходя из вышеописанной цели составим следующие задачи:

    — изучить современные технология создания сайтов;

    — определить особенности построения и функционирования систем управления содержимым;

    — создать сайт школы.

    Объект работы: технологии создания сайтов.

    Предмет работы: сайт школы.

    Структура работы. Работа состоит из введения, трех глав, заключения, списка использованных источников.

    1. СОВРЕМЕННЫЕ ТЕХНОЛОГИИ СОЗДАНИЯ САЙТОВ

    1.2 Анализ современных инструментов и средств для создания сайтов

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

    Первое, что необходимо определить на самом раннем этапе, — это на каком языке будет реализована серверная часть сайта. PHP — один из самых распространённых языков программирования общего назначения, который был создан специально для создания динамических веб-сайтов. Однако для некоторых веб-проектов может быть более уместно использовать такие языки программирования, как Java, C#, Python, Ruby и множество других.

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

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

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

    3. Фреймворк управления контентом — это каркас для создания системы управления контентом. Основное различие CMS и CMF в том, что CMS — это, по сути, готовая система, которая зачастую даже не требует вмешательства программиста, тогда как CMF — конструктор CMS (в том числе и узкоспециализированных) непосредственно для программиста. Сайт, реализованный на CMF, может иметь более простую архитектуру и административную часть и быть менее требовательным к ресурсам сервера. Грамотно спроектированный фреймворк, который был выбран в соответствии с требованиями конкретного веб-проекта при наличии уже готовых модулей, требует от разработчика лишь правильной установки и настройки.

    Помимо серверной части, у любого веб-сайта есть и «клиентская» сторона — то, как страницы веб-сайта будут отображаться в браузере пользователя, зашедшего на сайт. Современные тенденции в этой области — использование последних технологий и возможностей HTML5 и CSS3, адаптивный веб-дизайн (в том числе большое внимание уделяется отображению на мобильных устройствах) и ориентация прежде всего на контент сайта (простота, удобство чтения, доступность информации).

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

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

    CSS 3 — это новый стандарт оформления HTML-документов, значительно расширяющий возможности предыдущего стандарта. Многие возможности, которые были труднодоступны в CSS 2.1, т. е. требовали использования дополнительных внешних программ при создании дизайна (например, графических редакторов), скриптов (таких как JavaScript) или специальных «хитростей», могут легко достигаться в CSS 3 за счет использования новых свойств оформления. Спецификация CSS 3 официально еще не появилась, хотя значительную часть ее элементов уже поддерживают многие последние версии браузеров [22].

    Валидность и соответствие исходного кода страниц стандартам W3C — важнейшие составляющие поисковой оптимизации сайта. Большое количество ошибок и невалидный, плохо оптимизированный код могут заметно снизить скорость загрузки сайта и затруднить доступ к информации на сайте. Корректность кода HTML [28] помогает достигнуть такой важной части оптимизации сайта как кроссбраузерность, т. е. одинаковое отображение ресурса во всех популярных браузерах. Абсолютное большинство сайтов имеют программные ошибки и невалидный код. Многим сайтам желательно провести оптимизацию скорости загрузки страниц.

    1.2    Статические и динамические сайты, особенности и отличия

    Все методы разработки веб-сайтов можно условно поделить на две группы. К первой группе относятся методы создания сайтов ручного написания с использованием языка разметки HTML и различных языков программирования. Для написания статического сайта достаточно сочетания HTML и CSS. Но если необходим более сложный, динамический сайт, то тут подключают языки программирования. Основными языками программирования, которые наиболее часто используются для разработки сайтов, являются PHP, Javascript, APS.NET [13].

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

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

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

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

    Все статические сайты созданы с помощью языка гипертекстовой разметки HTML. Язык гипертекстовой разметки HTML служит для наглядного и хорошо структурированного представления информации в сети Интернет [10].

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

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

    — уменьшение роли вмешательства администратора путем автоматизации создания контента сайта и предоставления структурированной информации по запросу;

    — вся информация легко каталогизируется с использованием специализированных баз данных или простых хранилищ;

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

    — выполнение различных пользовательских действий: размещение заказов, вычисление сложных арифметических действий и работа с информацией из базы данных;

    — идентификация пользователя по предоставленной им информации и отображение интерфейса, настроенного в соответствии с его предпочтениями;

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

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

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

    Структура динамического веб-сайта
    Рисунок 1.1 — Структура динамического веб-сайта

    База данных — структурированный упорядоченный набор данных. Система управления базами данных (СУБД) — программа, предназначенная для организации и ведения базы данных.

    MySQL — бесплатная свободно-распространяемая СУБД. Данные в базе MySQL хранятся в форме таблиц. При создании таблицы задаются ее столбцы, дальнейшие манипуляции (добавление, изменение, удаление) производятся со строками. Для управления базой данных используется язык SQL.

    Язык PHP имеет встроенные функции для работы с MySQL и многими другими базами данных. Это позволяет хранить в базе данных пользователей, сообщения, содержание страниц, статистику сайта и т.п. При запросе страницы PHP обращается к базе данных, получает необходимые данные и на основе их формирует ответ пользователю (чаще всего это HTML страница) (рис. 1.2) [8].

    Схема работы сервера СУБД
    Рисунок 1.2 – Схема работы сервера СУБД

    PHP — скриптовый язык, работающий на стороне сервера и представляющий своеобразное дополнение к нему. Этот язык позволяет не просто отправлять браузерам точные копии запрашиваемых файлов, но и запускать небольшие программки для выполнения разных задач — PHP-скрипты [19].

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

    Трехкомпонентная архитектура веб-приложений, реализуемых на языке PHP
    Рисунок 1.3 — Трехкомпонентная архитектура веб-приложений, реализуемых на языке PHP

    1.3    Системы управления контентом в автоматизации управления сайтом

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

    В таблице 1.1 приведена статистика использования CMS в мировом Интернете согласно исследованию компании Q-Success (Software Quality Management Consulting) на сайте World Wide Web Technology Surveys.

    Таблица 1.1 — Самые распространенные CMS

    НаименованиеИспользование
    WordPress24,1%
    Joomla2,8%
    Drupal2,1%
    Blogger1,1%
    Magento1,1%
    Другие67,7%
    Самые распространенные CMS

    Как видно из таблицы 1, самыми распространенными CMS в мировой практике Интернета являются WordPress, Joomla и Drupal.

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

    Таблица 1.2 — Самые распространенные языки программирования на web-серверах

    НаименованиеИспользование
    PHP80,5%
    ASP.NET15,3%
    Java2,7%
    ColdFusion0,7%
    Другие0,8%
    Самые распространенные языки программирования на web-серверах

    Из таблицы 1.2 видно, что самым популярным языком программирование является PHP, который оставляет далеко позади прочие языки программирования web-приложений.

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

    Таблица 1.3 — Самые распространенные web-сервера

    НаименованиеИспользование
    Apache57,1%
    Nginx24,6%
    Microsoft-IIS13,2%
    LiteSpeed2,2%
    Google Servers1,3%
    Другие1,6%
    Самые распространенные web-сервера

    Если провести анализ отечественного Интернета, то получим подобные результаты. Результаты рейтинга CMS по версии компании iTrack [16] представлены в таблице 1.4.

    Таблица 1.4 — Рейтинг CMS в доменной зоне ru по версии компании iTrack

    НаименованиеИспользование
    WordPress31,06%
    Joomla24,40%
    1С-Битрикс8,20%
    Drupal5,56%
    MODx4,90%
    DataLife Engine4,37%
    uCoz3,38%
    OpenCart2,82%
    WebAsyst Shop-Script1,56%
    UMI.CMS1,22%
    Другие12,53%
    Рейтинг CMS в доменной зоне ru по версии компании iTrack

    Как видно из таблицы, популярность WordPress и Joomla в отечественном Интернете в отличие от мирового почти одинаковая.

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

    Обе системы используют хорошо зарекомендовавшую СУБД MySQL. В тоже время список поддерживаемых СУБД у Joomla шире, чем у WordPress. СУБД являются реляционными и используют язык программирования SQL. Стоит также отметить тот факт, что Joomla в отличие от WordPress позволяет работать с PostgreSQL, что позволяет студентам получать практические навыки по применению объектно-ориентированных СУБД в Интернете.

    Используемая в процессе разработки сайтов теория и практика проектирования автоматизированных систем обработки и управления информации [9] хорошо применима в случае использования Joomla и WordPress.

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

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

    2. ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА САЙТА ШКОЛЫ

    2.2 Выбор СУБД для разработки сайта

    Выбор СУБД для реализации определенной задачи – это довольно сложный процесс, который требует навыков, знаний и внимания профессионала в этой области. Неправильный выбор СУБД может заблокировать процесс реализации данной технологии, а замена СУБД может стоить слишком дорого.

    Выделяют ряд факторов выбора СУБД для реализации задачи, в частности [4]:

    – требования к применению (это ограничение, которые вводятся в базу данных в приложении);

    – функции и инструменты СУБД (встроенный набор инструментов, который помогает облегчить задачу разработки приложений);

    – модели СУБД (иерархические, сетевые, реляционные, объектно–ориентированные);

    – переносимость СУБД (системы и языки программирования, платформы)

    – требования СУБД к оборудованию (минимальная скорость процессора, объем оперативной памяти, дискового пространства и т.д.);

    – стоимость СУБД (затраты на приобретение и обслуживание, эксплуатационные расходы, стоимость лицензий, затраты на установку, стоимость обучения и преобразования расходов);

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

    СУБД MySQL (Structured Query Language) является одной из самых популярных СУБД на сегодняшний день. СУБД MySQL рационально подходит к решению сложных задач. С помощью СУБД MySQL можно реализовать высоко функциональные системы.

    К преимуществам СУБД MySQL относится:

    – упрощение ввода записей;

    – упрощение поиска записей;

    – гибкость поиска записей;

    – гибкость вывода записей;

    – доступ к записям многопользовательский;

    – возможность передачи записей в электронном виде.

    MySQL представляет собой высокопроизводительную многопоточную и многопользовательскую систему управления реляционными базами данных, основанную на архитектуре «клиент–сервер». За последние годы эта мощная, надежная и дружественная к пользователю система управления базами данных стала стандартом для использования как в деловой, так и в личной сфере во многом благодаря ее продвинутому набору инструментов для управления данными, мягкой политике лицензирования и общемировой поддержке со стороны сообщества, куда входят как простые пользователи, так и серьезные разработчики [4].

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

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

    MySQL поддерживает большинство важных требований стандарта ANSI SQL и часто позволяет дополнять его пользовательскими расширениями, функциями и типами данных, которые призваны улучшить переносимость и обеспечить расширенную функциональность для потребителей. MySQL поддерживается как операционными системами UNIX, так и отличными от них, включая Linux, Solaris, FreeBSD, OS/2, MacOS, Windows 95, 98, Me, 2000, XP, NT и Vista, и может функционировать на различных архитектурах, среди которых Intel x86, Alpha, SPARC, PowerPC и IA64.

    MySQL является полноценной многопользовательской системой, а это означает, что множество клиентов могут одновременно получать доступ и использовать одну (или более) базу данных MySQL. Это особенно важно при разработке веб–приложений, которые должны поддерживать одновременное подключение множества удаленных клиентов. MySQL включает также мощную и гибкую систему привилегий, позволяющую администраторам защищать доступ к критическим данным, используя комбинацию из схем проверки подлинности пользователей и хостов [12].

    MySQL предусматривает наличие интерфейсов программирования приложений API (Application Programming Interfaces) на множестве языков, что дает возможность создавать управляемые базами данных приложения на множестве языков программирования. В настоящее время MySQL позволяет работать с такими языками, как C, C++, Eiffel, Java, Perl, PHP, Python, Ruby и Tcl, имеются также коннекторы для JDBC–, ODBC– и .NET–приложений.

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

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

    2.3    Проектирование и средства проектирования базы данных

    Разработка базы данных ведется в три этапа [7]:

    1) Концептуальное проектирование – представляет собой сбор, анализ и редактирование требований к данным, которое состоит из следующих пунктов:

    – исследование предметной области, актуализация ее информационной структуры;

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

    – моделирование и интеграция всех пользовательских представлений.

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

    2) Логическое проектирование– процесс преобразования требований к данным в структуре данных. На выходе получается СУБД–ориентированная структура базы данных и спецификации прикладных программ. На этом этапе могут моделироваться базы данных относительно различных СУБД и производиться сравнительный анализ моделей.

    3) Физическое проектирование – определение особенностей хранения данных, методов доступа и т.д.

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

    Более подробно остановимся на уровнях проектирования базы данных. Так, концептуальный уровень (представление аналитика)– это сущности, атрибуты, связи. Концептуальная модель – это модель, которая отображает знания специалиста в предметной области об ее объектах и их взаимосвязях, процессах и результатах деятельности. На этом этапе могут быть использованы тексты, таблицы, графики, графы, блок–схемы.

    Концептуальная модель изучаемой предметной области, должна представлять собой модель, в которой в содержательной форме описывается состав системы, ее компоненты и их взаимосвязи, перечень основных показателей, переменных, как контролируемых, так и неконтролируемых внешних факторов. А также их взаимосвязей с показателями качества системы, перечень решений, которые необходимо определить в результате решения поставленной задачи [14].

    Логический уровень (представление программиста) это записи, элементы данных, связи между записями.

    Большинство современных подходов к проектированию баз данных базируется на использовании разновидностей так называемой ER–модели. Моделирование предметной области основывается на использовании графических диаграмм, которые включают небольшое число компонентов разного рода [3].

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

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

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

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

    Физическая модель данных должна соответствовать описанию данных в базе данных конкретной системы управления базами данных, то есть схеме данных. Специфика конкретной системы управления базами данных включает в себя ограничения на именование объектов базы данных, ограничения на поддерживаемые типы данных. Помимо этого, специфика конкретной системы управления базами данных при физическом проектировании включает выбор решений, которые связанны с физической средой хранения данных (выбор методов управления дисковой памятью, разделение БД по файлам и устройствам, методов доступа к данным), создание индексов [1].

    Для проектирования базы данных справочной системы предназначена среда MySQL Workbench. Она используется для визуального проектирования баз данных и управления сервером MySQL.

    Функционал программы:

    −    программа позволяет наглядно представить модель базы данных в графическом виде;

    −    наглядный, функциональный механизм установки связей между таблицами, в том числе «многие ко многим» с созданием таблицы связей;

    −    восстановление структуры таблиц из уже существующей на сервере БД (связи восстанавливаются в Inno DB, при использовании My ISAM – связи необходимо устанавливать вручную);

    −    удобный редактор SQL запросов, позволяющий сразу же отправлять их серверу и получать ответ в виде таблицы;

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

    2.4    Среда разработки сайта, ее особенности и возможности

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

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

    В программе поддерживаются передовые технологии веб-разработки, включая PHP, HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMA Script Harmony, шаблоны Jade, ZenCoding, Emmet, JavaScript.

    PhpStorm включает в себя всю функциональность среды WebStorm (HTML/CSS редактор, JavaScript редактор) и добавляет полнофункциональную поддержку PHP и баз данных / SQL.

    Основные функции PhpStorm 10:

    • интеллектуальный редактор PHP кода с подсветкой синтаксиса, автодополнением кода, расширенными настройками форматирования кода, предотвращением ошибок на лету;
    • поддерживает PHP 7.0, 5.6, 5.5, 5.4 и 5.3, генераторы, сопрограммы и все синтаксические улучшения;
    • PHP рефакторинги, code (re)arranger, детектор дублируемого кода;
    • поддержка Vagrant, Composer, встроенный REST клиент, Command Line Tools, SSH консоль;
    • поддержка фреймворков (MVC view для Symfony2, Yii) и специализированные плагины для ведущих PHP фреймворков (Symfony, Magento, Drupal, Yii, CakePHP и многие другие);
    • визуальный отладчик для PHP приложений, валидация конфигурации отладчика, PHPUnit с покрытием кода (поддержка PHPUnit 5), а также интеграция с профилировщиком;
    • HTML, CSS, JavaScript редактор; отладка и модульное тестирование для JS; поддержка HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMAScript Harmony, Emmet и других технологий веб-разработки;
    • полный набор инструментов для фронтенд-разработки;
    • поддержка стилей кода, встроенные стили PSR1/PSR2, Symfony2, Zend, Drupal и другие;
    • интеграция с системами управления версиями, включая унифицированный интерфейс;
    • удалённое развёртывание приложений и автоматическая синхронизация с использованием FTP, SFTP, FTPS и др.;
    • LiveEdit: изменения в коде можно мгновенно просмотреть в браузере без перезагрузки страницы;
    • PHP UML;
    • интеграция с баг-трекерами;
    • инструменты работы с базами данных, SQL редактор;
    • кроссплатформенность (Windows, Mac OS X, Linux).

    PhpStorm 10 обеспечивает расширенную поддержку PHP 7, включая инспекции совместимости. Возможность работы с:

    • безымянными классами;
    • декларациями типов возвращаемого значения;
    • операторами объединения со значением «ноль»;
    • декларациями группового использования;
    • лексическими анализаторами, учитывающими контекст,

    а также много других возможностей, раскрывающих все возможности PHP 7.

    При реорганизации кода в PhpStorm 10 можно локально переименовать переменные, параметры, классы, методы, константы или метки команд перехода прямо в редакторе.

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

    Другие улучшения PHP:

    • дублирование поиска по выделению метода;
    • интеллектуальное копирование/добавление в последовательности;
    • возможность конфигурации значений date() или time() в шаблонах Live Templates в качестве временных отметок Unix.

    Интерактивная консоль отладки для PHP (REPL) – эта новейшая возможность PhpStorm 10 позволяет преобразовывать переменные, вызывать функции PHP и определять дополнительные функции – и всё в процессе работы.

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

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

    Отслеживание потока данных особенно полезно при работе со сторонним кодом или работе с общим кодом в больших группах разработчиков.

    PhpStorm 10 поддерживает все новые функции и улучшения, выпущенные в PHPUnit 5, широко используемой тестовой платформе для PHP. Среди возможностей также есть:

    • новый принцип действия аннотации @depends;
    • тесты, помеченные @small, могут быть также помечены в качестве рискованных, если они осуществляют ввод-вывод;
    • добавленные подтверждения assertFinite(), assertInfinite() и assertNan().

    С помощью нового плагина Docker для PhpStorm можно добавить в имеющиеся проекты поддержку Docker, просматривать логии и управлять хранилищами Docker прямо в PhpStorm.

    Также есть возможность отладки веб-приложений в Xdebug или Zend Debugger.

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

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

    Поддержка Angular 2 в PhpStorm включает в себя автоматическое завершение кода и навигацию по директивам и связкам и распознает новые атрибуты событий для TypeScript или ECMAScript 2015.

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

    Все функции и улучшения WebStorm доступны в PhpStorm, встроенные по умолчанию или доступные в качестве бесплатных плагинов в репозитории. Другие заслуживающие упоминания функции включают в себя улучшенную поддержку ECMAScript 2015, TypeScript 1.5 и 1.6, обновлённую поддержку React, форматирование связанных вызовов метода, новые инспекции Node.js, графики в CPU-профайлере Node.js, возможность запуска отдельных тестирований Mocha и т.д.

    PhpStorm 10 помогает кодировать специальные символы в HTML-коде, заменяя их HTML-элементами, начинающимися с &. Также можно выбрать символы или блок кода и применить кодировку специальных символов XML/HTML.

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

    Конфигурация стиля кода стала ещё проще. Нужно выбрать фрагмент кода, нажать Alt+Enter и выбрать действие настройки стиля. Можно просмотреть и настроить стиль кода, который может быть применён к данной части кода, в доступном режиме предварительного просмотра.

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

    Обновлённые инструменты базы данных:

    • исходная самодиагностика для MySQL, PostgreSQL, MS SQL;
    • настраиваемая форма поведения действия Execute;
    • новое окно преобразования таблиц.

    Другие улучшения:

    • обновлённые регулярные выражения в действии поиска с заменой;
    • настройки для пользователей с нарушением цветового зрения;
    • совместимость с SVN 1.9.

    Поддерживаемые операционные системы:

    • Windows 10;
    • Windows 8;
    • Windows 7;
    • Windows Vista;
    • Windows 2003;
    • Windows XP (вкл. 64-бит);
    • MacOSX 10.5 и выше;
    • Linux.

    Требования к компьютеру:

    • объём оперативной памяти: 1 Гб (минимум);
    • объём оперативной памяти: 2 Гб (рекомендуется);
    • минимальное разрешение экрана: 1024х768.

    Сайт программы — http://www.jetbrains.com/phpstorm. На рис. 2.1 показано рабочее окно программы PHPStorm.

    Окно программы PhpStorm 10
    Рисунок 2.1 – Окно программы PhpStorm 10

    2.5    Проектирование информационной структуры сайта

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

    Схематическое изображение иерархической структуры
    Рисунок 2.2 — Схематическое изображение иерархической структуры
    Структура школьного сайта
    Рисунок 2.3 — Структура школьного сайта

    2.6    Создание сайта школы

    2.6.1 Язык программирования сайта

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

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

    — автоматическое извлечение POST- и GET-параметров, а также переменных окружения веб-сервера в предопределённые массивы;

    — файловые функции, успешно обрабатывающие как локальные, так и удалённые файлы;

    — автоматическая отправка HTTP-заголовков, информирующих обозреватель о начале передачи HTML-документа;

    — работа с cookies (текстовые данные, хранящиеся у клиента; позволяют серверу точно идентифицировать пользователя и его настройки при формировании HTML- документов) и сессиями;

    — обработка файлов, загружаемых на сервер.

    Рекомендуется всем HTML-документам, содержащим PHP-скрипты, давать расширение php, чтобы упростить задачу серверному программному обеспечению в идентификации содержания файла [14].

    Синтаксис PHP подобен синтаксису языка JavaScript.

    Простейшая программа на PHP выглядит следующим образом:

    <?php echo ‘Привет, мир!’; ?>

    PHP исполняет код, находящийся внутри таких ограничителей, как <?php и ?>. Всё, что находится вне ограничителей, выводится без изменений. В основном это используется для вставки PHP-кода в HTML-документ.

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

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

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

    PHP поддерживает три типа комментариев: в стиле языка JavaScript: ограниченные /* */, начинающиеся с // и идущие до конца строки и оболочки UNIX, начинающиеся с # до конца строки [2, 14].

    Все операции и операторы полностью аналогичны Javascript за одним отличием: для сложения строковых переменных используется операция «.» (точка).

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

    • include(«имя_файла») — текст внешнего файла помещается в место вызова функции, после чего сразу исполняется. В случае помещения в условный оператор выполняется только при требуемом условии.
    • гequire(«имя_файла») — текст внешнего файла подключается заранее и определенные в нем функции доступны в любом месте основного сценария. Не используется для вставки текстовых данных.

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

    Функция fopen() открывает файл (расположенный локально или же в Интернет) для целей, которые определяются режимами, обозначенными в табл. 2.1.

    Таблица 2.1 – Список режимов функции fopen()

    ModeОписание
    ‘г’Открывает файл только для чтения; помещает указатель в начало файла
    ‘г+’Окрывает файл для чтения и записи; помещает указатель в начало файла
    ModeОписание
    ‘w’Открывает файл только для записи; помещает указатель в начало файла и обрезает файл до нулевой длинны. Если файл не существует — пробует его создать
    ‘w+’Открывает файл для чтения и записи; помещает указатель в начало файла и обрезает файл до нулевой длинны. Если файл не существует — пробует его создать
    ‘a’Открывает файл только для записи; помещает указатель в конец файла. Если файл не существует — пытается его создать
    ‘a+’Открывает файл для чтения и записи; помещает указатель в конец файла. Если файл не существует — пытается его создать
    Список режимов функции fopen()

    Функция fwrite() записывает строку в файл.

    Функция fclose() закрывает связь с файлом. Рассмотрим пример чтения данных из сети Интернет.

    Функция feof() осуществляет проверку — достигнут ли конец читаемого файла/ресурса.

    Функция fgets() осуществляет чтение из файла/ресурса определенные порции данных, размер которых задан (рекомендуется для интернет-ресурса). Если величина порций не задана, то функция считывает файл построчно: echo fgets($fd);

    Внутри PHP-скрипта существует несколько способов получения доступа к данным, переданным клиентом по протоколу http (из формы методами post и get).

    Для обращения к переменным, переданным с помощью HTTP-запросов, используется специальный массив — $_REQUEST. Этот массив содержит данные, переданные методами POST и GET, а также с помощью HTTP cookies. Это суперглобальный ассоциативный массив, т.е. его значения можно получить в любом месте программы, используя в качестве ключа имя соответствующей переменной (элемента формы).

    Помимо суперглобального массива $_REQUEST в php доступны также еще несколько суперглобальных ассоциативных массивов, позволяющих обрабатывать передаваемые клиентом данные:

    • $_GET[] — содержит все значения, передаваемые в сце­нарий с помощью метода формы GET.
    • $_POST[] — содержит все значения, передаваемые в сценарий с помощью метода формы POST.
    • $_SERVER[] — содержит все значения, получаемые от сервера.

    Необходимо отметить, что наиболее часто употребимым в скриптах элементом является куда помещается имя скрипта, начиная от корневой директории виртуального хоста, т.е. если строка запроса представляет собой адрес http://www.mysite.ru/test/index.php?id=1&test=wet&id_theme=512 то элемент $_SERVER[‘PHP_SELF’] будет содержать фрагмент «/test/index.php». Как правило, этот же фрагмент помещается в элемент $_SERVER[’SCRIPT_NAME’].

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

    2.6.2 Организация внешнего вида сайта

    За внешний вид сайта для пользователя отвечают главным образом технологии HTML и CSS.

    Данные в формате HTML похожи на текстовой файл, за исключением того, что некоторые из символов интерпретируются как разметка. Разметка придает документу некую структуру.

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

    <имя_тега [возможные параметры]>

    Чтобы указать браузеру место окончания действия того или иного тега, используется закрывающий тег. Это тег, имеющий то же самое имя с прямым слешем ‘/’ перед ним/

    <html>

    HTML-документ

    </html>

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

    <img src=»image.gif»> — тег для вывода изображения image.gif в окно браузера;

    <input type=»text» value=»»> — тег для ввода значений в окне браузера.

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

    Как и в любом языке программирования, язык HTML имеет теги для создания комментариев внутри документа, т.е. текст, который имеется в документе, но не выводится браузером на экран. Для создания комментариев используется следующая пара тегов:

    <!— Это комментарий —>

    Имеется ряд тегов, для которых завершающие теги опускаются большинством авторов документов. Например, тег <p> (начало абзаца), как правило, не имеет в документе завершающего тега </p>. Его завершение определяется браузером по «ходу» документа, например, если встретится очередной открывающий тег <p>.

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

    При создании HTML-документов рекомендуется соблюдать следующую структуру:

    html>

    <head>

    <!— Раздел заголовка —>

    </head>

    <body>

    <!— Тело документа —>

    </body>

    </html>

    Здесь <html> — это тег, обозначающий начало HTML-документа. Браузер, встретивший данный тег, будет «знать», что представленную ниже информацию следует интерпретировать как HTML-страницу. Тег <head> означает раздел заголовка, который обычно включает:

    1. Заголовок страницы

    <title>Государственный центр оказания услуг</title>

    • Кодировку, в которой представлен HTML-документ

    <meta charset=»utf-8″>

    • Краткое описание содержания документа

    <meta name=»description» content=» «>

    • Список ключевых слов документа

    <meta name=»keywords» content=»»>

    5.      Подключаемые внешние javascript файлы (скрипты)

    <script src=»js/bootstrap.min.js»></script>

    6.      Внешние таблицы стилей (css) для форматирования документа

    <link rel=»stylesheet» href=»css/style.css»>

    Раздел тега <head> может содержать и другие конструкции языка HTML. В конечном итоге разработчик сам решает, что должно быть записано в данном разделе. Он может быть и пустым, т.е. не содержать ничего. Тогда браузер будет руководствоваться своими настройками и алгоритмами при отображении такого документа. Наконец, раздел <head> может совсем отсутствовать и это будет аналогично пустому разделу. Однако при разработке HTML-страницы крайне не рекомендуется пропускать данный раздел и его «минимальная конфигурация» должна иметь следующий вид [15]:

    <head>

    <title>Заголовок страницы</title>

    <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

    <meta name=»description» content=»описание сайта»>

    <meta name=»keywords» content=»ключевые слова»>

    </head>

    В тегах <body>…</body> заключается отображаемая информация (тело) страницы: текст, изображения, таблицы, звук, видео, объекты (например, flash-проигрыватель), javascript-программы, таблицы стилей (css) [15].

    HTML-документ рекомендуется всегда завершать закрывающим тегом </html> и тем самым сигнализировать браузеру о завершении документа. Это полезная информация может быть использована, например, при обрыве связи во время загрузки страницы. Тогда отсутствие тега </html> может означать неполную загрузку страницы. На практике встречается и много других случаев, когда важно иметь корректную разметку страницы для исключения неверного отображения содержания документа в исключительных ситуациях.

    Текст HTML-документа, как правило, представляет собой непосредственно текст и ссылки, ведущие либо на отдельные фрагменты того же документа, либо на другие документы (рис. 2.4).

    Структура документа HTML
    Рисунок 2.4 – Структура документа HTML

    Пример: простейший HTML-документ (рис. 2.5).

    Пример простого HTML-документа
    Рисунок 2.5 – Пример простого HTML-документа

    Для создания заголовков в HTML используются теги:

    <h1></h1> — заголовок 1 уровня;

    <h2></h2> — заголовок 2 уровня;

    <h3></h3> — заголовок 3 уровня;

    <h4></h4> — заголовок 1 уровня;

    <h5></h5> — заголовок 1 уровня;

    <h6></h6> — заголовок 1 уровня.

    На рис. 2.6 показано отображение заголовков разного уровня в браузере.

    Отображение заголовков в браузере
    Рисунок 2.6 – Отображение заголовков в браузере

    HTML есть возможность создавать нумерованные и маркированные списки [19].

    Тег <ol>…</ol> — создает нумерованный список элементов/

    Атрибуты:

    start=»N» — начать нумерацию с числа N;

    type=»…» -определяет формат нумерации:

    1 — арабские цифры (по умолчанию);

    A — прописные буквы (A, B, C);

    а — строчные буквы (a, b, c);

    I — прописные римские цифры (I, II, III);

    i — строчные римские цифры (i, ii, iii).

    Тег <ul>…</ul> — создает маркированный список элементов.

    Атрибут:

    type=»…» — определяет формат маркера:

    disk — диск (по умолчанию);

    circle – окружность;

    square – квадрат.

    <li>…</li> — задает элемент списка в нумерованном или маркированном списке

    Атрибуты:

    type=»…» — формат номера или маркера (см. описание <ol> и <ul>);

    value=»N» — задает номер элемента списка.

    Примеры создания отображения списка показаны на рис. 2.7 – 2.8.

    Создание списка в HTML
    Рисунок 2.7 – Создание списка в HTML
    Отображение списка в браузере
    Рисунок 2.8 – Отображение списка в браузере

    Для создания ссылок используется тег <a>…</a>.

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

    Абсолютный адрес содержит в себе имя хоста и полный путь к ресурсу, на пример: http://www.example.com/docs/about.html. С помощью абсолютного адреса можно ссылаться на любой открытый ресурс в Интернете. Если нужно поставить ссылку на главную страницу сайта, указывают его адрес и слеш.

    Пример для абсолютного адреса:

    HTML-код: <А href=»http://www.yandex.ru»>Яндекс</A>

    В браузере ссылка обычно представляется как подчеркнутый текст. При клике по ссылке браузер загружает страницу, указанную в атрибуте href (рис. 2.9).

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

    Пример файловой структуры
    Рисунок 2.9 — Пример файловой структуры

    Например, чтобы поставить ссылку из файла file1.html на файл file2.html (см. рис. 12), необходим следующий HTML-код:

    <A href=»folder1/file2.html»>file2.html</A>

    А чтобы ссылка в файле file2.html указывала на file1.html:

    <А href=»../file1.html»>file1.html</A>

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

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

    Для открытия ссылки в новом окне используется атрибут target со значением _blank.

    Пример: <a href=»http://ya.ru/» target=»_blank»>Яндекс</a>

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

    CSS используется применительно к языкам разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

    Ключевое понятие в CSS — селектор — представляет собой правило для использования стиля. Браузер для каждого элемента пытается применить стиль в соответствии с заданным правилом. Стиль содержит набор свойств.

    Различают простые селекторы, которые будут использованы для указанного элемента, в приведенном ниже примере — к любому заголовку h1, h2, h3:

    • h1 {font-family:sans-serif}
    • h2 {font-family:sans-serif}
    • h3 {font-family:sans-serif}

    Селекторы групп:

    h1, h2, h3 {font-family: sans-serif}

    Этот фрагмент эквивалентен предыдущему фрагменту, состоящему из трех простых фрагментов [16].

    Селекторы класса:

    *.firstclass{ color: green } — все элементы, имеющие class=firstclass

    или

    .firstclass{ color: green } — все элементы, имеющие class=firstclass

    а также

    Hl.firstclass{ color: green } — только элементы H1, имеющие class=firstclass

    Селекторы идентификатора ID:

    • h1#chapter1 { font-family: sans-serif } — для <h1 id=»chapter1″>…</h1>
    • #chapter1 { font-family: sans-serif } — для любого элемента с id=»chapter1″

    Селекторы атрибутов:

    • h1[class] { font-family: sans-serif } — элемент имеет class

    — h1[class=»fancy»] { font-family: sans-serif } — элемент имеет class=»fancy»

    — *[title] { font-family: sans-serif } — любой элемент, имеющий заголовок

    Селектор потомков (устанавливает иерархию применения):

    tr h1 { font-family: sans-serif } — <tr><td><h1>…</h1></td></tr>

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

    • a:link — ссылки, которые не были посещены
    • a:visited — посещенные ссылки
    • a:hover — выделенная в данный момент ссылка
    • a:active — активные ссылки.

    При оформлении страницы доступны следующие семейства (family) шрифтов:

    —        Serif — шрифт с засечками. Обычно используется при бумажной печати. Наиболее используемый шрифт — Times;

    —        Sans-serif — шрифт без засечек. Подходит для заголовков. Наиболее часто применяемые шрифты этого семейства — Arial, Helvetica, Verdana;

    —        Monospace — шрифт, который обеспечивает равную ширину символов. Служит для вывода примеров кода, поскольку внешний вид этого текста будет соответствовать текстовой консоли. Наиболее распространен шрифт Courier;

    —        Fantasy, Cursive — декоративные и курсивные шрифты. Не рекомендуются к применению, поскольку шрифты этой группы необязательно присутствуют в компьютере, на котором будут просматривать html-страницу.

    Выбор шрифта осуществляется свойством font-family. Пример использования семейств стилей:

    • <p style=”font-family: serif”>Serif: Образец текста</р>
    • <р style=”font-family: sans-serif”>Sans-serif: Образец текста</p>
    • <p style=”font-family: cursive”>Cursive: Образец текста</p>
    • <p style=”font-family: fantasy”>Fantasy: Образец текста</p>
    • <p style=”font-family: monospace”>Monospace: Образец текста</p>

    Свойство font-family может содержать перечисление шрифтов:

    p{font-family:”Times New Roman”, Times, serif;}

    В этом случае браузер последовательно будет пытаться найти соответствующий шрифт в системе. Если конкретный шрифт не будет найден (в примере «Times New Roman”, Times), то будет применен шрифт, назначенный для serif-семейства по умолчанию [19].

    Можно указать начертание шрифта с использованием свойства font-style. Допустимые значения этого свойства:

    font-style: normal | italic | oblique | inherit

    где normal — обычное начертание; italic — курсив (имитация рукописного шрифта); oblique — наклонный шрифт (образован наклоном обычного).

    Размер шрифта задается с помощью свойства font-size. Его возможные значения:

    — larger и smaller — константы, определяющие относительный размер;

    — xx-small, x-small, small, medium, large, x-large, xx-large — константы, определяющие абсолютный размер;

    — ЧИСЛО % — число, определяющее размер в процентах от шрифта родительского элемента;

    — ЧИСЛО px — число, определяющее размер в пикселах. Кроме того, размер шрифта указывается в специальных единицах: em (высота элемента, равная размеру текущего шрифта), ex (высота символа х), пункты (pt).

    Толщина шрифта регулируется с помощью свойства font-weight (рис. 13, 14):

    font-weight: normal | bold | bolder | lighter | 100, 200.. 900

    Здесь normal — обычная толщина; bold — жирный шрифт; bolder — предельно жирный шрифт; lighter — тонкий шрифт; 100 — тонкий шрифт; 400 — соответствует нормальному; 700 — жирному.

    Свойство color задает цвет шрифта (рис. 2.10, 2.11). Можно указать цвет по его названию на английском языке (red, green, lime) или задать точное значение цвета в системах RGB, HSL, а также в RGBA, HSLA, для которых добавлен канал прозрачности. Полный перечень допустимых значений свойства color приведен в спецификации (см. http://www.w3.org/TR/css3-color/).

    Определение стилей для текста в блоке body
    Рисунок 2.10 – Определение стилей для текста в блоке body
    Рисунок 2.11 – Определение стилей для заголовков сайта

    Выбор цветовой схемы является очень важным этапом создания дизайна сайта. Фон элементов может быть задан однородным цветом, одиночным или мозаично расположенным.

    Используются следующие свойства фона:

    — background-color — однородный цвет константой или кодом в одной из допустимых систем цветности. Пример (рис. 2.12):

    header .navbar-default { background-color: #fff;}

    Определение фонового цвета для навигационного меню верхней части сайта
    Рисунок 2.12 – Определение фонового цвета для навигационного меню верхней части сайта

    — background-image — фоновое изображение. Пример:

    body {background-image:url(‘paper.gif’);}

    — background-repeat — флаг мозаичного размножения изображения. Пример:

    body {

    background-image:url(‘gradient2.png’);

    background-repeat:repeat-x;

    }

    — background-attachment — указание на то, будет ли изображение смещаться при скроллировании или будет оставаться на месте. Пример:

    background-attachment:fixed;

    — background-position — свойство, определяющее позицию размещения изображения на устройстве отображения. Пример:

    body

    {

    background-image:url(‘img tree.png’); background-repeat:no-repeat; background-position:right top;

    }

    В соответствии со спецификацией (см. http://www.w3.org/TR/ css3-text/) текст может быть подвергнут преобразованиям при отображении, например, таким как:

    — изменение регистра букв (capitalize | uppercase | lowercase);

    — изменение пробелов (collapse | preserve | preserve-breaks);

    — ограничение длины строки;

    — формирование переносов слов;

    — форматирование текста;

    — выравнивание и разреживание;

    — отступы;

    — декорирование.

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

    В соответствии с блочной моделью для любого элемента имеются область самого элемента (content), внутренние поля (padding), рамка или граница (border), внешние границы (margin). Для каждой области может быть задан размер. Наличие внутреннего поля позволяет сформировать рамку на заданном расстоянии от содержимого элемента; наличие внешнего поля — установить отступ между рядом расположенными элементами.

    В CSS любой элемент имеет свойства width и height, которые устанавливают размер «содержимого» элемента в процентах, пикселах. Кроме того, значения этих свойств могут быть вычислены.

    Размер отступа задается свойствами ‘padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’ или единственным свойством padding, которому указывается один общий размер отступа или последовательно отступ сверху, справа, снизу, слева.

    Пример (рис. 2.13):

    .container {

    padding:0 20px 0 20px;

    }

    Определение отступов для блока container
    Рисунок 2.13 – Определение отступов для блока container

    Граница представляет собой видимое обрамление элемента с указанным начертанием, цветом и толщиной. Граница может быть задана единственным свойством border или отдельно для каждой стороны блока: ‘border-top’, ‘border-right’, ‘border-bottom’, ‘border-left’. Указываются толщина, тип начертания границы и цвет.

    Пример: header .nav .caret {

    border-bottom-color: #f5f5f5;

    border-top-color: #f5f5f5;}

    При расчете размеров блока необходимо помнить про толщину границы. Внешнее прозрачное поле может быть задано либо единственным свойством ‘margin’ с указанием одинакового размера границы для всех сторон, либо перечислением размеров по каждой из сторон, либо с использованием свойств ‘margin-top’, ‘margin-right’, ‘margin-bottom’, ‘margin-left’ для каждой из сторон в отдельности. Пример:

    — body { margin: 2em }

    — body { margin: 1em 2em }

    — body { margin:1em 2em 3em }

    — body {margin-top: 1em; margin-right: 2em;}

    CSS поддерживает 4 вида позиционирования:

    — статическое (static);

    — абсолютное (absolute);

    — относительное (relative);

    — фиксированное (fixed).

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

    Статическое позиционирование устанавливается для всех элементов по умолчанию и означает нормальное следование элементов. В явном виде спецификатор static применяется для перекрытия унаследованных стилей.

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

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

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

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

    img {float: right; padding: 15px;}

    Плавающее размещение иногда применяют к блокам, содержащим меню и прочие средства навигации.

    2.6.3 Размещение сайта на хостинге

    Создаваемый сайт необходимо разместить на хостинге. Для этого был выбран хостинг lbihost.ru, который выгодно отличается от множества других хостингов. И бесплатно предоставляет перечень технических параметров для образовательных учреждений, которые на других хостингах платные.

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

    Сервис предлагает готовый сайт. Администратору сайта остается только ввести информацию о своем учреждении и включить сайт.

    Возможности хостинга:

    — домен третьего уровня;

    — сайт частично заполнен и может использоваться уже через несколько минут;

    — разнообразные шаблоны от профессиональных дизайнеров;

    — все шаблоны содержат разделы, необходимые для сайта образовательного учреждения. Шаблоны соответствуют требованиям статьи 29 Федерального закона «Об образовании в Российской Федерации» (№273-ФЗ от 29.12.2012). В шаблонах уже созданы все необходимые разделы и страницы;

    — удобный визуальный редактор;

    — легкость добавления текста, видео и фотографий;

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

    — удобные подсказки и описания элементов сайта;

    — техническая поддержка по электронной почте

    — сайт работает под управлением CMS Joomla. Администратор системы может использовать все возможности этой системы, одной из самых распространенных и развитых в российском сегменте интернета.

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

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

    3. ОПТИМИЗАЦИЯ И СОВЕРШЕНСТВОВАНИЕ СОЗДАННОГО САЙТА

    3.1 Инструменты для анализа сайта

    Для анализа сайта будем использовать сервис SAITREPORT.RU (рис. 3.1) — это сервис, предоставляющий инструменты диагностики внутренних и внешних факторов с целью оптимизации сайта.

    Отправка конкурентного сайта на анализ
    Рисунок 3.1 – Отправка конкурентного сайта на анализ

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

    Далее приведем результаты проверки сайта.

    Аренда домена сайта заканчивается: 17.05.2017 (через 5 месяцев 13 дней)

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

    Глубина сайта — 3 уровня, начиная с главной страницы. Чем больше глубина сайта, тем больше действий нужно пользователям, чтобы с главной страницы дойти до раздела с интересующей информацией.

    Обработаны 12 724 ссылки. Обработанные ссылки – это все внутренние ссылки с сайта, по которым прошёл наш робот и проанализировал соответствующие страницы.

    Текстовых ссылок на сайте: 12 567 (98.8 %) из них с alt/title 2 755 (21.9 %). Ссылок-изображений на сайте: 157 (1.2 %) из них с alt/title 0 (0 %). Атрибут «alt» — значимый атрибут для поисковых систем. Это текстовое описание изображения, которое появляется, если пользователь по каким-либо причинам не может загрузить картинку. Атрибут «title» — текст, который будет отображён в качестве всплывающей подсказки при наведении мышкой на картинку. Обычно он допускает более расширенное описание, чем «alt». Следует обязательно заполнять эти атрибуты тега img текстовым содержимым, т.к. они также влияют на ранжирование сайта в поисковых системах.

    Дата регистрации домена сайта: 17.05.2016 (1 год 6 месяцев 17 дней назад). Возраст домена — важный фактор для продвижения. Чем он больше, тем больше доверия к сайту у поисковой системы. «Старые» сайты продвигаются гораздо быстрее, чем «молодые», чей возраст не превышает 1 года.

    Загружены 150 страниц. Загруженные страницы — это физические страницы сайта, которые были найдены путём обхода всех внутренних ссылок сайта нашим роботом.

    Средний размер страницы на вашем сайте: 10.2 Кб (маленький объём). Объём контента на страницах сайта важен и поисковикам, и посетителям. Страницы с маленьким объёмом несут гораздо меньше информации. Они могут быть бесполезны для посетителей и будут отмечены роботом поисковой системы как малоинформативные. Среднестатистический объём контента на странице 30 килобайт.

    Найдены ссылки на 26 внешних сайтов. Всего на сайте обнаружено 330 внешних ссылок. Внешние ссылки — это ссылки на другие сайты. Внешние ссылки «забирают» ссылочный «вес» с сайта и по этой причине они крайне нежелательны в больших количествах.

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

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

    Индексы ранжирования сайта в поисковых системах: индекс цитирования Яндекса — 90.

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

    Найдено 135 страниц с пустыми тегами «meta-keywords». Хотя поисковые системы не придают первоочередное значение мета-тегу «keywords», они учитывают его при ранжировании сайта. Например, поисковый робот Google Adsense использует это поле для подбора рекламы. При правильном подборе ключевых слов заполнение мета-тегов «keywords» будет полезным.

    На сайте обнаружены дублированные теги «title» (всего: 1 тег). Тег «title» — один из важнейших тегов, оказывающих прямое влияние на продвижение сайта. Он не только сообщает посетителю название страницы, но и привлекает внимание поисковых роботов. Почти все поисковые системы используют тег «title» для того, чтобы понять тематику сайта. Поисковые системы используют теги «title» в процессе определения релевантности страниц сайта. Следует заполнять тег «title» так, чтобы на каждой странице он был уникальным.

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

     На сайте обнаружены дублированные теги «meta-keywords» (всего: 2 тега). Хотя поисковые системы не придают первоочередное значение мета-тегу «keywords», они учитывают его при ранжировании сайта. Например, поисковый робот Google Adsense использует это поле для подбора рекламы. При правильном подборе ключевых слов заполнение мета-тегов «keywords» будет полезным.

    Найдено 118 страниц с пустыми тегами «meta-description». Не все поисковые системы используют тег «meta-description» в качестве краткого описания содержания сайта. Однако в некоторых случаях мета-тег «description» имеет вес: он появляется на странице результатов поиска с запросом по целевым ключевым фразам. Особенно это касается flash-сайтов, которые обычно имеют минимальный объём текстового контента. В этих случаях поисковые системы используют в качестве описания теги «meta-description», которые обязательно должны содержать главные ключевые слова и быть интересными для пользователя.

    Сайт найден в каталоге Dmoz. Сайт не найден в каталогах Yandex, Mail.ru, Rambler.ru. Наличие сайта в каталоге очень положительно влияет на продвижение в поисковых системах. С каталога можно получить дополнительный целевой клиентский трафик. Необходимо делать сайт более «видимым» в интернете, обязательно размещая его в каталогах и списках сайтов.

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

    Количество страниц сайта, проиндексированных Yandex: 200 Количество страниц сайта, проиндексированных Google: 330. Необходимо стремиться к индексации всех страниц сайта (непроиндексированная страница «не видна» поисковой системе и не появляется по запросам пользователей; сайт фактически не работает с целевой аудиторией). Нужно проставить внутренние ссылки на всех страницах, охватив весь объём сайта. Для лучшей индексации желательно составить карту сайта — sitemap.xml. По ней роботы поисковых систем будут ориентироваться, какие страницы нужно внести в индекс.

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

    Дублированных тегов «meta-description» на сайте не обнаружено. Не все поисковые системы используют тег «meta-description» в качестве краткого описания содержания сайта. Однако в некоторых случаях мета-тег «description» имеет вес: он появляется на странице результатов поиска с запросом по целевым ключевым фразам. Особенно это касается flash-сайтов, которые обычно имеют минимальный объём текстового контента. В этих случаях поисковые системы используют в качестве описания теги «meta-description», которые обязательно должны содержать главные ключевые слова и быть интересными для пользователя.

    Средняя скорость загрузки страницы роботом: 0.805 сек. (нормальная скорость). Скорость передачи данных от сайта к пользователю — один из важнейших показателей удобства работы. Как правило, пользователей не устраивают «медленные» сайты. Поисковые системы также могут понизить рейтинг сайта за слишком низкую скорость передачи информации. Время открытия страниц может быть разным в зависимости от времени суток, удалённости сервера, на котором расположен сайт, от количества посетителей на вашем сайте и т. д.

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

    Сервер, на котором расположен сайт, ответил на все запросы. При выявлении случаев отказа сервера, на котором расположен ваш сайт, следует провести тестирование его работы. Чрезмерная нагрузка на сервер (например, резко возросший трафик или некорректно запрограммированные модули сайта, что создает узкие места для загрузки контента) может серьёзно снизить активность посетителей сайта.

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

    Страниц с кодом ответа «4**» (например, «Ошибка 404: страница не найдена») не обнаружено. Код ответа 4** указывает на несуществующую страницу. Возникает по причине ошибки в адресе ссылки или в связи с тем, что страница удалена с сайта. Такие страницы не индексируются поисковой системой. На рассмотренном сайте такие страницы отсутствуют.

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

    Страниц с кодом ответа «5**» (например, «Ошибка 501: невозможно обработать запрос») не обнаружено. Страницы с кодом ответа 5** возникают по причине перегрузки сайта или чрезмерно жёстких ограничений на количество запросов. Следует уделить этому внимание: если поисковый робот не сможет проанализировать страницы, индексируемость сайта будет неполной.

    3.2    Оптимизация страниц сайта

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

    Поисковая система, ПС – программно-аппаратный комплекс с пользовательским интерфейсом, предназначенный для поиска и выдачи информации по запросу пользователя [26] в котором представлены все данные Интернета, структурированные и сгруппированные [27].

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

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

    Наиболее релевантные и важные по значимости страницы перечислены в убывающем порядке. Для поисковых систем релевантность страницы определяется тем, насколько сайт соответствует ключевому запросу. Важность страницы определяется количеством и качеством ссылок, указывающих на данный сайт с других страниц. Ключевой запрос (поисковый запрос) — это слово, словосочетание или целое предложение, которое пользователь вводит в строке поиска поисковой системы чтобы найти интересующую его информацию [8].

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

    Согласно данным Forrester Research Inc, посетители Интернета находят сайты через поисковые машины – 81%, по ссылке с другого сайта – 59%, посредством маркетинговых коммуникаций – 56%, через информацию по телевидению – 48%, путем ввода и угадывания адреса – 41 %, из онлайн-рекламы – 20%, по радио – 19%, с помощью директ-мэйл – 10% [1].

    Наибольшее количество заходов на сайты с поисковых систем говорит о том, что SEO – это наиболее эффективный способ, чтобы привлечь целевого потребителя.

    Оптимизация сайта является первым и основным этапом процесса поискового продвижения сайта, поэтому ее предназначение совпадает с предназначением самого поискового продвижения, а именно: вывод сайта на предварительно определенные позиции в органической выдаче поисковых систем [26].

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

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

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

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

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

    4. Оптимизация кода веб-страниц. Следующим важным моментом в процессе оптимизации веб-сайта является оптимизации кода веб-страниц (HTML–верстки).

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

    Лучший способ убедиться в том, что HTML–код легок для обработки поисковой машиной – следовать рекомендациям Wide Web Consortium (W3C). Для этого HTML-код страниц сайта проверяют валидатором (Validator): http://validator.w3.org/.

    Можно выделить следующие шаги оптимизации кода веб-страницы:

    1. Помещение в тег <title> ключевых слов, уникальных для каждой страницы сайта. Поисковые машин просматривают ключевые слова, найденные в этом теге как важные, именно они объясняют ей, что собой представляет страница сайта.

    2. Использование тегов <meta name = “description”> и <meta name = “keywords”> для помещения туда описания веб-страниц и ключевых слов.

    3. Использование тегов <h1>–<h6>. Поисковые машины индексируют эти теги и придают им значение, они служат для выделения важных заголовков и разделов.

    4. Использование атрибута тега <image> alt (добавляет описательный текст для изображений). Большинство поисковых машин не умеют индексировать изображения, атрибут «alt» может повлиять на соответствие сайта определенному запросу.

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

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

    7. Наличие карты сайта (SiteMap) упрощает индексацию поисковыми машинами страниц сайта [1].

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

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

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

    Имеет значение авторитетность сайта, который ссылается на веб-ресурс. Существуют «сильные» и «слабые» ссылки. Сильная ссылка – ссылка, размещенная на странице с высоким авторитетом. Авторитет ссылающейся страницы определяется, исходя из количества и силы, ведущих на нее ссылок. Различные поисковые системы используют разные показатели, определяющие авторитетность сайта. Это может быть «тематический индекс цитирования» (тИЦ), применяемый в каталоге Яндекса, «PageRank» и «взвешенный индекс цитирования» (вИЦ), применяемый в поисковой системе Google и др.

    Любая входящая ссылка имеет свое качество, которое определяется множеством параметров. Наиболее значимыми параметрами качества являются.

    1. Возраст домена сайта (желательно от шести месяцев).

    2. Количество текста на ссылающейся странице (не менее 2000 символов).

    3. Индексация ссылающегося сайта поисковыми машинами.

    4. Качество анкора. Важно иметь преимущественно анкоры ссылок которые состоят из чистого вхождения ключевых слов, по которым оптимизируется веб-сайт. В данном случае, предпочтительна следующая структура: чистое вхождение – 80%, морфологическое вхождение (с изменением падежа, склонения, рода и т.п.) – 15%, естественность (любой текст ссылки) – 5%.

    Отсутствие тега «nofollow» в коде ссылки, данный тег запрещает индексацию ссылки.

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

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

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

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

    При первом посещении «паук» проверяет состояние ресурса. Если его характеристики подходят под требования Яндекса, сайт заносится в базу. При повторном посещении «пауком» уже проиндексированной страницы происходит ее обновление [17].

    Документы в индекс попадают следующими способами: автоматически, когда поисковый робот сам переходит по внешним и внутренним ссылкам, либо если владелец сайта сам добавил URL через специальную форму или через установленную на сайте Яндекс.Метрику. Этот сервис передает URL страниц на индексацию Яндексу.

    Поисковые роботы стремятся проиндексировать как можно больше информации. Возможность попадания в индекс напрямую зависит от авторитетности ресурса, уровня вложенности страниц, наличия файла sitemap.xml, отсутствия ошибок, мешающих нормальной индексации сайта. Основными инструментами управления индексацией сайтов являются robots.txt, метатеги, теги, атрибуты noindex и nofollow.

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

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

    На сегодняшний день могут индексироваться следующие типы документов: PDF, Flash (Adobe Systems); DOC/DOCX, XLS/XLSX, PPT/ PPTX (MS Office); ODS, ODP, ODT, ODG (Open Office); RTF, TXT.

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

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

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

    Виды запросов по частотности у каждой SEО-компании имеют свои параметры. Вот цифры, которые использует в своей работе один из крупных оптимизаторов – компания Ingate: <1000 низкочастотные запросы; <10 000 среднечастотные запросы; >10 000 высокочастотные запросы

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

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

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

    После технической оптимизации особое внимание уделяют наполнению сайта – контенту. Если страниц мало или меньше, чем у конкурентов в ТОПе, то следует создать новые и наполнить их качественным содержанием [25].

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

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

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

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

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

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

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

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

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

    В качестве составляющих внутренней оптимизации важно выделить:

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

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

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

    4.      Создание семантического ядра. В это понятие можно включить подбор наиболее важных ключевых слов для продвижения в поисковых системах, составление описаний (description) для каждой страницы и др.

    5.      Внутреннюю перелинковку сайта. Этот этап может быть достаточно важным. Можно отметить, что на практике некоторые специалисты могут его игнорировать или выполнять неправильно (хаотично). Благодаря правильной внутренней перелинковке может улучшиться не только удобство использования интерфейса сайта, но и повыситься позиции сайта в поисковой системе Google.

    Как можно заметить на практике, Google имеет свой собственный показатель ценности страницы — PR, и он играет не последнюю роль в результатах выдачи поисковой системы. Можно провести следующую взаимосвязь: чем больше этот показатель, тем выше сайт в поиске (конечно в совокупности с другими методами раскрутки).

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

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

    Можно предложить следующий список основных методов внешней оптимизации сайта: 1.      Регистрация сайта в поисковых системах. В качестве основных поисковых систем, занявших рынок России можно предложить считать наиболее популярными на основе беглого анализа рынка в порядке уменьшения популярности Яндекс, Google, Mail, Bing.

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

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

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

    Для положительного результата продвижения можно порекомендовать регистрировать сайт лишь в трастовых каталогах с высокой посещаемостью и открытыми внешними ссылками (без тегов noindex и nofollow). Желательно также, чтобы эти сайты-каталоги сами были представлены в 2-ух наиболее популярных каталогах Рунета — каталоге Яндекса и Dmoz.

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

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

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

    Помимо грамотного написания рекламного обзора (можно порекомендовать заказывать у специалистов) может потребоваться поиск и публикация (через посредника за оплату соответственно) статьи на сайтах подобного уровня [2].

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

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

    7.      Реклама товаров и услуг в специализированных сервисах (Яндекс.Маркет и др.). Охват аудитории здесь может быть небольшим, но более целевым с меньшим процентом разброса аудитории (по региону, возрасту и др.).

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

    8.      Покупка ссылок и трафика. Под покупкой ссылок здесь имеется ввиду покупка отдельных мест на сторонних сайтах (в статьях или где- то еще), а не контекстная реклама. Трафик можно порекомендовать использовать не к основному сайту (т.к. к нему могут быть применены санкции), а к специально созданным рекламным страницам [2]. Можно заметить, что поисковое продвижение сайта может быть невозможно без дополнительных затрат на рекламу и каждому вебмастеру нужно это учитывать.

    Разброс цен на продвижение у ведущих компаний и специалистов на данный момент может являться достаточно большим. Можно в качестве примера привести следующие цифры: от 15 до 150 тысяч в месяц. Однако в данной сфере не всегда возможно получить гарантии на предоставляемые услуги, это может быть связано, прежде всего, с тем, что точные алгоритмы ранжирования страниц в Интернете поисковыми системами могут быть скрываемыми.

    3.3    Разработка и внедрение формы обратной связи на сайт

    3.3.1 Создание формы для обратной связи

    Процесс работы над формой обратной связи показан на рис. 3.2

    Создание формы обратной связи
    Рисунок 3.2 – Создание формы обратной связи

    В приложении А приведен код формы обратной связи. На рис. 3.3 показан внешний вид созданной формы.

    Внешний вид формы обратной связи
    Рисунок 3.3 – Внешний вид формы обратной связи

    3.3.2 Организация подключения и записи данных из формы в базу данных

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

    Подключение к базе данных
    Рисунок 3.4 – Подключение к базе данных
    Создание обработчика для данных из формы
    Рисунок 3.5 – Создание обработчика для данных из формы

    Код обработчика данных из формы представлен в приложении Б.

    3.3.3 Вывод данных из формы обратной связи на экран

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

    Вывод списка вопросов на страницу сайта
    Рисунок 3.6 — Вывод списка вопросов на страницу сайта

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

    Внешний вид таблицы показан на рис. 3.7.

    Таблица со списком данных из формы обратной связи
    Рисунок 3.7 – Таблица со списком данных из формы обратной связи

    3.4    Проверка функционирования формы обратной связи

    Для проверки функционирования формы необходимо ввести в нее данные и нажать «Отправить».

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

    Форма с тестовыми данными
    Рисунок 3.8 — Форма с тестовыми данными

    После нажатия на кнопку «Отправить» данные обрабатываются на сервере и отправляются в базу данных (рис. 3.9), после обработки данных файл-обработчик перенаправляет пользователя на страницу с таблицей в которой записаны данные, которые были введены в форму (рис. 3.10).

    Записанная информация в базе данных
    Рисунок 3.9 — Записанная информация в базе данных
    Таблица с записанными тестовыми данными
    Рисунок 3.10 — Таблица с записанными тестовыми данными

    Заключение

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

    Одним из популярных языков программирования для создания динамических сайтов является PHP. Это серверный язык программирования, который позволяет создавать веб-ориентированные приложения. В комплексе с реляционной базой данных язык программирования PHP позволяет создавать большие и функциональные информационные системы, и сайты. Одной из популярных СУБД является MySQL. MySQL может обрабатывать чрезвычайно большие и сложные базы данных, сохраняя при этом достойный уровень производительности.

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

    Для проектирования базы данных была использована среда MySQL Workbench, которая предназначена для визуального проектирования баз данных и управления сервером MySQL. После проектирования базы данных, была создана база данных на сервере MySQL. После этого был разработан веб-сайт школы. В качестве языка программирования приложения был использован – PHP. Как среда разработки приложения была использована программа – PHPStorm.

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

    Список использованной литературы

    1. Александрова С. И. Технология оптимизации веб-сайта как составляющая рекламной компании в сети интернет [Электронный ресурс] / С. И. Александрова // URL: http://conf.sfukras.ru/sites/mn2011
      /thesis/s4/s4_120.pdf (18.01.2017).
    2. Бичкуров А. О. Разработка способов внутренней и внешней оптимизации веб-ресурсов [Электронный ресурс] / А. О. Бичкуров, С. А. Румянцев / URL: mgutupenza.ru/mni/content/files/2012_Bichyrova,%20
      Rymyancev.pdf ( 23.01.2017).
    3. Вересников Ю. К. О надежности систем обработки информации / Ю. К. Вересников //Актуальные проблемы современной науки. — 2011. — № 2 (58). — С. 193-195.
    4. Гридина Е. Г. Использование поисковых систем для увеличения посещаемости федеральной системы информационно-образовательных ресурсов / Е. Г. Гридина, Д. С. Лысенко // Открытое образование. 2009. №3. C. 43–48.
    5. Дронов В. А. PHP, MySQL, HTML5 и CSS3. Разработка современных динамических Web–сайтов [Текст] / В. А. Дронов. – СПб.: BHV, 2016. – 688 c.
    6. Дунаев В. HTML, скрипты и стили / В. Дунаев. — СПб: БХВ-Петербург, 2011- 816 с.
    7. Жуков Р. А. СУБД с открытым исходным кодом: возможность применения алгоритмов распараллеливания / Р. А. Жуков // Технические науки. – 2015. – № 1–2 (35–36). – С. 20 – 21.
    8. Зудилова Т. В. Web-программирование HTML / Т. В. Зудилова, М. Л. Буркова — СПб: НИУ ИТМО, 2012. – 70 с.
    9. Кириллов В. В. Введение в реляционные базы данных [Текст] / В. В. Кириллов, Г. Ю. Громов. — М.: Гелиос АРВ. – 2002. – 458 с.
    10. Ключевой запрос: [Электронный ресурс] / URL: http://seo-for-ucoz.com/publ/seo_terminy/kljuchevoj_zapros_poiskovyj_zapros/1-1-0-24 (Дата обращения: 15.01.2017).
    11. Комолова Н. HTML, XHTML и CSS / Н. Комолова, Е. Яковлева. — СПб: Питер, 2012 – 304 с.
    12. Корнилов В. С. Анализ систем управления контентом, используемых в системе образования [Электронный ресурс] / В. С. Коринлов, В. И. Цыганов // Режим доступа: http://www.ido.rudn.ru/vestnik/2013/2013_1/9.pdf (14.01.2017)
    13. Кузнецов, М. В. PHP на примерах [Текст] / М. В. Кузнецов, И. В. Симдянов. – СПб.: BHV, 2012. – 400 c.
    14. Лабберс К. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений / К. Лабберс, Н. Олберс, К. Салим. — М.: Вильямс, 2011 – С. 22.
    15. Ласкова Н. А. Школьный сайт как весомой составляющей Единое информационное образовательное пространство учебного заведения / Н. А. Ласкова // Компьютер в школе и дома. – 2012. — № 3. – С. 32 – 35.
    16. Маклафлин Б. PHP и MySQL. Исчерпывающее руководство [Текст] / Б. Маклафлин. – СПб.: Питер, 2014. – 544 с.
    17. Масляк Т. А. Анализ методов разработки сайтов / Т. А. Масляк, Т. А. Колесникова // Информационные технологии: наука, техника, технология, образование, здоровье: Тезисы докладов XXIII Международной научно-практической конференции, Ч.IV (20-22 мая 2015 г., Харьков). – С. 230.
    18. Мирошниченко Г. А. Реляционные базы данных. Практические приемы оптимальных решений / Г. А. Мирошниченко. — «БХВ-Петербург», 2005. – 400 с.
    19. Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие/Сост. С. М. Наместников. — Ульяновск: УлГТУ, 2014. – 91 с.
    20. Официальный сайт фирмы iTrack [Электронный ресурс]. Режим доступа: http://itrack.ru/research/cmsrate/ (29.02.2016).
    21. Процессы поисковых систем: [Электронный ресурс] // Энциклопедия поискового продвижения Ingate. URL: http://www.sembook.ru/book/poiskovye_sistemy/protsessy-poiskovykh-sistem/ (24.02.2016).
    22. Процессы поисковых систем: [Электронный ресурс] // Энциклопедия поискового продвижения Ingate. URL: http://www.sembook.ru/book/poiskovye_sistemy/protsessy-poiskovykh-sistem/ (24.01.2017).
    23. Росс В. С. Создание сайтов: HTML, CSS, PHP, MySQL [Текст]. Учебное пособие, ч. 2 / В. С. Росс — МГДД(Ю)Т, М. — 2011 – 68 с.
    24. Самарев Р. С. Создание простейших HTML-страниц, валидаторы кода. Каскадные таблицы стилей CSS: методические указания к выполнению практикума № 1 и лабораторной работы № 1 по дисциплинам «Языки интернет-программирования» и «Практикум по интернет-программированию» / Р. С. Самарев. — Москва: Издательство МГТУ им. Н. Э. Баумана, 2015. — 39 с.
    25. Способы продвижения различных типов сайтов: [Электронный ресурс] / Энциклопедия маркетинга. – URL: http://www.marketing.spb.ru/lib-comm/internet/seo&analytics.htm?printversion (Дата обращения 24.01.2017)
    26. Шварц, Б. MySQL. Оптимизация производительности / Б. Шварц и др., 2-е издание. – Пер. с англ. – СПб.: Символ-Плюс. — 2010. – 832 с.
    27. Шинкевич, А.В. Современные технологии создания web-сайтов / А. В. Шинкевич // Проблемы и перспективы современной науки: сб. ст. участников V Респ. науч.-практ. семинара молодых ученых, Минск, 28 нояб. 2014 г. / редколл: В. В. Гедранович [и др.]; Минский ун-т управления. – Минск: Минский университет управления, 2015. – С. 110–114.
    28. Эндрю Р. CSS: 100 и 1 совет, 3-е издание / Р. Эндрю. – Пер. с англ. – СПб: Символ- Плюс, 2010. – 336 с.
    29. Якубайтис Э. А. Информационные сети и системы / Э. А. Якубайтис. — М.: Финансы и статистика, 1996. — 368 с.
    30. Янк К. РНР и MySQL. От новичка к профессионалу / К. Янк. — М.: Эксмо, 2013. — 384 с.
    31. 3 шага в ТОП: оптимизация без ошибок [Электронный ресурс] / Ingate – URL: http://cdn3.ingate.ru/digital/optimization_without_mistakes.pdf (24.01.2017).
    32. SeoPult. Словарь: [Электронный ресурс] / URL: https://seopult.ru/library/Поисковая_система. (дата обращения: 2.01.2017).
    33. SEO-ВИКИ: [Электронный ресурс] / Rookee – Система автоматического продвижения сайтов / URL:http://wiki.rookee.ru/Poiskovaya-sistema (Дата обращения: 2.01.2017).
    34. The W3C Markup Validation Service [Electronic resource]. – Mode of access: http://validator.w3.org/ (29.01.2017).
    35. WordPress official website, [Электронный ресурс]. Режим доступа: http://wordpress.org/ (29.01.2017).

    Купить данную работу или заказать подобную

  • Выпускная квалификационная работа «Веб-сервис размещения объявлений с возможностью авторизации на основе QR-кодов»


    Разработка веб-сервиса.  Веб-фреймворк Ruby. Веб-сервис. База данных PostgreSQL API SQRL

    Содержание

    Введение

    1. Актуальность задачи

    2. Анализ существующих сервисов по размещению частных объявлений

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

    4. Постановка задачи

    5. Модель данных

    6. Архитектура сервиса

    7. Программная реализация

    7.1. Реализация серверной части веб-сервиса

    7.2. Реализация клиентской части веб-сервиса

    7.3. Метрика

    7.4. Отладка и тестирование

    Заключение

    Список использованной литературы

      Введение

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

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

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

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

    Задачи работы:

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

    1.      Актуальность задачи

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

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

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

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

    При разработке веб-сервиса размещения объявлений о продаже животных планируется реализовать возможность авторизации на основе QR-кодов.

    Аббревиатура QR происходит от английских слов «quick response» — «быстрый отклик». Такой код представляет собой особый рисунок, начертанный по специальным правилам. Предком современных QR-кодов были популярные штрихкоды, которые также хранили информацию, например о товаре в магазине [1].

    Родиной современного QR-кода является Япония. Уникальный дизайн и принцип работы был создан компанией Denso-Wave. Именно в Стране восходящего солнца эта технология получила наибольшее выражение. QR-коды способны содержать в себе самые разные типы информации. Прежде чем перечислить сферы применения QR-кодов, стоит разобраться в том, как он работает.

    QR-код заключает в себе информацию. Уникальная пиктограмма способна содержать в себе как буквы, так и другие символы. Например, максимальное количество цифр, которые помещаются в один QR-код, составляет 7089, а цифр и букв — 4296. Используя буквы по определенному образцу, можно записать для кода URL интернет-страницы. Тогда при чтении такого кода сможем перейти по адресу в Интернете.

    Для того чтобы сканировать QR-код, нужно скачать специальную программу, написанную для той платформы, на которой работает смартфон или компьютер. Сегодня подобными приложениями обладает практически любая платформа, будь то Android или iOS. Программа-сканер использует камеру аппарата, чтобы считать код. Далее она определяет тип зашифрованной информации, и если это — интернетссылка, то можно пройти по ней на соответствующую страницу [2].

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

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

    2.      Анализ существующих сервисов по размещению частных объявлений

    В области «бизнес для бизнеса» («B2B» — англ. «Business to business») особенно показательным образцом может служить Международный интернет-каталог товаров и услуг All.Biz, охватывающий данные о коммерческих предложениях 985 тыс. фирм из 67 государств мира. Кроме данных о товарах, данный интернет-сайт объявлений размещает данные о торгово-индустриальных выставках, выставочных центрах, курсах денежных единиц с автоматическим переводом на 26 языков мира, в том числе и русский.

    В сфере В2С (Business-to-consumer) особенно показательным образцом может служить запущенная в 2007 году наикрупнейшая в России электронная доска объявлений AVITO.ru, содержащая огромное количество частных объявлений. Кроме предметного поиска, веб-сайт дает возможность регионального поиска товаров и услуг. Данная служба дает возможность AVITO.ru благополучно соперничать с региональными досками объявлений. Не взирая на то, что интернет-сайт нацелен на частные объявления, он представляет коммерческие услуги по открытию интернет-магазинов на своей платформе.

    Помимо этого, необходимо обозначить гибридные формы досок объявлений и специальных информационных сервисов. Такой конфигурацией считается информационный сервис 2GIS компании-разработчика электронных справочников ООО «ДубльГИС». По информации компании, 2,6 млн пользователей из более 182 населенных пунктов России, Украины, Казахстана и Италии постоянно пользуются услугами сервиса. Новые выпуски 2ГИС выходят каждый месяц в трёх версиях: для мобильных телефонов, для персональных компьютеров и интернет-версия в сети Интернет.

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

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

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

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

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

    С целью выполнения анализа избраны последующие, одни из особенно известных и популярных, веб-сайты[2]:

    1)  Доска бесплатных объявлений «AVITO».

    2)  Доска бесплатных объявлений «Из рук в руки».

    Результаты анализа приведены в табл. 1 и табл.2.

    В табл. 1 отражены сведения по форматам представления данных на сайте. В табл. 2 даётся краткое описание набора сведения об элементах объявления и того, как они размещены на сайте и насколько структурированы.


    [1] Нестеров Р. А. Анализ структуры представления риелторской информации в сети Интернет с целью формирования подхода к проектирования репозитория агентства недвижимости [Электронный ресурс] / Нестеров Р. А // Режим доступа: https://www.scienceforum.ru/2013/147/5478 (Дата обращения: 19.05.2017)

    [2] Калужский М. Л. Сетевые интернет-коммуникации как инструмент маркетинга / М. Л. Калужский, В. В. Карпов // Практический маркетинг. — №2 (192). – 2013. – С. 38 – 39.

    Таблица 1. Форматы представления данных на сайтах объявлений

     HTMLТекстовыйДругое
    AVITOблоки и таблицы для общей информацииподробное описание объявленияjpg-фотографии, прикрепленные к объявлению
    Из рук в рукиблоки и таблицы для общей информацииподробное описание объявленияjpg-фотографии, прикрепленные к объявлению

    Таблица 2. Структуризация информации на сайтах объявлений

     Набор сведений об объекте недвижимостиСтепень структуризации
    AVITO— Общая информация. — Стоимость аренды, покупки и т.п. — Контактная информация лица, подавшего объявлениеИнформация структурирована слабо. Большая часть необходимой информации размещается в текстовом описании объявления.
    Из рук в руки— Общая информация; — Стоимость покупки и т.п. — Контактная информация лица, подавшего объявлениеБольшая часть необходимой информации размещается в специальных атрибутах объявления

    По сравнению с рассмотренными сервисами, разрабатываемая система имеет ряд преимуществ:

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

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

    Все методы разработки веб-сайтов можно условно поделить на две группы. К первой группе относятся методы создания сайтов ручного написания с использованием языка разметки HTML и различных языков программирования. Для написания статического сайта достаточно сочетания HTML и CSS. Но если необходим более сложный, динамический сайт, то тут подключают языки программирования. Основными языками программирования, которые наиболее часто используются для разработки сайтов, являются PHP, JavaScript, APS.NET[1].

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

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

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

    Первое, что необходимо определить на самом раннем этапе, — это на каком языке будет реализована серверная часть сайта. PHP — один из самых распространённых языков программирования общего назначения, который был создан специально для создания динамических веб-сайтов. Однако для некоторых веб-проектов может быть более уместно использовать такие языки программирования, как Java, C#, Python, Ruby или какой-то другой.

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

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

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

    3. Фреймворк управления контентом — это каркас для создания системы управления контентом. Основное различие CMS и CMF в том, что CMS — это готовая система, которая зачастую главным образом не требует вмешательства программиста, тогда как CMF — конструктор CMS (в том числе и узкоспециализированных) непосредственно для программиста. Сайт, реализованный на CMF, может иметь более простую архитектуру и административную часть и быть менее требовательным к ресурсам сервера. Грамотно спроектированный фреймворк, который был выбран в соответствии с требованиями конкретного веб-проекта при наличии уже готовых модулей, требует от разработчика лишь правильной установки и настройки.

    Помимо серверной части, у любого веб-сайта есть и «клиентская» сторона — то, как страницы веб-сайта будут отображаться в браузере пользователя, зашедшего на сайт. Современные тенденции в этой области — использование последних технологий и возможностей HTML5 и CSS3, адаптивный веб-дизайн (в том числе большое внимание уделяется отображению на мобильных устройствах) и ориентация прежде всего на контент сайта (простота, удобство чтения, доступность информации).

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

    Каскадные таблицы стилей относятся к специальному коду, позволяющему веб-разработчикам изменять цвета элементов, шрифты, включать фоновые изображения, позиционировать элементы на страницах. CSS3 — это новый стандарт оформления HTML-документов, значительно расширяющий возможности предыдущего стандарта[2].

    Валидность и соответствие исходного кода страниц стандартам W3C — важнейшие составляющие поисковой оптимизации сайта. Большое количество ошибок и невалидный, плохо оптимизированный код могут заметно снизить скорость загрузки сайта и затруднить доступ к информации на сайте[3].

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


    [1] Масляк Т. А. Анализ методов разработки сайтов / Т. А. Масляк, Т. А. Колесникова // Информационные технологии: наука, техника, технология, образование, здоровье: Тезисы докладов XXIII Международной научно-практической конференции, Ч.IV (20-22 мая 2015 г., Харьков). – С. 230.

    [2] Шинкевич А. В. Современные технологии создания web-сайтов / А. В. Шинкевич // Проблемы и перспективы современной науки: сб. ст. участников V Респ. науч.-практ. семинара молодых ученых, Минск, 28 нояб. 2014 г. / редколл: В. В. Гедранович [и др.]; Минский ун-т управления. – Минск: Минский университет управления, 2015. – С. 110–114.

    [3] The W3C Markup Validation Service [Electronic resource]. – Mode of access: http://validator.w3.org/ (дата обращения 29.01.2017).

    [4] Шинкевич А. В. Современные технологии создания web-сайтов / А. В. Шинкевич // Проблемы и перспективы современной науки: сб. ст. участников V Респ. науч.-практ. семинара молодых ученых, Минск, 28 нояб. 2014 г. / редколл: В. В. Гедранович [и др.]; Минский ун-т управления. – Минск: Минский университет управления, 2015. – С. 110–114.

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

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

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

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

    Все статические сайты созданы с помощью языка гипертекстовой разметки HTML. Язык гипертекстовой разметки HTML служит для наглядного и хорошо структурированного представления информации в сети Интернет. Программы, интерпретирующие данную разметку и выводящие информацию на экран, стали называться браузерами. На сегодняшний день известно много их разновидностей: Firefox, Chrome, Opera, Microsoft Edge и др[1].

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

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

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

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


    [1] Росс В. С. Создание сайтов: HTML, CSS, PHP, MySQL [Текст]. Учебное пособие, ч. 2 / В. С. Росс — МГДД(Ю)Т, М. — 2011 – 68 с.

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

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

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

    Структура динамического веб-сайта
    Рисунок 1.1 — Структура динамического веб-сайта

    База данных — структурированный упорядоченный набор данных. Система управления базами данных (СУБД) — программа, предназначенная для организации и ведения базы данных.

    Реляционная база данных – база данных, основывающаяся на реляционной модели. Слово «реляционный» происходит от английского слова «relation» (отношение). Для работы с реляционными базами данных применяют реляционные системы управления базами данных. Использование реляционных баз данных было предложено в 1970 году доктором Коддом, работающим в компании IBM[1].

    Наибольшее распространение получили серверы реляционных баз данных, которые основаны на клиент-серверной архитектуре. Эти серверы обеспечивают устойчивую работу с базами данных одновременно большого количества клиентов (это могут быть десятки, сотни, тысячи и миллионы клиентов – все зависит от используемого оборудования и программного обеспечения). Кроме этого, реляционную модель данных реализуют так называемые настольные базы данных, такие как dBASE, FoxPro, Clarion, Paradox, Access. Практически все ведущие настольные базы данных в настоящее время поддерживают возможность работы в качестве клиентов серверов баз данных при помощи технологий ODBC, BDE, ADO и др.

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

    Понятие нормальной формы было введено Эдгаром Коддом при создании реляционной модели баз данных. Нормализация – это процесс преобразования базы данных, к виду, который отвечает нормальным формам и обеспечивает минимальную избыточность. Цель нормализации – защита базы данных от структурных и логических проблем, являющимися аномалиями данных. Нормализация не ставит цель уменьшения или увеличения производительности работы или же уменьшения, или увеличения объёма базы данных. Конечная цель нормализации – уменьшение потенциальной противоречивости, хранимой в БД информации. Нормализация применима к таблице, которая представляет собой правильное отношение.

    Реляционные СУБД делятся на системы с открытым кодом (OpenSource) и с закрытым. Согласно исследованиям компании IDC, компании из Европы чаще отдают предпочтении открытому программному обеспечению (ПО). Делают это они из–за повышения качества и гибкости данного ПО[3].

    Система управления базами данных представляет собой программное обеспечение, с помощью которого пользователи могут создавать, определять и поддерживать базу данных. Особенность СУБД с открытым кодом является то, что они имеют при себе исходный код, который можно изменить, оптимизировать, ускорить за счет какого – либо алгоритма.

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

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

    В общем случае web-приложения можно рассматривать как приложения с клиент-серверной архитектурой.

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


    [1] Мирошниченко, Г. А. Реляционные базы данных. Практические приемы оптимальных решений [Текст] / Г. А. Мирошниченко. — «БХВ-Петербург», 2005. – 400 с.

    [2] Маклафлин Б. PHP и MySQL. Исчерпывающее руководство [Текст] / Б. Маклафлин. – СПб.: Питер, 2014. – 544 с.

    [3] Мустафаева, Э. И. Использование СУБД MySQL для разработки информационно–справочной системы «Рекреационные ресурсы города Евпатории» [Электронный ресурс] / Э. И. Мустафаева, Ф. В. Шкарбан – Электрон. текстовые дан. – Режим доступа: http://eztuir.ztu.edu.ua/123456789/1037

    Обобщенное взаимодействие клиента и сервера
    Рисунок 1.2 — Обобщенное взаимодействие клиента и сервера

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

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

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

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

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

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

    • уровень пользовательского интерфейса;
    • уровень обработки;
    • уровень данных.

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

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

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

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

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

    Рисунок 1.3 – Двухуровневая архитектура

    Анализ логики действия приложения, и обработки данных в предоставленной модели достаточно затруднительно. Если клиент «толстый» и проводит основополагающую обработку данных, то появляются проблемы, сопряженные с распределением, установкой и сопровождением приложения, так как любой клиент нуждается в своей локальной копии программного обеспечения. В случае если клиент «тонкий» использование логики и обрабатывания обязаны выполняться в базе данных, а, значит, он становится вполне зависимым от определенной употребляемой СУБД.

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

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

    — надежность: каждый пользователь должен иметь собственный индивидуальный доступ к базе данных, и владеть правами, предоставленными для эксплуатирования приложения. Для этого нужно хранить права доступа для любого пользователя в базе данных. Когда нужно добавить функциональности приложению и нужно обновить пользовательские права;

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

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

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

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

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

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

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

    Трехуровневая архитектура
    Рисунок 1.4 — Трехуровневая архитектура

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

    Есть много вариантов основных трехуровневых моделей, предназначенных для выполнения различных функций. К ним принадлежат обработка распределенных транзакций (когда несколько СУБД обновляются в одном протоколе), приложения, основанные на сообщениях (где приложения не общаются в режиме реального времени) и кросс-платформенной совместимости (Object Request Broker или «ORB» приложения).

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

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

    Таким образом, где появляется вопрос взаимодействия с пользователями Internet или Intranet, появляются и WEB приложения, — исполняющие данное взаимодействие и соединяющие пользователя с базой данных или корпоративной системой организации web-приложения.

    Общая структура
    Рисунок 1.5 – Общая структура

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

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

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

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

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

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

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

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

    Программная архитектура содержит в себе структуры, из которых складываются крупные программные системы. Архитектурное представление система абстрактно; не затрагивая детали реализации, алгоритмы и представления данных, оно ориентированно на поведение и взаимодействие «черных ящиков».

    На архитектуру программного обеспечения оказывают влияние множество факторов, в том числе:

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

    Web-сервисы представляют собой приложения с сервис-ориентированной архитектурой (Service-Oriented Architecture — SOA).

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

    В общем виде SOA предполагает наличие трех основных участников: поставщика сервиса, потребителя сервиса и реестра сервисов (рисунок 1.6). Взаимодействие участников выглядит достаточно просто: поставщик сервиса регистрирует свои сервисы в реестре, а потребитель обращается к сервису с запросом.

    Рисунок 1.6 — Общая схема сервис-ориентированной архитектуры

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

    Реестр сервисов реализует обещанное архитектурой SOA слабое связывание. Храня месторасположения оконечных точек сервисов, он устраняет тесное связывание, приводящее к жесткой привязке потребителя к провайдеру. Он также облегчает потенциальные сложности замены одной реализации сервиса другой при необходимости.

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

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

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

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

    Взаимодействие компонентов в данной архитектуре происходит благодаря использованию протокола HTTP (HyperText Transfer Protocol). Он представляет собой протокол прикладного уровня для передачи гипертекста. Является протоколом высокого уровня, который используется в сетях TCP/IP для извлечения файлов с соответствующих ресурсов. При этом HTTP не хранит информацию о своем состоянии: каждая транзакция рассматривается независимо от остальных. Следовательно, в типичной реализации создается новое TCP-соединение между клиентом и сервером для каждой транзакции, которое прерывается сразу после ее завершения.

    4. Постановка задачи

    Функционал веб-сервиса:

    • регистрация c помощью QR;
    • регистрация с помощью почты;
    • авторизация по QR-коду;
    • авторизация через html-форму;
    • личный кабинет;
    • обмен сообщениями;
    • редактирование профиля;
    • подача объявлений;
    • добавление, объявление в избранное;
    • видеозапись в объявлении;
    • интуитивно понятный интерфейс;
    • выгрузка объявлений;
    • администраторская часть многоуровневая.

    5. Модель данных

    Для моделирования базы данных использована программа — AllFusion ERwin Data Modeler. Это CASE-средство для проектирования и документирования баз данных, которое позволяет создавать, документировать и сопровождать базы данных, хранилища и витрины данных.

    AllFusion ERwin Data Modeler (ERwin) позволяет наглядно отображать сложные структуры данных.

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

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

    Логический этап разработки базы данных — это абстрактный уровень рассмотрения данных, здесь информация представляется так, как выглядят в настоящем мире, и может называться так, как называется в реальном мире (например «Постоянный клиент» или «Заказ»). Объекты модели, изображаемые на логическом уровне, именуются сущностями и атрибутами. Логическая модель данных считается универсальной и никоим образом не связана с конкретной воплощением СУБД.

    Физический уровень находится в зависимости от определенной СУБД. В физической модели заключается информация о всех объектах БД. Физическая модель находится в зависимости от определенной реализации СУБД. Одной и той же логической модели могут отвечать некоторое количество различных физических моделей.

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

    Модель базы данных
    Рисунок 5.1 – Модель базы данных

    6. Архитектура сервиса

    В основе приложения лежит модель данных MVC. Логика работы web-приложения с архитектурой MVC показана на рис. 6.1.

    Построение web-приложения на основе шаблона MVC
    Рисунок 6.1 — Построение web-приложения на основе шаблона MVC

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

    Суть шаблона в разделении веб-приложения на три основные части:

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

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

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

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

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

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

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

    На рис. 6.2 показан укрупненный архитектурный уровень разрабатываемого приложения.

    Укрупненный уровень архитектуры приложения
    Рисунок 6.2 – Укрупненный уровень архитектуры приложения

    Подробный архитектурный уровень показан на рис. 6.3.

    Подробный уровень архитектуры приложения
    Рисунок 6.3 – Подробный уровень архитектуры приложения

    7. Программная реализация

    В процессе реализации приложения были использованы следующие технологии:

    • Ruby;
    • Ruby on Rails;
    • Logical;
    • Nginx;
    • Passenger;
    • SQRL;
    • CSS;
    • HTML;
    • JavaScript (Ajax);
    • JQuery;
    • Node.

    Ruby – это динамический императивный объектно-ориентированный язык программирования, создателем которого является Юкихиро Мацумото. В основу этого языка программирования легли Perl, Smalltalk, Eiffel, Ada и Lisp.

    Ruby обладает динамической типизацией и автоматическим управлением памятью. Язык Ruby применяется в веб-разработке в составе открытого веб-фреймворка Rails, чаще именуемого Ruby on Rails (RoR)[1].


    [1] PHP, Ruby, Python – краткая характеристика трёх языков программирования / Режим доступа: http://www.internet-technologies.ru/articles/article_1991.html. Дата обращения: 22.05.2017

    Достоинства Ruby:

    • открытая разработка;
    • функционирует на множестве платформ;
    • имеет возможность внедряться в HTML-разметку;
    • принадлежит к языкам программирования сверхвысокого уровня (VHLL), то есть владеет высокой степенью абстрактности и предметным подходом в осуществлении алгоритмов;
    • реализует концептуально чистую объектно-ориентированную парадигму;
    • предоставляет современные способы манипуляции строками и кодом;
    • просто интегрирует в свои программы производительные серверы баз данных (DB2, MySQL, Oracle и Sybase);
    • благодаря VHLL программы на Ruby неплохо масштабируются и просто сопровождаются;
    • простой и чистый синтаксис существенно упрощает программистам первые шаги в обучении программирjмованию на Ruby;
    • имеет простой программный интерфейс для создания многопоточных приложений;
    • имеет современные средства для работы с массивами;
    • потенциал языка можно увеличить при помощи библиотек, написанных на C или Ruby;
    • зарезервированные слова могут являться идентификаторами, в случае если это не создаёт многозначности для парсера;
    • дополнительные возможности для предоставления безопасности;
    • интегрированный отладчик.

    Недостатки Ruby:

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

    Соответственно официальному вебсайту Ruby, данный язык находится в десятке наиболее известных языков программирования[1]. Подъем известности самого языка обусловлен известностью программных продуктов, созданных на Ruby, особенно продуктов на RoR.

    Файлы программ, написанных на Ruby, имеют расширение .rb. Эти файлы можно запустить как скрипты командной оболочки при помощи интерпретатора.

    Rails — это полноценный, многоуровневый фреймворк для построения веб-приложений, использующих базы данных, который основан на архитектуре Модель-Представление-Контроллер (Model-View-Controller, MVC).

    Динамичный AJAX-интерфейс, обработка запросов и выдача данных в контроллерах, предметная область, отраженная в базе данных, — для всего этого Rails предоставляет однородную среду разработки на Ruby. Все, что необходимо для начала — база данных и веб-сервер[2].

    Rails отлично работает со многими веб-серверами и СУБД. В качестве веб-сервера рекомендуется использовать Apache или nginx с модулем Phusion Passenger. Rails также можно разворачивать используя Unicorn, Thin, Mongrel или FastCGI. В качестве СУБД можно использовать MySQL, PostgreSQL, SQLite, Oracle, SQL Server, DB2 или Firebird. Использовать Rails можно на практически любой операционной системе, но для развертывания рекомендуются системы семейства *nix.

    Nginx [engine x] — это HTTP-сервер и обратный прокси-сервер, почтовый прокси-сервер, и кроме того TCP/UDP прокси-сервер общего предназначения, первоначально созданный Игорем Сысоевым. Уже долгий период он обслуживает серверы многочисленных высоконагруженных отечественных сайтов, таких как Яндекс, Mail.Ru, ВКонтакте и Рамблер. В соответствии со статистикой Netcraft nginx обслуживал или проксировал 29% наиболее нагруженных сайтов в мае 2017 года[3].


    [1] О Ruby / Режим доступа:  https://www.ruby-lang.org/r u/about/ Дата обращения: 22.05.2017.

    [2] Веб-разработка с удовольствием / Режим доступа: http://www.rubyonrails.ru/ Дата обращения: 26.05.2017.

    [3] Nginx / Режим доступа: http://nginx.org/ru/ Дата обращения: 26.05.2017.

    Основная функциональность HTTP-сервера;

    • акселерированная поддержка FastCGI, uwsgi, SCGI и memcached серверов с кэшированием, распределение нагрузки и отказоустойчивость;
    • акселерированное обратное проксирование с кэшированием, распределение нагрузки и отказоустойчивость;
    • модульность, фильтры, в том числе сжатие (gzip), byte-ranges (докачка), chunked ответы, XSLT-фильтр, SSI-фильтр, преобразование изображений; несколько подзапросов на одной странице, обрабатываемые в SSI-фильтре через прокси или FastCGI/uwsgi/SCGI, выполняются параллельно;
    • обслуживание статических запросов, индексных файлов, автоматическое создание списка файлов, кэш дескрипторов открытых файлов;
    • поддержка HTTP/2 с приоритизацией на основе весов и зависимостей;
    • поддержка SSL и расширения TLS SNI.

    Passenger — является сервером приложений, который позволяет надежно управлять веб-приложениями, микроуслугами и APIs с выдающейся надежностью, производительностью и управлением. Путем действия как диспетчер процессов, обратного прокси и путем обеспечения операционных инструментов, Passenger позволяет быстро запустить и легко поддержать Ruby, Node.js, Python и Meteor приложения[1].

    SQRL — это безопасная, всесторонняя, простая в использовании замена для имен пользователей, паролей, напоминаний, одного временного кода аутентификаторов. Система SQRL коренным образом изменяет вход в систему веб-сайта и аутентификацию. Это устраняет многие проблемы, свойственные от традиционным методам входа в систему[2].

    QR-код — это двухмерный штрих-код (бар-код), предоставляющий информацию для быстрого её распознавания с помощью камеры мобильного телефона[3].

    Различают статические и динамические QR-коды. В статическом QR-коде введенные в него данные не могут быть изменены без создания нового варианта кода. Для получения закодированной в QR-коде информации не требуется наличие доступа к сети Интернет. Если закодирована веб-ссылка или Email-адрес, тогда устройство получит информацию о том, какая именно ссылка закодирована (чтобы перейти по ней или отправить E-mail, будет необходимо подключение к сети Интернет).

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

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

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

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

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

    На сегодняшний момент создание собственного QR-кода представляет собой достаточно простой процесс, не занимающий много времени.

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

    QR-код может содержать в себе различную информацию: обычный текст, рекламу, номер телефона, SMS-сообщение, E-mailадрес и сообщение, визитную карточку, Twitter, карты Google, ссылки на сайт, ссылки для скачивания различных файлов, электронные билеты, информацию об инвентаризации (движение и учёт товаров на складе), системы регистрации времени и другое.

    HTML и CSS. CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, который написан с использованием языка разметки HTML[4]. HTML-документ представляет собой текстовый файл, содержащий набор инструкций для представления информации в требуемом виде в окне браузера[5]. Встроенный в HTML-документ язык JavaScript позволяет анализировать и обрабатывать содержимое страницы, взаимодействовать с сервером (откуда загружен документ), динамически менять свойства и содержание документа в окне браузера.


    [1]Passenger / Режим доступа: https://www.phusionpassenger.com/business_advantages. Дата обращения: 25.05.2017

    [2] SQRLSQRL / Режим доступа: https://www.grc.com/sqrl/sqrl.htm Дата обращения: 23.05.2017

    [3] Ткачева М.В. Оценка допустимых преобразований QR-code // Известия Тульского государственного университета. Технические науки. 2013. С. 151-156.

    [4] Самарев Р. С. Создание простейших HTML-страниц, валидаторы кода. Каскадные таблицы стилей CSS: методические указания к выполнению практикума № 1 и лабораторной работы № 1 по дисциплинам «Языки интернет-программирования» и «Практикум по интернет-программированию» / Р. С. Самарев. — Москва: Издательство МГТУ им. Н. Э. Баумана, 2015. — 39 с.

    [5] Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие/Сост. С. М. Наместников. — Ульяновск: УлГТУ, 2014. – 91 c.

    7.1. Реализация серверной части веб-сервиса

    Серверная часть приложения размещена на VPS от сервиса DigitalOcean. Для создания программного кода используется редактор — Microsoft Code. Процесс работы над кодом показан на рис. 7.1. Для работы над кодом на сервере для подключения используется протокол SSH с помощью программы Putty (рис. 7.2) и с помощью редактора Vim осуществляется работа над исходным кодом приложения.

    Исходный код приложения
    Рисунок 7.1 – Исходный код приложения
    Подключение через SSH
    Рисунок 7.2 – Подключение через SSH

    7.2. Реализация клиентской части веб-сервиса

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

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

    Окно регистрации
    Рисунок 7.2 – Окно регистрации
    Вход на сайт
    Рисунок 7.3 — Вход на сайт

    После входа на сайт открывается страница пользователя, где можно создать объявление, и после модерации оно будет размещено (рис. 7.4).

    Страница пользователя
    Рисунок 7.4 – Страница пользователя

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

    На странице редактирования профиля можно загрузить фото и поменять личные данные (ФИО, Дата рождения, город, почта, телефон, подписать на рассылку).

    У пользователей сервиса есть возможность обмениваться сообщениями (рис. 7.5). При этом сообщения могут иметь разный вид, в зависимости от статуса: новое сообщение, не прочитанное сообщение, прочитанное сообщение.

    Сообщения пользователей
    Рисунок 7.5 – Сообщения пользователей

    Диалог между пользователями показан на рис. 7.6.

    Диалог между пользователями
    Рисунок 7.6 – Диалог между пользователями

    Процесс размещения объявления показан на рис. 7.7. Здесь, кроме добавления текста и пяти фотографий, есть возможность добавления видеороликов из популярных видеохостингов Youtube или Vimeo, а также геолокации.

    Добавление объявления
    Рисунок 7.7 – Добавление объявления

    Страница регистрации на сервисе показана на рис. 7.8. При регистрации есть возможность выбора географической локализации, которая отображается в отдельном окне (рис. 7.9).

    Регистрация пользователя
    Рисунок 7.8 – Регистрация пользователя
    Выбор геолокализации
    Рисунок 7.9 — Выбор геолокализации

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

    Уведомление о подтверждении почты
    Рисунок 7.10 – Уведомление о подтверждении почты

    На главной странице сервиса отображен список объявлений из выбранного города, при этом показываются объявления по выбранной группе животный. Внизу главной страницы показаны последние объявления (рис. 7.11).

    Главная страница сервиса
    Рисунок 7.11 – Главная страница сервиса

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

    Страница объявления
    Рисунок 7.12 – Страница объявления

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

    Поиск по сайту
    Рисунок 7.13 – Поиск по сайту

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

    • регистрация новых ассистентов, удаление существующих;
    • изменение содержимого системных файлов, таких как(.css, .html.erb, .js)
    • управление правами ассистентов:

    — создание субъектов;

    — создание городов в субъекте;

    — создание мест в городе;

    — создание пород для групп животных;

    — модерация поданных объявлений.

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

    7.3. Метрика

    В данном разделе показаны ряд метрик, которые показывают разные параметры работы сайта. Для определения показателей использованы возможности сайта — loadimpact.com.

    На рис. 7.14 показана зависимость скорости загрузки сайта от количества пользователей.

    Диаграмма работы сайта
    Рисунок 7.14 – Диаграмма работы сайта

    На рис. 7.15 показана пропускная способность.

    Пропускная способность
    Рисунок 7.15 – Пропускная способность

    Количество запросов в секунду показано на рис. 7.16.

     Количество запросов в секунду
    Рисунок 7.16 – Количество запросов в секунду

    Показатели соединения по протоколу TCP показаны на рис. 7.17.

    Соединения по протоколу TCP
    Рисунок 7.17 — Соединения по протоколу TCP

    Показатель нагрузки на CPU показан на рис. 7.18.

    Генератор нагрузки CPU
    Рисунок 7.18 — Генератор нагрузки CPU

    Показатели генератора нагрузки на память показаны на рис. 7.19.

    Генератор нагрузки на память
    Рисунок 7.19 — Генератор нагрузки на память

    Время загрузки сайта показано на рис. 7.20.

    Время загрузки
    Рисунок 7.20 – Время загрузки

    7.4. Отладка и тестирование

    В данном разделе показаны ошибки, которые возникали в процессе отладки и тестирования приложения. Наиболее частой ошибкой было по причине того, что не был найден шаблон (рис. 7.21). Кроме этой ошибки возникали и другие, которые показаны на рис. 7.22 и 7.23. После исправления ошибок веб-сервис начал успешно функционировать.

    Ошибка поиска шаблона
    Рисунок 7.21 – Ошибка поиска шаблона
    Ошибка валидации
    Рисунок 7.22 – Ошибка валидации
    Ошибка генерации URL
    Рисунок 7.23 – Ошибка генерации URL

    Заключение

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

    Были реализованы следующие задачи:

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

    Основу созданного сервиса составил фреймворк Ruby on Rails созданный с использованием языка программирования Ruby. Используется данный фреймворк для создания веб-приложений, и использует архитектуру MVC. Созданное веб-приложение позволяет осуществить вход в него с помощью QR-кода и после этого размесить объявление.

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

    Список использованной литературы

    1. Вайсфельд М. Объектно-ориентированное мышление / М. Вайсфельд. — СПб.: Питер, 2014. — 304 с.
    2. Вальчевский А. С. Технология системы управления контентом [Электронный ресурс] / А. С. Вальчевский, Е. Б. Никитин // http://belisa.org.by/pdf/PTS2005/219-220.pdf (дата обращения 19.05.2017)
    3. Веб-разработка с удовольствием / Режим доступа: http://www.rubyonrails.ru/ Дата обращения: 26.05.2017.
    4. Веб-сайт QRCoder.ru [Электронный ресурс]. URL: http://www.oncology.ru/QR_cod/ (дата обращения: 14.05.2016)
    5. Вересников, Ю. К. О надежности систем обработки информации / Ю. К. Вересников //Актуальные проблемы современной науки. — 2011. — № 2 (58). — С. 193-195.
    6. Генератор QR-кода [Электронный ресурс]. URL: http://creambee.ru/qr- code-generator/ (дата обращения: 14.05.2016)
    7. Генератор QR-кода [Электронный ресурс]. URL: http://www.qrmania.ru/ (дата обращения: 14.05.2016)
    8. Генератор QR-кода [Электронный ресурс]. URL: https://trustthisproduct.com/free_qr_code_generator.php?lang=ru/ (дата обращения: 14.05.2016)
    9. Горнаков С. Г. Осваиваем популярные системы управления сайтом (CMS) / С. Г. Горнаков. – М.: ДМК Пресс, 2009. – С. 20 – 31.
    10. Дронов В. А. PHP, MySQL, HTML5 и CSS3. Разработка современных динамических Web–сайтов / В. А. Дронов. – СПб.: BHV, 2016. – 688 c.
    11. Елиферов В. Г. Бизнес-процессы: регламентация и управление: / Елиферов В. Г., Репин В. В.: ИНФРА-М, 2011 г. — 319 с.
    12. Жуков Р. А. СУБД с открытым исходным кодом: возможность применения алгоритмов распараллеливания / Р. А. Жуков // Технические науки. – 2015. – № 1–2 (35–36). – С. 20 – 21.
    13. Зудилова, Т. В. Web-программирование HTML / Т. В. Зудилова, М. Л. Буркова — СПб: НИУ ИТМО, 2012.– 70 с.
    14. Калужский М. Л. Сетевые интернет-коммуникации как инструмент маркетинга / М. Л. Калужский, В. В. Карпов // Практический маркетинг. — №2 (192). – 2013. – С. 38 – 39.
    15. Коцюба И. Ю. Основы проектирования информационных систем. Учебное пособие / И. Ю. Коцюба, А. В. Чунаев, А. Н. Шиков. – СПб: Университет ИТМО, 2015. – 206 с.
    16. Курзыбова Я. В. Средства создания динамических web-сайтов: учеб. пособие / Я. В. Курзыбова. – Иркутск: Изд-во ИГУ, 2011. – 121 с.
    17. Маклафлин Б. PHP и MySQL. Исчерпывающее руководство / Б. Маклафлин. – СПб.: Питер, 2014. – 544 с.
    18. Мартовой А. В. Сущность и основные характеристики электронного бизнеса, электронной коммерции, электронного и интернет-маркетинга / А. В Мартовой // Проблемы материальной культуры. — С. 146 — 153
    19. Масляк Т. А. Анализ методов разработки сайтов / Т. А. Масляк, Т. А. Колесникова // Информационные технологии: наука, техника, технология, образование, здоровье: Тезисы докладов XXIII Международной научно-практической конференции, Ч.IV (20-22 мая 2015 г., Харьков). – С. 230.
    20. Маторин С. И. Информационные системы: Учебно-практическое пособие / С. И. Маторин, О. А. Зимовец–Белгород: Изд-во НИУ БелГУ, 2012. – 231 с.
    21. Мирошниченко, Г. А. Реляционные базы данных. Практические приемы оптимальных решений / Г. А. Мирошниченко. — «БХВ-Петербург», 2005. – 400 с.
    22. Мустафаева, Э. И. Использование СУБД MySQL для разработки информационно–справочной системы «Рекреационные ресурсы города Евпатории» [Электронный ресурс] / Э. И. Мустафаева, Ф. В. Шкарбан – Электрон. текстовые дан. – Режим доступа: http://eztuir.ztu.edu.ua/123456789/1037
    23. Нестеров Р. А. Анализ структуры представления риелторской информации в сети Интернет с целью формирования подхода к проектирования репозитория агентства недвижимости [Электронный ресурс] / Нестеров Р. А // Режим доступа: https://www.scienceforum.ru/2013/147/5478 (Дата обращения: 19.05.2017)
    24. О Ruby / Режим доступа: https://www.ruby-lang.org/r u/about/ Дата обращения: 22.05.2017.
    25. Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие/Сост. С. М. Наместников. — Ульяновск: УлГТУ, 2014. – 91 c.
    26. Приступа В. В. Подход к выбору технологии создания динамического сайта [Электронный ресурс] / В. В. Приступа. — Режим доступа: http://www.repository.hneu.edu.ua/jspui/bitstream/123456789/6097/29/sect3_Prystupa.pdf (дата обращения 8.05.2017)
    27. Росс В. С. Создание сайтов: HTML, CSS, PHP, MySQL [Текст]. Учебное пособие, ч. 2 / В. С. Росс — МГДД(Ю)Т, М. — 2011 – 68 с.
    28. Самарев Р. С. Создание простейших HTML-страниц, валидаторы кода. Каскадные таблицы стилей CSS: методические указания к выполнению практикума № 1 и лабораторной работы № 1 по дисциплинам «Языки интернет-программирования» и «Практикум по интернет-программированию» / Р. С. Самарев. — Москва: Издательство МГТУ им. Н. Э. Баумана, 2015. — 39 с.
    29. Сотник И. Н. Информационно-коммуникационные технологии как направление социально-экономических трансформаций при переходе к информационному обществу / И. Н. Сотник, О. Н. Волк // Современные тенденции управления политическим и социально-экономическим развитием территорий: [монография]; под ред. Минаковой И.В., Мельника Л.Г. — Орел: АПЛИТ. — 2013. — С. 222-234.
    30. Титков А. В. Создание веб-приложений: учебное пособие / А. В. Титков, С. А. Черепанов. — Томск: Эль Контент, 2014. — 72 с.
    31. Ткачева М.В. Оценка допустимых преобразований QR-code // Известия Тульского государственного университета. Технические науки. 2013. С. 151-156.
    32. Филлипов С. А. Основы современного веб-программирования: Учебное пособие / С. А. Филлипов. – М.: НИЯУ МИФИ, 2011. – 160 с.
    33. Шинкевич А. В. Современные технологии создания web-сайтов / А. В. Шинкевич // Проблемы и перспективы современной науки: сб. ст. участников V Респ. науч.-практ. семинара молодых ученых, Минск, 28 нояб. 2014 г. / редколл: В. В. Гедранович [и др.]; Минский ун-т управления. – Минск: Минский университет управления, 2015. – С. 110–114.
    34. Nginx / Режим доступа: http://nginx.org/ru/ Дата обращения: 26.05.2017.
    35. Passenger / Режим доступа: https://www.phusionpassenger.com/business_advantages. Дата обращения: 25.05.2017
    36. PHP, Ruby, Python – краткая характеристика трёх языков программирования / Режим доступа: http://www.internet-technologies.ru/articles/article_1991.html. Дата обращения: 22.05.2017
    37. SQRLSQRL / Режим доступа: https://www.grc.com/sqrl/sqrl.htm Дата обращения: 23.05.2017
    38. The W3C Markup Validation Service [Electronic resource]. – Mode of access: http://validator.w3.org/ (дата обращения 29.01.2017).
    39. Usage of content management systems for websites [Электронный ресуср] / Режим доступа: https://w3techs.com/technologies/overview/content_management/all (дата обращения 03.05.2017).

    Купить данную работу или заказать подобную