Иногда бывают ситуации, когда хочется зафиксировать свое решение, и передать эту информацию какому-то другому лицу. Самый простой способ - отправить сообщение по электронной почте или в мессенджере. Но в наше время это уже не так круто, и можно это сделать в более модном варианте, сформировать QR код. Что также имеет преимущество, когда любой просто подсмотревший случайно этот код не сможет разобраться без применения специального устройства (к примеру, смартфона) и программ, что же в нем зашифровано.
Идея такого микросервиса появилась достаточно давно, но не было особого повода тратить на разработку время. И вот столкнуся с описанием новой библиотеки для фронта - HTMX. Она появилась совсем недавно, всего несколько лет назад (даже не десятилетий!), и уже многие программисты отметили эту библиотеку в своих публикациях. Во всяком случае рекомендовали попробовать с ней поработать.
Попробовать работать с библиотекой HTMX решил на каком-нибудь небольшом пет-проекте, и тут вспомнил об идее создания памяток в виде QR кода.
Реализация выглядит следующим образом - при входе на страницу проекта в нижней части можно ввести данные для сохранения и создания QR кода. После отправки данных они сохраняются в файле на сервере, для последующего использования, и из этих данных формируется QR код.
Вот страница проекта (первый скрин):
Cтраница с выводом QR кода (второй скрин):
Итак, что же у нас по капотом? Но лучше сначала немного размышлений о выборе способа создания QR.
Хотелось бы иметь какое-то самое простое решение, с минимумом настроек и подключений внешних сервисов, в идеале какое-то простое API или серверная функция, в крайнем случае дополнительная библиотека РНР.
Первое, что из интересного выдал Интернет - Google Chart API для генерации QR-кодов. Этот вариант был реализован в пет-проекте и даже работал, но затем, уже на следующий день начались провалы в получение кода от сервера Google. Погрузившись в ситуацию выяснил, что этот проект работает, но уже несколько лет не поддерживается компанией. Поэтому отвечать за стабильность его работы никто не может. Пришлось смотреть другие решения.
В основном предлагались различного рода библиотеки, которые надо было дополнительно установить на сервер. Одна из РНР библиотек показалась интересной, о ней достаточно много написано в сети, есть примеры реализации - PHP QR Code. Но в процессе поиска нашел библиотеку Linux, которая также формировала QR коды, и была совсеем простой в установке и использовании - qrencode. Вот на ней и остановился.
Структура проекта чем-то напоминает SPA (Single-page application), через контроллер index.php будут загружаться основной шаблон и отдельные модули кода HTML. Для подгрузки данных будут использоваться возможности библиотеки HTMX.
Вот структура модулей с кодом HTML:
Код HTML шаблона страницы (файл template.html):
В шаблоне задана отложенная подгрузка блока header. C точки зрения построения архитектуры эта подгрузка не имеет смысла и блок мог быть сразу реализован в шаблоне, но здесь был сделан выбор в сторону отработки возможностей библиотеки HTMX.
Код HTML модуля header (файл header.html):
При входе на страницу сайта и загрузке шаблона происходит подгрузка блоков. Выше был уже указан блок header. Помимо него вызывается загрузка блока тега main. Если вход на страницу происходит без указания токена QR кода, то загружается информация о проекте. Вызов загрузки блока тега main производится из тега footer.
Код HTML блока страницы с информацией о проекте (файл cape.html):
Далее, когда загружен блок информации о проекте вызывается загрузка блока с формой для ввода данных.
Код HTML блока страницы с формой (файл memoform.html):
После ввода данных в форму, и ее проверки (осуществляется скриптом JavaScript, код не приводится, чтобы сократить объем информации) происходит отправка POST запроса на сервер. На сервере присходит обработка данных, они сохраняются в отдельный файл и в ответ отправляется блок отображения введенной информации. Этот же блок подгружается на страницу, если происходит вход на нее с указанием токена QR кода в адресной строке.
Код HTML блока страницы с отображением информации по QR коду (файл memo.html):
После загрузки блока отображения информации по QR коду, происходит запрос и подгрузка непосредственно изображения картинки с QR кодом.
Все запросы обрабатываются контроллером в виде PHP скрипта.
Код контроллера (файл index.php):
Код контроллера (продолжение), функции (файл index.php):
