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

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

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

Введение

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

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

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

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

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

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

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

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

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

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

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

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

.Решение о необходимости (или ненужности) SEO оптимизации

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

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), или ЧАВО (Часто задаваемые вопросы) по-русски.

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

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

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

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

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

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

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

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

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

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

Недостатки:

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

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

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

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

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

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

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

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

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

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

Недостатки:

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

Вывод

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

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

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

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

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

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

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

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

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

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

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

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

·Соответствующий тематике домен

Требования к навигации сайта:

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

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

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

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

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

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

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

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

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

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

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

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

·Практичные формы для добавления контента

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

Администрирование

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

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

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

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

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

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

Требования к ПО хостинга:

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

·Сервер Apache

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

·Сервер БД MySQL

·СУБД PHPMyAdmin

·Доступ в интернет

Вывод

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы по главе

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

Выбор среды разработки

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

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

По совету одногруппника, был выбран хостинг-провайдер hostinger.ru (hostinger.ru <#"justify">·1500 мб дискового пространства

·100 Гб трафика

·FTP - сервер

·БД MySQL

·Mail - сервис

·Apache

·PHP

·PHPMyAdmin

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

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

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

Доменное имя было выбрано исходя из основной задачи. Так как создается форум для группы ИСТ-13, то и доменное имя содержит в себе название этой группы: <#"justify">5.Дизайн сайта

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

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

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

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

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

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

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

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

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

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

Модель сайта

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

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

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

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

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

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

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

Код css:

Код js:

Код js вставляется в контейнер <head> html-кода, и служит для инициализации функции прокрутки содержимого в контейнере <div>.

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

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

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

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

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

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

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

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

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

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

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

·Дата - дата добавления новости

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

Таблица с категориями хранит идентификатор новости в БД (внешний ключ) и название категории.

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

Таблица, хранящая темы, содержит в себе следующие поля:

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

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

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

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

·Логин создателя темы

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

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

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

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

·Пароль

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

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