Як зробити пошук по сайту

Як зробити пошук по сайту за допомогою PHP і MySQL

Одна з найпопулярніших і необхідних функцій на будь-якому сайті — це пошук, реалізований за допомогою спеціальної форми. Цей функціонал дозволяє відвідувачам швидко знаходити на сайті цікавить їх контент.

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

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

Що вам знадобиться

  • Інструмент для роботи з базами даних MySQL .
  • Локальний або віддалений сервер з підтримкою PHP .
  • Текстовий редактор.
  • Створюємо базу даних
  • створення таблиці
  • Вносимо представників персоналу в таблицю
  • Розробка форми
  • Перевірка на відповідність критерію
  • Результати Connect, Select, Query і Return з таблиці бази даних
  • прибираємо табуляцію
  • Пошук по буквах
  • Пошук певного співробітника
  • SQL-ін’єкція
  • На завершення

Створюємо базу даних

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

Найпопулярнішим інструментом для управління MySQL є PHP My Admin, Цього інструменту буде досить для нашого сьогоднішнього керівництва.

створення таблиці

Наша таблиця повинна бути створена в наступному форматі:

Column Name Data Type Length Null or Not Null Primary key? Auto Increment
ID INT 1 Not Null Yes Yes
FirstName Varchar 50 Not Null No No
LastName Varchar 50 Not Null No No
Email Varchar 50 Not Null No No
PhoneNumber Varchar 15 Not Null No No

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

І серед даних персоналу не може бути порожніх значень (null, empty). Перший рядок виділена жовтим кольором, тому що стовпець ID — наш основний ключ. Основний ключ в базі даних гарантує, що кожен запис буде унікальною. До цієї колонці також застосований автоінкремент, а це значить, що кожного запису в нашій базі даних буде присвоюватися унікальний номер автоматично.

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

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

Column ID FirstName LastName Email PhoneNumber
2 Ryan Butler ryanbutler @ domain.com 417-854-8547
3 Brent Callahan brentcallahan @ domain.com 417-854-6587

Розробка форми

Щоб створити форму пошуку по сайту через Google, відкрийте будь-який відповідний текстовий редактор. Я рекомендую скористатися безкоштовним PSPad . Ви можете використовувати будь-який текстовий редактор, де передбачена підсвічування синтаксису. Це в значній мірі полегшить процес написання і налагодження PHP-коду . Створюючи сторінку для форми пошуку, не забудьте зберегти її у форматі .php, інакше PHP-код не буде оброблятися належним чином. Як тільки збережете документ, скопіюйте в нього наступну розмітку:

Якщо ви знайомі з мовою HTML, то тут вам все повинно бути зрозуміло як мінімум до відкриваючого тега form . Усередині цього тега знаходиться найважливіший елемент всього коду — атрибут action . Як дії нашої форми ми вказали назву нашого файлу, а потім застосували до нього рядок запиту «go».

Перевірка на відповідність критерію

Коли користувач вводить ім’я або прізвище, а потім натискає кнопку підтвердження, форма передає дані самої себе і додає в кінці рядок запиту «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-ін’єкцій .

Використовуючи знання, отримані з цієї статті, ви зможете без праці модифікувати чужий код, а також при необхідності розширювати функціонал форми пошуку.

Форма пошуку по сайту

Рядок пошуку

Прибрати в поле пошуку хрестик «Очистити», що видаляє раніше набраний текст

Як працює форма пошуку на сайті

Найпростіший HTML-код

Якщо набрати в поле «питання» і клацнути по кнопці «Знайти», то адреса сторінки зміниться з «http: // shpargalkablog.ru / 2011/06 / forma-poiska-po-saitu.html »на« http: // shpargalkablog.ru / 2011/06 / forma-poiska-po-saitu.html ?text = питання », як це відбувається при натисканні на посилання. При завантаженні сторінки, скрипт перевіряє наявність заданих параметрів в URL і при їх виявленні формує і відображає результати пошуку по сайту.

Але з метою збільшення швидкості завантаження документа, скрипт, що обробляє запит, як правило, поміщають тільки на одну сторінку сайту, на яку буде зроблений перехід, якщо її адреса прописати в атрибуті action: «http: // shpargalkablog.ru / search /?text = питання ».

Для роботи скрипта можуть знадобитися додаткові параметри, які вказуються в . Це поле не відображається. Тепер форма буде викликати «http: // shpargalkablog.ru / search /? searchid = 808327&text = питання ».

Результат роботи форми відкрити в новій вкладці за допомогою атрибута target

Де взяти скрипт пошуку по сайту

можна скористатися

  • запропонованим спеціальними сервісами Яндекса і Google,
  • вбудованим в використовувану CMS (при наявності), наприклад, на Blogger на «https: // site.ru / search?q = питання », де« site.ru »замінити на свою адресу блогу,
  • розробленим самостійно, наприклад, на PHP.

Найпростіший варіант — перенаправити запит Google:

Текст на кнопці: «Пошук», «Шукати», «Знайти»

З слів-збудників «Знайти» має досконалий вигляд і має на увазі, що результат пошуку буде обов’язково позитивним.

Поле пошуку для сайту. Ідеї ​​для оформлення

Поле пошуку для сайту — один з найважливіших елементів призначеного для користувача інтерфейсу на веб-сторінці. З його допомогою користувач може знайти потрібний контент на вашому сайті.

У цьому уроці ви дізнаєтеся, як створити розмітку для поля пошуку за допомогою HTML5, а також як стилізувати елементи форми, використовуючи можливості CSS3, без використання скриптів.

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