Página em PHP – Criação da tela de login

Série: #programação Primeira página em PHP 

Nessa etapa estaremos criando uma tela de login simples.

Tela de login

#programação PHP, que bicho é esse?

Noções básicas de HTML

Criar conexão com o banco de dados

Vamos conectar com o banco a partir do arquivo: conecta.php

<?php
	//conexao com o banco ( servidor, usuario, senha);
	mysql_connect("localhost","root","");

	//conexao com o banco  (nome do banco de dados) or mensagem de erro (mensagem de erro);
	mysql_select_db("teste") or die ("Erro ao conectar no banco");
?>

Tela de login

Agora prosseguimos para a criação da tela inicial com o arquivo index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Login</title>
	<!-- Abaixo um código que "chama" a folha de estilos que é responsável pelo tipo de fonte, localização do formulário...  -->
		<link href="admin.css" rel="stylesheet" type="text/css">
	</head>
		<body>
			<div id=form2>
				<!-- A partir do método post é chamado a ação de "verificação no banco de dados" no arquivo "verifica.php"-->
				<form name="form1" id="form1" method="post"
				action="verifica.php">
					<!-- Indica o início do formulário-->
					<fieldset >
						<legend align="center">Preencha os campos para efetuar o login:</legend>
						<label align="center"; for="login">Usuário:</label>
						<br />
						<input type="text" name="login" id="login" size="20"
						maxlength="20" />
						<br />
						<label for="senha">Senha:</label>
						<br />
						<input type="password" name="senha" id="senha" size="20"
						maxlength="20" />
						<br />
						<input type="submit" value="Efetuar Login" />
					<!--Indica o fim do formulário -->
					</fieldset>
				</form>
			</div>
		</body>
</html>

Folha de estilos

Para a tal da folha de estilos criaremos o arquivo admin.css

/* um documento de CSS  */

body { font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif; }
/* ele puxa a primeira fonte, caso nao exista, ele vai para a posterior */

#pagina { width: 800px; margin: auto; }
/*margin: auto para sempre ficar no centro  */

#form2 {width: 50%;height:50%; padding: 15%; float:left;}

A página de verificação dos dados de login

Para ver se o usuário digitou os dados corretos no login criamos o arquivo verfica.php (que apareceu lá no arquivo da  tela de login do php).

<?php
	//note que os comentários de uma linha em php são entre barras duplas.

	//iniciar a sessao
	session_start();
	/*
	Os com mais de uma
	linha são entre esse * e /.
	Note a posição de inicio e de fim
	*/

	//verificar se os dados vieram de um POST
	if ($_POST) {
		//conectar no banco de dados - incluir o arquivo do banco
		include "conecta.php";
		//recuperar a variaveis vindas do formulario
		$login = trim($_POST["login"]);
		$senha = trim($_POST["senha"]);
		//caso o usuario deixe espaços em branco, o trim retira espaços em branco

		// para validar os campos em branco. "A tal da criação de condições!"
		if (empty($login)) {
			//se o login estiver em branco exibe esta mensagem: "preencha o login"
			echo "<script>alert('Preencha o Login');history.back();</script>";
		}
		else if (empty($senha)) {
			//se a senha estiver em branco	exibe esta mensagem: "Preencha o campo senha"
			echo "<script>alert('Preencha o campo senha');history.back();</script>";
		}
		else {
			//se os campos estiverem preenchidos corretamente - valida usuario
			/*comando sql - consulta para verificar se o
			usuario existe no banco */
			$sql = "select * from usuario where login = '$login' limit 1";
			//executar e guardar o resultado em uma variavel
			$resultado = mysql_query($sql);
			//separar os resultados
			$linha = mysql_fetch_array($resultado);
			$login2 = $linha["login"];
			$senha2 = $linha["senha"];
			//criptografar senha
			$senha = md5($senha);
			//verificar se o usuario existe
			if (empty($login2)) {
				echo "<script>alert('Usuario nao existe');history.back();</script>";
			} else if ($senha != $senha2) {
				//se a senha digitada for diferente da senha do banco
				echo "<script>alert('Senha inválida');history.back();</script>";
			} else {
				//se existir gravar os dados na sessao e enviar
				//para a proxima pagina - home.php
				$_SESSION["usuario"] = array("id"=>$linha["id"],
													"nome"=>$linha["nome"],
													"login"=>$linha["login"]);
				//redirecionar para o arquivo home.php
				header("Location: home.php");

			}

		}
		// se tiver com o login e a senha erradas exibe esta mensagem: Requisicao invalida!
	} else {
		echo "Requisicao invalida!";
		exit;
	}
?>

Nos próximos post estaremos criando a tela de administração, o uso do javascript exclusões,inclusões e atualizações no banco de dados.

Dúvidas, críticas, sugestões, erros: deixe sua contribuição!

13 comentários sobre “Página em PHP – Criação da tela de login

  1. Bom Dia,

    Parabéns pelo post, estou com uma questão que depois que informo o usuário e senha, apresenta a seguinte mensagem: Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\Login\verifica.php on line 38

    Usuário não existe…. acredito que estou fazendo algo errado, porem estou iniciando na area de programação, se puder me ajudar, agradeço.

    Valeu.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s