Обзор мини-социальной сети RESTful Цель состоит в том, чтобы создать компактную социальную сеть, используя API в стиле RESTful. Разработка ведется локально с использованием PHP, MySQL, HTML, CSS и JavaScript. Основное внимание уделяется созданию понятных конечных точек и простого интерфейса на основе Bootstrap, при этом стиль остается второстепенным.
Структура проекта и основные файлы Создайте папки для конфигурации и модулей API рядом с интерфейсом. Добавьте index.html, style.css и script.js для пользовательского интерфейса. В разделе config place Database.php и в разделе api подготовьте вложенные папки, такие как пользователи, чаты, записи и сообщения.
Подключение к базе данных через настраиваемый класс Реализуйте класс базы данных с частным хостом, именем базы данных, логином и паролем, используя localhost, root и пустой пароль для локальной работы. Сохраните свойство public connection и предоставьте метод getConnection. Подключитесь к MySQL, установите кодировку UTF-8, сообщите об ошибках подключения и восстановите соединение.
HTML-леса с Bootstrap и jQuery Создайте index.html с помощью основного контейнера и свяжите Bootstrap 5 из его документации. Включите jQuery (3.7.1) и Popper через CDN, затем подключите script.js. Запустите локальный сервер для мгновенного просмотра изменений.
Регистрационная форма с вводными данными Bootstrap Добавьте регистрационную карточку, содержащую входные данные для имени пользователя, электронной почты и пароля, с классами управления формами и прозрачными заполнителями. Предоставьте основную кнопку регистрации. Привяжите обработчик onclick с именем register, который должен быть реализован на JavaScript.
Форма входа в систему для ввода адреса электронной почты и пароля Создайте регистрационную карточку, повторяющую схему регистрации, с полями электронной почты и пароля. Измените текст кнопки на "Войти" и установите "onclick" на "Войти". Сохраните визуальную согласованность, используя те же утилиты Bootstrap.
Скрытый контейнер для просмотра профиля Вставьте контейнер профиля, идентифицируемый идентификатором и заголовком, который изначально был скрыт с помощью display: none. Зарезервируйте внутреннюю область для ввода данных профиля. Откройте ее только после успешной аутентификации.
Управление друзьями и уведомления Подготовьте область друзей с текстовым вводом идентификатора друга и основной кнопкой "Добавить друга", привязанной к "Добавить друга". Добавьте список уведомлений в сообщения о статусе surface. Используйте утилиты для создания полей, такие как mt-3, для создания интервалов.
Составитель сообщений и заполнитель фида Предоставьте раздел "Публикации" с текстовым вводом для публикации контента, предлагая "О чем вы думаете?". заполнитель. Добавьте кнопку "Создать запись", связанную с createPost. Добавьте контейнер со списком для отображения записей и сохраняйте блок скрытым до получения разрешения.
Интерфейс чата и ввод сообщений Настройте раздел сообщений, содержащий список чатов, поле ввода для выбора получателя и поле содержимого сообщения. Прикрепите кнопку отправки сообщения, которая запускает отправку. Добавьте контейнер для отображения истории сообщений.
Минимальные глобальные стили для фокусировки Выберите системный шрифт пользовательского интерфейса, тонкий светлый фон и удалите поля и отступы по умолчанию. Ограничьте максимальную ширину основного контейнера 800 пикселями. Слегка приглушите цвета заголовков, оставив большую часть оформления для Bootstrap.
Регистрация пользователя с помощью JSON и хэширования В api/users/register.php прочитайте JSON из php://input и расшифруйте его. Извлеките имя пользователя, адрес электронной почты и пароль, хэшируя пароль с помощью password_hash с помощью bcrypt. Откройте подключение к базе данных, введите в users подготовленную инструкцию и верните ответ в формате JSON об успешном завершении или ошибке.
Безопасный вход в систему с подтверждением пароля В api/users/login.php примите JSON с адресом электронной почты и паролем. Отправьте запрос пользователю по электронной почте, используя подготовленный SELECT, и подтвердите его с помощью password_verify. В случае успеха верните объект JSON с идентификатором, именем пользователя и адресом электронной почты; в противном случае укажите неверные учетные данные.
Выборка данных профиля по идентификатору Создайте конечную точку, которая принимает идентификатор пользователя с помощью GET. Запросите этот идентификатор в базе данных и верните объект user в формате JSON. Если он отсутствует, отправьте сообщение о том, что пользователь не найден.
Список чатов с присоединенными именами пользователей Создайте конечную точку чата, получающую текущий идентификатор пользователя с помощью GET. Объединяйте чаты с пользователями, чтобы возвращать сообщения, в которых идентификатор user1_id или user2_id совпадает с идентификатором, исключая собственный идентификатор текущего пользователя. Выполните подготовленный запрос, извлеките все строки и выведите список чатов.
Создание и размещение постов Реализовать posts/create.php для приема идентификатора пользователя и содержимого в формате JSON и вставки новой строки в сообщения. Добавить posts/list.php для выбора сообщений, связанных с пользователями, и сортировки по идентификатору. Отвечать четкими сообщениями в формате JSON на успешные действия или ошибки и возвращать массивы сообщений для отображения в списке.
Загрузка сообщений для пары в чате Найдите чат, сопоставив два идентификатора пользователя в любом порядке, чтобы получить его идентификатор. Выберите сообщения для этого чата, упорядоченные по убыванию идентификатора. Верните массив сообщений или пустой список, если поиск не удался.
Убедитесь, что между отправителем и получателем существует чат Извлеките идентификатор отправителя из запроса и идентификатор получателя целевого пользователя. Запросите таблицу чатов, чтобы найти существующий чат, в котором участвуют оба участника. Если не найдено ни одного, вставьте новый чат с идентификаторами user1_id и user2_id и сохраните введенный идентификатор чата. Используйте найденный или вновь созданный chat_id для последующих операций.
Вставьте новое сообщение в базу данных Подготовьте ВСТАВКУ в таблицу сообщений с помощью sender_id, chat_id и content. Привяжите параметры к данным запроса и выполните инструкцию. Верните отчетливый ответ об успешном завершении вставки или сообщение об ошибке, если это не так. Поддерживайте единообразный формат запроса/ответа для удобства работы с клиентом.
Создавайте конечные точки для друзей и комментариев Добавьте PHP-файлы для добавления в друзья и листинга, а также для управления комментариями: листинга, создания и удаления. Следуйте той же структуре, что и в предыдущих конечных точках: проанализируйте вводимые данные в формате JSON, инициализируйте базу данных, подготовьте SQL, привяжите параметры, выполните и отправьте ответ в формате JSON. Когда эти конечные точки будут готовы, клиент может переходить к интеграции JavaScript.
Добавить друга с помощью PHP Считайте user_id и friend_id из входящих данных. Инициализируйте подключение к базе данных и подготовьте вставку в таблицу friends с этими полями. Привяжите оба параметра, выполните запрос и верните сообщение об успешном завершении. Если операция завершится неудачей, ответьте сообщением о том, что добавить друга не удалось.
Возвращает друзей пользователя с объединенными именами пользователей Примите user_id из запроса и выберите записи друзей, к которым присоединены пользователи, чтобы получить имена пользователей. Присоединяйтесь к друзьям.friend_id = users.id и отфильтруйте по друзьям.user_id = предоставленный идентификатор. Подготовьте и свяжите входные данные, извлеките все строки в виде ассоциативных массивов и верните их в формате JSON. Сохраняйте только необходимые столбцы, чтобы минимизировать полезную нагрузку.
Список комментариев к записи Берем post_id из данных запроса и объединяем комментарии пользователей в comments.user_id = users.id. Выбираем нужные поля и фильтруем по комментариям.post_id = указанное значение. Выполняем, извлекаем все результаты и возвращаем их в формате JSON. Это позволяет клиенту отображать каждый комментарий рядом с автором.
Добавить новый комментарий Извлеките post_id, user_id и содержимое из текста запроса. Подготовьте и выполните ВСТАВКУ в таблицу комментариев с этими значениями. В случае успеха верните “комментарий добавлен успешно”. Если что-то не удается, ответьте, что комментарий не удалось добавить.
Удалить комментарий Считайте идентификатор комментария из данных запроса. Подготовьте инструкцию УДАЛЕНИЯ, предназначенную для комментариев, идентификатор которых равен указанному значению. Выполните удаление и верните сообщение “Комментарий успешно удален” в случае успеха. Если удаление завершится неудачей, сообщите, что комментарий не удалось удалить.
Инициализируйте состояние интерфейса и регистрацию пользователя Определите переменные для хранения текущего пользователя и текущего друга в чате. Реализуйте функцию async register(), которая считывает имя пользователя, адрес электронной почты и пароль из формы и отправляет JSON с типом содержимого application/json в конечную точку регистрации. Проанализируйте ответ в формате JSON и отобразите сообщение сервера. Устраните первоначальную блокировку запроса, запустив PHP-сервер на выбранном порту и открыв правильный URL-адрес, а затем подтвердите успешную регистрацию с помощью сохраненного хэшированного пароля.
Войдите в систему и переключите интерфейс Создайте асинхронный логин(), который отправляет адрес электронной почты и пароль в конечную точку входа и анализирует ответ. Если пользователь найден, сохраните объект пользователя, скройте блок авторизации и покажите разделы профиля, друзей, сообщений и переписки. Обновите область профиля, добавив приветственное сообщение и идентификатор пользователя. Это установит состояние сеанса входа в систему для клиента.
Добавьте друга из пользовательского интерфейса и уведомите об этом Считайте идентификатор друга из входных данных и отправьте JSON‑файл в конечную точку добавления в друзья, присвоив текущему пользователю user_id. Проанализируйте ответ, обновите список друзей и создайте стилизованный элемент уведомления. Отобразите текст, например “Пользователь с идентификатором X добавлен в друзья”, и добавьте его в контейнер уведомлений. Это обеспечивает мгновенную обратную связь наряду с обновленными данными.
Загрузка и визуализация списка друзей Извлеките друзей текущего пользователя с сервера и проанализируйте массив JSON. Очистите существующий контейнер списка перед отображением. Для каждого друга создайте новый элемент, назначьте классы отображения, задайте внутренний HTML-код с данными друга и добавьте его в список. Поддерживайте один и тот же цикл выборки‑разбора‑рендеринга для обеспечения согласованности.
Создавайте посты и обновляйте ленту Реализуйте функцию, которая считывает содержимое записи и отправляет его с идентификатором пользователя в конечную точку создания записи с помощью POST JSON. Обработайте ответ сервера и при необходимости отобразите сообщения об ошибках. В случае успеха обновите список записей, чтобы новая запись появилась немедленно. Пользовательский интерфейс отражает изменения без перезагрузки страницы.
Визуализация сообщений со встроенными комментариями Загружайте сообщения, очищайте контейнер и отображайте содержимое каждого сообщения. Под каждым сообщением добавьте специальный ввод комментариев, привязанный к идентификатору этого сообщения, и кнопку, которая запускает добавление комментариев(postID). Также загрузите существующие комментарии к каждому сообщению, чтобы было видно обсуждение. Такой макет позволяет писать и просматривать комментарии на месте.
Добавляйте комментарии и обновляйте ветку публикации В AddComment(postID) считайте входное значение и отправьте JSON с post_id, user_id и содержимым в конечную точку создания комментария. После успешного ответа вызовите loadComments(postID). В loadComments(postID) извлеките комментарии к этому сообщению, очистите контейнер для комментариев и отобразите каждую запись с указанием автора и текста. Тема обновляется мгновенно после отправки.
Выберите чат, отправляйте сообщения и отображайте историю Перед отправкой сообщения укажите выбранного друга в чате. Прочитайте текст сообщения и отправьте его по адресу mess/send.php указав sender_id, идентификатор выбранного друга и содержание, затем отформатируйте и отобразите отзыв сервера. Реализуйте загрузчик, который извлекает сообщения для user_id и friend_id, очищает представление и отображает элементы сообщения. Стилизуйте сообщения по-разному в зависимости от того, были ли они отправлены текущим пользователем или другом.
Загружайте чаты и привязывайте выбор к загрузке сообщений Извлеките чаты текущего пользователя, очистите список чатов и отобразите записи, помеченные идентификаторами друзей. Добавьте обработчики кликов, которые определяют текущего друга, заполняют скрытые входные данные и загружают историю сообщений для выбранного чата. Полное пошаговое руководство позволяет зарегистрировать другого пользователя, добавить друга, опубликовать сообщение и оставить комментарии для проверки выполнения. В проекте особое внимание уделяется текстам запросов в формате JSON, согласованному использованию сообщений и возможности реализации той же логики с другими стеками, а устранение неполадок предлагается через комментарии или группу.