Информационно-справочный портал | HTML | CSS

Дипломная работа «Разработка внутреннего информационно-справочного портала предприятия»  

Информационно-справочный портал.

ПЛАН

ВВЕДЕНИЕ

1. Современные веб-сайты, их назначение и особенности функционирования

1.1 Назначение разработки веб-сайтов

1.2 Статические и динамические сайты

1.3 Анализ технологий, которые используются при создании сайтов

1.4 Анализ технических и программных средств веб-разработки

1.5 Язык гипертекстовой разметки – HTML

1.6 Каскадные таблицы стилей – CSS

1.7 Серверные языки программирования

2. РАЗРАБОТКА И РЕАЛИЗАЦИЯ ИНФОРМАЦИОННО-СПРАВОЧНОГО ПОРТАЛА

2.1 Инструменты проектирования баз данных

2.2 Выбор СУБД для создания информационно-справочного портала

2.3 Создание проекта базы данных информационно-справочного портала

2.4 Средства проектирования и создания информационно-справочного портала

2.5 Структура информационно-справочного портала

2.6 Функции информационно-справочного портала  

2.7 Реализация меню системы, категорий и записей

2.8 Создание административной панели информационно-справочного портала

2.9 Проверка работоспособности информационно-справочного портала

2. 10 Тестирование и отладка портала

3. ЭКОНОМИЧЕСКАЯ ЧАСТЬ

3.1 Определение трудоемкости работ по обследованию объекта, для которого разрабатывается проект.

3.2 Определение трудоемкости работ по разработке проекта.

3.3 Смета расходов по разработке проекта

3.4 Определение доходов от реализации проекта. Маркетинговое исследование

3.5 Оценка экономической эффективности разработки проекта.

3.6 Расчет экономической эффективности использования проекта.

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

Введение

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

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

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

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

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

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

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

Предмет исследования: информационно-справочный портал.

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

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

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

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

1. СОВРЕМЕННЫЕ ВЕБ-САЙТЫ, ИХ НАЗНАЧЕНИЕ И ОСОБЕННОСТИ ФУНКЦИОНИРОВАНИЯ

1.1 Назначение разработки веб-сайтов

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

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

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

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

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

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

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

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

Веб-сайт выполняет следующие основные задачи:

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

Типы веб-сайтов:

  • Рекламные веб-сайты. Веб-сайты могут создаваться исключительно в рекламно-промоутерских целях. Такие сайты непосредственно не занимаются продажей, их задача состоит в донесении до целевой аудитории рекламной информации, и создаются они из расчета на определенный круг товаров или услуг. Обычно такие сайты выполняются с использованием большого количества графики, flash-анимации. Для привлечения клиентов на сайт используют игровые и развлекательные методы.
  • Продающие сайты. Для таких сайтов характерно наличие описательного рекламного материала для товаров или услуг, каталог данных товаров или услуг, информации о фирме-продавце, а также контактная информация. Дополнительные сервисы, такие, как полезная информация, удобство заказа через сайт в сочетании с грамотной раскруткой, могут сделать веб-сайт привлекательным для сторонних рекламодателей.
  • Информационные веб-сайты. Сайты с наличием определенной тематической информации.
  • Веб-сайты для поддержки. Последний тип веб-сайтов — это поддержка клиентов. Обычно на таких сайтах размещают обновление для программных продуктов, новости; если речь идет о сайте банка, это может быть система управления средствами клиента.

1.2 Статические и динамические сайты

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

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

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

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

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

Для создания статических сайтов не требуется глубоких знаний в области программирования, достаточно иметь дизайнерские навыки и подходящую визуальную среду разработки (Microsoft FrontPage, Macromedia Dreamweaver). С другой стороны, такие сайты трудоемки и дороги в сопровождении. Заказные динамические сайты сложны и дороги в разработке и требуют больших навыков при дальнейшей модернизации.

1.3 Анализ технологий, которые используются при создании сайтов

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

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

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

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

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

Система управления контентом
Рисунок 2 — Система управления контентом

По существу, можно перечислить основные составляющие всех Систем Управления Контентом (они также являются важными отличительными характеристиками одной системы от другой):

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

1.4 Анализ технических и программных средств веб-разработки

Для создания и хранения гипертекстовых документов предназначено большое количество как программных, таки и аппаратных средств. Создаются гипертекстовые документы с помощью текстовых редакторов, которые позволяют создавать и редактировать разметку документов. Текстовых редакторов существует большое количество. Но наиболее популярными и удобными можно назвать следующие: Atom, Brackets, Notepad++, SublimeText. Также в этих целях можно использовать среды разработки: PHPStorm, Netbeans, Eclipse, Lobster, а также визуальные редакторы: Adobe Dreamweaver, Adobe Muse, Macaw.

Дадим характеристику некоторым текстовым редакторам, средам разработки и визуальным редакторам. Atom — это бесплатный текстовый редактор с открытым исходным кодом для разные операционных систем (OS X, Linux, Windows) с поддержкой плагинов, написанных на Node.js, и встраиваемых под управлением Git Control. Большинство плагинов имеют статус свободного программного обеспечения, разрабатываются и поддерживаются сообществом. Сайт программы — https://atom.io.

Atom — это программа для редактирования текста и программного кода с максимально привычным для разработчиков интерфейсом (рис. 3). Она умеет работать практически со всеми распространенными кодировками и форматами текстовых файлов, а также включает в себя функцию подсветки синтаксиса. При желании Atom можно вполне успешно использовать в качестве менеджера файлов. Встроенный «обзорщик» позволяет легко переключаться между файлами и папками, перемещать текстовые документы «по одиночке» и массово, а также комфортно просматривать структуру директорий древовидным списком [26].

Рабочее окно программы Atom
Рисунок 3 — Рабочее окно программы Atom

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

Atom — полностью бесплатная программа. Редактор является превосходным инструментом для разработчиков, копирайтеров и тем, кому функционала стандартного «Блокнота» Windows недостаточно.

Ключевые особенности и функции редактора Atom [26]:

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

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

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

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

Sublime Text 2 (рис. 5)- это платный текстовый редактор, написанный на C++, который:

  • Работает в Linux, OS X и Windows
  • Обладает приличной скоростью работы
  • Приятным интерфейсом (включая всевозможные анимации)
  • Гибко настраиваем (правда, не в GUI, а в json-конфигах)
  • Имеет множество плагинов, число которых растёт как на дрожжах
  • Поддерживает VIM-режим
  • Использует fuzzy-поиск

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

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

С правой стороны рабочего окна программы находится карта кода. Своеобразный аналог прокрутке страницы в виде pixel-карты, которая представляет из себя сжатый до ~100px по горизонтали код текущего файла (включая подсветку синтаксиса). Помогает в ориентировании по файлу, а также упрощает прокрутку страницы.

С левой стороны расположена панель проекта и открытых файлов. Панель проекта — дерево подключённых к проекту директорий с упрощёнными возможностями файлового менеджера (к примеру, есть возможность создания новых файлов/папок, переименовывания и удаления).

Рисунок 5 — Рабочее окно программы Sublime Text 2

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

Релиз Neon охватывает 84 проекта Eclipse, включающих в совокупности 69 млн. строк кода, написанного совместно 779 разработчиками, из которых 331 являются комиттерами Eclipse. В состав прошлогодней серии релизов под названием Mars вошли 79 проектов.

Страница с описанием Eclipse
Рисунок 6 – Страница с описанием Eclipse

Одной из ключевых целей релиза Neon стало улучшение арсенала средств Eclipse для разработки кода на языке JavaScript. Компания модернизировала интегрированную среду разработки (IDE) на JavaScript (известную под названием JavaScript Development Tools, или JSDT) для платформы Eclipse.

В дополнение ко всему в Eclipse JSDT 2.0 вошли новые инструменты для разработчиков на JavaScript, в том числе редактор кода JSON, а также поддержка программного обеспечения Grunt и Gulp плюс новый отладчик Chromium V8.

Релиз Neon также отличается обновленным пакетом средств разработки на языке PHP (PHP Development Tools Package, PDT). Новая версия Eclipse PDT 4.0 для PHP-разработчиков обеспечивает поддержку PHP 7 и демонстрирует улучшенную производительность.

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

Другие улучшения и дополнения включают в себя обновление модуля Automated Error Reporting (автоматическое оповещение об ошибках). Клиент Eclipse для Automated Error Reporting теперь интегрируется в любой сторонний плагин Eclipse или автономное приложение, разработанное с помощью Rich Client Platform (RCP).

В релизе Neon также предусмотрена улучшенная поддержка инструментария Docker и добавлен сервис Eclipse User Storage Service (USS). Eclipse USS — это новый сервис, с помощью которого в проектах можно хранить и извлекать пользовательские данные и настройки на серверах и с серверов Eclipse соответственно, благодаря чему удается улучшить механизм взаимодействия с разработчиком.

В релиз Neon добавили несколько принципиально новых проектов, отсутствовавших в более ранних ежегодных релизах, а именно: Buildship — набор плагинов Eclipse для компоновщика Gradle, проект Paho для обмена сообщениями в Интернете вещей (IoT) и проект Andmore, представляющий собой набор инструментов для разработки приложений под ОС Android в среде Eclipse.

Среди других новых проектов можно отметить EGerrit — плагин Eclipse для интеграции с используемой в Eclipse программой для инспекции кода Gerrit, а также инструменты Eclipse для PaaS-платформы Cloud Foundry и комплект визуальных элементов интерфейса EMF Parsley. Последний представляет собой упрощенный фреймворк, с помощью которого можно легко и быстро разрабатывать пользовательский интерфейс на базе основного фреймворка Eclipse Modeling Framework (EMF).

В рамках продвижения релиза Neon организация Eclipse Foundation записала семидневный вебинар, посвященный Neon, чтобы стимулировать обсуждение новых возможностей и проектов релиза. Выпуск двенадцатой серии релизов от Eclipse под названием Oxygen запланирован на июнь 2017 г [22].

На рис. 7 показано рабочее окно программы, с файлами проекта.

Рабочее окно программы Eclipse Neon
Рисунок 7 – Рабочее окно программы Eclipse Neon

Программный комплекс NetBeans (рис. 8). Программный продукт является интегрированной средой разработки (Integrated Development Environment, IDE) и, в дополнение к этому, платформой. Первоначально IDE NetBeans могла использоваться только для разработки приложений на Java, начиная с версии 6, NetBeans поддерживает несколько языков программирования. Это либо встроенная поддержка, либо поддержка, осуществляемая путем установки дополнительных расширений. NetBeans имеет встроенную поддержку следующих языков программирования: Java, C, C++, PHP, HTML и JavaScript. Посредством расширений поддерживаются также Groovy, Scala и другие языки.

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

NetBeans можно загрузить по адресу: http://www.netbeans.org. Чтобы загрузить NetBeans, нужно нажать на кнопке Download (Загрузить). После щелчка откроется страница, со списком всех доступных дистрибутивов NetBeans. Разные дистрибутивы NetBeans содержат разные комплекты с разными функциональными возможностями.

Рабочее окно NetBeans
Рисунок 8 – Рабочее окно NetBeans

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

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

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

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

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

Отдельно следует упомянуть модуль jQuery Mobile в продукте Adobe Dreamweaver. Эта программа позволяет создавать мобильные приложения для устройств на Android и iOS. Модуль для разработки отлично дополняется Adobe PhoneGap Build, которая позволяет скомпоновать проект и протестировать его на эмуляторе различных мобильных устройств. Улучшенные алгоритмы работы с FTP, сэкономят время при загрузке проектов. Совсем недавно был представлен новый продукт для создания сайтов от компании Adobe — Dreamweaver CC. Основным нововведение стал «улучшенный конструктор CSS», в котором применяется новая палитра цветов и различные функции, позволившие ускорить процессы визуального контроля и поиска, что привело к значительному сокращению времени редактирования.

Также стоит отметить интерактивное выделение и режим интерактивного просмотра Live View. Теперь можно создавать динамичные макеты в визуальном режиме. Обновленный интерфейс Dreamweaver CC стал проще в понимании и освоении, рабочие процессы — удобнее и быстрее. Контекстные меню позволяют легко применять настройки, что повышает эффективность процесса разработки. Данная версия редактора поддерживает самые современные платформы, такие как PHP 5.4, HTML5, jQuery и jQuery Mobile, а также системы управления контентом, такие как WordPress, Joomla! и Drupal [18].

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

1.5 Язык гипертекстовой разметки – HTML

Для создания интернет-портала «SportLife» был использован язык гипертекстовой разметки HTML (HyperText Markup Language). Данный язык служит для наглядного и хорошо структурированного представления информации в сети Интернет, который приобрел широкую популярность в середине 90-х годов. Программы, интерпретирующие данную разметку и выводящие информацию на экран, стали называться браузерами. На сегодняшний день известно много их разновидностей: Firefox, Chrome, Opera, Internet Explorer и др [17].

Разнообразие браузеров впоследствии привело к нюансам и разночтениям в интерпретации некоторых инструкций языка HTML и соответственно проблемам адаптации HTML-документа к разным вариантам их интерпретации. Для разрешения данной проблемы был создан консорциум W3C (World Wide Web Consortium), в задачу которого входит составление спецификации, отражающей современный уровень развития возможностей языка с учетом разнообразных предложений разработчиков браузеров. Важными итогами работы консорциума стал выход спецификации HTML 4.0 и HTML 5.0. В частности, в HTML 4.0 рекомендуется разделение описания структуры документа от его вида на экране монитора или мобильного устройства, что значительно упрощает разработку, исправление документа, а также поддержку большого числа платформ, сред и т.п.

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

Язык разметки гипертекста (HyperText Markup Language — HTML) можно использовать для представления:

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

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

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

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

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

<html>

HTML-документ

</html>

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

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

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

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

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

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

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

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

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

html>

<head>

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

</head>

<body>

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

</body>

</html>

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

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

<title>Интернет-портал «Спортлайф»</title>

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

<meta charset=»utf-8″>

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

<meta name=»description» content=»Интернет-портал о спорта SportLife» />

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

<meta name=»keywords» content=»интернет-портал о спорте, SportLife, футбол, хоккей, новости спорта «>

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

<link href=»css/bootstrap.min.css» rel=»stylesheet» />

<link href=»css/fancybox/jquery.fancybox.css» rel=»stylesheet»>

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

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

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

При разработке HTML-страницы крайне не рекомендуется пропускать <head></head> и его «минимальная конфигурация» может иметь следующий вид [6, 7]:

<head>

<meta charset=»utf-8″>

<title>Интернет-портал «Спортлайф»</title>

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″ />

<meta name=»description» content=»Интернет-портал о спорте SportLife» />

<meta name=»keywords» content=»интернет-портал о спорте, SportLife, футбол, хоккей, новости спорта «>

<link href=»css/bootstrap.min.css» rel=»stylesheet» />

<link href=»css/fancybox/jquery.fancybox.css» rel=»stylesheet»>

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

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

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

<link href=»skins/default.css» rel=»stylesheet» />

</head>

Структура блока head
Рисунок 10 – Структура блока head

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

В конце тела страницы также нужно размещать подключаемые внешние javascript файлы (скрипты) (рис. 10), это ускоряет загрузку страницы, в сравнении, если эти скрипты подключаются в средине блока <head></head>.

<script src=»js/jquery.js»></script>

<script src=»js/jquery.easing.1.3.js»></script>

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

<script src=»js/jquery.fancybox.pack.js»></script>

<script src=»js/jquery.fancybox-media.js»></script>

<script src=»js/google-code-prettify/prettify.js»></script>

<script src=»js/portfolio/jquery.quicksand.js»></script>

<script src=»js/portfolio/setting.js»></script>

<script src=»js/jquery.flexslider.js»></script>

<script src=»js/animate.js»></script>

<script src=»js/custom.js»></script>

Подключение скриптов в конце блока body
Рисунок 11 – Подключение скриптов в конце блока body

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

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

1.6 Каскадные таблицы стилей – CSS

Для придания сайту определенного внешнего вида были использованы каскадные таблицы стилей. CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, который написан с использованием языка разметки HTML. Подготовкой и выпуском спецификации занимается консорциум W3C (см. сайт http://www.w3.org/Style/CSS/) [25].

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

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-семейства по умолчанию [25].

Можно указать начертание шрифта с использованием свойства 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 (рис. 12, 13):

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

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

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

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

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

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

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

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

Определение фонового цвета для навигационного меню верхней части сайта
Рисунок 14 – Определение фонового цвета для навигационного меню верхней части сайта
  • 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). Для каждой области может быть задан размер. Наличие внутреннего поля позволяет сформировать рамку на заданном расстоянии от содержимого элемента; наличие внешнего поля — установить отступ между рядом расположенными элементами [3].

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

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

Пример:

.container {

padding:0 20px 0 20px;

}

Определение отступов для блока container
Рисунок 15 – Определение отступов для блока 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 применяется для перекрытия унаследованных стилей [20].

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

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

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

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

img {

float: right; padding: 15px;

}

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

1.7 Серверные языки программирования

На сегодняшний день у разработчиков веб-сайтов есть богатый выбор относительно того, какой язык (или технологию) использовать для создания сайта. Вариантов много: Perl, PHP, ASP, ASP.Net, JSP, Coldfusion. Самыми распространенными (с большим отрывом от остальных) сегодня являются PHP и ASP.Net. Поскольку мы имеем большой опыт разработки с применением обеих технологий, хотелось бы максимально объективно провести сравнение между этими двумя платформами.

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

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

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

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

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

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

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

Цикл обработки для веб-страницы ASP.NET:

  • пользователь запрашивает страницу. (Страница запрашивается при помощи HTTP метода GET.) Страница выполняется первый раз, выполняя предварительную обработку, если Вы запрограммировали ее действовать так;
  • страница динамически отсылает разметку обозревателю, которую пользователь видит как веб-страницу, похожую на любую другую страницу;
  • пользователь печатает информацию или выбирает ее из доступных вариантов и затем нажимает на кнопку. (Если пользователь нажимает на ссылку вместо кнопки, страница может просто перенаправить на другую страницу и последующая обработка не будет выполняться на первой странице.);
  • страница развертывается на веб-сервере. (Обозреватель выполняет метод HTTP POST, который в ASP.NET называется обратной передачей.) В частности, страница передается обратно. Например, если пользователь работает со страницей Default.aspx, нажатие на кнопку на странице отправляет страницу обратно на сервер с целевым объектом Default.aspx;
  • на веб-сервере страница выполняется снова. Информация, которую пользователь напечатал или выбрал, доступна на странице;
  • страница выполняет запрограммированную обработку и передается обратно в обозреватель.

Можно создать код сервера для веб-страниц ASP.NET при помощи языка Visual C#, Visual Basic или другого языка, поддерживаемого платформой .NET Framework. Веб-страницы ASP.NET могут содержать клиентский скрипт, который выполняется в обозревателе. Некоторые функции ASP.NET генерируют клиентский скрипт и вставляют его на страницу. В этом случае ASP.NET всегда создает ECMAScript (JavaScript) для лучшей функциональности, не зависящей от обозревателя. В дополнение к ним можно добавить свой собственный клиентский скрипт для определенной функциональности.

При создании веб-страниц ASP.NET можно использовать следующие типы элементов управления:

  • серверные HTML-элементы управления. Используемые на сервере HTML-элементы, которые можно запрограммировать. Серверные HTML- элементы управления предоставляют объектную модель, строго соответствующую воспроизводимым ими HTML-элементам;
  • серверные веб-элементы управления. Элементы управления, имеющие больше встроенных функциональных возможностей, чем серверные HTML- элементы управления. Серверные веб-элементы управления включают не только элементы управления формы, такие как кнопки и текстовые поля, но и специализированные элементы управления, например календарь, меню и элемент управления иерархического представления. Серверные веб-элементы управления более абстрактны, чем серверные HTML-элементы управления; это проявляется в том, что их объектная модель не обязательно отражает HTML- синтаксис;
  • проверяющие элементы управления. Элементы, включающие логику, которая предоставляет возможность контролировать данные, введенные пользователями в элементы управления для ввода, например в элемент управления TextBox. Проверяющие элементы управления позволяют проверить требуемое поле, протестировать на предмет наличия определенного значения или шаблона знаков, удостовериться, что значение лежит в нужном диапазоне и т. д;
  • пользовательские элементы управления. Элементы управления, создаваемые для веб-страниц ASP.NET. Можно внедрять пользовательские элементы управления ASP.NET в другие веб-страницы ASP.NET. Это простой способ создания панелей инструментов и других элементов многократного использования;
  • серверные HTML-элементы управления являются HTML-элементами (или элементами в других поддерживаемых разметках, таких как XHTML), содержащими атрибуты, которые делают их программируемыми в серверном коде. По умолчанию HTML-элементы на веб-странице ASP.NET недоступны для сервера. Вместо этого они рассматриваются как непрозрачный текст и передаются обозревателю. Тем не менее, при преобразовании HTML-элементов в серверные HTML-элементы управления они представляются как элементы, которые можно программировать на сервере.

Объектная модель для серверных HTML-элементов управления строго соответствует этому свойству элементов. Например, в серверных HTML- элементах управления атрибуты HTML представлены как свойства.

Любой HTML-элемент на странице может быть преобразован в серверный HTML-элемент управления путем добавления атрибута runat=»server». Во время синтаксического анализа структура страницы ASP.NET создает экземпляры всех элементов, содержащих атрибут runat-«server». Если требуется сослаться в коде на элемент управления как на член, необходимо также назначить атрибут id этому элементу управления.

Структура страниц предоставляет предварительно заданные серверные HTML-элементы управления для HTML-элементов, наиболее часто динамически используемых на странице. Это элемент form, элементы input (текстовое поле, флажок, кнопка «Отправить»), элемент select и т. п. Эти предварительно определенные серверные HTML-элементы управления совместно используют основные свойства универсального элемента управления; кроме того, каждый элемент управления обычно предоставляет свой набор свойств и свое событие.

Серверные HTML элементы управления имеют следующие функциональные возможности:

  • объектная модель, которую можно запрограммировать на сервере с помощью обычных методов объектно-ориентированного программирования. Каждый серверный элемент управления обладает свойствами, позволяющими программно управлять его атрибутами разметки в серверном коде;
  • набор событий, для которых можно писать обработчики в основном так же, как и в клиентской форме, за исключением того, что событие обрабатывается в серверном коде.
  • возможность обработки событий в клиентском скрипте;
  • автоматическая поддержка состояния элемента управления. Если страница выполняет круговой путь к серверу, то значения, введенные пользователем в серверные HTML-элементы управления, автоматически учитываются и отправляются обратно в обозреватель;
  • взаимодействие с проверяющими элементами управления ASP.NET, так что можно проверять сведения, введенные пользователем в элемент управления;
  • привязка данных к одному или нескольким свойствам элемента управления;
  • поддержка стилей в случае, когда веб-страница ASP.NET отображается в обозревателе, поддерживающем каскадные таблицы стилей;
  • передача специализированных атрибутов. В серверные HTML-элементы управления можно добавить любые необходимые атрибуты, которые структура страниц отображает, не изменяя их функциональных возможностей. Это позволяет добавлять в элементы управления атрибуты, предоставленные обозревателем.

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

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

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

Элементы управления могут обнаруживать возможности обозревателя и отображать соответствующую разметку.

Для некоторых элементов управления имеется возможность определить собственную разметку элемента управления с помощью Templates.

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

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

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

Элементы управления используют следующий синтаксис:

<asp:button attributes runat-’server» id=»Button1″ />

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

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

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

В однофайловой модели разметка страницы и ее программный код физически расположены в одном и том же ASPX-файле. Программный код находится в блоке script, который содержит атрибут runat=»server», указывающий, что этот код должен быть выполнен в ASP.NET.

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

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

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

ASP.NET — технология, предназначенная для создания Web-сайтов, Web-сервисов и приложений. Технология достаточно надежная, безопасная, устойчивая к атакам. ASP-технология основана на модели COM (COM — Component Object Model). ASP.NET формирует динамические, постоянно обновляющиеся страницы. Но программный код и код HTML разделены. При этом сама результирующая страница не содержит ни кодов ASP.NET, ни элементов управления и может быть просмотрена в любом из браузеров, отредактирована в любом редакторе HTML.

PHP работает значительно быстрее в сравнении с ASP.NET. Кроме того, цены на размещения сайтов, созданных на языке PHP для операционных систем Linux/FreeBSD на серверах ведущих провайдеров в 3-5 раз ниже цен на размещения Web-сайтов на ASP.NET.

Интерпретация в PHP — это возможность собирать и запускать на выполнение строку программного кода (функцией eval()), что даёт целый ряд возможностей.

Как правило, PHP работает в связке с базой данных mySQL, а ASP.NET/C# — в связке с базой данных MS SQL Server или Oracle. Быстродействие же связки РНР + MySQL обеспечивается тем, что разрабатывающие эти две технологии группы очень тесно сотрудничают. То же самое и со связкой ASP.NET + MS SQL.

PHP имеет сходные с ASP функции по управлению сессиями. Хотя функции управления заголовками HTTP в ASP.NET намного легче в использовании.

2. РАЗРАБОТКА И РЕАЛИЗАЦИЯ ИНФОРМАЦИОННО-СПРАВОЧНОГО ПОРТАЛА

2.1 Инструменты проектирования баз данных

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Схема ER–модели (сущность, атрибут, связь)
Рисунок 16 – Схема ER–модели (сущность, атрибут, связь)

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

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

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

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

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

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

2. 2 Выбор СУБД для создания информационно-справочного портала

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

MySQL поддерживает большинство важных требований стандарта ANSI SQL (ANSI — American National Standards Institute (Американский национальный институт стандартов)) и часто позволяет дополнять его пользовательскими расширениями, функциями и типами данных, которые призваны улучшить переносимость и обеспечить расширенную функциональность для потребителей. 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 включает также мощную и гибкую систему привилегий, позволяющую администраторам защищать доступ к критическим данным, используя комбинацию из схем проверки подлинности пользователей и хостов [7].

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

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

2.3 Создание проекта базы данных информационно-справочного портала

Как было указано выше, для проектирования базы данных будет использован среда MySQL Workbench, которая предназначена для визуального проектирования баз данных и управления сервером MySQL. Для построения моделей предназначена секция Models (рис. 17).

Окно для построения EER-диаграммы
Рисунок 18 – Окно для построения EER-диаграммы

Чтобы создать таблицу нужно нажать пиктограмму, показанную на рис. 19.

Рисунок 19 – Пиктограмма для создания таблицы в модели базы данных

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

Создание таблицы «admins»
Рисунок 20 – Создание таблицы «admins»
 Создание таблицы «subjects»
Рисунок 21 – Создание таблицы «subjects»
Создание таблицы «pages»
Рисунок 22 – Создание таблицы «pages»
Создание таблицы «zakaz»
Рисунок 23 – Создание таблицы «zakaz»
ER-модель базы данных
Рисунок 24 – ER-модель базы данных

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

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

USE `isportal` ;

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

— Table `isportal`.`admins`

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

CREATE TABLE IF NOT EXISTS `isportal`.`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 = 4

DEFAULT CHARACTER SET = utf8;

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

— Table `isportal`.`pages`

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

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

  `id` INT(11) NOT NULL AUTO_INCREMENT,

  `subject_id` INT(11) NOT NULL,

  `menu_name` VARCHAR(30) 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))

ENGINE = InnoDB

AUTO_INCREMENT = 12

DEFAULT CHARACTER SET = utf8;

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

— Table `isportal`.`subjects`

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

CREATE TABLE IF NOT EXISTS `isportal`.`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 = 9

DEFAULT CHARACTER SET = utf32;

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

— Table `isportal`.`zakaz`

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

CREATE TABLE IF NOT EXISTS `isportal`.`zakaz` (

  `idzakaz` INT(11) NOT NULL AUTO_INCREMENT,

  `name_lastname_klienta` VARCHAR(45) NOT NULL,

  `homeadress` VARCHAR(45) NOT NULL,

  `date` VARCHAR(11) NOT NULL,

  `message` LONGTEXT NOT NULL,

  `phonenumber` VARCHAR(44) NOT NULL,

  `email` VARCHAR(50) NULL DEFAULT NULL,

  `status` TINYINT(11) NULL DEFAULT NULL,

  PRIMARY KEY (`idzakaz`))

ENGINE = InnoDB

AUTO_INCREMENT = 10

DEFAULT CHARACTER SET = utf8;

Для просмотра созданной базы данных используем возможности приложения phpMyAdmin (рис. 25).

База данных информационного портала
Рисунок 25 – База данных информационного портала

С помощью вкладки «Дизайнер» в phpMyAdmin можно увидеть диаграмму созданной базы данных (рис. 26).

Диаграмма базы данных
Рисунок 26 – Диаграмма базы данных

2.4 Средства проектирования и создания информационно-справочного портала

Для разработки информационной системы была использована программа PHPStorm. Это интегрированная среда разработки на PHP с интеллектуальным редактором, поддерживает PHP 7.0, 5.6, 5.5, 5.4 и 5.3 для проектов, обеспечивает автодополнение кода, рефакторинги, предотвращение ошибок и поддерживает смешивание языков.

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

Программа поддерживает передовые технологии веб-разработки, включая HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMAScript Harmony, шаблоны Jade, Zen Coding, Emmet, и, конечно же, JavaScript.

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

Основные возможности программы PHPStorm [29]:

— интеллектуальный редактор 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 и многих других) (рис. 27);

Создание проектов на основании фреймворков
Рисунок 27 – Создание проектов на основании фреймворков

— визуальный отладчик для 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 и других;

— интеграция с системами управления версиями (GitHub и др.), включая унифицированный интерфейс (рис. 2.2);

— удаленное развертывание приложений и автоматическая синхронизация с использованием FTP, SFTP, FTPS;

Контроль версий в PHPStorm
Рисунок 28 – Контроль версий в PHPStorm

— Live Edit: изменения в коде можно мгновенно просмотреть в браузере без перезагрузки страницы;

— PHP UML;

— интеграция с баг-трекерами;

— инструменты работы с базами данных, SQL редактор (рис. 29);

Работа с базами данных
Рисунок 29 – Работа с базами данных

— кросс-платформенность (Windows, Mac OS X, Linux);

Новые возможности версии PhpStorm 2016.3 [29]:

— инструменты и фреймворки: поддержка Docker в удаленных интерпретаторах, поддержка фреймворка тестирования PHPSpec, автоматическое обнаружение и конфигурирование PHPUnit, Behat и PHPSpec из composer.json, поддержка открытия нескольких проектов в одном фрейме, поддержка стиля кода Codeigniter;

— новый подход к редактированию: семантическая подсветка переменных и параметров, автодополнение переопределенных методов и полей без ключевого слова function и var, улучшенная поддержка PSR-0/PSR-4;

— анализ качества кода: строгие типы PHP 7 во всем проекте, новые инспекции соглашения по присвоению имен, улучшенное предотвращение ошибок времени выполнения;

В программе версии 2016.3 значительно усовершенствована поддержка передовых веб-технологий: поддержка Flow, улучшенная поддержка TypeScript, поддержка PostCSS, Stylelint и многое другое.

В PhpStorm 2016.3 также попали многие новые возможности и усовершенствования из IntelliJ Platform, улучшены эргономические характеристики и скорость работы журнала VCS, доработано диалоговое окно объединения (Merge), подсветка синтаксиса в диалоговых окнах Diff и Merge, а также интерфейс для управления удаленными репозиториями Git в проекте. Кроме того, улучшены средства работы с базами данных[1].

Для разработки проекта был использован локальный веб-сервер, который может быть использован, кроме локального просмотра, также и для публикации сайта. В реализации проекта использована сборка OpenServer — это бесплатный и веб-сервер, подходящий для разработки веб-приложений в локальных условиях. На сайте создателя программного комплекса написано, что Open Server — это портативная серверная платформа и программная среда, созданная специально для веб-разработчиков[2] [28].


[1] PhpStorm – интегрированная среда разработки на PHP [Электронный ресурс] / Режим доступа: http://jetbrains.ru/products/phpstorm/ (05.02.2017).

[2][2] Open Server. Лучший инструмент для разработки под Windows [Электронный ресурс] / Режим доступа: http://open-server.ru/ (Дата обращения: 10.02.2017).

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

Компоненты программного комплекса:

— Open Server 5.2.5;

— Apache 2.2.31 / 2.4.20;

— Bind 9.10.4-P1;

— Nginx 1.6.3 / 1.8.1 / 1.10.1;

— MySQL 5.1.73 / 5.5.50 / 5.6.31 / 5.7.13;

— MariaDB 5.5.50 / 10.0.26 / 10.1.14;

— MongoDB 2.4.14 / 2.6.12 / 3.0.12 / 3.2.7;

— PostgreSQL 9.2.17 / 9.3.13 / 9.4.8 / 9.5.3;

— Redis 2.8.2402 / 3.0.504 / 3.2.100;

— Memcached 1.2.6 / 1.4.5;

— FTP FileZilla 0.9.57;

— PHP 5.2.17; (Zend Optimizer 3.3.3, IonCube 4.0.7, Memcache 2.2.4)

— PHP 5.3.29; (Xdebug 2.2.7, Memcache 3.0.8, Mongo 1.6.14, Redis 2.2.7, Imagick 3.2.0)

— PHP 5.4.45; (Xdebug 2.4.0, Memcache 3.0.8, Mongo 1.6.14, Redis 2.2.7, Imagick 3.2.0)

— PHP 5.5.37; (Xdebug 2.4.0, Memcache 3.0.8, Mongo 1.6.14, MongoDB 1.1.7, Redis 2.2.7, Imagick 3.2.0)

— PHP 5.6.23; (Xdebug 2.4.0, Memcache 3.0.8, Mongo 1.6.14, MongoDB 1.1.7, Redis 2.2.7, Imagick 3.2.0)

— PHP 7.0.8; (Xdebug 2.4.0, PDFlib 3.0.4, MongoDB 1.1.7, Redis 3.0.0)

— ImageMagick 6.8.9-9-Q16;

— Ghostscript 9.19;

— Sendmail 32;

— Wget 1.11.4;

— NNCron Lite 1.17;

— Adminer 4.2.5;

— ConEmu 16.10.09a;

— HeidiSQL 9.3;

— RockMongo 1.1.7;

— PHPRedisAdmin 1.6.0;

— PHPMyAdmin 4.6.4;

— PHPPgAdmin 5.2;

— PHPMemcachedAdmin 1.2.2;

Компоненты сборки представлены в 32-битной и 64-битной (частично) версиях.

Поддерживаемые версии Windows (32-бит и 64-бит): Windows 7 и все более новые версии. Частично поддерживаемые версии Windows (32-бит и 64-бит): Windows XP SP3 и Windows Vista. Минимальные аппаратные требования: 500 МБ свободной RAM и 3 ГБ свободного места на HDD.

Требуется наличие Microsoft Visual C++ 2005-2008-2010-2012-2013-2015 Redistributable Package.

Возможности управляющей программы:

— незаметная работа в трее Windows;

— быстрые старт и остановка;

— автостарт сервера при запуске программы;

— несколько режимов управления доменами;

— монтирование виртуального диска;

— поддержка управления через командную строку;

— поддержка профилей настроек;

— удобный просмотр логов всех компонентов;

— переключение http, MySQL и PHP модулей;

— подробная и понятная документация;

— доступ к доменам в один клик;

— быстрый доступ к шаблонам конфигурации;

— мультиязычный интерфейс;

— автозапуск программ по списку.

Особенности комплекса:

— не требует установки (портативность);

— возможность работы с USB накопителя;

— одновременная работа с Denwer, XAMPP и т.д.;

— работа на локальном/сетевом/внешнем IP адресе;

— поддержка SSL без всякой дополн. настройки;

— создание домена путем создания обычной папки;

— поддержка кириллических доменов;

— поддержка алиасов (доменных указателей);

— защита сервера от внешнего доступа;

— Punycode конвертер доменных имён;

— пакет из более 40 портативных программ;

— планировщик заданий (cron);

— создание локального поддомена без потери видимости основного домена в сети интернет. Сборка представлена тремя версиями OpenServer: basic, premium и ultimate. В ultimate версии кроме веб-сервера, происходит распаковка и дополнительного программного обеспечения (рис. 30).

Результат распаковки
Рисунок 30 — Результат распаковки

Директория «domains» содержит виртуальные хосты, папка «modules» содержит модули OpenServer (СУБД MySQL различных версий, интерпретатор PHP различных версий и непосредственно сам вебсервер (nginx или Apache) и другое). В папке «userdata» хранятся настройки для модулей.

После запуска сборки OpenServer в трее появится иконка OpenServer представляющая собой флаг красного (остановлен), зеленого (запущен) или желтого цвета (перезапускается) (рис. 31).

Основные настройки программы
Рисунок 31 – Основные настройки программы

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

При создании виртуальных хостов OpenServer автоматически добавляет запись в файл hosts. При ошибках запуска программы в OpenServer включена возможность запуска сервера без редактирования файла (рис. 32).

Отключение возможности внесения изменений в файл hosts
Рисунок 32 – Отключение возможности внесения изменений в файл hosts

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

Для создания проекта, необходимо в папке domains создать паку с нужным названием, и в этой папке создать индексный файл – index.php, таким образом создается виртуальный хост, в котором будет размещаться разрабатываемы проект.

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

Лог работы OpenServer
Рисунок 33 – Лог работы OpenServer

Во вкладке «Модули» осуществляется конфигурирование веб-сервера, а именно выбор сервера, версии PHP и СУБД и другое (рис. 34).

Модули OpenServer
Рисунок 35 — Модули OpenServer

2.5 Структура информационно-справочного портала

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

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

Справочная система будет состоять из следующих страниц:

— главная страница;

— справочные материалы;

— контактная форма;

— страница администратора;

— просмотр вопросов (для администратора);

— управление администраторами (для администратора);

— изменить данные публичной части (для администратора);

— добавление категорий (для администратора);

— добавление записей (для администратора).

Схематическое изображение структуры справочно-информационной системы
Рисунок 36 — Схематическое изображение структуры справочно-информационной системы

2.6 Функции информационно-справочного портала

Справочно-информационная система предусматривает такой функционал:

— просмотр справочно-информационных материалов;

— заполнение контактной формы;

— административная панель;

— добавление категорий;

— добавление записей;

— редактирование категорий;

— редактирование записей;

— удаление категорий;

— удаление записей;

— добавление администраторов;

— удаление администраторов;

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

— просмотр записей из формы обратной связи.

2.7 Реализация меню системы, категорий и записей

Для отображения содержимого сайта предназначен файл manage_table.php. В этом файле з отображение содержимого, записей и категорий отвечает ряд функций. За поиск списка категорий отвечает функция find_all_subjects:

function find_all_subjects($public=true) {

         global $connection;

         $query  = «SELECT * «;

         $query .= «FROM subjects «;

                if ($public) {

         $query .= «WHERE visible = 1 «;

                }

         $query .= «ORDER BY position ASC»;

         $subject_set = mysqli_query($connection, $query);

         confirm_query($subject_set);

         return $subject_set;

      }

Страницы в каждой категории ищет функция find_pages_for_subject:

        function find_pages_for_subject($subject_id, $public = true) {

                   global $connection;

                   $query  = «SELECT * «;

                   $query .= «FROM pages «;

                   $query .= «WHERE subject_id = {$subject_id} «;

                if ($public) {

                   $query .= «AND visible = 1 «;

                }

                $query .= «ORDER BY position ASC»;

                   $page_set = mysqli_query($connection, $query);

                   confirm_query($page_set);

                   return $page_set;

         }

Поиск страниц по идентификатору осуществляется функцией find_page_by_id:

        function find_page_by_id($page_id, $public=true) {

         global $connection;

         $safe_page_id = mysqli_real_escape_string($connection, $page_id);

         $query  = «SELECT * «;

         $query .= «FROM pages «;

         $query .= «WHERE id = {$safe_page_id} «;

                if($public){

                    $query .= » AND visible = 1 «;

                }

         $query .= «LIMIT 1»;

         $page_set = mysqli_query($connection, $query);

         confirm_query($page_set);

         if($page = mysqli_fetch_assoc($page_set)) {

                   return $page;

         } else {

                   return null;

         }

        }

Для создания навигации по сайту в административной панели создана функция navigation:

function navigation($subject_array, $page_array) {

         $output = «<ul class=\»subjects\»>»;

         $subject_set = find_all_subjects(false); //задавая false мы отображаем видимые и невидимые объекты

         while($subject = mysqli_fetch_assoc($subject_set)) {

                   $output .= «<li»;

                   if ($subject_array && $subject[«id»] == $subject_array[«id»]) {

                            $output .= » class=\»selected\»»;

                   }

                   $output .= «>»;

                   $output .= «<a href=\»manage_table.php?subject=»;

                   $output .= urlencode($subject[«id»]);

                   $output .= «\»>»;

                   $output .= $subject[«menu_name»];

$output .= «</a>»;

                   $page_set = find_pages_for_subject($subject[«id»], false); //задавая false мы отображаем видимые и невидимые объекты

                   $output .= «<ul class=\»pages\»>»;

                   while($page = mysqli_fetch_assoc($page_set)) {

                            $output .= «<li»;

                            if ($page_array && $page[«id»] == $page_array[«id»]) {

                                      $output .= » class=\»selected\»»;

                            }

                            $output .= «>»;

                            $output .= «<a href=\»manage_table.php?page=»;

                            $output .= urlencode($page[«id»]);

                            $output .= «\»>»;

                            $output .= $page[«menu_name»];

                            $output .= «</a></li>»;

                   }

                   mysqli_free_result($page_set);

                   $output .= «</ul></li>»;

         }

         mysqli_free_result($subject_set);

         $output .= «</ul>»;

         return $output;

        }

За навигация в публичной части отвечает функция public_navigation:

function public_navigation($subject_array, $page_array) {

         $output = «<ul class=\»subjects\»>»;

         $subject_set = find_all_subjects();

         while($subject = mysqli_fetch_assoc($subject_set)) {

                   $output .= «<li»;

                   if ($subject_array && $subject[«id»] == $subject_array[«id»]) {

                            $output .= » class=\»selected\»»;

                   }

                   $output .= «>»;

                   $output .= «<a href=\»index.php?subject=»;

                   $output .= urlencode($subject[«id»]);

                   $output .= «\»>»;

                   $output .= $subject[«menu_name»];

                   $output .= «</a>»;

                        if($subject_array[«id»] == $subject[«id»] || $page_array[«subject_id»] == $subject[«id»]){

                   $page_set = find_pages_for_subject($subject[«id»]);

                   $output .= «<ul class=\»pages\»>»;

                   while($page = mysqli_fetch_assoc($page_set)) {

                            $output .= «<li»;

                            if ($page_array && $page[«id»] == $page_array[«id»]) {

                                      $output .= » class=\»selected\»»;

                            }

                            $output .= «>»;

                            $output .= «<a href=\»index.php?page=»;

                            $output .= urlencode($page[«id»]);

                            $output .= «\»>»;

                            $output .= $page[«menu_name»];

                            $output .= «</a></li>»;

                             }

                           $output .= «</ul>»;

                            mysqli_free_result($page_set);

                        }

                        $output .= «</li>»;

         }

         mysqli_free_result($subject_set);

         $output .= «</ul>»;

         return $output;

    }

Все показанные функции размещены в файле function.php (рис. 37).

Файл функций – function.php
Рисунок 37 – Файл функций – function.php

2.8 Создание административной панели информационно-справочного портала

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

Окно входа в систему
Рисунок 38 – Окно входа в систему
Страница администратора системы
Рисунок 39 – Страница администратора системы
Окно управления администраторами системы
Рисунок 40 – Окно управления администраторами системы

На рис. 41 показан код формы авторизации на сайте и ее обработчика которые находятся в одном файле – login.php.

Код страницы авторизации:

<?php include ‘includes/session.php’; ?>

<?php include ‘includes/db_connect.php’; ?>

<?php require_once ‘includes/functions.php’; ?>

<?php require_once ‘includes/validation_functions.php’; ?>

<?php

$username = «»;

if (isset($_POST[‘submit’])) {

    // Обработка формы

    // проверка формы

    $required_fields = array(«username», «password»);

    validate_presences($required_fields);

    if (empty($errors)) {

        // Попытка входа

        $username = $_POST[«username»];

        $password = $_POST[«password»];

        $found_admin = attempt_login($username, $password);

        if ($found_admin) {

            // Успешно

            // Обозначения пользователя зашедшим в систему

            $_SESSION[«admin_id»] = $found_admin[«id»];

            $_SESSION[«username»] = $found_admin[«username»];

            redirect_to(«admin.php»);

        } else {

            // Ошибка

            $_SESSION[«message»] = «Пользователь/пароль не найден»;

        }

    }

} else {

} //  if (isset($_POST[‘submit’]))

?>

<?php $layout_context = «admin»; ?>

<?php include ‘includes/header.php’; ?>

    <!— Форма авторизации на сайте —>

    <div class=»blog»>

        <div class=»typo»>

            <div class=»container»>

                <h2>Вход в админ-панель</h2>

                    <?php echo message(); ?>

                    <?php echo form_errors($errors); ?>

                    <form action=»login.php» method=»post»>

                        <input type=»text» class=»form-control» placeholder=»Username»

                               name=»username»

                               value=»<?php echo htmlentities($username); ?>» style=»margin-bottom: 15px»/>

                        <input type=»password» class=»form-control» placeholder=»Password» name=»password» value=»»

                               style=»margin-bottom: 15px»/>

                        <input type=»submit» class=»btn btn-group-justified» name=»submit» value=»Войти»/>

                    </form>

                </div>

        </div>

    </div>

<?php include ‘includes/footer.php’;

Код формы авторизации в системе
Рисунок 41 – Код формы авторизации в системе

2.9 Проверка работоспособности информационно-справочного портала

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

Таблица 1

Минимальные требования к сайту

ХарактеристикаКлиентская частьСерверная часть
ПроцессорPentium 4 или вышеPentium 4 или выше
Размер ОЗУ1024 Мб512 Мб
Объем HDD80 Гб10 Гб
МониторС разрешением не менее 1280 на 1024нет
Системное ПОMS Windows 7 или новееCent OS 7
Прикладное ПОБраузер Google Chrome или совместимый с поддержкой JavaScriptСУБД MySQL не ниже 5, PHP не ниже 5
Минимальные требования к сайту

Для проверки работоспособности сайта необходимо запустить локальный сервер и перейти на созданный локальный сайт (рис. 42).

Локальный сайт в OpenServer
Рисунок 42 – Локальный сайт в OpenServer

Для входа на сайт из локальной среды необходимо в адресной строке перейти по адресу — http://is-portal.loc/main.php. Откроется главная страница сайта (рис. 43).

Главная страница сайта
Рисунок 43 – Главная страница сайта

Как видно из рисунка 43, главная страница сайта загрузилась и можно перейти к тестирования функционала сайта.

2. 10 Тестирование и отладка портала

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

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

Форма входа в панель администратора
Рисунок 44 – Форма входа в панель администратора
Предупреждение о исправлении ошибки
Рисунок 45 – Предупреждение о исправлении ошибки
Отсутствие пользователя с указанными данными
Рисунок 46 – Отсутствие пользователя с указанными данными

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

В форме-заявки пользователю необходимо заполнить следующие поля:

— ФИО;

— Электронная почта;

— Номер телефона;

— Домашний адрес;

— Дата;

— Сообщение о проблеме.

Отображение формы на сайте показано на рис. 47.

Форма заявки на обслуживание
Рисунок 47 – Форма заявки на обслуживание

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

Ошибка добавления заявки
Рисунок 48 – Ошибка добавления заявки

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

Успешно отправленная заявка
Рисунок 49 – Успешно отправленная заявка

После успешной отправки заявки ее содержание можно посмотреть из панели администратора (рис. 50).

Список заявок
Рисунок 50 – Список заявок

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

Изменение статуса заявки из формы обратной связи
Рисунок 51 – Изменение статуса заявки из формы обратной связи

Тестирование формы добавления выполненной заявки прошла успешно, и данные из нее занесены в базу данных (рис. 52).

Добавленная запись в базу данных
Рисунок 52 – Добавленная запись в базу данных

3. ЭКОНОМИЧЕСКАЯ ЧАСТЬ

3.1 Определение трудоемкости работ по обследованию объекта, для которого разрабатывается проект.

Таблица 2.

Итого суммарная трудоемкость работ по обследованию объекта — 64 часа (ТЕо)

3.2 Определение трудоемкости работ по разработке проекта.

Таблица 3.

Итого суммарная трудоемкость работ по разработке проекта – 66 часов. (ТЕп)

3.3 Смета расходов по разработке проекта

Расходы на используемое оборудование.

Таблица 4.

Итого стоимость затрат на используемое оборудование — 1138 руб. (Соб)

0,07

Расходы на используемые программные средства.

Таблица 5.

Итого стоимость затрат на используемые программные средства — 893. руб. (Спо)

Расчет расходов на создание проекта.

Таблица 6.

Итого расходы на создание проекта — 75271 руб. (С)

3.4 Определение доходов от реализации проекта. Маркетинговое исследование

Изучение потребителя.

Цена реализации проекта на рынке.

Таблица 7.

3.5 Оценка экономической эффективности разработки проекта.

  1. Выручка = 120000 руб. (Ц)
  2. Выручка без НДС = 101695 руб. (ЦЧ = Ц/1.18)
  3. Расходы = 75271 руб. (С)
  4. Прибыль = 26424 руб. (П = ЦЧ – С)
  5. Налог на прибыль = 3964руб. (НП = П х 0.15)
  6. Чистая прибыль = 22460 руб. (ПЧ = П — НП)
  7. Рентабельность реализованной продукции = 30 % (ROM = ПЧ / С х 100%)

3.6 Расчет экономической эффективности использования проекта.

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

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

Наименование показателяОбозначениеЕдиница измеренияИсходные данные
Среднее количество запрашиваемой оперативной информацииNaед. в день16  
время поиска информации (ручной режим)Ta1час0,5
время поиска информации (автоматический режим)Ta2час0,02
Среднее количество запрашиваемой аналитической информацииед. в день8
время поиска информации (ручной режим)Tб1час1
время поиска информации (автоматический режим)Tб2час0,25
Среднее количество запрашиваемой прочей информацииед. в день15
время поиска информации (ручной режим)Tв1час0,5
время поиска информации (автоматический режим)Tв2час0,02

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

T1 = 246 * (Na * Ta1 + Nб * Tб1 + Nв * Tв1) , где 246 – количество рабочих дней в году.

Т1 = 246 * (16 * 0,5 + 8*1 + 15*0,5) = 246 * (8 + 8 + 7,5) = 246 * 23,5 = 5781.

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

T2 = 246 * (Na * Ta2 + Nб * Tб2 + Nв * Tв2)

Т1 = 246 * (16 * 0,5 + 8*1 + 15*0,02) = 246 * (8 + 8 + 0,3) = 246 * 16,3 = 4001.

Расчет годовых эксплуатационных затрат.

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

ЗАИС = 60000 * 12 / 246 / 8 = 365,85 руб.

Отчисления на социальные нужды.

Осн = ЗАИС * 30% = 365,85 * 0,3 = 109,76 руб.

Годовые эксплуатационные затраты при ручном режиме работы составят:

А = Т1 * (ЗАИС + Осн) = 5781 * (365,85 + 109,76) = 2749501 р.

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

П = Т2 * (ЗАИС + Осн) = 4001 * (365,85 + 109,76) = 1902915 р.

Годовая экономия эксплуатационных затрат равна:

Эгэ = А – П = 846586 р.

Окупаемость капитальных вложений определим по формуле:

Ток = Ц / Эгэ =0,14

Результаты расчетов сведем в таблицу:

Таблица 9

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

ЗАКЛЮЧЕНИЕ

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

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

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

Основными технологиями создания информационной системы послужили: PHP — скриптовый язык программирования; SQL — универсальный компьютерный язык, применяемый для создания, модификации и управления данными в реляционных базах данных. Наиболее удобным инструментом для проектирования и создания баз данных является программа MySQL Workbench. Для разработки проекта был использован программный комплекс OpenServer, который может быть использован для публикации сайта. В качестве среды разработки проекта было использована программа – PHPStorm. Среда разработки PHPStorm позволяет создавать проекты любой сложности, помогает в администрировании, отладке и настройке проектов.

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

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

  1. Вересников, Ю. К. О надежности систем обработки информации / Ю. К. Вересников //Актуальные проблемы современной науки. — 2011. — № 2 (58). — С. 193-195.
  2. Григорьев Ю. А. Теория и практика проектирования систем на основе баз данных: учеб. пособие для вузов / Ю. А. Григорьев, А. Д. Плутенко. — Благовещенск: Изд-во Амур. гос. ун-та, 2008. — 394 с.
  3. Дунаев В. HTML, скрипты и стили / В. Дунаев. — СПб: БХВ-Петербург, 2011- 816 с.
  4. Дюбуа, П. MySQL. Сборник рецептов / Дюбуа П.; Пер. с англ. – СПб: Символ–Плюс, 2006. – 1056 с.
  5. Елиферов В. Г. Бизнес-процессы: регламентация и управление: / Елиферов В. Г., Репин В. В.: ИНФРА-М, 2011 г. — 319 с.
  6. Жуков Р. А. СУБД с открытым исходным кодом: возможность применения алгоритмов распараллеливания / Р. А. Жуков // Технические науки. – 2015. – № 1–2 (35–36). – С. 20 – 21.
  7. Зудилова Т. В. Web-программирование HTML / Т. В. Зудилова, М. Л. Буркова — СПб: НИУ ИТМО, 2012. – 70 с.
  8. Кириллов В. В. Введение в реляционные базы данных / В. В. Кириллов, Г. Ю. Громов. — М.: Гелиос АРВ. – 2002. – 458 с.
  9. Коцюба И. Ю. Основы проектирования информационных систем. Учебное пособие / И. Ю. Коцюба, А. В. Чунаев, А. Н. Шиков. – СПб: Университет ИТМО, 2015. – 206 с.
  10. Лабберс К. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений / К. Лабберс, Н. Олберс, К. Салим. — М.: Вильямс, 2011 – 272 с.
  11. Маклафлин Б. PHP и MySQL. Исчерпывающее руководство [Текст] / Б. Маклафлин. – СПб.: Питер, 2014. – 544 с.
  12. Мартовой А. В. Сущность и основные характеристики электронного бизнеса, электронной коммерции, электронного и интернет-маркетинга / А. В Мартовой // Проблемы материальной культуры. — С. 146 — 153
  13. Маторин С. И. Информационные системы: Учебно-практическое пособие / С. И. Маторин, О. А. Зимовец–Белгород: Изд-во НИУ БелГУ, 2012. – 231 с.
  14. Методические указания к выполнению лабораторных работ по дисциплине «Технологии Web-приложений» для студентов очной формы обучения по направлению 09.03.01 «Информатика и вычислительная техника» / Сост. доцент кафедры ИТКС Лелеков С. Г. — Севастополь: Изд-во СГУ, 2015. – 36 с.
  15. Мирошниченко Г. А. Реляционные базы данных. Практические приемы оптимальных решений / Г. А. Мирошниченко. — «БХВ-Петербург», 2005. – 400 с.
  16. Мустафаева Э. И. Использование СУБД MySQL для разработки информационно–справочной системы «Рекреационные ресурсы города Евпатории» [Электронный ресурс] / Э. И. Мустафаева, Ф. В. Шкарбан – Электрон. текстовые дан. – Режим доступа: http://eztuir.ztu.edu.ua/123456789/1037.
  17. Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие/Сост. С. М. Наместников. — Ульяновск: УлГТУ, 2014. – 91 c.
  18. Редактор для создания сайтов — Adobe Dreamweaver 1 [Электронный ресурс] / Режим доступа: http://archicad-autocad.com/dreamweaver/dreamweaver.html (дата обращения 16.04.2017).
  19. Рублевская Ю. В. Моделирование бизнеса в интернет-среде / Ю. В. Рублевская, Е. В. Попов // Маркетинг в России и за рубежом. — 2001. — №2 (22). — С. 87-102.
  20. Самарев Р. С. Создание простейших HTML-страниц, валидаторы кода. Каскадные таблицы стилей CSS: методические указания к выполнению практикума № 1 и лабораторной работы № 1 по дисциплинам «Языки интернет-программирования» и «Практикум по интернет-программированию» / Р. С. Самарев. — Москва: Издательство МГТУ им. Н. Э. Баумана, 2015. — 39 с.
  21. Сотник И. Н. Информационно-коммуникационные технологии как направление социально-экономических трансформаций при переходе к информационному обществу / И. Н. Сотник, О. Н. Волк // Современные тенденции управления политическим и социально-экономическим развитием территорий: [монография]; под ред. Минаковой И.В., Мельника Л.Г. — Орел: АПЛИТ. — 2013. — С. 222-234.
  22. Тафт Д. Eclipse Foundation выпускает серию релизов Neon [Электронный ресурс] / Дэррил Тафт // Режим доступа: https://www.pcweek.ru/foss/article/detail.php?ID=186440 (дата обращения 16.04.2017).
  23. Филлипов С. А. Основы современного веб-программирования: Учебное пособие / С. А. Филлипов. – М.: НИЯУ МИФИ, 2011. – 160 с.
  24. Шварц Б. MySQL. Оптимизация производительности / Б. Шварц и др., 2-е издание. – Пер. с англ. – СПб.: Символ-Плюс. — 2010. – 832 с.
  25. Эндрю Р. CSS: 100 и 1 совет, 3-е издание / Р. Эндрю. – Пер. с англ. – СПб: Символ- Плюс, 2010. – 336 с.
  26. Atom [Электронный ресурс] / Режим доступа: http://soft.mydiv.net/win/download-Atom.html (дата обращения — 16.04.2017).
  27. Notepad++ — бесплатный редактор Html, PHP и другого кода с подсветкой синтаксиса, а также обзор его плагинов и возможностей [Электронный ресурс] / Режим доступа: http://ktonanovenkogo.ru/vokrug-da-okolo/programs/notepad-plus-plus-tekstovyj-redaktor-podsvetkoj-sintaksisa-skachat-ustanovit-nastroit.html (дата обращения 23.03.2017).
  28. Open Server. Лучший инструмент для разработки под Windows [Электронный ресурс] / Режим доступа: http://open-server.ru/ (Дата обращения: 10.02.2017).
  29. PhpStorm – интегрированная среда разработки на PHP [Электронный ресурс] / Режим доступа: http://jetbrains.ru/products/phpstorm/ (05.04.2017).

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