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

 

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

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

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

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

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

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

Брянск 2013

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

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

Содержание

Введение

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

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

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

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

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

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

Заключение

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

Введение

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

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 (#"justify">) - сервис, предназначенный для хранения и дальнейшего использования пользователем цифровых фотографий и видеороликов. Является одним из первых Web 2.0 сервисов. Один из самых популярных сайтов среди блогеров для размещения фотографий.

Недостатки:

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

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

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

Рис.1. Сайт #"justify">(#"justify">Недостатки:

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

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

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

Рис.2. Сайт #"justify">Vfl (#"justify">Недостатки:

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

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

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

Рис.3. Сайт #"justify">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:

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

CREATE TABLE users ( id INT(10) NOT NULL AUTO_INCREMENT PRIMARY KEY,VARCHAR(20),VARCHAR(20),VARCHAR(20),VARCHAR(20) NULL,VARCHAR(20) NULL,VARCHAR(20) NULL,_hash VARCHAR(64),VARCHAR(10)) DEFAULT user;

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

CREATE TABLE albums ( id INT(10) NOT NULL AUTO_INCREMENT PRIMARY KEY,_user INT(10),VARCHAR(30),VARCHAR(30));

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

CREATE TABLE photo ( id INT(10) NOT NULL AUTO_INCREMENT PRIMARY KEY,_album INT(10),VARCHAR(60)NOT NULL,VARCHAR(60) NOT NULL,INT(10) DEFAULT 0);

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

CREATE TABLE comments AUTO_INCREMENT PRIMARY KEY,_user INT(10),_img INT(10), 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"];("Location: index.php");();

Окно логина состоит из двух полей 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"];($user_result["pwd"] != $_POST["pwd"]){$error_msg = "Invalid password";}

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

$_SESSION["login"] = $login;

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

$_SESSION["status"] = $user_result["status"];(isset($_REQUEST["rememberUser"])){

$login_hash = md5($login);("login", $login_hash.$key , time()+3600);}("Location: index.php");();

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

function cheackeType($type)

{$flag = false;($type) {case 'image/bmp':$flag = true;break;'image/jpeg':$flag = true;break;'image/gif':$flag = true; break;'image/png': $flag = true; break;: $flag = false; break;}$flag;}

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

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

$pathFile = "./upload/".basename($_FILES['img']['name']);(cheackeType($_FILES["img"]["type"]) and !empty($_FILES["img"]["name"]))

{if (copy($_FILES["img"]["tmp_name"], $uploadfile)) "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"];(checkAlbum($_POST["nameAlbum"])){

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

'$discrip')";_query($album_query) or die(mysql_error());

}else die("Error");}

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

$count_result = mysql_query("SELECT COUNT(*) FROM photoid_album = '$img[id_album]'");

$count_photo = mysql_fetch_array($count_result);

$count = $count_photo[0];

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

$pos_result = mysql_query("SELECT COUNT(*) FROM photoid_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 photoid_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 photoid_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)('$comment', '$_SESSION[id]', '$id_img')");("Location: image.php?id=$id_img");}

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

$comments_result = mysql_query("SELECT id, id_user, id_img, commentcomments 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>

<?phpif ($_SESSION["status"] == "admin" or $commentList["id_user"] == $_SESSION["id"])"<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(){id = $(this).attr("id"); var dataString = 'id=' + id; var parent = $(this);

$(this).fadeOut(300);

$.ajax({: "POST",url: "rating.php", data: dataString, cache: false,: 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_ipimg_id='$id' and ip_add='$ip'");

$count = mysql_num_rows($ip_sql); ($count == 0)

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

mysql_query("UPDATE photo SET rating = rating + 1 WHERE id = '$id'");_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"];$rating;

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

mysql_connect("localhost", "root", "75da31ed0");_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");($top_photo = mysql_fetch_assoc($top_result)){

$id_album = $albumsList["id"];echo "<div>

<a href='image.php?id=$top_photo[id]'><img>

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"];_query("INSERT INTO img_ip (ip_add, img_id) VALUES ('$ip', '$id')");

Заключение

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

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

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

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

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

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

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

Кафедра «Информатика и программное обеспечение» КУРСОВОЙ ПРОЕКТ Разработка фотохостинга п

Больше работ по теме: