Skip to content

Свой сайт знакомств #12: доработка главной страницы и разработка футера на PHP, HTML, CSS, Bootstrap

Разработка главной страницы сайта знакомств с улучшением дизайна, функционала и адаптивности на PHP, HTML, CSS и Bootstrap.

Key Takeaways

  • Условное отображение меню повышает удобство для неавторизованных пользователей.
  • Исправление ошибок в формах повышает безопасность и удобство регистрации.
  • Адаптивный дизайн необходим для корректного отображения на мобильных устройствах.
  • Взаимодействие с аудиторией помогает улучшать проект и учитывать пожелания пользователей.
  • Юридические требования, такие как согласие на обработку персональных данных, важны для сайта знакомств.

What the video covers

  • Автор дорабатывает главную страницу проекта сайта знакомств, улучшая внешний вид и функционал.
  • Реализуется условное отображение меню в зависимости от авторизации пользователя.
  • Исправляются ошибки в формах регистрации, включая скрытие пароля и добавление чекбокса согласия на обработку персональных данных.
  • Добавляются новые блоки с описанием сайта, реальными профилями и преимуществами.
  • Вносятся изменения для корректного отображения на мобильных устройствах с помощью адаптивной сетки.
  • Обсуждается взаимодействие с комментариями на YouTube и проблемы с их отображением.
  • Планируется дальнейшее улучшение и добавление новых функциональных блоков.
  • Автор приглашает зрителей к обсуждению и предлагает совместную разработку проекта.
  • Используются технологии PHP, HTML, CSS и Bootstrap для реализации интерфейса.
  • Особое внимание уделяется удобству пользователя и юридическим аспектам, таким как согласие на обработку данных.

Answers

Questions about this video

Почему меню не показывается для неавторизованных пользователей?

Меню скрывается для пользователей без авторизации, чтобы не отвлекать и не показывать лишние элементы до входа на сайт.

Как реализовано скрытие пароля в форме регистрации?

Тип поля пароля изменён с 'text' на 'password', что позволяет отображать вводимые символы в виде точек.

Зачем нужен чекбокс согласия на обработку персональных данных?

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

Full Transcript — Download SRT & Markdown

00:00
Speaker A
Добрый день, дорогие подписчики! Рад вас приветствовать на новой серии проекта "Свой сайт знакомств", где мы с вами в режиме реального времени разрабатываем свой дейтинг-сервис. А в этой серии мне хотелось бы заняться главной страницей нашего проекта. Вот её доработать, потому что
00:23
Speaker A
увидев такой сайт, очевидно, что на нём не захотелось бы никому зарегистрироваться. Что мы сделаем? Мы с вами, наверное, реализуем несколько новых блоков, которые будут вести, демонстрировать описание сайта. Что ещё возможно? Исправим мелкие косяки. Вот вроде как у нас в формах регистрации
00:50
Speaker A
сейчас видится пароль, а там должны быть точечки. Вот и так далее. Ну что ж, начинаем. То есть вот в этой серии чисто главной страницы. Так, во-первых, что мне не нравится? Во-первых, мне не нравится, что у нас появляется менюшка.
01:09
Speaker A
Менюшка, очевидно, что у пользователя, у которого ещё нет авторизации на сайте, показывать её ему абсолютно не нужно. Вот давайте мы это сейчас исправим. Так, есть подключение в header. Так, а где у нас происходит авторизация? Авторизация, так, авторизация у нас
01:42
Speaker A
где-то, наверное, мои данные. Давайте найдём авторизацию, где она у нас. Тут есть header, header, header, вот она у нас тут. А в общем условие будет следующее: если у нас вдруг отсутствует в сессиях такой идентификатор, как ID User, то мы
02:09
Speaker A
соответственно меню показывать на главной странице не будем. Вот давайте это сделаем. PHP, если отсутствие проверим при помощи так и то есть, если у нас существует, так, мы что можем? Наверное, ЛС поставить да, восклицательный знак. Так, если значит существует true, а
02:44
Speaker A
если отсутствует false. Нет, подождите, если... Да, всё правильно. Если у нас значит ID юзера есть в сессии, то мы показываем наше поле, где он заканчивается, вот тут вот, а если наша менюшка, мы показываем, а если отсутствует, то мы не
03:13
Speaker A
показываем. Всё, так, сохраняем, посмотрим. Будет ли... Да, менюшка пропала, стало немножко скудно, ну ладно. Так, дальше. Я уже говорил, есть косяк, получается, в поле регистрации. Поэтому главную страницу мне правда кажется, что показывать меню человеку зачем? Это главная страница, он ещё не прошёл ни
03:39
Speaker A
регистрацию, ни авторизацию. Это делать абсолютно не нужно. Так, название сайта мы ещё не придумали. Кстати, если у вас есть идеи о том, как лучше назвать сайт, напишите, пожалуйста. Так, ty — это что? Это у нас для того, чтобы, говорил уже, показывать
04:01
Speaker A
вот эти точечки. Так, так, так. Password type email, и тут у нас type не текст, а type password. Будет всё замечательно. Обновляем страничку, уже я ввожу пароль, видите, у нас появляются точечки. Дальше при регистрации мы должны у пользователя что
04:22
Speaker A
спросить? Мы должны попросить у него разрешение на обработку его персональных данных. Нам, наверное, придётся [музыка] поставить, так, поставить... Я не помню, как он называется, вот этот вот флажок. Ну сейчас покажу. Вот, вот Check me Out. Вот такую штуку, как она
04:46
Speaker A
называется? А, чекбокс, конечно. Всё, я сейчас просто копирую чекбокс и размещу его вот тут вот ниже. Почему такие штуки нужно ставить? Ну, во-первых, у нас, помню, был закон, да, который обязывает, которые занимаются обработкой персональных данных, такие флажок ставить. Так, и что на
05:15
Speaker A
нём написать? Точно не помню. Так, по-моему, я даю своё согласие на обработку персональных данных. Что это такое? Я даю своё согласие на обработку персональных данных. Вот давайте пока мы таким образом просто поставим. Угу, на обработку персональных данных всё, галочка будет
05:48
Speaker A
ставиться. Так, ниже, что ниже? Давайте мы с вами тоже... А сколько пикселей пропустим? Ну, пропустим, наверное. Так, класс, так, r, давайте 10 пикселей, например, да, таким вот образом. Угу, да, всё, ниже сползли. Тут у нас опять же по высоте немножко мы уменьшились,
06:21
Speaker A
поэтому что? Поэтому, наверное, мы должны вот сейчас нашей форме, нашей форме задать правильную высоту. Да, авторизация, вот даже всему нашему блоку. Поэтому что? Поэтому давайте я попробую прописать к класс h100, сколько я помню, такое есть. Так, h100, по-моему, через тире он писался. Если
06:54
Speaker A
он не отработает, будский стандартный, а он работает, всё замечательно. То есть вот это он помогает выравнивать окошко по сетке, да, по высоте всех блоков, по сетке. У нас сейчас они одинаковой высоты будут. Своё согласие на обработку персональных данных, вот
07:22
Speaker A
какое-то такое окошко у нас есть, замечательно. Так, им, да, хотелось бы два блока... Ой, не два блока, а набросать несколько блоков. Так, у нас что? У нас есть персональный поиск, вот описание персонального поиска. Да, всё оно есть уже на
07:46
Speaker A
сайте. Сортируйте, фильтруйте наш мощный. Да, да, это всё есть. Так, идём, давайте следующий... Дуй блок с фотографиями, где он у нас тут? То есть что? Мы сейчас пытаемся немножечко причесать наш сайт, чтобы он выглядел чуть более приятно,
08:12
Speaker A
да, притом особо мы даже ничего не придумываем. Всё у нас было разработано в прошлых сериях. Так, это у нас что? Какой блок? Профили с фотографиями, описанием. Так, давайте реальные профили напишем как наш основной плюс. Пускай это будут реальные
08:37
Speaker A
профили, что пользователь захотел у нас зарегистрироваться. Профили реальные профили. Дальше что ещё можно добавить? Так, цвет какой хотелось бы? Цвет, наверное, лучше поставить вот какой-то вот такой, да, чтобы чередовались блоки. А видите, у нас на мобильной версии всё
09:02
Speaker A
разъезжается. Поэтому что? Поэтому сейчас, наверное, немножко поменяем сетку для того, чтобы у нас на мобилке ничего не разъезжало. Так, хорошо. Дальше что? Обновляемся, реальные профили, всё замечательно. Следующий блок тоже сделаем розового цвета. Так, вс, то есть отступ также 35 пикселей.
09:34
Speaker A
Следующий блок розового цвета с нашими преимуществами нашего сайта знакомств. Так, следующий блок я вижу тут — безопасность и конфиденциальность. Супер, классный блок. Так, мне, кстати, очень нравится общаться с вами в комментариях. Поэтому если есть какие-то идеи, пишите. Я опять же всё
10:05
Speaker A
читаю комментарии, ни в коем случае не удаляю. Поэтому если вдруг есть какая-то критика, тоже пишите, с удовольствием обсудим. Что вы думаете по поводу увиденного внутри видео? А вот, но хочу сразу предупредить: я так понимаю, у YouTube какая-то есть политика в отношении
10:29
Speaker A
комментариев, то есть не все комментарии почему-то отображаются на проекте. Да, то есть сейчас я даже, наверное, давайте я продемонстрирую, как каким образом это выглядит. То есть так, управление видео, тут у нас что? Тут у нас есть комментарии. Так, вот, например, мне сегодня написали
11:00
Speaker A
вот какой комментарий. Вот у нас есть один товарищ, который в принципе да, сносные вещи пишет. Вот он задал несколько вопросов. Ну в такой вот форме не очень культурный. Я с ним пообщался с удовольствием. Вот тут, как вы видите,
11:24
Speaker A
комментарии есть ниже, но при переходе в само видео этот комментарий отсутствует почему-то. Вот, вот его нету. В общем, а где он писал? И ещё меня он обвинил в том, что я что-то удаляю. Я ничего не удаляю. Пожалуйста, пишите, общаемся. Мне кажется,
11:57
Speaker A
что именно при споре, при... Да, в споре рождается истина. Вот, вот тут я ответ раскрываю, а вот его комментария ниже нету. Вот, ну, наверное, если бы он более комплиментарный комментарий написал бы, он бы появился. Если вдруг кто-то с таким
12:21
Speaker A
сталкивался, напишите мне, пожалуйста, в комментариях, куда мне нажать, чтобы ничего больше не удалялось. Ну ладно, это мы немножко отвлеклись вот от сути происходящего, но давайте посмотрим дальше. Так, ещё один блок готов, перейдём к следующему. Следующий блок — советы и
12:45
Speaker A
поддержка. Да, то есть я беру вот наш верхний блок. Ага, так. Ну опять же, не обязательно мне писать с какой-то критикой, что и сделать. Вы можете, если у вас есть какая-то классная идея, обязательно напишите мне. Возможно, мы этот проект с вами
13:09
Speaker A
реализуем в режиме реального времени, как всегда. Вот, может быть, даже на двоих этот проект можем сделать. Ну посмотрим. Так, советы и поддержка. Ага. То есть мы тут описываем какой-то наш блок, который есть. Ну замечательно. Мне кажется, пускай такой рекламный слоган будет, да, но мы
13:36
Speaker A
его чуть попозже доработаем. Так, советы и поддержка. Так, супер. И следующий блок тоже будет розового цвета. Вот блок у нас будет снова. Сколько? Ага, я его закрывал. Да, я их тут закрывал и тут закрыл и тут закрыл. Всё замечательно. Так,
14:14
Speaker A
верхний блок я сейчас копирую. Он тоже будет последний розового цвета заключительный. Вот куда мы ставим соответственно вот это вот всё, что нам тогда сгенерировал чат GPT. А вот бесплатная регистрация, замеча...
14:44
Speaker A
писать очень долго и то что мы можем с помощью нейронокс насе написать очень радует по крайней мере Этот текст уже сможет индексироваться поисковым и на сайт пойдет какой-то трафик первоначальный всё пока оставим таким образом так посмотрим как это выглядит
15:12
Speaker A
тут замечательно Ну опять же да немножко скучновато немножко скучновато не хватает наверное каких-то картинок слева справа и так далее сечас е подумаем что-то вставим может быть какие-то цифры бутстрапе какие-то элементы расставим или пока оставим таким образом ну главное мы начали уже дорабатывать
15:42
Speaker A
так регистрация есть вопрос В чём был вопрос был в том что у нас формочки получается при изменении так инструмент разработчика вот у нас формы Вот так вот сжимаются с другими блоками так Такой проблемы нету поэтому что поэтому давайте мы
16:09
Speaker A
сейчас эти формочки переработали так я Иду наверх Угу Так тут у нас что тут у нас прописано КО 5 Так нам нужно адаптироваться для мобилок и соответственно для десктопа поэтому что поэтому давайте мы напишем Call 5 ко MD может быть 5 А вот тут кол
16:43
Speaker A
12 попробуем таким образом вписаться так тут будет Call 2 даже один так да Хорошо всё то есть у нас появилась адаптация так а вот тут вот Наверное мы вот в этом среднем блоке который был посерединке Мы также поставим 35
17:13
Speaker A
пикселей отступа то есть для пользователей десктопа ничего не изменится вот да всё в порядке точно так же а вот для для мобильных пользователей будет регистрация будет авторизация дальше описание наших плюсов советы поддержки и бесплатная регистрация да Супер уже
17:47
Speaker A
выглядит лучше так последнего блока не хватает футера футера в футере что мы сможем сделать Мы наверно сможем всякие политики конфиденциальности разместить пользовательское соглашение и так далее Давайте попробуем это сделать То есть у нас что у нас есть такой блок как
18:06
Speaker A
футер и он на самом деле пустой вот ну в данный момент поэтому что поэтому Давайте поставим так класс так контейнер угу так так так поделим наверное нашу область На сколько частей вот у нас менюшка была прикольного цвета давайте я
18:36
Speaker A
сейчас пройду авторизацию Нет конечно не тот email был Так где у нас тут вот собака mail или вот я по этой почте пройду авторизацию Давайте пройду авторизацию чтобы посмотреть просто цвет какой там был цвет у нас 1 2 3
19:00
Speaker A
4 1 2 3 4 Ага что-то поломалось А что не так а сейчас всё в порядке вот мне вот этот цвет нравится где у нас он у нас фиолетовый какой-то такой вот дальше дальше дальше пам-пам-пам так как я такой цвет получил вот он
19:31
Speaker A
вот мы его возьмём соответственно за основу если что если я перейду сюда на главную страничку а у нас менюшка осталась Ладно всё замечательно мы проверили что при авторизация у нас блок остаётся дальше что давайте зададим Ему наверное высоту какую-то Да блоку наме
19:55
Speaker A
сверху 20 пиксе 20 пикселей так R20 так па так прописали Сейчас посмотрим как он отобразится у нас нау появился Да футер появился и что я хотел Я хотел прописать Ну по крайней мере дать ссылочки на всякие документы которые будут
20:43
Speaker A
регламентировать деятельность нашего сайта сайта знакомств из опыта могу сказать продвижение одного проекта не знаю это конечно было несовпадение потому что этот кейс повторялся несколько раз То есть как только на проекте э сделали пользовательское соглашение раз Потом прописали правило а проекта Да по-моему
21:16
Speaker A
правило проекта называлось и ещё две странички вот с описанием правил трафик резко вырос давайте наверное мы попросим мм попросим попросим или нет Или я зайду наверное на как какой-то свой другой проект Вот например вот простенький сайт на вордпрессе который был там сделан
21:45
Speaker A
мною много лет назад То есть тут у нас какие ссылочки есть у нас есть получается кнопка от страница отказ от ответственности мы обязательно её сделаем пользовательское соглашение политика конфиденциальности и обратная связь вот хотя бы я сейчас вот эти три
22:04
Speaker A
ссылочки проставлены сохранением URL адресов и уже будет лучше то есть так отказ от ответственности это у нас дисклеймер блин а тут у меня же отключён этот копирование копирование адреса Так давайте посмотрим отказ от ответственности так к так R
22:35
Speaker A
угу так поехали ещё раз клас поскольку у нас будет четыре ссылки а четыре ссылки - это разделить на 12 это колонки посколько ко ко 12 раз 4 колонки значит пот у нас будут Да ну сда 12 пишем алд для того чтобы на планшетах у нас
23:04
Speaker A
это всё было значит три вот Первое у нас отказ от ответственности ссылочка должна быть так а АФ так отказ от ответственности и URL адрес и при том кейс работал именно когда мы на сайте вот сохраняли правильный правильное название на
23:41
Speaker A
странице То есть я не утверждаю что это работает на всех проектах но опять же бу был Явный как только получается создавались странички Давайте е раз их посмотрим ни отказ от ответственности пользовательское соглашение политика конфиденциальности и обратная связь именно с Вот такими вот URL адресами
24:12
Speaker A
трафик взлетал есть ощущение что и сейчас это Это должно работать потому что Ну наверняка есть какой-то алгоритм Да который анализирует кстати вдруг специалист Подскажите как вот такое вот явление может как вот эти четыре страницы могут бустануть сайт то есть опять же выборка у меня из
24:47
Speaker A
сайтов наверно не такая большая чтобы я мог утверждать что именно вот эти четыре страницы Бут Но таких проектов было больше страни создавались и рост был Да где-то прямо вообще сильный рост Прямо именно вот на графике было видно так
25:13
Speaker A
пользователь пользователь ское соглашение где был бу сильный и соответственно что о чём я говорил а да что вот были такие проекты вот так политика конфиденциальности что после создания вот этих четырёх страничек у нас соответственно был резкий бустра наверх Так это у нас политика
25:52
Speaker A
конфиденциальности кстати чем заполнить вот эти странички Ну вы без проблем найте какие-то шаблоны в интернете то есть это не проблема Я помню у Тильды был сервис по созданию таких документов может быть мы поэкспериментировать так и следующая ссылочка у нас будет а
26:33
Speaker A
на что вести на какую страничку Так давайте посмотрим пролистать же не помню Да делалось это очень давно Вот вот этот проект просто первое что пришло в голову как это можно вам показать сайт кстати построен на прессе буквально на
26:55
Speaker A
коленке тут Что тут у нас есть скрипты вот да которые позволяют производить транслитерацию данных информация с одного языка на другой Ну то есть кому интересно обязательно вбейте транслитерация online.ru Вот можете посмотреть как он работает так тут у нас что обратная
27:25
Speaker A
связь обратная связь кто мне пишет что почему вы не используете готовый движок готовый фреймворк и так далее ребят честно я уже наелся готовых вот этих решений мне хочется написать что-то своё с нуля То есть правда я и когда работаю с
27:49
Speaker A
клиентскими проектами когда разрабатываю проекты на заказ вот мне правда вот уже уже неинтересно сидеть и ковыряться в каком-то фреймворке либо в ЦМС не хочется написать всё с нуля вот э с представлением прекрасного такого вот какой у меня есть
28:19
Speaker A
вот в данный момент вот правда наелся А вот когда создаю проект чисто с нуля У меня такое ощущение что я отдыхаю наверное да это по фану это прикольно почему бы так и не делать то есть и я могу какие-то инженерные штуки которые м
28:42
Speaker A
вещи которые появляются у меня в голове в данный момент я их могу реализовать так как хочу то есть мне не нужно придумывать как вот что-то сделать на каком-то фреймворке если я хочу какое-то поле в базе данных дополнительно сделать
29:01
Speaker A
я это делаю и это очень удобно или я хочу немножко схитрить где-то нестандартное что-то применить я это беру и реализую моментально то есть вот в этом наверное кайф какого-то своего полностью всё по центру у нас эти блоки по центру
29:30
Speaker A
но выглядят отвратительно будем честны поэтому давайте мы их наверное раскрасим какой-то другой цвет или можно целый класс выделить Так давайте что Ну сначала просто вот пропишет цвета так Color какой White белый Вот кстати мне очень нравится когда э
29:58
Speaker A
растут подписчики на канале поэтому Ребята кто только заглянул Подписывайтесь стараюсь выпускать видео каждый день не могу обещать что так будет постоянно но пока чу-чу успеваю получаются То есть вы в режиме реального времени Можете смотреть Что происходит с проектами так текстовка успеем
30:21
Speaker A
подготовить в этом выпуске так отказ от ответственности где-то тут ошибка в этом слове так отказ от вот оно так правильно пишется да под вечер уже плохо соображает отказ от ответственности замечательно Мы конечно можем сейчас закидать текст Да вот на эти
30:54
Speaker A
странички можем А можем оставить на следующий так сейчас давайте подумаем Ну в принципе вот у нас главная страничка уже в принципе выглядит более-менее приятно какого каких-то блоков очевидно Не хватает Может быть сделать блок с переключением городов Да вот где-то вот
31:18
Speaker A
тут сверху чтобы человек мог переходить на странички Давайте посмотрим что у нас тут есть вообще что нам предлагает в своих стандартных компонентах алерты есть Да есть карусельки можно кстати использовать для переключения пользователей есть навигация пагинация так А почему я четвёртую
31:47
Speaker A
версию смотрю Давайте пятую смотреть Пятая версия так тут мне больше нравится как документация так так так сейчас компоненты алерты кнопочки карты так коллапс что у нас всё окей модальные окошки вот такие вот штуки у нас да стилизовать какой-то какие-то списки
32:24
Speaker A
можно Может быть навбар так пагинация Прогресс может быть регистрацию сделать вот на прогрессе То есть например мы заполняем поля и у нас соответственно увеличивается Прогресс Да регистрации или какой-то тест мы зашьёшь Надо подумать так сл Spy [музыка] Угу Ладно хорошо на сегодня мы уже
33:10
Speaker A
наверное всё-таки это видео заканчиваем потому что уже уже Правда уже вдохновение куда-то улетает более-менее облагородили нашу главную страничку Ну конечно работа ещё не мерена то есть тут можно сайт дорабатывать и дорабатывать бесконечно вот а Спасибо что смотрели это видео а
33:36
Speaker A
подписывайтесь на канал ставьте лайки Обязательно жду ваши комментарии под этим видео что бы вы хотели увидеть Именно в этом проекте какой функционал реализовать на сайте знакомств Вот чего возможно чего-то вам не хватает на каком-то другом сайте и вы
34:01
Speaker A
бы хотели чтобы такой функционал был реализован пишите Я обязательно всё прочитаю и лучшие идеи будут реализованы на этом проекте Также хочу напомнить что у меня есть страница на бусте куда я выкладываю все исходники к видео также там ссылочки на
34:24
Speaker A
макеты фигме скрипты на PHP на Ява скрипте дампы баз данных в общем всё что получается в режиме реального времени всё дублируется туда и вы в принципе вот поддержав моё творчество можете с этим всем ознакомиться более детально и развернуть свои проекты параллельно на
34:53
Speaker A
базе того что уже вот есть Спасибо что смотрели это видео дальше будет интересней
Topics:сайт знакомствPHPHTMLCSSBootstrapразработка сайтаадаптивный дизайнрегистрацияперсональные данныедейтинг-сервис

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 →