Acessando API do twitter via OAuth com PHP | Parte 2

Fala pessoal, tudo certo? Dando continuidade a esta série de artigos, hoje vamos ver como buscar e exibir as informações do twitter.

Para quem ainda não viu, recomendo a leitura da primeira parte:
Acessando API do twitter via OAuth com PHP | Parte 1

Para buscar as informações no twitter, basta utilizar o método get() de nossa classe. O primeiro parâmetro é o recurso que será utilizado. Para saber os recursos da API do twitter é só acessar a documentação da API.

Confira a aplicação em funcionamento

1. Informações do usuário autenticado

Para descobrir as informações do usuário autenticado, podemos utilizar o recurso account/verify_credentials.

1
2
3
4

<?php
// @link http://dev.twitter.com/doc/get/account/verify_credentials
$usuario = $connection->get('account/verify_credentials'); 
?>

As informações retornadas pela API são alocadas no objeto $usuario, desse modo podemos exibir todas propriedades do objeto e seus respectivos valores através da função print_r().

1
2
3

<?php
echo '<pre>', print_r($usuario, true), '</pre>'
?>

No caso se eu estiver autenticado com meu twitter (@faael), o código acima irá retornar:

stdClass Object
(
    [verified] => 
    [id_str] => 30599789
    [notifications] => 
    [profile_text_color] => 333333
    [url] => http://faael.net
    [description] => Aficionado por tecnologia, principalmente em relação a web.
    [default_profile] => 1
    [profile_sidebar_fill_color] => DDEEF6
    [default_profile_image] => 
    [following] => 
    [profile_background_tile] => 
    [profile_image_url] => http://a0.twimg.com/profile_images/887089721/IMG0023A_normal.jpg
    [location] => Brasil - Bauru, SP
    [contributors_enabled] => 
    [time_zone] => Brasilia
    [profile_link_color] => 0084B4
    [screen_name] => faael
    [follow_request_sent] => 
    [profile_sidebar_border_color] => C0DEED
    [followers_count] => 121
    [show_all_inline_media] => 
    [geo_enabled] => 
    [favourites_count] => 48
    [created_at] => Sun Apr 12 04:20:49 +0000 2009
    [protected] => 
    [profile_use_background_image] => 1
    [name] => Rafael Couto
    [is_translator] => 
    [lang] => en
    [friends_count] => 219
    [profile_background_color] => C0DEED
    [id] => 30599789
    [listed_count] => 22
    [statuses_count] => 115
    [profile_background_image_url] => http://a3.twimg.com/a/1302724321/images/themes/theme1/bg.png
    [utc_offset] => -10800
)

O resultado acima é apenas pra nós sabermos os nomes das propriedades, pois assim podemos exibir apenas as que interessam para nossa aplicação.

1
2
3
4
5
6
7
8
9
10
11

<img src='<?php echo $usuario->profile_image_url ?>' />
 
<h3><?php echo $usuario->name ?></h3>
 
<big><strong><?php echo '@' . $usuario->screen_name ?></strong></big>
<span class="location"><?php echo $usuario->location ?></span>
 
<p>
    <em><?php echo $usuario->description ?></em> <br />
    <a href='<?php echo $usuario->url ?>'><?php echo $usuario->url ?></a>
</p>

2. Atualizações dos amigos

Para recuperar as atualizações dos amigos do usuário autenticado, podemos utilizar o recurso statuses/home_timeline ou statuses/friends_timeline, a diferença é que o último não mostra os retweets.

1
2
3
4

<?php
// @link http://dev.twitter.com/doc/get/statuses/home_timeline
$timeline = $connection->get('statuses/home_timeline', array('count' => 5)); 
?>

O método get() aceita como segundo parâmetro um vetor com os parâmetros do recurso. Por exemplo, podemos limitar a quantidade de registros que serão retornados passando o parâmetro count. Para saber os parâmetros de um recurso, basta ver na documentação da API.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?php foreach ($timeline as $tweet): ?>
 
    <div class="tweet">
 
        <img src='<?php echo $tweet->user->profile_image_url ?>' />
 
        <span class="usuario">
            <big><a href="http://twitter.com/<?php echo $tweet->user->screen_name ?>/"><?php echo $tweet->user->screen_name ?></a></big> 
            <?php echo $tweet->user->name ?>
        </span>
 
        <br />
 
        <span class="texto">
            <?php echo $tweet->text ?>
        </span>   
 
        <br />
 
        <span class="data">
            <?php echo date('d/m/Y H:i:s', strtotime($tweet->created_at)) ?>
        </span>    
    </div>
 
<?php endforeach ?>

Alguns detalhes:

  • Linha 1: Como um usuário pode ter mais de uma atualização de amigos, percorremos a $timeline utilizando o laço foreach(). Portanto, tudo que está dentro do foreach será exibido para cada atualização;
  • Linha 5: acessamos a propriedade profile_image_url do objeto user (usuário que enviou o tweet), que nos retorna o caminho da imagem de exibição do usuário, este endereço é colocado no atributo src da tag img;
  • Linha 8: exibimos o apelido do usuário, linkando para seu profile no twitter;
  • Linha 21: transformamos a data retornada em string para time através da função strtotime() e depois formatamos ela com a função date().

3. Amigos / Seguidores

Para recuperar os amigos e os seguidores do usuário autenticado utilizamos, respectivamente, os recursos statuses/friends e statuses/followers.

É o mesmo esquema, utilizamos o método get() que nos retorna as informações de um recurso e então exibimos essas informações, como esses recursos retornam mais de um registro, precisamos utilizar o laço foreach().

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
// @link http://dev.twitter.com/doc/get/statuses/friends
$friends = $connection->get('statuses/friends', array('count' => 20)); ?>
 
<p><em>Exibindo 20 amigos de <?php echo $usuario->friends_count ?>.</em> </p>
 
<?php foreach ($friends as $friend): ?>
 
    <a href="http://twitter.com/<?php echo $friend->screen_name ?>">
        <img src='<?php echo $friend->profile_image_url ?>' />
    </a>
 
<?php endforeach ?>
1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
// @link http://dev.twitter.com/doc/get/statuses/followers
$followers = $connection->get('statuses/followers', array('count' => 20)); ?>
 
<p><em>Exibindo 20 seguidores de <?php echo $usuario->followers_count ?>.</em></p>
 
<?php foreach ($followers as $follower): ?>
 
    <a href="http://twitter.com/<?php echo $follower->screen_name ?>">
        <img src='<?php echo $follower->profile_image_url ?>' />
    </a>
 
<?php endforeach ?>

4. Trends

Podemos recuperar também os trends topics, basta utilizarmos o recurso trends/:woeid. O :woeid é um parâmetro numérico que indica a localização dos trends (leias mais aqui), se informado 1, o retorno será os trends mundiais. O woeid do Brasil é o 23424768.

1
2
3
4
5
6
7
8
9

<?php
// @link http://dev.twitter.com/doc/get/trends/:woeid
$trends = $connection->get('trends/23424768'); ?>
 
<ul>
    <?php foreach ($trends[0]->trends as $trend): ?>
        <li><a href="http://twitter.com/search/<?php echo $trend->query ?>"><?php echo $trend->name ?></a></li>
    <?php endforeach ?>
</ul>

5. Atualizações de um usuário especifico

Para exibir as atualizações de um usuário especifico utilizamos o recurso statuses/user_timeline. Passamos como parâmetro o id ou screen_name do usuário.

1
2
3

<?php
// @link http://dev.twitter.com/doc/get/statuses/user_timeline
$timeline = $connection->get('statuses/user_timeline', array('screen_name' => 'faael')); ?>

6. Concluindo

Bom pessoal, infelizmente não é possível eu detalhar todos os recursos, até porque a documentação da API já faz isso, mas tentei pelo menos passar o conceito para acessar um recurso, com isso podemos acessar qualquer recurso disponível na API, basta apenas descobrir o nome do recurso e seus parâmetros na documentação da API.

Qualquer dúvida sobre um recurso que foi ou não abordado aqui, deixe um comentário. Estou aprendendo agora também utilizar a API do twitter, então qualquer sugestão, correção ou melhoria é bem vinda, ok?

Download dos arquivos

Na próxima etapa iremos alterar informações do usuário autenticado. Até breve.
Abraços.

Acessando API do twitter via OAuth com PHP | Parte 1

Olá pessoal, beleza? Nesta série de artigos, pretendo mostrar como acessar a API do twitter via OAuth utilizando PHP, através de uma classe já pronta para simplificar o acesso.

Nesta primeira parte veremos como registrar a aplicação na área de desenvolvedores do twitter e também como fazer a autenticação do usuário.

1. Registrar aplicação

Para registrar uma aplicação, é preciso entrar na área de desenvolvedores do twitter e clicar em Register an app. Agora basta preencher com as informações da aplicação, em resumo:

  • Application Name: O nome da aplicação;
  • Description: A descrição da aplicação;
  • Application Website: O endereço onde o usuário pode acessar ou ver informações da aplicação. Por exemplo: http://rafaelcouto.com.br/artigos/twitteroauth/;
  • Organization: O autor da aplicação, pode ser o nome da empresa ou seu nome;
  • Application Type: Como a aplicação vai ser na web, selecionamos a opção Browser;
  • Callback URL: Aqui vai o endereço que o usuário será redirecionado após autenticar-se na aplicação. Seguindo nosso artigo devemos apontar para o arquivo callback.php. Por exemplo, minha aplicação fica no seguinte endereço: http://rafaelcouto.com.br/artigos/twitteroauth/, portanto o endereço de callback será: http://rafaelcouto.com.br/artigos/twitteroauth/callback.php. É bom ressaltar que o endereço não pode ser localhost;
  • Default Access type: Selecionamos a opção Read & Write, pois nesse artigo iremos buscar informações (read) e também atualizar informações (write);
  • Application Icon: Selecionamos a imagem da aplicação, você pode selecioná-la mais tarde.

Após registrada a aplicação, na página dos detalhes da aplicação, guarde os seguintes valores: Consumer key e Consumer secret. Eles serão necessário para que o twitter reconheça a aplicação.

2. Classe

Depois de testar algumas classes, optei por escolher a do @abraham, pois, na minha opinião, ela é mais flexível e contém menos bugs, apesar de estar em fase beta enquanto escrevo este artigo. Para baixar a classe basta acessar este link e escolher a última versão. Além da classe, já vem alguns arquivos básicos para autenticação. Se você preferir, pode baixar os mesmo arquivos no final do artigo, pois eles foram levemente adaptados e os comentários traduzidos.

3. Configuração (config.php)

Primeiramente, vamos definir as informações de acesso de nossa aplicação

1
2
3
4
5

<?php
// Configurações da aplicação
define('CONSUMER_KEY', '');
define('CONSUMER_SECRET', '');
define('OAUTH_CALLBACK', '');
  • Linha 3 e 4: definimos a Consumer key e Consumer secret da aplicação, para descobrir suas chaves basta ir até os detalhes de sua aplicação na área de desenvolvedores do twitter.
  • Linha 5: definimos a página para onde o usuário será redirecionado após autenticar-se na aplicação. Este endereço deve ser o mesmo que está cadastrado em sua aplicação lá na área de desenvolvedores do twitter.

3. Página inicial (index.php)

Essa é a página principal de nossa aplicação, onde podemos colocar as informações e um botão para acessar a aplicação.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Acessando API do twitter via OAuth com PHP</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
      <h1>Acessando API do twitter via OAuth com PHP</h1>
 
      <a href="redirect.php">Entrar</a>
  </body>
</html>

4. Redirecionando para autenticação (redirect.php)

Essa página será responsável por redirecionar o usuário para a página de autenticação da aplicação.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
// Iniciando sessão
session_start();
 
// Incluindo classe e configurações
require_once('twitteroauth/twitteroauth.php');
require_once('config.php');
 
// Instanciando objeto para acessar a API
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET);
 
// Requisitando tokens temporários para autenticação
$request_token = $connection->getRequestToken(OAUTH_CALLBACK);
 
// Salvando tokens temporários na sessão
$_SESSION['oauth_token'] = $token = $request_token['oauth_token'];
$_SESSION['oauth_token_secret'] = $request_token['oauth_token_secret'];
 
// Verifica a conexão com a API
switch ($connection->http_code) {
  // Se estiver conseguindo conectar
  case 200:
    // Construindo URL de autorização
    $url = $connection->getAuthorizeURL($token);
    // Redirecionando para a página de autorização do twitter
    header("Location: {$url}");
    break;
  default:
    // Se não estiver conseguindo conectar
    echo 'Não foi possível conectar-se ao twitter.';
}

Analisando o código:

  • Linha 10: criamos um objeto da classe passando ao construtor as informações de nossa aplicação que foram definidas na configuração.
  • Linha 13, 16 e 17: através do método getAuthorizeURL() pegamos os tokens temporários necessários para autenticação, depois armazenamos os tokens na sessão, pois utilizaremos eles no callback.
  • Linha 24 e 26: através do método getAuthorizeURL() pegamos a página de autorização passando o token como parâmetro e depois redirecionamos o usuário para esta página.

5. Retornando da autenticação (callback.php)

Essa página será a responsável por receber a resposta da página de autenticação do twitter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<?php
// Iniciando sessão
session_start();
 
// Incluindo classe e configurações
require_once('twitteroauth/twitteroauth.php');
require_once('config.php');
 
// Instanciando objeto para acessar a API e já setando os tokens temporários
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $_SESSION['oauth_token'], $_SESSION['oauth_token_secret']);
 
// Requisitando os tokens que vão permitir o acesso do usuário, passando o verificador retornado pelo twitter
$access_token = $connection->getAccessToken($_REQUEST['oauth_verifier']);
 
// Salvando os tokens de acesso na sessão
$_SESSION['access_token'] = $access_token;
 
// Removendo tokens temporários da sessão
unset($_SESSION['oauth_token']);
unset($_SESSION['oauth_token_secret']);
 
// Verifica a conexão com a API
if (200 == $connection->http_code)
    // Redirecionando usuário para página principal de nossa aplicação
    header('Location: app/painel.php');
else
    // Redirecionando para página responsável por limpar a sessão e redirecionar para página de acesso
    header('Location: ./clearsessions.php');

Analisando o código:

  • Linha 10: criamos um objeto da classe e além de passar as informações de nossa aplicação, definimos os tokens temporários que estão na sessão.
  • Linha 13 e 16: através do método getAccessToken() pegamos os tokens que, finalmente, vão permitir que o usuário permaneça autenticado, perceba que passamos como parâmetro o verificador que é retornado pelo twitter. Depois salvamos o token de acesso na sessão para podermos validá-lo em outras páginas.
  • Linha 25: se tudo ocorreu bem até aqui, redirecionamos o usuário para a página principal de nossa aplicação.

5. Verificando (app/painel.php)

Nas páginas de nossa aplicação, basta verificar se o usuário está autenticado:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
// Iniciando sessão
session_start();
 
// Incluindo classe e configurações
require_once('../twitteroauth/twitteroauth.php');
require_once('../config.php');
 
// Se os tokens de acesso não estiverem setados
if (!isset($_SESSION['access_token']))
    // Redirecionando para página responsável por limpar a sessão e redirecionar para página de acesso
    header('Location: ../clearsessions.php');
 
// Armazenando tokens de acesso
$access_token = $_SESSION['access_token'];
 
// Instanciando objeto para acessar a API
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $access_token['oauth_token'], $access_token['oauth_token_secret']);
  • Linha 10 e 12: Se os tokens de acesso não estiverem definidos, ou seja, o usuário não se autenticou, redirecionamos para página clearsessions.php que será explicada adiante.
  • Linha 15: armazenamos os tokens da sessão em um vetor para simplificar o acesso.
  • Linha 18: finalmente, criamos o nosso objeto final passando as informações da aplicação e os tokens de acesso. Com esse objeto podemos acessar as informações do twitter do usuário autenticado como seus tweets, followers, friends, mentions, etc. Podemos também, seguir alguém, enviar um tweet, enfim, todas as funcionalidades disponíveis na API do twitter.

6. Finalizando sessão (clearsessions.php)

Por fim, este arquivo é responsável por finalizar a sessão do usuário autenticado, redirecionando ele para a página de autenticação de nossa aplicação.

1
2
3
4
5
6
7
8
9

<?php
// Iniciando sessão
session_start();
 
// Limpando sessão
session_destroy();
 
// Redirecionando para página de acesso
header('Location: ./index.php');

7. Concluindo

Bom pessoal, o objetivo desta primeira parte foi concluído. Na próxima etapa vamos começar a “brincar” com as funcionalidades da API. Creio que está primeira parte de autenticação seja a que está confundindo mais o pessoal, pois antes não era necessário todos esses processos.

Download dos arquivos

Espero que vocês tenham entendido. Até breve.
Abraços.

Acessando API do twitter via OAuth com PHP | Parte 2

Login dinâmico com JQuery/PHP/MySQL

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.

Confira o resultado final aqui (para acessar, utilize as informações que foram inseridas de exemplo)

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Entrar</title>
    </head>
    <body>
        <form id="frmLogin" action="ajax/logar.php" method="post">
            <fieldset>
                <legend>Entrar</legend>
 
                <div class="loader" style="display: none;"><img 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>

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:

1
2

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.form.js'></script>
  • Linha 1: incluindo a biblioteca indispensável: jQuery.
  • Linha 2: incluindo um plugin para jQuery, o jQuery Form. Ele facilita a requisição AJAX, pois não precisamos pegar e passar cada campo (como é feito nesse artigo, por exemplo), o plugin já faz este trabalho pela gente.

3. jQuery (index.html)

Nessa parte, vamos recuperar as informações do formulário e enviar para a página PHP. Adicione o seguinte código no cabeçalho de nossa index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// 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;
 
    });
});

Vamos analisar o código:

  • 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.
  • 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;
  • Linha 17: Verificamos se a resposta retornada pelo nosso logar.php é falsa, ou seja, 0;
  • Linha 19: Se a resposta for falsa, significa que o login deu certo, portanto redirecionamos o usuário para seu painel (painel.php);
  • Linha 26: Se o login não deu certo, colocamos a mensagem retornada pelo logar.php na div cujo a classe é mensagem-erro;
  • 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.

4. Conexão e configuração (config/conn.php)

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?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");
}
?>

5. Logando (ajax/logar.php)

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?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';
?>

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.

Vamos a alguns detalhes:

  • 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: 
    $objLogin = new Login('tb_usuarios', 'codigo', 'campo_login', 'campo_senha');
  • 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.

6. Painel do usuário (painel.php)

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:

<?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;
?>

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:

<?php
echo "ID: {$objLogin->getID()} <br />";
echo "Login: {$objLogin->getLogin()}";
?>

Tendo o ID, podemos recuperar todas as suas informações, fazendo um simples SELECT:

1
2
3

// Selecionando informações do usuário
$query = mysql_query("SELECT * FROM usuario WHERE usuario_id = {$objLogin->getID()}");
$usuario = mysql_fetch_object($query);

Sendo assim, podemos mostrar as informações que não estão na sessão:

echo "Bem vindo {$usuario->nome}";

7. Logout (sair.php)

Para finalizar a sessão é muito simples:

<?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');
?>

8. Finalizando

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?

Download dos arquivos

Espero que vocês tenham entendido e que a idéia seja útil para vocês.
Qualquer dúvida, sugestão ou critica construtiva, deixe um comentário ou envie um email.

Até a próxima, abraços.

Upload dinâmico com PHP/jQuery

Olá pessoal, tudo certo? Várias pessoas me perguntam como fazer upload de arquivos com ajax e hoje pretendo apresentar uma solução para isso. Na verdade, não se trata de um upload com ajax, mas sim um upload dinâmico, porém para um usuário comum isso é indiferente.

A solução é simples e conhecida: fazer um iframe contendo um campo do tipo file, fazemos o envio desse arquivo dentro do iframe e então com a ajuda do jQuery recuperamos as informações desse arquivo e trazemos para a página pai. Nesse artigo irei utilizar anexo de arquivos como exemplo.

Confira o resultado final

1. Upload (upload.php)

Inicialmente iremos fazer uma página que fará o upload de um arquivo, assim como é feito normalmente. Caso você tenha dúvidas, pode consultar esses dois artigos: Upload simples de imagem com PHP/MySQL e Upload de vários arquivos com PHP.

<?php
// Flag que indica se há erro ou não
$erro = null;
// Quando enviado o formulário
if (isset($_FILES['arquivo']))
{
    // Extensões permitidas
    $extensoes = array(".doc", ".txt", ".pdf", ".docx", ".jpg");
    // Caminho onde ficarão os arquivos
    $caminho = "uploads/";
    // Recuperando informações do arquivo
    $nome = $_FILES['arquivo']['name'];
    $temp = $_FILES['arquivo']['tmp_name'];
    // Verifica se a extensão é permitida
    if (!in_array(strtolower(strrchr($nome, ".")), $extensoes)) {
		$erro = 'Extensão inválida';
	}
    // Se não houver erro
    if (!isset($erro)) {
        // Gerando um nome aleatório para o arquivo
        $nomeAleatorio = md5(uniqid(time())) . strrchr($nome, ".");
        // Movendo arquivo para servidor
        if (!move_uploaded_file($temp, $caminho . $nomeAleatorio))
            $erro = 'Não foi possível anexar o arquivo';
    }
}
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Upload dinâmico com jQuery/PHP</title>
 
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
 
<body>
 
<form id="upload" action="upload.php" method="post" enctype="multipart/form-data">
    <label>Arquivo: </label> <span id="status" style="display: none;"><img src="image/loader.gif" alt="Enviando..." /></span> <br />
    <input type="file" name="arquivo" id="arquivo" />
</form>
 
</body>
</html>

Bom pessoal, nesse arquivo será feito apenas um upload simples. Resumindo, quando enviado o formulário nós recuperamos as informações desse arquivo, verificamos se sua extensão é válida, caso seja, geramos um nome aleatório para esse arquivo e enviamos para o servidor.

Vamos agora criar nosso código javascript (utilizando jQuery), que será incluído no cabeçalho desse arquivo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

 $(function($) {
        // Definindo página pai
        var pai = window.parent.document;
 
        <?php if (isset($erro)): // Se houver algum erro ?>
 
            // Exibimos o erro
            alert('<?php echo $erro ?>');
 
        <?php elseif (isset($nome)): // Se não houver erro e o arquivo foi enviado ?>
 
            // Adicionamos um item na lista (ul) que tem ID igual a "anexos"
            $('ul#anexos', pai).append('<li lang="<?php echo $nomeAleatorio ?>"><?php echo $nome ?> <img src="image/remove.png" alt="Remover" class="remover" onclick="removeAnexo(this)" \/> </li>');
 
        <?php endif ?>
 
        // Quando selecionado um arquivo
    	$("#arquivo").change(function() {	    
            // Se o arquivo foi selecionado
            if (this.value != "")
            {    
                // Exibimos o loder
                $("#status").show();
                // Enviamos o formulário
                $("#upload").submit();
            }
        });
    });

Talvez não faça tanto sentido agora, porém mais adiante você entenderá melhor, vamos aos detalhes:

  • Linha 3: Como esse arquivo ficará dentro de um iframe, precisamos saber quem é a página pai, para isso definimos uma variável com o documento da página pai;
  • Linha 5, 8: Aqui está um detalhe interessante. Como a linguagem servidor (PHP) é executada primeiro que a cliente (javascript), nós fazemos um teste. Se a variável erro foi definida, nós imprimimos um alert, que depois será executada pelo javascript, que exibirá uma mensagem de alerta com o erro que foi armazenado;
  • Linha 10: Caso não haja erro, e a variável nome foi definida, ou seja, o arquivo foi enviado;
  • Linha 13: Colocamos na lista (que será criada adiante) com ID igual a anexos um item, porém perceba que foi passado no segundo parâmetro do seletor a variável pai, portanto ele irá buscar o ul#anexos da página pai. Nesse item colocamos o nome aleatório do arquivo na propriedade LANG. Logo após, colocamos uma imagem que será responsável por remover o anexo, note que definimos, no evento onclick, a chamada da função removeAnexo(), está será explicada adiante.
  • Linha 18: Quando o usuário selecionar um arquivo.
  • Linha 20: Verificamos se um arquivo foi realmente selecionado.
  • Linha 23: Exibimos nosso loader (carregando).
  • Linha 25: Enviamos o formulário via javascript.

2. A página pai (index.php)

Está será a página principal, onde colocaremos o iframe que incluirá o nosso arquivo de upload:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Upload dinâmico com jQuery/PHP</title>
 
<script type="text/javascript" src="js/jquery.js"></script>
 
</head>
 
<body>
 
<h1>Upload dinâmico com jQuery/PHP</h1>
 
<ul id="anexos"></ul>
<iframe src="upload.php" frameborder="0" scrolling="no"></iframe>
 
<form id="upload" action="index.php" method="post">
    <input type="submit" name="enviar" value="Enviar" />
</form>
 
</body>
</html>

Nessa estrutura, criamos a lista (ul#anexos) onde serão adicionados os anexos, logo abaixo criamos nosso iframe e chamamos nosso arquivo de upload (upload.php). A essa altura, nosso upload dinâmico já está “funcional”, porém precisamos criar a função para remover o anexo:

1
2
3
4
5
6
7
8
9
10
11

// Função para remover um anexo
function removeAnexo(obj)
{
    // Recuperando nome do arquivo
    var arquivo = $(obj).parent('li').attr('lang');
    // Removendo arquivo do servidor
    $.post("index.php", {acao: 'removeAnexo', arquivo: arquivo}, function() {
        // Removendo elemento da página
        $(obj).parent('li').remove();
    });
}
  • Linha 2: Criamos nossa função que receberá como parâmetro o elemento da imagem;
  • Linha 5: A imagem está dentro do item (li), certo? Portanto, através do método parent() selecionamos o item (li) e pegamos o valor da propriedade LANG (Lembra que colocamos o nome do arquivo aqui?);
  • Linha 7: Fazemos uma requisição ajax com nosso próprio arquivo, e passamos como ação ‘removeAnexo’ e também o nome do arquivo anexado. Isso será preciso para que possamos remover o arquivo do servidor;
  • Linha 9: Quando terminado a requisição, removemos o elemento li de nossa página.

Vamos então criar a função PHP (logo no inicio do arquivo) que removerá o arquivo do servidor:

<?php
// Quando a ação for para remover anexo
if ($_POST['acao'] == 'removeAnexo')
{
    // Recuperando nome do arquivo
    $arquivo = $_POST['arquivo'];
    // Caminho dos uploads
    $caminho = 'uploads/';
    // Verificando se o arquivo realmente existe
    if (file_exists($caminho . $arquivo) and !empty($arquivo))
        // Removendo arquivo
        unlink($caminho . $arquivo);
    // Finaliza a requisição
    exit;
}
?>

Parece que agora acabou né? Ainda não. Como iremos recuperar esses anexos quando enviado o formulário? Já que nosso formulário está simplesmente assim:

<form id="upload" action="index.php" method="post">
    <input type="submit" name="enviar" value="Enviar" />
</form>

A solução é criar campos ocultos com os nomes dos arquivos quando enviado o formulário, para isso:

1
2
3
4
5
6
7
8
9
10
11
12

$(function($) {
    // Quando enviado o formulário
    $("#upload").submit(function() {
        // Passando por cada anexo
        $("#anexos").find("li").each(function() {
            // Recuperando nome do arquivo
            var arquivo = $(this).attr('lang');
            // Criando campo oculto com o nome do arquivo
            $("#upload").prepend('<input type="hidden" name="anexos[]" value="' + arquivo + '" \/>');
        }); 
    });
});
  • Linha 3: Quando nosso formulário for enviado;
  • Linha 5: Procuramos cada item (li) em nossa lista de anexo e passamos por cada um através do laço each();
  • Linha 7: Recuperamos o nome (aleatório) do arquivo que foi armazenado na propriedade LANG;
  • Linha 9: Através do prepend() adicionamos um campo oculto (hidden) dentro de nosso formulário (#upload) e colocamos o nome do arquivo como valor. Note que atribuímos o nome como anexos[] para que assim possamos recuperar os anexos já dentro de um array com PHP.

Agora, para fins de teste você pode adicionar o seguinte no inicio do arquivo:

// Se enviado o formulário
if (isset($_POST['enviar']))
{
    echo 'Arquivos enviados: ';
    echo '<pre>';
        // Exibimos os arquivos anexados
        print_r($_POST['anexos']);
    echo '</pre>';
}

Assim, você pode perceber, que quando enviado o formulário, o nome de nossos arquivos ficaram no array anexos e então podemos armazená-los no banco de dados, por exemplo.

3. Finalizando

Bom pessoal, meu objetivo nesse artigo foi apresentar uma alternativa para “simular” um upload com ajax. Se você tiver outra alternativa, compartilhe conosco. Dúvidas ou críticas construtivas são sempre bem vindas.

Download dos arquivos

Espero que vocês tenham entendido, até a próxima.
Abraços.

Carregamento dinâmico de registros com PHP/JQuery/AJAX

Olá pessoal, tudo certo? O artigo de hoje foi baseado em uma sugestão que achei interessante. Trata-se de um carregamento dinâmico de registros, assim como no twitter que, em nossa home, quando clicado em “more” ele nos traz mais tweets. Outro exemplo é o formspring.me que quando clicado em “more” ele nos traz mais perguntas. No nosso caso, iremos utilizar frases como exemplo.

Confira o resultado final, clicando aqui.

1. Banco de dados

Como sempre, vamos criar nossa tabela no banco de dados e incluir alguns registros de exemplo:

-- Estrutura da tabela `frases`
CREATE TABLE IF NOT EXISTS `frases` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `texto` varchar(250) COLLATE utf8_unicode_ci NOT NULL,
  `autor` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=13;
 
-- Extraindo dados da tabela `frases`
INSERT INTO `frases` (`id`, `texto`, `autor`) VALUES
(1, 'A imaginação é mais importante que o conhecimento.', 'Albert Einstein'),
(2, 'O mundo não está ameaçado pelas pessoas más, e sim por aquelas que permitem a maldade.', 'Albert Einstein'),
(3, 'Tente mover o mundo - o primeiro passo será mover a si mesmo.', 'Platão'),
(4, 'Os homens erram, os grandes homens confessam que erraram.', 'Voltaire'),
(5, 'Só os mortos conhecem o fim da guerra.', 'Platão'),
(6, 'Duas coisas são infinitas: o universo e a estupidez humana. Mas, no que respeita ao universo, ainda não adquiri a certeza absoluta.', 'Albert Einstein'),
(7, 'Se minha Teoria da Relatividade estiver correta, a Alemanha dirá que sou alemão e a França me declarará um cidadão do mundo. Mas, se não estiver, a França dirá que sou alemão e os alemães dirão que sou judeu. ', 'Albert Einstein'),
(8, 'Educai as crianças, para que não seja necessário punir os adultos.', 'Pitágoras'),
(9, 'Não existem métodos fáceis para resolver problemas difíceis.', 'René Descartes'),
(10, 'A natureza fez o homem feliz e bom, mas a sociedade deprava-o e torna-o miserável.', 'Jean Jacques Rousseau\r\n'),
(11, 'Muitos odeiam a tirania apenas para que possam estabelecer a sua.', 'Platão'),
(12, 'Os homens dizem que a vida é curta, e eu vejo que eles se esforçam para a tornar assim.', 'Jean Jacques Rousseau');

2. Conexão (conn.php)

Vamos criar nosso arquivo que será responsável pela conexão com o banco de dados:

<?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');
?>

3. Estrutura (index.php)

Agora iremos montar a estrutura inicial de nossa página:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php require_once('conn.php') ?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Carregamento dinâmico de registros</title>
</head>
 
<body>
 
<div id="frases">
    <?php
    // Selecionando as três últimas frases cadastradas
    $query = mysql_query('SELECT * FROM frases ORDER BY id LIMIT 0,3');
    // Exibindo frases selecionadas
    while ($frase = mysql_fetch_object($query))
        echo "<p lang='{$frase->id}'>\"{$frase->texto}\" <br /> <em>{$frase->autor}</em></p>";
    ?>
</div>
 
<span id="status"></span> <a href="javascript:func()" id="mais">Mais frases »</a>
 
</body>
</html>
  • Linha 1: Incluímos o arquivo de conexão;
  • Linha 16: Selecionamos as últimas três frases cadastradas em nossa tabela;
  • Linha 18 e 19: Passamos por cada frase e então exibimos seu texto e autor dentro de um parágrafo (p). Colocamos o id dessa frase dentro da propriedade LANG;
  • Linha 23: Criamos um elemento (span) com ID igual a “status” onde será colocado o loader. Logo adiante criamos um link que será responsável por buscar mais frases.

Portanto, todas as frases estão dentro de uma DIV com ID igual a “frases” e cada parágrafo (p) dentro dessa DIV representa uma frase.

4. jQuery

Agora iremos baixar a última versão do jQuery. Depois de baixado, basta incluí-lo em nossa página (de preferência no cabeçalho):

<script type="text/javascript" language="javascript" src="js/jquery.js"></script>

Incluído o jQuery, vamos ao nosso código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script type="text/javascript" language="javascript">
    $(function($) {
        // Quando clicando em "Mais frases"
        $("#mais").click(function() {
            // Recuperamos o id da última frase selecionada, que foi armazenado na propriedade LANG
            var ultimo = $("#frases p:last").attr("lang");
            // Mensagem de carregando
            $("#status").html("<img src='image/loader.gif' alt='Enviando' />");
            // Faz requisição ajax e envia o ID da última frase via método POST
            $.post("ajax/buscar.php", {ultimo: ultimo}, function(resposta) {
               // Limpa a mensagem de carregamento
               $("#status").empty();
               // Coloca as frases na DIV
               $("#frases").append(resposta);
            });
        });
    });
</script>
  • Linha 4: Quando clicado no nosso link “Mais frases” que tem como ID “mais”;
  • Linha 6: Recuperamos o valor da propriedade LANG do último parágrafo (p:last), ou seja, recuperamos o id da última frase selecionada;
  • Linha 8: Colocamos na DIV “status” a imagem do nosso loader;
  • Linha 10: Fazemos a requisição com nosso arquivo buscar.php e passamos, através do método POST o id da última frase selecionada;
  • Linha 12: Quando terminado a requisição, limpamos a DIV “status”, através do método empty(), ou seja, removemos o loader;
  • Linha 14: Colocamos cada frase retornada na DIV “frases”, logo após o conteúdo já existente, por isso utilizamos o método append().

5. PHP (ajax/buscar.php)

Por último, vamos ao arquivo responsável por buscar as frases, a partir da última já exibida:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php
// Conexão
require_once('../conn.php');
 
// Recuperando informações
$ultimo = (int) $_POST['ultimo'];
 
// Selecionando mais três frases, a partir da última
$query = mysql_query("SELECT * FROM frases WHERE id < {$ultimo} ORDER BY id DESC LIMIT 0,3");
 
// Retornando frases
while ($frase = mysql_fetch_object($query))
    echo "<p lang='{$frase->id}'>\"{$frase->texto}\" <br /> <em>{$frase->autor}</em></p>";
?>
  • Linha 3: Incluímos o arquivo de conexão;
  • Linha 6: Recuperamos o id da última frase selecionada, passado através do método POST;
  • Linha 9: Selecionamos apenas as frases que tem um id menor que o da última, ordenados em ordem decrescente e apenas os três primeiros resultados (LIMIT 0,3);
  • Linha 12 e 13: Passamos por cada frase e então exibimos seu texto e autor dentro de um parágrafo (p). Colocamos o id dessa frase dentro na propriedade LANG, seguindo a mesma estrutura da página inicial.

6. Conclusão

Bom pessoal, por hoje é isso. Vimos mais uma vez a facilidade de manipular os elementos de nossa página com jQuery. Espero que vocês tenham gostado.

Download dos arquivos

Abraços.

Classe PHP para acessar API do twitter

* Está forma de acessar a API do twitter está obsoleta, agora é necessário autenticar-se via OAuth.

Olá pessoal, beleza? Nesse artigo pretendo apresentar uma classe bem interessante que simplifica o acesso à API do twitter.

Você pode baixar a classe no site do autor: http://classes.verkoyen.eu/twitter. Lá você pode encontrar também uma pequena documentação (em inglês) de seus métodos.

Abaixo, vamos ver alguns exemplos de como utilizá-la.

Primeiramente, precisamos incluir a classe em nossa aplicação:

// Incluindo a classe
include('twitter.php');

Para utilizar a maioria dos métodos nós precisamos estar logados, portanto:

// Informações de login
$usuario = 'usuario';
$senha = 'senha';
 
// Fazendo conexão com o twitter
$twitter = new Twitter($usuario, $senha);

1. Primeiro exemplo

Conectados ao twitter, vamos a um exemplo simples:

try
{
    // Atualizando nosso status
    $twitter->updateStatus('Mensagem direto da API.');
    echo 'Mensagem enviada com sucesso';
} 
catch(exception $e)
{
    // Se houver algum erro, exibimos a mensagem
    echo $e->getMessage();
}

Nesse exemplo, através do método updateStatus() nós atualizamos nosso status atual no twitter, ou seja, enviamos um tweet. O código está entre o bloco try pois caso ocorra alguma exceção a classe irá nos retornar uma mensagem de erro. Se ocorrer a exceção, o código irá direto para o bloco catch, onde recuperamos a mensagem de erro e a exibimos.

As mensagens de erro estão em inglês, porém você pode alterá-las no arquivo da classe; elas se encontram próximo ao final do arquivo.

2. Segundo exemplo

try
{
    // Selecionando último tweet enviado
    $tweets = $twitter->getUserTimeline(null, null, null, 1);
    // Armazenando ID do tweet
    $ultimoTweetId = $tweets[0]['id'];
    // Removendo tweet
    $twitter->deleteStatus($ultimoTweetId);
    echo 'Último tweet removido com sucesso';
} 
catch(exception $e)
{
    // Se houver algum erro, exibimos a mensagem
    echo $e->getMessage();
}

Através do método getUserTimeline() nós recuperamos nosso último tweet enviado, pois passamos no quarto parâmetro o valor 1, ou seja, recuperamos apenas 1 tweet, mas nós poderíamos recuperar até 20. Logo abaixo, nós armazenamos o ID desse tweet e então através do método deleteStatus() nós removemos ele.

3. Terceiro exemplo

try
{
    // Definindo o outro usuário
    $outroUsuario = 'faael';
    // Se você não estiver seguindo o outro usuário
    if (!$twitter->existsFriendship($usuario, $outroUsuario))
    {
        // Passa a seguir o outro usuário
        $twitter->createFriendship($outroUsuario);
        echo 'Agora você está seguindo ', $outroUsuario;
    }
    else
    {
        // Para de seguir o outro usuário
        $twitter->deleteFriendship($outroUsuario);
        echo 'Você não está mais seguindo ', $outroUsuario;
    }
} 
catch(exception $e)
{
    // Se houver algum erro, exibimos a mensagem
    echo $e->getMessage();
}

Nesse caso, verificamos se existe uma “relação” entre o usuário logado e o outro usuário, através do método existsFriendShip(). Se não existir, nós passamos a seguir esse outro usuário com o método createFriendship(). Caso essa relação exista, nós passamos a não seguir mais o outro usuário, através do método deleteFriendShip().

4. Quarto e último exemplo

Por fim, vamos a um exemplo completo e mais prático:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" xml:lang="pt-br" />
<title>Classe PHP para acessar API do twitter</title>
</head>
 
<body>
 
<?php
// Incluindo a classe
include('twitter.php');
 
// Informações de login
$usuario = 'usuario';
$senha = 'senha';
 
// Fazendo conexão com o twitter
$twitter = new Twitter($usuario, $senha);
 
// Função para criar links em um tweet
function createLinks($text)
{
    $text = preg_replace("#(^|[\n ])@([^ \"\t\n\r<]*)#ise", "'\\1<a href=\"http://www.twitter.com/\\2\" >@\\2</a>'", $text); 
    $text = preg_replace("#(^|[\n ])([\w]+?://[\w]+[^ \"\n\r\t<]*)#ise", "'\\1<a href=\"\\2\" >\\2</a>'", $text);
    $text = preg_replace("#(^|[\n ])((www|ftp)\.[^ \"\t\n\r<]*)#ise", "'\\1<a href=\"http://\\2\" >\\2</a>'", $text);
    return $text;
}
 
try
{
    // Recuperando últimas 5 atualizações
    $tweets = $twitter->getFriendsTimeline(null, null, 5);
 
    // Passando por cada tweet
    foreach ($tweets as $tweet)
    {
        // Exibindo usuário do tweet
        echo "<strong><a href='http://www.twitter.com/{$tweet['user']['screen_name']}' target='_blank'>{$tweet['user']['screen_name']}</a></strong>: ";
        // Exibindo tweet
        echo createLinks(utf8_encode($tweet['text'])) . '<br />';
    }
 
} 
catch(exception $e)
{
    echo $e->getMessage();
}
 
// Finalizando sessão
$twitter->endSession();
?>
 
</body>
</html>

Nesse exemplo, nós buscamos as últimas 5 atualizações de nossos amigos com o método getFriendsTimeline(). Esse método nos retorna um array com os tweets, portanto percorremos esse array e então exibimos o usuário responsável pelo tweet e a mensagem. A mensagem vem sem formatação, por isso utilizamos a função createLinks() que cria os links na mensagem. Por fim, nós precisamos finalizar a conexão com o twitter, para isso utilizamos o método endSession().

5. Finalizando

Com essa classe fica muito simples utilizar a API do twitter. Utilizei apenas alguns métodos da classe, porém há várias outras funcionalidades, como: recuperar favoritos, bloquear usuário, enviar mensagem direta, alterar foto e background, entre outras.

Download dos exemplos

Espero que a dica seja útil para vocês.
Até a próxima, abraços.

Mostrar e Ocultar informações com JQuery + Cookie

Fala pessoal, tudo bom? Nesse artigo pretendo mostrar como é simples manipular os elementos da página com JQuery. Vamos ver como mostrar e ocultar informações, deixando armazenada a preferência do usuário, utilizando cookies.

Veja o exemplo em funcionamento

1. Estrutura (index.html)

Primeiramente vamos montar a estrutura da página:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Mostrar/Ocultar informações com JQuery + Cookie</title>
 
</head>
 
<body>
 
<h2>Mostrar/Ocultar informações com JQuery + Cookie</h2>
 
<div class="box" id="ingles">
    <img src="image/show_hide.png" align="Mostrar/Ocultar" />
    <h1>Inglês</h1>
    <p class="conteudo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
 
<div class="box" id="alemao">
    <img src="image/show_hide.png" align="Mostrar/Ocultar" />
    <h1>Alemão</h1>
    <p class="conteudo">Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum</p>
</div>
 
<div class="box" id="espanhol">
    <img src="image/show_hide.png" align="Mostrar/Ocultar" />
    <h1>Espanhol</h1>
    <p class="conteudo">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
</div>
 
<div class="box" id="portugues">
    <img src="image/show_hide.png" align="Mostrar/Ocultar" />
    <h1>Português</h1>
    <p class="conteudo">O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>
</div>
 
</body>
</html>

Nesse exemplo usei conteúdos estáticos, porém você poderia selecioná-los de um banco de dados, desde que respeite a hierarquia dos elementos.

2. JQuery

Antes de continuar, baixe a ultima versão biblioteca do jQuery. Também será necessário baixar o plugin para manipulação de cookies.

Agora vamos incluir os scripts em nossa estrutura, entre as tags <head></head> de preferência:

<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.cookie.js"></script>

Pronto, agora sim podemos criar nosso script. Primeiramente iremos criar o evento para ocultar e mostrar as caixas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script type="text/javascript">
// Quando carregar a página
$(function($) {
 
    // Quando clicado em uma imagem das caixas
    $('div.box img').click(function() {
        // Recuperando ID da DIV da qual a imagem se encontra
        var id = $(this).parent('div').attr('id');
        // Armazenando elemento que será oculto
        var conteudo = $('#'+id+' p.conteudo');
        // Escondendo ou exibindo o conteúdo do box
        conteudo.slideToggle(function() {
            // Caso o conteúdo do box esteja visível
            if (conteudo.css('display') == 'block')
                // Cria um cookie que recebe o ID do elemento como nome e o valor 1
                $.cookie(id, 1, {expires: 365});
            // Caso esteja oculto
            else
                 // Cria um cookie que recebe o ID do elemento como nome e o valor 0
                $.cookie(id, 0, {expires: 365});
        });
    });
});
</script>

Vamos a análise:

  • Linha 6: quando clicado em uma imagem (img) que está contida em uma div com classe igual a box (div.box)
  • Linha 8: armazenamos em uma variável o ID da DIV onde se encontra a imagem, para isso utilizamos o parent() que seleciona o elemento pai e depois utilizamos attr() que recupera o valor da propriedade ID.
  • Linha 10: selecionamos as informações que estão no parágrafo com classe igual a conteudo (p.conteudo) que está dentro da box com ID recuperado anteriormente.
  • Linha 12: escondemos ou exibimos (dependendo do estado do elemento) o conteúdo do box, através do método slideToggle(), quando terminado a animação é chamada uma função.
  • Linha 14: verificamos se o box está visível, para isso utilizamos o método css() para recuperar o valor da propriedade display.
  • Linha 16: se estiver visível, setamos um cookie, damos a ele o nome do ID da box e colocamos 1 como valor. O cookie irá expirar apenas em 365 dias.
  • Linha 18, 19: caso o box esteja oculto, também setamos um cookie, porém com valor 0.

Bom, os cookie já estão sendo setados, porém quando o usuário atualizar a página, não há nenhum tipo de verificação para ocultar ou mostrar os elementos de acordo com a preferência do usuário, portanto vamos criar essa função, logo após a função anterior:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// Procurando e passando por cada box da página
$("body").find("div.box").each(function(){
    // Recuperando ID
    var id = $(this).attr('id');
    // Armazenando elemento que será oculto
    var conteudo = $('#'+id+' p.conteudo');
    // Caso o cookie não tenha sido criado
    if ($.cookie(id) == null)
        // Ocultamos
        conteudo.css("display", "none");
    // Se um cookie foi criado e está com 1, ou seja, visível
    else if ($.cookie(id) == 1)
        // Exibimos
        conteudo.css("display", "block");
    // Se um cookie foi criado e está com 0, ou seja, oculto
    else if ($.cookie(id) == 0)
        // Ocultamos
        conteudo.css("display", "none");
});

Análise:

  • Linha 2: percorremos a página (body), através do each() buscando cada div com classe igual a box (div.box).
  • Linha 4, 6: recuperamos e armazenamos o ID e o conteúdo do box.
  • Linha 8, 10: se o cookie com o nome do ID do box estiver nulo (null), ou seja, ainda não foi setado, escondemos o elemento.
  • Linha 12, 14: se o cookie com o nome do ID do box estiver com valor 1, ou seja, o usuário escolheu que ele ficasse visível, exibimos ele.
  • Linha 16, 18: se o cookie com o nome do ID do box estiver com valor 0, ou seja, o usuário escolheu que ele ficasse oculto, ocultamos ele.

3. Conclusão

Podemos perceber que com JQuery é muito simples manipular qualquer elemento de nossa página e com o plugin de cookies também fica simples a manipulação de cookies.

Download dos arquivos

Por hoje é isso pessoal, espero que vocês tenham entendido.
Abraços.

Sistema de votação simples com PHP/JQuery/AJAX

Olá pessoal, hoje vamos montar um sistema de votação bem simples. Irei utilizar como exemplo uma página com algumas frases e o usuário poderá escolher o que ele achou da frase: bom ou ruim. Tudo isso sem refresh na página, claro. Vamos lá?

Veja o resultado final aqui

Os arquivos estão disponibilizados para download no fim do artigo.

1. Banco de dados

Primeiramente vamos criar nossa tabela no banco de dados e inserir alguns registros:

CREATE TABLE IF NOT EXISTS `frases` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `texto` varchar(250) COLLATE utf8_unicode_ci NOT NULL,
  `bom` int(11) DEFAULT NULL,
  `ruim` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=6;
 
INSERT INTO `frases` (`id`, `texto`, `bom`, `ruim`) VALUES
(1, '"A imaginação é mais importante que o conhecimento."', 0, 0),
(2, '"O mundo não está ameaçado pelas pessoas más, e sim por aquelas que permitem a maldade."', 0, 0),
(3, '"Tente mover o mundo - o primeiro passo será mover a si mesmo."', 0, 0),
(4, '"Os homens erram, os grandes homens confessam que erraram."', 0, 0),
(5, '"Só os mortos conhecem o fim da guerra."', 0, 0);

2. Arquivo de conexão (conn.php)

Como de costume, vamos fazer a conexão com o banco de dados:

// Informações para conexão
$host = "localhost";
$usuario = "root";
$senha = "";
$banco = "banco";
 
// Conectando ao banco de dados
$conn = mysql_connect($host, $usuario, $senha) or die (mysql_error());
// Selecionando o banco de dados
$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");

3. Exibindo as frases (index.php)

Em nosso arquivo principal vamos exibir as frases e já deixar no jeito os elementos para mais adiante desenvolver nosso código javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<?php include ("conn.php") ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sistema de votação simples com PHP/JQuery/AJAX</title>
 
</head>
 
<body>
<h1>Sistema de votação simples com PHP/JQuery/AJAX</h1>
 
<?php
// Selecionando todas as frases
$query = mysql_query("SELECT * FROM frases ORDER BY id DESC");
// Passando frase por frase
while ($frase = mysql_fetch_object($query)):
?>
 
<div class="frase" lang="<?php echo $frase->id; ?>">
    <div class="texto"><?php echo $frase->texto; ?></div>
 
    <img src="imagens/bom.png" alt="bom" />
    <span class="bom">
        (<span class="valor"><?php echo $frase->bom; ?></span>)
    </span>
 
    <img src="imagens/ruim.png" alt="ruim" />
    <span class="ruim">
        (<span class="valor"><?php echo $frase->ruim; ?></span>)
    </span>
 
    <div class="status"></div>
</div>
 
<?php endwhile; ?>
</body>
</html>

Mesmo parecendo simples para alguns, vou explicar o que é mais relevante no código:

Linha 1: Incluímos o arquivo de conexão;

Linha 15: Selecionamos todas as frases no banco de dados e ordenamos em ordem decrescente;

Linha 17: Criamos um loop que irá passar frase por frase; tudo o que está entre a Linha 19 e a Linha 35 será criado para cada frase;

Linha 20: Criamos uma DIV e atribuímos a propriedade LANG a ID da frase, para que mais adiante possamos recuperar esse ID com javascript;

Linha 21 a 35: Exibimos as demais informações da frases e também as imagens de bom e ruim;

Linha 26: Finalizamos o loop.

Resumindo, nós criamos uma DIV para cada frase; Essa DIV possui na propriedade LANG o ID da frase, portanto cada DIV representa uma frase, assim podemos manipular as frases facilmente com JQuery.

4. O JQuery (index.php)

Primeiramente vamos incluir o jquery.js:

<script type="text/javascript" language="javascript" src="js/jquery.js"></script>

Agora nós podemos manipular os facilmente elementos da página. Nosso código é o seguinte:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<script type="text/javascript">
$(function($) {
    // Quando clicando em uma imagem da div que tem CLASS = frase
    $("div.frase img").click(function() {
        // Recupera o ID da frase que está na propriedade LANG da DIV-PAI da imagem e que tem CLASS = frase
        var id = $(this).parent("div.frase").attr("lang");
        // Recupera o tipo (bom|ruim) que está na propriedade ALT da imagem clicada
        var tipo = $(this).attr("alt");
        // Seleciona o SPAN onde estão os votos
        var votos =  $("div[lang="+id+"] span."+tipo+" span.valor");
        // Seleciona a DIV onde serão colocadas as mensagens
        var status = $("div[lang="+id+"] div.status");
 
        // Mensagem de carregando
        status.html("<img src='imagens/loader.gif' alt='Carregando...' />");
 
        // Faz a requisição AJAX
        $.post("ajax/votar.php", {id: id, tipo: tipo}, function(resposta) {
            // Se houver uma mensagem na resposta, exibe a mensagem
            if (resposta) 
            {
                status.html(resposta);
            } 
            // Quando a resposta for FALSE 
            else 
            {
                // Incrementa mais um aos votos
                votos.html(parseInt(votos.html()) + 1);
                // Mensagem de sucesso
                status.html("Obrigado por votar!");
            }
        });
 
    }); 
});
</script>

Bom, vou tentar detalhar o máximo possível.

Linha 2: Iniciamos o código, ou seja, isso irá chamar as funções quando a página for carregada;

Linha 4: Quando clicando em uma imagem de uma DIV com class=”frase”, ou seja, quando o usuário clicar sobre as imagens bom ou ruim;

Linha 6: Recuperamos o ID da frase; como foi dito antes o ID está na propriedade LANG da DIV com class=”frase”. Como as imagens estão dentro dessa DIV utilizamos a função parent() para selecionar a DIV e depois utilizamos a função attr() para selecionar o atributo (propriedade) LANG e enfim temos o ID dessa frase;

Linha 8: Recuperamos o TIPO de voto (bom ou ruim); O tipo do voto está definido na propriedade ALT das imagens;

Linha 10: Selecionamos o SPAN onde está o número de votos atual; Selecionamos a partir do ID e do TIPO que já foram recuperados acima;

Linha 12: Selecionamos a DIV onde serão colocadas as mensagens;

Linha 15: Colocamos um loader na DIV status através da função html();

Linha 18: Fazemos a requisição AJAX (função JQuery.post()) com o arquivo ajax/votar.php que será criado adiante. Passamos, através do método post, o ID e o TIPO da frase para que possamos recuperar no arquivo PHP;

Linha 20 a 23: O arquivo PHP irá devolver uma resposta. Se essa resposta for uma mensagem, ou seja, verdadeiro (true), nós colocamos essa mensagem na DIV status;

Linha 26 a 30: Se essa resposta for falsa (false), quer dizer que não há nada de errado, portanto nós incrementamos os votos e colocamos no SPAN onde estão os votos. Depois colocamos a mensagem de sucesso na DIV status.

5. Nosso arquivo PHP (ajax/votar.php)

Bom, esse arquivo é o responsável por alterar os votos no banco de dados.

<?php
// Incluindo arquivo de conexão
include("../conn.php");
 
// Recuperando valores
$id = (int) $_POST["id"];
$tipo = addslashes($_POST["tipo"]);
$cookie = $_COOKIE["votado_".$id]; 
 
// Se o cookie ainda não foi setado
if (!isset($cookie))
{
    // Incrementa o voto da frase
    $query = mysql_query("UPDATE frases SET ".$tipo." = ".$tipo."+1 WHERE id = ".$id."");
    // Se for um sucesso a query
    if ($query) 
    {
        // Seta um cookie
        setcookie("votado_".$id."", true, time()+60*60*24*6004);
        // Retorna false, ou seja, sucesso
        echo false;
    }
    // Se houver erro na query 
    else 
    {
        echo "Problemas no servidor.";
    }
}
// Se já houver um cookie
else
{
    echo "Você já votou nessa frase.";
}
?>

Aqui nós incluímos o arquivo de conexão, recuperamos os valores passados através da requisição AJAX, verificamos se um cookie já foi criado para essa frase, caso não tenha sido criado, incrementamos os votos da frase no banco de dados e criamos um cookie para a frase, caso o cookie tenha sido criado, retorna uma mensagem de erro.

6. Concluindo

Meu objetivo foi tentar mostrar um pouco do poder e da flexibilidade de se trabalhar com JQuery. Fica muito simples manipular qualquer elemento da página e fazer uma requisição AJAX. E claro, apresentar um ideia de como fazer um sisteminha de votação com AJAX.

Download dos arquivos

Espero que vocês tenham entendido; Qualquer dúvida é só entrar em contato, ok?
Abraços.

[Video Aula 2] Listando, Editando, Removendo registros com PHP

Fala pessoal. Depois de muito tempo consegui fazer a segunda parte da Primeira vídeo aula, onde aprenderemos: listar, editar e remover os clientes cadastrados anteriormente. Caso você ainda não tenha assistido a primeira vídeo aula, peço que você dê uma olhada para não ficar perdido.

O som não ficou lá essas coisas, mas espero que vocês gostem.
Abraços.

Assista a video aula, clicando aqui.

Download dos arquivos

Restringindo páginas de forma simples com PHP

Olá pessoal, tudo bom? Nesse artigo pretendo apresentar uma forma simples de restringir uma página com um nome de usuário e senha. Na verdade é uma forma muito simples mesmo; é recomendada para sistemas pequenos, onde necessita restringir algumas páginas para algum administrador.

Para isso, vamos criar um arquivo chamado restrito.php que terá o seguinte código:

<?php
// Definimos o nome de usuário e senha de acesso
$usuario = "usuario";
$senha = "senha";
 
// Criamos uma função que exibirá uma mensagem de erro caso os dados estejam errados
function erro(){
    // Definindo Cabeçalhos
    header('WWW-Authenticate: Basic realm="Administracao"');
    header('HTTP/1.0 401 Unauthorized');
	// Mensagem que será exibida
    echo '<h1>Voce n&atilde;o tem permiss&atilde;o para acessar essa &aacute;rea</h1>';
	// Pára o carregamento da página
    exit;
}
 
// Se as informações não foram setadas
if (!isset($_SERVER['PHP_AUTH_USER']) or !isset($_SERVER['PHP_AUTH_PW'])) {
	erro();
} 
// Se as informações foram setadas
else {
	// Se os dados informados forem diferentes dos definidos
	if ($_SERVER['PHP_AUTH_USER'] != $usuario or $_SERVER['PHP_AUTH_PW'] != $senha) {
		erro();
	}
}
?>

Creio que não será nem necessário explicar o código. Vale apenas ressaltar que devem ser definidos o nome de usuário e a senha. Agora basta incluir esse arquivo no início das páginas que devem ser restritas. Por exemplo:

<?php
// Incluimos o arquivo de restrição
require_once("restrito.php"); 
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Administração</title>
</head>
 
<body>
<h1>Bem vindo a administração!</h1>
</body>
</html>

Mas alguns podem pensar: “Quer dizer que toda hora vou ter que digitar o nome de usuário e senha?”, na verdade não. As informações são salvas na sessão, portanto serão perdidas apenas quando o navegador for fechado.

Lembrando que esse script deve ser usado apenas em pequenos sistemas onde há apenas um ou alguns administradores. Esse script é seguro, porém muito limitado. De qualquer forma, ele pode ser muito útil e poupar um tempo de trabalho.

Bom pessoal, por hoje é isso. Espero que esse script venha a ser útil para vocês.
Abraços.

Envio de formulário sem refresh com JQuery/PHP

Olá pessoal, tudo bom? Hoje, nesse artigo que foi sugerido, irei abordar mais uma opção de fazer uma requisição AJAX, agora com JQuery.

Como exemplo vou utilizar uma página onde o usuário pode deixar sua mensagem sem precisar dar refresh na página. Os arquivos estão disponíveis para download no final do arquivo. Vamos lá.

Veja o código em funcionamento

1. Banco de dados

Primeiramente, como sempre, vamos criar nossa base de dados e inserir alguns registros de exemplo:

CREATE TABLE IF NOT EXISTS `mensagens` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nome` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `mensagem` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;
 
INSERT INTO `mensagens` (`id`, `nome`, `email`, `mensagem`) VALUES
(1, 'faael', 'faelcalves@hotmail.com', 'Hello world!'),
(2, 'Fulano', 'fulano@dominio.com', 'Olá Mundo!');

2. Conexão (conn.php)

Vamos criar também o arquivo responsável pela conexão com nosso banco de dados:

<?php
// Informações para conexão
$host = "localhost";
$usuario = "root";
$senha = "senha";
$banco = "banco";
// Realizando conexão e selecioando banco de dados
$conn = mysql_connect($host, $usuario, $senha) or die(mysql_error());
$db = mysql_select_db($banco, $conn) or die(mysql_error());
// Alterando o charset para utf8, para evitar problemas de acentuação
mysql_set_charset('utf8');
?>

Edite as informações de acordo com as configurações de seu banco de dados

3. A página (index.php)

Criaremos a base da nossa página, com algumas divs e o formulário:

<?php require_once("conn.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Envio de formulário sem refresh com JQuery/PHP</title>
</head>
 
<body>
<h1>Escrever Mensagem</h1>
 
<div id="status" style="display: none;"></div>
 
<div id="escrever">
	<form id="formulario" action="javascript:func()" method="post">
	    <strong>Nome:</strong> <br />
        <input name="nome" type="text" id="nome" size="35" /> <br /><br />
 
	    <strong>Email:</strong> <br />
        <input name="email" type="text" id="email" size="35" /> <br /><br />
 
	    <strong>Mensagem:</strong>  <br />
	    <input name="mensagem" type="text" id="mensagem" size="145" /><br /><br />
 
        <input type="submit" value="Enviar" />
 
    </form>
</div>
 
<h1>Mensagens</h1>
 
<div id="mensagens"></div>
 
</body>
</html>

Bom, agora vamos começar a trabalhar. Primeiramente, iremos baixar a biblioteca do jquery, clique aqui para baixar. Depois de baixado, vamos incluí-lo na nossa página, entre as tags <head></head>:

<script type="text/javascript" language="javascript" src="jquery-1.3.2.js"></script>

Inserido o jquery, vamos colocar as mensagens do banco de dados na div mensagens:

<div id="mensagens">
	<?php
	// Buscamos e exibimos as mensagens já contidas no banco de dados
	$query = mysql_query("SELECT * FROM mensagens ORDER BY id DESC");
	while($mensagem = mysql_fetch_object($query)) {
		echo "<strong>" . $mensagem->nome . "</strong> disse: <em>" . $mensagem->mensagem . "</em><br />";
	}
	?>
</div>

Retornando no jquery, vamos agora criar a função que fará a requisição ajax, essa deverá estar entre as tags <head></head> também:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<script type="text/javascript" language="javascript">
$(function($) {
	// Quando o formulário for enviado, essa função é chamada
	$("#formulario").submit(function() {
		// Colocamos os valores de cada campo em uma váriavel para facilitar a manipulação
		var nome = $("#nome").val();
		var email = $("#email").val();
		var mensagem = $("#mensagem").val();
		// Exibe mensagem de carregamento
		$("#status").html("<img src='loader.gif' alt='Enviando' />");
		// Fazemos a requisão ajax com o arquivo envia.php e enviamos os valores de cada campo através do método POST
		$.post('envia.php', {nome: nome, email: email, mensagem: mensagem }, function(resposta) {
				// Quando terminada a requisição
				// Exibe a div status
				$("#status").slideDown();
				// Se a resposta é um erro
				if (resposta != false) {
					// Exibe o erro na div
					$("#status").html(resposta);
				} 
				// Se resposta for false, ou seja, não ocorreu nenhum erro
				else {
					// Exibe mensagem de sucesso
					$("#status").html("Mensagem enviada com sucesso!");
					// Coloca a mensagem no div de mensagens
					$("#mensagens").prepend("<strong>"+ nome +"</strong> disse: <em>" + mensagem + "</em><br />");
					// Limpando todos os campos
					$("#nome").val("");
					$("#email").val("");
					$("#mensagem").val("");
				}
		});
	});
});
</script>

É nessa função que praticamente tudo acontece. Vou tentar detalhar mais ela:

Linha 4: Chamamos a função quando o formulário é enviado, ou seja, no evento submit.

Linha 6,7,8: Colocamos os valores de cada campo do formulário em uma variável correspondente, para que assim facilite a manipulação desses valores.

Linha 10: Colocamos na div status a imagem de “carregando”. Você pode criar seus próprios “loaders” no ajaxload.info.

Linha 12: É aqui que chamamos o arquivo envia.php que fará a validação dos dados e, se corretos, a adição dos mesmos no banco de dados. No primeiro parâmetro, passamos o arquivo, no caso o envia.php; No segundo passamos os valores que serão passados pelo método POST; No terceiro chamamos a função que tratará da resposta no final da requisição.

Linha 15: Exibimos a div status com o efeito slideDown(); Lembrando que o display da div deve ser none, senão não haverá efeito.

Linha 17: Verificamos se a resposta é diferente de false, ou seja, se houve algum erro.

Linha 19: Se houver erro, a mensagem de erro é colocado na div status.

Linha 22: Se não houver nenhum erro na validação.

Linha 25: Colocamos na div status uma mensagem de sucesso.

Linha 27: Colocamos na div mensagens a nova mensagem que foi enviada. A propriedade prepend adiciona um conteúdo antes do conteúdo original da div.

Linha 29,30,31: Limpamos os campos do formulário.

4. PHP (envia.php)

Só restou criar o envia.php, que fará toda a validação dos dados e irá adicioná-los no banco de dados, pra quem conhece php, creio que não terá nenhuma novidade:

<?php
// Incluimos o arquivo de conexão
require_once("conn.php");
// Recuperamos os valores dos campos através do método POST
$nome = $_POST["nome"];
$email = $_POST["email"];
$mensagem = $_POST["mensagem"];
// Verifica se o nome foi preenchido
if (empty($nome)) {
	echo "Escreva seu nome";
} 
// Verifica se o email é válido
elseif (!eregi("^[a-z0-9_\.\-]+@[a-z0-9_\.\-]*[a-z0-9_\-]+\.[a-z]{2,4}$", $email)) {
	echo "Digite um email válido";
} 
// Verifica se a mensagem foi digitada
elseif (empty($mensagem)) {
	echo "Escreva uma mensagem";
} 
// Verifica se a mensagem nao ultrapassa o limite de caracteres
elseif (strlen($mensagem) > 140) {
	echo "A mensagem deve ter no máximo 140 caracteres";
} 
// Se não houver nenhum erro
else {
	// Inserimos no banco de dados
	$query = mysql_query("INSERT INTO mensagens VALUES ('', '".$nome."', '".$email."', '".$mensagem."')");
	// Se inserido com sucesso
	if ($query) {
		echo false;
	} 
	// Se houver algum erro ao inserir
	else {
		echo "Não foi possível inserir a mensagem no momento.";
	}
}
?>

Aqui simplesmente verificamos se os dados são válidos e retornamos apenas uma resposta, ou seja, uma mensagem de erro ou um “false” (Esse valor define que tudo está correto);

5. Conclusão

Bom pessoal, é isso; tentei explicar da melhor forma possível de forma rápida. Espero que vocês tenham entendido, qualquer dúvida só entrar em contato, ok?

Download dos arquivos

Abraços.

Classe Validação de Formulário

Olá pessoal, tudo bom?

Hoje vou compartilhar uma classe bem interessante que foi adaptada por Túlio Spuri a partir da classe de validação do framework Codeigniter.

Faça o dowload da classe aqui.

Essa classe facilita muito a vida para nós que precisamos estar sempre validando dados que vem de formulários de forma rápida. Para ver alguns exemplos de utilização da classe, clique aqui.

Você pode encontrar mais informações da classe no seguinte link:
http://alunos.dcc.ufla.br/~tulios/classe-php-validacao/index.php/principal

Espero que essa classe ajude vocês, pois eu utilizo a do codeigniter e realmente é muito útil. Até a próxima pessoal.

Atualizar DIV de segundos em segundos com PHP/XAJAX

Olá pessoal. Farei esse artigo a pedido de uma sugestão e também por ser um assunto bem interessante e interativo. Veremos como atualizar um div de segundos em segundos, ou seja, a cada N segundos iremos colocar um valor em uma DIV. Bom, vamos lá.

Clique aqui para ver o projeto pronto

Irei utilizar como exemplo uma página que exibe frases sortidas (que estão no banco de dados) a cada 10 segundos. Para buscar os dados no banco a cada atualização utilizarei o framework XAJAX, por isso recomendo que você de uma olhada nesse artigo (caso não conheça o framework): Desenvolvimento interativo com o Framework XAJAX.

1. Banco de dados

Primeiramente vamos criar nossa tabela no banco de dados e inserir algumas frases:

CREATE TABLE IF NOT EXISTS `frases` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `frase` varchar(255) NOT NULL,
  `autor` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
 
INSERT INTO `frases` (`id`, `frase`, `autor`) VALUES
(1, '"Os homens erram, os grandes homens confessam que erraram."', 'Voltaire'),
(2, '"O que sabemos é uma gota, o que ignoramos é um oceano."', 'Isaac newton'),
(3, '"Penso, logo existo."', 'René Descartes'),
(4, '"Educai as crianças, para que não seja necessário punir os adultos."', 'Pitágoras'),
(5, '"Todo o homem é culpado do bem que não fez."', 'Voltaire'),
(6, '"A natureza fez o homem feliz e bom, mas a sociedade deprava-o e torna-o miserável."', 'Jean Jacques Rosseau');

Criamos uma tabela com três campos: a id da frase¹, a frase² e o autor da frase³.

2. PHP/XAJAX

Agora nós precisamos criar a função XAJAX responsável pela busca das frases no banco de dados:

<?php
// Conexão com o banco de dados
$conn = mysql_connect("localhost", "usuario", "senha");
$db = mysql_select_db("banco", $conn);
 
// Incluindo a biblioteca do xajax
require_once("xajax/xajax_core/xajax.inc.php");
 
// Instanciamos a classe
$xajax = new xajax();
 
// Registramos a função atualizar()
$xajax->registerFunction("atualizar");
 
// Criamos a função atualizar(), que será responsável por atualizar a div
function atualizar() {
        //Instância do objeto de resposta do Ajax
	$objResponse = new xajaxResponse();
 	// Buscamos uma frase
	$query = mysql_query("SELECT * FROM frases");
	// Verificamos o número de frases
	$numFrases = mysql_num_rows($query);
	// Sorteamos uma frase
	$sortido = rand(0, $numFrases - 1);
	// Frase sortida
	$frase = mysql_result($query, $sortido, 1);
	// Autor da frase sortida
	$autor = mysql_result($query, $sortido, 2);
	// Construimos a resposta
	$resposta = "<i>" . $frase . "</i><br />" . $autor;
	// Colocamos a frase e seu respectivo autor na div
	$objResponse->assign("frase", "innerHTML", $resposta);
	// Devolve a resposta para a página
	return $objResponse;
}
 
// Função para processar as requisições (indispensável)
$xajax->processRequest();
?>

Legal. Agora vamos construir a base de nossa página, que deve conter a div com id igual a “frase”, pois a resposta do XAJAX será devolvida nessa div:

<html>
<head>
<title>Frases sortidas: Atualizar DIV de segundos em segundos com PHP/XAJAX</title>
</head>
<body onload="xajax_atualizar()">
<h1>Frases sortidas</h1>
<div id="frase"></div>
</body>
</html>

Perceba que no código acima, na tag body, chamamos a função xajax_atualizar() no evento onload, ou seja, quando carregar a página, se isso não for feito, a página terá de esperar 10 segundos para chamar a função e a frase não apareceria no início.

O framework XAJAX requer a impressão do código javascript, sendo assim, chamamos a seguinte no cabeçalho (head):

<?php
// Método para que seje gerado as funções javascript do XAJAX
$xajax->printJavascript("xajax/");
?>

E finalmente iremos utilizar a função javascript que vai fazer o trabalho de atualizar a div para nós:

<script language="javascript" type="text/javascript">
// Chamamos a função criada com XAJAX a cada 10 segundos
setInterval("xajax_atualizar()", 10000);
</script>

No código javascript acima nós utilizamos a função setInterval() que chama alguma função em um determinado intervalo de tempo (em milésimos); No nosso caso, iremos chamar a função atualizar() criada com XAJAX, ou seja, xajax_atualizar() a cada 10000 milésimos, ou seja, 10 segundos.

Bom então nosso projeto fica da seguinte maneira:

<?php
// Conexão com o banco de dados
$conn = mysql_connect("localhost", "usuario", "senha");
$db = mysql_select_db("banco", $conn);
 
// Incluindo a biblioteca do xajax
require_once("xajax/xajax_core/xajax.inc.php");
 
// Instanciamos a classe
$xajax = new xajax();
 
// Registramos a função atualizar()
$xajax->registerFunction("atualizar");
 
// Criamos a função atualizar(), que será responsável por atualizar a div
function atualizar() {
        //Instância do objeto de resposta do Ajax
	$objResponse = new xajaxResponse();
 	// Buscamos uma frase
	$query = mysql_query("SELECT * FROM frases");
	// Verificamos o número de frases
	$numFrases = mysql_num_rows($query);
	// Sorteamos uma frase
	$sortido = rand(0, $numFrases - 1);
	// Frase sortida
	$frase = mysql_result($query, $sortido, 1);
	// Autor da frase sortida
	$autor = mysql_result($query, $sortido, 2);
	// Construimos a resposta
	$resposta = "<i>" . $frase . "</i><br />" . $autor;
	// Colocamos a frase e seu respectivo autor na div
	$objResponse->assign("frase", "innerHTML", $resposta);
	// Devolve a resposta para a página
	return $objResponse;
}
 
// Função para processar as requisições (indispensável)
$xajax->processRequest();
?>
<html>
<head>
<title>Frases sortidas: Atualizar DIV de segundos em segundos com PHP/XAJAX</title>
<?php
// Método para que seje gerado as funções javascript do XAJAX
$xajax->printJavascript("xajax/");
?>
<script language="javascript" type="text/javascript">
// Chamamos a função criada com XAJAX a cada 10 segundos
setInterval("xajax_atualizar()", 10000);
</script>
</head>
 
<body onload="xajax_atualizar()">
<h1>Frases sortidas</h1>
<div id="frase"></div>
</body>
</html>

Clique aqui para fazer download do projeto

Bom pessoal, espero que vocês tenham entendido e que esse artigo possa ser útil a você. Qualquer dúvida entre em contato através de email ou comentário.

Abraços.

Classe para login de usuário em PHP

[28/04/2011]
Veja um exemplo prático do uso da classe: neste artigo.

Olá pessoal, hoje vou fazer esse artigo a pedido de uma sugestão. Irei apresentar a vocês um classe para fazer autenticação do usuário, verificar se ele está autenticado e encerrar a sessão. Em muitos projetos é preciso fazer uma área restrita que só quem possui um login pode entrar. É ai que entra essa classe.

Clique aqui para fazer download da classe

1. Banco de dados

Primeiramente vamos criar nossa tabela no banco de dados, e inserir alguns usuários:

CREATE TABLE IF NOT EXISTS `usuarios` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `login` varchar(28) NOT NULL,
  `senha` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0;
 
INSERT INTO `usuarios` (`id`, `login`, `senha`) VALUES (1, 'faael', '1234');
INSERT INTO `usuarios` (`id`, `login`, `senha`) VALUES (2, 'rafael', '4321');

2. Logar

Para realizar o login, precisamos criar um formulário para o usuário colocar seu login e sua senha, porém, nesse artigo vou apenas demonstrar a parte do PHP. Portanto, vamos supor que o login e a senha já tenham vindo de um formulário:

<?php
// Conexão com o banco de dados
mysql_connect("localhost", "usuario", "senha");
mysql_select_db("banco");
 
// Recuperando os dados do formulário
$LoginUsuario = $_POST["LoginUsuario"];
$SenhaUsuario = $_POST["SenhaUsuario"];
 
// Incluimos a classe
require_once("login.class.php");
 
/* 
Instanciamos a classe. A função Login(), aceita como parametros facultativos: 
nome da tabela, nome do campo de login, nome do campo de senha, mensagem de erro.
Por padrão, o nome da tabela é "usuarios", o campo de login é "login", o de senha é "senha"
e a mensagem de erro é "Login ou senha inválido".
*/
$login = new Login();
 
/* 
Realizamos o login através da função logar() da classe, 
que aceita como parametro obrigatório: o login e a senha. 
E como terceiro parametro: página que o usuário será redirecionado. 
Ou seja: logar(login, senha, redirecionamento)
*/
$logar = $login->logar($LoginUsuario, $SenhaUsuario, "area_restrita.php");
 
// Se o login ou senha estiver incorreto, exibe mensagem de erro
if ($logar)
	echo $logar;
?>

3. Verificar

Bom agora precisamos verificar se o usuário está logado na página restrita (“area_restrita.php” no nosso caso):

<?php
// Incluimos a classe
require_once("login.class.php");
 
// Instanciamos a classe
$login = new Login();
 
/* 
Utilizamos a função verificar() que verifica se o usuário está logado. 
Ela aceita como parâmetro facultativo para onde o usuário será redirecionado
caso ele não esteja logado. No caso, ele não estiver logado, 
será redirecionado para a página de login (login.php).
*/
$login->verificar("login.php");
 
/*
Se ele estiver logado, mostramos a mensagem de bem-vindo.
A váriavel $LoginUsuario é criada assim que é constado que o
usuário está logado.
*/
echo "Bem vindo " . $LoginUsuario;
?>

4. Logout

E para finalizar a sessão do usuário, fazemos da seguinte maneira:

<?php
// Incluimos a classe
require_once("login.class.php");
 
// Instanciamos a classe
$login = new Login();
 
/*
Realizamos o logout através da função logout(), 
que aceita como parâmetro facultativo o local para onde o usuário
será redirecionado.
*/
$login->logout("login.php");
?>

Bom pessoal, apresentei a classe meio que rápido, porém já é possível utilizá-la. Qualquer dúvida em relação a essa classe, entre em contato, ok?

Abraços.

Download do manual do PHP em português

Olá pessoal, como todos sabem no site do PHP é disponibilizado o Manual do PHP, onde podemos encontrar práticamente tudo sobre a linguagem. Porém, acho que, poucos sabem que você pode baixar o manual do PHP (em português) e utilizá-lo em seu computador, sem a necessidade de estar conectado na internet. É muito útil quando você precisa buscar a utilidade de uma função, de forma rápida.

- Você também pode baixar diretamente o Arquivo de Ajuda (.chm):
php_manual_pt_BR.chm

- Eu também fiz um instalador simples, apenas para usuários de windows:
manual_php.rar

Hoje, só quis compartilhar essa dica com vocês. Bom uso do manual =)
Abraços.