ДЕНЬ 133
    Для практики с PHP решил сделать дефолтный таск-менеджер с подключением базы данных.

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

1️⃣ При отправке формы перекидывает на страницу с PHP-файлом. Пытался это пофиксить, убирая дефолтное поведение браузера при отправке формы, но в этом случае данные не заносятся в БД.

2️⃣ Данные из БД отображаются не динамически — нужно перезагружать страницу. Можно пофиксить, задав интервал рендера компонента, но, думаю, лучше использовать вебсокеты.

Также всё это дело нужно стилизовать и довести до ума, разумеется.

ДЕНЬ 135
Нашел, в чем была ошибка запросов. В заголовках при отправке с фронта стоял Content-Type, и на бэке тоже. Соответственно, запрос отправлялся дважды. Я пофиксил это, убрав Content-Type при отправке запроса в React.

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

ДЕНЬ 136
Очередная проблема с серверной частью.

Я пытался реализовать удаление задачи при клике на иконку, но сервер не обрабатывает запрос. ID задачи передаётся корректно, однако запрос приходит не как 'DELETE', что вызывает ошибку. Я пробовал отправить прямой запрос на удаление, но сервер его не распознаёт. Также использовал метод POST с переменной для удаления, а также отправлял запросы через axios, но результат остаётся неизменным: два ответа, и оба неудачные.

Путь к файлу PHP проверен и правильный.

ДЕНЬ 137

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

Изначально было два неправильных запроса. В первом случае необходимо было настроить CORS, чтобы разрешить доступ с определенного домена для выполнения запроса. Во втором случае ошибка возникла на стороне бэкенда из-за неправильного синтаксиса SQL-запроса к базе данных.

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

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

if ($method === 'OPTIONS') {
    exit;
}

ДЕНЬ 138

Внёс изменение данных в таске (название и степень важности). Можно либо применить изменение, либо отменить и оставить как было. Принцип прост: при клике на изменение, в ячейки таблицы добавляется input (для ввода двух значений) .

Осталась самая сложная часть — реализовать вебсокет для отслеживания изменений. Разбирался, для чего он нужен и в каких случаях используется. Хочется максимально подробно изучить их, чтобы потом не возникало особых проблем. Кто уже писал вебсокеты — есть ли смысл делать их на PHP или лучше на Node.js?

ДЕНЬ 139

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

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

P.S. Контента долго не было, так как постоянно был в разъездах и крайне мало находился в городе.

ДЕНЬ 140

Пытаюсь сделать вебсокет для динамического обмена тасками между пользователями (в моём случае — вкладками или браузерами).

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

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

Есть вариант попробовать вынести все функции с базой отдельно — должно прокатить.

Как таковой вебсокет получился: новая таска передаётся, и всё нормально, но пока не отображается у другого пользователя.

ДЕНЬ 141

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

Также пробовал писать бэк на C#, но об этом чуть позже

ДЕНЬ 142
До конца доделал проект. Теперь все работает как и задумывалось. По факту осталось два контекста, но рендер задач идет непосредственно с самого контекста вебсокета, а не локального контекста. В локальном фактически сборка всех функций(функции для базы данных и для вебсокета).

Уже есть идея для нового проекта, но сначала надо сделать макет в фигме для удобства

ДЕНЬ 143
    Макет в Фигме уже готов, осталось пару моментов доделать, и можно будет верстать, но перед этим нужно изучить Laravel.

   На русскоязычном YouTube мало информации о том, как подружить React и Laravel с конкретными примерами сайтов, поэтому нашёл какой-то курс от индуса.

ДЕНЬ 144

🎨 Tailwind CSS
Попробовал писать стили на Tailwind. В чем-то это удобно - не нужно создавать лишние CSS-файлы. Но есть и минусы: иногда накапливается слишком много классов для одного элемента, а стили могут не применяться как надо (хотя это решается добавлением ! перед классом).

⚙️ Laravel + OSPanel
Установил Laravel и OSPanel. Пока фреймворк запускается только через php artisan serve, но это не совсем то, что нужно. Планирую настроить через OSPanel, чтобы бэкенд работал через домен и имитировал реальный хостинг. В дальнейшем, на этот шаблон будет сделана база, чтобы создать полноценную регистрацию и авторизацию пользователей

🔥 WebStorm
Перешел на WebStorm. Показался намного удобнее и функциональнее. Не нужно ставить кучу плагинов - всё необходимое уже есть из коробки.

ДЕНЬ 145
Пока была неделя практики сделал сайт на реакте, возможно, в дальнейшем буду дорабатывать этот сайт и доводить до ума(подключать базу, добавлять больше страниц и тд), но пока нет на это времени.

https://holman52.github.io/Guitar-SP/

Что касается регистрации и авторизации, то уже есть апишка к фронту, но пока на фронте работает только авторизация. Было много ошибок с osp, но об этом позже видос выложу

День 146

✅ Сделал полностью API на Laravel, но с фронтом связал только авторизацию. Была куча проблем с Open Server. Сначала два дня мучился с тем, что неправильно указывал версию PHP в проекте (в Laravel думал, что PHP: 8.2, а оказывается, можно использовать версии от 8.2, то есть 8.4 тоже подойдет). Потом возникли проблемы с драйверами pgsql, и я перешел на MySQL — возникла такая же проблема. В итоге полностью переустановил Open Server, и все стало нормально.

👨‍💻 Сейчас работаю над WebSocket через Laravel Reverb. Суть в том, что имеется пять панелей, на которых нужно запускать определенную игру (URL) от админа. Пока разобрался, как это выглядит по структуре, осталось только написать код. На данный момент я только подключил WebSocket, но пока не понятно, почему сообщение, которое должен выводить WebSocket, отсутствует.

ДЕНЬ 147

Полностью реализовал вебсокет на Laravel Reverb! Было очень много ошибок:

🔧 Проблемы, с которыми столкнулся:
1. Конфликт протоколов — Vite работал на http, а Open Server на https 🌐 
2. Ошибка подключения к приватному каналу 🔒 
3. Ошибка при подключении к каналу присутствия 👥 
4. Узнал, что StrictMode в React может дважды отправлять запросы ⚠️ (так делать не стоит)

📡 Тестирование:
Сначала работал с публичным каналом — отправка сообщений работала идеально ✅. Но с приватным каналом возникли сложности...

🔐 Особенности приватного канала:
- Пользователь обязательно должен пройти аутентификацию 🛡️
- Написал кастомный контроллер, который проверяет:
  - Наличие токена 🔑
  - Корректность названия панели (сравнение с БД) 📋
- Только после успешной проверки происходит подключение к каналу ✅