php - 显示具有不同 SQL 语句建议的多个 PHP 表

Question

我正在做一个学校项目，我需要一些建议。这是一个 HTML/PHP/SQL 项目，用户可以在其中提供有关游戏体验的意见。作为管理员，您必须能够看到选择某些游戏类别的用户的姓名。这需要使用 PHP 和 MySQL 在表格中显示。

我现在已经完成了这个页面，它运行得非常棒，我可以看到所有用户的输入。但问题是我有大约 600 行代码，因为我有 12 个不同的带有 MySQL 语句和表的 div。

目前我的代码分为 3 部分，html 选择下拉菜单，12 个不同的 div 与生成表的查询，以及基于选择下拉列表显示/隐藏表的 jquery

我希望有人能给我一个关于如何缩短我的代码的建议，因为 600 行代码太疯狂了，我知道它可以更短，但我就是不知道如何缩短。

HTML 选择:

<select name="type" id="type" style="margin-left:57px; width:153px;">
        <option name="select" value="select">Selecteren..</option>
        <optgroup label="Hoe spelen mensen?">
            <option name="alleen" value="alleen">Meestal alleen</option>
            <option name="fysiek" value="fysiek">Meestal samen fysiek</option>
            <option name="online" value="online">Meestal samen online</option>
        </optgroup>
        <optgroup label="Categorieën bordspellen">
            <option name="alleen" value="kaartspellen">Kaartspellen</option>
            <option name="fysiek" value="strategische">Strategische bordspellen</option>
            <option name="online" value="fantasy">Fantasy bordspellen</option>
            <option name="online" value="klassiek">Klassieke gezelschapspellen</option>
        </optgroup>
         <optgroup label="Categorieën computergames">
            <option name="alleen" value="sport">Sport games</option>
            <option name="fysiek" value="adventure">Adventure games</option>
            <option name="online" value="war">War games</option>
            <option name="online" value="strategischegames">Strategische games</option>
        </optgroup>
        <optgroup label="Gebruikers">
            <option name="alle" value="alle">Alle gebruikers</option>
        </optgroup>

1 个带有表格的 div(例如，因为有 12 个不同的表格)

<div class="row" id="wargames">
<?php
$war = "SELECT * FROM form where categorie = 'wargames'";

$querywar = mysqli_query($conn, $war);

if (!$querywar) {
    die('SQL Error: ' . mysqli_error($conn));
}
?>
   <table class="data-table">
    <caption class="title">Deze mensen spelen meestal de categorie War 
    games</caption>
    <thead>
        <tr>
            <th>Naam</th>
            <th>Woonplaats</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
    <?php

while ($row = mysqli_fetch_array($querywar)) {
echo '<tr>

                <td style="text-align:center">' . $row['naam'] . '</td>
                <td style="text-align:center">' . $row['woonplaats'] . 
                 '</td>
                <td style="text-align:center">' . $row['email'] . '</td>
            </tr>';
}
?>
 </tbody>
</table>

我的jquery

$(function() {
$('#row_dim').hide(); 
$('#type').change(function(){
    if($('#type').val() == 'alleen') {
        $('#alleen').show(); 
    } else {
        $('#alleen').hide(); 
    } 
    if($('#type').val() == 'fysiek') {
        $('#fysiek').show(); 
    } else {
        $('#fysiek').hide(); 
    } 
    if($('#type').val() == 'online') {
        $('#online').show(); 
    } else {
        $('#online').hide(); 
    } 
    if($('#type').val() == 'kaartspellen') {
        $('#kaartspellen').show(); 
    } else {
        $('#kaartspellen').hide(); 
    } 
    if($('#type').val() == 'strategische') {
        $('#strategische').show(); 
    } else {
        $('#strategische').hide(); 
    }
    if($('#type').val() == 'fantasy') {
        $('#fantasy').show(); 
    } else {
        $('#fantasy').hide(); 
    }
    if($('#type').val() == 'klassiek') {
        $('#klassiek').show(); 
    } else {
        $('#klassiek').hide(); 
    }
    if($('#type').val() == 'sport') {
        $('#sportgames').show(); 
    } else {
        $('#sportgames').hide(); 
    }
     if($('#type').val() == 'adventure') {
        $('#adventure').show(); 
    } else {
        $('#adventure').hide(); 
    }
     if($('#type').val() == 'war') {
        $('#wargames').show(); 
    } else {
        $('#wargames').hide(); 
    }
    if($('#type').val() == 'strategischegames') {
        $('#strategischegames').show(); 
    } else {
        $('#strategischegames').hide(); 
    }
    if($('#type').val() == 'select') {
       $('#selected').show();
    } else {
        $('#selected').hide();
    }
    if($('#type').val() == 'alle') {
       $('#gebruikers').show();
    } else {
        $('#gebruikers').hide();
    }

});
 $( document ).ready(function() {
 if($("#type").attr("selectedIndex") !== 0) {
    $('#selected').show();
    $('#strategischegames').hide();
    $('#wargames').hide(); 
    $('#adventure').hide(); 
    $('#sportgames').hide(); 
    $('#klassiek').hide();
    $('#fantasy').hide(); 
    $('#strategische').hide(); 
    $('#kaartspellen').hide(); 
    $('#online').hide(); 
    $('#fysiek').hide(); 
    $('#alleen').hide(); 
    $('#gebruikers').hide(); 
}

});
});

Answer 1

有人认为要缩短的是 $('#type').change(...) 处理程序:

$('#type').change(function () {
    const map = {
        'alleen': 'alleen',
        'fysiek': 'fysiek',
        'online': 'online',
        'kaartspellen': 'kaartspellen',
        'strategische': 'strategische',
        'fantasy': 'fantasy',
        'klassiek': 'klassiek',
        'sport': 'sportgames',
        'adventure': 'adventure',
        'war': 'wargames',
        'strategischegames': 'strategischegames',
        'select': 'selected',
        'alle': '#gebruikers',
    };

    Object.keys(map).forEach(key => {
        if ($('#type').val() == key) {
            $('#' + map[key]).show();
        } else {
            $('#' + map[key]).hide();
        }
    });
});

如您所见，我以声明方式将值映射到 ID，然后循环处理所有这些值。

下一步将概括显示/隐藏功能:

function show(type) {
    const map = {
        'alleen': 'alleen',
        'fysiek': 'fysiek',
        'online': 'online',
        'kaartspellen': 'kaartspellen',
        'strategische': 'strategische',
        'fantasy': 'fantasy',
        'klassiek': 'klassiek',
        'sport': 'sportgames',
        'adventure': 'adventure',
        'war': 'wargames',
        'strategischegames': 'strategischegames',
        'select': 'selected',
        'alle': '#gebruikers',
    };

    Object.keys(map).forEach(key => {
        if (type == key) {
            $('#' + map[key]).show();
        } else {
            $('#' + map[key]).hide();
        }
    });
}

使用该函数，您的change 和ready 事件处理程序可以缩短如下:

$('#type').change(function () {
    show($('#type').val());
});

$(document).ready(function () {
    if ($("#type").attr("selectedIndex") !== 0) {
        show('select');
    }
});

关于 PHP 部分，我只看到一 block ，所以，我不知道与其他部分有什么共同之处，但作为一般规则:

1. 记下常见的事情
2. 注意差异，例如传递给相同代码段的不同值
3. 在共同事物之前将差异移动到变量
4. 现在您可以轻松地将一段代码转换为一个函数——只需使用 p.3 中的内容作为参数创建一个函数
5. 根据需要多次调用该函数，或者可能在循环中调用该函数——这正是我在答案顶部对您的 JS 代码所做的

当然，您的 HTML 尖叫着“从我这里提取数据结构并将其格式化为标签”。换句话说，将数据与表示分开，例如:

<?php
$data = [
    [
        'value'           => 'select',
        'text'            => 'Selecteren..',
        'childrenCaption' => 'Hoe spelen mensen?',
        'children'        => [
            'alleen' => 'Meestal alleen',
            'fysiek' => 'Meestal samen fysiek',
            'online' => 'Meestal samen online',
        ],
    ],
];

function formatOptions($data) {
    foreach ($data as $section) {
        echo "<option name=\"$section[value]\" value=\"$section[value]\">$section[text]</option>\n";
        echo "<optgroup label=\"$section[childrenCaption]\">\n";
        foreach ($section['children'] as $value => $text) {
            echo "    <option name=\"$value\" value=\"$value\">$text</option>\n";
        }
        echo "</optgroup>\n";
    }
}

formatOptions($data);

示例输出如下所示:

<option name="select" value="select">Selecteren..</option>
<optgroup label="Hoe spelen mensen?">
    <option name="alleen" value="alleen">Meestal alleen</option>
    <option name="fysiek" value="fysiek">Meestal samen fysiek</option>
    <option name="online" value="online">Meestal samen online</option>
</optgroup>

如您所见，修改 $data 变量比维护那么多 HTML 代码要容易得多。

还有更多的改进空间，但我想这是一个好的开始。