Автор Анна Евкова
Преподаватель который помогает студентам и школьникам в учёбе.

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

Содержание:

Введение

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

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

1. Техническое задание и выбор средств реализации

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

В качестве предметной области для создания web-приложения выступает IT-компания Virtual Land ООО «Технософт», которая работает с застройщиками и клиентами, и чья цель на сегодняшний день «стать лучшими производителями визуального контента (продуктов) для Застройщиков,
Производства, Туризма, оказывая высокий уровень сервиса». Данная работа является ступенью на пути к достижению высокого уровня сервиса по отношению к клиенту.

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

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

Отвечая на эти простые, но насущные нужды сформулированы главные требования к наполнению контента странички клиента.

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

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

- создавать новую, сгенерированную по шаблону страничку клиента;

- удалять страничку клиента из БД и с сервера;

- опубликовать страничку клиента;

- создавать новую запись, состоящую из ссылки на файлообменник, месяц и год съёмки;

- пополнять страничку клиента ссылками на новый контент;

- удалять неактуальные или поломанные ссылки на контент.

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

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

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

Рисунок 1.1 – Схема вариантов использования

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

1.2 Средства реализации

1.2.1 Open Server

Open Server Panel — это портативная серверная платформа и программная среда, созданная специально для веб-разработчиков с учётом их рекомендаций и пожеланий.

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

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

Данная платформа поддерживает необходимые для данного проекта язык программирования серверной части PHP версии 7.4.05 и БД MySQL версии 5.7.24.

1.2.2 Visual Studio Code

Visual Studio Code (VS Code) - это редактор исходного кода. Он поддерживает ряд языков программирования, подсветку синтаксиса, IntelliSense, рефакторинг, отладку, навигацию по коду, поддержку Git и другие возможности. Многие возможности Visual Studio Code недоступны через графический интерфейс, зачастую они используются через палитру команд или JSON-файлы (например, пользовательские настройки). Палитра команд представляет собой подобие командной строки, которая вызывается сочетанием клавиш.

VS Code, несмотря на свою лёгкость, является полноценной IDE (Integrated Development Environment, «интегрированная среда разработки») – мощный редактор с множеством функций, которые работают в рамках целого проекта.

С 2018 года появилось расширение Python для Visual Studio Code с открытым исходным кодом. Оно предоставляет разработчикам широкие возможности для редактирования, отладки и тестирования кода.

На март 2019 года посредством встроенного в продукт пользовательского интерфейса можно загрузить и установить несколько тысяч расширений только в категории «programming languages» (языки программирования).

VS Code собирает данные об использовании (телеметрию) и отправляет их в Microsoft, но эта функция является отключаемой (опция File > Preferences > Settings, «telemetry.enableTelemetry»). Хотя предоставление данных не является обязательным и вы можете отказаться от передачи персональных данных, некоторые возможности, такие как персонализация, использующие такие данные, будут вам недоступны для отключения. Данные могут передаваться контролируемым филиалам Microsoft, дочерним компаниям и правоохранительным органам в соответствии с заявлением о конфиденциальности.

1.2.3 HTML5

HTML5 (англ. HyperText Markup Language, version 5) — HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. Хотя стандарт был завершён (рекомендованная версия к использованию) только в 2014 году (предыдущая, четвёртая, версия опубликована в 1999 году), уже с 2013 года браузерами оперативно осуществлялась поддержка, а разработчиками — использование рабочего стандарта (англ. HTML Living Standard). Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.

В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG и математических формул. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети без необходимости использования сторонних API и плагинов. Другие новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удалён. Некоторые элементы, например <a>, <menu> и <cite>, были изменены, переопределены или стандартизированы. API и DOM стали основными частями спецификации HTML5. HTML5 также определяет некоторые особенности обработки ошибок вёрстки, поэтому синтаксические ошибки должны рассматриваться одинаково всеми совместимыми браузерами.

1.2.4 CSS

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

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

CSS упрощает создание веб-страниц и обслуживание сайтов, определяя стиль представления документов от содержимого документов.

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

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

1.2.5 JavaScript

JavaScript (сокращённо - JS) является языком программирования, который позволяет веб-страницам отвечать на действия пользователя дальше базового уровня. Он был создан в начале 90-х фирмой Netscape, браузер которой Netscape Navigator в те времена был наиболее популярным средством для просмотра веб-сайтов. Название javascript наводит на мысли о связи с языком java, который также может использоваться в веб-программировании, и, действительно, javascript разрабатывался во многом с опорой на язык Java, но следует всё же помнить, что это совершенно разные языки. Скрипты, написанные на javascript, выполняются на стороне клиента (т. е. на компьютере пользователя), и не просто на стороне клиента, а в самом браузере, поэтому не требуется никаких дополнительных программ, никаких плагинов и т. п., скрипт можно просто вставить в html-код страницы, и он будет выполняться в любом браузере. Javascript - простой и удобный язык, позволяющий легко управлять содержимым веб-страницы, отслеживая самые различные действия пользователя, и реагируя на это. Благодаря этому, javascript практически не имеет конкурентов в своей области применения и является первым языком, изучение которого нужно начинать веб-разработчику.

1.2.6 MySQL

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

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

1.2.7 PHP

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

PHP отличается от JavaScript тем, что PHP-скрипты выполняются на стороне сервера и генерируют HTML, который посылается клиенту.

В настоящее время 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-конструкции:

<iframe src="https://tour.virtualland.ru/gus/" width="100%" height="100%" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder="no"></iframe>

4.2 Описание интерфейса «Администратор».

В панели администратора (Рисунок 4.2.1) можно внести в БД настоящее имя застройщика и название для генерируемого модуля заказчика, например developer.php. Затем можно будет через уже выпадающий список выбрать застройщика, выбрать необходимую услуга и добавить ссылку на контент.

Рисунок 4.2.1

ЗАКЛЮЧЕНИЕ

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

  • дано общее описание автоматизируемого объекта;
  • создана база данных;
  • спроектировано и реализовано приложение для работы и управления созданной базой данных с применением web-технологий.

В процессе выполнения работы была создана база данных, с применением среды MySQL. Реализация проекта велась с применением языков CSS, HTML, PHP, фреймворка Bootstrap, а также с использованием языка SQL запросов для обращения и изменения информации в связанной базе данных системы.

Результатом работы явилось достижение целей:

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

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

Литература

  1. Алан Купер, Дэйв Кронин, Кристофер Носсел, Роберт Рейман. Алан Купер об интерфейсе. Основы проектирования взаимодействия. Символ, Санкт-Петербург, 2015
  2. Мазуркевич, А. PHP: настольная книга программиста / А. Мазуркевич. - М.: Новое знание, 2003. - 480 с.
  3. Мейер, Б. Инструменты, алгоритмы и структуры данных / Б. Мейер. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016.
  4. Прохоренок, Н. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н. Прохоренок. - СПб.: БХВ - Петербург., 2010. - 900 с.
  5. Савельева, Н.В. Язык программирования PHP / Н.В. Савельева. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016
  6. Парк, Д. PHP и MySQL. Библия программиста / Д. Парк, С. Суэринг. - Диалектика, 2010. - 912 с.
  7. Томсон, Л. Разработка Web-приложений на РНР и MySQL/ Л. Томсон. - М.: ДиаСофтЮП, 2003. - 672 с.
  8. Харрис, Э. PHP/MySQL для начинающих / Э. Харрис. - М.: Кудиц - образ, 2005.
  9. http://biblioclub.ru/index.php?page=book&id=428953
  10. PHP, SQL [Electronic resource] / блог. - Россия, 2010.: http://phpsql.ru/.

Приложение

Приложение 1

Index.php

<?php

session_start();

$login = "admin";

$password = "123123123";

if ($_SESSION['login'] === $login && $_SESSION['password'] === $password){

    header('Location: content.php');

}

?>

<!doctype html>

<html lang="ru">

<head>

    <!-- Кодировка веб-страницы -->

    <meta charset="utf-8">

    <!-- Настройка viewport -->

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Подключаем Bootstrap CSS -->

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

</head>

<style>

    main {

        display: flex;

        height: 80vh;

        justify-content: center;

        align-items: center;

    }

</style>

<body>

    <main style="margin-top:20px;">

        <form action="includes/login.php" method="POST" class="row g-3 col-md-2" style="width: 400px;">

            <div class="col-md-12">

                <h3>Admin access</h3>

            </div>

            <div class="col-md-12">

                <label for="var-title" class="form-label">Login</label> <br>

                <input type="text" name="login" class="form_control" id="var-title">

            </div>

            <div class="col-md-12">

                <label for="var-title" class="form-label">Password</label> <br>

                <input type="password" name="password" class="form_control" id="var-title"> <br>

            </div>

            <div class="col-12">

                <button type="submit" class="btn btn-primary">Enter</button>

            </div>

        </form>

    </main>

    <!-- Подключаем jQuery -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Подключаем Bootstrap JS -->

    <script src="../js/bootstrap.bundle.min.js"></script>

</body>

</html>

Приложение 2

Login.php

<?php

$login = "admin";

$password = "123123123";

if ($login == $_POST['login'] && $password == $_POST['password']) {

    //auth

session_start();

$_SESSION['login'] = $_POST['login'];

$_SESSION['password'] = $_POST['password'];

    header('Location: ../index.php');

} else {

    echo "Incorrect";

}

Приложение 3

Logout.php

<?php

session_start();

unset($_SESSION['login']);

unset($_SESSION['password']);

header('Location: /admin');

?>

Приложение 4

Content.php

<?php

session_start();

$login = "admin";

$password = "123123123";

if ($_SESSION['login'] !== $login && $_SESSION['password'] !== $password) {

    header('Location: /admin');

}

?>

<?php

require_once 'includes/connect.php';

?>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>dynamic</title>

</head>

<body>

    <a href="includes/logout.php" style="color:black; text-decoration: none;">Exit</a>

    <table>

        <tr>

            <th>Застройщик</th>

            <th>Дата<br>создания</th>

        </tr>

        <?php

        // вставить застройщика

        $developers = mysqli_query($connect, "SELECT * FROM `developer` ");

        $developers = mysqli_fetch_all($developers);

        foreach ($developers as $dev) {

        ?>

            <tr>

                <td> <?= $dev[1] ?> </td>

                <td> <?= $dev[2] ?> </td>

                <td> <?= '<a href="developers/' . $dev[3] . '.php"> <button>' . $dev[3] . '</button></a>' ?></td>

                <td>

                    </form>

                </td>

            </tr>

        <?php

        }

        ?>

    </table>

    <form action="includes/create.php" method="POST">

        <h3>Добавить застройщика</h3>

        <p>Полное имя застройщика</p>

        <input type="text" name="name_d" required> <br>

        <p>Наименования каталога</p>

        <input name="dev_index" id="" cols="30" rows="10" required>

        <br>

        <button type="submit">Добавить</button>

    </form>

</body>

</html>

Приложение 5

shablon.php

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="styles/style.css">

    <title>Динамика строительства</title>

</head>

<body>

    <div class="logo">

        <a href="https://virtualland.ru/" target="_blank"><img src="img/logo.png" alt="not found" class=logo-pic></a>

    </div>

    <!-- <div class="tech-quest">

        <h1>ТЗ</h1>

        <ul>

            <li>

                <a href="https://docs.google.com/spreadsheets/d/1zJSHVaF-4y59zEXGEZYf4RyPLGiTQrY5vGIt3HyQeqw/edit?usp=sharing" target="_blank">Матрица съёмок</a>

            </li>

            <li><a href="https://docs.google.com/document/d/157GA10VJBH0weEey2m3pwvj_Beb3k0r_xIjM6JUkkZE/edit?usp=sharing" target="_blank">Расписание фотографа</a></li>

        </ul>

    </div> -->

    <h1>Динамика строительства</h1>

    <div class="photo">

        <h2>Фотографии динамики строительства</h2>

        <ul>

            <li><a href="" target="_blank">Месяц</a> <br></li>

        </ul>

    </div>

    <div class="video">

        <h2>Видео динамики строительства</h2>

        <ul>

            <li><a href="" target="_blank">Месяц</a> <br></li>

        </ul>

    </div>

    <div class="tour">

        <h2>Аэротуры</h2>

        <ul>

            <li><a href="" target="_blank">ЖК</a> <br></li>

        </ul>

    </div>

    <script>

        //скрипт для кнопки копирования в буфер обмена

        

        //цепляем событие на onclick кнопки

        var button = document.getElementById('userButton');

        button.addEventListener('click', function() {

            //нашли наш контейнер

            var ta = document.getElementById('cont');

            //производим его выделение

            var range = document.createRange();

            range.selectNode(ta);

            window.getSelection().addRange(range);

            //пытаемся скопировать текст в буфер обмена

            try {

                document.execCommand('copy');

            } catch (err) {

                console.log('Can`t copy, boss');

            }

            //очистим выделение текста, чтобы пользователь "не парился"

            window.getSelection().removeAllRanges();

        });

    </script>

</body>

</html>

Приложение 6

Create.php

<?php

require_once 'connect.php'

?>

<?php

$name = $_POST['name_d'];

$dev_index = $_POST['dev_index'];

mysqli_query($connect, "INSERT INTO `developer` (`id`, `name`, `date_time`, `dev_index`) VALUES (NULL, '$name', CURRENT_TIMESTAMP, '$dev_index'); ");

$old_path_file = '../shablon.php';

$new_path_file = '../developers/' . $dev_index . '.php';

copy($old_path_file, $new_path_file);

?>

<form action="../content.php">

    <button type="submit">Вернуться к списку <br> застройщиков</button>

</form>