Login dinâmico PHP + MySQL com jQuery

Como criar um sistema de login bem simples, porém dinâmico, ou seja, vamos fazer a validação sem a necessidade de recarregar a página, utilizando AJAX.

Por | @@faael Programação Pular para comentários

Olá pessoal, tudo bom? A pedido de algumas pessoas, hoje vou falar como criar um sistema de login bem simples, porém dinâmico, ou seja, vamos fazer a validação sem a necessidade de recarregar a página, utilizando AJAX.

1. Banco de dados


Inicialmente iremos criar nosso banco de dados:
CREATE TABLE `usuario` (
  `usuario_id` INTEGER  NOT NULL AUTO_INCREMENT,
  `login` VARCHAR(28)  NOT NULL,
  `senha` varchar(80)  NOT NULL,
  `nome` varchar(60)  NOT NULL,
  PRIMARY KEY (`usuario_id`)
)
ENGINE = MyISAM;

Bem simples, apenas contém uma chave primária (ID), o login, a senha e o nome do usuário. Vamos agora inserir alguns registros de exemplo:
INSERT INTO usuario VALUES (1, 'admin', 'admin', 'Administrador');
INSERT INTO usuario VALUES (2, 'rafael', 'couto', 'Rafael Couto Alves');
INSERT INTO usuario VALUES (3, 'foo', 'bar', 'Fulano');


2. Formulário de login (index.html)


Vamos criar a aparência da nossa página de login:


    
        
        Entrar</title>
    </head>
    <body>
        <form id="frmLogin" action="ajax/logar.php" method="post">
            <fieldset>
                <legend>Entrar</legend>
 
                <div class="loader" style="display: none;">
                    <img itemprop="image" class="lazy " src="image/loader.gif" alt="Carregando" />
                </div>
                <div class="mensagem-erro"></div>
 
                <p>
                    <label for="login">Usuário</label> <br />
                    <input type="text" id="login" name="login" />
                </p>
 
                <p>
                    <label for="senha">Senha</label> <br />
                    <input type="password" id="senha" name="senha" />
                </p>
 
                <input type="submit" value="Entrar" />
            </fieldset>
        </form>
    </body>
</html></code></pre><br />
<br />
Nada de mais, é apenas um formulário HTML com dois campos, login e senha, e um botão de submit. No cabeçalho (head) de nossa página, vamos incluir uma biblioteca e um plugin javascript:<br />
<pre><code><script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.form.js'></script></code></pre><br />
Linha 1: incluindo a biblioteca indispensável: <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-2587', 'para_url_http://jquery.com/']);" href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=http%3A%2F%2Fjquery.com%2F"  target="_blank"     rel="nofollow noreferrer noopener">jQuery</a>.<br />
Linha 2: incluindo um plugin para jQuery, o <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-2587', 'para_url_http://jquery.malsup.com/form/']);" href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=http%3A%2F%2Fjquery.malsup.com%2Fform%2F"  target="_blank"     rel="nofollow noreferrer noopener">jQuery Form</a>. Ele facilita a requisição AJAX, pois não precisamos pegar e passar cada campo (como é feito <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-2587', 'para_url_http://faael.net/envio-de-formulario-sem-refresh-com-jquery-php/']);" href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=http%3A%2F%2Ffaael.net%2Fenvio-de-formulario-sem-refresh-com-jquery-php%2F"  target="_blank"     rel="nofollow noreferrer noopener">nesse artigo</a>, por exemplo), o plugin já faz este trabalho pela gente.<br />
<br />
<br />
<h2>3. jQuery (index.html)</h2><br />
Nessa parte, vamos recuperar as informações do formulário e enviar para a página PHP. Adicione o seguinte <a onclick="_gaq.push(['_trackEvent', 'link_tag', 'pfr2587', 'tagto_codigo']);" href='https://www.oficinadanet.com.br/codigo'>código</a> no cabeçalho de nossa index.html:<br />
<pre><code>// Quando carregado a página
$(function($) {
    // Quando enviado o formulário
    $('#frmLogin').submit(function() {
 
        // Limpando mensagem de erro
        $('div.mensagem-erro').html('');
 
        // Mostrando loader
        $('div.loader').show();
 
        // Enviando informações do formulário via AJAX
        $(this).ajaxSubmit(function(resposta) {
 
            // Se não retornado nenhum erro
            if (!resposta)
                // Redirecionando para o painel
                window.location.href = 'painel.php';
            else
            {
                // Escondendo loader
                $('div.loader').hide();
 
                // Exibimos a mensagem de erro
                $('div.mensagem-erro').html(resposta);
            }
 
        });
 
        // Retornando false para que o formulário não envie as 
        //informações da forma convencional
        return false;
     });
});</code></pre><br />
<br />
<strong>Vamos analisar o código:</strong><br />
<ul>
<li>Linha 5: Aplicamos o evento submit no formulário (#frmLogin), ou seja, assim que o usuário clicar em entrar este método será chamado.</li><li>Linha 14: Através do método ajaxSubmit() do nosso plugin, as informações do formulário são enviadas para seu action (logar.php), através do método definido no formulário, no caso, POST. Isso é o equivalente ao .post() nativo do jQuery, porém o plugin já captura e envia as informações para nós;</li><li>Linha 17: Verificamos se a resposta retornada pelo nosso logar.php é falsa, ou seja, 0;</li><li>Linha 19: Se a resposta for falsa, significa que o login deu certo, portanto redirecionamos o usuário para seu painel (painel.php);</li><li>Linha 26: Se o login não deu certo, colocamos a mensagem retornada pelo logar.php na div cujo a classe é mensagem-erro;</li><li>Linha 32: Precisamos retornar false para que o formulário não seja enviado, pois nós já enviamos as informações e recebemos a resposta via AJAX.</li></ul><br />
<br />
<h2>4. Conexão e configuração (config/conn.php)</h2><br />
Aqui vamos criar nosso arquivo para fazer a conexão com o banco de dados, nesse arquivo também vamos criar um método para carregar automaticamente a classe de login que veremos adiante.<br />
<pre><code><?php
// Informações para conexão
$host = 'localhost';
$usuario = 'root';
$senha = 'senha';
$banco = 'banco';
// Realizando conexão e selecionando o banco de dados
$conn = mysql_connect($host, $usuario, $senha) or die(mysql_error());
$db = mysql_select_db($banco, $conn) or die(mysql_error());
// Definindo o charset como utf8 para evitar problemas com acentuação
$charset = mysql_set_charset('utf8');
// Função para carregar a classe automaticamente, quando instanciado um objeto
function __autoload($class)
{
    require_once(dirname(__FILE__) . "/../class/{$class}.class.php");
}
?></code></pre><br />
<br />
<h2>5. Logando (ajax/logar.php)</h2><br />
Este arquivo será responsável por fazer criar o login do usuário. Para facilitar e diminuir muitas linhas de código eu criei uma classe simples (a classe deste artigo foi melhorada, porém os métodos são os mesmos) para fazer a ações básicas de um login. Portanto, nosso código fica da seguinte maneira:<br />
<pre><code><?php
// Incluindo arquivo de conexão/configuração
require_once('../config/conn.php');
 
// Instanciando novo objeto da classe Login
$objLogin = new Login();
 
// Recuperando informações enviadas
$login = $_POST['login'];
$senha = $_POST['senha'];
 
// Se conseguir encontrar o usuário e a senha estiver correta
if ($objLogin->logar($login, $senha))
    // Retornando falso, ou seja, esta tudo certo
    echo false;
else
    // Retornando mensagem de erro
    echo 'Login ou senha inválidos';
?></code></pre><br />
<br />
Repare que não foi necessário incluir o arquivo da classe Login, pois no arquivo de configuração (config/conn.php) foi definida a função __autoload(), ou seja, assim que o objeto $objLogin é criado, o __autoload() se encarrega de incluir o arquivo da classe, porém o arquivo da classe deve seguir o padrão: Classe.class.php.<br />
<br />
<strong>Vamos a alguns detalhes:</strong><br />
Linha 6: Criamos um objeto da nossa classe Login. Por padrão a tabela é usuario, a chave primária é usuario_id, o campo login é login e o campo senha é senha. Porém, poderíamos definir outras informações passando os parâmetros do construtor, exemplo:<br />
<pre><code>$objLogin = new Login('tb_usuarios', 'codigo', 'campo_login', 'campo_senha');</code></pre><br />
<br />
Linha 13: O método logar() aceita um terceiro parâmetro que é para onde o usuário será redirecionado se o login e senha estiverem corretos, no caso, isso não nos interessa, pois esta é uma página que será recebida pela requisição AJAX, portanto o método irá apenas retornar true, se as informações estiverem corretas, ou, caso contrário, false.<br />
<br />
<br />
<h2>6. Painel do usuário (painel.php)</h2><br />
Esta é uma das página da qual apenas um usuário que esteja logado terá acesso, para isso, precisamos apenas verificar se o usuário está logado:<br />
<pre><code><?php
// Incluindo arquivo de conexão/configuração
require_once('config/conn.php');
 
// Instanciando novo objeto da classe Login
$objLogin = new Login();
 
// Verificando se o usuário está logado, caso contrário será redirecionado para a página de login
if (!$objLogin->verificar('index.html'))
    // Finalizado o script, apenas para garantir que o usuário não irá ver o conteúdo da página
    exit;
?></code></pre><br />
<br />
Depois que reconhecido que o usuário está logado. podemos recuperar o ID e o login do usuário que estão na sessão, através do objeto de login, por exemplo:<br />
<pre><code><?php
echo "ID: {$objLogin->getID()} <br />";
echo "Login: {$objLogin->getLogin()}";
?></code></pre><br />
<br />
Tendo o ID, podemos recuperar todas as suas informações, fazendo um simples SELECT:<br />
<pre><code>// Selecionando informações do usuário
$query = mysql_query("SELECT * FROM usuario WHERE usuario_id = {$objLogin->getID()}");
$usuario = mysql_fetch_object($query);</code></pre><br />
<br />
Sendo assim, podemos mostrar as informações que não estão na sessão:<br />
<pre><code>echo "Bem vindo {$usuario->nome}";</code></pre><br />
<br />
<h2>7. Logout (sair.php)</h2><br />
Para finalizar a sessão é muito simples:<br />
<pre><code><?php
// Incluindo arquivo de conexão/configuração
require_once('config/conn.php');
 
// Instanciando novo objeto da classe Login
$objLogin = new Login();
 
// Finaliza a sessão e redireciona o usuário para a página de login
$objLogin->logout('index.html');
?></code></pre><br />
<br />
<h2>8. Finalizando</h2><br />
Bom pessoal, por hoje é isso, tentei detalhar o máximo possível, mas não houve tempo para explicar sobre a estrutura da classe, nem alguns detalhes sobre a programação orientada a objetos, isto fica para uma próxima, ok?<br />
<br />
<a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-2587', 'para_url_/imagens/coluna/2966/login_ajax.rar']);" href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%2Fimagens%2Fcoluna%2F2966%2Flogin_ajax.rar"  rel="nofollow noreferrer noopener" target="_blank"    >Download dos arquivos</a><br />
<br />
Espero que vocês tenham entendido e que a idéia seja útil para vocês. Qualquer dúvida, sugestão ou crítica construtiva, deixe um comentário ou envie um email. Até a próxima, abraços.<br /></p><script src="https://painel.m3midia.com.br/lib/prism/prism.js"></script><link rel="stylesheet" type="text/css" href="https://painel.m3midia.com.br/lib/prism/prism.css"></p>
                </div>
                    <div class="wifl m-t-30">
                        <p><strong>Recomendações do editor:</strong></p>
                        <ul class="relacionadolink"><li><a onclick="_gaq.push(['_trackEvent', 'recomendacoes_editor', 'pfr2587', 'pto24780']);" href="https://www.oficinadanet.com.br/seguranca/24780-arquivo-com-22-bilhoes-de-logins-e-senhas-vaza-na-internet">Arquivo com 2,2 bilhões de logins e senhas vaza na internet</a></li><li><a onclick="_gaq.push(['_trackEvent', 'recomendacoes_editor', 'pfr2587', 'pto24671']);" href="https://www.oficinadanet.com.br/facebook/24671-link-para-visualizar-quem-visitou-seu-perfil-no-facebook-rouba-seu-login-e-senha">Link para visualizar quem visitou seu perfil no Facebook rouba seu login e senha</a></li><li><a onclick="_gaq.push(['_trackEvent', 'recomendacoes_editor', 'pfr2587', 'pto16850']);" href="https://www.oficinadanet.com.br/post/16850-dividir-senha-da-netflix-pode-se-tornar-ilegal">Dividir senha da Netflix pode se tornar ilegal</a></li><li><a onclick="_gaq.push(['_trackEvent', 'recomendacoes_editor', 'pfr2587', 'pto15942']);" href="https://www.oficinadanet.com.br/post/15942-windows-10-como-desativar-o-login-com-senha">Windows 10: Como desativar o login com senha</a></li><li><a onclick="_gaq.push(['_trackEvent', 'recomendacoes_editor', 'pfr2587', 'pto11326']);" href="https://www.oficinadanet.com.br/post/11326-usuarios-que-usam-aplicativos-de-outros-com-login-do-facebook-recebem-mais-seguranca">Usuários que usam aplicativos de outros com login do Facebook recebem mais segurança</a></li>
                        </ul>
                    </div><p>Mais sobre: <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2587', 'para_php']);"  href="https://www.oficinadanet.com.br/php" >php</a>, <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2587', 'para_código']);"  href="https://www.oficinadanet.com.br/codigo" >código</a>, <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2587', 'para_login']);"  href="https://www.oficinadanet.com.br/login" >login</a></p>
                
            </div>
            <script>try { _402_Show(); } catch(e) {}</script>
        </div>  
            <div class="bar2" >

                <div class="bar2"><div class="wifl m-b-40"><span class="titulo1" ><span>Conteúdos recentes</span></span><ul class="lst122  wifl  lsn "  ><li  >
                        <a href="https://www.oficinadanet.com.br/hardware/25883-divisao-nvidia-geforce-publica-teaser-misterioso-de-super-placa-de-video"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2587', 'pto25883']);"   >
                                <span class="img box-img" ><img src="https://www.oficinadanet.com.br/imagens/post/25883/capa_nvidia_super_1400x875_5ce8550e5686f_14080.jpg" title="Divisão Nvidia GeForce publica teaser misterioso de "Super" placa de vídeo" alt="Divisão Nvidia GeForce publica teaser misterioso de "Super" placa de vídeo" />
                                </span>
                            <span class="infoprimeiro" >
                                <span class="tit" >24/05/2019  17:36h</span>
                                <span class="tit tit2" >Divisão Nvidia GeForce publica teaser misterioso de "Super" placa de vídeo</span>
                            </span>
                        </a>
                    </li><li  >
                        <a href="https://www.oficinadanet.com.br/tecnologia/25881-google-drive-extingue-plano-de-20-gb-e-assinantes-tem-servico-gratis"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2587', 'pto25881']);"   >
                            <span class="info" >
                                <span class="tit" >24/05/2019  17:06h</span>
                                <span class="tit tit2" >Google Drive extingue plano de 20 GB, e assinantes têm serviço grátis</span>
                            </span>
                        </a>
                    </li><li  >
                        <a href="https://www.oficinadanet.com.br/tecnologia/25876-a-mudanca-de-cultura-por-tras-da-abreviacao-do-numero-de-inscritos-nos-canais-do-youtube"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2587', 'pto25876']);"   >
                            <span class="info" >
                                <span class="tit" >24/05/2019  16:33h</span>
                                <span class="tit tit2" >A mudança de cultura por trás da abreviação do número de inscritos nos canais do YouTube</span>
                            </span>
                        </a>
                    </li><li  >
                        <a href="https://www.oficinadanet.com.br/smartphones/25880-agora-a-microsoft-bloqueia-a-huawei"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2587', 'pto25880']);"   >
                            <span class="info" >
                                <span class="tit" >24/05/2019  16:32h</span>
                                <span class="tit tit2" >Agora a Microsoft bloqueia a Huawei?</span>
                            </span>
                        </a>
                    </li><li  >
                        <a href="https://www.oficinadanet.com.br/tecnologia/25826-qual-e-a-diferenca-entre-vpn-e-proxy"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2587', 'pto25826']);"   >
                            <span class="info" >
                                <span class="tit" >24/05/2019  16:29h</span>
                                <span class="tit tit2" >Qual é a diferença entre VPN e Proxy?</span>
                            </span>
                        </a>
                    </li><li  >
                        <a href="https://www.oficinadanet.com.br/netflix2019/25528-titulos-que-serao-removidos-da-netflix-em-maio-de-2019"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2587', 'pto25528']);"   >
                            <span class="info" >
                                <span class="tit" >24/05/2019  14:55h</span>
                                <span class="tit tit2" >Títulos que serão removidos da Netflix em maio de 2019</span>
                            </span>
                        </a>
                    </li><li  >
                        <a href="https://www.oficinadanet.com.br/smartphones/25879-samsung-libera-atualizacao-para-linha-galaxy-10-com-melhoras-no-modo-noturno"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2587', 'pto25879']);"   >
                            <span class="info" >
                                <span class="tit" >24/05/2019  14:04h</span>
                                <span class="tit tit2" >Samsung libera atualização para linha Galaxy 10 com melhoras no modo noturno</span>
                            </span>
                        </a>
                    </li><li  >
                        <a href="https://www.oficinadanet.com.br/tecnologia/25877-oito-vitimas-do-golpe-do-whatsapp-registram-queixa-em-niteroi"  onclick="_gaq.push(['_trackEvent', 'barra_novos', 'pfr2587', 'pto25877']);"   >
                            <span class="info" >
                                <span class="tit" >24/05/2019  13:17h</span>
                                <span class="tit tit2" >Oito vítimas do golpe do WhatsApp registram queixa em Niterói</span>
                            </span>
                        </a>
                    </li></ul></div>      
                </div>
                <div class="bar2 p-rel" id="out_post_barra" data-distance="30" >
                    <div class="bar2" id="post_barra" >
                            <div class='wifl m-b-40'>
                                <!-- /6524261/ON_300x600_LATERAL -->
                                <div id='div-gpt-ad-1555093777375-0'>
                                <script>
                                googletag.cmd.push(function() { googletag.display('div-gpt-ad-1555093777375-0'); });
                                </script>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        <div class="wifl bottom_pause_post_barra"><div style="float:left;">
<div style="width: 300px; float: left;">
<!-- /6524261/ON_FOOTER -->
<div id="div-gpt-ad-1512402583744-0" style="margin:auto; height:250px; width:300px;">
<script>
googletag.cmd.push(function() { googletag.display("div-gpt-ad-1512402583744-0"); });
</script>
</div>
</div></div>
            <div style="float:left; max-width:750px; margin-left:20px" class="wifl"><span class="titulo1" ><span>O QUE LER EM SEGUIDA</span></span><ul class="lst4 post wifl  lsn "  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/16773-teorema-fundamental-da-legibilidade"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2587', 'pto16773']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1"></span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/16773/codego_200113.jpg" title="Teorema fundamental da legibilidade" alt="Teorema fundamental da legibilidade" >
                                    <span class="gradient"></span>
                                </div>
                                <span class="wifl tit4">Teorema fundamental da legibilidade</span>
                                <div class="wifl nfo">
                                    <span class="ass-autor cor2">por Jonathan Lamim</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/artigo/1347/o_sistema_binario"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2587', 'pto1141']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1"></span>
                                    <img src="https://www.oficinadanet.com.br/_template/imagem/padrao.jpg" title="O que é o Sistema Binário" alt="O que é o Sistema Binário" >
                                    <span class="gradient"></span>
                                </div>
                                <span class="wifl tit4">O que é o Sistema Binário</span>
                                <div class="wifl nfo">
                                    <span class="ass-autor cor2">por S.Lopes</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/10087-alterando-as-cores-do-google-maps"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2587', 'pto10087']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1"></span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/10087/gmaps-home_200113.png" title="Alterando as cores do Google Maps com Javascript" alt="Alterando as cores do Google Maps com Javascript" >
                                    <span class="gradient"></span>
                                </div>
                                <span class="wifl tit4">Alterando as cores do Google Maps com Javascript</span>
                                <div class="wifl nfo">
                                    <span class="ass-autor cor2">por Daniel Flores Bastos</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/9495-tabela-de-cores-html"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2587', 'pto9495']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1"></span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/9495/colors_200113.jpg" title="Tabela de cores HTML" alt="Tabela de cores HTML" >
                                    <span class="gradient"></span>
                                </div>
                                <span class="wifl tit4">Tabela de cores HTML</span>
                                <div class="wifl nfo">
                                    <span class="ass-autor cor2">por Nicolas Muller</span></div>
                            </a>
                        </li></ul>
            </div>
<style>
    #share_container{position:relative;height:auto;margin:7px 0;display:inline-block;}
    #share_container .share_menu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap;margin:0;padding:0px;background-color:transparent;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
    #share_container .share_menu.vertical.right{right:0;top:calc(50% - 120px);}
    #share_container .share_menu.vertical.left{left:0;top:calc(50% - 120px);}
    #share_container .share_menu.vertical{-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;position:fixed;padding:10px;z-index:2147483694;background-color:#fff;border-radius:2px;}
    #share_container .share_menu.vertical li{margin:5px auto;background-color:#fff;border: 1px solid #cecece;border-radius: 5px; cursor: pointer}
    #share_container .share_menu.vertical li:hover{border: 1px solid #f3661a;}
    #share_container .share_menu li{list-style:none;position:relative;text-align:center;margin:5px 2px 0px;padding:0px;font-size:0px;width:30px;height:30px;}
        #share_container .facebookShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-fb.png);display: block;}
    #share_container .twitterShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-tw.png);display: block;}
    #share_container .linkedinShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-in.png);display: block;}
    #share_container .emailShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-mail.png);display: block;}
    #share_container .whatsappShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-wa.png);display: block;}
    #share_container .telegramShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-tg.png);display: block;}
    
@media screen and (max-width:1100px) {
    #share_container {display: none}
}
</style>
<div id="share_container" class=" left">
    <ul class="share_menu left vertical">
        <li class="share_btn visible" title="Compartilhe no Facebook"  onclick="  window.open('https://www.facebook.com/sharer/sharer.php?app_id=209309632417494&u=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fphp%2Flogin-dinamico-php-mysql-com-jquery%3Futm_source%3Dfacebook%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais','','width=600,height=400');  _gaq.push(['_trackEvent', 'btshare', 'facebook', 'https://www.oficinadanet.com.br/artigo/php/login-dinamico-php-mysql-com-jquery?utm_source=facebook&utm_medium=sharebutton&utm_campaign=RedesSociais']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2587','flgcomment');  " ><span class="facebookShare">Facebook</span></li>
        <li class="share_btn visible" title="Compartilhe no Twitter"  onclick="  window.open('https://twitter.com/intent/tweet?text=Login+din%C3%A2mico+PHP+%2B+MySQL+com+jQuery+%7C+Por+%40%40faael+%7C+&url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fphp%2Flogin-dinamico-php-mysql-com-jquery%3Futm_source%3Dtwitter%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais&via=oficinadanet','','width=600,height=400');  _gaq.push(['_trackEvent', 'btshare', 'twitter', 'https://www.oficinadanet.com.br/artigo/php/login-dinamico-php-mysql-com-jquery?utm_source=twitter&utm_medium=sharebutton&utm_campaign=RedesSociais']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&twitter=1&id=2587','flgcomment');  " ><span class="twitterShare">Twitter</span></li>
        <li class="share_btn visible" title="Compartilhe no Linkedin"  onclick="  window.open('https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fphp%2Flogin-dinamico-php-mysql-com-jquery%3Futm_source%3Dlinkedin%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais&summary=Como+criar+um+sistema+de+login+bem+simples%2C+por%C3%A9m+din%C3%A2mico%2C+ou+seja%2C+vamos+fazer+a+valida%C3%A7%C3%A3o+sem+a+necessidade+de+recarregar+a+p%C3%A1gina%2C+utilizando+AJAX.&title=Login+din%C3%A2mico+PHP+%2B+MySQL+com+jQuery&source=oficinadanet','','width=600,height=400');  _gaq.push(['_trackEvent', 'btshare', 'linkedin', 'https://www.oficinadanet.com.br/artigo/php/login-dinamico-php-mysql-com-jquery?utm_source=linkedin&utm_medium=sharebutton&utm_campaign=RedesSociais']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2587','flgcomment');  " ><span class="linkedinShare">Linkedin</span></li>
        <li class="share_btn visible" title="Compartilhe por Email"  onclick="  document.location='mailto:?subject=Login dinâmico PHP + MySQL com jQuery | Por @@faael | &body=Artigo: https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fphp%2Flogin-dinamico-php-mysql-com-jquery%3Futm_source%3Dshr_mail%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais';  _gaq.push(['_trackEvent', 'btshare', 'email', 'https://www.oficinadanet.com.br/artigo/php/login-dinamico-php-mysql-com-jquery?utm_source=shr_mail&utm_medium=sharebutton&utm_campaign=RedesSociais']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2587','flgcomment');  " ><span class="emailShare">Email</span></li>
        <li class="share_btn visible" title="Compartilhe pelo WhatsApp"  onclick="  _gaq.push(['_trackEvent', 'btshare', 'whatsapp', 'https://www.oficinadanet.com.br/artigo/php/login-dinamico-php-mysql-com-jquery?utm_source=whatsapp&utm_medium=sharebutton&utm_campaign=RedesSociais']);  window.open('https://api.whatsapp.com/send?text=Login dinâmico PHP + MySQL com jQuery - https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fphp%2Flogin-dinamico-php-mysql-com-jquery%3Futm_source%3Dwhatsapp%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais');  " ><span class="whatsappShare">WhatsApp</span></li>
        <li class="share_btn visible" title="Compartilhe pelo Telegram"  onclick="  _gaq.push(['_trackEvent', 'btshare', 'telegram', 'https://www.oficinadanet.com.br/artigo/php/login-dinamico-php-mysql-com-jquery?utm_source=telegram&utm_medium=sharebutton&utm_campaign=RedesSociais']);  window.open('https://telegram.me/share/url?url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fphp%2Flogin-dinamico-php-mysql-com-jquery%3Futm_source%3Dtelegram%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais&text=Login+din%C3%A2mico+PHP+%2B+MySQL+com+jQuery');  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2587','flgcomment');  " ><span class="telegramShare">Telegram</span></li>
    </ul>
</div>
        </div>
        <div class="wifl">
            <div class="content5 ">
                        <div class="wifl post-bottom1" id="boxcomment" >
                            <span class="titulo1 tit_tag" ><span>Comentários</span></span>
                    <div id="btcarregarcomments_disqus" class="bt-all tpl2 wifl">Carregar comentários</div>
                    <div id="comment" class="comentarios_box">
                        <div id="disqus_thread"></div>
                    </div>
                        </div>
            </div>
            <div class="bar2 m-t-30" ><div class="wifl m-b-40"><span class="titulo1" ><span>Destaques</span></span><ul class="lst121  wifl  lsn "  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/smartphones/22319-o-que-e-o-codigo-imei"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2587', 'pto22319']);"    >
                                <span class="nr">1</span>
                                <h3 class="tit tit2" >O que é o código IMEI em celulares?</h3>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/smartphones/21711-asus-zenfone-3-comeca-a-receber-atualizacao-para-o-android-80-oreo"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2587', 'pto21711']);"    >
                                <span class="nr">2</span>
                                <h3 class="tit tit2" >Asus Zenfone 3 começa a receber atualização para o Android 8.0 Oreo</h3>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/15229-voce-sabe-qual-e-o-tamanho-do-google"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2587', 'pto15229']);"    >
                                <span class="nr">3</span>
                                <h3 class="tit tit2" >Você sabe qual é o tamanho do Google?</h3>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/12767-como-funciona-o-codigo-de-barras"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2587', 'pto12767']);"    >
                                <span class="nr">4</span>
                                <h3 class="tit tit2" >Como funciona o código de barras</h3>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/10790-electronic-arts-acaba-com-o-online-pass-em-seus-games"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2587', 'pto10790']);"    >
                                <span class="nr">5</span>
                                <h3 class="tit tit2" >Electronic Arts acaba com o Online Pass em seus games</h3>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/10756-dan-rosenberg-consegue-quebrar-codigo-de-seguranca-do-novo-samsung-galaxy-s4"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2587', 'pto10756']);"    >
                                <span class="nr">6</span>
                                <h3 class="tit tit2" >Dan Rosenberg consegue quebrar código de segurança do novo Samsung Galaxy S4</h3>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/10557-google-disponibiliza-parte-do-codigo-do-google-glass"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2587', 'pto10557']);"    >
                                <span class="nr">7</span>
                                <h3 class="tit tit2" >Google disponibiliza parte do código do Google Glass</h3>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/10249-ouya-videogame-de-codigo-aberto-chega-nesta-quinta-feira-28-de-marco"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2587', 'pto10249']);"    >
                                <span class="nr">8</span>
                                <h3 class="tit tit2" >Ouya, videogame de código aberto chega nesta quinta-feira, 28 de março</h3>
                            </a>
                        </li></ul></div>
            </div>
        </div>   
    </section>
</div></div>
                <script>
                    var disqus_shortname = 'oficinadanet'; // required: replace example with your forum shortname
                    var disqus_url = 'https://www.oficinadanet.com.br/artigo/php/login-dinamico-php-mysql-com-jquery';

                    var disqus_config = function () {
                        this.callbacks.onNewComment = [function(comment) {ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2587','flgcomment');
                        }];
                    };
                    function carregaComentariosDisqus()
                    {
                        $('#btcarregarcomments_disqus').hide();

                        (function() {
                            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                           dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                        })();
                    }        
                </script>
                <div style="display:none;" id="flgcomment"></div>
    <script>
        function loadLazyMateria()
        {carregaComentariosDisqus();         
        }
    </script>
                </section>
<footer class="footer wifl" id="footer">
    <div class="corpo">
        <a href="https://www.oficinadanet.com.br" class="logo2"></a>
        <div class="out-menu-footer">
            <ul class="menu-footer lst-footer1 wifl">
                <li><a href="https://www.oficinadanet.com.br/sobre">Sobre</a></li>
                <li><a href="https://www.oficinadanet.com.br/contato">Contato</a></li>
                <li><a href="https://www.oficinadanet.com.br/privacidade" >Política de Privacidade</a></li>
                <li><a href="https://www.oficinadanet.com.br/equipe" >Equipe</a></li>
                <li><a href="https://www.oficinadanet.com.br/colabore" >Trabalhe conosco</a></li>
            </ul>
            <ul class="menu-footer wifl">
                <li><span class="linksredes" onclick="window.open('https://www.facebook.com/oficinadanet')">Facebook</span></li>
                <li><span class="linksredes" onclick="window.open('https://www.youtube.com/user/oficinadanettv')">Youtube</span></li>
                <li><span class="linksredes" onclick="window.open('https://twitter.com/OficinadaNet')">Twitter</span></li>
                <li><span class="linksredes" onclick="window.open('https://www.instagram.com/oficinadanetoficial/')">Instagram</span></li>
                <li><span class="linksredes" onclick="window.open('https://t.me/oficinadanet')">Grupo no Telegram</span></li>
            </ul>
            <ul class="menu-footer wifl">
                <li><a href="https://www.oficinadanet.com.br/siga-nossas-redes-sociais" >Siga as nossas redes sociais</a></li>
            </ul>
        </div>
        <div class="out-menu-cupons">
            <span>Descontos</span>
            <ul class="lst_cupons wifl lsn">
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-netshoes">Descontos Netshoes</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-saraiva">Descontos Saraiva</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-livraria-cultura">Descontos Livraria Cultura</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-fast-shop">Descontos Fast Shop</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-sou-barato">Descontos Sou Barato</a></li>
            </ul>
        </div>
        <div class="box-m3"  >
            <p class="wifl txt1">Um site do grupo</p>
            <a class="m3midia" href="http://www.m3midia.com.br"></a>
            <p class="wifl txt2">© 2005-2019 <span>M3 Mídia</span></p>
            <p class="wifl txt2">Todos os direitos reservados</p>
        </div>
    </div>
</footer>
            <span title="Ir para o topo" class="top_page" id="top_page" ><span></span></span>
        <script>
                var tempo = '1800';
                window.setTimeout('location.reload();', tempo*1000);
                </script>
                <div class="wifl hgt100 blackoverlay" id="blackoverlay"></div>
<div id="out_lib" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</div>
<script>
    
    var vv={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=vv._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=vv._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}
    function BV(str){return vv.decode(str);}

    function scrollPageToID(id)
    {
        $('html,body').animate({ scrollTop: $('#'+id).offset().top - ( $(window).height() - $('#'+id).outerHeight(true) ) / 2  }, 700);
    }

    function serializeDataAttr(form)
    {
        var dataarr = new Array();
        for(var i in form.data()) {
            var subarr = new Array();
            subarr['name'] = i;
            subarr['value'] = form.data()[i];
            dataarr.push(subarr);
        }
        return $.param(form.serializeArray().concat(dataarr));
    }

    function testaVazio(campo,comparacao,mensagem,erro)
    {
        if (erro == true) {return true;}
        if (document.getElementById(campo).value == comparacao)
        {
            alert (mensagem);
            document.getElementById(campo).value = "";
            document.getElementById(campo).focus();
            return true;
        }
        else {return false;}
    }
    function testaCheckBox(classe,mensagem)
    {
        erro = true;
        checkboxes = document.getElementsByClassName(classe);

        for(var i=0, n=checkboxes.length; i<n; i++)
        {
            if(checkboxes[i].checked)
                erro = false;
        }

        if(erro == true)
        {
            alert(mensagem);
            checkboxes[0].focus();
            return true;
        }
        else
            return false;
  }
  
    function setCookie (name,value,expires,path,domain,secure)
    {
      document.cookie = name + "=" + escape (value) +
        ((expires) ? "; expires=" + expires.toUTCString() : "") +
        ((path) ? "; path=" + path : "") +
        ((domain) ? "; domain=" + domain : "") +
        ((secure) ? "; secure" : "");
    }
    
    function ajaxDireto(url,param,retorno,tipo) //usa jquery
    {
        if(!tipo) tipo = "POST"
         $.ajax({
           type: tipo,
           url: url,
           data: param,
           success: function(html){
             $("#"+retorno).html(html);
           }
         });

    }

    function newsletterCad(e,step)
    {
//        alert(step);
//        alert(e);

        
    }

    function populaSelectCidade(ele)
    {
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=populaSelectCidade&sigla='+$(ele).val(),'select_cidade');
    }
    
        
    $(document).ready(function (e) {
       var header_height = $("header").height();
       $(window).scroll(function(){
           var scrolltop = $(window).scrollTop();
           if(scrolltop > 0)
               $('#out-img-curso-aberto').css('top',(($(window).scrollTop()/2) *-1) + header_height);
           else
               $('#out-img-curso-aberto').css('top',header_height+'px');
       });
    });

    var scroll_aux      = 0;
    var header_top      = $("#header").offset().top;
    var header_height   = $("#header").outerHeight();
    var window_height   = $(window).height();
    var height_document = $(document).height();
    
    
    function fixedMenu()
    {
        var scroll = $(window).scrollTop();

        if( scroll >= (header_top+header_height) )
        {
            if(scroll < scroll_aux )
            {
                $('#mov_header').css({'position':'fixed',transition: '0.3s','top':'0px'});
            }
            else
            {
                if( (scroll+window_height+20) > height_document )
                {
                    $('#mov_header').css({'position':'fixed',transition: '0.3s','top':'0px'});
                }
                else
                {
                    var v_tra  = '0.3s';
                    if( scroll <= ( header_top + header_height + 100) )
                        v_tra  = '0s';

                    $('#mov_header').css({'position':'fixed',transition: v_tra,'top':'-'+header_height+'px'});
                }
            }
        }
        else if(scroll <= header_top)
        {
            $('#mov_header').css({'position':'absolute',transition: '0.3s','top':'0px'});

        }
        scroll_aux = scroll;
    }

    function boxHoverSite(act,cic,e)
    {
        var top     = $(e).offset().top+$(e).outerHeight();
        var e_hover = '';

        if($(e).data('box-hover'))
        {
            e_hover = '#'+$(e).data('box-hover')+'_hover';

            switch(act)
            {
                case 2:
                    $('.contr_hov_itens').fadeOut(0);
                    $(e_hover).fadeIn(400);
                    $(e_hover).addClass('contr_hov_itens');
                    boxHoverSite(0,0,e);
                break;
                case 0:
                    if(cic < 5)
                    {
                        var timeBoxHoverSite = setTimeout(function()
                        {
                            cic++;
                            boxHoverSite(0,cic,e);
                        }, 500);
                    }
                    else
                    {
                        clearTimeout(timeBoxHoverSite);
                        if(!$(e_hover).is(":hover") && !$(e).is(":hover") && !$(e_hover+' *').is(":focus"))
                        {
                            $(e_hover).fadeOut(400);
                        }
                        else
                            boxHoverSite(0,0,e);
                    }

                break;
            }
        }
        else
        {
            $('.contr_hov_itens').fadeOut(0);
        }
    }

    function blackoverlay(act)
    {
        if(act)
        {
            $('#blackoverlay').fadeIn(400);
            $('html').addClass('no_scroll');
        }
        else
        {
            $('#blackoverlay').fadeOut(400);
            $('html').removeClass('no_scroll');
        }
    }

    function actAovivo()
    {
        window.location = "";
    }

    function actBodyPago()
    {
        window.open("");
    }

    function actMenuMobile(act)
    {
        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_mobile').trigger('classChange');

            if(!$('#menumobile-act').data('post-left'))
            {
                $('#menumobile-act').data('post-left',$('#menumobile-act').css('left'));
            }
            $('#menumobile-act').css('left','0');
            $('#menumobile').css('display','none');
            $('#fechar_menumobile').css('display','block');
        }
        else
        {
            $('#menumobile-act').css('left',$('#menumobile-act').data('post-left'));
            $('#blackoverlay').removeClass('blackoverlay_mobile').trigger('classChange');
            $('#menumobile').css('display','block');
            $('#fechar_menumobile').css('display','none');
        }
        blackoverlay(act);
    }

    function actAbreComments(act)
    {
        if(act)
        {
            var post_id        = $('#bt_new_cmt').data('post_id');
            var url            = $('#bt_new_cmt').data('url');
            var tipo           = $('#bt_new_cmt').data('tipo');
            var comentariosnrs = $('#bt_new_cmt').data('comentariosnrs');
            
            if($("#box_new_cmt_retorno").html() == '')
            {
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=getCommentsBox&post_id='+post_id+'&url='+url+'&tipo='+tipo+'&comentariosnrs='+comentariosnrs,'box_new_cmt_retorno');
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id='+post_id,'flgcomment');
            }
            
            $('#box_new_cmt_open').css('right','0');
            $('#bt_new_cmt_orelha').css('display','none');
            $('#bt_new_cmt_orelha_close').css('display','block');
            $('#bt_new_cmt_orelha_close').css('left','-30px');
        }
        else
        {
            var window_width = $(window).width();
            var right        = 'calc(-37% - 15px)';
            
            if(window_width < 1400)
            {
                right = '-330px';
            }
            
            $('#box_new_cmt_open').css('right',right);
            $('#bt_new_cmt_orelha_close').css('display','none');
            $('#bt_new_cmt_orelha').css('display','block');
            $('#bt_new_cmt_orelha').css('left','-43px');
        }
    }
    
    function actPopup(act,tipo)
    {
        if(act == 'fechar')
        {
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome='+tipo+'&valor=1','box_popup');
            $('#box_popup').css('display','none');
            $('#box_popup_big').css('display','none');
            $('#box_popup_mobile').css('display','none');
            blackoverlay();
        }
    }

    function actSmartMobile(act)
    {
        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_smart').trigger('classChange');

            if(!$('#smart_filtro_m-act').data('post-left'))
            {
                $('#smart_filtro_m-act').data('post-left',$('#smart_filtro_m-act').css('left'));
            }
            $('#smart_filtro_m-act').css('left','0');
            $('#smart_filtro_m_abre').css('display','none');
            $('#smart_filtro_m_fecha').css('display','block');
            $('#smart_filtro_ud_out').css('display','block');
        }
        else
        {
            $('#smart_filtro_m-act').css('left',$('#smart_filtro_m-act').data('post-left'));
            $('#blackoverlay').removeClass('blackoverlay_smart').trigger('classChange');
            $('#smart_filtro_m_abre').css('display','block');
            $('#smart_filtro_m_fecha').css('display','none');
            $('#smart_filtro_ud_out').css('display','none');
        }
        blackoverlay(act);
    }

    
    var scroll_aux2     = 0;
    var loadCheck       = 0;
    var window_width    = $(window).width();

    function fixedOnScroll(id)
    {   
        if ($('#' + id).length > 0)
        {
            if( window_width > 1300 )
            {

                var k_distance      = 10;
                var comp_height     = 0;
                var scroll_top      = $(window).scrollTop();
                var height_maior    = false;
                var bottom_pause    = height_document;

                var anchor_top_dist     = $('#' + id).offset().top;
                var item_movel_height   = $('#' + id + ' > *').height();

                if($( ".bottom_pause_post_barra" ).length)
                {
                    bottom_pause =  $( ".bottom_pause_post_barra" ).offset().top - ( k_distance + header_height + item_movel_height + parseInt($( ".bottom_pause_post_barra" ).css('margin-top')));
                }

                //console.log('3 '+item_movel_height+' '+bottom_pause+' '+scroll_top+' '+scroll_aux2+' '+scroll_aux+' conta: '+(bottom_pause - scroll_top));
                
                //console.log('4 '+(bottom_pause - scroll_top) +' --- '+ anchor_top_dist);
                
                if( ( bottom_pause - scroll_top) < 0  ) //chega ao fim
                {
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": 'initial',
                        "position": "fixed",
                        "bottom": "initial",
                        "transition":" 0s",
                        "top": (  (bottom_pause + k_distance + header_height) - scroll_top   )+'px'
                    });
                    if(loadCheck == 0)
                    {
                        loadLazyMateria();
                        
                        loadCheck = 1;
                    }

                }
                else if ((scroll_top + k_distance + header_height ) > anchor_top_dist) //scroll down
                {
                    k_distance = k_distance + header_height;
                    
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": $('#' + id + ' > *').offset().left + 'px',
                        "position": "fixed",
                        "top": (k_distance) + 'px',
                        "bottom": "initial",
                        "transition":" 0.8s all ease"

                    });
                }
                else if (( (scroll_top + k_distance) - comp_height ) > anchor_top_dist) //scroll up
                {
                    k_distance = k_distance + header_height;
                    
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": $('#' + id + ' > *').offset().left + 'px',
                        "position": "fixed",
                        "top": (k_distance)+'px',
                        "bottom": "initial",
                        "transition":" 0.8s all ease"
                    });
                }
                else
                {
                    $('#' + id + ' > *').css({
                        "z-index": "initial",
                        "left": 'initial',
                        "position": "initial",
                        "bottom": 'initial',
                        "top": 'initial'
                    });
                }
            }
            scroll_aux2 = scroll_top;
        }
    }

    function actBtVerMais(e)
    {
        var id = $(e).data('target');
        $('#'+id).show();
        $(e).hide();
    }

    function atcFixedOnScroll()
    {
        fixedOnScroll('out_post_barra');
    }

    
    function actContatoEmpresa(act,tipo)
    {
        if(act && tipo != 0)
        {

            if(tipo == 1)
                $('#empresa_contato_titulo').html('Entre em contato');
            else
                $('#empresa_contato_titulo').html('Solicite um orçamento');

            $('#hidden_tipo').val(tipo);

            $('#blackoverlay').addClass('blackoverlay_cont_empresa').trigger('classChange');
            $('#empresa_contato').fadeIn(400);
            $('#empresa_contato').height($('#empresa_contato'+' > *').outerHeight());
        }
        else
        {
            $('#empresa_contato').fadeOut(400);
            $('#blackoverlay').removeClass('blackoverlay_cont_empresa').trigger('classChange');
            $('#empresa_contato_titulo').html('');
        }
        blackoverlay(act);
    }

    function actBuscaDesktop(act)
    {
        $('#busca_clique').toggle();
        $('#busca_input').focus();
        $('#blackoverlay').addClass('blackoverlay_busca_desktop').trigger('classChange');
        blackoverlay(act);
    }

    function actBuscaObjeto()
    {
        $('#box_marca_closed').hide();
        $('#box_marca_busca').show();
        $('.box_marca').css('background-color','#f3661a');
        $('#busca_marca_input').focus();
    }

    function actCorrigirTexto(act,e)
    {
        if($('#modal_corrigir_txt').length == 0)
        {
            $(e).data('corrigir_titulo');
            $("html").append('<div class="modal modal-s block corrigir" id="modal_corrigir_txt" ><span class="load-ico" ></span></div>');
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=corrigirTexto&monta=1&corrigir_titulo='+$(e).data('corrigir_titulo')+'¶_email='+$(e).data('para_email'),'modal_corrigir_txt');
        }


        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_corrigir').trigger('classChange');
            $('#modal_corrigir_txt').fadeIn(400);
        }
        else
        {
            $('#modal_corrigir_txt').fadeOut(400);
            $('#blackoverlay').removeClass('blackoverlay_corrigir').trigger('classChange');
        }
        blackoverlay(act);
    }

    function newsletterCad(ele,s)
    {
        var cad_idx = $(ele).data('idx');
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php',$('#'+cad_idx+'_form1').serialize()+'&'+$('#'+cad_idx+'_form2').serialize(),$(ele).data('id_ulout'));
    }

    function fixedMenuDiagramado()
    {
        var scrolltop = $(window).scrollTop();

        if(scrolltop >= 350)
            $('.conteudo .out_menu_diagramado').css('top','0');
        else
            $('.conteudo .out_menu_diagramado').css('top','850px');
    };
    
    function fechaBoxBigPopup(gaq,cookie,link)
    {
        blackoverlay();
        setCookie(cookie,'1');
        _gaq.push(["_trackEvent", "popup_seguir", gaq, gaq]);
        document.location = link;
    }
    
    $(document).ready(function()
    {
            
        $(function ()
        {
            $(window).scroll(atcFixedOnScroll);
        });

        $('.disabled').click(function(e)
        {
           e.preventDefault();
        })

        $('.box_hover').mouseenter(function()
        {
            boxHoverSite(2,0,this);
        });

        $(window).scroll(fixedMenu);
        $(window).scroll(fixedMenuDiagramado);
        fixedMenu();
        fixedMenuDiagramado();
        $(".amenu_diagramado").click(function(){scrollPageToID($(this).attr('href').substring(1));});
        $(".bt_ver_mais").click(function(){ actBtVerMais(this); });
        $(".ver_mais_preco_obj").click(function(){ scrollPageToID('precos'); });
        $('#bt_header_busca').click(function(){ $('#busca_input').focus();});
        $('#smart_filtro_ud_dwn').click(function(){$(".smart_filtro").animate({scrollTop: '+=200px'}, 300);});
        $('#smart_filtro_ud_up').click(function(){$(".smart_filtro").animate({scrollTop: '-=200px'}, 300);});
        $('#mobile_busca').click(function(){ $('#mobile_bf').css('display','block');});
        $('#aovivo').click(function(){ actAovivo(); });
        $('#smart_filtro_m_abre').click(function(){ actSmartMobile(true); });
        $('#bt_new_cmt').click(function(){ actAbreComments(true); });
        $('#bt_new_cmt_orelha').click(function(){ actAbreComments(true); });
        $('#bt_new_cmt_orelha_close').click(function(){ actAbreComments(false); });
        $('.commentcall').click(function(){scrollPageToID('boxcomment');});
        $('#busca_clique_open').click(function(){ actBuscaDesktop(true); });
        $('#box_marca_closed').click(function(){ actBuscaObjeto(); });
        $('#smart_filtro_m_fecha').click(function(){ actSmartMobile(false); });
        $('#menumobile').click(function(){ actMenuMobile(true); });
        $('.fechar_sticky').click(function(){ actPopup('fechar','OFICINA_STICKY'); });
        $('#fechar_menumobile').click(function(){ actMenuMobile(false); });
        $('.fechar_newsletter_big').click(function(){ actPopup('fechar','NEWSBIG'); });
        $('.fechar_youtube_big').click(function(){ actPopup('fechar','YOUTUBEBIG'); });
        $('.fechar_youtube_mobile').click(function(){ actPopup('fechar','YOUTUBEMOBILE'); });
        $('.fechar_instagram_mobile').click(function(){ actPopup('fechar','INSTAGRAMMOBILE'); });
        $('.fechar_todasredes_mobile').click(function(){ actPopup('fechar','TODASREDESMOBILE'); });
        $('.fechar_rss_big').click(function(){ actPopup('fechar','RSSBIG'); });
        $('.fechar_twitter_big').click(function(){ actPopup('fechar','TWITTERBIG'); });
        $('.fechar_instagram_big').click(function(){ actPopup('fechar','INSTAGRAMBIG'); });
        $('.fechar_todasredes_big').click(function(){ actPopup('fechar','TODASREDESBIG'); });
        $('.todasredes').click(function(){ actPopup('abrir','TODASREDESBIG'); });
        $('#fechar_newsletter').click(function(){ actPopup('fechar','ONNEWS'); });
        $('#fechar_youtube').click(function(){ actPopup('fechar','YOUTUBEBIG'); });
        $('#popup_youtube').click(function(){ actPopup('fechar','ONYOUTUBE'); });
        $("#form_envia").click(function(){ submitFormulario(); });
        $("#mostra_fone").click(function(){ $('#empresa_fone').html(BV($('#empresa_fone').data('info'))); $('#mostra_fone').hide(); });
        $(".empresa_contato").click(function(){ actContatoEmpresa(true,$(this).data('tipo'));});
        $('#empresa_contato_fechar').click(function(){ actContatoEmpresa(false,0) });
        $('.act_corrigir_texto').click(function(){ actCorrigirTexto(true,this) });
        $('#btcarregarcomments_disqus').click(function(){ carregaComentariosDisqus() });
        $('#btcarregarcomments_facebook').click(function(){ carregaComentariosFacebook() });
        $(".form_newsletter_cad").submit(function(event){  event.preventDefault(); newsletterCad(this,"1"); });
        $(".form_newsletter_cad2").submit(function(event){ event.preventDefault(); newsletterCad(this,"2"); });
        $(".form_newsletter_cad").submit(function(event){  event.preventDefault(); newsletterCad(this,'1'); });
        $(".form_newsletter_cad2").submit(function(event){ event.preventDefault(); newsletterCad(this,'2'); });

        $('#blackoverlay').on('classChange',function()
        {
            $('.blackoverlay_mobile').click(function(){ actMenuMobile(false) });
            $('.blackoverlay_smart').click(function(){ actSmartMobile(false) });
            $('.blackoverlay_cont_empresa').click(function(){ actContatoEmpresa(false,0) });
            $('.blackoverlay_corrigir').click(function(){ actCorrigirTexto(false,'') });
            $('.blackoverlay_busca_desktop').click(function(){ actBuscaDesktop(false)});
        });


        $('.accordion_act1 .i-tit').click(function(e)
        {
            if($(this).prop("tagName") != 'A')
            {
                $(this).addClass('click');
                $('.li-wrapper:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });
                $('.i-tit:not(\'.click\')').removeClass('ativo');

                if(!$(this).hasClass('ativo'))
                {
                    $(this).addClass('ativo');
                    $(this).find('+ .li-wrapper').animate({height:$(this).find('+ .li-wrapper > .accordion_act1').outerHeight()}, { duration: 400, queue: false });
                }
                else
                {
                    $(this).removeClass('ativo');
                    $(this).find('+ .li-wrapper').animate({height:0},400);
                }
                $(this).removeClass('click');
            }
        });

        $('.accordion_act2 .tit_1').click(function(e)
        {
            $(this).addClass('click');
            $('.li-wp1:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });

            if(!$(this).hasClass('ativo'))
            {
                var wrapper1_id         = 'wrapper_'+$(this).data('wrap0');
                var wrapper1_height     = $('#'+wrapper1_id+' > .accordion_act2 > li').length* $('#'+wrapper1_id+' > .accordion_act2 > li').outerHeight();

                $('#'+wrapper1_id).animate({height:wrapper1_height}, { duration: 400, queue: false });
                $('.tit_1').removeClass('ativo');
                $(this).addClass('ativo');
            }
            else
            {
                $('.tit_1').removeClass('ativo');
            }
            $(this).removeClass('click');
        });

        $('.accordion_act2 .tit_2').click(function(e)
        {
            $(this).addClass('click');
            $('.li-wp2:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });

            var wrapper1_id = 'wrapper_'+$(this).data('wrap0');
            var wrapper2_id = 'wrapper_'+$(this).data('wrap0')+'_'+$(this).data('wrap1');

            if(!$(this).hasClass('ativo'))
            {
                var wrapper1_height     = $('#'+wrapper1_id+' > .accordion_act2 > li').length* $('#'+wrapper1_id+' > .accordion_act2 > li').outerHeight();
                var wrapper2_height     = $('#'+wrapper2_id+' > .accordion_act2 > li').length* $('#'+wrapper2_id+' > .accordion_act2 > li').outerHeight();


                $('#'+wrapper1_id).animate({height:wrapper1_height+wrapper2_height}, { duration: 400, queue: false });
                $('#'+wrapper2_id).animate({height:wrapper2_height}, { duration: 400, queue: false });

                $('.tit_2').removeClass('ativo');
                $(this).addClass('ativo');
            }
            else
            {
                var wrapper1_height = $('#'+wrapper1_id+' > .accordion_act2 > li').length*$('#'+wrapper1_id+' > .accordion_act2 > li > .tit_2').outerHeight();

                $('#'+wrapper1_id).animate({height:wrapper1_height}, { duration: 400, queue: false });
                $('.tit_2').removeClass('ativo');
            }
            $(this).removeClass('click');
        });
        
                    $('#act_user').css('display','none');
            $('#act_cad').css('display','block');
                });

    var lst_carregamento        = 1;
    var txtstatus               = 'ok';
    var html_ico_load_auto_load = '<span id="icoload_autoload" class="wifl p-rel" ><span class="load-ico" ></span></span>';
    function carregaConteudo()
    {
        if($('#auto_load_wrapper').length > 0)
        {
            var scrollPosition      = window.pageYOffset;
            var windowSize          = window.innerHeight;
            var footerHeightTop     = $('#footer').offset().top;

            var stop_load           = document.getElementById('auto_load_wrapper').getAttribute('data-stop-load');

            if((scrollPosition + windowSize + 800) > footerHeightTop && stop_load == '0')
            {
                if(txtstatus == 'ok')
                {
                    $("#auto_load_wrapper").append(html_ico_load_auto_load);
                    txtstatus = 'timeout';
                    $.ajax({
                        type: 'POST',
                        url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
                        data: 'act=autoLoadConteudo&lst_carregamento='+lst_carregamento+'&'+serializeDataAttr($('#auto_load_wrapper')),
                        success: function(html)
                        {
                            $("#auto_load_wrapper").append(html);
                            $("#icoload_autoload").remove();
                            txtstatus = 'ok';
                        }
                    });
                    lst_carregamento++;
                }
            }
        }
    }
    
    
    $(".expand-gperf").click(function() {
        $(this).next().toggle();
    });

    $(function () {
        $(window).scroll(carregaConteudo);
        carregaConteudo();
    });

    $(window).scroll(function() {
        if ($(this).scrollTop() >= 150) {
            $('#top_page').fadeIn(200);
        } else {
            $('#top_page').fadeOut(200);
        }
    });
    $('#top_page').click(function() {
        $('body,html').animate({
            scrollTop : 0
        }, 500);
    });
    

    if ($(".carousel_destaque")[0])
    {
        $('#out_lib').append('<link href="https://painel.m3midia.com.br/lib/slick/slick.css" rel="stylesheet">');
        $.getScript("https://painel.m3midia.com.br/lib/slick/slick.js", function(){
            $('.carousel_destaque').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                pauseOnHover: true,
                autoplaySpeed: 10000
            });
            setTimeout(function(){
                $('.carousel_destaque').removeClass('carregando');;
            }, 1500);
        });
    }

    if ($(".conteudo_galeria")[0])
    {
        $('#out_lib').append('<link href="https://painel.m3midia.com.br/lib/lightGallerySlider/lightGallerySlider.css" rel="stylesheet">');
        $.getScript("https://painel.m3midia.com.br/lib/lightGallerySlider/lightGallerySlider.js", function(){
            $('.conteudo_galeria').lightSlider({
           item: 3,
           loop:false,
           slideMove:3,
           easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
           speed:600,
           responsive : [
               {
                   breakpoint:800,
                   settings: {
                       item:3,
                       slideMove:1,
                       slideMargin:6,
                     }
               },
               {
                   breakpoint:480,
                   settings: {
                       item:2,
                       slideMove:1
                     }
               }
           ]
            }).lightGallery({

            });
            $('.out_conteudo_galeria').css('display','block');
        });
    }
  
</script>
        <div id="box_popup_big" class="box_news_big todasredes">
            <div class="act fechar_box_popup box_hover p-rel mobile fechar_todasredes_big" ></div>
            <span onclick="_gaq.push(['_trackEvent', 'boxtodasredes', 'boxtodasredes', 'boxtodasredes']);fechaBoxBigPopup('todasredes','TODASREDESBIG','https://www.oficinadanet.com.br/siga-nossas-redes-sociais'); "><img alt="Siga nossas redes sociais" src="https://www.oficinadanet.com.br/_template/imagem/oficina-todas-redes.jpg"/></span>
        </div>
        <script>            
            function abreBoxBigOficina()
            {
                $('#box_popup_big').css('display','block');
                blackoverlay(1);
            }
        </script>
        <script>setTimeout('abreBoxBigOficina();','35000');</script>
                
<script>
    function actSininho()
    {
        _gaq.push(['_trackEvent', 'sininho', 'sininho', 'sininho']);
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONSININHO&valor=1&tempo=36000','box_sininho');
        setTimeout("document.location = 'https://www.oficinadanet.com.br/novidades'",1000);
    }

    $(document).ready(function()
    {
        $('#sininho').click(function(){ actSininho(); });
    });

</script>

<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase-messaging.js"></script>
<script>
    const applicationServerKey = "BJX8Rw2npfApIhpWy-3hPGZvdvdHECD4FLbylmtWsMgyUDgsOeP8R5K5E0SxCWxQ21rYmG7basOHXlDande8OgY";
    // Initialize Firebase
    var config = {
        apiKey: "AIzaSyChPCYMhtkCC0AfCVeZe6847ZJOuj1XuYQ",
        authDomain: "oficina-da-net.firebaseapp.com",
        databaseURL: "https://oficina-da-net.firebaseio.com",
        projectId: "oficina-da-net",
        storageBucket: "oficina-da-net.appspot.com",
        messagingSenderId: "647906981733"
    };
    
    firebase.initializeApp(config);
    const messaging = firebase.messaging();
    messaging.usePublicVapidKey(applicationServerKey);  

    function getTokenFBClient()
    {
        return messaging.getToken();
    }
  

    function getTokenRefreshFBClient()
    {
        return messaging.onTokenRefresh(function() {
            return messaging.getToken();
        });
    }

    document.addEventListener("DOMContentLoaded", () => {        
        let isPushEnabled = false;
        
        if (!('serviceWorker' in navigator)) {
            console.warn("Service workers are not supported by this browser.");
            return;
        }

        if (!('PushManager' in window)) {
            console.warn('Push notifications are not supported by this browser.');
            return;
        }

        if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
            console.warn('Notifications are not supported by this browser.');
            return;
        }

        if (Notification.permission === 'denied') {
            console.warn('Notifications are denied by the user');
            return;
        }
        
        navigator.serviceWorker.register("/firebase-messaging-sw.js")
            .then( reg => {
                reg.update();                
                console.log('[SW] Service worker has been registered');
                sw_registered();
            }, e => {
                console.error('[SW] Service worker registration failed', e);
        });
        
        function sw_registered()
        {
            navigator.serviceWorker.ready.then(serviceWorkerRegistration => serviceWorkerRegistration.pushManager.getSubscription())
            .then(subscription => {
                if (!subscription) 
                {
                    console.log('not subscription',subscription);
                    return push_subscribe();
                }
                else
                {                    
                    console.log('update token');
                    getTokenRefreshFBClient();
                    return push_sendSubscriptionToServer(subscription, 'push_updateSubscription');                    
                }
            })
            .then(subscription => subscription ) 
            .catch(e => {
                /*console.error('Error subscription', e);*/
            });
        }
    

        function push_subscribe() {
            navigator.serviceWorker.ready
            .then(serviceWorkerRegistration => serviceWorkerRegistration.pushManager.subscribe({
                userVisibleOnly: true,
                applicationServerKey: urlBase64ToUint8Array(applicationServerKey),
            }))
            .then(subscription => {                
                return push_sendSubscriptionToServer(subscription, 'push_subscribe');
            })
            .then(subscription => subscription )
            .catch(e => { });
        }

        function urlBase64ToUint8Array(base64String) {
            const padding = '='.repeat((4 - base64String.length % 4) % 4);
            const base64 = (base64String + padding)
                .replace(/\-/g, '+')
                .replace(/_/g, '/');

            const rawData = window.atob(base64);
            const outputArray = new Uint8Array(rawData.length);

            for (let i = 0; i < rawData.length; ++i) {
                outputArray[i] = rawData.charCodeAt(i);
            }
            return outputArray;
        }
    
        function push_sendSubscriptionToServer(subscription, acao) {
            var ret = getTokenFBClient();
            ret.then(function(refreshedToken) {

                const method = 'POST';
                const key = subscription.getKey('p256dh');
                const token = subscription.getKey('auth');
                const contentEncoding = (PushManager.supportedContentEncodings || ['aesgcm'])[0];

                var strSubscription = JSON.stringify(subscription.toJSON());
                
                                    ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=webpush&acao='+acao+'&subscription='+strSubscription+'&iidToken='+refreshedToken,'');                  
                                    }).catch(function(err) {
                console.log('Unable to retrieve refreshed token ', err);        
            });            
        }
    });
</script><style type="text/css" >
    .cmmt.comments_wrapper { width: 100%; float: left; margin-top: 15px }
    .cmmt.comments_wrapper button { background: transparent; border: 0; outline-color: transparent; cursor: pointer}
    .cmmt.comments_wrapper .avatar {width: 48px;height: 48px;float: left;background: #e4e7ea;overflow: hidden;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .cmmt.comments_wrapper .avatar img { width: 100% }
    .cmmt .comment {width: calc(100% - 60px);float: right;color: #3f4549}
    .cmmt .comment:before, .cmmt .comment:after { content: ""; background: transparent; display: none }
    .cmmt .comment .content a { color: #1d00ff }
    .cmmt .comment_input {line-height: 0;position: relative;}
    .cmmt .comment_input textarea {width: calc(100% - 24px);;min-height: 70px;max-height: 300px;padding: 10px 10px 12px 10px;border: 2px solid #e4e7ea;color: #183A4C;font-size: 16px;line-height: 20px;resize: none;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .cmmt .comment_input textarea.invalid { border-color: #e23838; outline-color: #e23838 }
    .cmmt .comment_input .btn_submit {outline-width: 0;position: absolute;right: 0;bottom: 0;color: #fff;background: #778289;padding: 6px 24px;line-height: 19px;font-size: 15px;-webkit-border-top-left-radius: 3px;-moz-border-radius-topleft: 3px;border-top-left-radius: 3px;}
    .cmmt .comment_list_wrapper { width: 100%; float: left; margin-top: 30px }
    .cmmt .comment_list { list-style: none }
    .cmmt .comment_list li { width: calc(100% - 180px); float: left; margin-left: 180px;  margin-bottom: 20px }
    .cmmt .comment_list li.comment_indent0 { width: 100%; margin-left: 0px }
    .cmmt .comment_list li.comment_indent1 { width: calc(100% - 60px); margin-left: 60px }
    .cmmt .comment_list li.comment_indent2 { width: calc(100% - 120px); margin-left: 120px }
    .cmmt .comment_list li .show-user-options,
    .cmmt .comment_list li .user-options {border: 1px solid #afafaf;background: white;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .cmmt .comment_list li .show-user-options {height: 22px;position: absolute;right: 0;color: #afafaf;}
    .cmmt .comment_list li .user-options {width: 100px;position: absolute;right: 0;top: 21px;display: none;}
    .cmmt .comment_list li .user-options button:hover,
    .cmmt .comment_list li .show-user-options:hover {background: #f3f3f3;color: #000;}
    .cmmt .comment_list li .user-options button {width: 100%;text-align: center;color: #778289;font-size: 13px;line-height: 22px;}
    .cmmt .comment_list li .user-options.show { display: block }
    .cmmt .comment .comment_header { width: 100%; float: left; margin-bottom: 4px; }
    .cmmt .comment .comment_header .name  { font-weight: bold; float: left  }
    .cmmt .comment .comment_footer * { float: left }
    .cmmt .comment .comment_footer { margin-top: 4px }
    .cmmt .comment .text { font-size: 13px; color: #afafaf }
    .cmmt .comment .vote-down-text,
    .cmmt .comment .vote-up-text { margin: 0 10px 0 0; color: #8e8e8e; }
    .cmmt .comment .vote-down-text { margin-left: 10px }
    .cmmt .comment .text.bull { font-size: 16px }
    .cmmt .comment .comment_footer .vote-down,
    .cmmt .comment .comment_footer .vote-up {border: solid #b5b5b5;border-width: 0 2px 2px 0;display: inline-block;padding: 4px; outline-width: 0}
    .cmmt .comment .comment_footer .vote-down {transform: rotate(45deg);-webkit-transform: rotate(45deg);margin-top: 2px;}
    .cmmt .comment .comment_footer .vote-up { margin-top: 7px; transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}
    .cmmt .comment .comment_footer .vote-up:disabled,
    .cmmt .comment .comment_footer .vote-down:disabled { border-color: #e2e2e2; }
    .cmmt .comment .vote-up-text.voted,
    .cmmt .comment .comment_footer .vote-up-text.voted + .vote-up:disabled { border-color: green; color: green }
    .cmmt .comment .vote-down-text.voted,
    .cmmt .comment .comment_footer .vote-down-text.voted + .vote-down:disabled { border-color: red; color: red }
    .cmmt .comment .comment_footer .reply.text:hover {text-decoration: underline }
    .cmmt .comment .reply-box { margin-top: 10px }
    .cmmt .login_wrapper { width: 800px;height: 460px; display: none; margin: auto;position: fixed;background: #fff;z-index: 3001;top: 0;left: 0;bottom: 0;right: 0;}
    .cmmt .login_wrapper #login_loading { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; background: rgba(165, 165, 165, 0.38); z-index: 3100 }
    .cmmt .login_wrapper #login_loading.show { display: block }
    .cmmt .login_wrapper.show { display: block }
    .cmmt .login_wrapper .box_form { width: calc(50% - 40px);height: 100%;float: left;padding: 0 20px; }
    .cmmt .login_wrapper .box_form .title { margin: 30px 0;font-size: 30px;color: #727272;font-weight: bold;text-align: center; }
    .cmmt .login_wrapper .box_form.register { width: calc(50% - 41px);border-left: 1px solid #ccc;background: #efefef }
    .cmmt .login_wrapper .close {position: absolute;right: 20px;top: 20px;width: 32px;height: 32px;opacity: 0.5; cursor: pointer}
    .cmmt .login_wrapper .close:hover {opacity: 1;}
    .cmmt .login_wrapper .close:before,
    .cmmt .login_wrapper .close:after {position: absolute;left: 15px;content: ' ';height: 31px;width: 2px;background-color: #333;}
    .cmmt .login_wrapper .close:before {transform: rotate(45deg);}
    .cmmt .login_wrapper .close:after {transform: rotate(-45deg);}
    .cmmt .login_wrapper input {width: calc(100% - 20px); height: 50px; float: left; margin-bottom: 20px; padding: 0 10px; font-size: 16px; font-weight: normal; color: #6f6f6f; background-color: white; border: 1px solid #d7d7d7; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; }
    .cmmt .login_wrapper input.invalid { border-color: #e23838; outline-color: #e23838; margin-bottom: 0 }
    .cmmt .login_wrapper input + .invalid_message { width: 100%;height: 16px;display: none;float: left;color: #e23838;font-size: 13px;line-height: 16px;margin-bottom: 4px; }
    .cmmt .login_wrapper input.invalid + .invalid_message { display: block }
    .cmmt .login_wrapper .text { margin-top: 20px; font-size: 13px; text-align: center; color: #727272 }
    .cmmt .login_wrapper .text.password { margin: 0px; text-align: left }
    .cmmt .login_wrapper .text.password:hover { text-decoration: underline }
    .cmmt .login_wrapper .btn_login {width: 100%; text-align: center;padding: 10px 0;color: #fff;background: #309434;font-size: 14px;border-bottom: 2px solid #0b650f;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; }
    .cmmt .login_wrapper .btn_login_fb:before { width: 15px; height: 15px; content: ""; margin-right: 10px; display: inline-block; background: url(https://www.oficinadanet.com.br/_template/imagem/ico-facebook2.png) }
    .cmmt .login_wrapper .btn_login_fb{margin-right: 10px;line-height: 15px;background: #4267b2;color: #FFF;font-size: 14px;width: 100%;float: left;margin-top: 20px;padding: 10px 0;text-align: center;cursor: pointer;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;border-bottom: 2px solid #1f3c77;}
    .cmmt .comments_wrapper .btn_load_comment { position: relative; color: #fff;background: #778289;padding: 6px 24px; }
    .cmmt .comments_wrapper .btn_load_comment:disabled {background: #ececec; color: #778289;}
</style>
<script type="text/javascript" >

    var current_user = null;
    var cache_name = '4_artigo-php-login-dinamico-php-mysql-com-jquery';
    var comment_to_send = '';
    var post_id = null;
    var reply_comment_id = 0;

    function getCookie(name)
    {
        var cookies = document.cookie;
        var prefix = name + "=";
        var begin = cookies.indexOf("; " + prefix);

        if (begin == -1) {

            begin = cookies.indexOf(prefix);

            if (begin != 0) {
                return null;
            }

        } else {
            begin += 2;
        }

        var end = cookies.indexOf(";", begin);

        if (end == -1) {
            end = cookies.length;
        }

        return unescape(cookies.substring(begin + prefix.length, end));
    }

    function PopupCenter(url, title, w, h)
    {
        var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : window.screenX;
        var dualScreenTop = window.screenTop != undefined ? window.screenTop : window.screenY;
        var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
        var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

        var systemZoom = width / window.screen.availWidth;
        var left = (width - w) / 2 / systemZoom + dualScreenLeft;
        var top = (height - h) / 2 / systemZoom + dualScreenTop;

        var newWindow = window.open(url, title, 'scrollbars=no, width=' + w / systemZoom + ', height=' + h / systemZoom + ', top=' + top + ', left=' + left);

        if (window.focus)
            newWindow.focus();
    }
    
    window.successfullySocialLogin = function(type){
        var post_data = getPostData();
        $('#login_loading').addClass('show');
        $.ajax({
            type: 'POST',
            url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
            data: post_data+'act=successfullySocialLogin',
            success: function (response) {
                
                if( response.error )
                {
                    alert('Ocorreu um erro durante o login.');
                }
                else
                {
                    setDataUser(response);
                    cleanForm();
                    hideCommentLogin();
                    $("#comment_list").html(response.html);
                    buildUserOptions();
                }
                $('#login_loading').removeClass('show');
            }
        });
    }

    function SubmitCommentForm(form)
    {
        if($(form).find('textarea').val().length)
        {
            $('.comment_input textarea').removeClass('invalid');
            comment_to_send = $(form).find('textarea').val();
            reply_comment_id = $(form).find('input[name="reply_comment_id"]').val();

            if(current_user === null)
            {
                ShowCommentLogin();
            }
            else
            {
                setComment();
            }
        }
        else
        {
            $(form).find('textarea').addClass('invalid').focus();
            setTimeout(function(){alert('Insira um comentário');},0);
        }
    }

    function ShowCommentLogin()
    {
        blackoverlay(true);
        $('#login_wrapper').addClass('show');
        $('#login_loading').removeClass('show');
    }

    function hideCommentLogin()
    {
        comment_to_send = '';
        blackoverlay(false);
        $('#login_wrapper').removeClass('show');
    }

    function SubmitLoginForm(form)
    {
        $('#login_loading').addClass('show');

        if(comment_to_send.length == 0 || post_id == 0)
            return;

        var post_data = getPostData();
        
        if($(form).find('input[name="act"]').val() == 'commentLogin')
        {

            var login = isValidInput($(form).find('input[name="login"]'));
            var password = isValidInput($(form).find('input[name="password"]'));

            if(login && password)
            {
                $.ajax({
                    type: 'POST',
                    url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
                    data: post_data+'act=commentLogin&login='+login+'&password='+password,
                    success: function (response) {

                        if( response.error )
                        {
                            if(response.error_code == 'mail_user_name')
                                isValidInput($(form).find('input[name="login"]'),response);
                            else if(response.error_code == 'password')
                                isValidInput($(form).find('input[name="password"]'),response);
                            else
                                alert(response.error_message);
                        }
                        else
                        {
                            setDataUser(response);
                            cleanForm();
                            hideCommentLogin();
                            $("#comment_list").html(response.html);
                            buildUserOptions();
                        }
                        $('#login_loading').removeClass('show');
                    }
                });
            }
            else
            {
                $('#login_loading').removeClass('show');
            }
        }
        else if($(form).find('input[name="act"]').val() == 'commentRegister')
        {
            var email = isValidInput($(form).find('input[name="email"]'));
            var name = isValidInput($(form).find('input[name="name"]'));
            var password = isValidInput($(form).find('input[name="password"]'));

            if(email && name && password)
            {
                $.ajax({
                    type: 'POST',
                    url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
                    data: post_data+'act=commentRegister&email='+email+'&name='+name+'&password='+password,
                    success: function (response) {

                        if( response.error )
                        {
                            if(response.error_code == 'invalid_name')
                                isValidInput($(form).find('input[name="name"]'),response);
                            else if(response.error_code == 'invalid_email')
                                isValidInput($(form).find('input[name="email"]'),response);
                            else if(response.error_code == 'email_exists')
                            {
                                $('#commentLogin').find('input[name="login"]').val(email);
                                $('#commentLogin').find('input[name="password"]').focus();
                                alert(response.error_message);
                            }
                            else
                                alert(response.error_message);
                        }
                        else
                        {
                            setDataUser(response);
                            cleanForm();
                            hideCommentLogin();
                            $("#comment_list").html(response.html);
                            buildUserOptions();
                        }
                        $('#login_loading').removeClass('show');
                    }
                });
            }
            else
            {
                $('#login_loading').removeClass('show');
            }
        }
    }

    function getPostData()
    {
        return 'comment='+comment_to_send+'&post_id='+post_id+'&reply_comment_id='+reply_comment_id+'&cache_name='+cache_name+'&';
    }

    function setComment()
    {
        cleanForm();
        var post_data = getPostData();
        $.ajax({
            type: 'POST',
            url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
            data: 'act=setComment&'+post_data,
            success: function (html) {
                $('#comment_list').html(html);
                buildUserOptions();
                processVotedComments();
            }
        });
    }

    function cleanForm()
    {
        $('.comment_input textarea').removeClass('invalid').val('');
    }

    function isValidInput(input,response)
    {
        if(response != undefined)
        {
            $(input).next().html(response.error_message);
            $(input).addClass('invalid');
            return false;
        }
        else
        {
            var inputValue = $(input).val();
            if(inputValue.length == 0)
            {
                $(input).next().html('Preenchimento obrigatório.');
                $(input).addClass('invalid');
                return false;
            }
            else
            {
                $(input).next().html('');
                $(input).removeClass('invalid');
                return $(input).val();
            }
        }
    }

    function replyComment(button)
    {
        var id = $(button).data('reply-box');

        if($('#reply-box-'+id).html() == "")
        {
            cleanForm();
            var reply_comment = $(button).data('reply-id');
            $('#reply-box-'+id).html($('#out_comment_form').html());
            $('#reply-box-'+id+' .comment_input textarea').focus();
            $('#reply-box-'+id+' input[name="reply_comment_id"]').val($(button).data('reply-id'));
        }
        else
        {
            $('#reply-box-'+id).html('');
        }
    }

    function commentVote(button,vote)
    {
        var comment_id = $(button).data('comment');
        $.ajax({
            type: 'POST',
            url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
            data: 'act=commentVote&post_id='+post_id+'&comment_id='+comment_id+'&vote='+vote,
            success: function (html) {
                processVotedComments();
            }
        });
    }

    function setDataUser(response)
    {
        current_user = response.user;
        if( current_user.image != undefined )
            $(".current_user_image").attr("src", current_user.image);
    }

    function processVotedComments()
    {
        if($("#comment_list").length != 0 && current_user != null)
        {
            var cookie_name = 'comment_vote_'+post_id;
            if(getCookie(cookie_name))
            {
                var comment_votes = JSON.parse(getCookie(cookie_name));
                Object.keys(comment_votes).forEach(function(k){
                    if($('#text-'+comment_votes[k]+'-'+k).hasClass('voted') == false)
                    {
                        $('#vote-up-'+k).attr("disabled", true);
                        $('#vote-down-'+k).attr("disabled", true);
                        $('#text-'+comment_votes[k]+'-'+k).html(parseInt($('#text-'+comment_votes[k]+'-'+k).html())+1);
                        $('#text-'+comment_votes[k]+'-'+k).addClass("voted");
                    }
                });
            }
        }
    }

    function buildUserOptions()
    {
        setTimeout(function (){
            if($("#comment_list").length != 0 && current_user != null)
            {
                $('#comment_list li').each(function(i)
                {
                    if($(this).data('user-id') == current_user.id)
                    {
                        var user_options = '<button type="button" class="show-user-options border" >•••</button>'
                           +'<div class="user-options" >'
                                +'<button class="delete-comment" type="button" data-comment-id="'+$(this).data('comment-id')+'" >Excluir</button>'
                            +'</div>';
                        $(this).prepend(user_options);
                    }
                });
            }
        },500);
    }

    function deleteComment(button)
    {
        var post_data = 'act=deleteComment&post_id='+post_id+'&comment_id='+$(button).data('comment-id')+'&cache_name='+cache_name;
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php',post_data,"comment_list");
        buildUserOptions();
    }

    function loadComment(button)
    {
        $(button).attr("disabled", true);
        $(button).data("title",$(button).html());
        $(button).html($(button).data("title-loading"));

        var load = $(button).data('load');
        var totalcomments = $(button).data('total-comments');

        var post_data = 'act=loadComment&post_id='+post_id+'&load='+load;

        var loadn = parseInt(load);
        loadn++;
        $(button).data('load',loadn);

        $.ajax({
            type: 'POST',
            url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
            data: post_data,
            success: function (response) {

                if($('#comment_list li').length >= totalcomments)
                {
                    $(button).css('display','none');
                    $(button).attr("disabled", true);
                }
                else
                {
                    $('#comment_list').append(response.html);
                    $(button).attr("disabled", false);
                    $(button).html($(button).data("title"));
                    buildUserOptions();
                }
            }
        });
    }
    
    function initComment()
    {
        
        post_id = $('#comment_list').data('post-id');

        $('.comment_input textarea').bind('input propertychange', function() {
            $(this).height('0px').height($(this).prop('scrollHeight')-22);
        });

        $(document).on('click', 'button.show-user-options',function(e) {
            if($(this).next().hasClass('show'))
                $(this).next().removeClass('show');
            else
                $(this).next().addClass('show');
        });

        $(document).on('click', '.delete-comment',function(e) {
            deleteComment(this);
        });

        $(".comment_modal_form").on('submit',function(e) {
            SubmitLoginForm(this);
            e.preventDefault();
        });

        $(document).on('click', '.btn_submit',function(e) {
            var form = $(this).parents('form:first');
            SubmitCommentForm(form);
        });

        $(document).on('click', 'button.reply',function(e) {
            replyComment(this);
        });

        $(document).on('click', '.vote-up',function(e) {
            commentVote(this,'up');
        });

        $(document).on('click', '.vote-down',function(e) {
            commentVote(this,'down');
        });

        $(".close_commentLogin").on('click',function(e) {
            hideCommentLogin();
        });

        $(".blackoverlay").on('click',function(e) {
            hideCommentLogin();
        });

        $("#btn_load_comment").on('click',function(e) {
            loadComment(this);
        });

        $(document).ready(function (){
            processVotedComments();
            buildUserOptions();

            if($('#comment_list li').length >= $('#btn_load_comment').data('total-comments'))
            {
                $('#btn_load_comment').css('display','none');
                $('#btn_load_comment').attr("disabled", true);
            }
        });
    }
    
    var elementExists = document.getElementById("script_jquery");
    if(elementExists)
    {
        document.getElementById('script_jquery').addEventListener('load', function() {
            initComment();
        });
    }
    else
    {
        initComment();
    }
</script><link rel="stylesheet" href="https://www.oficinadanet.com.br/_template/css/geral.css?v=803">
        
    <div class="player_dynad_tv"></div>
    </body>
</html>