Speaker A
Добрый день, дорогие подписчики! Рад вас приветствовать на новом выпуске проекта "Свой сайт знакомств", где мы с вами в режиме реального времени разрабатываем и запускаем свой дейтинг-сервис.
Разработка функционала переписки для сайта знакомств на PHP, HTML, SQL и Bootstrap в режиме реального времени.
Key Takeaways
- Для реализации переписки необходима отдельная таблица в базе данных с ID отправителя, получателя и текстом сообщения.
- Интерфейс переписки создается с помощью HTML-формы и Bootstrap для удобства пользователя.
- Обработка сообщений происходит через POST-запросы и простую проверку наличия данных.
- Упрощенный подход к разработке ускоряет процесс, но при масштабировании рекомендуется разделять код.
- Видео демонстрирует практическую реализацию функционала в режиме реального времени.
What the video covers
- Введение в создание раздела сообщений для сайта знакомств.
- Создание новой таблицы в базе данных для хранения сообщений между пользователями.
- Добавление кнопки 'Написать сообщение' на страницу анкеты пользователя.
- Реализация формы отправки сообщений с использованием метода POST.
- Обработка и сохранение сообщений в базу данных.
- Использование Bootstrap для стилизации элементов интерфейса.
- Пошаговое объяснение кода и логики работы переписки.
- Обсуждение упрощенного подхода к разработке без разделения кода на части.
- Вывод сообщений и организация интерфейса переписки.
- Призывы к подписке и поддержке автора проекта.
Chapters
- 00:00Введение и обзор текущего функционала сайта знакомств
- 02:13Создание таблицы сообщений в базе данных
- 04:36Добавление ссылки на раздел сообщений в хедер
- 07:34Добавление кнопки 'Написать сообщение' на страницу анкеты
- 10:28Создание формы для отправки сообщений
- 16:13Обработка POST-запроса и сохранение сообщений
- 18:38Вывод сообщений и организация интерфейса переписки
- 35:49Заключение и призыв к подписке
Full Transcript — Download SRT & Markdown
Speaker A
А у нас что? У нас в принципе готов основной функционал сайта знакомств: есть анкеты,
Speaker A
есть возможность прописывать информацию, искать по фильтру интересных нам людей. Появилась возможность добавлять и проявлять симпатии, и нет пока переписки. Давайте мы это исправим.
Speaker A
То есть хотелось бы писать короткие сообщения друг другу. Так как мы будем это с вами
Speaker A
реализовывать? Ну, определённо, определённо нужна нам с вами новая таблица. Так, давайте создадим новую табличку. Таблицу назовём... [музыка] сообщения. Так, так, сообщения. Вроде правильно написал. А соответственно ID...
Speaker A
О, давайте ID User 1 — это будет тот человек, который пишет сообщение, потом
Speaker A
ID User 2 — это человек, которому пишут сообщения, и в ячейке текст мы с вами будем сохранять само сообщение. В принципе, можно ещё докинуть, мы пока этого делать не будем, а сделаем просто табличку и попытаемся соответственно из неё в неё вводить и
Speaker A
выводить данные. То есть самое примитивное, что можно делать с сообщениями в базе данных. Мы создали с вами эту ячейку, эту табличку. Так что нужно сделать? Нужно сделать раздел. Разделы будем делать по аналогии, как мы с вами создавали другие странички. Так, давайте
Speaker A
наверное, мы с вами... Так, сейчас вот у нас есть, получается, анкета, вот на базе страницы анкета, а мы с вами
Speaker A
сейчас сделаем страничку, где мы будем писать сообщения. Так, переименую мы с вами эту папочку в
Speaker A
сообщения. Вот также, соответственно, в хедере мы должны вынести ссылочку на наши сообщения. Так, давайте посмотрим. Так, меня смотрели, мне симпатизируют, а дальше скорее всего вот эту ссылочку давайте мы с вами скроем и сделаем новую. Угу, так, замечательно. Дальше, дальше,
Speaker A
дальше. Всё, ну и соответственно вот эти все ненужные ссылки мы наконец-то убираем. Не знаю, сможем ли мы за один выпуск сделать целый раздел с сообщениями, но такое желание есть. Так, сообщение, дальше давайте я скопирую название таблички,
Speaker A
вот, потому что папка у нас называется точно так же. Так, я сохраняю, дальше что? Обновляю страничку. Давайте обновляю, и у меня появился раздел сообщения, в котором пока ничего нет. Ну, потому что я пере... идентификаторов. Хорошо, так, наверное, нам нужно вот из поиска, из раздела изучить
Speaker A
анкету под кнопочкой убрать симпатию, ну или добавить симпатию. У нас должна появиться новая кнопочка "Написать сообщение". Вот, давайте мы с вами соответственно эту ссылочку сейчас и сформируем. Вместе с этой ссылкой что мы сделаем? Мы ещё передадим... Так, где у нас вот анкета же? Да,
Speaker A
да, анкета. Вместе с этой ссылочкой мы передадим идентификатор соответственно того, куда мы будем писать. Так, так, так, так, вот, вот тут у нас ссылочка, кнопочка получается для... Нока чего у нас с вами тут? Да, проявить симпатию, убрать симпатию, и тут
Speaker A
ниже будет "Написать сообщение". Так вот, я думаю, куда нам её поставить? Давайте "Написать сообщение". Сама кнопка будет располагаться вот тут, вот, под... Так, то есть это у нас с вами ещё раз... Так, табличку название таблички скопирую. То есть мы с вами должны
Speaker A
отправить на страничку сообщения и передать идентификатор пользователя, который у нас в данный момент на странице. Его мы сохраняли в переменную ID 2. Что сейчас происходит? Вы можете обязательно посмотреть прошлый выпуск, вот один из прошлых выпусков на канале, и я думаю всё будет понятно. То
Speaker A
есть я пошагово показываю, как мы разрабатываем с вами сайт знакомств. Так, usid вставили, замечательно. Так, тут у нас Button Danger "Написать сообщение". Так, написать сообщение. Нам нужен, наверное, символ сообщения, символ сообщения, что-то такое. Давайте посмотрим, какой нам подойдёт. Так, так, так, звёзды, инь-янь,
Speaker A
что-то, что-то не то. Так, [музыка], музыка. Так, может быть телефон подставить? Вот интересно, по логике, в принципе. А вот же, вот у нас есть вот такое вот сообщение. Давайте мы его просто скроем, поставим. То есть вот, да, понятно, что всё
Speaker A
простенько, можно иконки и Bootstrap. [музыка] [музыка] У нас должны быть кнопочки. But так, наверное, вот эту будем использовать, это максимально похоже на сообщение. Так, так, так, бегу сюда. Это у нас был Danger Prim. Обновляю страницу. Да, у нас вот
Speaker A
появилась кнопочка "Написать сообщение". Нажимаю, меня отправляет на ту же самую страницу, замечательно. Вот, значит, у нас всё готово для изменений. Так, дальше. Что дальше? Я открываю, получается, страничку сообщения. Так, и давайте дальше колдовать. Так, на этой странице что мне
Speaker A
нужно вставить? Мне нужно, наверное, разместить некое подобие... Сейчас определимся... некое подобие формы для написания сообщений. Так, M Control. Да, и я соответственно возьму просто textarea и размещу кнопочку. Так, давайте посмотрим, где это красиво можно уместить. Так, так, так, так, вот это всё в принципе
Speaker A
мне уже не нужно, но как пример давайте оставим. Так, то есть если юзер... Ага. То есть мы всю информацию можем получить о человеке, в принципе код не нужен, да? Давайте мы его уберём или оставим? Нет, пока, ста... может
Speaker A
быть какие-то данные при ещё выдёргивать. Дальше. Что дальше? У нас пол женский, мужской убираем. Так, это у нас поле с информацией, да? У человека мы его тоже убираем полностью. Так, так, так. Ну в принципе вот и всё, ничего внутри не осталось. Есть у
Speaker A
нас есть контейнер, в котором мы соответственно можем сделать уже полноценную переписку. Я думаю, начнём мы с чего? Начнём, получается, с поля, куда мы сможем писать текст сообщения. Так, это у нас должен быть form. Да, так, form. Угу.
Speaker A
Так, дальше. Что дальше? Дальше, дальше, дальше. У нас есть форма, у нас также получается мы с вами должны использовать метод. Метод пост. Методом будем отправлять сообщение. Так, метод пост, и мне нужна кнопочка, нуж... [музыка] кнопочка. Так, input type submit, так, пропишем
Speaker A
[музыка] value. Тут у нас что будет? Отправить. Угу, всё. И давайте какой-нибудь класс для сообщения всё-таки применим. Так, компоненты, где у нас тут дальше кнопочки? А можно, например, вот IO использовать? Да, ну давайте его возьмём, потому что одни и те же, одни и те же стили использовать будет неинтересно, поэтому давайте разные попробуем. Так, я сейчас что сохраню и хочу увидеть готовое поле. Есть готовая страница для редактирования. Вот у нас соответственно вот тут вот сообщение, и мы нажимаем отправить. Так, неплохо было бы парочку
Speaker A
строчек пропустить. Так, div класс, что у нас тут? R. Давайте 10, 10 пикселей пропустим. Нажимаю сохранить, обновляю страничку. Всё, соответственно, после того, как мы наберём какой-то текст, нажмём отправить, он должен улететь к нам в базу данных. Так, давайте соответственно
Speaker A
напишем обработку для вот этого нашего скрипта. Так, обязательно пишу. Да, какой mess? Почему я таблицу не назвал mess? Ну ладно, хотя надо было бы это сделать, конечно. Угу, так new mess, по-моему, мед я написал как массаж. Так вот, new mess через и
Speaker A
да, давайте так и исправим. Всё, так, сохраняем. Дальше. Я честно скажу, не хочу прямо особо усложнять себе работу, поэтому вот мы обработчик прямо над формой сейчас сделаем и всё. Да, кто-то скажет, что ну лучше так не делать. Ну,
Speaker A
конечно, лучше разбивать, наверное, внутренние внутреннюю часть от оболочки. Да, при разработке большого проекта. Но поскольку этот проект пишет один человек, я вот поэтому давайте мы с вами ничего разбивать не будем, а максимально ускорим себе разработку. Так, я что тут делаю? Я
Speaker A
получается при помощи POST-запроса передаю информацию вот сюда, вот текст. А желательно, конечно, изначально проверить, вот вообще был ли какой-то запрос, то есть не пустой ли у нас с вами массив POST и вообще есть ли там
Speaker A
какое-то сообщение. Давайте это сделаем, то есть проверим при помощи функции isset вот таким вот образом. Так, то есть если получается, мы с вами этот параметр передали, дальше мы можем работать уже с ним, замечательно. Так, по аналогии сверху у нас что? US
Speaker A
ID — это получается ID юзера из сессии, и ID 2 — это соответственно вот тот параметр, который мы передадим. Вот скрипт на добавление. Да, вот вот так вот я возьму целиком, лишнее сейчас уберём, но вообще то есть это что? Это у нас с вами
Speaker A
SQL-запрос. ИРТ. Вот он ИРТ. Просто мы добавлять уже будем не лайки, а мы должны добавлять с вами в таблицу соответственно. Так, мы сделаем так: insert in сообщения User 1, ID юзера 2, а и соответственно сюда мы что? Сюда мы
Speaker A
должны т...
Speaker A
Что захожу в sgl данное выделение не содержит уникального столбца Ну хорошо ничего страшного нам в принципе Зачем нам уникальные идентификаторы напротив сообщений То есть это что то есть Select From сообщения всё и два условия прописать соответственно где у нас юзер 1 равен
Speaker A
текущему юзеру А Р 2 равен другому юзеру а User 2 - это вот на странице которого мы находимся так се From сообщени у меня уже был тут запрос вот Select From пам-пам-пам но мы тут вытаскивали ВС получается тут
Speaker A
одно условие а нам нужно сделать целых два условия Давайте соответственно это мы сделаем сейчас так Select From сообщение раз где значит юзер 1 ID юзера 1 ID юзер 1 равняется чему равняется получается ID юзера 1 вот он так так так вот Вот так
Speaker A
вот и второе условие должно тоже падать то есть ID юзера 1 а вот тут ID юзера 2 мы с вами дописывая ID User 2 Угу всё А тут Что тут мы получается сейчас должны информацию получить из массива кото с вами Разбираем и каждое
Speaker A
сообщение мы соответственно сможем получить и вывести так сейчас что тут я пишу так текст угу так текст хорошо замечательно Дальше мне что мне наверное понадобится какая-то какой-то блок в котором мы это сообщение попробуем вывести получается div А давайте
Speaker A
стайл какой какой цвет поставим так так бэкграунд Граунд бэкграунд так так так может стандартное что-то Попробуем во например вот такие вот да сообщения Давайте в стандартном бутстрап ском блоке просто будем писать сообщения вот синий такой приятный цвет Всё мы вот мы
Speaker A
в нём и будем писать все сообщения если что потом всегда можно будет исправить просто сейчас будет намного проще писать тут так и я что делаю я пишу получается вот в этом блоке уже выведу свой текст так PHP вывожу
Speaker A
текст всё ну можно соответственно после этого блока поставить сколько отступа Вот надо посмотреть так вобще отступы будут нет автоматические но они должны какие-то отступы проставляться безусловно так продолжить Ага страница зависла Значит где-то у нас ошибка притом серверная ошибка
Speaker A
загрузиться А вот Ну конечно Вот же у меня кусочек запроса тут так оберн наверное каждое условие в круглой скобке вот таким вот образом и потом уже будем думать как это всё привести в приличный вид ну чтоб смотрелось более так обновили сообщение доставлено
Speaker A
дальше Давайте ещё одно напишем Привет например так нажимаю отправить Если я обновлю страницу Да привет тоже попадает хорошо так для того чтобы у меня сообщение попадало раньше чем вот мы его выведем я всё-таки наверное Давайте этот скрипт так не туда нажимаю
Speaker A
Ага вот сюда вот наверное перед контейнером мы его поставим и вот сюда выведем Так сохранить ещё раз что-то написали всё сообщение попадает так дальше Что Дальше неплохо было бы конечно разбить сообщение на наше и на не наше общение нужно выводить вот в таком
Speaker A
вот цвете да Угу в таком вот цвете нужно выводить белым или каким-то другим Так Ну значит условие у нас какое может быть либо у нас вот такое условие для сообщений это раз либо же у нас ещё следующее может быть
Speaker A
условие там где сообщения не наши то есть например User 2 равен юзеру 1 а юзер 1 равен вот этому так ещё раз обернусь в круглые скобки всё таким образом у нас точно должны попадать все сообщения которые мы хотели
Speaker A
так и и и давайте мы определим получается вид для наших сообщений и для тех сообщений которые прислали нам наверное наверное Давайте вот если это допустим отправ мы будем писать Вот такими сообщениями да то есть в ЧМ отличие Вот это Alert
Speaker A
ИО всё супер То есть там был Alert Prim это будет Арт инфо так и осталось уже вот сюда прописать просто условие Так давайте пром есть если если если ЕС а вот мы писали так ID получается так ID User
Speaker A
1 равен Чему равен получается Session ID User то мы с вами выведем алер инфо Угу Иначе мы уже выведем так посмотрим изменится ли что-то у нас вот тут вот да таким вот образом так на страничке Ну по идее да
Speaker A
По идее должно да Всё у нас стал получается вот фиолетовый цвет а так мы кому писали мы писали сейчас так так так и Наверное мои сообщения должны вот те сообщения которые мы пишем от пользователя они должны быть прижаты к правому
Speaker A
углу так на бутстрапе по-моему Т как-то так он делается OT п Давайте посмотрим прижать к правому углу Да OT попробуем Да вот во-первых Alert ИО написали А ещё и flot end давайте Нет не то скопировал так flot end И если всё в
Speaker A
порядке [музыка] то а ничего не поменялось Так посмотреть код Угу Какой ещё вариант может быть а возможен Ну почему почему текст не прижался вправо плохо же можно ещё через CSS текст это что у нас там текст ай а Left Да как-то
Speaker A
так попробуем либо end давайте у нас же текстовое сообщение внутри так текст так так так А можем же к сообщению применить Давайте попробуем прямо внутри сообщения это реализовать так тут у нас что тут у нас получается Давайте будет
Speaker A
абзац и если у нас получается р ID то есть целиком это условие точно также то тогда мы что выводим то тогда мы Давайте попробуем во-первых сначала класс а flot end использовать ну попробуем То есть я не уверен что он отработает Но если он
Speaker A
отработает это будет прямо супер ну не отработает ну просто заменим на получается КСТ и всё так файл сохранить обновляю стра Да всё сообщение прижало вправо и это замечательно сейчас что сейчас я хочу зайти получается с другого аккаунта вот с кем мы переписывались Мы
Speaker A
переписывались с идентификатором один правильно вот он сообщение тут у нас есть Так юзер идентификатор один У нас у Марины То есть я сейчас в режиме инкогнито зайду э за Марину так какой пароль там был у Марины Да бли
Speaker A
так у Марины Был пароль 1 2 3 4 так заходим получается вот сюда вот дальше в раздел поиск изучить анкету нажимаю Написать сообщение Ага тут у нас где-то глюк потому что всё стало вот таким вот цветом А так быть не
Speaker A
должно То есть у Марины должна быть своя переписка Давайте смотреть в чём проблема так получается юзер р о Нет не User о то есть это у нас с вами Вот этот User То есть это значение вот этой вот выборки должен
Speaker A
быть юзер о а не просто юзер О вот так вот хорошо что я сходу сразу тестирую так квадратная скобка Ага И вот тут я тоже должен сравнивать с вот этим вот значением замечательно сохраняю обновляю страничку Да вот вот
Speaker A
нам пишут давайте мы сейчас попробуем написать что-то в ответ Привет нажимаю отправить и тут пользователи страничку Да он так Подождите а мы наоборот сделали А нет Всё правильно да ещё раз так Привет два раз мы пишем а тут человек получит
Speaker A
Вот вот такое вот сообщение так замечательно Я думаю что Сегодня мы можем заканчивать эту серию в принципе доставку сообщений мы сделали в следующем выпуске попытаемся как-то облагородить Вот соответственно работу с базой данных возможно придумаем соответственно какие-то дополнительные функции то есть чтобы у нас тут допустим
Speaker A
имя пользователя выводилось и так далее Наверное нужно будет сделать подгрузка новых сообщений в более таком адекватном виде чтобы у нас они автоматически подгружать в случае отправки нового сообщения вот а на сегодня мы с вами заканчиваем этот выпуск Большое спасибо Что что Смотрите
Speaker A
А мои видео вот подписывайтесь на канал ставьте лайки оставляйте комментарии что вы по поводу этого всего думаете также я Напоминаю что у меня есть страница на бусте Где вы можете поддержать моё творчество Вот и бонусом для всех подписчиков я как обычно
Speaker A
выкладываю все исходные файлы от полученного на видео то есть вы полностью сможете скачать архив и развернуть его у себя ВС Всем спасибо Дальше будет только интереснее ведь на этом канале мы работы разрабатываем стартапы в режиме реального времени Всем
Speaker A
пока
Topics:сайт знакомствперепискаPHPHTMLSQLBootstrapчатсообщенияразработка сайтапрограммирование
