Файл: Разработка WEB-ресурса по обмену книгами.pdf

Рисунок 11

Страница ‘Trade offers’ выглядит следующим образом (рисунок 12). На странице формируется динамически сто последних предложений обмена, для удобства сразу же присутствует кнопка для перенаправления на форму написания сообщения автору объявления. При переходе посредством нажатия на эту кнопку строка адресата заполняется автоматически. Для неаутентифицированного пользователя кнопка ‘Add your trade offer!’ отсутствует. Данная кнопка перенаправляет пользователя на внутренний пользовательский интерфейс (см. рисунок 18).

Рисунок 12

Страница ‘Literature news’ выглядит следующим образом (рисунок 13) и формируется динамически из заголовков и кратких содержаний новостей литературы, содержащихся в базе данных. Внутренние страницы, содержащие сами новости, выглядят так, как показано на рисунке 14, и формируются динамически с помощью метода GET.

Рисунок 13

Рисунок 14

Страница пользователя выглядит следующим образом (рисунок 15) и генерируется динамически с помощью метода GET. Присутствует возможность удалять книги из всех разделов, кроме readed и reviews. Также происходит проверка данных и в случае, если страница не принадлежит пользователю, она выглядит несколько иначе (рисунок 16), то есть отсутствуют кнопки работы с контентом на своей страницы, редактирования профиля и добавления книг в разделы, но присутствует кнопка для отправки сообщения пользователю.

Рисунок 15

Рисунок 17

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

Рисунок 18

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

Рисунок 19

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

Рисунок 20

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

---

Рисунок 21

При нажатии на кнопку ‘answer’, пользователь переходит на страницу с формой отправки сообщения (рисунок 22), где с помощью метода GET поле адресата автозаполняется. В случае, если пользователь просто перешел на страницу «booktrade.org/pm.php», поле остается пустым. Также при попытке перейти на форму отправления сообщения происходит проверка прав пользователя и в случае, если пользователь забанен, форма не выводится. Сообщения отправляются с помощью метода POST.

Рисунок 22

Для завершения сессии пользователь должен нажать на кнопку ‘Log out’ (рисунок 23) на любой из страниц основного модуля.

Рисунок 23

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

«Шапка» для администратора несколько отлична от «шапки» обычного пользователя (рисунок 24). Помимо основных кнопок, добавляется также кнопка перехода на панель администрирования.

Рисунок 24

На странице ‘Users’ reviews’ у администратора, в отличие от обычного пользователя, присутствует возможность редактировать любой обзор, а не только обзор своего авторства (рисунок 25).

Рисунок 25

Также, в отличие от обычного пользователя, присутствует кнопка редактирования текста новости из раздела ‘Literature news’ в случае перехода на страницу с основным содержанием. Форма редактирования текста новости выглядит следующим образом (рисунок 26) и формируется динамически с помощью метода GET. Отправляются измененные данные с помощью метода POST.

Рисунок 26

Непосредственно панель администратора выглядит следующим образом (рисунок 27). Данные отправляются с помощью метода POST.

Рисунок 27

Кнопка ‘Library’ ведет на соответствующую страницу (рисунок 28) и позволяет администратору просматривать библиотеку (таблицу books) сайта. Страница доступна только пользователям с правами администратора.

Рисунок 28

Также администратор может удалять записи из чужих профилей, кроме readed (рисунок 29).

---

Рисунок 29

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

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

Рисунок 30

После нажатия на кнопку пользователь попадает на страницу регистрации, где он обязательно должен заполнить поля, обозначенные «звездочкой», и по желанию заполнить остальные поля (рисунок 31).

Рисунок 31

После заполнения полей пользователь должен нажать на кнопку ‘Register’ в нижней части страницы (рисунок 32).

Рисунок 32

Когда пользователь зарегистрировался, ему будет выдано следующее сообщение (рисунок 33). Для продолжения работы он может нажать как на ‘Log in’, так и на ‘Home page’, после чего пройти аутентификацию, нажав на кнопку ‘LOG IN’ в основном модуле сайта.

Рисунок 33

Для того, чтобы пройти аутентификацию, пользователь должен заполнить оба поля на странице аутентификации, после чего нажать на кнопку ‘Log in’ (рисунок 34).

Рисунок 34

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

Рисунок 35

После перехода на персональную страницу, пользователь может добавить книгу в какой-либо из разделов, нажав на кнопку ‘Add book to readed, wanted or trade offers’, либо отредактировать персональную информацию, нажав на кнопку ‘Edit profile’, либо вернуться на домашнюю страницу, нажав на кнопку ‘Back to home page’ (рисунок 36).

Рисунок 36

Для добавления книги в какой-либо из разделов, пользователь должен заполнить все доступные поля, относящиеся к интересующей его секции, и нажать соответствующую кнопку (рисунок 37).

---

Рисунок 37

Для редактирования профиля пользователь должен заполнить желаемые поля и нажать на кнопку ‘OK’ (рисунок 38).

Рисунок 38

Для добавления своего обзора, пользователь должен перейти в раздел ‘Users’ reviews’ основного модуля и нажать на кнопку ‘Add your review!’ (рисунок 39). Таким же образом пользователь может перейти к форме добавления предложения на обмен.

Рисунок 39

Для отправки сообщения другому пользователю, необходимо перейти на его страницу и нажать на кнопку ‘Private mail’ (рисунок 40).

Рисунок 40

Далее необходимо ввести желаемое сообщение в форму и нажать ‘Send’ (рисунок 41).

Рисунок 41

Для просмотра личных сообщений необходимо нажать на кнопку ‘PM’ в «шапке» основного модуля (рисунок 42). Для просмотра сообщения – нажать ‘Open’ (рисунок 43). И для ответа на сообщение – нажать ‘Answer’ (рисунок 44).

Рисунок 42

Рисунок 43

Рисунок 44

Заключение

В ходе написания курсовой работы был разработан веб-ресурс «BookTrade.org», цель создания которого – обмен книгами и коммуникация между пользователями, а также возможность заинтересовать бывалых любителей книг чем-то новым. Большая часть разделов и компонентов разработанного сайта направлена на выполнение этих целей: случайная книга, случайная цитата и случайные рецензии позволяют пользователям отыскать для себя что-то новое, а реализация интерфейсов отправки сообщения и составления персональной библиотеки позволяют отыскать нового собеседника или же попросту обменяться книгами.

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

---

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

Таким образом, все поставленные задачи выполнены и все желаемые цели достигнуты.

Список литературы

1. Мейер, Б. Инструменты, алгоритмы и структуры данных / Б. Мейер. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016.
2. Савельева, Н.В. Язык программирования PHP / Н.В. Савельева. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016
3. Прохоренок, Н. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н. Прохоренок. - СПб.: БХВ - Петербург., 2010. - 900 с.
4. Электронный ресурс: [https://stackoverflow.com/]
5. Электронный ресурс: [https://toster.ru/]
6. Электронный ресурс: [https://habr.com/]
7. Электронный ресурс: [http://htmlbook.ru/].
8. Электронный ресурс: [https://www.internet-technologies.ru/]
9. Электронный ресурс: [https://php.net/]
10. Электронный ресурс: [https://php.su/]

Приложение

Исходные коды

connect.php

<?php

$connection = mysqli_connect('localhost', 'root', '');

$select_db = mysqli_select_db($connection, 'booktrade.org');

mysqli_query($connection, "SET NAMES utf8");

?>

header.php

<style type="text/css">

h1 {

width: 898px;

height: 50px;

border: 1px dashed #777;

font-variant: small-caps;

}

.button {

display: block;

width: 120px;

height: 30px;

border: 1px solid #094b9c;

background: #3986c9;

color: #fff;

float: left;

font-size: 11pt;

padding-top: 13px;

margin-left: 5px;

margin-right: 5px;

margin-bottom: 20px;

margin-top: -5px;

cursor: pointer;

}

.button1 {

margin-left: 322px;

}

.button:hover {

background: #094b9c;

color: #efefef;

border: 1px solid #094b9c;

}

</style>

<div class="header">

<h1>BookTrade</h1>

<a href="login.php"><div class="button button1">LOG IN</div></a>

<a href="register.php"><div class="button">REGISTER</div></a>

</div>

aheader.php

<style type="text/css">

h1 {

width: 898px;

height: 50px;

border: 1px dashed #777;

font-variant: small-caps;

}

.button {

display: block;

width: 120px;

height: 30px;

border: 1px solid #094b9c;

background: #3986c9;

color: #fff;

float: right;

font-size: 11pt;

padding-top: 13px;

margin-top: -45px;

margin-bottom: 15px;

cursor: pointer;

}

.button:hover {

background: #094b9c;

color: #efefef;

}

</style>

<div class="header">

<h1>BookTrade</h1>

<p>Welcome,

<?php

$username = $_SESSION['username'];

echo "<a href='user.php?name=$username' title='personal page'>$username</a>! <a href='messages.php'>PM</a>";

?>

<?php if ($_SESSION['rights'] == 2) {

echo "<a href='adminpanel.php'> Go to admin. panel </a>";

---