Отладку производим в панели разработчика окна браузера GoogleChrome.



Рисунок 14 - Написание кода HTML и CSS.

Рисунок 15 - Отладка в панели разработчика.

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

API Яндекс Карт - это программный интерфейс, с помощью которого можно установить Яндекс. Карты и необходимый инструментарий для работы с ними на своем сайте.

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

Рисунок 16 - Конструктор карт.

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

Рисунок 17 - Ссылка на скрипт.

Интерактивная карта вставляется на страницу сайта с помощью элемента <script>. С помощью атрибута src задаются параметры: идентификатор карты, ширина и высота в пикселях.

Также имеется дополнительный параметр, который "заливает" картой весь блок, в котором она расположена. Но с ограничением 1300px.

Рисунок 18 - Блок с интерактивной картой.

Блок с фотогалереей реализован только средствами HTML и CSS. Использован параметр hover, срабатывающий при наведении мышкой.

Рисунок 19 - Описание галереи средствами CSS.

Результат выглядит так:

Рисунок 20 - Блок с фотогалереей.

Форма обратной связи реализована с помощью элементов <input>,<select>,<button>.

Рисунок 21 - Форма обратной связи.

Для реализации спроектированной базы данных воспользуемся OpenServer, а именно, модулем PHPMyAdmin. Это веб-приложение, написанное на PHP и представляющее собой интерфейс для администрирования СУБД.

Рисунок 22 - Реализация базы данных, средствами PHPMyAdmin.

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

3. Тестирование

Тестирование является завершающим этапом разработки сайта. Он же и важнейший из этапов.

Согласно с IEEE Std 829-1983 тестирование - это процесс анализа ПО, направленный на выявление отличий между его реально существующими и требуемыми свойствами (дефект) и на оценку свойств ПО.

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

Рассмотрим тестирование сайта по пунктам:

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

2. Функциональное тестирование. Один из самых долгих проверок ресурса. В данный этап входит:

· проверка работы всех функций сайта

· тестирование пользовательских форм на сайте

· проверка гиперссылок

· проверка на соответствие контента страниц сайта, с требуемым контентом заказчика

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

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

В результате тестирования неработающих ссылок не обнаружено.

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

Средняя скорость загрузки сайта при низкоскоростном мобильном интернете составила около 2-3 секунд.

Сайт корректно отображается в популярных браузерах, таких как GoogleChrome, Opera, Mozilla, YandexBrowser.

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

4. Внедрение web-сайта

После того, как сайт разработан и прошел тестирование на локальном сервере, пришло время портирования его в интернет.

Для начала необходимо выбрать доменное имя для сайта и проверить, свободен ли он.

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

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

Теперь можно приступить к регистрации домена.

Рисунок 22 - Регистрация домена.

Затем необходимо указать dns хостинга.

Рисунок 23 - Регистрация домена.

После оплаты тарифа нужно подождать какое-то время регистрации домена в глобальном dns.

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

Для этого воспользуемся сервисом хостинга c-panel.

Рисунок 24 - Интерфейс c-panel.

Все содержимое папки сайта на локальном сервере добавляем в архив public_html. Через диспетчер файлов c-panel загружаем на сервер и распаковываем.

Теперь необходимо наладить работу базы данных. Для этого необходимо следующее. Выгрузить базу данных с локального сервера через модуль phpmyadmin openserver. Затем в c-panel нужно создать базу данных, а так же пользователя базы данных и пароль.

Рисунок 25 - Создание базы данных в c-panel.

Рисунок 26 - Создание пользователя базы данных в c-panel.

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

Рисунок 27 - Редактор кода c-panel.

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

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

Все формы работают корректно, содержимое также записывается корректно.

5. Защита web-сайта

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

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

Любой сайт может быть целью взлома.

Главная защита лендинга - это его простота. Такой сайт практически неуязвим от ддос атак.

Так как у нас в проекте присутствует база данных, позаботимся о ее защите от sql-инъекций.

sql-инъекция - это атака, когда взломщик использует поле web формы или параметры URL строки с целью получения и манипулирования данными, находящимися в базе данных.

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

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

Заключение

В ходе выполнения выпускной квалификационной работы была реализована целевая страница для организации по продаже недвижимости ИП "Тихомиров".

В процессе исследования были определены особенности Интернет-пространства, обозначены основные функции и задачи сайта.

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

Реализована интерактивная подача информации.

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

Разработанный сайт отвечает всем требованиям заказчика.

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

1. Дронов, В.Г. PHP, MySQL, HTML5 и CSS 3. Разработка современных динамических Web-сайтов, 2016/Дронов, В. Г - Санкт-Петербург: БХВ-Петербург, 2016. - 688с.

2. Алиев В.С. Информационные технологии и системы финансового менеджмента: учебное пособие / В.С. Алиев - М: Форум, 2010. - 320 с.

3. Васильев Г.А., Поляков В.А. Основы рекламы: Учебное пособие. / М.: ИНФРА-М, 2010. - 407 с.

4. ГОСТ Р ИСО МЭК 12207-99 "Процессы жизненного цикла программных средств".

5. Колисниченко, Д.Н. Современный сайт на РНР и JavaScript / Колисниченко, Д.Н. - Санкт-Петербург: Питер, 2009. - 176 с.

6. Дженнифер Нидерст Роббинс, Web-дизайн. Справочник / КУДИЦ-Пресс, 2008. - 816 с.

7. Якоб Нильсен, Хоа Лоранжер. Web-дизайн: удобство использования Web-сайтов / Вильямс, 2009. - 376 с.

8. Эрик А. Мейер. CSS. Каскадные таблицы стилей. Подробное руководство / Символ-Плюс, 2008. - 576 с.

9. Беэр Бибо, Иегуда Кац. jQuery. Подробное руководство по продвинутому JavaScript / Символ-Плюс, 2011. - 624 с.

10. Брюс Лоусон, Реми Шарп. Изучаем HTML5. Библиотека специалиста / Питер, 2012. - 304 с.

11. Alexdev блог, посвященный web - программированию и разработке сайтов. [Электронный ресурс] - URL: alexdev.ru/1025/

12. Маркетинг - PowerBranding.ru. [Электронный ресурс] - URL:

13. http://powerbranding.ru/potrebitel/celevaya-auditoriya/

14. Блог Конверт Монстра - суровый интернет маркетинг [Электронный ресурс] - URL: http://convertmonster.ru/blog/marketing-blog/celevaja-auditorija-sajta/

15. Htmlbook.ru Для тех, кто делает сайты [Электронный ресурс] - URL: htmlbook.ru

16. Русская сеть. Информационный портал о программировании [Электронный ресурс] - URL: http://www.ruweb.ru/

17. PHP: Hypertext Preprocessor [Электронный ресурс] - URL: http://php.net/

18. Free vectors, photos and PSD downloads [Электронный ресурс] - URL: http://www.freepik.com/

19. Блог о создании лейдинг пейдж [Электронный ресурс] - URL: http://smartlanding. biz/

20. Видео-уроки по созданию сайта для бизнеса [Электронный ресурс] - URL: http://ruseller.com/

21. Создай свой сайт [Электронный ресурс] - URL: http://www.sitehere.ru/

Приложения

Приложение 1

Обработчик формы на клиенте.

$ (function () {

var $forms = $ (". js-forms");

$forms. submit (function () {

var $form = $ (this);

$. ajax ({

url: $form. attr ("action"),

data: $form. serialize (),

type: $form. attr ("method"),

success: function (data) {

$ (' [name="captcha"] '). val ("");

$ (' [type="captcha"] '). attr ('src', "/captcha. php? nocache=" + (+ (new Date ())));

if (data. error) {

window. alert (data. message);

} else {

window. alert (data. message);

window. location. href = "/";

}

},

error: function () {

window. alert ("Ошибка запроса!");

}

});

return false;

});

});

$ (function () {

$ ("img [type='captcha'] "). click (function () {

var img = $ (this),

nocache = + (new Date ());

img. attr ('src', "/captcha. php? nocache=" + nocache);

})

. attr ('title', "Обновить защитный код!")

. css ('cursor', 'pointer');

});

Обработчик формы на сервере (главная страница)

<? php

session_start ();

require_once (__DIR__. "/bd. php");

require_once (__DIR__. "/captcha/index. php");

header ("content-type: application/json");

$data = [

"error" => true,

"message" => "Ошибка",

];

if (! captcha_check ()) {

$data ["message"] = "Каптча введена неверно!";

echo json_encode ($data);

exit (0);

}

if (empty ($_POST ['user'])) {

$data ["message"] = "Вы не заполнили поле - ИМЯ!";

echo json_encode ($data);

exit (0);

}

if (empty ($_POST ['phone'])) {

$data ["message"] = "Вы не заполнили поле - ТЕЛЕФОН!";

echo json_encode ($data);

exit (0);

}

$sql = "INSERT INTO `reg_form` SET name =". escape_db ($_POST ["user"]);

$sql. =", phone =". escape_db ($_POST ["phone"]);

$mysqli->query ($sql);

$data ["error"] = false;

$data ["message"] = "Форма успешно отправлена!";

echo json_encode ($data);

exit (0);

Обработчик формы на сервере (форма обратной связи)

<? php

session_start ();

require_once (__DIR__. "/bd. php");

require_once (__DIR__. "/captcha/index. php");

header ("content-type: application/json");

$data = [

"error" => true,

"message" => "Ошибка",

];

if (! captcha_check ()) {

$data ["message"] = "Каптча введена неверно!";

echo json_encode ($data);

exit (0);

}

if (empty ($_POST ['name'])) {

$data ["message"] = "Вы не заполнили поле - ИМЯ!";

echo json_encode ($data);

exit (0);

}

if (empty ($_POST ['surname'])) {

$data ["message"] = "Вы не заполнили поле - ФАМИЛИЯ!";

echo json_encode ($data);

exit (0);

}

if (empty ($_POST ['fathername'])) {

$data ["message"] = "Вы не заполнили поле - ОТЧЕСТВО!";

echo json_encode ($data);

exit (0);

}

if (empty ($_POST ['phone'])) {

$data ["message"] = "Вы не заполнили поле - ТЕЛЕФОН!";

echo json_encode ($data);

exit (0);

}

if (empty ($_POST ['zone'])) {

$data ["message"] = "Вы не заполнили поле - УЧАСТОК!";

echo json_encode ($data);

exit (0);

}

$sql = "INSERT INTO `form` SET name =". escape_db ($_POST ["name"]);

$sql. =", surname =". escape_db ($_POST ["surname"]);

$sql. =", fathername =". escape_db ($_POST ["fathername"]);

$sql. =", phone =". escape_db ($_POST ["phone"]);

$sql. =", zone =". escape_db ($_POST ["zone"]);

$mysqli->query ($sql);

$data ["error"] = false;

$data ["message"] = "Форма успешно отправлена!";

echo json_encode ($data);

exit (0);

Функция генерации каптчи

<? php

require_once (__DIR__. "/captcha/index. php");

session_start ();

$string = "";

for ($i = 0; $i < 5; $i++)

$string. = chr (rand (97, 122));

captcha_set_code ($string);

$dir = __DIR__. "/assets/common/fonts/";

$image = imagecreatetruecolor (230, 60);

$black = imagecolorallocate ($image, 10, 110, 0);

$white = imagecolorallocate ($image, 255, 255, 255);

$color = imagecolorallocate ($image, 86, 18,2);

imagefilledrectangle ($image, 0, 0, 399, 99, $white);

$string = implode ("", str_split ($string));

imagettftext ($image, 24, 0, 30, 40, $color, $dir. "MyriadPro-Bold. otf", $string);

// наносим линии

for ($i = 0; $i < 8; $i += 1) {

$y = rand (0, 60);

imageline ($image, 0, $y, 250, $y, $white);

}

header ("Content-type: image/png");

imagepng ($image);

Функция для подключения к базе данных

<? php

$dblocation = "localhost"; // Имя сервера

$dbuser = "root"; // Имя пользователя

$dbpasswd = ""; // Пароль

$dbname = "reg_bd";

$mysqli = new mysqli ($dblocation, $dbuser, $dbpassword, $dbname);

if ($mysqli->connect_errno) {

die ("Ошибка подключения!");

}

function escape_db ($value) {

global $mysqli;

return "'". $mysqli->real_escape_string ($value). "'";

}

Размещено на Allbest.ru