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 "cadastro"

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 "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. 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)

Webtutoriais:ADEFE739

Blog Widget by LinkWithin