Como Criar um Sistema de Cadastro: Parte 1

março 2, 2009 | Arquivado em: Dreamweaver,PHP | Escrito por: CarlosHPS Webdesigner

• SHAREBAR

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 

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/

Segunda parte

Apresentação

Olá, pessoal

Como o prometido, vamos dar continuidade ao Sistema de Cadastro, iniciado no tutorial anterior. Caso não tenha visto, recomendo que o faça antes de seguir neste: Como Criar um Sistema de Cadastro: Parte 1

Pré-Requisitos

1. Facilidade quanto a manuseio do Dreamweaver e a manipulação de formulários
2. Ter feito o tutorial anterior: Como Criar um Sistema de Cadastro: Parte 1
3. Ter criado 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 um formulário que envie os dados para o servidor web
3. Criar uma página para exibir a relação de cadastrados no sistema

Conteúdo

1º Passo – Criando a página formulario_cadastro.php

Vamos criar uma página PHP e nomeá-la como formulario_cadastro.php. Para isso, acessemos o menu File > New (CTRL+N) e selecionemos a opção PHP, clicando em Create em seguida.

Os dados serão cadastrados nesta página que acabamos de criá-la e nela conterá um formulário e todo o processo para enviarmos o que digitarmos em seus campos, para o banco de dados, mais especificamente, na tabela cadastro.

2º Passo – Desenvolvendo o Formulário de Cadastro

Existe um recurso no Dreamweaver chamado Record Insertion Form Wizard e, através dele, de uma só vez, criaremos o formulário e os códigos PHP. Acessemos então no painel Insert, abaData, a opção Insert record > Record Insertion Form Wizard

Fig. 01 - Insert Recordset Form Wizard

Na tela seguinte, surgem as opções de configuração do formulário e seus campos de preenchimento:

Fig. 02 - Janela Record Insertion Form

Fig. 03 - Label NOME.

Fig. 04 - Label EMAIL

Preenchido e configurados os pontos, é só clicar em OK e teremos o seguinte resultado:

Fig. 05 - Formulário de cadastro

Lembram dos pré-requisitos para fazerem este tutorial? Pois então, supondo que tenham conhecimentos básicos sobre formulários, apresentarei o resultado final da inserção de um cabeçalho para ele e a mudança do nome do botão.

Fig. 06 - Formatação do formulário

3º Passo – Envio do Arquivo para o Servidor

Nosso formulário de cadastro está pronto, agora é só enviá-lo para o servidor.

Como o FTP foi configurado no tutorial passado, basta clicarmos sobre o arquivoformulario_cadastro.php, no painel Files e clicar em Put File(s).

Fig. 07 - Envio de arquivos via FTP

4º Passo – Criação da Página de Confirmação de Envio

Lembram que no momento da inserção do formulário, definimos que a página de redirecionamento após o envio dos dados a qual colocamos lá foi a cadastro_ok.php?

Então, vamos criá-la e inserir um link que levará o usuário a visualizar todos os cadastros efetuados, ok?! Para isso, acessemos o menu File > New e escolhamos o tipo de página PHP.

Criemos uma página simples, apenas para podermos visualizar seu resultado e criemos um link chamado: Veja todos os cadastros e com a url cadastros.php.

Fig. 08 - Confirmação de envio.

5º Passo – Criando a Página de Exibição de Cadastros

Pessoal, a página que exibirá a relação de todos os cadastros enviados para o banco de dados, será chamado de cadastros.php. Com a página já criada e salva, trabalharemos com outro recurso do Dreamweaver chamado Recordset (conjunto de registros).

Então, acessemos o painel Bindings > Sinal de “+” > Recordset (Query):

Fig. 09 - Recordset

E, realizando as devidas configurações a seguir…

Fig. 10 - Painel Recordset

… poderemos visualizar o seguinte resultado:

Fig. 11 - Recordsets campos

Bom, estamos quase lá 

Para ficar organizado, criemos uma tabela (CTRL+ALT+T) com 2 linhas e 3 colunas, com largura de 700 px:

Fig. 12 - Tabela de relatório

Fazendo algumas configurações, ela ficará assim:

Fig. 13 - Tabela de relatório

Dando prosseguimento, vamos clicar nos “Recordsets” e arrastá-los para dentro da tabela, sob seus respectivos títulos:

Fig.14 - Configuração da tabela

Da maneira que está aqui, já podemos visualizar o último cadastro inserido no banco de dados, mas o ideal é que visualizemos alguns ou até mesmo todos. Para isso, devemos SELECIONAR a linha inteira onde estão os recordsets e acessar o painel Insert > Data > Repeat Region:

Fig. 15 - Repetição de dados

Feito isso, nossa página está pronta.

Veja abaixo:

http://www.carloshps.com.br/blog/como-criar-um-sistema-de-cadastro-parte-2/

É isso aí, pessoal.

Espero que tenham gostado.

Até a próxima.

CarlosHPS Webdesigner 

Autor: CarlosHPS Webdesigner – Colunista Dreamweaver do Portal MXSTUDIO