Як створити динамічний пошуковик нерухомості з використанням PHP, MySQL і AJAX

3 Березня 2024 в 14:12 48

У сучасному веб-розробленні динамічні елементи інтерфейсу, такі як розширені пошукові бари, грають важливу роль у забезпеченні зручного користувацького досвіду. Розширений пошуковий бар для вебсайтів нерухомості дозволяє користувачам ефективно фільтрувати об’єкти за різними параметрами, такими як місцезнаходження, тип власності, кількість спалень та ванних кімнат. Реалізація такого інструменту вимагає інтеграції з сервером, базою даних і клієнтським браузером через асинхронні запити. У цій статті ми детально розглянемо процес створення динамічного пошукового бару з використанням PHP для обробки серверної логіки, MySQL для роботи з базою даних і AJAX для динамічного оновлення інформації без необхідності перезавантажувати сторінку.

Початкові умови

Перш за все, потрібно створити базу даних, яка буде використовуватися для зберігання інформації про нерухомість. Для нашого прикладу ми створимо таблицю property з наступними полями:

id – унікальний ідентифікатор об’єкта нерухомості;
property_name – назва об’єкта;
property_location – місцезнаходження об’єкта;
property_type – тип об’єкта (наприклад, квартира, будинок, комерційна нерухомість тощо);
bedroom – кількість спалень;
bathroom – кількість ванних кімнат.

Реалізація серверної логіки на PHP

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

&lt;?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    include 'config.php'; // Файл конфігурації з даними для підключення до БД
    $property_location = $_POST['property_location'];
    $property_type = $_POST['property_type'];
    $bedroom = $_POST['bedroom'];
    $bathroom = $_POST['bathroom'];
    $query = "SELECT * FROM property WHERE ";
    $conditions = [];
    // Додавання умов до запиту в залежності від отриманих параметрів
    if ($property_location != '') {
        $conditions[] = "property_location = '" . mysqli_real_escape_string($conn, $property_location) . "'";
    }
    if ($property_type != '') {
        $conditions[] = "property_type = '" . mysqli_real_escape_string($conn, $property_type) . "'";
    }
    if ($bedroom != '') {
        $conditions[] = "bedroom = '" . mysqli_real_escape_string($conn, $bedroom) . "'";
    }
    if ($bathroom != '') {
        $conditions[] = "bathroom = '" . mysqli_real_escape_string($conn, $bathroom) . "'";
    }
    if (!empty($conditions)) {
        $query .= implode(' AND ', $conditions);
    } else {
        $query .= "1=1";
    }
    $result = mysqli_query($conn, $query);
    if (mysqli_num_rows($result) &gt; 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            // Формування виводу результатів
        }
    } else {
        echo "За вашим запитом нерухомість не знайдена.";
    }
    mysqli_close($conn);
}
?&gt;

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {

include 'config.php'; // Файл конфігурації з даними для підключення до БД

$property_location = $_POST['property_location'];

$property_type = $_POST['property_type'];

$bedroom = $_POST['bedroom'];

$bathroom = $_POST['bathroom'];

$query = "SELECT * FROM property WHERE ";

$conditions = [];

// Додавання умов до запиту в залежності від отриманих параметрів

if ($property_location != '') {

$conditions[] = "property_location = '" . mysqli_real_escape_string($conn, $property_location) . "'";

}

if ($property_type != '') {

$conditions[] = "property_type = '" . mysqli_real_escape_string($conn, $property_type) . "'";

}

if ($bedroom != '') {

$conditions[] = "bedroom = '" . mysqli_real_escape_string($conn, $bedroom) . "'";

}

if ($bathroom != '') {

$conditions[] = "bathroom = '" . mysqli_real_escape_string($conn, $bathroom) . "'";

}

if (!empty($conditions)) {

$query .= implode(' AND ', $conditions);

} else {

$query .= "1=1";

}

$result = mysqli_query($conn, $query);

if (mysqli_num_rows($result) > 0) {

while ($row = mysqli_fetch_assoc($result)) {

// Формування виводу результатів

}

} else {

echo "За вашим запитом нерухомість не знайдена.";

}

mysqli_close($conn);

}

Інтеграція з AJAX для динамічного оновлення

Для того, щоб сторінка не перезавантажувалася при кожному запиті, використовується AJAX. Це дозволяє відправляти запити на сервер “на льоту” та отримувати дані без перезавантаження сторінки. JavaScript слухає зміни у формі пошуку та відправляє дані на сервер, отримуючи відповідь, яку потім можна відобразити користувачу.

document.addEventListener('DOMContentLoaded', function() {
    var searchForm = document.getElementById('searchForm');
    searchForm.addEventListener('submit', function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        fetch('search.php', {
            method: 'POST',
            body: formData
        })
        .then(response =&gt; response.text())
        .then(data =&gt; {
            document.getElementById('results').innerHTML = data;
        })
        .catch(error =&gt; console.error('Error:', error));
    });
});

document.addEventListener('DOMContentLoaded', function() {

var searchForm = document.getElementById('searchForm');

searchForm.addEventListener('submit', function(e) {

e.preventDefault();

var formData = new FormData(this);

fetch('search.php', {

method: 'POST',

body: formData

})

.then(response => response.text())

.then(data => {

document.getElementById('results').innerHTML = data;

})

.catch(error => console.error('Error:', error));

});

Заключення

Створення динамічного пошукового бару для сайту нерухомості вимагає інтеграції різних технологій: PHP для обробки даних на сервері, MySQL для зберігання інформації про нерухомість та AJAX для динамічного оновлення контенту без перезавантаження сторінки. Дотримуючись наведених вище кроків, ви зможете створити ефективний і зручний пошуковик, який значно покращить користувацький досвід на вашому сайті.