Послуги Контакти +0(00)00000

Детальніше про цей вебсайт

Хочете дізнатися більше про цей вебсайт: його історію, особливості та недоліки? Тоді не гайте час і переходьте до читання!

Радий бачити Вас на цьому сайті 🖐.  Мене звати Романенко Сергій і я є його розробником.  Вебсайт "Правощит" (Site2) є прикладом сайту юридичної компанії.  Незважаючи, на перший погляд, свою простоту, він є достатньо складним і функціональним.

Протягом усієї розробки "Правощит" я дотримувався основних принципів: 

  • Надійність
  • Якість
  • Легкість розширення функціональності
  • Простота використання
  • Швидке оновлення

Код Site2 створений мовою програмування PHP, яка є головною в усьому.  Ніяких інших мов, а також фреймворків в середині немає.  Для зовнішнього відображення використовується css фреймворк Bootstrap 5 та Javascript.  Як ви можете побачити з переліченого -  нічого зайвого.

Розробник вебсайту Правощит(Site2)

Структура

Всі компоненти сайту створені мною особисто.  Це повністю моя робота.  ЇЇ можна поділити на декілька частин.

Перша з них - це інструменти, за допомогою яких все працює.  Саме на створення них я витратив більшу частину часу.  Це компоненти php-server та php-container.  Якщо простими словами, то перше - це двигун, друге - конфігурація. 

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

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

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

Функціонал

Тепер детальніше про функціонал, мабуть, саме це Вас цікавить в першу чергу.  Вебсайт "Правощит" має такий функціонал:

Більше дізнатись про код та завантажити поточну версію можна на github.  Код сайту знаходиться у відкритому доступі.  Ось тут знаходиться ліцензія, яку обов'язково треба почитати перед використанням коду.  Якщо Ви розробник, то встановити та переглянути як все працює всередині не буде складним завданням.  Я розробив деяку документацію, яка має допомогти.

З чого почати

Почати можна з мапи сайту, на якій зібрані усі публічні сторінки, так що Ви нічого не пропустите.  Стрілочка навпроти назви сторінки означає, що це список.  Просто натисніть на стрілку і список розкриється.

Якщо Вас цікавить як виглядає адмінпанель, то напишіть мені на електрону адресу і я дам вам доступ для перегляду.  Мої контакти є в кінці сторінки. 

Готовність продукту

Розробляючи Site2 я приділяв увагу на те, щоб все працювало як слід, без помилок.  Вебсайт має всі переклади, контент і на перший погляд здається, що він готовий до використання.  Але це не зовсім так.  Я свідомо залишив декілька компонентів не готовими.  Наприклад, на головній сторінці є список курсів та вчителів, але таких структур в системі сайту не існує.  Також в адмінці немає зручного пошуку по статях і іншим об'єктам.  Система входу відвідувачів на сайт є фіктивною і насправді ніякої перевірки не проводить.  Чому я так зробив?  По перше я не хочу, щоб цей сайт був повністю готовий і його можна було відразу пускати в роботу.  Якщо Ви є розробником і хочете його використати, то, мабуть, прийдеться трошки попрацювати.  По друге, я не хочу витрачати час на кодування одного і теж самого.  Система входу на сайт та email підтвердження продемонстровані на вебсайті Site1.  Наступна моя робота має бути іншою і демонструвати щось нове, але може включати щось з попередніх для цілісності картинки.

Чому не піти шляхом шаблону

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

Тож якщо Ви хочете отримати власний унікальний сайт, а не шаблон, то Ви там де треба. 

Детальніше про функціонал

Унікальна система роутінгу між сторінками

Мною розроблена і втілена в цьому сайті система навігації, яка взаємопов'язує всі сторінки між собою.  Вони наче знають одне про одного.  Мені наразі невідомі аналогічні розробки.  Якщо ви візьмете будь-який сайт, то кожна сторінка живе окремо і для поєднання їх між собою вимагає від розробника додаткових зусіль, що може позначатися на якості розробки.  Як приклад реалізації моєї системи я можу привести мапу сайту та хлібні крихти.  Вони генеруються автоматично.  Якщо буде доданий новий модуль, наприклад послуги, то нові сторінки автоматичною з'являться на мапі сайту.  Також за допомогою цієї системи легко розмежовується доступ як до окремих сторінок сайту, так і до цілого блоку, що допомагає реалізувати систему авторизації.

Звʼязки між сторінками сайту Правощит.

Декілька мов

Наразі контент на вебсайті "Правощит" відображаються англійською та українською мовами.  Але це не є обов'язковим.  Можна залишити тільки одну мову, або додати інші.

Робота з зображеннями як з окремим ресурсом

На перший погляд, зображення тут виглядають як і на всіх інших сайтах.  Але є деяка відмінність.  Мені вдалося їх зробити адаптивними.  Це має суттєве значення для СЕО оптимізації і швидкості роботи.  Поясню як це працює - пошуковому сервісу (наприклад Гугл) показується велика і "важка" для завантаження картинка, а звичайному відвідувачу - значно менша за вагою і підлаштована під його особистий пристрій.  Таким чином гугл знає, що у нас гарне зображення і має підвищити рейтинг сайту.  А відвідувач отримує картинку швидко і без зайвих витрат на передачу. 

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

Приклад:

Місто з площею і великою будівлею з написом PHP зверху
Місто з площею і великою будівлею з написом PHP зверху
Місто з площею і великою будівлею з написом PHP зверху

Публікація матеріалів

На вебсайті реалізована можливість публікації матеріалів.  Тобто іншими словами - Блог.  Якщо ваша діяльність - це ведення блогу, тоді "Правощит" має все необхідне.  Якщо Ваша діяльність пов'язана з послугами, товарами, тоді ця функціональність має бути запрограмована окремо.  Сам по собі блог є важливою частиною сучасного вебсайту.  Публікація матеріалів по вашій тематиці дає змогу отримати клієнтів з безкоштовного пошуку.  Це все про СЕО. 

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

Створення спеціальних сторінок сайту типу Contacts, About

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

Фільтрація статей на зовнішньому сайті та всіх ресурсів в адмінпанелі

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

Подивитись приклад можна обрав категорію з якоюсь кількістю статей на сторінці категорій.

Додаткові блоки по статтях

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

Є функція запам'ятовування останньої прочитаної статті.  Вона буде показана в розділі "Продавжити читати" в акаунті та при відкритті нової статті. 

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

Банер на головній сторінці та категоріях

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

Спливаюче вікно «Прийняти умови та положення» 

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

Захист від csrf атак

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

Детальніше про це можна прочитати в документації до коду.

Адмін панель

Вебсайт "Правощит" має адмінпанель для керування контентом.  Тут можна додавати зображення, аудіозаписи, статті, переклади.  Створювати сторінки дуже легко.  Усі об'єти взаімопов'язани між собою і мають стан активації.  Якщо, наприклад, зображення неактивне, його неможна показати на сайті.  Стаття з таким зображення теж буде вважатись неготовою і тому не буде опублікована.  Якщо об'єкт використовується в системі, то його неможливо видалити. 

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

Якщо Вас цікавить що всередині, напишіть мені на електрону адресу і я надам Вам доступ на перегляд. 

Повнотекстовий пошук на базі Postgresql по статтях

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

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

Javascript компоненти

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

Javascript використовується для відображення вікна "Прийняти умови і положення", пошуку, фільтрації та будь-якої іншої взаємодії відвідувача з вебсайтом.  Компоненти є невід'ємною і важливою частиною системи, але не впливають на роботу серверу, код якого створений на Php.

Швидкий запуск за допомогою Docker

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

Мінімум пам'яті

Вебсайт "Правощит" розроблявся мною з мінімальним використанням стороннього коду.  Це важливо не тільки для безпеки продукту, але і для швидкості роботи.  При кодуванні були використані власні розробки.  Все це відобразилося в 4.19 Мб оперативної пам'яті на піку роботи на кожен запит.  Для порівняння, тільки фреймворк Symfony, на якому зараз часто кодуються сайти, підвантажує 25.16 Мб пам'яті на кожен запит без врахування самого вебсайту.  Звісно, в Symfony є багато всього.  Тільки одне питання - Вам воно треба?  Саме це можна назвати оптимізацією.

Оптимізація веб-сайту для швидкої роботи в інтернеті

При проведеній оптимізації швидкість підвантаження сторінки цього сайту на звичайному комп'ютері складає приблизно 100-130 мс.  Нагадаю, що в 1 секунді 1000 мілісекунд.  Можна сказати, що сторінка завантажується практично миттєво.  Швидкість падає тільки при пошуку статей і це пов'язано зі складними алгоритмами виборки інформації.  Формування відповіді займає приблизно 700 мс.  Але навіть Гугл витрачає на відповідь приблизно 500 мс.  Так що тут, нажаль, прийдеться відвідувачу почекати відповідь на свій пошуковий запит. 

Сайт оптимізований для роботи в інтернеті і має високі показники згідно ресурсу від Google - PageSpeed Insights. Будь хто може відвідати  і оцінити якість роботи будь-якої сторінки будь-якого вебсайту. Це безкоштовно і швидко. Site2 знаходиться в зелений зоні і має найвищі показники. Привожу скріншот цієї сторінки станом на 09 жовтня 2025 року.

Статистика сайту Site2 згідно даних PageSpeed Insights

Тож, Site2 має задовольнити вимоги як відвідувачів, так і пошукових систем. А це все має прямо відображатися в гроші.

Ціна вебсайту

Нарешті Ви дійшли, мабуть, до самого цікавого - ціни 💰.  Я так довго про все розповідав, а Ви все це читали.  Якщо ви дійсно все прочитали, то моя шана Вам! 

Для розробників

Пропоную Вам все це безкоштовно.  Якщо ви розробник, то качайте останній код на github, встановлюйте і змінюйте за потреби.  Використовуйте для себе, для навчання, для бізнесу без обмежень. 

Для власників бізнесу

Якщо Ви тут шукаєте рішення для себе і цей вебсайт Вам довподоби, то я пропоную на його базі створити щось нове.  Є готовий дізайн?  Добре.  Немає готового дизайну?  Теж не проблема, намалюємо.  Є багато талановитих дизайнерів.  Цей сайт і всі його компоненти обійдуться безкоштовно.  Ви платите тільки за зміну коду або втілення нового функціоналу. 

Що ви отримуєте?  Повторюю те, що було на початоку статті:

Вебсайт "Правощит" написаний людьми і для людей.  Це не шаблон, а твір!

Контакти

По всім питанням, щодо роботи сайту "Правощит", ви можете направляти мені повідомлення на електрону адресу ✉️pomahehko.c@gmail.com, я завжди намагаюся вчасно надавати відповідь.

Відвідайте Romanenko Studio для перегляду інших моїх робіт.