Como Criar um Sistema de Cadastro: Parte 1

Apresentação

Olá, pessoal

Neste tutorial veremos como interagir o Dreamweaver, o PHP a um banco de dados e um servidor web. Esta interação resultará num sistema bem básico para que possamos cadastrar e-mails de usuários em nossos sites e podermos ter uma visualização geral de todos.

Baseado nisso, veremos como:

  1. Preparar o Dreamweaver para trabalhar com páginas dinâmicas
  2. Criar um banco de dados REAL em um servidor REAL na web
  3. Fazer a conexão entre o Dreamweaver e este banco de dados
  4. Criar um formulário que enviará os dados para o banco de dados
  5. Criar uma página de visualização dos cadastros

Pré-Requisitos

  1. Facilidade quanto a manuseio do Dreamweaver e a manipulação de formulários
  2. Criar uma conta gratuita no servidor 000webhost.com

Objetivos

  1. Criar um sistema de cadastro básico utilizando o Dreamweaver, PHP e Banco de Dados
  2. Criar uma página para exibir a relação de cadastrados no sistema

Conteúdo

1º Passo – Definindo um Site com Tecnologia de Servidor

Para os iniciantes, o Dreamweaver pode parecer apenas um “criador” de sites, mas ele vai muito além disso. Seu forte também é o gerenciamento. Ele foi feito tanto pra trabalhar com sites complexos, quanto apenas uma página.

E para começarmos bem, devemos organizar nossa área de trabalho, afim de facilitar o manuseio dos arquivos criados através do programa.

Sendo assim, criemos uma pasta chamada “site-dreamweaver” em “Meus Documentos“:

Fig. 01 - Organização de pastas

Fig. 01 - Organização de pastas

Em seguida, com o Dreamweaver (no meu caso, o CS4) aberto, acessemos o menu Site > New site. Existem outras maneiras, mas esta é boa devido aos leitores poderem usar em diversas veroes do programa.

Selecionemos a aba Advanced, na categoria Category > Local Info e façamos as devidas configurações como mostradas na imagem:

Fig. 02 - Definição do Site - Local Info

Fig. 02 - Definição do Site - Local Info

Quanto às categorias Remote Info e Testing Server, utilizaremos elas assim que criarmos nossa conta no servidor, o qual será o passo seguinte. O importante agora é que o Dreamweaver indexou nosso site.

2º Passo – Cadastrando-se no Servidor Web

O servidor que escolhi (e utilizo proissionalmente também para efetuar testes em sites de clientes), além de gratuito, ele fornece suporte ao PHP, banco de dados MYSQL e trabalha com CPanel que é um sistema utilizado em muitos servidores pagos.

Então, acessem-no:  www.000webhost.com

Para criar uma conta gratuita, cliquemos no botão SIGN UP na lateral direita do site.

Fig. 03 - Cadastro no servidor

Fig. 03 - Cadastro no servidor

Na tela seguinte, devemos preencher o formulário com os seguintes dados:

Fig. 04 - Cadastro no Servidor

Fig. 04 - Cadastro no Servidor

Verifiquemos o e-mail que foi cadastrado no sistema para podermos acessar o painel de controle (às vezes “caiu” na pasta de lixo eletrônico).

Acessando o link http://members.000webhost.com, entrando com os devidos dados, veremos a seguinte tela:

Fig. 05 - Login de acesso ao CPanel

Fig. 05 - Login de acesso ao CPanel

Clicando em Go to CPanel, teremos a visualização e o controle do nosso servidor :)

Não vou falar das inúmeras funcionalidades aqui, serei bastante pontual. Em um outro momento a gente conversa… ;)

3º Passo – Criando um Banco de Dados Através do phpMyAdmin Diretamente no Servidor

No CPanel, na seção Software/Services, cliquemos em phpMyAdmin.

Fig. 06 - Acesso ao phpMyAdmin

Fig. 06 - Acesso ao phpMyAdmin

E para criar nosso banco de dados, devemos clicar em MySQL Management.

Fig. 07 - Acesso ao banco de dados

Fig. 07 - Acesso ao banco de dados

Agora vamos criar nosso banco de dados e o usuário responsável pela sua administração:

Fig. 08 - Criação do banco de dados

Fig. 08 - Criação do banco de dados

Vale lembrar que a senha também deve ser alfanumérica e com no mínimo, 6 caracteres.

Na tela seguinte estão exibidos todos os dados que utilizaremos no Dreamweaver para fazermos a conexão com o banco de dados.

Fig. 09 - Informações do banco de dados

Fig. 09 - Informações do banco de dados

Só por segurança, a senha aqui é ilustrativa. Utilize uma criada por vocês.

Cliquemos em Back to Control Panel para retornar ao painel de controle. Depois, cliquemos novamente em phpMyAdmin para criarmos nossa primeira tabela de dados.

4º Passo – Criando a Tabela de Dados pelo phpMyAdmin

Ao acessarmos o CPanel novamente e clicarmos em phpMyAdmin, veremos os bancos de dados existentes em nosso site e a possibilidade de trocarmos a senha. Mas no nosso caso aqui, acessaremos o link Enter phpMyAdmin.

Fig. 10 - Acesso ao phpMyAdmin

Fig. 10 - Acesso ao phpMyAdmin

Na tela seguinte criaremos a tabela de dados denominada aqui como cadastro e conterá 3 campos.

Fig. 11 - Criação da tabela "cadastro"

Fig. 11 - Criação da tabela

Na outra tela, vamos inserir os seguintes campos:

  1. cad_id – responsável pela identificação individual de cada cadastro
  2. cad_nome – responsável pelo armazenamento do nome do cadastrado
  3. cad_email – responsável pelo armazenamento do e-mail do cadastrado
Fig. 12 - Criação dos campos da tabela "cadastro"

Fig. 12 - Criação dos campos da tabela

Colocamos o tipo (Type) de dados para o campo cad_id, smallint com 5 caracteres. Isto significa que nosso sistema pode comportar mais de 65.000 cadastros. Quando selecionamos o atributo (Atributtes) UNSIGNED, estamos garantindo que a numeração gerada será a partir do zero e não incluirá números negativos. Em Extra, ao marcarmos a opção auto_increment (auto_incremento), estamos definindo que o banco de dados gerará automaticamente, uma sequência de números para cada cadastro. E por fim, selecionamos a opção Primary Key (Chave primária). Esta ação garante a identificação única e exclusiva em cada linha da tabela.

E quanto ao VARCHAR selecionado para os outros dois campos da tabela, significa que podemos inserir até 255 caracteres. Porém, delimitamos para 100 ao nome e 75, ao e-mail.

5º Passo – Configurando o FTP do Dreamweaver

Neste momento, através do Dreamweaver, criaremos uma conexão com nosso banco de dados para, enfim, montarmos nosso sistema de cadastro.

Para isso, primeiramente, devemos completar a configuração do Dreamweaver como comentamos acima.

Acessemos então o menu Site > Manage Sites… - Cliquemos no nome do site que denominamos anteriormente “Sistema de Cadastro” e em seguida em Edit…

Fig. 13 - Edição de Site

Fig. 13 - Edição de Site

Na categoria (category) Testing Server, vamos inserir os dados de acesso ao servidor através do FTP. Caso tenhamos esquecido tais dados, basta acessar o painel de controle na seção Files > View FTP Details:

Fig. 14 - Detalhes do FTP

Fig. 14 - Detalhes do FTP

E agora é só completar com os devidos dados e clicar em Test para verificar se está tudo ok. Aparecerá uma mensagem de SUCCESSFULLY.

Fig. 15 - Configuração do FTP no Dreamweaver

Fig. 15 - Configuração do FTP no Dreamweaver

Clicando em Done, faremos agora a configuração da conexão com o banco de dados, pois o que fizemos agora nos possibilita apenas enviar e receber os arquivos que estão no servidor.

6º Passo – Fazendo a Conexão Entre o Dreamweaver e o Banco de Dados

Para criarmos uma conexão com o banco de dados MySQL, utilizaremos a aba DATABASES (CTRL+SHIFT+F10) ou pelo menu Window > Databases.

Fig. 16 - Conexão

Fig. 16 - Conexão

Agora é só utilizarmos os dados do banco criados na 3ª etapa para concluirmos a criação da conexão.

Fig. 17 - Dados para a conexão

Fig. 17 - Dados para a conexão

Ao verificarmos o painel à direita (clicando no “+”) veremos a tabela e os campos existentes nela, a qual criamos anteriormente. Se não aparecer estes dados, é preciso refazer este tutorial.

Fig. 18 - Visualização da conexão

Fig. 18 - Visualização da conexão

Na 2ª e última parte deste tutorial, veremos como criar e preparar um formulário apra enviar os dados para o banco de dados além de criarmos uma página que exibirá todos os dados cadastrados.

Até lá.

CarlosHPS Webdesigner 8)

Autor: CarlosHPS Webdesigner – Colunista Dreamweaver do Portal MXSTUDIO

Não deixem de me fazer uma visita em meu blog – www.carloshps.com.br/blog , meus cursos online www.carloshps.com.br/cursos e ao meu portfólio – www.carloshps.com.br/

Escrito por CarlosHPS Webdesigner on março 2, 2009. Arquivado em Dreamweaver, PHP. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

43 respostas a Como Criar um Sistema de Cadastro: Parte 1

  1. Muito legal fico no aguardo da segunda parte

  2. muito bommm, mas no momento de entrar no Cpanel, como explicado acima, tem a outra opção de confirmar o IP, e cai em outra pagina pedindo pra fazer o download de um executavel, pra confirmar o IP, mas a pagina q se abre ao clicar no ip_confirm.exe fica em branco. parei aí, não toh conseguindo prosseguir.

  3. Oi, norba

    Este problema ocorre devido a sua Internet ou seu PC possuir algum Firewall ativo. É preciso cadastrar o IP da sua máquina no servidor para depois prosseguir.

    Não recomendo que faça nenhuma instalação, porque quando criei o tutorial, nada foi solicitado como citou acima.

    CarlosHPS

  4. O CPanel só funciona no Linux ou no Windows também?

  5. Estou com o mesmo prroblema do norba. Alguem passou por isso e conseguiu contornar o problema???

  6. ASSIM COM O NORBA TBM ESTOU TENTO PROBLEMAS COM O IP. COMO FAÇO PRA CADASTRAR O IP SEM EXECUTAR A INSTALAÇÃO QUE O SITE SUGERE

  7. Olá, Berenice

    Não sou especialista em servidores, mas pelo pouco que conheço, o CPanel também funciona com o Windows.

    CarlosHPS

  8. Olá Carlos!

    Achei o máximo a sua explicação! Parabéns.
    Infelizmente tive o mesmo problema que o Norba citou.
    Como li os comentários aqui, desativei meu firewall, mas da mesma forma apresentou este impasse.

    Veja a imagem, tirei um print.

    http://img7.imageshack.us/img7/3305/30729334.jpg

    Tem alguma solução?
    Fico no aguardo!
    Desde já agradeço!

  9. Oi, blankinha
    Vi sua imagem sim, mas confesso que não tenho a solução.
    Eu criei mais duas contas em computadores diferentes e este pedido de instalação deste aplicativo não apareceu.
    E como isso não surgiu, não sei a procedência e confiabilidade. Por isso, se instalar, tome cuidado.

    CarlosHPS 8)

  10. Ola, antes de mais nada gostaria de parabenizar pelo ótimo trabalho.

    Agora Sr. Carlos, já fiz e refiz os procedimentos como demonstrado no tutorial, mas quando eu chego na hora de testar o “testing server” [fig. 14] dá erro.

    O que eu poderia estar fazendo de errado ?

    Obrigado,
    Abraços “

  11. DNA, que tipo de erro aparece?
    Posta aqui pra gente analisá-lo.
    Abração.

    CarlosHPS 8)

  12. O mesmo erro prosegue…

    olha o link da pag…

    http://goffhouseinn.com/ip_confirm.php

  13. Olá, adorei o tutorial mas quando fui testar fazer, usei um servidor que eu já tinha, com suporte a PHP e MySql. Tava indo tudo bem, mas quando chego na parte 6, para fazer a conexão entre o Dreamweaver e o Banco de Dados, isiro os dados mas quando vou confirmar aparece o erro 1045, de acesso negado. Mas não sei em que parte corrijo isso.

    Té mais.

  14. Olá, Douglas

    Este problema eu expliquei no comentário acima.

    “Ocorre devido a sua Internet ou seu PC possuir algum Firewall ativo, ou seu navegador está a bloquear algum script ou a própria conexão web está a fazer isso. É preciso cadastrar o IP da sua máquina no servidor para depois prosseguir.

    Não recomendo que faça nenhuma instalação, porque quando criei o tutorial, nada foi solicitado como citou acima.”

    CarlosHPS 8)

  15. Oi, Dalila

    Como você usa seu próprio servidor, sei exatamente qual é o problema, pois já aconteceu comigo.
    Acesse seu Painel de Controle e vá no gerenciamento de banco de dados. Lá existe um campo de GERENCIAMENTO REMOTO onde você tem que cadastrar o IP da sua máquina para que o Dreamweaver possa fazer a conexão com o banco de dados.

    Recomendo que entre em contato com o suporte do seu servidor para mais detalhes.

    Boa sorte.

    CarlosHPS 8)

  16. Como faço para cadastrar o IP da minha máquina no servidor para conseguir prosseguir? Estou com o mesmo problema da Norba!

  17. bom, consegui criar a conta, mas ele diz que só vai ativar em 24 horas O.O!!!

  18. não consegui começar o passo 3 pois quando tento acessar phomy adm aparece uma mensagem de erro o que devo fazer

  19. Carlos tive o mesmo problema da Norba, porém consegui encontrar o tal programa, que por sinal está com um virús embutido.
    Após conseguir “ativar” entrar com o ip de 6 digitos.
    o sistema me deu a seguine mensagem:
    Esta conta não está ativa ainda, o nosso administrador irá configurar-lo em 24 horas.

  20. Primeiramente queria dizer que adorei o tuto, mas no passo 6 de conexao fasso tudo o que pede mas aparece o erro 404 antes aparecia esse erro tambem mas descobrir, era porque eu uso um hospedor diferente o ueuo.com eu puis meu login mysql do site que é: 204791, não achei o mysql server mas fui criar outro myphpadmin no hospedor que uso e vi que ta escrito servidor:localhost, username:204791, datebase:204791, no erro “404 file not found” para que não foi possivel achar o grandchase.ueuo.com/_mmServerScript/MMHTTPDB.php.
    obs 1: utilizo o dream 8 cadastrado.

    obs 2: no 5 passo para achar o db onde estava escrito ftp host coloquei em vez do site grand… (coloquei esse tamvem mas apareceu um erro) eu coloquei o servidor server31.000webhost.com para improvisar e deu certo.

    Me ajude to louca para criar um sistema de conta.

    Vlw!!!

  21. o meu dreamweaver diz na 6 parte do tuto
    “ocorreu um erro nao identificado”
    uso o dream MX

  22. esse ip confirm é um trojan, o tutorial é muito bom, mas desisti do host, fiquei triste…por que parecia ser bom , mas ai tem que confirma IP, isso é trojan!!

  23. trojan pode ser….mas provavelmente é a segurança do servidor
    seu ip nao é confirmado entao o site nao deixa vc prossegir

    para corrigir o problema vc tem q falar com qm instalou o modem

    ai ele ira configurar e pronto

  24. Cara o meu anti-vírus tb nao deixa baixar o programa para cadastrar o ip, no meu caso eu desativei o anti-virus e o programa q gera o ip instalou normalmente….agora só estou esperando eles validarem meu cadastro, tipo que eles pedem para esperar 24hs mais ja se passaram 48….tomara q de certo..

  25. Bom dia Carlos… gostei mto do tutorial sobre o sistema de cadastro feito no 000webhost. Gostaria da segunda etapa, cacei porem nao encontrei, sera que tem como me enviar por e-mail?? e outra gostaria de saber se tem como configurar uma pagina de erro 404 no 000webhost.
    Grato
    Aguardo resposta

  26. Oi Carlos tudo bem???
    SE VC RECOMENDA NÃO BAIXAR O PROGRMA ip_confirm.exe entao oque nos devemos fazer para prosseguir?
    Obrigada

  27. Pessoal, quando eu criei o tutorial, não me foi solicitado baixar nenhum programa e tudo que criei funcionou perfeitamente.
    E re-afirmo: não instalem nenhum programa, pois eu não sei da procedência.
    Outra coisa: o servidor é gratuito e não temos como exigir nada dele, não é verdade?
    No entanto, estou postando uma lista de outros servidores que espero que os atendam, ok?! Mas não testei nenhum deles, aí será com vocês. A essência do tutorial é a mesma para qualquer servidor, gratuito ou não.

    Mas novamente lhes falo: cuidado! Não instalem nada, pois não há necessidade. Como relatos acima, pode ser um vírus, um trojam ou um bloqueio de segurança da própria rede ou modem. Na dúvida, recuem.

    Segue o link:

    http://www.free-webhosts.com/webhosting-01.php

    Boa a sorte a todos.

    CarlosHPS Webdesigner 8)

  28. Bom galera! quanto as funcionalidades do host on-line num sei bem….mas testei o programa EasyPHP e deu beleza pra teste eu acho até melhor…..só quis ajudar….vlw

  29. bom pesoal o sistema de cadastro funciona perfeitamente…prabéns carlos…..meu aprendizado pode se definir antes e depois dos seus tutoriais……agora com relação a dúvida sobre o servidor ….eu usei o xampp e deu perfeitamente igual.

  30. Muito bom este tuto… bem explicado…
    Só acho que seria mais prático instalando um servidor no pc que usar o 000webhost.com.

  31. Olá, Pessoal
    Minha intenção foi com que vocês trabalhassem com um servidor REAL e ON-LINE e não OFF-LINE como o EasyPHP, Xampp ou Wampserver.
    Eu até uso o Wampserver em meus trabalhos e se vocês sabem utilizar um servidor off-line, o princípio é o mesmo. ;)

    CarlosHPS Webdesigner 8)

  32. Tambem tenho problemas no passo 6.
    Criei uma base de dados, mas quando vou meter os dados nos espaços e clico em ‘OK’, em vez de dizer ‘connection was made sucessfully’, diz: ‘An unidentifed error has occurred’.

    Eu ja tinha criada uma conta no 000webhost, mas só agora criei uma base de dados. Devo esperar até estar activo? Ah, e em vez de ser ‘mysql5.000webhost.com’ no espaço de MySQL server, tenho de meter ‘mysql10.000webhost.com’ – será algum problema?

    Obrigada pela atençao. Agradeço ajuda

  33. adorei mesmo, mas por segurança testei um provedor pago.

    Grato mesmo

  34. bom dia
    estou tendo problemas ao fazer a conexao com o bd atraves do dreamweaver, a conexao com o host funcionou corretamente. ao tentar conectar com o bd recebo a mensagem de erro nao identificado..
    sera que pode me ajudar????

  35. sidharta da silva

    desculpe estou com um problema
    eu sou meio nb e q esta aparecendo a seguinte mensagem na hora de selecionar a base de dados
    “Your PHP server doesn’t have the MySQL module loaded or you can’t use the mysql_(p)connect functions”
    vc poderia me exclarecer essa duvida ja agradeço

  36. o meu da erro de ligacao nao sei porque…

    alguem me ajuda?

  37. Muito bom seu tutorial da pra ter uma boa ideia de como configurar um banco de dados e um formulario no dreamweaver.

  38. Cara este tutorial es muito bem eu aprendi a criar um site com banco de dados tranquilo.
    coisa que achavas que eras imposivel sem curso .
    Muito Obrigado
    Espero que entenda meo Portugues medio >
    adios

  39. explica mais como configurar o FTP na Fig. 15

  40. então eu posso fazer desse jeito com os meus clientes, e os dados dos meus clientes estaram seguros?

    foi otima seu tutorial, parabens.

  41. Olá muito bom seu tutorial, mas infelizmente não consegui o cadastro no 000webhost.com, portanto fiz uma assinatura com o uolHost, e gostaria de saber onde ou quais são as informações para para criar o vinculo com o Dreamwaver.
    Segui passo a passo a criação do banco de dados no pHpAdmin, mas como o meu provedor é diferente não consigo as informações necessarias para realizar o Testing Server no Dreamwaver.
    Quero muito aprender a criar esse campo, mas o uolhost não fornece suporte (ajuda) para configurações de sites criados fora.
    Desde jqa Agradeço.
    Att.
    Marcos Tresco

  42. quando eu cadastro, e confiro a conta no meu e-mail, eu vou no “CPanel” da o seguinte erro:

    “System administrator will review your details and activate your account in 24 hours.

    However, if you need web hosting account right now, you can signup with our partner http://www.0fees.net and get instant activation!”

    ai nao consegui continuar o tutorial )’:

  43. O 000webhost.com demora muito pra enviar o email de confirmação /: .. Queria testar pra ver como funciona, mas nada até agora.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>