3

Estou estudando PHP e SQL e estou construindo um sistema para que minha mãe consiga gerenciar melhor todos os clientes que utilizam o serviço de transporte que ela presta.

Construí uma página de registro simples com as informações necessárias, e gostaria de fazer uma atualização nela para adicionar telefones de contatos de forma dinâmica.

Por exemplo, ao menos um telefone de contato é obrigatório, portanto, um campo aparecerá por padrão, mas o meu problema está em adicionar mais telefones através do mesmo formulário, pois gostaria de colocar um botão de "+" para adicionar outro campo e registrar isso no banco de dados juntamente com os dados inseridos anteriormente, sem precisar criar uma página para cadastrar telefones a um usuário específico, um de cada vez.

Eu imagino que isso demande o uso de JS, porém eu realmente não faço de ideia de como começar a implementar na página de cadastro. Não consigo imaginar como ficaria o SQL e o PHP.

Para ter certeza de que eu não esqueci nenhuma parte do código, estarei disponibilizando todos os arquivos do projeto, está tudo muito simples, por conter somente o sistema de cadastro até o momento. MEGA

Enfim, desde já, deixo meu agradecimento aos que me ajudarem.

3
  • 2
    Poste seu código atual que está salvando apenas um telefone no caso.
    – Laerte
    Commented 1/02/2016 às 16:52
  • 2
    Bem vindo ao SOPT. Teria como editar seu post e acrescentar o código que esta utilizando, assim podemos analisar e sugerir uma alteração. Obrigado.
    – David
    Commented 1/02/2016 às 16:54
  • Atualizei o post. Decidi adicionar todo o projeto para ter certeza de que eu não estou esquecendo nenhum trecho. Estou fazendo isso principalmente por ter me afastado do projeto por pouco mais de um mês.
    – Filipe
    Commented 1/02/2016 às 18:02

1 Resposta 1

1

Bom fiz um exemplo rápido (melhor que completar seu código e você não entender).

Tenho uma tabela telefone com id, nome e telefone:

--
-- Database: `sistema`
--
CREATE DATABASE IF NOT EXISTS `sistema`;
USE `sistema`;

--
-- Estrutura da tabela `telefone`
--

CREATE TABLE IF NOT EXISTS `telefone` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nome` varchar(255) NOT NULL,
  `telefone` varchar(15) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--
-- Extraindo dados da tabela `telefone`
--

INSERT INTO `telefone` (`id`, `nome`, `telefone`) VALUES
(1, 'Stack', '1111111111111'),
(2, 'Over', '22222222222222'),
(3, 'Flow', '333333333');

Monto minha página de cadastro (usei jquery e bootstrap):

<?php
require_once 'minpdo.php'; //importo minha biblioteca de crud
require_once 'telefone.php'; //php com definições do meu banco e tabela

$mnpdo = new MinPDO();
try {
    $telefones = $mnpdo->consult("telefone", "*"); // consulta todos telefones
} catch (MinPDOException $ex) { //caso haja erro
    echo <<<ERRO
    <div class="text-center text-danger">
    {$ex->getMessage()}
    </div>
ERRO;
}


?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Cadastro dinâmico</title>

        <link rel="stylesheet" href="bootstrap.css" />
    </head>
    <body>
        <table class="table table-hover" id="telefones">
            <tr class="text-primary">
                <td colspan="2">
                    <strong>Nome</strong>
                </td>
                <td>
                    <strong>Telefone</strong>
                </td>
            </tr>

        <?php 
        if(!empty($telefones)) { // se tiver telefones
            for($i = 0; $i < count($telefones); $i ++) { //exibe todos
                echo <<<ITEM
            <tr>
                <td colspan="2">
                    <p>{$telefones[$i]['nome']}</p>
                </td>
                <td>
                    <p>{$telefones[$i]['telefone']}</p>
                </td>
            </tr>
ITEM;
            }
        }
        ?>
        </table>
        <table class="table table-striped">
            <tr class="text-center">
                <td>
                    <br>
                    <div class="form-group">
                        <label>Nome:</label>
                        <input name="nome" class="form-control" id="nome" type="text" />
                    </div>
                </td>
                <td>
                    <br>
                    <div class="form-group">
                        <label>Telefone:</label>
                        <input name="telefone" maxlength="15" class="form-control" id="telefone" type="tel" />
                    </div>
                </td>
                <td>
                    <br>
                    <div class="form-group">
                        <label style="opacity: 0;">...</label>
                        <input class="btn btn-primary form-control envia" value="+" type="submit" />
                    </div>
                </td>
            </tr>
        </table>
        <script src="jquery.js"></script>

        <script>
        $(function(){
            $(".envia").click(function() {
                if( $('#nome').val() != "" && $('#telefone').val() ) { //se ambos tiverem com conteudo
                    $.ajax({
                        type: "POST", //tipo de registro
                        url: "cadastra.php", //pagina de cadastro
                        data: { //envia nome e telefone
                            nome : $("#nome").val(),
                            telefone : $("#telefone").val()
                        } ,
                        success: function(retorno) {
                            if(retorno == "fail") {
                                //falha
                            } else {
                                $("table#telefones tr:last").after(retorno); //exibe novo registro
                            }
                        }
                    });
                }
            });
        });
        </script>
    </body>

</html>

A parte mais importante aí é o script, note o uso do Ajax, é ele que permite fazer esse cadastro dinâmico, nele informo o método, a página onde irei tratar meus dados, os dados e também quando der sucesso etc.

Meu INSERT com a página cadastra.php

<?php
require_once 'minpdo.php';
require_once 'telefone.php';

$mnpdo = new MinPDO();
if(isset($_POST['nome']) and isset($_POST['telefone'])) {
    try { //tenta inserir e dar echo (retorno do ajax) de uma linha da tabela
        $mnpdo->insert("telefone",
            array("nome", "telefone"),
            array($_POST['nome'], $_POST['telefone']) );

        echo <<<ITEM
            <tr>
                <td colspan="2">
                    <p>{$_POST['nome']}</p>
                </td>
                <td>
                    <p>{$_POST['telefone']}</p>
                </td>
            </tr>
ITEM;
    } catch (MinPDOException $ex) {
        echo "fail"; // falha do bd
    }
} else {
    echo "fail"; // não tem dados
}

Note que esse é a página que faz o insert, então é ela quem cito no ajax. Caso dê tudo certo ela retornará para o ajax o linha de tabela para meu novo registro, caso não, ela retorna uma mensagem "fail"


O exemplo pode ser baixado nesse link do MEGA, para testar, rode o arquivo sistema.sql no seu gerenciador de dados, e entre no index.php. O arquivo minpdo.php é uma classe que fiz de CRUD para auxiliar meus projetos, caso tenho interesse nesse link do GitHub há o tutorial de como usa-la.

4
  • Na verdade o que eu estava tentando dizer, é que eu gostaria de adicionar mais campos para colocar números telefônicos, no mesmo formulário, ao pressionar um botão. Por exemplo: Meu formulário é o seguinte: (NOME) (SOBRENOME) (TELEFONE) [ADICIONAR TELEFONE] Ao pressionar o botão "Adicionar telefone", o formulário irá assumir a seguinte forma: (NOME) (SOBRENOME) (TELEFONE)(TELEFONE) [ADICIONAR TELEFONE] Era isso que eu estava tentando dizer, para mim a explicação estava boa, mas acho que possa ter ficado meio confusa.
    – Filipe
    Commented 2/02/2016 às 0:23
  • Ê particamente a mesmo cousa, so ocultar esse campo de colocar um nobo e colocar pra mostrar ele apenas quando o usuario apertar no botão
    – Leonardo
    Commented 2/02/2016 às 0:30
  • Certo, vou tentar. Desde já obrigado pela ajuda e pelo tempo.
    – Filipe
    Commented 2/02/2016 às 0:38
  • Completei o exemplo fazendo com que ele faça isso que você quer e também tenha ação de apagar e editar. Download: mega.nz/#!NtQC2T6A!JAkc10JfrBbcA0HCNytn3hTvkfHgAxVBqCAeDZaHe8A
    – Leonardo
    Commented 2/02/2016 às 2:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .