Разработка сайта «Я помогаю детям» (Техническое задание и выбор средств реализации)

Содержание:

ВВЕДЕНИЕ

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

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

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

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

Объектом исследования является процесс разработки сайта.

Цель – разработать сайт «Я помогаю детям» с использованием HTML, CSS, PHP.

Задачи:

1. Проанализировать существующие языки для написания сайта;
2. Рассмотреть функциональные возможности HTML;
3. Рассмотреть источники по теме;
4. Разработать макет сайта;
5. Наполнить сайт информацией по теме;
6. Разработать руководство пользователя. 

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

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

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

Основные возможности программы: 

• ввод информации об организации;
• вывод информации об организации;
• регистрация/авторизация пользователей;
• возможность оставлять сообщения всем посетителям веб сайта;
• простой и удобный интерфейс для работы администратора.

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

• языки гипертекстовой разметки;
• языки программирования;
• базы данных;

Для создания описанного программного продукта наиболее удобным средством является СУБД MySql, так как это наиболее наглядное и простое средство.

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

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

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

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

• регистрация и авторизация клиентов с учётом прав пользователя;
• личный кабинет администратора;
• форум;
• информация в разделе «О нас»;
• расписание работы консультантов;
• список контактов (телефоны, e-mail).

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

Рисунок 1 – Структура файла index.php «Главная»

Для реализации текущих задач было принято решение разработать 5 модулей, которые будут связываться с СУБД и запрашивать либо изменять информацию.

Все настройки подключения к БД выведены в отдельный файл (Settings.php), в случае изменения расположения, имени, авторизационных данных, достаточно внести изменения в этот файл.

Все последующие модули выполняют подключение к этому файлу, для связи с БД.
Для реализации регистрации и авторизации были созданы файлы register.php и login.php соответственно (Приложение 2).

Данные функции предусматривают наличие ошибок при не соответствии требованиям (30 символов < Логин < 3 символов, Логин должен состоять из букв Латинского алфавита и т.д.).

Все модули представлены в Таблице 1.

Таблица 1 – Основные модули

Модуль	Описание
Settings.php	Модуль с настройками для связи с СУБД
Register.php	Модуль регистрации нового пользователя
Login.php	Модуль авторизации пользователя
Logout.php	Модуль для завершения авторизированного входа
Forum.php	Модуль для отображения раздела «Форум»

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

Для реализации необходимого функционала была создана база «mybase», с таблицами «users» для обеспечения процесса регистрации/авторизации, «about_cont» для хранения информации отображаемой на странице «О нас», «forum» для добавления, чтения информации для раздела «Форум».

Данные в полях «user_password» и «user_hash» - шифруются.

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

Рисунок 2 – ER модель

Cписок данных хранящихся в таблицах базы данных:

• информация о пользователях;
• контент для страницы «О нас»;
• контент для страницы «Форум».

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

Клиентская часть сайта состоит из нескольких страниц для отображения определённых разделов сайта.

Основные разделы сайта:

• Главная;
• О нас;
• Форум;
• Контакты.

На веб ресурсе реализованы несколько видов пользователей («Администратор», «Клиент» и «Гость»). Если посетитель авторизируется как «Администратор», ему становится доступен дополнительный раздел «Панель администратора», для управления и редактирования информации.

На странице «О нас», любой пользователь может оставить сообщение (Приложение 1). Данные отправляются в таблицу «forum» и выводятся на это же странице.

Чтобы авторизироваться/зарегистрироваться на ресурсе, необходимо нажать на кнопку «Войти», которая находится в «Шапке» сайта, чтобы попасть на страницу авторизации (рисунок 3).

Рисунок 3 – Кнопка «Войти»

Если пользователь не зарегистрирован, ему необходимо нажать на кнопку «Зарегистрироваться», чтобы попасть на страницу регистрации (рисунок 4).

Рисунок 4 – Страница авторизации

Чтобы оставить сообщение на форуме, необходимо зайти в раздел «Форум» и написать в форму сообщение, которое пользователь хочет оставить. После этого нажать на кнопку «Отправить» и сообщение появится в «Ленте сообщений» (Приложение 1).

ЗАКЛЮЧЕНИЕ

В процессе разработки данного веб ресурса, я обрёл навык работы с PHP в связке с MySql, что позволило мне открыть для себя новые способы разработки динамических веб страниц. Так, я смог упростить взаимодействие с элементами сайта, выведя их в отдельные файлы, организовал удобное обновление контента на определённой странице и реализовал функции обмена сообщениями.

Целью проекта являлось – разработать сайт «Я помогаю детям» с использованием HTML, CSS, PHP.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Основная литература:

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

Дополнительная литература:

1. Богданов, М.Р. Перспективные языки веб-разработки / М.Р. Богданов. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016
2. http://biblioclub.ru/index.php?page=book&id=428953
3. Никсон, Р. Создаем динамические web-сайты с помощью PHP, MySQL и JavaScript / Р. Никсон. - П.: Питер, 2011. - 496 с.
4. PHP, SQL [Electronic resource] / блог. - Россия, 2010.: http://phpsql.ru/.
5. Томсон, Л. Разработка Web-приложений на РНР и MySQL/ Л. Томсон. - М.: ДиаСофтЮП, 2003. - 672 с.
6. PHPForum [Электронный ресурс] /форум.- Россия, 2003. - Режим доступа: http://phpforum.ru. - Дата доступа: 09.02.2012.

ПРИЛОЖЕНИЕ 1

ПРИЛОЖЕНИЕ 2

Index.php

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Курсовая работа ВБИо-302 | Первушин Егор</title>

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

<link rel="shortcut icon" href="/img/favicon.ico">

</head>

<body>

<?php include "header.php";?> <!-- Подключаем содержимое header.php "Шапки сайта" -->

<div class="content">

<div class="slide">

<h1>Добро пожаловать на сайт благотвотрительного фонда <br> "Я ПОМОГАЮ ДЕТЯМ"</h1>

<h3>ДЕЛАЙТЕ ДОБРЫЕ ДЕЛА ВМЕСТЕ С НАМИ!</h3>

</div>

<div class="home">

<div class="column main">

<?php include "maincont.php";?> <!-- Подключаем содержимое maincont.php "Основоного контента главной страницы" -->

</div>

<div class="column sidebar">

<?php include "sidebar.php";?> <!-- Подключаем содержимое sidebar.php "Бокового раздела" -->

</div>

</div>

</div>

<?php include "footer.php";?> <!-- Подключаем содержимое footer.php "Подвала сайта" -->

</body>

</html>

About.php

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Курсовая работа ВБИо-302 | Первушин Егор</title>

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

<link rel="shortcut icon" href="/img/favicon.ico">

</head>

<body>

<?php include "header.php";?>

<div class="content">

<div class="home">

<div class="column main">

<h2>О нас</h2>

<?php

// Соединямся с БД

include "admin/settings.php";

// Читаем и выводим информацию из БД а именно таблицы about_cont и столбца content

$sql = mysqli_query($link, 'SELECT `content` FROM `about_cont`');

while ($result = mysqli_fetch_array($sql)) {

echo "{$result['content']}<br>";

}

?>

</div>

<div class="column sidebar">

<?php include "sidebar.php";?>

</div>

</div>

</div>

<?php include "footer.php";?>

</body>

</html>

Header.php

<?php

include "admin/settings.php";

//УЗНАЁМ ТЕКЩЕГО ПОЛЬЗОВАТЕЛЯ!!!

$sql = mysqli_query($link, "SELECT user_login FROM users WHERE user_hash= '".$_COOKIE['hash']."' ");

while ($result = mysqli_fetch_array($sql)) {

$username = $result['user_login'];

}

if ($username == '') {

$username = 'гость';

}

?>

<div class="header">

<div class="logo">

<a href="index.php"><img src="img/logo.png" alt=""></a>

<h4>Привет<b> <?php echo "$username"; ?></b>!</h4>

</div>

<div class="headcont">

</div>

<div class="menu">

<a href="index.php">Главная</a>

<a href="about.php">О нас</a>

<a href="forum.php">Форум</a>

<a href="contacts.php">Контакты</a>

<a href="admin/login.php" class="btn">Войти</a>

<a href="admin/logout.php" class="btn2">Выйти</a>

</div>

</div>

Footer.php

<div class="footer">

<p>Все права защищены © Егор Первушин / МФПУ "УНИВЕРСИТЕТ" 2019</p>

</div>

Forum.php

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Курсовая работа ВБИо-302 | Первушин Егор</title>

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

<link rel="shortcut icon" href="/img/favicon.ico">

</head>

<body>

<?php include "header.php";?>

<div class="content">

<div class="home">

<div class="column main">

<h2>Форум</h2>

<?php

// Соединямся с БД

include "admin/settings.php";

// Читаем и выводим информацию из БД а именно таблицы users и столбца user_login

$sql = mysqli_query($link, 'SELECT `user_name`,`user_content` FROM `forum`');

while ($result = mysqli_fetch_array($sql)) {

echo "<div class=\"post\"><h5 class=\"user-name\">{$result['user_name']}</h5><p>{$result['user_content']}</p></div>";

}

?>

<div class="make-post">

<h2>Отправить сообщение:</h2>

<?php

include "settings.php";

//УЗНАЁМ ТЕКЩЕГО ПОЛЬЗОВАТЕЛЯ!!!

$sql = mysqli_query($link, "SELECT user_login FROM users WHERE user_hash= '".$_COOKIE['hash']."' ");

while ($result = mysqli_fetch_array($sql)) {

$username = $result['user_login'];

}

?>

<?php

// Соединямся с БД

include "admin/settings.php";

// Вносим информацию из формы БД а именно таблицы about_cont и столбца content

$text = $_POST['text'];

if ($text != '') {

mysqli_query($link,"INSERT INTO forum SET user_content='$text', user_name='$username'");

header("Refresh: 0");

}

?>

<form method="POST">

<textarea name="text" id="postarea" required></textarea>

<br>

<input name="submit" type="submit" value="Отправить">

</form>

</div>

</div>

<div class="column sidebar">

<?php include "sidebar.php";?>

</div>

</div>

</div>

<?php include "footer.php";?>

</body>

</html>

Login.php

<?php

include "settings.php";

//УЗНАЁМ ТЕКЩЕГО ПОЛЬЗОВАТЕЛЯ!!!

$sql = mysqli_query($link, "SELECT user_login FROM users WHERE user_hash= '".$_COOKIE['hash']."' ");

while ($result = mysqli_fetch_array($sql)) {

$username = $result['user_login'];

}

//ЕСЛИ ПОЛЬЗОВАТЕЛЬ НЕ АДМИН КИДАЕМ НА ГЛАВНУЮ

if ($username == 'admin') {

header("Location: admin.php"); exit();

}

?>

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

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

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

</head>

<body style="text-align: center;">

<?php

// Страница авторизации

// Функция для генерации случайной строки

function generateCode($length=6) {

$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHI JKLMNOPRQSTUVWXYZ0123456789";

$code = "";

$clen = strlen($chars) - 1;

while (strlen($code) < $length) {

$code .= $chars[mt_rand(0,$clen)];

}

return $code;

}

// Соединямся с БД

include "settings.php";

if(isset($_POST['submit']))

{

// Вытаскиваем из БД запись, у которой логин равняеться введенному

$query = mysqli_query($link,"SELECT user_id, user_password FROM users WHERE user_login='".mysqli_real_escape_string($link,$_POST['login'])."' LIMIT 1");

$data = mysqli_fetch_assoc($query);

// Сравниваем пароли

if($data['user_password'] === md5(md5($_POST['password'])))

{

// Генерируем случайное число и шифруем его

$hash = md5(generateCode(10));

// Записываем в БД новый хеш авторизации и IP

mysqli_query($link, "UPDATE users SET user_hash='".$hash."' ".$insip." WHERE user_id='".$data['user_id']."'");

// Ставим куки

setcookie("id", $data['user_id'], time()+60*60*24*30, "/");

setcookie("hash", $hash, time()+60*60*24*30,"/");

// Переадресовываем на страницу админки

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

header("Location: admin.php"); exit();

}

else {

header("Location: ../index.php"); exit();

}

}

else

{

echo "<h2>Вы ввели неправильный логин / пароль</h2>";

}

}

?>

<?php

include "settings.php";

//УЗНАЁМ ТЕКЩЕГО ПОЛЬЗОВАТЕЛЯ!!!

$sql = mysqli_query($link, "SELECT user_login FROM users WHERE user_hash= '".$_COOKIE['hash']."' ");

while ($result = mysqli_fetch_array($sql)) {

$username = $result['user_login'];

}

?>

<a href="../index.php"><img src="../img/logo.png" alt=""></a>

<h2 class="hello">Привет <b><?php echo "$username"; ?></b> !</h2>

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

<form method="POST">

Логин: <br>

<input name="login" type="text" required placeholder="Введите Ваш логин..."><br>

Пароль: <br>

<input name="password" type="password" required placeholder="Введите Ваш пароль..."><br>

<input name="submit" type="submit" value="Войти">

</form>

<h2>Ещё не зарегистрированы?</h2>

<a href="register.php"><input type="submit" value="Зарегистрироваться"></a>

</body>

</html>

Register.php

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Курсовая работа ВБИо-302 | Первушин Егор</title>

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

<link rel="shortcut icon" href="/img/favicon.ico">

</head>

<body style="text-align: center;">

<?php

// Соединямся с БД

include "settings.php";

if(isset($_POST['submit']))

{

$err = [];

// проверям логин

if(!preg_match("/^[a-zA-Z0-9]+$/",$_POST['login']))

{

$err[] = "Логин может состоять только из букв английского алфавита и цифр";

}

if(strlen($_POST['login']) < 3 or strlen($_POST['login']) > 30)

{

$err[] = "Логин должен быть не меньше 3-х символов и не больше 30";

}

// проверяем, не сущестует ли пользователя с таким именем

$query = mysqli_query($link, "SELECT user_id FROM users WHERE user_login='".mysqli_real_escape_string($link, $_POST['login'])."'");

if(mysqli_num_rows($query) > 0)

{

$err[] = "Пользователь с таким логином уже существует в базе данных";

}

// Если нет ошибок, то добавляем в БД нового пользователя

if(count($err) == 0)

{

$login = $_POST['login'];

// Убераем лишние пробелы и делаем двойное хеширование

$password = md5(md5(trim($_POST['password'])));

mysqli_query($link,"INSERT INTO users SET user_login='".$login."', user_password='".$password."'");

header("Location: login.php"); exit();

}

else

{

print "<b>При регистрации произошли следующие ошибки:</b><br>";

foreach($err AS $error)

{

print $error."<br>";

}

}

}

?>

<a href="../index.php"><img src="../img/logo.png" alt=""></a>

<h2>Регистрация:</h2>

<form method="POST">

Логин: <br>

<input name="login" type="text" required placeholder="Придумайте Логин..."><br>

Пароль: <br>

<input name="password" type="password" required placeholder="Придумайте пароль..."><br>

<input name="submit" type="submit" value="Зарегистрироваться">

</form>

</body>

</html>

Settings.php

<?php

// Настройки БД на сервере (адрес, логин, пароль, название базы)

$link=mysqli_connect("localhost", "root", "root", "mybase");

?>

Admin.php

<?php

include "settings.php";

//УЗНАЁМ ТЕКЩЕГО ПОЛЬЗОВАТЕЛЯ!!!

$sql = mysqli_query($link, "SELECT user_login FROM users WHERE user_hash= '".$_COOKIE['hash']."' ");

while ($result = mysqli_fetch_array($sql)) {

$username = $result['user_login'];

}

//ЕСЛИ ПОЛЬЗОВАТЕЛЬ НЕ АДМИН КИДАЕМ НА ГЛАВНУЮ

if ($username != 'admin') {

header("Location: ../index.php"); exit();

}

?>

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Админка</title>

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

</head>

<body>

<h2>Добро пожаловать в панель администратора!</h2>

<div class="menu">

<a href="../index.php">↩ Вернуться на сайт</a>

</div>

<h4>Список зарегистрированых пользователей:</h4>

<?php

// Соединямся с БД

include "settings.php";

// Читаем и выводим информацию из БД а именно таблицы users и столбца user_login

$sql = mysqli_query($link, 'SELECT `user_login` FROM `users`');

while ($result = mysqli_fetch_array($sql)) {

echo "- {$result['user_login']}<br>";

}

?>

<h4>Текущее содержимое страницы "О НАС"</h4>

<?php

// Соединямся с БД

include "admin/settings.php";

// Читаем и выводим информацию из БД а именно таблицы about_cont и столбца content

$sql = mysqli_query($link, 'SELECT `content` FROM `about_cont`');

while ($result = mysqli_fetch_array($sql)) {

echo "{$result['content']}<br>";

}

?>

<h4>Редактировать содержимое страницы "О НАС"</h4>

<?php

// Соединямся с БД

include "settings.php";

// Вносим информацию из формы БД а именно таблицы about_cont и столбца content

$text = $_POST['text'];

if ($text != '') {

mysqli_query($link, "UPDATE `about_cont` SET `content`='$text' WHERE 1");

}

?>

<form method="POST">

<textarea name="text" id="" cols="30" rows="10" required></textarea>

<br>

<input name="submit" type="submit" value="Изменить">

</form>

</body>

</html>

Logout.php

<?php

setcookie("hash", "","","/");

setcookie("id", "","","/");

header("Location: ../index.php"); exit();

?>