Olá! Quinta Feira, 28 de Agosto de 2008.



Dicas CódigoFonte.net
Segunda Feira, 16 de Junho de 2008

Cadastro de clientes com HTML + PHP

Olá a todos, estou começando a estudar PHP+MySQL e estou aqui para ajudar vocês a criar um formulário completo de clientes.

Vamos lá, primeiramente vamos iniciar com o código HTML, eu inseri um pequeno código em JAVASCRIPT para validação dos campos digitados pelo usuário.

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>CADASTRO DE CLIENTES COM BANCO DE DADOS E PHP</title>
  5. <style type="text/css">
  6. <!--
  7. .style1 {
  8. color: #FF0000;
  9. font-size: x-small;
  10. }
  11. .style3 {color: #0000FF; font-size: x-small; }
  12. </style>
  13. <script type="text/javascript">
  14. function validaCampo()
  15. {
  16. if(document.cadastro.nome.value=="")
  17. {
  18. alert("O Campo nome é obrigatório!");
  19. return false;
  20. }
  21. else
  22. if(document.cadastro.email.value=="")
  23. {
  24. alert("O Campo email é obrigatório!");
  25. return false;
  26. }
  27. else
  28. if(document.cadastro.endereco.value=="")
  29. {
  30. alert("O Campo endereço é obrigatório!");
  31. return false;
  32. }
  33. else
  34. if(document.cadastro.cidade.value=="")
  35. {
  36. alert("O Campo Cidade é obrigatório!");
  37. return false;
  38. }
  39. else
  40. if(document.cadastro.estado.value=="")
  41. {
  42. alert("O Campo Estado é obrigatório!");
  43. return false;
  44. }
  45. else
  46. if(document.cadastro.bairro.value=="")
  47. {
  48. alert("O Campo Bairro é obrigatório!");
  49. return false;
  50. }
  51. else
  52. if(document.cadastro.pais.value=="")
  53. {
  54. alert("O Campo país é obrigatório!");
  55. return false;
  56. }
  57. else
  58. if(document.cadastro.login.value=="")
  59. {
  60. alert("O Campo Login é obrigatório!");
  61. return false;
  62. }
  63. else
  64. if(document.cadastro.senha.value=="")
  65. {
  66. alert("Digite uma senha!");
  67. return false;
  68. }
  69. else
  70. return true;
  71. }
  72. <!-- Fim do JavaScript que validará os campos obrigatórios! -->
  73. </script>
  74. </head>
  75.  
  76. <body>
  77. <form id="cadastro" name="cadastro" method="post" action="cadastro.php" onsubmit="return validaCampo(); return false;">
  78.   <table width="625" border="0">
  79.     <tr>
  80.       <td width="69">Nome:</td>
  81.       <td width="546"><input name="nome" type="text" id="nome" size="70" maxlength="60" />
  82.         <span class="style1">*</span></td>
  83.     </tr>
  84.     <tr>
  85.       <td>Email:</td>
  86.       <td><input name="email" type="text" id="email" size="70" maxlength="60" />
  87.       <span class="style1">*</span></td>
  88.     </tr>
  89.     <tr>
  90.       <td>Sexo:</td>
  91.       <td><input name="sexo" type="radio" value="Masculino" checked="checked" />
  92.         Masculino
  93.         <input name="sexo" type="radio" value="Feminino" />
  94.         Feminino <span class="style1">*</span> </td>
  95.     </tr>
  96.     <tr>
  97.       <td>DDD:</td>
  98.       <td><input name="ddd" type="text" id="ddd" size="4" maxlength="2" />
  99.       Telefone:
  100.         <input name="telefone" type="text" id="telefone" />
  101.         <span class="style3">Apenas números</span> </td>
  102.     </tr>
  103.     <tr>
  104.       <td>Endereço:</td>
  105.       <td><input name="endereco" type="text" id="endereco" size="70" maxlength="70" />
  106.         <span class="style1">*</span></td>
  107.     </tr>
  108.     <tr>
  109.       <td>Cidade:</td>
  110.       <td><input name="cidade" type="text" id="cidade" maxlength="20" />
  111.         <span class="style1">*</span></td>
  112.     </tr>
  113.     <tr>
  114.       <td>Estado:</td>
  115.       <td><select name="estado" id="estado">
  116.         <option>Selecione...</option>
  117.         <option value="AC">AC</option>
  118.         <option value="AL">AL</option>
  119.         <option value="AP">AP</option>
  120.         <option value="AM">AM</option>
  121.         <option value="BA">BA</option>
  122.         <option value="CE">CE</option>
  123.         <option value="ES">ES</option>
  124.         <option value="DF">DF</option>
  125.         <option value="MA">MA</option>
  126.         <option value="MT">MT</option>
  127.         <option value="MS">MS</option>
  128.         <option value="MG">MG</option>
  129.         <option value="PA">PA</option>
  130.         <option value="PB">PB</option>
  131.         <option value="PR">PR</option>
  132.         <option value="PE">PE</option>
  133.         <option value="PI">PI</option>
  134.         <option value="RJ">RJ</option>
  135.         <option value="RN">RN</option>
  136.         <option value="RS">RS</option>
  137.         <option value="RO">RO</option>
  138.         <option value="RR">RR</option>
  139.         <option value="SC">SC</option>
  140.         <option value="SP">SP</option>
  141.         <option value="SE">SE</option>
  142.         <option value="TO">TO</option>
  143.           </select>
  144.         <span class="style1">*      </span></td>
  145.     </tr>
  146.     <tr>
  147.       <td>Bairro:</td>
  148.       <td><input name="bairro" type="text" id="bairro" maxlength="20" />
  149.         <span class="style1">*</span></td>
  150.     </tr>
  151.     <tr>
  152.       <td>País:</td>
  153.       <td><input name="pais" type="text" id="pais" maxlength="20" />
  154.         <span class="style1">*</span></td>
  155.     </tr>
  156.     <tr>
  157.       <td>Login:</td>
  158.       <td><input name="login" type="text" id="login" maxlength="12" />
  159.         <span class="style1">*</span></td>
  160.     </tr>
  161.     <tr>
  162.       <td>Senha:</td>
  163.       <td><input name="senha" type="password" id="senha" maxlength="12" />
  164.           <span class="style1">*</span></td>
  165.     </tr>
  166.     <tr>
  167.       <td colspan="2"><input name="news" type="checkbox" id="news" value="ATIVO" checked="checked" />
  168. Desejo receber novidades e informações sobre o conteúdo deste site. </td>
  169.     </tr>
  170.     <tr>
  171.       <td colspan="2"><p>
  172.         <input name="cadastrar" type="submit" id="cadastrar" value="Concluir meu Cadastro!" />
  173.        
  174.  
  175.           <input name="limpar" type="reset" id="limpar" value="Limpar Campos preenchidos!" />
  176.          
  177.  
  178.           <span class="style1">* Campos com * são obrigatórios!          </span></p>
  179.       <p>  </p></td>
  180.     </tr>
  181.   </table>
  182. </form>
  183. </body>
  184. </html>


Após criado nosso formulário vamos dar o nome dele de cadastro.html

Partimos então para o cadastro.php
Eu comentei todo o código para ficar bem facil para nosso entendimento.
Então vamos partir para o cadastro.php

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Cadastro realizado com sucesso!</title>
  5. </head>
  6. <body>
  7. <?php
  8. // RECEBENDO OS DADOS PREENCHIDOS DO FORMULÁRIO !
  9. $nome= $_POST ["nome"];//atribuição do campo "nome" vindo do formulário para variavel
  10. $email= $_POST ["email"];//atribuição do campo "email" vindo do formulário para variavel
  11. $ddd= $_POST ["ddd"];//atribuição do campo "ddd" vindo do formulário para variavel
  12. $tel= $_POST ["telefone"];//atribuição do campo "telefone" vindo do formulário para variavel
  13. $endereco= $_POST ["endereco"];//atribuição do campo "endereco" vindo do formulário para variavel
  14. $cidade= $_POST ["cidade"];//atribuição do campo "cidade" vindo do formulário para variavel
  15. $estado= $_POST ["estado"];//atribuição do campo "estado" vindo do formulário para variavel
  16. $bairro = $_POST ["bairro"];//atribuição do campo "bairro" vindo do formulário para variavel
  17. $pais= $_POST ["pais"];//atribuição do campo "pais" vindo do formulário para variavel
  18. $login= $_POST ["login"];//atribuição do campo "login" vindo do formulário para variavel
  19. $senha= $_POST ["senha"];//atribuição do campo "senha" vindo do formulário para variavel
  20. $news= $_POST ["news"];//atribuição do campo "news" vindo do formulário para variavel
  21. $sexo= $_POST ["sexo"];//atribuição do campo "sexo" vindo do formulário para variavel
  22.  
  23. //Gravando no banco de dados ! conectando com o localhost - mysql
  24. $conexao = mysql_connect("localhost","root"); //localhost é onde esta o banco de dados.
  25. if (!$conexao)
  26. die ("Erro de conexão com localhost, o seguinte erro ocorreu -> ".mysql_error());
  27.  
  28. //conectando com a tabela do banco de dados
  29. $banco = mysql_select_db("clientes",$conexao); //nome da tabela que deseja que seja inserida os dados cadastrais
  30. if (!$banco)
  31. die ("Erro de conexão com banco de dados, o seguinte erro ocorreu -> ".mysql_error());
  32.  
  33.  
  34. //Query que realiza a inserção dos dados no banco de dados na tabela indicada acima
  35. $query = "INSERT INTO `clientes` ( `nome` , `email` , `sexo` , `ddd` , `telefone` , `endereço` , `cidade` , `estado` , `bairro` , `país` , `login` , `senha` , `news` , `id` )
  36. VALUES ('$nome', '$email', '$sexo', '$ddd', '$tel', '$endereco', '$cidade', '$estado', '$bairro', '$pais', '$login', '$senha', '$news', '')";
  37. mysql_query($query,$conexao);
  38. ########## • Explicação da query • ##########
  39. #$query = nome da variavel que decidi#
  40. #utilizar para realizar a operação.#
  41. #############################################
  42. #clientes = nome da tabela que será salvo#
  43. #os dados do cadastro do cliente#
  44. #############################################
  45. #nome, email, sexo, ddd, telefone,#
  46. #endereço, cidade, estado, bairro, país,#
  47. #login, senha, news, id.#
  48. ##
  49. #São apenas os nomes dos campos que #
  50. #constam na tabela clientes.#
  51. #############################
  52. #VALUES = indica que serão inseridos os#
  53. #seguintes valores.#
  54. #############################################
  55. #$nome, $email, $sexo, $ddd, $telefone,#
  56. #$endereço, $cidade, $estado, $bairro, #
  57. #$país, $login, $senha, $news, $id.#
  58. #############################
  59. #São apenas as variaveis a qual eu#
  60. #atribui os valores digitados no formulá-#
  61. #rio.#
  62. #############################################
  63. echo "Seu cadastro foi realizado com sucesso!Agradecemos a atenção.";
  64. //mensagem que é escrita quando os dados são inseridos normalmente.
  65. ?>
  66. </body>
  67. </html>


Como este é minha primeira matéria, eu resolvi colocar a tabela que deve ser criada no banco de dados, também para funcionamento completo do formulário.

comando SQL:

  1. CREATE TABLE `clientes` (
  2. `nome` VARCHAR( 60 ) NOT NULL ,
  3. `email` VARCHAR( 60 ) NOT NULL ,
  4. `sexo` VARCHAR( 10 ) NOT NULL ,
  5. `ddd` INT( 2 ) ,
  6. `telefone` INT( 8 ) ,
  7. `endereço` VARCHAR( 70 ) NOT NULL ,
  8. `cidade` VARCHAR( 20 ) NOT NULL ,
  9. `estado` VARCHAR( 2 ) NOT NULL ,
  10. `bairro` VARCHAR( 20 ) NOT NULL ,
  11. `país` VARCHAR( 20 ) NOT NULL ,
  12. `login` VARCHAR( 12 ) NOT NULL ,
  13. `senha` VARCHAR( 12 ) NOT NULL ,
  14. `news` VARCHAR( 8 ) ,
  15. `id` INT( 200 ) AUTO_INCREMENT ,
  16. UNIQUE (
  17. `id`
  18. )
  19. );


Obrigado a todos espero que consigam entender o código e seus comentários. Deixo meu email para duvidas, wesley_zeus@yahoo.com.br

Até a proxima matéria.

Comentários do artigo [Novo comentário]

Vinicius - 02 de Julho de 2008 - 20:45
Você ainda poderia fazer uma verificação para ver se o cliente ja existe, $query_ver_sql = mysql_query("SELECT `login` FROM `clientes` WHERE `login` = '$login'"); // seleciona todos os logins existe com o login digitado pelo usuario $query_ver= mysql_num_rows($query_ver_sql); // conta quantos registros foram encontrados na query anterior if($query_ver>0){ echo "Este login já esta em uso"; } else { echo "Esta login não esta em uso"; } caso não seja feita a verificação se o login ja existe poderia ocorrer "bugs" no momento de efetuar login no site
Marcio Souza - 29 de Julho de 2008 - 16:48
Amigo voce sabe algum formulário de contato que use html + php ?? e que tbm tenha campos obrigatorios? eu entendi seu raciocinio mas me perdi em algumas linhas,pois não entende nada de sql! Voce pode me ajudar? me manda um e-mail para marciossouza@globo.com ok?? fico no aguardo!
Para adicionar um comentário você deve efetuar o login

Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:



Melhor Visualizado com
800x600 de Resolução
CodigoFonte.net » CodigoFonte.eti.br » CompreDeTudo.com » MeuMural.com.br » Todos os Direitos Reservados © 2002/2008