Jump to content
ricardonews

Existe diferenças de login em php e js?

Recommended Posts

Olá pessoal, fiz um formulario de cadastro usando o jquery ,ajax com o json. só que agora eu estou querendo logar  no banco, fiz todo o procedimento normal que se faz para site em php, mas não consegui nada,  eu tenho algumas imagem aqui  vou colocar.

Queria logar, eu coloquei a index  sem o php porque tentei com php e js mas nao funcionou , alguem pode me ajudar ?

desde já obrigado.

figura1.png

FIGURA2.png

FIGURA3.png

FIGURA4.png

Share this post


Link to post
Share on other sites

@ricardonews Bom amigo, não deu para entender realmente qual é o seu problema.

 

Seu problema é na conexão com o bando de dados? é no código php?

 

Você poderia explicar melhor seu problema com uma imagem do log de erros!

 

Você também poderia usar a tag <code> do site para publicar seu código, assim podemos dar uma olhada melhor.

 

Em relação ao post notei algumas coisas no php: 

 

Você usa md5 para embaralhar a senha, porem isso não é mais recomendado, nesse caso recomendo o uso do 

password_hash()

 

Você também pode melhorar seu método de filtro, no PHP 5.2.0 foi adicionados métodos de filtro embutidos no PHP.

 

Um exemplo de filtro de e-mail utilizando o método de filtro

<?php
$email = "john.doe@example.com";

if (filter_var($email, FILTER_VALIDATE_EMAIL)) 
{
  echo($email." is a valid email address");
} 
else 
{
  echo($emailis." not a valid email address");
}

 

No incio do documento você utiliza include(); para chamar o arquivo de conexão, nesse caso como o arquivo que faz a ponte com o banco de dados e mais que necessário, recomendo o uso do require_once();.

 

Também notei que falta alguns filtros nós dadas que vem do formulário, também recomendo o uso de algum token para impedir um ataque CSRF, e também está faltando um método para verificar se realmente ocorreu uma requisição do tipo POST, se ela realmente veio do seu site.

 

Para melhorar a resposta de erros de preenchimento do formulário, você poderia atribuir as massagens de erros, assim mostrado todos os erros que o usuário cometeu no preenchimento do formulário.

 

Não entendi muito bem o motivo do sleep(); no inicio do documento?

Share this post


Link to post
Share on other sites

é justamente no codigo php, quando eu faço uma verificação na vareavel email, não retorna nenhum valor .  apenas o codigo fica sem executar nenhuma ação. só que isso so me ocorre quando eu uso o jquery, ajax, json se eu usar o mesmo procedimento de login, sem jquery, ajax, json!!!  funciona normal.  mas obrigado pelas informações. o meu problema é fazer o login no banco de dados.

Share this post


Link to post
Share on other sites

Olá, eu estou postando  os códigos só está faltando fazer os ajuste  que você disse Gabrielms.

eu corri no console, mas não achei nenhum erro. mas na hora de logar ele limpa os campos. Desde já obrigado  a todos pela ajuda.

<?php
//AQUI É A CLASSES DE USUARIOS
Class Usuario
{
	private $pdo;
	public $msgErro = "";//tudo ok

	public function conectar($nome, $host, $usuario, $senha)
	{
		global $pdo;
		try 
		{
			$pdo = new PDO("mysql:dbname=".$nome,$usuario,$senha);
		} catch (PDOException $e) {
			$msgErro = $e->getMessage();
		}
	}

	public function cadastrar($email, $senha)
	{
		global $pdo;
		//verificar se já existe o email cadastrado
		$sql = $pdo->prepare("SELECT id_usuario FROM usuarios WHERE email = :e");
		$sql->bindValue(":e",$email);
		$sql->execute();
		if($sql->rowCount() > 0)
		{
			return false; //ja esta cadastrado
		}
		else
		{
			//caso nao, Cadastrar
			$sql = $pdo->prepare("INSERT INTO usuarios (email,senha) VALUES (:e, :s)");
			$sql->bindValue(":e",$email);
			$sql->bindValue(":s",md5($senha));
			$sql->execute();
			return true; //tudo ok
		}
	}


	public function logar($email, $senha)
	{
		global $pdo;
		//verificar se o email e senha estao cadastrados, se sim
		$sql = $pdo->prepare("SELECT id_usuario FROM usuarios WHERE email = :e AND senha = :s");
		$sql->bindValue(":e",$email);
		$sql->bindValue(":s",md5($senha));
		$sql->execute();
		if($sql->rowCount() > 0)
		{
			//entrar no sistema (sessao)
			$dado = $sql->fetch();
			session_start();
			$_SESSION['id_usuario'] = $dado['id_usuario'];
			return true; //cadastrado com sucesso
		}
		else
		{
			return false;//nao foi possivel logar
		}
	}
}







?>
<?php 
require_once 'CLASSES/usuarios.php';
$u = new Usuario();
?>

<html>
	<head>
		<title>Formulario de login </title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		
	</head>

	<body>
		<form id="formulario" method="post">
			<ul id="progress">
			<fieldset>
				<h2>Configuracoes da conta</h2>
				<h3>Area de login </h3>
				<input type="text" name="email" placeholder="Email" />
				<input type="password" name="senha" placeholder="Senha" />
				<input type="submit" name="next" class="next acao" value="Logar" />
				<a href="cadastro.php"><strong>Cadastrar</strong></a>
			</fieldset>
		</form>
<?php
if(isset($novos_campos['email']))
{
	$email = $novos_campos['email'];
	$senha = md5($novos_campos['senha']);
	
	if(!empty($email) && !empty($senha))
	{
		$u->conectar("login2","localhost","root","");
		if($u->msgErro == "")
		{
			if($u->logar($email,$senha))
			{
				header("location: AreaPrivada.php");
			}
			else
			{
				?>
				<div class="msg-erro">
					Email e/ou senha estão incorretos!
				</div>
				<?php
			}
		}
		else
		{
			?>
			<div class="msg-erro">
				<?php echo "Erro: ".$u->msgErro; ?>
			</div>
			<?php
		}
	}else
	{
		?>
		<div class="msg-erro">
			Preencha todos os campos!
		</div>
		<?php
	}
}
?>
	</body>
</html>
<?php
    sleep(2);
    require_once 'config.php';
    
    if(isset($_POST['cadastrar']) && $_POST['cadastrar'] == 'sim') {
        $novos_campos = $respostas = array();
        $campos_post = $_POST['campos'];

        foreach ($campos_post as $indice => $valor) {
            $novos_campos[$valor['name']] = $valor['value'];
        }

        $nome       = $novos_campos['nome'];
        $sobrenome  = $novos_campos['sobrenome'];
        $email      = $novos_campos['email'];
        $senha      = md5($novos_campos['senha']);
        $csenha     = md5($novos_campos['csenha']);
        $telefone   = $novos_campos['telefone'];
        $facebook   = $novos_campos['facebook'];
        $twitter    = $novos_campos['twitter'];
        $google     = $novos_campos['google'];

        if (!strstr($email, '@')) {
            $respostas['erro'] = 'sim';
            $respostas['getErro'] = 'Email inválido, preencha com um e-mail válido';
        }elseif ($senha != $csenha) {
            $respostas['erro'] = 'sim';
            $respostas['getErro'] = 'As senhas não conferem!';

        } elseif (!strstr($facebook, 'http://')) {
            $respostas['erro'] = 'sim';
            $respostas['getErro'] = 'Endereço de facebook informado, não é válido!';

        } elseif (!strstr($twitter, 'http://')) {
            $respostas['erro'] = 'sim';
            $respostas['getErro'] = 'Endereço de twitter informado, não é válido!';

        } elseif (!strstr($google, 'http://')) {
            $respostas['erro'] = 'sim';
            $respostas['getErro'] = 'Endereço de Google+ informado, não é válido!';

        } elseif (strlen($telefone) <> 13) {
            $respostas['erro'] = 'sim';
            $respostas['getErro'] = 'O telefone informado não é valido!';

        } else {
            $respostas['erro'] = 'nao';
            $inserir_banco ="INSERT INTO usuarios(nome,sobrenome,email,senha,telefone,facebook,twitter,google) VALUES('$nome', '$sobrenome','$email','$senha','$telefone','$facebook','$twitter','$google')";

            if(mysqli_query($conect, $inserir_banco)){
                $respostas['erro'] = 'nao';
                $respostas['msg'] = 'Client inserido com sucesso!';
            }else{
                $respostas['erro'] = 'sim';
                $respostas['getErro'] = 'não foi possivel inserir o cliente no banco de dados!';
            }
        }
        echo json_encode($respostas);
    }
?>
*{margin:0; padding:0;}
html{
	height:100%;
	background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9));
}
.erros, .ok
{
	width:390px;
	padding:5px;
	background:rgba(238, 249, 113, 0.9);
	margin: 20px auto 0 auto;
	border: 1px solid rgba(222,239,10,0.9);
	border-radius: 4px;
	color: #333;

}
.ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;}
body{
	font-family: "Trebuchet MS", tahoma, arial;
}

#formulario{
	width:500px;
	margin:40px auto;
	text-align:center;
	position:relative;
}

#formulario h2, #formulario h3{
	font:22px "Trebuchet MS", tahoma, arial;
	color:#090;
	width:100%;
	float:left;
	text-align:left;
	margin-bottom:4%;
}

#formulario h3{color:#333; font-size:17px;}

#formulario fieldset{
	background:white;
	border:0 none;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;

	box-shadow:0 0 15px 1px rgba(0,0,0, 0.4);
	padding:20px 30px;

	box-sizing: border-box;
	width:80%;
	margin:0 10%;
	position:absolute;
}

#formulario fieldset:not(:first-of-type){
	display:none;
}

#formulario input, #formulario textarea{
	padding:10px;
	border:1px solid rgba(38, 128, 101, 0.9);
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	outline:none;
	box-sizing: border-box;
	width:100%;
	font:14px "Trebuchet MS", tahoma, arial;
	color:#090;
	margin-bottom:10px;
}
#formulario .acao{
	width:100px;
	background:rgba(38, 128, 101, 0.9);
	color:white;
	text-transform:uppercase;
	font-weight:bold;
	padding:12px 0;
	float:left;
	margin-right:5%;
}
#formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;}

#formulario #progress{
	margin-bottom:30px;
	overflow:hidden;

	counter-reset: step;
}

#formulario #progress li{
	list-style-type:none;
	color:white;
	font-weight:bold;
	text-transform:uppercase;
	font-size:10px;
	float:left;
	width:33.33%;
	position:relative;
}

#formulario #progress li:before{
	content: counter(step);
	counter-increment: step;
	width:20px;
	display:block;
	line-height:20px;
	background:white;
	color:#333;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;

	margin:0 auto 10px auto;
}

#formulario #progress li:after{
	content: '';
	width:100%;
	background:white;
	height:2px;
	position:absolute;
	top:9px;
	left:-50%;
	z-index:-1;
}
#formulario #progress li:first-child:after{
	content:none;
}

#formulario #progress li.ativo:before, #formulario #progress li.ativo:after{
	background:rgba(40, 208, 141, 0.9);
	color:white;
	text-shadow:0 1px 0;
}
$(function(){
	var atual_fs, next_fs, prev_fs;
    var formulario = $('form[name=formulario]');
	function next(elem){
		atual_fs = $(elem).parent();
		next_fs = $(elem).parent().next();

		$('#progress li').eq($('fieldset').index(next_fs)).addClass('ativo');
		atual_fs.hide(800);
		next_fs.show(800);
	}

	$('.prev').click(function(){
		atual_fs = $(this).parent();
		prev_fs = $(this).parent().prev();

		$('#progress li').eq($('fieldset').index(atual_fs)).removeClass('ativo');
		atual_fs.hide(800);
		prev_fs.show(800);
	});
    
    $('input[name=next1]').click(function(){
        var array= formulario.serializeArray();
        if(array[0].value =='' || array[1].value =='' || array[2].value==''){
            
            $('.resp').html('<div class ="erros"><p>preencha todos os campos para avançar</p></div>');
        }else{
           $('.resp').html('');
           next($(this));
        }
    });
    
    $('input[name=next2]').click(function(){
        var array = formulario.serializeArray();
        if(array[3].value =='' || array[4].value =='' || array[5].value==''){
            
            $('.resp').html('<div class ="erros"><p>informe seus perfis sociais para avançar</p></div>');
        }else{
           $('.resp').html('');
           next($(this));
        }
    });
    
    $('input[type=submit]').click(function(evento){
        var array = formulario.serializeArray();
        if(array[6].value == '' || array[7].value == '' || array[8].value == ''){
            
            $('.resp').html('<div class ="erros"><p>informe suas informaçoes pessoais para ser efetuado o cadastro</p></div>');
        }else{
            $.ajax({
                type:'post',
                url:'cadastrar.php',
                dataType:'json',
                data: {cadastrar:'sim', campos: array},
                beforeSend: function(){
                    $('.resp').html('<div class="erros"><p>Aguarde enquanto processamos seus dados...</p></div>');
                },
                success: function(valor){
                    if(valor.erro == 'sim'){
                        $('.resp').html('<div class="erros"><p>'+valor.getErro+'</p></div>');
                    }else{
                        $('.resp').html('<div class="ok">'+valor.msg+'</div');
                    }
                } 
            });
        }
        evento.preventDefault();
    });
});


	

 

Share this post


Link to post
Share on other sites

@ricardonews 

 

Dei uma olhada no seu código e seu problema está no javascript e não no php.

 

Você citou que o formulário e limpo. porem você não colocou nenhum comando para fazer isso!

 

Quando tem algum erro no método javascript que faz a interrupção do evento de submit, ele não consegue interromper o evento, mesmo assim ele executa o submit, e como não tem um action definido no form ele envia o formulário para a mesma página, nessa falha o erro do console é apagado e você não consegue ver o erro.

 

Eu notei um erro na seleção do formulário, você faz a seleção com base no atributo 'name' com o valor 'formulario', porem no formulário que você passo você coloca o id com o valor 'formulario', e não o atributo 'name'.

 

Você seleciona o formulário assim;

 var formulario = $('form[name=formulario]');

Porem você não colocou o atributo 'name' nele, e sim um atributo id, o código ficaria assim:

 var formulario = $('#formulario');

 

Antes de você fazer esse teste, recomendo a você adiciona um comando direto no evento submit direto no form:

<form id="formulario" method="post" onsubmit="return false;">

Adicionado uma operação no evento submit que retorna por padrão o valor falso, você vai interromper o evento de submit, de enviar o formulário, com isso você vai poder ler o console de erro e verificar qual é o problema no formulário e no javascript.

 

 

 

 

 

Share this post


Link to post
Share on other sites

 Grabielms , eu tinha esquecido do console, valeu pela dica... fui lá e realmente era  o js

eu tentei arrumar e não consegui, já fui atraz de tutorias mas nada resolve.

olha só o print dos erros, se puder me ajudar eu agradeço.

esse erro aqui.png

Share this post


Link to post
Share on other sites

@ricardonews Esse é só um aviso, não é um erro, ele pede para você informa o atributo autocomplete do input type password.

 

Para permitir que o gerenciador de senhas do usuário digite a senha automaticamente, especifique o atributo autocomplete. Para senhas, o valor dele deve ser geralmente um dos seguintes:

"on"
Permite que o navegador ou um gerenciador de senhas preencha automaticamente o campo de senha. Esse valor não é tão informativo quanto "current-password" ou "new-password".
"off"
Não permite que o navegador ou gerenciador de senhas preencha automaticamente o campo de senha. Vale observar que alguns softwares ignoram esse valor, já que ele costuma ser prejudicial para a capacidade dos usuários de manter senhas seguras.
"current-password"
Permite que o navegador ou gerenciador de senhas preencha automaticamente o campo de senha. Esse valor fornece mais informações do que "on", já que ele permite que o navegador ou gerenciador de senhas digite automaticamente a senha atualmente conhecida do site no campo, mas não que sugira uma nova.
"new-password"
Permite que o navegador ou gerenciador de senhas digite automaticamente uma nova senha para o site. Esse valor é usado em formulários de "mudar senha" e de "novo usuário", no campo que pede por uma nova senha. A nova senha pode ser gerada de várias maneiras, dependendo do gerenciador de senhas usado. Ele pode simplificar o preenchimento de uma sugestão de nova senha, ou mesmo pode mostrar ao usuário uma interface para criar uma.

Se possível coloca o html do formulário de cadastro, você colocou o do painel de login e o javascript do formulário de cadastro, vou deixa um exemplo usando o seu css e html e uma parte do seu código javascript, esse formulário está funcionando sem erros.

<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<title>Formulario de login </title>
		<style>
            *{margin:0; padding:0;}
            html{
                height:100%;
                background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9));
            }
            .erros, .ok
            {
                padding:5px;
                background:rgba(238, 249, 113, 0.9);
                margin: 20px auto 0 auto;
                border: 1px solid rgba(222,239,10,0.9);
                border-radius: 4px;
                color: #333;

            }
            .ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;}
            body{
                font-family: "Trebuchet MS", tahoma, arial;
            }

            #formulario{
                width:500px;
                margin:40px auto;
                text-align:center;
                position:relative;
            }

            #formulario h2, #formulario h3{
                font:22px "Trebuchet MS", tahoma, arial;
                color:#090;
                width:100%;
                float:left;
                text-align:left;
                margin-bottom:4%;
            }

            #formulario h3{color:#333; font-size:17px;}

            #formulario fieldset{
                background:white;
                border:0 none;
                border-radius:5px;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;

                box-shadow:0 0 15px 1px rgba(0,0,0, 0.4);
                padding:20px 30px;

                box-sizing: border-box;
                width:80%;
                margin:0 10%;
                position:absolute;
            }

            #formulario fieldset:not(:first-of-type){
                display:none;
            }

            #formulario input, #formulario textarea{
                padding:10px;
                border:1px solid rgba(38, 128, 101, 0.9);
                border-radius:4px;
                -moz-border-radius:4px;
                -webkit-border-radius:4px;
                outline:none;
                box-sizing: border-box;
                width:100%;
                font:14px "Trebuchet MS", tahoma, arial;
                color:#090;
                margin-bottom:10px;
            }
            #formulario .acao{
                width:100px;
                background:rgba(38, 128, 101, 0.9);
                color:white;
                text-transform:uppercase;
                font-weight:bold;
                padding:12px 0;
                float:left;
                margin-right:5%;
            }
            #formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;}

            #formulario #progress{
                margin-bottom:30px;
                overflow:hidden;

                counter-reset: step;
            }

            #formulario #progress li{
                list-style-type:none;
                color:white;
                font-weight:bold;
                text-transform:uppercase;
                font-size:10px;
                float:left;
                width:33.33%;
                position:relative;
            }

            #formulario #progress li:before{
                content: counter(step);
                counter-increment: step;
                width:20px;
                display:block;
                line-height:20px;
                background:white;
                color:#333;
                border-radius:10px;
                -moz-border-radius:10px;
                -webkit-border-radius:10px;

                margin:0 auto 10px auto;
            }

            #formulario #progress li:after{
                content: '';
                width:100%;
                background:white;
                height:2px;
                position:absolute;
                top:9px;
                left:-50%;
                z-index:-1;
            }
            #formulario #progress li:first-child:after{
                content:none;
            }

            #formulario #progress li.ativo:before, #formulario #progress li.ativo:after{
                background:rgba(40, 208, 141, 0.9);
                color:white;
                text-shadow:0 1px 0;
            }
        </style>
	</head>

	<body>
        <form id="formulario" method="post" onsubmit="return false;">
            <label class="resp"></label>
            <br>
			<ul id="progress">
			<fieldset>
				<h2>Configuracoes da conta</h2>
                <h3>Area de login </h3>
                <input type="text" name="nome" placeholder="Nome" />
                <input type="text" name="sobrenome" placeholder="Sobrenome" />
                <input type="text" name="email" placeholder="Email" />
                <input type="password" name="senha" autocomplete="" placeholder="Senha" />
                <input type="password" name="csenha" autocomplete="" placeholder="Senha" />
                <input type="text" name="telefone" placeholder="Telefone" />
                <input type="text" name="facebook" placeholder="Facebook" />
                <input type="text" name="twitter" placeholder="Twitter" />
                <input type="text" name="google" placeholder="Google" />
				<input type="submit" class="next acao" value="Cadastrar" />
			</fieldset>
        </form>
        <script>
            $(function(){
                var formulario = $('#formulario');
                
                $('input[type=submit]').click(function(evento){
                    var array = formulario.serializeArray();
                    console.log(array);
                    if(array[0].value == '' || array[1].value == '' || array[2].value == '' || array[3].value == '' || array[4].value == ''){   
                        $('.resp').html('<div class ="erros"><p>informe suas informaçoes pessoais para ser efetuado o cadastro</p></div>');
                    }else{
                        $.ajax({
                            type:'post',
                            url:'cadastrar.php',
                            dataType:'json',
                            data: {cadastrar:'sim', campos: array},
                            beforeSend: function(){
                                $('.resp').html('<div class="erros"><p>Aguarde enquanto processamos seus dados...</p></div>');
                            },
                            success: function(valor){
                                console.log(valor);
                                if(valor.erro == 'sim'){
                                    $('.resp').html('<div class="erros"><p>'+valor.getErro+'</p></div>');
                                }else{
                                    $('.resp').html('<div class="ok">'+valor.msg+'</div');
                                }
                            } 
                        });
                    }
                    evento.preventDefault();
                    return false;
                });
            });
        </script>
	</body>
</html>

 

 

 

 

Share this post


Link to post
Share on other sites

Amigo Gabrielms, eu te agradeço pela ajuda,  realmente esse fórum é muito bom e parece ser o melhor passando na frente de vários fórum, tem pessoas como você que ajuda agente. obrigado desde já pela ajuda.

eu já tinha feito o procedimento de cadastro com o php jquery, ajax, e usando json.

desculpa pela confusão que fiz, porem o seu procedimento de cadastro foi ultil também. mas na verdade oque eu não consegui e nem sei o porque não dá certo é o login usando jquery e ajax e php . eu tenho um sistema de login que funciona mas eu não consigo fazer funcionar  esse login eu estou postando 2 sistema de login, oque eu já havia postado anteriormente com css,  que é oque eu não consigo fazer logar no banco. e o outro que eu consigo. se não for te incomodar ... se puder me ajudar a entender o porque não funciona para eu fazer funcionar ele. eu te agradeço muito. porque se fosse tudo em php talvez eu poderia saber  oque havia de errado, mas js eu tenho dificuldade de entender.

<?php 
require_once 'CLASSES/usuarios.php';
$u = new Usuario();
?>

<html>
	<head>
		<title>Formulario de login </title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		
	</head>

	<body>
		<form id="formulario" method="post">
			<ul id="progress">
			<fieldset>
				<h2>Configuracoes da conta</h2>
				<h3>Area de login </h3>
				<input type="text" name="email" placeholder="Email" />
				<input type="password" name="senha" placeholder="Senha" />
				<input type="submit" name="next" class="next acao" value="Logar" />
				<a href="cadastro.php"><strong>Cadastrar</strong></a>
			</fieldset>
		</form>
	</body>
</html>
 esse é a index que não funciona o sistema de logar 
*{margin:0; padding:0;}
html{
	height:100%;
	background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9));
}
.erros, .ok
{
	width:390px;
	padding:5px;
	background:rgba(238, 249, 113, 0.9);
	margin: 20px auto 0 auto;
	border: 1px solid rgba(222,239,10,0.9);
	border-radius: 4px;
	color: #333;

}
.ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;}
body{
	font-family: "Trebuchet MS", tahoma, arial;
}

#formulario{
	width:500px;
	margin:40px auto;
	text-align:center;
	position:relative;
}

#formulario h2, #formulario h3{
	font:22px "Trebuchet MS", tahoma, arial;
	color:#090;
	width:100%;
	float:left;
	text-align:left;
	margin-bottom:4%;
}

#formulario h3{color:#333; font-size:17px;}

#formulario fieldset{
	background:white;
	border:0 none;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;

	box-shadow:0 0 15px 1px rgba(0,0,0, 0.4);
	padding:20px 30px;

	box-sizing: border-box;
	width:80%;
	margin:0 10%;
	position:absolute;
}

#formulario fieldset:not(:first-of-type){
	display:none;
}

#formulario input, #formulario textarea{
	padding:10px;
	border:1px solid rgba(38, 128, 101, 0.9);
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	outline:none;
	box-sizing: border-box;
	width:100%;
	font:14px "Trebuchet MS", tahoma, arial;
	color:#090;
	margin-bottom:10px;
}
#formulario .acao{
	width:100px;
	background:rgba(38, 128, 101, 0.9);
	color:white;
	text-transform:uppercase;
	font-weight:bold;
	padding:12px 0;
	float:left;
	margin-right:5%;
}
#formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;}

#formulario #progress{
	margin-bottom:30px;
	overflow:hidden;

	counter-reset: step;
}

#formulario #progress li{
	list-style-type:none;
	color:white;
	font-weight:bold;
	text-transform:uppercase;
	font-size:10px;
	float:left;
	width:33.33%;
	position:relative;
}

#formulario #progress li:before{
	content: counter(step);
	counter-increment: step;
	width:20px;
	display:block;
	line-height:20px;
	background:white;
	color:#333;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;

	margin:0 auto 10px auto;
}

#formulario #progress li:after{
	content: '';
	width:100%;
	background:white;
	height:2px;
	position:absolute;
	top:9px;
	left:-50%;
	z-index:-1;
}
#formulario #progress li:first-child:after{
	content:none;
}

#formulario #progress li.ativo:before, #formulario #progress li.ativo:after{
	background:rgba(40, 208, 141, 0.9);
	color:white;
	text-shadow:0 1px 0;
}

agora vou postar um funcionando mas que na verdade eu queria que fosse o de cima funcionando.

<!doctype html>
<html>
<?php
    require_once"config.php";
?>
    <head>
        <title>APRENDIZ DE JS</title>
        <link href="style.css" rel="stylesheet" type="text/css">

        <script src="jquery-3.2.1.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){

                $("#but_submit").click(function(){
                    var username = $("#meu_nome").val().trim();
                    var password = $("#minha_senha").val().trim();

                    if( username != "" && password != "" ){
                        $.ajax({
                            url:'pesquisar.php',
                            type:'post',
                            data:{username:username,password:password},
                            success:function(response){
                                var msg = "";
                                if(response == 1){
                                    window.location = "home.php";
                                }else{
                                    msg = "Invalid username and password!";
                                }
                                $("#message").html(msg);
                            }
                        });
                    }
                });

            });
        </script>
    </head>
    <body>
        <div class="container">

            <div id="div_login">
                <h1>Login</h1>
                <div id="message"></div>
                <div>
                    <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="Username" />
                </div>
                <div>
                    <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="Password"/>
                </div>
                <div>
                    <input type="button" value="logar" name="but_submit" id="but_submit" />
                </div>
            </div>

        </div>
    </body>
</html>

esse aqui está funcionando perfeito

/* Container */
.container{
    width:40%;
    margin:0 auto;
}

/* Login */
#div_login{
    border: 1px solid gray;
    border-radius: 3px;
    width: 470px;
    height: 270px;
    box-shadow: 0px 2px 2px 0px  gray;
    margin: 0 auto;
}

#div_login h1{
    margin-top: 0px;
    font-weight: normal;
    padding: 10px;
    background-color: cornflowerblue;
    color: white;
    font-family: sans-serif;
}

#div_login div{
    clear: both;
    margin-top: 10px;
    padding: 5px;
}

#div_login .textbox{
    width: 96%;
    padding: 7px;
}

#div_login input[type=submit]{
    padding: 7px;
    width: 100px;
    background-color: lightseagreen;
    border: 0px;
    color: white;
}

#message{
    width:100%;
    text-align:center;
    color:red;
}
/* media */
@media screen and (max-width:720px){
    .container{
        width: 100%;
    }
    #div_login{
        width: 99%;
    }
}

<?php
    require_once "config.php";
 // AQUI É O PESQUISAR PHP
$uname = mysqli_real_escape_string($con,$_POST['username']);
$password = mysqli_real_escape_string($con,$_POST['password']);


if ($uname != "" && $password != ""){

    $sql_query = "SELECT count(*) as cntUser FROM usuarios WHERE username='".$uname."' and password='".$password."'";
    $result = mysqli_query($con,$sql_query);
    $row = mysqli_fetch_array($result);

    $count = $row['cntUser'];

    if($count > 0){
        $_SESSION['uname'] = $uname;
        echo 1;
    }else{
        echo 0;
    }

}
<?php
    require_once "config.php";
    // AQUI É A HOME
// Check user login or not
if(!isset($_SESSION['uname'])){
    header('Location: index.php');
}

// logout
if(isset($_POST['but_logout'])){
    session_destroy();
    header('Location: index.php');
}
?>
<!doctype html>
<html>
    <head>
    <title>SEJA BEM VINDO!</title>
    </head>
    <body>
        <h1>PÁGINA INICIAL</h1>
        <form method='post' action="">
            <input type="submit" value="SAIR" name="but_logout">
        </form>
    </body>
</html>
<?php

session_start();
// AQUI É A CONFIG PHP
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "login2"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

com essa eu não te incomodo e nem a todos do fórum, mas ao mesmo tempo gera valor para o fórum, quantas pessoas como eu devem estar com essa dificuldade como eu.se puder me ajudar nessa eu agradeço, pois eu fiz todos os teste e não consegui logar, só cadastrar eu consegui. desde já muito obrigado.

Share this post


Link to post
Share on other sites

@ricardonews 

 

Bom, dessa vez eu criei um formulário para o login, também fiz algumas modificações:

 

No form eu adicionei o action com o endereço do arquivo de login e no evento submit eu adicionei o return false, também no form eu adicionei o fechamento do elemento ul que estava faltando, fora do fonm em cima eu adicionei uma div com o id de resposta, que vai receber todas as mensagem para o usuário.

 

No head eu adicionei uma meta tag com charset uft-8, para podemos usar acentuação sem problemas, e fora do html eu adicionei o <!DOCTYPE html>, assim é possível usar o html 5 sem problemas.

 

<!DOCTYPE html>
<html>
    <head>
        <title>Login</title>
        <meta charset="utf-8">
        <link href="style.css" rel="stylesheet" type="text/css">
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="resposta"></div>
        <form id="formulario" action="login.php" method="post" onsubmit="return false">
			<ul id="progress">
                <fieldset>
                    <h2>Configuracoes da conta</h2>
                    <h3>Area de login </h3>
                    <input type="text" name="email" autocomplete="current-username" placeholder="Email" required>
                    <input type="password" name="senha" autocomplete="current-password" placeholder="Senha" required>
                    <input type="submit" name="next" class="next acao" value="Logar" />
                    <a href="cadastro.php"><strong>Cadastrar</strong></a>
                </fieldset>
            </ul>
        </form>
        <script>
            $(function(){

                var formulario = $("#formulario"),
                    resposta   = $("#resposta");

                formulario.on("submit", function(event){

                    let dados     = formulario.serializeArray(),
                        btnsubmit = formulario.find('input[type=submit]');
                        
                    dados[0]["value"] = dados[0]["value"].trim();
                    dados[1]["value"] = dados[1]["value"].trim();

                    if (dados[0]["value"] == "")
                    {
                        resposta.html('<div class="erros" >O campo "E-mail" está em branco!<div>');
                        return false;
                    }

                    if (dados[1]["value"] == "")
                    {
                        resposta.html('<div class="erros" >O campo "senha" está em branco!<div>');
                        return false;
                    }

                    $.ajax({
                        url: "login.php",
                        method:"POST",
                        dataType: "json",
                        data: dados,
                        beforeSend: function(){
                            resposta.html('<div class="erros" >Aguarde enquanto finalizamos o login...<div>');
                            btnsubmit.prop("disabled", true);
                        },
                        success: function(res){
                            if (typeof res == "object"){
                                if (res["status"] == 0){
                                    resposta.html('<div class="ok" >Login efetua do sucesso! <div>');
                                    formulario.html("");
                                    window.location = "painel.php";
                                }
                                else if(res["status"] == 1)
                                {
                                    resposta.html('<div class="erros" >'+res["msg"]+'<div>');
                                    btnsubmit.prop("disabled", true);
                                }
                                else
                                {
                                    resposta.html('<div class="erros" >Ocorreu um erro desconhecido no servidor, tente novamente mais tarde.<div>');
                                    btnsubmit.prop("disabled", true);
                                }
                            }else{
                                resposta.html('<div class="erros" >Ocorreu um erro desconhecido no servidor, tente novamente mais tarde.<div>');
                                btnsubmit.prop("disabled", true);
                            }
                        },
                        error: function(){
                            btnsubmit.prop("disabled", false);
                            resposta.html('<div class="erros" >Ocorreu um erro desconhecido no servidor, tente novamente mais tarde.<div>');
                        }
                    });
                    
                    event.preventDefault();
                    return false;
                });
            });
        </script>
    </body>
</html>

Nesse página eu uso o Jquery 3.4.1.

 

Para esse formulário de login funcionar corretamente ele espera uma resposta do servidor em formato json contendo um índice 'status' de tipo inteiro e o outro índice 'msg' de tipo string, sendo status 0, login efetuado com sucesso, e status 1 erro, o índice 'msg' só é necessário caso haja um erro de login.

 

O arquivo php ficário assim:

 

<?php

sleep(2);


function filtroLogin($x){
    $x = trim($x);
    $x = filter_var($x, FILTER_SANITIZE_EMAIL);
    return($x);
}

function filtroSenha($x){
    $x = md5($x);
    return $x;
}

if ($_SERVER["REQUEST_METHOD"] == "POST" and isset($_POST) and count($_POST) == 2){

    //require_once "config.php";

    $res = array();
    $dados = array();
    $res["status"] = 0;
    $res["msg"] = null;

    $num = 0;
    foreach ($_POST as $key => $value) {
        $dados[$num] = $_POST[$key];
        $num++;
    }

    $dados[0] = filtroLogin($dados[0]);
    $dados[1] = filtroSenha($dados[1]);

    if (empty($dados[0]))
    {
        $res["status"] = 1;
        $res["msg"] = "O campo 'E-mail' está em branco!";
    }

    if (empty($dados[1]))
    {
        $res["status"] = 1;
        $res["msg"] = "O campo 'senha' está em branco!";
    }

    if ($res["status"] == 0 and $res["msg"] == null)
    {
        $sql_query = "SELECT `username` FROM `usuarios` WHERE `username` = '".$dados[0]."' AND `password` = '".$dados[1]."' LIMIT 1;";
        $result = mysqli_query($con,$sql_query);
        
        if(mysqli_num_rows($result) > 0){
            $_SESSION['uname'] = $dados[0];
            $res["status"] = 0;
        }else{
            $res["status"] = 1;
            $res["msg"] = "Usuário ou senha invalido/s!";
        }
    }

    echo json_encode($res);

}

 

 

Share this post


Link to post
Share on other sites

Acredita que ainda deu um erro, mas agora tá fácil de resolver porque o erro está em não se conectar com o banco de dados eu acho. e eu vou descobrir oque acontece.

DEU ISSO.png

Share this post


Link to post
Share on other sites

Gabrielms, eu coloquei aqui e fico do mesmo jeito que está na imagem ai que voce postou, é que na hora de postar eu esqueci de colocar na postagem, mas nessa mesma postagem o css é o mesmo. mas obrigado pela alerta, e até agora não consegui achar o erro. vou mostrar o print do banco mas eu fiz uma alteração por ultimo de username para nome. mas mesmo assim não funcionou.

PRINT.png

Share this post


Link to post
Share on other sites

@ricardonews Você faz A consulta procurando o username, porem você falo que trocou o username pelo nome, mas você utiliza e-mail no formulário é não nome de usuário.

Você pode trocar o query de username e-mail

$sql_query = "SELECT `username` FROM `usuarios` WHERE `username` = '".$dados[0]."' AND `password` = '".$dados[1]."' LIMIT 1;";

Ficaria assim:

$sql_query = "SELECT `email` FROM `usuarios` WHERE `email` = '".$dados[0]."' AND `password` = '".$dados[1]."' LIMIT 1;";

 

Share this post


Link to post
Share on other sites

eu já tinha feito esse procedimento mas não funcionou também. mas eu fiz outro formulário de login usando o css que eu postei na imagem e funcionou perfeito. desde já agradeço pela ajuda  obrigado mesmo.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Carcleo
      A ideia:
       
      toda e entrada no site, seja com link direto do tipo:
       
      www.site.com.br/pasta1/pasta2/arquivo.php  
      ou normal url amigável
       
      www.site.com.br/categoria/tipo  
      tudo queria que redirecionasse para o index.php da raiz do site.
       
      E que, caso o arquivo ou pasta NÃO existisse, abrisse normalmente a pagina 404.php
       
       
      Tentei de tres formas mas nenhuma dá certo.
       
      Primeira forma
      RewriteEngine On ErrorDocument 400 http://www.sortecard.com.br/index.php ErrorDocument 401 http://www.sortecard.com.br/401.php ErrorDocument 403 http://www.sortecard.com.br/403.php ErrorDocument 404 http://www.sortecard.com.br/404.php ErrorDocument 500 http://www.sortecard.com.br/500.php php_value allow_url_fopen on php_value allow_url_include on php_flag mail_filter 0 RewriteCond %{HTTP:X-Forwarded-Proto} !https RewriteCond %{HTTPS} off RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] RewriteCond %{SCRIPT_FILENAME} !-f RewriteCond %{SCRIPT_FILENAME} !-d RewriteRule ^(.*)$ index.php?page=$1 Segunda forma:
      Options +FollowSymLinks DirectorySlash On RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f [OR] RewriteCond %{REQUEST_FILENAME} \.php$ RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php?request=$1 [L] Terceira forma:
      RewriteEngine On ErrorDocument 400 http://www.sortecard.com.br/index.php ErrorDocument 401 http://www.sortecard.com.br/401.php ErrorDocument 403 http://www.sortecard.com.br/403.php ErrorDocument 404 http://www.sortecard.com.br/404.php ErrorDocument 500 http://www.sortecard.com.br/500.php php_value allow_url_fopen on php_value allow_url_include on php_flag mail_filter 0 RewriteCond %{HTTP:X-Forwarded-Proto} !https RewriteCond %{HTTPS} off RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] RewriteRule ^(.*)$ index.php?page=$1 Problemas:
       
      A) Quando acesso a url diretamente não está redirecionando para o index.
      B) Quando falo que é para redirecionar todos os arquivos ele não me dá os parêmetros. 
    • By Pellegrini3834
      Ola galera do IMasters!!!!!!
       
      Estou com uma duvida eu tenho um CRUD em php MVC e queria saber em que camada fica as mensagens depois de uma realização de um evento por exemplo:
      Cadastro de Pessoa, depois de cadastrada quero que ele emita uma mensagem dizendo que a "PESSOA FOI CADASTRADA COM SUCESSO!!!!" e eu queria saber  em que parte ela fica se é no Controle ou na View porque sabemos que no modelo fica a parte referente a manipulação de dados.
      Obrigado.
    • By Henrique Augusto Rohloff
      Olá! Sou iniciante e estou treinando para configurar uma página de buscas de produtos em um banco de dados.
      Os produtos já estão sendo encontrados quando a palavra bate com os itens do banco. A conexão com o banco de dados está funcionando corretamente. Porém, quando nada é encontrado, queria que aparecesse uma mensagem "Nenhum resultado, tente novamente." Já tentei com  else de tudo que é jeito mas não aparece corretamente... Qual é o jeito certo?
       
      Segue o código:
       
       
    • By maruoppolo
      Olá, tenho 2 tabelas:
       
      tb_dados: ID - MUSICA
       
      tb_votos: ID - VOTO - RADIO - MUSICA
       
      Preciso fazer uma query que traga as musicas da tb_dados porém ordenando pelo número de votos que ela teve na tb_votos.
       
      Então assim, existem 2 tipos de voto 1 = like e 2 = dislike, cada ver que um usuário vota eu pego qual radio que ele esta ouvindo e salvo no campo radio, o id da musica na tb_dados e salvo no campo musica da tb_votos e coloco o número 1 para like e 2 para dislike no campo voto.
       
      A query precisa contar quantos likes teve na tv_votos filtrando por radio e mostrando os resultados em ordem decrescente as musicas com mais likes.
       
      A ideia é trazer as 10 musicas com mais like de cada radio
       
      Alguma ideia de como fazer?? Estou enroscado nisso a dias.
    • By Chester1
      oi, eu to tentando mexer com servidores agora no PHP e esta dando um erro muito estranho que quando eu procuro em um programa que acha erros de sintaxe ele me diz que o erro esta no </HTML>    se alguem puder me dizer qual foi o erro que eu cometi eu agradeceria
       

       
      <HTML> <HEAD><TITLE>incluindo no banco de dados</TITLE></HEAD> <body> <BODY bgcolor="#d0d0d0"> <center> <h3>Lanchonete coma bem (voltada para o internauta)</h3> <h1>24horas</h1> <?php $login_digitado=$_POST['login']; $senha=$_POST['senha']; $nome=$_POST['nome']; $email=$_POST['email']; $telefone=$_POST['telefone']; $celular=$_POST['celular']; $endereco=$_POST['endereco']; $complemento=$_POST['complemento']; if ($login_digitado == "" || $senha == "" || $nome =="" || $email == "" || $telefone == "" || $endereco == "" || $complemento == "") { echo "existem(m) campos(s) de preenchimento obrigatorio em branco,<BR> infelizmente tera que voltar para preenche-lo(s)."; echo "<BR><a href=\"cadastro.php\">clique aqui para tentar novamente</a>"; } else { { $link=mysql_connect("localhost", "root", "") or die ("<h1>nao foi possivel conectar !!!</h1> ".mysql_error());  
      obs :estou trabalhando com formularios e servidores
         
         
         
         
      ?>
      </BODY>
      </HTML>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.