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 jeandelima
      Olá pessoal, estava querendo saber se podem me ajudar com uma pequena dúvida que surgiu há poucos dias.
       
      Estou com problemas pra importar um banco de dados pra o usar no meu servidor local (xampp). O banco de dados foi exportado do site de um cliente, e lá no server eles usam o mysql. Instalei a versão mais recente do xampp no meu pc, e quando fui importar o banco pra poder começar os trabalhos, deu vários erros de sintaxe. Daí fiz umas pesquisas e encontrei alguns materiais que mencionavam que o xampp agora usa o mariadb, e ele não é 100% compatível com mysql.
       
      Estou há um bom tempo sem mexer com programação e também sem me atualizar das coisas, e gostaria de saber se alguém sabe a partir de qual versão do xampp eles passaram a usar o mariadb. Eu já pesquisei mas não obtiver sucesso. E instalar e desinstalar inúmeras versões é algo trabalhoso e cansativo demais. Alguém poderia me ajudar?
       
      Desde já, muito obrigado.
       
      PS.: Por ser novo aqui no forum, e por não frequentar forum há muito tempo, acho que acabei postando no lugar errado. Peço perdão aos adms.
    • By Ygor Silva
      Boa tarde gente. Tenho meu site em Mobirise, pra pegar leads. 
      Ao cliente clicar em enviar ele só mostra a mensagem de "obrigado, aguarde nosso contato". 
      Eu gostaria que em vez disto, ele encaminhasse ele pra página de obrigado.
      Já tentei um mente de coisas mas não funcionou.
       
      Segue abaixo o código. Este meu formulário é formoid.
      <div data-form-type="formoid">                     <!---Formbuilder Form--->                     <form action="https://mobirise.com/" method="POST" class="mbr-form form-with-styler" data-form-title="Mobirise Form"><input type="hidden" name="email" data-form-email="true" value="A6LDZwZh8SsHY2SXE5G0uDeobTt+vGAPyztLTpaFnJ3YS523L+3ekb+dfC0ljSO2ENKcG2x7MzCrFsvX6BsE84UN+iQwUvASww4aTuqS7DVv4QO8axCqYvnhYxsAOEpX">                         <div class="row">                             <div hidden="hidden" data-form-alert="" class="alert alert-success col-12">Obrigado por deixar seu contato. Em breve ligaremos pra você.</div>                             <div hidden="hidden" data-form-alert-danger="" class="alert alert-danger col-12">                             </div>                         </div>                         <div class="dragArea">                             <div class="col-md-6  form-group" data-for="name">                                 <input type="text" name="name" placeholder="Seu nome" data-form-field="Name" required="required" class="form-control input display-7" id="name-form4-d">                             </div>                             <div class="col-md-6  form-group" data-for="phone">                                 <input type="text" name="phone" placeholder="Telefone" data-form-field="Phone" required="required" class="form-control input display-7" id="phone-form4-d">                             </div>                             <div data-for="email" class="col-md-12  form-group">                                 <input type="text" name="email" placeholder="E-mail" data-form-field="Email" class="form-control input display-7" required="required" id="email-form4-d">                             </div>                                                          <div class="col-md-12 input-group-btn  mt-2 align-center"><button type="submit" class="btn btn-primary btn-form display-4" href="obrigado.html#header3-2j">ENVIAR</button></div>                         </div>                     </form><!---Formbuilder Form--->                 </div>  
    • By Good
      Boa tarde,
       
      temos um servidor na amazon, e o site está direcionado para o servidor. Estamos tendo um problema, de vez em quando o servidor cai. 
       
      Gostaríamos de saber se tem algum programa no ubuntu, que monitore qual arquivo que teve alto consumo. Para sabermos se o código está escrito de maneira complexa, causando a queda do servidor.
       
      Eu lembro que uma vez a hostgator mandou um relatório, avisando que tal arquivo estava consumindo muito do servidor. É possível fazer esse monitoramento? Não temos como ficar 24h olhando por exemplo o htop..
       
      Aguardo uma resposta,
      obrigado!
    • By Marcos RJ
      Caros colegas. Tudo bem?
       
      Tenho uma loja virtual do qual tem foi integrado o Paypal. Para isso, fiz dessa forma. 
       
      $statusCompras = "<form action=\"https://www.paypal.com/cgi-bin/webscr\" method=\"post\">            <input type=\"hidden\" name=\"cmd\" value=\"_xclick\" />            <!--Vendedor e URL de retorno, cancelamento e notificação-->            <input type=\"hidden\" name=\"business\" value=\"vendas@sitecliente.com.br\" />            <input type=\"hidden\" name=\"return\" value=\"http://www.sitecliente.com.br/retorno/\" />            <!--Internacionalização e localização da página de pagamento-->            <input type=\"hidden\" name=\"charset\" value=\"utf-8\" />            <input type=\"hidden\" name=\"lc\" value=\"BR\" />            <input type=\"hidden\" name=\"country_code\" value=\"BR\" />            <input type=\"hidden\" name=\"currency_code\" value=\"BRL\" />            <!--Informações sobre o produto e seu valor-->            <input type=\"hidden\" name=\"amount\" value=\"".$valorCarrinho."\">            <input type=\"hidden\" name=\"item_name\" value=\"Servico\" />            <input type=\"hidden\" name=\"item_number\" value=\"".$jmNumPedido->NumPedido."\">            <input type=\"hidden\" name=\"quantity\" value=\"1\" />";            $statusCompras .= "<button type='submit' class='btn btn-danger' style='color: #FFF; font-weight: bold'>";            $statusCompras .= "Aguardando Pagamento<br>";            $statusCompras .= "<span style='font-weight: normal'>Para efetuar seu pagamento<br>clique aqui!</span>"; Estou passando o número do pedido pelo item_number, porém o cliente está reclamando que não está conseguindo identificar a compra, pois muitos deles acabam se logando com os dados de terceiros e também acabam usando o cartão de terceiros. Minha intenção era passa o número do pedido pelo item_number para facilitar a identificação, mas acho que não funcionou. Alguém poderia me ajudar nisso? Sei que existe API, mas estou tendo dificuldades nisso. 
       
      Muito obrigado!!
    • By asacap1000
      Galera estou com uma dúvida, tenho a parte de envio de dados para em Post, com encode json e curl. Já pesquisei em todos os lugares e não encontrei nada pra clarear as idéias.
       
      a parte final é essa do envio (cliente)
      header("Content-Type: ".$mediaType); $headers = array(); $headers[] = "Accept: ".$mediaType; $headers[] = "Accept-Charset: ".$charSet; $headers[] = "Accept-Encoding: ".$mediaType; $headers[] = "Content-Type: ".$mediaType.";charset=".$charSet; $headers[] = "Authorization: Basic ".$AuthorizationHeaderBase64; $ch = curl_init(); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS,"contatos=$contatos"); #campos que serão enviados curl_setopt($ch, CURLOPT_USERPWD, $AuthorizationHeaderBase64); curl_setopt($ch, CURLOPT_HEADER, $headers); curl_setopt($ch, CURLINFO_HTTP_CODE, true); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);#ativa se for ter retorno do chamada $result = curl_exec($ch); $result2 = json_decode($result,true); curl_close($ch); if($result2 === false) { $err = 'Curl error: ' . curl_error($ch); $result2 = $err; echo "This is text".$err; } var_dump ($result2);  
      Preciso de ajuda para entender como deve ser feito a página que será chamada, no caso lado servidor.
       
      Como pode ver tenho um header configurado e será enviado com chave de autorização agora como isso é feito do lado servidor??
       
      Se alguém puder me ajudar, preciso entregar este webservice sexta feira 18/10. Todos os dados recebidos serão salvos no BD Oracle.
       
       
×

Important Information

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