Eae pessoal, mais um dia e estamos nós aqui novamente
Hoje vou ensinar a como fazer uma atualização de dados do banco de dados automática. como funciona?
bem é simples, suponhamos que temos uma página que precisa sempre estar com seu conteúdo atualizado, por exemplo o website de uma loja
eles precisam ser comunicados sempre que alguém realize uma compra certo? e porque não fazer isso automaticamente?.
Então é isso que vou ensinar a vocês hoje !
Usaremos hoje uma coisa que é bem parecida com o JavaScript mas não é, mas pela sua semelhança, colocarei na categoria JavaScript.
Ele é o AJAX !

Bom vamos ao trabalho

Antes de mais nada você vai precisar deste arquivo, porém quando clicar não vai baixar nada, ele vai na verdade abrir uma página com diversos códigos, então como baixamos?
simples clique com o botão direito do mouse sobre o link e escolha "salvar link como..." e salve em uma pasta, no meu caso ela se chama "TUTORIAL OPENSHOPS".
E também usarei um arquivo de áudio para que avise quando tiver novos pedidos, mas isto é opcional (o arquivo se chama alerta.mp3 e pode ser qualquer som, mas caso queira um som de alerta pode baixar este pelo MEGA).

Este é um arquivo JQUERY versão 2.1.3, ele vai ser útil no que virá pela frente (algumas funções foram criadas nele e vamos usá-las).
Suponhamos que nossa tabela se chama 'pedido' e é construída da seguinte forma:

firstname

lastname

payment_country

order_status_id

E nós temos o seguinte registro dentro da tabela:

Natan

Salazar

Rio de janeiro, Muriqui, 26350-550, casa 4

(informações inventadas)
ficando assim nossa tabela:

ID	firstname	lastname	payment_country	order_status_id
1	Natan	Salazar	Rio de janeiro, Muriqui, 26350-550, casa 4	0

Agora virá nosso primeiro código que é um misto de HTML com JQUERY e JavaScript.
Segue o código:

<!DOCTYPE html>
<html>

<head>

// Função responsável por atualizar as frases
        function atualizar()
        {// Fazendo requisição AJAX
            $.post('atualizar.php', function (pedido) {//Executamos o código do arquivo 'Atualizar.php' e guardamos o resultado na variável pedido
                // Exibindo frase
                if(pedido === null){//Verificamos se tem algum pedido realizado, caso não, exibimos "não há pedidos a serem processados"
                    document.getElementById('pedido').innerHTML='NÃO HÁ PEDIDOS A SEREM PROCESSADOS';
                }else{
                    var ultimoid = "<?php echo $_SESSION['ID'];?>";//Passamos o ID da Sessão do PHP para o JAVASCRIPT
                    if (pedido.order_id == ultimoid) {//verificamos se o ID do pedido atual é o mesmo do anterior, se for não fazemos nada (por isso IF vazio)

}else{//caso nao seja ele vai tocar um áudio e vai exibir as informações do novo pedido
                       $('#som').html('<audio src=alerta.mp3 autoplay>O seu navegador não suporta o elemento <code>audio</code></audio>');
                        }
                    $('#pedido').html('<b>Nome:</b>' + pedido.firstname +' '+pedido.lastname+'<br><b>endereço:</b>' + pedido.payment_country+'<br><b>preço:</b>'+pedido.total);//exibimos as informações do pedido 
                    var idPed = pedido.id;
                    document.getElementById('enviado').innerHTML="<input class='invisible' type='text' name='cod' value='"+idPed+"'><input type='submit' value='enviar'>"//Adicionamos um botao para dizer ao nosso sistema que o pedido já foi atendido
                }
            }, 'JSON');
        }

// Definindo intervalo que a função será chamada
        setInterval("atualizar()", 5000);//1000 = 1s; 5000 = 5s e  assim por diante.

// Quando carregar a página
        $(function() {
            // Faz a primeira atualização
            atualizar();
        });

</script>

</head>

<body>

<h1>Próximo pedido</h1>

</body>
</html>

O HTML acima é uma coisa bem básica somente para que possamos ter uma área de trabalho

Visualização do código HTML:

atualizador em AJAX

Próximo pedido

não há pedidos a serem processados

Necessitamos de um arquivo de conexões um pouco diferente mas que funciona da mesma forma:

Agora vamos criar nosso arquivo 'Atualizar.php' que é responsável por buscar os dados na tabela
Código explicado:

Agora o último arquivo para atualizar o banco quando clicarmos em "Enviar":

Obrigado pela vossa leitura :D

Dúvidas? Comentários? Dicas? pode deixar tudo nos comentários :D

Open Shops PHP

13 de abril de 2016

Atualização dos dados do banco de dados automátizada

Próximo pedido

Nenhum comentário:

Postar um comentário