Простой конфигуратор из 3 компонентов

@Herald777reg · Регистрация: 16.03.2024

Студворк — интернет-сервис помощи студентам

Создаю на курсовой проект конфигуратор пк железа простой пока до ужаса, проверка совместимости будет всего у 3 важных компонентов ( цп , материнская и озу)

Страница куда вывожу блок компонентов:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<div class="container mt-5">
    <div id="step1">
        <h2>Выберите процессор</h2>
        <div id="processors" class="d-flex flex-wrap"></div>
    </div>
    <div id="step2" class="mt-4" style="display:none;">
        <h2>Выберите материнскую плату</h2>
        <div id="motherboards" class="d-flex flex-wrap"></div>
    </div>
    <div id="step3" class="mt-4" style="display:none;">
        <h2>Выберите оперативную память</h2>
        <div id="rams" class="d-flex flex-wrap"></div>
    </div>
</div>
<script src="../js/configurator.js"></script>
</body>

js конфигуратор

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
function loadProcessors() {
    fetch('getProcessors.php')
        .then(response => response.json())
        .then(data => {
            const container = document.getElementById('processors');
            data.forEach(proc => {
                const card = document.createElement('div');
                card.className = 'card m-2';
                card.style.width = '18rem';
                card.innerHTML = `<img src="${proc.url}" class="card-img-top" alt="${proc.name}">
                                  <div class="card-body">
                                    <h5 class="card-title">${proc.name}</h5>
                                    <p class="card-text">${proc.description}</p>
                                    <p class="card-text">Цена: ${proc.price}</p>
                                    <button class="btn btn-primary" onclick="selectProcessor(${proc.id})">Выбрать</button>`;
                container.appendChild(card);
            });
        });
}
 
// Функция для выбора процессора и загрузки материнских плат
function selectProcessor(id) {
    console.log(`Выбранный ID процессора: ${id}`); // Добавлено для отладки
    fetch(`getMotherboards.php?processorId=${id}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('step1').style.display = 'none';
            document.getElementById('step2').style.display = 'block';
            const container = document.getElementById('motherboards');
            container.innerHTML = '';
            data.forEach(mb => {
                const card = document.createElement('div');
                card.className = 'card m-2';
                card.style.width = '18rem';
                card.innerHTML = `<img src="${mb.url}" class="card-img-top" alt="${mb.name}">
                                  <div class="card-body">
                                    <h5 class="card-title">${mb.name}</h5>
                                    <p class="card-text">${mb.description}</p>
                                    <p class="card-text">Цена: ${mb.price}</p>
                                    <button class="btn btn-primary" onclick="selectMotherboard('${mb.id}')">Выбрать</button>`; // Исправлено
                container.appendChild(card);
            });
        });
}
 
 
function selectMotherboard(motherboardId) {
    console.log(`Выбранный ID материнской платы: ${motherboardId}`);
    fetch(`getRAMs.php?motherboardId=${motherboardId}`) 
        .then(response => response.json())
        .then(data => {
            console.log(data);
            document.getElementById('step2').style.display = 'none';
            document.getElementById('step3').style.display = 'block';
            const container = document.getElementById('rams');
            container.innerHTML = '';
            data.forEach(ram => {
                const card = document.createElement('div');
                card.className = 'card m-2';
                card.style.width = '18rem';
                card.innerHTML = `<img src="${ram.url}" class="card-img-top" alt="${ram.name}">
                                  <div class="card-body">
                                    <h5 class="card-title">${ram.name}</h5>
                                    <p class="card-text">${ram.description}</p>
                                    <p class="card-text">Цена: ${ram.price}</p>
                                    <button class="btn btn-primary">Выбрать</button>`;
                container.appendChild(card);
            });
        }).catch(error => console.error('Error:', error));
}
// Запуск загрузки процессоров при загрузке страницы
document.addEventListener("DOMContentLoaded", loadProcessors);

Создал обработчики
getProcessors.php - выводит процессоры

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
// Параметры подключения к базе данных
$host = 'localhost';
$database = 'ComputerBuilder';
$user = 'root';
$password = '';
 
$connection = new mysqli($host, $user, $password, $database);
if ($connection->connect_error) {
    die("Connection failed: " . $connection->connect_error);
}
$query = "SELECT id, name, description, price, url FROM components WHERE id_category = 1";
$result = $connection->query($query);
$processors = [];
while($row = $result->fetch_assoc()) {
    $processors[] = $row;
}
header('Content-Type: application/json');
echo json_encode($processors);
$connection->close();

getMotherboards.php - выводит подходящую материнскую

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
$host = 'localhost';
$database = 'ComputerBuilder';
$user = 'root';
$password = '';
 
$processorId = $_GET['processorId'];
$connection = new mysqli($host, $user, $password, $database);
if ($connection->connect_error) {
    die("Connection failed: " . $connection->connect_error);
}
// Получаем Socket процессора
$query = "SELECT Socket FROM components WHERE id = $processorId";
$socketResult = $connection->query($query);
 
if ($socketRow = $socketResult->fetch_assoc()) {
    $socket = $socketRow['Socket'];
    // Находим совместимые материнские платы
    $query = "SELECT id, name, description, price, url, MemoryType FROM components WHERE Socket = '$socket' AND id_category = 2";
    $result = $connection->query($query);
    $motherboards = [];
    while($row = $result->fetch_assoc()) {
        $motherboards[] = $row;
    }
    header('Content-Type: application/json');
    echo json_encode($motherboards);
}
$connection->close();

getRAMs.php - должен выдавать оперативную память, но в консоли только и вижу что id материнской не передается не могу найти ошибку

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php
$host = 'localhost';
$database = 'ComputerBuilder';
$user = 'root';
$password = '';
 
if(isset($_GET['motherboardId'])) {
    $motherboardId = $_GET['motherboardId'];
 
    error_log("Motherboard ID: $motherboardId");
    error_log(print_r($_GET, true));
 
    $connection = new mysqli($host, $user, $password, $database);
    if ($connection->connect_error) {
        die("Connection failed: " . $connection->connect_error);
    }
 
    $query = "SELECT MemoryType FROM components WHERE id = $motherboardId";
    $memoryTypeResult = $connection->query($query);
 
    if ($memoryTypeResult) {
        $memoryTypeRow = $memoryTypeResult->fetch_assoc();
        if ($memoryTypeRow) {
            $MemoryType = $memoryTypeRow['MemoryType'];
            error_log("MemoryType: $MemoryType");
 
            $query = "SELECT id, name, description, price, url FROM components WHERE MemoryType = '$MemoryType' AND id_category = 3";
            $result = $connection->query($query);
 
            if ($result) {
                $rams = [];
                while($row = $result->fetch_assoc()) {
                    $rams[] = $row;
                }
                header('Content-Type: application/json');
                echo json_encode($rams);
            } else {
                echo "Error fetching RAM data.";
            }
        } else {
            echo "Error fetching MemoryType data.";
        }
    } else {
        echo "Error fetching MemoryType from database.";
    }
 
    $connection->close();
} else {
    echo "айди матери не передается.";
}
?>

Смотрел выводы консоли через network

Code
1
http://kursrew/getMotherboards.php?processorId=1

Code
1
[{"id":"28","name":"MAG B560M MORTAR WIFI","description":"LGA 1200, Intel B560, 4xDDR4-3200 \u041c\u0413\u0446, 2xPCI-Ex16, 2xM.2, Micro-ATX ","price":"12599.00","url":"classes\/images\/MSI-MAG-B560M-MORTAR-WIFI.jpg","MemoryType":"ddr4"}]

При выборе материнской платы http://kursrew/getRAMs.php?memoryType=undefined айди матери не передается.

@voraa · 17.03.2024, 09:46

Сообщение от Herald777reg

При выборе материнской платы http://kursrew/getRAMs.php?memoryType=undefined айди матери не передается.

У вас же в js вызов

JavaScript
1
fetch(`getRAMs.php?motherboardId=${motherboardId}`)

@Herald777reg · 17.03.2024, 10:24 **[ТС]**

Не понял, файл там прописал уже верный , но то что я получаю тип памяти вместо id не понимаю почему где я ошибся

@Herald777reg · 17.03.2024, 10:27 **[ТС]**

Перезагрузил опен сервер, и вижу такую картинку само починилось...

Новые блоги и статьи Все статьи Все блоги /
BOINC: 22 года — и всё ещё работает Programma_Boinc 12.03.2026 BOINC: 22 года — и всё ещё работает Дэвид Андерсон написал ретроспективу. Кратко: в 2001 году он ушёл из United Devices, где был CTO, и за несколько месяцев написал ядро BOINC — клиент, сервер,. . .	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@Herald777reg 0 / 0 / 0 Регистрация: 16.03.2024 Сообщений: 3
	17.03.2024, 10:24 [ТС]
	Не понял, файл там прописал уже верный , но то что я получаю тип памяти вместо id не понимаю почему где я ошибся 0

@Herald777reg 0 / 0 / 0 Регистрация: 16.03.2024 Сообщений: 3
	17.03.2024, 10:27 [ТС]
	Перезагрузил опен сервер, и вижу такую картинку само починилось... Миниатюры 0