За последние 24 часа нас посетили 22348 программистов и 1143 робота. Сейчас ищут 662 программиста ...

Фильтр вывода товара из базы данных

Тема в разделе "PHP и базы данных", создана пользователем Macan, 11 июл 2019.

Страница 1 из 2
  1. Macan

    Macan Активный пользователь

    С нами с:
    11 июл 2019
    Сообщения:
    29
    Симпатии:
    0
    Приветствую всех, подскажите как реализовать множественный фильтр. Имеется база данных, из которой выводятся выбранный пользователем с помощью выпадающего списка и чек-боксов , товар на страницу в блоке carts.

    Структура БД.

    scrin.png



    ----index.php----

    PHP:
    1. <?php
    2.  
    3.     include 'main.php';
    4.     $shiny = $result;
    5.  
    6. ?>
    7. <!DOCTYPE html>
    8. <html lang="ru">
    9.  
    10. <head>
    11.  
    12.     <meta charset="utf-8">
    13.     <base href="/">
    14.  
    15.     <title></title>
    16.     <meta name="description" content="">
    17.  
    18.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    19.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    20.    
    21.     <!-- Template Basic Images Start -->
    22.     <meta property="og:image" content="path/to/image.jpg">
    23.     <link rel="icon" href="img/favicon/favicon.ico">
    24.     <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon-180x180.png">
    25.     <!-- Template Basic Images End -->
    26.    
    27.     <!-- Custom Browsers Color Start -->
    28.     <meta name="theme-color" content="#322E44">
    29.     <!-- Custom Browsers Color End -->
    30.  
    31.     <link rel="stylesheet" href="css/main.css">
    32.  
    33. </head>
    34. <body>
    35. <form class="form">
    36.     <?php
    37.     $result = mysqli_query($conn, 'SELECT DISTINCT brend FROM shiny ORDER BY brend');
    38.     ?>
    39.  
    40.         <select id="brend">
    41.         <option disabled selected>Все</option>
    42.         <?php
    43.  
    44.             while( ($brend = mysqli_fetch_assoc($result)) ) {
    45.  
    46.             echo '<option value="'. $brend['brend'] .'">' . $brend['brend'] . '</option>';
    47.  
    48.             }
    49.         ?>
    50.  
    51.         </select>
    52.  
    53.         <?php
    54.         $result = mysqli_query($conn, 'SELECT DISTINCT width FROM shiny ORDER BY width');
    55.         ?>
    56.  
    57.         <select id="width">
    58.         <option disabled selected>Все</option>
    59.         <?php
    60.  
    61.             while( ($width = mysqli_fetch_assoc($result)) ) {
    62.                
    63.             echo '<option value="' . $width['width'] . '">' . $width['width'] . '</option>';
    64.  
    65.             }
    66.         ?>
    67.  
    68.         </select>
    69.  
    70.         <?php
    71.         $result = mysqli_query($conn, 'SELECT DISTINCT height FROM shiny ORDER BY height');
    72.         ?>
    73.  
    74.         <select id="height">
    75.         <option disabled selected>Все</option>
    76.         <?php
    77.  
    78.             while( ($height = mysqli_fetch_assoc($result)) ) {
    79.                
    80.             echo '<option value="' . $height['height'] . '">' . $height['height'] . '</option>';
    81.  
    82.             }
    83.         ?>
    84.  
    85.         </select>
    86.  
    87.         <?php
    88.         $result = mysqli_query($conn, 'SELECT DISTINCT diametr FROM shiny ORDER BY diametr');
    89.         ?>
    90.  
    91.         <select id="diametr">
    92.         <option disabled selected>Все</option>
    93.         <?php
    94.             while( ($diametr = mysqli_fetch_assoc($result)) ) {
    95.                
    96.             echo '<option value="' . $diametr['diametr'] . '">' . $diametr['diametr'] . '</option>';
    97.  
    98.             }
    99.         ?>
    100.  
    101.         </select>
    102.  
    103.                     <div class="leto">
    104.                         <input class="check-box" type="checkbox" id="leto" />
    105.                         <label class="check" for="leto">Летняя</label>
    106.                        
    107.                     </div>
    108.  
    109.                     <div class="zima">
    110.                         <input class="check-box" type="checkbox" id="zima" />
    111.                         <label class="check" for="zima">Зимняя</label>
    112.                     </div>
    113.  
    114.                     <div class="ship">
    115.                         <input class="check-box" type="checkbox" id="ship" />
    116.                         <label class="check" for="ship">Шипованная</label>
    117.                     </div>
    118.                     <div class="neship">
    119.                         <input class="check-box" type="checkbox" id="neship" />
    120.                         <label class="check" for="neship">Нешипованная</label>
    121.                     </div>
    122.                     <button type="reset" class="button-right">Сбросить</button>
    123. </form>
    124.             <button class="button-left">Выбрать</button>
    125.  
    126.  
    127.  
    128.  
    129. <div class="carts" id="carts">
    130.     <!-- <?php foreach ($shiny as $item) : ?>
    131.         <div class="cart">
    132.         <img src="<?=$item['image'];?>">
    133.         <p class="brend"><b><?=$item['brend'];?></b></p>
    134.         <p class="name"><b><?=$item['name'];?></b></p>
    135.         <p class="width"><b>Ширина:  <?=$item['width'];?></span></b></p>
    136.         <p class="height"><b>Высота:  <?=$item['height'];?></span></b></p>
    137.         <p class="diametr"><b>Диаметр:  <?=$item['diametr'];?></span></b></p>
    138.         <p class="season"><b>Сезон:  <?=$item['season'];?></span></b></p>
    139.         <p class="weight"><b>Вес:  <?=$item['weight'];?> кг.</span></b></p>
    140.         </div>
    141.     <?php endforeach; ?> -->
    142. </div>
    143.  
    144. <?php
    145.     mysqli_close($conn);
    146. ?>
    147.  
    148.     <script src="js/jquery.min.js"></script>
    149.     <script src="js/common.js"></script>
    150.  
    151. </body>
    152. </html>
    ----main.php----

    PHP:
    1.     $conn = mysqli_connect('localhost', '*****', '*****', '******');
    2.         if($conn == false ) {
    3.             echo 'Не удалось соединиться!';
    4.             echo mysqli_connect_error();
    5.             exit();
    6.         }
    7.  
    8.  
    9.  
    10.     $result = mysqli_query($conn, 'SELECT * FROM shiny');
    11.     for($i = 0;$i < mysqli_num_rows($result); $i++) {
    12.         $shiny[] = mysqli_fetch_array($result);
    13.     }
    14.  
    15.     return $shiny;
    ----common.js----

    Код (Javascript):
    1. $(document).ready(function() {
    2.  
    3.     function filterItems() {
    4.         var filter = $('.form'),
    5.             items = $('.cart');
    6.         items.hide();
     
    #1 Macan, 11 июл 2019
  2. Valick

    Valick Активный пользователь

    С нами с:
    12 авг 2018
    Сообщения:
    1.911
    Симпатии:
    328
    Код (Text):
    1. SELECT * FROM shiny WHERE <множественный фильтр>
     
    #2 Valick, 11 июл 2019
  3. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    Для начал добавить всем селектам name.
    HTML:
    1. <select id="width" name="width">
    Потом в main.php проверять есть ли что то в этих name и писать условие.
    PHP:
    1. if(isset($_POST['width'])){
    2. // всяческие проверки что пришло;
    3. $width = //если все хорошо, передача это в переменную
    4. }
    5. // в итоге если есть что фильтровать пишем
    6. $sql="SELECT * FROM shiny WHERE width = '$width'";
    7. //если нечего фильтровать
    8. $sql="SELECT * FROM shiny";
    9. $result = mysqli_query($conn, $sql);
     
    #3 Artur_hopf, 11 июл 2019
  4. Macan

    Macan Активный пользователь

    С нами с:
    11 июл 2019
    Сообщения:
    29
    Симпатии:
    0
    Спасибо,попробую.
    Вот сайт http://ves-shiny.ru но там неправильно работают чек-боксы, и схема вывода другая(ошибся немного).
     
    #4 Macan, 11 июл 2019
  5. Macan

    Macan Активный пользователь

    С нами с:
    11 июл 2019
    Сообщения:
    29
    Симпатии:
    0
    Что-то ничего не происходит. И ошибок нет.
     
    #5 Macan, 11 июл 2019
  6. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    кнопка выбрать должна быть в форме. Так примерно должно быть:
    HTML:
    1. <form method="post">
    2.    <p><select name="hero">
    3.     <option disabled>Выберите героя</option>
    4.     <option value="Чебурашка">Чебурашка</option>
    5.     <option value="Крокодил Гена">Крокодил Гена</option>
    6.     <option value="Шапокляк">Шапокляк</option>
    7.     <option value="Крыса Лариса">Крыса Лариса</option>
    8.    </select></p>
    9.    <p><input type="submit" value="Отправить"></p>
    10.   </form>
     
    #6 Artur_hopf, 11 июл 2019
  7. yanuzay

    yanuzay Активный пользователь

    С нами с:
    28 мар 2018
    Сообщения:
    498
    Симпатии:
    57
    Sql инъекция в main.php?
     
    #7 yanuzay, 11 июл 2019
  8. Macan

    Macan Активный пользователь

    С нами с:
    11 июл 2019
    Сообщения:
    29
    Симпатии:
    0
    У м
    У меня кнопка выбора работает просто как
    Код (Javascript):
    1. $('.button-left').click (function() {
    2.             $('.carts').show();
     
    #8 Macan, 11 июл 2019
  9. yanuzay

    yanuzay Активный пользователь

    С нами с:
    28 мар 2018
    Сообщения:
    498
    Симпатии:
    57
    Ну js тогда должен отправить ajax запрос php скрипту
     
    #9 yanuzay, 11 июл 2019
  10. Macan

    Macan Активный пользователь

    С нами с:
    11 июл 2019
    Сообщения:
    29
    Симпатии:
    0
    Там вообще index.html, вывод через json parse.
    --- Добавлено ---
    Как это можно реализовать?
     
    #10 Macan, 11 июл 2019
  11. yanuzay

    yanuzay Активный пользователь

    С нами с:
    28 мар 2018
    Сообщения:
    498
    Симпатии:
    57
    А сорри, это @Artur_hopf накидал схематичный код с инъекцией.

    Вообще ajax запрос необязательно делать, тогда добавь input type submit , как пишет @Artur_hopf .
    Без нажатия на кнопку форма не отправится.
     
    #11 yanuzay, 11 июл 2019
  12. Macan

    Macan Активный пользователь

    С нами с:
    11 июл 2019
    Сообщения:
    29
    Симпатии:
    0
    Что-то типа такого ?
    Код (Javascript):
    1. $.ajax({
    2.                 url: 'index.php',
    3.                     data: filter.serialize(),
    4.                 type: 'POST',
    5.                 success: function(responseHtml){
    6.                     $('.carts').html(responseHtml);
    --- Добавлено ---
    Эти селекты и чек-боксы просто как фильтр работают,не надо ни каких форм отправлять.
     
    #12 Macan, 11 июл 2019
  13. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    @yanuzay какие еще инъекции =)
    PHP:
    1. if(isset($_POST['width'])){
    2. // всяческие проверки что пришло;
     
    #13 Artur_hopf, 11 июл 2019
  14. yanuzay

    yanuzay Активный пользователь

    С нами с:
    28 мар 2018
    Сообщения:
    498
    Симпатии:
    57
    Sql инъекции
     
    #14 yanuzay, 11 июл 2019
  15. Macan

    Macan Активный пользователь

    С нами с:
    11 июл 2019
    Сообщения:
    29
    Симпатии:
    0
    Ничего.
    PHP:
    1. if(isset($_POST['brend'])){
    2.             echo 'hello';
    3.             $brend = $br;
    4.         }
    5.         $sql="SELECT * FROM shiny WHERE brend = '$brend'";
    6.         $result = mysqli_query($conn, $sql);
     
    #15 Macan, 11 июл 2019
  16. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    HTML:
    3.     <span>Производитель</span>
    4.     <select id="brend">
    5.         <option disabled="" selected="">Все</option>
    6.         <option value="Continental">Continental</option>
    7.         <option value="Dunlop">Dunlop</option>
    8.         <option value="Firestone">Firestone</option>
    9.         <option value="Formula">Formula</option>
    10.         <option value="GeneralTire">GeneralTire</option>
    11.         <option value="Gislaved">Gislaved</option>
    12.         <option value="Goform">Goform</option>
    13.         <option value="Goodrich">Goodrich</option>
    14.         <option value="GoodYear">GoodYear</option>
    15.         <option value="Hankook">Hankook</option>
    16.         <option value="Headway">Headway</option>
    17.         <option value="Horizon">Horizon</option>
    18.         <option value="Kama">Kama</option>
    19.         <option value="Kumho">Kumho</option>
    20.         <option value="Laufenn">Laufenn</option>
    21.         <option value="Matador">Matador</option>
    22.         <option value="Maxxis">Maxxis</option>
    23.         <option value="Michelin">Michelin</option>
    24.         <option value="Nitto">Nitto</option>
    25.         <option value="Nokian">Nokian</option>
    26.         <option value="Pirelli">Pirelli</option>
    27.         <option value="Sailun">Sailun</option>
    28.         <option value="Sava">Sava</option>
    29.         <option value="Tigar">Tigar</option>
    30.         <option value="ToyoTires">ToyoTires</option>
    31.         <option value="Viatti">Viatti</option>
    32.         <option value="Yokohama">Yokohama</option>
    33.                
    34.     </select>
    36.  
    38.     <span>Ширина</span>
    39.     <select id="width">
    40.         <option disabled="" selected="">Все</option>
    41.         <option value="115">115</option>
    42.         <option value="125">125</option>
    43.         <option value="135">135</option>
    44.         <option value="145">145</option>
    45.         <option value="155">155</option>
    46.         <option value="165">165</option>
    47.         <option value="175">175</option>
    48.         <option value="185">185</option>
    49.         <option value="195">195</option>
    50.         <option value="205">205</option>
    51.         <option value="215">215</option>
    52.         <option value="225">225</option>
    53.         <option value="235">235</option>
    54.         <option value="245">245</option>
    55.         <option value="255">255</option>
    56.         <option value="265">265</option>
    57.         <option value="275">275</option>
    58.         <option value="285">285</option>
    59.         <option value="295">295</option>
    60.         <option value="305">305</option>
    61.         <option value="315">315</option>
    62.         <option value="325">325</option>
    63.         <option value="335">335</option>
    64.         <option value="345">345</option>
    65.        
    66.     </select>
    68.  
    70.     <span>Высота</span>
    71.     <select id="height">
    72.         <option disabled="" selected="">Все</option>
    73.         <option value="25">25</option>
    74.         <option value="27">27</option>
    75.         <option value="29">29</option>
    76.         <option value="30">30</option>
    77.         <option value="31">31</option>
    78.         <option value="32">32</option>
    79.         <option value="33">33</option>
    80.         <option value="34">34</option>
    81.         <option value="35">35</option>
    82.         <option value="36">36</option>
    83.         <option value="37">37</option>
    84.         <option value="38.5">38.5</option>
    85.         <option value="40">40</option>
    86.         <option value="42">42</option>
    87.         <option value="45">45</option>
    88.         <option value="50">50</option>
    89.         <option value="55">55</option>
    90.         <option value="60">60</option>
    91.         <option value="65">65</option>
    92.         <option value="70">70</option>
    93.         <option value="75">75</option>
    94.         <option value="80">80</option>
    95.         <option value="82">82</option>
    96.         <option value="85">85</option>
    97.         <option value="90">90</option>
    98.  
    99.     </select>
    101.  
    103.     <span>Диаметр</span>
    104.     <select id="diametr">
    105.         <option disabled="" selected="">Все</option>
    106.         <option value="12">12</option>
    107.         <option value="12C">12C</option>
    108.         <option value="13">13</option>
    109.         <option value="13C">13C</option>
    110.         <option value="14">14</option>
    111.         <option value="14C">14C</option>
    112.         <option value="15">15</option>
    113.         <option value="15C">15C</option>
    114.         <option value="16">16</option>
    115.         <option value="16C">16C</option>
    116.         <option value="17">17</option>
    117.         <option value="17C">17C</option>
    118.         <option value="18">18</option>
    119.         <option value="18C">18C</option>
    120.         <option value="19">19</option>
    121.         <option value="20">20</option>
    122.         <option value="21">21</option>
    123.         <option value="22">22</option>
    124.         <option value="23">23</option>
    125.  
    126.     </select>
    128. </form>
    129. <button class="button-left" id="post" style="cursor: pointer;">Выбрать</button>
    131. var form = document.querySelectorAll('form select'),
    132.     post = document.getElementById('post');
    133.     formData = new FormData();
    134.  
    135. [].forEach.call(form, function(item){
    136.     item.addEventListener("input", function(){
    137.         var id = this.getAttribute("id"),
    138.             val = this.value;
    139.         formData.append(id, val);
    140.         console.log(id);
    141.     })
    142. });
    143.  
    144. post.onclick = function(){
    145.     formAjax('test.php', formData, function(data){
    146.         console.log(data);
    147.     });
    148. }
    149.  
    150. function formAjax(url, form, success) {
    151.  
    152.     var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    153.     xhr.open('POST', url);
    154.     xhr.onreadystatechange = function() {
    155.         if (xhr.readyState>3 && xhr.status==200) { success(xhr.responseText); }
    156.         if (xhr.status==500) { console.log(xhr.responseText); }
    157.     };
    158.     xhr.send(form);
    159.     return xhr;
    160. }
    test.php
    PHP:
    1. <?php
    2. if(count($_POST) > 0){
    3.     print_r($_POST);
    4. }
    5. ?>
     
    #16 Artur_hopf, 11 июл 2019
  17. Macan

    Macan Активный пользователь

    С нами с:
    11 июл 2019
    Сообщения:
    29
    Симпатии:
    0
    Uncaught TypeError: Cannot set property 'onclick' of null
     
    #17 Macan, 11 июл 2019
  18. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    ид прописали на кнопку?
    HTML:
    1. <button class="button-left" id="post" style="cursor: pointer;">Выбрать</button>
     
    #18 Artur_hopf, 11 июл 2019
  19. Macan

    Macan Активный пользователь

    С нами с:
    11 июл 2019
    Сообщения:
    29
    Симпатии:
    0
    Да, вот только дошло.Теперь ошибки нет.
    --- Добавлено ---
    Сейчас все console.log отрабатывают, кроме чек-боксов.
     
    #19 Macan, 11 июл 2019
  20. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    Их там нет потому что))
     
    #20 Artur_hopf, 11 июл 2019
  21. Macan

    Macan Активный пользователь

    С нами с:
    11 июл 2019
    Сообщения:
    29
    Симпатии:
    0
    После нажатия на кнопку - пустота.
     
    #21 Macan, 11 июл 2019
  22. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    Добавили в свой код и не работает теперь?)
     
    #22 Artur_hopf, 11 июл 2019
  23. Macan

    Macan Активный пользователь

    С нами с:
    11 июл 2019
    Сообщения:
    29
    Симпатии:
    0
    Да так и есть, я работаю с черновым вариантом сайта на Open Server.
     
    #23 Macan, 11 июл 2019
  24. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    Наймите лучше кого нибудь, за вас делать не хочется. Хороший вам пример показал
     
    #24 Artur_hopf, 11 июл 2019
  25. Macan

    Macan Активный пользователь

    С нами с:
    11 июл 2019
    Сообщения:
    29
    Симпатии:
    0
    PHP:
    1. $result = mysqli_query($conn, 'SELECT * FROM shiny');
    2.     for($i = 0;$i < mysqli_num_rows($result); $i++) {
    3.         $shiny[] = mysqli_fetch_array($result);
    4.     }
    5.         if(count($_POST) > 0){
    6.             print_r($_POST);
    7.     }
    8.     return $shiny;
    А вот теперь работает.
    --- Добавлено ---
    В консоли приходит Array.
    --- Добавлено ---
    Я тупанул не туда вставил.
    PHP:
    1. if(count($_POST) > 0){
    2.             print_r($_POST);
     
    #25 Macan, 11 июл 2019
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)
Страница 1 из 2