Разработка сайта-форума для группы ИСТ-13

http://

Разработка сайта-форума для группы ИСТ-13

веб программирование сайт форум

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

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

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

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

1. Изучение предметной области и аналогов работы

2. Изучение технологии (или технологий) разработок веб-ориентированных систем

3. Выбор языка веб-программирования, серверной части, фреймворка для верстки и СУБД

4. Изучение работы с выбранным языком программирования, фреймворком и СУБД.

5. Реализация поставленной задачи с помощью выбранных ранее средств разработки

6. Выбор хостинга.

7. Выбор доменного имени.

8. Решение о необходимости (или ненужности) SEO оптимизации Важным требованием является информативная начальная страница, возможность регистрации пользователя, оповещения о важных обновлениях по почте (почтовая рассылка), разграничение доступа и понятный интерфейс.

1. Описание предметной области

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

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

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

Для пользователя, не вошедшего в систему, будет доступен следующий функционал:

· Регистрация на форуме или вход на него со своими учетными данными

· Новостной раздел на главной странице сайта

· Список категорий

· Список последних созданных тем

· Просмотр тем по категориям

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

Для пользователя, вошедшего на сайт, добавляется весь остальной функционал:

· Создание тем

· Комментирование тем

· Удаление темы или комментария, созданных данным пользователям

· Функция выхода с форума

Обзор аналогичных веб-систем:

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

1. Ухтинский форум «Ухта 24» uhta24.ru/forum/

Главная страница данного форума включает в себя:

· Раздел с последними комментариями

· Раздел поиска

· Шапка сайта (форум — дочерняя подсистема сайта)

· Главные темы

· Раздел регистрации и авторизации Недостатки данного форума:

· Внешний вид сайта сложен для навигации

· Сложно ориентироваться в тексте, много лишней информации на странице

· Реклама занимает слишком много места

· Отсутствует поиск по категориям

· Отсутствие модерации комментариев

· Неинформативные функциональные блоки Преимущества:

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

· Присутствуют блоги, и система оценки тем и комментариев

· Простая регистрация

· Наличие мобильной версии

2. 4PDA 4pda.ru/forum/index.php?act=idx

Этот форум известен каждому владельцу устройств на базе Android, Windows Phone, Symbian и iOS.

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

На главной странице размещены главные темы форума, и краткая информация о них.

Так — же, размещены ссылки для владельцев устройств на различных платформах, в отельном функциональном блоке. Данный блок позволяет не искать нужную тему по всему сайту, а сразу попадать в часть форума с нужной тематикой, в которой будет находиться искомая тема. На главной странице размещен F.A.Q (Frequently Asked Questions), или ЧАВО (Часто задаваемые вопросы) по-русски.

Преимущества данного форума:

· Удобная главная страница

· Ссылки для владельцев устройств на различных платформах

· Удобный раздел новостей

· Приятный внешний вид

· Удобный поиск (с расширенными возможностями)

· Необходимые мультимедийные возможности для форума с данным контентом

· Модерирование форума. На сайте не встретишь непристойных тем, или флуд в комментариях

· Удобная регистрация

· Информативная главная страница Недостатки:

· Темы часто «теряются» из-за большого количества серверов, и частого переноса тем между ними

· Используются внешние мультимедийные хранилища, вследствие чего часто картинки в темах пропадают

3. Форум, аналогичный создаваемому «Форум группы 07-ИСТ»

Форум, спроектированный на CMS bb-forum

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

Начальная страница грамотно разбита на функциональные блоки. Присутствует мини-чат.

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

Преимущества:

· Грамотное разбиение страниц на функциональные блоки

· Навигация по сайту не вызывает затруднений

· Интерфейс не содержит ненужных элементов Недостатки:

· Слишком много функций для форума с очень узкой направленностью.

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

2. Функциональные требования

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

В ходе составления требований к сайту, были выявлены следующие требования:

· Присутствие общей новостной ленты на главной странице

· Система регистрации на сайте

· Панель авторизации и меню пользователя

· Интерфейс, не вызывающий затруднений у пользователя

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

· Система комментирования с возможностью удаления комментария его создателем или администратором

· Система администрирования сайта

· Контактная информация для связи с администрацией

· Соответствующий тематике домен Требования к навигации сайта:

· Доступность категорий и последних тем с любой страницы

· Доступ к меню пользователя с любой страницы (в навигационной панели)

· Возможность произвести авторизацию с любой страницы (из навигационной панели)

· Доступ к главной странице из любого места (из навигационной панели)

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

Требования к оформлению сайта:

· Отсутствие ярких шрифтов для повышения читаемости текста

· Отсутствие рекламы

· Грамотно спроектированный интерфейс сайта

· Информативная главная страница

· Нейтральная визуализация контента для повышения читаемости

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

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

Требования к аппаратному обеспечению хостинга:

· Процессор x64 или x86

· Не меньше 1ГБ оперативной памяти

· Пространство на диске не меньше 100мб

· Ограничение трафика допускается, но не меньше 1.5 ГБ в месяц Требования к ПО хостинга:

· ОС Windows XP и выше, Linux

· Сервер Apache

· Язык PHP, версия не ниже 5

· Сервер БД MySQL

· СУБД PHPMyAdmin

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

3. Технологический обзор

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

В качестве серверной части был выбран Apache http server. Преимуществ много:

· Настраиваемый: Модульная архитектура поддается настройке, когда есть необходимость настроить конфигурацию сервера к потребностям клиента

· Удобство администрирования: файлы конфигурации в Apache используют ASCII. Это делает сервер чрезвычайно простым для администрирования, так как файлы конфигурации легко можно править простым блокнотом.

· Эффективность: сервер компактный, быстрый и, следовательно, использует очень мало системных ресурсов. Код, на котором написан сервер, оптимизирован для производительности.

· Независимость от ОС: сервер может работать на различных операционных системах, таких как UNIX, Windows 9x / NT, MacOS и многие другие.

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

· Расширяемость: возможность подключения различных модулей к серверу.

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

· Традиционность: Язык РНР будет казаться знакомым программистам, работающим в разных областях. Многие конструкции языка позаимствованы из Си (стиль написания практически аналогичен).

Код РНР очень похож на тот, который встречается в типичных программах на С или Pascal. Это заметно снижает начальные усилия при изучении РНР. PHP — язык, сочетающий достоинства Perl и Си и специально нацеленный на работу в Интернете, язык с универсальным и ясным синтаксисом, который будет понятен разработчикам на С и Pascal.

· Простота: PHP — язык, который может быть встроен непосредственно в htmlкод страниц, которые, в свою очередь будут корректно обрабатываться PHPинтерпретатором.

· Эффективность: Очень важное преимущество PHP заключается в его «движке». «Движок» PHP не является ни компилятором, ни интерпретатором. Он является транслирующим интерпретатором. Такое устройство «движка» PHP позволяет обрабатывать сценарии с достаточно высокой скоростью.

· Гибкость: Поскольку РНР является встраиваемым (embedded) языком, он отличается исключительной гибкостью по отношению к потребностям разработчика. Хотя РНР обычно рекомендуется использовать в сочетании с HTML, он с таким же успехом интегрируется и в JavaScript, WML, XML и другие языки. Кроме того, хорошо структурированные приложения РНР легко расширяются по мере необходимости. Нет зависимости от браузеров. Работает на Apache и других серверах. Поскольку все серверы работают на разных платформах, РНР в целом является платформенно-независимым языком и существует на таких платформах, как UNIX, Solaris, FreeBSD и Windows 95 и выше.

· Бесплатное распространение: PHP распространяется абсолютно бесплатно и с открытым исходным кодом.

Для хранения данных был выбран MySQL. MySQL — свободная реляционная система управления базами данных. Преимущества также состоят в бесплатном распространении и гибкости.

Для анимирования некоторых элементов использовался JavaScript. JavaScript не предназначен для создания автономных приложений. Программа на JavaScript встраивается непосредственно в исходный текст HTML-документа и интерпретируется брaузером по мере загрузки этого документа.

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

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

4. Выбор хостинга и доменного имени

По совету одногруппника, был выбран хостинг-провайдер hostinger.ru (hostinger.ru), так как он предоставляет бесплатные услуги хостинга и имеет все необходимое для реализации серверной части проекта.

Функционал, предоставляемый хостинг-провайдером:

· 1500 мб дискового пространства

· 100 Гб трафика

· FTP — сервер

· БД MySQL

· Mail — сервис

· Apache

· PHP

· PHPMyAdmin

· Конструктор сайтов

· Панель управления доменом CPanel

· Бесплатная регистрация доменного имени второго уровня.

Доменное имя было выбрано исходя из основной задачи. Так как создается форум для группы ИСТ-13, то и доменное имя содержит в себе название этой группы: http://ist13ugtu.net63.net/

5.Дизайн сайта

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

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

Рис. 2. Страница регистрации

Рис. 3. Страница просмотра тем по категориям

Рис. 4. Страница просмотра темы

Рис. 5. Блок комментариев в теме

Рис. 6. Меню администратора и обычного пользователя

Рис. 7. Список тем, созданных пользователем.

Рис. 8. Страница добавления новости.

6. Разработка сайта

Модель сайта

Для разработки была выбрана модель тредов. Тред (англ. Thread) -последовательность ответов (комментариев) на форуме, связанных одной темой.

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

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

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

Достигается это следующим кодом:

Рис. 9. Страница не покажет список тем, пока пользователь не войдет в систему.

Некоторые элементы

умеют прокручивать содержимое при превышении высоты контейнера. Достигается это при помощи css и javascript:

Код css:

Код js:

Код js вставляется в контейнер

html-кода, и служит для инициализации функции прокрутки содержимого в контейнере

.

Все данные сайта хранятся в БД, получение этих данных происходит с помощью MySQL запросов.

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

Структура БД:

Рис. 10. Структура БД сайта

Структура таблиц:

Рис. 11. Структура таблицы, хранящей комментарии

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

Рис. 12. Структура таблицы, хранящей новости

Для хранения новости в таблице с новостями используются следующие поля:

· Имя — заголовок новости

· Текст — содержание новости

· Дата — дата добавления новости Рис. 13. Структура таблицы, хранящей список категорий Таблица с категориями хранит идентификатор новости в БД (внешний ключ) и название категории.

Рис. 14. Структура таблицы, в которой хранятся созданные темы Таблица, хранящая темы, содержит в себе следующие поля:

· Внешний ключ

· Название темы

· Содержание темы

· Категория, к которой относится тема

· Логин создателя темы Рис. 15. Структура таблицы с пользователями.

Таблица для хранения данных о зарегистрированных пользователях, содержит в себе три поля:

· Внешний ключ

· Логин, или логин пользователя

· Пароль Формирование блока с категориями происходит с помощью запроса к БД.

SQL-запрос:

В переменную $result заносится результат запроса к БД. Если в запросе ошибка — переменная будет типа «Boolean», и ее значение будет «false». Так очень удобно ловить ошибки запроса к БД.

В противном случае, переменная будет указывать на результат выполнения запроса. Там есть сколько-то строк таблицы, или массив. Получить эти строки можно через функции mysql_fetch_row и mysql_fetch_array.

Для оформления списка тем была выбрана вертикальная группа кнопок:

php-код:

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

Шапка сайта генерируется под каждого пользователя. Данные о пользователях хранятся в сессии.

Php-код:

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

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

Данная ветка сверяет логин с администраторским логином, и в случае совпадения генерирует дополнительные пункты в меню.

Реализация комментариев При добавлении комментария пользователем, в таблицу БД с комментариями заносится информация о теме, которую комментирует пользователь (ее ИД), логин комментирующего и текст комментария.

Код:

Передача данных между формами осуществляется методом «POST», передаваемые данные помещаются в массив $_POST[`имя_переменной'], откуда потом извлекаются на новой форме. После занесения коммментария в БД, обработчик возвращает пользователя на страницу с темой, которую он только что комментировал.

Формирование страницы watchcategory. php происходит при помощи GET-запросов.

Если указать после вопросительного знака категорию (watchcategory.php?category=), то на странице будет сформирован список тем по выбранной категории. Если же указать ИД темы (watchcategory.php?thread=), то будет сформирована страница с запрошенной темой, и комментариями к ней.

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

Код формы входа в шапке:

Код обработчика авторизации пользователя с комментариями:

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

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

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

7. Разграничение доступа и почтовая рассылка

Разграничение доступа

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

1. Режим просмотра

2. Режим пользователя

3. Режим администратора В режиме просмотра пользователь может только просматривать содержимое сайта. Создание контента недоступно.

В режиме пользователя пользователь может создавать контент и пользоваться системой комментирования.

В режиме администратора пользователь имеет полный доступ к контенту, что позволяет ему модерировать форум (удалять комментарии или темы).

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

Почтовая рассылка На сайте реализована почтовая рассылка, которая срабатывает при добавлении новости на главную страницу. При добавлении новости, код — обработчик получает список зарегистрированных пользователей из БД, и отправляет каждому письмо с текстом и заголовком данной новости. E-mail пользователь вводит при регистрации.

Код обработчика с почтовой рассылкой:

Рис. 16. Вид уведомления, приходящего на почту.

Так как большинство почтовых сервисов отсеивают особые заголовки (в которых указывается адрес отправителя), то от заголовков пришлось отказать, и письмо приходит от адреса почтового сервера хостинга.

Заключение

В ходе работы над проектом, была изучена система форума в виде тредов, были изучены особенности работы таких форумов, изучены аналоги данной работы в Интернет, выдвинуты требования к области функций и внешнему виду сайта. Далее были выдвинуты требования к серверной части проекта и выбору адреса в сети Интернет. Был выбран бесплатный язык веб-программирования phpдля разработки проекта и фреймворк Bootstrap 3 для верстки. По совету одногруппника, был выбран бесплатный хост — провайдер, который удовлетворял всем требованиям серверной части. Был реализован форум, соответствующий всем требованиям. Была раскрыта и описана реализация логики сайта включая php — код, SQL запросы, структура БД и реализация скрипта прокрутки.

Анализируя выполненную работу, можно выделить несколько основных пунктов:

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

· Навигация была реализована с помощью навигационной панели сайта, и функциональных блоков справа и слева

· Реализована динамическая генерация страниц при помощи сессий и GET — запросов.

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