Sistema de cadastro e Login Parte I

Propaganda

Sistema de cadastro e Login Parte I
5605 Vizualizações. 19/02/2005
Hoje, vamos começar a desenvolver um sistema de login e cadastro simples usando PHP e
MySQL.
hlegius
Salve comunidade Script Fácil!
Como muitos haviam me pedido hoje estarei começando a desenvolver junto com vocês um
sistema simples de cadastro e login usando o MySQL como nosso banco de dados!
- Conhecimentos básicos:
. Condicionais e loops;
. Manipulação de dados;
. Sintaxe MySQL;
. PHP com MySQL.
. Lógica de programação ajuda!
Uma dúvida que sempre acaba surgindo é por onde começar, bem cada um têm o seu jeito e tal,
porém eu prefiro começar a trabalhar com o PC desligado!
Uh ? Desligado ?
Isso, escrever num papel a estrutura básica do nosso banco de dados, pois não adianta começar a
programar sem saber quais os nomes das tabelas e o que elas armazenarão, lógico que quase
sempre essa estrutura passa por alguns ajustes, mas não mudará muita coisa do planejado
inicialmente, além de facilitar, pois os nomes das tabelas ficarão sempre visiveis evitando o
esquecimento do nome das tabelas e ter que ficar abrindo programas para achar os nomes das
mesmas.
» Rascunho do banco de dados:
-- Nome do banco de dados: script_facil
-- Tabelas: cadastra
Tabela: cadastra
Nome do campo --- Tipo do campo -- valor que irá armazenar
id --------------- int ------------ Id dos cadastrados
nome ------------- varchar -------- Nome do cadastrado
login ------------ varchar -------- Login do usuário
senha ------------ varchar -------- Senha do usuário
email ------------ varchar -------- E-mail do usuário
Por hora isso já está bom!
Veja, a partir da tabela de cadastros faremos também o login dos cadastrados, certo ? deu para
entender ?
Certo, com o rascunho na mão, podemos ligar o Pc e começar a trabalhar...
Primeiro vá ao PHPmyadmin ou o adminstrador de bancos MySQL que tiver e crie o seu banco de
dados somente! Sem as tabelas!
Depois, abra o seu editor e crie uma pasta para o nosso sistema, pode ser:
C:pastadoseu_servidorscript_facil ou /servidor/script_facil
Agora vamos criar o arquivo responsável pelos dados e conexão com o MySQL.
config.php
<?
/* Arquivo de conexão com o MySQL */
$server = "localhost";
$user
= "";
$pass
= "";
$base
= "script_facil";
if(!(mysql_pconnect($server,$user,$pass))){
print nl2br("Não pude conectar ao banco de dados $base n
Desculpe o transtorno!");
exit;
}else{
mysql_select_db($base);
}
?>
Até aqui sem problemas ?
Vamos prosseguir então...
Agora vamos criar um arquivo para criar as tabelas do banco de dados...Existem vários meios de
realizar isso... cria um arquivo .sql e importa pelo PHPmyadmin ou cria um arquivo comum e abre
ele pelo
fopen(), ou ainda cria usando mysql_query()...
Vamos usar o mysql_query()
instala.php
<?
/* Arquivo de instalação das tabelas do nosso sisteminha */
require "config.php";
$tbl_cad = "CREATE table if not exists cadastra(
id int not null auto_increment,
nome char(90) not null,
login char(15) not null,
senha varchar(32) not null,
email varchar(125) not null,
Primary Key(id,login))";
/* Executando a Query SQL da variavel $tbl_cad */
if(mysql_query($tbl_cad)){
print nl2br("Sistema instalado com sucesso!n");
}else{
die (mysql_error());
}
?>
Creio que vocês saibam o que eu fiz, mas eu explico novamente...
A variavel $tbl_cad contém a instrução SQL para criar a tabela cadastra com os campos id, nome,
login, senha, email.
O campo senha possui um máximo de 32 caracteres, pois mais a frente, na parte de
cadastramento de novos usuários, a senha deles será criptografada...
Depois com o auxilio de uma condicional, crio a verificação para saber se tudo ocorreu certo ou se
deu algum erro no MySQL e qual o erro!
Certo ?
Com o arquivo de configuração e instalação criados vamos montar um arquivo de folhas de estilo
(CSS) para deixar nosso sisteminha mais organizado e apresentável!
obs: Não vou explicar como usa CSS, pois não é minha area, ok ?
style.css
/* Arquivo de folha de cascata do sistema de Login do Script
Fácil */
body{
margin: 0px;
padding: 0px;
font: 65% verdana,arial,helvetica;
}
img{
border: 0px;
}
a:link{
color: #990000;
text-decoration: none;
}
a:visited{
color: #990000;
text-decoration: none;
}
a:hover{
color: #990000;
text-decoration: underline;
}
/* Deixar a caixa no centro (usaremos para criar o login!) */
#centro{
margin-top: 120px;
margin-left: 200px;
margin-right: 200px;
border: 1px dotted #666;
background-color: #CCCCCF;
}
#centro_central{
margin-left: 25px;
}
#dest{
margin-top: 0px;
font: bold;
}
/* Caracteristicas do class="table" */
.table{
spacing: 0px;
padding: 0px;
font: 100% verdana, arial;
}
.login, .cadastro{
height: 17px;
font: 95% verdana,arial;
text-indent: 3px;
color: #990000;
}
Veja esse arquivo .css não é o modelo final, conforme a necessidade do sistema, eu irei
modificando-o e colocando as modificações para vocês estarem alterando, ok ?
Agora o HTML da parada!
Sistema de cadastro e Login Parte I
5606 Vizualizações. 19/02/2005
Hoje, vamos começar a desenvolver um sistema de login e cadastro simples
usando PHP e MySQL.
hlegius
index.php
<html>
<head>
<title>Sistema de cadastro e Login usando MySQL e PHP - Script Fácil coluna
PHP n° 14</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
@import url('style.css');
</style>

<script language="javascript">
function losepass(url,opc,info){
window.open('lose.php','','width=350,height=175,top=120,left=180,noresizeable');
}
function confirma(){
if(confirm('Posso enviar os dados?'))
return true;
else
return false;
}
function cadastra(){
window.location="cadastra.php";
}
</script>
</head>
<body>
<div id="centro">
<p id="dest">» Efetuar login</p>
<div id="centro_central">
<table id="login" class="table">
<form action="autentica.php" method="post" id="login">
<tr>
<td>Login:</td>
<td><input type="text" name="u_login" class="login"></td>
</tr>
<tr>
<td>Senha:</td>
<td><input type="password" name="u_senha" class="login"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" id="enviar" value="Efetuar Login" class="login"
onclick="return confirma()"></td>
</tr>
</form>
</table>
<a href="javascript:losepass()" title="Perdeu a senha ?">Esqueci minha
senha!</a> |
<a href="javascript:cadastra()" title="Não sou cadastrado!">Não sou
cadastrado ainda!</a>
</div>
</div>
</body>
</html>
Veja que também faço uso de Javascript, como podem ver o coloquei só para
"incrementar", ou melhor dizendo "fazer uma graça" :-D
Com isso na mão agora é hora de criar o arquivo cadastra.php, pois ele
conterá o formulário de cadastro:
cadastra.php
<html>
<head>
<title>Sistema de cadastro e Login usando MySQL e PHP - Script Fácil coluna
PHP n° 14</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
@import url('style.css');
</style>

<script language="javascript">
function confirma(){
if(confirm('Deseja realmente efetuar o cadastro?'))
return true;
else
return false;
}
function returntoindex(){
window.location="index.php";
}
</script>
</head>
<body>
<div id="centro">
<p id="dest">» Efetuar seu cadastro</p>
<div id="centro_central">
<table width="308" class="table" id="login">
<form action="registra.php" method="post" name="login">
<tr>
<td>Nome:</td>
<td><input type="text" name="u_nome" class="login"></td>
</tr>
<tr>
<td>Login:</td>
<td><input type="text" class="login" name="u_login"></td>
</tr>
<tr>
<td>Senha:</td>
<td><input type="password" class="login" name="u_senha"></td>
</tr>
<tr>
<td>Repetir senha:</td>
<td><input type="password" class="login" name="ur_senha"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" class="login" name="u_email"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" class="login" id="enviar" onClick="return
confirma()" value="Efetuar Cadastro"></td>
</tr>
</form>
</table>
<a href="javascript:returntoindex()" title="Voltar a página principal!">Ir
para index.php</a>
</div>
</div>
</body>
</html>
Certo, agora vamos começar a brincar!
registra.php
<?
/* Inicio a sessão que vou usar para manter os dados do cabra para mante-lo
ativo! */
session_start();
/* Arquivo que irá cadastrar e autenticar o novo usuário */
require "config.php";
/* Caso seja passado valores via GET ele pára a execução e gera um alerta
para o engraçadinho! */
if($_SERVER['REQUEST_METHOD'] == 'GET'){
print "<script> alert('Não é permitido valores via GET fio!');
location.href='index.php';
</script>";
exit;
}
/* Resgatando os valores do formulario */
$nome
= $_POST['u_nome'];
$login = $_POST['u_login'];
$senha = $_POST['u_senha'];
$retripe
= $_POST['ur_senha'];
$email = $_POST['u_email'];
$pattern_mail = "(^[[:alpha:]]+@[[:alpha:]]+.)";
if(($nome == NULL) || ($login == NULL) || ($senha == NULL) || ($email ==
NULL)){
print "<script> alert('Os campos requeridos encontram-se em branco!');
location.href='cadastra.php';</script>";
exit;
}elseif($senha != $retripe){
print "<script> alert('As senhas não coincidem!');
location.href='cadastra.php';</script>";
exit;
}elseif(preg_match($pattern_mail,$email) == false){
print "<script> alert('Os caracteres do email são inválidos!');
location.href='cadastra.php';</script>";
exit;
}else{
/* vamos criptografar a senha agora com md5() */
$senha = md5($senha);
/* Insiro o usuário */
$sql = "INSERT INTO cadastra(nome,login,senha,email)
values('$nome','$login','$senha','$email')";
if(mysql_query($sql)){
/* Retorno o id dele */
$sel = "SELECT id FROM cadastra WHERE nome = '$nome' and login ='$login'
and senha='$senha'";
$sel = mysql_query($sel);
$sel = mysql_result($sel,0,"id");
/* Salvo em sessão o id login e senha dele */
$_SESSION['id']
= $sel;
$_SESSION['login']
= $login;
$_SESSION['senha']
= $senha;
/* e mando para o arquivo protect.php */
header("location:protect.php");
exit;
}else{
print "<script> alert('Não pude inserir o usuário...');
location.href='cadastra.php';</script>";
exit;
}
}
?>
Nesta parte ele não permite que sejam passados valores via GET ou seja
valores após o ? na barra de endereços!
Ele também verifica se os dados não estão em branco e se o email não é
valido, usando expressões regulares(Mais: Visite a minha coluna sobre
expressões regulares!)
Após essa verificação ele vê se as senhas são iguais e se tudo tiver ook,
ele cadastra o cara, se conseguir cadastrar salva o id login e senha na
sessão e manda para o arquivo protect.php (que ainda não está protegido)
E se der erro, ele retorna uma caixa de dialago em javascript e retorna ao
form de cadastro.
Simples?
Como ainda eu não falei sobre sessions e cookies fica aki um link meu onde
eu coloquei um artigo sobre Cookies e Sessions (
http://www.tutoriaismania.com.br/forum/index.php?showtopic=892 )
Nosso arquivo protect.php
protect.php
<html>
<head>
<title>Area protegida</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>
</html>
bem por hoje ficamos por aqui...
Na próxima coluna, continuarei com esse sistema e farei a parte de login, a
proteção do arquivo protect.php e a parte de perder senha...