Newcomposers.ru

IT Мир
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Javascript php поиск в mysql

Как происходит поиск в MySQL – руководство для начинающих

Дата публикации: 2016-06-30

От автора: вы тут запись мою не видели? Выпала из базы, теперь не знаю, что и делать! Наверное, сегодня возьмемся за поиск в MySQL. А я как раз вспомню, как более эффективно просеивать данные в СУБД и заодно свою строку постараюсь найти.

Зачем просеивать?

Просеивание в MySQL – одна из самых часто выполняемых задач. Для этого в системах управления БД, поддерживающих SQL, используется команда SELECT. В предыдущих материалах мы уже сталкивались с ней, применяя ее для нахождения и вывода строк, отвечающих «простеньким» критериям сортировки. На самом деле данная команда является одной из главных, и ее возможности в сфере поиска записей почти безграничны.

При этом написание правильных запросов на выборку данных в MySQL очень часто похоже на составление заклинаний. Особенно такое впечатление складывается у новичков, которые только ступили на путь изучения СУБД. Но сегодня мы постараемся развеять это «сюрреалистическое» наваждение, и научимся составлять правильные запросы для поиска по MySQL базе.

Как уже у нас заведено, начнем с обзора возможностей phpMYAdmin. Посмотрим, каким встроенным функционалом для сортировки данных обладает эта программа.

Просеиваем строки через phpMyAdmin

Зайдите в программу, выберите любую БД и таблицу в ней. Я бы советовал вам использовать таблицу поменьше, в которой всего несколько срок. В них лучше видны результаты сортировки.

Бесплатный курс по PHP программированию

Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Выбрав слева в меню базу и таблицу, перейдите сверху в раздел «Обзор». После этого СУБД выведет все строки, которые содержатся в данной структуре. Для этого программа направила на выполнение серверу БД запрос на выборку. Его код отображается выше результатов выборки.

Ниже находится весь встроенный функционал программы для поиска по MySQL базе. Чтобы установить способ «просеивания» по первичному ключу (по убыванию или возрастанию), используется переключатель «Сортировать по индексу».

Кроме этого можно «просеять» все строки, изменив порядок вывода данных по значению каждого из столбцов (убыванию и возрастанию). Для этого нужно нажать на имя столбца вверху списка. При этом для строковых значений порядок вывода будет изменяться в алфавитном порядке.

Но весь этот функционал пригодится вам только для осуществления поиска в небольших таблицах. Для более внушительных объемов данных придется использовать SQL.

Мощные средства SQL

Как уже упоминалось, для поиска в MySQL используется команда SELECT. Ее синтаксис я приводить не буду, поскольку его размер может испугать даже самого опытного разработчика. Поэтому только на скриншоте, чтобы вы не упали в обморок .

Будет «постигать» данную команду на примерах ее использования, которые могут пригодиться вам для построения более сложных запросов. Стартуем! Я все-таки опять «поиграюсь» со своими «зверушками», и все запросы буду адресовать таблице animal:

Связь с базами данных MySQL

СУБД MySQL — одна из множества баз данных, поддерживаемых в PHP. Система MySQL распространяется бесплатно и обладает достаточной мощностью для решения реальных задач.

Краткое введение в MySQL

SQL — это аббревиатура от слов Structured Query Language, что означает структурированный язык запросов. Этот язык является стандартным средством для доступа к различным базам данных.

Система MySQL представляет собой сервер, к которому могут подключаться пользователи удаленных компьютеров.

Для работы с базами данных удобно пользоваться средством, входящее в комплект Web-разработчика: Denwer phpMyAdmin. Здесь можно создать новую базу данных, создать новую таблицу в выбранной базе данных, заполнить таблицу данными, а также добавлять, удалять и редактировать данные.

В MySQL определены три базовых типа данных: числовой, дата и время и строчный. Каждая из этих категорий подразделяется на множество типов. Основные из них:

Создание новой базы данных MySQL осуществляется при помощи SQL-команды CREATE DATABASE.

Создание новой таблицы осуществляется при помощи SQL-команды CREATE TABLE. Например, таблица books для книжного магазина будет содержать пять полей: ISBN, автор, название, цена и количество экземпляров: Чтобы избежать сообщения об ошибке, если таблица уже есть необходимо изменить первую строчку, добавив фразу «IF NOT EXISTS»:

Для создания автообновляемого поля с текущей датой типа TIMESTAMP или DATETIME используйте следующую конструкцию:

Добавление данных в эту таблицу осуществляется при помощи SQL-команды INSERT. Например:

Для извлечения данных из таблицы служит оператор SELECT. Он извлекает данные из базы, выбирая строки, которые отвечают заданному критерию поиска. Оператор SELECT сопровождает немалое количество опций и вариантов использования.

Символ * означает, что необходимы все поля. Например:

Для получения доступа только к некоторому полю следует указать его имя в инструкции SELECT. Например:

Чтобы получить доступ к подмножеству строк в таблице, следует указать критерий выбора, который устанавливает конструкция WHERE. Например, чтобы выбрать имеющиеся в наличии недорогие книги о PHP, надо составить запрос: % Соответствует любому количеству символов, даже нулевых
_ Соответствует ровно одному символу

Для того, чтобы строки, извлеченные по запросу, перечислялись в определенном порядке, используется конструкция ORDER BY. Например:

По умолчанию порядок сортировки идет по возрастанию. Изменить порядок сортировки на обратный можно с помощью ключевого слова DESC:

Сортировать можно и по нескольким столбцам. Вместо названий столбцов можно использовать их порядковые номера:

Для изменения ранее записанных в таблицу значений нужно воспользоваться командой UPDATE. Например, цену всех книг повысили на 10%:

Конструкция WHERE ограничит работу UPDATE определенным строками. Например:

Для удаления строк из базы данных используется оператор DELETE. Ненужные строки указываются при помощи конструкции WHERE. Например, какие-то книги проданы:

Если нужно удалить все записи

Для полного удаления таблицы используется:

Связь PHP с базой данных MySQL

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

Чтобы получить доступ к базе данных из Web, используя PHP, надо сделать следующие основные шаги:

  • Подключение к серверу MySQL.
  • Выбор базы данных.
  • Выполнение запроса к базе данных:
    • добавление;
    • удаление;
    • изменение;
    • поиск;
    • сортировка.
  • Получение результата запроса.
  • Отсоединение от базы данных.

Для подключения к серверу базы данных в PHP есть функция mysql_connect( ). Ее аргументы: имя компьютера, имя пользователя и пароль. Эти аргументы можно опустить. По умолчанию имя компьютера = localhost, тогда имя пользователя и пароль не требуется. Если PHP используется в сочетании с сервером Apache, то можно воспользоваться функцией mysql_pconnect(). В этом случае соединение с сервером не исчезает после завершения работы программы или вызова функции mysql_close(). Функции mysql_connect() и mysql_pconnect() возвращают идентификатор подключения, если все прошло успешно. Например:

После того, как соединение с сервером MySQL установлено, нужно выбрать базу данных. Для этого используется функция mysql_select_db(). Ее аргумент: имя базы данных. Функция возвращает true, если указанная база данных существует и доступ к ней возможен. Например:

Для добавления, удаления, изменения и выбора данных нужно сконструировать и выполнить запрос SQL. Для этого в языке PHP существует функция mysql_query(). Ее аргумент: строка с запросом. Функция возвращает идентификатор запроса.

Пример 1

При каждом выполнении примера 1 в таблицу будет добавляться новая запись, содержащая одни и те же данные. Разумеется имеет смысл добавлять в базу данные, введенные пользователем.

В примере 2.1 приведена HTML-форма для добавления новых книг в базу данных.

Пример 2.1

Результаты заполнения этой формы передаются в insert_book.php.

Пример 2.2

В примере 2.2 введенные строковые данные обработаны функцией addslashes(). Эта функция добавляет обратные слеши перед одинарными кавычками (‘), двойными кавычками («), обратным слешем () и null-байтом. Дело в том, что по требованиям систаксиса запросов баз данных такие символы дожны заключаться в кавычки.

Для определения количества записей в результате запроса используется функция mysql_num_rows().

Все записи результата запроса можно просмотреть в цикле. Перед этим с помощью функции mysql_fetch_[] для каждой записи получают ассоциативный массив.

В примере 3.1 приведена HTML-форма для поиска определенных книг в базе данных.

Пример 3.1

Результаты заполнения этой формы передаются в search_book.php.

Пример 3.2

Альтернативный вариант

Итак, как работает архитектура Web-баз данных:

  1. Web-браузер пользователя выдает HTTP-запрос определенной Web-страницы. Например, пользователь, используя HTML-форму, ищет все книги о PHP. Страница обработки формы называется search_book.php.
  2. Web-сервер принимает запрос на search_book.php, извлекает этот файл и передает на обработку механизму PHP.
  3. PHP выполняет соединение с MySQL-сервером и отправляет запрос.
  4. Сервер принимает запрос к базе данных, обрабатывает его и отправляет результат (список книг) обратно механизму PHP.
  5. Механизм PHP завершает выполнение сценария, форматирует результат запроса в HTML. После этого результат в виде HTML возвращается Web-серверу.
  6. Web-сервер пересылает HTML в браузер, и пользователь имеет возможность просмотреть запрошенный список книг.

Использование механизма транзакций

Использование механизма транзакция на примере как передать деньги от одного человека другому

SELECT … FOR UPDATE

Если Вы запускаете несколько процессов, которые делают select запрос к одной и той же таблице, то они могут выбрать одну и ту же запись одновременно.

Чтобы избежать вышеупомянутой ситуации необходимо выполнить не просто SELECT запрос, а его расширенную версию, о которой многие и не подозревают: SELECT … FOR UPDATE.

Читать еще:  Ошибка открытия файла блокировок

Таким образом, при выполнении данного запроса, все затронутые записи в базе данных будут заблокированы до завершения сеанса работы с БД или до момента обновления данных записей. Другой скрипт не сможет выбрать заблокированные записи до тех пор, пока не наступит одно из упомянутых условий.

Однако не всё так просто. Вам нужно выполнить ещё несколько условий. Во-первых, ваша таблица должна быть создана на основе архитектуры InnoDB. В противном случае блокировка просто не будет срабатывать. Во-вторых, перед выполнением выборки необходимо отключить авто-коммит запроса. Т.е. другими словами автоматическое выполнение запроса. После того как вы укажите UPDATE запрос, необходимо будет ещё раз обратиться к базе и закоммитить изменения с помощью команды COMMIT:

Представьте что у нас есть 2 записи в таблице. Мы запускаем два параллельных скрипта с данным содержанием. В результате, первый процесс, который сможет достучаться до базы сделает выборку записи и сразу же заменит значение в поле locked на 1. В результате второй скрипт проигнорирует первую запись. В данном случае, даже если скрипты достучались бы до БД одновременно, второй скрипт всё равно не смог бы выбрать первую запись, т.к. при выборке первым процессом она будет заблокирована.

Как сделать живой поиск на сайте, с помощью JavaScript, AJAX и PHP

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

Живой поиск, означает что по мере того, как пользователь будет вводить данные в поле поиска, автоматически, предлагаемые варианты поиска будут обновляться.

Эти рекомендации появляются в режиме реального времени из подключенной базы. Таким образом, как только пользователь начинает вводить запрос, варианты поиска обновляются в зависимости от введенных данных.

Пример живого поиска на сайте google:

Необходимые инструменты и знания:

  1. Редактор кода (Sublime, Notepad) или IDE, например, PHPStorm.
  2. Локальный сервер или хостинг. В данной статье я буду использовать локальный сервер Open Server.
  3. Знания 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 с id=display, потом, используя метод show(), мы отображаем этот div, на странице.

И еще, если мы теперь кликнем на результат поиска, то, срабатывает функция fill() из файла ‘script.js’, которая берет результат по которому кликнули и добавляет его в поле поиска. В тоже время, она скрывает результаты поиска.

Вот и все. Поле для поиска в режиме реального времени готова.

Видео: 15 Способов Поиска в Google, о Которых не Знают 96 % Людей

Похожие статьи:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

  • — ВКонтакте
  • — Facebook
  • — Одноклассниках

Добавляйтесь в мои группы:

  • — Группа в ВКонтакте
  • — Группа в Facebook
  • — Группа в Одноклассниках

Подпишитесь на мои каналы:

  • — Мой канал на Youtube
  • — Мой канал на Google+

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО.

Дата добавления: 2020-03-19 04:49:14

Разрабатываем функционал поиска по сайту на PHP и MySQL

Одна из самых популярных и необходимых функций на любом сайте – это поиск, реализованный с помощью специальной формы. Этот функционал позволяет посетителям быстро находить на сайте интересующий их контент.

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

Разрабатывать формы поиска при помощи PHP , а также познакомитесь с SQL ( Structured Query Language ) – специальным языком для сбора, записи и модификации информации, содержащейся в базах данных. Перед тем как начать, рекомендуем вам скачать файлы проекта .

Что вам понадобится

  • Инструмент для работы с базами данных MySQL .
  • Локальный или удаленный сервер с поддержкой PHP .
  • Текстовый редактор.

Создаем базу данных

Если вы не совсем уверены, что сможете разобраться с базой данных на вашем хостинге, то свяжитесь с хостером для получения соответствующих инструкций или помощи. После того как база данных будет создана, вам нужно будет подключить ее, создать таблицу и записать в нее необходимые данные.

Самым популярным инструментом для управления MySQL является PHP My Admin , Этого инструмента будет достаточно для нашего сегодняшнего руководства.

Создание таблицы

Наша таблица должна быть создана в следующем формате:

Таблица базы данных состоит из столбцов и строк, как в Excel . Первый столбец позволяет идентифицировать данные по имени. Далее идет колонка Data types ( тип данных ), которая указывает нам на тип данных, содержащихся в колонке. В поле Length ( Длина ) указывается максимальный объем памяти ( хранилища ) для столбца таблицы. Мы используем переменные, которые дают больше гибкости. Другими словами, если длина ФИО меньше 50 символов, то будет занята лишь часть отведенного места.

И среди данных персонала не может быть пустых значений ( null, empty ). Первая строка выделена желтым цветом, потому что столбец ID – наш основной ключ. Основной ключ в базе данных гарантирует, что каждая запись будет уникальной. К этой колонке также применен автоинкремент, а это значит, что каждой записи в нашей базе данных будет присваиваться уникальный номер автоматически.

Вносим представителей персонала в таблицу

Как только разберетесь с таблицей, начните заполнять ее данными. 6 записей вполне достаточно, чтобы закрепить в уме процедуру. Ниже предлагаю вам собственный пример:

Разработка формы

Чтобы создать форму поиска по сайту через Google , откройте любой подходящий текстовый редактор. Я рекомендую воспользоваться бесплатным PSPad . Вы можете использовать любой текстовый редактор, где предусмотрена подсветка синтаксиса. Это в значительной степени облегчит процесс написания и отладки PHP-кода . Создавая страницу для формы поиска, не забудьте сохранить ее в формате .php , иначе PHP-код не будет обрабатываться должным образом. Как только сохраните документ, скопируйте в него следующую разметку:

Если вы знакомы с языком HTML , то тут вам все должно быть понятно как минимум до открывающего тега form . Внутри этого тега находится важнейший элемент всего кода – атрибут action . В качестве действия нашей формы мы указали название нашего файла, а затем применили к нему строку запроса “ go ”.

Читать еще:  Javasckript eval atob

Проверка на соответствие критерию

Когда пользователь вводит имя или фамилию, а затем нажимает кнопку подтверждения, форма передает данные самой себе и добавляет в конце строку запроса “ go ”. На данном этапе мы проверяем наличие строки запроса go . Если результат положительный, выводим результаты поиска.

До вывода запрашиваемых результатов нам нужно перепроверить: (1) была ли подтверждена форма, (2) содержит ли строка запроса значение go, (3) был ли поисковой запрос введен в нижнем или верхнем регистре? Если ни одна из проверок не дает положительного результата ( true ), то от нас не требуется выполнять какие-либо действия.

Для начала добавим небольшой блок кода PHP поиск по сайту после закрывающего тега :

Сначала мы открываем блок PHP-кода тегом ””.

Любой PHP-код внутри этой пары тегов будет исполняться сервером. Затем мы проверяем, была ли подтверждена форма:

Мы воспользуемся встроенной функцией isset , которая возвращает значение типа bool , и поместим в нее массив $_POST . Логическое выражение в программировании позволяет получить нам либо true , либо false .

Следовательно, если функция возвращает значение true , то форма была подтверждена, и нам нужно продолжить выполнение кода дальше. Если же функция возвращает значение false , то мы выведем сообщение об ошибке. Сохраните весь набранный код в файле search_submit.php .

Далее нам нужно проверить, имеется ли в строке запроса значение go :

Мы вкладываем еще одно условное логическое выражение внутрь основного, но только в этот раз мы используем массив $_GET вместе со значением “ go ”. Сохраните изменения в файле search_go.php .

Теперь нам нужно убедиться, что посетители могут вводить первую букву в строку запроса только в верхнем или только в нижнем регистре. Нам также нужно предусмотреть способ учета критериев поиска, введенных посетителем. Лучше всего проверять введенные посетителем данные с помощью регулярного выражения:

Мы вкладываем еще одно условное логическое выражение внутрь наших двух. На этот раз мы используем регулярное выражение для проверки ввода. Мы используем встроенную функцию preg_match с двумя параметрами: регулярное выражение, и поле формы, к которому должна применяться проверка.

В нашем случае, это будет поле « Имя » ( name ). Чтобы извлечь параметры поиска, указанные посетителем, мы создаем переменную $name, и привязываем к ней значение POST с названием поля из формы, которое будет использоваться в SQL-запросе . Сейчас мы реализовали: (1) отправку данных формы, (2) строка запроса включает значение go и (3) посетитель ввел либо заглавную, либо строчную первую букву. И все эти проверки происходят еще до внесения изменений в базу данных. Сохраните все изменения.

Результаты Connect, Select, Query и Return из таблицы базы данных

Чтобы получить данные из таблицы, сначала в скрипте поиска по сайту нужно подключиться к серверу. Для этого мы используем следующий код:

Мы создаем переменную $db , и привязываем ее к встроенной функции MySQL mysql_connect , которая принимает три параметра: сервер с базой данных ( localhost , если вы работаете локально ), логин и пароль.

После этого мы запускаем встроенную PHP-функцию die , которая останавливает дальнейшее выполнение кода, если нет соединения с базой данных. И выводим информацию об ошибке, запуская встроенную функцию MySQL mysql_error , которая вернет причину ошибки. Сохраните файл search_connectdb.php .

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

Создаем переменную под названием mydb и привязываем ее ко встроенной MySQL-функции mysql_select_db , а затем указываем название базы данных, которую создали ранее. Далее мы опрашиваем таблицу базы данных при помощи SQL-запроса с переменной name, в которой содержатся параметры поиска, введенные посетителем:

При опросе таблицы базы данных мы создаем переменную $sql , и привязываем ее к строке, содержащей SQL-запрос . Мы используем оператор SELECT для извлечения значений из столбцов id , а также имени и фамилии из таблицы contacts . Затем мы используем инструкцию WHERE вместе со значениями имени и фамилии, чтобы сузить поиск.

Вместе с оператором LIKE мы используем знак процента (%) – спецсимвол, который возвращает 0 и более знаков, а также переменную name из строки поиска. В результате LIKE ( в сочетании со спецсимволом ) находит любое соответствующее имя в таблице базы данных. Можно описать весь процесс следующим образом: « Мы выбираем имя и фамилию из таблицы contacts , которые соответствуют введенным посетителем ». Сохраните файл search_query.php .

Далее нам нужно поместить результаты SQL-запроса в переменную, и запустить ее при помощи функции mysql_query , как показано ниже:

Мы создаем переменную $result , и присваиваем ей значение функции mysql_query () , внося ее в $query. Теперь наш запрос хранится в переменной result . Чтобы вывести результат в PHP , мы создаем цикл, а затем выводим данные в неупорядоченном списке:

Сначала мы создаем цикл while , внутри него создаем переменную под названием row , и инициализируем ее возвращаемым значением функции mysql_fetch_array , которая принимает переменную result , в которой находится наш SQL-запрос . Внутри цикла while мы присваиваем каждому значению столбца значение переменной с идентичным названием. Затем мы выводим значения внутрь неупорядоченного списка.

Здесь важно обратить внимание на два момента: (1) внутри цикла while не нужно присваивать значения переменным массива row , так как значения можно брать напрямую из массива row ; (2) тег anchor , который мы используем в названии нашего файла вместе с id и основным ключом. Причина этого заключается в том, что во многих поисковых элементах изначально ничего не отображается.

Так как мы показываем только имя и фамилию, приписывая ID в конце нашего тега anchor , то мы можем использовать ID для дополнительного запроса, который позволит вывести дополнительную информацию о персонале. Сохраните файл и протестируйте форму PHP поиска по сайту ( search_display.php ).

Убираем табуляцию

Результаты выводятся в виде неупорядоченного списка, но суть в том, что нам не нужна табуляция. Чтобы избавиться от нее, добавьте следующее CSS-правило в самое начало вашего файла в head :

Поиск по буквам

Для реализации поиска по буквам потребуется лишь несколько дополнительных строк кода. Добавим этот удобный функционал для посетителей. Таким образом, они смогут находить представителей персонала по буквам, которые содержатся в имени или фамилии.

Добавьте следующую строку кода после закрывающего тега form :

Здесь мы изменили четыре фрагмента кода скрипта поиска по сайту:

  • Мы используем функцию isset() , и вносим в нее массив $_GET , а затем проверяем значение by ;
  • Создаем переменную $letter и инициализируем ее значение массивом $_GET ;
  • Добавляем переменную letter в SQL-запрос ;
  • Указываем переменную letter внутри выражения, в котором получаем подсчитанное количество строк.

Сохраните файл search_byletter.php и проверьте результат.

Поиск определенного сотрудника

Чтобы отобразить информацию об остальном персонале, которая передается через уникальное id внутри нашей ссылки, нужно добавить следующий код прямо после закрывающей фигурной скобки в скрипте letter , как показано ниже:

Здесь мы изменили четыре фрагмента кода:

  • Мы используем функцию isset() , и с ее помощью проверяем значение ID в массиве $_GET ;
  • Создаем переменную $contactid и инициализируем ее массивом $_GET ;
  • В таблице выделяем все, что отмечено звездочкой * . Звездочка – это сокращенное обозначение в SQL , которое означает « дайте мне все столбцы и строки из таблицы» . Чтобы определить, какую информацию выводить, мы упоминаем переменную contactid в конце SQL-выражения ;
  • Выводим дополнительную информацию о каждом представителе персонала.

Сохраните файл search_byid.php и проверьте результат.

Обратите внимание, что наш функционал работает так, как и положено. При вводе имени или фамилии в поле, или при выборе буквы в качестве гиперссылки, отображаются только имена представителей персонала. Если навести курсор на ссылку, то в строке статуса можно увидеть уникальный ID . Если кликнуть по конкретному человеку, то адресная строка изменится, и отобразится дополнительная информация об этом сотруднике.

SQL-инъекция

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

Как уже было отмечено, регулярное выражение гарантирует, что в качестве первого символа посетитель может вводить лишь буквы в нижнем или верхнем регистре.

В завершение

В сегодняшней статье мы рассмотрели, как сделать поиск по сайту, а также:

  • Создавать базы данных и соответствующие таблицы;
  • Использовать инструменты для управления базами данных, создавать столбцы и вводить данные;
  • Разрабатывать формы поиска на основе PHP , которая умеет осуществлять проверку вводимых данных, наличия переменных в запросе, а также соединяться с базой данных и выводить результаты из таблицы;
  • Как защитить приложение и базу данных от SQL-инъекций .

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

Данная публикация представляет собой перевод статьи « How to Create a Search Feature with PHP and MySQL » , подготовленной дружной командой проекта Интернет-технологии.ру

Читать еще:  Перевод в двоичную систему счисления java

Строим дерево категорий на javascript, php и mysql

При разработке веб-приложений мы часто сталкиваемся с необходимостью представлять данные в виде дерева. При создании того же интернет-магазина линейная структура категорий товаров подойдет только небольшим проектам. Чаще всего хочется, чтобы была возможность вкладывать категории друг в друга. В других случаях, например, если создаете файловый менеджер, без категорий обойтись еще сложнее.
В этой статье я расскажу, как можно легко сообразить симпатичное дерево данных у себя на сайте, начиная от создания таблицы в mysql, и заканчивая выводом дерева в браузере. На клиенте будем использовать библиотеку jstree, несложный серверный код напишем сами.

Что мы собираемся делать и что получим в итоге?

Для примера рассмотрим неоднократно упоминавшийся интернет-магазин и создадим для него дерево категорий товаров. Торговать будем традиционно компьютерной техникой. Сначала создадим таблицу категорий в mysql, потом нарисуем разметку для страницы каталога, напишем js-код и, наконец, php-скрипт, который лезет в базу и отдает категории клиенту в нужном формате. И сразу ссылка на демо приложения

Создаем таблицу категорий

Для создания сколь угодно разветвленной структуры категорий нам понадобится всего одна таблица. Назовем ее categories и создадим в ней 4 поля: id, category, parent_id и number. id будет первичным ключом и автоинкрементом, category — название категории, parent_id — это id категории-родителя, number — порядковый номер категории в родительской.

Поясню: например, имеем 3 категории товаров, родительская — ноутбуки, в ней лежат еще 2 — Acer и Lenovo. В таблице это будет выглядеть так:
id, category, parent_id, number
1, Ноутбуки, 0, 1
2, Acer, 1, 1
3, Lenovo, 1, 2
Условимся, что корневые категории будут иметь parent_id = 0. Поле number нужно, чтобы организовать вывод категорий в нужном порядке, мы же не гарантируем, что на первом месте всегда будет Acer, поэтому нужно иметь возможность поменять порядок вывода. В каждой подкатегории создается своя нумерация, начиная с 1.

Чтобы было лучше видно, как строится иерархия, создайте таблицу в mysql и забейте в нее тестовые данные. Ниже sql-код для того и другого. Базу данных по привычке назовем webdevkin.

Структура таблицы категорий

Тестовые данные

Теперь можно посмотреть на таблицу categories в привычном phpMyAdmin-e или dbForgeStudio и переходить к созданию нашего мини-приложения.

Структура проекта

В корне проекта у нас будет лежать index.html и 4 незатейливых папки: img, css, js и php. В img находится одна картинка loading.gif. Она будет показываться посетителям сайта, пока дерево категорий грузится с сервера. В папке css лежит файл main.css со стилями для нашей страницы и папка jstree, в которой находится стили и картинки для библиотеки jstree.

Папку js разделим по старой памяти на vendor и modules. В первой папке будут библиотеки jquery и jstree. Уточню — jquery требуется не только нам, но и как зависимость для jstree. В папке modules единственный файл main.js — главный js-скрипт приложения. В папку php отправим index.php, который выполнит всю серверную работу.

В этот раз удобнее рассказать сначала о серверной стороне дела, а потом перейти на клиентскую часть. Поэтому смотрим, как вытащить данные из таблицы категорий в нужном формате — файл php/index.php

Серверный код — index.php

Что нам нужно сделать?

  • 1. Подлючиться к базе данных
  • 2. Вытащить список категорий
  • 3. Отправить информацию в браузер

Список простой, и с реализацией возникнуть проблем не должно. В начале файла объявим нужные константы для подключения к базе.

Затем пишем функцию подключения к базе данных, используем mysqli.

Дальше нам нужно вытащить список категорий из таблицы. Здесь нужно немного забежать вперед. Библиотека jstree принимает на вход json. Допустимые форматы описаны на сайте библиотеки jstree.com. Мы возьмем самый удобный для нас и будем отдавать с сервера сразу подготовленные данные. Этот формат выглядит так:

Пример взят из документации, мы же для удобства в качестве id будем использовать просто id из нашей базы — число без префикса ajson. Переходим к функции получения категорий из таблицы БД

Здесь мы выполняем обычный запрос select к таблице categories, вытаскиваем 3 нужных поля, попутно немного преобразовывая их к требуемому формату. id прокидываем без изменений, parent_id мы возвращаем как parent, причем для корневых категорий возвращаем #. А поле category будет проходить как text. Данные получены, осталось загнать их в массив, который мы будем конвертировать в json и отдавать браузеру. Это видно в основном потоке скрипта

На что нужно обратить внимание. В нашем конкретном случае передача get-параметра action выглядит лишней, но это до тех пор, пока файл index.php служит для одной-единственной задачи — вернуть список категорий. Вскоре будет опубликована статья с развитием функционала дерева, в частности, реализация drag-and-drop на клиенте и обновление соответствующих данных на сервере. В ней мы увидим, что передача get-параметра в качестве указания необходимого действия — это достаточно удобная тема.

И насчет ответа клиенту. Поле code всегда указывает на статус выполнения запроса — success или error. В случае успеха массив категорий возвращается в поле result, при каких-то неполадках в поле message приходит сообщение об ошибке.

С серверной частью нашего приложения все, переходим на клиента.

Разметка для страницы нашего каталога — index.html

Если Вы уже посмотрели демо приложения, то увидели, что разметка предельно проста. Есть 2 главных контейнера: слева — для дерева категорий, справа — заглушка для списка товаров. В секции head будет такой код:

В секции body тоже нехитро.

И добавим немного разметки в main.css

С html/css закончили и теперь переходим к самому интересному — javasctipt-коду создания дерева. Здесь-то мы и соберем воедино весь задуманный функционал.

main.js — инициализация приложения

Если Вы читали предыдущие статьи, например, про создание корзины для интернет-магазина на фронте или про встраиваемые виджеты на нативном javascript, то можете вспомнить, что схема js-кода у меня приблизительно одинакова для всех случаев.

Применим ее и здесь: создадим js-модуль, основанный на замыкании, закэшируем нужные элементы dom, напишем несколько приватных методов и один публичный — метод инициализации приложения.

Каркас модуля

Как видим в последней строчке, после загрузки документа мы вывываем метод app.init(), который в свою очередь загружает данные с сервера и передает их в метод создания дерева. В ajaxUrl пишем адрес нашего серверного скрипта, в объекте ui будут закешированы два dom-элемента.

Получаем данные с сервера — метод _loadData()

Здесь пишем самый обычный ajax-запрос к серверному скрипту, получаем данные с категориями и в случае успеха передаем их функции инициализации дерева _initTree(). Мы помним, что данные с сервера нам приходят в формате json, поэтому укажем сразу dataType: ‘json’. А нужная инфа придет в поле result, поэтому в _initTree мы передаем именно resp.result. Обработать ошибки можно как угодно, для примера просто выкинем их в консоль.

И дальше то, ради чего все и затевалось — как нам построить красивое дерево на javascript?

Построение дерева в функции _initTree, используем jstree

И это все, что нужно! Выглядит визуально самая сложная часть приложения до безобразия просто. Нужно к определенному элементу dom всего лишь применить метод jstree с некоторыми параметрами. В нашем случае передаем сами данные в поле data, multiple: false указывает, что нам не нужно множественное выделение, а check_callback: true говорит о том, что хотим после изменения дерева что-то еще и сделать.

В поле plugins перечисляем в массиве желаемые плюшки. Остановимся на dnd — drag-and-drop — прикрутим возможность изменять структуру дерева мышкой. Это очень удобная штука, но пока не функциональная. Можно сколько угодно играться с деревом в браузере, но после обновления страницы увидим старую структуру каталога. Это логично, потому что данные берутся с сервера, и мы не написали кода для обновления mysql при клиентских событиях. Этому будет посвящена одна из следующих статей, а пока будем баловаться, передвигая категории мышкой в браузере.

И напоследок методом bind связываем событие изменения в дереве с каким-то полезным действием. В нашем примере просто выведем надпись с названием категории, но в реальном приложении здесь стоит подтягивать список товаров с сервера. Откуда взялось category = data.node.text? Откройте консоль браузера и увидите, какие еще данные о выбранном узле нам доступны.

Итого

В этой статье полноценный каталог для работы интернет-магазина мы не построили — идея была не в том. Я хотел сосредоточиться на том, как от начала до конца максимально просто построить такую полезную структуру как дерево. Сознательно были пропущены некоторые моменты, а именно, более плотная работа с самим деревом и синхронизация действий клиента с сервером, а также построение списка товаров при клике категории. Для первого варианта выпущу отдельную статью.

UPDATED: Запилил статью, где показывается, как перемещать отдельные элементы дерева мышкой, методом drag-and-drop, и синхронизировать эти данные с сервером. Немного кода на клиенте и сервере — и вуаля! Ссылка чуть ниже под нумером 4.

Ссылка на основную публикацию
Adblock
detector