/stephub-beta

👨‍🎓 StepHub Веб-урядування (проєктна робота)

Primary LanguagePHPGNU General Public License v3.0GPL-3.0

Stephub logo

Проєктна робота (веб-урядування)

Зміст


Опис проєкту

Проєктна робота (веб-урядування)

Хост: stephub.000webhostapp.com

Ментор: Віктор Константінов

Тімлід: Микола Чернявський

Опис

Проблема

Проблемою, яку наша команда поставила перед собою для вирішення, є зрозуміти рівень довіри студентів один до одного.

Для знаходження рішення цієї проблеми можна виділити два найбільш вагомі питання на які варто було шукати відповідь: як саме можна визначити рівень довіри; чим має бути проєкт, щоб був цікавим і водночас по можливості приносив користь його користувачам.

Ідея

З тих ідей, що придумала наша команда, було вибрано сервіс, котрий дає можливість студенту анонімно розмістити оголошення про свої певні необхідності, які наразі не можуть бути вирішені ним самим. Це допоможе у пошуку іншого студента всередині університету, який би зміг допомогти з цим питанням. Перевагою користуванням даного сервісу є комфортність у психологічному плані. Це означає, що автор оголошення може уникнути дискомфорту під час публікації оголошення за рахунок того, що ніхто не знає, хто саме є автором. Таким чином, це дає можливість мінімізувати кількість студентів, котрі безпосередньо будуть знати про описану в оголошенні проблему. В додаток до цього, під час реєстрації на сайті повинен бути вказаний номер студентського квитка. Це дає гарантію того, що викладачі не будуть мати змоги користуватися сервісом, що створює також свій певний комфорт для студентів.

Як побічний ефект можна очікувати покращення рівню “дружності” між студентами всередині університету. Це може бути спричинено такими факторами як, наприклад, відчуття обов’язку перед тим, хто допоміг вирішити питання, або усвідомлення того, що можливо у майбутньому користувач буде у тій самій ситуації, що і автор оголошення.

Алгоритм, за яким реалізовано дану ідею наступний:

  • Автор розміщує оголошення
  • Всі крім автора можуть погодитися на допомогу у вирішенні порушеної в оголошенні проблеми
  • Автор оголошення повинен погодитися на надання допомоги, або відхилити її
  • Якщо автор погодився, то система за допомогою електронної пошти надсилає йому контакти того, хто погодився допомогти
  • Автор оголошення вже має можливість зв’язатися з тим, хто вирішив допомогти, тому оголошення переводиться у інший стан, щоб було невидимим для користувачів, які не беруть участь у вирішенні проблеми
  • У разі успішного вирішення проблеми автор видаляє оголошення; якщо проблема все ще актуальна, оголошення можна знову перевести у активний стан, при цьому система автоматично видаляє інформацію про того, хто вже намагався допомогти (тобто, відкривається можливість для інших)

Технічна частина проєкту

Проєкт написаний на PHP 7.2. Обрали саме PHP, тому що в більшості учасників команди відсутній досвід у програмуванні, а ця мова має низький поріг входження.

Фреймворки та допоміжні засоби, якими користувалися під час розробки:

  • Bootstrap v4.4.1 — фронтенд фреймворк для швидкої верстки адаптивних сайтів
  • jQuery v3.4.1 — JavaScript фреймворк, який полегшує доступ до будь-якого елементу DOM
  • Font Awesome v5.9.0 — колекція масштабованих векторних іконок
  • Google Material Icons — набор іконок Material Design від Google
  • RedBeanPHP v5.4.2 — ORM-бібліотека для PHP, яка полегшує роботу із базами даних

Під час проєктування сервісу було виділено такі основні вимоги до фронтенду та бекенду:

  • Можливість реєстрації та авторизації
  • Наявність сторінок адміністратора, модератора та профілю користувача
  • Можливість прикріплення файлів до оголошення
  • Можливість коментування оголошення (зі збереженням хоча б мінімальної кількості ступенів ієрархії коментарів)
  • Можливість фільтрації даних
  • Пагінація
  • Підключення електронної пошти для реалізації алгоритму надання допомоги
  • Адаптивний дизайн

Front-end

При розробці дизайну було враховано всі стандарти сучасної веб-розробки: кросбраузерність, чітка візуалізація ієрархії елементів, рівні заголовків легко відрізняються, однакова схема навігації для всіх сторінок, мінімальна кількість шрифтів.

Принцип верстки сайту - Desktop First. Спочатку було створено десктопну версію сайту, після чого, його функціонал стискався до мобільної версії для забезпечення адаптивності дизайну. Було використано стандартні готові елементи, сітки та компоненти Bootstrap для створення адаптивної розмітки, вже на готову розмітку було додано власні CSS-стилі.

Сайт не перенавантажений анімацією. Зроблено лише необхідну, таку як анімація завантаження, прокрутки навігаційної панелі, відображення сповіщень.

Back-end

Роботу над бекендом було розпочато з розробки прототипу БД. Для керування БД було обрано MySQL. Всі запити на отримання даних відбуваються за допомогою RedBeanPHP.

Реєстрація та авторизація відбувається з валідацією вхідних даних.

Так як сервіс передбачає публікацію оголошень анонімно, то навіть на сторінці адміністратора та модератора не показується ніяка особиста інформація про користувачів окрім їхнього логіну для зручності керування сайтом. Кількість оголошень очікується не надно висока, тому було вирішено зробити можливість перевірки на цензуру перед публікацією на рахунок забороненої інформації (наркотики, інтимні стосуунки і тд).

Перевірка на цензуру відбувається наступним чином:

  • Автор створює оголошення
  • Оголошення отримує, такий статус, щоб не відображалося на сайті
  • Адміністратор чи модератори перевіряють його і якщо перевірка пройшла — змінюють статус на такий, щоб оголошення було видимим (так як все ж таки є можливість упустити щось важливе — користувачі можуть скаржитись на оголошення чи коментар, котрі порушують правила; це дає можливість допомогти регулювати діяльність користувачів)

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

Початок роботи

Підключення до БД

В початковій директорії проєкту stephub/ створіть файл db_conn.txt, який містить в собі таку структуру:

[host]
[dbname]
[username]
[password]

Підключення до бази даних StepHub:

den1.mysql5.gear.host
stephub
[username]
[password]

Замість [username] та [password] введіть актуальні дані для входу

Завантаження на сервер

Файли, які не потрібні на сервері.

Перед завантаженням на сервер, заберіть ці файли:

docs/
.gitinore
CODE_OF_CONDUCT.md
LICENSE
README.md
_config.yml

Посилання на додаткові ресуси