Файл: Разработка сайта приюта для домашних животных.pdf

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

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

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

В курсовой работе была поставлена задача изучения HTML, CSS, PHP, SQL, баз данных MySQL в процессе разработки и создания веб-сайта для приюта животных.

Таким образом, работа разделяется на:

Процесс изучения
Процесс разработки

Соответственно, в ходе выполнения курсового проектирования было запланировано:

Изучить HTML и CSS, основы дизайна веб-страниц.
Разработать концепцию сайта и техническое задание.
Разработать макеты страниц сайта на основе HTML и CSS.
Изучить язык PHP для создания динамических страниц сайта.
Изучить MySQL и язык запросов к базам данных SQL.
Разработать логику работы сайта с использованием PHP, MySQL.
Внедрить базу данных в разработанный макет сайта в соответствии с разработанной логикой.

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

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

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

При создании веб-сайта ООО «Лапочка» использовались следующие инструменты:

HTML/CSS.
PHP/MySQL/PHPMyAdmin.
Веб-сервер Apache.
Denwer.

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

Предполагается, что техническое задание на создание сайты для приюта было дано организацией ООО «Лапочка». На сайте отображены разделы:

Каталог собак
Каталог кошек
Нашли дом
Стать волонтером

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

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

Доступ к информации осуществляется по логину и паролю.

Контент для каталога животных на сайте хранится в базе данных MySQL на сервере. Администраторы сайта имеют возможность редактировать базу данных через внутренние страницы сайта.

Для реализации статической части сайта использовались HTML/CSS.

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

Рисунок 1. Пример кода HTML.

Рисунок 2. Пример страницы HTML.

Для описания внешнего вида HTML-страниц использовался формальный язык описания внешнего вида документа CSS. (Cascading Style Sheets)

Рисунок 3. Пример кода CSS.

Рисунок 4. Пример HTML-страницы с использованием файла CSS.

Рисунок 5. HTML-страница без применения CSS.

В качестве серверной платформы выбран веб-сервер Apache. Для удобства установки и управления использовалась программная оболочка Denwer.

Для управления базами данных применялся веб-интерфейс PHPMyAdmin.

Рисунок 6. Интерфейс PHPMyAdmin.

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

Работа динамической составляющей части сайта заключается в синергии средств PHP/MySQL. (Приложение 1)

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

Этап 1. Разработка системы авторизации. (vhod.php).

В начале была поставлена задача разработать систему авторизации для администратора. Так как администратор у нас один то все реализовано без участия PHPMyAdmin.

Для этого на странице vhod.php была создана форма ввода с полями «Имя пользователя» (логин) и «пароль», а также кнопкой входа.

Рисунок 7. Страница входа на сайт (vhod.php).

Если данные, введенные в форме, найдены, инициализируется сессия, в которой создается переменная $rules, принимающая значение ‘admin’.
Вызывается страница index.php, содержание которой будет зависеть от значения переменной $rules.

Рисунок 8. Главная страница при входе от имени администратора (main.php).

Рисунок 9. Главная страница со стороны стороннего человека

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

Этап 2. Разработка интерфейса администратора для измения и пополнения каталога животных (modify.php, adminplus.php).

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

Для решения этой задачи было выполнено:

Вывод каталога животных из базы данных с кнопками «добавить», «изменить», «удалить».

Рисунок 10. Страница каталога животных от имени администратора.

При нажатии кнопки «изменить» происходит переход на страницу редактирования modify.php с формой для изменения данных.

Рисунок 11. Страница изменения учетных данных пользователя (modify.php).

При нажатии кнопки «Сохранить» на странице modify.php происходит соединение с БД pets с таблицей animal. После соединения данные, введенные в форму заменяются и сохраняются.
Для добавления новых элементов каталога была создана следующая форма

Рисунок 12. Форма для добавления питомца в каталог страница adminplus.php
Для добавления животного в каталог включается модуль adminplus.php, в котором производится отображение формы, ее текста и запросом изображения, добавление данных о животном в таблицу animal, а также сохранение соответствующего изображения в специальную папку (pet).
После нажатия кнопки удалить включается модуль delete.php он связывается с таблицей animal и удаляет данные о животном, а так же удаляет фотографию из папки (pet).

Этап 3. Разработка движка страницы с анкетами (doc.php)

Была поставлена задача, чтобы любой пользователь зашедший на сайт смог связаться с руководством ООО «Лапочка». Для решения этой задачи была создана страница с анкетами для пользователей которая потом оправлялась в базу данных и там обрабатывалась:

Рисунок 12. Страница с анкетой для пользователей(doc.php).

После нажатия пользователем на кнопку (отправить) файл который он прикрепил к анкете сохраняется в папку (fanketa) далее происходит связь с таблицей базы данных anketa куда записываются данные введенные пользователем.

Рисунок 13. Таблица anketa в PHPmyAdmin

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

Для хранения информации на сервере была создана база данных pet. В базе данных были созданы 2 таблицы:

Анкеты для связи с приютом (anketa);
Каталог животных (animal);

Рисунок 14. Структура базы данных pet.

Таблица anketa.

Таблица anketa предназначена для хранения обращений от пользователя к администрации приюта и содержит в себе 10 полей:

- - 1. “id” – идентификационный номер. Представляет собой переменную целочисленного типа (INT) с автоинкрементом (свойство A_I). Количество цифр ограничено 11. Является ключевым полем таблицы (свойство PRIMARY).
    2. “address” – адрес своего проживания который заполняет в форму пользователь. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 255 символами.
    3. “Name” – Имя человека, подавшего заявку. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 50 символами.
    4. “fname” – фамилия человека подавшего заявку. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 50 символами.
    5. “foto” – фотография которую пользователь добавил к анкете. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 800 символами.
    6. “mel” – пол человека. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 10 символами.
    7. “rdate” – дата рождения. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 12 символами.
    8. “reason” – устанавливается флажок на причину обращения к администрации приюта. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 20 символами.
    9. “tel” – телефон который указал пользователь. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 11 символами.
    10. “text” - рассказ о себе. Представляет собой переменную строкового типа (TEXT). Длина строки ограничена 1200 символами.

Для отображения данных добавленных пользователем в таблице anketa используется следующий запрос:

"INSERT INTO `anketa` INSERT INTO `anketa` (`name`, `fname`, `rdate`, `address`, `tel`, `mel`, `reason`, `text`, `foto`) VALUES ('".$name."', '".$fname."', '".$rdate."', '".$address."', '".$tel."', '".$mel."', '".$reason."', '".$text."', '".$_FILES['filename']['name'].”’)

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

Рисунок 15. Структура таблицы anketa.

Таблица animal.

Таблица animal предназначена для хранения каталога животных и содержит 9 полей:

- - 1. “id” – идентификационный номер. Представляет собой переменную целочисленного типа (INT) с автоинкрементом (свойство A_I). Количество цифр ограничено 11. Является ключевым полем таблицы (свойство PRIMARY).
    2. “klichka” – имя животного. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 50 символами.
    3. “pol” – пол животного. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 20 символами.
    4. “vidpeta” – вид животного. Нужен для понимания какое животное мы добавляем после чего оно будет отображаться на нужной странице. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 20 символами.
    5. “vozrast” – возраст животного. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 20 символами.
    6. “zabrali” – если животное забрали, то ставится галочка, что его забрали и оно отображается на странице с животными, которых забрали. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 20 символами.
    7. “date” – дата публикации. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 20 символами.
    8. “opis” – описание животного. Представляет собой переменную текстового типа (TEXT).
    9. “foto” – имя файла изображения для соответствующего животного. Представляет собой переменную строкового типа (VARCHAR). Длина строки ограничена 100 символами.

Для доступа к данным в таблице news и их отображения используется SQL-запрос:

SELECT * FROM `animal`

При выполнении этого запроса информация о содержимом таблицы считывается в переменную $result с помощью PHP-запроса, а затем построчно передается в переменную $row и при помощи PHP-кода выводится на экран.

Для добавления данных в таблицу animal используется SQL-запрос с добавлением переменных PHP: