Login em PHP e MySQL com jQuery

Introdução


Vamos fazer um sistema de login/cadastro bem legal. Ele lhe dará a capacidade de cadastrar facilmente uma área só para membros e fornecer um processo de cadastro fácil.

Ele vai ser controlado por PHP e armazenar todos os registros em um banco de dados MySQL.

Para adicionar um toque especial, estamos usando o painel jQuery deslizante, desenvolvido por Web-Kreation.

Você pode ver uma demonstração ou baixar todo o código neste link.

Passo 1 - MySQL


Primeiro temos que criar a tabela que vai realizar todos os registros. Este código está disponível em table.sql.

table.sql

   
Repare que definimos o "id" como um número inteiro com auto_increment - ele é automaticamente atribuído a cada novo membro do site. Além disso, nós definimos "usr" como uma chave única ou seja, não é permitido dois nomes de usuários iguais.

Nós usaremos isso depois para saber se o usuário já não está cadastrado no sistema.

Depois de criar a tabela, não se esqueça de preencher as suas credenciais de banco de dados em config.php assim você pode executar a demonstração no seu próprio servidor.

Passo 2 - XHTML


Primeiro, temos que incorporar o formulário da Web-Kreation na nossa página.

demo.php


Em vários lugares neste código, existem alguns operadores PHP que verificam se $_SESSION["usr"] or $_SESSION["id"] foram definidos. Isso só é verdade se o visitante da página é registrado no site, o que nos permite mostrar o conteúdo específico para os membros do site. Vamos observa-lo mais a frente.
Depois do formulário vem o resto da página.
 


Nada de especial aqui. Vamos continuar com o PHP.



Passo 3 - PHP



É hora de converter formulário em um sistema de login/cadastro completo. Para conseguir isso, vamos precisar de mais do que a quantidade habitual de PHP. Eu vou dividir o código em duas partes.

Se você planeja adicionar mais código, seria uma boa idéia de dividi-lo em vários arquivos que são inclusos quando necessário. Isso favorece o desenvolvimento de grandes projetos e permite a reutilização de código em diferentes partes de um site.

Mas vamos ver como nós fizemos aqui.

demo.php


   
Aqui, o cookie "aaLembrar" atua como um controle para saber se devemos fazer o log-off de usuários que não marcaram o checkbox "continuar conectado". Se o cookie não estiver presente (devido restart do navegador) e o visitante não marcou a opção "continuar conectado", nós destruímos a sessão.

Esta sessão é mantida por duas semanas (conforme definido em session_set_cookie_params).

Vamos ver a segunda parte do demo.php.

Nós armazenamos todos os erros encontrados em um array chamado "$err", que posteriormente é atribuído a uma variável de sessão, $ _SESSION. Isso permite que ele seja acessível após um redirecionamento do navegador.

Você deve ter notado em alguns sites, que quando você envia um formulário e depois atualizar a página, os dados são enviados novamente. Isso poderia tornar-se problemático, uma vez que poderia levar a uma duplicação de cadastro e de carga no servidor desnecessários.

Nós usamos a função header para evitar isso, redirecionando o navegador para a mesma página. Isso inicia uma nova visão da página, sem que o browser associe-o a com um formulário enviado. O resultado é que, na atualização da página, nenhum dado é enviado.

Mas ao usar $ _SESSION para armazenar todos os erros encontrados, é importante sempre limpar essas variáveis, uma vez que os erros armazenados forem exibido para o usuário. Caso contrário, eles serão mostrados em cada exibição de página.

Note também que nós criamos um script adicional (no final da segunda parte do código PHP), que exibe o painel após o carregamento da página, de forma que as mensagens sejam visíveis para o usuário.

Agora vamos dar uma olhada no CSS.

Carregando imagem...

Passo 4 - CSS


 

O painel deslizante vem com sua própria folha de estilos. Porém, pode ser editada de acordo com suas necessidades.

demo.php


Passo 5 - jQuery



O painel deslizante vem com seus próprios arquivos jQuery

demo.php


Primeiro vamos inclumos a biblioteca jQuery do CDN do Google. Depois vem uma correção especial para as questões de transparência PNG no IE6 e o último script do painel está incluído.

Na parte inferior da página perceba a variável $script - ela abre o painel no carregamento da página, se necessário.

Com isso nosso sistema de login legal está completo!

Conclusão



Hoje aprendemos a usar um componente de forma fantástica e transformá-lo em um sistema de login/cadastro.

Você é livre para construir em cima deste código e modificá-lo da maneira que achar melhor.

O download do código fonte e demonstração deste script pode ser feita neste link.

=)

Back to Top