Skip to content

Свой сайт знакомств #11: выводим информацию из базы данных на страницу с анкетой PHP, MySQL, HTML

Разработка сайта знакомств на PHP и MySQL: вывод данных из базы на страницу анкеты в реальном времени.

Key Takeaways

  • Реализация сайта знакомств требует внимательной работы с базой данных и передачей параметров между страницами.
  • Локальное хранение Bootstrap скриптов помогает избежать проблем с загрузкой из внешних источников.
  • Вывод информации из базы на страницу анкеты реализуется через GET-запрос и SQL-запросы с проверками.
  • Важно тщательно отлаживать код и контролировать сохранение файлов во время разработки.
  • Обсуждение функционала и дизайна сайта с аудиторией помогает улучшить проект и учесть пользовательские предпочтения.

What the video covers

  • Автор в реальном времени разрабатывает дейтинг-сервис с регистрацией и поиском по анкетам.
  • Обсуждается проблема с загрузкой Bootstrap скриптов и её решение через локальное размещение файлов.
  • Реализуется страница анкеты, которая подтягивает данные пользователя из базы данных по ID.
  • Создаётся ссылка с поисковой страницы на страницу анкеты с передачей идентификатора пользователя через GET-запрос.
  • Проводится отладка и исправление ошибок в PHP-скриптах, связанных с подключением к базе и выводом данных.
  • Автор объясняет логику переноса данных из массива в переменные для удобства работы с шаблоном.
  • Обсуждается, какие данные показывать в анкете, например, исключение email из публичного просмотра.
  • Рассматривается возможность и необходимость отображения фотографий пользователей, предлагается обсудить это в комментариях.
  • Включены дополнительные поля анкеты: рост, вес, религия, карьера, образование, вредные привычки и мироощущение.
  • Видео демонстрирует процесс разработки без монтажа, показывая все этапы и возникающие трудности.

Answers

Questions about this video

Как передать идентификатор пользователя на страницу анкеты?

Идентификатор пользователя передаётся через GET-запрос из страницы поиска на страницу анкеты, где по этому ID выполняется запрос к базе данных для вывода информации.

Почему возникла проблема с загрузкой Bootstrap скриптов и как её решить?

Проблема возникла из-за оператора Ростелеком, который некорректно загружал внешние скрипты Bootstrap. Решение — скачать последнюю версию Bootstrap и разместить файлы локально на хостинге.

Какие данные пользователя не отображаются на странице анкеты?

Для приватности email пользователя не выводится на странице анкеты, показывается только логин и другие общедоступные данные.

Full Transcript — Download SRT & Markdown

00:00
Speaker A
День, дорогие подписчики! Рад вас приветствовать на новой серии проекта "Свой сайт знакомств", где мы в режиме реального времени разрабатываем и дорабатываем свой дейтинг-сервис. У нас есть возможность зарегистрироваться, указать свои данные и организовать поиск по анкетам.
00:25
Speaker A
свои данные и организовать поис по анкетам но сейчас что сейчас я поймал большой глюк на операторе Росттелеком Вот который с ошибкой подгружает сейчас наши скрипты бустра повс поэтому что поэтому давайте мы с вами скачаем последнюю версию бустра и
00:45
Speaker A
Но сейчас я поймал большой глюк на операторе Ростелеком, который с ошибкой подгружает наши скрипты Bootstrap. Поэтому давайте скачаем последнюю версию Bootstrap и просто разместим все файлы у себя на хостинге. Для этого я скачал соответствующие файлы Bootstrap, которые мы уже загрузим на сервер и перепишем в наших скриптах.
01:16
Speaker A
тут Да так тогда проблема на странице поиск Почему долго всё подгружается Ага ВС я нал ошибку скрипты бустра повс размещали Скорее всего в какой-то прошлой серии Да вот я уже начал путаться то есть завёл много проектов и начал путаться среди них так
01:41
Speaker A
А нет, подождите, я же уже размещал их тут. Так, тогда проблема на странице поиска — почему долго всё подгружается? Ага, Bootstrap скрипты размещали, скорее всего, в какой-то прошлой серии. Вот, я уже начал путаться, завёл много проектов и начал путаться среди них.
02:04
Speaker A
плавно сейчас перейдём к изменениям на странице к изменениям на странице анкеты Так проверяю поиск да всё загрузилось дальше Что Дальше У нас должна быть страничка анкета соответственно на которой Нам необходимо подтянуть информацию из базы данных и вывести её
02:30
Speaker A
Ага, давайте посмотрим на индексе, что мы сделали. На индексе мы заменили. Ага, у нас есть header и footer, замечательно. Дальше, на странице поиска у нас есть header, а footer нет. Давайте сделаем как раз таки footer на странице поиска, и мы плавно сейчас перейдём к изменениям на странице анкеты.
03:08
Speaker A
времени над проектом То есть я ничего не монтирую вот всё соответственно все действия которые происходят в режиме реального времени над проектом вы наблюдаете поэтому оставим как есть ничего переделывать не будем так тут Что тут нам нужно с вами сечас сформировать
03:29
Speaker A
Проверяю поиск — да, всё загрузилось. Дальше что? Дальше у нас должна быть страничка анкеты, на которой нам необходимо подтянуть информацию из базы данных и вывести её. Вот она таким образом сейчас выглядит. Давайте это реализуем.
03:53
Speaker A
PHP и мы соответственно передадим айдини пользователя которого нужно будет показать так Я сейчас посмотрю Да у нас это просто ID тут у нас ID всё ID потом уже когда организуем систему роутинг Мы конечно же это всё переделаем но в данный момент пока оставим таким
04:28
Speaker A
Со страницы поиска нам сейчас нужно прокинуть ссылочку на страницу анкеты, куда мы передадим идентификатор пользователя. Пролистывая, поминаю, что вы смотрите практически работу в режиме реального времени над проектом. То есть я ничего не монтирую, всё происходит в реальном времени, и вы наблюдаете. Поэтому оставим как есть, ничего переделывать не будем.
05:01
Speaker A
не тот Файлик смотрю обновляю страницу с поиском ссылка изучить анкету почему она никуда не ведёт ещё раз я тот Файлик вообще редактировал А у нас висит висит сохранение файла плохо почему-то именно вот с этим проектом возникают какие-то трудности Именно при сохранении файла
05:41
Speaker A
Так, тут что нам нужно? Сейчас сформировать ссылочку, ссылочку, ссылочку, наверное, или полностью на весь блок будем вводить, то есть при нажатии либо только на кнопку "Изучить анкету". Давайте сначала сделаем на кнопку.
06:08
Speaker A
получили открыли Файлик анкета которые нужно отображать дальше Что Дальше давайте мы с вами проверим на существование гет запроса которые у нас передаётся вот тут вот по зание данных так Get ID всё замечательно Так значит у нас переменная ID должна равняться вот этому
06:49
Speaker A
АФ — это у нас что? Это у нас анкета PHP, и мы соответственно передадим ID пользователя, которого нужно будет показать. Сейчас посмотрю. Да, у нас это просто ID, тут у нас ID, всё, ID. Потом уже, когда организуем систему роутинга, мы, конечно, это всё переделаем, но в данный момент оставим так.
07:21
Speaker A
кусочек скопирую и пойдём дальше так так так пролива вниз вот он вот у нас получается подключение к базе данных мы ищем пользователя с нужным идентификатором Пока что пока наверное Давайте поставим ниже потому что у нас в хедере вынесены все подключения к базе
07:41
Speaker A
Что не так? А вот у нас уже закрытая ссылка тут. Так, ещё где-то ошибка, что не так? Так, анкета. Ага, вот тут лишние кавычки были. Всё, сохраняем, дальше обновляю страничку. Тут у нас появилась ссылка "Изучить анкету", и тут ссылка "Изучить анкету".
08:05
Speaker A
нас соответственно emil пользователи наверное не будем показывать так логин То есть у нас есть замечательная переменная логин Я наверное сейчас что возьму я возьму какой-нибудь вот такой запрос Да просто скопирую вот всё содержимое отсюда иэ вами сейчас заполним ID мы не будем
08:32
Speaker A
Нет, не тот файл смотрю. Обновляю страницу с поиском, ссылка "Изучить анкету" — почему она никуда не ведёт? Ещё раз. Я тот файл вообще редактировал? А у нас висит сохранение файла. Плохо, почему-то именно с этим проектом возникают какие-то трудности при сохранении файла.
08:57
Speaker A
заполним из массива вот так вы наверное Спросите А зачем я сразу перекидываю данные из массива в обычные переменные Ну это делается просто с такой целью чтобы мы вот этот кусочек кода могли потом разместить например над хедера для того чтобы у нас
09:23
Speaker A
Сохранился. Так, проверяем ссылочку "Изучить анкету". Марина ID 1, Маша ID 11. Проверим по базе данных ID 1 — да, Марина, и у Маши одиннадцатый. Замечательно. Давайте я перейду соответственно на Марину.
09:43
Speaker A
выглядеть Хотя опять же у нас есть специально ограничения а которые не позволяют искать из мужского аккаунта мужские анкеты и под женским профилем чтобы женские анкеты тоже не показывались то есть мы с вами максимальна консервативная сеть будет Вот сайт знакомств
10:07
Speaker A
Дальше что? У нас тут внутри уже мы получили, открыли файл анкеты, который нужно отображать. Дальше что? Давайте проверим на существование GET-запроса, который у нас передаётся вот тут, по заданию данных. Так, GET ID — всё замечательно.
10:24
Speaker A
вы общаетесь знакомитесь с человеком а хотели бы вы видеть его фото предварительно или может быть нет потому что я знаю несколько получается тах приложения где даже в принципе фото и нету И это не мешает людям общаться знакомиться совместно проводить
10:48
Speaker A
Значит, у нас переменная ID должна равняться вот этому GET-запросу. Так, дальше нам нужно подключиться к базе данных. Да, давайте посмотрим, как я подключался уже, например, на странице поиска, где это подключение у нас с вами.
11:18
Speaker A
конечно мало но опять же вы можете например подскажите может быть какой-то важный пункт анкеты был и так далее А я напоминаю у нас же есть выпуск на канале где мы занимались мозговым штурмом нейросети то есть сказать уже [музыка]
11:46
Speaker A
Так, так, так, я же данные получал и выводил, правильно? Просто вот этот кусочек скопирую и пойдём дальше. Так, пролистываю вниз, вот он, у нас получается подключение к базе данных. Мы ищем пользователя с нужным идентификатором.
12:12
Speaker A
странные вещи так уж совсем странные вещи мы не стали перенимать Дальше что дальше нам нужно будет наверное вот я сейчас закончу с переносом переменных как-то Вот это ВС логически чтобы анкета выглядела красиво языки кстати могут быть и множественным выбором я сейчас подумал
12:39
Speaker A
Пока что, наверное, давайте поставим ниже, потому что у нас в хедере вынесены все подключения к базе данных. Мы вот тут вот это всё сделаем. Так, дальше отправляется запрос в базу данных user, где ID пользователя равняется ID, и дальше мы соответственно уже можем вот эти данные.
13:00
Speaker A
переменную уничтожать не будем то есть поскольку у нас всё равно эти данные в базе данных есть да в виде пустых ячеек сейчас покажу то есть мы не всё же заполнили например вот в этой анкете отсутствует описание то есть мы
13:17
Speaker A
Я думаю, пойдём, наверное, по анкете. То есть у нас, что, у нас соответственно email пользователя, наверное, не будем показывать. Так, логин. У нас есть замечательная переменная логин. Я, наверное, сейчас возьму какой-нибудь вот такой запрос, просто скопирую всё содержимое отсюда и с вами сейчас заполним.
13:42
Speaker A
местоположения ой мне уже интересно посмотреть как будет выглядеть реальная анкета Да кстати связаться и наверняка Нам нужно будет ещ док с вами врей общение с пользователями либо же просто давать сразу ссылочку на Telegram или WhatsApp и так далее кто-то в
14:09
Speaker A
ID мы не будем показывать, пароль мы не будем показывать, имя — действительно ли есть такая переменная? Ну нет, такая ячейка безусловно должна быть в таблице "имя". Да, оно есть, всё замечательно.
14:33
Speaker A
есть и мужские анкеты и женские Да соответственно женские анкеты подсвечиваются розовым цветом мужские анкеты подсвечиваются таким вот синенький цветом Давайте посмотрим как это было реализовано в поиске на странице поиска и просто оттуда этот кусочек возьмём потому что там в принципе ВС было
14:57
Speaker A
То есть у нас будет переменная вот это имя, раз, и мы её заполним из массива вот так. Вы, наверное, спросите, зачем я сразу перекидываю данные из массива в обычные переменные? Это делается просто с такой целью, чтобы мы этот кусочек кода могли потом разместить, например, над хедером, чтобы вывод анкеты не был привязан к какому-то конкретному циклу, поскольку мы же в цикле обращаемся ко всему этому.
15:20
Speaker A
если пол мужской мы переменную заполняем другим образом вот у нас же две переменных и Ну хорошо давайте мы так и оставим То есть у нас что у нас тут Ниже уже можно будет Дописать Может быть перед самой анкетой
15:44
Speaker A
Так, возраст есть, пол. Ну давайте пол тоже выведем на всякий случай, вид анкеты, и дальше уже спроектируем, как оно всё должно выглядеть. Хотя опять же у нас есть специальные ограничения, которые не позволяют искать из мужского аккаунта мужские анкеты и под женским профилем, чтобы женские анкеты тоже не показывались.
16:26
Speaker A
так это должна быть переменная дальше аэ тут у нас а кнопка есть кнопка есть да давайте сразу наверное пропишет вот сюда Button CL всё изучить анкету и посмотрим как это будет выглядеть на странице нижнюю анкету Мы конечно же уберём
17:00
Speaker A
То есть у нас будет максимально консервативная сеть. Вот сайт знакомств максимально такой, чтобы этого гендерного разнообразия у нас не было ни в коем случае.
17:33
Speaker A
да да давайте закомментировать ошибка где-то выше должна быть так где-то точку запятую мог пропустить это на самом деле легко потому что пишем находу не переделывает Да так заранее ничего не спроектированы то есть вы наблюдаете за результатом работы над реальным проектом
18:14
Speaker A
Давайте фото заберём. Я понимаю, что фото пока нету. Кстати, опять же вопрос: нужно ли нам фото или не нужно? Напишите в комментариях, когда вы общаетесь, знакомитесь с человеком, хотели бы вы видеть его фото предварительно или может быть нет?
18:40
Speaker A
ошибка Плохо что Неужели всё закомментировать всё условие Всё я кажется нашёл ошибку Вот она тут в самой в самой первой строчке сохраняю обновляю Нет ошибка не исправлена анкета ещё раз Ну давайте Всё тогда закомментировать в любом случае Угу Так проблема Значит где-то в этой
19:50
Speaker A
Потому что я знаю несколько таких приложений, где даже в принципе фото нет, и это не мешает людям общаться, знакомиться, совместно проводить время.
20:23
Speaker A
уже нет ошибки замечательно Может конечно файлик подтормаживает вот при сохранении тут уберём смотрим Да всё в порядке супер так дальше Что Дальше мы начинаем вот эту нашу анкету заполнять данными То есть тут у нас что тут у нас должно быть
20:50
Speaker A
Вот так. Дальше что? Так, идём дальше. Так, пункт образования. Дети есть. Дальше религия. Вообще на самом деле анкета получилась очень обширной, нигде подобного я ещё не видел.
21:12
Speaker A
скопирую все возможные переменные и мы их красиво расставим на страниц так Марина 26 лет замечательно дальше Что Дальше у нас должен быть блок о себе Да я опять же сейчас иду в sgl запрос возьму ирт и мы просто подхватить вот
21:45
Speaker A
Понятно, что насмотренность одного человека в таком плане — это, конечно, мало, но опять же вы можете, например, подсказать, может быть, какой-то важный пункт анкеты был и так далее.
22:18
Speaker A
таким образом а потом уже будем модернизировать и может быть какие-то параметры будем группировать можно Кстати цвет волос Добавить сюда Да описание Давайте не описание а о мне например вот такой вот пункт Может у нас быть да может быть то есть если
22:48
Speaker A
А я напоминаю, у нас есть выпуск на канале, где мы занимались мозговым штурмом нейросети, то есть сказать, что это ту информацию, которую придумал один человек, нельзя.
23:21
Speaker A
этот блок уже можем вывести это что у нас IMG S Давайте Image наверное у нас папка так будет называться или photos что-то такое Да фото так переменное фото или мы возможно целиком адрес будем хранить Ну ладно пока так прописываем фото так
23:57
Speaker A
То есть нейросеть всё-таки нам помогла при проектировании анкеты. Вот эти параметры, которые она выдавала, мы просто переняли к себе.
24:48
Speaker A
описание уже забьём какую-то информацию так описание нет Где у нас Марина Марина вот просто несколько строчек рандомного текста сохраняем обновляемся Да обо мне всё замечательно обо мне кстати можно сделать уже не просто текстом А например это какой-нибудь подпункт будет да где будет описание
25:20
Speaker A
Ну понятно, от чего-то избавились. Там вообще были очень странные вещи, так уж совсем странные вещи мы не стали перенимать.
26:00
Speaker A
ещё нужно поработать опять же так описание есть фото если будет вставили так дальше Что дальше нам нужно Какое поле Дети так и назовём его дети так следующее поле образование так тут у нас образование так следующее поле религия Угу
27:03
Speaker A
Дальше что? Дальше нам нужно будет, наверное, вот я сейчас закончу с переносом переменных как-то. Вот это всё логически, чтобы анкета выглядела красиво.
27:38
Speaker A
параметры Ну то есть что мы можем сделать Вот хорошо у нас тут будет рост вес Да например так рост дальше Аналогично будет переменно вес тут выводиться Вот я что думаю нужно как-то стилизовать соотвественно каждый параметр Возможно мы сделаем для каждого
28:02
Speaker A
Языки, кстати, могут быть и множественным выбором, я сейчас подумал. Наверное, нужно дать возможность пользователю прописывать через запятую этот параметр.
28:30
Speaker A
быть рядом с образованием То есть это опять же это Карьерная какая-то ветвь А дальше дети и личная так Дети это опять же как-то бьётся с типом отношений то есть религия - это что-то такое вот да что пока выбивается из всего так
28:59
Speaker A
И если вдруг у нас какое-то поле пустое, мы, наверное, его просто не будем выводить в виде анкеты. Это же логично.
29:41
Speaker A
нет Это уж пункт для совсем таких людей которые живут без Вот таких вот скажем так увлечений так местоположение Наверно где-то это один из лидирующих пунктов должен быть так я уже Кстати задумываюсь Возможно у нас же вот мы в прошлой версии вкрутил
30:20
Speaker A
То есть если вдруг поле пустое, мы его не выводим, переменную уничтожать не будем, поскольку у нас всё равно эти данные в базе данных есть в виде пустых ячеек.
30:41
Speaker A
это можно так связаться есть пункт связаться его мы наверное переместимся приложит ссылку на все свои наверное данные соцсети и так далее опять же я ещё подумаю как этот блок работать так посмотрим что у нас отображается что они отображаются на
31:14
Speaker A
Сейчас покажу, то есть мы не всё же заполнили. Например, вот в этой анкете отсутствует описание.
31:41
Speaker A
она вот она так например Ну например vk.com пам-пам-пам нам просто проверить Пока отображение блока да всё либо же тут может быть номер телефона и так далее так обо мне описание так Аа ищу Давайте ищу ищу спутника жизни пускай будет так
32:29
Speaker A
Мы можем соответственно, у нас он в переменную вот информация отсюда придёт в виде пустоты, в виде пустой строки.
33:03
Speaker A
будет у нас обязательно дальше религию Я не знаю в какой пункт относить может быть к языкам что-то рядом Да так карьера так образование профессия замечательно дальше э тип отношений внешние данные определённо Вот сюда можно внести так б внешние данные а вредной
33:52
Speaker A
Соответственно, мы не будем эту переменную уничтожать. Мы просто будем сравнивать с пустотой этот кусочек, и соответственно вводиться этот параметр не будет.
34:26
Speaker A
внешние данные привычки может самый конец уберём после вредных привычек и языков опять же анкету да анкету будем дополнять Потому что пока это так Ага ищу того-то карьера такая-то профессия такая так как скомпоновать тип отношений и детей Угу вредные привычки религия вот
35:12
Speaker A
Так, местоположение. Ой, мне уже интересно посмотреть, как будет выглядеть реальная анкета. Кстати, связаться и наверняка на...
35:52
Speaker A
так Ну я во-первых сделаю перенос между вот этими блоками да 2 3 то есть Перенос строки сделаю на всякий случай потом мы конечно же ещё вернёмся к анкете чтобы всё было красиво чтобы всё открывалось и так ищу спутника жизни лично типа
36:22
Speaker A
отношений внешние данные вредные привычки мироощущения наом таким и можно же добавить ещё какие-то пункты например что ещё Ну ладно в общем добавим хорошо так так мира ощущение правильно написал интересно да мироощущения написал правильно так Смотрим как это всё выглядит
37:05
Speaker A
всё религия религия замечательно тут у нас готово так Какие пункты неплохо было бы вывести на главную Ну давайте мы сейчас вернёмся на предыдущую страницу посмотрим Какая информация по Маше есть Так по щая информация то есть незаполненные пункты нужно будет
37:32
Speaker A
Дописать скрипт чтобы они не выводились Да так и вот тут вот Нам же нужно вывести Кстати а что если правда выводить просто ещё вот спутника жизни и всё то есть то описание которое она даёт изучить анкету уже провалился вниз и всё
37:54
Speaker A
тут видим по-моему замечательно вот тут вот напрашивается либо тут фотография либо фотография Вот тут возможно пункта обо мне будут заполнять больше И тут сделать две колонки Ну всё ну хорошо Мы с вами уже получается прокинулись а на этом Наверное мы выпуск этот
38:32
Speaker A
заканчиваем обязательно подписывайтесь на канал ставьте лайки переходите на бусти там соответственно для всех моих подписчиков будут все исходные файлы с урока То есть это дам базы данных все скрипты которые были разработаны по проекту и там много различных плюшек
38:57
Speaker A
Спасибо что смотрели дальше будет интересней А ну и обязательно пишите своё мнение о том что происходит на этом канале в комментариях Всё Всем спасибо
Topics:сайт знакомствPHPMySQLBootstrapвывод данныханкета пользователяGET-запросреальное времяразработка сайтадейтинг-сервис

Get More with the SozAI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries, speaker detection, and unlimited transcriptions.

Or transcribe another YouTube video here →