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.
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.
=)
Deixe um comentário