PHP + Bootstrap Modal + Mysql+JSを使用したCRUDの作成

私はあなたが今持っているものを見る。コードを追加していただきありがとうございます。私は最初にデザインに焦点を合わせます。ある種のCRUD（Create Retrieve Update Delete）システムが必要なようです。その場合、私が行うことは、最初の送信フォームを（あなたが持っているもののように）一番上に置き、モーダルを使用してアラートメッセージと編集フォームを表示することです。

デザインは次のようになります：

+-------------------------------------+
| Submit Form                         |
| - input                             |
| - input                             |
+-------------------------------------+
| List showing DB info                |
| - result 1 (with Edit/Delete links) |
| - result 2 (with Edit/Delete links) |
| ...                                 |
+-------------------------------------+

ページの読み込み時に、JS関数を実行します。これを update_list（）と呼ぶことができます。、AJAXを使用してすべてのデータベース情報をフェッチし、リストコンテナで解析します。

次に、委任しますクリックイベントを編集/削除して、目的のAJAX呼び出しを呼び出します。

 
 この設計構造は、関数内のすべてを分離し、AJAXを使用してPHPスクリプトを呼び出すことに注意してください。データはJSON経由で送信されます。
 
 これで、送信フォームを送信すると、AJAXを使用してPOSTリクエストがPHPに送信され、送信されると、JSはBootstrapのモーダルを使用してメッセージを表示します。
 
 編集リンクをクリックすると、JSは再びブートストラップモーダルを開いて編集フォームを表示します。
 
 そうは言っても、これが私がそれを行う方法です：
 <html>
    <title>Modal</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <style>
            #wrapper {
                padding: 10px;
            }

            .modal-header, h4, .close {
                background-color: #5cb85c;
                color: white !important;
                text-align: center;
                font-size: 30px;
            }

            .modal-footer {
                background-color: #f9f9f9;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <form id="submit_form" role="form" style="width: 300px;">
                <div class="form-group">
                    <label for="pais">Pais:</label>
                    <?php
                    $array_pais = array('Selecione...', 'Alemanha', 'Angola', 'Argentina', 'Bolívia', 'Brasil', 'Camarões', 'Canadá', 'Chile', 'China', 'Colombia',
                        'Costa Rica', 'Cuba', 'Dinamarca', 'Equador', 'Espanha', 'Estados Unidos', 'França', 'Holanda', 'Inglaterra', 'Itália', 'Japão',
                        'México', 'Nigéria', 'Panamá', 'Paraguai', 'Peru', 'Porto Rico', 'Portugal', 'Rússia', 'Senegal', 'Taiwan', 'Uruguai', 'Venezuela'
                    );
                    echo '<select class="form-control" name="pais" id="pais">';
                    foreach ($array_pais as $valor) {
                        echo '<option>' . $valor . '</option>';
                    }
                    echo '</select>';
                    ?>
                </div>
                <div class="form-group">
                    <label for="nome">Nome:</label>
                    <input class="form-control" name="nome" type="text" id="nome" size="50">
                </div>
                <div class="form-group">
                    <label for="empresa">Empresa:</label>
                    <input class="form-control" name="empresa" type="text" id="empresa" size="50" style="text-transform:uppercase;">
                </div>
                <input type="submit" name="Submit" class="btn btn-success btn-lg" value="+">
            </form>


            <table id="list" class="table">
                <thead align="center">
                    <tr bgcolor="#B0E2FF">
                        <th>PAÍS</th>
                        <th>NOME</th>
                        <th>EMPRESA</th>
                        <th>AÇÕES</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

            <div class="modals_container">
                <div class="modal fade" id="message_modal" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Message</h4>
                            </div>
                            <div class="modal-body"></div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="edit_modal" role="dialog">
                    <div class="modal-dialog">
                        <form id="edit_form" class="form">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title">Edit</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group">
                                        Country: <input id="country_input" type="text" name="country">
                                    </div>
                                    <div class="form-group">
                                        Nome: <input id="username_input" type="text" name="username">
                                    </div>
                                    <div class="form-group">
                                        Company: <input id="company_input" type="text" name="company">
                                    </div>
                                    <input id="id_input" type="hidden" name="id">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-default">submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script>
            function update_list() {
                $.getJSON("get_list.php", function (data) {

                    if (data.response) {
                        $("#list").find("tbody").empty();
                        data.results.forEach(function (i) {
                            console.log(i);
                            $("#list").find("tbody").append(
                                "<tr>" +
                                "<td>" + i.country + "</td>" +
                                "<td>" + i.username + "</td>" +
                                "<td>" + i.company + "</td>" +
                                "<td><a class='edit_link' href='" + JSON.stringify(i) + "'>edit</a> | <a class='delete_link' href='" + i.id + "'>delete</a></td>" +
                                "</tr>"
                            );
                        });
                    }

                });
            }
            update_list();
            $('#submit_form').submit(function () {
                $.ajax({
                    url: "main.php",
                    type: "POST",
                    data: $(this).serialize(),
                    dataType: "json",
                    success: function (data) {
                        if (data.response) {
                            var $modal = $('#message_modal');
                            $modal.find(".modal-body").html(data.message);
                            $modal.modal('show');
                            update_list();
                        } else {
                            alert(data.message);
                        }
                    }
                });
                return false;
            });

            $("#list").delegate('.edit_link', 'click', function (e) {
                e.preventDefault();
                var info = JSON.parse($(this).attr("href"));
                var $modal = $("#edit_modal");
                $modal.find("#country_input").val(info.country);
                $modal.find("#company_input").val(info.company);
                $modal.find("#username_input").val(info.username);
                $modal.find("#id_input").val(info.id);
                $modal.modal('show');
            });

            $('#edit_form').submit(function () {
                $.ajax({
                    url: "edit.php",
                    type: "POST",
                    data: $(this).serialize(),
                    dataType: "json",
                    success: function (data) {
                        if (data.response) {
                            var $modal = $('#message_modal');
                            $("#edit_modal").modal('hide');
                            $modal.find(".modal-body").html(data.message);
                            $modal.modal('show');
                            update_list();
                        } else {
                            alert(data.message);
                        }
                    }
                });
                return false;
            });
        </script>
    </body>
</html>
 
 edit.phpは次のようになります：
 $con = mysqli_connect("localhost", "root", "", "test");

// Check connection
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$id = $_POST['id'];
$nome = $_POST['username'];
$company = $_POST['company'];
$country = $_POST['country'];


$query = "UPDATE table SET username = '$nome', company = '$company', country= '$country' WHERE id = $id ";

if (mysqli_query($con, $query)) {
    $res['response'] = true;
    $res['message'] = "Record has been updated";
} else {
    $res['response'] = false;
    $res['message'] = "Error: " . $query . "<br>" . mysqli_error($con);
}

echo json_encode($res);
 
 これを試してみて、あなたの考えを教えてください。