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

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

Содержание:

Введение

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

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

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

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

В курсовой работе была поставлена задача изучения 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:

INSERT INTO `animal`

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

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

DELETE FROM `animal` WHERE `animal`.`id` = '$id'

С помощью переменной $id данные о записи, которую необходимо удалить из таблицы, попадают в SQL-запрос и запись удаляется.

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

"UPDATE `animal` SET `klichka`='".$klichka."', `vozrast`='".$vozrast."', `pol`='".$pol."', `opis`='".$opis."', `zabrali`='".$zabrali."' WHERE `id`='".$id."'"

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

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

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

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

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

Рисунок 17. Главная страница стороннего пользователя.

Рисунок 18. Интерфейс страницы с анкетами.

Рисунок 19. Интерфейс страницы каталога.

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

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

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

Рисунок 28. Интерфейс каталога животных при входе с правами администратора.

Заключение

В ходе курсового проектирования была поставлена цель разработать прототип сайта для приюта домашних животных «Лапочка». В связи с этим, также предполагалось решить задачу по изучению языка гипертекстовой разметки HTML, CSS, языка программирования PHP, языка запросов SQL и базы данных MySQL. Эти задачи были решены.

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

Сайт организации обладает следующим функционалом и особенностями:

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

Вся информация, содержащаяся на сайте, находится в базе данных MySQL, что повышает уровень защищенности сайта.

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

Выполненная работа по созданию сайта соответствует техническому заданию организации и требованиям по информационной безопасности приюта ООО «Лапочка».

Список использованной литературы

Мейер, Б. Инструменты, алгоритмы и структуры данных / Б. Мейер. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016.
Савельева, Н.В. Язык программирования PHP / Н.В. Савельева. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016
Прохоренок, Н. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н. Прохоренок. - СПб.: БХВ - Петербург., 2010. - 900 с.
Мазуркевич, А. PHP: настольная книга программиста / А. Мазуркевич. - М.: Новое знание, 2003. - 480 с.
Харрис, Э. PHP/MySQL для начинающих / Э. Харрис. - М.: Кудиц - образ, 2005.

Приложение

Приложение 1

Главная страница index.php, main.css

index.php

session_start();

if ($_SESSION['rules'] == "")

session_unset();

if ($_GET['logout'] == 'yes')

session_unset();

<html>

<head>

<title>Приют для домашних животных "Лапочка"(Главная страница)</title>

</head>

<body>

</div>

Адрес: г.Москва Левофортово д.15<br>

почтовый индекс: 145000<br>

тел: 8-800-000-22

</div>

if ($_SESSION['rules']==1){

Выход

} else

{

Вход

}

</div>

</header>

<menu>

<summary>Cобаки</summary>

if ($_SESSION['rules'] == '')

{

<p><a href="http://petlife/doc.php" class="rin" title="Взять собаку домой">Взять собаку</a></p>

}

<p><a href="http://petlife/wish.php?vid=dog&zabrali=no" class="rin" title="Свободные собаки">Каталог собак</a></p>

</details>

</div>

<summary>Кошки</summary>

if ($_SESSION['rules'] == '')

{

<p><a href="http://petlife/doc.php" class="rin" title="Взять кошку домой">Взять кошку</a></p>

}

<p><a href="http://petlife/wish.php?vid=cat&zabrali=no" class="rin" title="Свободные кошки">Каталог кошек</a></p>

</details>

</div>

<summary><a href="http://petlife/wish.php?zabrali=yes" class="rin" title="Счастливые питомцы нашедшие дом">Нашли дом</a></summary>

</details>

</div>

</details>

</div>

</menu>

src="https://www.youtube.com/embed/8-6Xy4ak1m8" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

if ($_SESSION['rules'] == '')

{

<a href="http://petlife/news.php" class="rin">О приюте</a></pre>

<a href="http://petlife/doc.php#dog" class="rin">Взять собаку</a></pre>

<a href="http://petlife/doc.php#cat" class="rin">Взять кошку</a></pre>

<a href="http://petlife/doc.php#volunteer" class="rin">Стать волонтером</a></pre>

</div>

}

</div>

<pre>Иванова Анна СБИ-411

2020 год</pre>

</div>

<br>Помоги нашим маленьким друзьям - Возьми питомца из приюта!

</div>

<i>lapochka-priut@mail.ru</i>

</div>

</footer>

</body>

</html>

main.css

* {

text-decoration: none;

text-indent: 1em;

}

html

{

}

.rin {color: #000;

}

h1 {font-family:arial;}

p {

font-size: 1em; font-family:Times new roman;

text-indent:0;

border-right: 0.5px solid white;

border-bottom: 1px dotted White;

margin:0;

float:inherit;

background-color:#F4A460;

border-radius: 3px;

}

p:hover {background-color: #FF8C00}

summary

{

border: 1px outset;

background-color:#F4A460;

font-size: 1em; font-family:Times new roman;

text-indent:0;

margin:0;

float:inherit;

border-radius: 3px;

}

summary:hover {background-color: #FF8C00}

details summary::-webkit-details-marker {

display: none;

font-size: 1em;

font-family:Times new roman;

font-weight: bold; }

a {font-size: 1.1em; font-family:Times new roman; }

pre {font-size: 1.1em; font-weight: bold; font-family:Times new roman; color: black; text-indent:0;}

footer {font-size: 1.1em; }

#shapka {

margin:0;

height: 8em;

width: 98em;

}

#vso

{

height: 34em;

width: 98em;

}

#podval {

margin-left: -2em;

height: 5em;

width: 94em;

background-color: #F4A460;

}

#menu {

margin: auto;

background-color: #FFDEAD;

box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

height: 27em;

width: 40em;

}

#banner

{

margin: auto;

height: 3em;

width: 42em;

}

{

margin:0;

height: 6em;

width: 37.5em;

text-align:center;

}

#video

{

margin-top: 1em;

margin-left: 7em;

}

#cat

{

float:left;

width: 8.1em;

text-align:center;

}

#dog

{

float:left;

margin-left: 8em;

width: 8.2em;

text-align:center;

}

#mau

{

float:left;

text-align:center;

width: 7.2em;

border-radius: 3px;

font-size: 0.9em;

}

#onas

{

float:left;

text-align:center;

width: 5.2em;

border-radius: 3px;

font-size: 0.9em;

}

#onas:hover {background-color: #FF8C00}

#mau:hover {background-color: #FF8C00}

#nizpre

{

margin:0;

border: 0.5px outset white;

float:left;

width: 9em;

height: 2.8em;

text-align:center;

background-color:#F4A460;

}

#nizdog

{

margin:0;

border: 0.5px outset white;

float:left;

width: 9em;

height: 2.8em;

text-align:center;

background-color:#F4A460;

}

#nizcat

{

margin:0;

border: 0.5px outset white;

float:left;

width: 9em;

height: 2.8em;

text-align:center;

background-color:#F4A460;

}

#nizvol

{

margin:0;

border: 0.5px outset white;

float:left;

width: 10.72em;

height: 2.8em;

text-align:center;

background-color:#F4A460;

}

#nizpre:hover {background-color: #D2691E}

#nizdog:hover {background-color: #D2691E}

#nizcat:hover {background-color: #D2691E}

#nizvol:hover {background-color: #D2691E}

#logo{

float:left;

width: 38em;

height:8em;

}

#topcent{

float:left;

width: 20em;

height:7.2em;

text-align:center;

font-size: 1.1em;

font-family:Times new roman;

}

#topright{

float:left;

width: 32em;

height:8em;

}

#imya{

float:left;

width: 25em;

height:4.9em;

text-align:center;

}

#textx{

float:left;

width: 42em;

height:4.44em;

text-align:center;

font-size: 1.1em;

color: #FF0000; text-shadow:1px 1px 2px white, 0 0 1em white;

font-family:Times new roman;

font-weight: bold; font-family:Times new roman; text-align:center; text-transform: uppercase;

}

#email{

float:left;

width: 18em;

height:4.9em;

font-family:Times new roman;

font-size: 1em;

padding-left: 10px;

text-align: left;

}

Приложение 2. Страница с анкетами для пользователей (doc.php, docs.css)

doc.php

if (isset($_POST["mail"])){

print_r ($_POST);

$name = $_POST['name'];

$fname = $_POST['name1'];

$rdate = $_POST['age'];

$address = $_POST['adress'];

$tel = $_POST['phone'];

$mel = $_POST['state'];

$reason = $_POST['reason'];

$text = $_POST['text'];

$foto = $_POST['filename'];

$mysqli = new mysqli ("localhost", "root", "root", "pet");

$mysqli ->query("SET_NAMES 'utf8'");

$result = $mysqli ->query("INSERT INTO `anketa` (`name`, `fname`, `rdate`, `address`, `tel`, `mel`, `reason`, `text`, `foto`) VALUES ('".$name."', '".$fname."', '".$rdate."', '".$address."', '".$tel."', '".$mel."', '".$reason."', '".$text."', '".$_FILES['filename']['name']."')");

if ($result) echo('Успех!');

}

if ((is_uploaded_file($_FILES["filename"]["tmp_name"]))&&($_FILES["filename"]["size"] < 1024*20*1024)&&($_FILES["filename"]["type"] == 'image/jpeg')){

// $mysqli ->query("INSERT INTO `anketa` (`foto`) VALUES ('".$_FILES['filename']['name']."')");

move_uploaded_file

(

$_FILES["filename"]["tmp_name"],

"fanketa"."/".iconv('utf-8','cp1251',$_FILES["filename"]["name"])

);

}

//$mysqli ->close();

<html>

<head>

<title>Приют для домашних животных "Лапочка"(Документы)</title>

</head>

<body>

</div>

Адрес: г.Москва Левофортово д.15<br>

почтовый индекс: 145000<br>

тел: 8-800-000-22

</div>

</div>

</header>

<menu>

<summary>Cобаки</summary>

<p class="ron"><a href="http://petlife/doc.php" class="rin" title="Взять собаку домой">Взять собаку</a></p>

<p class="ron"><a href="http://petlife/wish.php?vid=dog&zabrali=no" class="rin" title="Свободные собаки">Каталог собак</a></p>

</details>

</div>

<summary>Кошки</summary>

<p class="ron"><a href="http://petlife/doc.php" class="rin" title="Взять кошку домой">Взять кошку</a></p>

<p class="ron"><a href="http://petlife/wish.php?vid=cat&zabrali=no" class="rin" title="Свободные кошки">Каталог кошек</a></p>

</details>

</div>

<summary><a href="http://petlife/wish.php?zabrali=yes" class="rin" title="Счастливые питомцы нашедшие дом">Нашли дом</a></summary>

</details>

</div>

</details>

</div>

</menu>

<h1>Что нужно чтобы взять питомца из приюта?</h1></a>

<p>Первое, что нужно сделать человеку, который хочет взять питомца – убедиться в том, что у него и его домочадцев нет аллергии на животных. Если же есть какие-то сомнения на этот счет, то лучше провериться, такие анализы можно сдать в любой лаборатории. </p><br>

<p>Затем нужно выбрать само животное – в Интернете (по фото/видео) или вживую в одном из приютов. Далее нужно связаться с куратором или с приютом, где находится животное, и начать выяснять про него конкретную информацию. </p><br>

<p>Возможно, кто-то из животных уже «запал вам в душу» по фотографии в Интернете. Тогда вы связываетесь с конкретным куратором этого питомца или с конкретным приютом, где он находится. Далее вы едете с ним знакомиться и уже за первую поездку можно понять: ваш это питомец или нет.</p><br>

<p>Важно понимать, что животные тоже нас выбирают! Часто бывают такие ситуации: люди приезжают, чтобы усыновить конкретного питомца, а уезжают с другим, потому что животное, к которому они приезжали изначально, их не выбрало. Зато им очень понравился другой четвероногий, который сразу же пошел на контакт с новыми хозяевами. Понять, кто тебе подходит, можно только вживую. </p><br>

<p>В приюте Лапочка приветствуется, когда люди приезжают на знакомство с будущим домашним питомцем не один раз, а несколько.</p><br>

<p>Животные в муниципальных приютах ничем не хуже, просто о них имеется меньше информации. Стоит приложить немного усилий, несколько раз приехать и немножко с ними познакомиться. Когда люди берут щенка, вне зависимости от того, покупают они его или берут из приюта, либо с улицы, – это всегда будет «кот в мешке».</p><br>

<p>В нашем приюте при передаче животного оформляется договор с будущим хозяином животного. В нем фиксируются данные обеих сторон, оговариваются пункты ответственного содержания животного. Мы также всегда ненавязчиво отслеживаем судьбу наших бывших подопечных. Всех наших питомцев мы лично провожаем до места их дальнейшего жительства. </p><br>

<p>Все животные разные. Кому-то сразу после приюта не требуется никакой социализации, они ведут себя так, как будто жили в вашей квартире всегда. </p><br>

<p>Безусловно, необходимо ознакомиться с соответствующей информацией, благо сейчас есть очень много статей и даже различных обучающих видеоматериалов на Youtube. Также сразу стоит озаботиться тем, чтобы у животного было свое место. Вы должны заранее подумать о том, где ему будет комфортно и при этом удобно вам.</p><br>

<p>Первые несколько недель животного в новом доме – это адаптация и социализация, поэтому нужно быть готовым к тому, что животное может ходить за вами по пятам, даже в душ. </p><br>

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

Из разочарований я могу предположить только то, что человек переоценил свои силы. Ему сложно с животным, он оказался не готов гулять с ним, общаться, заниматься и воспитывать его. Все эти моменты лучше всего решить для себя еще до появления питомца в доме. </p><br>

<p>Нужно понимать ответственность шага, после которого человек будет отвечать не только за свою жизнь, но и за жизнь хвостатого. Если вы не готовы к этому, то, конечно, лучше никого не брать. </p><br>

<h1>Для связи с нашим приютом при желании взять питомца или стать волонтером нужно заполнить следующую форму:</h1>

<label for="name"><p id="1a">Bведите имя: </label><input type="text" placeholder="Анна" name="name" id="name" maxlenght="25" /></p><br />

<label for="name1"><p>Bведите фамилию: </label><input type="text" placeholder="Иванова" name="name1" id="name1" maxlenght="54" /></p><br />

<label for="age"><p>Bведите дату рождения: </label><input type="date" name="age" id="age" maxlenght="4" /></p><br />

<label for="adress"><p>Bведите адрес проживания: </label><input type="text" placeholder="Моск.Обл ул.Гордон д.6" name="adress" id="adress" maxlenght="400" /></p><br />

<label for="phone"><p>Bведите номер телефона: </label><input type="tel" name="phone" id="phone" maxlenght="15" /></p><br />

<p>Выберите пол:</p><br />

<p>Выберите причину обращения</p><br />

<p><label for="v">Стать волонтером </label> <input type="radio" name="reason" id="v" value="волонтер"/></p>

<p><label for="dog">Забрать собаку </label> <input type="radio" name="reason" id="dog" value="собака" /></p>

<p><label for="cat">Забрать кошку </label> <input type="radio" name="reason" id="cat" value="кошка" /></p>

<br />

<p><label for="filename">Приложите свое фото к анкете: </label><br /><br /><input type="file" name="filename" /></p><br />

<p><b>Расскажите о себе:</b><br /><br /><textarea name="text" ></textarea></p><br />

<p><input required type="checkbox" name="personal" id="personal" /><label for="personal">Согласен на обработку персональных данных </p></label><br />

</form>

</div>

<pre>Иванова Анна СБИ-411

2020 год</pre>

</div>

<br>Помоги нашим маленьким друзьям - Возьми питомца из приюта!

</div>

<i>lapochka-priut@mail.ru</i>

</div>

</footer>

</body>

</html>

docs.css

* {

text-decoration: none;

text-indent: 1em;

}

html

{

}

.rin {color: #000;

}

.ron{

font-size: 1em; font-family:Times new roman;

text-indent:0;

border-right: 0.5px solid white;

border-bottom: 1px dotted White;

margin:0;

float:inherit;

background-color:#F4A460;

border-radius: 3px;

}

.ron:hover {background-color: #FF8C00}

h1 {font-family:arial;}

p {

margin:0em 1em 0em 1em;

}

{

font-size: 1.1em; font-family:Times new roman;

margin:1em;

}

summary

{

border: 1px outset;

background-color:#F4A460;

font-size: 1em; font-family:Times new roman;

text-indent:0;

margin:0;

float:inherit;

border-radius: 3px;

}

summary:hover {background-color: #FF8C00}

details summary::-webkit-details-marker {

display: none;

font-size: 1em;

font-family:Times new roman;

font-weight: bold; }

a {font-size: 1.1em; font-family:Times new roman; }

pre {font-size: 1.1em; font-weight: bold; font-family:Times new roman; color: black; text-indent:0;}

footer {font-size: 1.1em; }

#shapka {

margin:0;

height: 8em;

width: 98em;

}

#vso

{

height: 135em;

width: 98em;

}

#podval {

margin-left: -2em;

height: 5em;

width: 94em;

background-color: #F4A460;

}

#menu {

margin: auto;

background-color: #FFDEAD;

box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

height: 134em;

width: 40em;

}

#banner

{

margin: auto;

height: 3em;

width: 42em;

}

{

margin:0;

height: 6em;

width: 37.5em;

text-align:center;

}

#cat1

{

float:left;

width: 8.1em;

text-align:center;

}

#dog1

{

float:left;

margin-left: 8em;

width: 8.2em;

text-align:center;

}

#mau

{

float:left;

text-align:center;

width: 7.2em;

border-radius: 3px;

font-size: 0.9em;

}

#onas

{

float:left;

text-align:center;

width: 5.2em;

border-radius: 3px;

font-size: 0.9em;

}

#onas:hover {background-color: #FF8C00}

#mau:hover {background-color: #FF8C00}

#logo{

float:left;

width: 38em;

height:8em;

}

#topcent{

float:left;

width: 20em;

height:7.2em;

text-align:center;

font-size: 1.1em;

font-family:Times new roman;

}

#topright{

float:left;

width: 32em;

height:8em;

}

#imya{

float:left;

width: 25em;

height:4.9em;

text-align:center;

}

#textx{

float:left;

width: 40em;

height:4.44em;

text-align:center;

font-size: 1.1em;

color: #FF0000; text-shadow:1px 1px 2px white, 0 0 1em white;

font-family:Times new roman;

font-weight: bold; font-family:Times new roman; text-align:center; text-transform: uppercase;

}

#email{

float:left;

width: 18em;

height:4.9em;

font-family:Times new roman;

font-size: 1em;

padding-left: 10px;

text-align: left;

}

#anketa1

{

margin: auto;

background-color: #fff;

border: 1px solid;

height: 48em;

width: 32em;

}

#1a

{

margin:1em 1em 0em 1em;

}

Приложение 4. Страница входа vhod.php, vhod css

vhod.php

if (isset($_POST['mail'])){

if ($_POST['login']=='admin')

if ($_POST['parol']=='admin')

{

session_start();

$_SESSION['rules'] = 1;

header ('Location: index.php');

}

<html>

<head>

<title>Приют для домашних животных "Лапочка"(Главная страница)</title>

</head>

<body>

</div>

Адрес: г.Москва Левофортово д.15<br>

почтовый индекс: 145000<br>

тел: 8-800-000-22

</div>

if ($_SESSION['rules']==1){

Выход

} else

{

Вход

}

</div>

</header>

<menu>

<summary>Cобаки</summary>

<p class="nay"><a href="http://petlife/doc.php#dog" class="rin" title="Взять собаку домой">Взять собаку</a></p>

<p class="nay"><a href="http://petlife/wish.php?vid=dog&zabrali=no" class="rin" title="Свободные собаки">Каталог собак</a></p>

</details>

</div>

<summary>Кошки</summary>

<p class="nay"><a href="http://petlife/doc.php#cat" class="rin" title="Взять кошку домой">Взять кошку</a></p>

<p class="nay"><a href="http://petlife/wish.php?vid=cat&zabrali=no" class="rin" title="Свободные кошки">Каталог кошек</a></p>

</details>

</div>

<summary><a href="http://petlife/wish.php?zabrali=yes" class="rin" title="Счастливые питомцы нашедшие дом">Нашли дом</a></summary>

</details>

</div>

</details>

</div>

</menu>

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

<label for="login"><p>Bведите логин: &nbsp&nbsp</label><input type="text" name="login" id="login" maxlenght="25" /></p><br />

<label for="parol"><p>Bведите пароль: </label><input type="password" name="parol" id="parol" maxlenght="25" /></p><br />

</form>

if (isset($_POST['mail'])){

if (($_POST['login']!='admin') or ($_POST['parol']!='admin'))

{

}

</div>

<a href="http://petlife/news.php" class="rin">О приюте</a></pre>

<a href="http://petlife/doc.php#dog" class="rin">Взять собаку</a></pre>

<a href="http://petlife/doc.php#cat" class="rin">Взять кошку</a></pre>

<a href="http://petlife/doc.php#volunteer" class="rin">Стать волонтером</a></pre>

</div>

<pre>Иванова Анна СБИ-411

2020 год</pre>

</div>

<br>Помоги нашим маленьким друзьям - Возьми питомца из приюта!

</div>

<i>lapochka-priut@mail.ru</i>

</div>

</footer>

</body>

</html>

vhod.css

* {

text-decoration: none;

}

html

{

}

.rin {color: #000;

}

h1 {font-family:arial;}

.nay {

font-size: 1em; font-family:Times new roman;

text-indent:0;

border-right: 0.5px solid white;

border-bottom: 1px dotted White;

margin:0;

float:inherit;

background-color:#F4A460;

border-radius: 3px;

}

.nay:hover {background-color: #FF8C00}

summary

{

border: 1px outset;

background-color:#F4A460;

font-size: 1em; font-family:Times new roman;

text-indent:0;

margin:0;

float:inherit;

border-radius: 3px;

}

summary:hover {background-color: #FF8C00}

details summary::-webkit-details-marker {

display: none;

font-size: 1em;

font-family:Times new roman;

font-weight: bold; }

a {font-size: 1.1em; font-family:Times new roman; }

pre {font-size: 1.1em; font-weight: bold; font-family:Times new roman; color: black; text-indent:0;}

footer {font-size: 1.1em; }

#shapka {

margin:0;

height: 8em;

width: 98em;

}

#vso

{

height: 34em;

width: 98em;

}

#podval {

margin-left: -2em;

height: 5em;

width: 94em;

background-color: #F4A460;

}

#menu {

margin: auto;

background-color: #FFDEAD;

box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

height: 27em;

width: 40em;

}

#banner

{

margin: auto;

height: 3em;

width: 42em;

}

{

margin:0;

height: 6em;

width: 37.5em;

text-align:center;

}

#video

{

margin-top: 1em;

margin-left: 7em;

}

#cat

{

float:left;

width: 8.1em;

text-align:center;

}

#dog

{

float:left;

margin-left: 8em;

width: 8.2em;

text-align:center;

}

#mau

{

float:left;

text-align:center;

width: 7.2em;

border-radius: 3px;

font-size: 0.9em;

}

#onas

{

float:left;

text-align:center;

width: 5.2em;

border-radius: 3px;

font-size: 0.9em;

}

#onas:hover {background-color: #FF8C00}

#mau:hover {background-color: #FF8C00}

#nizpre

{

margin:0;

border: 0.5px outset white;

float:left;

width: 9em;

height: 2.8em;

text-align:center;

background-color:#F4A460;

}

#nizdog

{

margin:0;

border: 0.5px outset white;

float:left;

width: 9em;

height: 2.8em;

text-align:center;

background-color:#F4A460;

}

#nizcat

{

margin:0;

border: 0.5px outset white;

float:left;

width: 9em;

height: 2.8em;

text-align:center;

background-color:#F4A460;

}

#nizvol

{

margin:0;

border: 0.5px outset white;

float:left;

width: 10.72em;

height: 2.8em;

text-align:center;

background-color:#F4A460;

}

#nizpre:hover {background-color: #D2691E}

#nizdog:hover {background-color: #D2691E}

#nizcat:hover {background-color: #D2691E}

#nizvol:hover {background-color: #D2691E}

#logo{

float:left;

width: 38em;

height:8em;

}

#topcent{

float:left;

width: 20em;

height:7.2em;

text-align:center;

font-size: 1.1em;

font-family:Times new roman;

}

#topright{

float:left;

width: 32em;

height:8em;

}

#imya{

float:left;

width: 25em;

height:4.9em;

text-align:center;

}

#textx{

float:left;

width: 42em;

height:4.44em;

text-align:center;

font-size: 1.1em;

color: #FF0000; text-shadow:1px 1px 2px white, 0 0 1em white;

font-family:Times new roman;

font-weight: bold; font-family:Times new roman; text-align:center; text-transform: uppercase;

}

#email{

float:left;

width: 18em;

height:4.9em;

font-family:Times new roman;

font-size: 1em;

padding-left: 10px;

text-align: left;

}

#avtorizacia

{

margin: auto;

background-color: #fff;

box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

height: 15em;

width: 27em;

}

h1 {font-family:arial;}

p {

margin:0em 1em 0em 3em;

}

{

font-size: 1.1em; font-family:Times new roman;

margin: 1em 2em 0em 9.5em

}

.knopka

{

text-align:center;

}

#log

{

font-size: 1em; font-family:Times new roman; color: black; text-indent:0;

}

Приложение 5. Страница с каталогом животных (wish.php) и административные инструменты (adminplus.php, delete.php, modify.php) (pet.css)

wish.php

session_start();

if ($_SESSION['rules'] == "")

session_unset();

if ($_GET['logout'] == 'yes')

session_unset();

$vid = $_GET['vid'];

$zabrali = $_GET['zabrali'];

<html>

<head>

<title>Приют для домашних животных "Лапочка"(Главная страница)</title>

</head>

<body>

</div>

Адрес: г.Москва Левофортово д.15<br>

почтовый индекс: 145000<br>

тел: 8-800-000-22

</div>

if ($_SESSION['rules']==1){

Выход

} else

{

Вход

}

</div>

</header>

<menu>

<summary>Cобаки</summary>

if ($_SESSION['rules'] == '')

{

<p class="ron"><a href="http://petlife/doc.php" class="rin" title="Взять собаку домой">Взять собаку</a></p>

}

<p class="ron"><a href="http://petlife/wish.php?vid=dog&zabrali=no" class="rin" title="Свободные собаки">Каталог собак</a></p>

</details>

</div>

<summary>Кошки</summary>

if ($_SESSION['rules'] == '')

{

<p class="ron"><a href="http://petlife/doc.php" class="rin" title="Взять кошку домой">Взять кошку</a></p>

}

<p class="ron"><a href="http://petlife/wish.php?vid=cat&zabrali=no" class="rin" title="Свободные кошки">Каталог кошек</a></p>

</details>

</div>

<summary><a href="http://petlife/wish.php?zabrali=yes" class="rin" title="Счастливые питомцы нашедшие дом">Нашли дом</a></summary>

</details>

</div>

</details>

</div>

</menu>

$mysqli = new mysqli ("localhost", "root", "root", "pet");

$mysqli ->query("SET_NAMES 'utf8'");

if ($zabrali == "no")

$result = $mysqli ->query("SELECT * FROM `animal` WHERE (vidpeta LIKE '".$vid."') AND (zabrali LIKE '".$zabrali."') ORDER BY date DESC");

if ($zabrali == "yes")

$result = $mysqli ->query("SELECT * FROM `animal` WHERE (zabrali LIKE '".$zabrali."') ORDER BY date DESC");

while (($row = $result->fetch_assoc()) !=false){

$id = $row['id'];

$klichka = $row['klichka'];

$vozrast = $row['vozrast'];

$pol = $row['pol'];

$opis = $row['opis'];

$date = $row['date'];

$foto = $row['foto'];

if (($_SESSION['rules'] == 1) and ($_GET['zabrali'] == 'no')){

}

<img src="http://petlife/pet/<?echo ($foto);?>" height="230px" width="200px">

</div>

$date = date("d.m.Y")."&nbsp".date("H:i");

if ($_SESSION['rules'] == 1){

<center><a href="http://petlife/modify.php?id=<? echo ($id);?>&vid=<? echo($vid);?>"><input name="typ" type="submit" value="Изменить" /></a> &nbsp <a href="http://petlife/delete.php?id=<? echo ($id);?>&vid=<? echo($vid);?>&zabrali=<? echo ($zabrali);?>"> <input name="del" type="submit" value="Удалить" /></a></center>

}

</div>

}

</div>

</body>

</html>

adminplus.php

session_start();

if ($_SESSION['rules'] == "")

session_unset();

if ($_GET['logout'] == 'yes')

session_unset();

if (isset($_POST['pluspet'])){

$vidpeta = $_GET['vid'];

$klichka = $_POST['klichka'];

$vozrast = $_POST['vozrast'];

$pol = $_POST['pol'];

$opis = $_POST['opis'];

$date = date("d.m.Y")." ".date("H:i");

$foto = $_POST['foto'];

if ($_POST['zabrali'] == "on")

$zabrali = "yes";

else

$zabrali = "no";

$mysqli = new mysqli ("localhost", "root", "root", "pet");

$mysqli ->query("SET_NAMES 'utf8'");

$result = $mysqli ->query("INSERT INTO `animal` (`vidpeta`, `klichka`, `vozrast`, `pol`, `opis`, `date`, `foto`, `zabrali`) VALUES ('".$vidpeta."', '".$klichka."', '".$vozrast."', '".$pol."', '".$opis."', '".$date."', '".$_FILES['foto']['name']."', '".$zabrali."')");

}

if ((is_uploaded_file($_FILES["foto"]["tmp_name"]))&&($_FILES["foto"]["size"] < 1024*20*1024)&&($_FILES["foto"]["type"] == 'image/jpeg')){

// $mysqli ->query("INSERT INTO `anketa` (`foto`) VALUES ('".$_FILES['filename']['name']."')");

move_uploaded_file

(

$_FILES["foto"]["tmp_name"],

"pet"."/".iconv('utf-8','cp1251',$_FILES["foto"]["name"])

);

}

<html>

<head>

<title>Приют для домашних животных "Лапочка"(Главная страница)</title>

</head>

<body>

</div>

Адрес: г.Москва Левофортово д.15<br>

почтовый индекс: 145000<br>

тел: 8-800-000-22

</div>

if ($_SESSION['rules']==1){

Выход

} else

{

Вход

}

</div>

</header>

<menu>

<summary>Cобаки</summary>

if ($_SESSION['rules'] == '')

{

<p class="ron"><a href="http://petlife/doc.php" class="rin" title="Взять собаку домой">Взять собаку</a></p>

}

<p class="ron"><a href="http://petlife/wish.php?vid=dog&zabrali=no" class="rin" title="Свободные собаки">Каталог собак</a></p>

</details>

</div>

<summary>Кошки</summary>

if ($_SESSION['rules'] == '')

{

<p class="ron"><a href="http://petlife/doc.php" class="rin" title="Взять кошку домой">Взять кошку</a></p>

}

<p class="ron"><a href="http://petlife/wish.php?vid=cat&zabrali=no" class="rin" title="Свободные кошки">Каталог кошек</a></p>

</details>

</div>

<summary><a href="http://petlife/wish.php?zabrali=yes" class="rin" title="Счастливые питомцы нашедшие дом">Нашли дом</a></summary>

</details>

</div>

</details>

</div>

</menu>

<p><label for="foto">Фото животного: </label><input type="file" name="foto" /><br />не более 250х250px</p>

<label for="klichka"><p>Кличка питомца: </label><input type="text" name="klichka" id="klichka" maxlenght="25" /></p>

<label for="vozrast"><p>Возраст питомца: </label><input type="text" name="vozrast" id="vozrast" maxlenght="10" /></p>

<label for="polpet"><p>Пол питомца: </label><input type="text" name="pol" id="polpet" maxlenght="30" /></p>

<p>Описание питомца: <textarea name="opis" ></textarea></p>

<p><input type="checkbox" name="zabrali" id="netu" /><label for="netu">Питомца забрали </p></label>

</form>

</div>

</body>

</html>

delete.php

session_start();

if ($_SESSION['rules'] == 1){

$id=$_GET['id'];

$vid=$_GET['vid'];

$zabrali=$_GET['zabrali'];

$mysqli = new mysqli ("localhost", "root", "root", "pet");

$mysqli ->query("SET_NAMES 'utf8'");

$result = $mysqli ->query("SELECT * FROM `animal` WHERE `animal`.`id` = '".$id."'");

while (($row = $result->fetch_assoc()) !=false){

$delfoto = $row['foto'];

}

unlink ("pet"."/".iconv('utf-8','cp1251',$delfoto));

$mysqli ->query("DELETE FROM `animal` WHERE `animal`.`id` = '".$id."'");

$mysqli ->close();

header ('Location: /wish.php?vid='.$vid.'&zabrali='.$zabrali);

}

modify.php

session_start();

if ($_SESSION['rules'] == "")

session_unset();

if ($_GET['logout'] == 'yes')

session_unset();

$id=$_GET['id'];

$vid=$_GET['vid'];

$mysqli = new mysqli ("localhost", "root", "root", "pet");

$mysqli ->query("SET_NAMES 'utf8'");

$result = $mysqli ->query("SELECT * FROM `animal` WHERE `animal`.`id` = '".$id."'");

while (($row = $result->fetch_assoc()) !=false){

$klichkaprev = $row['klichka'];

$vozrastprev = $row['vozrast'];

$polprev = $row['pol'];

$opisprev = $row['opis'];

$fotoprev = $row['foto'];

$zabraliprev = $row['zabrali'];

}

$mysqli ->close();

$klichka = $klichkaprev;

$vozrast = $vozrastprev;

$pol = $polprev;

$opis = $opisprev;

$foto = $fotoprev;

$zabrali = $zabraliprev;

if (isset ($_POST['save'])){

$klichka = $_POST['klichka'];

$vozrast = $_POST['vozrast'];

$pol = $_POST['pol'];

$opis = $_POST['opis'];

if ($_POST['zabrali'] == "on")

$zabrali = "yes";

else

$zabrali = "no";

}

<html>

<head>

<title>Приют для домашних животных "Лапочка"(Главная страница)</title>

</head>

<body>

</div>

Адрес: г.Москва Левофортово д.15<br>

почтовый индекс: 145000<br>

тел: 8-800-000-22

</div>

if ($_SESSION['rules']==1){

Выход

} else

{

Вход

}

</div>

</header>

<menu>

<summary>Cобаки</summary>

if ($_SESSION['rules'] == '')

{

<p class="ron"><a href="http://petlife/doc.php" class="rin" title="Взять собаку домой">Взять собаку</a></p>

}

<p class="ron"><a href="http://petlife/wish.php?vid=dog&zabrali=no" class="rin" title="Свободные собаки">Каталог собак</a></p>

</details>

</div>

<summary>Кошки</summary>

if ($_SESSION['rules'] == '')

{

<p class="ron"><a href="http://petlife/doc.php" class="rin" title="Взять кошку домой">Взять кошку</a></p>

}

<p class="ron"><a href="http://petlife/wish.php?vid=cat&zabrali=no" class="rin" title="Свободные кошки">Каталог кошек</a></p>

</details>

</div>

<summary><a href="http://petlife/wish.php?zabrali=yes" class="rin" title="Счастливые питомцы нашедшие дом">Нашли дом</a></summary>

</details>

</div>

</details>

</div>

</menu>

<p><label for="petfoto">Фото животного: </label><input type="file" name="foto" /><br />не более 250х250px</p>

<label for="klichka"><p>Кличка питомца: </label><input type="text" name="klichka" value="<? echo ($klichka)?>" id="klichka" maxlenght="25" /></p>

<label for="vozrast"><p>Возраст питомца: </label><input type="text" name="vozrast" value="<? echo ($vozrast)?>" id="vozrast" maxlenght="10" /></p>

<label for="pol"><p>Пол питомца: </label><input type="text" name="pol" value="<? echo ($pol)?>" id="pol" maxlenght="30" /></p>

<p>Описание питомца: <textarea name="opis" ><? echo ($opis)?></textarea></p>

<p><input type="checkbox" name="zabrali" id="netu" <? if ($zabrali == "yes") echo ('checked'); ?> /><label for="netu">Питомца забрали </p></label>

</form>

<? if (isset($_POST['save'])){

$mysqli = new mysqli ("localhost", "root", "root", "pet");

$mysqli ->query("SET_NAMES 'utf8'");

$mysqli ->query("UPDATE `animal` SET `klichka`='".$klichka."', `vozrast`='".$vozrast."', `pol`='".$pol."', `opis`='".$opis."', `zabrali`='".$zabrali."' WHERE `id`='".$id."'");

$mysqli ->close();

if ((is_uploaded_file($_FILES["foto"]["tmp_name"]))&&($_FILES["foto"]["size"] < 1024*3*1024)&&($_FILES["foto"]["type"] == 'image/jpeg')){

unlink ('pet/'.$fotoprev);

$mysqli = new mysqli ("localhost", "root", "root", "pet");

$mysqli ->query("SET_NAMES 'utf8'");

$mysqli ->query("UPDATE `animal` SET `foto`='".$_FILES['foto']['name']."' WHERE id="."'".$id."'");

$mysqli ->close();

move_uploaded_file

(

$_FILES["foto"]["tmp_name"],

"pet"."/".iconv('utf-8','cp1251',$_FILES["foto"]["name"])

);

}

</div>

</body>

</html>

pet.css

* {

text-decoration: none;

}

html

{

}

.rin {color: #000;

}

h1 {font-family:arial;}

.ron{

font-size: 1em; font-family:Times new roman;

text-indent:0;

border-right: 0.5px solid white;

border-bottom: 1px dotted White;

margin:0;

float:inherit;

background-color:#F4A460;

border-radius: 3px;

}

.ron:hover {background-color: #FF8C00}

summary

{

border: 1px outset;

background-color:#F4A460;

font-size: 1em; font-family:Times new roman;

text-indent:0;

margin:0;

float:inherit;

border-radius: 3px;

}

summary:hover {background-color: #FF8C00}

details summary::-webkit-details-marker {

display: none;

font-size: 1em;

font-family:Times new roman;

font-weight: bold; }

a {font-size: 1.1em; font-family:Times new roman; }

pre {font-size: 1.1em; font-weight: bold; font-family:Times new roman; color: black; text-indent:0;}

footer {font-size: 1.1em; }

#shapka {

margin:0;

height: 8em;

width: 98em;

}

#vso

{

height: 34em;

width: 98em;

}

#podval {

margin-left: -2em;

height: 5em;

width: 94em;

background-color: #F4A460;

}

#menu {

margin: auto;

background-color: #FFDEAD;

box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

width: 40em;

}

#banner

{

margin: auto;

height: 3em;

width: 42em;

}

{

margin:0;

height: 6em;

width: 37.5em;

text-align:center;

}

#cat

{

float:left;

width: 8.1em;

text-align:center;

}

#dog

{

float:left;

margin-left: 8em;

width: 8.2em;

text-align:center;

}

#mau

{

float:left;

text-align:center;

width: 7.2em;

border-radius: 3px;

font-size: 0.9em;

}

#onas

{

float:left;

text-align:center;

width: 5.2em;

border-radius: 3px;

font-size: 0.9em;

}

#onas:hover {background-color: #FF8C00}

#mau:hover {background-color: #FF8C00}

#nizpre

{

margin:0;

border: 0.5px outset white;

float:left;

width: 9em;

height: 2.8em;

text-align:center;

background-color:#F4A460;

}

#logo{

float:left;

width: 38em;

height:8em;

}

#topcent{

float:left;

width: 20em;

height:7.2em;

text-align:center;

font-size: 1.1em;

font-family:Times new roman;

}

#topright{

float:left;

width: 32em;

height:8em;

}

#imya{

float:left;

width: 25em;

height:4.9em;

text-align:center;

}

#textx{

float:left;

width: 42em;

height:4.44em;

text-align:center;

font-size: 1.1em;

color: #FF0000; text-shadow:1px 1px 2px white, 0 0 1em white;

font-family:Times new roman;

font-weight: bold; font-family:Times new roman; text-align:center; text-transform: uppercase;

}

#email{

float:left;

width: 18em;

height:4.9em;

font-family:Times new roman;

font-size: 1em;

padding-left: 10px;

text-align: left;

}

#pets

{

margin: 1em 0em 1em 5%;

background-color: #fff;

border: 1px solid;

height: 19em;

width: 36em;

}

#fpet

{

float:left;

margin: 0.5em 0em 0.5em 0.5em;

}

#opet

{

float:right;

width:21em;

margin: 1em 0em 0em 1em;

}

.plus

{

margin: 0.5em ;

}

#letsme

{

margin: 1em 0em 0em 5%;

background-color: #fff;

border: 1px solid;

height: 22em;

width: 36em;

text-align: center;

}