DMM Technology

Twitter

Passos finais para conclusão do Projeto Twitter Clone.

Criando os Painéis - home.php

Step 01: Criar o painel esquerdo.
Step 02: Criar o painel de tweets (central).
Step 03: Criar o painel de direito.

Criando o post de 140 caracteres (funcionalidade) - home.php

Usuário digita uma mensagem e a partir do click no botão Tweet (JS), será recuperada a informação digitada, realizado por PHP um insert no banco de dados com informação.
Step 04: Criar tabela para receber o texto digitado no tweet no banco de dados, será pelo id_usuario que vamos identificar qual foi o usuário responsável pelo tweet e no futuro poderemos exibi-los na timeline do usuário.
Informado na tabela tweet, que teremos o campo data_inclusao datetime default CURRENT_TIMESTAMP, que significa o momento em que a informação foi inserida no banco de dados.
Step 05: Agora vamos incluir no input e no button os IDs para melhor utilização desses campos no código.
Step 06: Criar a tag script, vamos utilizar o jQuery. Primeiro verificamos se o documento foi carregado antes de executar o JS, sempre fazer isso pois se não pode ter erros.
Step 07: Criar as funções do botão tweet, tratar com a função .length > 0 no final do #texto_tweet para verificar se o texto é maior que 0 caracteres e não permitir enviar nesse caso. O que acontece aqui é que se a função for maior que 0, executa o if, se não nada ocorre.

Step 08: No home.php, após o document.ready e verificar se #texto_tweet possui valor e é maior do que 0 caracteres, executaremos a função ajax enviando para a url inclui_tweet.php.
No Ajax, response_text é o primeiro parâmetro que encaminhamos para o success do Ajax, pois ele retorna o conteúdo do script da url.
Step 09: Agora precisamos utilizar duas propriedades para encaminhar esse texto do tweet para o inclui_tweet.php, utilizando:
a) method: 'post' (mesma ideia do formulário).
b)data: encaminhar como parâmetro um JSON, onde a estrurura será data: { chave1: valor1, chave2: valor2 }.
Nesse caso, vamos passar para a função como parâmetro o texto digitado no tweet, portanto utilizamos a função seletora do Ajax, $('$texto_tweet').val() para puxar o valor da variável tweet como parâmetro, ficando data: { text_tweet: $('#texto_tweet').val() }.
Até aqui estamos recuperando o texto digitado na variável #text_tweet e passando ela para o scopo global com $_POST, então recuperamos no inclui_tweet.php e exibimos na tela.
O próximo passo será criar a função que ao invés de exibir na tela, enviará para o banco e depois exibirá na tela.
Step 10: Para não precisar passar todos os formulários que devem ser recuperados um a um, temos uma função que realiza a seleção das chaves e valores atribuidos a essas chaves.
Estamos falando da função data: {chave1: valor 1}, ou seja data: {#texto_tweet: $('texto_tweet').val()};
a) Selecionar o formulário (precisa estar dentro da tag form) em questão: nesse caso o form_tweet e na sequência executar a função .serialize().
b) Adicionar um name no campo input que será o value daquele formulário, precisa ter o mesmo nome da superglobal $_POST, nesse caso, text_tweet.
Isso é bom para caso tenhamos muitos dados no formulário.
Até aqui já estamos recuperando a informação digitada no tweet no inclui_tweet.php, agora realizar o envio do tweet para o banco de dados:
Step 11: Adicionar as conexões com o banco de dados no inclui_tweet.php, visto ele ser quem vai enviar o tweet ao banco.
Step 12: Adicionar a query de instruções ao banco de dados, nesse caso de INSERT.
Step 13: Visto que no INSERT precisamos passar o ID do usuário que criou a mensagem, pois queremos exibir em sua timeline e também mostrar que foi ele que enviou, iremos precisar recuperar o ID dele:
a) Adicionado no validar_acesso.php, na função session, puxar além do usuario e email, o ID dele, para ficar disponível no escopo global.
Step 14: Adicionar o nível de controle, onde somente vai poder enviar tweet se estiver logado, colocando na página de inclui_tweet.php, que é a que realiza a ação de enviar ao banco, o if(isset($_SESSION['usuario'])).
Step 15: Controle para verificar se as duas variáveis $texto_tweet e $id_usuario estão preenchidas.
Step 16: Limpar o campo do tweet após digitado e enviado, alterado que na funl'ao sucesso além do alert, será passado para o campo $texto_tweet o value zavio..

Criando a timeline

Criar o arquivo get_tweet.php.
Aprender como recuperar as informações de tweet do banco de dados e exibir na página principal. A ideia será que na nossa página inicial, irá haver uma requisição ao banco de dados para ele retorne as informações com base no usuário da sessão (utilizando sua id).
Step 17: Adicionar a query que será realizada no banco de dados.
a) Sintaxe: $sql = "SELECT * FROM tweets ORDER BY data_inclusao DESC"
b) Order by: DESC: decrescente (ordenação de trás para frente). Nesse caso, da mais atual para a mais antiga. ASC: default.
Step 18: Criar função que irá atualizar a timeline ao final da escrita e envio de um novo tweet (para ele aparecer nela), realizo em home.php.
Step 19: Pegar o retorno dessa função de atualizar a timeline em order decrescente de data (do último tweet enviado par ao mais antigo) e colocar em uma div para ser exibida, formando a timeline. Realizado em home.php.
Step 20: Utiliza a função do ajax $('#tweets').html(data), que é igual a innerHTML, utilizada para passar parâmetros HTML para dentro do script, para no caso da operação ser um sucesso, passar o resultado do script get_tweet.php dentro da div #tweets.
Step 21: Adicionar na consulta ao banco, através da variável $sql um WHERE id_usuario = $id_usuario, ou seja, somente exibir tweets do id_usuario que tiverem o id igual ao $id_usuario, ou seja, o ID do usuário logado, recuperado pela $_SESSION.
Step 22: Atribuir o retorno do resource do SELECT para a variável $resultado_if, sendo ela true, irá executar a função de selecionar do banco os tweets com a id desse usuário.
Step 23: Utilizar um WHILE para selecionar todos os tweets do banco de dados relacionados a ID desse usuário.
A cada interação desse WHILE, a variável $registro vai receber um registro do banco de dados, e essa interação acontece até atingir o último registro da consulta.
Visto o retorno ser o array da mysqli_fetch_array (ou seja, com todos os registros daquele usuário e os índices com número e associativo, que é o com string), vamos alterar para retornar somente o string (forma associativa), com a MYSQL_ASSOC.
Até aqui está sendo retornado na div #tweets o array com todas as informações de cada tweet daquela id de usuário.
Exemplo: array(4) { ["id_tweet"]=> string(1) "3" ["id_usuario"]=> string(1) "1" ["tweet"]=> string(10) "novo tweet" ["data_inclusao"]=> string(19) "2018-10-25 10:25:03" }

Ajustes de estilo da timeline

Step 24: Agora vamos exibir as informações na tela, utilizando a classe list-group do Bootstrap, que organiza as informações em forma de lista. Realizado no get_tweet.php.
Step 25: Para exibir o nome do usuário que enviou o tweet na tela, alterar de:
$sql = " SELECT * FROM tweet WHERE id_usuario = $id_usuario ORDER BY data_inclusao DESC ";
$sql = " SELECT t.data_inclusao, t.tweet, u.usuario FROM tweet AS t JOIN usuarios AS u ON (t.id_usuario = u.id) WHERE id_usuario = $id_usuario ORDER BY data_inclusao DESC ";
Step 26: Alterar o formato da data de americano para BR.
Step 27: Fazer com que ao inserir um novo tweet, ele seja exibido na timeline sem atualizar a tela.
Finalizada a inclusão de tweets inseridos na timeline (com a mesma ID do usuario logado), aparecendo a data no formato br, nome do usuário logado, tweet digitado. Ao clicar no botão tweet, ele envia e já mostra na tela, pois chama a função atualiza tweet ao enviar ao banco.
Códigos do projeto até aqui na pasta twitter_clone_5.

Implementar a opção Procurar Pessoas

Criar o procurar_pessoas.php e adicionar o link dele na página home, na área do link Procurar Pessoas.