Разработка сайта знакомств: перенос Bootstrap на хостинг и реализация фильтрации анкет по полу, городу, возрасту и детям.
Key Takeaways
- Перенос Bootstrap-скриптов на локальный хостинг улучшает скорость загрузки сайта.
- Фильтрация анкет реализуется через динамические SQL-запросы с учетом нескольких критериев.
- Визуальное оформление результатов помогает лучше различать пользователей по полу.
- Работа ведется в реальном времени с постепенным улучшением функционала и структуры проекта.
- Использование локальных ресурсов повышает стабильность работы сайта на разных провайдерах.
What the video covers
- Автор начинает с решения проблемы медленной загрузки Bootstrap-скриптов с CDN и переносит их на локальный хостинг.
- Скачиваются и распаковываются файлы CSS и JS Bootstrap последней версии для локального подключения.
- Происходит настройка проекта для подгрузки локальных скриптов вместо CDN.
- Реализуется страница поиска с фильтрацией анкет по различным критериям: пол, город, возраст, наличие детей.
- Обсуждается структура SQL-запросов для выборки данных из базы по заданным фильтрам.
- Автор показывает, как привязать кнопки и поля формы для динамической фильтрации данных.
- Рассматривается оформление результатов поиска с применением классов для визуального разделения по полу.
- Происходит оптимизация и очистка проекта от ненужных файлов для упрощения структуры.
- Демонстрируется вывод информации о пользователях на основе результатов SQL-запроса.
- Планируется дальнейшее расширение функционала фильтрации и улучшение интерфейса.
Chapters
- 00:00Введение и постановка задачи
- 02:55Скачивание и подготовка Bootstrap
- 05:35Загрузка и распаковка файлов Bootstrap
- 08:11Подключение локальных скриптов и проверка работы
- 11:15Очистка проекта от ненужных файлов
- 14:19Начало реализации страницы поиска и фильтрации
- 17:20Создание и отладка SQL-запросов для фильтрации
- 19:58Вывод результатов и оформление интерфейса
- 22:01Дальнейшее расширение функционала фильтрации
Full Transcript — Download SRT & Markdown
Speaker A
Добрый день, дорогие подписчики! Рад вас приветствовать на новой серии с проекта "Свой сайт знакомств", где мы с вами в режиме реального времени разрабатываем сайт знакомств и, соответственно, пытаемся его запустить. Так, с чего бы я хотел начать эту серию?
Speaker A
серию хотел бы начать в том что у нас плохо прогружаются страпо ские скрипты которые мы берём соответственно с синки из официальной сети которую нам предоставляет бустра поэтому что мы сейчас сделаем Ну вот сейчас прогрузилась а вот пару минут
Speaker A
Серию хотел бы начать с того, что у нас плохо прогружаются bootstrap-ские скрипты, которые мы берём, соответственно, с CDN из официальной сети, которую нам предоставляет Bootstrap. Поэтому что мы сейчас сделаем? Ну вот сейчас прогрузилась, а вот пару минут назад я просматривал, и были проблемы.
Speaker A
думаю ничего не изменится Да так идм давайте жу получается на сайт бустра пятого Мне нужно будет скачать давайте мы перейдём сразу же на последнюю версию какая у нас там Последняя Ага последняя вот э вот 5 и2 я так понимаю
Speaker A
Проблемы я заметил, что только получаются на провайдере Телеком, с остальными всё в порядке. Поэтому что я сейчас, конечно, авторизую скрипты, закачаю к себе на сайт и будем их подгружать уже оттуда. То есть это пару минут, я думаю, ничего не изменится. Да, так идём.
Speaker A
CSS которые нам неплохо было бы сделать из него архив Угу и Файлик JS Я из него тоже сделаю архив так идём дальше а далее я забегаю э получается к нам в папку с проектом Так давайте закачай оба эти
Speaker A
Давайте, получается, на сайт Bootstrap пятого мне нужно будет скачать. Давайте мы перейдём сразу же на последнюю версию. Какая у нас там последняя? Ага, последняя вот 5.2, я так понимаю.
Speaker A
распаковать Ну а дальше что дальше я соответственно зайду в код нашего проекта и просто подменю то место Откуда мы с вами будем подгружать скрипты в нашем случае это будет что это будет получается Папочка CSS bootstrap Min CSS да
Speaker A
Да, давайте мы её с вами и скачаем сейчас. Так, так, так, так, скачать. А вот 5.3 версию можно скачать, замечательно.
Speaker A
соответственно Такой проблемы не будет да Всё подгружается у нас из локального скрипта хорошо ну а мы соответственно переходим к самому нашему проекту Мы хотели бы сегодня реализовать страницу поиска либо фильтрации как это можно сделать у нас по-моему уже была
Speaker A
Так, я скачаю, получается, все стандартные файлы, которые у нас есть. Мы их просто дальше... Что у нас есть? Файл CSS, который нам неплохо было бы сделать из него архив. Угу. И файл JS, я из него тоже сделаю архив. Так, идём дальше.
Speaker A
есть дальше кабинет точно нет наверное страничка поиск да поиск PHP Вот она вот страничка где нам нужно будет реализовать весь поиск соответственно замечательно значит что наверное я из хедера должен поставить ссылку на эту так мои данные поиск а она есть же да
Speaker A
А далее я забегаю, получается, к нам в папку с проектом. Так, давайте закачаем оба эти файла. Открыть загрузка. Угу, супер. Дальше что? Я каждый файл распакую.
Speaker A
фильтром нам нужно уже будет выставить искать что-то те записи которые находятся в базе данных Давайте Ну соответственно Наверное мы привяжем пока кнопки но потом мы можем и атрибуты В общем менять значение вот тут вот по изменению в каком-то поле наверняка можно сделать и
Speaker A
Так, распаковать архив. Напоминаю, что я работаю, получается, в файловой системе хостинга Бегет. Давай, давай шустрее. Угу, всё.
Speaker A
давайте я возьму пример вот этого sgl запросы нетт нет Вот вот тут ит массива хорошо дальше Что первым делом нам наверное неплохо было бы вытащить Так это у нас фильтры идут мы их пока не будем трогать дадада в самый низ
Speaker A
Так, тут у нас лежат файлы CSS и JS. Файл мне тоже нужно распаковать. Ну а дальше что? Дальше я, соответственно, зайду в код нашего проекта и просто подменю то место, откуда мы с вами будем подгружать скрипты. В нашем случае это будет... Что это будет? Получается, папочка CSS bootstrap.min.css, да.
Speaker A
будет противоположность пола то есть мы же знаем Какой пол Сейчас указан у нас в анкете да Давайте посмотрим что на данных прот прописан в профиле то мы соответственно ищем наверное женский пол если же у нас пол прописан какой женский то мы должны
Speaker A
Угу. Так, сохраняем, всё, обновляем страничку. Всё продолжает работать, и, по-моему, даже загрузка стала быстрее. На должен быть футер, где он? В футере тоже у нас, соответственно, JS скрипт подключается. Угу, так смотрим.
Speaker A
отправить Селект запрос в базу данных и подхватить оттуда вот эти первые атрибуты которые у нас есть даже не первый мне в принципе нужно-то немного Мне нужно сейчас выхватить полока иго мы этим воспользуемся так то есть у нас пол пол
Speaker A
Да, всё работает, всё открывается, и больше, соответственно, такой проблемы не будет. Да, всё подгружается у нас из локального скрипта. Хорошо.
Speaker A
включим мы включим отображение всех полей которые не имеют совпадения по полу То есть это у нас Что это у нас пока ID Нет не ID пока ID не равен отрицание будет у нас но Нет давайте мы посмотрим так sgl
Speaker A
Ну а мы, соответственно, переходим к самому нашему проекту. Мы хотели бы сегодня реализовать страницу поиска либо фильтрации. Как это можно сделать? У нас, по-моему, уже была...
Speaker A
юзера [музыка] Угу и местоположение а вот местоположение Как раз-таки должно быть равно ему Угу Так местоположение то есть город должен совпадать у юзера и соответственно у потенциального партнёра которого мы ищем в нашей базе так Z на всякий случай
Speaker A
СВР-ная страничка. Давайте я удалю, наверное, эти папки на всякий случай ненужные. Так, J-файл тоже удалим, маковский файл тоже я удаляю на всякий случай папочку.
Speaker A
то есть если всё работает то мы тут должны вывести информацию о человеке Так давайте чтом Мы сначала выводим получается массив с юзеров А имя человека у нас вот это поле имя прямо в шаблон будем вписывать имя Угу дальше следующий критерий у нас должен
Speaker A
Так, вот не кабинет, а у нас где были фильтры? Все фильтры. Так, мои данные есть, дальше кабинет точно нет. Наверное, страничка поиск, да? Поиск.php. Вот она, вот страничка, где нам нужно будет реализовать весь поиск, соответственно. Замечательно.
Speaker A
а а дальше уже будем смотреть что из этого выйдет Так возраст [музыка] Угу Так следующее поле у нас какое наверное оно должно быть информативным но пока я поставлю Просто описание Хотя внутри могут быть и перечисления каких-то основных критериев
Speaker A
Значит, что? Наверное, я из хедера должен поставить ссылку на эту. Так, мои данные, поиск, а она есть же, да?
Speaker A
постум друг прямо вот по классам То есть у нас по дизайну как задумывалось мальчики у нас становятся вот таким вот голубоватым цветом девочки используют розовый цвет с точки зрения классов у нас это реализовано соответственно есть Класс вот девочек есть мальчиков и кнопочки у
Speaker A
Сверху? Да, вот же она есть, замечательно. Тут мы, соответственно, с вами должны организовать поиск.
Speaker A
женский то мы наверное сейчас Ну хорошо вот опять же мы делаем пока по-быстрому индекс А давайте Main Main клас наверное назовём Main кла как он называется Girl потом Button так Пан же да Кнопка у нас buton buton клас
Speaker A
Поиск мы будем каким образом организовывать? У нас есть база данных, базу данных мы, соответственно, должны будем отправить запрос SQL по вот этим вот критериям, выставленным фильтром. Нам нужно уже будет выставить искать что-то, те записи, которые находятся в базе данных.
Speaker A
банк Потом может быть мы какую-то конструкцию поумнее придумаем и другой вариант есть когда получается пол мужской я специально наверное оставлю это таким образом то есть не буду через э писать чтобы у нас никто не пытался прорваться с каким-то другим полом
Speaker A
Давайте. Ну, соответственно, наверное, мы привяжем пока кнопки, но потом мы можем и атрибуты в общем менять значение вот тут вот по изменению в каком-то поле. Наверняка можно сделать и так.
Speaker A
у них каркас будет один и тот же Просто мы немножко разнообразием ВС это дело так всё замечательно Я сейчас могу это всё убрать и давайте мы с вами посмотрим вообще что вернёт наша анкета Она наверное вот наш поиск ничего
Speaker A
Так, первым делом давайте нам писать SQL-запрос. У нас есть поиск, хорошо. Так, в качестве примера давайте я заберу... Так, так, так, где у нас уже выводятся данные? Мои данные, наверное, да. Вот, замечательно.
Speaker A
пустую логин да какой-нибудь придумаем Давайте Маша например назовём им же логин Пусть тоже будет таким неважно дальше пол у нас должен быть женский женский дальше дальше дальше идём получается мы вниз местоположения также я пропишу Уфу вперёд все остальные поля у нас
Speaker A
Так, сейчас что я сделаю? Давайте я возьму пример вот этого SQL-запроса. Нет, нет. Вот вот тут ит массива. Хорошо.
Speaker A
логин есть возраст Давайте пропишет 25 например обновляю всё возраст подхватил и дальше мы что попробуем сделать М давайте мы попробуем вывести наверное основные критерии которые у нас есть вот что тут Важно вот прямо по фильтрации будем смотреть фильтр который
Speaker A
Дальше что? Первым делом нам, наверное, неплохо было бы вытащить... Так, это у нас фильтры идут, мы их пока не будем трогать. Да, да, да, в самый низ.
Speaker A
конечно получить вот этот вот параметр фильтра который у нас есть по кнопочки чтобы посмотреть Какое среднее значение тут у нас дано поэтому давайте мы сделаем кнопочку которая будет возвращать эту страничку Так я что я иду наверное наверх а потом может быть мы и сделаем и
Speaker A
Пролистывание всё. И вот тут вот мы, соответственно, будем с вами уже выводить информацию чуть ниже после селекта, после всего вот этого. Так, открываем PHP, СП, да, запускаем.
Speaker A
фильтры кстати местоположение уже можно убрать Ну да зачем нам искать а в каком-то другом регионе человека Хотя наверное можно было бы да давайте пока уберём я правда я не вижу смысла искать человека в каком-то другом месте то есть пожалуйста если куда-то
Speaker A
Дальше, соответственно, мы что? Мы ищем по таблице р, и основным критерием у нас будет противоположность пола. То есть мы же знаем, какой пол сейчас указан у нас в анкете, да?
Speaker A
дальше возраст возраст Вот это у нас с вами должна быть одна большая формочка поэтому я сейчас что я взял гфо будем использовать метод пост соответственно отправлять мы запросы будем на эту же страничку так я сейчас пролистав нез самый низ странички и нужно
Speaker A
Давайте посмотрим, что на данных прописан в профиле. То мы, соответственно, ищем, наверное, женский пол. Если же у нас пол прописан какой? Женский, то мы должны с вами искать мужской. Поэтому что? Поэтому давайте мы сначала просканируем все данные, которые у нас есть.
Speaker A
value value [музыка] какой поиск наверное да назовём поиск Главное чтобы она работала и дальше Что Дальше мы уже хотелось бы вывести Вот то значение которое мы получаем Так ну вот мы отправили пост запрос и давайте мы ниже выведем тот возраст
Speaker A
Вот зря я закрыл файл. Так, дальше что? Я беру вот этот в самом начале, сюда вот е подхватили. Идём дальше.
Speaker A
должен быть Получается имя мы задаём возраст И вот этот возраст нам неплохо было бы вернуть где-то на страничке пока я предлагаю просто вернуть его вот ниже вот тут вот да то есть если возраст отправлен так с помощью PHP так
Speaker A
Памм. Я что должен сделать? Я должен отправить селект-запрос в базу данных и подхватить оттуда вот эти первые атрибуты, которые у нас есть. Даже не первый, мне в принципе нужно-то немного.
Speaker A
значение дальше уменьшаю так возвращается 18 Значит тут мы можем е задать чтобы у нас value так вот мы вот этот код Давайте возьмём и пропишет существует так то тогда мы с вами присваиваем чему с вот этому значению наверное двойные кавычки
Speaker A
Мне нужно сейчас выхватить пол и город, мы этим воспользуемся. Так, то есть у нас пол, пол юзера, пол юзера — это у нас будет вот в этом массиве храниться информация.
Speaker A
поск так 84 так вот тут вот тоже поиск 33 хорошо Это мы с вами получили ниже Наверное мы с вами сделаем вот какую-то тако такое переключение от меньшего к большему или допустимость значение сделаем можем 10 сделать Я думаю можем
Speaker A
Дальше и местоположение, местоположение также мы его и назовём, наверное. Всё, замечательно.
Speaker A
есть мы дописывая э следующее условие Можно даже два условия наверное сделать Я думаю для возраста где-то 10 лет будет некритично Поэтому что поэтому мы сейчас так вот Я ниже вставлю синтаксис так получается к нашей переменной sgl Вот она Мы допи следующее значение То есть я
Speaker A
У нас есть сейчас основная информация для поиска. Соответственно, в первый запрос что мы включим? Мы включим отображение всех полей, которые не имеют совпадения по полу.
Speaker A
нас не местоположения А вот возраст как раз-таки возраст наверное должен быть больше чем возраст нет так Давайте вспомним немножко математику Да мне не нравится что мы сразу берём из пост запроса это поэтому поэтому что мы сделаем мы поставим вот эти вот
Speaker A
То есть это у нас что? Это у нас пока ID? Нет, не ID. Пока ID не равен... Отрицание будет у нас, но... Нет, давайте мы посмотрим.
Speaker A
дальше так возраст F у нас да возраст возраст F допустим вот текущий возраст должен больше или меньше интересно поставить но если я поставлю равно то опять же критерии будут очень прям такие странные так возраст F например меньше -5 я
Speaker A
Так, SQL not на всякий случай. Ну, по-моему, просто мы not прописываем перед знаком равно, и всё. Да, отрицательно.
Speaker A
так то есть у нас минимальный возраст опять же возраст должен быть а больше Да больше чем минимальный возраст вот он и ещё одно выражение мы добавляем наконец вот сюда вот и соответственно возраст должен быть меньше чем максимальный вот Наверное таким образом
Speaker A
Так, так, так, так, хорошо. Всё, значит, это у нас работает. Так, р, нет, пол. Пол у нас должен быть не равен полу юзера.
Speaker A
том вот тут вот ошибка Угу ещё раз зачем закрыл я вот это вот так нажимаю Поиск 59 не попа не попали А если 18 там будет Мы попадём тоже не попали а вот если мы чуть-чуть сдвинем 25 должно попадать да 22
Speaker A
[музыка]
Speaker A
фильтрацию вы бы хотели видеть Ну вот правда Может быть я действительно слишком вот где-то перегибай палку по фильтрации так дальше следующее поле нет детей Давайте посмотрим как оно у нас заполняется тут либо есть либо нету да То есть если стоят галочка То
Speaker A
Угу. И местоположение, а вот местоположение как раз-таки должно быть равно ему. Угу.
Speaker A
опять же Это у нас с вами ненаглядное JavaScript on CH например CH как-то так Будем изменять Так on CH скрипт так пост запрос честно не помню Каким образом это отправляется так отправить запрос через JavaScript так так так пока ничего не приходит в голову
Speaker A
Так, местоположение, то есть город должен совпадать у юзера и, соответственно, у потенциального партнёра, которого мы ищем в нашей базе.
Speaker A
заполним то есть если у нас он равняется единички то галочка стоит если у нас он не равняется едини то галочки нету вки ещ раз загляну как ниже это было Мы же писали уже подобные штуки Давайте ниже посмотрим нет детей
Speaker A
Так, на всякий случай местоположение р... А вот он должен совпадать. И дальше что?
Speaker A
переменной дети останется соответственно следующий фактор либо нет либо есть так опять же я вот это скопирую Угу Так идём вниз нам нужно Дописать SQL запрос таким вот образом дополнить так вот эта у нас штука вся отвечает за возраст давайте я сделаю такой
Speaker A
Дальше мы наш SQL-запрос будем просто дополнять также. Так, давайте, что? Давайте мы сейчас заполним вот тут вот данные.
Speaker A
нет то только в таком случае мы дописывая запрос Я думаю если вдруг детей нету у кого-то да В общем если для кого-то этот критерий не критичен то в принципе то есть если он галочку не ставит что нет детей то
Speaker A
Соответственно, если у нас выборка прошла, да, допустим, так, то что мы выводим? А, да, всё правильно.
Speaker A
пробуем так сохраняем обновляю страничку на всякий случай ставлю нет детей нажимаю на поиск да Маша пропала сразу же Ну кстати она и по возрасту могла пропасть Да сейчас она появилась мы ставим галочку нет детей тоже пропадёт наверно Нет она не
Speaker A
То есть если всё работает, то мы тут должны вывести информацию о человеке. Так, давайте что мы сначала выводим? Получается, массив с юзерами.
Speaker A
оно дети сохраняю так перехожу на страничку нет детей возвращаю машин возраст где-то вот тут вот и она должна пропасть потому что у неё не прописано что нету ещё раз она должна пропасть дальше убираю галочку она должна появиться Да всё критерий срабатывает Ну давайте
Speaker A
А имя человека у нас вот это поле имя прямо в шаблон будем вписывать имя. Угу.
Speaker A
ну и возраст такой же мы сделаем 26 например то есть у Марины нет детей А у Маши Дети есть стати местоположения Я тоже наве пропишу одинаковое чтобы у нас с вами фильтрация Работала как нужно замечательно так запускаем поиск вернулась Маша
Speaker A
Дальше следующий критерий у нас должен быть возраст. Возраст интересно заполнен? Да не у всех заполнен возраст. Нет, то есть не возраст.
Speaker A
это в моём аккаунте прописано средняя профессионально и всего лишь у нас там несколько вариантов Давайте его посмотрим образование так ой на самом деле вот эти фильтры как оказалось не очень-то легко и вот реализ да реализуются есть это пря нужно
Speaker A
Почему возраст? А нет, мы вот в анкете должны как раз-таки возвращать возраст. Давайте мы его будем возвращать пока что возвращаем таким образом. Да.
Speaker A
есть наверное да Нам нужно будет изменять форму именно при изменении этой формы мне так кажется это будет наиболее оптимальным решением потому что каждый раз выставлять фильтр и смотреть кто же там остался это ну это очень тяжело никто не будет этим пользоваться
Speaker A
А дальше уже будем смотреть, что из этого выйдет. Так, возраст.
Speaker A
раз также Вставляю вот сюда и последний критерий вот такое вот выше Угу всё замечательно А ещё нам неплохо было бы задать вот этому селектум с чем мы вообще работаем Всё дальше соответственно если вот вот это образование совпадает мы дописывая а
Speaker A
[музыка]
Speaker A
образования дальше мы с вами Давайте дом Вот так так так А вот мы берём запрос наш и просто доки ды сюда информацию то есть это у нас переменное образование должна равняться чему образованию так попробуем протестировать ну Давайте попробуем
Speaker A
Угу. Так, следующее поле у нас какое? Наверное, оно должно быть информативным, но пока я поставлю просто описание.
Speaker A
выше так По какому критерию они отображаются Вдвоём то есть возраст 22 детей нет поиск опять где-то ошибка так тут нету ошибки Ну скорее всего как всегда лишнее оформление где-то Да у нас как оно обычно бывает как я люблю оставлять
Speaker A
Хотя внутри могут быть и перечисления каких-то основных критериев человека. Да, давайте сделаем пока просто описание поля, но потом я думаю во время доработки мы это всё расширим.
Speaker A
завершать серию и видимо продолжать в следующий раз да хорошо сегодня что мы сделали сегодня мы с вами во-первых перенесли все буд страпо ВСС ие э стили и скрипты К нам Э на хостинг Это замечательно это всё работает а вот я вот
Speaker A
Сейчас так, описание. И самое главное, что самое главное нам нужно с вами определять — это всё-таки женская или мужская анкета.
Speaker A
поставим Ну фильтров реально много То есть это всё сделать А у нас вообще пропал поиск хорошо ладно чит продолжим следующей серии воевать с фильтрами у нас работало может быть код приведём к более читаемо виду потому что запросы уже поломаны но вы видели
Speaker A
Поэтому каким образом? Постум друг прямо вот по классам. То есть у нас по дизайну, как задумывалось, мальчики у нас становятся вот таким вот голубоватым цветом, девочки используют розовый цвет.
Speaker A
также Хочу попросить вас подписываться на бусте там у нас есть секретный чат и вы можете поддержать меня соответственно создание новых видео и простимулировать дальнейшую работу над стартапами Спасибо что смотрели увидимся в следующей серии
Topics:сайт знакомствBootstrapфильтрация анкетлокальный хостингSQL-запросыфильтр по полуфильтр по городуфильтр по возрастуразработка сайтаPHP











