如何创建管理页面以 add/remove 元素添加到下拉列表?

How to create an admin page to add/remove elements to a drop-down list?

我的网站上有一个用于插入文档的表单(具有不同的权限 -Admin/User- )。

这个表单包含一个下拉列表,问题是需要管理员编辑它来增加或减少下拉列表中的项目。

这次编辑不应该是代码编辑(这绝对容易) 但是允许管理员将元素添加到下拉列表的表单 我四处搜索但没有找到答案,希望你能帮我解决这个问题!

<?php
require_once("identification.php");
require_once('connexionDB.php');
$nom            = isset($_POST['nom']) ? $_POST['nom'] : "";
$pole           = isset($_POST['pole']) ? $_POST['pole'] : "";
$valideur       = isset($_POST['valideur']) ? $_POST['valideur'] : "";
$perimetre      = isset($_POST['perimetre']) ? $_POST['perimetre'] : "";
$direction      = isset($_POST['direction']) ? $_POST['direction'] : "";
$activite       = isset($_POST['activite']) ? $_POST['activite'] : "";
$version        = isset($_POST['version']) ? $_POST['version'] : "";
$type_doc       = isset($_POST['type_doc']) ? $_POST['type_doc'] : "";
$description    = isset($_POST['description']) ? $_POST['description'] : "";
$zone           = isset($_POST['zone']) ? $_POST['zone'] : "";
$langue         = isset($_POST['langue']) ? $_POST['langue'] : "";
$date           = isset($_POST['date']) ? $_POST['date'] : "";
$comm_sur_modif = isset($_POST['comm_sur_modif']) ? $_POST['comm_sur_modif'] : "";
$commentaire    = isset($_POST['commentaire']) ? $_POST['commentaire'] : "";
$auteur         = $_SESSION["fati"];

if (isset($_FILES['document']) and !empty($_FILES['document']['name'])) {
    $taillemax        = 4221225472;
    $extensionvalides = ['pdf', 'docx'];
    if ($_FILES['document']['size'] <= $taillemax) {
        $extensionUpload = strtolower(substr(strrchr($_FILES['document']['name'], '.'), 1));
        if (in_array($extensionUpload, $extensionvalides)) {
            $chemain = "doc/" . $nom . "." . $extensionUpload;

            $resultat = move_uploaded_file($_FILES['document']['tmp_name'], $chemain);

            if ($resultat) {
                $requete  = "insert into document(nom,direction,pole,activite,version,type_doc,description,zone,perimetre,langue,chemin,auteur,date,comm_sur_modif,commentaire) values(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)";
                $params   = [
                    $nom,
                    $direction,
                    $pole,
                    $activite,
                    $version,
                    $type_doc,
                    $description,
                    $zone,
                    $perimetre,
                    $langue,
                    "doc/" . $nom . "." . $extensionUpload,
                    $auteur,
                    $date,
                    $comm_sur_modif,
                    $commentaire,
                ];
                $resultat = $pdo->prepare($requete);
                $resultat->execute($params);
                header("location:documents.php");
            }
        }
    }
}

<div class="form-group">
    <label for="type_doc">type de document  </label>
    </br>
    <select name="type_doc" id="type_doc">
        <option value="NA">N/A</option>
        <option  value="guide_de_conception">guide de conception</option>
        <option  value="standard_rt">standard et RT</option>
        <option  value="methodologies">methodologies</option>
        <option  value="processus">processus</option>
        <option  value="retex_capitalisation">retex et  capitalisation</option>
        <option  value="normes_reglementations">normes reglementations</option>
        <option  value="cdc">CDC</option>
        <option  value="essais_plans_validation">essais et plans de validation</option>
    </select>
</div>

概览:

  1. 您需要将所需字段的列表存储在某处。您不能将它们存储在 LocalStorage 或 cookie 中 - 这些将存储在管理员计算机的本地 (那么用户将如何看到这些更改?)。您需要一个中心位置:网络服务器。这为您提供了两个选择:(a) 网络服务器上的文件,或 MySQL(现在称为 MariaDB)数据库 table 中的文件。我建议 (b).

  2. 为了 read/write 到网络服务器上的文件 - 或者从网络服务器上的数据库 add/delete/read - 你需要写一些 server-side 代码。大多数网络服务器都有 PHP 可用的 back-end 语言,但 Microsoft 服务器使用 ASP .Net。现在还可以选择 install/use node.js(如果您想使用 javascript 作为您的 back-end 服务器语言)。如前所述,PHP 非常受欢迎,并且有无数的博客和 YouTube 教程展示了如何做到这一点。

  3. 以 PHP 为例,您将 index.html 重命名为 index.php - 只需这样做即可。当前存在的任何内容都不会受到影响 - 但现在您可以嵌入 PHP 代码的部分,并且服务器将 运行 在 rendering/displaying 和 HTML 之前的代码。 (请注意,当您重命名文件扩展名时,其他任何内容都不会改变。如果您使用的是 apache 网络服务器 - 大多数情况下 - 您永远不需要再使用 .html 扩展名。试试吧。)

  4. 您的 index.php 现在将以一段 PHP 代码开始,告诉它 (a) 登录到数据库,(b) 从 table, (c) 将值存储在变量中。现在显然很容易在呈现页面时将该数据放入 HTML。

  5. 您需要一个只有管理员才能访问的页面。同样,使用 back-end 语言将允许您的管理页面 (HTML) 请求用户名和密码,然后 运行 一些 back-end 代码来检查存储在网络服务器(同样,在文件或数据库 table 中),查看 username/password 是否正确。

  6. 登录后您的管理页面将:

    • 如上面的步骤(4),读取数据库table获取drop-down的user级选择的当前设置,然后显示屏幕上的那些选择。您还需要一种为下拉列表添加新选项的方法,以及一个表示更改已完成的按钮。按下后,页面会将数据发送回网络服务器以存储回 table、over-writing 之前的内容。

    • 有两种方法可以将数据从 HTML 页面发送到网络服务器:(a) <form></form> 和 (b) AJAX。无论如何,使用 AJAX - 表单更受限制,更不优雅,并且需要刷新或更改页面。 表格是1999年,AJAX是2019年。

    • AJAX,写在 javascript/jQuery 中,让您 (a) 检测按钮点击; (b) 从输入字段收集数据; (c) 将该数据发送到网络服务器上的 PHP 文件; (d) 在 HTML 端接收一条消息(来自网络服务器,在它完成将数据添加到 table 之后); (e) 平滑地更新页面并且不刷新任何东西。使用 AJAX,您(作为开发人员)从头到尾保持完全控制,comme il faut

在 PHP 和 jQuery 中有大量关于如何完成所有这些操作的 YouTube 和博客教程。 尽情享受吧!

这里有一对:

https://www.youtube.com/watch?v=aujNp92p0Uc

https://www.youtube.com/watch?v=gvGb5Z0yMFY