Artigos e Tutoriais Para Desenvolvedores Web

Como Criar um Sistema de Cadastro: Parte 01

Postado em Banco de Dados, Criar Sistema de Cadastro, Dreamweaver, PHP, Tutoriais, Web Developer | Comente



Série “Como Criar um Sistema de Cadastro”

Como Criar um Sistemas de Cadastro - Parte 01

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 Host1Free

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 no Dreamweaver

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 versões 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 Dreamweaver - Local Info

Fig. 02 – Definição do Site Dreamweaver – 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

No tutorial, Hospedagem Grátis Para Seu Site, veja como se cadastrar no servidor gratuito para poder passar ao passo seguinte.

Hospedagem Grátis - Host1free.com

Hospedagem Grátis – Host1free.com

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

Acessando o painel de controle do servidor (Website Control), vá na seção de gerenciamento de banco de dados:

Fig. 03: Criando um banco de dados gratuito

Fig. 03: Criando um banco de dados gratuito

Fig. 04: Criando banco de dados no servidor

Fig. 04: Criando banco de dados no servidor

Fig. 05: Confirmação de cadastro do banco de dados

Fig. 05: Confirmação de cadastro do banco de dados

Cliquemos em Click HERE to go back para retornar ao painel de controle.

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. 06: Acesso ao phpMyAdmin

Fig. 06: Acesso ao phpMyAdmin

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

Fig. 07: Criação da tabela "cadastro" no phpMyAdmin

Fig. 07: Criação da tabela “cadastro” no phpMyAdmin

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. 08: Criação dos campos da tabela "cadastro"

Fig. 08: Criação dos campos da tabela “cadastro”

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. 09: Edição de Site no Dreamweaver

Fig. 09: Edição de Site no Dreamweaver

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 do servidor ou no e-mail de cadastro recebido no momento do cadastro da hospedagem grátis.

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

Fig. 10: Configuração do FTP no Dreamweaver

Fig. 10: 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.

Lembrando que os dados das imagens acima e a seguir são fictícios ou criados por mim. Utilize os que você criou no cadastro da hospedagem grátis.

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. 11: Conexão banco de dados

Fig. 11: Conexão banco de dados

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

Fig. 12: Dados para a conexão no Dreamweaver

Fig. 12: Dados para a conexão no Dreamweaver

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. 13: Visualização da conexão no Dreamweaver

Fig. 13: Visualização da conexão no Dreamweaver

Na 2ª parte deste tutorial, veremos como criar e preparar um formulário para 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)

Webtutoriais:ADEFE739