**Свой сайт знакомств #17: отправка сообщений, реализация переписки на PHP, HTML, SQL, Bootstrap — Transcript & Summary | SozAI** Source: https://sozai.app/transcript/dating-site-messaging-php-html-sql-bootstrap/ Разработка функционала переписки для сайта знакомств на PHP, HTML, SQL и Bootstrap в режиме реального времени. ## Key Takeaways - Для реализации переписки необходима отдельная таблица в базе данных с ID отправителя, получателя и текстом сообщения. - Интерфейс переписки создается с помощью HTML-формы и Bootstrap для удобства пользователя. - Обработка сообщений происходит через POST-запросы и простую проверку наличия данных. - Упрощенный подход к разработке ускоряет процесс, но при масштабировании рекомендуется разделять код. - Видео демонстрирует практическую реализацию функционала в режиме реального времени. ## What the video covers - Введение в создание раздела сообщений для сайта знакомств. - Создание новой таблицы в базе данных для хранения сообщений между пользователями. - Добавление кнопки 'Написать сообщение' на страницу анкеты пользователя. - Реализация формы отправки сообщений с использованием метода POST. - Обработка и сохранение сообщений в базу данных. - Использование Bootstrap для стилизации элементов интерфейса. - Пошаговое объяснение кода и логики работы переписки. - Обсуждение упрощенного подхода к разработке без разделения кода на части. - Вывод сообщений и организация интерфейса переписки. - Призывы к подписке и поддержке автора проекта. ## Chapters 1. 00:00 Введение и обзор текущего функционала сайта знакомств 2. 02:13 Создание таблицы сообщений в базе данных 3. 04:36 Добавление ссылки на раздел сообщений в хедер 4. 07:34 Добавление кнопки 'Написать сообщение' на страницу анкеты 5. 10:28 Создание формы для отправки сообщений 6. 16:13 Обработка POST-запроса и сохранение сообщений 7. 18:38 Вывод сообщений и организация интерфейса переписки 8. 35:49 Заключение и призыв к подписке Answers ## Questions about this video Как создается таблица для хранения сообщений в базе данных? Таблица создается с полями ID User 1 (отправитель), ID User 2 (получатель) и текстом сообщения. Это позволяет хранить переписку между пользователями. Как реализована отправка сообщений на сайте? Сообщения отправляются через HTML-форму с методом POST. После проверки наличия данных на сервере, сообщение сохраняется в базу данных. Почему автор не разделяет код на части при разработке? Автор упрощает процесс разработки, так как проект ведется одним человеком. В больших проектах рекомендуется разделять код для удобства поддержки. ## Full Transcript — Download SRT & Markdown 00:02 Speaker A Добрый день, дорогие подписчики! Рад вас приветствовать на новом выпуске проекта "Свой сайт знакомств", где мы с вами в режиме реального времени разрабатываем и запускаем свой дейтинг-сервис. 00:22 Speaker A А у нас что? У нас в принципе готов основной функционал сайта знакомств: есть анкеты, 00:48 Speaker A есть возможность прописывать информацию, искать по фильтру интересных нам людей. Появилась возможность добавлять и проявлять симпатии, и нет пока переписки. Давайте мы это исправим. 01:24 Speaker A То есть хотелось бы писать короткие сообщения друг другу. Так как мы будем это с вами 01:49 Speaker A реализовывать? Ну, определённо, определённо нужна нам с вами новая таблица. Так, давайте создадим новую табличку. Таблицу назовём... [музыка] сообщения. Так, так, сообщения. Вроде правильно написал. А соответственно ID... 02:13 Speaker A О, давайте ID User 1 — это будет тот человек, который пишет сообщение, потом 02:39 Speaker A ID User 2 — это человек, которому пишут сообщения, и в ячейке текст мы с вами будем сохранять само сообщение. В принципе, можно ещё докинуть, мы пока этого делать не будем, а сделаем просто табличку и попытаемся соответственно из неё в неё вводить и 03:09 Speaker A выводить данные. То есть самое примитивное, что можно делать с сообщениями в базе данных. Мы создали с вами эту ячейку, эту табличку. Так что нужно сделать? Нужно сделать раздел. Разделы будем делать по аналогии, как мы с вами создавали другие странички. Так, давайте 03:39 Speaker A наверное, мы с вами... Так, сейчас вот у нас есть, получается, анкета, вот на базе страницы анкета, а мы с вами 04:10 Speaker A сейчас сделаем страничку, где мы будем писать сообщения. Так, переименую мы с вами эту папочку в 04:36 Speaker A сообщения. Вот также, соответственно, в хедере мы должны вынести ссылочку на наши сообщения. Так, давайте посмотрим. Так, меня смотрели, мне симпатизируют, а дальше скорее всего вот эту ссылочку давайте мы с вами скроем и сделаем новую. Угу, так, замечательно. Дальше, дальше, 05:04 Speaker A дальше. Всё, ну и соответственно вот эти все ненужные ссылки мы наконец-то убираем. Не знаю, сможем ли мы за один выпуск сделать целый раздел с сообщениями, но такое желание есть. Так, сообщение, дальше давайте я скопирую название таблички, 05:43 Speaker A вот, потому что папка у нас называется точно так же. Так, я сохраняю, дальше что? Обновляю страничку. Давайте обновляю, и у меня появился раздел сообщения, в котором пока ничего нет. Ну, потому что я пере... идентификаторов. Хорошо, так, наверное, нам нужно вот из поиска, из раздела изучить 06:12 Speaker A анкету под кнопочкой убрать симпатию, ну или добавить симпатию. У нас должна появиться новая кнопочка "Написать сообщение". Вот, давайте мы с вами соответственно эту ссылочку сейчас и сформируем. Вместе с этой ссылкой что мы сделаем? Мы ещё передадим... Так, где у нас вот анкета же? Да, 07:02 Speaker A да, анкета. Вместе с этой ссылочкой мы передадим идентификатор соответственно того, куда мы будем писать. Так, так, так, так, вот, вот тут у нас ссылочка, кнопочка получается для... Нока чего у нас с вами тут? Да, проявить симпатию, убрать симпатию, и тут 07:34 Speaker A ниже будет "Написать сообщение". Так вот, я думаю, куда нам её поставить? Давайте "Написать сообщение". Сама кнопка будет располагаться вот тут, вот, под... Так, то есть это у нас с вами ещё раз... Так, табличку название таблички скопирую. То есть мы с вами должны 08:27 Speaker A отправить на страничку сообщения и передать идентификатор пользователя, который у нас в данный момент на странице. Его мы сохраняли в переменную ID 2. Что сейчас происходит? Вы можете обязательно посмотреть прошлый выпуск, вот один из прошлых выпусков на канале, и я думаю всё будет понятно. То 08:59 Speaker A есть я пошагово показываю, как мы разрабатываем с вами сайт знакомств. Так, usid вставили, замечательно. Так, тут у нас Button Danger "Написать сообщение". Так, написать сообщение. Нам нужен, наверное, символ сообщения, символ сообщения, что-то такое. Давайте посмотрим, какой нам подойдёт. Так, так, так, звёзды, инь-янь, 09:37 Speaker A что-то, что-то не то. Так, [музыка], музыка. Так, может быть телефон подставить? Вот интересно, по логике, в принципе. А вот же, вот у нас есть вот такое вот сообщение. Давайте мы его просто скроем, поставим. То есть вот, да, понятно, что всё 10:00 Speaker A простенько, можно иконки и Bootstrap. [музыка] [музыка] У нас должны быть кнопочки. But так, наверное, вот эту будем использовать, это максимально похоже на сообщение. Так, так, так, бегу сюда. Это у нас был Danger Prim. Обновляю страницу. Да, у нас вот 10:28 Speaker A появилась кнопочка "Написать сообщение". Нажимаю, меня отправляет на ту же самую страницу, замечательно. Вот, значит, у нас всё готово для изменений. Так, дальше. Что дальше? Я открываю, получается, страничку сообщения. Так, и давайте дальше колдовать. Так, на этой странице что мне 11:03 Speaker A нужно вставить? Мне нужно, наверное, разместить некое подобие... Сейчас определимся... некое подобие формы для написания сообщений. Так, M Control. Да, и я соответственно возьму просто textarea и размещу кнопочку. Так, давайте посмотрим, где это красиво можно уместить. Так, так, так, так, вот это всё в принципе 11:45 Speaker A мне уже не нужно, но как пример давайте оставим. Так, то есть если юзер... Ага. То есть мы всю информацию можем получить о человеке, в принципе код не нужен, да? Давайте мы его уберём или оставим? Нет, пока, ста... может 12:23 Speaker A быть какие-то данные при ещё выдёргивать. Дальше. Что дальше? У нас пол женский, мужской убираем. Так, это у нас поле с информацией, да? У человека мы его тоже убираем полностью. Так, так, так. Ну в принципе вот и всё, ничего внутри не осталось. Есть у 12:47 Speaker A нас есть контейнер, в котором мы соответственно можем сделать уже полноценную переписку. Я думаю, начнём мы с чего? Начнём, получается, с поля, куда мы сможем писать текст сообщения. Так, это у нас должен быть form. Да, так, form. Угу. 13:15 Speaker A Так, дальше. Что дальше? Дальше, дальше, дальше. У нас есть форма, у нас также получается мы с вами должны использовать метод. Метод пост. Методом будем отправлять сообщение. Так, метод пост, и мне нужна кнопочка, нуж... [музыка] кнопочка. Так, input type submit, так, пропишем 14:08 Speaker A [музыка] value. Тут у нас что будет? Отправить. Угу, всё. И давайте какой-нибудь класс для сообщения всё-таки применим. Так, компоненты, где у нас тут дальше кнопочки? А можно, например, вот IO использовать? Да, ну давайте его возьмём, потому что одни и те же, одни и те же стили использовать будет неинтересно, поэтому давайте разные попробуем. Так, я сейчас что сохраню и хочу увидеть готовое поле. Есть готовая страница для редактирования. Вот у нас соответственно вот тут вот сообщение, и мы нажимаем отправить. Так, неплохо было бы парочку 14:42 Speaker A строчек пропустить. Так, div класс, что у нас тут? R. Давайте 10, 10 пикселей пропустим. Нажимаю сохранить, обновляю страничку. Всё, соответственно, после того, как мы наберём какой-то текст, нажмём отправить, он должен улететь к нам в базу данных. Так, давайте соответственно 15:12 Speaker A напишем обработку для вот этого нашего скрипта. Так, обязательно пишу. Да, какой mess? Почему я таблицу не назвал mess? Ну ладно, хотя надо было бы это сделать, конечно. Угу, так new mess, по-моему, мед я написал как массаж. Так вот, new mess через и 15:46 Speaker A да, давайте так и исправим. Всё, так, сохраняем. Дальше. Я честно скажу, не хочу прямо особо усложнять себе работу, поэтому вот мы обработчик прямо над формой сейчас сделаем и всё. Да, кто-то скажет, что ну лучше так не делать. Ну, 16:13 Speaker A конечно, лучше разбивать, наверное, внутренние внутреннюю часть от оболочки. Да, при разработке большого проекта. Но поскольку этот проект пишет один человек, я вот поэтому давайте мы с вами ничего разбивать не будем, а максимально ускорим себе разработку. Так, я что тут делаю? Я 16:46 Speaker A получается при помощи POST-запроса передаю информацию вот сюда, вот текст. А желательно, конечно, изначально проверить, вот вообще был ли какой-то запрос, то есть не пустой ли у нас с вами массив POST и вообще есть ли там 17:14 Speaker A какое-то сообщение. Давайте это сделаем, то есть проверим при помощи функции isset вот таким вот образом. Так, то есть если получается, мы с вами этот параметр передали, дальше мы можем работать уже с ним, замечательно. Так, по аналогии сверху у нас что? US 17:40 Speaker A ID — это получается ID юзера из сессии, и ID 2 — это соответственно вот тот параметр, который мы передадим. Вот скрипт на добавление. Да, вот вот так вот я возьму целиком, лишнее сейчас уберём, но вообще то есть это что? Это у нас с вами 18:07 Speaker A SQL-запрос. ИРТ. Вот он ИРТ. Просто мы добавлять уже будем не лайки, а мы должны добавлять с вами в таблицу соответственно. Так, мы сделаем так: insert in сообщения User 1, ID юзера 2, а и соответственно сюда мы что? Сюда мы 18:38 Speaker A должны т... 19:05 Speaker A Что захожу в sgl данное выделение не содержит уникального столбца Ну хорошо ничего страшного нам в принципе Зачем нам уникальные идентификаторы напротив сообщений То есть это что то есть Select From сообщения всё и два условия прописать соответственно где у нас юзер 1 равен 19:31 Speaker A текущему юзеру А Р 2 равен другому юзеру а User 2 - это вот на странице которого мы находимся так се From сообщени у меня уже был тут запрос вот Select From пам-пам-пам но мы тут вытаскивали ВС получается тут 19:57 Speaker A одно условие а нам нужно сделать целых два условия Давайте соответственно это мы сделаем сейчас так Select From сообщение раз где значит юзер 1 ID юзера 1 ID юзер 1 равняется чему равняется получается ID юзера 1 вот он так так так вот Вот так 20:53 Speaker A вот и второе условие должно тоже падать то есть ID юзера 1 а вот тут ID юзера 2 мы с вами дописывая ID User 2 Угу всё А тут Что тут мы получается сейчас должны информацию получить из массива кото с вами Разбираем и каждое 21:31 Speaker A сообщение мы соответственно сможем получить и вывести так сейчас что тут я пишу так текст угу так текст хорошо замечательно Дальше мне что мне наверное понадобится какая-то какой-то блок в котором мы это сообщение попробуем вывести получается div А давайте 22:02 Speaker A стайл какой какой цвет поставим так так бэкграунд Граунд бэкграунд так так так может стандартное что-то Попробуем во например вот такие вот да сообщения Давайте в стандартном бутстрап ском блоке просто будем писать сообщения вот синий такой приятный цвет Всё мы вот мы 22:30 Speaker A в нём и будем писать все сообщения если что потом всегда можно будет исправить просто сейчас будет намного проще писать тут так и я что делаю я пишу получается вот в этом блоке уже выведу свой текст так PHP вывожу 23:01 Speaker A текст всё ну можно соответственно после этого блока поставить сколько отступа Вот надо посмотреть так вобще отступы будут нет автоматические но они должны какие-то отступы проставляться безусловно так продолжить Ага страница зависла Значит где-то у нас ошибка притом серверная ошибка 23:29 Speaker A загрузиться А вот Ну конечно Вот же у меня кусочек запроса тут так оберн наверное каждое условие в круглой скобке вот таким вот образом и потом уже будем думать как это всё привести в приличный вид ну чтоб смотрелось более так обновили сообщение доставлено 24:00 Speaker A дальше Давайте ещё одно напишем Привет например так нажимаю отправить Если я обновлю страницу Да привет тоже попадает хорошо так для того чтобы у меня сообщение попадало раньше чем вот мы его выведем я всё-таки наверное Давайте этот скрипт так не туда нажимаю 24:33 Speaker A Ага вот сюда вот наверное перед контейнером мы его поставим и вот сюда выведем Так сохранить ещё раз что-то написали всё сообщение попадает так дальше Что Дальше неплохо было бы конечно разбить сообщение на наше и на не наше общение нужно выводить вот в таком 25:01 Speaker A вот цвете да Угу в таком вот цвете нужно выводить белым или каким-то другим Так Ну значит условие у нас какое может быть либо у нас вот такое условие для сообщений это раз либо же у нас ещё следующее может быть 25:40 Speaker A условие там где сообщения не наши то есть например User 2 равен юзеру 1 а юзер 1 равен вот этому так ещё раз обернусь в круглые скобки всё таким образом у нас точно должны попадать все сообщения которые мы хотели 26:07 Speaker A так и и и давайте мы определим получается вид для наших сообщений и для тех сообщений которые прислали нам наверное наверное Давайте вот если это допустим отправ мы будем писать Вот такими сообщениями да то есть в ЧМ отличие Вот это Alert 26:38 Speaker A ИО всё супер То есть там был Alert Prim это будет Арт инфо так и осталось уже вот сюда прописать просто условие Так давайте пром есть если если если ЕС а вот мы писали так ID получается так ID User 27:11 Speaker A 1 равен Чему равен получается Session ID User то мы с вами выведем алер инфо Угу Иначе мы уже выведем так посмотрим изменится ли что-то у нас вот тут вот да таким вот образом так на страничке Ну по идее да 28:17 Speaker A По идее должно да Всё у нас стал получается вот фиолетовый цвет а так мы кому писали мы писали сейчас так так так и Наверное мои сообщения должны вот те сообщения которые мы пишем от пользователя они должны быть прижаты к правому 28:36 Speaker A углу так на бутстрапе по-моему Т как-то так он делается OT п Давайте посмотрим прижать к правому углу Да OT попробуем Да вот во-первых Alert ИО написали А ещё и flot end давайте Нет не то скопировал так flot end И если всё в 29:09 Speaker A порядке [музыка] то а ничего не поменялось Так посмотреть код Угу Какой ещё вариант может быть а возможен Ну почему почему текст не прижался вправо плохо же можно ещё через CSS текст это что у нас там текст ай а Left Да как-то 29:57 Speaker A так попробуем либо end давайте у нас же текстовое сообщение внутри так текст так так так А можем же к сообщению применить Давайте попробуем прямо внутри сообщения это реализовать так тут у нас что тут у нас получается Давайте будет 30:40 Speaker A абзац и если у нас получается р ID то есть целиком это условие точно также то тогда мы что выводим то тогда мы Давайте попробуем во-первых сначала класс а flot end использовать ну попробуем То есть я не уверен что он отработает Но если он 31:19 Speaker A отработает это будет прямо супер ну не отработает ну просто заменим на получается КСТ и всё так файл сохранить обновляю стра Да всё сообщение прижало вправо и это замечательно сейчас что сейчас я хочу зайти получается с другого аккаунта вот с кем мы переписывались Мы 32:05 Speaker A переписывались с идентификатором один правильно вот он сообщение тут у нас есть Так юзер идентификатор один У нас у Марины То есть я сейчас в режиме инкогнито зайду э за Марину так какой пароль там был у Марины Да бли 32:46 Speaker A так у Марины Был пароль 1 2 3 4 так заходим получается вот сюда вот дальше в раздел поиск изучить анкету нажимаю Написать сообщение Ага тут у нас где-то глюк потому что всё стало вот таким вот цветом А так быть не 33:18 Speaker A должно То есть у Марины должна быть своя переписка Давайте смотреть в чём проблема так получается юзер р о Нет не User о то есть это у нас с вами Вот этот User То есть это значение вот этой вот выборки должен 33:45 Speaker A быть юзер о а не просто юзер О вот так вот хорошо что я сходу сразу тестирую так квадратная скобка Ага И вот тут я тоже должен сравнивать с вот этим вот значением замечательно сохраняю обновляю страничку Да вот вот 34:15 Speaker A нам пишут давайте мы сейчас попробуем написать что-то в ответ Привет нажимаю отправить и тут пользователи страничку Да он так Подождите а мы наоборот сделали А нет Всё правильно да ещё раз так Привет два раз мы пишем а тут человек получит 34:50 Speaker A Вот вот такое вот сообщение так замечательно Я думаю что Сегодня мы можем заканчивать эту серию в принципе доставку сообщений мы сделали в следующем выпуске попытаемся как-то облагородить Вот соответственно работу с базой данных возможно придумаем соответственно какие-то дополнительные функции то есть чтобы у нас тут допустим 35:23 Speaker A имя пользователя выводилось и так далее Наверное нужно будет сделать подгрузка новых сообщений в более таком адекватном виде чтобы у нас они автоматически подгружать в случае отправки нового сообщения вот а на сегодня мы с вами заканчиваем этот выпуск Большое спасибо Что что Смотрите 35:49 Speaker A А мои видео вот подписывайтесь на канал ставьте лайки оставляйте комментарии что вы по поводу этого всего думаете также я Напоминаю что у меня есть страница на бусте Где вы можете поддержать моё творчество Вот и бонусом для всех подписчиков я как обычно 36:12 Speaker A выкладываю все исходные файлы от полученного на видео то есть вы полностью сможете скачать архив и развернуть его у себя ВС Всем спасибо Дальше будет только интереснее ведь на этом канале мы работы разрабатываем стартапы в режиме реального времени Всем 36:37 Speaker A пока Topics: сайт знакомств переписка PHP HTML SQL Bootstrap чат сообщения разработка сайта программирование --- This is the markdown twin of https://sozai.app/transcript/dating-site-messaging-php-html-sql-bootstrap/ — the same content, without the markup. Published by SozAI (https://sozai.app). Reuse and quotation are allowed with attribution and a link back. Machine-readable index: https://sozai.app/llms.txt · data API: https://sozai.app/api/