Размещено на http://allbest.ru/

Размещено на http://allbest.ru/

Кафедра «Информатика и программное обеспечение»

КУРСОВОЙ ПРОЕКТ

Разработка фотохостинга

по дисциплине «Разработка и администрирование Web-узлов»

Выполнил: студент Климов А. В.

Преподаватель: Белов Е. А.

Брянск 2013



Задание на курсовую работу

Разработать фотохостинг, в котором будут реализованы добавление альбомов, изображений, комментариев, регистрация пользователей. Управление сайтом будет осуществляться через интерфейс “Администратора”.



Содержание

Введение

1. Теоретическая часть

2. Аналитическая часть

3. Конструкторская часть

4. Руководство пользователя

5. Руководство администратора

6. Экспериментальная часть

Заключение

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



Введение

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



1. Теоретическая часть

Веб-сайт (от английского website, от web -- паутина, веб и site -- «место») - это совокупность связанных между собой веб-страниц, которые доступны в интернете через протоколы HTTP/HTTPS. Совокупность всех общедоступных веб-сайтов называют всемирной паутиной или сетью. Страницы веб-сайта объединены не только общим корневым адресом, но и темой, логической структурой, оформлением и/или авторством.

Сайты делятся на несколько категорий по различным признакам.

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

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

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

Так же сайты делятся по видам верстки:

Вёрстка с помощью слоёв. Слои представляют собой структурные элементы, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пикселя. Скрипты позволяют изменять параметры слоя динамически. Это дает возможность создавать на странице разные эффекты, такие как выпадающие меню, игры, разворачивающиеся баннеры, плавающие окна и прочее. До недавнего времени в качестве основных инструментов верстки выступали фреймы и таблицы. Фреймы, ввиду их некоторых проблем [1], уходят в прошлое: например, стандарт HTML 5 более не включает в себя поддержку фреймов [2].

Вёрстка с помощью таблиц. Браузеры преднамеренно расценивают таблицу как один объект, из-за чего содержимое таблицы не отображается до тех пор, пока оно целиком не будет загружено на локальный компьютер [3]. При использовании таблицы в качестве каркаса для размещения элементов веб-страницы, её исходное преимущество обращается в недостаток, поскольку приводит к задержке вывода содержимого. Следует учитывать также и растущий объем веб-страниц при активном использовании таблиц, особенно в случае их вложенности друг в друга. Всё это приводит к тому, что табличная верстка вызывает ненужные задержки вывода информации в браузере.

HTML (HyperText Markup Language, язык разметки гипертекста) -- это система верстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ ее представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит [4].

PHP (англ. PHP: Hypertext Preprocessor - «PHP: препроцессор гипертекста»; первоначально Personal Home Page Tools - «Инструменты для создания персональных веб-страниц») - скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических веб-сайтов.

CSS (Каскадные таблицы стилей) - это язык, содержащий набор средств для описания внешнего вида отображения любых HTML-документов. С его помощью можно полностью управлять стилем и расположением каждого элемента Web-страницы, что проще и гораздо функциональнее использования обычного набора HTML-тегов.

AJAX (Asynchronous Javascript and XML -- «асинхронный JavaScript и XML») - подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся более быстрыми и удобными.

База данных - представленная в объективной форме совокупность самостоятельных материалов (статей, расчётов, нормативных актов, судебных решений и иных подобных материалов), систематизированных таким образом, чтобы эти материалы могли быть найдены и обработаны с помощью электронной вычислительной машины (ЭВМ).

MySQL - это одна из самых популярных и самых распространенных СУБД (система управления базами данных) в интернете. Она не предназначена для работы с большими объемами информации, но ее применение идеально для интернет сайтов, как небольших, так и достаточно крупных. MySQL отличатся хорошей скоростью работы, надежностью, гибкостью. Работа с ней, как правило, не вызывает больших трудностей. Поддержка сервера MySQL автоматически включается в поставку PHP. Приложение на РНР, использующее для хранения информации базу данных (в частности MySql) всегда работает быстрее приложения, построенного на файлах. Дело в том, что базы данных написаны на языке C++, и написать на PHP программу, которая работала бы с жёстким диском эффективнее базы данных - задача неразрешимая по определению, поскольку программы на PHP в принципе работают медленнее, чем программы на C++, так как РНР - интерпретатор, а С++ - компилятор.

Apache HTTP-сервер - свободный веб-сервер. Apache является кроссплатформенным ПО, поддерживает операционные системы Linux, BSD, Mac OS, Microsoft Windows, Novell NetWare, BeOS. Основными достоинствами Apache считаются надёжность и гибкость конфигурации. Он позволяет подключать внешние модули для предоставления данных, использовать СУБД для аутентификации пользователей, модифицировать сообщения об ошибках и т. д. Поддерживает IPv6.

фотохостинг комментирование пользователь браузер



2. Аналитическая часть

Рассмотрим сайты аналоги:

Flickr (http://www.flickr.com) - сервис, предназначенный для хранения и дальнейшего использования пользователем цифровых фотографий и видеороликов. Является одним из первых Web 2.0 сервисов. Один из самых популярных сайтов среди блогеров для размещения фотографий.

Недостатки:

1. Для загрузки большего количества изображения нужно платить деньги.

2. Загрузка изображений в высоком разрешение требует денег.

3. Перегруженный дизайн.

Рис.1. Сайт http://www.flickr.com

FirePic (http://firepic.org/) - бесплатный фотохостинг без регистрации для публикации фотографий, картинок и других изображений на форумах, в чатах, блогах и других сайтах сети Интернет. При помощи FirePic вы можете поделиться интересной картинкой или вашей новой фотографией с друзьями и собеседниками.

Недостатки:

1. Малый объем загружаемого изображения.

2. Отсутствие комментариев.

3. Отсутствие рейтинга.

Рис.2. Сайт http://firepic.org/

Vfl (http://vfl.ru/) - это бесплатный фотохостинг без регистрации.

Недостатки:

1. Отсутствие комментариев.

2. Ограничение на объем загружаемых изображений.

3. Удаление изображений в случае не активности

Рис.3. Сайт http://vfl.ru

3. Конструкторская часть

Для разработки данного курсового проекта использовался текстовый редактор Sublime Text 2.

Сайт состоит из следующих элементов:

· index.php - начальная страница сайта

· add_album.php - файл для создания нового альбома

· connect_DB.php - файл подключения к базе данных

· registration.php - файл для регистрации новых пользователей

· code.php - файл с основными функциями сайта

· album.php - файл для отображения альбома

· pwd_change.php - файл для смены пароля у пользователей

· image.php - файл для отображения изображения

· upload.php - файл для загрузки изображения на сервер

· rating.php - файл для вычисления рейтинга изображения

· userprofile.php - файл для отображения профиля пользователя

· style.css - стилевой файл оформления

· js - папка для хранения скриптов

В начале разработки сайта были созданы основные таблицы базы данных MySQL:

1. Таблица пользователей:

CREATE TABLE users ( id INT(10) NOT NULL AUTO_INCREMENT PRIMARY KEY,

login VARCHAR(20),

pwd VARCHAR(20),

email VARCHAR(20),

firstName VARCHAR(20) NULL,

lastName VARCHAR(20) NULL,

skype VARCHAR(20) NULL,

login_hash VARCHAR(64),

status VARCHAR(10)) DEFAULT `user';

2. Таблица альбомов:

CREATE TABLE albums ( id INT(10) NOT NULL AUTO_INCREMENT PRIMARY KEY,

id_user INT(10),

name VARCHAR(30),

discrip VARCHAR(30));

3. Таблица изображений:

CREATE TABLE photo ( id INT(10) NOT NULL AUTO_INCREMENT PRIMARY KEY,

id_album INT(10),

path VARCHAR(60)NOT NULL,

name VARCHAR(60) NOT NULL,

rating INT(10) DEFAULT 0);

4. Таблица комментариев:

CREATE TABLE comments AUTO_INCREMENT PRIMARY KEY,

id_user INT(10),

id_img INT(10),

comment TEXT);

Первой возможность сайта была реализован регистрация пользователей. Форма регистрации состоит из 4 полей: Username, Password, Confirm, Email.



<form method="post" action="<? echo "registration.php";?>">

<table><tr>

<td><label for="registrLogin">Username:</label></td>

<td><input type="text" value="" id="login" name="registrLogin"/></td>

</tr><tr>

<td><label for="registrPwd">Password:</label></td>

<td><input type="password" value="" name="registrPwd"/></td>

</tr><tr>

<td><label for="registrPwdConfirm">Confirm:</label></td>

<td><input type="password" value="" name="registrPwdConfirm"/></td>

</tr><tr>

<td><label for="registrEmail">Email:</label></td>

<td><input type="text" value="" id="email" name="registrEmail"/></td>

</tr></table>

Обработка формы осуществляется в файле registration.php. Если запросы от формы не пустые, то идет обработка введённой информации с помощью функции clearData для безопасности:

function clearData($data) {

$data = trim(strip_tags($data));

return $data;}

Если все поля соответсвуют требованиям они вносятся в таблицу users:

$sql = "INSERT INTO users (login, pwd, email, login_hash) VALUES ('$l', '$p', '$e', '$lh')";mysql_query($sql) or die(mysql_error());

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



$_SESSION["login"] = $login;

$_SESSION["id"] = $user_result["id"];

$_SESSION["status"] = $user_result["status"];

header("Location: index.php");

exit();

Окно логина состоит из двух полей Username и Password так же имеется checkbox Remember me (сохранение пользователя в “куках”). Если введены данные происходит запрос на существование такого пользователя и проверка правильности введённого пароля:

$query = mysql_query("SELECT id, pwd, status FROM users WHERE login = '$login'");

$user_result = mysql_fetch_array($query, MYSQL_ASSOC);

$pwd = $user_result["pwd"];

if ($user_result["pwd"] != $_POST["pwd"]){$error_msg = "Invalid password";}

При совпадение пароля происходит входит пользователя, данные сохраняются в сессии, а если был выбран пункт Remember me то и в “куках”:

$_SESSION["login"] = $login;

$_SESSION["id"] = $user_result["id"];

$_SESSION["status"] = $user_result["status"];

if (isset($_REQUEST["rememberUser"])){

$login_hash = md5($login);

setcookie("login", $login_hash.$key , time()+3600);}

header("Location: index.php");

exit();



При загрузке изображения на сервер происходит проверка на формат данных:

function cheackeType($type)

{$flag = false;

switch ($type) {case 'image/bmp':$flag = true;break;

case 'image/jpeg':$flag = true;break;

case 'image/gif':$flag = true; break;

case 'image/png': $flag = true; break;

default: $flag = false; break;}

return $flag;}

Если данная функция возвращает True то происходит загрузка изображения в папку upload на сервере:

$uploadfile = $uploaddir.basename($_FILES['img']['name']);

$pathFile = "./upload/".basename($_FILES['img']['name']);

if (cheackeType($_FILES["img"]["type"]) and !empty($_FILES["img"]["name"]))

{if (copy($_FILES["img"]["tmp_name"], $uploadfile))

echo "OK"; }

Если пользователь вошел на сайт под своей учетной записью, то у него появляется возможность добавления альбомов. Для этого надо заполнить поля формы:

<form action="index.php" method="post">

<table><tr>td><label for="nameAlbum">Name</label></td>

<td><input type="text" value="" name="nameAlbum"/></td>

</tr><tr><td><label for="description">Description</label></td>

<td><input type="text" value="" name="description"/></td></tr>

</table><input type="submit" value="Add"></form>

За обработку данной формы служит эта часть когда:

if(!empty($_POST["nameAlbum"])){

$id_user = $_SESSION["id"];

$nameAlbum = $_POST["nameAlbum"];

$discrip = $_POST["description"];

if (checkAlbum($_POST["nameAlbum"])){

$album_query = "INSERT INTO albums (id_user, name, discrip)

VALUES ('$id_user', '$nameAlbum',

'$discrip')";

mysql_query($album_query) or die(mysql_error());

}else die("Error");}

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

$count_result = mysql_query("SELECT COUNT(*) FROM photo

WHERE id_album = '$img[id_album]'");

$count_photo = mysql_fetch_array($count_result);

$count = $count_photo[0];

И переменная, отвечающая за позицию открытого изображения в альбоме:

$pos_result = mysql_query("SELECT COUNT(*) FROM photo

WHERE id_album = '$img[id_album]' andid < '$id_img'");

$pos_arr = mysql_fetch_array($pos_result);

$pos = $pos_arr[0];



Высчитывается id следующего и предыдущего изображения:

$nxt_pht_result = mysql_query("SELECT id FROM photo

WHERE id_album = '$img[id_album]' LIMIT $next, 1");

$next_pht_query = mysql_fetch_assoc($nxt_pht_result);

$next_photo = $next_pht_query["id"];

$prv_pht_result = mysql_query("SELECT id FROM photo

WHERE id_album = '$img[id_album]' LIMIT $prev, 1");

$prv_pht_query = mysql_fetch_assoc($prv_pht_result);

$previos_photo = $prv_pht_query["id"];

Под изображениями в альбоме находится форма для отправки комментария. После ее отправки текст сообщения и id пользователя заносится в таблицу comments:

if (!empty($_POST["comment"])){

$comment = clearData($_POST["comment"]);

$add_comment = mysql_query("INSERT INTO comments (comment, id_user, id_img)

VALUES ('$comment', '$_SESSION[id]', '$id_img')");

header("Location: image.php?id=$id_img");}

Для вывода комментариев сначала выполняется запрос к таблице comments где происходит выбор всех комментариев к этому изображению в порядке убывания id:

$comments_result = mysql_query("SELECT id, id_user, id_img, comment

FROM comments WHERE id_img = '$_GET[id]' ORDER BY id DESC");



Для вывода комментариев используется цикл while:

while ($commentList = mysql_fetch_assoc($comments_result)) {

$login_comment_result = mysql_query("SELECT login FROM usersWHERE id = '$commentList[id_user]'");$login_comment = mysql_fetch_assoc($login_comment_result);?>

<div class="comment_user"><p class = "user_comment"><a href="userprofile.php?id=<? echo $commentList['id_user']?>"> <?echo $login_comment["login"]; ?></a></p><p class="comment_text"><? echo $commentList["comment"] ?></p>

<?phpif ($_SESSION["status"] == "admin" or $commentList["id_user"] == $_SESSION["id"])

echo "<p class = 'delete_comment'><a href=image.php?id=$id_img&del=$commentList[id]>delete</a></p>";

Удаление комментариев происходит с помощью запроса GET в котором передается id комментария, при существование переменной $_GET[“del”] происходит удаление комментария из базы:

mysql_query("DELETE FROM comments WHERE id = '$id_comm'");

Для создания рейтинга была созданы таблица, в которой хранятся ip-адреса пользователей проголосовавших за изображение. Для того чтобы при голосование страница не перезагружалась, используется AJAX:

$(".rating").click(function(){

var id = $(this).attr("id"); var dataString = 'id=' + id; var parent = $(this);

$(this).fadeOut(300);

$.ajax({

type: "POST",url: "rating.php", data: dataString, cache: false,

success: function(html)

{parent.html(html); parent.fadeIn(300)}

});return false; });

Обработка рейтинга происходит в файле rating.php. Сначала переменной присваивается значение ip-адреса пользователя:

$ip = $_SERVER["REMOTE_ADDR"];

$ip_sql = mysql_query("SELECT ip_add FROM img_ip

WHERE img_id='$id' and ip_add='$ip'");

$count = mysql_num_rows($ip_sql);

if ($count == 0)

Если такой записи не существует, то происходит увеличение рейтинга и вывод нового:

mysql_query("UPDATE photo SET rating = rating + 1 WHERE id = '$id'");

mysql_query("INSERT INTO img_ip (ip_add, img_id) VALUES ('$ip', '$id')");

$rating_result = mysql_query("SELECT rating FROM photo WHERE id = '$id'");

$row = mysql_fetch_array($rating_result);

$rating = $row["rating"];

echo $rating;

Для подключения к базе используется файл connect_DB.php:

mysql_connect("localhost", "root", "75da31ed0");

mysql_select_db("web") or die(mysql_error());



Для вывода изображений на главную отвечает эта часть кода:

elseif (!isset($_SESSION["login"])) {$top_result = mysql_query("SELECT id, name, path, rating FROM photo ORDER BY rating DESC LIMIT 9");

while($top_photo = mysql_fetch_assoc($top_result)){

$id_album = $albumsList["id"];echo "<div class='photo_wrapper'><li class='albumPhoto'>

<a href='image.php?id=$top_photo[id]'><img class='album_cover' src='$top_photo[path]' title='$top_photo[name]'></a></li>";echo "</div>";}}

4. Руководство пользователя

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

Рис.4.Главная страница сайта



Для входа необходимо на жать кнопку Login и ввести данные пользователя если вы еще не регистрировались то надо нажать кнопку Registration и заполнить все поля в всплывающем окне после чего нажать кнопку Registration (рис.5).

Рис.5. Регистрация

После входа вы можете создать альбом для этого необходимо нажать на кнопку Add album и ввести название альбома и его описание (описание вводить не обязательно) (рис.6).



Рис.6. Добавление альбома

Для просмотра изображения и комментариев к нему надо нажать на желаемое изображение. Под изображение находится рейтинг и имя пользователя, который загрузил его. Для увеличения рейтинга необходимо на него нажать. Ссылки next и previous отвечают за навигацию внутри альбома (рис.7).

Рис.7. Просмотр изображения



Для загрузки изображения необходимо нажать на кнопку Choose File, выбрать файл и затем нажать upload (рис.8).

Рис.8. Загрузка изображения

5. Руководство администратора

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

Рис.9. Возможность удаления комментариев администратора



Рис.10. Удаление альбомов

6. Экспериментальная часть

Данный программный продукт тестировался и проверялся многократно во время разработки

Тестирование браузерами правильного отображения макета сайта. Как известно каждый браузер пытается по своему отобразить сайт. То есть рассчитать ширину блоков, различное отображение одних и тех же цветов и многое другое. Поэтому с целью одинакового отображения сайта разными браузерами он был запущен на следущих браузерах: Opera, Google Chrome, Internet Explorer 9, FireFox в ходе чего ошибок не было найден.

Для безопасности cookie сохранялись не в чистом md5 а с добавлением ключа, что значительно подбор:

$login=md5 ($_POST["login"]).$key;

Во избежание накрутки рейтинга при голосование за какое-либо изображение сохраняется ip-адрес пользователя.

$ip = $_SERVER["REMOTE_ADDR"];

mysql_query("INSERT INTO img_ip (ip_add, img_id) VALUES ('$ip', '$id')");



Заключение

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



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

1. А. Фролов, Г. Фролов, Базы данных в Интернете. Практическое руководство по созданию Web-приложений с базами данных (2-е издание, с CD-ROM). - Издательство "Русская Редакция" 2000 г. - 448 стр.

2. Харрис Э., PHP/MySQL для начинающих, Кудиц-образ, 2005г, 384 стр.

3. Лаура Томсон, Люк Веллинг, Разработка Web-приложений на РНР и MySQL, ДиаСофтЮП, 2003 г., 627 стр.

4. HTML и CSS для создания Web-страниц: Э. Кастро -- Москва, НТ Пресс, 2006 г.- 126 с.

5. Основы WEB-дизайна. Самоучитель: Вадим Дунаев -- Санкт-Петербург, БХВ-Петербург, 2007 г.- 512 с.

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