HTML HTML - Métodos de salvar, listar, excluir e editar

[Ana21s]

Gente, se vocês poderem me explicar esses métodos de criar, editar, excluir e listar eu agradeceria muito, pois não quero pegar nada pronto, quero de fato aprender

 

SALVAR

Por exemplo nesse método de salvar, eu até entendo que por exemplo o "nome" acaba sendo o nome da variável né isso?

<p>Preencha os campos para realizar um cadastro</p>

                <div class="panel panel-default" style="margin: 10px">
                    <div class="panel-heading">
                        <h1 class="panel-title">Cadastrar Contato</h1>
                    </div>

                    <form class="form-row" action="#"
                        th:action="@{/contatos/cadastrar}" th:object="${contato}"
                        method="post" style="margin: 20px 10px">
                        <div class="panel-body">
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="inputNome">Nome</label> <input type="text"
                                        class="form-control" id="nome" name="nome" th:field="*{nome}"
                                        required>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="inputEmail">E-mail</label> <input type="text"
                                        class="form-control" id="email" name="email"
                                        th:field="*{email}" required>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="inputSenha">Phone</label> <input type="phone"
                                        class="form-control" id="phone" name="phone"
                                        th:field="*{phone}" required>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary">Cadastrar</button>
                            <a th:href="@{/}" class="btn btn-default">Cancelar</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

 

EDITAR

No de editar, eu fico na dúvida se no caso o nome tem que ser igual está no banco de dados, é isso? correspondentes no caso as variáveis também?

<form class="form-row" action="#"
        th:action="@{/contatos/update/{id}(id=${contato.id})}"
        th:object="${contato}" method="post" style="margin: 20px 10px">
        <div class="panel-body">
            <div class="form-row">
                <div class="form-group col-md-4">
                    <label for="inputId">ID</label> <input type="text"
                        class="form-control" th:field="*{id}" readonly>
                </div>
                <div class="form-group col-md-4">
                    <label for="inputNome">Nome</label> <input type="text"
                        class="form-control" id="nome" name="nome" th:field="*{nome}"
                        required>
                </div>
                <div class="form-group col-md-4">
                    <label for="inputEmail">Email</label> <input type="text"
                        class="form-control" id="email" name="email" th:field="*{email}"
                        required>
                </div>
                <div class="form-group col-md-4">
                    <label for="inputSenha">Phone</label> <input
                        class="form-control" id="phone" name="phone" th:field="*{phone}"
                        required>
                </div>
            </div>

            <button type="submit" class="btn btn-primary">Cadastrar</button>
            <a th:href="@{/}" class="btn btn-default">Cancelar</a>
        </div>
    </form>

 

LISTAR

Em listar eu não entendi muito bem a relação, o contato seria no caso a variável puxando os dados do mysql e contatos seria o que exatamente?

 

<h1>Lista de Contatos Cadastrados</h1>
    <table>
        <thead>
            <tr>
                th>Id</th>
                <th>Email</th>
                <th>Nome</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="contato : ${contatos}">
                <td th:text="${contato.id}"></td>
                <td th:text="${contato.email}"></td>
                <td th:text="${contato.nome}"></td>
                <td th:text="${contato.phone}"></td>
                <td><a th:href="@{/contatos/editar/{id}(id=${contato.id})}">Editar</a></td>
                <td><a th:href="@{/contatos/{id}(id=${contato.id})}">Excluir</a></td>
            </tr>
        </tbody>
    </table>

 

[DiF]

@Ana21s Por qual framework você está desenvolvendo isso?

Basicamente as ações de um CRUD  (create, read, update, delete) precisam de uma linguagem de programação server-side. como o php por exemplo.

Não dá para fazer somente com html