Programação

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

Imagem de Free-Photos por Pixabay

Nessa etapa estaremos criando uma tela de login simples.

Tela de login

Criar conexão com o banco de dados

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

[sourcecode language="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");
?>
[/sourcecode]

Tela de login

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

[sourcecode language="html"]
<!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>
[/sourcecode]

Folha de estilos

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

[sourcecode language="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;}
[/sourcecode]

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).

[sourcecode language="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;
	}
?>
[/sourcecode]

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!

Conta pra gente, o que você achou?