Файл: Разработка страницы клиента IT-компании, разрабатывающей визуальные решения для застройщиков ООО «Технософт».pdf

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

В 2014 году было проведено голосование, по результатам которого следующая версия получила название PHP 7. Выход новой версии планировался в середине октября 2015 года. В марте 2015 года Zend представили инфографику, в которой описаны основные нововведения PHP 7.

3 декабря 2015 года было объявлено о выходе PHP версии 7.0.0.

Новая версия основывается на экспериментальной ветви PHP, которая изначально называлась phpng (PHP Next Generation — следующее поколение), и разрабатывалась с упором на увеличение производительности и уменьшение потребления памяти. В новой версии добавлена возможность указывать тип возвращаемых из функции данных, добавлен контроль передаваемых типов для данных, а также новые операторы.

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

PHP версии 8.0 была выпущена 26 ноября 2020-го. Главными нововведениями стали: поддержка union-типов, JIT-компиляция и атрибуты (также известны как аннотации).

9 июля 2020 года Дэйл Хирт (англ. Dale Hirt), менеджер проекта PHP в Microsoft, в рассылке php.internals выпустил сообщение о том, что после выпуска версии PHP 8.0 Microsoft прекратит поддержку разработки этого языка программирования для Windows. Специалисты Microsoft занимались компиляцией бинарных версий интерпретатора для ОС Windows и тестированием их безопасности. В сообществе разработчиков PHP сообщили, что примут все необходимые меры, чтобы найти в ближайшее время альтернативный вариант для организации поддержки PHP 8.0 и выше для Windows, например, своими силами.

1.2.8 Bootstrap

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

Bootstrap использует современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров

Эта библиотека начала разрабатываться как внутренняя библиотека компании Twitter под названием Twitter Blueprint. После нескольких месяцев разработки он был открыт под названием Bootstrap 19 августа 2011 года.

Основными нововведениями второй версии, появившейся 31 января 2012 года, стали 12-колоночная сетка и поддержка адаптивности.

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

Работа над четвёртой версией начата 29 октября 2014 года. Альфа-версия вышла 19 августа 2015 года. Первая бета-версия выпущена 10 августа 2017. Вторая бета-версия выпущена 19 октября 2017. 18 января 2018 года выпущена первая стабильная версия Bootstrap 4.

2. Описание модулей серверной части программы и их взаимодействие

Первым модулем данного проекта является панель администратора index.php (Приложение 1), который хранится в подкаталоге сайта /admin (Рисунок 2.1), т.к. сам проект планируется интегрировать на сайт компании. Мобильная вверсия входа в панель администратора идентичная десктопной, адаптивность обеспечивает фреймворк bootstrap.

Рисунок 2.1 – вход в панель администратора

Вход и выход в административную панель осуществляется в соответствующих модулях login.php(Приложение 2) и logout.php (Приложение 3).

Если пароль или логин введены были неверно то выезжает соответствующая надпись ввода верных данных (Рисунок 2.9).

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

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

Для проверки был ли осуществлен вход администратора в систему в коде модуля content.php (Приложение 4) было прописано условие проверки, вызываемый перед началом обработки каждого скрипта или вывода страницы административной панели. Если проверка возвращает false, то нас переадресует на index.php. Модуль content.php является панелью администратора (Рисунок 2.5)

В нашем случае все страницы являются динамическими, поскольку наша цель максимально автоматизировать генерацию страниц клиента и наполнением его ссылками на контент. Страница клиента представляет собой сгенерированный через панель администратора .php файл, скопированный из шаблона shablon.php (Приложение 5) с присвоенным названием, введённым через панель администратора в соответствующей строке. Например, если ввели developer, то генерируется developer.php на основе шаблона (Рисунок 2.2 и Рисунок 2.3) в подкаталоге developers на сервере и внутрь шаблона уже прописывается на стороне администратора, что это страница developer, какие регулярные услуги использует после чего получаем готовую страницу клиента уже с выведенными данными – ссылками на контент.

Рисунок 2.2 – Страница клиента

Рисунок 2.3 – Страница клиента, мобильная версия.

Мы добиваемся это тем, что у нас уже имеется готовый shablon.php (Рисунок 2.4), который дублируется по заранее написанному скрипту в create.php (Приложение 6). Сам шаблон не подключает прописанные заранее таблицы стилей, поскольку хранится в подкаталоге /admin, а не в /admin/developers, поэтому выглядит максимально пустым.

Рисунок 2.4 – Шаблон для генерации страниц клиентов.

В корневом каталоге сервера хранятся каталоги bootstrap файлы .js и .css для адаптивной вёртски панели администратора и страницы клиента и подключаются к каждому модулю .php.

Рисунок 2.5 – Панель администратора.

Рисунок 2.6 – Панель администратора, мобильная версия.

В каждом модуле, в котором осуществляется подключение к БД, прежде чем приступить к редактированию записей (создать, удалить или изменить) необходимо прописать подключение к БД через модуль connect.php. (Приложение 6)

Для страниц застройщиков создаём отдельный каталог developers, где хранятся модули генерируемых страниц. Каталогизация приведена на Рисунке 2.7

Рисунок 2.7 – Каталогизация

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

Рисунок 2.8 – Структурная схема проекта

Рисунок 2.9 – Неверно введённый пароль.

Прежде чем мы приступим к запуску модулей серверных приложений, необходимо выставить в настройках Open Server соответствующие язык PHP и БД MySQL (Рисунок 2.10)

Рисунок 2.10 – Настройка модулей PHP и MySQL.

Реализация копирования в буфер обмена сделана на стороне клиента при помощи языка javascript, который так же генерируется к каждой строке со со ссылкой на контент во время вывода данных из таблицы (Приложение

3.Описание структуры базы данных и ее функций.

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

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

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

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

Ниже приведены описания атрибутов сущностей разрабатываемой системы.

Главная таблица developers (Застройщик), в которую вносится название генерируемого нами модуля страницы клиента для конечного пользования (Таблица 3.1). Сам же модуль, сгенерированный по шаблону будет подключать ссылки на контент соответствующего застройщика и автоматически сортировать по соответствующим продуктам (Таблица 3.2).

Таблица 3.1 – Атрибуты сущности Застройщик

Таблица 3.2 – Атрибуты сущности Продукт

Теперь через панель администратора сервера сайта, на который будет интегрирован проект, нужно добавить БД через SQL запрос:

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

START TRANSACTION;

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;

-- База данных: `developers`

-- --------------------------------------------------------

-- Структура таблицы `developer`

CREATE TABLE `developer` (

`id` int(11) NOT NULL,

`name` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,

`date_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,

`dev_index` varchar(11) COLLATE utf8mb4_unicode_ci DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Дамп данных таблицы `developer`

INSERT INTO `developer` (`id`, `name`, `date_time`, `dev_index`) VALUES

(8, 'РГ Девелопмент', '2021-01-10 00:26:02', 'rg'),

(9, 'adasdasd', '2021-01-10 01:28:50', 'rgd');

-- --------------------------------------------------------

-- Структура таблицы `products`

CREATE TABLE `products` (

`id` int(11) NOT NULL,

`dev_index` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,

`product_name` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,

`date_of_product` varchar(25) COLLATE utf8mb4_unicode_ci DEFAULT NULL,

`link` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- Дамп данных таблицы `products`

INSERT INTO `products` (`id`, `dev_index`, `product_name`, `date_of_product`, `link`) VALUES

(1, 'rg', 'photo', 'Декабрь 2020', 'https://yadi.sk/d/VntFzR9_6c87Pw'),

(2, 'rg', 'video', 'Ноябрь 2020', 'https://yadi.sk/d/VntFzR9_6c87Pw'),

(3, 'lig', 'photo', 'Декабрь 2020', 'https://yadi.sk/d/GhhjBUoPcmLp5w');

-- Индексы сохранённых таблиц

-- Индексы таблицы `developer`

ALTER TABLE `developer`

ADD PRIMARY KEY (`id`),

ADD UNIQUE KEY `dev_index` (`dev_index`);

-- Индексы таблицы `products`

ALTER TABLE `products`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT для сохранённых таблиц

-- AUTO_INCREMENT для таблицы `developer`

ALTER TABLE `developer`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;

-- AUTO_INCREMENT для таблицы `products`

ALTER TABLE `products`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

4. Описание структуры клиентской части.

4.1 Описание интерфейса «Клиент».

Страница клиента предоставляет доступ к ссылкам на контент, который копируется в буфер обмена по нажатию кнопки «copy link» (Рисунок 4.1.1). Аналогично для видеосъёмки.

Рисунок 4.1 – копирование ссылки услуги фотосъёмки

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

Пример iframe-конструкции: