Создание веб-сайта предприятия | Дипломные работы

ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА «Создание веб-сайта предприятия»

Создание веб-сайта предприятия. Проектирование веб-сайта.

Оглавление

Введение

Глава 1. Аналитическая часть

1.1 Сеть Internet и ее особенности. Протоколы сети Internet

1.2 Технологии создания сайтов

1.2.1 Статические сайты

1.2.2 Динамические сайты

1.2.3 Системы управления содержимым

1.3 Представление информации в окне браузера

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

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

1.9 Выводы по Главе 1

Глава 2. Проектная часть

2.1 Программные средства реализации проекта

2.1.1 Среда разработки — JetBrains PhpStorm

2.1.2 Веб-приложение PhpMyAdmin

2.2 Информационное проектирование веб-сайта

2.2.1 Структурирование информационного содержимого сайта

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

2.2.3 Система навигации по сайту

2.3 Создание сайта для предприятия

2.3.1 Установка локального сервера

2.3.2 Установка и настройка конфигурации CMS Joomla

2.3.3 Настройка внешнего вида сайта

2.3.4 Перенос сайта на хостинг

2.4 Выводы по Главе 2

Глава 3. Обоснование экономической эффективности

3.1 Расчет трудоемкости проекта

3.2 Определение численности исполнителей

3.3 Расчет затрат на выполнение проекта и составление таблицы структуры затрат

3.3 Затраты на организацию рабочих мест для исполнителей проекта

3.4 Накладные расходы на выполнение проекта.

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

3.6 Выводы по Главе 3

Заключение

Список используемых источников

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Предмет работы: сайт предприятия.

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

Глава 1. Аналитическая часть

1.1 Сеть Internet и ее особенности. Протоколы сети Internet

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

Подавляющее большинство компьютеров в Internet работает по протоколам TCP/IP (Transmission Control Protocol/Internetwork Protocol — управляющий протокол передачи/межсетевой протокол), и именно это совместно с требованиями наличия подключения к глобальной сети является критерием присутствия в Internet.

Основой семейства протокола TCP/IP является сетевой уровень, представленный протоколом IP, а также различными протоколами маршрутизации. Этот уровень представляет адресное пространство, обеспечивающее перемещение пакетов в сети, а также управляет их маршрутизацией.

Размеры пакета, параметры передачи, контроль целостности осуществляются на транспортном уровне протоколом TCP. Протокол UDP (User Datagram Protocol — протокол транспортного уровня) работает на том же уровне, но применяется в том случае, когда требования к надёжности передачи данных менее жёсткие (в отличие от протокола ТСР не обеспечивает безошибочной передачи пакета). Поскольку оба этих протокола в известной степени представляют собой единое целое, как правило, говорят о протоколах TCP/IP.

TCP дробит информацию на несколько частей, присваивает каждой части номер, по которому данные впоследствии соединяются воедино, добавляет к ней «служебную» информацию и укладывает всё это в отдельный «IP-конверт». Далее этот «конверт» отправляется по Сети — Internet обрабатывает IP-информацию. Размер передаваемых в Internet TCP/IP-пакетов составляет, как правило, от 1 до 1500 байт, что связано с техническими характеристиками Сети.

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

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

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

Системы, использующие протоколы не TCP/IP подключаются к Internet через шлюзы.

Для того чтобы пакет с информацией не «заблудился» по дороге, узлы Internet, через которые он движется, имеют в своём распоряжении таблицы маршрутизации — электронные базы данных, в которых содержатся указания, куда именно отсылать тот или иной пакет информации, если он следует на такой-то адрес. Таблицы маршрутизации рассылаются на узлы централизованно, периодически меняются и дополняются. На серверах узлов, осуществляющие маршрутизацию, находятся маршрутизаторы, или роутеры (от англ, «router» — «маршрутизатор»). Правила маршрутизации описаны в протоколах ICMP (Internet Control Message Protocol), RIP (Routing Internet Protocol) и OSPF (Open Shortest Path First).

Протоколы TCP/IP являются протоколами нижнего уровня модели OSI. Помимо них существует целый ряд протоколов более высокого уровня, которые отвечают за передачу и обработку данных определённого назначения. К наиболее важным прикладным протоколам относятся:

  • протокол удалённого управления Telnet;
  • протокол передачи файлов FTP;
  • протоколом передачи гипертекста HTTP;
  • протоколы для работы с электронной почтой: SMTP (Simple Mail Transfer Protoco), POP (Post Office Protocol), IMAP (Internet Message Access Protocol), MIME ((Multiperposal Internet Mail Exchange).

На этом уровне работает система адресации доменных имён DNS, отвечающая за преобразование числовых IP — адресов в имена.

Telnet — протокол удалённого доступа. Даёт возможность абоненту работать в полном объёме на любом компьютере сети Internet, т.е. запускать программы, менять режим работы и т.д.

FTP (File Transfer Protocol) — протокол передачи файлов. Архивы являются одним из основных информационных ресурсов Internet. Фактически, это распределённый депозитарий текстов, программ, фильмов, фотографий, аудио записей и прочей информации, хранящейся в виде файлов на различных компьютерах во всем мире. FTP даёт возможность соединять компьютеры между собой и передавать по сети файлы с одного компьютера на другой. Компьютеры, на которых находится информация для передачи по протоколу FTP, называются FTP-серверами.

Программы FTP стали частью отдельного сервиса Internet. FTP настраивается таким образом, что соединение с ним может происходить не только под именем пользователя, но и под условным именем anonymous (аноним). Тогда становится доступна не вся файловая система компьютера, а некоторый набор файлов на сервере, которые составляют содержимое сервера anonymous FTP — публичного файлового архива.

1.2 Технологии создания сайтов

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

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

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

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

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

1.2.1 Статические сайты

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

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

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

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

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

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

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

1.2.2 Динамические сайты

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

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

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

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

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

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

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

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

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

База данных содержит в себе таблицы. Таблицы базы данных состоят, как и обычные таблицы, из строк и столбцов. Столбцы имеют заранее определенное название и тип данных, а строки хранят непосредственно сами данные.

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

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

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

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

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

Часто требуется не просто выдавать пользователю готовые ресурсы, а производить вычисления «на лету» и выдавать их результат. Например, когда один пользователь оставляет другому сообщение на сайте, сервер должен проверить его и сохранить у себя, чтобы потом показать адресату. В таких случаях возможностей HTML недостаточно и необходимо создавать специальные программы с помощью языков программирования. Одним из таких языков является PHP [42].

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

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

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

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

  1. Пользователь вводит логин и пароль в HTML-форму и жмет кнопку отправки.
  2. Данные через Интернет отправляются на веб-сервер. Браузер начинает ждать ответа от сервера.
  3. Веб-сервер запускает PHP-программу и передает ей введенный логии и пароль.
  4.  PHP-программа:
  • Подключается к базе данных;
  • Делает запрос к базе данных «существует ли пользователь с таким логином и паролем?»;
  • Если ответ положительный, программа выводит страницу приветствия. Если отрицательный — сообщение об ошибке.
  • Веб-сервер отправляет ответ PHP-программы назад в браузер в виде HTML -кода.
  •  Браузер обрабатывает HTML-код и выводит страницу на экран компьютера пользователя.

Выполнение этих действий занимает несколько секунд. Это время зависит от производительности клиентской и серверной машины и скорости передачи данных между ними.

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

  • форумы (движки IPB, PHPBB, vBulletin);
  • блоги (движок WordPress);
  • системы управления сайтом (e107, Joomla, PHP-Nuke, 1С-Битрикс);
  • социальные сети (ВКонтакте);
  • браузерные игры;
  • фотогалереи (Coppermi ne, Gall ery);
  • и многое другое.

Как уже было сказано выше, PHP-программа представляет собой текстовый файл, обычно с расширением –«.php». В файле хранится последовательность команд (инструкций), которые выполняет веб-сервер. PHP читает файл построчно сверху вниз и выполняет записанные команды [8].

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

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

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

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

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

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

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

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

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

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

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

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

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

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

После отправки формы в вызываемом скрипте можно будет ис­пользовать переданное значение в HTML-коде следующим образом: echo $_REQUEST[«name»].

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

В случае отправки формы элементу массива $_REQUEST[«stage»] присваивается значение results (см. значение hidden-элемента формы под именем stage, это тот самый случай, когда необходимо, чтобы элемент обязательно был, но не отобра­жался) и происходит вызов функции-обработчика формы. Если же данные в скрипт не передавались (первая загрузка), то выполняется функция вывода формы.

Функция в зависимости от произведенного пользователем вы­бора формирует и выводит строку-сообщение.

Если все перечисленные выше функции будут помещены в один файл, то в итоге будет подготовлен работоспособный скрипт.

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

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

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

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

1.2.3 Системы управления содержимым

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

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

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

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

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

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

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

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

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

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

Реализация вышеприведенных задач приводит к:

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

Главной задачей системы управления контентом — CMS (Content Management System) — является создание платформы для управления структурой и наполнением веб-сайта.

Обычно CMS состоит из двух приложений: CMA — приложения, управляющего контентом, и CDA — приложения, доставляющего контент. CMA позволяет автору, не знающему HTML, управлять созданием, изменением (включая удаление) контента веб-сайта, не обращаясь к помощи веб-мастера. Для создания новой страницы пользователю не нужно обладать специальными знаниями: текстовый редактор, использующийся в CMS, позволяет организовать обновление сайта на уровне работы с офисными приложениями. Модуль CDA компилирует созданный контент для обновления веб-сайта.

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

Гибкость CMS и интуитивность интерфейса позволяют легко изменить структуру сайта и систему навигации [5].

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

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

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

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

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

При анализе CMS выделяют 9 основных характеристик:

1. Системные особенности:

  • язык разработки CMS;
  • тип баз данных (MySQL, MSSQL, Oracle и др.);
  • совместимость с веб-серверами (Webservers: Apache, IIS).

2. Безопасность:

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

3.  Поддержка:

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

4.  Простота в использовании:

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

5.  Управление:

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

6.  Совместимость с технологиями создания и обмена контентом:

  • RSS/XML;
  • FTP;
  • UTF-8;
  • XHTML.

7.  Гибкость:

  • поддержка cgi-режима;
  • расширяемые профили пользователей;
  • локализация интерфейса;
  • метаданные;
  • многоязыковая поддержка.

8.  Реализация:

  • продвинутое кэширование (навигация, шаблоны);
  • кэширование страниц.

9.  Встроенные приложения:

  • блог;
  • чат;
  • форум;
  • управление документами;
  • календарь;
  • гостевая книга;
  • рассылка;
  • фотогалерея;
  • голосование;
  • RSS (Really Simple Syndication) [5].

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

1.3 Представление информации в окне браузера

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

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

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

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

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

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

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

<html>

HTML-документ

</html>

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

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

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

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

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

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

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

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

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

html>

<head>

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

</head>

<body>

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

</body>

</html>

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

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

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

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

<meta charset=»utf-8″>

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

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

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

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

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

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

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

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

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

<head>

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

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

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

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

</head>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Атрибуты:

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

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

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

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

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

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

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

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

Атрибут:

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

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

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

square – квадрат.

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

Атрибуты:

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

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

Примеры создания отображения списка показаны на рис. 5-6.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Определение фонового цвета для навигационного меню верхней части сайта
Рисунок 8 – Определение фонового цвета для навигационного меню верхней части сайта
  • background-image — фоновое изображение. Пример:

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

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

Пример:

body {

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

background-repeat:repeat-x;

}

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

background-attachment:fixed;

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

body

{

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

}

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

  • изменение регистра букв (capitalize | uppercase | lowercase);
  • изменение пробелов (collapse | preserve | preserve-breaks);
  • ограничение длины строки;
  • формирование переносов слов;
  • форматирование текста;
  • выравнивание и разреживание;
  • отступы;
  • декорирование.

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

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

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

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

Пример:

.container {

padding:0 20px 0 20px;

}

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

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

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

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

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

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

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

1.9 Выводы по Главе 1

Глобальная сеть — это объединение транснациональных компьютерных сетей, работающих по самым разнообразным протоколам. Подавляющее большинство компьютеров в Internet работает по протоколу TCP/IP. Основой семейства протокола TCP/IP является сетевой уровень, представленный протоколом IP, а также различными протоколами маршрутизации. TCP организует двунаправленный обмен информацией, что обеспечивает более высокую скорость её трансляции.

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

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

Глава 2. Проектная часть

2.1 Программные средства реализации проекта

2.1.1 Среда разработки — JetBrains PhpStorm

PhpStorm 10 – это интегрированная среда разработки на PHP с интеллектуальным редактором, которая глубоко понимает код, поддерживает PHP 7.0, 5.6, 5.5, 5.4 и 5.3 для современных и классических проектов, обеспечивает лучшее в индустрии автодополнение кода, рефакторинги, предотвращение ошибок на лету и поддерживает смешивание языков.

Сотни инспекций заботятся о верификации кода, анализируя проект целиком во время разработки. Поддержка PHPDoc, code (re)arranger, форматтера кода с конфигурацией стиля кода и другие возможности помогают разработчикам писать опрятный и легко поддерживаемый код.

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

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

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

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

Нововведения, улучшения PhpStorm 10:

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

Возможность работы с:

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

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

Автоматическое завершение кода было значительно переработано:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сайт программы — http://www.jetbrains.com/phpstorm (рис. 10).

Страница программы в интернете
Рисунок 10 – Страница программы в интернете
Рабочее окно программы PhpStorm
Рисунок 11 — Рабочее окно программы PhpStorm

2.1.2 Веб-приложение PhpMyAdmin

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

PhpMyAdmin преследует цель значительно упростить работу с базами данных в MySQL. В текстовом режиме при работе с базой данных можно увидеть простоту ввода команд в командную строку, оригинальными таблицами возвращаются результаты выборок, при непомещении данных на экран, есть опасность вылазки их друг на друга. Работа с MySQL в командной строке. Команда show databases — вывести все имеющиеся базы данных PhpMyAdmin поможет в легкой работе с достоинствами браузера, включая прокрутку изображения, при случае не умещении на экран. Все базовые функций SQL и работа с данными в PhpMyAdmin являются интуитивно понятными, не имеют трудности в использовании как в простом режиме, так и в сети Internet.

Приложение PhpMyAdmin — это совокупность скриптов написанных на PHP. Она обеспечивает полноту в работе разработчика, в том числе удаленную работу с базами данных MySQL, через веб-интерфейс. Так как phpMyAdmin позволяет во многих случаях обойтись без непосредственного ввода команд SQL, то работа с базами данных становится вполне посильной задачей даже для человека, весьма поверхностно знакомого с MySQL.

2.2 Информационное проектирование веб-сайта

2.2.1 Структурирование информационного содержимого сайта

Структурирование контента
Рисунок 12 — Структурирование контента

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

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

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

Такая информационная архитектура идеально подходит для сайта компании «Ростовской ЦРБ» и позволит легко воспринимать посетителям сайта, информацию, которая представлена на нем (рис. 13, 14).

Схематическое изображение иерархической структуры сайта
Рисунок 13 — Схематическое изображение иерархической структуры сайта

2.2.3 Система навигации по сайту

Навигация по сайту
Рисунок 15 — Навигация по сайту
Схема главной страницы сайта
Рисунок 16 — Схема главной страницы сайта

2.3 Создание сайта для предприятия

2.3.1 Установка локального сервера

Для разработки проекта был использован локальный веб-сервер, который вполне рабочий и может быть использован для публикации сайта. В сети интернет существует большой выбор сборок, позволяющие установить локальный веб-сервер. В реализации проекта будет использована сборка OpenServer — это бесплатный и быстроразвивающийся веб-сервер, идеально подходящий для разработки веб-приложений в локальных условиях. Рассмотрим процесс установки и настройки [13].

Дистрибутив локального веб-сервера находится на официальном сайте http://open-server.ru/download/. Установщик представляет собой самораспаковывающийся архив, и при установке необходимо указать директорию, куда будет установлен OpenServer. Желательно установку производить в корень любого раздела жесткого диска. Например, если выбрать в качестве директории для распаковки диск G:\, то распаковщик создаст директорию G:\OpenServer и распакует сервер в эту директорию

Путь распаковки
Рисунок 17 — Путь распаковки

Важно отметить, что на сайте разработчика есть три версии OpenServer: basic, premium и ultimate. В ultimate версии кроме веб-сервера, происходит распаковка и дополнительного программного обеспечения, наличие которого не обязательно и не повлияет на работу сервера. Результат распаковки минимальной версии представлен на рисунке 3.

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

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

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

Контекстное меню OpenServer
Рисунок 19 — Контекстное меню OpenServer
Настройка OpenServer (Основные)
Рисунок 20 — Настройка OpenServer (Основные)

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

Вкладка «Сервер» в окне настроек
Рисунок 21 — Вкладка «Сервер» в окне настроек

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

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

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

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

IP-адрес сервера
Рисунок 23 — IP-адрес сервера

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

Смена «Корневой папки доменов»
Рисунок 25 — Смена «Корневой папки доменов»

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

Любое серверное ПО, которое работает по сети, должно быть привязано к конкретному сетевому порту (рис. 26).

Форма для изменения портов
Рисунок 26 – Форма для изменения портов

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

Лог работы веб-сервера
Рисунок 28 – Лог работы веб-сервера

Во вкладке «Модули» осуществляется конфигурирование веб-сервера, предоставляется возможность выбрать в качестве веб-сервера не только Apache, но и другие типы серверов, также можно выбрать подходящую версию PHP и СУБД и другие возможности (рис. 29).

Модули веб-сервера
Рисунок 29 — Модули веб-сервера

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

Управление доменами
Рисунок 30 — Управление доменами

Если ни одного домена не было найдено, то в окне с логами будет следующая ошибка (рис. 31).

Ошибка. Запуск сервера без доменов невозможен
Рисунок 32 — Ошибка. Запуск сервера без доменов невозможен

2.3.2 Установка и настройка конфигурации CMS Joomla

Для начала установки системы управления сайтом Joomla необходимо разместить файлы в папке сайта (рис. 33). Также, необходимо создать базу данных для проекта. После этого нужно перезапустить локальный сервер, и с помощью инструментов локального сервера Open Server перейти на сайт.

Копирование файлов дистрибутива Joomla в папку сайта
Рисунок 33 — Копирование файлов дистрибутива Joomla в папку сайта

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

Мастер установки Joomla на сайт
Рисунок 34 — Мастер установки Joomla на сайт

Необходимо ввести название сайта, его краткое описание, электронный ящик и пароль администратора и после нажатия кнопки «Далее» (рис. 35) система предложит сконфигурировать доступ к базе данных (рис. 36).

Настройка конфигурации сайта
Рисунок 35 — Настройка конфигурации сайта
Конфигурация базы данных
Рисунок 36 — Конфигурация базы данных

Далее система предложит варианты установки (рис. 37), и после нажатия кнопки «Установка» процесс установки завершается, и система выводит уведомление об успешной установке Joomla с предупреждением удалить директорию «installation» (рис. 38).

 Завершение установки
Рисунок 37 — Завершение установки
Уведомление об успешной установке Joomla!
Рисунок 38 — Уведомление об успешной установке Joomla!

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

Установка языковых пакетов
Рисунок 39 — Установка языковых пакетов
Установка языковых параметров сайта
Рисунок 40 — Установка языковых параметров сайта

После этого, как указано на рис. 20, необходимо полностью удалить директорию «installation» (рис. 23).

Удаление директории “installation”
Рисунок 41 — Удаление директории “installation”

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

Окно входа в административную панель сайта
Рисунок 42 — Окно входа в административную панель сайта
Панель управления сайтом
Рисунок 43 — Панель управления сайтом

Для создания верхнего меню сайта необходимо добавить необходимые материалы (рис. 44) и вывести эти материалы в меню (рис. 45).

Добавление материалов на сайт
Рисунок 44 — Добавление материалов на сайт
Создание пунктов верхнего меню
Рисунок 45 — Создание пунктов верхнего меню

Для отображения пунктов меню на сайте необходимо настроить модуль «Меню» и разместить туда пункты меню (рис. 46).

Создание модуля для верхнего меню
Рисунок 46 — Создание модуля для верхнего меню
Уведомление о сохранении модуля меню
Рисунок 47 — Уведомление о сохранении модуля меню

Редактировать отображения пункта меню можно в менеджере меню (рис. 48).

Редактирование пункта меню
Рисунок 48 — Редактирование пункта меню

2.3.3 Настройка внешнего вида сайта

После вышеперечисленных действий необходимо установить баннер на главную страницу сайта (рис. 59).

Установка баннера на главную страницу
Рисунок 59 — Установка баннера на главную страницу

После внесения всех настроек внешний вид сайта показан на рис. 60-63.

Главная страница интернет-магазина
Рисунок 60 – Главная страница интернет-магазина
Раздел сайта «Пациентам»
Рисунок 61 – Раздел сайта «Пациентам»

2.3.4 Перенос сайта на хостинг

После настройки сайта на локальном сервере, его необходимо перенести на хостинг. Для этого было использовано расширение «Akeeba Kickstart Core» (рис. 62, 63).

Выбор файла архива с резервной копией сайта
Рисунок 62 – Выбор файла архива с резервной копией сайта
Установка резервной копии сайта на хостинг
Рисунок 63 – Установка резервной копии сайта на хостинг

2.4 Выводы по Главе 2

В процессе выполнения проекта на локальном сервере был создан сайт предприятия с использованием системы управления контентом Joomla. Для создания сайта была использована среда разработки — JetBrains PhpStorm, локальный сервер – OpenServer, система управления содержимым – Joomla.

PhpStorm 10 – это интегрированная среда разработки на PHP с интеллектуальным редактором, которая глубоко понимает код, поддерживает PHP 7.0, 5.6, 5.5, 5.4 и 5.3 для современных и классических проектов, обеспечивает лучшее в индустрии автодополнение кода, рефакторинги, предотвращение ошибок на лету и поддерживает смешивание языков.

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

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

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

Глава 3. Обоснование экономической эффективности

3.1 Расчет трудоемкости проекта

Общие затраты труда на разработку и внедрение проекта Q определяются следующим образом:

Q = t1+t2+t3 + t4+………tвн (3.1)

Где: tx— затраты труда на выполнение i -го этапа проекта, дни.

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

Таблица 3 — Этапы проектирования

3.2 Определение численности исполнителей

Средняя численность исполнителей при реализации проекта разработки и внедрения ПО определяется соотношением:

N=Q*Тсм./F (3.2)

где:

Q — затраты труда на выполнение проекта (разработка и внедрение ПО), дни

F — фонд рабочего времени, дни.

Величина фонда рабочего времени определяется соотношением:

F =T× FM (3.3)

Где:

Т — время выполнения проекта в месяцах,

FM— фонд времени в текущем месяце, который рассчитывается из учета общего числа дней в году, числа выходных и праздничных дней:

FM=TCM× (DK-DB-Dn)/12 (3.4)

где:

Тсм— продолжительность рабочего дня, час,

DK— общее число дней в году,

DB-число выходных дней в году,

Dn— число праздничных дней в году.

Fm=8ч*(365-104-14)/12=165 час.

T=21/21=1 мес.

N=21*8/165=1 чел.

3.3 Расчет затрат на выполнение проекта и составление таблицы структуры затрат

Затраты на выполнение проекта состоят из затрат на заработную плату исполнителям, затрат на закупку или аренду оборудования, затрат на организацию рабочих мест, и затрат на накладные расходы:

К = Сзарп. + Соб. + Сорг. +Снакл. (3.5)

Где:

Cзаpn. — заработная плата исполнителей, руб.

С0Б.— затраты на обеспечение необходимым оборудованием, руб.

Сорг. — затраты на организацию рабочих мест, руб.

Снакл. — накладные расходы, руб.

К=23833+887+13860+2750 = 41330 руб.

Затраты на выплату исполнителям заработной платы.

Определяется следующим образом:

Сзарп = Сз.осн +Сз.отч. (3.6)

Где:

Сз.осн. — основная заработная плата, руб.

Сз.отч. — отчисление с заработной платы, руб.

Сз.доп. – дополнительная заработная плата, руб.

Сзарп=18333+5500=23833 руб.

Таблица 4 — Расчет основной заработной платы исполнителей

ДолжностьОклад, руб.Дневной оклад, руб.Трудозатраты ДНИОсновная заработная, плата, руб.
1.Программист180008732118333
Расчет основной заработной платы исполнителей

Дневной оклад исполнителей рассчитывается на основе данных по окладам и времени занятости исполнителей:

Одн. = (Омес. ×Тсм.) / Fм (3.7)

Где:

Омес. — месячный оклад, руб.,

Тсм .— продолжительность смены, час,

Fм. — месячный фонд рабочего времени, час, 2.4.

Одн. = 18000*8/165=873руб.

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

Сз.отч. = Сз.осн.*Нотч. (3.8)

Где:

Нотч. – отчисления с заработной платы, %

Сз.отч.=18333*0.3 = 5500 руб.

Затраты на обеспечение работ оборудованием.

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

Таблица 5 — Затраты на оборудование

№ п/пНаименование оборудованияКоличество единиц оборудованияЗатраты на оборудование, руб.
1.Персональный Компьютер143000
2.Принтер Canon14000
3.Microsoft Office113800
Итого60800
Затраты на оборудование

Cумма амортизации оборудования для проекта составит:

A=∑(Ki*Ha*Ti)/100*12 (3.9)

Где:

п-количество наименований оборудования,

Ki- стоимость единицы оборудования i-того наименования руб.,

На— норма амортизации, %

Ti- длительность эксплуатации оборудования, мес.

A=60800*0.25*0,7/12==887руб.

3.3 Затраты на организацию рабочих мест для исполнителей проекта

Таблица 6 — Затраты на организацию рабочих мест

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

Затраты на аренду помещения:

Сорг. = (Скв.м./12) * (S*Тар.) (3.10)

Где:

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

S – арендуемая площадь рабочего помещения, кв.м.,

Тар. – срок аренды, мес.

Сорг. = 19800/12*12кв.м*0,7м= 13860 руб.

3.4 Накладные расходы на выполнение проекта.

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

Снакл. = %.накл. ×Сз.осн. (3.11)

Где:

%накл.— накладные расходы, %

Накл.расх.с=18333*0,15=2750 руб.

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

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

Квн.=Свн.зарп. +Свн.накл. (3.12)

Где:

СВН.ЗАРП. — заработная плата исполнителям, участвующим во внедрении, руб.

Свн.накл.- накладные расходы, руб.

Квн. = 1135+131=1266 руб.

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

Затраты на заработную плату исполнителя:

Свн.зарп. = Свн.з.осн. +Свн.з.отч.

Свн.зарп. = 873+262=1135 руб.

Основная заработная плата исполнителя:

Свн.з.осн=Сз.дн. ×Твн. (3.13)

Где:  

Сз.дн. — дневной оклад исполнителя, руб.

Твн. — продолжительность работ по внедрению, дни.

Свн.з.осн.=873*1=873 руб.

Начисления на заработную плату:

Свн.з.отч.= Свн.з.осн × Нсоц.

Свн.з.отч.=873*0.3=262 руб.

Накладные расходы:

Свн.накл..= Одн. ×% накл.р.

Свн.накл.=873*0.15=131 руб.

Учитывая затраты на разработку и внедрение проекта общие затраты составят:

Коб. =Квн +К (3.14)

Коб. = 1266 + 33735= 35001 руб.

Таблица 7 — Структура затрат на создание и внедрение проекта.

Статьи затратСумма,руб.Структура, %
1Заработная плата исполнителям2383356
2Затраты на амортизацию оборудования8872
3Накладные расходы27506,45
4Затраты на внедрение12662,97
5Затраты на организацию рабочих мест1386032,5
 Итого425961000
Структура затрат на создание и внедрение проекта.
Рисунок 64 — Структура затрат на выполнение проекта

3.6 Выводы по Главе 3

Выполнение данного проекта в общей сложности заняло 21 рабочий день. Общие затраты составили 42596 рублей. Из них: затраты на внедрение – 1266 рублей, на заработную плату исполнителям – 23833 рублей, на амортизацию оборудования – 887 рублей, накладные расходы – 2750 рублей.

Заключение

Глобальная сеть — это объединение транснациональных компьютерных сетей, работающих по самым разнообразным протоколам. Подавляющее большинство компьютеров в Internet работает по протоколу TCP/IP. Основой семейства протокола TCP/IP является сетевой уровень, представленный протоколом IP, а также различными протоколами маршрутизации. TCP организует двунаправленный обмен информацией, что обеспечивает более высокую скорость её трансляции.

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

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

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

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

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

В процессе выполнения проекта на локальном сервере был создан сайт предприятия с использованием системы управления контентом Joomla. Для создания сайта была использована среда разработки — JetBrains PhpStorm, локальный сервер – OpenServer, система управления содержимым – Joomla.

PhpStorm 10 – это интегрированная среда разработки на PHP с интеллектуальным редактором, которая глубоко понимает код, поддерживает PHP 7.0, 5.6, 5.5, 5.4 и 5.3 для современных и классических проектов, обеспечивает лучшее в индустрии автодополнение кода, рефакторинги, предотвращение ошибок на лету и поддерживает смешивание языков.

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

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

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

Список используемых источников

  1. Анцыпов А. В. Обеспечение надежности программных средств в зависимости от качества документации / А. В. Анцыпов // Проблемы программирования. — 2008. — №2-3. – С. 249 – 253.
  2. Бочкова Е. В. Анализ рынка Интернет-торговли в России и за рубежом и пути его совершенствования / Е. В. Бочкова, Д. С. Пищулина // Вестник Иркутского государственного технического университета. — 2014. — № 10 (93). — С. 225-229.
  3. Бочкова Е. В. Этапы организации и особенности работы интернет-магазина / Е. В. Бочкова, Д. С. Пищулина // Актуальные проблемы экономической теории и практики: сб. науч. тр. — 2014. — Вып. 17. — С. 112-121.
  4. Брайт И. Секреты прибыльных интернет-магазинов / И. Брайт // Маркетинг в России и за рубежом. 2012. № 6. С. 97–101.
  5. Вальчевский А. С. Технология системы управления контентом [Электронный ресурс] / А. С. Вальчевский, Е. Б. Никитин // http://belisa.org.by/pdf/PTS2005/219-220.pdf (дата обращения 19.09.2016)
  6. Винокуров А. В. Онлайн- и офлайн-продажи – две параллели продвижения бизнеса / А. В. Винокуров // Личные продажи. 2013. № 4. С. 266–273.
  7. Гилмор В. PHP4 учебный курс / В. Гилмор. – СПб.: Питер, 2003. – 352 с.
  8. Горнаков С. Г. Осваиваем популярные системы управления сайтом (CMS) / С. Г. Горнаков. – М.: ДМК Пресс, 2009. – С. 20 – 31.
  9. Градиль. А. А. Интернет-реклама как современный инструмент маркетинга / А. А. Градиль; наук. рук. А. М. Олефиренко // Экономические проблемы установившейся развития: материалы Международной научно-практической конференции, посвященной памяти проф. Балацкого Е. Ф., г. Суммы, 6-8 мая 2014 p.: в 2-х т. / Общ. ред.: А. В. Проконенко, А. В. Люлёва. — Сумы: СумГу, 2014. — Т.1. — С. 202-203.
  10. Грачев А. Создаем свой сайт на WordPress: быстро, легко и бесплатно. Работа с CMS WordPress 3 / А. Грачев — СПб.: Питер, 2011. — 288 с.
  11. Гречков В. Ю. Современное состояние и перспективы электронной коммерции (маркетинговый подход) / В. Ю. Гречков // Маркетинг в России и за рубежом. — 2003. — №6 (38). — С. 68-85.
  12. Григорьев Ю. А. Банки данных. Учеб. для вузов / Ю. А. Григорьев, Г. И. Ревунков. — М.: МГТУ им. Н. Э. Баумана. – 2002. — 320 с.
  13. Григорьев Ю. А. Теория и практика проектирования систем на основе баз данных: учеб. пособсреие для вузов / Ю. А. Григорьев, А. Д. Плутенко. — Благовещенск: Изд-во Амур. гос. ун-та, 2008. — 394 с.
  14. Григорьев Ю. А. Теория и практика проектирования систем на основе баз данных: учеб. пособсреие для вузов / Ю. А. Григорьев, А. Д. Плутенко. — Благовещенск: Изд-во Амур. гос. ун-та, 2008. — 394 с.
  15. Декстер М. Joomla programming: пер. с англ. / М. Декстер, Л. Лэндри. — М.: Вильямс. 2013 — 592 с.
  16. Документоведение: методические указания / сост. Е. В. Спиридонова; Яросл. гос. ун-т им. П. Г. Демидова. — Ярославль: ЯрГУ, 2014. — С. 16 — 18.
  17. Дубовик А. В. Концептуальные основы интернет-рекламы в торговом предприятии / А. В. Дубовик // Актуальные проблемы экономики. — 2009. — №11(101). — С. 71-77.
  18. Дунаев В. HTML, скрипты и стили / В. Дунаев. — СПб: БХВ-Петербург, 2011- 816 с.
  19. Заболеева-Зотова А.В. Лингвистические системы: модели, методы, приложения. Монография. — ВолгГТУ, 2004. — 220 с.
  20. Зудилова Т. В. Web-программирование HTML / Т. В. Зудилова, М. Л. Буркова — СПб: НИУ ИТМО, 2012. – 70 с.
  21. Кисленко Н. П. HTML. Самое необходимое / Н. П. Кисленко. — СПб: БХВ-Петербург, 2012 – 352 с.
  22. Корнилов В. С. Анализ систем управления контентом, используемых в системе образования [Электронный ресурс] / В. С. Коринлов, В. И. Цыганов // Режим доступа: http://www.ido.rudn.ru/vestnik/2013/2013_1/9.pdf (дата обращения 11.10.2016)
  23. Корнилов В. С. Анализ систем управления контентом, используемых в системе образования [Электронный ресурс] / В. С. Коринлов, В. И. Цыганов // Режим доступа: http://www.ido.rudn.ru/vestnik/2013/2013_1/9.pdf (дата обращения 11.10.2016)
  24. Котляров И. Д. Комплекс интернет-маркетинга / И. Д. Котляров // Интернет маркетинг. — 2012. — № 5. — С. 288–294.
  25. Круг С. Как сделать сайт удобным. Юзабилити по методу Стива Круга / С. Круг – СПб.: Питер, 2010. – 208 с.
  26. Купер А. Алан Купер об интерфейсе. Основы проектирования взаимодействия / Алан Купер. – Пер.с англ. – СПб.: Символ-Плюс, 2010. – 688 с.
  27. Курзыбова Я. В. Средства создания динамических web-сайтов: учеб. пособие / Я. В. Курзыбова. – Иркутск: Изд-во ИГУ, 2011. – 121 с.
  28. Лабберс К. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений / К. Лабберс, Н. Олберс, К. Салим. — М.: Вильямс, 2011 – 272 с.
  29. Мартовой А. В. Сущность и основные характеристики электронного бизнеса, электронной коммерции, электронного и интернет-маркетинга / А. В Мартовой // Проблемы материальной культуры. — С. 146 — 153
  30. Масляк Т. А. Анализ методов разработки сайтов / Т. А. Масляк, Т. А. Колесникова // Информационные технологии: наука, техника, технология, образование, здоровье: Тезисы докладов XXIII Международной научно-практической конференции, Ч.IV (20-22 мая 2015 г., Харьков). – С. 230.
  31. Матросов А. В. HTML 4.0/ А.В. Матросов, А. О. Сергеев, М. П. Чаунин. – СПб.: Питер, 1999. – 224 с.
  32. Муравьев А. Технические аспекты веб-разработки [Электронный ресурс] / А. Муравьев, А. Григорьев. – Режим доступа: http://netology.ru/files/2930/Технические аспекты веб-разработки.pdf (дата обращения 16.10.2016)
  33. Мэрриотт Дж. Joomla 3.0. Официальное руководство: пер. с анг. / Дж. Мэрриот, Э. Уоринг. — СПб: Питер. 2013-496 c.
  34. Обзор свободных скриптов для интернет-магазинов [Электронный ресурс] / Компьютерные вести. – 2013. — № 018. – Режим доступа: http://www.kv.by/content/324834-obzor-svobodnykh-skriptov-dlya-internet-magazinov (дата обращения 14.10.2016)
  35. Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие/Сост. С. М. Наместников. — Ульяновск: УлГТУ, 2014. – 91 c.
  36. Официальный сайт фирмы iTrack [Электронный ресурс]. Режим доступа: http://itrack.ru/research/cmsrate/ (дата обращения 29.03.2016)
  37. Паршенцев А. А. Проблема и перспективы развития электронных магазинов / А. А. Паршенцев // Маркетинг в Украине и за рубежом. — 2000. — № 3. — С. 84-89.
  38. Приступа В. В. Подход к выбору технологии создания динамического сайта [Электронный ресурс] / В. В. Приступа. — Режим доступа: http://www.repository.hneu.edu.ua/jspui/bitstream/123456789/6097/29/sect3_Prystupa.pdf (дата обращения 19.10.2016)
  39. Приступа В. В. Подход к выбору технологии создания динамического сайта [Электронный ресурс] / В. В. Приступа. — Режим доступа: http://www.repository.hneu.edu.ua/jspui/bitstream/123456789/6097/29/sect3_Prystupa.pdf (дата обращения 19.10.2016)
  40. Приступа В. В. Подход к выбору технологии создания динамического сайта [Электронный ресурс] / В. В. Приступа. — Режим доступа: http://www.repository.hneu.edu.ua/jspui/bitstream/123456789/6097/29/sect3_Prystupa.pdf (дата обращения 19.10.2016)
  41. Ретинский В. С. О подходах к автоматизации оценки качества и сертификации программных средств учебного назначения / В. С. Ретинский, Е. П. Нешта, М. П. Курникова // Труды X Всероссийской научно-методической конференции «Телематика’2003». – СПб: — 2003. – с.240-241
  42. Росс В. С. Создание сайтов: HTML, CSS, PHP, MySQL. Учебное пособие, ч. 2 / В. С. Росс — МГДД(Ю)Т, М. — 2011 – 68 с.
  43. Рублевская Ю. В. Моделирование бизнеса в интернет-среде / Ю. В. Рублевская, Е. В. Попов // Маркетинг в России и за рубежом. — 2001. — №2 (22). — С. 87-102.
  44. Румянцев Д. Интернет-маркетинг от А до Я / Д. Румянцев. – М: АСТ, 2014. – 350 с.
  45. Самарев Р. С. Создание простейших HTML-страниц, валидаторы кода. Каскадные таблицы стилей CSS: методические указания к выполнению практикума № 1 и лабораторной работы № 1 по дисциплинам «Языки интернет-программирования» и «Практикум по интернет-программированию» / Р. С. Самарев. — Москва: Издательство МГТУ им. Н. Э. Баумана, 2015. — 39 с.
  46. Станке У. Р. Microsoft Windows Server® 2012. Справочник администратора: Пер. с англ. У. Р. Станке— М.: Издательство «Русская редакция»; СПб.: «БХВ-Петербург», 2014. — 688 с.
  47. Филлипов С. А. Основы современного веб-программирования: Учебное пособие / С. А. Филлипов. – М.: НИЯУ МИФИ, 2011. – 160 с.
  48. Фролов А. Практика применения PHP, Apache и MySQL для активных web–сайтов/ Г. Фролов. – М.: Издательско–торговый дом “Русская Редакция”, 2002. – 576 с.
  49. Хомич А. А. Веб-браузеры / А. А. Хомич // Информатика. Все для учителя. 2013. — № 10 (34). – С. 30-34
  50. Шапошников И. Профессиональное PHP программирование/ И. Шапошников. — СПб.: Питер, 2007. – 192 c.
  51. Эймор Д. Internet-магазины и закупочная деятельность. Электронный бизнес. Эволюция и/или революция / Д. Эймор. — М.: «Вильямс», 2001. — С. 291-302.
  52. Юрчук Г. В. Развитие финансовых услуг на основе систем электронного бизнеса: Дис… канд. экон. наук: 08.04.01. Суммы, 2003. — 209 с.

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