Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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();
    });
});


	

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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>

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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);

}

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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;";

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • Por luiz monteiro
      Olá, tudo bem?
       
      Estou melhorando meu conhecimento em php e mysql e, me deparei com o seguinte. A tabela da base de dados tem um campo do tipo varchar(8) o qual armazena números. Eu não posso alterar o tipo desse campo. O que preciso é fazer um select para retornar o números que contenham zeros a direita ou a esquerda.
      O que tentei até agora
       
      Ex1
      $busca = $conexao->prepare("select campo form tabela where (campo = :campo) ");
      $busca->bindParam('campo', $_REQUEST['campo_form']);
       
      Se a direita da string $_REQUEST['campo_form'] termina ou inicia com zero ou zeros, a busca retorna vazio.
      Inseri dados numéricos, da seguinte maneira para testar: 01234567;  12345670: 12345678: 12340000... entre outros nessa coluna. Todos os valores que não terminam ou não iniciam com zero ou zeros, o select funciona.
       
       
      Ex2
      $busca = $conexao->prepare("select campo form tabela where (campo = 0340000) ");
      Esse número está cadastrado, mas não retorna.
       
      Ex3
      $busca = $conexao->prepare("select campo form tabela where (campo = '02340001' ) ");
      Esse número está cadastrado, mas não retorna.
       
       
      Ex4
      $busca = $conexao->prepare("select campo form tabela where (campo like 2340000) ");
      Esse número está cadastrado, mas não retorna.
       
      Ex5
      $busca = $conexao->prepare("select campo form tabela where (campo like '12340000') ");
      Esse número está cadastrado, mas não retorna.
       
      Ex6
      $busca = $conexao->prepare("select campo form tabela where (campo like '"12340000"' ) ");
      Esse número está cadastrado, mas não retorna.
       
       
      Ex7
      $busca = $conexao->prepare("select campo form tabela where (campo like :campo) ");
      $busca->bindParam('campo', $_REQUEST['campo_form'])
      Não retorna dados.
       
      O  $_REQUEST['campo_form'] é envio via AJAX de um formulário. 
      Usei o gettype para verificar o post, e ele retorna string.
      Fiz uma busca com número 12345678 para verificar o que o select retorna, e também retrona como string.
       
      Esse tipo de varchar foi usado porque os números que serão gravados nesse campo,  terão zeros a direita ou na esquerda. Os tipos number do mysql não gravam zeros, então estou usando esse. O problema é a busca.
      Agradeço desde já.
       
       
    • Por daemon
      Boa tarde,
       
      Eu tenho uma rotina que faz uma leitura do arquivo .xml de vários sites.

      Eu consigo pegar o tópico e a descrição, e mostrar a imagem que esta na pagina do link.
      Para isso utilizo esta função:
      function getPreviewImage($url) { // Obter o conteúdo da página $html = file_get_contents($url); // Criar um novo objeto DOMDocument $doc = new DOMDocument(); @$doc->loadHTML($html); // Procurar pela tag meta og:image $tags = $doc->getElementsByTagName('meta'); foreach ($tags as $tag) { if ($tag->getAttribute('property') == 'og:image') { return $tag->getAttribute('content'); } } // Se não encontrar og:image, procurar pela primeira imagem na página $tags = $doc->getElementsByTagName('img'); if ($tags->length > 0) { return $tags->item(0)->getAttribute('src'); } // Se não encontrar nenhuma imagem, retornar null return null; } // Uso: $url = "https://example.com/article"; $imageUrl = getPreviewImage($url); if ($imageUrl) { echo "<img src='$imageUrl' alt='Preview'>"; } else { echo "Nenhuma imagem encontrada"; }  
      Mas estou com um problema, esta funcão funciona quando coloco em uma pagina de teste.php. Preciso mostrar em uma página inicial diversas fotos de todos os links. (No caso acima só funciona 1).
    • Por violin101
      Caros amigos, saudações.
       
      Por favor, me permita tirar uma dúvida com os amigos.

      Tenho um Formulário onde o Usuário digita todos os Dados necessários.

      Minha dúvida:
      --> como faço após o usuário digitar os dados e salvar, o Sistema chamar uma Modal ou mensagem perguntando se deseja imprimir agora ?

      Grato,
       
      Cesar
    • Por Carcleo
      Tenho uma abela de usuarios e uma tabela de administradores e clientes.
      Gostaria de uma ajuda para implementar um cadastro
       
      users -> name, login, passord (pronta) admins -> user_id, registratiom, etc.. client -> user_id, registratiom, etc...
      Queria ajuda para extender de user as classes Admin e Client
      Olhem como estáAdmin
      <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Admin extends User {     use HasFactory;            protected $fillable = [         'name',         'email',         'password',         'registration'     ];      private string $registration;     public function create(         string $name,          string $email,          string $password,         string $registration     )     {         //parent::create(['name'=>$name, 'email'=>$email, 'password'=>$password]);         parent::$name = $name;         parent::$email = $email;         parent::$password = $password;         $this->registration = $registration;     } } User
      <?php namespace App\Models; // use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable; use Illuminate\Database\Eloquent\Relations\BelongsToMany; class User extends Authenticatable {     /** @use HasFactory<\Database\Factories\UserFactory> */     use HasFactory, Notifiable;     static string $name;     static string $email;     static string $password;     /**      * The attributes that are mass assignable.      *      * @var list<string>      */     protected $fillable = [         'name',         'email',         'password',     ];          /**      * The attributes that should be hidden for serialization.      *      * @var list<string>      */     protected $hidden = [         'remember_token',     ];     /**      * Get the attributes that should be cast.      *      * @return array<string, string>      */     protected function casts(): array     {         return [             'email_verified_at' => 'datetime',             'password' => 'hashed',         ];     }          public function roles() : BelongsToMany {         return $this->belongsToMany(Role::class);     }       public function hasHole(Array $roleName): bool     {                 foreach ($this->roles as $role) {             if ($role->name === $roleName) {                 return true;             }         }         return false;     }         public function hasHoles(Array $rolesName): bool     {                 foreach ($this->roles as $role) {             foreach ($rolesName as $rolee) {             if ($role->name === $rolee) {                 return true;             }          }         }         return false;     }         public function hasAbility(string $ability): bool     {         foreach ($this->roles as $role) {             if ($role->abilities->contains('name', $ability)) {                 return true;             }         }         return false;     }     } Como gravar um Admin na tabela admins sendo que ele é um User por extensão?
      Tentei assim mas é claro que está errado...
      public function store(Request $request, Admin $adminModel) {         $dados = $request->validate([             "name" => "required",             "email" => "required|email",             "password" => "required",             "registration" => "required"         ]);         $dados["password"] =  Hash::make($dados["password"]);                  $admin = Admin::where("registration",  $dados["registration"])->first();                  if ($admin)              return                    redirect()->route("admin.new")                             ->withErrors([                                 'fail' => 'Administrador já cadastrados<br>, favor verificar!'                   ]);                            $newAdmin = $adminModel->create(                                    $dados['name'],                                    $dados['email'],                                    $dados['password'],                                    $dados['registration']                                 );         dd($newAdmin);         $adminModel->save();         //$adminModel::create($admin);                  return redirect()->route("admin.new")->with("success",'Cadastrado com sucesso');     }  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.