Existe diferenças de login em php e js?

[ricardonews 0]

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.

[gabrielms 0]

@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?

[ricardonews 0]

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

[gabrielms 0]

@ricardonews 

 

Se possível, tira um print do Console de log, da Network, da Header da requisição e do Preview, com esses dados é possível que eu verifique o erro.

[ricardonews 0]

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();
    });
});


	

 

[gabrielms 0]

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

 

 

 

 

 

[ricardonews 0]

 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.

[gabrielms 0]

@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>

 

 

 

 

[ricardonews 0]

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.

[gabrielms 0]

@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);

}

 

 

[ricardonews 0]

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.

[gabrielms 0]

@ricardonews Falto o layout também

 

[ricardonews 0]

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.

[gabrielms 0]

@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;";

 

[ricardonews 0]

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.