Как сделать поиск по сайту php
Обновлено: 06.07.2024
Большое спасибо за вашу помощь и внимательность к нам!
В сегодняшнем уроке мы рассмотрим поиск php mysql. Скриптов поиска огромное множество, некоторые используют базу данных, другие обходятся без нее, есть расширенные поиски с точной сортировкой. Мы же остановимся на обычном простом поиске, который ищет информацию по двум таблицам из базы данных MySQL.
Дамп таблицы news - новостей.
Дамп таблицы vac - вакансий.
Пропишем немного стилей, которые будут формировать наш поиск.
Мы рассмотрели с Вами простой поиск php mysql, который ищет информацию из базы данных. По условию используются две таблицы, Вы можете настроить под себя любым удобным способом. Следующий урок будет посвящен аналогии простого поиска, только с расширенными возможностями.
Здесь можно найти всё что Вам нужно! ⇒
Простое модальное окно на чистом JS, код модального окна JS
Дата публикации 2021-03-31 21:37:12
Простейшая валидация формы на JS, PHP 7 и HTML 5
Дата публикации 2021-03-25 20:49:16
Скрипт капчи своими руками который работает на PHP-7
Дата публикации 2020-10-17 21:37:54
Дата публикации 2019-02-03 13:42:25
Поменять CSS свойства при нажатии кнопки без перезагрузки страницы
Дата публикации 2019-01-26 12:50:45
Система лайков на PHP и Ajax, своя система лайков для сайта
PHP скрипт для вывода кто сейчас онлайн для сайта
Готовая система смс переписки для сайта, скрипт переписки
Дата публикации 2017-12-24 16:39:17
Вывод по порядку последних записей из таблицы MySQL на PHP
Дата публикации 2017-12-20 12:16:19
PHP скрипт загрузки изображения с изменением размера
Дата публикации 2017-12-17 18:20:30
Коротко
Найти статью для разработки WEB сайта и скачать бесплатно исходники. Отыскать нужную статью для сайта опубликованную в помощ Web - мастерам.
Сегодня мы напишем собственный поиск по сайту с использованием PHP и MySQL. Первым делом рассмотрим краткий алгоритм.
Пользователь выполняет POST запрос из формы поиска, этот запрос передается специальному скрипту-обработчику, который должен обработать поисковый запрос пользователя и возвратить результат.
Сначала скрипт должен обработать должным образом запрос пользователя для обеспечения безопасности, затем выполняется запрос к базе данных, который возвращает в ассоциативном массиве результаты, которые должны будут выводиться на экран. Итак, приступим.
Для начала создадим форму поиска на нужной нам странице:
Эта форма и будет отправлять сам поисковый запрос скрипту search.php. Теперь создадим сам скрипт-обработчик.
Теперь осталось на этой же странице search.php сделать вызов этой функции и вывести ее результат пользователю.
Также Вы можете упростить скрипт поиска по Вашему усмотрению. Желательно создать стиль в таблице css для выводимой информации, чтобы выводимая информация смотрелась более красиво и читабельно. Все замечания вопросы по скрипту можете задавать в комментариях.
На сегодняшний день каждый сайт имеет встроенную функцию поиска. И в этой статье, я хочу Вам показать один вариант реализации живого поиска.
Живой поиск, означает что по мере того, как пользователь будет вводить данные в поле поиска, автоматически, предлагаемые варианты поиска будут обновляться.
Эти рекомендации появляются в режиме реального времени из подключенной базы. Таким образом, как только пользователь начинает вводить запрос, варианты поиска обновляются в зависимости от введенных данных.
Пример живого поиска на сайте google:
Необходимые инструменты и знания:
- Редактор кода (Sublime, Notepad) или IDE, например, PHPStorm.
- Локальный сервер или хостинг. В данной статье я буду использовать локальный сервер Open Server.
- Знания HTML, CSS, PHP, MySQL, JavaScript, AJAX.
Добавление домена в OpenServer
И так, для начала, нам необходимо создать папку для нашего сайта.
Для этого открываем папку 'domains', которая расположена внутри папки сервера OpenServer. И создаем там папку с названием 'live-search.local'.
После этого, открываем настройки Open Server.
Переходим во вкладку 'Домены', указываем папку домена и добавляем домен.
Создание и настройка базы данных
Для того чтобы перейти к создании базы данных, запускаем сервер и открываем СУБД PHPMyAdmin.
Нажимаем на ссылку 'New'.
Указываем название базы 'live_search' и выбираем кодировку 'utf8mb4_unicode_ci'.
Далее, создаем таблицу 'users', со столбцами 'id' и 'name' и наполняем ее данными.
Для этого, в PhpMyAdmin, переходим на вкладке SQL и запускам следующий запрос:
И видим, что данные добавились.
Создание необходимых файлов
Создайте следующие файлы в папке 'live-search.local'.
index.php - основной файл поисковой системы, в котором пользователь вводит данные и просматривает результат.
db.php - содержит данные для подключения к базе данных.
handler.php - файл, который обрабатывает ajax запрос и выдает результаты.
script.js - Этот файл содержит функцию-обработчик события 'keyup' и отправляет данные на сервер, используя технологию ajax. Также в нем находится функция fill() которая срабатывает при клике на результат поиска.
style.css – Файл для стилей
Создание живого поиска
Теперь переходим непосредственно к созданию функционала живого поиска.
Открываем файл с именем 'index.php' и вставляем в него следующий код:
Теперь, настроим подключение к базе данных. Для открываем файл 'db.php' и вставляем в него следующий код:
Далее, открываем файл 'handler.php' и вставляем в него следующий код:
Открываем файл с именем 'script.js' и вставляем в него следующий код:
Открываем файл стилей 'style.css', и вставляем в него следующий код:
Готово! Функционал ‘живой поиск’ готов к тестированию.
Открываем сайт в браузере, по адресу live-search.local/
Теперь в текстовое поле, вводим какое-то имя из примера. Или можно ввести только некоторую комбинацию букв из имени. Например, поищем 'Андрея'. Вводим в поиск 'ан'.
Как видим, в результатах поиска, по запросу 'ан' у нас отображаются, имена, которые содержат эту комбинацию букв.
Теперь разберемся как работает наш живой поиск. Значит при вводе запроса, значение поля поиска, считывается скриптом из файла 'script.js'.
В данном файле, используя технологию 'ajax', это значение передается на сервере. Обработчиком на стороне сервера является файл 'handler.php'.
В файле 'handler.php', по введенному запросу, производится поиск в таблице 'users' из базы данных.
Здесь же, формируется список с результатами поискового запроса и возвращается обратно в файле 'script.js', в функцию 'success'.
Результат с сервера, находится внутри параметра 'response'.
Используя метод html(), мы добавляем этот результат в блоке div с потом, используя метод show(), мы отображаем этот div, на странице.
И еще, если мы теперь кликнем на результат поиска, то, срабатывает функция fill() из файла 'script.js', которая берет результат по которому кликнули и добавляет его в поле поиска. В тоже время, она скрывает результаты поиска.
Вот и все. Поле для поиска в режиме реального времени готова.
Видео: 15 Способов Поиска в Google, о Которых не Знают 96 % Людей
Похожие статьи:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Читайте также: