Banco de dados

Para começar vamos criar nosso banco de dados. A primeira etapa para se criar um sistema de login é criar uma tabela no banco de dados com as colunas que guardarão os dados do usuário, esta tabela obrigatoriamente tem de ter as colunas "nome" e "senha" que serão usadas no login do usuário, você pode também criar outras colunas para guardar informações pessoais do usuário, como e-mail, site e etc.

Vamos lá, no exemplo irei criar o banco de dados através do Acess mas, você pode usar outro programa ou mesmo exportar o banco de dados para outro formato.

Abra o Acess, crie um novo banco de dados ou abra um banco de dados já existente.
Dê um duplo clique sobre "Crie uma tabela em modo Design".


Criando as colunas


Na janela que se abriu você vai criar as suas colunas, a primeira ser criada deve ser a coluna de identificação do usuário, "ID", ela deve ser do tipo numeração automática e deve serr definida como chave primária:

Em Nome do campo digite ID, em Tipo de dados selecione Numeração Aut.
Clique com o botão direito na coluna ID e clique em Chave primária.


Agora vamos criar a coluna "Nome":


Em Nome do campo digite "Nome", em Tipo de dados selecione Texto.
Perceba que na parte debaixo da janela existe um painel chamado Propriedades do campo.
Em Tamanho do campo (que deve estar com o valor 50) mude para 200, pois muitos usuários usam nome e sobrenome na hora de se cadastrar e se o campo tiver menor do que o nome da pessoa vai dar erro.


Agora defina um campo senha:


Em Nome do campo digite "Senha", em Tipo de dados selecione Texto.
Em Tamanho do campo (que deve estar com o valor 50) mude para 16 ou um numero de sua preferência.


Estas são as colunas necessárias para o usuário se cadastrar e se logar, mas você pode adicionar outras colunas para saber mais dados sobre o usuário como e-mail, telefone, cidade...
No final sua tabela deve ficar mais ou menos assim:


Salve a tabela com o nome "Usuarios"

Exportando


Caso você queira pode exportar o banco de dados para outro formato, como por exemplo MySQL (desde de que você tenha o driver do MySQL). Veja como:

Com a tabela selecionada ou aberta clique em Arquivo>>Exportar
Na janela salvar, existe um campo chamado "Salvar como tipo:" selecione Banco de Dados ODBC.

Na janela exportar verifique se o nome da tabela esta correto e clique em OK

Na janela Selecionar fonte de dados selecione o driver do banco de dados que você quer usar através da caixa Examinar que serve como explorer ou clique na Guia "Fontes de dados de máquina" e selecione o driver do formato do banco de dados que você quer usar.

Sistema


Agora que já criamos o banco de dados iremos partir para o Dreamweaver para criar o sistema. Para isto você precisará de:

Um site definido - Se você não sabe fazer isto clique aqui.
Uma conexão com o banco de dados criado - Se você não sabe fazer isto clique aqui.
Com o Dreamweaver aberto clique em Arquivo>>Novo, no menu a esquerda da janela que se abriu selecione Página dinâmica e no menu a esquerda selecione a linguagem que será usada na página, você pode escolher entre VBscript de ASP, JavaScript de ASP, JSP ou PHP.
Com o novo documento criado vá ao painel Aplicativo e clique em Ligações (Janela>>Ligações), clique no sinal de adição, e no menu popup clique em Conjunto de registros (consulta).




Irá se abrir uma janela chamada Conjunto de registros, nela você definira quais dados serão puxados do banco de dados, veja:



Nome = Insira qualquer nome sem caracteres especiais ou espaços.
Conexão = Selecione nome da conexão a ser usada (você já deve ter uma conexão definida).
Tabela = Selecione a tabela do banco de dados que contem os dados dos usuários
Colunas = Marque "Todos"


Cadastro


Após isto feito já teremos um conjunto de registro para usar em nosso sistema. Agora clique em Arquivo>>Salvar e salve o arquivo com o nome de cadastro.* (o * deve ser substituído pela extensão, asp, php ou jsp).

Clique agora em Inserir>>Objetos de Aplicativos>>Inserir formulário de registro. Irá aparecer uma janela assim:




Conexão = Selecione nome da conexão a ser usada (você já deve ter uma conexão definida).
Inserir na tabela = Selecione a tabela que contem os dados dos usuários
Após a inserção, ir para = Insira a URL de uma página de confirmação que será criada posteriormente.
Campos de formulário = Selecione o primeiro campo, "ID" e clique no sinal de subtração (-) para retira-lo do formulario.



Deve ter aparecido um formulário mais ou menos assim na página:




O cadastro do sistema está funcional, mas ainda tem 2 probleminhas para resolver:

1. Evitar que um novo usuário se cadastre com um nome de usuário já existente.
2. Evitar que o usuário envie o formulário sem preenche-lo corretamente.

Vamos resolver estes problemas:

1. Evitar que um novo usuário se cadastre com um nome de usuário já existente.
Vá até o painel Aplicativo e clique em Comportamento de servidor (Janela>>Comportamento de servidor), clique no sinal de adição, no menu popup clique em Autenticação pelo usuário>>Verificar o novo nome de usuário, a seguinte janela irá se abrir:




Campo nome do usuário = Selecione o campo do formulario onde o usuário irá digitar seu nome de usuário.
Se já existir, ir par = Insira uma URL para uma pagina de erro caso o usuário tente se cadastrar com um nome de usuário já existente



Pronto o 1° problema foi resolvido agora vamos partir para o 2° problema:

2. Evitar que o usuário envie o formulário sem preenche-lo corretamente.
Vá no painel Design clique em Comportamentos (Janela>>Comportamentos), clique no sinal de adição e clique em Validar formulário. Irá se abrir uma janela como esta:




Campos com nome = Selecione os campos de formulário que serão obrigatórios
Valor = Marque se o campo for obrigatório (marque nos campos nome, usuário e senha)
Aceitar = Marque uma das opções de acordo com o tipo de dado de cada campo:
Qualquer item = Marque esta opção para os campos que podem aceitar qualquer caracteres (nome, usuário e senha)
Endereço = Marque se o campo selecionado for um campo para o usuário inserir seu endereço de e-mail


Pronto agora finalizamos o sistema de cadastro, vamos então agora fazer o sistema de login:

Crie uma nova página, não feche a página de cadastro, salve a nova página como login.* (o * deve ser substituído pela extensão, asp, php ou jsp)
Com a página criada volte a página de cadastro, vá ao painel Aplicativo e clique Ligações (Janela>>Ligações), clique com o botão direito do mouse no conjunto de registros existente e clique em Copiar




Volte novamente a página de login, vá até o painel Aplicativo, clique em Ligações, clique com o botão direito no espaço em branco e clique em colar. Isto copiará o conjunto de registros da página de cadastro para a página de login.

Login


Clique em Inserir>>Formulário, isto irá inserir um retângulo pontilhado na pagina, coloque o cursor dentro deste retângulo, clique em Inserir>>Objetos de formulário>>Campo de texto, selecione o campo de texto inserido e, no Inspetor de propriedades (Janela Propriedades) defina o nome dele com "usuario" (sem aspas).




Agora repita o mesmo processo e crie um campo para senha, selecione o campo e no Inspetor defina o nome de como "senha" e marque a opção senha em Tipo (à direita).
Insira um botão para enviar o formulário, clicando em Inserir>>Objetos de formulário>>Botão.

Agora vá no painel Aplicativo, clique em comportamentos de servidor (Janela>>Comportamentos de servidor) clique no sinal de adição e clique em Autenticação pelo usuário>>Efetuar logon de usuário. Irá aparecer o seguinte formulário:




Obter entrada do formulário = Selecione o nome do formulário de login (form1 se vc não tiver mudado)
Campo nome do usuário = Selecione o campo do formulário onde o usuário irá digitar seu nome de usuário.
Campo senha = Selecione o campo do formulário onde o usuário irá digitar sua senha.
Validar utilizando a conexão = Selecione a nome da sua conexão (a mesma do formulário de cadastro)
Tabela = Selecione a tabela que contem as colunas de nome e senha do usuário
Coluna nome do usuário = Selecione a coluna com os nomes do usuários
Coluna senha = Selecione a coluna com as senhas dos usuários.
Se o logon tiver êxito ir para página = Digite a URL da página restrita (painel do usuário).
Se o logon falhar ir para pagina = Digite a URL de uma página de erro.
Restringir acesso com base em = Selecione usuário e senha



Pronto esta feito o sistema de login, agora vamos a página restrita:

Crie uma nova página, vá até a guia comportamentos de servidor no painel Aplicativo, clique no sinal de adição, clique em autenticação pelo usuário>>Restringir acesso




Restringir acesso = Marque nome usuário e senha
Se o acesso for negado ir para = digite a URL da página de login


Agora para finalizar nosso sistema iremos criar um link para o usuário sair (efetuar o logoff):

Crie um link qualquer, vá em comportamentos de servidor, clique no sinal de adição e clique em Autenticação pelo usuário>>Efetuar o logoff do usuário.




Efetuar o logoff quando = Marque link clicado e selecione o link que você criou
Quando concluído ir par = Digite a URL de uma página de saída ou mesmo da pagina de login



Pronto acabamos o sistema, caso você queira criar mais páginas com acesso restrito copie o comportamento de servidor "Restringir acesso à página" e cole na página que você deseja que seja restrista.