Давайте почнемо розробку вашого проекту "Світ Екстрасенсів".



Крок 1: Створення структури проекту


Спочатку створіть на вашому хостингу такі папки та файли:


/project_root
│
├── index.php
├── expert.php
├── chat.php
├── config.php
│
├── /css
│   └── styles.css
│
├── /js
│   └── scripts.js
│
├── /images
│   └── (зображення експертів та елементи дизайну)
│
├── /includes
│   ├── header.php
│   └── footer.php
│
├── /ajax
│   ├── load_experts.php
│   ├── load_messages.php
│   └── send_message.php
│
└── /admin
    ├── login.php
    ├── dashboard.php
    ├── manage_experts.php
    ├── manage_chats.php
    └── logout.php


Крок 2: Налаштування бази даних


2.1. Створіть базу даних


На вашому хостингу створіть нову базу даних MySQL, наприклад, psychics_db. Запишіть логін і пароль до бази даних.


2.2. Створіть таблиці в базі даних


Створіть файл db.sql з наступним кодом та імпортуйте його в вашу базу даних:


CREATE TABLE `experts` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(100) NOT NULL,
  `specialization` VARCHAR(100) NOT NULL,
  `description` TEXT NOT NULL,
  `price` VARCHAR(50) NOT NULL,
  `status` ENUM('online','offline') NOT NULL DEFAULT 'offline',
  `photo` VARCHAR(255) NOT NULL,
  `welcome_message` TEXT NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `chats` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `expert_id` INT(11) NOT NULL,
  `client_name` VARCHAR(100) NOT NULL,
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  FOREIGN KEY (`expert_id`) REFERENCES `experts`(`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `messages` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `chat_id` INT(11) NOT NULL,
  `sender` ENUM('expert', 'client') NOT NULL,
  `message` TEXT,
  `file` VARCHAR(255),
  `sent_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  FOREIGN KEY (`chat_id`) REFERENCES `chats`(`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `admins` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(50) NOT NULL UNIQUE,
  `password` VARCHAR(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;


Крок 3: Налаштування підключення до бази даних


3.1. Створіть файл config.php в корені проекту зі наступним кодом:


<?php
$host = 'localhost';
$db_user = 'ВАШ_ЛОГІН_БД';
$db_pass = 'ВАШ_ПАРОЛЬ_БД';
$db_name = 'psychics_db';

$conn = new mysqli($host, $db_user, $db_pass, $db_name);

if ($conn->connect_error) {
    die("Помилка підключення: " . $conn->connect_error);
}

$conn->set_charset("utf8mb4");
?>

Замініть ВАШ_ЛОГІН_БД та ВАШ_ПАРОЛЬ_БД на ваші дані.



Крок 4: Створення шапки та підвалу сайту


4.1. Створіть файл includes/header.php:


<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Світ Екстрасенсів - Шлях Долі</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <div class="logo">
            <h1>Світ Екстрасенсів</h1>
            <p>Шлях Долі</p>
        </div>
        <nav class="main-nav">
            <ul>
                <li><a href="index.php">Головна</a></li>
                <li><a href="#about">Про нас</a></li>
                <li><a href="#contacts">Контакти</a></li>
            </ul>
        </nav>
    </header>

4.2. Створіть файл includes/footer.php:


    <footer id="contacts">
        <p>&copy; <?php echo date('Y'); ?> Світ Екстрасенсів. Всі права захищені.</p>
        <p>Контакти: +380 00 000 00 00 | email@example.com</p>
    </footer>
    <script src="js/scripts.js"></script>
</body>
</html>


Крок 5: Створення головної сторінки


5.1. Створіть файл index.php:


<?php
include 'config.php';
include 'includes/header.php';
?>

<section class="hero">
    <h2>Відкрийте таємниці свого майбутнього з нашими експертами</h2>
</section>

<section class="experts">
    <h2>Наші експерти</h2>
    <div class="filter">
        <label for="specialization">Фільтрувати за спеціалізацією:</label>
        <select id="specialization" onchange="filterExperts(this.value)">
            <option value="">Всі</option>
            <option value="Екстрасенс">Екстрасенс</option>
            <option value="Астролог">Астролог</option>
            <option value="Таролог">Таролог</option>
            <option value="Нумеролог">Нумеролог</option>
        </select>
    </div>
    <div id="experts-list">
        <!-- Список експертів завантажується через AJAX -->
    </div>
</section>

<section id="about">
    <h2>Про нас</h2>
    <p>Ми - платформа для онлайн-консультацій з найкращими експертами в галузі езотерики. Наша місія - допомогти вам знайти відповіді на важливі запитання та відкрити нові горизонти.</p>
</section>

<?php
include 'includes/footer.php';
?>


5.2. Створіть файл ajax/load_experts.php:


<?php
include '../config.php';

$specialization = isset($_GET['specialization']) ? $_GET['specialization'] : '';

$query = "SELECT * FROM experts";
if ($specialization) {
    $specialization = $conn->real_escape_string($specialization);
    $query .= " WHERE specialization = '$specialization'";
}

$result = $conn->query($query);

while ($expert = $result->fetch_assoc()) {
    ?>
    <div class="expert-card">
        <img src="images/<?php echo htmlspecialchars($expert['photo']); ?>" alt="<?php echo htmlspecialchars($expert['name']); ?>">
        <h3><?php echo htmlspecialchars($expert['name']); ?></h3>
        <p><?php echo htmlspecialchars($expert['specialization']); ?></p>
        <p><?php echo mb_substr(htmlspecialchars($expert['description']), 0, 100); ?>...</p>
        <p>Від <?php echo htmlspecialchars($expert['price']); ?></p>
        <p>Статус: <span class="<?php echo $expert['status']; ?>"><?php echo $expert['status'] == 'online' ? 'Онлайн' : 'Офлайн'; ?></span></p>
        <a href="expert.php?id=<?php echo $expert['id']; ?>">Детальніше</a>
    </div>
    <?php
}
?>


5.3. Створіть файл js/scripts.js:


function filterExperts(specialization) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'ajax/load_experts.php?specialization=' + specialization, true);
    xhr.onload = function () {
        if (this.status === 200) {
            document.getElementById('experts-list').innerHTML = this.responseText;
        }
    };
    xhr.send();
}

// Завантажуємо список експертів при завантаженні сторінки
document.addEventListener('DOMContentLoaded', function() {
    filterExperts('');
});


Крок 6: Створення стилів сайту


6.1. Створіть файл css/styles.css:


/* Основні стилі */
body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364);
    color: #fff;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

header .logo h1 {
    margin: 0;
    font-size: 32px;
}

header .logo p {
    margin: 0;
    font-size: 18px;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav li {
    margin-left: 20px;
}

.main-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

.hero {
    text-align: center;
    padding: 100px 20px;
    background-image: url('../images/hero-background.jpg');
    background-size: cover;
    background-position: center;
}

.hero h2 {
    font-size: 48px;
    text-shadow: 2px 2px #000;
}

section {
    padding: 50px 20px;
}

.experts h2, #about h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 30px;
}

.filter {
    text-align: center;
    margin-bottom: 30px;
}

#experts-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.expert-card {
    background-color: rgba(255, 255, 255, 0.1);
    margin: 15px;
    padding: 20px;
    width: 250px;
    text-align: center;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}

.expert-card:hover {
    transform: scale(1.05);
}

.expert-card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.expert-card h3 {
    margin: 15px 0 5px;
}

.expert-card p {
    margin: 5px 0;
}

.expert-card .online {
    color: #0f0;
}

.expert-card .offline {
    color: #f00;
}

.expert-card a {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #fdbb2d;
    color: #000;
    text-decoration: none;
    border-radius: 5px;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #000;
}

footer p {
    margin: 5px 0;
}

/* Анімація зірок */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image: url('../images/stars.png');
    background-size: cover;
    opacity: 0.3;
    z-index: -1;
    animation: moveStars 60s linear infinite;
}

@keyframes moveStars {
    from { transform: translateX(0); }
    to { transform: translateX(-500px); }
}


Крок 7: Додавання зображень та шрифтів




Додайте в папку images такі зображення:



hero-background.jpg - фон для головного банера.

stars.png - зображення зірок для фону.

Зображення експертів (наприклад, expert1.jpg, expert2.jpg і т.д.)




Підключіть бажані шрифти, наприклад, через Google Fonts.




Додайте в header.php перед закриттям </head>:


<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<style>
body {
    font-family: 'Montserrat', sans-serif;
}
</style>


Крок 8: Створення сторінки експерта


8.1. Створіть файл expert.php:


<?php
include 'config.php';
include 'includes/header.php';

$expert_id = isset($_GET['id']) ? intval($_GET['id']) : 0;

$query = "SELECT * FROM experts WHERE id = $expert_id";
$result = $conn->query($query);

if ($result->num_rows > 0) {
    $expert = $result->fetch_assoc();
    ?>
    <section class="expert-details">
        <div class="expert-info">
            <img src="images/<?php echo htmlspecialchars($expert['photo']); ?>" alt="<?php echo htmlspecialchars($expert['name']); ?>">
            <h2><?php echo htmlspecialchars($expert['name']); ?></h2>
            <p><strong>Спеціалізація:</strong> <?php echo htmlspecialchars($expert['specialization']); ?></p>
            <p><?php echo nl2br(htmlspecialchars($expert['description'])); ?></p>
            <p><strong>Ціна консультації:</strong> від <?php echo htmlspecialchars($expert['price']); ?></p>
            <?php if ($expert['status'] == 'online'): ?>
                <a href="chat.php?expert_id=<?php echo $expert['id']; ?>" class="start-chat-button">Почати чат</a>
            <?php else: ?>
                <p>Експерт наразі <span class="offline">Офлайн</span></p>
            <?php endif; ?>
        </div>
    </section>
    <?php
} else {
    echo "<p>Експерта не знайдено.</p>";
}

include 'includes/footer.php';
?>


Крок 9: Створення сторінки чату


9.1. Створіть файл chat.php:


<?php
include 'config.php';

$expert_id = isset($_GET['expert_id']) ? intval($_GET['expert_id']) : 0;

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $client_name = $_POST['client_name'];
    // Створюємо новий чат
    $stmt = $conn->prepare("INSERT INTO chats (expert_id, client_name) VALUES (?, ?)");
    $stmt->bind_param("is", $expert_id, $client_name);
    $stmt->execute();
    $chat_id = $stmt->insert_id;
    header("Location: chat_window.php?chat_id=$chat_id");
    exit();
}

include 'includes/header.php';
?>

<section class="start-chat">
    <h2>Введіть ваше ім'я для початку чату з експертом</h2>
    <form method="POST">
        <input type="text" name="client_name" required placeholder="Ваше ім'я">
        <button type="submit">Почати чат</button>
    </form>
</section>

<?php
include 'includes/footer.php';
?>


9.2. Створіть файл chat_window.php:


<?php
include 'config.php';

$chat_id = isset($_GET['chat_id']) ? intval($_GET['chat_id']) : 0;

// Отримуємо інформацію про чат
$query = "SELECT * FROM chats WHERE id = $chat_id";
$chat_result = $conn->query($query);

if ($chat_result->num_rows > 0) {
    $chat = $chat_result->fetch_assoc();
    $expert_id = $chat['expert_id'];

    // Отримуємо інформацію про експерта
    $expert_query = "SELECT * FROM experts WHERE id = $expert_id";
    $expert_result = $conn->query($expert_query);
    $expert = $expert_result->fetch_assoc();
} else {
    die("Чат не знайдено.");
}

include 'includes/header.php';
?>

<section class="chat-window">
    <h2>Чат з експертом <?php echo htmlspecialchars($expert['name']); ?></h2>
    <div id="chat-messages">
        <!-- Повідомлення завантажуються через AJAX -->
    </div>
    <form id="chat-form">
        <input type="hidden" name="chat_id" value="<?php echo $chat_id; ?>">
        <textarea name="message" required placeholder="Введіть ваше повідомлення"></textarea>
        <button type="submit">Надіслати</button>
    </form>
</section>

<script>
document.getElementById('chat-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const chatId = <?php echo $chat_id; ?>;
    const message = this.message.value;

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'ajax/send_message.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onload = function () {
        if (this.status === 200) {
            loadMessages();
            document.getElementById('chat-form').reset();
        }
    };
    xhr.send('chat_id=' + chatId + '&message=' + encodeURIComponent(message) + '&sender=client');
});

function loadMessages() {
    const chatId = <?php echo $chat_id; ?>;
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'ajax/load_messages.php?chat_id=' + chatId, true);
    xhr.onload = function () {
        if (this.status === 200) {
            document.getElementById('chat-messages').innerHTML = this.responseText;
        }
    };
    xhr.send();
}

// Автоматичне оновлення повідомлень
setInterval(loadMessages, 3000);
loadMessages();
</script>

<?php
include 'includes/footer.php';
?>


9.3. Створіть файл ajax/send_message.php:


<?php
include '../config.php';

$chat_id = intval($_POST['chat_id']);
$message = $_POST['message'];
$sender = $_POST['sender'];

$stmt = $conn->prepare("INSERT INTO messages (chat_id, sender, message) VALUES (?, ?, ?)");
$stmt->bind_param("iss", $chat_id, $sender, $message);
$stmt->execute();
?>


9.4. Створіть файл ajax/load_messages.php:


<?php
include '../config.php';

$chat_id = intval($_GET['chat_id']);

$query = "SELECT * FROM messages WHERE chat_id = $chat_id ORDER BY sent_at ASC";
$result = $conn->query($query);

while ($msg = $result->fetch_assoc()) {
    $sender = $msg['sender'];
    $message = htmlspecialchars($msg['message']);
    $sent_at = date('H:i', strtotime($msg['sent_at']));
    ?>
    <div class="message <?php echo $sender; ?>">
        <span class="sender"><?php echo $sender == 'expert' ? 'Експерт' : 'Ви'; ?>:</span>
        <p><?php echo nl2br($message); ?></p>
        <span class="time"><?php echo $sent_at; ?></span>
    </div>
    <?php
}
?>


Крок 10: Створення адмін-панелі


(Через обмеження простору, надаю загальний опис.)


10.1. Створіть в папці admin наступні файли:



login.php - сторінка входу адміністратора.

dashboard.php - головна сторінка адмін-панелі.

manage_experts.php - керування експертами (додавання, редагування, видалення, змінення статусу).

manage_chats.php - перегляд чатів та повідомлень.

logout.php - вихід з адмін-панелі.


**10.2. Реалізуйте авторизацію адміністратора з безпечним збереженням паролів (використовуйте password_hash та password_verify).


**10.3. Забезпечте можливість керування експертами та чатами відповідно до технічного завдання.



Додаткові кроки:




Безпека: Не забудьте екранувати всі дані, що вводяться користувачем, щоб запобігти SQL-ін'єкціям та XSS-атакам.




Адаптивність: Використовуйте медіа-запити CSS для забезпечення коректного відображення на різних пристроях.




Тестування: Після завершення розробки ретельно протестуйте всі функції сайту.




Документація: Створіть файл README.md з інструкціями по встановленню та налаштуванню сайту.





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