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

Разработка сайта компании «Авто-тема»

Содержание:

Введение

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

Любой бизнес для взаимодействия с широкой аудиторией требует рекламы. Видов рекламы существуют достаточно много. С появлением технологий появился более эффективный инструмент. Данным инструментом является сайт в сети Интернет. По результатам исследования ACNielsen, проведенного в 2019 году, через Интернет делал покупки каждый десятый житель планеты (627 млн. человек).

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

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

Заданием курсовой работы является разработка сайта автосервиса «Авто-тема».

Сайт должен обеспечивать реализацию следующих функций:

· Информативность. Сайт должен обеспечивать актуальной информацией о работе компании.

· Возможность продвигать свои услуги и интересы.

· Формирование стиля и образа компании. Стилевое оформление сайта должно соответствовать корпоративному стилю компании.

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

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

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

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

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

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

1.2.1 Visual Studio Code

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

· Php

· Html

· JavaScript

· CSS

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

Visual Studio Code — Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений. Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, IntelliSense и средства для рефакторинга. Имеет широкие возможности для кастомизации: пользовательские темы, сочетания клавиш и файлы конфигурации. Распространяется бесплатно, разрабатывается как программное обеспечение с открытым исходным кодом.

1.2.2 OpenServer

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

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

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

Выбор именно этой серверной платформы, обосновывается тем, что Open Server позволят создать локальный сервер, для разработки сайта. Так же, не мало важным преимуществом будет то, что в нем присутствует phpMyAdmin, где можно развернуть sql базы данных.

1.2.3 HTML5

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

В интернете долгое время использовались стандарты HTML 4.01, XHTML 1.0 и XHTML 1.1. Веб-страницы на практике оказывались свёрстаны с использованием смеси особенностей, представленных различными спецификациями, включая спецификации программных продуктов, например, веб-браузеров, а также сложившихся общеупотребительных приёмов. HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений.

1.2.4. PHP

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

Основные функции языка программирования PHP заключается в разработке:

· Статичных сайтов;

· Динамических сайтов;

· Веб-приложений.

Главная задача PHP — это «оживление» HTML страниц. Язык носит изменения в веб-страницу на сервере перед тем, как она будет отправлена браузеру. PHP умеет исполнять код — так называемые сценарии. В ходе исполнения PHP может изменить или динамически создать любой HTML-код, который и является результатом исполнения сценария.

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

1.2.5 CSS

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

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

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

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

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

1.2.6. JavaScript

JavaScript — язык сценариев, или скриптов. Скрипт представляет собой программный код — набор инструкций, который не требует предварительной обработки (например, компиляции) перед запуском. Язык создан в начале 90-х фирмой Netscape, браузер которой Netscape Navigator в те времена был наиболее популярным средством для просмотра веб-сайтов.

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

Стандартом языка JavaScript является ECMAScript. По состоянию на 2012, все современные браузеры полностью поддерживают ECMAScript 5.1. Старые версии браузеров поддерживают по крайней мере - ECMAScript 3. 17 июня 2015 года состоялся выпуск шестой версии ECMAScript. Эта версия официально называется ECMAScript 2015, которую чаще всего называют ECMAScript 2015 или просто ES2015. С недавнего времени стандарты ECMAScript выпускаются ежегодно. Эта документация относится к последней версии черновика, которой является ECMAScript 2018.

Основная задача Javascript создавать последовательность действий, которые будут приводить к определенному результату.

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

1.2.7 MySQL

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

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

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

2.1 Модули сайта

2.1.1 Модули главной страницы

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

Каждая страница ресурса представлена отдельным php модулем. Модуль главной страницы: index.php. На этой странице(Рис.1), находится список услуг компании. Все информационные поля, заполнены демонстративным текстом и служат в качестве демонстрации вида блоков услуг.

Рисунок 1. Главная страница.

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

В шапке находится навигационное меню. Навигационное меню отражено на рисунке 2.

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

Рисунок 2. Схема навигации сайта.

Хранение списка услуг осуществляется непосредственно в исходном коде модуля index.php т.к. не существует необходимости создавать отдельную базу данных, тем самым усложняя структуру сайта (Рис.3).

Рисунок 3. Модули сайта.

В модуле css/style.css находится значение ширины и отступа блока контейнера. Сайт использует подключаемую библиотеку стилей, бесплатно предоставляемую Интернет-ресурсом https://getbootstrap.com/. Данная библиотека позволяет быстро создавать и настраивать адаптивные сайты, имеет открытый исходный код, адаптивную сеточную систему, обширные готовые компоненты и мощные плагины JavaScript. Подключение стилей происходит в заголовке кода каждой неисполняемой страницы сайта.

В блоках /blocks/header.php и /blocks/footer.php находятся блоки шапки и подвала сайта. Шапка и подвал были вынесены в отдельные блоки для того, чтобы не приходилось прописывать их каждый раз в при создании новой страницы сайта, достаточно лишь сослаться на них при написании страницы.

В блоке /blocks/header.php также присутствует фрагмент кода с php, отвечающий за изменение наименования ссылки “Войти”, на логин, который хранится в COOKIE, после авторизации на сайте.

Блок /blocks/footer.php отвечает за нижнюю страницу сайта, в которой распложены:

· Дублирование навигации сайта

· Номера телефонов компании

· Электронная почта компании, при нажатии происходит переход на about.php

· Адрес компании

2.1.2 Модуль страницы “о нас”.

Наиболее простой модуль, предназначен для перехода на страницу с информацией о компании (рис.4). Модуль находится в onas.php, переход на данную страницу осуществляется посредством клика вкладки “О нас” в шапке сайта или же по клику на ссылку «О компании» в подвале сайта. Для возвращения на главную страницу, нужно нажать на вкладку «Главная» в шапке сайта или же «Главная» в подвале сайта соответственно.

Рисунок 4. Страница о нас.

2.1.3 Модули страницы “Написать нам”

Данная страница (Рис. 5) обрабатывается модулем check.php. Предполагается использование пользователями для обратной связи с компанией посредством электронной почты. Сообщения из полей ввода, должны отправляется на почту, указанную в модуле check.php. Но так как сервер локальный и без домена, письма не отправляются, а анкеты сохраняются в текстовом виде, в папку OpenServer\userdata\temp.

Так же модуль check.php проводит проверку полей, на количество символов. Сообщение должно состоять более чем из 10 символов, Email должен быть разделен знаками “@” и “.”.

При нарушении условий, будет информационная сообщение об ошибке (Рис. 6), при успехе, будет сообщение о успешной отправке анкеты.

Рисунок 5. Страница «Написать нам»

Рисунок 6. Сообщение о неуспехе.

2.1.4 Модули страницы “Войти”

На странице “Войти”, присутствуют две формы, одна предназначена для регистрации, а вторая для авторизации пользователей (рис 7). Данная страница находится в модуле auth.php. Форма регистрации обрабатывается в модуле /validation-form/check1.php, форма авторизации обрабатывается в модуле /validation-form/auth1.php Данная система регистрации и авторизации работает с msql базой данных (users) в которой хранит порядковый номер пользователя – id, логин пользователя – login, пароль пользователя – pass и имя пользователя – name, которые после авторизации будет отображаться в шапке сайта вместо кнопки «Войти», реализовано это следующим PHP кодом:

<?php

if($_COOKIE['user'] == ''):

?>

<a class="btn btn-outline-primary" href="/auth.php">Войти</a>

<?php else: ?>

<a class="btn btn-outline-primary" href="/auth.php"><?=$_COOKIE['user']?></a>

<?php endif;?>

Рисунок 7. Страница “Войти”.

При регистрации, происходит проверка, логин не должен быть меньше 5 символов и не более 90, имя не менее 3 и не более 50 символов, пароль не менее 2 и не более 6 символов. В противном случае, будет перенаправление на страницу с ошибкой (рис.8). За проверку полей и внесение данных в СУБД, отвечает модуль /validation-form/check1.php. Не маловажно для безопасности хэшировать пароли пользователей, непосредственно здесь это происходит при помощи PHP скрипта:

$pass = md5($pass."qwerty12345");

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

Рисунок 8. Неудачная регистрация.

При имеющейся учетной записи, нужно ввести данные в форму авторизации. При неправильно введенных данных, произойдет переадресация на ошибку (Рис.9), при успешной авторизации, модуль /validation-form/auth1.php создаст COOKIE файл со временем жизни 1 час, в течении которого пользователю не нужно будет вновь авторизоваться на сайте, даже если он закроет браузер т.е. при помощи сессий.

Сессии в PHP представляют из себя механизм сохранения на стороне сервера информации о компьютере клиента.

Сессии – это группы переменных, которые хранятся на сервере, но относятся к одному уникальному посетителю. Повторю, это ключевой момент: сессии хранятся на сервере.

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

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

Реализовано это при помощи данной строки кода:

setcookie('user', $user['name'], time() + 3600, "/");

После чего пользователя перенаправит на главную страницу сайта и ему станет доступен полный список услуг компании (Рис. 10) Также, в верхнем правом углу мы видим имя учетной записи и при переходе на нее мы попадаем на страницу, где можно выйти из учетной записи (Рис. 11). Выход с сайта реализован крайне просто – мы отнимает час жизни COOKIE файла, который был создан при авторизации, реализовано это следующим кодом:

<?php

setcookie('user', $user['name'], time() - 3600, "/");

header('Location: /');

?>

Рисунок 9. Неудачная авторизация.

Рисунок 10. Успешная авторизация.

Рисунок 11. Страница выхода.

2.1.4 Модуль страницы “Контакты”

Данная страница (Рис. 12) обрабатывается модулем kontakti.php. И предназначена для предоставления пользователям исчерпывающей информации о местоположение компании.

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

Рисунок 12. Страница «Контакты».

2.2 phpMyAdmin

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

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

В проекте используется одна база данных «register-bd», с одной таблицей «users». База данных имеет тип MyISAM. На таблицу допускается только одна одновременная delete или update операция, и остальные вынуждены ждать завершения текущей операции, что, при больших объемах данных, приводит к серьезным проблемам. Так как объемы данных не столь велики. Данный тип удовлетворяет условиям для данного проекта.

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

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

Таблица 1.Структура БД register-bd

Количество таблиц

Строки

Тип

Сравнение

Размер

Фрагментирован

1

4

MyISAM

utf8_general_c

2.2 КиБ

0 Байт

Таблица «users» в базе данных «register-bd» хранит всего четыре параметра, id, login, pass и name. Тип для id был выбран – int, для остальных строк - varchar, для того что бы выполнялась корректировка, убирались пробелы и было ограничение по символам.

Рисунок 13. Структура таблицы «users».

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

4.1 Описание интерфейса «Обычный пользователь».

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

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

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

4.3 Инструкция пользователя.

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

«Главная» - переход на главную страницу.

«О нас» - переход на страницу с информацией о компании.

«Написать нам» - отправить электронное письмо со своими пожеланиями и предложениями.

«Контакты» - посмотреть местоположение компании на карте, номера телефонов и другие контакты.

«Войти» - осуществить регистрацию или авторизацию на сайте.

Заключение

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

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

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

Был разработан сайт для автосервиса. В ходе проектирования были применены современные средства, использован современный дизайн, а также, его работа была протестирована через Open Server.

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

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

Литература

1. Мейер, Б. Инструменты, алгоритмы и структуры данных / Б. Мейер. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016.

2. Савельева, Н.В. Язык программирования PHP / Н.В. Савельева. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016

3. Прохоренок, Н. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н. Прохоренок. - СПб.: БХВ - Петербург., 2010. - 900 с.

4. Мазуркевич, А. PHP: настольная книга программиста / А. Мазуркевич. - М.: Новое знание, 2003. - 480 с.

5. Богданов, М.Р. Перспективные языки веб-разработки / М.Р. Богданов. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016 6. http://biblioclub.ru/index.php?page=book&id=428953

7. Никсон, Р. Создаем динамические web-сайты с помощью PHP, MySQL и JavaScript / Р. Никсон. - П.: Питер, 2011. - 496 с.

8. PHP, SQL [Electronic resource] / блог. - Россия, 2010.: http://phpsql.ru/.

9. Парк, Д. PHP и MySQL. Библия программиста / Д. Парк, С. Суэринг. - Диалектика, 2010. - 912 с.

10. Гудман Д. JavaScript.Библия пользователя, 4-е изд.: Пер. з англ. М.: Изд.дом "Вильямс", 2017. - 960 с.

11. Коггзолл Джон. РНР 5. Полное руководство.: Пер. з англ. М.: Издательский дом "Вильямс", 2016. - 752 с.

12. Грызлов В. Java Script. Изд. 3-е.М.: ДМК Пресс, 2015. 416 с.

13. Хестер Н. Создание Web-страниц в Dreamweaver. М.: НТ Пресс, 2015. – 104 с.

14. Гудман Д. JavaScript и DHTML. Сборник рецептов. Для профессионалов, Питер, 2016. - 122 с.

15. Лещев.Д.Создание интерактивного web-сайта: учебный курс. СПб.:Питер, 2017. - 544 с.

Приложение

/blocks/footer.php

<footer class=" container pt-4 my-md-5 pt-md-5 border-top">

    <div class="row">

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

        <img class="mb-2" src="/docs/4.3/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">

        <small class="d-block mb-3 text-muted">© 2020 Волков В.С. Группа СБИ-313</small>

      </div>

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

        <h5>Навигация по сайту</h5>

        <ul class="list-unstyled text-small">

          <li><a class="text-muted" href="/">Главная</a></li>

          <li><a class="text-muted" href="/onas.php">О компании</a></li>

          <li><a class="text-muted" href="/kontakti.php">Контакты</a></li>

        </ul>

      </div>

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

        <h5>Связаться с нами</h5>

        <ul class="list-unstyled text-small">

          <li>+7 (925) 616-39-39</li>

          <li>+7(495) 414-93-69</li>

          <li>+7(966) 099-09-60</li>

          <li><a class="text-muted" href="/about.php">9660990960@bk.ru</a></li>

        </ul>

      </div>

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

        <h5>Адрес</h5>

        <ul class="list-unstyled text-small">

          <li>Россия, Московская область</li>

          <li> г.Химки, мкр. Подрезково</li>

          <li>ул. Центральная, 2/5</li>

          <li>График работы:ПН-ВС 9:00 - 20:00</li>

        </ul>

      </div>

    </div>

  </footer>

/blocks/header.php

<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">

        <h5 class="my-0 mr-md-auto font-weight-normal">АВТОСЕРВИС "АВТО ТЕМА"</h5>

        <nav class="my-2 my-md-0 mr-md-3">

            <a class="p-2 text-dark" href="/">Главная</a>

            <a class="p-2 text-dark" href="/about.php">Написать нам</a>

            <a class="p-2 text-dark" href="/onas.php">О нас</a>

            <a class="p-2 text-dark" href="/kontakti.php">Контакты</a>

        </nav>

        

        <?php

            if($_COOKIE['user'] == ''):

            ?>

        <a class="btn btn-outline-primary" href="/auth.php">Войти</a>

        <?php else: ?>

            <a class="btn btn-outline-primary" href="/auth.php"><?=$_COOKIE['user']?></a>

            <?php endif;?>

        </div>

/css/style.css

.card {

    width: 32%;

    margin-left: 1%;

}

/validation-form/auth1.php

<?php

    $login = filter_var(trim($_POST['login']), FILTER_SANITIZE_STRING);

    $pass = filter_var(trim($_POST['pass']), FILTER_SANITIZE_STRING);

    $pass = md5($pass."qwerty12345");

    $mysql = new mysqli('localhost', 'root', 'root', 'register-bd');

    

   $result = $mysql->query("SELECT * FROM `users` WHERE `login` = '$login' AND `pass` = '$pass' ");

   

   $user = $result->fetch_assoc();

   if(count($user) == 0) {

    echo "Такой пользователь не найден";

    exit();

    }

    setcookie('user', $user['name'], time() + 3600, "/");

   

   

   $mysql->close();

    header('Location: /');






 

?>

/validation-form/check1.php

<?php

    $login = filter_var(trim($_POST['login']), FILTER_SANITIZE_STRING);

    $name = filter_var(trim($_POST['name']), FILTER_SANITIZE_STRING);

    $pass = filter_var(trim($_POST['pass']), FILTER_SANITIZE_STRING);

    if(mb_strlen($login) < 5 || mb_strlen($login) > 90) {

        echo "Недопустимая длина логина";

        exit();

    }

    if(mb_strlen($name) < 3 || mb_strlen($name) > 50) {

        echo "Недопустимая длина имени";

        exit();

    }

    if(mb_strlen($pass) < 2 || mb_strlen($pass) > 6) {

        echo "Недопустимая длина пароля (от 2 до 6 символов)";

        exit();

    }

    $pass = md5($pass."qwerty12345");

    $mysql = new mysqli('localhost', 'root', 'root', 'register-bd');

    $mysql->query("INSERT INTO `users` (`login`, `pass`, `name`) VALUES('$login', '$pass', '$name')");

   

    $mysql->close();

    header('Location: /');

?>

/validation-form/exit.php

<?php

    setcookie('user', $user['name'], time() - 3600, "/");

    header('Location: /');

?>

/about.php

<!DOCTYPE html>

<html lang="ru">

    <head>

        <meta charset="UTF-8">

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

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

            <title> Контактная форма </title>

    </head>

    <body>

        <?php require "blocks/header.php" ?>

        <div class="container mt-5">

        <h3>Контактная форма</h3>

        <form action="check.php" method="post">

            <input type="email" name="email" placeholder="Введите Email" class="form-control"> <br>

            <textarea name="message" class="form-control" placeholder="Введите ваше сообщение"></textarea> <br>

            <button type="submit" name="send" class="btn btn-success">Отправить</button>

        </form>

        </div>

        

        <?php require "blocks/footer.php" ?>

    </body>

</html>

/auth.php

<!DOCTYPE html>

<html lang="ru">

    <head>

        <meta charset="UTF-8">

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

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

            <title> Авторизация </title>

    </head>

    <body>

        <?php require "blocks/header.php" ?>

        <div class="container mt-5">

        <?php

            if($_COOKIE['user'] == ''):

            ?>

            <div class="row">

            <div class="col">

            <h1>Форма регистрации</h1>

            <form action="validation-form/check1.php" method="post">

            <input type="text" class="form-control" name="login" id="login" placeholder="Введите логин"><br>

            <input type="text" class="form-control" name="name" id="name" placeholder="Введите имя"><br>

            <input type="password" class="form-control" name="pass" id="pass" placeholder="Введите пароль"><br>

            <button class="btn btn-success" type="submit">Зарегистрироваться</button>

            </form> 

            </div>

            <div class="col">

            <h1>Форма Авторизации</h1>

            <form action="validation-form/auth1.php" method="post">

            <input type="text" class="form-control" name="login" id="login" placeholder="Введите логин"><br>

            <input type="password" class="form-control" name="pass" id="pass" placeholder="Введите пароль"><br>

            <button class="btn btn-success" type="submit">Авторизоваться</button>

            </form>

            </div>

            

            <?php else: ?>

                <p>Вы авторизованы <?=$_COOKIE['user']?>. Чтобы выйти нажмите <a href="/validation-form/exit.php">здесь</a>.</p>

            <?php endif;?>

            

            

            

            </div>

        </div>

        

<?php require "blocks/footer.php" ?>

</body>

</html>

/check.php

<?php

   // print_r($_POST);

   $email = $_POST ['email'];

   $message = $_POST ['message'];

   $error = '';

   if(trim($email) == '')

    $error = 'Введите Ваш email';

    else if(trim($message) == '')

    $error = 'Введите сообщение';

    else if(strlen($message) <10)

    $error = 'Сообщение должно быть длинее 10 символов';

    if($error != '') {

        echo $error;

        exit;

    }

$subject = "=?utf-8?B?".base64_encode("Тестовое сообщение")."?=";

$headers = "From: $email\r\nReply-to: $email\r\nContent-type: text/html;charset=utf-8\r\n";

mail('wolf98.ucoz@yandex.ru', $subject, $message, $headers );

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

?>

/index.php

<!DOCTYPE html>

<html lang="ru">

    <head>

        <meta charset="UTF-8">

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

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

            <title> Автомастерская </title>

    </head>

    <body>

    <?php require "blocks/header.php" ?>

        <div class="container mt-5">

        <h3 class="mb-5">Наши услуги</h3>

        <div class="d-flex flex-wrap">

            

        <?php

            if($_COOKIE['user'] == ''):

            ?>

            <div class="card mb-4 shadow-sm">

        <div class="card-header">

            <h4 class="my-0 font-weight-normal">ШИНОМОНТАЖ</h4>

        </div>

        <div class="card-body">

            <img src="img/1.jpg" class="img-thumbnail">

            <ul class="list-unstyled mt-3 mb-4">

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            </ul>

        </div>

        </div>

        <div class="card mb-4 shadow-sm">

        <div class="card-header">

            <h4 class="my-0 font-weight-normal">КУЗОВНЫЕ РАБОТЫ</h4>

        </div>

        <div class="card-body">

            <img src="img/2.jpg" class="img-thumbnail">

            <ul class="list-unstyled mt-3 mb-4">

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            </ul>

        </div>

        </div>

        <div class="card mb-4 shadow-sm">

        <div class="card-header">

            <h4 class="my-0 font-weight-normal">СЛЕСАРНЫЕ РАБОТЫ</h4>

        </div>

        <div class="card-body">

            <img src="img/3.jpg" class="img-thumbnail">

            <ul class="list-unstyled mt-3 mb-4">

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            </ul>

        

        <?php else: ?>

            <div class="card mb-4 shadow-sm">

        <div class="card-header">

            <h4 class="my-0 font-weight-normal">ШИНОМОНТАЖ</h4>

        </div>

        <div class="card-body">

            <img src="img/1.jpg" class="img-thumbnail">

            <ul class="list-unstyled mt-3 mb-4">

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            </ul>

        </div>

        </div>

        <div class="card mb-4 shadow-sm">

        <div class="card-header">

            <h4 class="my-0 font-weight-normal">КУЗОВНЫЕ РАБОТЫ</h4>

        </div>

        <div class="card-body">

            <img src="img/2.jpg" class="img-thumbnail">

            <ul class="list-unstyled mt-3 mb-4">

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            </ul>

        </div>

        </div>

        <div class="card mb-4 shadow-sm">

        <div class="card-header">

            <h4 class="my-0 font-weight-normal">СЛЕСАРНЫЕ РАБОТЫ</h4>

        </div>

        <div class="card-body">

            <img src="img/3.jpg" class="img-thumbnail">

            <ul class="list-unstyled mt-3 mb-4">

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            </ul>

        </div>

        </div>

        <div class="card mb-4 shadow-sm">

        <div class="card-header">

            <h4 class="my-0 font-weight-normal">РЕМОНТ ДВС И АКПП</h4>

        </div>

        <div class="card-body">

            <img src="img/4.jpg" class="img-thumbnail">

            <ul class="list-unstyled mt-3 mb-4">

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            </ul>

        </div>

        </div>

        <div class="card mb-4 shadow-sm">

        <div class="card-header">

            <h4 class="my-0 font-weight-normal">КОМПЬЮТЕРНАЯ ДИАГНОСТИКА</h4>

        </div>

        <div class="card-body">

            <img src="img/5.jpg" class="img-thumbnail">

            <ul class="list-unstyled mt-3 mb-4">

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            </ul>

        </div>

        </div>

        <div class="card mb-4 shadow-sm">

        <div class="card-header">

            <h4 class="my-0 font-weight-normal">СХОД-РАЗВАЛ</h4>

        </div>

        <div class="card-body">

            <img src="img/6.jpg" class="img-thumbnail">

            <ul class="list-unstyled mt-3 mb-4">

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            <li>ТекстТекстТекстТекстТекстТекст</li>

            </ul>

        </div>

        </div>

            <?php endif;?>



























 

        </div>

        </div>

        

        <?php require "blocks/footer.php" ?>

    </body>

</html>

/kontakti.php

<!DOCTYPE html>

<html lang="ru">

    <head>

        <meta charset="UTF-8">

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

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

            <title> Автомастерская </title>

    </head>

    <body>

    <?php require "blocks/header.php" ?>

        <div class="container mt-5">

<div class="" id="contact">

        <div class="text-center" style="padding-top:25px;padding-bottom:25px;">

          <span style="font-size:28px;color:black" class="font-weight-bold text-black mb-5">Где мы находимся?</span><br>

            <span style="font-size:18px;color:black"> Россия, Московская область, г.Химки, мкр. Подрезково, ул. Центральная, 2/5</span>

  </div>

<iframe src="https://yandex.ru/map-widget/v1/?z=12&amp;ol=biz&amp;oid=133417347293" width="100%" height="400" frameborder="0"></iframe>

      

      </div>

      <?php require "blocks/footer.php" ?>

</body>

</html>

/onas.php

<!DOCTYPE html>

<html lang="ru">

    <head>

        <meta charset="UTF-8">

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

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

            <title> Контактная форма </title>

    </head>

    <body>

        <?php require "blocks/header.php" ?>

        <div class="container mt-5">

<div class="row">

          <div class="col-lg-6 mb-5 mb-lg-0">

            <div class="img-border">

              <img src="img/7.jpg" alt="Image" class="img-fluid">

            </div>

          </div>

          <div class="col-lg-5 ml-auto">

            <h2 class="font-weight-bold text-black mb-5">О КОМПАНИИ</h2>

        <span style="font-size:22px;color:black" class="font-weight text-black mb-5">

            <b>АВТОСЕРВИС "АВТО ТЕМА" </b>- это автотехцентр с полным комплексом услуг для автомобилей всех моделей в Химках. Большой опыт работы позволяет постоянно совершенствовать процесс ремонта, заботиться о профессиональном росте персонала и обновлении оборудования.

</span>

              <br> <br> <br>

              <span style="color:black;font-size:19px"><b> Наш адрес: </b>  Россия, Московская область, г.Химки, мкр. Подрезково, ул. Центральная, 2/5</span> 

          </div>

        </div>

        

        

        <?php require "blocks/footer.php" ?>

    </body>

</html>