Материал: Курсовая работа
Диаграмма развертывания
Н
а
последнем этапе структурного проектирования
системы была построена диаграмма
развертывания, изображающая, из каких
компонентов будет состоять готовая к
использованию система, и как эти
компоненты будут взаимодействовать
между собой. Диаграмма развертывания
представлена на рисунке 6.
Рисунок 6 – Диаграмма развертывания
Из диаграммы видно, что на клиентской стороне узла требуется только браузер для отображения содержимого web-страниц. При помощи технологий Codeigniter и разработанного API содержимое форм заполняется данными и посылаться пользователю по HTTP протоколу.
Разработка web-приложения
Разработка локальной версии сайта
Разработка веб-приложения осуществлялась в среде разработки VisualCode при использовании Codeigniter framework. Для локального запуска сайта необходимо установить
Полный пакет XAMPP для Windows содержит: веб-сервер Apache 2.4.10 с поддержкой SSL, СУБД MySQL 5.6.21, PHP 5.5.19, Perl, FTP-сервер FileZilla 0.9.41, Mercury Mail Transport System 4.63, phpMyAdmin 4.2.11. Даже есть полезные дополнения в виде почтового сервера и phpMyAdmin (для работы с БД MySQL).
С
качиваем
дистрибутив (143 Мб) с сайта проекта. Перед
началом установки отключаем UAC (User
Account Control). На рисунке 7 показано
Отключение UAC. Делается
это следующим образом. Переходим в
панель управления и в поле поиска,
расположенном в правом верхнем углу,
вводим UAC.
Рисунок 7 – Отключение UAC
Опускаем ползунок в самое нижнее положение и сохраняем изменения. Всё, UAC отключен.
Теперь запускаем исполняемый файл XAMPP с правами администратора. В окне приветствия нажимаем «Next». В окне выбора компонентов отмечаем всё. Процесс выбора компонентов представлен на рисунке 8.
Рисунок 8 – Выбор модулей XAMPP
Следуем далее. В следующем окне оставляем путь к директории XAMPP по умолчанию или меняем его по своему усмотрению.
Переходим к следующему шагу, где сообщается, что программа готова к установке. Ну, раз программа готова, запускаем установку. Через несколько минут получаем сообщение об успешном окончании.
Р
исунок
9 – Сообщение об успешной установке
XAMPP
Снимаем галочку – сейчас запускать панель управления XAMPP не будем. Перезагружаем компьютер.
После перезагрузки компьютера запускаем панель управления XAMPP (Пуск->Все программы-> XAMPP->XAMPP Control Panel).
Рисунок 9 – 
Настройки
панели XAMPP
Кликаем по кнопке «Config» в верхнем правом углу панели и вызываем общие настройки панели управления. В поле «Editor», по умолчанию, используется текстовый редактор Windows, хорошо известный, как «Блокнот».
В окне настроек панели управления XAMPP можно включить опции автоматического старта нужных модулей. На рисунке отмечены Apache и MySQL. Теперь при запуске панели управления отмеченные модули будут стартовать автоматически.
Ниже, есть ещё одна полезная опция – «Start Control Panel Minimized». Если она отмечена, то при запуске, панель управления XAMPP будет сразу свернута в трей (нижний правый угол панели задач Windows).
Е
сли
перейти по кнопке «Service and Port Settings», то
откроется окно с настройками номеров
портов, которые использует тот или иной
модуль XAMPP.
Рисунок 10 – Активация виртуальной среды
Рисунок 11 – Запуск локального сервера
Для подключения базы данных к порту 5432 используется СУБД PostgreSQL как показано на рисунке 10.
Р
исунок
12 – Окно администратора PosgreSQL
Чтобы создать базу данных для сессий и миграций Codeigniter были выполнены следующие команды в MySQL:
CREATE TABLE IF NOT EXISTS `ci_sessions` (
`id` varchar(40) NOT NULL,
`ip_address` varchar(45) NOT NULL,
`timestamp` int(10) unsigned DEFAULT 0 NOT NULL,
`data` blob NOT NULL,
KEY `ci_sessions_timestamp` (`timestamp`)
);
CREATE INDEX "ci_sessions_timestamp" ON "ci_sessions" ("timestamp");
Вам также нужно будет добавить PRIMARY KEY в зависимости от вашей ‘sess_match_ip’ настройки. Приведенные ниже примеры работают как для MySQL так и для PostgreSQL:
// Когда sess_match_ip = TRUE
ALTER TABLE ci_sessions ADD PRIMARY KEY (id, ip_address);
// Когда sess_match_ip = FALSE
ALTER TABLE ci_sessions ADD PRIMARY KEY (id);
// До удаления ранее созданного первичного ключа (используется при изменении параметра)
ALTER TABLE ci_sessions DROP PRIMARY KEY;
Назначение папок
Структура каталогов CodeIgniter разделена на 2 папки:
Application
System
Application
Как видно из названия, папка Application содержит весь код приложения. Папка приложения содержит несколько других папок, которые описаны ниже:
Cache – эта папка содержит все кэшированные страницы вашего приложения. Эти кэшированные страницы увеличат общую скорость доступа к страницам.
Config – эта папка содержит различные файлы для настройки приложения. С помощью файла config.php пользователь может настроить приложение. Используя файл database.php, пользователь может настроить базу данных приложения.
Controllers – эта папка содержит контроллеры вашего приложения.
Core – эта папка будет содержать базовый класс вашего приложения.
Helpers – в эту папку вы можете поместить вспомогательный класс вашего приложения.
Hooks – файлы в этой папке предоставляют возможность подключиться и изменить внутреннюю работу фреймворка без взлома основных файлов.
Language – эта папка содержит файлы, связанные с языком.
Libraries – эта папка содержит файлы библиотек, разработанных для вашего приложения.
Logs – эта папка содержит файлы, относящиеся к журналу системы.
Models – логин базы данных будет размещен в этой папке.
Third_party – в этой папке вы можете разместить любые плагины, которые будут использоваться для вашего приложения.
Views – HTML-файлы приложения будут размещены в этой папке.
System
Эта папка содержит основные коды CodeIgniter, библиотеки, помощники и другие файлы, которые помогают упростить кодирование. Эти библиотеки и помощники загружаются и используются в разработке веб-приложений. Эта папка содержит весь последующий код CodeIgniter, организованный в различные папки:
Core – эта папка содержит базовый класс CodeIgniter. Не изменяйте здесь ничего. Вся ваша работа будет проходить в папке приложения. Даже если ваше намерение состоит в том, чтобы расширить ядро CodeIgniter, вы должны сделать это с помощью ловушек, и ловушки живут в папке приложения.
Database – папка базы данных содержит основные драйверы базы данных и другие утилиты базы данных.
Fonts – папка Fonts содержит информацию о шрифтах и утилиты.
Helpers – папка помощников содержит стандартные помощники CodeIgniter (такие как помощники по дате, cookie и URL).
Language – языковая папка содержит языковые файлы. Вы можете игнорировать это сейчас.
Libraries – папка библиотек содержит стандартные библиотеки CodeIgniter (чтобы помочь вам с электронной почтой, календарями, загрузкой файлов и многим другим). Вы можете создавать свои собственные библиотеки или расширять (и даже заменять) стандартные, но они будут сохранены в каталоге application / library, чтобы отделить их от стандартных библиотек CodeIgniter, сохраненных в этой конкретной папке.
Настройка контроля версий Git
GitHub — это облачный сервис, где разработчики хранят файлы и совместно работают над проектами. GitHub взаимодействует с системой контроля версий Git.
Для работы понадобится GitHub Desktop — приложение от GitHub, которое позволяет выполнять необходимые действия без командной строки.
Создание учётной записи
Необходимо перейти на сайт github.com, зарегистрироваться и верифицировать адрес электронной почты. Выберить тип аккаунта: публичный или приватный. В публичном аккаунте репозитории видны всем, а в приватном — только тем участникам, которым вы сами открыли доступ.
Добавление удалённого репозитория
Репозиторий — это файловое хранилище проектов. На бесплатном тарифе можно загружать до 500 МБ данных и создавать неограниченное количество репозиториев.
Чтобы создать репозиторий, необходимо нажать на кнопку New repository, назвать проект и кликнуть Create repository. Можно добавить описание проекта, сделать его публичным или приватным и прикрепить технические файлы:
README file содержит подробное описание проекта — так другие разработчики узнают, какой репозиторий они смотрят и зачем он нужен.
Gitignore позволяет сэкономить место и не заливать на GitHub лишние файлы. Например, можно исключить скрытые файлы Mac OS.
License добавляет к коду ссылку на первоисточник и защищает права разработчика. Лицензия позволяет понять, как правильно использовать чужой код и можно ли его свободно внедрять в коммерческие проекты.
Рисунок 13 – 
Создание
репозитория
Рисунок 14 – Создание репозитория
Перенос удалённого репозитория на ПК
Необходимо перейти на сайт desktop.github.com и скачайте GitHub Desktop — это приложение, которое позволит синхронизировать удалённый репозиторий на GitHub и файлы на компьютере без командной строки терминала:
Скачать приложение под свою операционную систему.
Открыть приложение и прохоти авторизацию — нужно указать электронную почту и данные GitHub-аккаунта.
Приложение синхронизируется с удалённым репозиторием и предложит выполнить одно из следующих действий: создать новый репозиторий, добавить локальную папку с компьютера в GitHub Desktop или клонировать существующий репозиторий в папку компьютера.
Т
ак
как, мы создали тестовый удалённый
репозиторий, поэтому выберем третий
вариант — клонировать существующий
репозиторий в папку компьютера.
Рисунок 15 – Авторизация
После установки GitHub Desktop запросит синхронизацию с GitHub-аккаунтом. Если аккаунта нет, приложение предложит его создать
Р
абочее
пространство в GitHub Desktop — мы можем
клонировать репозиторий, создать новый
или перенести нужные файлы с компьютера.
Выбираем репозиторий, сохраняем его на
рабочем столе и жмём кнопку Clone
Рисунок 16 – Клонирование репозитория
После клонирования репозитория в рабочем пространстве появятся три вкладки: Current Repository, Current Branch и Fetch origin.
Current Repository — раздел позволяет переключаться между несколькими репозиториями, отслеживать невнесённые изменения (вкладка Changes) и смотреть историю коммитов (вкладка History).
Current Branch — раздел позволяет переключаться между несколькими ветками проекта.
Fetch origin — раздел обновляет внесённые изменения и синхронизирует файлы локального и удалённого репозитория.
Рисунок 17 – 
Рабочее
пространство для работы с клонированным
репозиторием
Рисунок 18 – 
История
изменений репозитория
На скриншоте первый коммит технический, он указывает на то, что мы создали репозиторий. Второй коммит – редактирование файл gitignore. История хранит все коммиты, и мы можем вернуться к любому из них. Это страховка от непредвиденных случаев
Добавление новых файлов на ПК и переносим их в удалённый репозиторий
Папка с файлами репозитория хранится на рабочем столе. Чтобы продолжить работу, откроем проект в редакторе кода: можно выбрать любую программу, и будем работать с репозиторием в Visual Studio Code — это бесплатный редактор от компании Microsoft.
Рисунок 19 –П
апка
с репозиторием в Visual Studio Code
Необходимо создать HTML-файл, добавим базовую структуру и посмотрим на боковое меню — HTML-файл подсвечен зелёным цветом. Это означает, что в проекте появились изменения и они ещё не добавлены в репозиторий на GitHub.
Рисунок 20 – 
Редактор
кода
Переходим в GitHub Desktop — созданный HTML-файл появится во вкладке Changes. Для его сохранения пишем коммит и переходим во вкладку History для просмотра изменений. Если изменения сохранились, нажимаем на Push origin и отправляем изменения в удалённый репозиторий.