Exemplo de Login com HTML, Boostrap, CSS, jQuery, Ajax e Javascript

Guilherme Catini · Fevereiro 19, 2015

Boa tarde galera, tudo bem?

Estou aqui para postar um tutorial básico de um formulário de login simples, usando HTML, CSS, jQuery, Ajax e Javascript.

O Exemplo vocês podem visualizar neste link

http://www.catini.org/exemplos/login/formLogin.html

Começando pelo HTML.

<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- jQuery -->
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
  <!-- Arquivos do Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <!-- Minha folha de Estilos -->
  <link rel="stylesheet" href="style.css">
  <!-- Meu arquivo de scripts -->
  <script src="custom.js"></script>
  <title>Identifique-se</title>
</head>
<body>
<!-- Aqui é a mensagem de sucesso de login escondida, onde vamos exibir no momento de validação -->
<div id="sucessoLogin" class="row">
	<div class="alert alert-success">Login efetuado com sucesso. Redirecionando...</div>
</div>
<!-- Aqui é a mensagem de erro de login escondida, onde vamos exibir no momento de validação -->
<div id="falhaLogin" class="row">
	<div class="alert alert-danger">Usuário ou senha inválido.</div>
</div>

<div id="blocoLogin" class="container">

  <div class="row">
    <div class="col-md-12">
      <div class="input-group">
	    <label class="input-group input-group-addon"><b class="glyphicon glyphicon-user"></b></label>
	    <input autofocus type="text" class="form-control" id="cmpLogin" placeholder="Login -- > admin">
      </div>
	</div>
  </div>
  
  <br>
  
  <div class="row">
    <div class="col-md-12">
      <div class="input-group">
	    <label class="input-group input-group-addon"><b class="glyphicon glyphicon-log-in"></b></label>
	    <input type="password" class="form-control" id="cmpSenha" placeholder="Senha --> admin">
      </div>
	</div>
  </div>
  
  <div class="row">
	<div class="col-md-12 text-right">
	  <a href="#">Esqueceu sua senha?</a>
	</div>
  </div>
  
  <br>
  
  <div class="row">
    <div class="col-md-12 text-right">
	  <button class="btn btn-default" id="btnLogin">Login</button>
	</div>
  </div>
  
</div>

</body>
</html>

Agora o arquivo de estilos (CSS)

body {
  background-color:#F7F7F7;
}

#blocoLogin {
	width:450px;
	margin:35px auto 0 auto;
}

#falhaLogin {
	text-align:center;
	font-weight:bolder;
	display:none;
}

#sucessoLogin {
	text-align:center;
	font-weight:bolder;
	display:none;
}

Agora o arquivo JS (Javascript)

// Início jQuery
$(document).ready(function(e) {
// evento click no botão login (quando eu clicar no botão login ele vai executar esses comandos)
$("#btnLogin").click(function(e){ // Ao clicar no botão login do formulário, irá executar os comandos abaixo.
	var vLogin = $("#cmpLogin").val(); // Estou recebendo o valor do campo Login
	var vSenha = $("#cmpSenha").val(); // Estou recebendo o valor do campo Senha
	
	if (vLogin.length == 0) { // Aqui eu verifico se digitou algo no login
		alert("Atenção\nO campo Login é obrigatório.");
		$("#cmpLogin").focus(); // Faço o foco voltar para o campo de login
	} else if (vSenha.length == 0) { // Aqui eu verifico se digitou algo no login
		alert("Atenção\nO campo Senha é obrigatório.");
		$("#cmpSenha").focus();// Faço o foco voltar para o campo de senha
	} else { // Caso o login e senha estiverem preenchidos, entra aqui.
		// Aqui vou usar o ajax (jquery), onde ele vai verificar em outro arquivo se o usuário e senha existe
		$.post("info.php", {login: vLogin, senha: vSenha}, function(retorno){
			if(retorno) { // caso o retorno for TRUE
				$("#sucessoLogin").fadeIn("fast", function(e){ // Exibir o bloco de mensagem de sucesso
					$("#sucessoLogin").delay(1500).fadeOut("fast"); // Depois de exibido, eu dou um tempo de 1,5 segundos
					$("body").delay(1500).fadeOut('fast', function(e){ // Depois oculto toda o body e redireciono (apenas efeitos.)
						window.location="https://www.scriptbrasil.com.br/forum/";
					})
				});
			} else { // caso o retorno for FALSE
				$("#cmpLogin").focus().select(); // defino o foco e seleciono o campo todo
				$("#falhaLogin").fadeIn("fast", function(e){ // Exibir o bloco de mensagem de erro
					$("#falhaLogin").delay(1500).fadeOut("fast"); // Depois de exibido, eu dou um tempo de 1,5 segundos e escondo.
				});
			}
		});
	}
})

});

E por último o arquivo php onde vou verificar se o usuário e senha existem com o ajax.
Como é um exemplo simples utilizei fixo o usuário admin e senha admin, o correto é fazer a conexão com um banco de dados.

<?php
if ( isset($_POST['login']) && isset($_POST['senha']) ) {

	$vLogin = $_POST['login'];
	$vSenha = $_POST['senha'];
	
	if ( $vLogin == "admin" && $vSenha == "admin" ) {
		echo true;
	} else {
		echo false;
	}

}
?>

O código está todo comentado, qualquer dúvida, podem perguntar.

Achei legal postar isso pois ele ensina um pouco de tudo, e por ser simples as vezes abre a cabeça de quem tem algumas dúvidas sobre essas linguagens.

Editado Fevereiro 19, 2015 por Guilherme Catini

wootzor · Fevereiro 19, 2015

Aspecto bastante elegante, obrigado por partilhar o código.

Entrar

Exemplo de Login com HTML, Boostrap, CSS, jQuery, Ajax e Javascript

Pergunta

Guilherme Catini

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

wootzor

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades