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

Question

I have a form in my website that's used to insert documents (has different privileges -Admin/User- ).

This form includes a drop-down list, the problem is that it needs to be edited by the admin to make more or less items in the drop down list.

This edit shouldn't be a code edit (which is absolutely easy) but a form that allows the admin to add elements to drop-down list I searched around and I didn't find an answer , I wish you could help me with this !

<?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>

Answer 1

Overview:

1. You need to store the list of desired fields somewhere. You cannot store them in LocalStorage or in cookies - those would be stored locally on the admin's computer (so how would a user see those changes?). You need a central location: the webserver. This gives you two choices: (a) a file on the webserver, or in a MySQL (now called MariaDB) database table. I suggest (b).

2. In order to read/write to a file on the webserver -- or to add/delete/read from a database on the webserver -- you need to write some server-side code. MOST webservers have PHP available as a back-end language, but Microsoft servers use ASP .Net. There is now also the choice to install/use node.js (if you want to use javascript as your back-end server language). As mentioned, PHP is hugely popular and there are somewhere around a gazillion blog and YouTube tutorials showing how to do this.

3. Using PHP as the example, you will rename your index.html to index.php - just do that. Nothing that currently exists will be affected - but now you can embed sections of PHP code and the server will run that code before rendering/displaying the HTML. (Note that nothing else changes when you rename the file extension. Provided you are on an apache web server - and most are - you need never use the .html extension ever again. Try it.)

4. Your index.php will now begin with a snippet of PHP code that tells it to (a) login to the database, (b) read that value from the table, (c) store the value in a variable. It is now patently easy to schlep that data into the HTML as the page is being rendered.

5. You will need a page that only the admin can access. Again, using a back-end language will allow your admin page (HTML) to request a username and password, and then run some back-end code to check the info stored on the webserver (again, either in a file or in a database table), to see if the username/password is correct.

6. Your admin page, after logging in, will:

   • As in step (4) above, read the database table to get the current settings for user-level choices for the drop-down, then display those choices on the screen. You will also need a method of adding new options for the drop down, and a button to signify that the changes are done. Once pressed, the page will send that data back to the webserver to store back in the table, over-writing what was there before.

   • There are two ways to send data from an HTML page to the webserver: (a) <form></form> and (b) AJAX. By all means, use AJAX - forms are more restricted, way less elegant, and require that the page is refreshed or changed. Forms are 1999, AJAX is 2019.

   • AJAX, written in javascript/jQuery, lets you (a) detect a button click; (b) collect the data from the input fields; (c) send that data to a PHP file on the webserver; (d) receive a message (from the webserver, after it has finished adding the data to the table) back on the HTML side; (e) update the page smoothly and without refreshing anything. With AJAX, you (as the developer) retain complete control from beginning to end, comme il faut.

There are gazillions of YouTube and blog tutorials on how to do all of this in PHP and jQuery. Enjoy!

Here's are a couple:

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

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